Hello, and welcome to another episode of GDL-IL, GDL Israel.
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
John [INAUDIBLE] wrote, giving you a very nice capability of
how to use this nice API.
Device Orientation, of course, as you all know, on mobile
devices, we have the ability to work with the
accelerometer, and get what the device itself is doing now
in a 3D environment.
And we've got those three params on the alpha, beta and
gamma axles.
And basically, this API is really nice if you are
developing any web app that will want to use or leverage
the capabilities of the mobile browsers, or on the
tablet, or on phones.
I think we covered most of the things that I wanted here.
And as I promised, today we'll keep it real short.
And if there's any question on HTML5 APIs, please feel free
to reach out to me on plus.google.com-+idogreen, or
on Twitter @greenido, is one word.
And if some of the viewers got some questions right now,
please feel free to ask.
Let's see if we have some questions on the chat.
No, we don't.
So until next time, be strong and safe, and see you.
Bye.