The front-end quick explode

  • Firefox released 87

    • Functions & Features
      • Added the SmartBlock function. SmartBlock provides an alternative for scripts blocked by Firefox to prevent websites from displaying incorrectly under privacy browsing and strict enhanced tracking protection, ensuring that websites display properly.
      • The HTTP Referrer is cropped by default to protect user privacy. The default will beReferrer-PolicyModified tostrict-origin-when-cross-originTo reduce the risk of exposing sensitive information in cross-domain requests, this means that path and query string information is no longer included in the HTTP Referrers by default.
      • Using “Highlight All” when using page lookup shows matching locations along the scroll bar.
      • The default openbeforeinputEvents andgetTargetRanges()Method that allows Web applications to override text editing behavior before the browser modifies the DOM tree, thereby providing more control over text input to improve performance.
    • Developer tools
      • The Inspector panel adds a button to simulate a bright or dark theme for matchingprefers-color-schemeMedia queries, developers no longer need to change from system Settings.
      • Inspector adds dummy classes:targetTo match the style of the page unique element (ID) when activated.

  • Chrome has launched a program called Compat2021, which aims to eliminate compatibility pain points for Web development. Here’s why this is possible from research, testing, usage, and more:

    • CSS Flexbox
      • Research: This is the number one question in the MDN browser compatibility report, which is most known and used in CSS.
      • Testing: 85% pass rate in all browsers.
      • Usage: 75% of pages in use, strong growth in HTTP Archive.
    • CSS Grid
      • Survey: Runner-up in the MDN browser compatibility report, this property is well known but less commonly used in CSS.
      • Testing: 75% pass rate in all browsers.
      • Usage: 8% of pages are in use and growing fast.
    • CSS position: sticky
      • Research: mentioned several times in MDN browser compatibility reports, well known and often used in CSS.
      • Testing: got a 66% pass rate in all browsers.
      • Usage: 8% of pages are in use.
    • CSS aspect-ratio property
      • Research: Well known but not widely used.
      • Testing: got a 27% pass rate across all browsers.
      • Usage: 3% of pages are in use.
    • CSS transforms
      • Research: Well known and often used.
      • Testing: achieved a 55% pass rate in all browsers.
      • Usage: 80% of pages are in use.

  • The TypeScript team announces that it has rewritten the TypeScript manual

    • The JavaScript tutorial section has been removed (because there are plenty of resources to learn JavaScript online and through books).
    • Progressive teaching.
    • Provide the latest code examples when releasing a new TypeScript version.
    • Write daily use cases.

  • Starting with Chrome 90, change the default protocol to HTTPS when no protocol is specified in the address bar to improve privacy and speed of accessing HTTPS enabled sites. For sites that do not yet support HTTPS, Chrome will fall back to HTTP when HTTPS attempts fail (including certificate errors, such as name mismatches or untrusted self-signed certificates, or connection errors, such as DNS resolution failures).

chest

  • Aladino is a WebGL-based website effects tool that enhances your website with “shader effects”. This is a small file library (about 5KB when compressed) and has no dependencies.

  • Piscina is a fast and efficient implementation of node.js worker thread pools.

  • LinkDOM is an alternative to JSDOM, using JavaScript to parse HTML strings and return a DOM object on which the DOM interface is implemented. It is smaller, faster, and uses less memory than JSDOM.

This issue is edited by @Ink dust; Review: @ a trace.