Accessibility
Quick Tip: Don’t Use <abbr>
The <abbr> element stands for abbreviation. The idea behind this is you provide the abbreviation of the word or phrase, then use the title attribute to display the whole name or phrase.
The problem with this is that the <abbr> is not an interactive element. You cannot tab to it. It will be read just like any other word in the sentence. If you mouse over the element, you see the title. But if you use keyboard there is no way to expose it.
Then there are screen readers. Most screen readers will not announce this title.
It’s better to fall back to the old newspaper styling where you say the whole phrase the first time followed by the abbreviation in parenthesis. From there forward, you can use the abbreviation.
Take a look at the testing Adrian Roselli has done on this.
DOJ Delays the Title II Web Accessibility Deadline - Don't Sit Back
On April 20, 2026, the Department of Justice published an Interim Final Rule extending both compliance deadlines for the 2024 Title II web accessibility rule by one year. State and local government entities with a total population of 50,000 or more — which faced a deadline of April 24, 2026 — now have until April 26, 2027. Smaller public entities and special district governments, which had until April 26, 2027, now have until April 26, 2028.
CSS
Recreating Apple’s Vision Pro Animation in CSS
Apple’s product animations, particularly the scrolly teardowns (technical term), have always been inspiring. But these bleeding-edge animations have always used JavaScript and other technologies. Plus, they aren’t always responsive (or, at least, Apple switches to a static image at a certain width).
I’ve been wowed by CSS’s more recent scrolling animation capabilities and wondered if I could rebuild one of these animations in just CSS and make it responsive.
Transitions.dev — Essential transitions for web apps
Collection of the most essential transitions for web apps that you can just copy and paste into any project.
Scroll-Driven Animations - Exploring the new animation-timeline API
The new Animation Timeline API allows us to create dynamic scroll animations without any JavaScript.
CSS Recently In All Browsers
Here's some rad CSS that just hit baseline between October 2025 - April 2026.
How to Create Animated Gradient Borders in CSS
Animated borders used to require heavy tricks: JavaScript continuously redrawing gradients, or SVG filters layered behind content. Today, modern CSS gives us all the ingredients natively. With a pseudo-element, a conic gradient, and the new @property rule, we can create glowing, rotating borders that feel alive.
Demo here.
HTML
How to Use Lazy Loading Without Hurting Web Performance
Lazy loading is one of the most commonly recommended web performance techniques. In theory, it reduces initial page load by deferring non-critical resources. In practice, it’s often misused and can actually make performance worse.
This guide explains:
- What lazy loading is and how it works
- When lazy loading improves performance
- When it hurts performance (LCP, CLS, INP)
- Lazy loading vs eager loading
- Practical best practices
<dialog> and popover: Baseline layered UI patterns
The <dialog> element and the popover attribute are two Baseline layered UI patterns that developers can reach for instead of custom implementations. To show the advantages of using layered UI patterns built into today's web browsers—and to give an example of when you might reach for <dialog> or use the popover attribute—this article walks through an example of a modal that appears when the user attempts to save an image to a favorites list without being logged in.
JavaScript
Constructable Stylesheets and adoptedStyleSheets: One Parse, Every Shadow Root
Building Web Components with Lit means navigating a gauntlet of gotchas.
If you aren’t using Constructable Stylesheets, you’re likely fighting a losing battle against the browser’s memory overhead and redundant style tags. They’re the browser-native way to efficiently share styles across Shadow Roots. Here’s how they work end-to-end.
Sone — A layout engine for image generation in JavaScript.
A layout engine for image generation in JavaScript. Compose images like you write components.
SensibleJS
Reactive UI in ~10KB. No build step. No virtual DOM. No dependencies. Just HTML attributes.
Miscellaneous
Your job isn't programming
The core problem with bad codebases is that they’ve grown too complex to understand. Rust or React can’t fix that problem. So what can?
Frontman: The AI agent that lives in your framework/browser
Frontman is an open-source AI coding agent that lives in your browser. It hooks into your dev server as middleware and sees the live DOM, component tree, CSS styles, routes, and server logs. Click any element in your running app, describe what you want changed in plain English, and Frontman edits the actual source files with instant hot reload. It supports Next.js, Astro, and Vite (React, Vue, Svelte). Free and open-source — Apache 2.0 (client libraries) / AGPL-3.0 (server). Bring your own API keys (Claude, ChatGPT, or OpenRouter).
Don't use localhost:3000, use your own custom domain
After presenting a demo of how an internal tool works, I was flooded with questions. Not about the tool, but about why I had bought a domain just to run the demo. "Why didn't you use the staging server?" they asked.
I was confused. I didn't buy a domain. I was running it locally.
But instead of the URL being localhost:3002, it was a fully formed domain. www.internaltool.com. In fact, some people told me that they couldn't access the website on their devices.
By combining the system hosts file with a reverse proxy like Nginx, you can run different projects locally with actual domain names. I usually end up with dev.domain.com for active development, qa.domain.com for a stable local build, and the actual production URL for the live site.
Here is how to set it up.
MosaicQR — Elegant QR Codes With Your Logo
Upload your logo, add a destination, and generate a beautiful QR code in seconds.