Weekly Digest 42/2021
Tags: css, javascript, react, webdev
Published: 2021-10-24 18:44:38

Welcome to my Weekly Digest #42.

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

### Building an awesome image loading experience

How Unsplash's blurred image loading works and why I did mine differently for a more excellent experience on my site.

[Building an awesome image loading experience](https://kentcdodds.com/blog/building-an-awesome-image-loading-experience)

### Respecting Users’ Motion Preferences

The `prefers-reduced-motion` media query has excellent support in all modern browsers going back a couple of years. In this article, Michelle Barker explains why there’s no reason not to use it today to make your sites more accessible.

[Respecting Users' Motion Preferences - Smashing Magazine](https://www.smashingmagazine.com/2021/10/respecting-users-motion-preferences/)

### **Evaluating Clever CSS Solutions**

Tips, tricks and tutorials on the web’s most beautiful language.

[CSS { In Real Life } | Evaluating Clever CSS Solutions](https://css-irl.info/evaluating-clever-css-solutions/)

## Some great videos I watched this week

### Auth0 in 100 Seconds

Auth0 is Authentication-as-a-Service used to manage the front door to your application. It provides drop-in user auth solutions that look great on any frontend app, and integrate with any backend server.

{% youtube yufqeJLP1rI %}

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

### VS Code tips: The Color Highlight extension

Today's VS Code extension: Color Highlight
See prominent previews of CSS style colors in your code. You can also configure how the colors are displayed.

{% youtube E-Kc9qG7DzY %}

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

### New in Chrome 95: URLPattern, the Eye Dropper API, new origin trials, and more!

Chrome 95 is rolling out now! Routing gets easier with URLPattern baked into the browser, the Eye Dropper API provides a built-in tool for selecting colors, there’s a new origin trial that allows you to opt in to receiving the reduced UA string now, and there’s plenty more.

{% youtube Qq4rRt8BNjM %}

by [Google Chrome Developers](https://twitter.com/ChromiumDev)

### Subgrid is All About Inheriting Grid Lines

Maybe that's the best way to understand subgrid: it's an opportunity for you to tell a child element of an existing grid to use the grid lines from the parent element for its rows and/or columns.

{% youtube He8l1inguZM %}

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

### Create a Secure REST API with NodeJS and Express

In this video, Vincent is going to be showing you how to create a secure REST API with Node.js and Express.

{% youtube mX6IoTXpopw %}

[by Vincent Lab](https://twitter.com/VLabStudio)

## Useful GitHub repositories

### **YoHa**

A practical hand tracking engine.

{% github handtracking-io/yoha %}

[GitHub - handtracking-io/yoha: A practical hand tracking engine.](https://github.com/handtracking-io/yoha)

### **Just**

A library of dependency-free JavaScript functions that do just do one thing.

{% github angus-c/just %}

### **Uptime Kuma**

It is a self-hosted monitoring tool like "Uptime Robot".

{% github louislam/uptime-kuma %}

### browsh

A fully interactive, real-time, and modern text-based browser rendered to TTYs and browsers

{% github browsh-org/browsh %}

## dribbble shots

### **Photographer portfolio**

![https://cdn.dribbble.com/users/1691367/screenshots/16711496/media/e43a2be2f7ec8343a9d64a2f9d476cfa.png](https://cdn.dribbble.com/users/1691367/screenshots/16711496/media/e43a2be2f7ec8343a9d64a2f9d476cfa.png)

by [Hasibur Rahman](https://dribbble.com/shots/16711496-Photographer-portfolio)

### **Pre-order time**

![https://cdn.dribbble.com/users/2990466/screenshots/16711536/media/89a5498c9bd80134bf9abb0a462c1ab8.png](https://cdn.dribbble.com/users/2990466/screenshots/16711536/media/89a5498c9bd80134bf9abb0a462c1ab8.png)

by [Sepide Moqadasi](https://dribbble.com/shots/16711536-Pre-order-time-Shoplon-Style-guide-Typography)

### **Botole**

![https://cdn.dribbble.com/users/4621751/screenshots/16715980/media/f6205c8389d85769de2fac2a69edc053.jpg](https://cdn.dribbble.com/users/4621751/screenshots/16715980/media/f6205c8389d85769de2fac2a69edc053.jpg)

by [Suzauddoula Bappy](https://dribbble.com/shots/16715980-Botole-Product-Website-Design)

### **.Furtur**

![https://cdn.dribbble.com/users/3885607/screenshots/16716061/media/6ce686e9d40c589584ec06b69dd2eba9.png](https://cdn.dribbble.com/users/3885607/screenshots/16716061/media/6ce686e9d40c589584ec06b69dd2eba9.png)

by [Arla Sifhana Putri](https://dribbble.com/shots/16716061--Furtur-Furniture-Landing-Page)

## Tweets

{% twitter 1449378345007808520 %}

{% twitter 1450310361832312838 %}

{% twitter 1450494485889159173 %}

{% twitter 1450318336991059969 %}

{% twitter 1450798991633833992 %}

## Picked Pens

### Keep on Stackin'

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

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

### Fluid Toggle

{% codepen https://codepen.io/aaroniker/pen/rNzLwZL %}

by [Aaron Iker](https://twitter.com/aaroniker_me)

## Podcasts worth listening

### Syntax – Handy Utility Functions with Just

In this Hasty Treat, Scott and Wes talk about handy utility functions with Just!

{% spotify spotify:episode:2wl54pP9lxxXiFDCDBdN3y %}

### Call with Kent – Magic links require timely email delivery

When relying solely on passwordless magic links for signing users into your application, you make the timely delivery of these links to people's inboxes a critical dependency for using your app.

{% spotify spotify:episode:29TwPzPH6RsydXiz6JHsSI %}

### Smashing Magazine – What is DevOps?

We’re talking about DevOps. What is it, and is it a string to add to your web development bow? Drew McLellan talks to expert Jeff Smith to find out.

{% spotify spotify:episode:5aLl5pZrjwjTvqkJ9s9iPw %}

### Call with Kent – Why XState?

Knt is using XState on his new website. Why and how does he use it? Are there any best practices and pitfalls?

{% spotify spotify:episode:5jkdU01QSolQMbW2YcwCp2 %}

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