Front-end lover weekly (Github: shfshanyue/weekly), a weekly record of open source tools, great articles, major library releases, and more. The subscription platform is as follows. Welcome to subscribe.

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

The cover

Archaeologists have discovered six new sanxingdui cultural sacrificial pits at the Sanxingdui site. So far, more than 500 important cultural relics, including gold mask fragments, giant bronze masks, bronze sacred trees and ivory, have been unearthed. The picture shows half of the unearthed gold mask.

In a word

  • copy($var)Variable data can be copied directly from the browser console
  • Chrome, which used to iterate every six weeks, will accelerate the pace of iteration and release a new version every four weeks
  • npm audit fixRisky packages are automatically fixed
  • Chinese scientists have discovered a new species of insect in a piece of amber that was formed about 99 million years ago
  • Yang Jiayu of Inner Mongolia won the women’s 20km race walk at the 2021 National Race Walking Championships and Tokyo Olympic Trials with a time of 1 hour, 23 minutes and 49 seconds, breaking a world record

Development tool

A,Explain Shell: Illustrates the interpretation of each argument on any command line

Called the perfect aid for learning and writing a shell, PIPE can also parse nested and complex commands by typing any Linux command and pointing out the meaning of each parameter.

Second,SVG Wave Generator

Generate a wave SVG randomly, adjust the sawtooth, the degree of bend, etc., and save as SVG/PNG/JPG

Three,CSS FFects: A variety of ultra-useful CSS animations

Collection of a variety of CSS animation, most of the hover effect, loading animation, pure CSS implementation. Save for when you need to design your own website.

  • repo: emilkowalski/css-effects-snippets

Four,Chrome Platform Status: An overview of new features in the Chrome release

List each of Chrome’s new features, current stable releases, and release dates for the next release.

The article recommended

A,Why should you use Picture instead of the Img tag

The Picture TAB has better resolution switching and media query, smaller images are better for performance optimization on small screens, and 2x images are better for art design on high screen.

And can support writing a variety of picture formats, the latest picture format avif/ webP provides a rollback scheme, so it can use the best picture format. It is a best practice to use this with build tools.

<picture>
  <source srcset="test.avif" type="image/avif">
  <source srcset="test.webp" type="image/webp">
  <img src="test.png" alt="test image">
</picture>
Copy the code
  • Jump a translation

Second,Webpack core module Tapable usage analysis

Plugin is one of the core features of WebPack, and it relies on the Tabpable library, which provides various hooks for event handling and process control for Plugin implementations.

At its core is the advanced publish-subscribe model, which registers events using TAP and triggers them using Call.

const {
  SyncHook,
  SyncBailHook,
  SyncWaterfallHook,
  SyncLoopHook,
  AsyncParallelHook,
  AsyncParallelBailHook,
  AsyncSeriesHook,
  AsyncSeriesBailHook,
  AsyncSeriesWaterfallHook
} = require("tapable");
Copy the code

Three,The practice of Flutter Web in Meituan Takeaway

The support of Flutter Web has entered the Stable stage. Meituan implemented Flutter Web and summarized relevant experience. However, using Flutter on the Web currently has many disadvantages, such as the fragile Web ecology and build

  • Flutter cannot Hash files, so it is difficult to make use of Long Term Cache
  • Flutter is difficult to unpack packaged files
  • It is difficult for Flutter to upload CDN of resources
  • The Flutter Web itself implements a page scrolling mechanism, which has poor page scrolling performance.

Take a look at how Meituan solves these problems. Below is the technical architecture of Meituan

Four,V8 Heapsnapshot file parsing

Look at the data structure of the Heapsnashot file with v8 source code. Understanding it is very helpful for debugging memory problems in Node

Code snippet

How to undo an array?

Array-union is a one-line library with 100 million downloads per month, as shown below

const arrayUnion = (. arguments_) = > [...new Set(arguments_.flat())];

arrayUnion(['🐱'.'🦄'], ['🐻'.'🦄'], ['🐶'.'🌈'.'🌈']);
//=> ['🐱', '🦄', '🐻', '🐶', '🌈']
Copy the code

Array.prototype: Array flat

const l = [1.2[3.4]]

l.flat()
//=> [1, 2, 3, 4]
Copy the code

Open source and library

A,TSDX: Zero configuration for rapid development of typescript-enabled command-line tools in NPM Package

Prettier, ESLint, Jest, Rollup, Publish, etc., out of the box, automatically packaged into CJS, ESM, UMD, etc. Without extra configuration

If you develop the React component, you can optionally build in Storybook and so on, which makes it very convenient to develop new packages.

  • repo: https://tsdx.io/
  • npm: tsdx

Second,Anime: Lightweight, high-performance javascript animation engine

Animation can be quickly made programmatically, including but not limited to SVG, CSS, Keyframes, etc. In previous issues of Front-end Developer weekly, another animation engine was also introduced: GSAP.

  • repo: juliangarnier/anime
  • npm: animejs

Three,Ink: Use React to write command line tools

import React, { useState, useEffect } from "react"
import { render, Text } from "ink"

const Counter = () = > {
  const [counter, setCounter] = useState(0)

  useEffect(() = > {
    const timer = setInterval(() = > {
      setCounter((previousCounter) = > previousCounter + 1)},100)

    return () = > {
      clearInterval(timer)
    }
  }, [])

  return <Text color="green">{counter} tests passed</Text>
}

render(<Counter />)
Copy the code
  • repo: vadimdemedes/ink
  • npm: ink

Four,Jsonld: JSON-LD processor implemented by JS

Json-ld is a JSON Data format with Link Data. The common mongo is to organize Data in JSONLD.

{
  "@context": "https://json-ld.org/contexts/person.jsonld"."@id": "http://dbpedia.org/resource/John_Lennon"."name": "John Lennon"."born": "1940-10-09"."spouse": "http://dbpedia.org/resource/Cynthia_Lennon"
}
Copy the code

release

A,V8 9.0 Release

V8 9.0 was released on March 17