Hey everyone and welcome to another round of Front End News. I am not back yet to the normal schedule - I am planning that for next month. There are more details about that at the end of the article. And I'm going to share more details about the things happening behind the scenes in the newsletter version (wink wink nod nod).
In this issue, we're taking a look at the new things coming in ES2022. We have the results of the JS1024 code challenge. There are updates from many browsers: Chrome 93, Firefox 91, Polypane 6.3, and four updates of Safari Technology Preview (from 128 to 131). The section on updates and releases is huge, with packages like Deno 1.13, Electron 14.0.0, Mongoose 6.0.0, TypeScript 4.4, Yarn 3.0, NodeJS, and many, many more.
What's new in ES2022?
ECMAScript specs are not the most readable documents. So it helps when people help condense and refine the information in a format easier to understand. This is the case with the elements that were included in ES2022, presented to us by Yagmur C. Tas. Here is a brief synopsis of what's coming to us next year:
- Class Fields
- Class Public Instance Fields & Private Instance Fields
- Private instance methods and accessors
- Static class fields and private static methods
- Ergonomic brand checks for Private Fields
- RegExp Match Indices
- Top-level await
Of course, there is a lot more detail in the article, with plenty of references to other sources. Enjoy!
JS1024 Results
I've mentioned JS1024 not too long ago, in issue 036. We now have the results, and there are some awesome creations in this year's crop. Definitely worth having a look at.
Browser news
Chrome
Chrome 93 is rolling out to users and this update brings some fancy new features. You can now load CSS Modules using import statements, you can manage multiple displays with the Multi-Screen Window Placement API. This is also the start of the new release cycle, where Chrome 94 will ship out in 4 weeks instead of 6 as it did so far.
As usual, there are plenty of changes in the DevTools as well. You can edit container queries directly in the Styles panel. Web Bundles can be previewed in the Network panel. You can measure performance with Lighthouse 8.1, and a lot more. Make sure to check the guide linked below.
We're also getting a preview of the upcoming changes for DevTools in Chrome 94. You will be able to work using your own language, out of over 80 options. Elements with container queries now have a container label. And so much more. You can already give these changes a try using the Canary release.
Firefox
Firefox users are also getting an update to version 91. Now all private browsing windows will automatically attempt to make all connections to websites secure. Connections will fall back to HTTP if the website does not support HTTPS. The ‘increased contrast’ setting enables High Contrast mode on macOS. Last but not least, developers can now use Visual Viewport API and some more additions to the Intl.DateTimeFormat object.
Polypane
We have a new release from Polypane as well. It brings new tools like the tunnel vision simulator, support for Web Manifest, better performance, and some UI changes (the most important one being the relocation of the reload button).
WebKit
The WebKit team has been very busy during this time. They released no less than four updates to the Safari Technology Preview. That's too much for even a summary, so I'll invite you instead to check the release notes.
- Release Notes for Safari Technology Preview 128
- Release Notes for Safari Technology Preview 129
- Release Notes for Safari Technology Preview 130
- Release Notes for Safari Technology Preview 131
Software updates and releases
As expected, there are a lot of updates for some well-known libraries (and some less known, but quite interesting). Packages like Deno 1.13, Electron 14.0.0, Mongoose 6.0.0, TypeScript 4.4, Yarn 3.0, and many, many more. I even had to make a separate section for NodeJS updates.
- Angular 12.2.0 - a development platform for building mobile and desktop web applications
- Bootstrap 5.1.0 - the world’s most popular front-end open-source toolkit
- Capacitor v3.2.0 - cross-platform apps with JavaScript and the Web
- Cypress v8.3.0 - fast, easy, and reliable testing for anything that runs in a browser
- Deno 1.13 - a secure JavaScript and TypeScript runtime
- drift v1.5.0 - add "zoom on hover" functionality to your site's images
- Electron 14.0.0 - Build cross-platform desktop apps with JavaScript, HTML, and CSS
- Ember.JS v3.28.0 - a JavaScript framework for creating web applications
- Hugo 0.86.0 - a fast and flexible static site generator built using Go
- Hugo 0.87.0
- Jasmine 3.9.0 - simple JavaScript testing framework for browsers and node.js
- JavaScript Cookie v3.0.0 - A simple, lightweight JavaScript API for handling browser cookies
- jest v27.1.0 - Delightful JavaScript Testing
- JZZ v1.4.0 - MIDI library for Node.js and web-browsers
- marked v3.0.0 - a markdown parser and compiler. Built for speed
- mocha v9.1.0 - a simple, flexible, fun javascript test framework for node.js and the browser
- Mongoose 6.0.0 - MongoDB object modeling designed to work in an asynchronous environment
- Neutralinojs v2.7.0 - Portable and lightweight cross-platform desktop application development framework
- Next.js 11.1 - the React Framework
- on-change v4.0.0 - Watch an object or array for changes
- OpenPGP.JS v5.0.0 - OpenPGP implementation for JavaScript
- react-markdown 7.0.0 - markdown component for React
- relay v12.0.0 - a JavaScript framework for building data-driven React applications
- Scala.js 1.7.0 - the Scala to JavaScript compiler
- socket.io v4.2.0 - Realtime application framework (Node.JS server)
- svgo v2.4.0 - Node.js tool for optimizing SVG files
- TypeScript 4.4
- V8 release v9.3
- VSCode July 2021 (version 1.59) - open source code editor
- Vue 3.2 - a JavaScript framework for building UI on the web
- ws v8.0.0 - a WebSocket client and server for Node.js
- Yarn 3.0 - fast, reliable, and secure dependency management for JavaScript
NodeJS
I need to make a special mention for NodeJS, for there are too many updates to include in the normal listing. The Current channel went from 16.6.0 to 16.8.0, the Long Term Support (LTS) channel covered versions 12.22.4 - 12.226 and 14.17.4 - 14.17.6, and don't forget about the July and August security updates. You can see the full list of updates on the official blog:
Wrapping things up
I decided to make this update for a couple of reasons. First, I wanted to cover some of the updates that have happened since the last issue. The alternative would have been a monster update and that's always hard to digest. Just look at the size of the Software Updates section.
Second, I wanted to do a live test for the changes I made to the website. I replaced a lot of hardcoded elements with functionality from Eleventy. And the most important update I made is moving the hosting from Media Temple to Netlify. I simply love the ability to deploy automatically from GitHub. There's no way I am going back to uploading files via FTP.
That's about all I have for this update. Have a great and productive time, keep yourselves safe, and I will see you again in a few weeks!