Issue 107 June 27th 2025

Accessibility

Using ARIA Labels Like a Pro

One of the first issues any automated a11y tool will flag is missing ARIA labels. And honestly, it’s one of the easiest fixes to make.

But before going crazy and adding aria-labels to every element, let’s understand their purpose, how they improve a11y, and how to use them without overcomplicating our codebase.

htmx accessibility gaps: data and recommendations

Every few months I’m asked about possible accessibility issues with a UI built with htmx. It’s super popular in the Django world, so felt worthwhile to take the time to dig deeper! Time to spell out where htmx shines, and where it falls short.

htmx has a mixed track-record. It can be made to work well, but the official accessibility docs don’t tell a good story about it, tend to oversimplify it as "just use HTML and it’s accessible". And lots of tutorials and examples are poorly implemented, which seems to show in scoring real-world sites.

Practically – simple htmx-powered interfaces can be made accessible. But go beyond the basics and you’ll likely find yourself reinventing the wheel without much support, or have to complement htmx with a UI components library.

CSS

Sticky revealing footer

A quick video showing you how to apply very little CSS to get that nice, revealing from the bottom effect on your footer.

CSS Color Functions

CSS has a number of functions that can be used to set, translate, and manipulate colors. Learn what they are and how they are used with a bunch of examples to get you started.

Color Everything in CSS

An introduction to "Color spaces", "Color models", "Color gamuts," and basically all of the "Color somethings" in CSS.

A guide to Scroll-driven Animations with just CSS

CSS animations have come a long way since Apple first introduced them to the web in 2007. What started as simple effects like animating from one color to another has turned into beautiful, complex images twisting and flying across the page.

But linking these animations to user behavior like scrolling has traditionally required third-party libraries and a fair bit of JavaScript, which adds some complexity to your code. But now, we can make those animations scroll-driven with nothing more than a few lines of CSS.

The customizable select - Part four: Scroll snapping, state queries, monster hunter, and gamification

I tried to tackle UI gamification with a Monster Hunter-inspired select element. This demo covers my approach to CSS, scripting, and accessibility.

At the time of this writing, it looks like this only works in Chrome/Edge. This uses a very new feature with limited availability. This is more clear in Part 1 of the series.

calc-size()

The calc-size() function value allows you to do calculations on the intrinsic size of an element.

Printing the web: making webpages look good on paper

Declan Chidlow takes us on a really interesting tour of the often, under-reported world of print stylesheets, how to use them and also how to debug them.

Dots loader using shape()

Recreating a 3 dots loader using shape() and animating it using CSS variables and @property.

The mythical magical button

How to create a minimal stylesheet with modern CSS that allows you to create a whole new range of buttons with just a single custom property.

JavaScript

JavaScript broke the web (and called it progress)

We don’t just tolerate complexity anymore – we expect it. We assume that every site needs a build step, a bundler, a hydration strategy, a routing layer, an API layer, a design system, and some clever cache invalidation logic. We build in microservices, host on edge networks, and deploy pipelines to ship basic content.

It doesn’t matter if you’re publishing a blog post or an ecommerce site – the stack is the same. Heavy, abstract, engineered to the edge of usefulness.

And nobody understands it. Not fully.

It’s easier to win an argument by citing SSR compatibility issues than it is to ask, “Why are we using React for a blog?”

Coding a 3D Audio Visualizer with Three.js, GSAP & Web Audio API

A music-driven visualizer where a glowing 3D orb pulses and spikes to the beat while GSAP-draggable panels drift around it with smooth, inertia-powered motion.

Demo here, code here.

TuxRacer.js - Play Tux Racer in your browser

Bored waiting for builds or deploys?

Glide down snowy slopes at high speeds, collect fish, and master tight turns in this fast-paced downhill racing game.

You can thank me later.

Github repo here.

Bringing React's <ViewTransition> to vanilla JS

I like React. I really do. It is the default answer for modern web development, and it is that answer for a reason. Generally when React adds a feature it is well thought through, within the React system of thinking. My one criticism is that React by its nature overthinks things, that dumber and simpler solutions would often be on the whole ... better. Less magic, more predictable.

So when I port framework features to vanilla JS, don't take this as a slight of that framework. It is meant as an exploration of what dumber and simpler solutions might look like, when built on the ground floor of the web's platform instead of the lofty altitudes of big frameworks. It is a great way to learn.

Which brings me of course to today's topic: view transitions, and how to implement them.

A Better API for the Intersection and Mutation Observers

Zell discusses refactoring the Resize, Mutation, and Intersection Observer APIs for easier usage, demonstrating how to implement callback and event listener patterns, while highlighting available options and methods.

Tips for making regular expressions easier to use in JavaScript

Explore ways in which we can make regular expressions easier to use.

Node.js 24: Your Next Big Frontend Upgrade?

Open source software developer Matteo Collina, a member of the Node.js Technical Steering Committee, has a question for you: Why aren’t you updating Node.js?

And why, for pity’s sake, are downloads of the unsupported Node 12 growing when Node 20 is already in maintenance mode?

That led to his pitch for why you should update Node.js: In a word, security.

ambient.garden: An Algorithmic Audio Landscape

A musical landscape in a website. All the music in ambient.garden is generated from code. The music is then laid out in a landscape which can be explored, either interactively, or automatically when the autopilot is left on.

Github repo here.

Ecma International approves ECMAScript 2025: What’s new?

On 25 June 2025, the 129th Ecma General Assembly approved the ECMAScript 2025 language specification, which means that it’s officially a standard now.

Modern Node.js Patterns for 2025

Node.js has undergone a remarkable transformation since its early days. If you’ve been writing Node.js for several years, you’ve likely witnessed this evolution firsthand—from the callback-heavy, CommonJS-dominated landscape to today’s clean, standards-based development experience.

The changes aren’t just cosmetic; they represent a fundamental shift in how we approach server-side JavaScript development. Modern Node.js embraces web standards, reduces external dependencies, and provides a more intuitive developer experience. Let’s explore these transformations and understand why they matter for your applications in 2025.

You're Overthinking Web Components

Learn how Web Components excel at progressively enhancing server-rendered HTML without worrying about additional dependencies, shadow DOM, or going full SPA.

UX

The Evolution of UX Design in the Age of AI Platforms—From Creator to Choreographer

The headlines are stark: junior UX design roles are disappearing, AI can generate wireframes in seconds, and UX recruitment has slowed to levels we’ve not seen since 2019. For experienced UX designers who have built careers on their mastery of the craft of user-interface (UI) design, these developments might feel existential. But there is a crucial distinction that we should not overlook: AI is automating execution, not expertise.

It’s never been easier to ship new ideas. Are you playing with the latest AI tools? Are you solving real problems around you?

Or are you waiting for someone to hand you a backlog again?