Together with  Frontend Masters logo
🚀 Frontend Focus

#​713 — October 15, 2025 | Read on the web

Firefox 144 Released: All Major Browsers Now Support View Transitions — A notable release as the View Transitions API is finally supported (as in all other major browsers). Other features include support for the moveBefore() method, profile management, changes to Picture-in-Picture, a new visual search option, and more. Here are the developer release notes.

Firefox

💡 MDN has also just published a beginner-friendly guide to view transitions in CSS for anyone new to the concept.

New Course: Professional AI Setup with Cursor & Claude Code — Boost your coding productivity with AI-assisted tools and agents. Learn how to use Cursor and Claude Code for precise inline edits, quick refactors, and automated background tasks that accelerate your workflow.

Frontend Masters sponsor

CSS Grid: A Helpful Mental Model and the Power of Grid Lines — Saron shares a mental model for helping us best understand CSS Grid, attempting to demystify things via a container-first approach. There are snippets and examples to illustrate just how grid lines can help with precise element placement.

Saron Yitbarek (WebKit)

🔢 Interop Feature Ranking — A new site from the Firefox team for sharing which of the future Interop features you care about most. Log in with GitHub then drag the various web platform features around to your liking to influence their future development.

Firefox

⚡️ IN BRIEF

📙 Articles, Opinions & Tutorials

Modern CSS Round-Out Tabs — Chris revisits an old tabular user interface pattern (as seen above) and updates it with modern CSS thanks to the shape() feature.

Chris Coyier

Catch Frontend Errors Before Your Users Do [Free Workshop] — Learn to use Web Vitals, distributed tracing, and AI debugging to keep your app fast, stable, and ready for the rush.

Sentry sponsor

The Thing About contrast-color — The current contrast-color() function chooses either white for dark backgrounds or black for light ones, which, despite the intention, may not make for the most comfortable reading. Geoff at CSS-Tricks shared his thoughts on this too.

Andy Clarke

The New progress() Function in CSS — Shares some solid possible scenarios where you may want to use this handy function.

Amit Merchant

CSS :is() :where() the Magic Happens — Revisits these two pseudo-class functions, looking at some use-cases, and how they can now be combined with :has().

Matthias Ott

The Killer Feature of Web Components — Dave sings the praises of Custom Elements Manifest (CEM), a feature he notes as being somewhat overlooked, but one that’s a powerful community-driven JSON format for surfacing all sorts of information about your component APIs.

Dave Rupert

Animating WebGL Shaders with GSAP: Ripples, Reveals, & Dynamic Blur Effects
Andrea Biason

How to Add Fast, Client-Side Search to Astro Static Sites
Ivan Chepurin

Implementing Dark Mode Toggle Without JavaScript
Jesse Stuart

🧰 Tools, Code & Resources

Mirrow: A DSL for Creating and Animating SVGs — The idea is that instead of SVGs being static assets, you can make them ‘living’ documents by providing a more code-like format for defining them. Check out the playground to interact with some Mirror code directly and see what you can create.

Mirrow Team

Tiger Lake: Real-Time Data Architecture Built for Modern Apps — Unify Postgres and your lakehouse. No pipelines, no lag—just real-time data and full context.

TigerData sponsor

Triplex: A Visual Workspace for Building React Three Fiber Components — Originally a commercial tool for visually laying out components in 3D scenes rendered with React Three Fiber, Triplex has gone open source and joined the Poimandres Collective (responsible for projects like Three Fiber, Jotai, and Zustand). Its scope has also increased with a VS Code extension and support for regular React DOM elements and components.

Mike Douges and Pmndrs

ogImage.click: A Free Open Graph Image Generator — Choose from different templates for the platform you want the image to display on. You can also use an API to generate the images on the fly via JSON or cURL.

Fady Mak

Dev Tools: 20+ Privacy-First Productivity Tools for Developers — Similar to other such resources. This one uniquely features keyboard shortcuts to switch tools/pages and includes tools for text, encoding/conversion, and generators, among others.

Hitarth shah

📊 Make Graph: Create Beautiful Charts and Graphs Online — A nicely designed tool with 10 chart types (bar, line, pie, scatter, heatmap, etc.), 10+ themes, prebuilt templates, and features for making the charts more accessible with visual pattern textures.

Make Graph

📄 EmbedPDF: A PDF Viewer That Integrates with Any JavaScript Project — No dependencies, supports any framework, and has features like themes, annotations, search, smooth scrolling, etc. Docs and a live demo here.

EmbedPDF

📰 Classifieds

🎉 The JavaScript for Everyone course is now ready and available to transform your skills! Use code JS4ELAUNCH to save £60 for 2 weeks only.

🎁 And a Bun Bonus

Bun 1.3: The Alternative Full-Stack JS Runtime — The performance-focused JavaScriptCore-powered runtime gets a big upgrade making it more of a ‘full-stack runtime’ including a dev server with hot reloading (yes, you can 'run' HTML files with Bun now — as above), the ability to scaffold React projects (with Tailwind and Shadcn!) out of the box, and isolated package installs by default. There’s a lot to like in here for front-end developers.

The Bun Team

Ipx.