✨ Have you ever heard of Disney’s 12 Basic Principles of Animation? The very first rule, “Squash and Stretch”, can make motion feel *way* more satisfying.

I just dropped a brand-new blog post that shows how I’ve been using this technique in my own work:
www.joshwcomeau.com/animation/sq...

View Transitions Toolkit A collection of utility functions to more easily work with View Transitions.

So, I’ve written a bunch of things on how to do certain things with View Transitions, such as optimizing the keyframes or driving a VT by scroll.

I noticed I repeat a lot of code throughout those experiments … so I bundled that all up in a package for you.

👉 chrome.dev/view-transit...

To celebrate the launch of Artemis II 🚀, I put together a #cssonly scroll-driven animation.

Powered by animation-timeline: scroll — no JavaScript, just modern CSS.

Still WIP, but already a fun experiment.

Full demo on @codepen.io ✨
codepen.io/cbolson/full...

#artemis

I wanted a way to explore Unicode by visual similarity, not just by name or codepoint, so I built Charcutrie.

It lets you browse characters that look alike, search across scripts and symbols, and even sketch a shape to find matching glyphs. (pretty badly for now :D)

charcuterie.elastiq.ch#U+221E

CSS or BS? Think you know CSS? We'll show you a property name. You decide: real CSS, or complete BS. It starts easy. It does not stay easy.

CSS or BS? https://www.keithcirkel.co.uk/css-or-bs/

what a run 👏

Screenshot of email newsletter

Good issue this week, with plenty to dive into.

Includes links from @csswizardry.com, @html5test.com, @meodai.bsky.social, @rachelandrew.bsky.social, @jakearchibald.com and others!

⭐️ frontendfoc.us/issues/735

CSS or BS? Think you know CSS? Real property or made-up nonsense? 20 rounds. No mercy.

Rather than the same old boring internet pranks, I thought I'd build something more fun this April Fools.

CSS or BS. Can you tell your CSS properties names from BS?

www.keithcirkel.co.uk/css-or-bs

Web Rewind An interactive journey through 30 years of the web

Web Rewind: An Interactive Journey Through 30 Years of the Web - https://www.web-rewind.com/

Detail · Where craft lives A curated study of the tiny design decisions that make products feel exceptional in AI era. For designers and engineers who believe the small things can make big difference.

Detail: Small Interface Details That Make Big Difference - https://detail.design (Curated collection of tiny design decisions from real products. Good inspiration resource.)

New to the web platform in March  |  Blog  |  web.dev Discover some of the interesting features that have landed in stable and beta web browsers during March 2026.

New to the web platform in March: https://web.dev/blog/web-platform-03-2026

The 49MB Web Page A look at modern news websites. How programmatic ad-tech, huge payloads and hostile architecture destroyed the reading experience.

Why does loading a news article lead to 422 network requests and 49MB of data transfer? https://thatshubham.com/blog/news-audit

Highlighting Footnotes A short piece on using CSS to highlight the active footnote of a document.

Highlighting Footnotes: kittygiraudel.com/2026/03/18/highlighting-...

The Color System I Wish I Understood Sooner Does your system for naming colors always feel like it falls short? This two-layer approach solves so many problems!

The Color System I Wish I Understood Sooner: theadminbar.com/semantics-and-primitives...

Web Rewind An interactive journey through 30 years of the web

Web Rewind: An Interactive Journey Through 30 Years of the Web - https://www.web-rewind.com/

csskit Refreshing CSS

CSSkit: A High-Performance CSS Toolchain Written in Rust - https://csskit.rs

A Beginner’s Guide to Manual Accessibility Testing with Keyboard Navigation: www.sitepoint.com/accessibility-testing-wi...

Native JSON modules are finally real - Matt Smith JSON imports finally work natively. Learn how import ... with { type: 'json' } changes runtime behavior, caching, and makes bundlers optional.

Native JSON Modules Are Finally Real: allthingssmitty.com/2026/03/16/native-json-m...

Elena | Progressive Web Components Elena is a simple, tiny library for building Progressive Web Components.

I’m excited to announce the 1̶s̶t̶ 7th release candidate of Elena today! 🫶

Elena is a simple, tiny library for building Progressive Web Components. Unlike most web component libraries, Elena doesn’t force JavaScript for everything.

Crafted with love and care using HTML, CSS & plain JS: elenajs.com

Toggle various key structural parts of the page on/off that you want to highlight

Add your own CSS selectors for any elements that you want to highlight on the page

Friday Bookmarklet Drop!

👉 Structure Revealer - a tool to highlight important structural elements on a page

Get the bookmarklet here: a11y-tools.com/bookmarklets...

More info here:
a11y-tools.com/blog/2026/03...

#a11y #accessibility #tools #webdev

Screenshot of Frontend Focus email newsletter.

💌 A once–weekly roundup of the best #frontend news, articles and tutorials.

HTML, CSS, WebGL, Canvas, browser tech, and more: frontendfoc.us

Experimenting With Scroll-Driven corner-shape Animations | CSS-Tricks The new CSS corner-shape() property is mathematical, so it’s easily animated. Author Daniel Schwarz pokes at animating the property for interesting UI effects.

This article was so fun to work on!

css-tricks.com/experimentin...

📝 New CSS Article!

If you have seen my graph theory demo and wondered how it works, then the article is finally live!

frontendmasters.com/blog/two-cir...

I was playing with two circles and anchor positioning, and ended up creating a shortest path algorithm.

Modern CSS is fun!

I got to like level 24 before I was squinting like a mad man.

What's My JND? Find your Just Noticeable Difference in colour perception. How small a colour difference can you actually see?

👁️ How small a color difference can you see? https://www.keithcirkel.co.uk/whats-my-jnd/

una.im | contrast-color() beyond black & white Two techniques that bypass the black-or-white limit of contrast-color() for custom color palettes.

Taking contrast-color() beyond just black and white: https://una.im/advanced-contrast-color/

Do you agree? https://www.sitepoint.com/there-is-no-wrong-in-css/

Building a Scroll-Reactive 3D Gallery with Three.js, Velocity, and Mood-Based Backgrounds | Codrops A tutorial on building a scroll-driven WebGL gallery in Three.js with depth-layered images, palette-driven backgrounds, and motion that responds to scroll velocity.

Building a Scroll-Reactive 3D Gallery with Three.js, Velocity, and Mood-Based Backgrounds: tympanus.net/codrops/2026/03/09/build...

Native JSON modules are finally real - Matt Smith JSON imports finally work natively. Learn how import ... with { type: 'json' } changes runtime behavior, caching, and makes bundlers optional.

Native JSON Modules Are Finally Real: allthingssmitty.com/2026/03/16/native-json-m...

Monitor and improve your web app’s load performance Today, large web applications are often assembled from many independent pieces, which all load their own data and resources. When all these pieces compete for the same network connection, congestion can build up and the user experience can suffer.

This new, experimental, ‘Network Efficiency Guardrails’ feature is available in Edge 146: blogs.windows.com/msedgedev/2026/03/17/mon...