Front-end Micro Weekly is updated every Friday with technology-related news and articles for front-end developers

Wechat search and subscribe to the “front micro blog” public account

🗿 fun

Based on the WebAssembly,Play Super Mario 64 in a browser

With the power of WebAssembly, Super Mario has been brought to the browser, allowing you to play the game from a keyboard in your browser, with gamepad support. (The first time you open it, you need to wait for the resource to complete download)

📰 information

W3C launches Web Machine Learning Working Group

The W3C has launched a Web Machine Learning Working Group with members from the tensorflow.js core team (Ping Yu) and Web Neural Network API editors (Ningxin Hu and Chai Chaoweeraprasit), Will bring deep learning standards to the Web in the future.

Machine learning is a branch of artificial intelligence, and deep learning is a sub-field of machine learning, which opens a new compelling user experience for Web applications through a large number of neural network structures. Web-side machine learning usage scenarios range from video conferencing to accessibility enhancement features, cloud-based privacy enhancement solutions, and the new working group focuses on making these and more usage scenarios possible on the Web side.

Node. Js v16 release

Node.js has released its 16th major release update, which brings new capabilities and features, including: upgrading the V8 JavaScript engine to version 9.0, preloading Apple Silicon(M1) binaries, and some stable apis.

One interesting point is that Node.js 16 supports using emoji as import and exports names. The following code:

// test.mjs
let a = 2;
export { a as "😁" }

// main.mjs
import { "😁" as b } from "./test.mjs"
console.log(b)
Copy the code

Node.js 16 will remain as the current release for the next six months and move to the long Term Support (LTS) version in October 2021. It’s worth noting that Node.js 12 will remain in long-term support until April 2022, Node.js 14 will remain in long-term support until 2023, and Node.js 10 will reach the end of its life cycle at the end of this month (April 2021). For detailed Release planning and scheduling, check out Node.js Release Working Group Repository.

New on Chrome 91 DevTools

In the upcoming release of Chrome 91, DevTools will have the following major updates:

  • PerformancePanel displaysWeb VitalsMessage box
  • inElementsPanel, display the CSSscroll-snaplogo
  • The newMemory inspectorTo checkArrayBufferAs well asWasmMemory usage of
  • ElementsPanel, a new identity Settings window, can be set to show or hidegrid,flex,Adandscroll-snaplogo
  • ElementsPanel preview picture window, add displayAspect ratioinformation
  • NetworkPanel add condition button, can be configuredContent-Ending
  • StylesEnhanced panel capability, you can view CSS property values
  • .

For more updates, check out the link.

Google search ranking factors will be updated from May to mid-June

The ranking of page experiences that Google’s Search team released last year will be available in Google Search this year in what they call a “page Experience update.” Fence, which helps webmasters and publishers prepare ahead of time and improve their web experiences, announced several major updates:

  • It will be phased in by mid-June this year
  • There are three Core Web Vitals metrics:LCP,FIDandCLSAnd some other news related updates
  • Search ConsoleA new one will be added toPage ExperienceThe report
  • Google SearchSupport for all contentSXG(signed exchanges)

Vite official Chinese document is online

Vite official Chinese document has been online a few days ago! 🎉 can now visit cn.vitejs.dev direct, or through the original site “Lanugages → Simplified Chinese” jump to access.

Github has released a new version of VS Code: Github Themes

VS Code now has a link to the new GitHub theme: GitHub Light Default, GitHub Dark Default and GitHub Dark Dimmed.

VS Code Themes: GitHub Light and GitHub Dark can still be downloaded and used.

📖 articles

Real-world CSS vs. CSS-in-JS performance comparison

In recent years, csS-in-JS related tools are becoming more and more popular. How much csS-in-JS affects page performance requires a quantitative index to measure.

The author chooses two types of CSS-in-JS tools, build-time Linaria and The Runtime Styled Component, for comparison.

To be clear, build-time means that when all CSS code is packaged and built, it is removed from the JavaScript file and placed into a separate CSS file, not bundled into the final JS Bundle. The browser also renders separate CSS styles. Runtime means that when all the CSS code is packaged and built, it is packaged into the final JS Bundle, and the page renders the CSS from the JavaScript file when it renders the JavaScript file.

