Front-end Micro Weekly Issue 12: Chrome supports custom status pseudo-classes; Bootstrap 5 is released; Rome founders establish Rome Tools, lnc

Front-end Micro Weekly Issue 12: Chrome supports custom status pseudo-classes; Bootstrap 5 is released; Rome founders establish Rome Tools, lnc

"Front-end Micro Weekly" is updated every Friday, bringing you a different front-end weekly experience

WeChat search and subscribe to the "Front-end WeChat" public account

Due to the official account rules, the links in the text can only be opened on the "View Original" page

Cold knowledge

Many people may not know,

Math.min()
with
Math.max()
The value of is not the same as expected.

Information

Founder of Rome
Rome Tools, lnc

Rome is a support

JavaScript
,
TypeScript
,
JSON
,
HTML
,
Markdown
with
CSS
Linguistic
Grammar check
,
Compile
with
Construct
Tool, it is designed to replace
Babel
,
ESLint
,
Webpack
,
Prettier
with
Jest
And other tools.

It is worth noting that

Rome
The founder (Sebastian McKenzie) is also
Babel
The founder of and is a well-known open source project
Yarn
with
Lerna
Early developers.

Established this time

Rome Tools, lnc
Having received a seed investment of 4.5 million US dollars, the company's positioning is "open source first", and its purpose is to support the development of open source projects by building new products and services.

Bootstrap 5 released

After several months, after 3 alpha versions and 3 beta versions,

Bootstrap 5
Finally officially released. On the whole, this major version update has brought many new changes, roughly as follows:

  • Designed a new logo and updated the document design
  • The new Offcanvas component can be hidden in different positions on the page
  • Newly updated form
  • Supported
    RTL
    (Right to Left) layout
  • New revised tool API
  • Abandon
    Microsoft Edge Legacy
    ,
    IE10/11
    ,
    Firefox <60
    ,
    Safari <10
    ,
    Chrome <60
    ,
    iOS Safari <10
    with
    Android <6
    Wait for browser support
  • JavaScript
    Side has been completely abandoned
    jQuery
  • ......

VS Code April version (v1.56) released

Article

2020 Survey Report on the Survival Status of Independent Developers in China

"However, at present, 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. Among them, Chinese software developers work too long and the freelance culture is relatively weak. This is the main reason. However, various signs indicate that the group of independent developers is increasing. For this reason, SegmentFault considers whether to write this "Research Report on the Survival Status of China's Independent Developers in 2020" through questionnaires, interviews, and existing data analysis. The purpose is to let people who are interested in independent developers, including independent developers, understand this profession and this group."

Optimizing Web Vitals using Lighthouse

Lighthouse
It is an automated tool that helps developers improve the quality and performance of web pages.
7.x
The version brings some new features, such as element screenshots and easier viewing of the content of the UI that affects the user experience indicators.

Lighthouse
Can comprehensively measure including
Largest Contentful Paint
,
Cumulative Layout Shift
with
Total Blocking Time
Within
Core Web Vitals
index. These indicators affect "loading", "layout stability" and "preparation as needed", etc., to help you better discover some performance problems in the page.

Custom State Pseudo-Classes in Chrome

The article introduced one that was not mentioned in New in Chrome 90 ,

Chrome
A CSS "custom" feature supported by Zhongxin.

Similar to custom attributes, custom labels, and custom events, the custom feature we will talk about this time is: the custom state pseudo-class .

If you don t know what it s talking about, then you must know the CSS in

:hover
,
:visited
with
:focus
Such pseudo-classes, they represent a certain state of page elements.
Chrome 90
From the beginning, the custom capabilities of the state pseudo-classes were supported.

Through a piece of sample code, define a

checkbox
, Add to it
Selected
with
Unselected
The custom state pseudo-class (
--checked
):

class LabeledCheckbox extends HTMLElement { constructor () { super (); //1. Instantiate the "internals"() of the element 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 code

There is a method worth noting in the above code. To add a state, you need to pass

this.attachInternals()
To initialize a state instance.
attachInternals
For related content, you can view the HTMLElement document .

How we sped up Chrome DevTools stack traces by 10x

Many people may not realize that in

Chrome
Open in browser
DevTools
Will affect the performance of page opening, because
DevTools
middle
Collect stack information
,
Set breakpoint
,
Get a snapshot of performance tracking
All of this requires the browser itself to spend a lot of effort to complete. In versions before Chrome 90, this effect is obvious.

Chrome
The team optimized this performance deterioration in the v90 version (it is impossible to completely solve it), mainly for
StackFrame
The related logic has been optimized. For specific measures, see the original text for details.

Why You Should Not Use Webpack

Webpack
It is undoubtedly the most popular front-end project packaging and construction tool, and it has reached the fifth major version, which contains a lot of functions.

However, in the following scenario,

Webpack
It s not the best packaged build tool anymore:

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

In response to the above issues, the community has some other alternative tools that can be used, such as

Parcel
,
Rollup
,
Vite
with
Snowpack
Wait.

Therefore, in the selection of future project construction technical solutions, you can think more about your usage scenario, whether you really should still use it

Webpack
?

Alt vs Figcaption

The article introduces about

img
Two things related to tags:
alt
Attributes and
figcaption
label.

alt
Property, everyone should be familiar with it, it is a description of the image resource, and will only be displayed when the image fails to load, to deal with these abnormal situations and support
Accessibility
The scene (its content will be read out by the reader).

and

figcaption
The label is not the same, it also represents the description of the image content, but it needs to be
figure
Label the package, and the content will always be displayed on the page. In domestic websites, I only noticed that the web version of Zhihu used this feature.

The article gives some usage scenarios and sample codes of these two features, which can help you understand them better.

Tools, plug-ins

zx: Let you write shell scripts better

zx
Is a tool under the JavaScript ecosystem, it allows you to pass
JavaScript
Invoking and executing bash commands, the usage is relatively simple and intuitive.

The sample code given on the GitHub homepage shows its simplicity:

#! /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 code

fx: command line tool JSON tool

fx
It is a command line JSON processing tool, it has the advantages of easy-to-use, interactive and supporting file streaming.

I haven't found a good way to view JSON files on the command line. This tool may be a good choice.

Fig: Auto-fill tool in the command line tool

Fig
It is a command line auto-fill tool that allows you to quickly type out the commands you want. At present, it is in the internal test, the official website fills in the mailbox and questionnaire to obtain the qualification, the questionnaire has been filled, and it is waiting for the qualification email.

CSS Hell

CSS Hell
It is a collection of common CSS errors and gives solutions to these errors.

Below, list one

z-index
Wrong use of and its solutions:

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

Code snippet

Make text paragraphs appear as triangles

As shown in the figure, we can achieve this triangle display effect through 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 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 code

Super simple judgment of leap year

Usually we want to judge whether a certain year is a leap year, we need to grasp the definition rules of leap year, and judge according to the responsible rules. The following introduces a method to determine whether it is a leap year by reverse deduction.

function isLeapYear ( year: number ) { return new Date (year, 1 , 29 ).getDate() === 29 } Export default isLeapYear copy the code

use
URLSearchParams
Update the 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) to the URL of the current page, and then open the updated URL, so that the page can obtain the query parameter query related 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 code