Together with  Frontend Masters logo
🚀 Frontend Focus

#​707 — September 3, 2025 | Read on the web

⚓️ The Basics of Anchor Positioning — Ahmad runs us through the basics of Anchor Positioning (placing an element based on the position of another element). He highlights the problem it’s looking to solve, along with how this feature will work. All told with plenty of code and excellent visual examples. Browser support isn’t universal just yet, but it’s worth learning as it’s going to be super useful.

Ahmad Shadeed

Google Chrome at 17 Years Old: A History — An amazingly thorough walkthrough here of Chrome’s origins, notable rise, and evolution over the years. Addy looks at various key milestones (multi-process architecture for example), and shares quite a few behind-the-scenes browser tidbits too. A good read.

Addy Osmani

⚖️ Related: A judge has now ruled that Google gets to keep Chrome following the search antitrust case.

Boost Coding Productivity with AI-Assisted Tools & Agents — Join Steve Kinney for this course looking at how best to harness AI for faster, higher-quality code. Learn how Cursor and Claude Code can be used to handle project plans, carry out inline edits, and perform larger background tasks — all adhering to the guidelines you set.

Frontend Masters sponsor

Getting Creative with Images in Long-Form Content — This is a fun article looking at a handful of ways in which we can, via images, break out from a typical rectilinear design to one that’s unique and eye-catching using just a few lines of CSS.

Andy Clarke

⚡️ IN BRIEF

📙 Articles, Opinions & Tutorials

▶  Visualizing Responsive Typography — An overview of the various ways in which we can create fluid font sizes, generally expressed as a clamp() function, combining em (or rem) with vw (or vi) units. Miriam notes the results can often be difficult to parse and aims to help us wrap our heads around things.

Miriam Suzanne

You No Longer Need JavaScript (For Many Frontend Things) — A neat look at some of what plain HTML and CSS can achieve in terms of effects and techniques you might once have relied upon JavaScript.

Lyra

Turn Your Lovable App Into a Multi-Tenant SaaS — Clerk’s Organizations bring multi-tenancy to Lovable apps. Easy setup, real examples, no auth headaches.

Clerk sponsor

Say Bye with JavaScript Beacon — The Beacon API has been supported in all mainstream browsers for years now and provides a way to send a guaranteed (even if a page is being unloaded) non-blocking request to a web server when no response is needed.

HemathKumar R

CSS Elevator: A Pure CSS State Machine with Floor Navigation — A fun look at how we can use features such as has(), custom properties, counters, and more to create something functional and interactive, without the need for JavaScript.

Christian Sabourin

How AI Is Changing Search Behaviors — Generative AI isn’t replacing search, but it is reshaping it, becoming a growing part of how people now look for information.

Moran, Rosala, Brown (NNg)

Should You Preload Fonts for Performance? — When preloading helps, when it hurts, and the rules to follow.

Erwin Hofman

Speeding Up Firefox Local AI Runtime — How Firefox accelerated inference by replacing the WASM-based ONNX runtime that powers Transformers.js with a native C++ counterpart.

Ziadé, Adenot, and Guelton

Should the light-dark() Function Support More Than Light & Dark Values?
Sunkanmi Fafowora

10 CSS Features I've Found Really Useful
Kool Codez

🧰 Tools, Code & Resources

OverType: The Markdown Editor That's a Textarea — Described as an “under-engineered” solution that has “perfect WYSIWYG alignment using an invisible textarea overlay technique”, with optional toolbar. Try some demos or view it on GitHub.

David Miranda

Obs.js: Context-Aware Web Performance for Everyone — Uses the Navigator and Battery APIs to get contextual information about your users’ connection strength and battery status so you can adapt your site/app to the environment or collect the data for analysis.

Harry Roberts

You Don't Need a Native App to Scan Barcodes and QR Codes — Add lightning-fast code scanning to your web app with STRICH. Simple, predictable pricing, free trial and demo!

STRICH sponsor

90's Cursor Effects — This is a blast of nostalgia! A neat collection of throwback cursor effects but designed for the modern web (fast, efficient). The associated repo is here. Not new, but new to me, and cool enough to share.

Tim Holman

EmbedPDF: A PDF Viewer that Integrates with any JavaScript Project — No dependencies, supports any framework, and has features like themes, annotations, redaction, search, smooth scrolling, and more – all available via a dev-friendly API. See the docs or try a live demo.

EmbedPDF

Cornerstone3D 4.0: Build Web-Based Medical Imaging Apps — A set of JavaScript libraries to build things like this 3D CT scan viewer, PET-CT scan viewer, and much more besides. There’s a lot to this project, including plenty of tutorials.

Open Health Imaging Foundation

😵‍💫 ...and finally

Has darkgray being lighter than just gray (here are all the grays for reference) ever caught you out? [Via comiCSS]

(The above comic comes from comiCSS by Alvaro Montoro – a webcomic that's both about CSS and coded with CSS.)

Ipx.