#​553 — August 3, 2022 | Read on the web

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.


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


📙 Tutorials, Articles & Opinion

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

▶  Stack Overflow Podcast: Exploring the Art & Practice of Programming

Stack Overflow sponsor

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

Detecting CSS Selector Support with JavaScript
Matthias Ott

How to Add a Subtle Gradient on Top of an Image using CSS
Yan Cui


Sr Frontend Developer For a VA.gov Team (Remote) — Use React to improve Veterans’ access to healthcare and benefits at VA.gov. We work on meaningful problems with productive stacks.

Find Frontend Engineering Jobs with Hired — Create a profile on Hired to connect with hiring managers at growing startups and Fortune 500 companies. It's free for job-seekers.

🔧 Code, Tools & Resources

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.


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


Lighthouse 9.6.5 – Google's auditing/performance tool.
React Admin 4.2.5 – Framework for building B2B apps on React.
Replay 0.6 – Library to replay Chrome DevTools Recorder scripts.