CSS Container Query Units — I’ll start by saying that CSS container queries are currently only supported via an experimental flag in Chrome, Edge, and Opera. However it’s always worth staying ahead with these sorts of things — Ahmad digs into the benefits.

Ahmad Shadeed

30 Seconds of CSS: Useful CSS Snippets You Can Understand Quickly — We linked to the first version of this a few years ago but it’s been updated and more than doubled in size since then. It’s a handy collection of CSS snippets for various situations like hover menus or dynamic shadows.

30 seconds of code

Auth Without Complexity — They’ve re-engineered authentication and access control from the ground up to remove all the complexity. Check out examples for React, Vue, Node.js and more.

Userfront sponsor

Optimizing Images on the Web — Cloudflare has a new testing tool for highlighting possible improvements you can make in delivering images to visitors. This post highlights what those improvements are (think format, size, quality, etc).

Greg Brimble (Cloudflare)

The Future of CSS: Cascade Layers (CSS @layer) — “When authoring CSS we have to carefully think about how we write and structure our code. Cascade Layers aim to ease this task.”

Bramus Van Damme

How to Record Audio Using the MediaStream API — A practical introduction to using the Media Capture and Streams API to record audio from an end user’s microphone then do something with it.

Shahed Nasser

Chrome Is The New Safari. And So Are Edge and Firefox — Thoughts on the long standing WebKit-only browser landscape on iOS.

Niels Leenheer opinion

Building a Split-Button Component — A foundational overview of how to build an accessible split-button component.

Adam Argyle

Troubleshoot Frontend Performance Incidents Faster with Datadog — Monitor page load times with First Contentful Paint, DOM Content Loaded, Time to Interactive, and other frontend metrics.

Datadog sponsor

Exploring the CSS Paint API: Polygon Border — Here's the latest entry in a series exploring the CSS Paint API, this time looking at how to go about adding a border to a clip-path.

Temani Afif

Make Microsoft Edge DevTools 'Your Own' — A nice look at the ways you can make Edge’s DevTools suit your own preferenes.

Microsoft Edge Team

Small Bundles, Fast Pages: What To Do With Too Much JavaScript — Bundle size matters and this post touches on a few ways to monitor and improve it.

Ben Schwarz (Calibre)

Web Quality Assurance: From User Requirements to Web Risk Management — Elie Sloïm has spent the last 20 years thinking about web quality assurance, asking “What does quality mean for a web user?”. This article explains everything he has learned along the way.

Smashing Magazine

Mechanic — An open source framework that claims to make it easy to create custom, web-based design tools that export design assets right in your browser.

Design Systems International

Animated Gradient Background Generator — You can edit the color stops, angle, and speed of the animation, which works by animating the background-position property

John Polacek

Basic Pattern Repository — A nice collection of straightforward SVG patterns.

Thomas Michael Semmler

html-to-react: A Lightweight Library That Converts Raw HTML to a React DOM Structure

Arve Knudsen

Free Chat/Messaging UI Kits for Your Website or App

Stream sponsor

Atrament.js 2.0: A Library for Smooth Drawing on HTML Canvas

Jakub Fiala