Accessibility
Aria-labels and Privacy: A Word of Caution
Using aria-labels can expose sensitive data to tracking software.
Accessible Names and Labels: Understanding What Works and What Doesn’t
Defining labels for user interface (UI) components may seem straightforward, but in practice, it’s an area where accessibility issues frequently arise. Developers may assume that if a label is visible on the screen, assistive technologies like screen readers will automatically associate it with the corresponding control, but that’s not the case.
This article explores how to correctly define and associate labels and accessible names for UI elements to ensure that all users, including those relying on assistive technologies, can understand the purpose of each control.
CSS
Some practical examples of view transitions to elevate your UI
The aptly named View Transition API is a powerful way to create animated transitions between two states. I use the word ‘powerful’, because the View Transition API is powerful — more powerful than anyone would expect. You can navigate between pages, or modify the DOM, or meddle with your webpage in a number of other ways, and have an animation between the two states.
When to use CSS text-wrap: balance vs. text-wrap: pretty
Compare and contrast two CSS components, text-wrap: balance and text-wrap: pretty, and discuss their benefits for better UX.
Range Syntax for Style Queries
Style queries are getting an upgrade. Like media queries, and container queries, They can now respond to a range of values, and not just predefined states.
The Range Syntax Has Come to Container Style Queries and if()
Being able to use the range syntax with container style queries — which we can do starting with Chrome 142 — means that we can compare literal numeric values as well as numeric values tokenized by custom properties or the attr() function.
Smashing Animations Part 6: Magnificent SVGs With <use> And CSS Custom Properties
The <symbol> and <use> elements are among the most elegant but sometimes frustrating aspects of SVG. The Shadow DOM barrier makes animating them trickier, but CSS Custom Properties act as a bridge. They let you pass colour, motion, and personality across that invisible boundary, resulting in cleaner, lighter, and, best of all, fun animations.
StyleX: A Styling Library for CSS at Scale
StyleX is Meta’s styling system for large-scale applications. It combines the ergonomics of CSS-in-JS with the performance of static CSS, generating collision-free atomic CSS while allowing for expressive, type-safe style authoring. StyleX was open sourced at the end of 2023 and has since become the standard styling system across Meta products like Facebook, Instagram, WhatsApp, Messenger, and Threads, as well as external companies like Figma and Snowflake.
Crafting Generative CSS Worlds
Learn how stacked grids and 3D transforms can bring heightmaps to life using nothing but the power of CSS.
Staggered Animation with CSS sibling-* Functions
The CSS functions sibling-index() and sibling-count() return an element’s position relative to its siblings and the total number of siblings, including itself. This is useful for styling elements based on their positions.
This post covers a demo where selecting an item causes the preceding and succeeding items to disappear sequentially from the outside.
CSS Gamepad API Visual Debugging With CSS Layers
Debugging controllers can be a real pain. Here’s a deep dive into how CSS helps clean it up and how to build a reusable visual debugger for your own projects.
Dynamic Tooltip Position with Anchor Positioning IV
Another demo using Anchor Positioning and Tooltips. This time, the tail will have a stretchy behavior when the tooltip gets closer to the edges.
HTML
Simple One-Time Passcode Inputs
If you’ve signed into an online service in the last decade, chances are you’ve been asked to fill a one-time passcode (“OTP”) field with a handful of digits from a text, email or authenticator app.
Despite the prevalence of this pattern, it seems to cause plenty of anxiety in otherwise level-headed web developers… especially if they’ve fixated on the current trend of segmenting the input to convey the passcode’s length (a new spin on the ol’ input mask).
If you find yourself in a similar situation, I have good news. You can ship a fully functional OTP input today without any CSS hacks or JavaScript frameworks.
A single <input> element: That’s where the OTP magic happens.
JavaScript
JScrewIt – Write any JavaScript with six characters: ! ( ) + [ ]
JScrewIt converts plain JavaScript into JSFuck code, which consists of only six different characters: ! ( ) + [ ]
Six Things I Bet You Didn't Know You Could Do With Chrome's Devtools, Part 1
In this post we’ll cover:
- Time functions with
console.time()andconsole.timeEnd() - Watch any DOM element for changes
- Monitor any function in the browser’s context
In the second post, coming soon, we’ll cover:
- Edit any website WYSIWYG style
- Record and replay any user actions
- Throttle only specific network requests
Enhancing Web Components Safely with Self-Destructing CSS
Applying the self-destructing CSS pattern to an old web components anti-pattern.
The best way to create a parallax effect in 2026
Here's what might surprise you: you don't need a third-party library. No , no 30kb of dependencies. No Lenis. No GSAP. No Three.js. Not even WebGL. Just vanilla JavaScript, some refs, and a scroll listener.
Angular Aria
Building accessible components seems straightforward, but implementing them according to the W3 Accessibility Guidelines requires significant effort and accessibility expertise.
Angular Aria is a collection of headless, accessible directives that implement common WAI-ARIA patterns. The directives handle keyboard interactions, ARIA attributes, focus management, and screen reader support. All you have to do is provide the HTML structure, CSS styling, and business logic.
Angular Aria currently includes directives for common interactive patterns:
- Accordion: Collapsible content panels that can expand individually or exclusively
- Autocomplete: Text input with filtered suggestions that appear as users type
- Combobox: Primitive directive that coordinates a text input with a popup
- Grid: Two-dimensional data display with cell-by-cell keyboard navigation
- Listbox: Single or multi-select option lists with keyboard navigation
- Menu: Dropdown menus with nested submenus and keyboard shortcuts
- Menubar: Horizontal navigation bar for persistent application menus.
- Multiselect: Multiple-selection dropdown pattern with compact display
- Select: Single-selection dropdown pattern with keyboard navigation
- Tabs: Tabbed interfaces with automatic or manual activation modes
- Toolbar: Grouped sets of controls with logical keyboard navigation
- Tree: Hierarchical lists with expand/collapse functionality
New in Angular 21, which just came out.
File Manager for React
Lightweight and fast React UI component for easy and efficient file navigation and management with full TypeScript support.
Release blog post here for some more info.
UX
Good Visual Design, Explained
To create appealing designs, align type and elements to a grid, build a clear visual hierarchy, use color intentionally, and stay consistent with every design choice.
Miscellaneous
Frontend Aesthetics: A Prompting Guide
Claude can generate high-quality frontends, but without guidance it tends toward generic, conservative designs. This guide shows you how to prompt Claude to produce more distinctive, polished output.
Best Free Fonts
Best Free Fonts is a curated selection of 214 free fonts. Including serif, sans serif, script and monospace.