“Front-end micro weekly” is updated every Friday, bringing you a different front-end weekly new experience

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

Because of the rules of the public account, the link in the text can only be opened in the “view the original text” page

🗿 cold knowledge

Many of you may not know that math.min () and math.max () have different values than expected.

📰 information

Founder of RomeRome Tools, lnc

Rome is a syntax checking, compilation, and build tool that supports JavaScript, TypeScript, JSON, HTML, Markdown, and CSS. It is designed to replace tools like Babel, ESLint, Webpack, Prettier, and Jest.

It’s worth noting that Sebastian McKenzie, the founder of Rome, is also the founder of Babel and was an early developer of well-known open source projects Yarn and Lerna.

Rome Tools, LNC, which has received $4.5 million in seed funding, is an “open source first” company designed to support open source projects by building new products and services.

The Bootstrap may release

After several months, three alpha and three beta releases, Bootstrap 5 has finally been released. On the whole, this big version of the update, or brought a lot of new changes, roughly:

  • A new logo was designed and the document design was updated
  • A new Offcanvas component that can be hidden in different places on the page
  • Newly updated form form
  • To support theRTL(Right to Left) layout
  • New revised tool API
  • Abandon theMicrosoft Edge Legacy,IE10/11,Firefox < 60,Safari < 10,Chrome < 60,iOS Safari < 10andAndroid < 6Wait for browser support
  • JavaScriptThe side has been completely abandonedjQuery
  • .

VS Code was released in April (V1.56)

📖 articles

Report on the status quo of Chinese indie developers in 2020

“However, the number of independent developers in China is far smaller than in developed countries such as Europe and the United States, and there are few reports from the perspective of independent developers in China. There are many reasons, including the long working hours of Chinese software developers and the relatively weak freelance culture. However, there are signs that the group of independent developers is increasing, so SegmentFault wrote this report on the status quo of Chinese independent Developers in 2020 by means of questionnaires, interviews, and existing data analysis. The goal is to educate people who are interested in indie developers, including indie developers, about the profession and the community.”

Optimizing Web Vitals using Lighthouse

Lighthouse is an automated tool that helps developers improve the quality and performance of their Web pages. The 7.x release of Lighthouse brings a number of new features, such as element screenshots and easier viewing of UI content that affects user experience metrics.

Lighthouse comprehensively measures Core Web Vitals metrics including Largest Contentful Paint, Cumulative Layout Shift, and Total Blocking Time. These metrics affect “loading,” “stable layout,” and “ready on demand,” and can help you better identify performance issues in your pages.

Custom State Pseudo-Classes in Chrome

This article introduces a New CSS “customization” feature in Chrome that is not mentioned in New in Chrome 90.

Similar to custom properties, custom tags, and custom events, this time the custom feature is: custom state pseudo classes.

If you don’t already know what we’re talking about, you probably know CSS pseudo-classes like hover, : Visited, and: Focus, which represent a certain state of a page element. Chrome 90 has supported the ability to customize state pseudo classes since its inception.

Using an example of code, define a checkbox and add the checked and unchecked custom status pseudo classes (–checked) to it:

class LabeledCheckbox extends HTMLElement {
  constructor() {
    super(a);// 1. Instantiate the element's "internals" ()
    this._internals = this.attachInternals();

    // (other code)
  }

  // 2. Switch the state of the element
  set checked(flag) {
    if (flag) {
      this._internals.states.add("--checked");
    } else {
      this._internals.states.delete("--checked"); }}// (other code)
}
Copy the code

One method worth noting in the code above is to add state by initializing an instance of state via this.attachinternals (). AttachInternals You can view the HTMLElement document.

How we sped up Chrome DevTools stack traces by 10x

Many people may not realize that enabling DevTools in Chrome affects page performance because DevTools takes a lot of effort from the browser itself to collect stack information, set breakpoints, and take snapshots of performance tracking. This effect can be clearly seen in previous versions of Chrome 90.

The Chrome team has optimized this performance deterioration in the V90 release (it’s not possible to fix it completely), primarily by optimizing stackFrame-related logic. For specific measures, see the original text.

Why You Should Not Use Webpack

Webpack is far and away the most popular packaging and building tool for front-end projects, and is currently in its fifth major release with a huge amount of functionality.

