~frontendfocus | Bookmarks (263)

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.

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.

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?

How to Kill the Cascade — “We’ve always needed local resets. And now, with the magic of @scope and all: revert-layer;, we finally have them.”

The Curious Case of the CSS Monochrome Media Query — This is a little known media-query feature designed to target e-ink devices (such as e-readers), but it seems a tad unloved right now in terms of real-world utilization.

Why I Care Deeply About Web Accessibility And You Should Too — A web accessibility evangelist makes the case.

Atlassian's Pragmatic Drag and Drop Framework — A performance-focused drag and drop library that can be used to power experiences on any frontend stack. There’s a live demo on the page along with ▶️ a recording of a talk by Alex Reardon walking through the motivations for creating it and how it works.

<relative-time> 4.4: Format Timestamps as a Localized Relative Time — Supply this web component with a standard formatted date and time and it’ll render the right text to suit.

Introducing Babylon.js 7.0 — This new version of the popular 3D web rendering engine is now here, adding Apple Vision Pro support, improved WebXR support, improved ragdoll physics, procedural geometry, and more.