 Thank you, welcome Let's see Let me introduce myself first It's great to be back here. You can see I was here in I think 1992 About 20 years younger and 20 kilos younger, I think I'm As said I'm I National day down there for our pension app. I'm a freelance webnet developer I'm a protest developer expert for a native script, which means I go to a lot of conferences to talk about native script and that's a framework to create Naked apps with web technologies, but it's a completely different story than this. I also organized the developer day last year And I now have 992 followers on Twitter So please make it a thousand today There are more than a few people here. This is the end please follow me and As you probably can see in the slides Later on also, I love super hero movies to relax to watch and Fortunately this movie never happened. This is Nicholas Cage as Superman And even test it out a suit in my 99 97 I'm so happy that didn't happen Just just look at this guy I switched to another browser because that's For this one The first one going to look is this one. This is Professor X He's the leader of the X-Men and he uses a device called Cerebro to detect humans. Well, I tried to Align that with a browser API This is the geolocation API Which provides access to the geographical location From your users device. You probably all know this one And in a few steps you can leverage this information by Getting the current position like this And if you do that you get a position back in can ask the latitude longitude accuracy and also the altitude The altitude is a little bit difficult here in the Netherlands because it's probably always a zero Because well, we're quite a flat country, right? I don't know if you can see it by the way in the back on the right hand side. You see browser logos This means in which browser they are this a guy's a supporter. I Will point it out At other APIs with this one is supported by all the browsers nowadays Let's try it And the thing is if you want to have the geolocation of user You always have to ask permission. This is handled by browsers themselves And it should always run on HTTPS And that's how it gets it's worked way better on mobile device than on desktops And we can see well, this is the location and it's a could be 22 meters off If you look at it get Google Maps and said, well, yeah Yeah, pretty clear about pretty in a neighborhood, right? I have no will in God of thunder and lightning. So what what I want a camera that we well battery states This could be very handy to get information about the better charge level for instance, or the expected time of charging or discharging and It exposes an event when information change though if your battery is going down you get a signal that you can act on it So you might want to turn off energy efficient operations based on the power level if For instance the device only has 20% left you might want to do more on the server than in the in the browser itself It says glow It's supported by Chrome on desktop It's supported by Chrome on Android and Samsung Internet on the Android while the other browsers don't support it and For that reason you always have to check if it's for the not so You do that with an edge statement. So well if never did it up and get battery That equals to true. So it's more than you can do stuff You can get it by get battery And this is the information you can get is it charging on on what is charging time What's discharging time if it's not charging and what's the current that we don't you can also look into the event if charging change so The better is getting fuller and fuller or discharging How many how many seconds or how many times left until it's charged And when the level change so I have 50% left now it's 49 hours 48 And as you can see my weathering Started at level 35% And it changed to 37 and it's now changing to 38 that's because If I plug it out It says it's charging times changing 50 There goes the timer So you can get information on what status is an X on that This is like an airy A superpower is the canary cry It allows her to Create ultrasonic vibrations that severely damage organic and inorganic organs Well, I thought it was suitable for the way audio API Which allows you to process and synthesize audio and it's Broadly supported only now in i.e in them and lower Do we really care anymore? So you probably have seen this this is Introduced with html5 to play audio in in your browser and There are two different kinds of files you can load OGG or mp3 and It can give you something like this. That's still how the audio is working This is classical music, right? Well, this is normal to play audio. Yes, sorry Look it up on YouTube But if you want to make Music yourself with the sounds that are available in in your browser You can do it. You can do it like this. So you first have to create something that's called an audio context and you create an oscillator to Generate the sound and as you can see below you Say you define the frequency in this case 220 Hertz that's pretty low and Also an oscillator type this case I chose for salt truth because I thought it sounded nice Sounded nice, but there are different ones like signs square triangle or you can create something custom to connect the oscillator to audio context and Because audio Cannot depend on the internal pop of your machine It has its own building clock to make sure that it's always on time You want to make music with your laptop? That's really great for you so you can start it and If you don't stop it, it will continue generating the tone So in this case, I said will generate the tone and stop after two seconds They're missing all the fun So if you put everything together if you put everything together This is the Job script you are you going to use and I have some buttons below and I'm gonna show you what it's sound. This is 220 Hertz with salt salt Also, I know It doesn't work anymore I just Describe that's right. I want to know if you're hearing is good. So I also have a dog whistle Let me know if you hear this one You would be lying because there's no sound behind this. It's just an empty dozen But there are way There are things out there It's not way We come back to that one if it's good Because you can also make your own music Does anybody remember This is a project from from experiments using this kind of technique I Think it's making fun of kids make music fun stuff. They're you guys got it, right? Let's see if the other one is loaded already Nothing so let's try Let's try five folks Oh, I see. I forgot something with the geolocation. I'm going to I hear it is This is also an experiment that you can do with generating sound so Switch This is you know, the hook. Yeah, it's About my size For me But when it comes to how he's very tall and heavy so you will shake the run Well, they have a guy that's you it's called the vibration. Maybe I think it's vibration a guy is only supported by chrome and firefox on desktop But I haven't seen a desktop yet that has the ability to fight right so it's really hard to Show you that but it's also supported by Chrome on Android I think I could pass around An Android device for you to think about that make sure I Recorded it. This is how you do is because when it's not so why this what you still have to do that and if Make sure that it's available And you can do it in two ways the first one with the 200 means they will fight with her on the middle seconds and If you pause in an array at the bottom if you're five way for 100 milliseconds, then pulses for 200 By this 300 also for 200 and five ways for 500 and for the way to demonstrate it is to put it on One of the best records ever made Which is position delivery like this. So if it five ways the phone will Go down and also And by the audio Oh It will vibrate And if you're wondering who does fine young guys and girls are That is the Robin and termination source I want to jump back a little because I forgot it and I want to share it with you if you look at your location There's a good way and a better way Normally if you come to the side of this phone a little Grosy with the grocery store They have a Way to search for the nearest location if I read out this place. Yes I was the boss You immediately get this request to allow them to use your location And that's not really good experience because you don't know what they want to do with it If you look at this example, this is from the Richard Mitchell's brand They do it when you hit this button The moment you say well, I want to use my current location. So that's already a very useful Of this API Next one anyone know who it is. It's not already You have two seconds to guess, right? This is invisible from X-Men and Well, she can do a lot of stuff Oh, sorry Let's see you're still away. Thank you She has the ability to do everything about this but most importantly she can become invisible Well, which API could be like that? page visibility API It's supported by every browser in there and it will give you the status of Documented it's visible in the browser or not at that point It's very easy to use its document of hidden and return to true or false and It also returns the current visibility state of its visible hidden and pre-rendered or it's unloaded and Was important is it has an event handler so you can put me into that and depending on what what Visibility state you can act on that You might wonder why I have an example here and Because at the well page visibility is visible If I want I'm going to watch this bit of clip That's And he said Marco Polo And when I watch it was watching this clip I saw comments on YouTube said what is Marco Polo? Do you know what what is this Marco Polo? Yeah, but if you don't know you can I just have a minute and what what happened if you can see it The video is post so it's not visible anymore the video is post I can look for Marco Polo again. I'm not sure if It's faster. It's fast enough It says the game said the player who hits out Marco and the other play must respond with polo so he's doing it wrong by the way he's saying Marco Polo himself. She should say polo But now that we know it we can finish this video And he just continues with the same spot yet And obviously he's doing the outpage because he needs to get into the game more And she's like no, the flash can do it one thing very good and it's run at very high speeds and Make sure he you get a feeling that he's there or he was there and it's gone and it's really fast So is it a bit of a stretch? online offline status Um, this is also pretty simple a guy that could be very useful in a progressive management way What indicates that the user is still connected to a network remember network That doesn't necessarily mean that it's connected to the internet Don't a corporate network Still be off of internet, but it gets you a little information It's easy to get information by a little online and you can look into events like online and offline so For instance, if you have a website with a lot of input fields a large format field You can continually check if they're still have a network connection Maybe hoping that's an internet connection and if it goes offline and you can inform them that they're And they don't will not hit the submit button and might resolve the information they're entering So in this case, I'm all mine. I've turned the Wi-Fi off I'm all fine And I'm all mine. Yeah, thanks for that man. He's a superhero protector. Yeah, but what are his superpowers does anybody know? Taking the fun out of this Rich Yeah, so what a guy could be hooked into this The payment request API almost The best a guy's a really promising API because it takes a lot of Work away from you. You don't have to create check out forms anymore. For instance, unfortunately, it's only working on Chrome and It's also working on the safari, but that's with their own implementation of Apple Pay Of course, but they're working towards the same API and what you can do is you first you have to Initialize payment request and then so you create a function for that and You said well the networks I want to support this case or American Express and visa and then the sport instruments are Methods basic card means I want to use credit or debit card And you have to supply some data and the supporting networks in this case are the defined networks So I have American Express and visa and the sport types are credit Just a little setup of what you want to support in that dial then the details is There is a lot there But you essentially say well, I have Skip total display items there you can just you define all the items that are available in the card with their building and On top here the total which sums up all items and As a last thing you have to return a new payment request with that information. So it can be used by the API if you put that together with some Dots in there to hide all the extra stuff is this function you create And you create a function called domain because that's that will respond to the Say the browser click on the button. For instance, you have to check again. They request our Support it. So it's the first statement otherwise, we initialize the payment request and we Fire another function called online click with that request What does that function do? It takes that request object. It will show the dialogue and the Dan means will respond to whatever happens there Now it goes to a dummy function say you go to a payment server somewhere And if something goes wrong, it gets the catch the most important thing is to show this case Because we can So we can create our payment request. I do feel a little bit sorry for this page not being superman. So That's helping. So if I click on here, I get a native dialogue with my This is my car essentially so I said bar nice for 10,000 euros You can donate and help me to a sketch to be to become Superman I thought well, we're brought up the word can't go to them. So you give a little discount for 10 euros And you can get details here if you press that arrow Go back And then you go to That's not sure. It's a Dutch browser You put in your American special fees are coming Don't have higher so I go to a fake I can't sleep because I have to go to a fake card generator It's good Can regenerate He's very I'm good So speed synthesis API and that API makes it possible to sent you to text-to-speech But all you can also modify the pitch of the rate or even if it's British English US English or Australian So let's have a look It's now in Dutch so I can say But if I take for instance, I haven't tried to say it from South Africa Welcome to work at Rotterdam, and if she had a Bad night last night Welcome to work at Rotterdam. Oh, that's okay Welcome to work at Rotterdam a little bit too much to drink I think Victoria as a header of my definitely But she's American so she probably sounds more Yes, I think The thing is all these are provided by a browser All these languages and all these say Silence not correct word, but this language Variations And if you look at the bottom you'll see all kinds of Google saying they don't work only Google browsers. They are Being fetched from the Google services, so I'm not sure what's different with Alex It's a female voice Okay, that's one It's the Wolverine and Wolverine well can regenerate you but it has also Other things like super hearing so what could be useful in super game which which a value to reflect that It's the speech recognition API And that's the other way around converts speech input into text. It's also on these border by Roman Samsung Internet and it's fairly easy to use You instantiate a speech recognition object You can say if it's continuous or not and that means we'll keep on listening even if I stop talking and You can say if you want internet results or not that means it I'm talking for a long time if it's false then it will wait until I'm finished and if it's set to true it will Give results in the meantime and it's more of us we use because you can see if it's still correct and The thing you have to say because he doesn't know if you're touching this German or whatever is to watch language that So it is the engine B. You are now now and now or some other one You started and If you're finished you stop it and there's an event listener that listens to that intermediate result So it will be this way Let's hope that them about sir with us because this is going on the internet This is not locally in the roster And it's an English Hello world can't bother them. Yeah, I have to make a video of it or the internet action I'm sorry for that if we don't sorry for that Now where you can try this out yourself in the end. There's a link to a website that you can try this and Going further on with Dr. Strange You can do a lot of things magic for particularly And I think what will do this kind of magic And I have some demos there and I'm hoping that we'll work also I Have this little device. I will put it on it has LEDs in it. You can send messages to it See if I can connect It's called the time books me. Yep. It's there and I heard a little blinks saying I'm connected So I can do stuff like that. Can you see it like this? I? Can say a lot of them as well. It will make sure that the flag of Rotterdam is there It's not as fast as you can say. Well put all the LEDs there, but it will make sure it's one by one And I'm a little question for you. Does anybody know what landmark in Rotterdam this is? This is their logo. Oh, sorry. Well, I clear it first And you know what knows the logo of this building It's the place I work it's which there is this one It's the love of the old sport. It's the building next to the next to the railroad station or guess the Next one Yeah, correct If I love this page again, oh, it's you see it's a loading there also All right Almost there. Let's do something scary now. It's sorry about it. I can connect to And put it up for you and I can say well show me some colors and it will randomly Show some guns. I don't know if you can see it in the back. I should have hold it up for you It will now just generate colors which which you can also do and If you're on Twitter get your old iPhone because it listens to tweets If you tweet to get browser APIs and put a color name behind it But we know whatever or an RGP valley or X value It will listen to that So there's one for Sorry My mistake Connecting this one. I'm sorry about that. But feeling that it works when you're testing it outside That's the thing I have now I'll make sure there will be a video of it Unfortunately, it will not work in Chrome because they have cross-platform Problems if you want to use that. I'm sorry. I have to run though this is Wonder Woman. She can do a lot Superhuman telepathy only linguism. Yeah, I like that one very much. And yes, she's a supernatural beauty also and She has super strength that she removes the bracelets Which refers to there are a lot of Other a class out there also. Yes, notification. They can send messages on the bottom of the right top of the user screen We really like that, right? Obscreen installation as well as work is a bias. You can use that for progressive progressive web apps We take a guy who saw something with audio and do the same with the video If I remember how many memory Is in the device? Not how many is available with how many is there? screen orientation device orientation screen orientation is it landscape or Portrait device rotation mean also is it tilted to the left or the right so you can make a game with it Oh, it's not on an iphone or an android phone. And that's where the information are your own Wi-Fi or 2g or 3g and A scary one where QSP you can hook into connected USB devices and have to say Thank you