--- title: "The state of the web in 2020" publication: "Frontend Focus" issue: 471 published_at: "2020-12-16" canonical_url: "https://frontendfoc.us/issues/471" --- ...plus highlights from the Chrome Dev Summit. | 👋 Hey, This marks **the last issue of Frontend Focus of the year**. We will be back in early January with a roundup issue looking back over the frontend highlights of 2020 (_an admittedly unusual year by all acounts_). Thank you so much for continuting to read and support the newsletter. Catch you in 2021! __ _[Chris Brandrick](http://twitter.com/chrisbrandrick), Editor_ Frontend![](https://res.cloudinary.com/cpress/image/upload/v1602675575/hhmdxfk96fnbq3effjk1.png)Focus #471 — December 16, 2020 | [Read on the web](https://frontendfoc.us/issues/471) [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/v1608027714/mfjyxh4tgek0rgxqou4k.jpg)](https://almanac.httparchive.org/en/2020/) [The HTTP Archive's 2020 _Web Almanac_](https://almanac.httparchive.org/en/2020/) — The excellent Web Almanac (_also [available as a PDF](https://almanac.httparchive.org/static/pdfs/web_almanac_2020_en.pdf)_) returns for another year, with a comprehensive look at the current state of the web, all based on real-world data from millions of websites. There’s 22 chapters of analysis in this report, including sections on [CSS](https://almanac.httparchive.org/en/2020/css), [JavaScript](https://almanac.httparchive.org/en/2020/javascript), [UX](https://almanac.httparchive.org/en/2020/table-of-contents#part-2), [publishing](https://almanac.httparchive.org/en/2020/table-of-contents#part-3), [distribution](https://almanac.httparchive.org/en/2020/table-of-contents#part-4) and more — so plenty to dig into. _Well worth diving into with a coffee or two over the festive break I reckon_. HTTP Archive **⛰ Highlights from the Chrome Dev Summit:** - The opening keynote was [a 40-minute review of the current state of Chrome (including recent announcements and updates) and a look at the wider web](https://www.youtube.com/watch?v=14pb8t1lHws) in 2020. - Both Elizabeth Sweeny and Paul Irish [ran through some speed tooling options](https://www.youtube.com/watch?v=_G3X_IsozKk), including Lighthouse scoring, third-party audits, and the Chrome user exerpeiernce report. - Jake Archibald explained [how you can speed your site up (and smash core web vitals thresholds)](https://www.youtube.com/watch?v=Z6wjUOSh9Tk) with new performance features. - [Here's the full playlist of all videos from this year's event](https://www.youtube.com/playlist?list=PLNYkxOF6rcIDzLmWaDwfHVZJl1Q5RFgOR). - Richard MacManus [shared his thoughts on this year's Chrome Dev Summit](https://thenewstack.io/chrome-dev-summit-the-web-is-closing-the-gap-on-native-apps/), pointing out Google's 'clear' expansion of the web's capabilities versus that of native apps. [![\](https://copm.s3.amazonaws.com/64fb5da9.jpg)](https://frontendmasters.com/courses/production-typescript/?utm_source=newsletter&utm_medium=email&utm_campaign=frontendfocus&utm_content=typescript) [New Course: Production-Grade TypeScript](https://frontendmasters.com/courses/production-typescript/?utm_source=newsletter&utm_medium=email&utm_campaign=frontendfocus&utm_content=typescript) — Use the TypeScript language at scale to increase the developer experience and productivity of your teams. Learn to manage even the most ambitious TypeScript projects with confidence and ease. Frontend Masters sponsor [And Now For… Firefox 84](https://hacks.mozilla.org/2020/12/and-now-for-firefox-84/) — Version 84 includes some interesting new features including tab order inspection, complex selector support in `:not()`, the `PerformancePaintTiming API`, and more. You can [see the full release notes here](https://www.mozilla.org/en-US/firefox/84.0/releasenotes/), and a detailed [rundown of developer changes](https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/84) too. Chris Mills (Mozilla) [Using CSS 'Individual' Transform Properties](https://webkit.org/blog/11420/css-individual-transform-properties/) — As of Safari Technology Preview 117 you can now use `translate`, `rotate` and `scale` as new individual CSS properties to specify what have so far solely been functions of the `transform` property. This also works in Firefox and Chrome Canary. Adam Argyle has a [neat visual demonstrating the change in this tweet](https://twitter.com/argyleink/status/1338907239990497280). Antoine Quint (WebKit) **⚡️ Quick bits:** - With the launch of 'codename Yari', [the MDN Web Docs have a new home](https://hacks.mozilla.org/2020/12/welcome-yari-mdn-web-docs-has-a-new-platform/). - Idera are currently running a survey on usage/trends in relation to JavScript UI components. You can [take it here](https://www.surveymonkey.com/r/JavaScript-UI-Component-Survey). - Work with WordPress? The annual '_State of the Word_' [WordPress keynote streams tomorrow](https://twitter.com/WordPress/status/1337043182140481546). - What would a [periodic table of the web](http://wwwperiodictable.surge.sh/?hn5) look like? James Lu has had a go, mapping Web APIs and various technologies. 📙 **Articles, Tutorials, & Opinion** [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/cffgpdck5ofmq7zcwmmz.jpg)](https://calendar.perfplanet.com/2020/analyzing-web-vitals-with-webpagetest/) [Analyzing Web Vitals with WebPageTest](https://calendar.perfplanet.com/2020/analyzing-web-vitals-with-webpagetest/) — A solid look at how to parse various Web Vitals output metrics. Patrick Meenan [Old is Solid; New Gets Talked About](https://css-tricks.com/old-is-solid-new-gets-talked-about/) — Thoughts on using what you know: “_Old can be solid, it can be dependable and it can be predictable. There are times where it’s fun to try new stuff and tell people about it, and there’s times to reach` for the technology you know so you can get stuff done_.” Kilian Valkhof [What Can You Put in a CSS Variable?](https://codersblock.com/blog/what-can-you-put-in-a-css-variable/) — A good list of the various things you can put inside a CSS variables (also known as CSS custom properties). Will Boyd [Haven’t Checked Out Our AWS re:Invent Sponsor Page? Only 3 Days Left](https://virtual.awsevents.com/sponsor/186983463/New_Relic) New Relic sponsor [Sticky CSS Grid Items](https://melanie-richards.com/blog/css-grid-sticky/) — How to get position sticky working on a grid item without setting a hacky height. Melanie Richards [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/v1608120655/ppyhjbhhserjcpvf3bz4.jpg)](https://css-tricks.com/using-css-custom-properties-to-adjust-variable-font-weights-in-dark-mode/) [Using CSS Custom Properties to Adjust Variable Font Weights in Dark Mode](https://css-tricks.com/using-css-custom-properties-to-adjust-variable-font-weights-in-dark-mode/) — Dark mode may make your text _appear_ thicker — here’s what you can do about it. Greg Gibson [Time to Say Goodbye to Google Fonts](https://wicki.io/posts/2020-11-goodbye-google-fonts/) — Outlines why self-hosting is the more performant approach to using Google Fonts. Simon Wicki [Switching to Tailwind CSS](https://leerob.io/blog/tailwind) — Why this developer switched their Next.js powered blog to using Tailwind CSS, and how it impacted performance. Lee Robinson [How to Increase CSS-in-JS Performance by 175x](https://dominictobias.medium.com/how-to-increase-css-in-js-performance-by-175x-f30ddeac6bce) — If you're into using CSS-in-JS, here’s some pointers to get some serious performance gains. Dominic Tobias [Writing Text in a Circle with CSS & JS](https://t.co/WSkHZIicA5?amp=1) John Negoita [What Makes CSS Hard To Master?](https://timseverien.com/posts/2020-12-06-what-makes-css-hard-to-master/) Tim Severien 🔧 **Code, Tools and Resources** [Squoosh v2: Browser Based Image Compressor from Google](https://squoosh.app/) — Make images smaller using best-in-class codecs, right in the browser. There’s also a CLI you can use if you have multiple images to compress at once. More [info about the v2 update here.](https://web.dev/squoosh-v2/) Google Chrome Team [![\](https://res.cloudinary.com/cpress/image/upload/v1608128893/awufs7rh1vjheuxdeula.png)](https://2.flexiple.com/scale/all-illustrations) [Scale: High-Quality, Open-Source Illustrations](https://2.flexiple.com/scale/all-illustrations) — SVG/PNG illustrations that can be customized with a theme color before downloading, to match your brand. Free for use in any project and new illustrations added each week. Flexiple [Square Terminal API](https://squareup.com/t/f_online/d_newsletter/p_frontendfocus/l_us/dt_alldevice/pr_ecommerce_api/?route=docs/terminal-api/overview&site=developer.squareup.com) — Connect your app to the all-in-one payments device merchants love with a simple REST API. [Learn more](https://squareup.com/t/f_online/d_newsletter/p_frontendfocus/l_us/dt_alldevice/pr_ecommerce_api/?route=docs/terminal-api/overview&site=developer.squareup.com). Square sponsor [Tiny-Swiper: An 'Ingenious' JavaScript Carousel](https://github.com/joe223/tiny-swiper) — A free carousel offering a ‘native-like experience’ for the web. Zero dependencies, written in TypeScript, no attribution required. [Demos here](https://tiny-swiper.joe223.com/docs/demo/). Joe Harris [Flappy.html: Flappy Bird in 205 Bytes](https://gist.github.com/gullyn/95b2ab9e465317f1d4e4607cf6e94205) — This is a really rudimentary version of Flappy Bird that uses HTML Canvas and has been 'code-golfed' to microscopic size. gullyn [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/v1608129103/dbf3v4fi7dwhw1aeifzz.png)](https://denali.design/) [Denali: A Themeable Design System for Building Uniquely Styled Frameworks](https://denali.design/) — The main pull for this is the fact that the design system doesn’t make any assumptions about your design, so you can customize components according to your brand. Oath [Downsize for Figma: Compress Images Right On The Canvas](https://www.figma.com/community/plugin/869495400795251845/Downsize) — If you use Figma this plugin for compressing your images may prove handy. Alex E [Simple Icons: 1472 Free SVG Icons for Popular Brands](https://simpleicons.org/) Simple Icons 💻 **Jobs** [Frontend Developer at X-Team (Remote)](https://x-team.com/remote-frontend-developer-jobs/?utm_source=cooperpress&utm_medium=email-ad&utm_campaign=frontend) — Join the most energizing community for developers and work on projects for Riot Games, FOX, Sony, Coinbase, and more. X-Team [Find a Job Through Vettery](https://www.vettery.com/tech?utm_source=newsletter&utm_medium=cooper-frontendfocus&utm_term=tech&utm_content=grouped&utm_campaign=ad-77580) — Create a profile on Vettery to connect with hiring managers at startups and Fortune 500 companies. It's free for job-seekers. Vettery 🧑‍💻 _Looking to share your job listing in Frontend Focus? [There's more info here](https://booking.cooperpress.com/jobs)_. 📬 **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/peterc). Fairfield Enterprise Centre, Louth, LN11 0LS, United Kingdom [Stop getting this newsletter](https://frontendfoc.us/leave/*|UID|*)