Finer Grained Control Over CSS Transforms with Individual Transform Properties — You can now use the individual translate, rotate, and scale CSS properties across all major browser (support just got added to Chrome), making it easier to animate individual values.

Bramus & Baron

Fluid Sizing Instead of Multiple Media Queries? — Like math and CSS? You’ll love this one. Ruslan explains how we don’t necessarily require media queries to change values of certain CSS properties (such as font-size, padding, margin).

Ruslan Yevych

Optimize Front-End Performance by Analyzing UX Data — Utilize critical performance data to understand how users experience your applications with Datadog Real User Monitoring. Analyze user errors in real-time to resolve front-end issues fast. Start a free Datadog trial today.

Datadog sponsor

Docusaurus 2.0 Released — This open-source developer tool from Meta (Facebook) just hit version 2.0 — a major release some four years in the making. It’s a static site generator aimed at building documentation sites specifically, and it’s React/Node.js under the hood. This new version was rebuilt from scratch, and adds MDX support, a new plugin system, theming, dark mode, SPA navigation, offline support, and more. There's a demo here.

Meta

Google Postpones Third-Party 'Cookie Bonfire' Yet Again — Google says it needs more time to build and test its privacy-preserving ad technology, marketed as the “Privacy Sandbox.” It’s now pushed back to 2024.

Thomas Claburn

Solving “The Dangler” Conundrum with Container Queries and :has() — Odd numbers in responsive design can be something of a sore point, so Dave shares a solution using :has() to find such odd-numbered grids, and then using container queries to flex it into shape.

Dave Rupert

Exploring CSS Grid’s Implicit Grid and Auto-Placement Powers — Some neat demos here exploring the layout patterns that can be achieved with just a little code using CSS Grid’s auto-placement powers.

Temani Afif

Testable Frontend: The Good, Bad, and the Flaky — Testing is not just about tools and processes, but architecture too. Noam shares his experience on how to organize testing and find the right balance between frontend and subsystems, and between different strategies.

Noam Rosenthal

Recreating MDN's Truncated Text Effect — Looking at how a cool CSS text fade effect seen over on MDN is realised.

Geoff Graham

PowerGlitch: A Tiny Library to "Glitch" Images on the Web — Uses CSS to create the customizable glitch animated effect, with no need for Canvas or an external library. You can try out the playground here.

PowerHat

Embla Carousel 7: Carousel with Fluid Motion and 'Swipe Precision' — A much maligned UI element, but the examples worked pretty well for us. Library agnostic but has easy integrations for React, Vue, and Svelte, if you need them.

David Jerleke

Design, Render, and Send Notifications for Free in Our Sandbox Studio — Too many engineering resources are wasted on notification template building and routing rules. Pass this on to Product

Courier.com sponsor

UI Filler: Placeholders for Your Designs — A collection of placeholder elements. Think things like paragraph copy, people’s names, locations, email addresses, images, logos, and the like.

UI Filler

Awesome Static Web Site Generators: A Curated List of Static Web Site Generators — It's not all just Jekyll and Hugo, you know.

Myles Braithwaite