DEV Community

Cover image for Weekly Digest 13/2022
Marco Biedermann
Marco Biedermann

Posted on

Weekly Digest 13/2022

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.

GitHub logo SheetJS / sheetjs

📗 SheetJS Community Edition -- Spreadsheet Data Toolkit

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.

SheetJS Pro offers solutions beyond data processing Edit complex templates with ease; let out your inner Picasso with styling; make custom sheets with images/graphs/PivotTables; evaluate formula expressions and port calculations to web apps; automate common spreadsheet tasks, and much more!

License Build Status Snyk Vulnerabilities npm Downloads Analytics

Browser Test and Support Matrix

Build Status

Supported File Formats

circo graph of format support

graph legend

Table of Contents

Expand to show Table of Contents

CasePolice

Make the case correct, please!

GitHub logo antfu / case-police

🚨 Make the case correct, PLEASE!

🚨 CasePolice

NPM version

  • GitHub, not Github
  • TypeScript, not Typescript
  • macOS, not MacOS
  • VS Code, not Vscode
  • ...

Make the case correct, PLEASE!

Usage

Make sure you have committed all unsaved works, and then

npx case-police --fix

It will scan all your source files and fix the cases of known names.

Only the word including both uppercase and lowercase will be fixed. (e.g. Github -> GitHub; github and GITHUB will be left untouched).

Use in CI

Simply add case-police (without --fix) to your workflow and it will exit with a non-zero code for your CI to catch it.

Specific files

By default it will scan all the text files under the current directory (respects .gitignore), if you want it to check only specific files, you can pass the file paths of glob patterns to it.

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

CLI Options

ahooks

A high-quality & reliable React Hooks library.

GitHub logo alibaba / hooks

A high-quality & reliable React Hooks library.

A high-quality & reliable React Hooks library.

NPM version NPM downloads gzip size GitHub

English | 简体中文

📚 Documentation

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
Enter fullscreen mode Exit fullscreen mode

🔨 Usage

import { useRequest } from 'ahooks';
Enter fullscreen mode Exit fullscreen mode

💻 Online Demo

Edit demo for ahooks

🤝 Contributing

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

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:

contributors

👥 Discuss


dribbble shots

Google Nearme | Design Case Study

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

by Ishtiaq Khan Parag

Onlain banking

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

by visiolab

Cards & Widgets

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

by Masudur Rahman


Tweets


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! 👋

Top comments (0)