Weekly Digest 18/2021
Tags: css, javascript, react, webdev
Published: 2021-05-09 17:32:53

Welcome to my Weekly Digest #18 of this year.

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

### Should DevTools teach the CSS cascade?

Should browser developer tools show CSS specificity and provide additional resources?

[Should DevTools teach the CSS cascade?](https://www.stefanjudis.com/blog/should-devtools-teach-the-css-cascade/)

### Say Hello To CSS Container Queries

Let's learn about how CSS container queries work with lots of examples and use-cases.

[Say Hello To CSS Container Queries - Ahmad Shadeed](https://ishadeed.com/article/say-hello-to-css-container-queries/?ref=sidebar)

### All you need to know to move from CommonJS to ECMAScript Modules in Node.js

One of the most revolutionary features introduced as part of ECMAScript 2015 specification is modules (ESM). In April 2020, Node v14.0.0 landed without experimental modules warning. Even though it was still experimental, it felt like the right timing to adopt ESM for some toy projects and insignificant clients' work. Eventually, Node v15.3.0 arrived and marked modules implementation as stable.

[All you need to know to move from CommonJS to ECMAScript Modules (ESM) in Node.js | pawelgrzybek.com](https://pawelgrzybek.com/all-you-need-to-know-to-move-from-commonjs-to-ecmascript-modules-esm-in-node-js/)

### Super Simple Start to Remix

The simplest distraction-free version of a remix app

[Super Simple Start to Remix](https://kentcdodds.com/blog/super-simple-start-to-remix)

---

## Some great videos I watched this week

### Dogecoin Price Analysis

{% youtube T8zUt0pV50s %}

by [Computer Science](https://twitter.com/CsEverything)

### Dependabot version updates are now generally available

The big news is that Dependabot on GitHub is now generally available! It's got all the Dependency updating goodness of Dependabot Preview, but with a fully integrated GitHub experience.

{% youtube nBq1aedtTfM %}

by [GitHub](https://twitter.com/github)

### How a CPU Works in 100 Seconds

Learn how the central processing unit (CPU) works in your computer. Compare performance and processor architecture between the Intel and Apple Silicon M1 chips

{% youtube vqs_0W-MSB0 %}

by [Fireship](https://twitter.com/fireship_dev)

### Filters & Backdrop Filters

In this video, we take look at the new filter and backdrop-filter utilities added in Tailwind CSS v2.1.

{% youtube qGEZdGMgXL4 %}

by [Tailwind Labs](https://twitter.com/tailwindlabs)

### Build a 3D World in React with ThreeJS and React Three Fiber

This video starts with me talking about the difference between React and ReactDOM. React Three Fiber uses React to keep track of 3D objects that gets rendered in a webGL canvas via three.js . The result is the ability to code 3D environments the same way you are used to code a React Web Application. We can even add physics and animation to the 3D objects in the world. In this example we place a Box on a Plane inside a Skybox of stars.

{% youtube 9ZEjSxDRIik %}

by [Daniel Bark](https://twitter.com/barelydaniel)

---

## Useful GitHub repositories

### Best-websites-a-programmer-should-visit

When learning CS, there are some useful sites you must know to get always informed to do your technologies even better and learn new things. Here is a non-exhaustive list of some sites you should visit.

{% github sdmg15/Best-websites-a-programmer-should-visit %}

### Awesome Python

A curated list of awesome Python frameworks, libraries, software and resources.

{% github vinta/awesome-python %}

### GIT quick statistics

Git quick statistics is a simple and efficient way to access various statistics in git repository.

{% github arzzen/git-quick-stats %}

---

## dribbble shots

### Popovers Dark / Black / Light mode

![https://cdn.dribbble.com/users/149817/screenshots/15606068/comp_1_1.png](https://cdn.dribbble.com/users/149817/screenshots/15606068/comp_1_1.png)

by [Jakub Antalik](https://dribbble.com/shots/15606068-Popovers-Dark-Black-Light-mode)

### Boxboard Dashboard UI Kit I

![https://cdn.dribbble.com/users/1145170/screenshots/15611120/dribbble_interaction_1.png](https://cdn.dribbble.com/users/1145170/screenshots/15611120/dribbble_interaction_1.png)

by [Anton Tkachev](https://dribbble.com/shots/15611120-Boxboard-Dashboard-UI-Kit-I)

### Air Ticket App Concept

![https://cdn.dribbble.com/users/1963775/screenshots/15615286/media/88525345400edb4724d94109b1f3a576.png](https://cdn.dribbble.com/users/1963775/screenshots/15615286/media/88525345400edb4724d94109b1f3a576.png)

by [Conceptzilla](https://dribbble.com/shots/15615286-Air-Ticket-App-Concept)

### Small fun project

![https://cdn.dribbble.com/users/182238/screenshots/15616181/media/98eae2cd5d02c072634337bbbd6e1bcb.jpg](https://cdn.dribbble.com/users/182238/screenshots/15616181/media/98eae2cd5d02c072634337bbbd6e1bcb.jpg)

by [Roma Korolev](https://dribbble.com/shots/15616181-Small-fun-project)

### Travel app

![https://cdn.dribbble.com/users/6027442/screenshots/15613705/media/681541ccbb570077d3bbbf2c8db138bf.jpg](https://cdn.dribbble.com/users/6027442/screenshots/15613705/media/681541ccbb570077d3bbbf2c8db138bf.jpg)

by [Faruk Ahmed](https://dribbble.com/shots/15613705-Travel-app)

### Grocery and Food Order App Exploration

![https://cdn.dribbble.com/users/7252479/screenshots/15613036/media/57ae09295fa51165d23835b0847378aa.png](https://cdn.dribbble.com/users/7252479/screenshots/15613036/media/57ae09295fa51165d23835b0847378aa.png)

by [Amelia Dita Handayani](https://dribbble.com/shots/15613036-Grocery-and-Food-Order-App-Exploration)

---

## Tweets

{% twitter 1388874423797784581 %}

{% twitter 1389191741991964677 %}

{% twitter 1389876391248900102 %}

{% twitter 1384780558165680135 %}

{% twitter 1389949827199471617 %}

{% twitter 1390245210827984896 %}

---

## Picked Pens

### CSS Skateboard

{% codepen https://codepen.io/deren2525/pen/dyvyLev %}

by [Deren](https://twitter.com/study_dedede)

### Pericles mi loro querido

{% codepen https://codepen.io/judag/pen/NWpPMQE %}

by [Judith Neumann](https://codepen.io/judag)

---

## Podcasts worth listening

### The CSS Podcast - Transforms

In this episode we enter the 3rd dimension with CSS, placing and manipulating objects in 3D space with the transform property. 2D and 3D transforms are spectacular ways to animate and create a sense of depth in a design, follow along for how it all works.

{% spotify spotify:episode:2YquD5g8fE0eidiALuS2UV %}

---

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