? 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, Editor

Frontend  Focus

#471 — December 16, 2020 | Read on the web

The HTTP Archive’s 2020 Web Almanac — The excellent Web Almanac (also available as a 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, JavaScript, UX, publishing, distribution and more — so plenty to dig into. Well worth diving into with a coffee or two over the festive break I reckon.

HTTP Archive

New Course: Production-Grade 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 — 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, and a detailed rundown of developer changes too.

Chris Mills (Mozilla)

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

Antoine Quint (WebKit)

? Articles, Tutorials, & Opinion

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

New Relic sponsor

Sticky CSS Grid Items — How to get position sticky working on a grid item without setting a hacky height.

Melanie Richards

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 — Outlines why self-hosting is the more performant approach to using Google Fonts.

Simon Wicki

Switching to Tailwind CSS — 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 — 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

John Negoita

What Makes CSS Hard To Master?

Tim Severien

? Code, Tools and Resources

Squoosh v2: Browser Based Image Compressor from Google — 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.

Google Chrome Team

Scale: High-Quality, Open-Source 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 — Connect your app to the all-in-one payments device merchants love with a simple REST API. Learn more.

Square sponsor

Tiny-Swiper: An ‘Ingenious’ JavaScript Carousel — A free carousel offering a ‘native-like experience’ for the web. Zero dependencies, written in TypeScript, no attribution required. Demos here.

Joe Harris

Flappy.html: Flappy Bird in 205 Bytes — This is a really rudimentary version of Flappy Bird that uses HTML Canvas and has been ‘code-golfed’ to microscopic size.

gullyn

Denali: A Themeable Design System for Building Uniquely Styled Frameworks — 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 — If you use Figma this plugin for compressing your images may prove handy.

Alex E

Simple Icons: 1472 Free SVG Icons for Popular Brands

Simple Icons

? Jobs

Frontend Developer at X-Team (Remote) — 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 — Create a profile on Vettery to connect with hiring managers at startups and Fortune 500 companies. It’s free for job-seekers.

Vettery