Accessibility
How to Write an Accessibility Statement in 2025, with Examples
This guide breaks down the essential components and provides clear examples so you can publish a high-quality accessibility statement.
Grayscale testing: The missing step in color accessibility
You ran your contrast check and got the green check, nice work! Checking contrast ratios is one part of color accessibility.
The other part is that color can’t be the only way information is conveyed.
This means that the next step is grayscale testing: removing color by desaturating your website to see if form states, charts, infographics, and links still make sense without color distinctions.
CSS
Inlining Critical CSS: Does It Make Your Website Faster?
Learn what critical CSS is, how to inline it to improve page load performance, and understand the trade-offs before implementing it on your website.
Perfectly Pointed Tooltips: A Foundation
How to build tooltips using only modern CSS (the new Anchor Positioning API) so they dynamically position themselves (and their “tails”) relative to an anchor element and avoid being cut off by viewport edges.
View Transition API
The View Transition API provides a way to animate elements when moving from one page to another. It is available on all major browsers however Firefox only provides limited support.
Start implementing view transitions on your websites today
The View Transition API allows us to animate between two states with relative ease. I say relative ease, but view transitions can get quite complicated fast.
A view transition can be called in two ways; if you add a tiny bit of CSS, a view transition is initiated on every page change, or you can initiate it manually with JavaScript.
Use Cases for Field Sizing
Have you ever needed to size an input field based on its content? We often required JavaScript for that. Today, we can do it with CSS field-sizing property.
Goodbye Circles, Hello Squircles: Perfect Corners in CSS & Canvas
Rectangles with rounded corners are mathematically wrong. Once you know why, you can’t unsee it. Squircles, made iconic by Apple, are finally supported in browsers by the new CSS corner-shape: squircle property. I will show you how to approximate one squircle corner with just three pixel-perfect Bézier curves, so you can use squircles everywhere: canvas, SVG, clip-path, and even game engines. Your eyes deserve curves that actually make sense.
How to use CSS line-clamp to trim lines of text
If you’ve ever needed to limit an element’s line count without resorting to JavaScript, the line-clamp CSS property can help. It’s a handy way to rein in user-created content, keep cards neatly aligned, or prevent text from breaking a layout.
In simple terms, line-clamp limits the number of lines in a block container to a specified amount (as long as it isn’t multi-column). When clamping occurs, the overflowing text is cut off and replaced with an ellipsis (…) to signal there’s more to read. There’s no built-in toggle for expanding the text, but it’s a clean and lightweight approach for layout control.
The Web Animation Performance Tier List
Web animation performance isn't a dark art. But it is an art. Understanding how the render pipeline works gives you the instincts to know why an animation might be janky, and what to reach for instead. Learn what makes web animations fast, slow, and everything in between with our 2025 web animation performance tier list.
This article explains how different CSS and JS animation techniques impact browser performance. It ranks them from best to worst:
- S‑Tier: Runs entirely on the compositor thread (e.g., animating
transform,opacity,filter,clip‑path) so it remains smooth even when the main thread is busy. - A/B-Tier: Uses compositor‑friendly properties but is driven via main thread (so still quite good).
- C-Tier: Triggers paint operations (e.g.,
background-color,border-radius), which is more costly. - D-Tier: Triggers layout changes (e.g.,
width,margin,display), which is very expensive. - F-Tier: Worst case (“thrashing” the DOM — reading and writing repeatedly), which is worst for performance.
Key point: choose animations that avoid layout/paint for smoother, more responsive UIs.
Combining Scroll-Driven Animations with @starting-style
How the cascade, the animation-fill-mode, and implicit keyframes make things a bit more complicated then you’d initially think …
JavaScript
Directives and the Platform Boundary
For years, JavaScript has had exactly one meaningful directive, "use strict". It is standardized, enforced by runtimes, and behaves the same in every environment. It represents a clear contract between the language, the engines, and developers.
But now we are watching a new trend emerge. Frameworks are inventing their own top level directives, use client, use server, use cache, use workflow, and more are appearing across the ecosystem. They look like language features. They sit where real language features sit. They affect how code is interpreted, bundled, and executed.
There is an important distinction: these are not standardized JavaScript features. Runtimes don't understand them, there is no governing specification, and each framework is free to define its own meaning, rules, and edge cases.
This can feel ergonomic today, but it also increases confusion, complicates debugging, and imposes costs on tooling and portability, patterns we’ve seen before.
State-based vs Signal-based rendering
When we think about state management in front-end frameworks, we often focus on the API—hooks, observables, or signals. However, there's a deeper paradigm shift at play: where rendering happens. Traditional state management like React hooks triggers renders at the point where state is created, while signal-based approaches like Preact Signals or Solid.js trigger renders only where state is consumed.
This shift from "render where you create state" to "render where you use state" has profound implications for performance, code organization, and mental models.
Modern Toasts Using the Native Popover API
Learn how to implement toasts using the Popover API: no JavaScript dependencies required.
In this post, we'll explore how this works and guide you through implementing a similar system in your own projects. Just a word of precaution: Toastify.js offers extensive configurability for advanced scenarios, whereas this native approach is tailored for simple, straightforward toasts. If you need features like custom positions, durations, or stacking, you might still prefer a dedicated library.
SlimSelect - Advanced JavaScript Select Dropdown Library | Vanilla JS Multi-select
SlimSelect is an advanced, lightweight, and feature-rich select dropdown library for modern web applications. Built with vanilla JavaScript and zero dependencies, it provides an exceptional user experience with powerful customization options, accessibility support, and seamless integration with Vue and React frameworks.
RxJS Operator Decision Tree
A tool that guides you through choosing the right RxJS operator for your use-case via a flow-chart (decision tree). It asks questions about what you’re trying to do (transform values, flatten observables, combine streams, etc.) and recommends an operator accordingly.
<lite-youtube> - The fastest little YouTube web component on this side of the internet
A web component that renders YouTube embeds faster. The ShadowDom web component version of Paul Irish's lite-youtube-embed.
Don't Blindly Use useTransition Everywhere
Lately, I have been looking into React's useTransition hook because I keep seeing posts about how great it is for improving the user experience in React applications. I have seen posts recommending this hook for managing state transitions more effectively, especially in scenarios involving slow-rendering components, but also just as a loading state handler.
So, naturally, I looked closely at the documentation and ended up disappointed because the example doesn't look like a user experience improvement at all, it looks like a terrible user experience, to be honest.
Miscellaneous
It’s Not Your Boss’s Job to Grow Your Career
Every week I talk to someone early in their career who’s hungry for growth, they want the next step, the promotion, the recognition. The ambition is fantastic, but there’s one small problem: career growth isn’t something your boss does for you. It’s something you drive yourself.
Why engineers can't be rational about programming languages
A programming language is the single most expensive choice a company makes, yet we treat it like a technical debate. After watching this mistake bankrupt dozens of companies and hurt hundreds more, I’ve learned the uncomfortable truth: these decisions are rarely about technology. They’re about identity, emotion, and ego, and they’re destroying your velocity and budget in ways you can’t see until it’s too late.