Accessibility
Accessible inline collapsible
How to embed accessible collapsible definitions directly in text without breaking paragraphs or disrupting reading flow. Native HTML <details> elements can’t go inside a paragraph, but you can build a custom inline collapsible using a styled <button> with aria-expanded and aria-describedby, paired with a <span> for the expanded content. The solution keeps accessibility in mind (keyboard interaction and screen reader semantics) while preserving inline flow, with minimal CSS and JavaScript to toggle expanded state.
Demo here.
aria-haspopup might not do what you think it does
Developers like to put aria-haspopup on buttons inside main navigations to indicate that the buttons control subnavigations. There is no particular problem with the aria-haspopup property itself, but when used alone without any extra work, it can confuse users or even prevent them from accessing the submenu.
Why Your Lighthouse Score of 100 Means Almost Nothing
Your website just passed automated accessibility testing with a perfect 100. Your team celebrates. Your compliance officer marks it as resolved. And none of this matters because you’re still locking out millions of people from using your product.
This is the reality of relying on automated accessibility tools, which catch approximately 30% of accessibility issues – and that 30% represents only a small portion of what needs to be assessed. A perfect score tells you that you’ve addressed at most 30% of possible issues, not that your site is actually accessible. The unfortunate truth is they’re fundamentally limited by what can be measured programmatically.
Over 20 years of accessibility audits, I’ve seen this pattern repeatedly: organizations focus on automated testing only, without performing the necessary manual testing to truly ensure conformance.
CSS
Building Fluid Typographic Scales with clamp() and :heading()
In the last article, I showed how to use explicit :heading(N) level mapping with pow() to create mathematical typographic scales. This article extends that approach to fluid scaling with clamp(), so your heading sizes adapt smoothly to the viewport instead of jumping at breakpoints.
Yet Another Way to Center an (Absolute) Element
TL;DR: We can center absolute-positioned elements in three lines of CSS. And it works on all browsers:
.element {
position: absolute;
place-self: center;
inset: 0;
}
Making interesting borders with CSS corner-shape
You can make cool beveled, rounded, notched, scooped, and elliptical borders with the new CSS corner-shape property.
Typescale AI - Typography Scale & Design Tokens Generator
Generate modular type scales and design tokens instantly. Preview in real layouts, tune line-height, and export clean CSS/JSON for your design system.
A Generator for Fancy Frames
Generate a fancy frame with one line of code using clip-path: shape(). Simply adjust the setting and obtain a variety of cool frames (Squiggle, Wavy, Ragged, Torn, etc.)
It's a responsive single-element implementation that works with images. It's also ready for border-shape.
Fancy Frame generator here.
A Squircle Shape using clip-path: shape()
Until better support for corner-shape, we can approximate a squircle shape using clip-path: shape(). Here's a flexible implementation using CSS variable to easily control the radius.
The Odometer Effect (without JavaScript)
With CSS, we can fill numbers into HTML elements now, thanks to the attr() function and a bit of trickery. This allows design effects to be applied to those numbers. Today, we’ll look at an odometer effect, meaning numbers that “spin” vertically, like the mileage meter on a vehicle. This effect is useful for dynamically displaying numeric values and drawing the user’s attention when the values change, such as a rolling number of online users, a tracked price, or a timer.
HTML
You can use newline characters in URLs
According to the WHATWG URL specification used by modern browsers, URLs containing ASCII newline and tab characters aren’t immediately rejected — the parser first flags a validation error and then strips those characters and continues parsing. As a result, links with embedded newlines or tabs, such as those broken across lines in HTML for readability, generally still work in browsers. He also notes that in data URLs (base64-encoded images or inline SVG), whitespace characters are ignored during decoding, so you can format them with newlines for readability without breaking the URL.
JavaScript
Explore Design Patterns in JavaScript, React and Vue
Design patterns are a fundamental part of software development, as they provide typical solutions to commonly recurring problems in software design. Rather than providing specific pieces of software, design patterns are merely concepts that can be used to handle recurring themes in an optimized way.
Modern web development involves lots of different kinds of patterns. This project covers the implementation, benefits and pitfalls of common design patterns using ES2015+, React-specific design patterns and their possible modification and implementation using React Hooks, and many more patterns and optimizations that can help improve your modern web app.
Angular Best Practice File Structure Principles 2026
As Angular applications grow, file structure stops being a cosmetic choice and becomes an architectural decision. A well-designed folder structure does more than keep your project tidy — it enforces boundaries, clarifies responsibilities, improves scalability, and prevents long-term technical debt. In this article, we’ll explore a practical and scalable Angular file structure that balances vertical feature slicing with a clear system core, making your codebase easier to maintain as your product evolves.
6 React Server Component performance pitfalls in Next.js
Discover the most common React Server Component performance mistakes — from blocking top-level awaits to layout async traps — and how to restore streaming.
react-kino: Cinematic scroll-driven storytelling for React
- Tiny -- the core scroll engine is under 1 KB gzipped. GSAP ScrollTrigger alone is 33 KB.
- Declarative -- compose
<Scene>,<Reveal>,<Parallax>, and<Counter>like regular React components. No imperative timelines. - Lightweight runtime -- react-kino uses a tiny internal engine package (
@react-kino/core) plus React peers. - SSR-safe -- every component renders children on the server and animates on the client.
Requirements: React 18+
Popover API or Dialog API: Which to Choose?
Choosing between Popover API and Dialog API is difficult because they seem to do the same job, but they don’t. After a bit lots of research, I discovered that the Popover API and Dialog API are wildly different in terms of accessibility and we'll go over that in this article.
React 19 Compiler: What Senior Developers Need to Know
The patterns that separated senior React developers from their junior counterparts for half a decade are disappearing. The React Compiler automates away the expertise behind useMemo, useCallback, and React.memo boundary placement. Here's what the compiler does under the hood, what senior developers can safely stop doing, and what new competencies define performance expertise in modern React architecture.
React Compiler and Beyond: Capability Boundaries of Compiler-Driven UI Frameworks
The article explains that the React Compiler improves performance by automatically memoizing values and tracking dependencies, reducing unnecessary re-renders without developers needing manual optimizations. However, it does not change React’s core runtime model—components still re-execute and rely on reconciliation. The author argues that this means compiler optimizations can help, but they cannot fully match frameworks that move UI reactivity and updates mostly to compile time.
Date Math in JavaScript: The Hidden Trap You’ll Eventually Hit
The Date object in JavaScript is frequently one that causes trouble. So much so, it is set to be replaced by Temporal soon. This is the story of an issue that I faced that will be much easier to handle once Temporal is more widespread.
A simple setMonth() call jumped from Jan 2024 to March 2023. Here’s the timezone overflow chain—and the fix with UTC and Temporal.
Sticky Grid Scroll: Building a Scroll-Driven Animated Grid
Learn how to build a structured scroll-driven image grid where movement unfolds progressively within a sticky layout.
But beyond the visual result, this project became an exploration of structure: how scroll can be mapped to time, how animation phases can be orchestrated, and how layout and motion can be designed together as a single system.
Technically, the animation relies on GSAP, ScrollTrigger, and Lenis.
Masonry Grid - A fast, lightweight, and responsive masonry grid layout library in vanilla JavaScript
- Lightweight. ~1.4 kB (minified and brotlied). Zero dependencies.
- Fast. Direct DOM manipulation with optimized reflow algorithms.
- Responsive. Automatically adapts to container size changes using ResizeObserver.
- TypeScript-first.
Examples here.
UX
Design Systems Checklist
After building various design systems for clients and companies, I wanted to take what I've learned to write up a checklist that you can use to make sure you've covered all the essentials.
Miscellaneous
Smooth UI animations on server-rendered HTML
I’ve been using Hotwire in production since the beta release of Turbo, and it’s changed the way I build web apps. It’s a great way to get SPA-like interactivity at a fraction of the complexity.
The combination of Turbo morphing, View Transitions and Stimulus is a great leap in Rails frontend development. Together, they produce something that genuinely looks and feels like a modern SPA, at a fraction of the cost, while keeping writing the same simple views and controllers we’re used to.
Claude Code vs Cursor: The Ultimate Comparison (2026)
AI-assisted coding is no longer optional tooling for the curious. It has become infrastructure.
Expose Your Design System to LLMs
LLMs drift, fabricate tokens, and start every session from scratch. Here's how to feed your design system to AI coding agents so they stop guessing.