Weekly Digest 44/2021
Tags: css, javascript, react, webdev
Published: 2021-11-07 20:56:35

Welcome to my Weekly Digest #44 which is the first one of November.

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

### **Use CSS Variables instead of React Context**

How and why you should use CSS variables (custom properties) for theming instead of React context.

[Use CSS Variables instead of React Context](https://epicreact.dev/css-variables/)

### Building a Store Locator in React using Algolia, Mapbox, and Twilio

This article completes our 3-part series on building a Store Locator.

[Building a Store Locator in React using Algolia, Mapbox, and Twilio - Part 1 | Algolia Blog](https://www.algolia.com/blog/engineering/building-a-store-locator-in-react-using-algolia-mapbox-and-twilio-part-1/)

### **How I made Google’s data grid scroll 10x faster with one line of CSS**

[How I made Google's data grid scroll 10x faster with one line of CSS](https://medium.com/@johan.isaksson/how-i-made-googles-data-grid-scroll-10x-faster-with-one-line-of-css-78cb1e8d9cb1)

---

## Some great videos I watched this week

### 7 Cryptography Concepts EVERY Developer Should Know

Cryptography is scary. In this tutorial, we get hands-on with Node.js to learn how common crypto concepts work, like hashing, encryption, signing, and more

{% youtube NuyzuNBFWxQ %}

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

### Introducing User Flows for Chrome DevTools & Lighthouse

Discover how Chrome DevTools, Lighthouse & Puppeteer can be used to record, replay and measure interactions beyond page load. This is a developer preview and we hope to refine these features over time. Learn more in the Chrome Dev Summit 2021 keynote.

{% youtube xL-tXZ8Z_qU %}

by [Addy Osmani](https://twitter.com/addyosmani)

### Random Grids

After coming across the super cool header/footer motif on [Josh Collinsworth's site](https://joshcollinsworth.com/) we set about re-creating the randomized grid there, only just doing it from scratch guessing how it might have been done.

{% youtube OZTgUG4jVOU %}

by [Chris Coyier](https://twitter.com/chriscoyier)

### React Router 6 - What Changed & Upgrading Guide

React Router v6 (stable!) was released and it's a great improvement over v5! This video covers all the important new features AND dives into selected example apps that will be updated from v5 to v6.

{% youtube zEQiNFAwDGo %}

by [Academind](https://twitter.com/academind_real)

---

## Useful GitHub repositories

### Leva

### React-first components GUI

A GUI you are going to lava. Customizable, extensible, and beautiful by default.

{% github pmndrs/leva %}

### **Ninja Keys**

Keyboard shortcuts interface for your website. Working with static HTML, Vanilla JS, Vue, React, Svelte.

{% github ssleptsov/ninja-keys %}

### **React Spectrum Libraries**

A collection of libraries and tools that help you build adaptive, accessible, and robust user experiences.

{% github adobe/react-spectrum %}

---

## dribbble shots

### **Task Manager**

![by [Julius Branding](https://dribbble.com/shots/16665747-Task-Manager-Mobile-App-Concept)](https://cdn.dribbble.com/users/7514969/screenshots/16665747/media/a80f692f960b19037dd32a25ff99e272.png)

by [Julius Branding](https://dribbble.com/shots/16665747-Task-Manager-Mobile-App-Concept)

### **Budget Management App**

![by [Basit A. khan](https://dribbble.com/shots/16804950-Budget-Management-App)](https://cdn.dribbble.com/users/1607758/screenshots/16804950/media/6549a2b3ce4888ae5a3ba361cfa57bad.jpg)

by [Basit A. khan](https://dribbble.com/shots/16804950-Budget-Management-App)

### **Finance Dashboard Design**

![by [Ilias Miah](https://dribbble.com/shots/16805455-Finance-Dashboard-Design)](https://cdn.dribbble.com/users/6973693/screenshots/16805455/media/219851795093f386fa209589d970406b.jpg)

by [Ilias Miah](https://dribbble.com/shots/16805455-Finance-Dashboard-Design)

---

## Tweets

{% twitter 1455995351110799360 %}

{% twitter 1455965656877207554 %}

{% twitter 1456267318221107203 %}

{% twitter 1456685701307592708 %}

{% twitter 1456945274983575556 %}

{% twitter 1457101763065044995 %}

---

## Picked Pens

### Draggable Spoop

{% codepen https://codepen.io/jh3y/pen/KKvXRov %}

by [Jhey](https://twitter.com/jh3yy)

### Full Screen Vertical Scroll Snap

{% codepen https://codepen.io/argyleink/pen/yLovWjz %}

by [Adam Argyle](https://twitter.com/argyleink)

### CSS resize: diagonal

{% codepen https://codepen.io/jh3y/pen/BadrNBX %}

by [Jhey](https://twitter.com/jh3yy)

---

## Podcasts worth listening

### Syntax – STUMP'D Interview Questions - CSS Edition

In this episode of Syntax, Scott and Wes are back with another edition of "Stump'd!" where they try to stump each other with interview questions.

{% spotify spotify:episode:6bPcoo1FVQLsgYJ4K2TPIB %}

### JavaScript Jabber –  D3 and Data Visualization

Ian Johnson is a former Google UX engineer and data visualization engineer with ObservableHQ building data visualizations with JavaScript.

{% spotify spotify:episode:1f90psZv5BcWfXNrCoHD1G %}

### Smashing Podcast – What is Astro? with Matthew Phillips

We’re talking about Astro. Will this modern static site builder launch you into the stratosphere? Drew McLellan talks to developer Matthew Phillips to find out.

{% spotify spotify:episode:5FS6bUssOi9AvzWfNu4OGg %}

---

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