--- title: "The state of the web in 2022" publication: "Frontend Focus" issue: 561 published_at: "2022-09-28" canonical_url: "https://frontendfoc.us/issues/561" --- Plus the Simpsons play Chrome's dinosaur game, and exploring the power of CSS blend modes. | #​561 — September 28, 2022 | [Read on the web](https://frontendfoc.us/issues/561) [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/v1664289846/ip1dmefv0zrqjjheqmh6.png)](https://almanac.httparchive.org/en/2022/) [The 2022 Web Almanac](https://almanac.httparchive.org/en/2022/) — 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](https://twitter.com/httparchive/status/1574451518224343048)!_) 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](https://twitter.com/stefanjudis/status/1574692009926967297) 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](https://twitter.com/PixelAmbacht/status/1575109982273515522). - The [WebAssembly page](https://almanac.httparchive.org/en/2022/webassembly) is interesting as it shows just how niche it still is, but also what the most popular use cases are ([Amazon IVS](https://aws.amazon.com/ivs/) at #1, but a [Web text hyphenation polyfill](https://mnater.github.io/Hyphenopoly/) at #2..) HTTP Archive [![\](https://copm.s3.amazonaws.com/b9243664.png)](https://retool.com/?utm_source=sponsor&utm_medium=newsletter&utm_campaign=cooperpress) [Build Internal Apps in Minutes](https://retool.com/?utm_source=sponsor&utm_medium=newsletter&utm_campaign=cooperpress) — 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](https://css-tricks.com/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](https://web.dev/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](https://ishadeed.com/article/use-cases-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](https://2022.cascadiajs.com/speakers/chris-coyier)' — 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](https://blog.cloudflare.com/svg-support-in-cloudflare-images/). - Large, Small, and Dynamic viewport units (`lv, sv, dv`) are [coming to Chrome 108](https://groups.google.com/a/chromium.org/g/blink-dev/c/Qw2XTr0et_U). 📙 **Tutorials, Articles & Opinion** [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/v1664373316/rmrb8kwbq6h6g2bvjqko.jpg)](https://cloudfour.com/thinks/the-power-of-css-blend-modes/) [The Power of CSS Blend Modes](https://cloudfour.com/thinks/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](https://www.smashingmagazine.com/2022/09/data-loading-patterns-improve-frontend-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](https://web.dev/introducing-learn-html/) — A [new, free course](https://web.dev/learn/html/) from [Estelle Weyl](https://twitter.com/estellevw) 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](https://www.courier.com/blog/future-proofed-multichannel-notifications/?utm_campaign=demand-gen&utm_source=email&utm_medium=frontend-focus-9-28&utm_content=multi-channel-blog) — 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](https://blogs.windows.com/msedgedev/2022/09/27/closing-pixel-gap-native-web-window-controls-overlay/) — 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](https://kilianvalkhof.com/2022/css-html/on-better-browsers-arbitrary-media-queries-and-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](https://www.youtube.com/watch?v=qQQjPoP01bg) — An attempt at reproducing the striking scrolling text effect on display at [Design Embraced.](https://designembraced.com/) This is typography and ‘web design’ turned up to 11.. Yuri Artiukh [Experimenting with a New Syntax to Write SVG](https://yuanchuan.dev/experimenting-a-new-syntax-to-write-svg) yuanchuan 🔧 **Code, Tools & Resources** [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/v1664372731/czcbjt6enrovoexlb3ep.png)](https://www.radix-ui.com/colors) [Radix Colors: A Gorgeous, Accessible Color System](https://www.radix-ui.com/colors) — 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](https://devicescss.xyz/) — 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.](https://shortcut.com/?utm_source=cooperFRONTEND&utm_medium=spon_nl&utm_campaign=prospecting&utm_content=fourletter) Shortcut (formerly Clubhouse.io) sponsor [Papanasi: A Frontend UI Library to Use with Just About Any Framework](https://github.com/ckgrafico/papanasi) — Includes a modest set of components built using component compiler [Mitosis](https://github.com/BuilderIO/mitosis) and available for Angular, React, Solid, Svelte, Vue, or as Web Components. Quique Fdez Guerra [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/qtex9dlwiutjxabnv8lk.jpg)](https://screenspan.net/fallback) [Fallback Font Generator](https://screenspan.net/fallback) — 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](https://github.com/postcss/postcss-media-minmax) — 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](https://drafts.csswg.org/mediaqueries/#mq-range-context). PostCSS [Tailwind CSS Cheat Sheet: Find Tailwind Class Names for Layout Features](https://tailwindcomponents.com/cheatsheet/) Highscore Studio 🧑‍💻 JOBS [Full-Stack Engineer (NYC / Remote)](https://apply.workable.com/j/E0E1B15339) — 100M+ devices, 100B+ API calls. Radar is looking for Product Engineers to build geospatial dev tools. Radar [Find Frontend Engineering Jobs with Hired](https://hired.com/join/?utm_source=newsletter&utm_medium=sponsor&utm_campaign=%28b2c%29%28l-all%29%28r-all%29%28cooper-frontendfocus%29&utm_content=find-your-next-job) — 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** [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/v1664372948/iuvnp9es1ot9eeflwjkv.png)](https://9to5google.com/2022/09/25/the-simpsons-chrome-dino/) 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](https://9to5google.com/2022/09/25/the-simpsons-chrome-dino/) in Google Chrome. [▶️ Here's a video](https://twitter.com/JasonOGrady/status/1574244859858153472). 📬 **Got a new email address?** You can [change your email here](https://frontendfoc.us/edit_subscription/*|UID|*). --- **Bored of us?** Click [here to stop getting this newsletter](https://frontendfoc.us/leave/*|UID|*). --- **Got a link for us?** Reply and tell us. We can't include everything but we'll take a look. --- Published by Cooper Press Ltd. Curated by [Chris Brandrick](https://twitter.com/chrisbrandrick) & [Peter Cooper](https://twitter.com/cooperx86). Fairfield Enterprise Centre, Louth, LN11 0LS, United Kingdom [Stop getting this newsletter](https://frontendfoc.us/leave/*|UID|*) [Ipx.](https://frontendfoc.us/open/561/*|UID|*?ipx=t)