Together with  WorkOS
🚀 Frontend Focus

#​716 — November 5, 2025 | Read on the web

Perfectly Pointed Tooltips — Explores how the anchor positioning API can help us in nailing the positioning of a tooltip, ensuring it’s placed perfectly. Well explained, with plenty of code examples and visuals. There's a part two here.

Temani Afif

Use Cases for Field Sizing — Need to size an input field based on its content? That’s where the field-sizing CSS property comes in. Ahmad shows us the problem it solves, and how best to use it in layout-focused designs.

Ahmad Shadeed

How to Build Secure MCP Auth with OAuth 2.1 — Securely authorizing access to an MCP server requires PKCE, scopes, consent, and token revocation. This guide from WorkOS shows how to implement OAuth 2.1 with clear examples. WorkOS Connect and AuthKit help you ship it fast.

WorkOS sponsor

Your URL is Your State — If a site supports it, a URL can, in many cases, elegantly reflect state through its various components. Ahmad looks into this ‘overlooked power.’

Ahmad Alfy

WebKit Features for Safari 26.1 — Version 26.1 landed a few days ago, bringing with it various improvements to Anchor Positioning, relative unit support to SVGs, and a refactoring of how WebKit handles CSS Units.

Jen Simmons

⚡️ IN BRIEF

📙 Articles, Opinions & Tutorials

Grayscale Testing: The Missing Step in Color Accessibility — Explains why such testing is an important, must-do step for ensuring color accessibility in your design, and shares some easy, practical methods to do just that.

Elle Smith

How to Start Implementing View Transitions on Your Site Today — Good advice here on how to get it in place. I gotta say, having recently implemented this on a site, the end result is nice.

Cyd Stumpel

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

▶  Performance Optimization Pitstop — In a little over seven minutes, Matthias of the Chrome team takes us on a tour of the web performance optimization options and insights available to us in Chrome’s Performance panel.

Matthias Rohmer

How to Use CSS line-clamp to Trim Lines of Text — A handy way to rein in user-created content, keep cards neatly aligned, or prevent text from breaking a layout.

Daniel Schwarz

The "Most Hated" CSS Feature: tan() — Results from the latest State of CSS survey revealed that folks aren’t really fans of working with trigonometric functions. In this series Juan takes a look at the features, explaining what they do and how to use them, maybe demystifying them somewhat in the process.

Juan Diego Rodríguez

Next.js 16: What’s New and What It Means for Frontend Devs
Abiola Farounbi (LogRocket)

How to Throttle Specific Requests in Chrome DevTools
Matt Zeunert

Getting Creative with Small Screens
Andy Clarke

🧰 Tools, Code & Resources

spoilerjs: Framework-Agnostic 'Spoiler Effects' — If you’ve got some text (or maybe sensitive data like a token) you want to hide on a page until someone clicks on it, this Telegram-inspired web component is for you.

shajid hasan

<lite-youtube> 1.9: A Web Component That Renders YouTube Embeds Faster — It’s the Shadow DOM web component version of Paul Irish’s lite-youtube-embed, with keyboard accessibility and some other nice features.

Justin Ribeiro

Reliably Scan Barcodes, QR Codes and More With One Line of Code — Add lightning-fast on-device 1D/2D code scanning to your web app with STRICH. Simple pricing, free trial and demo!

STRICH sponsor

The MCSS: A Modern Classless CSS Framework Inspired by the Typefaces of Matthew Carter — Carter was a British type designer responsible for Georgia and Verdana, fonts you can incorporate using a data-theme attribute. The framework includes styles for most common elements and system-based dark mode. GitHub repo.

Mike Mai

Slim Select 3.0: An Advanced Select Dropdown Control — A feature-rich select dropdown component with no dependencies. v3.0 adds an official React component option, fixes bugs, and improves accessibility.

Brian Voelker

Storybook 10: Now ESM-Only, 29% Lighter, and More — The popular frontend component workshop says goodbye to CommonJS: it’s now ESM-only, and much lighter as a result. There’s also a new module automocking approach, built in collaboration with the Vitest folks, Next.js 16 and Vitest 4 support, and an evolved version of Storybook’s Component Story Format (CSF).

Storybook 10

Tachi Code: A Browser Extension That Transforms Any Source File Into a Code Editor — Built on top of the Monaco editor, which powers VS Code. Files need to be saved manually and it includes theming and configuration from VS Code.

David Septimus

📸 ...and finally

Pointer Pointer — Not new, but a fun little thing all the same. Point your mouse cursor anywhere, and the site finds a (seemingly very early 2000s looking) picture that 👉 points at your pointer.

💡 If you're intrigued how it works, ▶️ Paul Irish did a YouTube video explaining the basic mechanism used back in 2012.

Ipx.