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:

• 🐦 Stefan Judis has an excellent Twitter thread bringing us some of the highlights — like, 71% of us still using pixel (px) for our font-size declarations.
• ...and talking of fonts, Roel Nieskens brings together some 🐦 web font facts in this Twitter thread.
• The WebAssembly page is interesting as it shows just how niche it still is, but also what the most popular use cases are (Amazon IVS at #1, but a Web text hyphenation polyfill at #2..)

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

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

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