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!
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.
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)
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.
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!
Browser Test and Support Matrix
Supported File Formats
Table of Contents
Expand to show Table of Contents
CasePolice
Make the case correct, please!
antfu
/
case-police
🚨 Make the case correct, PLEASE!
🚨 CasePolice
- 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.
📚 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
🔨 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
dribbble shots
Google Nearme | Design Case Study
](https://res.cloudinary.com/practicaldev/image/fetch/s--6yRpXOdC--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://cdn.dribbble.com/userupload/2536234/file/original-5a7b503604ef32969c22f5384b81e589.png)
Onlain banking
](https://res.cloudinary.com/practicaldev/image/fetch/s--E8eNkp6A--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://cdn.dribbble.com/users/4377131/screenshots/17908451/media/3bd686757bac13c8e6131db5cd96e592.png)
by visiolab
Cards & Widgets
](https://res.cloudinary.com/practicaldev/image/fetch/s--0bL2dX0y--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://cdn.dribbble.com/userupload/2525449/file/original-07fb004e069998e3e9232342cf883ae8.png)
Tweets
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@chromiumdevChrome 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/10017:38 PM - 29 Mar 2022
18:52 PM - 29 Mar 2022
Components AI@components_ai01: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! 👋
Top comments (0)