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.
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!
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.
CSS Flexbox debugging tools | DevTools Tips
Tips on debugging CSS Flexbox with Chrome DevTools.
Useful GitHub repositories
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).
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.
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
- Download Installer
- Close all running audio applications
- 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
- Delete BlackHoleXch.driver by running
rm -R /Library/Audio/Plug-Ins/HAL/BlackHoleXch.driverNOTE: The directory is in/Librarynot…
*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…
dribbble shots
*Nursececlub Mobile App Design*
](https://res.cloudinary.com/practicaldev/image/fetch/s--Hj4bBVvj--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://cdn.dribbble.com/users/4859/screenshots/17467711/media/16ea8281b07d30ad7372aea98034fb46.png)
by Cuberto
*Tracking app*
](https://res.cloudinary.com/practicaldev/image/fetch/s--PShp8pIF--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://cdn.dribbble.com/users/2120552/screenshots/17458326/media/541cf7654f15ff81542196b9310c05d5.png)
*Vessel - Case Study*
](https://res.cloudinary.com/practicaldev/image/fetch/s--2th3dw7v--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://cdn.dribbble.com/users/1970462/screenshots/17399772/media/904f71207073e9b750226ff4e9987f01.png)
by RD Branding
Tweets
In JavaScript you can use the spread syntax to find what an emoji is made up of ✨05:30 AM - 08 Feb 2022
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
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
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! 👋
Top comments (0)