The editors recommend

From the future, what are the front-end guys doing in 2022?

What would you see if you were given the chance to stand on the shoulders of giants and take a god-like look at the front end of 2022?

  • The front people on the road to forge ahead, stepping on the new front standards, constantly climbing new peaks
  • Solid front-end infrastructure, engineering, and experience are what they need to survive
  • Intelligent front-end construction technology, so that the novice white can quickly catch up with the footsteps of predecessors
  • Armed with a unique skill and cross-platform technology, the warrior can also be respected in front of the martial arts
  • Proficient in the front of the god is a hexagonal warrior, on the moon can be picked up, the next star can be said to be versatile
  • 5G scene, but also for the front martial arts warriors to build a new arena, to give more people the opportunity to realize their dreams

How can programmers make money by writing tech blogs on Medium.com?

How to cash out on Medium.com? A picture is worth a thousand words:

Advanced exploration

Chrome 99 new features: @Layers Rules

The characteristics of Layer are summarized in one sentence: “For styles in different layers, regardless of the weight of the style itself, styles in the declared Layer have higher priority, while styles not in the Layer have the highest priority”.

Upcoming ECMAScript 2022 new features

Summary of new features expected in ECMAScript 2022, including: top-level Await, class sample members, Temporal API, built-in object API extensions, etc

Start to build a Canvas layout engine

From the beginning, I wanted to achieve a simple image rendering function, and finally realized a simple Canvas layout engine. Although there are limited features and many details and bugs to be fixed, I still have the basic layout and interaction ability, but I still stepped in many holes and reconstructed many times. I can’t help but marvel at the power of the browser layout engine.

Practice & Application

Three. Js to achieve the 2022 Winter Olympics theme 3D interesting page 🐼

This paper uses three.js + React technology stack to realize winter and Olympic elements, and makes a 3D page with the theme of winter Olympics full of interest and commemorative significance. The knowledge points involved in this paper mainly include: TorusGeometry Torus, MeshLambertMaterial Non-luster Surface Material, MeshDepthMaterial Depth Mesh Material, custromMaterial custom material, Points particles, PointsMaterial Point material and so on.

An AST that manipulates JavaScript

When actually writing ESLint or Stylelint rules, it’s easy to run into details like parsing code that has errors or attribute values that aren’t sufficient to parse the problem. We also need more tools to help simplify the process of rule development, such as more fault-tolerant parsers or tools to get richer properties.

How to use SCSS to achieve one key skin change

During project development, we sometimes encountered the need to change the theme color of the site. Even the icon, copy and background image in the banner at the bottom of the APP are configurable on the operation line, and there are also functions such as changing the font size of the system. For these scenarios, this paper introduces a method to switch the whole station style with SASS/SCSS.

This Spring Festival pays tribute to the opening of the Winter Olympics with a snowflake ❄️

Snowflakes are beautiful because they conform to our naive aesthetic of geometry, where fractals often create impressive patterns. Generally speaking, fractal is defined as iterating a certain geometric shape (metagrams) on its edge to generate a shape that is approximate to the metagrams. This time, based on the principle of fractal, draw a snowflake on canvas.