Weekly Digest 23/2022
Tags: webdev, javascript, react, weeklyretro
Published: 2022-06-12 19:32:35

Welcome to my Weekly Digest #23.

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

### Better scrolling through modern CSS

There's more to scrollbars than you might expect

[Better scrolling through modern CSS](https://blog.mayank.co/better-scrolling-through-modern-css)

### How to pick the least wrong colors

**An algorithm for creating color palettes for data visualization**

[How to pick the least wrong colors](https://matthewstrom.com/writing/how-to-pick-the-least-wrong-colors)

### **Monorepos in JavaScript & TypeScript**

This is a comprehensive tutorial on Monorepos in JavaScript/TypeScript --- which is using state of the art tools for these kind of architectures in frontend applications.

[Monorepos in JavaScript & TypeScript](https://www.robinwieruch.de/javascript-monorepos/)

---

## Some great videos I watched this week

### Redwood in 100 Seconds

RedwoodJS is a full-stack JavaScript framework that combines the power of React, GraphQL, and Prisma into a single package. It is used to build serverless web applications with a relational SQL database for the storage layer.

{% youtube o5Mwa_TJ3HM %}

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

### New in Chrome 102: PWAs as File Handlers, inert, the navigation API, and more!

Chrome 102 is rolling out now! Installed PWAs can register as file handlers, making it easy for users to open files directly from disk. The inert attribute allows you to mark parts of the DOM as inert. The navigation API makes it easier for single-page apps to handle navigation and updates to the URL.

{% youtube AGyP85QEBzY %}

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

### Lerna 5 Walkthrough

A quick walkthrough of the latest release of Lerna 5 on an example repository with a Remix application and a couple of libraries. We're going to see how to set up Lerna, make tasks running in Lerna extremely fast (powered by Nx), and how to publish packages to an npm registry.

{% youtube WgO5iG57jeQ %}

by [Nrwl](https://twitter.com/nrwl_io)

### Why Vitest Is Better Than Jest

Vitest is a simple testing library built on top of Vite which takes everything I love about Jest and brings it to the modern age of JavaScript. Everyone that has worked with Jest knows how much of a pain it is to work with ES modules, but Vitest makes it trivial. Vitest also adds many additional features and quality of life changes that make it better than Jest in my opinion.

{% youtube 7f-71kYhK00 %}

by [Web Dev Simplified](https://twitter.com/DevSimplified)

---

## Useful GitHub repositories

### Can I DevTools

Can I DevTools is like Can I Use but for the browser devtools.

{% github pankajparashar/canidev.tools %}

### DALL·E

PyTorch package for the discrete VAE used for DALL·E.

{% github openai/DALL-E %}

### 1LOC

What's your favorite JavaScript single LOC (line of code)?

{% github 1milligram/1loc %}

---

## dribbble shots

### Travel Mobile App

![by [Wahab](https://dribbble.com/shots/18462387--Travel-Mobile-App)](https://cdn.dribbble.com/userupload/2852301/file/original-b130c5174f2ea1100638156cc0bb17d1.png)

by [Wahab](https://dribbble.com/shots/18462387--Travel-Mobile-App)

### Task Management App

![by [Rakib Kowshar](https://dribbble.com/shots/18468605-Task-Management-App)](https://cdn.dribbble.com/userupload/2865454/file/original-513a0907bdaa6189fcfa803ea0cf32ab.jpg)

by [Rakib Kowshar](https://dribbble.com/shots/18468605-Task-Management-App)

### Plant Shop Mobile App Design

![by [Mahmudul Hasan](https://dribbble.com/shots/18468647-Plant-Shop-Mobile-App-Design)](https://cdn.dribbble.com/users/7245559/screenshots/18468647/media/364c5213b8aabb2a1883c62aa6ef742d.png)

by [Mahmudul Hasan](https://dribbble.com/shots/18468647-Plant-Shop-Mobile-App-Design)

---

## Tweets

{% twitter 1533429614194077696 %}

{% twitter 1533499641857290252 %}

{% twitter 1534448878120013824 %}

{% twitter 1534862835871801355 %}

{% twitter 1534847569234477057 %}

---

## Picked Pens

### Configurable `<input type="range" mode="circular"/>`

{% codepen https://codepen.io/jh3y/pen/XWZERKL %}

by [Jhey](https://twitter.com/jh3yy)

---

## Podcasts worth listening

### Syntax – **Syntax Live at Reactathon**

In this episode of Syntax, Wes and Scott are live from Reactathon 2022!

{% spotify spotify:episode:0a19OxwdBQDfTT5JDYQnkJ %}

---

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