Accessibility
The Dunning-Kruger effect in accessibility
If you write invalid code, it throws an error. If you get the layout wrong, you can see it when it renders. But, if you build a custom component that doesn’t work with a keyboard, nothing really happens. Your unit tests pass, the page renders, and everything looks fine. So, you ship it!
The people that can’t use it usually won’t file a bug report. They’ll just close your website or delete your app. So you don’t really get any signals telling you that something is wrong. And, a lack of signals, feels a lot like you’re doing everything right!
I’ve been thinking about why this happens so often in accessibility, and it keeps bringing me back to an old study, and a term which gets thrown around a lot in product development. The Dunning-Kruger effect.
Understanding aria-valuetext
This article explains aria-valuetext in plain language. It show how to give a numeric value a more useful text description for assistive technology.
CSS
Detect when elements overlap with CSS
Detecting when two elements overlap using only CSS anchor positioning and scroll-driven animations.
Randomly Place an Element Along Edge of Another Element
Explores using the modern CSS offset-path property to randomly position an element along the border/edge of another element.
Improving site performance by shipping more CSS
The Primer Design System powers many of the experiences you see on GitHub today. From buttons to banners to breadcrumbs, these foundational components are required to be accessible, flexible, and performant across a wide variety of scenarios.
Back in 2023, the number of components on certain pages began to explode. This led to several performance-related challenges with our existing CSS-in-JS solution.
The Primer team found a solution that met all of our criteria: CSS Modules. This format would allow us to do one of our favorite things: write and use native CSS features, while still allowing some amount of the colocation and encapsulation that we had come to expect from CSS-in-JS.
Implementing children-count() using Modern CSS
We can get the number of siblings using sibling-count() but we cannot get the number of children yet. There is a proposal for a children-count() function, but until we get an official release, we can hack it using Scroll-Driven Animations.
Stop buttons triggering zoom when they’re double tapped
It’s annoying when your browser zooms if a button is rapidly tapped. What’s actually happening here is the browser is responding to the double tap gesture, which in the case of Safari on iOS, zooms into the button element I’m tapping. Luckily there’s a CSS one-liner for us that gets the job done.
HTML
No errors, no warnings, no gods, no masters - HTML Purity is a Fetish
You can write utterly malformed, derranged, non-standards complaint HTML and most browsers will just say "Yeah, sure, whatever dawg!" and render it adequately.
It is said that one of the reasons HTML succeeded is that it is lax about validation. Most programming languages will shit the bed if you dare to leave out so much as a single semicolon.
JavaScript
7 Useful JavaScript Features Added in ECMAScript 2026
Seven practical additions that remove boilerplate, simplify everyday patterns, and fix a few long-standing JavaScript pain points.
Custom Attributes polyfill
Custom Attributes are "Custom Elements, but for attributes". You subclass Attr, register it under a hyphenated name, and every matching attribute on a connected element is upgraded in place to an instance of your class, with lifecycle callbacks mirroring custom elements. Where a custom element models what an element is, a custom attribute models a behaviour an element has, and can be applied to any element: HTML, SVG, MathML, or another custom element.
useRef in React: Refs vs State, DOM Access and React 19
When to use useRef instead of useState, how DOM refs and ref callbacks work, and what React 19 changed: ref as a prop, no forwardRef, ref cleanup.
UX
The 100 Most Common UX Design Methods, Ranked by Value
100 top UXD methods ranked by breadth, altitude, persuasion, and cost. AI prototyping wins as the highest-value method. Cheap framing methods crowd the rest of the top 10, because deciding what to build outscores building it. Expensive workshop rituals sink, and 6 famous methods have a high risk of being design theater. AI is shrinking the cost column and will devalue the persuasion column, but judgment gets scarcer as production gets free.
Reading Progress Bars are Bad UX
What's the point of reading progress bars? I'm talking about the bars that run across the top of the screen as you scroll through an article.
As I'm scrolling down the page, my browser's scrollbar already tells me how much of the article I have left to read.
The built-in scrollbar is where my eye naturally goes to see how far I've read. And it works on every site.
Putting another scrollbar across the top of the page just causes additional distracting movement.
Interfaces Cheat Sheet
A practical collection of UI/design guidelines covering interface design, animation, typography, color, accessibility, layout, and writing.
Miscellaneous
soundcn - Free Sound Effects for Modern Web Apps
700+ curated UI sound effects for modern web apps. Browse, preview, and install sounds with a single command.
Website Sucker — Back Up, Archive & Transfer Any Website Online
Paste a URL. Watch every page, image, stylesheet, script and font get pulled down in real time. Your first scrape is free up to 50 pages; see exactly what was captured, then $1.99 downloads the whole site as a ZIP, up to 250 MB (about 600 pages).