DEV Community

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

Posted on

Weekly Digest 16/2022

Welcome to my Weekly Digest #16 which is the last one in April.

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

Node.js 18 Introduces Prefix-Only Core Modules

Node.js 18 is introducing a new type of core module that can't be imported like all of the other core modules. These new modules are called prefix-only core modules, and you need to understand how they work.

Node.js 18 Introduces Prefix-Only Core Modules

SVG passthrough precision

If an SVG is imported into a design tool, then immediately exported as another SVG, how much precision is kept? What’s added, removed, or altered?

SVG passthrough precision


Some great videos I watched this week

Redux in 100 Seconds

Redux is a popular state management pattern for large-scale web applications. Learn the basics of the Redux with React

by Fireship

Chrome 101 - What’s New in DevTools

Import and export user flow as JSON, support hwb() colors, view cascade layers in the Styles pane, and more.

by Google Chrome Developers

Generate Dynamic Images with node-canvas

Creating dynamic images unlocks a whole world of powerful workflows. In this episode, Ulf Schwekendiek will teach us how to use node-canvas to create our own custom, dynamically generated images.

by Jason Lengstorf


Useful GitHub repositories

react-intersection-observer

React implementation of the Intersection Observer API to tell you when an element enters or leaves the viewport.

GitHub logo thebuilder / react-intersection-observer

React implementation of the Intersection Observer API to tell you when an element enters or leaves the viewport.

react-intersection-observer

Version Badge GZipped size Test License Downloads

React implementation of the Intersection Observer API to tell you when an element enters or leaves the viewport. Contains both a Hooks, render props and plain children implementation.

Storybook Demo: https://react-intersection-observer.vercel.app

Features

  • 🪝 Hooks or Component API - With useInView it's easier than ever to monitor elements
  • ⚡️ Optimized performance - Reuses Intersection Observer instances where possible
  • ⚙️ Matches native API - Intuitive to use
  • 🛠 Written in TypeScript - It'll fit right into your existing TypeScript project
  • 🧪 Ready to test - Mocks the Intersection Observer for easy testing with Jest
  • 🌳 Tree-shakeable - Only include the parts you use
  • 💥 Tiny bundle - Around ~1.15kB for useInView and ~1.6kB for <InView>

Installation

Install using Yarn:

yarn add react-intersection-observer
Enter fullscreen mode Exit fullscreen mode

or NPM:

npm install react-intersection-observer --save
Enter fullscreen mode Exit fullscreen mode

Usage

useInView hook

// Use object destructing, so you don't need to remember the exact order
const { ref, inView,
Enter fullscreen mode Exit fullscreen mode

JSON Visio

Visualize your JSON data onto graphs seamlessly.

GitHub logo AykutSarac / jsonvisio.com

🧩 Visualize your JSON data onto graphs seamlessly.

travis ci badge license badge open collective badge version badge

Simple json visualization tool for your data.

preview 1

Support JSON Visio

JSON Visio - Simple visualization tool for your JSON data. | Product Hunt Become_a_patron

JSON Visio (jsonvisio.com)

JSON Visio is data visualization tool for your json data which seamlessly illustrates your data on graphs without having to restructure anything, paste directly or import file.

JSON Visio - Directly onto graphs

⚡️ Features

  • Advanced Error Message
  • Search Nodes
  • Save JSON locally
  • Multiple layout direction support
  • Compressed view
  • Representative colors for arrays & keys
  • Friendly UI
  • Light/Dark Mode

🧩 Preview

preview 1

🛠 Development Setup

  npm install
  npm run dev
Enter fullscreen mode Exit fullscreen mode

License

This project is open source and available under the MIT License.




Alfred Password Workflow

An Alfred 4 workflow that allows you to quickly generate strong passwords.

GitHub logo otherguy / alfred-passwords-workflow

An Alfred 4 workflow that allows you to quickly generate strong passwords.

Generate Passwords Workflow 🔐 for Alfred 4

Latest Version Downloads Issues Code Climate technical debt Code Climate maintainability MIT License

A workflow for Alfred 4 that helps you to quickly and securely generate random passwords of any given length.

By default, it generates both an alphanumeric password and a strong password, containing special characters. As a bonus, it also generates XKCD passwords with both 3 and 4 words.

Selecting the generated password in Alfred copies it to the clipboard.

Example Screencast

The latest version can also be found on:

Installation

Download the latest version of the GenereratePasswords.alfredworkflow from the Releases page and double click the downloaded file to install it.

The workflow supports automatic updates and will perform daily update checks.

Caveats and Requirements

This workflow requires Alfred 4.

Usage

The default keyword is pw. The first and only parameter is the desired password length, defaulting to 20.

When hitting ⏎ Return on a selected item, the generated password…


dribbble shots

Séjour app

by [Taras Migulko](https://dribbble.com/shots/18078164-S-jour-app)

by Taras Migulko

Online learning (LMS) Dashboard

by [Reza Moradi](https://dribbble.com/shots/18088448-Online-learning-LMS-Dashboard)

by Reza Moradi

Surfing App

by [Imran Molla](https://dribbble.com/shots/18088373-Surfing-App)

by Imran Molla

Troovē - Travel Mobile App

by [Ihya Fathurr](https://dribbble.com/shots/18086820-Troov-Travel-Mobile-App)

by Ihya Fathurr


Tweets


Picked Pens

point and click penguin

by Masahito Leo Takeuchi

Pure CSS - Lava Lamp

by maxi83c


Podcasts worth listening

CodePen Radio – *Varun Vachhar*

Chris got to talk to Varun! Varun is an incredible artist and would have been interesting to talk with him about literally anything


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

Discussion (0)