Issue #444

Simon Hearne explains how to optimize layout shifts caused by late-loading web fonts.

Vitaly Friedman outlines some of the changes made on Smashing Magazine to optimize the web performance and improve the Core Web Vitals metrics.

I’m running another newsletter called Inspiration Bits. The content is not technical but rather inspirational; it intends to initiate change bit by bit, person by person. It’s for the people who seek progress, who want to thrive and improve. It’s for you.

Adam Argyle shows how to build a responsive, stateful slide-out sidenav component that supports keyboard navigation, works with and without Javascript, and across browsers.

Rob O’Leary explains how to create highly performant animations and micro-interactions.

Kasra Khosravi compares CSS-in-JS libraries styled-components and Emotion, outlining their differences, drawbacks, and benefits.

Geoff Graham demonstrates how to create an interesting reveal effect using CSS.

Christian Heilmann outlines some tips on testing accessibility with built-in browser developer tools.

Ahmad Shadeed wrote an ebook full of tips and techniques on how to debug CSS, which will help you significantly reduce the time you spend on debugging and fixing CSS bugs.

Use the coupon code “cssweekly” at checkout to get a 15% discount.

Robert Nyman introduces Open Web Docs, a collective project designed to support a community of technical writers around strategic creation and long-term maintenance of web platform technology documentation that is open and inclusive for all.

JPEG.rocks is an online, privacy-aware JPEG optimizer.

Michal Porag created a lovely illustration using pure CSS.