The Joy of Variable Fonts: Getting Started on the Frontend — A good look at starting out with variable fonts, including properly loading them, dealing with settings, ‘gotchas’ to be aware of, and more.

Shkodin, Shamin, Klubochkina

Holograms, Light-Leaks and How to Build CSS-Only 'Shaders' — This is a lovely article (with plenty of shiny visuals) looking at how to get that ‘WebGL’ look, without the need for JavaScript (we're using 'quotes' as they're not really shaders or related to 3D at all – it's just a handy aesthetic reference). It’s a great look at how to fruitfully use CSS blend modes to create neat compositing effects.

Robb Owen

Play Around in Our Notification Design Sandbox, or Send It to Your PM — Too many engineering resources are wasted on notification template building and routing rules. Pass this on to Product, Support, and Security. Heck, even if the engineers want to quickly assemble templates: use our UI or JSON based syntax, Elemental.

Courier.com sponsor

Avoiding <img> Layout Shifts: aspect-ratio vs Width and Height Attributes — Jake explains how there’s some misinformation and misunderstanding around this stuff, and shares a bunch of demos and spec detail to explain how it works.

Jake Archibald

How to Not Block the Browser: The Essentials — If you’ve seen articles or tools talking about taking code off of the ‘main thread’ and wondered why that matters, this is the primer for you. It covers the event loop, Web Workers, async scheduling, and how they make a difference.

Matthew Costello

Observability for Your Frontend Tests — Get instant, real-time visibility into the performance of your test suite with Buildkite Test Analytics.

Buildkite Test Analytics sponsor

CSS Complexity: It's Complicated — When it comes to complexity in your CSS, Bart suggests looking beyond selectors.

Bart Veneman

Breaking Out of a Central Wrapper — One of those tricks its handy to be reminded of.

Michelle Barker

Paper Prototype CSS: A CSS Framework That Mimics Paper Prototyping — Inspired by similar hand-drawn or “doodle-y” type frameworks, it makes elements on a page appear like scraps of paper or Post-It notes on a page. If the mental model works for you, it's an interesting take on prototyping.

terence eden

CSS3Maker: An All-in-One CSS Code Generator — You can customize and generate code for 10+ CSS features, including gradients, shadows, borders, filters, transforms, @font-face, animations, and more.

toptal

Don’t Let Your Issue Tracker Be a Four-Letter Word. Use Shortcut

Shortcut (formerly Clubhouse.io) sponsor

Pixelarticons: A Collection of Over 470 Open-Source Pixel-Art Style Icons — Available in either SVG or Figma format, and the author has another icon set called Majesticons, if you don’t like the pixel-art look. Associated repo here.

Gerrit Halfmann

html-midi-player: Play and Display MIDI Files on the Web — Offers two elements midi-player and midi-visualizer. This page has live demos of both.

Ondřej Cífka

Linkinator 4.0: A Tool to Find Your Site's Broken Links — Both a Node.js API and CLI tool that can be used to crawl a site and validate links. You can run it as easily as npx linkinator https://​example․com/ right now if you want to try it out.

Justin Beckwith

A Chrome Extension That Adds a Tailwind CSS Classes Cheatsheet to Your Browser

shahid s.