Plus Grid Lanes' accessibility pitfalls, Mozilla's plan to curb the bots, and Quake gets a CSS port.
Together with  Tiger Data logo
🚀 Frontend Focus

#​747 — June 24, 2026 | Read on the web

Modern CSS Theming with light-dark(), contrast-color(), and Style Queries — Get dark mode, automatic readable text, and per-component palettes, all from a single brand color with no JavaScript. Una combines light-dark(), the new contrast-color(), and style queries into one adaptive system, now Baseline across browsers.

Una Kravets

Your Loading Spinner Is a Slow Query in Disguise — Behind it is an analytics query your database can't answer fast enough. TimescaleDB extends Postgres so dashboards query live data at scale. Hypertables, 95% compression, continuous aggregates. No second database. Get $1000 credit to start.

Tiger Data (creators of TimescaleDB) sponsor

🔒 PACT: Anonymous Credentials for the Web — Mozilla shares the technical details behind their PACT proposal — a privacy-preserving way to curb bot abuse. It aims to let sites rate-limit bots via cryptography, without the need to track users or tie access to your device.

Dennis Jackson

Astro 7.0 Now Available — The popular framework for content-driven sites goes all-in on speed: a new Rust-powered compiler, a Rust Markdown/MDX pipeline, and Vite 8's Rolldown bundler combine for builds 15–61% faster.

Phillips, Stoppa, Kane (Astro)

✨ Astro's Starlight framework for building documentation sites on top of Astro has also just been updated to support Astro 7.0.

🟠 IN BRIEF

📙 Articles, Opinions & Tutorials

Your Grid Lanes Will Likely Fail WCAG 2.4.3 — A warning on the accessibility pitfalls of the new Grid Lanes feature. Manuel notes that it inherently breaks tab order, and while flow-tolerance can help, its default value is too low and even a high value is no silver bullet.

Manuel Matuzovic

Animating the <dialog> Element Using View Transitions — Rik quickly explains how to animate the <dialog> element using the View Transition API, takes a look at the Invoker Commands API, and shares some tips to improve the default behavior of the <dialog> modal.

Rik Schennink

Front-End Devs Are Shipping Real iOS and Android Apps. Join Them — The same React you already write, now on real phones. Expo runs the builds, store submissions, and updates.

Expo sponsor

Can Your AI Pass the Accessibility Test? — Aaron, along with Jessie Lorenz and Carie Fisher, recently gave a talk at Microsoft Build highlighting where coding agents fall short in regards to accessibility: "Out of the box, most coding agents are pretty terrible when it comes to accessibility."

Aaron Gustafson

Improving Card Patterns with Anchor Positioning — Shares a pattern using CSS anchor positioning to solve some of the problems often found with clickable card surfaces.

Emil Björklund

Which Copyleft Licence is Suitable for an SVG? — Possibly more complex than you’d think, as SVGs are less ‘images’ and more ‘software’.
Terence Eden

There’s No Need to Include navigation in Your Navigation Labels
Martin Underhill

Do Websites Need to Function Exactly the Same on Every Platform?
Bramus Van Damme

Ending Responsive Images
Jason Grigsby

🧰 Tools, Code & Resources

billboard.js 4.0: A JavaScript Chart Library Based on D3 — At nine years old, billboard.js now has a new, opt-in canvas-based rendering mode (SVG remains the default), smaller bundles, and better performance on large datasets. There are hundreds of demos ranging from donut charts and funnel charts to overlapping bar charts and radar charts.

Jae Sung Park (NAVER)

Kage: Shadow a Website for Offline Viewing — A tool that clones a web site and serves it up for offline viewing. The difference vs a normal "Save As" is it handles JS-rendered sites by saving the DOM from a headless browser.

Duc-Tam Nguyen

Render Clerk's Sign-In Components Flush, Without the Card Wrapper — The new elevation appearance option drops the card background, border, and shadow so your sign-in fits any layout.

Clerk sponsor

Wely: A Lightweight Web Component Framework — A unified toolkit for building components without a heavy framework. One CLI handles scaffolding, styling, testing, and bundling, and the output is portable native Web Components with a runtime of ~13 KB (Lit internally, plus Tailwind).

litepacks

Wirewiki: A Resource to Explore Infrastructure for Any Domain — Has a simple UI to do all sorts of common lookups including info on hosting, DNS, SPF, A, CNAME, TXT records, MX records, and lots more.

Ruurtjan Pul

Precise Type: A Type Scale Tool to Craft Precise Typography — A full-featured type scale tool to interactively customize modular or metric-based type scales. Also includes info on the models behind font size, line height, and letter spacing. Exports to CSS and CSV.

Adonis Raul Raduca

Able Player v5.0.0 Released — An accessible, cross-browser HTML5 media player (audio and video) designed to enhance the usability of audiovisual content for all users, including those with disabilities. Homepage.

Joe Dolson

🎨 Palette Inspiration: Color Palettes Extracted from Famous Art — Want a palette inspired by a masterpiece (like these Picassos)? Search and explore palettes built from 23,000+ works of art in different styles and genres.

Palette Inspiration

📰 Classifieds

🦊 Need to turn Word docs into PDFs in your app? Step-by-step DOCX-to-PDF walkthrough with working Python and cURL code.

👀 ...and finally

👹 cssQuake: A Port Powered by PolyCSS — We featured PolyCSS a few issues ago, and now someone has put it to work to create a CSS-powered Quake. The world is rendered as real HTML/CSS 3D geometry, without a WebGL or canvas renderer. Impressive stuff. You can see the repo here.

Agustin Capeletto

taken — This page reveals what your browser shares the moment you arrive on a site. No login, no form, no permissions. An interesting overview of the data points that are just offered up by default.

Rise Up Labs