Together with  Sentry logo
🚀 Frontend Focus

#​702 — July 23, 2025 | Read on the web

A Friendly Introduction to SVG — Josh has plenty of experience with creating fun Scalable Vector Graphics — here, he shares what you need to know by way of a foundational overview, complete with interactive code examples and demos. A superb resource, whether you’re completely new to using SVGs or want a solid refresher. Good stuff.

Josh W. Comeau

The State of HTML 2025 Survey Is Now Open — The third annual State of HTML survey returns to check in on how we’re all using the web platform’s growing list of capabilities. Lea Verou is back at the helm and she’s blogged about things here, noting how the results directly feed into prioritization for next year’s Interop project. 🗳️ Tell em we sent you!

Devographics

Debugging with Sentry using Seer, MCP, & Agent Monitoring — In this live workshop, the Sentry team covers their latest AI updates, including Seer, Sentry's AI Agent, which automates debugging using tracing, logs, and stack traces.

Sentry sponsor

WCAG in Plain English: Making Accessibility Standards Easy to Understand — A searchable resource that provides a beginner-friendly guide to the official Web Content Accessibility Guidelines (WCAG), to make them a little easier to digest but not to be viewed as a replacement.

AAArdvark

⚡️ IN BRIEF

📙 Articles, Opinions & Tutorials

So Many Ranges, So Little Time: A Cheatsheet of animation-ranges for Your Next Scroll-Driven Animation — A solid primer on scroll-driven animations and the various options now at our disposal.

Saron Yitbarek

▶  Next-Level Features Every Web Dev Should Know — In under ten minutes Jad shares a high-level overview of various modern features worth knowing, including Container queries, scroll-state(), dialog, Document Picture-in-Picture, and more.

Jad Joubran

WorkOS AuthKit + Radar: Hosted Login with Real-Time Abuse Protection — Leading teams use AuthKit for a customizable auth flow, then add Radar to block bots and fake signups in real time.

WorkOS sponsor

Getting Clarity on Apple's Liquid Glass — This is a good round-up on all things Liquid Glass so far, including its introduction, the developer reaction, accessibility concerns, plus experiments with its intended style. A solid grab bag of stuff on the topic.

Geoff Graham

Why I Don’t Trust WCAG 2.2 and What I’m Hoping From 3.0 — Daniel highlights some of his various concerns with WCAG 2.2 and touches on how WCAG 3.0 should help things.

Daniel Schwarz

Tiny Screens, Big Impact: The Forgotten Art of Developing Web Apps For Feature Phones — Why flip phones still matter in the year 2025, and how we can build and launch web apps for these tiny class of devices.

Tom Barrasso

Tailwind is the 'Worst of All Worlds' — “a regrettable step backwards that takes everything bad about CSS and modern web development and brings it all together in one library

Colton Voege opinion

Frontend Performance Checklist for 2025 — A high-level laundry list of things to keep in mind when trying to create fast, efficient web apps.

Hegna, Dwivedi, Radakovic

'We Migrated Our Site to Eleventy and Increased Performance by 24%'Eleventy (11ty) is a popular Node-based static site generator.
Dan Webb

Make Your Website Talk with the Web Speech API — A simple, straightforward approach.
Andrew Magill

The Hidden Cost of Poor Navigation: How Information Architecture Directly Impacts Business Metrics
Henry Adepegba

▶  Automating Form Filling with a Prompt file and the Playwright MCP
Debbie O'Brien

Why I’m Writing Pure HTML and CSS in 2025
Joel Dare

🧰 Tools, Code & Resources

Glass3D Generator: A Tool to Generate a 3D Glass Effect with CSS — You can edit backdrop-filter settings, color, and texture – all previewed live on the page. You can also test three different background types under the glass effect (dark, light, and video). Handy maybe in the upcoming era of Liquid Glass?

Glass3D Generator

Visual CSS: Edit Any Website's CSS Visually — Enter a URL and this tool will display the page with various CSS editing tools, including measuring, wireframing, responsive testing, and others. There’s also an AI prompt for describing changes you want to make.

Visual CSS

Build an MCP Server in Your Next.js Application with Clerk — Add a spec-compliant MCP endpoint in minutes, allowing LLMs to access user data with user consent.

Clerk sponsor

Astro 5.12 Released — Features an upgraded Netlify dev experience, TOML support in content loaders, and more.

Matt Kane

Tiptap v3: The Headless Rich Text Editor Framework — Provides a fantastic base for putting together powerful rich text editing experiences. v3 includes a lot of DX improvements like being able to unmount and remount editors (ideal for dynamic UIs), ‘Markviews’ for creating custom views for text segments (marks) using your own components, an SSR mode, and more. GitHub repo.

Tiptap GmbH

GrowField: Small, Dependency-Free Module for Making Textarea Elements Grow — Very simple. For when you’ve got a textarea input and you want it to grow as more content is added to it.

Five Fifteen

Simple Live Reload for Developing Static Sites
Lean Rada

daisyUI: A Library of Tailwind CSS Components in Multiple Themes
Redfern Dev

📰 Classifieds

📌 Deploy with PinMe: Host Your Front-End Without Servers. No sign-up. No cost.


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

🛒 ...and finally

Maybe don't mix up your shopping list and style guide... [Via comiCSS]

(The above comic is from comiCSS by Alvaro Montoro – it's notable for being a webcomic both about CSS and that's coded with CSS and worth a browse.)

Ipx.