Weekly Digest 22/2021 - Top of the Week
Tags: css, javascript, react, webdev
Published: 2021-06-06 17:01:19

Welcome to my Weekly Digest #22 of this year, which is the first one of June. Finally, summer has arrived ☀️

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

### Trigonometry in CSS and JavaScript

In this series of articles we’ll get an overview of trigonometry, understand how it can be useful, and delve into some creative applications in CSS and JavaScript.

[Trigonometry in CSS and JavaScript: Introduction to Trigonometry | Codrops](https://tympanus.net/codrops/2021/06/01/trigonometry-in-css-and-javascript-introduction-to-trigonometry/)

### A better segmented control

A few years ago, we built a segmented control component for the Lyft Product Language (LPL) design system. However, when we recently looked at our component adoption and usage metrics, we found very few teams actually used our segmented control when building products and features.

[A better segmented control](https://medium.com/tap-to-dismiss/a-better-segmented-control-9e662de2ef57)

### Creating a CLI tool with Node.js

In this article, you'll learn how to create a CLI tool using Node.js, test it, and then publish it on NPM.

[Creating a CLI tool with Node.js - LogRocket Blog](https://blog.logrocket.com/creating-a-cli-tool-with-node-js/)

### The Testing Trophy and Testing Classifications

How to interpret the testing trophy for optimal clarity

[The Testing Trophy and Testing Classifications](https://kentcdodds.com/blog/the-testing-trophy-and-testing-classifications)

---

## Some great videos I watched this week

### The option you want to enable beyond strict

strict (and its sub flag strictNullChecks) can really help prevent null and undefined errors in your runtime JavaScript. However, it doesn't defend against invalid array and object access.

{% youtube i751O3QFLQM %}

by [Basarat](https://twitter.com/basarat)

### Speed Up Jobs with npm ci

npm ci is a special command for installing node packages in a continuous integration environment. In this video I show Github Actions with npm ci in a JavaScript project, after showing npm i for the same code. I also talk about some of the differences of the command, and show some benchmarks as a project scales and adds more packages so you can know how useful it is in the real world.

{% youtube 2c7LlU0VOk0 %}

by [Jimmy Cleveland](https://twitter.com/JimmyDCleveland)

### Test-Driven Development

Test-Driven Development (TDD) is a proven prevent bugs and improve the quality of your code - and it's fun! Learn the fundamentals of JavaScript testing in this beginner's tutorial.

{% youtube Jv2uxzhPFl4 %}

by [Fireship](https://twitter.com/fireship_dev)

### VS Code tips: The Git: Auto stash setting

With auto stash enabled, VS Code automatically stashes changes on git pull and restore them once the pull completes.

{% youtube 33xT9l59F7I %}

by [Matt Bierner](https://twitter.com/mattbierner)

---

## Useful GitHub repositories

### NocoDB

Free & Open Source Airtable alternative. Turns any SQL database into a smart spreadsheet. Supports MySQL, Postgres, SQL server, MariaDB & SQLite.

{% github nocodb/nocodb %}

### utterances

A lightweight comments widget built on GitHub issues. Use GitHub issues for blog comments, wiki pages and more!

{% github utterance/utterances %}

### PhotoPrism

Open-Source Personal Photo Management. Say goodbye to solutions that force you to upload your visual memories to the cloud!

{% github photoprism/photoprism %}

---

## dribbble shots

### Task Management App

![https://cdn.dribbble.com/users/3040223/screenshots/15768337/media/6561c5d3cdd0f847d4490d0c6d4db62d.jpg](https://cdn.dribbble.com/users/3040223/screenshots/15768337/media/6561c5d3cdd0f847d4490d0c6d4db62d.jpg)

by [Rizqi Adi Surya](https://dribbble.com/shots/15768337-Task-Management-App)

### Spatu - Shoe Market App

![https://cdn.dribbble.com/users/6100873/screenshots/15762112/media/5764e283a3d0e8dc65d5ab36a21aec46.png](https://cdn.dribbble.com/users/6100873/screenshots/15762112/media/5764e283a3d0e8dc65d5ab36a21aec46.png)

by [Dhimas Rasyad](https://dribbble.com/shots/15762112-Spatu-Shoe-Market-App-Part-1)

### Smart Home Mobile App

![https://cdn.dribbble.com/users/5261465/screenshots/15769004/media/93275e6904fd4d2178c649e4c129a9a4.jpg](https://cdn.dribbble.com/users/5261465/screenshots/15769004/media/93275e6904fd4d2178c649e4c129a9a4.jpg)

by [Hira Riaz](https://dribbble.com/shots/15769004-Smart-Home-Mobile-App)

### My Orders

![https://cdn.dribbble.com/users/2530474/screenshots/15774402/media/a35825f3ca036cf620da5d7d8775edcb.png](https://cdn.dribbble.com/users/2530474/screenshots/15774402/media/a35825f3ca036cf620da5d7d8775edcb.png)

by [Wahab](https://dribbble.com/shots/15774402--My-Orders)

### Dario App

![https://cdn.dribbble.com/users/729161/screenshots/15790951/media/de3917c59cc6109b63a6de6fafbb6418.png](https://cdn.dribbble.com/users/729161/screenshots/15790951/media/de3917c59cc6109b63a6de6fafbb6418.png)

by [Ramon](https://dribbble.com/shots/15790951-Dario-App)

### NFT Marketplace Web Mobile

![https://cdn.dribbble.com/users/2302891/screenshots/15787927/media/70bf7a8a5b868a1d49cda8e697a37651.jpg](https://cdn.dribbble.com/users/2302891/screenshots/15787927/media/70bf7a8a5b868a1d49cda8e697a37651.jpg)

by [Adalahreza](https://dribbble.com/shots/15787927-NFT-Marketplace-Web-Mobile)

---

## Tweets

{% twitter 1399831015082926080 %}

{% twitter 1399762874382311430 %}

{% twitter 1400169824773414913 %}

{% twitter 1400743869034254336 %}

{% twitter 1400862177330933760 %}

---

## Picked Pens

### CSS morphing

{% codepen https://codepen.io/amit_sheen/pen/xxqYzvm %}

by [Amit Sheen](https://twitter.com/amit_sheen)

### Viewport gradient rotation

{% codepen https://codepen.io/hexagoncircle/pen/abJEeXL %}

by [Ryan Mulligan](https://twitter.com/hexagoncircle)

---

## Podcasts worth listening

### The CSS Podcast - Transitions

In this episode, it's all about transitions. What you can and can't transition its limits, and its superpowers. We'll finish up with ways to trigger transitions and a few tips and tricks.

{% spotify spotify:episode:4HyziUjpMt5HZ4mbVvBlDp %}

### 3 Minutes with Kent - Make your DB schema as restrictive as possible for easier migrations

{% spotify spotify:episode:4DO5bJhiTsa88BLkK43SHG %}

### Smashing Podcast - Why is my React app slow?

We’re talking about React performance. What factors slow our React apps down, and how can we fix it? Drew McLellan talks to expert Ivan Akulov to find out.

{% spotify spotify:episode:33MxVjHppe6QpR9ZkiqTWn %}

### Syntax - React + TypeScript

In this episode of Syntax, Scott and Wes talk about using React with Typescript — how to set it up, components, state, props, passing data, custom hooks, and more!

{% spotify spotify:episode:1HHYGdXJ3ccl7e1o3du1pE %}

---

## Tools and Resources

### Reactive Resume

A free and open source resume builder that’s built to make the mundane tasks of creating, updating and sharing your resume as easy as 1, 2, 3.

[Reactive Resume](http://rxresu.me)

---

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