Together with  Frontend Masters logo
🚀 Frontend Focus

#​698 — June 25, 2025 | Read on the web

A Guide to Scroll-Driven Animations with Just CSS — Here’s a look at how to start using scroll-driven animations via CSS (using scroll() and view()), with no JavaScript required. There’s code examples here highlighting how this technique can used to create progress bars or animate elements into the viewport. Saron also notes accessibility and motion considerations.

Saron Yitbarek

A Short History of Web Bots and Bot Detection Techniques — A solid high-level overview of the cat-and-mouse game of web bots and various detection techniques. Looks at the evolution of bots so far, along with IP reputation, fingerprinting, headless browser flaws, proxy detection, CAPTCHAs, behavioral analysis, and more. Good stuff.

OlegWock

Become an Accessibility Expert — Gain a foundational knowledge on all things web accessibility with this updated, in-depth video course. You'll learn about semantic HTML, ARIA labels, focus styles, color contrast, and much more.

Frontend Masters sponsor

Astro 5.10 Released — The main point of interest in this release is that Astro’s responsive image feature is now production ready. Additionally this version adds a new experimental fetch feature for real-time, dynamic content, along with improvements to CSP support.

Matt Kane

Firefox 140.0: New Features, Updates and Fixes — This new version of Firefox arrived just yesterday, adding a new vertical tabs feature along with support for the Custom Highlight API, the SVG fetchpriority attribute, and more. Developer release notes here.

Mozilla

⚡️ IN BRIEF

đź“™ Articles, Opinions & Tutorials

Liquid Glass, But in CSS — Here’s Apple’s new Liquid Glass design language, but realised with CSS. Compatibility here isn’t great, but on the whole it’s a fun, yet hard-earned bit of experimentation.

Pup Atlas

Lightly Poking at the CSS if() Function in Chrome 137 — Support for this powerful function shipped recently in Chrome and Edge — here Sunkanmi takes a high-level look at the syntax, how it works, and how we may want to use it with other properties.

Sunkanmi Fafowora

How OAuth Works — A practical guide to OAuth Scoped Access with code examples, security tips, and how third-party integrations really work.

Clerk sponsor

Color Everything in CSS — Juan aims to give us “a big enough picture for some technicalities behind color in CSS, such that you feel confident using functions like lab() or oklch() while also understanding what makes them special”.

Juan Diego RodrĂ­guez

CSS Cascade Layers vs. BEM vs. Utility Classes: Specificity Control — Specificity can often be the cause of some unpredictable CSS behaviour, as such Victor breaks things down for us so we don’t have to lean on !important flags.

Victor Ayomipo

How JPEG Became the Internet’s Image Standard — Thirty years ago the JPEG pretty much became the dominant way to share digital images online — it wasn’t the first image format for the web, and it’s by no means the last. Ernie takes us on a history lesson.

Ernie Smith

A Better API for the Intersection and Mutation Observers — Zell refactors both the Mutation and Intersection Observers into something “way simpler to use”.

Zell Liew

▶  Why Visual Website Builders Didn't Take Off
Salma Alam-Naylor

Lessons Learned from Implementing an Inline Document Viewer
Anjali Munasinghe

Coding a 3D Audio Visualizer with Three.js, GSAP and Web Audio API
Filip Zrnzevic

JavaScript Broke the Web (and Called It Progress)
Jono Alderson

đź§° Tools, Code & Resources

Mossaik: A Web-Based Tool to Create Stylish SVG Backgrounds — Choose from a number of preset shapes including waves, polygons, circles, blobs, etc. There’s also numerous settings for each shape to edit to your needs.

Gabriel Perales

<syntax-highlight>: A Custom Element for Syntax Highlighting — A custom element that uses the CSS Custom Highlight API (supported by most modern browsers) for syntax highlighting so you don’t need to retreat the time-old method of wrapping every token in spans. GitHub repo.

André Ruffert

AI Agents in Your Frontend? Don’t Leave Access Wide Open — WorkOS helps secure agent workflows with M2M auth, least-privilege access, and visibility into runtime behavior.

WorkOS sponsor

Browser MCP: Connect AI Apps to Your Browser to Automate Tests and Tasks — Includes an MCP server plus Chrome extension that enables AI apps like VS Code, Claude, Cursor, and Windsurf to do tasks like repeatedly fill out a form or test user flows. Repo.

Browser MCP

Contrast Report: A Simple WCAG Colour Contrast Checker — Select either WCAG AA or AAA guidelines and the tool lets you generate a shareable link. One of the neat features is the “picture-in-picture” mode that uses an eyedropper for color selection.

Adam Chaboryk

Text to SVG: A Tool to Convert Any Text to an SVG Path
Ondřej Hudeček

SlimImg: In-Browser Image Compression Tool
SlimImg

Ipx.