Refactoring CSS: Strategy, Regression Testing and Maintenance — A detailed guide on taking an incremental approach to refactoring CSS, with pointers on strategy, visual regression testing, and maintaining a refactored codebase.

Adrian Bece

The 2021 Scroll Survey Report — The Chrome team has shared the results from its ‘Scroll Survey Report’ and here are the highlights of the results with detail on how this impacts priorities and plans for Chromium.

Adam Argyle & Sam Dutton (Google)

Build a Zoom Clone by Following Working Code — Build an audio/video conferencing application like Zoom or Teams to talk to your friends and family. Follow along with fully functioning code and customize and enhance to unleash your creativity. Show us what you can build.

SignalWire sponsor

Creating an Accessible Dialog from Scratch — Dialogs are everywhere in modern interface design, and yet many of them are not accessible to assistive technologies. This article digs into how to create a short script to create accessible dialogs.

Kitty Giraudel

Aligning a Button Label Vertically — Yup, each and every font can have a unique line-height, with differing spacing both above and below the text — this can often cause problems when trying to align content. Here’s what to do about it.

Ahmad Shadeed

A Framework for Building Open Graph Images — The team at GitHub recently set about creating a framework and service for automatically generating social sharing images for repositories and other resources. Here’s the story.

Jason Etcovich

Application Performance Monitoring in Real Time — Learn how to use time series data for real-time observability into application performance, systems and network metrics.

InfluxData sponsor

Practical Use Cases for Scroll-Linked Animations in CSS with Scroll Timelines — Some practical use cases where scroll-linked animations (an experimental spec for now) may come in handy, and how they can enrich your visitor’s browsing experience.

Bramus Van Damme

How MDN’s Autocomplete Search Works — Autocomplete search was recently added to the excellent MDN Web Docs. Here’s a look at how the feature was implemented.

Peter Bengtsson (Mozilla)

Break HTML Content Into Newspaper-Like Columns with Pure CSS — Sometimes, the things you might think are tricky to implement can turn out to be a matter of just a few lines of code if you read the documentation.

Amit Merchant

'Safari Isn't Protecting The Web, It's Killing It' — Tim presents a clear argument for why Apple’s browser is failing when it comes to feature support, API proposals, release cadence, bug fixing, and more.

Tim Perry opinion

Glitter Text: Generate and Download Text with a Glitter Effect — Saves as an SVG. There’s a surprisingly detailed explanation here.

wh0

Meyda: A JavaScript Audio Feature Extraction Library — The homepage has quite a visually striking demo. It supports both offline feature extraction as well as real-time feature extraction using the Web Audio API.

Rawlinson, Segal, Fiala, Wray, et al.

Snowflake Generator: Generate a Random or Custom Snowflake Image — One of those things that’s just fun to tweak the settings on and play with. You can use a button to export as JPG, or just right click the result to download as PNG.

Vivian Wu

vanilla-tilt.js: A Smooth 3D Tilting Effect Library — No dependencies. GitHub repo.

Șandor Sergiu

Monitor Lighthouse Scores and Core Web Vitals

DebugBear sponsor

SVG Gobbler: Browser Extension to Download and Optimize SVGs From Any Website — Available for Firefox and Chrome, and among other things offers the ability to transform the SVG code into a React component, bulk export from a page, or copy the image as SVG code.

ross moody

Scroll-Kaiju: Take Godzilla for a Walk — This is a cute animated CodePen demo - scroll horizontally to take the nuclear monster for a stroll.

Tom Miller codepen