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
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-ofloops 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
enterkeyhintattribute - Web Authentication API
- CSS
- system font families:
system-ui,ui-sans-serif,ui-serif,ui-monospace, andui-rounded line-break: anywhere-
:is()and:where()pseudo-selectors
- system font families:
- 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.
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.
- https://developer.apple.com/videos/play/wwdc2020/10665/
- https://developer.apple.com/documentation/safariservices/safari_web_extensions
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.
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.
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
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.
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.
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
Announcing TypeScript 4.0 Beta
- https://devblogs.microsoft.com/typescript/announcing-typescript-4-0-beta/
- https://httptoolkit.tech/blog/whats-coming-in-typescript-4
Polly.JS v5.0.0
create-nuxt-app v3.1.0
cypress v4.9.0
react-query v2.0.0
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!
Top comments (0)