“This is the 14th day of my participation in the Gwen Challenge in November. Check out the details: The Last Gwen Challenge in 2021.”

Front-end lover weekly (Github: shfshanyue/weekly), weekly records about front-end open source tools, excellent articles, major library version release records and so on, excellent articles in the weekly will be pushed one by one in the way of public account full stack growth. The subscription platform is as follows. Welcome to subscribe.

  • Subscribe to: weekly.shanyue.tech
  • Subscribe to making: shfshanyue/weekly

Development tool

A,Rclone: a high-performance file synchronization tool that supports multiple cloud storage systems

Rclone, rsync for Cloud Storage, is a high-performance command line tool for cloud file synchronization written in the Go language. It can be understood as the cloud storage version of Rsync.

  1. Support multiple cloud storage, such as Ali Cloud, Tencent and, Qingyun, AWS, etc
  2. On-demand replication is supported, with only the changed files being copied each time
  3. Resumable
  4. Compressible transmission
# installation Rclone
$ curl https://rclone.org/install.sh | bash

# Configure Rclone's cloud memory interactive configuration, such as key/secret configuration of Ali Cloud
$ rclone config

After the configuration is complete, generate the configuration file on the local computer. You can check the directory ~/.config
$ cat ~/.config/rclone/rclone.conf
[alioss]
type = s3
provider = Alibaba
env_auth = true
access_key_id = *********************
secret_access_key = *********************
endpoint = oss-cn-beijing.aliyuncs.com
acl = public-read
storage_class = STANDARD

# list all buckets$ rclone lsd alioss:/ -1 2018-11-14 21:34:17 -1 shanyue -1 2019-11-23 13:54:28 -1 shanyue-blog -1 2020-01-27 15:06:08 -1  shanyue-ncov -1 2019-12-02 17:48:42 -1 shanyue-question# Copy files, using vuepress as an example$ rclone copy .vuepress/dist alioss:/shanyue-blog --progress Transferred: 0 B / 0 B, -, 0 B/s, ETA - Checks: Elapsed time: 3.8sCompare the difference between the remote file and the present file
$ rclone copy .vuepress/dist alioss:/shanyue-blog --progress
Copy the code

At present, front-end static resources are mostly thrown on object storage, such as OSS of Ali Cloud and COS of Tencent Cloud. Rclone greatly reduces the transmission time and front-end deployment time.

Second,Image Tool Image compression Tool for web pages

The appearance level is high, the function is powerful, uses WASM pure web page end image compression tool

  • repo: renzhezhilu/webp2jpg-online

Three,Sshshape: A few simple points to draw beautiful graphics

Beautiful SVG graphics can be drawn with just a few points.

The article recommended

A,Node_modules dilemma

It presents the development of node_modules and some problems, and benefits a lot after each reading.

Second,Webpack Performance Series 4: Subcontracting optimization

The subcontracting scheme of SplitChunksPlugin and its details are described in detail

Three,New features for Chrome: Record, replay and test user actions!

In the latest version of Chrome (Chrome 97), a very useful feature has been added to help us record, play back, and test user actions.

Open source and library

A,WASM-ImageMagick: WASM map image compressor

Webassembly compilation of github.com/ImageMagick… & samples

  • repo: KniKnic/WASM-ImageMagick
  • npm: WASM-ImageMagick

Second,Teaful: a small React global state manager

import createStore from "teaful";

const { useStore } = createStore({
  username: "Aral".count: 0.age: 31.cart: {
    price: 0.items: [].}});function Example() {
  const [username, setUsername] = useStore.username();
  const [cartPrice, setCartPrice] = useStore.cart.price();

  return (
    <>
      <button onClick={()= > setUsername("AnotherUserName")}>
        Update {username}
      </button>
      <button onClick={()= >SetCartPrice ((v) => V + 1)}> Increment Price: {cartPrice}€</button>
    </>
  );
}
Copy the code
  • repo: teafuljs/teaful
  • npm: teaful