Together with  Frontend Masters logo
🚀 Frontend Focus

#​731 — March 4, 2026 | Read on the web

The Most-Seen UI on the Internet? Redesigning Turnstile and Challenge Pages — We’ve all seen Cloudflare’s verification widget, or challenge pages — heck, you may well have seen them already today. Cloudflare serves these over 7.5 billion times each day, so making any design changes requires a lot of care. This is a detailed look at how they do just that, while maintaining accessibility and security standards.

Bacevicius, Foppa, Elmore (Cloudflare)

Learn Modern CSS from Kevin Powell — Kevin Powell brings his YouTube-famous CSS teaching to Frontend Masters. Master layout, typography, responsive design, and animations while building real understanding of how CSS actually works.

Frontend Masters sponsor

Chrome is Moving to a Two-Week Release Cycle — Starting in September, in an effort “to match the demands of a modern web”, Chrome will shift from a four-week to a two-week release cadence. This change is to the stable release, with no changes announced for the Dev and Canary channels. Chrome 200 in time for the next Olympics?

Mason & Ravichandran (Chrome for Developers)

Why is WebAssembly a Second-Class Language on the Web? — WASM may well have come a long way, but it remains tricky to work with huge amounts of glue code par for the course. Ryan makes the case that the WebAssembly Component Model could change this, by letting modules bind directly to browser APIs, load directly from script tags, and more.

Ryan Hunt

⚡️ IN BRIEF

📙 Articles, Opinions & Tutorials

You Can Use Newline Characters (and Tabs) in URLs — Daniel clearly explains some of the nuances of the WHATWG URL spec, revealing that browsers essentially allow for both newline and tab characters within URLs. Yes, it’s not actually valid, but it does work — meaning you don’t have to have unreadable long strings. Not something I was aware of!

Daniel Lemire

Getting Started with the Popover API — The Popover API turns tooltips from something you simulate, into something the browser actually understands — and this is a good primer on using it.

Godstime Aburu

💡 Zell Liew recently shared a related piece, asking which to reach for and when — the Popover API or Dialog API?

Clerk Skills: Accurate Auth Code from Your AI Assistant — Connect Cursor, Claude Code, or Copilot to current Clerk SDK patterns. No more fixing hallucinated imports and deprecated methods.

Clerk sponsor

An Exploit ... in CSS?! — The vulnerability highlighted here (the first major zero-day exploit of 2026) revolves around Chromium’s handling of the CSS @font-feature-values rule, but it’s actually triggered via JavaScript. Lee examines it, and encourages us to update our browsers.

Lee Meyer

The Odometer Effect (Without JavaScript) — Preethi shows us how to approach creating a dynamic display for showing changing numeric values with just CSS and HTML.

Preethi Sam

Chip Away — A critique of an often overused design pattern (badges or lozenges with small text), pointing out its flaws, and suggesting what we should do instead.

Donnie D'Amato

Sticky Grid Scroll: Building a Scroll-Driven Animated Grid — Scroll-driven effects can be a bit hit and miss, but this one does look neat.
Theo Plawinski

Distinguishing 'Components' and 'Utilities' in Tailwind
Zell Liew

A Complete Guide to Bookmarklets
Declan Chidlow

đź§° Tools, Code & Resources

▶  Trying the New CodePen 2.0 — We’re big fans of CodePen, so it’s great to see it go from strength to strength with a slew of new features and a complete rewrite of the platform. Cassidy runs through the changes here, including a new file system, tabbed views, code processors, and more. It’s currently in private beta, but you can request an invite.

Cassidy Williams

Your Frontend Is Fast. Is Your Data? — TimescaleDB extends Postgres so dashboards query live data. No pipeline delay, no stale reads. Try free.

Tiger Data (creators of TimescaleDB) sponsor

ASCII Drawing Board: A Web-Based Tool to Draw ASCII Diagrams — Has a few cool features including a “brush” of three sizes, custom sized canvas, and your text “brushes” are saved for later use.

Denis

Swatchify: Extract Dominant Colors from Images — Available as a Go-based CLI, a JS library, and REST API. Works entirely in the browser and has no dependencies. Accepts 6 different image formats and outputs as text, JSON, or PNG palette. Repo here.

James Campbell

8bitcn/ui: A Set of 50+ Accessible Retro-Styled UI Components — For that pixelated look your 1980s inner child will love! The platform is also a shadcn/ui registry so you can easily add your components, and you can enable an MCP server for access to the library via your IDE. Code here.

OrcDev

Heatmap: A Diff Viewer for Code Reviews — Replace “github․com” in any pull request URL with 0github․com and see a color-coded diff of each line/token indicating how much human attention the PR needs.

cmux

📰 Classifieds

📸 Add robust 1D/2D barcode scanning to your web app with STRICH. Easy integration, simple pricing. Free trial and demo app available


đź“– Master Visual Studio Code, and learn over 150 essential tips in this screenshot-packed guide from Louis Lazaris.

🕰️ A trip down memory lane..

1995: From Batman Forever’s Cinematic Design to HTML Tables — By 1995, the web had become a destination rather than just a document repository — as highlighted by this look back at the highly visual (for the time) Batman Forever website.

Richard MacManus

Ipx.