Accessibility
AIMAC, the AI Model Accessibility Checker
We prompted the top AI models to build web pages across 28 categories and audited them for accessibility. We published every generated page, side by side, so you can see how different models tackled the same design challenge.
Which Model is Best?
GPT 5.4 Mini by OpenAI is the new #1 model on AIMAC. It achieves a median AIMAC Debt of 0.00 for $0.95 across all 28 categories, with 22 total accessibility violations. GPT 5.3 Codex also has zero median debt and slightly fewer total violations (20), but costs $3.02, so GPT 5.4 Mini is the stronger all-around pick.
The next tier is still OpenAI: GPT 5.5 ranks #3 with a debt of 3.32, GPT 5.5 Pro ranks #4 at 3.43, and open-weight gpt oss 120b ranks #5 at 3.85 for just $0.09.
Clickable table rows are a bad idea
Whole table rows might feel like obvious candidates to be clickable areas, but making them interactive creates real accessibility problems.
CSS
Using Scroll-Driven Animations for Opposing Scroll Directions
Sometimes designers have silly ideas that eventually grow on you. That happened to me with this concept where I had to build columns of items moving in opposite directions when a user scrolls the page.
It’s really not as hard as you might think, thanks to modern CSS features, specifically scroll-driven animations.
Responsive Separator for Horizontal List
Separating a horizontal list of items with a divider is a common design pattern. The tricky part is making sure we have separators only between adjacent items, never at the beginning or the end of the row/line.
There are many hacky ways to solve this, but the new Gap Decoration feature offers a simple, modern solution. No more hacks and only a few lines of code to get the shape of the divider you want.
The Goldilocks customizable select height
Jake Archibald explores the complex task of styling a custom dropdown (<select>) menu using the modern CSS Anchor Positioning API.
CSS Container Queries + Subgrid: The Layout Trilogy That's Now in Every Browser
CSS layout has undergone three distinct evolutionary leaps over the past eight years. Together, CSS Grid, Subgrid, and Container Queries replace JavaScript-dependent layout workarounds with pure CSS. This tutorial walks through building a responsive card grid component that uses all three features, first in plain HTML and CSS, then integrated into a React component.
The Shifting Line Between CSS States and JavaScript Events
CSS has always had pseudo-classes that style things when baed on user interactions. Recent features, however, are blurring the line between what CSS "listens" for and how they are alternatives to what Javascript typically listens for.
Wiggly/Wavy Input Range Slider II
Improving the wiggly/wavy range slider with a fancy tooltip showing the input value. It's an ugly one that follows the thumb and bounces in all directions.
An animated radial gradient mask over text in CSS
Here's a technical walkthrough of how I made a fun little demo to mask some text in a clever way with CSS.
CSS Logical Properties Converter
Logical properties adapt to writing-mode, direction, and text-orientation — making your CSS work correctly in RTL, vertical, and other non-LTR layouts. Paste your physical CSS on the left and get the logical equivalent on the right, with a full property reference below.
background-clip is getting an upgrade
By clipping backgrounds to the border, padding, content, or text, you can create advanced UI effects—like gradient text or gradient borders—using just CSS and a single HTML element.
I Love the New CSS corner-shape Property
Learn how the new CSS corner-shape property lets you create angled, concave, and squircle corners for some truly unique designs.
HTML
HotFX Pseudorandom
Chaos on a web page sounds bad, but just the right amount can tie everything together, like adding a pinch of salt to your pancakes.
The <hotfx-pseudorandom> element brings random movement to your web pages. It’s kinda like the new random() function coming soon to CSS, but it’s got animation built in.
How to Monitor Your Meta Tags
Meta tags do more than feed SEO. Learn how title, description, Open Graph, robots, canonical, and hreflang tags break, and how to monitor them on live pages.
Introducing the <usermedia> HTML element
Following the launch of the <geolocation> element in Chrome 144, the next functional control in the Capability Elements suite is the <usermedia> HTML element. Available from Chrome 151, this element marks the next phase of the transition from generic permission requests to targeted and functional controls for accessing camera and microphone streams. By moving away from script-triggered prompts toward a declarative and user-activated experience, <usermedia>reduces boilerplate code, improves security, and provides a seamless recovery path for users who have previously denied access, effectively solving the long-standing permission hole.
On the semantic web
The easiest way to make an interface harder to maintain is to rebuild the browser badly.
A div can look like a button. It can be given a click handler, a pressed style, a hover state, a focus ring, an ARIA role, a keydown listener for Enter, another one for Space, a disabled class that hopefully also blocks interaction, and enough attributes to convince assistive tech that it is interactive.
Or it can be a button.
That sounds obvious until you look inside a lot of modern component libraries. The visual layer is treated as the source of truth, then the behaviour is patched back on afterwards.
JavaScript
GolemUI - The Declarative Form Engine
Underneath every form is a serializable JSON definition. Author it directly as schema-validated JSON, or with the typed gui builder API.
- One definition renders in React, Angular, Lit, Vue, or vanilla JS.
- Validation, conditional fields, i18n, and accessibility come from the schema and runtime.
- The output is plain data: store it, transfer it, diff it, generate it.
React Testing Questions That Trip Up Engineers
Most frontend engineers, I would hope, write tests every day. Even though now with AI the writing might be more prompting and asking AI to write tests, they're still a crucial part of our work day. And most frontend engineers are very familiar with the patterns for writing frontend tests (such as querying for elements with screen.getByRole, rendering with render(), testing hooks with renderHook()).
But there are some questions which can trip people up when talking about how they test React apps. These can often come up in interviews. They can be a good way to gauge how much people really write their own tests & understand what is going on.
Excalibur.js - Your friendly TypeScript 2D game engine for the web
Excalibur is a free game engine written in TypeScript for making 2D games in HTML5 canvas. Our goal is to make it easier for you to create 2D HTML/JS games, whether you're new to game development or you're an experienced game developer. We take care of all of the boilerplate engine code, cross-platform targeting), and more. Use as much or as little as you need.
Every New JavaScript Feature Worth Knowing Right Now
ES2025 has fully landed in browsers, ES2026 is wrapping up, and a few ES2027 proposals just crossed the finish line. Here is every new feature that is actually worth your time.