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, we highlight design patterns and techniques to design better interfaces. You can find more examples in “Smart Interface Design Patterns”, a 6h-video course with 100s of hand-picked examples, curated by Vitaly.

Designing A Better Infinite Scroll - Smashing Magazine

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

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!

by Daniel 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.

by Fireship

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.

by Google Chrome Developers

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.

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

by Maximilian Schwarzmüller

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.

CasePolice

Make the case correct, please!

npx case-police --fix

npx case-police "**/*.md" path/to/file.html

ahooks

A high-quality & reliable React Hooks library.

alibaba / hooks

A high-quality & reliable React Hooks library.

A high-quality & reliable React Hooks library.

English | 简体中文

📚 Documentation

• English
• 中文

✨ Features

• Easy to learn and use
• Supports SSR
• Special treatment for functions, avoid closure problems
• Contains a large number of advanced Hooks that are refined from business scenarios
• Contains a comprehensive collection of basic Hooks
• Written in TypeScript with predictable static types

📦 Install

$ npm install --save ahooks
# or
$ yarn add ahooks

🔨 Usage

import { useRequest } from 'ahooks';

💻 Online Demo

🤝 Contributing

$ git clone git@github.com:alibaba/hooks.git
$ cd hooks
$ yarn run init
$ yarn start

Open your browser and visit http://127.0.0.1:8000

We welcome all contributions, please read our CONTRIBUTING.MD first, let's build a better hooks library together.

Thanks to all the contributors:

👥 Discuss

View on GitHub

dribbble shots

Google Nearme | Design Case Study

by Ishtiaq Khan Parag

Onlain banking

by visiolab

Cards & Widgets

by Masudur Rahman

Tweets

Tomer Aberbach

@tomeraberbach

You're welcome

workspaceupdates.googleblog.com/2022/03/compos…

19:54 PM - 29 Mar 2022

React

@reactjs

React 18 is now available on npm!

Here’s an overview of what’s new in React 18, and what it means for the future.

reactjs.org/blog/2022/03/2…

16:09 PM - 29 Mar 2022

Chrome Developers

@chromiumdev

Chrome 100 ships today. So we built a timeline of #100CoolWebMoments 🎉

It’s been fun reminiscing and seeing how the web has evolved. Remember when we got Media Source Extensions? Or when the first Flexbox working draft was submitted?

Check it out at developer.chrome.com/100

17:38 PM - 29 Mar 2022

Phil Hawksworth

@philhawksworth

📈 @____lighthouse scores right in your @netlify deploys, anyone?

answers.netlify.com/t/enable-light…

18:52 PM - 29 Mar 2022

Components AI

@components_ai

🎨 Our CSS gradient editor just got a huge upgrade

components.ai/gradient

01:19 AM - 31 Mar 2022

Picked Pens

CSS Dots wave

by Amit Sheen

Spinning Globe

by Jhey

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.

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, and more.

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