After all, 2020 is an extraordinary year. We have gone through many ups and downs. Even due to the COVID-19 outbreak, Chrome has had a rare break, with Chrome 82 absent. But the Web ecosystem remains vibrant, and a host of new features continue to emerge.

Standards and Protocols

ECMAScript

  • ES2020 was released on schedule, and all previous proposals that made it to Stage 4 were incorporated into the formal specification.

  • Import () : used to dynamically load modules;

  • Import. meta: An object that carries meta information about a module;

  • Export * as newModule from ‘package’ : a new aggregate export syntax;

  • New optional chain operator? . : Can check whether a property exists before it is accessed or a method is called.

  • New null merge operator?? : provides a default value, indicating that the context is null or undefined;

  • New BigInt base value type: can represent integers with absolute value greater than 2^53-1 without loss of precision;

  • New promise.allsettled () : return a Promise that has entered the fullfilled or Rejected state for all given Promises, with an array of objects representing the corresponding Promise result;

  • New String. Prototype. MatchAll: one contains all the results of the regular expression matching and the packet capture group of iterators. The difference between matchAll and regex.prototype.exec is that to get all matches, you need to call.exec() multiple times in the regular expression with the /g flag, whereas matchAll only needs to be called once.

  • Added globalThis: to solve the problem that global object names are not uniform in different browsers, Node.js and other environments, and it is difficult to obtain global objects.

CSS

features

  • Flexbox has been fully popularized, vertical center is no longer the front end of the “working people” trouble silk. All kinds of hacks, such as wings and grail layout, are drowned in history.

  • Flexbox also supports the Gap attribute, which makes it easy to adjust the distance between adjacent elements.

  • CSS Grid is supported by all major browsers and is widely known and used. Subgrid was released in Firefox 71. Float and inline-block are no longer the preferred page layout. CSS layout is moving from one-dimensional to two-dimensional.

  • The aspect-ratio attribute is now supported in Chrome 88, which makes it easy to scale elements equally.

  • Firefox innovatively implements the waterfall flow layout (Grid-template-rows: navigation) based on CSS Grid and pushes it into the specification, which will have better performance than the JavaScript solution.

  • Container Queries have made real progress and Chrome is on a fast track to implement them. With its responsive components, you can set different styles depending on the container size;

  • Chrome 86 and Firefox 85 support :focus-visible false class, which controls the focus style of the keyboard alone, please stop using * {outline: none; }, instead :focus:not(:focus-visible) {outline: none; } :focus-visible { outline: auto; }, which not only makes the mouse click without a focus box, but also keeps the keyboard Tab button when the focus box appears, making the page more accessible.

Technical field

The data is from The State of CSS 2020

  • Processor: Of the three preprocessors (Sass, Less, and Stylus), Sass is the most satisfied and the other two are relatively low, with a large proportion of people switching to PostCSS. LibSass is deprecated and no longer supports the development of new features. LibSass and Nod-sass will continue to be maintained indefinitely based on best efforts, including fixing major bugs and security issues, and remaining compatible with the latest versions of Node.js.

  • CSS framework: With the continuous pursuit of CSS-in-JS and the emergence of Tailwind CSS like “Practical Atom”, we are forced to rethink the meaning of CSS semantic class names. In traditional CSS frameworks, users are less likely to continue using Bootstrap, while pure. CSS is not less popular.

  • Css-in-js: CSS Modules and Styled Components remain in the first camp;

  • Linter: Stylelint remains the leader in Style Lint. Prettier is an “all-purpose” formatting tool that supports native CSS, SCSS, and Less syntax. It is the only way for developers to format styles, and it is used with Git Hooks.

The technology

WebAPI

  • With Chrome 87, you can now pan, tilt, and zoom your camera in JavaScript.

  • Web NFC on Chrome 81 to enter the initial trial plan;

  • The WebP image format is now supported in Safari 14, and is now supported in all four major browsers (Chrome, Firefox, Edge, and Safari).

  • Safari 14 supports user Authentication by calling Face ID and Touch ID through Web Authentication API.

  • Update the Display Locking proposal for high DOM rendering pressure scenes again;

  • AVIF (AV1 Image File Format), the next generation of Image Format has come, this Format is about 50% smaller than JPEG, WebP 20% smaller than the performance of this, Chrome 85, Firefox 77 has supported;

  • The HTML EnterKeyHint property is supported in Chrome 77 and Safari 13.1. (Firefox supports the private MozactionHint property.)

  • The W3C Immersive Web Working Group has published the first public working draft of the Level 1 specification for the WebXR gesture input module, which has the capability to track joint gestures and can be used to identify hand joint postures or render gesture models in VR scenes.

Security and privacy protection has been improved

