Name: 你今天可以使用的HTML5 API (GDL-IL) (HTML5 APIs You Can Use Today (GDL-IL))
Uploaded: 2021-01-14T05:08:59.000Z
Duration: 14 min 29 s
Description: 【看影片學英語】數萬部 YouTube 影片，搭配英漢字典即點即查，輕鬆掌握單字發音與用法，長久累積看電影不必再看字幕。

Hello, and welcome to another episode of GDL-IL, GDL Israel.

現在進行式

Today we're going to keep it really condensed and speak

情態助動詞 A2

about a few HTML5 APIs, or features, that you could

Some of them, I find, are really simple to implement,

and could save you lots of unnecessary work.

And I think the line that just connects all of them is that

And you could definitely leverage them and use them.

And those APIs, or in a way, the browser features, will

enable you to save code, which is always great, because less

code, less time you need to spend reading it, maintaining

And in some of them, it's just a better way, or more

And actually, the demo that I've prepared is live.

So you are more than welcome to go to my site and just play

All the code is on the page, and all the code snippets are

gists, so you could check them on GitHub or on my page.

And yeah, hopefully you could see it quite clearly.

And maybe we'll throw the DevTool just to the bottom,

because we don't need the real estate of the page itself.

And basically, as you can see now, we have a

And we could probably start with the most basic one, the

So the Geolocation API is with us for a long time.

And if you want to see on which browsers this nice

feature will be supported, you could check it on the search

And if you'll type here, Geo, and click, you'll be

redirected to a site that we mentioned a few times in the

And on Geolocation, for instance here, you can see

quite clearly that the current version of browsers, basically

And on the mobile arena, we have from iOS to Android.

So it's definitely a feature that you could use.

Here I just choose to show you a few interesting things.

navigator.geolocation to do the feature detection.

So in case our browser, for some reason, the user

browsers, is not supporting this feature, it's quite

clearly that we could communicate it nicely.

And since here we are all developers, I'm just using the

But you could do something much better when you are

running your own code, and communicate this information

However, when we do have this feature, we're just going and

calling the navigator.geoloc ation.getCurrentPosition, and

transferring it a callback function with the position.

So we could gather the latitude, longitude, of the

position, and then do some interesting stuff.

Now what I wanted to show you that I'm doing here, and as

you can see here, I'm basically extracting the

And that's actually, I think, less than five lines of code

So let's just go here and see how we look like.

and I just put all the source code of this

Let's not check that iframe that I embedded from GitHub.

Let's just see the code itself of our page.

In here in our page itself, I could in DevTool click

And what we are basically doing here is just going and,

in this script, we are calling basically Google Maps API.

What I'm doing here is just going to the Geolocation.

And once I have the point itself, I'm just going to

Google Maps API, and transfer to it, just here, the

longitude, latitude, and the GeoPoint that I built from

those two parameters, and with sensor false.

And then the user will need to confirm that they agree to

By the way, you can see here a nice indication that you see

So the user needs to approve it for the first time.

字幕列表影片播放

你今天可以使用的HTML5 API (GDL-IL) (HTML5 APIs You Can Use Today (GDL-IL))

basically

feature

element

case