Introduction

[00:00:00]
>> So we are here for a tour of web capabilities. My name is Maximiliano. I know it's a long name ,11 characters. Typically I have problems with my boarding passes, because it doesn't fit. But anyway, Max is fine. I can go by Max. Really quickly, I'm a mobile web developer.

[00:00:18]
So I have been doing websites and web apps since 1996. So a few years after that, I have started doing JavaScript, of course. Initially, it was just HTML, pure HTML without server-side. Of course, then, I started doing backend, full stack, and I've seen all the different front end eras.

[00:00:42]
And I'm also a mobile developer. So I've always been focusing on the mobile space. I always liked the mobile space when it was really weird, like blackberries and Nokia devices, Symbian and I'm not sure if anyone remember that that one. But anyway, during during those times, I have created a lot of web apps using a lot of API's that we will cover today.

[00:01:07]
Of course, a lot of things have changed since then. But we will still see some API's that has been in a while for a couple of years. So I'm an author, so I have authored 13 books. You can see there my shelf with a lot of translations, so there is a trick there.

[00:01:25]
That's why you see more books, because there are translations on languages that I don't understand. And I have offered a lot of courses as well, online courses in the past 12, 13 years. And here, at Front End Masters, you will find a lot of courses from myself,. And I'm Firt on Twitter.

[00:01:43]
Firt.Dev, my personal website where you can see articles, my books, and YouTube videos and sessions that I've been doing over the past few years. But we're not here to talk about me, we're here to talk about capabilities. And the last piece of, let's say, text that I have authored, it's not really a printed book, it's an e-book on PWA.

[00:02:14]
Learn PWA that was published by the Google Chrome team at web.dev, and there is a full chapter on capabilities. So later today, we'll get into there, because we have a lot of links, nice links that I have created. By the way, that open source and it's a creative common, so it's free license to use.

[00:02:35]
And if you are interested in PWAs here at Front End Masters, I also offer a course on that, Build PWA from a Scratch. But also you have text-based information with examples here at web.dev. So today, we're going to cover capabilities. We're going to define what the capability is in a minute.

[00:02:57]
But let's say, for now that this workshop is going to be a tour. And as a tour, we are not going to code everything from a scratch. The idea of this workshop is for you to understand all the capabilities of the web these days, to understand what you can do, how, and to test those capabilities.

[00:03:16]
Sometimes, we will code that, sometimes the code is already there, and we will try to understand. So we will talk about permissions and security. We're going to start with that. So how permissions and security work, compatibility that is typically an issue when we're talking about web capabilities. Then we'll get into sensors, location, geolocation.

[00:03:38]
And input devices, speech, voice, and camera, hardware and, let's say, external devices. So how can we get out of the screen, get out of the current user device and do something outside? How to integrate with the operating system. So we're going to see different new APIs and abilities that we have to act like a native app in several ways.

[00:04:05]
And on that sort of things, we will get into PWA capabilities as well. So I have a couple of gadgets here that we will use later. On top of one app that I will give the URL in a minute so you will be able to test that app It's just an example on how you can integrate several capabilities in one real app, not just to see each capability one by one.

[00:04:31]
Prerequisites, that's the URL firtman.github.io/capabilities. There you will find just a repository with some links. And there is a folder where you have the slides, a copy of the slides in PDF in case you wanna follow along. And also you have a folder with source code that is plain vanilla JavaScript.

[00:04:54]
So you don't need any framework, npm, install, or anything. But it's called CookingMaster. So we will get into that project later today. Nothing really fancy, but it's not about how it looks like, it's about what we have here. So we have a lot of links that we will see over the rest of the day.

[00:05:14]
And if you go to the repo, github.com/firtman capabilities, you have that CookingMaster folder that we will use later, not now, okay, but later if you want. It's just plain Vanilla JavaScript using a lot of capabilities.