Together with  WorkOS
🚀 Frontend Focus

#​714 — October 22, 2025 | Read on the web

▶  25 Rad CSS Features in 25 Minutes — In this energetic talk, Adam gives us a tour of the latest CSS features, including field sizing, custom scrollbar styling, math functions, scroll-driven animations, and more. The slidedeck is here, if you prefer to see the list, with code samples, sans video.

Adam Argyle

▶️ The above is one of many new talks shared from the recent Cascadia JS conference. You can see them all here.

OpenAI’s AI-Fueled Browser, ChatGPT Atlas, is Here — Currently available on macOS only, with Windows and iOS/Android to follow, Atlas is a Chromium-based browser infused with OpenAI's take on what a hybrid chat/agent/web browser should look like.

OpenAI

Ship Secure MCP Auth Without Relying on API Keys — API keys are hard to scope and break user flows. WorkOS Connect delivers a fully compliant OAuth 2.1 flow. It handles PKCE, scopes, user consent, and secure token issuance out of the box.

WorkOS sponsor

Masonry: Watching a CSS Feature Evolve — A high-level look at the evolution of the CSS Masonry feature, including how the proposals have evolved, and what we can learn from such developments of new CSS features.

Saleh Mubashar

⚡️ IN BRIEF

📙 Articles, Opinions & Tutorials

Making Context-Aware Components: How CSS inherit() Could Simplify Design Systems — The in-development CSS inherit() feature works in a similar way to the var() function. This new function will open up the ability to make our components naturally context-aware. Stuart shares some ideas on how this might be used and what it could mean for design systems more broadly.

Stuart Robson

The Two Button Problem — Knowing when a button is active should be inherently clear, but certain design trends means that’s not always the case. Chris attempts to clear up the ambiguity that such UI implementations present.

Chris Coyier

Build Your Apps Faster with a Ready-to-Use Backend — Forget about DevOps headaches. OneEntry gives frontend devs a ready-to-use cloud backend with built-in database, intuitive admin panel, and flexible data models that adapt to any project.

OneEntry sponsor

The Big Gotcha with @starting-style — Josh takes a look at this new tool (support is at around 85% right now) that lets us use CSS transitions for enter animations. He explores its intended use cases, but concludes that its utility isn’t an immediately obvious one.

Josh W. Comeau

Conclusions After Using Signed Exchanges on My Site for 2 YearsSigned exchanges (SXG) is a Chrome-only Web delivery mechanism that enables authenticating the origin of a resource independently of how it was delivered, enabling privacy-preserving cross-origin prefetch. It's used by Google for serving up pages quicker to search users. This is a good summary of a technology that, sadly, seems unlikely to survive long term.

Paweł Pokrywka

What State ARIA In? — An explainer looking at ‘state’ or ‘selection’ attributes like aria-selected and aria-current, clarifying what these do, when to use them, and common mistakes to avoid.

Aditya Jainapur

Anchor Positioning Updates for Fall 2025 — An overview of the current state of anchor positioning.

James Stuckey Weber

Are Your Retail Landing Pages Killing Conversions? — Things to keep in mind as we enter the busiest online shopping period of the year.

Tammy Everts

Improving the Trustworthiness of JavaScript on the Web — By way of WAICT (Web Application Integrity, Consistency, and Transparency), an early-stage W3C-backed effort.
Michael Rosenberg (Cloudflare)

Who Needs a Flying Car When You Have display: grid — On the joys of modern CSS.
Rach Smith

Common Misconceptions About Screen Readers
Ela Gorla

When to Use Modal vs Dialog Components
A11Y Collective

🧰 Tools, Code & Resources

Obra Icons: A Simple, Consistent Set of Icons for User Interfaces — Currently houses more than 1000 icons that you can download as SVG, PNG, or copy the code for use in React or Svelte. Test and customize color, weight, and size of the icons live on the page.

Obra Studio

⚡ Ship Powerful SCADA UIs with JointJS — Use our production-ready diagramming template and bring your industrial dashboards online in days, not weeks.

JOINTJS sponsor

Web Codegen Scorer: A Tool for Evaluating the Quality of LLM-Generated Web Code — If you're using code generation tools, this tool, from Google's Angular team, may be useful for comparing outputs by different models or monitoring quality over time.

angular

JustGage 2.0: Draw and Animate Dashboard-Style SVG Gauges — A big release for a project started over a decade ago, now brought into the modern age and using native SVG APIs. The playground lets you play with the options and gauge styles.

Bojan Djuricic

Format JSON Online: A Complete Toolkit for JSON & Data Processing — Includes tools to do just about anything with JSON data along with some unique ones like AI-powered utilities for fixing and generating JSON and others for sharing and collaborating.

Format JSON Online

Grayscale-Image-to-STL: Convert Any Grayscale Image into a 3D STL Model — A browser-based tool using Three.JS under the hood. You can try it directly here. Niche perhaps, but a good demo and useful for reliefs, height maps, 3D printing, etc.

sysmaya

ColorMate: Free Color Tools for Designers & Developers — Includes tools for generating color palettes, CSS gradients, and extracting colors from images.

ready2up

Ipx.