Accessibility
How does the Shadow DOM appear in the accessibility tree?
The Shadow DOM is a way for web components to keep some of their internal structure private. Think of it as a small, self-contained “mini-DOM” living inside an element.
Screen readers do not see the shadow root itself. Browsers solve this by flattening the shadow tree when building the accessibility tree.
WCAG 3.0 overview and update (February) 2026
Background to the upcoming Version 3.0 of the Web Content Accessibility Guidelines (WCAG).
Why it’s important to manually test for Accessibility
Many automated tools flag accessibility issues within websites. While these automated tools are great at catching many accessibility issues, developers must still run a manual test and audit their website for accessibility.
The images might pass accessibility with automated tools, but might have text that does not make sense for the image. Context is key on a website, and automated tools might miss it. The elements on the page might be focusable, but the focus order might not make sense.
Accessibility Testing on Windows on Mac
A quick guide to Accessibility Testing using Windows-only tools on a modern Mac with Apple Silicon processor.
CSS
Oat - Ultra-lightweight, semantic, zero-dependency HTML UI component library
Oat is an ultra-lightweight HTML + CSS, semantic UI component library with zero dependencies. No framework, build, or dev complexity. Just include the tiny CSS and JS files and you are good to go building decent looking web applications with most commonly needed components and elements.
Semantic, minimal, zero dependencies. ~8KB CSS and JS.
CSS @scope: An Alternative To Naming Conventions And Heavy Abstractions
Prescriptive class name conventions are no longer enough to keep CSS maintainable in a world of increasingly complex interfaces. Can the new @scope rule finally give developers the confidence to write CSS that can keep up with modern front ends?
Modern CSS Code Snippets
A collection of modern CSS code snippets. Every old CSS hack next to its clean, native replacement, side by side.
Re-creating a Pantone Color Deck in CSS
If you’ve ever held a Pantone fan deck — the kind graphic designers used to carry around like a sacred artifact — you know the satisfying way those cards fan out from a single rivet point. Each card swings on its own arc, and you flip through the colors by hand.
I wanted to recreate that experience for this week’s CodePen challenge, which is all about color palettes.
Follow along as we build a fully interactive color fan deck where the spread adapts to the container width, cards know their position among their siblings, and clicking a card to "focus" it is handled entirely by the browser’s native <details> element.
No JavaScript.
Demo here.
Graph Theory using Modern CSS
Let's suppose you have a graph with a known number of nodes and you want to identify the shortest path between two nodes. It's possible using only CSS.
Style Headings using the CSS :heading pseudo-class
Use the :heading pseudo-class to style all headings (h1-h6) with a single CSS rule. Reduce repetition in design systems and component libraries while maintaining consistency.
Why is Anchor Positioning not working?
Anchor Positioning enables you to link any element on the page to another (an anchor). In theory, it's simple, but in practise there are edge cases where it doesn't work. It can be very frustrating, so let's clarify things.
JavaScript
The logo soup problem (and how to solve it)
A deep dive into the math behind making mismatched brand logos actually look good together. And a tiny React library that does it for you.
ImageJS - Advanced image processing in JavaScript
ImageJS is a JavaScript library designed to facilitate image processing and manipulation. It provides a wide range of features for developers to enhance, analyze, and transform images seamlessly. It includes functions for common tasks such as resizing, cropping, filtering, and color adjustments.
JS-heavy approaches are not compatible with long-term performance goals
“JS-heavy” means relying on shipping lots of client-side JavaScript that runs in the browser as a core part of the app. In practice, these approaches often lead to performance issues such as bigger bundle sizes, slower loads, harder debugging, and fragility over time as apps grow and evolve.
While modern frameworks are marketed as improving developer experience and agility, they frequently make it easier to write slow or inefficient code and harder to maintain good performance long-term.
The author suggests that server-centric or more lightweight architectures often deliver better user performance and are easier to keep fast over the life of a project.
isocity: A isometric city builder in JavaScript
A simple JavaScript city builder with no simulation at all. No budget, no goals. Just build your tiny city.
Demo here.
Building Bulletproof React Components
Most components are built for the happy path. They work—until they don’t. The real world is hostile. Server rendering. Hydration. Multiple instances. Concurrent rendering. Async children. Portals... Your component could face all of them. The question is whether it survives.
The real test isn’t whether your component works on your current page. It’s whether it works when someone else uses it—in conditions you didn’t plan for. That’s when fragile components break.
Here’s how to make it survive.
React Doctor - Let coding agents diagnose and fix your React code
One command scans your codebase for security, performance, correctness, and architecture issues, then outputs a 0–100 score with actionable diagnostics.
I Tried 3 Web Game Frameworks (So You Don’t Have To)
I went on a quest to test the 3 most popular 2D web game frameworks according to their NPM download numbers. To achieve this, I set out to build a Sonic infinite runner game in each framework. Today, I’d like to share my findings.
Below are links to playable demos along with the source code for each version of the game. I recommend browsing the code of each version to get a better feel of the differences between them.
- KAPLAY version - (live demo) - (source code)
- Phaser version - (live demo) - (source code)
- Excalibur version - (live demo) - (source code)
How to make an HTTP request in Node.js
Learn to make HTTP requests in Node.js using built-in fetch(), http/https modules. Covers POST, authentication, streaming, and testing with code examples.
Building an Endless Procedural Snake with Three.js and WebGL
A deep dive into building a GPU-enhanced procedural curve system in Three.js, where organic motion emerges from simple steering rules and endless Bézier paths
UX
Your Multi-Step Forms Are Killing Conversions - The Data Proves It
Your multi-step forms are killing conversions. Data from Baymard & Zuko proves single-page forms convert better. Learn when to use each approach.
20 Design Reference Platforms Beyond Dribbble
A curated list of tools that go deeper than static shots — featuring real user flows, motion recordings, Figma files, component code, and design evolution
Miscellaneous
Measuring SVG rendering time
Is rendering large SVGs significantly slower than smaller ones? Is there a cut-off size above which things are terrible? And what if these SVGs were PNGs, just for giggles. To answer this let's generate a bunch of test images and render them.
SVG Studio
A browser-based SVG editing tool.
For some reason, at the time of this writing, the sample/demo svg is zoomed in at 3,200% so you may have to zoom it out (top right) to see it.
All SVG Icons - Free and Open Source SVG Vector Icons
Browse and download 250,000+ free SVG icons for your projects that are free to use and customizable. Copy Raw SVG code or download as PNG, SVG, JSX or Base64 formats. Alternative of Flaticon, Iconmonstr, SVG Repo.
Design systems are today’s cure and tomorrow’s cause of shitty software
Design systems exist to help people do their job faster and better. “Do their job” carries a lot of weight in that sentence. This assumes designers and engineers can make high-quality interfaces from scratch. Design systems just streamline the process.
But a funny thing is happening. Those skills to make high quality interfaces have started to erode. Specialist roles are disappearing. Remember front-end engineers? Instead of enhancing existing skills, design systems are becoming a dependency. Less people know how to create interfaces from the ground up. Abstractions, such as design systems, are becoming the new baseline.