DEV Community

Cover image for Weekly Digest 06/2022
Marco Biedermann
Marco Biedermann

Posted on • Updated on

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

GitHub logo gyroflow / gyroflow

Video stabilization using gyroscope data

Gyroflow logo Gyroflow logo

Video stabilization using gyroscope data

HomepageDownloadDocumentationDiscordReport bugRequest feature

Downloads Contributors Issues License

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

Screenshot

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…

*BlackHole*

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

GitHub logo 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

Platform:macOS GitHub GitHub Build Status Twitter Facebook

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

  • 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.

Image of BlackHole Audio Driver

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

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…

*cheat*

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

GitHub logo 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.

Workflow status

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.

The obligatory xkcd

Use cheat with cheatsheets.

Example

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

cheat tar
Enter fullscreen mode Exit fullscreen mode

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/'
Enter fullscreen mode Exit fullscreen mode

Installing

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


dribbble shots

*Nursececlub Mobile App Design*

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

by Cuberto

*Tracking app*

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

by Bogdan Ostafiiv

*Vessel - Case Study*

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

by RD Branding


Tweets


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! 👋

Discussion (0)