Issue #444

January 27, 2021

How To Avoid Layout Shifts Caused by Web Fonts

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.

A Newsletter That Will Help You Grow in 2021

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.

Get inspired

Articles & Tutorials

Building a Sidenav Component

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.

How To Design Highly Performant Animations and Micro-Interactions

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

Styled-Components vs. Emotion-JS for Handling CSS

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

Checkerboard Reveal

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

Seven Ways To Test for Accessibility of Your Web Site With Browser Developer Tools

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

Master the Skill of Debugging CSS

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.

Learn more

Tools

Introducing Open Web Docs

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.