Web Capability Resources

[00:00:00]
>> So your new friends, also to answer the question on how to deal with this, are a couple of websites. MDN, that it's on developer.mozilla.org, if you're a web developer, okay, you probably know MDN. Just a quick update on this, it says Mozilla, because originally it was the official documentation for Firefox and other Mozilla products, but today that's not the case anymore.

[00:00:29]
Even if it's inside Mozilla, it's actually an a nonprofit organization that is trying to, let's say, fill the gap in the lack of documentation for the web. So it's trying to be the official documentation for the web, and they hire people that are typing and creating all the recommendation, not just for Firefox, it's for every platform.

[00:00:57]
Okay, so it's like the official recommendation for the web. caniuse.com, in Can I Use you will typically have a good understanding of which property is available on each browser from which version, okay? We will see later some examples of that. Web.dev, a lot of capability APIs. You have the spec, but reading the spec from the W3C as a web developer, it's kind of difficult sometimes because the spec is typically targeting browser vendors.

[00:01:32]
So it explains how to implement the API, not just how to use it. So web.dev includes a lot of examples on capabilities, with code examples, with explanations, real world. It's from the Google Chrome team, but the text that they're writing is not really Google Chrome. And I know that because I published that book that I mentioned before there, and there is no restriction, everyone is publishing there.

[00:01:57]
I'm not from Google and I publish there. And what you publish there shouldn't be just Chrome documentation, so it's just for the web. For specifics on Safari for iOS, Mac OS, and iPad OS, so we don't have an official documentation. The closest thing that we have is the webkits blog.

[00:02:21]
I would argue today that they're doing a pretty good job today from 2023, in creating at least, let's say, good documentation. They're doing a good effort. In the past 10 years or 15 years, it wasn't the case. In fact, my website or my blog frit.dev sometimes was the only resource to find what's new on Safari for web developers, because I was doing a lot of tests, because they didn't document new APIs and things like that.

[00:03:01]
Fortunately, they're doing that, so I don't need to do that job anymore for free, by the way. So the last one is chromestatus.com. Chromestatus.com is a place where you will know which APIs are shipped with Chrome on each version, okay? So you will know if Bluetooth API is available from which version, if it's stable, if it is origin trial, okay?

[00:03:26]
Let me show you that one. Not everyone has experienced working with that. So you can see at the time of creating this video, this workshop, we are in stable in Chrome 113. And here you have things that were deprecated, new APIs that were enabled by default, not just APIs, also small features on CSS new.

[00:03:50]
What things were added in developer trial, that's behind the flag, or origin trial. And here you can see the next version that is currently in beta, or the other one that is currently canary, the alpha. And you can go back and check here. And also if you have a question on one particular API, you go to All Features, and you can filter.

[00:04:12]
For example, you can say, okay, let's say Bluetooth. And here you have Bluetooth sorts of API. You can open the Web Bluetooth API. And you will see here, let me increase the font size a little bit, some information about that. For example, in Chrome 56 this was on Android, and Chrome OS, and Mac OS.

[00:04:34]
And in Chrome 70, it was added to Windows 10. And you can see that today it's enabled by default with some links samples for every API for everything that they are shipping. So when you have a question, when you have a problem, here you will typically find a lot of information, technical information about that capability.

[00:04:55]
And of course, you and your friends in this video, okay, this course, this workshop, cuz we will cover a lot of API's. We also have Baseline. So what's Baseline? Well, actually, it's a multi-vendor new effort. It's originally from Google, but it's multi-vendor, so it's actually also adding Mozilla and Apple to define a list of stable capabilities for all browsers.

[00:05:22]
So what we were seing as the green list of cabilities. So if an ability is green, it's because it's safe to use today, because it's available on every browser on every platform. Of course, that's never 100%, but it's 99%, which is typically good enough. So it's kind of a stable version of the web.

[00:05:44]
And we have one list per year, starting with 2023. And the idea is that every year we'll have a new one, such as Baseline 2024, Baseline 2025. At the end of every year, we will have the list defined by all the browsers for the next year. So by the end of 2024, we will receive the list of Baseline 2025.

[00:06:07]
And today, you're gonna start finding baseline, for example on MDN, that website that we mentioned before, where you see that, for example, in this case, the grid CSS capability is Baseline. So it's widely supported on all the browsers. Also, web.dev is listing the Baseline features in many of its articles talking about many capabilities.