⚽️ Rebuilding FIFA's Standings Layout with CSS Subgrid — The World Cup is over now, but this is an interesting design problem worth unpicking and understanding. Ahmad approaches it with CSS grid, subgrid, and more, showing how to achieve a responsive, complex layout. Clean result, no messi. Excellent visual explainer, with code examples aplenty.

Ahmad Shadeed

How to Write Logs That Actually Help (Live Workshop) — When your app breaks at 2am, do your logs actually tell you anything? This workshop covers what to capture and how to structure your logs so "something broke" turns into "here's exactly what happened."

Sentry sponsor

📱 Low and Mid-Tier Mobile for the Real World — An update to a guide on picking representative test devices in 2026 (while reminding us that the newest phone isn't always the right one). This year's picks include the Galaxy A17 5G (5th best-seller globally in Q1) and Galaxy A56 5G (Europe's 2025 #1).

Harry Roberts

How Figma Built Accessibility Into a Canvas-Based Product — Canvas-rendered UIs get none of the browser's accessibility features for free, so Figma had to recreate screen reader support, keyboard navigation, and focus management from scratch.

David Winslow & Elynn Lee (Figma)

Time-Based Background Colour Transitions with Temporal and CSS color-mix — A nice example of using the Temporal API to grab a user's local time via PlainTime. This is then used to change a site's theme depending on the time of day. Neat!

Sophie Koonin

Return of CSS Outline — Makes the case for keeping focus outlines, a small but important accessibility detail. Plenty of sites still ship with outline: 0, found in old CSS resets, often leaving keyboard users unable to see what's focused — despite :focus-visible making this a solved problem.

Morgan Murrah

Just Shipped: JointJS for React. Build Diagramming Apps That Scale — A React diagramming library: a real data model, 100k-cell performance, and advanced UX out of the box. Try it now.

JointJS sponsor

🤖 Which AI Actually Reads Your Site? Two Months of LLM Traffic, Measured — You can make your site readable by LLMs, but do such 'AI SEO' efforts work? After tracking server logs for two months, here's a look at how it can shake out.

Rita Klubochkina

Under My Radar: The Highlight API, text-indent and font-family: math — Spotlights three CSS features that are now Baseline: the Custom Highlight API for DOM-free text highlighting, text-indent for print-style typography, and font-family: math for accessible formula rendering. Code and demos included for all three.

Brecht De Ruyte

Masonry (with Animation) in CSS — Chris explores fluid animation in masonry-style layouts using CSS Grid and Anchor Positioning, with a nod to the newly-arriving grid-lanes.

Chris Coyier

Animating the <details> Element with Only CSS — A clean way to animate this HTML element, toggling the open/close with pure CSS.

Austin Gil

Jelly UI: Soft Web Components — A dependency-free web components library that brings 'soft' physics effects to native HTML controls. There's 40 elements included, and you can get a feel for them via the showcase.

bmson

Introducing Babylon Lite: A Smaller, WebGPU-Only 3D Engine — BabylonJS is a powerful, long-standing 3D engine for the web. But the Babylon team have had a go at creating something new from scratch. The result is Lite — a much faster and smaller engine (with some tradeoffs).

Babylon.js Team

Fast Charts Start With a Fast Query — TimescaleDB extends Postgres so dashboards query live data at scale. No second database. Get $1000 credit to start.

Tiger Data (creators of TimescaleDB) sponsor

📊 Framework Benchmarks: Compare Frontend Frameworks — An experienced dev built the same weather app in numerous frameworks (Angular, React, etc…) along with an automated benchmarking system for them. Here's the results, covering bundle size, build time, UX metrics, and more.

Alicia Sykes

edge-aura: Give Your Viewport an Organic Screen-Edge Glow — A Canvas 2D effect for adding a full-viewport organic glow at the screen edge with no CSS required.

Takuya Jodai

A11Y.md: A Context System for Building Accessible Software by Default — Integrates with your AI agents (Cursor, Claude, etc.), based on 'enforceable rules' aligned with WCAG guidelines.

Felipe Arriaga Carriço

Decoy Font: A TTF Font That Hides What You Type — A free font designed to hide what you're typing from AI by misleading it with a 'decoy'. The font uses "separate spatial frequencies to communicate two different letters in the same space". I found slightly blurring my vision made this easier to see. An interesting experiment!

Mixfont