Accessibility
Nested Scroll Bars Are the One of the Biggest Accessibility Evils, Ever
You can violate many WCAG Success Criteria and still have your website be nominally usable by users with disabilities. Sometimes, the bigger problem is accessibility problems that are exacerbated by usability programs. Nested scroll bars don’t just trip up users; they shove users face-first into accessibility barriers that scream, “We really didn’t think about your needs when designing this.”
I’m going to start by making a strong statement that might not be obvious to all: WCAG isn’t just about components. It’s about how components are assembled and interact with each other. You can take a perfectly accessible set of components and put them together in a way that makes accessibility impossible to achieve. This is absolutely the case with nested scrollbars.
Why You Should Test Your Page Without JavaScript
When developers think about accessibility, the conversation usually revolves around screen readers, semantic HTML, color contrast, or keyboard navigation. And all of these are very important.
But there’s a less-discussed area you should consider: how your site behaves without JavaScript.
Accented - A frontend library for continuous accessibility testing and issue highlighting
Add a few lines of code to your web app, and you’ll see interactive callouts appear next to elements with accessibility issues.
CSS
Adactio: Journal—Style your underlines
We shouldn’t rely on colour alone to indicate that something is interactive.
Take links, for example. Sure, you can give them a different colour to the surrounding text, but you shouldn’t stop there. Make sure there’s something else that distinguishes them. You could make them bold. Or you could stick with the well-understood convention of underlying links.
This is where some designers bristle.
Using Tailwind CSS Inside Web-Components
Tailwind generates a global CSS file for the entire page, reducing duplication. But when using the shadowDOM, we cannot use classes defined globally in the document. That’s the whole point of the shadowDOM.
So to be able to use Tailwind in the shadowDOM, the styles need to exist inside the shadowDOM as well.
CSS-only scrollspy effect using scroll-marker-group and :target-current
The CSS Overflow Module Level 5 introduced a new CSS property which enriches HTML anchor elements with the capabilities of CSS scroll markers, allowing you to recreate the Bootstrap Scrollspy effect using a couple of lines of CSS only. In this post, we're going to look into how to use this property, as well as discuss accessibility expectations to ensure the feature is accessible and inclusive.
10 CSS Features I've Found Really Useful
Some lesser known CSS properties that solve common problems elegantly.
The Basics of Anchor Positioning
In this article, I will cover the basics of Anchor Positioning and how I wish I had learned it earlier.
3D Layered Text: The Basics
A client asked me to create a bulging text effect. With a bit of cleverness and some advanced CSS, I managed to get a result I’m genuinely proud of, which is covered in this three-part series.
The `-path` of Least Resistance (Part 1)
There’s a whole layer of CSS that lives just below the surface of most interfaces. It’s not about layout, spacing, or typography. It’s about shape. About cutting through the default boxes and letting your UI move in new directions. This series is all about one such family of features, the kind that doesn’t just style your layout but gives you entirely new ways to shape, animate, and express your interface.
In this first part, we’ll explore clip-path. We’ll start simple, move through the functions and syntax, and work our way up to powerful shape logic that goes way beyond the basic polygons you might be used to. And just when you think things can’t get any more dynamic, part two will kick in with offset-path, where things really start to move.
Getting Creative With Images in Long-Form Content
When you picture placing images in long-form content — like articles, case studies, or reports — the standard approach is inline rectangles, breaking up blocks of text. Functional? Sure. Inspiring? Hardly.
Why do so many long-form articles feel visually flat? Why do images so often seem bolted on, rather than part of the story? And how does that affect engagement, comprehension, or tone?
Images in long-form content can (and often should) do more than illustrate. They can shape how people navigate, engage with, and interpret what they’re reading. They help set the pace, influence how readers feel, and add character that words alone can’t always convey.
So, how do you use images to add personality, rhythm, and even surprise someone along the way? Here’s how I do it.
HTML
Should you preload fonts for performance?
Everyone’s preloading fonts for faster sites. But did you know it can secretly push your First Contentful Paint back instead? Let’s look at when preloading helps, when it hurts, and the simple rules to follow.
JavaScript
AbortController is actually cooler than you think
Now that I've been using it for a while, I can tell that it's one of the best tools I discovered in a long time.
Why do browsers throttle JavaScript timers?
Even if you’ve been doing JavaScript for a while, you might be surprised to learn that setTimeout(0) is not really setTimeout(0). Instead, it could run 4 milliseconds later.
factora: A react factory for data hooks. Handles caching, retries and GC - so you don't have to
factora is a factory that creates zero-config, singleton data-fetching hooks for React — with caching, retries, and garbage collection built in.
ripple: the elegant UI framework for the web
New JavaScript framework from an ex-React and Svelte core team member.
Right now, there will be plenty of bugs, things just won't work either and you'll find TODOs everywhere. At this stage, Ripple is more of an early alpha version of something that might be, rather than something you should try and adopt. If anything, maybe some of the ideas can be shared and incubated back into other frameworks. There's also a lot of similarities with Svelte 5, and that's not by accident, that's because of my recent time working on Svelte 5.
Big O - a visual introduction to big O notation
Big O notation is a way of describing the performance of a function without using time. Rather than timing a function from start to finish, big O describes how the time grows as the input size increases. It is used to help understand how programs will perform across a range of inputs.
In this post I'm going to cover 4 frequently-used categories of big O notation: constant, logarithmic, linear, and quadratic. Don't worry if these words mean nothing to you right now. I'm going to talk about them in detail, as well as visualise them, throughout this post.
Say bye with JavaScript Beacon
Sometimes we want to send a piece of data to our servers when user leaves our website or webapp. Maybe it’s for for analytics or even auto-logout when they leave the website. But do you know what is a reliable way of doing it?
That’s where Beacon API in Javascript comes in handy. It is like, fire-and-forget. Browser doesn’t need to wait for anything, once the request is sent, the JavaScript execution will be done immediately, nothing will be kept in the memory.
Implementing a foil sticker effect
A breakdown of how to build a custom Three.js shader that recreates the iridescent, sparkling look of foil stickers using vertex deformation, angle-based color shifts, and procedural flakes.
NodeBook | Master Node.js - Complete Guide to Node.js Development
Learn and Master the complex parts of the Node.js Runtime. From V8's Turbofan optimizer to production deployments. Each chapter includes hands-on labs, real-world examples, and performance insights.
USAL.js - Ultimate Scroll Animation Library
Works with React, Solid, Svelte, Vue, Lit, Angular, Vanilla JS and more.
- 40+ animations (fade, zoom, flip with all directions)
- Text animations (split by word/letter)
- Number counters
- Text effects (shimmer, fluid)
- Only 9KB minified
- Zero dependencies
- 60fps performance
- Web components supported
- Framework agnostic
Miscellaneous
You Don't Need Animations
When done right, animations make an interface feel predictable, faster, and more enjoyable to use. They help you and your product stand out.
But they can also do the opposite. They can make an interface feel unpredictable, slow, and annoying. They can even make your users lose trust in your product.
So how do you know when and how to animate to improve the experience?
Step one is making sure your animations have a purpose.