A Tour of Web Capabilities

Wrapping Up

Maximiliano Firtman

Maximiliano Firtman

Independent Consultant
A Tour of Web Capabilities

Check out a free preview of the full A Tour of Web Capabilities course

The "Wrapping Up" Lesson is part of the full, A Tour of Web Capabilities course featured in this preview video. Here's what you'd learn in this lesson:

Max wraps up the course by sharing some experimental capabilities, including the View Transition API, Popover API, and Picture in Picture API.

Preview
Close

Transcript from the "Wrapping Up" Lesson

[00:00:00]
>> Well, that's the end of the 36 APIs that I wanna cover as capabilities. But there are still more capabilities that we are not covering today. But I wanna mention them as well, in case you wanna get more information later after the workshop. That there are more experimental or really new, for example, EyeDropper.

[00:00:22]
With EyeDropper you can actually let the user pick a color from the screen, there is an API for that. Compression Streams, so you can zip and unzip content client-side without any additional library. WebGPU, that will let you talk directly to your GPU and create really high performance 3D content or 2D content, more performant than WebGL.

[00:00:51]
View Transitions API, this one is really cool. One of the problem of multi-page applications, so having different HTMLs, is that when you pass from one HTML to the other, you don't have a nice transition like on native apps. When you pass from one view or one screen to another one, you don't see a page load.

[00:01:13]
You see an animation, it can be this animation from here. Well, the idea is to bring something similar to the web. Compute Pressure, that will detect when your JavaScript is actually on compute. In fact, it's actually telling you when the CPU of that computer is getting into pressure.

[00:01:37]
Say, hey, be careful, because the CPU, I mean, we are rendering an 8K video, so then you can decide not to do some stuff. Popover, we already mentioned that as our example for, remember origin trials, we were using that one, Popover. Digital Goods API, this is for PWAs.

[00:02:01]
PWAs on Android that you publish in the App Store can use that API to charge users for subscriptions or for additional content using in-app purchase API. So using the money that you have on the store. Web Transport is another transport protocol. Picture in Picture, so for video, you can continue rendering content and the video in Picture in Picture even if the user is getting out of the browser.

[00:02:34]
The Presentation API, that will help, for example, making a presentation in an external display or an Apple TV. Screen Recorder, and there are more. So you can see it's an infinite list of capabilities. So today we've covered the basics of what the web capability is, the idea of the most important capabilities.

[00:03:01]
The basic ones that we didn't cover, I gave you links to continue your training on different capabilities and other workshops here at Frontend Masters. We've seen how permission and security works. Compatibility, that for a lot of APIs that we have mentioned today, it works on Safari, on Android, on iOS, and Chrome.

[00:03:22]
For others, it depends. Then we get into API for sensors, location, and input, such as multi-touch. Then speech, voice, and camera, hardware and devices. And finally integration with the operating system, and some of them are actually PWA capabilities. So I hope it was useful for you and you can use at least one or two of the APIs of the 36 that we mentioned.

[00:03:48]
And now you know the power of the web, okay? That there are a lot of things that you can do with a web that maybe you didn't know before, okay, so thank you.
>> [APPLAUSE]

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now