Issue 170 September 18th 2026

Accessibility

Does this menu work with keyboard? The surprising number of big brands that fail

I really wanted to highlight how low the bar is for this type thing. While a couple work as-expected the vast majority have issues.

If industry-leading brands with entire design and engineering departments are letting basic bugs like this hit production, we have a real standard-of-quality problem. The quiet, pervasive devaluation of frontend speaks to some of the reasons to why this is happening. When only 5% of Frontend jobs mention WCAG, we have an issue.

Using the browser console for accessibility testing - Part 2

This article follows on from Using the browser console for accessibility testing.

The examples show how simple console scripts can help identify accessibility features and potential issues directly in the browser.

You can use the testing page to try each script as you work through the examples.

Support for headers Attribute

This post only covers the headers attribute in HTML tables (ARIA has no headers equivalent).

Avoid spanning and/or compound headers given inconsistent support. The headers attribute is largely useless. Mobile screen reader / browser pairings generally ignore row and column headers, spanned or not. Desktop screen reader / browser pairings handle spanned header cells just as well without a headers attribute as with (with the mild exception of Safari).

WCAG Accessibility Guidelines Explorer

Learn and understand web accessibility standards with interactive demos showing violations vs. solutions. Covers WCAG 2.2, 10+ categories, and future standards.

CSS

CSS Curiosities of the Past

As I’ve detailed odd and context-specific HTML, this is a look at CSS largely outside the specifications. Browser-specific hacks, technology-scoped syntax, and engine-exclusive snippets forged from questionable circumstances, corporate complications, and esoteric implementations.

My Opinionated CSS Reset

I, like many others,have a CSS reset that I apply to many projects as part of an effort to ensure comfortable development. ‘Reset’ is perhaps not quite the correct diction, as much of this is opinionated and not purely returning to a clean slate.

Link parameters for SVG

The simplest approach is using SVG is the <img> element, but until now its come with a big restriction: there was no way to control the colors of the SVG from CSS. Link parameters are a way to set CSS custom environment variables on an SVG <img>.

The link-parameters CSS property is supported in Firefox Nightly. Other aspects of the spec are not implemented anywhere. All the examples in this article require Firefox Nightly to work. Implementation work is ongoing in Chrome/Edge. You can vote for the inclusion of link parameters in Interop 2027.

neat-annotations — neat hand-drawn CSS annotations

Arrows and handwritten labels for your website. Pure CSS, no JavaScript.

Using maths to balance your heading styles

A simple system for styling heading levels using a modular scale.

Comparing Values With CSS progress()

There is a new progress() function in CSS that maps a given value against a value range. It can be used for layout scaling, but it can do more, as you’ll see in this article where progress() is used to work out a boolean-like logic to conditionally style elements.

Remove start and end margins with the margin-trim property

How the new CSS margin-trim property can eliminate unwanted margins at the start of containers, particularly in multi-column layouts. margin-trim: block-start lets the container trim the first element’s top margin, keeping column content aligned without removing normal paragraph margins. Support is emerging, with Chrome 155 supporting it for multicol layouts while Safari’s support remains incomplete.

Better Icon and Label Alignment

There is a common design pattern that sometimes gets missed or overlooked. It’s having a list of items, each with an icon. When the text is one line, the icon is centered, but when the text has multiple lines, the icon is still centered but looks odd.

Throughout this article, I will show two solutions that I use based on the HTML:

The icon is an HTML element (e.g., <svg> or <img>)
The icon is added via a pseudo-element as a background image

Sidenotes with CSS anchor positioning

Sidenotes positioned in the margin with CSS anchor positioning, without JavaScript. They fall back below the paragraph referencing them on narrow viewports and older browsers.

Stop Treating CSS Container Queries Like Traditional Media Queries

Despite broad browser support, container queries remain surprisingly underused and frequently misunderstood. Let’s look at how they differ from media queries, when to reach for each, and how container queries help reusable components respond naturally to the contexts in which they appear.

Complex border-only Shapes with Gradient Coloration

You can combine border-shape and border-area to easily border-only shapes with gradient coloration easily. No more hacks or complex code, just 3 lines and you're done.

