Web APIs You [Probably] Didn't Know Existed

who was working with the web in 2008 please raise your hands okay so do you guys remember what happened 2008 like some big deal some guy named html5 arrived so this was the first time that the html5 spec arrived and everything just went crazy right when html5 arrived you know it was this thing that will save all of us and on 2009 there was this interview with Ian Hickson the guy that wrote the specification and he said that html5 would would be ready in 2022 and I don't know if you remember this but like just the tech world and the media they portrayed it html5 as this thing that would be ready like 10 years from now or much more than this and and you as a developer you probably thought that so why am and I'm just like studying this thing if it's not gonna be ready very soon so that was like really complicated really messed up in 2010 Steve Jobs wrote this open letter saying that flash was not gonna run on on iOS devices anymore and then html5 was the answer if you wanted to build web applications for iOS and that just like the market went crazy when this thing happened I don't know if you were working with ActionScript at that time working with the flash platform but I remember lots of people just like going crazy and like switching jobs and and do you know all those kinds of things in 2011 html5 got this amazing logo and now html5 was like definitely a superhero you know it was the thing that was gonna save all of us and kill flash kill all those crazy plugins and as everything that starts to get popular in 2012 marks looking back gave this interview saying that our biggest mistake was batting too much on html5 so that was really crazy a lot of people I started to think that html5 was not the answer html5 what's something that you should shouldn't be working on but you know those those kinds of bad press happens and later on in 2013 people continued working with html5 and creating game screeching creating all those kinds of things all kinds of applications in 2014 this specification went to the recommendation status so that means that the w3c went through all the steps of a specification can can go with and it was ready and now what html5 is ready and what should we do next you know so you probably heard about SVG canvas localstorage WebRTC video audio drag-and-drop geolocation all those amazing technologies that came with html5 but what now what happened between 2014 and 2016 that doesn't include react or a or browserify what happened with the the web platform and there was a bunch of of things and that's the idea of this talk to show some of the API shows some of other things that happened so we'll start with page visibility so this API it's basically a very simple way to ask if a page is currently visible for the user or not so in the past you could use events like on blur on focus on a page but that was like really a bad idea it was just a hack because if you have like two tabs on the same page and one two windows on the on the on the same way on the same screen and you would click on one the other would be on blur so that was not a bad that was not a good idea so they came up with this specification just to know if a page was visible or not and the way it works it's very simple you add eventlistener and then if it's hidden you do something if it's visible you can do another thing so that's pretty easy the specification evolved a little bit one of the things they're saying right now is there's this new property called visibility state so the idea is that you can identify other kinds of status of a page so there's a new attribute called link rel prefetch prefetch something like that and then you can prefetch a page so now you can using this API you can identify it if the page is pre rendering or not and same thing if it's hidden if it's visible you can do something on the page so the browser support is pretty good it's amazing actually you can use it nowadays and but the question is where to use it and I'm just going to give you like this example imagine you have like a player on your page this is a video player and once you start the video you can show like feedback on the screen on your fav icon for example if you open a new tab that page is not visible anymore so you can pause the video and once it backs again you can play the video so you can do this kind of experience for the user if you're building a game that's a very good idea because you don't want the user to go to other pages and then that weird sound keeps playing that's very annoying actually and but this is also a bad user experience imagine if YouTube does this so that'll be a mess because people will like be hearing a video in one tab and if you go to the other it will pause the video so it really depends on what you're building online state is another one so nowadays we can identify if a user has connection or not that basically it and you can use this attribute called navigator online if it's true you can do something if it's false you can do another thing and you can also listen for those two events called offline and online and that's pretty much it you know that's the only thing the only information you can have from the network it is good for a lot of cases but sometimes you need more more things the browser support is pretty good as well for this one and as I said that there are more things that could be exposed for a webpage and that's why this network information API exists so this is a different thing this is something that it's being written and being developed but the idea is that you can identify things like if the user has a 3G connection or if it's a Wi-Fi connection how is the download speed how's the upload speed those kinds of things so if you're building a video player or something that it's more robust imagine you could just know if the user is using 3G and then you just decrease some of the images that you are using I don't know there's a lot of possibilities and where to use this so I have this app called dev space it's a tweet deck for for github so I just created like a very similar you I just like to attack and where you have columns and every single column is a github stream you know and the github API is amazing but you cannot do real-time with the github API so you have to do pulling or that means that you have to you from time to time Santa HTTP request to the API and get the information so from one minute to another minutes you just send a request for for the github API the problem is if the user goes offline then he would have like this app that is not like updating or anything like that so imagine if you just like turn off the Wi-Fi and then show some some user feedback hey your internet is offline and if you connect again to the Wi-Fi you can show something like okay you are connected again and now you have some new results so those are some like smaller things that you can do to improve the user experience and it's very useful if you are building a dashboard where you're fetching information from time to time it's important for the user to know that that information is up-to-date the other one is the vibration API so this this is very nice because we are used to have like visual feedbacks when your phones on our computers we can have some audio feed backs as well but there's not a form of tactile feedback and there's a there's some really nice things you can do with that the API is super simple also you call like navigator that vibrate and here's the value in milliseconds so you can pass just like thousand milliseconds if you want to vibrate for a second and you can also pass in pattern so you should pass like at an array and you you say that okay for 400 milliseconds you can vibrate and then you wait 300 and then you vibrate for another treat 300 and then you wait so you can build those those things and you can also stop the vibration if it's runny so like you can imagine some crazy people working with this they did like the super mario fame where it would vibrate and according to the to the song the Star Wars swing the Go Go Power Rangers that's my favorite one and that's that's really crazy but that's the some of the things people do I don't know the reason but they do so the the support is not the the best one but it but it works and if it doesn't it doesn't change the the experience and here are some ideas on where to use it for games this is a very straightforward example I don't know if you remember this game windows 95 I guess someone parted to to JavaScript and and I played this game on my phone and I was just like playing with that and then when it crashed it it vibrates so this is like a very small thing on the on the on the user experience but it it was really really good you know I felt the difference because it was a more immersive experience some other examples some more tangible examples is a form validation when the user submits a form you could just like vibrates if it's invalid and again you have the the visual you have the visual feedback so why not putting this extra thing that will make the experience better you can also detect the device orientation so that's that's really insane you can actually detect the physical orientation of a device and the way you do it it it's you again just listen for event and it then you have those three informations on your callback the gamma the beta and the Alpha and if you just like this is a real code from an example that I will show you can just like have an image on your page you get this image you listen for this event and then you get those information and then you can combine CSS transforms with that information so you can just like rotate your element according to the physical orientation so let me show you how this works okay so this is my webcam and I have a very conservative demo here this is Trump's face and then you can just rotate and then according to my physical orientation it will change so that's pretty awesome rotating Trump's face but how is the browser support so that's pretty good as well and you can use the nowadays in where to use it you know you're not going to rotate Trump's face all the time so what are the possibilities I don't know if you use the Facebook app but this new feature the 360 photos or the 360 videos this is something you could use you know as the user changes the physical orientation of your device you can just do something like this you know so that's really not that's really nice the other thing is messing up with your clipboard I know you all love this when you copy something from a page it puts some other content on your clipboard you can do that there's some new API to do that and you can do like copying pasting and cutting and this is now real in the past you had to use flash this is this was probably the most famous library called zero clipboard but it relied on flash and I remember using it or I remember having this use case where I needed copy to clipboard and I just like I refuse to use this API that this library because it had flash but now you can do it and you have like three steps to to do copying to clipboard the first one this is a browser requirement you have to have like some using Direction you cannot trigger event you cannot fake event you have to actually have the user clicking so we can just add a listener for click and then we need to do two separate things one is selecting the content and the other one is actually copying it so this is the first and then we have the Select function where we imagine we have an inputs on your on our application and then we we need to select the content of this input you can programmatically select content from an input you can just focus this then you just select the entire content so now this is exactly like selecting with your mouse but we are doing this program right programmatically and then finally we can copy the content so we just use this document dot exact command copy and now that's it if there's an error we have this strike catch that can can get it and there's some other things some events that you can listen like copy cut paste but the browser support for those events is it's pretty bad and the first time I saw this API I was really really disappointed it was so complicated it was so bad so I decided to create this clip or jas library it went pretty viral I don't know if you guys heard about it but I would say that this is the best way to do it nowadays that's that's the easiest way nowadays to make a copy to clipboard the browser support it's good there's just this little guy over here the new ie and I'm really mad that it's not supported yet because people who open issues all the time say hey it's not supported and it's not my fault but but yeah it's almost there the the the Safari technology preview it already implemented but they are waiting for the iOS release so Apple has this crazy release cycle so they're waiting for that and where to use it I guess those are the the most simple use cases you probably use github already and when you want to clone some repo you can just clip click on this button then it's on your clipboard or if you using the bootstrap documentation you can just click on copy to clipboard and instead of copying the entire block of code you can just click on this button and this actually it's the alpha for documentation which uses clipart yes the other one is ambient light so this one is crazy you can actually get the ambient light and capture the lights and sensitivity you know and and you can just pretty much know if it's Y if it's light or if it's dark you can do those things the API again pretty simple adamant listener device light you have a callback and then you get the value and the value they have this weird property not another property that the metric it's called looks I didn't know it existed but it it's a faints how they measure light so you have this value and I created this example it's a really friendly example no big deal we have this actually okay yeah so we have this friendly ghost and now it's there's some light here because it captures the webcam but if I turn off the lights if I turn that's crazy that's a great example but yeah you can do those things this API is changing they are now creating this new one called generic sensor so they are putting some some other API is inside of that and one of them is the ambient light so the API will look like this in the future so you have to like instant shade a new ambient light sensor you start the sensor and then you have event to detect if the image is if the ambient light changed or not so I think there will be some some browser security things you know those flags to alter eyes because nowadays it doesn't have and this is one of the reasons why it's not well supported just on firefox and chrome chrome canary which was i was using and where to use this you know I usually show this example in people were like okay that's really really crazy but what's the the real use case for this imagine you are going outside and then you have this this huge light on your phone and then you cannot read so this is something very common what if we could just detect that and say to the user hey I notice you're on a very bright place do you want me to tweak the contrast of the application so you can read it better so this is one thing you can do or if you're on your bed I guess everybody went through that situation already you can just say hey I notice you're in a dark room do you want me to just change my UI to a dark theme so so that's a very nice user experience kind of thing that you can do the other one is the battery status so now the the web pages can detect the how you how your battery is you know if I just connect my computer I know if it's charging or not if my batter using 60% or so percent you can detect that for both mobile and desktop devices this one is a little bit different it's more like a promise based API you can get the the battery from the Navigator and then you can you have the the battery object and then you can detect events from there and now I can detect if the level of my battery changed or not in showing and show that information the browser support is not very good but ok it's getting there and where to use this so do you guys play pokemon go yes how is the battery for Pokemon go not good right imagine if Pokemon go was written in on the web and imagine you could just put some information saying hey you got like 23 minutes remaining to catch pokemons go recharge or like or imagine you have like a dashboard or you know those really long forms that there's like terms of inputs that you need to fill out imagine if you could detect if the battery is dying and tell the user had no the battery's dying I'm gonna save this information the local storage so there plenty of use cases plenty of ideas that you can play with and there's so much more things going on on the web there's web components and inside is umbrella there's like templates shadow Dom HTML imports custom elements so many stuff you have progressive web apps service workers push notifications web Bluetooth web NFC there's so so many api's and I'm just gonna show those those last three those are more for the future the first one is web assembly so now we have this low-level programming language that we can put it on the web and the use cases for that are those really high performance applications the browser support is not very good it's under development everything would probably change like a week a month for a year so I wouldn't say go play with that or put it in production you can play of that but not in production and you can do some amazing things like this so check out the performance for deserts I don't know how you feel about this but like this kind of thing running on the web it's pretty insane and we also have web VR which you can connect devices like the oculus rift ooh the Google cardboard and have this whole mersive experience with we are the browser support is getting there as well but we already saw like so many good examples for web VR and I will definitely recommend a frame for for doing that nowadays and we also have the gamepad API so now you can connect a game controller using USB and then playing with your controller on your application so the API it's you detect this gamepad connected event and then you can have plenty of game pads connected so we're just gonna get the first element on this array and then we can you can get information like the idea of this gamepad how many buttons it has all those things and after you connected the gamepad they're not it there are no events for when you clicked on a button do this so you have to use requestanimationframe so we can use requestanimationframe which if you are already building a game you probably are using this already so you we can call this function this game loop function using requestanimationframe and then we can detect how many buttons it pressed or not which was the button that pressed and then moves like my character on the game it's one side or to the other and there's some really really nice additions to this specification that is coming like including those web vr controllers is one of the things and game pads that has such enabled on it so that's pretty read the browser support it's not bad you know you can probably use it nowadays you can always fall back to the to the keyboard it's not something that it's gonna ruin your entire experience and I created this Nintendo emulator for the stock so we basically have some does anybody has like a playstation controller or Xbox controller you know okay I have one but it's but it's a Nintendo controller okay so let me connect this thing and let's play Super Mario okay let's see if it's working okay yeah [Music] where are you and hey okay I'm just a nervous now we're not going back to to the ghosts okay so like the web is this whole magic place right there's so many things going on and it's just crazy like every day there's a new - every day there's a new library every day there's a new API but it's it's just magic and like most of the times we are just like going to work doing the same thing or we're doing new things but it's not like completely different from what we do already so you know the advice that we heard earlier about side projects I think that's really really a good advice because we're often on a comfort zone doing the things we are used to but there's a lot of things on this magic side where you can learn more you can experiment more and you guys already did the first step because you already came to this conference so I'm assuming you want to get out of the comfort zone but it will require like tomorrow Sunday whatever you know playing with that working with those things it doesn't need to be any web API can be anything web pack whatever you want to choose but yeah that's my message for you and thank you so much [Applause]

Channel: Coding Tech

Views: 393,639

Keywords: api, javascript, software development, web development

Id: EZpdEljk5dY

Length: 28min 26sec (1706 seconds)

Published: Thu Nov 23 2017

Reddit Comments

[u/freewilly666]

Some great stuff in this presentation!
03:45 Page Visibility
06:26 Online State
09:24 Vibration
11:59 Device Orientation
14:00 Clipboard
17:37 Ambient Light (Great!)
20:52 Battery Status
23:05 Web Assembly
24:25 Gamepad