Weekly Digest 06/2022
Tags: javascript, webdev, react, css
Published: 2022-02-13 20:17:29

Welcome to my Weekly Digest #6.

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

### **Building like it's 1984: A comprehensive guide to creating intuitive context menus**

Context menus have existed for decades, from macOS to Windows, from Xerox Parc to the web. They’re a widely understood user interface concept, but many new apps still fail to deliver them at the standard users have come to expect.

[Building like it's 1984: A comprehensive guide to creating intuitive context menus - Height](https://height.app/blog/guide-to-build-context-menus)

### ****A Whistle-Stop Tour of 4 New CSS Color Features****

There are many new and upcoming ways to define CSS color. Four new features include Display-P3, LCH, LAB, and HWB. Let's preview them together.

[A Preview of 4 New CSS Color Features | CSS-Tricks](https://css-tricks.com/new-css-color-features-preview/)

---

## Some great videos I watched this week

### **Validating user input with Zod**

In this video we use Zod to validate incoming user data sent to an API route in Next.js.

{% youtube _K34O0NcKAM %}

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

### **Mastering React Memo**

`React.memo`, `useMemo`, `useCallback`, should you use them? When should you use them? Let's improve your React coding skills right now!

{% youtube DEPwA3mv_R8 %}

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

### **Thinking on ways to solve SVG favicon**

In today's GUI Challenge, [@Adam Argyle](https://www.youtube.com/channel/UCBGr3ZMcV5jke40_Wrv3fNA)
 shares thinking on a way to build an adaptive favicon with SVG. SVG not only delivers an infinitely scalable icon, it also allows inlining styles that can hook into CSS media queries like the light and dark preference queries.

{% youtube 4pJahmCR8kQ %}

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

### **CSS Flexbox debugging tools | DevTools Tips**

Tips on debugging CSS Flexbox with Chrome DevTools.

{% youtube J5n2aS37rpE %}

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

---

## Useful GitHub repositories

### Gyroflow

Video stabilization using gyroscope data

{% github gyroflow/gyroflow %}

### ****BlackHole****

BlackHole is a modern macOS virtual audio driver that allows applications to pass audio to other applications with zero additional latency.

{% github ExistentialAudio/BlackHole %}

### ****cheat****

cheat allows you to create and view interactive cheatsheets on the command line.

{% github cheat/cheat %}

---

## dribbble shots

### ****Nursececlub Mobile App Design****

![by [Cuberto](https://dribbble.com/shots/17467711-Nursececlub-Mobile-App-Design)](https://cdn.dribbble.com/users/4859/screenshots/17467711/media/16ea8281b07d30ad7372aea98034fb46.png)

by [Cuberto](https://dribbble.com/shots/17467711-Nursececlub-Mobile-App-Design)

### ****Tracking app****

![by [Bogdan Ostafiiv](https://dribbble.com/shots/17458326-Tracking-app)](https://cdn.dribbble.com/users/2120552/screenshots/17458326/media/541cf7654f15ff81542196b9310c05d5.png)

by [Bogdan Ostafiiv](https://dribbble.com/shots/17458326-Tracking-app)

### ****Vessel - Case Study****

![by [RD Branding](https://dribbble.com/shots/17399772-Vessel-Case-Study)](https://cdn.dribbble.com/users/1970462/screenshots/17399772/media/904f71207073e9b750226ff4e9987f01.png)

by [RD Branding](https://dribbble.com/shots/17399772-Vessel-Case-Study)

---

## Tweets

{% twitter 1490920854313648128 %}

{% twitter 1491847226662043649 %}

{% twitter 1491886169096917002 %}

{% twitter 1492579323202895873 %}

---

## Picked Pens

### React Number Range Slider

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

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

### With Love

{% codepen https://codepen.io/pehaa/pen/wvPgboY %}

by [Paulina Hetman](https://twitter.com/pehaa)

### Jello Stretchy

{% codepen https://codepen.io/petebarr/pen/LYzBoeg %}

by [Pete Barr](https://twitter.com/petebarr)

---

## Podcasts worth listening

### Syntax – **Creator of Wordle - Josh Wardle**

In this episode of Syntax, Wes and Scott talk with the creator of Wordle, Josh Wardle. What's the tech stack for Wordle? Does he care about the clones of Wordle? And how did selling Wordle work?

{% spotify spotify:episode:4wpsgfXprwWN4QzyaDkX3Z %}

---

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