Basic Capabilities

[00:00:00]
>> Let's start talking about basic capabilities that we won't cover today. And I will explain why we are not going to cover this today. First, how many capabilities do we have on the web? Hundreds, actually, because even without counting CSS, just talking about JavaScript APIs. How many APIs are we going to cover today in this workshop?

[00:00:23]
36, so we will spend minutes talking about 36 different capabilities. But there are a lot of other capabilities that are more core, or more on the edge, like use cases, that we are not going to cover today. I will just mention that that exists, and that's all. And for the basic capabilities, you have the Frontend Masters library that you know is the best library out there to learn about web development, right?

[00:00:52]
And you will find a lot of information and experience with those APIs. And that's, for example, using the Fetch API for networking. Web Workers for threading. Remember, we are not going to talk about these today. WebAssembly, that lets you run WebAssembly modules that are actually native code that you can write with a lot of languages, from C to Kotlin, to Swift, to TypeScript.

[00:01:23]
You compile that into native code and then you can run it natively. So WebSockets, that's how to open the socket to a server. WebRTC, real-time communication. Web performance APIs, I have another workshop here at Frontend Masters on web performance. The network information API that will let you know if you are connected through Wi-Fi, 4G, if you're offline or not.

[00:01:48]
Device memory that's, how much RAM do you have in the computer? That's very specific. WebOTP, that's a one-time password. I'm not sure if you've ever heard about that, one-time password? So that's when you get an SMS with a confirmation code, when you are signing up in your website.

[00:02:09]
There is an API now that can read the code from the SMS, from JavaScript, so then you don't need the user to go to the messages, copy and paste the code. And so that's an API for doing that. Web crypto that has nothing to do with cryptocurrencies or the blockchain.

[00:02:25]
It's had to do with cryptography, the original cryptography, that if you wanna encrypt or decrypt, okay? Things, so we are not going to cover these capabilities. Also we won't cover storage capabilities, why? Because in Frontend Masters you already have another course on this, and probably you know that guy that appears there.

[00:02:50]
So there is a Web Storage APIs course that I did, that there we cover web storage, that's local storage, IndexedDB, cache storage, and how to access the real FileSystem. So how to open files and write files in the FileSystem. So we won't touch those APIs today. Also, we won't be covering today a lot of UI capabilities that can be around CSS, or things around, for example, web components.

[00:03:20]
If you're interested in that, I also did a workshop on Vanilla JS. CSS, we won't cover that, or Canvas, it's an API to render graphics on the screen, low-level. WebGL for 3D, pointer lock, this is typically for gaming. In that case, you can use your mouse or your trackpad and you won't see the cursor anymore.

[00:03:44]
You can use that to just move, for example, a viewpoint in a game. So that's pointer lock. A screen capture that will let you, for example, if you are doing a meet or a Zoom call, and you wanna share your screen, that's how that works. So there is an API that will capture your screen.

[00:04:04]
So we won't cover that. Also, we won't cover basic PWA capabilities. Don't worry, we have a lot of capabilities that are pretty cool that we will see. It's not just negative stuff here. So on Frontend Masters after this course you can go get my, Build PWA from Scratch course where you will learn about service workers, the Web App Manifest that will let you create a PWA that will install an icon on a user's computer as a native app.

[00:04:37]
Background capabilities, so can we execute JavaScript in the background? So there are a couple of APIs that we took in another workshop, a full day on that, okay? So that's page visibility, background sync, that will let you execute or sync data in the background. So if the user is closing your web app, or even if it's closing the browser, background fetch, and even web push and notification.

[00:05:04]
So if you wanna send a notification from the server to your users while the user is not even using your app, well, there is an API for that. It's called Web Push, okay? And it has its own unique problems, advantages. Now it's available on iOS as well, only for PWAs.

[00:05:22]
Well, if you wanna get more into that, so you have JavaScript in the background workshop at Frontend Masters as well. It's a full day on that topic. And again here, I'm just listing a lot of capabilities that I'm not saying they're not important. But in fact they are important enough to have a full day only on those APIs, okay?

[00:05:47]
Media session, as well, that's how you can play audio or video in the background, and have controls even if the user gets out of your website. You can continue playing in the background and then for example you can use your Apple Watch. Or if you're in a car, you can use Android Auto or CarPlay from iOS.

[00:06:08]
And then stop, pause, and play with your audio from the car to your web app that is currently being executed in your phone. Security capabilities, also we won't cover. I think this is the last workshop that I'm promoting from Frontend Masters that I did. For example, if you want web authentication, that for example, it's a new way that we have today on the web to log in into websites without passwords, what is known as password-less authentication.

[00:06:43]
So if you wanna see how to do that, that's a very nice capability on the web these days, that lets you use credential management so you can store credentials client-side. It's like storage for credentials, like username and password, for example. And you can use these for, for example, face ID with your iPhone.

[00:07:05]
So if you wanna log in your users in your website with face ID, or touch ID, or Windows Hello on desktop, then you can use those APIs, okay? That's a huge capability API that you have on the web. And from today, what I want you to take is to remember that API exists, and is there.

[00:07:26]
And if you wanna get deeper into that after this video, you have more videos to watch and more workshops to do with more code.