Accessibility
WCAG 3.0 Will Create a Governance Problem Most Organizations Aren't Ready For
WCAG 3.0 is a new accessibility standard that is still being developed. Even after it becomes official, most laws and contracts will continue to require WCAG 2.x for many years. This means organizations will need to understand two standards at the same time. The one they must legally follow and the one that shows where accessibility is heading. If they confuse the two, they could make poor decisions about products, budgets, or accessibility work. The article explains why this will happen and how organizations can prepare for it now.
Return of CSS Outline
Outlines around focused elements such as buttons and inputs are important for keyboard users and people with different vision levels to use your websites. Since 2022 there is little excuse against properly setting these up, but there is a history of issues with outlines on the web and not every resource explains the issue.
Use cases for aria-expanded
Without reading dry documentation, finding the correct use for aria roles can be a challenge, so Steve Frenzel is here to break down the often mis-used aria-expanded.
A11Y.md: A context system for building accessible software by default — for developers and AI, with enforceable rules aligned to WCAG
A11Y.md is not a guideline. It is an accessibility validation protocol and a persistent context architecture for developing accessible software with AI. It is designed to integrate with AI agent systems (Cursor, Claude, Copilot) to ensure certifiable compliance from genesis.
CSS
Masonry (with Animation) in CSS
Perhaps you’ve seen the good news that display: grid-lanes; is starting to arrive in browsers which replicates what we generally call “masonry” layout in CSS. It’s in Safari and feature-flagged in Chrome and Firefox. It gives this staggered grid item layout (with lots of possibilities) reminiscent of a brick wall, hence the name.
Rebuilding FIFA Standings Layout with CSS Subgrid
A look at how to rebuild the FIFA standings layout by using CSS grid, subgrid, and more.
Using `animation-composition` in CSS to Avoid Redeclaring Other Values
If we use multiple @keyframes animate on an element where we’re changing the transform property, the latter will always completely wipe out the former declarations.
With CSS’ animation-composition property, however, the transforms in the animations can be combined.
Under my radar: the highlight API, text-indent and font-family: math
Discover three baseline web features that went under the radar: the CSS Custom Highlight API, advanced text-indent keywords, and mathematical typesetting.
Animating <details> Element with Only CSS
This post provides the most straightforward and minimum way to animate the HTML detials element using only CSS.
Throwing Confetti with CSS Random
Throwing some confetti while exploring the CSS random() function through its specification and its current implementations, finding both the beauty and the pitfalls along the way.
JavaScript
Async hydration in Preact
How Preact resumes hydration across Suspense boundaries, why useId made that hard, and how streaming changes the tradeoffs.
TypeScript in Practice: Benefits, Pitfalls and Patterns That Paid Off
TypeScript slowed me down at first. The compiler kept exposing problems I hadn't considered in JavaScript. Those same frustrations would eventually become its biggest benefit.
The biggest lesson wasn't that TypeScript helped me write code, but that it helped me change code with confidence.
These are the patterns that delivered the biggest return, along with the mistakes and rabbit holes I'd happily avoid next time.
How to Build the ChatGPT Typing Effect in Modern JavaScript
Learn how to create a streaming AI response that feels identical to ChatGPT.
TargetJS: JavaScript UI framework where state is a destination and code order defines the UI sequence
Most frameworks are great at rendering state. TargetJS is designed for the journey between states.
TargetJS is a JavaScript UI framework that replaces the "State → Render" model with "State → Transition → Render". It also lets code order directly define the UI sequence. It unifies UI, animations, API calls, event handling, and state into self-contained "Targets" that stack together like Lego pieces using Code-Ordered Reactivity.
It can be used as a full-featured framework or as a lightweight library alongside other frameworks. It is also a highly performant web framework, as shown in the framework benchmark.
Framework Benchmarks - Compare Frontend Frameworks
The same app, built in every frontend web framework, and then benchmarked.
Your JS Date Is Lying to You
The built-in Date API is full of traps: unreliable parsing, mutation, timezone confusion, and broken arithmetic. Here's what it's actually doing, and how Temporal finally fixes it.
UX
Laws of UX — Before & After Examples
Interactive before/after demos for the 21 core Laws of UX — see each law violated, then applied, with a ready-made stakeholder pitch for every design decision. A companion to lawsofux.com.
Loading UI - spinners, loaders, and loading animations for the web
Free and open source CSS and React loaders, spinners, and animations to create polished, accessible loading states for modern web apps.
Miscellaneous
Every Data Structure Simply Explained in 25 Minutes
Learn every essential data structure in one video — from the basics like arrays and linked lists all the way to advanced structures like Tries, Bloom Filters, and LRU Cache.