Frontend Focus
Plus, the evolution of frontend dev over the past twenty years, Safari's MCP server, and an intro to anchor positioning.
Together with  Master.dev
🚀 Frontend Focus

#​749 — July 8, 2026 | Read on the web

The Descent: What Happened to the Frontend While You Weren't Watching — A comprehensive deep dive into the technical evolution of frontend development over the past twenty years. David tracks the changes from simple FTP uploads to complex build pipelines, before pondering whether we may be circling back to HTML-first principles. He also shares a running list of tools in the mix in 2026.

David Poblador i Garcia

⚓️ Getting Started with Anchor Positioning — A cool new CSS feature, well explained. Josh enthusiastically runs us through the most useful bits of this API, sharing plenty of examples and code snippets. Jake Archibald warns of some bugs to keep in mind though.

Josh W. Comeau

Agentic Frontend Development — Join this interactive workshop and see how AI can help with the messy middle of frontend work. Covers practical patterns for prompting, reviewing, debugging, and iterating with Codex — to help design, build, and refine modern interfaces.

Master.dev sponsor

CSS Mixins Implementation Starting in Chromium — It's early days, but big news via Patrick Brosset: CSS mixins are coming to Chromium, as the Edge team has begun implementation. These let you define reusable blocks of styles with arguments, much like Sass mixins but browser-native.

Patrick Brosset (Microsoft)

Introducing the Safari MCP Server for Web Developers — Safari Technology Preview 247 introduces a new Model Context Protocol server feature that gives agents the ability to know how your code actually renders in the browser by connecting it to a Safari browser window. This post runs through the use cases and available tools.

Saron Yitbarek (WebKit)

💡 More generally, Safari Technology Preview 247 adds support for calc-mix(), and fixes a wide variety of CSS and rendering bugs.

⚡️ IN BRIEF

📙 Articles, Opinions & Tutorials

Get Ready for the CSS border-shape Property — Support is Chromium-only for now, but this property comes on the heels of shape() and corner-shape. Temani does an excellent job of highlighting the power this new feature unlocks and how it can be used to make fancy decorations, neat animations, and more.

Temani Afif

Fluid Typography with progress() — A walkthrough of building fluid typography scales with CSS progress() and range mapping, mixing pixel breakpoints with rem font sizes so user font-size settings aren’t overridden. The downside is no Firefox support, but it’s possible to fall back.

Matthew Morete

Vibe-Coded Apps All Look the Same. Here's How to Make Yours Stand Out — AI can assemble a layout, but it can't see it. Use these principles to turn agent output into a polished app.

Expo sponsor

Selective Format Read: A Better Default for the Async Clipboard API — An improvement which shifts the API to a lazy-loading model, fetching and sanitizing data only when specific MIME types are requested.

Prashant Singh

▶  Frontend Minimalism in Action: Do More With Less JavaScript — A roughly 45-minute presentation in which Peter explores how frontend teams can build maintainable, resilient, and future-friendly projects by “relying less on hype-driven dependencies and more on web standards, deliberate technology choices, and minimalist engineering”.

Peter Kröner

Building Persistent Page Transitions with WebGPU and Vanilla JavaScript — How to render seamless page transitions using a single persistent WebGPU scene. Planes track empty DOM slots, then keep/remove/add tweens their bounds and opacity with GSAP. Live demo.

Ben Paine

Fixing Full-Bleed CSS — Addresses the long-standing “scrollbar problem” with full-bleed layouts by trading 100vw for container query units, with a dash of @property magic on top.

David Bushell

Designing for People with Reading Disabilities
Grace Snow

🧰 Tools, Code & Resources

Google's New Toolkit to Make Your Website 'Agent-Ready' — A new Lighthouse toolkit which can audit how agent-friendly your site is, and check things like accessibility tree quality, layout stability, and WebMCP integration. The score is informational for now, but offers a solid hygiene checklist.

Kulikowski and Hablich (Google)

Wordgard: A New Rich Text Editor Library from ProseMirror's Creator — A thoughtfully-built, modern, modular JavaScript rich text editor control. There's a live demo and here's how to get started.

Marijn Haverbeke

Live Dashboards Without a Streaming Pipeline — TimescaleDB automates your materialized views in Postgres so dashboards show live data. Get $1000 credit to start.

Tiger Data (Creators of TimescaleDB) sponsor

visual-json: A Visual JSON Editor That's Schema-Aware, Embeddable and Extensible — Includes tree view, form view, diff view, and raw editing mode. You can toggle display options such as inline values and property counts. Source code.

Vercel Labs

OverflowGuard: A Component to Build Around Content, Not Breakpoints — Available as a React component or Custom Element, the idea is to avoid magic numbers, media queries, and container queries, so the element adapts on its own, even with dynamic content. Some nice ideas here which you can try out via interactive demos on the page. Source code.

Artur Marczyk

Bundle Size Comparison Across Frameworks: An Interactive Resource to Compare Bundle Sizes for Popular Frameworks — Currently compares 9 frameworks and versions thereof, by building the same demo app with each and generating a report. More details on the repo.

Gaoqiang Liang

µJS (muJS): A Lightweight Ajax Navigation Library — Offers an easy way to add SPA functionality without a framework or build step, just a simple script tag that intercepts existing links, form submissions, etc., and works with any backend. Source code.

Digicreon

🚓 ...and finally

GTA2 Web — JS Port — Here’s the top-down classic GTA 2 ported to run natively in the browser, with WebRTC peer-to-peer multiplayer added on top.

ERIK MARKUS KANNIKE

Issue 748 #749