Plus Babel 8 lands after eight years, MDN's new MCP server, and view transitions demystified.
Together with  Clerk
🚀 Frontend Focus

#​746 — June 17, 2026 | Read on the web

Introducing the MDN MCP Server — Bring MDN’s docs and browser compatibility data straight into an AI agent or IDE for accurate, up-to-date answers about the web platform, instead of relying on models' stale training data.

The MDN Team

clerk deploy: From Dev to Production in One Command — Run clerk deploy from a linked project and the Clerk CLI walks you through every production requirement: instance clone, DNS records with zone file export, Google and Apple OAuth credentials, and a verification loop for DNS, SSL, and email DNS.

Clerk sponsor

The Scope of CSS @function — A look at the evaluation scope of CSS custom functions: unlike regular custom properties that inherit through the DOM, they resolve variables from wherever they're called, letting library authors hide complex logic behind clean APIs, with some caveats.

Jane Ori

⚡️ IN BRIEF

📙 Articles, Opinions & Tutorials

The Golden Rule of Customizable Select — When using Safari 27's new customizable <select> element, always keep text on your option elements. Skipping that in favor of just icons or swatches hurts usability, accessibility, and older-browser fallbacks.

Yitbarek & Nguyen (WebKit)

Why Isn't My 3D View Transition Working? — Short answer: the view transition pseudo tree has no real parent, so the perspective property has nothing to latch onto. This post walks through the fix.

Sunkanmi Fafowora

Your Dashboard Is Fast. Your Data Isn't — Dashboards stall on slow queries, not slow components. Tiger Data keeps backend data as fresh as your UI.

Tiger Data (creators of TimescaleDB) sponsor

Demystifying the View Transition Pseudo Tree — Breaks down each layer of a pseudo-element tree that a browser builds during a view transition, looking at what each pseudo-element does, why they’re there, and how to target them when defaults need tweaking.

Cyd Stumpel

▶  Get Started with the <model> Element — The model element brings interactive 3D content into the page on iOS, iPadOS, macOS, and visionOS.

Aleksei Marchenko (Apple Developer)

Creating Memorable Web Experiences: A Modern CSS Toolkit — A practical reminder and tooling overview, looking at what we can now achieve without the technical overhead of the past.

Mariana Beldi

Improvements to Web for AI Should Benefit All Users — The Safari team recently opposed the WebMCP API, and Jason argues that rather than building AI-specific APIs, we should fix the underlying semantics. He concludes: “user needs come before agent needs”.

Jason Grigsby

Another Stab at the Perfect CSS Pie Chart... Sans JavaScript
Antoine Villepreux

🧰 Tools, Code & Resources

Prop For That: What JS Knows, Now CSS Knows — A library to tackle areas where CSS almost gets you there, but you’re forced to drop into JavaScript to get a value: mouse position, the time, a slider’s value, etc. Add an HTML attribute and the live values show up as custom properties, bridging the JS–CSS gap declaratively. It has a great demo page.

Adam Argyle

Handsontable: A Production-Ready Data Table That Feels Like Excel — Excel-like editing, 400+ formulas, virtualization — tested, accessible, and ready for production.

Handsontable sponsor

Mitos ASCII Tool: Convert Images into ASCII Text Illustrations — Used at Oxide for creating branded ASCII graphics, this tool not only converts images into ASCII art, but lets you live-code effects for animated hero image experiences, etc. GitHub repo.

Oxide Computer Company

Discover MapKit JS 6: Rebuilt for Today’s Web Developer — Apple’s privacy-first framework for integrating Maps into your site has had a big update. Version six ships as an npm package, and introduces TypeScript support via DefinitelyTyped. There’s a demo here.

Tim Chien (WebKit)

Templatical: An Open Source, Drag-and-Drop Email Editor SDK — Supports custom blocks with API-backed data, merge tags with your choice of template literals, full theming via design tokens, and lots more. The playground includes real-world use cases. Source.

Templatical

Svelte Animations: 50+ Free Animated Components and Effects Made with Svelte, Motion SV, and Tailwind — Includes three different component packs (Magic, Spell, and Fancy), which you can try out here.

Sikandar Bhide

OneGlanse: Track How Your Brand Appears in ChatGPT, Gemini, Perplexity, Claude, and Google AI Overview
OneGlanse

📰 Classifieds

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


🔄 That "Export PDF" button works fine until you hit 20,000 docs. See how to scale it with Foxit's PDF APIs.

🫟 ...and finally

Storied Colors: A Research Catalog of Color — An ongoing index of named colors, sharing the documented history of various hues, looking at their origins, dyes, chemical formulas, and how various colors got their names.