Weekly Digest 24/2021 - Top of the Week
Tags: css, javascript, react, webdev
Published: 2021-06-20 17:01:34

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.

---

&nbsp;

## 🎉 Giveaway 

We are giving away any course you need on Udemy. Any price any course.
To enter you have to do the following:
1. 👍 React to this post
1. ✉️ Subscribe to our [newsletter](https://worldindev.ck.page)

You will receive [our articles](https://dev.to/worldindev) directly to your [inbox](https://worldindev.ck.page) 📬.
 
&nbsp;

---

## Interesting articles to read

### The Beauty of FizzBuzz in CSS

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

[The Beauty of FizzBuzz in CSS | Lara Schenck](https://notlaura.com/the-beauty-of-fizzbuzz/)

### CSS for Web Vitals

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

[CSS for Web Vitals](https://web.dev/css-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.

[Inherit, initial, unset, revert - ppk](http://www.quirksmode.org/blog/archives/2021/06/inherit_initial.html)

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

[Inline Styles as Classes (lol) | CSS-Tricks](https://css-tricks.com/inline-styles-as-classes-lol/)

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

[Useful and Useless Code Comments](https://blog.jim-nielsen.com/2021/useful-and-usless-code-comments/)

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

[A Complete Guide To Accessibility Tooling - Smashing Magazine](https://www.smashingmagazine.com/2021/06/complete-guide-accessibility-tooling/)

---

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

{% youtube bL3P9CqQkKw %}

by [Leigh Halliday](https://twitter.com/leighchalliday)

### What’s new in React 18

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

{% youtube bpVRWrrfM1M %}

by [Arnaud](https://twitter.com/eveningkid)

### 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!

{% youtube D40olxrDw38 %}

by [Jack Herrington](https://twitter.com/jherr)

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

{% youtube ANVnptJ32ME %}

by [Justin Searls](https://twitter.com/searls)

### Seeking a Target

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

{% youtube p1Ws1ZhG36g %}

by [Daniel Shiffman](https://twitter.com/shiffman)

---

## Useful GitHub repositories

### Fig

[Fig](https://fig.io/?ref=github_autocomplete) adds autocomplete to your terminal. ****As you type, Fig pops up subcommands, options, and contextually relevant arguments in your existing terminal on macOS.

{% github withfig/autocomplete %}

### ni

Use the right package manager

[antfu/ni](https://github.com/antfu/ni)

### Modern Unix

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

{% github ibraheemdev/modern-unix %}

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

{% github google/gts %}

---

## dribbble shots

### Cake App

![https://cdn.dribbble.com/users/4601337/screenshots/15849060/media/3fbba213a9d483fa2a51abd8fc756b7d.png](https://cdn.dribbble.com/users/4601337/screenshots/15849060/media/3fbba213a9d483fa2a51abd8fc756b7d.png)

by [Arya Wijaya Kusuma](https://dribbble.com/shots/15849060-Cake-App)

### OYOTEE - Plant Shop Website

![https://cdn.dribbble.com/users/3550736/screenshots/15848860/media/74bc70659511fd4169f64ed424b42665.jpg](https://cdn.dribbble.com/users/3550736/screenshots/15848860/media/74bc70659511fd4169f64ed424b42665.jpg)

by [Maulana Farhan](https://dribbble.com/shots/15848860-OYOTEE-Plant-Shop-Website)

### Blog App - UI Design

![https://cdn.dribbble.com/users/3375201/screenshots/15849030/media/9a70a3bbe66853bc8aec151c11fe89f4.png](https://cdn.dribbble.com/users/3375201/screenshots/15849030/media/9a70a3bbe66853bc8aec151c11fe89f4.png)

by [Sayyid Ahsan](https://dribbble.com/shots/15849030-Blog-App-UI-Design)

### Spotify for Artists Fan Study Pitch

![https://cdn.dribbble.com/users/3816/screenshots/15864817/media/4de75f68c1be6817132eaef6f7c771c1.png](https://cdn.dribbble.com/users/3816/screenshots/15864817/media/4de75f68c1be6817132eaef6f7c771c1.png)

by [Ben Cline](https://dribbble.com/shots/15864817-Spotify-for-Artists-Fan-Study-Pitch-Concept-style-frame-No-2)

## Tweets

{% twitter 1404510924891824128 %}

{% twitter 1405206412947382276 %}

{% twitter 1405468369265082369 %}

{% twitter 1405554160339079169 %}

{% twitter 1405962673599168517 %}

{% twitter 1405881231695302659 %}

---

## Picked Pens

### 3D Modern House

{% codepen https://codepen.io/ricardoolivaalonso/pen/yLOpNdZ %}

by [Ricardo Oliva Alonso](https://twitter.com/rolivaalonso)

### Loki – Intro text animation

{% codepen https://codepen.io/edalgrin/pen/oNZOgJW %}

by [Eduardo Allegrini](https://twitter.com/edalgrin)

### Rage

{% codepen https://codepen.io/tiffachoo/pen/VwpVyJN %}

by [Tiffany Choong](https://twitter.com/tiffachooo)

---

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

{% spotify spotify:episode:1ArcSgm8NXjlJBdFypOnJs %}

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

{% spotify spotify:episode:2NUzPqu3NcA8OkxdYJkiU4 %}

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

{% spotify spotify:episode:4tyvNXcAcPXxSsY9wgHIuD %}

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

[Learn CSS](https://web.dev/learn/css/) is a very cool project from a [whole team](https://web.dev/learn/css/conclusion/) of people at Google (and outside). It does a great job of documenting where is right now, in a fairly comprehensive way.

{% spotify spotify:episode:0mFX1ErHA15P8qOZdevW9j %}

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

{% spotify spotify:episode:136tmQ8s4Rca1KBZbVa1CO %}

---

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

---

&nbsp;

Make sure to subscribe to our [newsletter](https://worldindev.ck.page
) 💌 to receive our weekly recap directly on your email and react to this post to automatically participate in our giveaway 🎁

If you would like to join our discussions, you can find us on [Discord](https://discord.gg/aWS2YKk6) 📣.

&nbsp;