This October brought us a couple of big releases mostly focused on backend development, like Node and npm. However, some additional useful tools were discovered this month, which may come in handy in everyday problem solving or investigation of exclusive cases.

So let's dive into the latest JS updates and materials. And please, don’t miss the "For fun" section.

News

A ton of changes in released webpack 5

Quite a significant release, which is ready for migrations, includes the following updates:

  • The build speed improved
  • Support for long-term caching of bundles improved
  • Improvement of tree shaking 
  • A new approach for working with assets: no more need to install additional loaders - for example, file-loader, url-loader, raw-loader
  • Assembly code can be generated in ES2015 standard
  • Web platform compatibility improved: Support for Top Level Await, JSON Modules, WASM Modules, import.meta.

With the 5th version, another new feature became available - Module Federation. It allows an application to borrow code from other applications transparently. This enables splitting one large SPA into several small ones. From the user's point of view, this SPA will work as a whole, but it can be developed and deployed by different teams independently from each other.

webpack.js.org

Presenting v7.0.0 of the npm CLI

This month, there was a boost in Node ecosystem updates. The Package manager has got some breaking changes, such as the automatic installation of peerDependencies. Also, npx has been completely rewritten to use the npm exec command, and the npm audit command output has changed. It is worth mentioning that the 7th version will not be marked as the latest.

Talking about new features - support for workspaces has been added, Package-lock uses a new format to ensure that builds are reproducible, and support for yarn.lock has also been introduced for getting metadata information and dependency resolution.

github.blog

Node.js v15.0.0 came out

Node now goes with the new 7th version of npm with the features described above. In the new Node version, the following noteworthy changes happened:

  •  V8 has been updated to version 8.6. With the new version of the engine, Node.js now supports Promise.any (), AggregateError, logical assignment operators && =, || =, ?? =, String.prototype.replaceAll ()
  • Experimental support has been added for the new QUIC transport protocol, which underlies HTTP/3
  • Unhandled promise errors will throw an exception and cause Node.js to stop running unless global unhandledRejection handling has been set
  • Experimental support has been added for AbortController, a Web API that can be used to override a promise-based API
  • N-API - API for creating addons - has been updated to the 7th version

medium.com/@nodejs


Browsers

Gaining security and privacy by partitioning the cache

Eiji Kitamura's article describes cache novelties to be implemented for all the modern browsers - in particular, in Chrome.

Previously, if a resource was loaded and it turned out to be cached by another site, the browser fetched this resource from the cache, no matter what. The problem is that such a behavior of the browser leads to privacy problems.

Chrome 86 has started to use the "Network Isolation Key" for the name of the cache key, which consists of the site name and the site of the current frame.

For now, cache isolation is enabled in Chrome and Safari. It is also supported in Firefox - however, disabled by default. So, take a note that you can enable it with the privacy.firstparty.isolate flag in about: config.

developers.google.com

Firefox 82 released this month

 In this version, the focus was on the speed of the browser: flex layouts work 20% faster, sessions - restored 17% faster, opening new windows in windows - 10% faster. There were also introduced the work results with the video improvements ( support for hardware video decoding in Windows). In addition, minor issues with DOM API were fixed.

For developers, the most interesting part would be the following updates:

  • In DevTools "Network" tab, it is now possible to inspect server-sent events (SSE)
  • Media Session API support has been enabled. Using this API, you can integrate information about the currently playing track into the system notifications and handle prominent media events on the keyboard, remote controls, and headphones

mozilla.org


CSS

A detailed guide to Media Queries

The article explains expressions’ anatomy, available types, features and operators, as well as their browser support. Multiple features added into Media Queries Level 4 are centered around accessibility, also described as prefers-contrast, prefers-reduced-motion or inverted-colors. 

Also, there is Media Queries Level 5 draft briefly discussed, which will bring new opportunities for design adoption.

css-tricks.com

Introduction of Airbnb's visx, a collection of low-level rendering primitives in React

Airbnb blog has introduced a new project that brings together the power of D3 with the joy of React. Upon a thorough analysis of existing solutions, an engineering team ended up with the creation of visx - visualization components, which are combined to a suite of over 30 separate packages of React visualization primitives. The authors have prepared a short FAQ that allows you to compare the benefits of the library by yourself.

medium.com/airbnb-engineering