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

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

leverage and use today.

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

they got some nice adoption today now

in different browsers.

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

it, et cetera.

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

efficient way to do things.

So let me just share my screen with you.

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

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

with the page itself.

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.

Let me share my string.

And yeah, hopefully you could see it quite clearly.

[INAUDIBLE]

DevTool as well.

Just so you could see.

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

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

I'll make everything much bigger.

So hopefully [INAUDIBLE]

code easily.

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

few examples here.

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

Geolocation.

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

box that I prepared.

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

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

past, which is called caniuse.com.

And on Geolocation, for instance here, you can see

quite clearly that the current version of browsers, basically

supported on all the browsers.

So IE, Firefox, Chrome, Safari, and

Opera on the desktop.

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

Quite a nice support.

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

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

So as you can see here, we're using the

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

console.log.

But you could do something much better when you are

running your own code, and communicate this information

to the user.

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

address from the GeoPoint.

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

in JavaScript.

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

And if we'll open the source--

and I just put all the source code of this

page in our main page--

let's do it here.

And see here.

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

Command-F, search for Geo, and check.

And in our case, it will be in this div.

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

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

Now you can see here--

I'll make the code [INAUDIBLE]

easier.

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.

It could be sensor true.

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

share their location.

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

this page is tracking your location.

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

And once we are doing that--

let's get back to our code--

just over here in the script, we are--

oops.

Yeah.

We are going here, and going and getJson.

So we'll get an array of results from Google Maps API.

And in our little case, I'm running on each and every

result here.

And as you can see here, I'm printing the different results

to the console.

And for our little example, I'll just choose the first

result, which usually will be with the highest quality.

And I'm just outputting to the screen right here.

So Geolocation is one neat API that you could leverage today.

Another very cool one is the Summary Object.

So today, without any JavaScript, you could play and

get this summary detail aspect of things without any line of

JavaScript.

And if we'll go here and do Inspect Element, basically you

could see that you could tell the browser that you have here

an element.

It's not a div.

It's Detail and Element, and a Summary, which basically is

giving you the header or the main title of this element.

And then you could expand and collapse it just

by clicking on it.

So it's very nice.

Here, as you can see, I just put a paragraph in it to

explain it.

But really sweet and short ability to work with HTML

Markup, and tell the browser exactly what we want.

And in this case is, of course, an expandable div that

shouldn't be just a div with the JavaScript running on it,

but rather just to communicate and using the right elements.

In this case, it's Detail and Summary.

Local Storage is another one, a very simple API that I

highly encourage you to check.

The code snippet here is so simple, so you could

understand that it's really the most basic one.

And one important thing to note about this API that it is

synchronous and not asynchronous.

So it's better to use few keys with large

payload in the value.

And then it would be more efficient.

Or if you have the need to do it asynchronously, and use

lots of data, probably check out IndexedDB, which will work

much better, and give you a full blown database, and not

just a key value API like Local Storage.

Now, with Local Storage, you're just

calling it with setItem.

And you have immediately the key value.

And to retrieve, you just need to go to Local Storage with

the right key, and you'll retrieve the answer.

One nice thing here that I prepared is just-- you could

see that I wrote it in Hebrew-- but you could, for

the example, say something like, "hey" and "bye." Store

it, and after we do that, if we go with the key of--

here it's meaning in Hebrew, shalom--

it will retrieve--

we don't have anything.

But if we go here and do "hey," and retrieve, you can

see that I have "bye," because that's what I put in here.

One nice thing to debug and see what we're doing with

Local Storage will be to go to the Resources tab.

And here in the Resource tab, you can see here that in Local

Storage, I basically have a nice view of the

keys and the value.

And if I put here some more.

Let's do "hey all." And let's save it.

So you see here that I have now another element.

And very simple, and easy to work with this nice API,

especially if you want to debug it through leveraging

Chrome DevTools.

Another nice option is WebRTC.

Now I'm sure some of you noticed that the browser is

notifying me here that this specific domain, which I'm

holding all my projects, ido-green.appspot.com, I want

to use my camera.

Now in this case, of course, I will allow it, because I know

who and why we want to do it.

And if we go to the WebRTC example, and we close the

DevTool for a second, one, you could see that the page

containing moi.

And the other nice point is that the code to do so is

very, very simple and trivial.

First, we're just getting hold of our getUserMedia.

And for the ones that doesn't know, if we search here quite

quickly, WebRTC, you could see that we're supporting--

let's do Web [INAUDIBLE].

So getUserMedia, which is the right way to call it, will be

supported in the near future on IE 11.

And it's currently supported in Firefox, Chrome, and Opera.

So when we're going to our code, you can see that I'm

calling getUserMedia.

Hopefully, it will be the standard, and all the browsers

will support it.

And for now, I'm just checking and making sure that I get a

hold through that prefixes for WebKit and Moz for Firefox.

Once I do that, I have here my callback.

And this callback is basically being set it here.

And the errorCallback to just make sure that we are

communicating right now to ourselves what's happening in

case that things are not going smoothly, and a few

constraints.

So in our case, we'll just do the video capturing, but you

could do it with audio, as well.

Now, when we successCallback, and basically have the

localMediaStream that I'm just attaching to a [INAUDIBLE].

And then in my case, I have a video tag that now I'm

getting hold on.

And this video tag, I'm basically taking the video

source-- and that's one of the beauty in this API, that

basically we're leveraging the same good, old attributes that

we had in the video element.

And here in video.src, I could just attach to it instead of

just an empty for file.

And just attaching this localMediaStream.

And by doing so, I'm just creating a URL.object that

will be able to stream it to the video element.

And when I'm clicking Play, basically, the result here is

that you could see and work with this

stream for your usage.

Visibility API is actually a very nice API that gives you

the ability to see what the users are actually exposing to

in your current tab or window.

So when the user is flipping--

and you can see here that they flipped several times from

caniuse and back to our page--

each time I did so, a new event was triggered.

And right now I just put it on the page itself, so you could

all see it.

But you can imagine that you could stop the video playing,

for instance, or do other clever things when the users

are not really paying attention or focusing on the

current tab or window that you are doing.

In order to get this, we're just attaching the listener to

the visibilityChange.

And then we could do whatever we like.

Our support here, a nice tutorial that my colleague