The Web Almanac 2022 on Web Performance — A recently added chapter to the excellent HTTP Archive Web Almanac focusing on web performance, specifically Google’s Core Web Vitals approach and how its various metrics (LCP, CLS, etc) impact the performance conversation.

Melissa Ada & Rick Viscomi

Simplify Front-End Performance Monitoring by Analyzing UX Data — Utilize critical performance data to understand how users experience your applications with Datadog Real User Monitoring. Analyze user errors in real-time and resolve front-end issues fast.

Datadog sponsor

The New CSS Media Query Range Syntax — The Media Queries Level 4 spec introduces a new syntax for targeting a range of viewport widths using common mathematical comparison operators, like <, >, and =, that make more sense syntactically while writing less code for responsive web design. Browser support is pretty good with Safari being the hold out for now.

Preethi Selvam

'Why One Web Pioneer Thinks It’s Time to Reinvent the Browser' — Darin Fisher worked on the world’s most popular browsers (Firefox, Google Chrome) and now he’s going to try and disrupt them with newcomer Arc.

David Pierce (The Verge)

Building an Accessible Tooltip Component — A foundational, considered overview of how to build a color-adaptive and accessible <tool-tip> custom element. There’s a video version of this post if you’d prefer too. Demo.

Adam Argyle

Motion Controls in the Browser — Ever wanted to build a web app that you can control with hand gestures? This article explains how to implement such motion controls, creating an app where you can interact with on-screen elements. Note: the demo requires a camera feed to work.

Yaphi Berhanu

Typographic Hierarchies — Discusses six basic variables to establish a typographic hierarchy, how to look at each differently, and in turn, designs pieces by intentionally modifying each of these variables to create an effective typographic order.

Alma Hoffmann

Build Internal Tools 10x Faster with Retool — Assemble your UI, connect data, and publish apps faster with Retool. 100+ pre-built UI components. Schedule a demo to learn more.

Retool sponsor

Understanding WebC Features and Concepts — WebC is a recent addition to the Eleventy ecosystem that enables first-class components. Stephanie notes that putting the pieces together may be a little overwhelming, so reviews some WebC features to help us out.

Stephanie Eckles

Icônes: An Icon Explorer with Instant Search for 100+ Icon Sets — You can select any icon set, then search by keyword within the chosen set. The app is powered by Iconify and built in Vue.

Anthony Fu

Markdoc 0.2: A Flexible, Markdown-based Authoring Framework — Markdoc is an extension of Markdown but with extra features you’ll need when working with blog posts or documentation you want to share. It’s used for Stripe’s public docs site, but you can bring it into your own systems. GitHub repo.

Stripe

The Component Gallery — A collection of interface components from real-world design systems. This is a well put together collection and more useful than it sounds.

Iain Bean

Notification System Design Simplified - UX Matters

Courier.com sponsor

🎉  Canvas Confetti: An On-Demand 'Confetti Shower' — Ready to let off some fireworks in your browser? Do it in style with confetti. Plenty of demos to check out. GitHub repo.

Kiril Vatev

Pinceau: A CSS-in-TypeScript Framework Built for Vue — Still in early development, but has the perk of integrating its features seamlessly for Vue developers, and works with Nuxt, Vitesse, and @vitejs/plugin-vue

Yaël Guilloux