loading...
Cover image for Safari 14 preview, WWDC 2020 announcements, what's new in Chromium DevTools | Front End News

Safari 14 preview, WWDC 2020 announcements, what's new in Chromium DevTools | Front End News

adriansandu profile image Adrian Sandu ・5 min read

Front End News Season 2 (12 Part Series)

1) Web Vitals metrics from Google, Firefox 76 update, GitHub Satellite 2020 announcements | Front End News 2) Say "Hello" to Deno, what's new in Chrome 84 DevTools, TypeScript 3.9 and the Mozilla Builders Incubator | Front End News 3 ... 10 3) Lighthouse 6.0, what's new in Chrome 83, highlights of MS Build 2020 | Front End News 4) Responsive web design turns ten, tools to measure web vitals and browser news | Front End News 5) Bootstrap 5 Alpha is available, Flash Player EOL plans and the 2019 Web Almanac in PDF format | Front End News 6) Safari 14 preview, WWDC 2020 announcements, what's new in Chromium DevTools | Front End News 7) Web Dev LIVE binge-watching, Firefox 78 update, and help needed for the 2020 Web Almanac | Front End News (Snakes edition) 8) Lighthouse 6.1, VSCode 1.47, and tracking frameworks performance with Perf Track | Front End News 9) The new CSS Zen Garden, Chromium 84 updates and Rachel Andrew's CSS news for July | Front End News 10) MDN gets 15, Software Releases and the #100DaysOfProjects challenge | Front End News 11) 10 Years of Web Fonts, GitHub roadmap, Firefox 79, and Beta CanIUse | Front End News 12) 1 Million Netlify devs, JS1024 results, CFP for JS12KGames and Results for State of Frontend 2020 | Front End News

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

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:

  1. Safari passes over 140.000 inter-operability tests over the last year.
  2. 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
  3. 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
  4. CSS
    • system font families: system-ui, ui-sans-serif, ui-serif, ui-monospace, and ui-rounded
    • line-break: anywhere
    • :is() and :where() pseudo-selectors
  5. 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
  6. JavaScript
    • BigInt support
    • Nullish coalescing operator
    • Logical assignment operators (new in Safari 14)
    • Public class fields (new in Safari 14)
    • String replaceAll
  7. 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.

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)

Match keyboard shortcuts in the DevTools to VS Code

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)

Lighthouse 6 panel

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

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!

Front End News Season 2 (12 Part Series)

1) Web Vitals metrics from Google, Firefox 76 update, GitHub Satellite 2020 announcements | Front End News 2) Say "Hello" to Deno, what's new in Chrome 84 DevTools, TypeScript 3.9 and the Mozilla Builders Incubator | Front End News 3 ... 10 3) Lighthouse 6.0, what's new in Chrome 83, highlights of MS Build 2020 | Front End News 4) Responsive web design turns ten, tools to measure web vitals and browser news | Front End News 5) Bootstrap 5 Alpha is available, Flash Player EOL plans and the 2019 Web Almanac in PDF format | Front End News 6) Safari 14 preview, WWDC 2020 announcements, what's new in Chromium DevTools | Front End News 7) Web Dev LIVE binge-watching, Firefox 78 update, and help needed for the 2020 Web Almanac | Front End News (Snakes edition) 8) Lighthouse 6.1, VSCode 1.47, and tracking frameworks performance with Perf Track | Front End News 9) The new CSS Zen Garden, Chromium 84 updates and Rachel Andrew's CSS news for July | Front End News 10) MDN gets 15, Software Releases and the #100DaysOfProjects challenge | Front End News 11) 10 Years of Web Fonts, GitHub roadmap, Firefox 79, and Beta CanIUse | Front End News 12) 1 Million Netlify devs, JS1024 results, CFP for JS12KGames and Results for State of Frontend 2020 | Front End News

Posted on by:

adriansandu profile

Adrian Sandu

@adriansandu

I am a UX Front-End Developer, consultant, creator and speaker currently living in Iasi, Romania.

Discussion

markdown guide