Together with  Sentry logo
🚀 Frontend Focus

#​715 — October 29, 2025 | Read on the web

Springs and Bounces in Native CSS — Josh looks into how to approach using the linear() timing function for animations, and shares some pointers on the best approach to use them right now by “storing a handful of common timing functions in globally-available CSS variables”. As always, he includes plenty of interactive demos and code examples.

Josh W. Comeau

ℹ️ FYI, as Josh notes, the linear timing function preset and the linear() timing function are two different things. Browser support for this function is currently at around 88%.

🔒 Google Says It's (Almost) Time for HTTPS by Default — Chrome 154 is expected to be released in October 2026 with “Always Use Secure Connections” enabled by default meaning users will get a warning if they try to access any non-https sites at all. Google explains its thinking here.

Google Online Security Blog

Keep Your E-Commerce Site Stable This Holiday Season — Avoid checkout chaos this holiday season. Set up and test your error and performance monitoring before code freezes hit. With proven systems in place, you’ll get instant answers when traffic peaks, not panic. Here’s your holiday monitoring checklist.

Sentry sponsor

🖼️ The Present and Potential Future of Progressive Image Rendering — Just how useful is progressive image rendering today? Jake explores the current state of things (with demos) looking at various image formats (AVIF, JPEG XL, etc) across different browsers and varying network conditions.

Jake Archibald

⚡️ IN BRIEF

📙 Articles, Opinions & Tutorials

Solved By Modern CSS: Section Layout — Looks at how to approach building a fairly typical pattern, but making it dynamic with features such as clamp(), style queries, :has(), and more. A good, illustrated example of the potential modern CSS unlocks.

Ahmad Shadeed

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

The CSS Reset, Again — Paweł looks at some popular resets crafted by others, picking out some highlights along with the rationale for using them.

Paweł Grzybek

For Your Convenience, This CSS Will Self-Destruct — Scott shares a performance pleasing pattern he’s been using to make elements visible with a CSS keyframe animation in the event that JavaScript fails to do its thing.

Scott Jehl

▶  Web MIDI, Web Audio, and What the Web Does Best — A fun, and well explained, exploration of what Web MIDI, the Web Audio API and other tools can do when brought together. The end result? A creatively-coded take on Daft Punk’s 1997 hit ‘Around the World’.

Katie Fenn

CSS Layout Explained: Flexbox, Grid, Media Queries and Container Queries — Part of Dr. Axel’s excellent, broader ‘web development for beginners’ series and a handy primer for CSS layout topics generally.

Dr. Axel Rauschmayer

The Man Who Keeps Predicting the Web’s Death — “You can think the Web is dying or dead all you want. Many folks have said it over the years. But maybe don’t keep saying it periodically over a 30-year period, in constantly changing contexts”.

Ernie Smith

Page Headings Don’t Belong in the Header — Some semantic pointers to keep in mind.

Martin Underhill

Liquid Glass is 'Cracked' and Usability Suffers in iOS 26 — There’s some valid design critique here.
Raluca Budiu

CSS Animations That Leverage the Parent-Child Relationship
Preethi Sam

Inlining Critical CSS: Does It Make Your Website Faster?
Matt Zeunert

🧰 Tools, Code & Resources

TypingSVG: Generate Animated SVGs to Represent Natural 'Typing' Effects — An online tool that generates SVGs that show the process of typing some text that you supply. Has full Google Fonts support, lets you set typing speed and spacing on a line-by-line basis, supports backspacing, and more. A good eye catcher.

whiteSHADOW1234

Augment Guidelines: Brand Guidelines in the Agent Era — Brand guidelines–colors, icons, spacing, and more–can (and must) be defined for your AI coding agent.

Augment Code sponsor

🎨 oklch.fyi: A One-Stop Resource for Learning About and Using OKLCH Colors — If you’re new to the OKLCH color space, this is a good place to get started. Includes simple explanations as well as tools to create palettes, gradients, along with a gamut visualizer and color converter.

Jakub Krehel

uikit 1.0: Build 3D UIs in React Three Fiber Apps — Ideal for games, XR (VR/AR), and web-based spatial-style apps. v1.0 takes some steps to align more closely with commonly accepted HTML/CSS behavior and techniques. GitHub repo.

Poimandres

Helium: A Small Library That Makes HTML Interactive — Sort of like a lightweight HTMX or Alpine.js, allowing you to create simple interactive page elements without the usual JS overhead. Try some examples in this CodePen.

Helium

DevTUI: A Swiss-Army App for Developers — Another option for a local, native all-in-one toolkit with things like encoders, decoders, formatters, converters, and more, but this one consolidates the utilities into a TUI and CLI.

Stanislav Katkov

📸 ...and finally

The always interesting Web Design Museum reminded us that the first ever banner ad appeared on the Web thirty-one years ago this week. The creator of the banner, which ran on HotWired, wrote about its impact for The Guardian in 2013.

Much maligned, I'd certainly take untargeted ads like this on the Web now over the intrusive junk we see on many sites.. but I may be showing my age 😅

Ipx.