However, Webpack is no longer the best packaged build tool in the following scenarios:

  • Build speed in Dev mode
  • Very simple configuration file
  • Bundle file size

There are alternative tools available to the community to address these issues, such as Parcel, Rollup, Vite, and Snowpack.

Therefore, in the future project construction technology solution selection, you can think more about your usage scenario, should you really use Webpack?

Alt vs Figcaption

This article introduces two things about the IMG tag: the Alt attribute and the Figcaption tag.

The Alt attribute, which is familiar to all, is a description of the image resource and is only displayed in case the image fails to load, in order to handle these exceptions and Accessibility scenarios (its contents will be read by the reader).

The FigCaption tag is a different description of the image’s content, but it needs to be wrapped with the Figure tag, and the content will always be displayed on the page. Among the domestic websites, I only noticed that the web version of Zhihu used this feature.

Some usage scenarios and sample code for both features are provided to help you understand them better.

🛠 Tools and plug-ins

Zx: Lets you write Shell scripts better

Zx is a JavaScript ecosystem tool that allows you to invoke and execute bash commands in JavaScript in a relatively straightforward way.

The GitHub home page provides an example of code that shows its brevity:

#!/usr/bin/env zx

await $`cat package.json | grep name`

let branch = await $`git branch --show-current`
await $`dep deploy --branch=${branch}`

await Promise.all([
  $`sleep 1; echo 1`,
  $`sleep 2; echo 2`,
  $`sleep 3; echo 3`,]),let name = 'foo bar'
await $`mkdir /tmp/${name}`
Copy the code

Fx: command line tool JSON tool

Fx is a command-line JSON processing tool that is easy to use, interactive, and supports file streaming.

Having never found a good way to view JSON files on the command line, this tool might be a good choice.

Fig: automatic fill tool in command line tool

Fig is a command line autofill tool that allows you to quickly type the command you want. At present, it is in the internal test, the official website filled in the email and questionnaire can be used to obtain the qualification, the questionnaire has been filled, waiting for the qualification email.

CSS Hell

CSS Hell is a collection of common CSS errors and how to resolve them.

Here is a list of z-index misuses and their solutions:

/* Bad */
.my-class {
  z-index: 122828282882;
}

/* Good */
.my-class {
  position: absolute;
  z-index: 2;
}
Copy the code

🥅 code snippet

Make the text paragraphs appear as triangles

As shown in the figure, we can achieve this triangular display with the following three CSS properties:

  • shape-outside
  • floats
  • text-align-last
<triangle-paragraph>
  <div class="cutout"></div>
  <div class="cutout"></div>
  <p>
    Larry doesn't care.
    Jump so high grow a beard in the air.
    ......
  </p> 
</triangle-paragraph>
Copy the code
triangle-paragraph > p {
  text-align: justify;
  text-align-last: justify;
}
triangle-paragraph > .cutout:first-of-type {
  content: ' ';
  inline-size: 50%;
  block-size: 100%;
  shape-outside: polygon(0 100vh.0 0.100% 0);
  float: left;
} 
triangle-paragraph > .cutout:last-of-type {
  content: ' ';
  inline-size: 50%;
  block-size: 100%;
  shape-outside: polygon(100% 100vh.0 0.100% 0);
  float: right;
}
html {
  block-size: 100%;
  color-scheme: light dark;
}
body {
  min-block-size: 100%;
  font-family: system-ui, sans-serif;
  
  display: flex;
  place-content: center;
}
Copy the code

Super easy to judge leap year

In order to determine whether a leap year is a leap year, we need to know the definition rules of leap year and decide according to the responsible rules. Here’s a way to figure out if it’s a leap year by working backwards.

function isLeapYear(year: number) {
  return new Date(year, 1.29).getDate() === 29
}

export default isLeapYear
Copy the code

useURLSearchParamsUpdate query parameters in the URL

There is usually a scenario: in the query page, we need to add some query parameters (such as q= XXX) in the URL of the current page, and then open the updated URL, so that the page can obtain the query parameters query relevant data.

let searchParams = new URLSearchParams(window.location.search);

searchParams.set("q".'xxxx');

if (window.history.pushState) {
  const url = window.location.protocol 
              + "/ /" + window.location.host 
              + window.location.pathname 
              + "?" 
              + searchParams.toString();

  window.history.pushState({
    path: url
  }, ' ', url)
}
Copy the code