Weekly Digest 14/2021
Tags: css, javascript, react, webdev
Published: 2021-04-11 17:38:24

Welcome to my Weekly Digest #14 🌱

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

### Top-level await is available in Node.js modules

Node.js' top-level is available in ES modules. Find out about three ways to enable it and untangle your code.

[Top-level await is available in Node.js modules](https://www.stefanjudis.com/today-i-learned/top-level-await-is-available-in-node-js-modules/)

### From Express to Fastify in Node.js

It has been almost two years since Express has been updated, and a lot of new great tools came around since then. I recently tried Fastify for the first time, and it took me no longer than a few minutes to decide to make a switch. Let me share with you a few main reasons.

[](https://pawelgrzybek.com/from-express-to-fastify-in-node-js/)

### Sass Guidelines improvements

Kitty Giraudel recently came back to Sass Guidelines. Not to update the content, but to work on the site itself. It turns out they learned a lot in the last few years and found many improvements worth doing. They thought it would be interesting to discuss them in this post. Here are the different topics we’ll go through.

[Sass Guidelines improvements](https://kittygiraudel.com/2021/04/06/sass-guidelines-improvements/)

### Dark mode in 5 minutes, with inverted lightness variables

By now, you probably know that you can use custom properties for individual color components, to avoid repeating the same color coordinates multiple times throughout your theme. You may even know that you can use the same variable for multiple components, e.g. HSL hue and lightness

[Dark mode in 5 minutes, with inverted lightness variables](https://lea.verou.me/2021/03/inverted-lightness-variables/)

### Top React toast libraries compared

The top React toast libraries for when it's more trouble than it's worth to create your own custom toast components.

[Top React toast libraries compared - LogRocket Blog](https://blog.logrocket.com/top-react-toast-libraries-compared/)

---

## Some great videos I watched this week

### Fix Your Mistakes, Don't Commit Them! Pre-Commit Git Hook Checks with Husky and Lint Staged.

It's time to stop committing broken tests, ugly code, type errors and lint errors to your git repository. With Husky, we can hook into git's pre-commit hook to only allow code into our git repository that passes all of those above checks. Using lint-staged we can make it more efficient to focus our energy on the changed files.

{% youtube oWty0Nw1ydk %}

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

### 5 Quick Tips about TypeScript

In this lesson we look at 5 simple ways TypeScript can describe your JavaScript code. 
The examples are taken from [https://typescript-exercises.github.io/](https://www.youtube.com/redirect?event=video_description&redir_token=QUFFLUhqa0l2c0g2S3JMR1daajEyTmt6V2x6azhwVXlLd3xBQ3Jtc0trWk1OV3BVY29lOUxJX3NZb2ZLdlJqUFhJNlpVenkzYlctc3QtU1VFVEdGMTg4MFBSWGpmUzJkZ2lsRDNhYTF5Q2RHN0tObHNodFBsV1FLdnVMZi1rcW1QRTF1d3dLOGo5QjNYRFROanVTQzRpQlZ3TQ&q=https%3A%2F%2Ftypescript-exercises.github.io%2F) and you can use this website to play around with the code yourself

{% youtube R1bpmjFiknw %}

by [Basarat Ali](https://twitter.com/basarat)

### Responsible JavaScript

While the performance of JavaScript engines in browsers have seen continued improvement, the amount of JavaScript we serve increases unabated. We need to use JavaScript more responsibly, which means we must rely on native browser features where prudent, use HTML and CSS when appropriate, and know when too much JavaScript is just that: Too much.

{% youtube 5Dn3N3exIns %}

by [Jeremy Wagner](https://twitter.com/malchata)

### 10 CSS Pro Tips - Code this, NOT that!

Top 10 CSS Pro Tips to make your life as a web developer more productive. Some of the best programmers say CSS is too hard… but you might be surprised at how modern techniques can dramatically improve your code.

{% youtube Qhaz36TZG5Y %}

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

### Chrome 90 - What’s New in DevTools

Debugging support for CSS Flexbox, performance heads-up display on page, issues tab updates and more.

{% youtube kOodTLAjPsE %}

by [Google Chrome Developers](https://twitter.com/ChromiumDev)

---

## Useful GitHub repositories

### forgit

💤 A utility tool powered by fzf for using git interactively.

{% github wfxr/forgit %}

### Vite

Vite is a new breed of frontend build tool that significantly improves the frontend development experience.

{% github vitejs/vite %}

### Photopea

[Photopea.com](http://photopea.com/) is a free online tool for editing raster and vector graphics with support for PSD, AI, and Sketch files.

{% github photopea/photopea %}

### You Don't Need GUI

Graphical user interfaces are super friendly to computer users. They were introduced in reaction to the perceived steep learning curve of command-line interfaces (CLIs).

{% github you-dont-need/You-Dont-Need-GUI %}

---

## dribbble shots

### Campus - Meetup App

![https://cdn.dribbble.com/users/1390816/screenshots/15456943/media/c75d0711256222e2d4c13c895052f1a6.jpg](https://cdn.dribbble.com/users/1390816/screenshots/15456943/media/c75d0711256222e2d4c13c895052f1a6.jpg)

by [Jabel](https://dribbble.com/shots/15456943-Campus-Meetup-App)

### Dompet - Wallet app design

![https://cdn.dribbble.com/users/4328335/screenshots/15456630/media/235128fb0489a375569911aa2423448a.png](https://cdn.dribbble.com/users/4328335/screenshots/15456630/media/235128fb0489a375569911aa2423448a.png)

by [voxy St](https://dribbble.com/shots/15456630-Dompet-Wallet-app-design)

### Job Finder App

![https://cdn.dribbble.com/users/2576266/screenshots/15453226/media/83afa19c2f42864287d0901fd16f682d.png](https://cdn.dribbble.com/users/2576266/screenshots/15453226/media/83afa19c2f42864287d0901fd16f682d.png)

by [Musmuliady Jahi](https://dribbble.com/shots/15453226-Job-Finder-App)

### Ven.

![https://cdn.dribbble.com/users/5324199/screenshots/15453649/media/9101ff21a8abe87effc5689033364ba2.png](https://cdn.dribbble.com/users/5324199/screenshots/15453649/media/9101ff21a8abe87effc5689033364ba2.png)

by [Bernice Johnson](https://dribbble.com/shots/15453649-Ven)

---

## Tweets

{% twitter 1379366024991158273 %}

{% twitter 1379784531117490183 %}

{% twitter 1379841205098311681 %}

{% twitter 1379890898369044483 %}

{% twitter 1380185344163807233 %}

---

## Picked Pens

### Smash to submit button

{% codepen https://codepen.io/aaroniker/pen/NWqyego %}

by [Aaron Iker](https://twitter.com/aaroniker_me)

### Cool Text

{% codepen https://codepen.io/cbanlawi/pen/MWbemYP %}

by Christine Banlawi

---

## Podcasts worth listening

### Hasty Treat - VSCode Extensions and Tips

In this Hasty Treat, Scott and Wes talk about their favorite VSCode extensions, tips, and workflows!

{% spotify spotify:episode:6xTUX9FkU4eZlpXBba22yH %}

### Cursors and Pointers

What do mouse pointers, potatoes, and your fingers have in common? They can all interact with a screen! With CSS we can define how active our web boxes are, which areas are interactive, and what style the cursor should be. Maybe that means your mouse arrow becomes an animated magic wand, or maybe not.

{% spotify spotify:episode:0A6JQDnxwTG9wRaSz2rCEU %}

### Front-End Monorepo

We talked about our transition to a monorepo back in episode 305. This move has all sorts of advantages for us, like the simplicity of having a single repo to pull and be up to date with and linting/formatting code in a consistent way across the entire code base of CodePen.

{% spotify spotify:episode:2Gvty2iJUEoxOvIxNz3Mes %}

---

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