Issue #597

October 16, 2024

Interactive Post on OKLCH Color Space

Abhishek Saha explains the limitations of sRGB and how OKLCH makes color transitions smoother and more natural.

Temani Afif showcases a number of the incredible things you can create with just one CSS gradient.

Product for Engineers: A newsletter helping flex your product muscle

Product for Engineers is PostHog’s newsletter helping engineers improve their product skills.

Subscribe to get curated advice on building great products, lessons (and mistakes) from building PostHog, and deep dives into the strategies of top startups.

Subscribe for free

▶ How To Animate a Button Based on Video Content

Quick-tip showing how to create an effect where a button lights up when a keyword like subscribe, sign up, or like is mentioned in a video.

Watch video

Articles & Tutorials

Inheritance Changes for CSS Selection Styling

Stephen Chenney explains how CSS highlight inheritance is changing for the ::selection and ::target-text pseudo-classes from Chrome 131.

I wasted a day on CSS selector performance to make a website load 2ms faster

Trys Mudford shares his experience of trying to improve the CSS selector performance.

CSS Fan Out with Grid and @property

Preethi Sam shows how to create an expanding animation where a group of items appear one after another, next to each other, as though they were spread out from a stack.

Close, Exit, Cancel: How to End User Interactions Well

Preethi Sam explains how words, if done right, add clarity and direction to UI.

Shopify, Accessibility Lawsuits & 'Compliance'

Nic Chan addresses some of the myths surrounding Shopify’s accessibility.

Workshop: Implementing Clean Architecture in Next.js

It’s all about Clean Architecture. Come learn what that means, what problems it solves, and how to implement it on November 4th.

RSVP

Tools

Player.style

Video and audio player themes built with Media Chrome, for every web player and every web app framework.

Check it out

Fast-Grid

A multithreaded web table capable of running 120fps while sorting/filtering/scrolling simultaneously.

Check it out

Inspiration

Staggered (3D) Grid Animations with Scroll-Triggered Effects

Manoela Ilic created a captivating, playful 3D grid effect using scroll-based animations.

Get inspired

Until Next Week

In light of all the WordPress drama that has been happening recently, I want to take a moment here and thank you for doing your part in making the web development community awesome.

Yes, we can do better (in some areas, we absolutely should do better), but if anything, this very newsletter is a testament to the selfless, generous, valuable work people in the community are creating in terms of articles, videos, tools, and more to help us keep up with the ever-changing landscape of frontend and to make our jobs a bit easier and more enjoyable.

You matter, and your work matters. Thank you!

PS.If you want to support this newsletter and my work, check out:
• CSS Stickers
• CSS Weekly Patreon
• CSS Weekly YouTube Channel
• Mastering Linting

Happy coding,
Zoran Jambor

Issue #596 Issue #598