Welcome to my Weekly Digest #24.

This weekly digest contains a lot of interesting and inspiring articles, videos, tweets, podcasts, and designs I consumed during this week.

Interesting articles to read

The Beauty of FizzBuzz in CSS

In this CSS implementation of FizzBuzz, we can generate beautiful patterns with math!

CSS for Web Vitals

This article covers CSS-related techniques for optimizing Web Vitals.

Inherit, initial, unset, revert

Today we’re going to take a quick look at a few special CSS keywords you can use on any CSS property: inherit, initial, revert, and unset. Also, we will ask where and when to use them to the greatest effect, and if we need more of those keywords.

Inline Styles as Classes

If you’re abhorred by using inline styles, just move that style to the class attribute! And then make sure you have CSS in place that, ya know, does what it says on the box.

Useful and Useless Code Comments

Unfortunately, many comments are not particularly helpful. The most common reason is that comments repeat the code: all of the information in the comment can easily be deduced from the code next to the comment.

A Complete Guide To Accessibility Tooling

Learning to build accessible websites can be a daunting task for those who are just starting to implement accessible practices. We’ve pulled together a wide range of accessibility tooling, ranging from single-use bookmarklets to full-blown applications, in order to help you get started with building more accessible websites.

Some great videos I watched this week

Pie Charts in React with visx

Using visx, the low-level visualization library from Airbnb, we’ll create a cool looking Pie Chart that resembles the beautiful one that the Exodus wallet has.

What’s new in React 18

Understand the top new features coming to React 18, explained simply.

Five Essential Design Patterns in Typescript

Jack is going to “do it live!” as he brings you five essential Design Patterns, from the GoF book, in Typescript, live, as you get to ask questions along the way!

How to Find and Remove Dead CSS

Ever have old CSS styles pile up that you’re afraid to remove because you’re not sure if anything else is depending on them? Here’s one way to get more confidence about which styles are actually unused and safe to delete, by using combining the code coverage results for each page on your website.

Seeking a Target

This video explores Craig Reynolds’ formula for Steering Behaviors in JavaScript (p5.js) beginning with “Seeking a Target.

Useful GitHub repositories

Fig

Fig adds autocomplete to your terminal. As you type, Fig pops up subcommands, options, and contextually relevant arguments in your existing terminal on macOS.

ni

Use the right package manager

Modern Unix

A collection of modern/faster/saner alternatives to common unix commands.

Google TypeScript Style

gts is Google’s TypeScript style guide, and the configuration for our formatter, linter, and automatic code fixer. No lint rules to edit, no configuration to update, no more bike shedding over syntax.

dribbble shots

Cake App

OYOTEE — Plant Shop Website

Blog App — UI Design

Spotify for Artists Fan Study Pitch

Tweets

Picked Pens

3D Modern House

Loki — Intro text animation

Rage

Podcasts worth listening

Syntax — What is SvelteKit?

In this Hasty Treat, Scott and Wes talk about SvelteKit — what it is and why you might want to use it.

The CSS Podcast — Custom properties

Custom properties, aka CSS variables, are runtime dynamic variables which allow you to store loose or typed values. They’re free, super fast, improve code legibility, unlock powers, are reachable with JavaScript, animateable, overall super fun and, well, kind of complex.

Smashing Podcast — What is Image Optimization in 2021?

We’re talking about Image Optimization. What steps should we follow for performant images in 2021? Drew McLellan talks to expert Addy Osmani to find out.

CodePen Radio — Andy and Una from Google’s Learn CSS Project

Learn CSS is a very cool project from a whole team of people at Google (and outside). It does a great job of documenting where is right now, in a fairly comprehensive way.

Junior to Senior — Maintainer of the JavaScript Octokit

David and Gregor discuss building and maintaining open-source software, how to be a valuable asset to your team, and growing through communication.

Thank you for reading, talk to you next week, and stay safe! 👋

Full-Stack JavaScript Engineer with focus on React, Redux & Node.js and passioned about Open Source working @Mobime based in Berlin, Germany marcobiedermann.com