Accessibility
Why Moving Away from SPAs improves Usability, Accessibility, and SEO
For years, Single Page Applications (SPAs) built with frameworks like React have dominated the web development landscape. They promised fluid transitions, dynamic interfaces, and app-like experiences. But as performance bottlenecks, accessibility challenges, and SEO limitations become more apparent, many teams are reconsidering this approach.
A threat model for accessibility on the web
Accessibility is not alone in being a complex, highly specialised field, or even in being neglected.
I think accessibility is unique in the scale of the surface area where problems can arise, compared to the size of the community of practice.
I say “community of practice” specifically, because there is a tendency for non-practitioners to assume the field can be trivially reduced to checklists, or at best a straightforward, late-stage effort to “fix up” any accessibility issues. The unacknowledged assumption seems to be that problems can be addressed with rote, mechanical effort, and thus that accessibility can be relegated to a low-skill profession: performed by those who lack enough talent to succeed in more valuable fields, or undertaken with ease by people with real skill in other areas.
Why Sticky Navigation Can Undermine Accessibility
“Sticky navigation” or “sticky nav” is a software design and implementation technique in which a header, menu, or other element remains fixed to the top or side of the screen as the user scrolls. Sticky navigation is extremely popular, especially on mobile devices. Designers often use it to keep navigation accessible at all times, assuming it helps users by reducing clicks or making menus easier to find. But for many people with disabilities, sticky navigation creates more problems than it solves. When implemented without consideration for accessibility, it almost always interferes with screen readers and magnification, blocking essential content and creating cognitive and physical barriers.
A guide to creating accessible PDFs using free tools
If you really do (seriously, really do) need to create a PDF, Steve has your back to help you make sure you make that PDF accessible without having to fork out for Adobe Acrobat Pro.
CSS
CSS-only floating focus with anchor positioning
The Track focus debug tool in Polypane shows a floating outline that follows the keyboard focus around the page. This makes it easier to keep track of where the focus is and lets you determine (along with the focus overlay in Polypane) if the focus order makes sense.
The Best CSS Unit Might Be a Combination
There are many articles and established CSS best-practices that rely on determining the correct or best units to use. Now that comparison functions are well supported in CSS, we don’t have to choose.
Start using Scroll-driven animations today
To celebrate scroll-driven animations finally landing in Safari 26, here are some things you probably want to know before using them.
Taking a shot at the double focus ring problem using modern CSS
A double focus ring is really useful in general but especially so with complex, themed systems. Eric Bailey shows us how to develop a really smart system, using modern CSS.
How much do you really know about media queries?
Earlier this year, I realized that I knew very little about possibly most of the media queries. Maybe that’s not surprising — since I never hear about them.
Beyond the classics like @media(min-width: 400px) and the user-preference media queries such as @media (prefers-reduced-motion: reduce), and maaaybe orientation, I can’t say that I was using media queries a whole lot. Especially since flexbox, grid layout, and calc() became fairly normalized, in addition to newer sizing values such as min-content, max-content, fit-content, and more recently, stretch.
But there are so many descriptors. Most of them I’ve never used.
Styling siblings with CSS has never been easier. Experimenting with sibling-count and sibling-index
Ready to spice up your CSS? This article dives into the new sibling-count() and sibling-index() functions, showing you how they can simplify your styling and create cool effects.
CSS to speech: alternative text for CSS-generated content
While making an update to a course chapter that includes the use of CSS-generated content in the accessible name computation of an element, I noticed that browser support for providing alt text in CSS using the slash syntax has improved since I gave a talk about CSS and accessibility at CSS Day last year. So I thought it's time to do a proper (long overdue) writeup. This is a 101 post on when and how to use the slash content property syntax in CSS to provide alt text for CSS-generated content, and why it is important.
Range Selection using Modern CSS
A new way to select elements in a specific range using if() and sibling-index().
A few fun nesting tips & tricks
There are some handy things that you can do with nesting, espcially when you start moving the & placeholder around.
JavaScript
The Right Tool for the Job: An In-Depth Look at JavaScript Array Loops
When you first start learning to code, you quickly get introduced to the classic for and while loops. But as you dig deeper into JavaScript, you discover there are many newer, "fancier" ways to iterate over an array. If you're like me, you've probably wondered: "Why are there so many options, and when should I use which one?"
In this article, we'll explore the nuances of each iteration method, clarifying their ideal use cases and highlighting the key distinction between direct index control and sequential traversal.
Create Sick Web Animations in Three.js with GSAP
Have you ever wondered how to create smooth animations for your threeJS web app? Luckily, we have a very handy tool called GSAP.
GSAP is a high-performance and robust Javascript animation library that allows the user to create and animate anything written in Javascript (CSS properties, canvas library objects, SVG, React, Vue, Angular, generic objects, etc.). Instead of writing complicated CSS files to animate an object, GSAP allows you to animate an object with a single function call and translates it to run across multiple different browser platforms. This makes it extremely easy to create animations and simplifies the entire process. Sounds great, doesn’t it? Let’s see how to use it.
You Can Now Make PS2 Games in JavaScript
I recently discovered that you could make PS2 games in JavaScript. I’m not even kidding, it’s actually possible.
HTML3D
HTML3D is a lightweight JavaScript library for creating interactive 3D scenes using CSS 3D transforms.
Demo here.
Why Next.js Falls Short on Software Engineering
I have reservations against using or recommending Next.js as a general purpose framework for React projects. If I do so, then I feel I am not doing justice to software architecture. I wrote about my challenges 3–4 years ago after adopting it for many products.
This is not a critique of React or of Vercel as a company. Vercel has built an excellent platform — from hosting to V0 to sponsoring great OSS projects. My critique is strictly about Next.js as an abstraction, and why its mental model and architecture often get in the way of building sustainable systems.
React Cookie Manager
A powerful, customizable React component for cookie consent management with built-in tracking prevention. This component provides a modern, user-friendly way to obtain and manage cookie consent from your website visitors.
UX
7 Practical Animation Tips
While it certainly requires developing good intuition, there are loads of tricks you can use to make your animations feel better without having to learn that “magic”.
Here are seven simple ideas you can use to improve your animations today.
7 Deadly AI Sins for UX Professionals
Succumbing to AI temptations weakens your UX skills. Strive for the AI virtues to keep yourself strong as you use AI in your work.
The UI UX Design Skills Lie That’s Bankrupting New Designers
Why endless UI UX design skills courses keep you broke and unemployed — plus the real skills that actually matter but nobody's selling.
You can exchange "design skills" with "development skills" in this article.
Miscellaneous
Simplicity in Frontend Architecture
You ever look at a frontend codebase and wonder how we got here?
A complete guide to HTTP caching
Caching is the invisible backbone of the web. It’s what makes sites feel fast, reliable, and affordable to run. Done well, it slashes latency, reduces server load, and allows even fragile infrastructure to withstand sudden spikes in demand. Done poorly – or ignored entirely – it leaves websites slow, fragile, and expensive.
NPM Security Best Practices - How to stay safe from NPM supply chain attacks
The NPM ecosystem is no stranger to compromises, supply-chain attacks, malware, spam, phishing, incidents or even trolls. In this repository, I have consolidated a list of information you might find useful in securing yourself against these incidents.
This repository covers npm, bun, deno, pnpm, yarn and more.