Safari 14 preview, WWDC 2020 announcements, what's new in Chromium DevTools

Hello everyone and welcome back to another episode of Front End News. I hope you will find the following topics both interesting and useful.

Safari, Web, and Authentication at WWDC20

WWDC2020 banner as seen on https://developer.apple.com/

Last week was under the sign of WWDC20, the long-expected Apple event. And while the hardware announcements were interesting, what I want to focus on is the news on the upcoming changes regarding web technologies.

What's new for web developers

There's a lengthy video on the Apple Developer website. If you don't have the time or the patience to watch it entirely, here are the highlights that caught my attention:

Safari passes over 140.000 inter-operability tests over the last year.
Browsing performance:
- faster page load and faster rendering of first page for PDF files while downloading
- faster closing of unresponsive tabs
- lower CPU usage for scrolling
- faster IndexedDB operations, `for-of loops and JavaScript promises and delete operations
A highlight of the Web APIs that were introduced in Safari over the last year
- Web Animations API
- Resize Observer
- Async Clipboard API
- Event Target Constructor
- CSS Shadow Parts for Web Components
- HTML enterkeyhint attribute
- Web Authentication API
CSS
- system font families: system-ui, ui-sans-serif, ui-serif, ui-monospace, and ui-rounded
- line-break: anywhere
- :is() and :where() pseudo-selectors
Media
- support for WebP image format
- default image aspect ratio and orientation
- Mac HDR display support
- Remote Playback and Picture-in-Picture APIs
- Timed metadata support
- Native rendering for subtitles and captions
JavaScript
- BigInt support
- Nullish coalescing operator
- Logical assignment operators (new in Safari 14)
- Public class fields (new in Safari 14)
- String replaceAll
Platform integration
- Customizing AR Quick Look
- Apple Pay updates with new buttons types and redacted billing information
- App Clips

That's a whole lot of stuff, isn't it? Still, shorter than going through the whole video. BUT... if any of these topics are of interest to you, do go through the video for all the extra references sprinkled inside.

https://developer.apple.com/videos/play/wwdc2020/10663/

Meet Safari Web Extensions

Safari will start adopting a web-based API for browser extensions. This will allow developers to import extensions from other browsers, as well as prepare their own Safari extensions to be used by everyone else.

The catch though is that the extensions need to be built or packaged using Xcode and they must be distributed in the App Store. I've never done anything like that before, but if this sounds familiar and interesting, you can find more details in the links below.

What's new in Web Inspector

Web Inspector is the developer tools suite integrated inside Safari. WWDC2020 included a special session regarding the recent and upcoming changes.

The interface of the tool was updated for a more unified look and feel, better accessibility, dark mode independent of the rest of the system, and new features to existing tabs.

There's too much stuff to enumerate and it's a lot more helpful to see the examples in the video, so I would encourage you to open the presentation from the link below.

https://developer.apple.com/videos/play/wwdc2020/10646

Safari 14 Beta Release Notes

We now also have access to the release notes for Safari 14 Beta. Some of the features were enumerated in the first presentation above. For the rest, you can check the official article.

Some people might say that Apple had a big part in causing the downfall of Flash. Safari 14 now marks the end of an era, as it completely drops Flash support. I've mentioned the Adobe plan for the Flash end-of-life in the previous episode, so we can expect all current browsers to drop that support before the end of the year.

https://developer.apple.com/documentation/safari-release-notes/safari-14-beta-release-notes

Release Notes for Safari Technology Preview 109 with Safari 14 Features

Some of the Safari 14 features have already landed in the Safari Technology Preview 109 update. As usual, the release notes are available on the WebKit blog

https://webkit.org/blog/10875/release-notes-for-safari-technology-preview-109-with-safari-14-features/

What's new in Chromium DevTools?

We move now from WebKit to Chromium as both Microsoft Edge and Chrome unveil what changes they have introduced in the latest versions of the DevTools.

What's new in DevTools (Microsoft Edge 84)

This article is split into two main parts - updates from the Microsoft Edge DevTools team and announcements from the Chromium project. Both lists are fairly consistent, but each topic is well explained with lots of screenshots.

https://docs.microsoft.com/en-us/microsoft-edge/devtools-guide-chromium/whats-new/2020/05/devtools

What's New In DevTools (Chrome 85)

The Google Chrome DevTools updates are just as consistent. Outside the updates coming from the Chromium project, the most interesting topic for me is that the Lighthouse panel now makes use of the latest Lighthouse 6 tool. This means you can now measure the new Core Web Vitals metrics directly in the browser.

https://developers.google.com/web/updates/2020/06/devtools

Software updates and releases

Here are the updates and releases for this edition. In each case, you can find the full details in the release notes linked down below.

Angular 10

https://blog.angular.io/version-10-of-angular-now-available-78960babd41

Announcing TypeScript 4.0 Beta

That's all there is in this edition. If you want a front-row seat to the selection process for the next episode, join me on Twitch every Saturday (go to twitch.tv/frontendnexus at 20:00 EEST). I am also working on bringing you new content on the YouTube channel. So you might want to subscribe at https://www.youtube.com/channel/UCgACtqiDmnSaskDIBsK54ww. Your support is highly appreciated.

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