Together with  Datadog

#​566 — November 2, 2022 | Read on the web

Image via: The Web Almanac

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)


📙 Tutorials, Articles & Opinion

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

▶  Design Principles for the Web — A recent talk on the “never-ending crusade against the unknown“ that is designing and developing on the web. Over the course of ~40 minutes, Jeremy looks at the design principles we can apply to build sites that are resilient, performant, accessible, and beautiful.

Jeremy Keith

Understanding WebC Features and ConceptsWebC 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

Getting Color Contrast Right: Actionable Tips on WCAG 2.1 Color Compliance
Lukas Oppermann

Five Visual Treatments that Improve Accessibility
Kelley Gordon (NNG)

🔧 Code, Tools & Resources

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.


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 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

🧑‍💻 JOBS

Doppler - A SecretOps Platform Built by Developers for Developers — Doppler’s looking for Sr. Full-Stack Engineers to help shape the future of security devtools. TypeScript, React, Express, and Go, apply here.

Senior Frontend TypeScript Engineer [Remote - $60-120k] — Fingerprint is hiring. Necessary skills include TypeScript, React, and PostgreSQL.  Check out this and more fully remote offers on Just Join IT.

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.

✏️ Web Font of the Week

Nabla — You may remember a few months back we shared news that the first batch of Color Fonts, using the COLRv1 format, were now available on Google Fonts.

This neat isometric font from Arthur Reinders Folmer and Just van Rossum is one of of the first batch available.