A Deep Dive Into SVG Paths — This is a very well presented interactive guide to understanding SVG paths and path commands, covering cursors, lines, bézier curves, and more. The inline comments are a neat feature offering extra context, and the creator is looking to release a more complete Interactive SVG Animations course later this year.

Nanda Syahrasyad

New Course: The Hard Parts of UI Development — Develop an under-the-hood knowledge of UI development by learning techniques such as data binding, UI composition, templating, virtual DOM and its reconciliation, and hooks, all from scratch!

Frontend Masters sponsor

Useful DevTools Tips and Tricks — Having worked on the developer tools in both Firefox and Edge, Patrick knows his stuff (he's shared over 100 tips on his tips site). In this post, he shares his top 15, including disabling event listeners, copying element styles, visualising a page in 3D, and even changing the language of DevTools itself.

Patrick Brosset (Microsoft)

In Defence of DOMContentLoaded — A solid explainer on measuring browser events and the use cases for DOMContentLoaded (and its related events) in particular. "The DOMContentLoaded event fires once all of your deferred JavaScript has finished running."

Harry Roberts

What Does the decoding Attribute on Images Do? — An in-depth look at what the decoding attribute sets out to do, the nuance behind it, how it may have some performance gains in certain circumstances, and whether to consider it as part of your overall image rendering strategy.

Barry Pollard

An Introduction to the View Transitions API — The experimental View Transitions API offers an easier way to animate between DOM states and even between page loads. Here’s a look at how to use this progressive enhancement.

Craig Buckler

React Authentication — Without Complexity — Userfront streamlines authentication & access control so engineers can focus on their core business. Read the docs now.

Userfront sponsor

First-Person Scrollers — There’s something of a parallel between videogames and browser engines when it comes to them both having to maintain a solid, smooth frame rate. Eric notes how the evolution of web technologies and fresh new ideas, has to be balanced with meeting performance and rendering considerations. (I also just like the Halo-inspired UI here.)

Eric Meyer

"I Made 7 Predictions for the Web for the Next 5 Years" — A mixed bag of hits and misses here, but always fun to check in on some prior predictions.

Fagner Brack

SvgPathEditor: Edit and Save SVG Path Data — Lets you adjust all sorts of configuration and path settings while interactively adjusting the path via nodes in the browser. Could be handy for creating adhoc bits of SVG.

Yann Armelin

Hurl 4.0.0: Powerful CLI HTTP Request Scripting — A powerful command line tool that runs HTTP requests written (scripted, really) in a plain text format. It can also be used to test HTTP responses and you can use variables to carry over elements of a response into a fresh request. It just hit version 4.0.

Orange

Minimal CLS Font Adjustment: A Tool to Automatically Match the Fallback Font for Improving CLS — By now you’ve likely heard of 'cumulative layout shift' (a.k.a. CLS) and all its drawbacks. This tool aims to help you find matching fallback fonts to minimize the issue. It uses the size-adjust CSS descriptor for the @font-face at rule. (Note: Not supported in Safari yet.)

Malte Ubl

Automize: The Missing Chrome DevTools Element Selector — Claims to offer a ‘more intuitive’ GUI inside your devtools to make it easier to target deeply-nested elements, and works with test frameworks like Puppeteer, Playwright, Cypress, and Selenium.

Automize

Zero-Runtime CSS with Vanilla Extract — Vanilla Extract is an alternative to CSS-in-JS (if that's your bag) that allows writing zero-runtime CSS in TypeScript. "Basically, it’s “CSS Modules-in-TypeScript” but with scoped CSS Variables + heaps more."

Leonardo Maldonado

Creating a Ferris Wheel with Just CSS — Fancy a trip to the fair without even having to stand up? This is a neat, animated demo made using only CSS. (Take care: it seems quite resource intensive.)

Amit Sheen codepen