Accessibility
Accessible Component Library
Accessible components with working examples, code, guidance, and the test scenarios we use to check them.
For each component, we've documented:
- What problem it solves
- When to use it
- When not to use it
- Where to use it
- Accessibility requirements
Foundations: the accessibility tree
There's a common misconception that when browsing the web using a screen reader, it's reading the actual screen. This is not really surprising, as the name suggests that's exactly what it's doing. And, this is what early screen readers did, so, we can't really blame anybody for thinking that.
There's also a slightly more informed misconception, that screen readers read the DOM. Again, once upon a time they did, and some might still try to as a fallback. But with modern screen readers, they actually read something called the accessibility tree. And, using the browser's built-in developer tools, you can read it too.
Once you know what the accessibility tree is, and understand how to inspect it, a lot of the mystery around accessibility goes away. Screen readers stop being an unpredictable black box, and start being something that is a lot more predictable.
CSS
The best way to use icons in Web UIs
What if I told you, you could use CSS to insert and tweak icons without touching any HTML? And that it could be more flexible and maintainable than what you’ve been using?
Scroll-triggered animation as the missing piece for scrollytelling on the web
An in-depth look at CSS scroll-triggered animations (animation-trigger), how view ranges and actions work, sibling-index staggering, and progressive enhancement.
Build a Scrollspy with Modern CSS: No JavaScript Needed
CSS has evolved a lot in the past few years, letting us build better user interfaces without relying on JavaScript. If you are anything like me, you may have felt a little overwhelmed at some point by all the new features and capabilities that the CSS Working Group and browser vendors keep adding to our toolbox.
I find the best way to keep up is to build small things with these features. This time, I came across a CSS property and a few pseudo-classes that let us build a scrollspy without a single line of JavaScript.
HTML
5 Good Choices for HTML Containers
Sometimes, <div> and <span> are exactly what we need. They are generic containers with no semantic meaning. They exist as styling targets alone.
But sometimes, generic containers like these make us miss out on the benefits we might get from other tags. In this article, we’ll look into a few elements that can host their content with aspirations beyond meeting the requirement of a tag enclosure.
Iframes that finally fit their content
Chrome 154 lets an iframe grow to the height of its content with one line of CSS without having to measure, without messages, and without resize scripts. But the page inside the iframe has to agree to it. That catch is the most interesting part of this feature, so this article spends some time on it.
Lazy Loading Images and Media: How Far Ahead Browsers Fetch
How far ahead Chrome, Firefox and Safari fetch lazy media, why a lazy hero image slows your page, and where to use lazy, eager and fetchpriority.
Recursion is DEAD and HTML killed it
There’s a new web platform feature flighting in Chromium called Declarative Partial Updates. This proposal adds a new <?marker> element which enables out-of-order streaming of content. Rather than the traditional way of building the HTML you need on the server, or sending JSON down to a JavaScript framework, you can staple HTML onto the initial response and use the <template for=""> syntax to inject that content into the <?marker name=""> placeholder.
JavaScript
Secure Cookies with SameSite: Strict, Lax, and Setup
Secure cookies with SameSite attributes remain one of the most misconfigured aspects of web application security. This article is a quick-reference resource covering precise attribute definitions, a decision table mapping use cases to recommended configurations, copy-paste framework snippets for Express, Next.js, and Django, and a DevTools debugging checklist for when cookies silently fail.
Edge.js - Run Node.js safely, anywhere, with any JS engine
Edge.js reimagines Node: fully sandboxed, engine-agnostic, and built for AI and serverless workloads. Ubiquitous by design.
<calc-input>, a custom input element that accepts mathematical formulas
Continuing my streak of small form-related Custom Elements, I built <calc-input>. It’s a custom input element that accepts mathematical formulas — such as 2 + 3 or (2 + 3) * 4 — and automatically toggles between showing the formula on focus and the calculated result on blur.
Understanding Why You'd Use Effect TS
This is for people who have heard about Effect recently and either can't quite wrap their head around it or, more usefully, just want to know whether they should use it.
If you're newer to TypeScript and only want a recommendation: yes, use it. You have fewer habits to unlearn than the rest of us, and the things Effect makes you think about are things you'd have to learn eventually anyway. If you want to understand why people like it, read on.
React Aria - Craft world-class accessible components with custom styles
Over 50 components with built-in behavior, adaptive interactions, top-tier accessibility, and internationalization out of the box, ready for your styles.
Miscellaneous
I guess I’m using WebP now?
After using the same few image formats for 20+ years, I’m now on the WebP bandwagon. That isn’t something I thought I’d ever say. Now I’m wondering how soon it’ll be before I can use a couple more.
When Google announced the WebP format in 2010 it was interesting, but only academically. WebP support was added to Chrome in 2011, 1 but other browsers took their time supporting it: Edge in 2018, Firefox in 2019, and Safari in 2020. Until there was baseline support, the format was only being used selectively by content delivery networks. Even then, WebP was a pain to work with. Photoshop didn’t get native support until 2022, and its “Save for Web” and “Export As” features still don’t support the format.
How to Improve Website Performance Without Rewriting Your Front End
This article explores practical techniques for improving website performance while keeping the existing front-end architecture intact.
JPEG XL vs AVIF for web use-cases
For lossy photos on the web, AVIF almost always produces smaller files than JPEG XL. At default effort settings, the best JPEG XL version is typically 15–25% larger than the equivalent AVIF. At maximum effort settings, the gap narrows a little, to typically 6–20%. There are outliers, where JPEG XL is close to, or even beats AVIF, so if you want the absolute best result for a particular image, it's worth trying both.
For lossless, JPEG XL is the clear winner. Lossless WebP is 9–17% larger for photos, and lossless AVIF is 30–120% larger. But lossless images are almost never what you want on the web. If you do use them on the web (like I do on this page), watch out for jixel's higher efforts - it often produces files that are too slow to decode.
The case against JPEG XL
Argues that JPEG XL (JXL) doesn't offer enough advantages over AVIF and WebP to justify widespread adoption on the web.
The author isn't arguing that JPEG XL is bad technology. He believes AVIF is the better choice for web images because it offers a stronger balance of compression, visual quality, and performance, while JPEG XL's broader capabilities are more valuable outside the browser.