Together with  Frontend Masters logo
🚀 Frontend Focus

#​717 — November 12, 2025 | Read on the web

The Web Animation Performance Tier List — A comprehensive and detailed guide in which Matt shares everything he knows about animation performance, covering the render pipeline, hardware acceleration, and more. Animations are ranked in a tier list, noting how various techniques impact things. A must read if you’re striving for a smooth, responsive UI.

Matt Perry

TypeScript: From First Steps to Professional — Learn TypeScript step-by-step with Anjana Vakil, and gain confidence writing code you can trust! Add strong types, reuse interfaces, and apply type safety throughout your app with hands-on projects converting JavaScript to TypeScript.

Frontend Masters sponsor

High-Performance Syntax Highlighting with the CSS Custom Highlight API — Now supported in all major browsers, the CSS Custom Highlight API provides a mechanism for styling arbitrary text ranges in a document by using JavaScript to create the ranges, and CSS to style them.

Pavitra Golchha

The Weird Parts of position: sticky; — A highly useful, but often tricky CSS feature to get 100% right. Adam runs through how it works, and highlights how to tackle some common points of frustration.

Adam Rackis

⚡️ IN BRIEF

📙 Articles, Opinions & Tutorials

pathLength Makes SVG Path Animations Easier to Manage — A quick tip on how to combine stroke-dasharray, stroke-dashoffset and CSS transitions to effectively animate an SVG path.

Stefan Judis

Perfectly Pointed Tooltips: To the Corners — We shared the first two parts of this series on tooltips last week, and here’s the latest, this time focusing on perfecting the corners.

Temani Afif

The Road to Next — Learn full-stack web development with Next.js 15 and React 19. The perfect match for JavaScript developers ready to go beyond the frontend.

Robin Wieruch sponsor

Programming Principles for Self Taught Frontend Developers — Some solid, grounded, actionable rule-of-thumb suggestions that should straighten up or improve your workflow.

Kilian Valkhof

Effectively Monitoring Web Performance — Outlines a strategy for web perf optimization and explains the roles that different types of data play in it.

Matt Zeunert

“A.I.” Browsers: The Price of Admission Is Too High — “If data is the fuel for A.I., what is the product?

Bruce Lawson Opinion

Building a 3D Infinite Carousel with Reactive Background Gradients
Clément Grellier

Explaining the Accessible Benefits of Using Semantic HTML Elements
Geoff Graham

100, 150, or 200? Debunking the alt Text Character 'Limit'
Chris Yoong

🧰 Tools, Code & Resources

Umami 3.0: Self-Hosted, Privacy-Focused Google Analytics Alternative — A self-hosting alternative to the likes of Plausible and Google Analytics. Here’s a full feature list. It's also available as a paid hosted service.

Umami Software, Inc.

Agentic Postgres: Let Your Agents Cook — Build AI apps faster: Postgres with built-in memory, search, and free forkable DBs. Try it free on Tiger.

Tiger Data sponsor

Travels: A Fast, Framework-Agnostic Undo/Redo Library — Allows you to add undo/redo functionality to apps like text editors, drawing tools, or other interactive software. Boasts better memory management by only storing changes, rather than full snapshots.

mutative

FileMock: A Free Test File Generator to Add Test Data to Your Apps — Allows you to generate videos, audio clips, images, and documents in dozens of formats and customizable to fit your testing needs.

FileMock

sitemap.js 9.0: Sitemap Generation CLI Tool and Node.js Library — XML ‘sitemap’ files help search spiders (e.g. Googlebot) crawl your site and you can offload the boring task of generating them to this library/CLI if your current system doesn't produce them for you.

Eugene Kalinin

Horizon: The Current Sky at Your Approximate Location, Rendered as a CSS Gradient — In other words, if you view it at night it will just be a black page! 😅 You can see the result here when the sun is out. In old school fashion, it uses meta http-equiv="Refresh" (a trick Drudge Report still uses to this day) to stay up to date and is rendered server-side. We dig it.

Daniel Lazaro

👁️ ...and finally

The Scope Creep — An amusing ‘choose-your-own-adventure’ style interactive narrative game. You assume the role of a project manager tasked with delivering a 'cursed' website brief for one of your clients. You’ve got to navigate the project phases, make choices, and face the inevitable issues.

Wondermake

Ipx.