👋 Hey! This week we've asked Chris Coyier to share a few of his favorite tools and services. Be sure to scroll down and check them out.
Chris Brandrick, Editor

Together with  Progress Kendo UI for Angular
🚀 Frontend Focus

#​609 — September 13, 2023 | Read on the web

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

💬 Related: Terence Eden recently blogged that he "kind of hates" lazy loading due to it having what he calls "a pretty horrible failure mode" in situations where a user might drop offline.

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.


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

đź“™ Tutorials, Articles & Opinion

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)

▶️  A Screen Reader User’s 'Weird Tricks' to Make Accessible Sites
Bruce Lawson

A New Method to Validate URLs in JavaScript
Stefan Judis

HTML5 Template: A Base Starter HTML Boilerplate for Any Project
Louis Lazaris

🔎 FIVE IN FOCUS with Chris Coyier

Five recommendations from Chris Coyier, co-founder of popular social development environment CodePen, and co-host of the ShopTalk podcast.

  1. CleanShot X
    Really great macOS-specific screenshot & screencast recording tool. This is a somewhat crowded market, but the feature set and polish of CleanShot X makes it a clear standout to me. I use it a dozen times a day I bet. I like that it comes in Setapp, because it helps make that subscription a no-brainer to me. Setapp has other indispensable tools for me, like TablePlus, Paste, BusyCal, and Sip.
  2. Feedbin
    The finest RSS reader app out there. One feature shoutout: giving an email address to send email newsletters to, so those can be read where they belong, with other written publications.
  3. CSS Pro
    Nice little browser extension that gives you a bunch of designer-y tools on any website for screwing around with the site immediately. It’s great for playing around and prototyping. But my favorite is that in one click you can sent just a selected element and all it’s styles over to CodePen and play in code there.
  4. gradient.style
    A nicely done CSS gradient construction tool, that includes all the types of gradients that are possible unlike so many older ones. There are nice examples, nice interactive controls, and as an important bonus: a high dynamic range color picker, so you can pick colors in OKLCH and OKLAB which are fantastic for gradients and making colors pop.
  5. Elk
    I’m grateful that such an nice web client for Mastodon exists.

🔧 Code, Tools & Resources

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.


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

🧑‍💻 JOBS

Find Frontend Engineering Jobs with Hired — Hired makes job hunting easy-instead of chasing recruiters, companies approach you with salary details up front. Create a free profile now.