Weekly Digest 13/2022
Tags: javascript, webdev, react, css
Published: 2022-04-03 15:59:53

# Weekly Digest 13/2022

Welcome to my Weekly Digest #13 of 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

### Designing A Better Infinite Scroll

In this [series of articles](https://www.smashingmagazine.com/category/design-patterns/), we highlight design patterns and techniques to design better interfaces. You can find more examples in “[Smart Interface Design Patterns](https://smart-interface-design-patterns.com/)”, a 6h-video course with 100s of hand-picked examples, curated by Vitaly.

[Designing A Better Infinite Scroll - Smashing Magazine](https://www.smashingmagazine.com/2022/03/designing-better-infinite-scroll/)

### Make the TypeScript interface partially optional/required

Pawel came across a situation when he had to make a single key of the TypeScript interface optional.

[Make the TypeScript interface partially optional/required | pawelgrzybek.com](https://pawelgrzybek.com/make-the-typescript-interface-partially-optional-required/)

---

## Some great videos I watched this week

### **Mutual Attraction**

Finishing off Chapter 2 on forces, let's look at an "N-Body Simulation" where all movers experience the gravitational attraction with all other movers!

{% youtube GjbKsOkN1Oc %}

by [Daniel Shiffman](https://twitter.com/shiffman)

### Cypress in 100 Seconds

Cypress is a complete testing solution for web developers. It uses a browser-based test-runner to visually validate your JavaScript code and makes test-driven development fun.

{% youtube BQqzfHQkREo %}

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

### New in Chrome 100: User-Agent string updates, Multi-screen window placement API, and more!

Chrome 100 is rolling out now with a three-digit version number. There are some important changes to the user agent string. The Multi-Screen Window Placement API makes it possible to enumerate the displays connected to a user’s machine and place windows on specific screens.

{% youtube VK7oR5vLluk %}

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

### React 18 - What's New, What Changed & Upgrade Guide

React 18 was released and since it's a new major version, the big questions is: What changed?
Indeed, React 18 lays a solid foundation for great future updates and introduces one very important new concept: Concurrency.

{% youtube qXUl3VsbA6o %}

[by [Maximilian Schwarzmüller](https://twitter.com/maxedapps)](https://www.youtube.com/watch?v=N0DhCV_-Qbg)

by [Maximilian Schwarzmüller](https://twitter.com/maxedapps)

---

## Useful GitHub repositories

### SheetJS

The SheetJS Community Edition offers battle-tested open-source solutions for extracting useful data from almost any complex spreadsheet and generating new spreadsheets that will work with legacy and modern software alike.

{% github SheetJS/sheetjs %}

### CasePolice

Make the case correct, please!

{% github antfu/case-police %}

### ahooks

A high-quality & reliable React Hooks library.

{% github alibaba/hooks %}

---

## dribbble shots

### Google Nearme | Design Case Study

![by [Ishtiaq Khan Parag](https://dribbble.com/shots/17908788-Google-Nearme-Design-Case-Study)](https://cdn.dribbble.com/userupload/2536234/file/original-5a7b503604ef32969c22f5384b81e589.png)

by [Ishtiaq Khan Parag](https://dribbble.com/shots/17908788-Google-Nearme-Design-Case-Study)

### Onlain banking

![by [visiolab](https://dribbble.com/shots/17908451-Onlain-banking)](https://cdn.dribbble.com/users/4377131/screenshots/17908451/media/3bd686757bac13c8e6131db5cd96e592.png)

by [visiolab](https://dribbble.com/shots/17908451-Onlain-banking)

### Cards & Widgets

![by [Masudur Rahman](https://dribbble.com/shots/17906652-Cards-Widgets)](https://cdn.dribbble.com/userupload/2525449/file/original-07fb004e069998e3e9232342cf883ae8.png)

by [Masudur Rahman](https://dribbble.com/shots/17906652-Cards-Widgets)

---

## Tweets

{% twitter 1508895335200043021 %}

{% twitter 1508838714180612100 %}

{% twitter 1508861159507587073 %}

{% twitter 1508879905366421504 %}

{% twitter 1509339605278990343 %}

---

## Picked Pens

### CSS Dots wave

{% codepen https://codepen.io/amit_sheen/pen/vYpZBwP %}

by [Amit Sheen](https://twitter.com/amit_sheen)

### Spinning Globe

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

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

---

## Podcasts worth listening

### CodePen Radio – ****Forks in a New Tab****

If you Command (mac) or Control (PC) click the **Fork** button, it will open the newly forked Pen in a new tab in your browser. That’s a *new* behavior.

{% spotify spotify:episode:4TquNTxBBVwIycFaYT1Wfh %}

### Syntax – **Syntax Highlight**

In this episode of Syntax, Wes and Scott review your websites that you submitted including bald.design, Anh Hoang Nguyen, [bradleyshellnut.com](http://bradleyshellnut.com/), and more.

{% spotify spotify:episode:7B8dh5bY0eyou5StAn1vv0 %}

---

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