Stop Lazy Loading Product and Hero Images — Jason highlights a performance issue seen on many ecommerce sites around lazy loading usage, particularly its overuse: “Lazy loading is a key technique when it comes to increasing page performance, but like any technique, it shouldn’t be applied everywhere”.

Jason Grigsby

How to Create Custom Cross-Form Control Validator in Angular — See step-by-step how to create a custom validator in a reactive Angular form with a login screen that requires a confirmation password to match the original password.

Kendo UI for Angular sponsor

W3C Introduces Web Sustainability Guidelines — From the Sustainable Web Design Community Group comes a set of guidelines on Sustainable Web Design, explaining how to design and build “digital products and services that put people and the planet first”. You can read the draft here.

W3C

Web Components Accessibility FAQ — Manuel runs through the most important questions regarding web component accessibility, including dependencies, shadow DOM queries, custom elements, and more.

Manuel Matuzović

💛  Memories of Molly — Last week we shared the sad news that Molly Holzschlag passed away, here Eric Meyer reflects on her memory. Others in the web community have also shared their thoughts on Molly, including words from Jay Hoffmann, Bruce Lawson, Aaron Gustafson, and Deborah Edwards-Oñoro.

Eric Meyer

How to Make Charts and Graphs More Accessible — Some solid pointers on how to make your visual data accessible and more usable.

Whitney Lewis

Creating Custom Easing Effects in CSS Animations with linear() — This CSS timing function enables custom easing in animations. Here’s a look at how it works compared with other timing functions used for easing, along with practical examples.

Michelle Barker

Frontend Performance Monitoring 101 — Learn the basics of Frontend application performance monitoring to see (and fix) slow faster. Join us for a live AMA.

Sentry sponsor

The New Google Fonts: Finding What You’re Looking for — The Google Fonts website has had a redesign, with new search and filter options.

Tobias Kunisch (Google)

Scroll-Driven Animations Debugger: A DevTools Extension — A new Chrome DevTools extension specifically to visualize and debug scroll-driven animations.

Bramus Van Damme

unpic/placeholder: A Library for Generating Pure CSS Image Placeholders — This is done by extracting the dominant color from an image or by server-side rendering a BlurHash value, which then is used to display a temporary image during load time.

Matt Kane

qr-code: Web Component for Animatable SVG-Based QR Codes — We’re not entirely sure why you’d want to animate a QR code, but the effects are pretty neat. You can try out the demo here.

Jason Dreyzehner

React Authentication — Without Complexity — Userfront streamlines authentication & access control so engineers can focus on their core business. Read the docs now.

Userfront sponsor

CSS Loaders: A Collection of 500+ Loading Animations — This is a huge collection of animated single-element CSS-only loaders. You’re bound to find one that suits your project here.

Temani Afif

BlendIcons: 140K+ Free Icons in Various Categories and Styles — A simple UI lets you search via keyword and you can filter by icon styles (bold, filled, etc.). Each icon is available in different formats including SVG, PNG, JSX, CSS, HTML, Base64, etc.

Blendicons

Crop Video: Online Tool to Quickly Crop a Video File — From Adobe Express, this tool gives you pre-built crop settings for landscape, portrait (i.e. for TikTok), square, or just do it freeform.

Adobe Express

React Plock: A 1KB Masonry Grid Component — TypeScript-ready and it’s easy to customize the grid columns and rows for responsive layouts in the style of Unsplash, say.

Renato Pozzi

Run Lighthouse on PageSpeed Insights Against a Set of URLs — You'll need Node.js, but this will let you see which of the sites you supply is fastest. In other words, something like “Amazing Race” for websites?

Zach Leatherman