State of CSS 2021, Chrome 94/95, Firefox 92/93, Vivaldi 4.2/4.3, Node 17, and more | Front End News #040
Tags: news, frontendnews
Published: 2021-10-28 02:34:59

> **NOTE:** This is issue #040 of my newsletter, which went live on Monday, October 25th. If you find this information useful and interesting and you want to receive future issues as they are published, ahead of everyone else, I invite you to join the subscriber list at [frontendnexus.com](https://frontendnexus.com/).

***

The 2021 edition of the State of CSS survey is up again. The Web Almanac team is already looking for collaborators for the next year's edition. The js13kGames 2021 winners have been announced. We have double updates from most browser vendors: Chrome 94 and 95, Firefox 92 and 93, Vivaldi 4.2 and 4.3. The software updates are numerous as well, including Node 17, npm 8, TypeScript 4.5 Beta, Electron 15, and many, many more.

***

## State of CSS 2021

The State of CSS survey is a very valuable tool for the industry as a way to measure what developers really use in their day-to-day work. So here we are, already, with the 2021 edition. Have you taken it yet?

- [State of CSS 2021 Survey](https://stateofcss.com/)

***

## 2022 Web Almanac Interest Form

What surveys do by asking people directly, the Web Almanac does by scrapping data from real websites. Previous editions have enjoyed an awesome reception from the industry and the 2021 edition is expected to be published soon. Yet, the team behind the project is already looking to collaborators for next year's edition. If this is something that might interest you, then use the form below to sign up.

- [2022 Web Almanac Interest Form](https://docs.google.com/forms/d/e/1FAIpQLSezsQmHufYjJqN1H18bUN8G8Qe1B-h02TMAlWVx6H7vWH0RtQ/viewform)

***

## js13kGames 2021 winners

js13kGames is a JavaScript coding competition running yearly since 2012. This year the theme of the event was "Space" and the jury has picked up the winners. A special mention is a partial recreation of the classic Quake video game - I tried it already and it is really awesome.

- [Check out the js13kGames 2021 winners!](https://js13kgames.com/#winners)
- [Q1k3](https://js13kgames.com/entries/q1k3)

***

## Browser news

### Brave

Brave Search is now the default search engine option for new users in five countries: USA, Canada, UK, France, and Germany. If you use the browser already, then your current choice is preserved, but you have the possibility to make the switch.

- [Privacy-preserving Brave Search Replaces Google as the Default Search Engine in the Brave Browser](https://brave.com/search-and-web-discovery/)

### Chrome

There have been TWO Chrome updates since I published the latest update, which means there are a lot of things to cover.

Chrome 94 opens up two new APIs: **Web Codecs** (for low-level access to built-in media components and codecs) and **WebGPU** (for access to Direct3D 12, Metal, and Vulkan functionality). Last but not least `<canvas>` elements start now by default in *sRGB* color space, with the option to switch to the P3 one at any time.

- [New in Chrome 94](https://developer.chrome.com/blog/new-in-chrome-94/)

Developers can now set DevTools in their preferred language, container queries are now marked with a new interactive badge, and a lot more.

- [What's New In DevTools (Chrome 94)](https://developer.chrome.com/blog/new-in-devtools-94/)

We arrive now at the latest release, and there are two new APIs in Chrome 95 as well. **URLPattern** standardizes routing pattern syntax, while the **Eye Dropper** API makes picking up a color a breeze.

- [New in Chrome 95](https://developer.chrome.com/blog/new-in-chrome-95/)

Chrome 95 Dev Tools now bring new CSS length authoring tools, an improved way to display properties, an update to **Lighthouse 8.4**, and more. For full details, you should check the official blog post linked below.

- [What's New In DevTools (Chrome 95)](https://developer.chrome.com/blog/new-in-devtools-95/)

### Firefox

Coming to Firefox, there are two new releases for this browser as well.

Firefox 92 brings more secure connections, as the browser can now automatically switch to HTTPS. There are also many quality-of-life improvements for the end-users, especially those using devices running macOS.

Developers can now enjoy two new features. There are some CSS updates making `accent-color` and `size-adjust` available to everyone, as well as changes to `break-inside`, `font-size-adjust`, and `system-ui`. On the JavaScript side, there is now support for the new `Object.hasOwn()` static method. More details are available in the announcement post.

- [Time for a review of Firefox 92](https://hacks.mozilla.org/2021/09/time-for-a-review-of-firefox-92/)

Firefox 93 brings over support for the AVIF image format, better memory management, downloads from insecure sources are blocked by default, and more.

Developers now have access to static initialization blocks in JavaScript and better support for custom elements and the Shadow DOM. I can't claim to understand much of what's happening here, so feel free to check the release notes for more details.

- [Lots to see in Firefox 93!](https://hacks.mozilla.org/2021/10/lots-to-see-in-firefox-93/)

### Vivaldi

Vivaldi has - you guessed it - two new releases: 4.2 and 4.3.

The 4.2 update brings private in-page translation, easy sharing of information via QR codes, and many smaller improvements and fixes (full details in the link below)

- [Vivaldi 4.2: Vivaldi translates selected text into a selection of languages, more privately.](https://vivaldi.com/blog/vivaldi-translates-selected-text-into-a-selection-of-languages-more-privately/)

Vivaldi 4.3 now blocks the **Idle Detection** API from Google, support for Progressive Web Apps, an improved tool for screenshots, 68 new languages for the translation tool, and more.

- [Vivaldi 4.3: Big update alert: Vivaldi says no to Google Idle API, improves Capture, Download Panel, Sync, adds 68 new languages to Translate, and more.](https://vivaldi.com/blog/vivaldi-gets-more-private-delivers-an-all-new-capture-pwa-support/)

### WebKit

I wish Safari would have released two new versions as well, but I have to be content with two releases of the Safari Technology Preview instead.

Update 132 brings a long list of fixes and small improvements. But I think update 133 takes the spotlight with support for `Object.hasOwn`, CSS Cascade Layers, the CSS Font Loading API, basic support for the Storage API, and a lot more. Feel free to check the release notes for full details.

- [Release Notes for Safari Technology Preview 132](https://webkit.org/blog/11971/release-notes-for-safari-technology-preview-132/)
- [Release Notes for Safari Technology Preview 133](https://webkit.org/blog/11975/release-notes-for-safari-technology-preview-133/)

***

## Software updates and releases

There is a surprising number of major version updates in this issue: Electron 15.0.0, Ember 4 Beta, ESLint v8.0.0 RC0, Gatsby 4, MUI v5.0.0, or Neutralinojs v3.0.0, to name just a few of them. Of course, there's a lot more: Deno 1.14, TypeScript 4.5 Beta... There is even an update for jQuery UI. When was the last time you heard of a jQuery UI update?

- **[CKEditor 5 v30.0.0](https://github.com/ckeditor/ckeditor5/releases/tag/v30.0.0)** - powerful rich text editor framework
- **[Compressor.js v1.1.0](https://github.com/fengyuanchen/compressorjs/releases/tag/v1.1.0)** - JavaScript image compressor
- **[Dart Sass 1.40.0](https://github.com/sass/dart-sass/releases/tag/1.40.0)** - the reference implementation of Sass, written in Dart
- **[Deno 1.14](https://deno.com/blog/v1.14)**
- **[Electron 15.0.0](https://www.electronjs.org/blog/electron-15-0/)** - build cross-platform desktop apps with JavaScript, HTML, and CSS
- **[Eleventy 1.0 Beta](https://www.11ty.dev/blog/eleventy-v1-beta/)** - a simpler static site generator
- **[Ember 3.28 and 4.0 Beta](https://blog.emberjs.com/ember-3-28-released/)** - a framework for building ambitious web applications
- **[Ember Simple Auth v4.0.0](https://github.com/simplabs/ember-simple-auth/releases/tag/4.0.0)** - A library for implementing authentication/authorization in Ember.js applications.
- **[ESLint v8.0.0 RC0](https://github.com/eslint/eslint/releases/tag/v8.0.0-rc.0)** - find and fix problems in your JavaScript code
- **[Espree v9.0.0](https://github.com/eslint/espree/releases/tag/v9.0.0)** - an Esprima-compatible JavaScript parser
- **[Gatsby 4](https://www.gatsbyjs.com/blog/whats-new-in-gatsby-4/)**
- **[Handsontable v10.0.0](https://github.com/handsontable/handsontable/releases/tag/10.0.0)** - JavaScript data grid with a spreadsheet look and feel
- **[Immutable.js v4.0.0](https://github.com/immutable-js/immutable-js/releases/tag/v4.0.0)** - Immutable persistent data collections for Javascript
- **[Jasmine Core 3.10](https://github.com/jasmine/jasmine/blob/main/release_notes/3.10.0.md)** - simple JavaScript testing framework for browsers and node.js
- **[jQuery UI 1.13.0](https://blog.jqueryui.com/2021/10/jquery-ui-1-13-0-released/)**
- **[jsPDF v2.4.0](https://github.com/parallax/jsPDF/releases/tag/v2.4.0)** - https://github.com/parallax/jsPDF/releases/tag/v2.4.0
- **[Linkify v3.0.0](https://github.com/Hypercontext/linkifyjs/releases/tag/v3.0.0)** - find links in plain-text and convert them to HTML tags
- **[Meteor 2.4](https://docs.meteor.com/changelog.html#v2420210915)** - an open-source framework for web, mobile, and desktop applications in Javascript
- **[MUI v5.0.0](https://github.com/mui-org/material-ui/releases/tag/v5.0.0)** - (formerly Material-UI) component library to build React applications
- **[Neutralinojs v2.8.0](https://github.com/neutralinojs/neutralinojs/releases/tag/v2.8.0)** - portable and lightweight cross-platform desktop application development framework
- **[Neutralinojs v3.0.0](https://github.com/neutralinojs/neutralinojs/releases/tag/v3.0.0)**
- **[NVM for Windows v1.1.8](https://github.com/coreybutler/nvm-windows/releases/tag/1.1.8)** - a node.js version management utility for Windows
- **[Nuxt 3 Beta](https://nuxtjs.org/announcements/nuxt3-beta/)** - the intuitive Vue framework
- **[Parcel v2.0.0](https://parceljs.org/blog/v2/)** - the zero configuration build tool for the web
- **[Prettier 2.4](https://prettier.io/blog/2021/09/09/2.4.0.html)**
- **[React CountUp v6.0.0](https://github.com/glennreyes/react-countup/releases/tag/v6.0.0)** - a configurable React component wrapper around CountUp.js
- **[React Native 0.66](https://reactnative.dev/blog/2021/10/01/version-066)** - a framework for building native applications using React
- **[React Router v5.3.0](https://github.com/remix-run/react-router/releases/tag/v5.3.0)** - Declarative routing for React
- **[React Static v7.6.0](https://github.com/react-static/react-static/releases/tag/v7.6.0)** - a progressive static site generator for React
- **[renamer v4.0.0](https://github.com/75lb/renamer/releases/tag/v4.0.0)** - rename files in bulk
- **[Stimulus 3](https://world.hey.com/hotwired/stimulus-3-c438d432)** - a modest JavaScript framework for the HTML you already have
- **[TypeScript 4.5 Beta](https://devblogs.microsoft.com/typescript/announcing-typescript-4-5-beta/)**
- **[V8 release v9.5](https://v8.dev/blog/v8-release-95)** - Google's open source JavaScript engine

### Node and npm

I am separating again the updates to Node and npm and they have both major version updates. Node has reached version 17, while npm has reached version 8. Check out the details of each update in the notes linked below.

- **[Node v14.18.0 (LTS)](https://nodejs.org/en/blog/release/v14.18.0/)**
- **[Node v16.9.0](https://nodejs.org/en/blog/release/v16.9.0/)**
- **[Node v16.9.1](https://nodejs.org/en/blog/release/v16.9.1/)**
- **[Node v16.10.0](https://nodejs.org/en/blog/release/v16.10.0/)**
- **[Node v17](https://nodejs.org/en/blog/release/v17.0.0/)**
- **[What’s new in Node.js core?](https://simonplend.com/whats-new-in-node-js-core/)**
- **[npm v8.0.0](https://github.com/npm/cli/releases/tag/v8.0.0)**
- **[npm v8.1.0](https://github.com/npm/cli/releases/tag/v8.1.0)**


***

## Wrapping things up

That's about all I have for this update. If you enjoyed this newsletter, there are a couple of ways to support it. You can share the [link to this issue](https://frontendnexus.com/news/040/) on social media, and follow me on [Twitter](https://twitter.com/frontendnexus). Each one of these helps me out and I'd appreciate your consideration.

Have a great and productive time, keep yourselves safe, and I will see you again next time!