Together with  Tiger Data logo
🚀 Frontend Focus

#​734 — March 25, 2026 | Read on the web

The Great CSS Expansion — A well-organized walkthrough of how modern CSS can replace many of the features we once relied on JavaScript for, along with what CSS is still yet to solve. A solid look at the native features we should now be considering in place of heavier JS solutions.

Pavel Laptev

Your Dashboard Was Fast at Launch. What Happened? — Data grew and queries slowed. Someone added a pipeline, maybe a second database. TimescaleDB extends Postgres so dashboards query live data at scale. Hypertables, 95% compression, continuous aggregates. No stale reads. Start building for free.

Tiger Data (creators of TimescaleDB) sponsor

Easier Light-Dark Mode Switching: light-dark() is About to Support Images — The light-dark() spec has been updated and is moving beyond its original color-only limitation, with it being extended to support images. Bramus shows us the implementation syntax, and how we can use it to streamline theme logic in Firefox 150 and Chrome 148.

Bramus Van Damme

WebKit Features for Safari 26.4 — This latest version adds in support for CSS Grid Lanes (the new layout system formerly known as Masonry), various CSS zoom fixes, refinements to Anchor Positioning, support for math functions within img elements, and much more. A big release, so plenty to dig into here.

Jen Simmons (WebKit)

⚡️ IN BRIEF

📙 Articles, Opinions & Tutorials

Web Rewind: A Journey Through 30 Years of the Web — A fun nostalgia trip. Stick your headphones on, hit the spacebar and go back in time for a visual highlight reel of the web over the past three decades. Well-executed!

Opera

🤖 CSS Refactoring with an AI Safety Net — Rather than going all in on ‘vibe coding’ an app and then being largely in the dark on the resulting code, Daniela took a different approach, using AI tools to refactor in a more managed way.

Daniela Baron

Sneaky Header Blocker Trick — Josh explains the technique behind a subtle UI detail on his blog where the sticky header appears to change depending on scroll position within the page. It’s a nice touch, all done in CSS. As Josh said on Bluesky: “Feels a bit like I’m a magician revealing their trick”.

Josh W. Comeau

Native Auth Components for Your Expo App Are Here — Clerk Expo 3.1 ships prebuilt SwiftUI and Jetpack Compose components. Drop in AuthView and session sync happens automatically.

Clerk sponsor

Highlighting Footnotes — If you follow a link to a footnote at the bottom a page, it can sometimes be hard to tell where the footnote is. Unless you follow Kitty’s advice, that is.

Kitty Giraudel

The Color System I Wish I Understood Sooner — A two-layer approach (primitives and semantics) to managing and naming colors in your projects that can help long-term. There’s also a video version available should you rather watch.

Kyle Van Deusen

Experimenting with Scroll-Driven corner-shape Animations — This new CSS property is “mathematical, so it’s easily animated”. As such, Daniel takes it for a spin to animate on scroll for interesting UI effects. Chrome only for now though!

Daniel Schwarz

▶  Designing with Claude Code — Over the course of an hour, designer Steve Schoger shows us how he’s been making use of Claude Code in the design process.
Steve Schoger

SVG Favicons That Respect Theme Preference — An effectively simple touch.
Pawel Grzybek

Building a Dual-Scene Fluid 'X-Ray Reveal' Effect in Three.js
Cullen Webber

🧰 Tools, Code & Resources

Structure Revealer: A Bookmarklet for Visualizing Page Structure — An accessibility bookmarklet that highlights structural HTML elements on any page. It can highlight custom elements, has toggles so you can select what's highlighted, and can remember your preferences across sessions.

Lloydi

💡 The rest of the A11y Tools site is worth a look too – lots of handy stuff there.

Real Jetpack Compose. Real SwiftUI. From React Native — Expo UI exposes real SwiftUI and Compose components directly. No JS wrappers. Try it out!

Expo sponsor

theSVG: 4,000+ Brand SVG Icons for Developers and Designers — A catalog of over 4000 brand icons (think Google, Apple, GitHub, etc.) you can grab as SVGs or get JSX you can copy and paste into a React app. Here’s the Apple logo, for example.

docmd: Minimalist, Zero-Config Documentation Generator — Features include enterprise-grade versioning, no React/Vue (or similar) overhead, PWA support, built-in smart search, and lots more.

docmd

Tooscut: Professional Video Editing in the Browser with WebGPU and WASM — An impressive open-source, browser-based video editor, built on WebGPU and Rust/WASM. Chromium-only though.

Mohebi Far

Elena: Tiny Library for Building Progressive Web Components — It’s 2.6kB and is keen to mention that it doesn’t force JS for everything, meaning you can load HTML and CSS first, then use JavaScript to progressively add interactivity. There's a related blog post here, and here's the GitHub repo.

Ariel Salminen

Detail: A Collection of Small Details That Make a Big Difference — A curated, visual collection of user experience niceties (across design, type, motion, accessibility, interactivity, etc). You’ll no doubt pick up an idea or two here on nice touches to add to your site or app.

Rene Wang

Sugar High 1.0: A Lightweight JSX Syntax Highlighter — Doesn’t need React present, so you can use it for syntax highlighting JSX snippets anywhere. You can also theme it with CSS. GitHub repo.

Jiachi Liu

csskit: A High-Performance CSS Toolchain — Covers formatting, listing, minifying, bundling and more. It’s not quite ready for production use just yet, but is one you may want to keep an eye on.

Keith Cirkel

👾 ...and finally

gh-space-shooter: Transform Your GitHub Contribution Graph Into Space Invaders — A fun way to spruce up your contribution graph! Try it here by entering a valid username, then download the GIF for your profile or elsewhere. Sadly you don't get to play for yourself.

Zane Chen

Ipx.