The year 2020 marks the third year of the MANDATORY GDPR in the European Union, and the third year of Meltdown and Spectre. In 2020, browser security and privacy policies have made a lot of progress.

  • Support for offline security risks: Support for offline security risks:

  • Chrome 84+, Firefox 74+, Safari 13.1+

  • FTP is logged out in Safari 14+ and Chrome 87+, and will be logged out in a future version of Firefox.

  • Flash has been offline in Safari 14+ and will be offline in Chrome 88+ and Firefox 85+.

  • Cross-site isolation optimization:

  • In early 2018, high-precision timers and Shared Memory APIS were disabled due to the exposure of the Spectre vulnerability. To prevent these vulnerabilities, browsers need to ensure that different sites are isolated from each other in different processes.

  • To ensure cross-site process isolation, the cross-origin-opener-Policy and cross-origin-embedder-policy return headers were designed. Firefox 79+ and Chrome 88+ support for the Shared Memory API will be switched back on when they are correctly returned by the server;

  • XSS prevention:

  • In Safari 13.1+, third-party cookies are completely disabled and javascript-writable storage is retained for up to one week;

  • In Safari 14+, cookies for cross-domain resources are completely disabled unless the user’s consent is explicitly obtained via the Storage Access API. The domain name Cookie of a third-party CNAME can be valid for a maximum of 7 days.

  • In Firefox 79+, a new version of intelligent XSS Prevention (ETP 2.0) is available, which will clear the related Cookie Settings determined to be XSS every 24 hours.

  • Cache granularity optimization:

  • Chrome 85+, HTTP caching uses more fine-grained keys (ETLD+1);

  • Firefox will implement the same granularity of cache keys after 85;

  • Safari 12.1+ implements key control mechanism for the top Window domain name + URL;

  • The new caching mechanism isolates the cross-domain requests inside and outside the IFrame, and effectively avoids the privacy issues such as site access sniffing, cross-site search attacks, cross-site access tracking, etc.

  • Other security policies:

  • Chrome 83+ supports Trusted Types to prevent DOM-based XSS;

  • Chrome 80+ has added the SameSite Cookie default value, SameSite=Lax, to improve site security and protect against a large number of CSRF vulnerabilities at source.

  • Navigation to an unknown protocol using location.href or
    in Firefox 76+ will be prevented.

Frameworks and solutions

The framework

— There are no new concepts in React 2020. React Hooks went from being noticed in the community to actually being launched. Vue 3.0, the long-awaited release of Vue 3.0, keeps its own features while taking a bite out of React.

  • React released version 17, which claims to be a major update with no new features, providing the ability for multiple versions of React to coexist;

  • After two years of continuous efforts and 2600+ submissions, Vue 3.0 has released the official version code-named One Piece:

  • Modules are repartitioned: the runtime size can be reduced by nearly half. Separate packages can also be reused in more scenarios: AST transformations, custom renderers (such as small programs), responsive systems that can be pulled out and used independently;

  • New Composition API: A new API that preserves the existing object-based API to achieve React Hook-like logic reuse;

  • Performance improvements: There are significant performance improvements in packaged file size (41% less in tree-shaking), initial rendering (55% faster), updates (133% faster), and memory usage (54% less) compared to Vue2, with template compile-time optimizations contributing greatly to the performance improvements;

  • Better TypeScript integration: Written in TypeScript, Vue3 has excellent support for TS type inference in the new Composition API. The official VSCode extension Vetur supports type checking in templates, and Vue3 has full SUPPORT for TSX.

Webpack has more competition

The love-hate relationship with Webpack has led to the creation of new development toolchains with new ideas or more radical technologies, and has spurred Webpack to accelerate the pace of self-iteration.

  • Webpack 5.0 was released, a major update in two and a half years, with improved build performance through persistent caching and reduced package size through better Tree Shaking and code generation.

  • Vite quickly gained attention as the author of Vue’s new project, based on browser native ES imports, with faster cold starts and hot updates, regardless of the number of modules. There is no packaging process, the source code is transferred directly to the browser using the native

  • Snowpack 2.0, a modern packaging tool based on native ES Modules (ESM), has been released. It takes less than 50 milliseconds to start up, keeps things running fast in large projects, and has built-in support for TypeScript, JSX, CSS Modules, and React, Preact, Vue, Svelte and other front-end development frameworks;

  • Babel author Sebastian McKenzie has unveiled Rome, a JavaScript toolchain that includes compilers, code style checking, formatting, packaging, testing frameworks, and more. Highlights include zero third party dependencies and simplified API configuration.

Thank you

This year is the third year of the front end fast blast, thanks to four rotating editors: Cheng Hu, A trace, Chi Bing, ink dust, and guest editor: Ziyunfei. Thank you all the way to accompany, every word of consideration, only these three years of precipitation.

Of course, we need to thank the fans most. Thank you for your attention and likes all the time, which gave us great motivation. In the New Year, we will continue to uphold the spirit of originality, refinement and strictness, and move forward together!

errata

  • Yuyuxi: Rome has nothing to do with Facebook anymore. Sebastian McKenzie, who left for Discord, has quit his job to work on Rome full time with donations.

This edition editor: a silk, cheng Hu, ice pool, ink dust; Review: All editors.