Accessibility
Animated sites are unique, but not always accessible - The hidden accessibility costs of nonstop motion
Like many, I visit portfolios to design-winning websites to get inspiration or observe trends. With each visit, I see something new…kinetic typography, scroll effects, or 3D elements — each creating a distinct experience and keeping my eyes peeled.
But I also notice the lack of accessibility in these websites — especially when it comes to looped animations (GIFs) and autoplaying videos.
Luckily, there are ways to have unique and accessible websites. Let’s review a few Web Content Accessibility Guidelines (WCAG), risks of nonstop motion, and strategies to integrate accessible motion into our one-of-a-kind websites.
A11y 101: 2.4.3 Focus Order
Some of my clients have faced lawsuits that I have helped them assess and address. By far the most common issue is images lacking alternative text. But not far behind it is the the focus order of the page. The vast majority of the complaints I’ve seen have claiming focus order issues are problematic, really aren’t. Today we’re going to look at focus order and why people interpret this wrong.
How to Create an Accessible Table with Clickable Rows
Tables on websites usually display static information in rows and columns. But what if you want to make the rows clickable, e.g., to show more information about the thing that the row is about? Your first thought might be to put click event handlers on the table rows (<tr>) to make them clickable. But you really shouldn't.
A table row with a click event handler doesn't magically turn into an accessible control. You won't be able to focus the row using a keyboard, let alone trigger the click event using the ENTER key. The purpose of the click event handler would be unclear to a screen reader user. So what should we do?
CSS
Pokémon Cards CSS Holographic Effect
A collection of advanced CSS styles to create realistic-looking effects for the faces of Pokemon cards. The cards use 3d transforms, filters, blend modes, css gradients and interactions to provide a unique experience when taking a closer look.
GitHub repo here.
Specificity Calculator
A visual way to understand CSS specificity. Change the selectors or paste in your own.
The Fundamentals of CSS Alignment
While centering elements in CSS has become easy over time, there is still a lot of confusion around alignment in general. Let’s be honest, you always end up trying different combinations until it works, but you don’t really understand how it works, right?
Which property is for vertical alignment? align-content or align-items? Where should I add display: flex? Let’s add it everywhere! A height? Why do I need to define a height!? Maybe I should try with display: grid?
What You Need to Know About CSS Color Interpolation
Color interpolation, loosely speaking, is the process of determining the colors between two color points. It allows us to create unique colors, beautiful palettes, better gradients, and smooth transitions.
The `-path` of Least Resistance (Part 2)
In Part 1, we explored clip-path and its power to reshape elements, cutting through the rectangular constraints of traditional elements to create circles, polygons, and complex curved shapes. We learned how to think beyond the box (literally), but everything we covered was about static shapes. About defining boundaries and staying within them.
Now it’s time to break free from containment entirely. In this second part, we’re shifting from shapes that hold things in place to paths that guide movement. We’re moving from clip-path to offset-path, where your elements don’t get clipped into new shapes, they travel along custom routes.
The interpolate-size property is a great example of progressive enhancement
When it comes to new CSS capabilities you don't have to avoid using them because there's not much browser support. Lean into progressive enhancement instead. It'll cover a lot of cases for you.
Color Shifting in CSS
A little while ago, I was trying to animate an element’s background color, so that it cycled through the rainbow. Seems easy, but it turns out, browsers have a surprisingly big limitation when it comes to color processing. In this tutorial, we’ll dig into the issue, and I’ll share a couple of strategies you can use to work around this limitation.
CSS Code Quality calculator - Calculate the Code Quality score of your CSS based on a range of different quality guards
This package analyzes your CSS on a high level and comes up with a score, divided into three areas:
- Maintainability: how difficult is it for someone looking at the CSS from a high level to find the exact spot to fix a bug?
- Complexity: how difficult is it for someone to make a change and be confident that they can make that change without side effects?
- Performance: How likely is the CSS to have a negative impact on performance, based on high-level metrics? (Not including using hardware accelerated transforms and the like, because other tools are more suited for that.)
Isolating CSS Inheritance
How can we prevent styles from leaking between multiple microfrontend applications on the same page?
Don't Inherit the Box Model
Setting the box-sizing model to border-box is one of the few remaining CSS ‘resets’ used across most projects. But there are two common approaches, and the more popular choice will cause more problems than it solves.
View Transitions: What Could Possibly Go Wrong?
Most of the time, View Transitions just work. This page is for the exceptions: the quirks, the caveats, the things that quietly cancel your animations. Learn how to detect them and bring transitions back to life.
JavaScript
Angular Summer Update 2025
As summer reaches its peak, the Angular team wants to share some updates from the latest minor releases.
- Zoneless APIs are production ready
- Experimental MCP server to help with LLM codegen
- Built-in APIs to animate elements as they enter and leave the DOM
- Signals and router visualization in Angular DevTools
- Improved template authoring experience
Functional custom elements the easy way
When you need a sprinkling of JavaScript on your web page, there is no better answer than Custom Elements (or Web Components). You get a lot of “framework goodies” for free, built in to the language, and you don’t need to include any frameworks that bloat your web page size into the hundreds of kilobytes, or even megabytes.
React Bits - Animated UI Components For React
An open source collection of high quality, animated, interactive & fully customizable React components for building stunning, memorable user interfaces.
GitHub repo here.
Mediabunny - Pure TypeScript media toolkit for reading, writing, and converting video and audio files, directly in the browser
Mediabunny is a JavaScript library for reading, writing, and converting media files (like MP4, WebM, MP3), directly in the browser. It aims to be a complete toolkit for high-performance media operations on the web. It's written from scratch in pure TypeScript, has zero dependencies, is very performant, and is extremely tree-shakable, meaning you only include what you use. You can think of it a bit like FFmpeg, but built from the ground up for the web.
GitHub repo here.
Finally, safe array methods in JavaScript
There’s a good reason that many developers pause before using .sort(), .reverse(), or .splice() in JavaScript: those methods mutate the original array. That single side effect can lead to subtle, hard-to-trace bugs, especially in apps with shared or reactive state. The good news is that in the last couple of years we’ve gotten new array methods that make working with arrays safer and cleaner by avoiding mutation altogether:
toSorted()toReversed()toSpliced()
These return copies instead of changing the original array. It’s a small syntax upgrade with big implications, especially for React developers who rely on immutability to manage state.
How do Devs Make Levels Without Game Engines?
I came across a nice little library called Kaboom.js. It would end up later as KAPLAY. This library would allow you to make 2D games quickly using either JavaScript or TypeScript. As someone with no real experience in game dev, this was right up my alley as I already had the prerequisites to learn this library quickly.
15 React Anti-Patterns (and Fixes) You’ll Actually Use
A practical guide to 15 common React anti-patterns—why they hurt performance and predictability, and how to fix each with clear code examples.
Obs.js – context-aware web performance for everyone
Obs.js reads a handful of browser signals (Navigator and Battery APIs) to infer connection strength, battery status, and device capability. It exposes those signals as CSS classes on the <html> element, and as properties on window.obs, so you can adapt delivery accordingly: serve lower-resolution media, forgo web fonts, disable auto-playing video… you name it.
GitHub repo here.
Splide - The lightweight, flexible and accessible slider/carousel
Splide is a lightweight, flexible and accessible slider/carousel, written in TypeScript. No dependencies, no Lighthouse errors.
Browser.js - Highly Configurable Browser Environment for the Web
It can be used as:
- An end-to-end encrypted, cloud-based browser accessible from any device at anytime
- A headless browser that can be embedded in other websites and applications
- A fast, lightweight, and no-installation alternative to Puppeteer, Playwright, and Selenium
- An alternative to Ultraviolet, Rammerhead, and other web proxy browsers
UX
Icon Interpretation vs. Recognizability
Icons aren’t universal. Learn why recognizability and interpretation matter and why testing is essential for clarity.
Why Disabled Buttons Hurt UX (and How to Fix Them)
Disabled buttons often confuse users by appearing clickable but providing no response or feedback. Designers should use them sparingly, ensure they’re accessible, and clearly explain why the button is disabled.
Miscellaneous
Anatomy Of A Job Interview Scam
This is the story of a sophisticated job interview scam that happened to me on LinkedIn using social engineering and an obfuscated clipboard hijacking to push a malicious payload.
Awesome Web Desktops - Websites, web apps, portfolios which look like desktop operating systems
The web's biggest curated directory of apps, portfolios and experiments that mimic the appearance and functionality of desktop operating systems, these are commonly known as Web Desktops.