Accessibility
WCAG Radar: 28 free checks in your browser | WCAG Toolkit
WCAG Radar is free tooling from accessibility audit agency Proper Access: 28 of its 46 WCAG checks on the page you have open, including behind a login and on localhost. Not sure what a finding means? Every check has a link straight to an auditor.
Understanding aria-details
The aria-details attribute is used when an element on a page has additional detailed information available elsewhere.
It creates a connection between that element and the detailed information.
CSS
Custom Scrollbar Component In 2026
Your design system might require a specific visual aesthetic for the scrollbars. Maybe you want them to disappear when the container is not hovered, or maybe you need custom colors, shapes, and hover effects. Unfortunately, the native ability to style scrollbars is very limited, so if you face any of those requirements, your only option is to create a custom component.
Maple Atomic CSS Engine - No Build Step or Configuration Required
Maple is a runtime CSS engine that generates atomic styles from utility classes only when they appear in the DOM.
Instead of shipping pre-compiled stylesheets, Maple ships a small JavaScript file that observes the DOM and constructs CSSOM incrementally as your application renders. If a class is never used, its style is never generated.
This shifts styling cost from upfront network transfer to demand-driven runtime generation. It eliminates build steps, complex configuration, and unused CSS, while keeping styles encapsulated.
Container style queries and advanced attr(): rethinking how to wire up my components in CSS
How do you handle the look and feel of a component when an element moves between contexts? In the past we relied on modifier classes or passing down framework props. But combining container style queries with the new advanced attr() capabilities gives us interesting ways to handle our CSS architecture: HTML attributes feeding directly into typed CSS variables, and components adapting themselves purely through CSS.
Animating CSS Grid Layouts with CSS Anchor Positioning
At CSS Day (back in June), someone asked me how Brave (the browser) might have built their New Tab Page which features some tiles laid out in a grid. While the grid is nothing spectacular, something special happens with it when you resize the viewport: as the available space changes, the grid nicely reorganizes itself in an animated way. The animations are also interruptible, so no View Transitions seem to be at play.So, how did they do it? I’m not sure. But if I were to recreate it, I’d use CSS Anchor Positioning with regular CSS Transitions on top.
Dynamic Node Connection (CSS-only Diagram) II
Extending the previous implementation to add more connection types. This time, the connectors will stick to the specified sides, regardless of the node's position. Another cool demo made possible with anchor positioning, border-shape, shape(), container queries, if(), and more.
Antiquated CSS and why we needed it
I came across a catalogue of antiquated HTML snippets and artefacts, the kind of markup we just accepted as necessary in the <head> of every site.
It got me thinking about the CSS side of that same period, the stylesheets rather than the markup. My first job in 2009 was building marketing campaign pages for an electronics distributor’s B2B storefront, where dropping IE6 was not a conversation anyone was going to have. Developers eventually landed on one clean way to target different IE versions, but getting there took a lot of less elegant detours.
HTML
Antiquated HTML Snippets and Artefacts
This article doesn’t cover once-specced but now obsolete bits of HTML but instead looks at all the snippets that have wormed their way into websites as result of, or in combat against, third-party integrations, browser competition, vendor extensions, and platform-specific hacks. The bits of HTML that were included for reasons, and which have been forgotten for present irrelevance. The snippets that live on only in the markup of sites from bygone eras and in the minds of those who fought during the browser wars.
Chrome 153 ships camera and microphone elements
The release also ships one of Chrome’s more consequential recent additions: the <camera> and <microphone> elements, declarative HTML controls that hand the browser, rather than the page, ownership of the permission prompt for capture devices. They follow the combined <usermedia> element introduced in Chrome 151.
JavaScript
How We Built a Fast Data Grid in React, Vue, and Svelte
We built the same data grid for React, Svelte, and Vue. Here's what we learned about performance, framework differences, and why the framework is the last thing you should blame when your app is slow.
Formisch: The lightweight, schema-first, and fully type-safe form library for React, Solid, Vue, Svelte and more
Formisch is a framework-agnostic form library that helps you build forms in a type-safe and performant way. It provides a simple and intuitive API to manage form state, handle user input, and perform validation. Formisch is built on top of Valibot, which is the source of truth for validation and type inference.
Sharing Application State in a URL
How to store application state in a URL fragment without a backend, including Base64url encoding, compression benchmarks, browser history, and URL limits.
Half Past Fetch
await fetch(url) looks like it waits for the response, but it only waits for the headers. By the time the promise settles you are holding a Response object whose body is still arriving over a connection that is very much open, and the code after your await runs while bytes are still on the wire.
In this article we'll go through what the specification says the promise awaits for, what happens to the connection while you decide whether to read the body, what clone() does when there is nothing finished to copy yet, how abort behaves once you already have a Response in hand, and why a timeout you thought covered the request often doesn't. There are subtle browser and Node differences worth knowing about too.
Creating Web Widgets Using the Document Picture-in-Picture API
Firefox 151 recently shipped the Document Picture-in-Picture API. This isn’t the same thing as the (regular?) Picture-in-Picture API, which pushes videos into a resizable window that remains visible even after switching browser tabs or OS windows. No, the Document Picture-in-Picture API enables us to put anything into the window.
I guess we can think of these windows as web widgets. We can use them for floating stock tickers, live chat conversations, playlists, to-do lists, notes, spreadsheets — anything that we’d want to keep on the screen at all times.
The general idea is that we create a Document Picture-in-Picture window (DPIP window), and then we put HTML, CSS, and JavaScript into it. It’s pretty simple when you think about it, but as we explore how the Document Picture-in-Picture API works, we’re going to tackle a slightly more complex scenario that you’ll probably run into.
Miscellaneous
How to optimize images in React for better web performance
Slow React apps can kill user experience. More often than not, it’s the image assets in the app that cause the slowdown. Optimizing images can give a big boost to the performance of any application. In this post, we’ll walk through a complete image optimization strategy and bring LCP down from ~8s to ~1s.
Building games with Astra
How I built a procedural space exploration game in Codex, from concept art to planets you can land on.
Why frontends fail when you approach them like a backend
I will never forget the look on a contractor's face when he stared at a technically correct, but aesthetically disappointing dormer at our house.
"Everyone can mess around," he said. Referring to the fact that most people can accomplish the basics, but not all master a craft.
In my own industry, there is no specialty that makes me think of these words more than frontend web development.
UI Component Libraries
Free UI component libraries for websites and web apps. Categories include Bootstrap, Tailwind, Angular, React, Nextjs, Shadcn, Vue, Nuxt, Svelte, Gatsby, Astro, Laravel and more.
Opensource UI - Free React & Next.js UI Components
Browse 207+ free, MIT-licensed React and Next.js UI components on Opensource UI. Copy and paste production-ready TypeScript source code with live previews across buttons, clocks, mockups, widgets, and more.