~frontendfocus | Issue 638 - You can't fold a DOM... right? (19)

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.

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.

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.

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.

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.

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.

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.

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).

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.

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

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.

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

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.”

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).

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

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.

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.

Transformational Auth & Identity | Userfront — Userfront is an auth & identity platform that transforms your business to serve free, freemium and enterprise customers.

Product for Engineers: A Newsletter Helping Flex Your Product Muscle — Subscribe for free to get curated advice on building great products and best practices of top startups from PostHog.