Folding the DOM — No, you can’t fold a DOM node in two, but Josh runs us through a neat technique to create a 3D letter folding effect using transform and perspective. It’s a React-specific tutorial, but the concepts would work in JS/CSS. The end result is slick, and you’ll learn something about 3D transforms and CSS animation along the way.

Josh W Comeau

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 dive into the strategies of top startups.

PostHog sponsor

Understanding Interaction to Next Paint (INP) — INP provides a much better representation of real-world performance by taking every part of an interaction and rendered response into account. It’s now a core web vital metric, so here’s what you need to know.

Mat Marquis

Going Beyond Pixels and (r)ems in CSS: Absolute Length Units — The last in a series on CSS units, this time looking at absolute units (“the units you mostly - absolutely - want to avoid”). Although they are generally not recommended for responsive, accessible experiences, Brecht shares a few reasons why you might use them over relative ones.

Brecht De Ruyte

The View Transitions API — Want to scratch the surface of what the View Transitions API can do and start creating some ‘native-feeling’ experiences on the web? Cassidy takes a look.

Cassidy Williams

Don’t Get Scammed by Fake Performance Experts and Apps — This post exposes some of the common hacks used by bad actors to fake a higher Lighthouse score (which have zero real-world impact on the user experience).

Mateusz Krzeszowiak (Shopify)

Using AI-Powered Autofix to Fix Your Broken Code — Join Sentry live on April 25th, to preview Autofix and learn how we are using ML to prioritize issues and alerts.

Sentry sponsor

The Things Users Would Appreciate In Mobile Apps — Pointers on things like forms, search, navigation, roomy elements, etc.

Preethi Sam

The ADA Now Has Regulations for Accessibility of Web Content and Mobile Apps — The first ADA regulations for accessibility of web content and mobile apps have now been approved. This post summarizes the regulations and discusses the implications on digital accessibility efforts in the United States and beyond.

David Sloan

On disabled and aria-disabled Attributes — What’s the difference between these two, and when should you use each?

Kitty Giraudel

Asking Users for Their Pronouns: A Guide for UX Designers — “Designing a pronoun selector isn’t just about ticking a box for inclusivity, it’s about respecting your users.”

Chelsea Roden

Counterscale: Scalable Web Analytics You Can Run on Cloudflare — A simple web analytics tracker and dashboard that’s designed to be easy to deploy and maintain by hosting it on Cloudflare (for free too, up to a certain level).

Ben Vinegar

Introducing Jpegli: A New JPEG Coding Library — It claims to compress images 35% more than traditional JPEG codecs.

Szabadka, Bruse, Alakuijala (Google)

Transformational Auth & Identity | Userfront — "Compared to our previous experiences in the security/auth space, Userfront is an order of magnitude simpler to use."

Userfront sponsor

faces.js: A JavaScript Library for Generating Vector-Based Cartoon Faces — The end results are somewhat reminiscent of how the Nintendo Wii generates random Miis. Faces are drawn as SVGs. Each face can also be represented by a small JavaScript object, which allows you to store that object and then draw the same face again later.

ZenGM

Barba.js: For Smooth Visual Transitions Between Pages — Well, you certainly can’t say the project’s homepage doesn’t show off all of its features. For such a dramatic set of effects, things feel rather smooth and surprisingly nice. 😁 GitHub repo.

De Rosa, Michel, et al.

Neat: Create 3D Animated Gradients Powered by Three.js — After you install the package, you can use the interactive editor to create and edit the gradients before grabbing the code in JSON format.

FireCMS

Penpot 2.0 Release Is Out Now — Version 2.0 of this open-source design tool (for both design and code collaboration) is out now, adding Grid Layout support, components, inspection changes, a new UI, and more.

Penpot

Interior & Exterior Angles: Beyond the Hexagon — Sharing this as the page has a series of cool interactive features worth checking out that use animation to helpfully explain geometric concepts. Very cool.

Garcia & Brzezinski