#​561 — September 28, 2022 | Read on the web

The 2022 Web Almanac — This annual ‘state of the web’ report from the HTTP Archive returns for a fourth edition. It is, as always, a superb, detailed resource (crunching some 44TB of data!) looking at topic areas from CSS and JS, to WebAssembly, SEO, and security. This year also features new chapters focusing on interoperability and sustainability. Other highlights:

HTTP Archive

Build Internal Apps in Minutes — Retool is a fast way to build internal tools. Ship apps fast with 100+ production-ready UI components. Teams at Amazon and NBC collaborate around custom-built Retool apps to operate better. Teams of up to five can build unlimited Retool apps for free.

Retool sponsor

GIFs Without the .gif: The Most Performant Image and Video Options Right Now — So you want an auto-playing looping video without sound? Well, Ollie claims “there’s really no good reason to use the bulky .gif file format anymore” — and looks at what to do instead.

Ollie Williams

Testing Web Design Color Contrast — An overview of three tools and techniques for testing and verifying accessible color contrast of your design.

Adam Argyle and Charlie Gleason

Use Cases for CSS Comparison Functions — Explores a few different use-cases for comparison functions (min(), max(), and clamp()), and explains each one in detail.

Ahmad Shadeed

⚡️ IN BRIEF

  • Chris Coyier gave a talk at CascadiaJS dubbed 'The Web is Good Now' — he shares that it may be "time to take a look at how you’re approaching some of the building blocks of your website because evolutions in browser technology and tooling have made many things easier and better."

  • Cloudflare Images now supports storing and delivering SVG files.

  • Large, Small, and Dynamic viewport units (lv, sv, dv) are coming to Chrome 108.

📙 Tutorials, Articles & Opinion

The Power of CSS Blend Modes — A few experiments revealing how easy it can be to create something cool looking in just a few lines of CSS via blend modes.

Scott Vandehey

Five Data-Loading Patterns to Boost Web Performance — Use a framework? Well, this article aims to help you use it in the most performant way possible (think SSR, caching, event sourcing, etc).

Agustinus Theodorus

Introducing Learn HTML — A new, free course from Estelle Weyl to help get you up to speed with modern web development. Covers the document structure, metadata, semantic HTML, headings and sections, with more content on the way.

Rachel Andrew / Google / Estelle Weyl beginner

Email, Slack, and Push Notifications Made Easy — Contacting your users should be simple. With Courier you can send multi-channel notifications with clear logging.

Courier.com sponsor

Closing a 30 Pixel Gap Between Native and Web — PWAs can now customize the app window and title bar area using the new ‘Window Controls Overlay API’, hopefully resulting in a more familiar experience on desktop devices.

Patrick Brosset (Microsoft)

On Better Browsers: Arbitrary Media Queries & Browser UIs — A conceptual blog post, imaging a future where the browser has support for arbitrary media features.

Kilian Valkhof

▶  How to Build a Scrollable Text Gallery in Three.js — An attempt at reproducing the striking scrolling text effect on display at Design Embraced. This is typography and ‘web design’ turned up to 11..

Yuri Artiukh

Experimenting with a New Syntax to Write SVG
yuanchuan

🔧 Code, Tools & Resources

Radix Colors: A Gorgeous, Accessible Color System — Includes 30 color scales that can easily be incorporated in various CSS-in-JS systems or with plain CSS, and guaranteed to pass WCAG contrast guidelines.

workos

Devices.css - Modern Devices Crafted in Pure CSS — There’s a decent collection of devices, all crafted in pure CSS, including the iPhone 14 Pro, Google Pixel, MacBook Pro, Surface Book, and Apple Watch Ultra.

Yan Zhu

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

Shortcut (formerly Clubhouse.io) sponsor

Papanasi: A Frontend UI Library to Use with Just About Any Framework — Includes a modest set of components built using component compiler Mitosis and available for Angular, React, Solid, Svelte, Vue, or as Web Components.

Quique Fdez Guerra

Fallback Font Generator — A tool to reduce Cumulative Layout Shift (CLS) by adjusting web fonts and system font fallbacks using @font-face.

Brian Louis Ramirez

PostCSS Media Minmax: Writing Simple and Graceful Media Queries — This PostCSS plugin allows you to use the new <= or >= syntax to replace min- and max- prefixes in media queries, which you can read about in the spec here.

PostCSS

Tailwind CSS Cheat Sheet: Find Tailwind Class Names for Layout Features
Highscore Studio

🧑‍💻 JOBS

Full-Stack Engineer (NYC / Remote) — 100M+ devices, 100B+ API calls. Radar is looking for Product Engineers to build geospatial dev tools.
Radar

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

🦖 ...and finally

The opening sequence for the latest season premiere of The Simpsons (yes, it's still going — this is the 34th season) features a nod to the offline 'dino' game in Google Chrome. ▶️ Here's a video.

Ipx.