“This is the 20th 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,MetaTags, which generates Meta information for web pages

Generate Meta information for web pages and preview how your site will look indexed/shared on Google searches, Twitter, and Facebook in real time

Second,Cccreate, a collection of CSS – biased design class tools

A collection of color matching, layout, typography, ICONS, animation and other design gadgets

Three,BundleScanner, find out which NPM library is used on a website and the corresponding version number.

Enter a url to analyze all NPM dependencies and their version numbers, as well as the stack of each JS resource.

It works by creating an inverted index (elasticSearch style) of all popular NPM libraries, and then matching the target url resources with specific extracted key tokens.

Compared to Wappalyzer, it extracts more and more accurate NPM libraries. Now all we need is a browser plug-in.

The article recommended

A,The state of the front end of the metagverse

What the meta-universe is: We are constantly “living” in a virtual world that corresponds to a new identity and is easily reminiscent of Ready Player One.

This paper also introduces the advantages and disadvantages of WebXR, WebAR and marketization solutions. There is also a performance scheme for rendering, which is also very inspiring for the traditional front end.

  1. Move pure computational code to a WebGL shader or Web Worker
  • WebGL invokes GPU acceleration, and shader can be used to speed up code that is only related to rendering (redrawing). Putting code that is not related to rendering into shader will cause double computation instead
  • Web Worker is suitable for pre-calculation or codes with low real-time requirements, such as layout algorithms
  1. WebAssembly
  2. Gpu.js, which converts simple JavaScript functions into a shader language and compiles them so that they run on your GPU. If the GPU is not available, the function will still run in regular JavaScript.
  3. Filtering algorithms (such as Kalman filtering) are used to reduce the caton to a smaller size, making it seem more visually fluid to the user

Second,Rust is the future of JavaScript infrastructure

undefined

Open source and library

A,Gpu.js: Speed up your Javascript computing performance

With the help of WebGL, Javascript calculation is performed on GPU to improve performance.

const { GPU } = require("gpu.js");
const gpu = new GPU();
const multiplyMatrix = gpu
  .createKernel(function (a, b) {
    let sum = 0;
    for (let i = 0; i < 512; i++) {
      sum += a[this.thread.y][i] * b[i][this.thread.x];
    }
    return sum;
  })
  .setOutput([512.512]);

const c = multiplyMatrix(a, b);
Copy the code
  • repo: gpujs/gpu.js
  • npm: gpu.js

Second,React -location: another react routing library

import { ReactLocation, Router } from "react-location";

const reactLocation = new ReactLocation();

return (
  <Router
    location={reactLocation}
    routes={[
      {
        path: "/",
        element: "Home on the range!",
      },
    ]}
  />
);
Copy the code

The React Router updates the React Router all the time.

  • repo: tannerlinsley/react-location
  • npm: react-location