Frontend Focus Issue 718: November 19, 2025

Together with

The Cloudflare Outage of November 18, 2025 — Yesterday, as I’m sure many of you are aware, Cloudflare’s network saw a significant hours-long failure, resulting in widespread errors and access issues. Here's a detailed post-mortem, explaining what happened — pointing to a database permissions change as the culprit. The outage only highlights how Cloudflare, along with AWS, serve as critical parts of the overall infrastructure of the modern web.

Matthew Prince

☁️ More on that Cloudflare outage

Following the downtime Hugo Landau made the case for why one might consider Cloudflare "harmful", and noted how such reliance on their services "poses a hazard to the state of the web".

Rik Huijzer also penned a quick post on the outage and the risks of a single point of failure.

Kanakana had a slightly different take, arguing that the necessity of features on offer (DDoS protection, bot blocking, etc), often outweigh the drawbacks of such a centralized service.

Drop-In API Key Management for SaaS Apps — WorkOS API Keys lets developers add secure key management with a drop-in widget for creating, rotating, and revoking keys. Keys tie into WorkOS Organizations and Roles, providing scoped permissions and straightforward validation through the API or SDKs.

WorkOS sponsor

⚡️ IN BRIEF

🧱 The CSS Working Group has agreed to use display: grid-lanes for the Masonry Switch Syntax.
📏 Animating CSS width or height no longer forces a main thread animation in Chrome (Canary) under the right conditions. There's some nuance to this though, which Bramus explains here.
🤖 Google introduced the hotly-awaited Gemini 3 Pro LLM yesterday. On social media, some developers have noticed it's particularly good at building Web pages from a design POV, so it's worth experimenting with.
🤖 Mozilla shared how Firefox is "introducing AI, the Firefox way." Others, however, say "I think nobody wants AI in Firefox, Mozilla."

📙 Articles, Opinions & Tutorials

Six Things I Bet You Didn't Know You Could Do With Chrome's Devtools — Part one here covers the first three, with part two covering the last three. Covers time functions, DOM observation, user action replays, and more.

Rachel Kaufman

The Range Syntax Has Come to Container Style Queries and if() — Range syntax is now available as of Chrome 142 — as such, here’s an explainer of how it can be used with practical examples demonstrating it with custom properties, the attr() function, and literal values.

Daniel Schwarz

Agentic Postgres: Let Your Agents Cook — Build AI apps faster: Postgres with built-in memory, search, and free forkable DBs. Try it free on Tiger.

Tiger Data sponsor

The Story of a Font Licencing 'Shakedown' — A cautionary yet enganging tale recounting a dubious licensing claim from a major font publisher, based on automated scans, that was ultimately inaccurate. Yet, there are surely companies who would fold without such due diligence on display here.

Ameel Khan

When Everyone’s a Developer, How Do We Promote the Web Platform Over React? — A thought piece from the former founder of ReadWriteWeb on the idea that AI models ‘default to React and Next.js’ in preference to using widely available web/browser-native solutions.

Richard MacManus

Older Tech in the Browser Stack — There’s plenty of existing web features and technologies that you may not be aware of, or never touch directly in your day-to-day work. Bryan looks at one such example here with XPath, demonstrating how it can be used alongside CSS to query elements.

Bryan Rasmussen

Enhancing Web Components Safely with Self-Destructing CSS — Shares a way to reveal a hidden web component without relying on JavaScript.

Scott Jehl

Firefox to Add Support for a Feature Users First Requested in 2004 — Namely, customizable keyboard shortcuts.

Martin Brinkmann

Accessible Names and Labels: Understanding What Works & What Doesn’t
Akash Shukla

CSS Gamepad API Visual Debugging with CSS Layers
Godstime Aburu

The Best Way to Create a Parallax Effect
MATT ABRAMS

🧰 Tools, Code & Resources

css-extras: Useful CSS Custom Functions using the New @function Rule — The @function at-rule is still not widely available, but you might want to use this repository of 40+ custom functions to get a feel for the syntax, and maybe find something to use as browser support improves.

Sindre Sorhus

JS Game Rendering Benchmark: A Sprite-Based Performance Test to Compare JavaScript Game Libraries — Concludes that Babylon.js, Pixi.js, and Phaser are the best performing libraries with some honorable mentions. You can view and customize the test yourself here.

Jonny Ngo Luong

Keep Your E-Commerce App (And You) Stable This Holiday Season — A 100ms delay can drop conversions 7%. Prep for traffic spikes with smarter alerting, AI review, and monitoring.

Sentry sponsor

ESLint Plugin for Baseline JavaScript — This is the winner of a recent 'Baseline Tooling Hackathon'. It's an ESLint plugin that flags code using features newer than your configured Baseline target.

Ryuya Hasegawa

Baseline Status for Video: Easily Show Baseline Status — A niche tool that may come in handy for those creating dev videos. It allows you to create a short customizable video clip (to insert in your video) that displays MDN’s Baseline Status for a particular CSS feature.

Zoran Jambor

ImageConverter.dev: A 100% Local, Web-Based Image Converter — Includes support for 9 different image formats with a quality setting for output. There are also a few sister sites: an image resizer, bulk resizer, and a website screenshot tool.

Crownbyte