#​550 — July 13, 2022 | Read on the web

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


📙 Tutorials, Articles & Opinion

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

▶  Debug the Web in 3D with Microsoft Edge DevTools — A hands-on 15-minute video looking at the 3D view tool and how it can help with common issues like DOM nesting, Z-index stacking, out-of-document elements, and more. There’s a related article here.

Patrick Brosset

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

Why Do We Call It Breadcrumbs? Diving Into The History of UI Components
Megan Ng

▶  Managing Specificity with CSS Cascade Layers
Zoran Jambor

Designing the Perfect Button
Domas Markevičius

The CSS Behind Figma
Ahmad Shadeed


Sr Frontend Developer for a VA.gov Team (Remote) — Use React to improve Veterans’ access to healthcare & benefits at VA․gov. We work on meaningful problems with productive stacks.

Find Frontend Engineering Jobs with Hired — Create a profile on Hired to connect with hiring managers at growing startups and Fortune 500 companies. It's free for job-seekers.

🔧 Code, Tools & Resources

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.


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.


Eruda 2.5 – A developer console option for mobile browsers.
PrimeReact 8.2 – Large 80+ React UI component library.
DOMPurify 2.3.9 – DOM-only, fast XSS sanitizer for HTML and more.
Siimple 4.1 – Minimal and themeable CSS toolkit for flat and clean designs.