Extracting Grid Information Using CSS

Demonstrates how modern CSS can calculate and expose the number of rows/columns and the exact grid position of arbitrarily placed or spanning items. It uses CSS custom properties, math functions, and scroll-driven animations to extract grid-line information without JavaScript.

Non-rectangular shape with border and rounded corners

Exploring techniques for creating non-rectangular UI shapes with borders and rounded corners. It demonstrates several approaches for combining CSS geometry, clipping, pseudo-elements, and masking to achieve shapes that are difficult with ordinary border-radius alone.

HTML

My HTML Boilerplate

You don't need much going on in your head.

2026: 2 of the Global Top 200 Websites Use Valid HTML

Among websites, being part of the 1% is a good thing—the latest findings from the annual study about the most important and simultaneously most difficult language in the world.

Esoteric HTML – ismap vs CSS

If you're young, you may never have heard of Image Maps. Back in the bad-old-days, there weren't many good options for laying out a pixel-perfect HTML page. One option was to draw your website in an image editor, load it into a website as an image, and then make certain areas of the image clickable.

Why width and height Still Matter for HTML Images

Explains why adding intrinsic width and height attributes to <img> elements helps prevent layout shifts . These attributes let the browser determine the image’s aspect ratio and reserve space before the image loads, while CSS like max-width: 100%; height: auto keeps images responsive. It also contrasts this approach with CSS aspect-ratio, which is better when a component needs a fixed shape or cropping.

JavaScript

melonJS | A Modern & Fully Featured HTML5 Game Engine

melonJS is an open-source 2.5D game engine for indie developers: perspective and orthogonal cameras, GPU-accelerated tilemap rendering, 3D mesh & glTF scenes, post-processing and custom shaders, and polygon-accurate physics. Runs on WebGPU, WebGL 2 or Canvas2D with automatic fallback. The whole engine is ~250 KB minzipped of vanilla JS/TS, with no dependencies and no toolchain lock-in.

Demo here.

Every Single-Page App Is a Worse Browser Running Inside a Browser

Good intentions snowball into a shitty browser inside a browser. A team decides the server will speak JSON and the client will do the rest, and four runs later they've rebuilt the back button, the cache, scroll restoration and the URL by hand, worse. With a yeti.

From 1,256ms to 96ms: Fixing INP in a Massive React Dropdown

On a mobile device with a throttled CPU, opening that dropdown stopped being instant. It became one of the worst interactions on the entire page.

We tracked the root cause down to the mounting cost of opening the menu. Our MenuList component received the entire array of 1,175 brands. Opening the menu forced React to simultaneously create ~1,175 Option component instances (each containing a label and a custom Checkbox, generating several DOM nodes).

All this happened in a single synchronous commit, even though the visible window only had space to show about 6 rows at a time.

We didn't rewrite everything from scratch, nor did we import massive third-party virtualization libraries. We attacked the exact root cause using standard React APIs.

Plasma UI - Liquid panels for React

Inspired by Apple's Liquid Glass design. The <Plasma> panel looks and behaves like liquid, with surface tension that fuses on contact with other panels. Anything visible behind the panel is refracted. And for layout convenience, the panels ultimately snap to a grid layout. The library is a work in progress, extracted from the Crux Garden project, but it seemed useful enough to share in it's current form.

Github repo here.

UX

Five eras of UX design and the lessons to keep in the AI era

User Experience did not begin with Don Norman’s job title at Apple. The work is older than the name, and most of it is older than anyone teaching it.

You can earn a degree in this field and never hear about John Karlin shaping telephones at Bell Labs in the 1940s, the principles and laws we follow in UX Guidelines, or about the decade the web spent learning to organize itself. School hands you tools, methods and critique; it rarely hands you the history that explains why the tools exist.

Here‘s user experience in five eras, with rough dates, what each got right, and what each left you holding that you should put down. This is not nostalgia. Other histories slice the same decades differently — by interface paradigm, by platform, by tool — and those cuts are just as valid; this one is organized around the lesson each era kept and the habit it should have dropped.

The era you are in rewards the people who can tell the durable lessons from the expired ones.