Weekly Digest 06/2022

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

*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

---

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.

by Leigh Halliday

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!

by Jack Herrington

Thinking on ways to solve SVG favicon

In today's GUI Challenge, @Adam Argyle
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.

by Google Chrome Developers

CSS Flexbox debugging tools | DevTools Tips

Tips on debugging CSS Flexbox with Chrome DevTools.

by Google Chrome Developers

---

Useful GitHub repositories

Gyroflow

Video stabilization using gyroscope data

gyroflow / gyroflow

Video stabilization using gyroscope data

Video stabilization using gyroscope data

Homepage • Download • Documentation • Discord • Report bug • Request feature

About the project

Gyroflow is an application that can stabilize your video by using motion data from a gyroscope and optionally an accelerometer. Modern cameras record that data internally (GoPro, Sony, Insta360 etc), and this application stabilizes the captured footage precisely by using them. It can also use gyro data from an external source (eg. from Betaflight blackbox).

Trailer / results video

Features

• Real time preview, params adjustments and all calculations
• GPU processing and rendering
• Fully multi-threaded
• Rolling shutter correction
• Supports already stabilized GoPro videos (captured with Hypersmooth enabled) (Hero 8 and up)
• Supports and renders 10-bit videos (and higher, up to 16-bit 4:4:4, direct YUV rendering with no data loss - no conversion to RGB)
• Visual chart with gyro data (can display gyro, accel, magnetometer and quaternions)
• Visual display of smoothed…

View on GitHub

*BlackHole*

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

ExistentialAudio / BlackHole

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

BlackHole: Virtual Audio Driver

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

Download Installer

Funding

Sponsor: https://github.com/sponsors/ExistentialAudio

Table of Contents

• Features
• Installation Instructions
• Uninstallation Instructions
• Guides
• Advanced Customization and Installation
• Feature Requests
• FAQ
• Wiki

Features

• Supports 2, 16 or 64 audio channels versions.
• Customizable to 256+ audio channels.
• Supports 44.1kHz, 48kHz, 88.2kHz, 96kHz, 176.4kHz, and 192kHz sample rates.
• No driver latency.
• Compatible with macOS Mavericks (10.9) to macOS Big Sur (11).
• Built for Intel and Apple Silicon.

Installation Instructions

Option 1: Download Installer

1. Download Installer
2. Close all running audio applications
3. Open and install package

Option 2: Install via Homebrew:

• 2ch: brew install blackhole-2ch
• 16ch: brew install blackhole-16ch

Uninstallation Instructions

Option 1: Use Uninstaller

• Download BlackHole2ch Uninstaller
• Download BlackHole16ch Uninstaller

Option 2: Manually Uninstall

1. Delete BlackHoleXch.driver by running rm -R /Library/Audio/Plug-Ins/HAL/BlackHoleXch.driver NOTE: The directory is in /Library not…

View on GitHub

*cheat*

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

cheat / cheat

cheat allows you to create and view interactive cheatsheets on the command-line. It was designed to help remind *nix system administrators of options for commands that they use frequently, but not frequently enough to remember.

cheat

cheat allows you to create and view interactive cheatsheets on the command-line. It was designed to help remind *nix system administrators of options for commands that they use frequently, but not frequently enough to remember.

Use cheat with cheatsheets.

Example

The next time you're forced to disarm a nuclear weapon without consulting Google, you may run:

cheat tar

You will be presented with a cheatsheet resembling the following:

# To extract an uncompressed archive:
tar -xvf '/path/to/foo.tar'

# To extract a .gz archive:
tar -xzvf '/path/to/foo.tgz'

# To create a .gz archive:
tar -czvf '/path/to/foo.tgz' '/path/to/foo/'

# To extract a .bz2 archive:
tar -xjvf '/path/to/foo.tgz'

# To create a .bz2 archive:
tar -cjvf '/path/to/foo.tgz' '/path/to/foo/'

Installing

cheat has no dependencies. To install it, download the executable from the releases page and place it on…

View on GitHub

---

dribbble shots

*Nursececlub Mobile App Design*

by Cuberto

*Tracking app*

by Bogdan Ostafiiv

*Vessel - Case Study*

by RD Branding

---

Tweets

Minko Gechev

@mgechev

In JavaScript you can use the spread syntax to find what an emoji is made up of ✨

05:30 AM - 08 Feb 2022

Ruy Adorno

@ruyadorno

A new @nodejs 17.5.0 (Current) release is out! 🥳

⬢ What's new?
- Adds `fetch` behind the `--experimental-fetch` flag
- Unflags JSON modules
- And much, much more from our awesome cast of contributors ❤️

⬇️ Get it now:
$ nvm install 17.5.0

nodejs.org/en/blog/releas…

18:51 PM - 10 Feb 2022

ESLint

@geteslint

We've been working on a new website and you're invited to try out the preview!

new.eslint.org

Let us know if you find any problems:

github.com/eslint/new.esl…

21:25 PM - 10 Feb 2022

Stefan Judis

@stefanjudis

I'm fiddling with my website this evening.

Priority 1️⃣: finding the best image to place in the console. 🙈

(Chromium only though)

19:20 PM - 12 Feb 2022

---

Picked Pens

React Number Range Slider

by Jhey

With Love

by Paulina Hetman

Jello Stretchy

by Pete Barr

---

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?

---

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