Front End World

Preserving DOM Changes Across Live Reloads

A technical walkthrough about a workaround to preserving client-side DOM changes across live reloads.

https://kittygiraudel.com/2026/05/01/preserving-dom-changes-across-live-reloads/

Native CSS stagger animations with sibling-index()

Explore how sibling-index() simplifies stagger animations in CSS, removing the need for JavaScript and reducing markup complexity.

https://blog.logrocket.com/native-css-stagger-sibling-index/

Designing Stable Interfaces For Streaming Content

Streaming UIs are an easy concept on the surface, but are quite complicated in practice. There are many considerations that need to be accounted for, from layout shifts and motion preferences to proper markup and various states, that may not be instantly obvious. What happens if the stream is interrupted? Can users tab through the UI on the keyboard as it shifts? What ARIA attributes might be needed?

https://www.smashingmagazine.com/2026/05/designing-stable-interfaces-streaming-content/

Warning: containment breach in cascade layer!

The one where I get very confused

https://dbushell.com/2026/04/15/containment-breach-in-cascade-layer/

The Importance of Native Randomness in CSS

We're getting new functions for generating random numbers in CSS! But the road to get here has been a long and winding one.

https://css-tricks.com/the-importance-of-native-randomness-in-css/

Let’s Use the Nonexistent ::nth-letter Selector Now

My shim might give the powers that be another reason to say native support isn't necessary, or if lots of people use my :nth-letter hack in the wild, the browser gods might recognize the need to implement it for real.

https://css-tricks.com/using-nonexistent-nth-letter-selector-now/

Canvas-ing the Web

A practical use case for rendering HTML+CSS to a canvas, an emerging API being previewed in Chrome.

https://meyerweb.com/eric/thoughts/2026/04/27/canvas-ing-the-web/

Accessibility in React: Common Mistakes and How to Fix Them

A look at the most common accessibility mistakes in React applications: missing semantics, broken focus management, unlabeled elements, and silent dynamic updates. Covers what to fix, when to use component libraries, and how to audit your app.

https://certificates.dev/blog/accessibility-in-react-common-mistakes-and-how-to-fix-them

How React streams UI out of order and still manages to keep order

A deep dive into how React streams and renders UI out of order using Suspense boundaries

https://inside-react.vercel.app/blog/how-react-streams-ui-out-of-order

Scroll-Driven Animations Exploring the majestic new animation-timeline API

The new Animation Timeline API allows us to create dynamic scroll animations without any JavaScript! It’s honestly a very lovely API, and in this blog post, we’ll explore some of the super cool things we can do with it.

https://www.joshwcomeau.com/animation/scroll-driven-animations/

pnpm 11.0

pnpm 11 is here! This release tightens the security defaults introduced throughout the v10 cycle, drops the npm CLI fallback for publishing in favor of a native implementation, replaces the JSON-per-package store index with a single SQLite database, and isolates global installs so they no longer interfere with each other.

https://pnpm.io/blog/releases/11.0

hypot() in CSS

The hypot() function takes a list of values and returns the square root of the sum of their squares.

https://css-tricks.com/almanac/functions/h/hypot/

The Radio State Machine

One of the best-known examples of CSS state management is the checkbox hack. What if we want a component to be in one of three, four, or seven modes? That is where the Radio State Machine comes in.

https://css-tricks.com/the-radio-state-machine/

False Earth: From WebGL Limits to a WebGPU-Driven World

A deep dive into building an infinite procedural landscape using WebGPU and Three.js, where compute shaders and indirect drawing bring millions of interactive grass blades to life.

https://tympanus.net/codrops/2026/04/21/false-earth-from-webgl-limits-to-a-webgpu-driven-world/

Recreating Apple’s Vision Pro Animation in CSS

Putting CSS’s more recent scrolling animation capabilities to the test to recreate a complex animation of the Apple Vision Pro headset from Apple's website.

https://css-tricks.com/recreating-apples-vision-pro-animation-in-css/

A Playful Clip Menu with GSAP’s easeReverse

A playful GSAP menu demo exploring how easeReverse makes reversed UI animations feel smoother, snappier, and more intentional.

https://tympanus.net/codrops/2026/04/22/a-playful-clip-menu-with-gsaps-easereverse/

React Email 6.0

An open-source email editor you can embed in your own app, plus a new collection of templates.

https://resend.com/blog/react-email-6