In this paper, from the network, coverage, performance and user behavior interaction and other aspects of the comparison, the final conclusion: Runtime CSS-in-JS scheme has a significant impact on page performance, mainly for some low-end devices and poor network service areas.

For this reason, the authors recommend using a build-time CSS-in-JS tool or a pure CSS solution rather than a Runtime CSS-in-JS tool.

Say Hello To CSS Container Queries

In issue 7, we introduced Container Query, which is a Media Query that is less granular than Media Query and allows us to use Media Query capabilities at the element level.

Because Container Query works with less granular elements, it can set individual styles for individual elements on demand, solving some problems that Media Query cannot solve in some scenarios.

Best practices for cookie notices

Cookie Notice refers to the reminder of the use of cookies displayed during the loading of a website, and provides users with operations such as disabling and optional operations, so that users can independently choose whether to enable the permission to obtain cookies for the website.

Because it usually loads before the page loading process, it potentially affects the loading of ads and other page content. These influences are reflected in Largest Contentful Paint (LCP), First Input Delay (FID) and Cumulative Layout Shift (CLS).

Based on third-party Cookie Notice, this paper gives some incomplete best practices, including:

  • Asynchronous loadingCookie NoticeThe script
  • Direct loadCookie NoticeThe script
  • withCookie NoticeThe domain link is created before
  • Cookie Noticepreload
  • Avoid layout changes
  • Optimize loading performance
  • .

Overflow Issues In CSS

Overflow Issue is when a page has an occasional scroll bar across the page so that the user can scroll across the page. This phenomenon can be caused by a variety of factors.

This paper analyzes the causes of Overflow issues in different scenarios and how to solve them. I’ll also show you how to debug this problem more easily using DevTools.

🛠 Tools and plug-ins

DevTools: Displays an overview of the CSS usage of the page

CSS Overview is currently an experimental feature of DevTools and is disabled by default. To use this feature, open DevTools and go to Settings -> Experiments -> Check CSS Overview.

ReactFlow: Build charts and complex interaction editors

ReactFlow is an application based on HTML element nodes (div, SVG, etc.) that supports scenarios ranging from drawing static diagrams to complex interactive editors. One of its biggest strengths is the React framework, which allows you to code flexibly to implement desired features.

Prisma: Node.js&typescript based ORM

Prisma is an Object Relational Mapping (ORM) library that manipulates databases based on node.js ecology and TypeScript syntax.

Its overall function is very powerful, and has a supporting graphical management interface. Currently, it supports frameworks or libraries such as nex.js, GraphQL, NestJS, Express, Apollo, and Hapi, so try it out in your project.

Gitmoji

Gitmoji is a small tool that normalizes Git commit information. It can be added to git commit logs using emojis. It is very easy to identify the purpose of a commit.

Here are some sample commits;

✨ (home, components): Add login button
✨ (home, components): Add login modal
🐛 (home, components): Resolve issue with modal collapses
🚚 (home): Move icons folder
✨ (newsletter): Add Newsletter component
✨ (navbar): Add navbar container
🔥 (navbar): Remove old navbar file
✅ (home): Add login test case
🎨 (home, component): Improve login modal
📦️ (npm): Add react-table
🔨 Update script start-server.js
Copy the code

Gitmoji also has plug-ins for various IDE platforms such as VS Code and Atom, making it easier to use through the IDE.

🥅 code snippet

usebox-shadowDraw the moon

.moon {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  box-shadow: 22px 22px 0 0 black;
}
Copy the code

Use CSS to draw a heart ❤

.heart {
  position: relative;
  height: 160px;
  width: 100px;
  background: black;
  border-radius: 200px 200px 0 0;
  transform: rotate(45deg);
}
.heart::before {
  content: "";
  position: absolute;
  left: -30px;
  top: 30px;
  height: 160px;
  width: 100px;
  background: black;
  border-radius: 200px 200px 0 0;
  transform: rotate(-90deg);
}
Copy the code

The article was first published on the official wechat account front-end Wezhi.

For the first time to receive the article push, more front-end forward-looking technology sharing, please search wechat to follow ** “front-end micro blog” **