Issue 471 - The state of the web in 2020 (23)

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.

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.

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.

Downsize for Figma: Compress Images Right On The Canvas — If you use Figma this plugin for compressing your images may prove handy.

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

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.

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.

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.

Analyzing Web Vitals with WebPageTest — A solid look at how to parse various Web Vitals output metrics.

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

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

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

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.

Time to Say Goodbye to Google Fonts — Outlines why self-hosting is the more performant approach to using Google Fonts.

Switching to Tailwind CSS — Why this developer switched their Next.js powered blog to using Tailwind CSS, and how it impacted performance.

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.

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.

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.

Nerd Talk with Lew Cirne at AWS re:Invent Dec. 3, at 1pm PT — Watch our CEO Lew Cirne build a custom New Relic One application from scratch in under 9 minutes. Set your alarm now.

Find A Job Through Vettery — Vettery specializes in dev roles and is completely free for job seekers.

Frontend Developer at X-Team (Remote) — Join the most energizing community for developers. Work from anywhere with the world's leading brands.