Together with  Blacksmith
🚀 Frontend Focus

#​696 — June 11, 2025 | Read on the web

🍏 Updates from WWDC 2025

Apple's annual developer conference got underway earlier this week, and with it came a new beta for Safari, an overhauled glass-like UI, and a handful of related videos for web developers. Here are the highlights:


▶  WWDC 2025 Keynote — The main keynote clocks in at roughly an hour and a half. As usual, it’s a little light on developer specifics, but if you’ve missed it here it is. The Verge has done a ten minute supercut if you’d rather a TL;DW. The State of the Union update goes a little deeper.
Apple

WebKit in Safari 26 Beta — A huge rundown of all the new things to be found in the beta of Safari 26. Yes, like Apple’s various operating systems Safari is also moving to a year number for its versioning, so we’re jumping from 18 to 26 here. There’s over 60 new feature and 100+ improvements, including WebGPU support, anchor positioning, scroll-driven animations, and so much more.
WebKit

▶  What’s new in Safari and WebKit — If you'd rather, there's also a near 40-minute video running through the new features — highlighting different CSS features and new media support across audio, video, images, and icons.
Saron Yibarek

▶  Learn More About Declarative Web Push — A 20-minute explainer on how Declarative Web Push works, how to build on existing standards, and deliver notifications whilst retaining backwards compatibility.
Brady Eidson

2x-40x Faster Docker Builds with Blacksmith — With a one-line code change, Blacksmith can make your Docker builds incremental by mounting your Docker layer cache into your GitHub Actions runner. Blacksmith is used by 600+ companies like Ashby, Clerk, and Mintlify.

Blacksmith sponsor

State of CSS 2025 — The annual CSS survey returns, and the results should prove particularly interesting this year, if only to see the adoption and usage levels of all the new features and tools we’ve now got at our disposal. Worth filling out — tell ‘em we sent you. :)

Devographics

📙 Articles, Opinions & Tutorials

Partial Keyframes — Josh shares a neat trick for creating dynamic, composable keyframe animations, explaining it clearly, and highlighting what we can do with it in his typical accessible style.

Josh W. Comeau

Sync Clerk User Data to Supabase in Real Time with Webhooks — Stop polling and start syncing. This guide shows how to stream Clerk user updates into Supabase with ease.

Clerk sponsor

Exploring the CSS contrast-color() Function… A Second Time — Thoughts on this evolved web accessibility function, highlighting its current limitations, potential future improvements, and alternative approaches.

Daniel Schwarz

Scroll-Driven Letter GridLimited browser support for scroll-timeline means Safari and Firefox get left out of the fun here, but this is a neat technique, making use of variable fonts that change as you scroll.

Chris Coyier

▶  Jen Simmons on Declarative Web Push, Form Control Styling, & More — Jen, from the WebKit team, joins Dave Rupert and Chris Coyier for a chat on various new CSS and Safari features like Form Control Styling, Declarative Web Push, Typography, contrast-color(), and more. There’s a video version too if you’d rather watch along.

Shop Talk Show podcast

Decoding the SVG path Element — Aims to teach you the basics of <path> and its sometimes mystifying commands, there’s handy examples and visualizations too.

Myriam Frisano

📄 Printing the Web: Making Webpages Look Good on Paper — This is one of those things that’s probably low on your list of priorities, but Declan shares why we should bother, and how to go about it with CSS to create “clean, sleek, readable” documents.

Declan Chidlow

The Simplest Way to Deploy Your Own Updatable Portfolio Site
Chris Coyier Beginner

Creating an Auto-Closing Notification with an HTML Popover
Preethi Sam

Eight CSS & JavaScript Snippets for Creating Sticky Elements
Eric Karkovack

🧰 Tools, Code & Resources

SF Symbols 7 — Currently in beta but available to download, Apple’s own library of icons has been updated and features hundreds of new symbols, with the total now closing in on 7,000 glyphs.

Apple

Astro 5.9 Released — Adds experimental support for the highly requested Content Security Policy, along with a new helper function for rendering Markdown, logging changes, and more.

Stoppa & Kane

Introducing Hope AI - Architecture Agent for Developers — Compose high-quality reusable UI components and applications with simplicity, speed and control. by Bit.Cloud.

Bit Cloud sponsor

Storybook 9: The UI Component Workshop — The popular one-stop tool for working on, and testing, frontend UI components gets a big update in terms of testing. Storybook Test offers interaction, visual, and accessibility testing, complete with a ‘watch mode’ for testing whenever you save, whether you’re working with React, Svelte, Next.js, React Native, and more.

Michael Shilman

Spectral.js: A More 'Paint-Like' Color Mixing Library — If you have two colors to transition between, just tweening the RGB values can result in some rather ugly intermediate colors. Spectral.js uses Kubelka–Munk theory which more closely matches how paints work for a more visually satisfying result.

Ronald van Wijnen

Smooothy: A Smooth, Extensible Slider/Carousel Component — Try out some demos here, which include customizations for keyboard control, parallax, speed, and there are implementations for React and Vue.

Federico Valla

Fulldev UI: Astro Component & Block Library to Build Content-Driven Websites
Fulldev

SmoothUI: Animated Components Built with React and Tailwind
Eduardo Calvo

Ipx.