Together with  WorkOS
🚀 Frontend Focus

#​708 — September 11, 2025 | Read on the web

Liquid Glass in the Browser: Refraction with CSS and SVG — A superb, solid exploration of how to approach recreating Apple’s Liquid Glass effect on the web using CSS, SVG displacement maps, and physics-based refraction calculations. Good, informative visuals here and a playground to see things in action. Demos are Chrome-only right now.

Chris Feijoo

🎨 Color Shifting in CSS — Changing the shape or position of something is a common focus in Web animations, but what about smooth and attractive color shifting too? Josh shares what he knows about it, some color space quirks, and how to keep things quick using CSS filters.

Josh W. Comeau

Roles Get Messy Fast. WorkOS RBAC Keeps Access in Check — WorkOS RBAC gives you full control over user access. Define custom roles, group permissions, and sync with IdP groups via SSO and SCIM. Developer-friendly APIs and a built-in dashboard make implementation simple.

WorkOS sponsor

Make Your Proposals for Interop 2026 — The feature submission form for Interop 2026 proposals is now open until later this month. Here Rachel outlines what makes a good submission for the future, and shares a quick update on 2025 progress. Jen Simmons of the WebKit team has also shared some notes on the process.

Rachel Andrew

⚡️ IN BRIEF

📙 Articles, Opinions & Tutorials

What You Need to Know About CSS Color Interpolation — Color interpolation is, in essence determining the colors between two color points, and here Sunkanmi shares how we can use this with various CSS properties and functions, be that via gradients, transitions, or direct mixing.

Sunkanmi Fafowora

Low and Mid-Tier Mobile for the Real World — What devices would constitute as a real-life low or mid-tier mobile in 2025? How would such devices map to a Chrome DevTools presets? Considering that not everyone is using the very latest and greatest iPhone, Harry investigates.

Harry Roberts

[Workshop] Build and Monitor AI Agents and MCP Servers - RSVP — Learn to debug AI agents and MCP servers faster with Sentry’s monitoring tools, Seer, and AI PR Review.

Sentry sponsor

The Fundamentals of CSS Alignment — An exploration of the logic behind all alignment properties (not just entering!) and how they work in each layout.

Temani Afif

“Your” vs “My” in User Interfaces — When labelling items in your UI which should you use (My Account, Your Orders, etc), and do you even need them at all?

Adam Silver

How AI Is Changing Search Behaviors — Generative AI isn’t replacing search, but it is reshaping it, becoming a growing part of how people now look for information.

Moran, Rosala, Brown (NNg)

Why You Should Test Your Page Without JavaScript — Highlights the reasons why JS can fail, what progressive enhancements we can put in place, and what scenarios are possible outliers.

Ilknur Eren

How to Optimize Third Party Scripts with Web Workers and Partytown
Jakub Andrzejewski

Functional Custom Elements the Easy Way
Ginger (Piccalilli)

🧰 Tools, Code & Resources

Pokémon Cards CSS Holographic Effect — Yep, I still collect Pokémon cards, so this is like shiny catnip to me. A bunch of demos using advanced CSS to create rather accurate, realistic-looking effects. There’s 3D transforms, CSS gradients, blend modes and more. Cool!

Simon Goellner

Announcing Reciprocate, A Sweet Solution for Making Your HTML Web Components Reactive — A helper utility for adding signal-based reactivity and attribute/property reflection to any vanilla custom element class. There’s a demo here, and the repo is here.

Jared White

Introducing Free Trials in Clerk Billing — The easiest way to… not charge your customers? 🤔 Find out how.

Clerk sponsor

Peaks.js 4.0: UI Component for Interacting with Audio Waveforms — A project originally spawned from the BBC’s R&D department, Peaks renders audio waveforms to a canvas element and allows scrolling, zooming, and the sort of things you might otherwise see in an audio editor. LGPL licensed.

Chris Needham et al.

Splide: Lightweight and Accessible Slider/Carousel — It’s nice to see a clean, modern spin on the often maligned UI element. The homepage is packed with demos too. No dependencies, written in TypeScript, and boasts a clean report from Lighthouse. GitHub repo.

Naotoshi Fujita

mdream: Convert Any Site to Clean Markdown & llms.txt — Ostensibly for boosting a site’s AI discoverability, among other things.

Harlan Wilton

Cosmic UI: A Curated Set of Futuristic UI Components — Sci-gi fans will love this one. The customizable framework-agnostic components use SVG for some of the unique shapes and the functionality is powered by the Zag library. Repo here.

muhammad rizki

.htaccess: A Helper Script to Easily Block Website Traffic by Country
Jens Oliver Meiert

Vue.js Plugins Collection: A Categorized, Searchable Directory of 90+ Plugins
Monterail

📰 Classifieds

$100 off yearly Frontend Masters membership! 250+ courses, personalized learning path, workshops with devs from GitHub & Netflix. Sale ends soon →


⚡️Add lightning-fast barcode & QR scanning to your web app with STRICH, a sleek JS library. Clear, predictable pricing. Free trial and demo!

Ipx.