Weekly Digest 44/2021

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.

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

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

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

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

by Fireship

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.

by Addy Osmani

Random Grids

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

by Chris Coyier

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.

by Academind

Useful GitHub repositories

Leva

React-first components GUI

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

pmndrs / leva

🌋 React-first components GUI

A GUI you are going to lava.

Customizable, extensible and beautiful by default.

Storybook

_{by Poimandres}

🚧🚧 This repo is under heavy development 🚧🚧

Features

⭐️ Beautiful by default
🎚 More than 12 different kinds of inputs available
🧐 Smart input type recognition
🔌 Easy-to-make plugins
✅ Keyboard accessible
⚡️ No setup necessary

Installation

npm i leva

Quick start

Simply call the useControls hook from anywhere in your app:

import { useControls } from "leva"

function MyComponent() {
  const { name, aNumber } = useControls({ name: "World", aNumber: 0 })
  
  return <div>Hey {name}, hello! {aNumber}</div>
}

Documentation

Contributors ✨

Thanks goes to these wonderful people (emoji key):

_{Andrew Prifer}

🤔

💻

_Aria

🤔

_David

…

View on GitHub

Ninja Keys

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

ssleptsov / ninja-keys

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

Ninja Keys

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

Demo

https://ninja-keys-demo.vercel.app/

Motivation

A lot of applications support that pattern, user hit ⌘+k (or ctrl+k) and search UI dialog appear I've seen recently in Notion, Slack, Linear, Vercel and Algolia, but I'm sure there are plenty more Also, there is a Apple Spotlight, Alfred and Raycast app that using this pattern too but different shortcuts There are already some libraries but they are too framework specific, like Laravel only or React only Althought, mine is not a silver bullet and if you need more framework integration, check them out too.

I was needed an keyboard interface for navigation for static website without any frameworks In same time I have a few vue projects where it can be useful too. So I decided to give first shot for Web Components and Lit…

View on GitHub

React Spectrum Libraries

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

adobe / react-spectrum

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

React Spectrum Libraries

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

React Spectrum

A React implementation of Spectrum, Adobe’s design system. Spectrum provides adaptive, accessible, and cohesive experiences for all Adobe applications.

Explore React Spectrum

React Aria

A library of React Hooks that provides accessible UI primitives for your design system.

Learn more about React Aria

React Stately

A library of React Hooks that provides cross-platform state management for your design system.

More information about React Stately

Features

♿️ Accessible – Accessibility and behavior is implemented according to WAI-ARIA Authoring Practices, including full screen reader and keyboard navigation support. All components have been tested across a wide variety of screen readers and devices to ensure the best experience possible for all users.
📱 Adaptive – All components are designed to work with mouse, touch, and keyboard interactions. They’re built with responsive…

View on GitHub

dribbble shots

Tweets

Remix 💿

@remix_run

📣 React Router v6 is here! 👀

• Automatic layout handling with nested routes 🐣
• Route ranking 📊
• Relative routing and links ⛓
• Completely rewritten with React hooks 🎣
• Over 50% smaller than v5 📉

Read the blog post NOW 👇
remix.run/blog/react-rou…

20:28 PM - 03 Nov 2021

Chrome Developers

@chromiumdev

“You had me at #ChromeDevSummit” 💞

Catch the recap 📺 👉 goo.gle/cds2021

18:30 PM - 03 Nov 2021

Chris Coyier

@chriscoyier

hey mom that dumb website i started in your basement now has half a million twitter followers.

14:29 PM - 04 Nov 2021

Shreya

@eyeshreya

9 HTTP Status codes you should be knowing as a developer 👇🏼:

🟢 200 - OK
🚸 307 - Temporary redirect
↗️ 308 - Permanent redirect
😵 403 - Forbidden
🔴 404 - Not Found
☠️ 410 - Gone
🟡 500 - Server error
🚧 502 - Bad Gateway
😶 503 - Unavailable (retry)

18:11 PM - 05 Nov 2021

Nazanin Ashrafi

@nazanin_ashrafi

I don't know if neumorphism is still in trend but I like it

So here's how to make it :

11:23 AM - 06 Nov 2021

Stefan Judis

@stefanjudis

Last week we released avif support at @contentful. So good to save some more bytes on the wire. 💪

21:45 PM - 06 Nov 2021

Picked Pens

Draggable Spoop

by Jhey

Full Screen Vertical Scroll Snap

by Adam Argyle

CSS resize: diagonal

by Jhey

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.

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.

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.