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
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
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
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.
π§π§ 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>
)
}
NOTE: Using Leva with React 18 will cause a console error about createRoot which you can safely ignore, or fix by following the instructions here: discussion
Documentation
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 shortcut interface for your website that works with Vanilla JS, Vue, and React.
Demo
https://ninja-keys-demo.vercel.app/
Motivation
A lot of applications support a common pattern where the user hits β+k (or ctrl+k) and a search UI dialog appears. I've recently seen this in Notion, Slack, Linear, Vercel and Algolia, but I'm sure there are plenty more. Apple Spotlight, Alfred and the Raycast app also have a similar pattern, but with different shortcuts. There are already some libraries built for this, but they are too framework specific, like Laravel only or React only Nevertheless, mine is not a silver bullet and if you need more framework integration, check them out too.
I needed a keyboard interface for navigation with static websites without any frameworks At the same time, I have a few Vue projects where something like this could be useful, so I decidedβ¦
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.
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.
React Aria
A library of unstyled React components and hooks that helps you build accessible, high quality UI components for your application or design system.
React Stately
A library of React Hooks that provides cross-platform state management for your design system.
More information about React Stately
Internationalized
A collection of framework-agnostic internationalization libraries for the web.
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β¦
dribbble shots
Task Manager
Budget Management App
Finance Dashboard Design
by Ilias Miah
Tweets
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.
Thank you for reading, talk to you next week, and stay safe! π
Top comments (2)
Thank you mentioning my tweet in your article βΊοΈπππΉπΉ
You are very welcome Nazanin