Weekly Digest 51/2021
Tags: css, javascript, react, webdev
Published: 2021-12-26 19:51:26

Welcome to my Weekly Digest #51, which is almost the last one for this year.

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

### How to use Storybook with ESLint

Automatically validate stories in your code editor

[How to use Storybook with ESLint](https://medium.com/storybookjs/how-to-use-storybook-with-eslint-e7f620a4d2c1)

### The many methods for using SVG icons

Recently at work, Chen ran into a situation where we had to revisit how SVG icons were being implemented on our pages.

[The many methods for using SVG icons](https://chenhuijing.com/blog/the-many-methods-for-using-svg-icons)

---

## Some great videos I watched this week

### Scroll Down to Start Playing Video

It's gotta be fairly easy to play an HTML video when you scroll down to it, right? We kinda knew IntersectionObserver is the right API here, for performance reasons, but this use case is super well served by it and it's quite easy to use. We also handle the prefers-reduced-motion case here.

{% youtube mV4tnQkqhmI %}

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

### Solve subarray problems faster

There are many algorithms that come up frequently in coding interviews, with Sliding Windows being one of the most popular.

{% youtube GcW4mgmgSbw %}

by [Byte by Byte](https://twitter.com/ByteByByteBlog)

### Responsive images & art direction

Welcome back to Designing in the Browser with Developer Relations Engineer, Una Kravets. In this episode, we will learn all about responsive images and art direction, including how to optimize your art for size and layout.

{% youtube KBQz1OSpRv8 %}

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

### Speed up inputs with useDeferredValue

React 18 RC introduces a number of concurrent features thru new hooks: `useDeferredValue`, `startTransition`, and `useTransition`. In this video, Chantastic explores a simple `useDeferredValue` example and shares some transition gotchas.

{% youtube Piq_MYrodt0 %}

by [chantastic](https://twitter.com/chantastic)

---

## Useful GitHub repositories

### ML YouTube Courses

A repository to index and organize the latest machine learning courses found on YouTube.

{% github dair-ai/ML-YouTube-Courses %}

### Bulletproof React

A simple, scalable, and powerful architecture for building production-ready React applications.

{% github alan2207/bulletproof-react %}

### **UnoCSS**

The instant on-demand atomic CSS engine.

{% github antfu/unocss %}

---

## dribbble shots

### Orizon Bank App

![by [Rakib Kowshar](https://dribbble.com/shots/17138964-Orizon-Bank-App)](https://cdn.dribbble.com/users/3416941/screenshots/17138964/media/b3f2b8960657fa788a13e255a4f89644.jpg)

by [Rakib Kowshar](https://dribbble.com/shots/17138964-Orizon-Bank-App)

### Plant Shop Mobile App

![by [Fauzan Ardhiansyah](https://dribbble.com/shots/17136610-Ijo-ijo-Plant-Shop-Mobile-App)](https://cdn.dribbble.com/users/3036385/screenshots/17136610/media/2bf60a118bdbdb59c184616c56e28c2f.png)

by [Fauzan Ardhiansyah](https://dribbble.com/shots/17136610-Ijo-ijo-Plant-Shop-Mobile-App)

### Weather & Forecast Landing

![by [Yasir Ahmad Noori](https://dribbble.com/shots/17137313-Weather-Forecast-Landing-Web-Design)](https://cdn.dribbble.com/users/3894633/screenshots/17137313/media/43ed59c182722b28bcb398b9ac6e671c.png)

by [Yasir Ahmad Noori](https://dribbble.com/shots/17137313-Weather-Forecast-Landing-Web-Design)

### Paygo

![by [Shafiqul Islam](https://dribbble.com/shots/17139367-Paygo-Website-Design)](https://cdn.dribbble.com/users/737304/screenshots/17139367/media/2b52e3ecaf1cca2d87d754637abcd319.png)

by [Shafiqul Islam](https://dribbble.com/shots/17139367-Paygo-Website-Design)

---

## Tweets

{% twitter 1472983863999799299 %}

{% twitter 1473080837893722114 %}

{% twitter 1473751452225003521 %}

{% twitter 1474100352253321216 %}

{% twitter 1474473165480886273 %}

---

## Picked Pens

### Wavy Snowman

{% codepen https://codepen.io/pokecoder/pen/abLLwQM %}

by [Ale](https://codepen.io/pokecoder)

### GSAP Christmas Loop

{% codepen https://codepen.io/Nekto/pen/vYeJQMX %}

by [Alexander](https://codepen.io/Nekto)

### Time Travelling with GSAP

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

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

---

## Podcasts worth listening

### Syntax – Gitpod, iPad Coding, Web3, WTF NFT

In this episode of Syntax, Scott and Wes talk with Geoff and Pauline from Gitpod about developing on Gitpod, Web3, and The NFT Bay.

{% spotify spotify:episode:4cxTZcsIYkZ9t172YPF2cH %}

---

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