 So I'm here to talk about the internet browsers and before we get started. We've got a bit of interactive stuff That's gonna happen. So I want you to get out your phones or laptops and visit this URL Which is bit.ly slash FSF BCN So and a bit of warning there's like so this obviously relies on like conference Wi-Fi Which is a really bad thing to rely on But so if you could maybe try not download videos or upload stuff too much That would be really cool because it's better if it works So what you should see when you visit that URL is a big green circle and above that you should see a four-digit hex decimal code and The most important thing is I want you to remember that four-digit hex decimal code It's gonna disappear in a few minutes so if you could Yeah, write it down tell your neighbor tweet it to yourself or whatever you want So that's yeah, remember that number and everyone's got a different number Right so So yeah, I'm Ben I've come over from the UK where I work in a company called white October in Oxford So we build stuff for the web and I head up the front-end engineering team there Which is a lot of fun Another thing I do in Oxford is I help run JS Oxford So we're kind of relatively small meet-up group and we have Yeah meetings every couple of months and stuff Actually by chance like the entire organization crew which is three of us are in here today. So yeah Hi guys One of the other things that we've done through the summer is this project called summer of hacks, which is basically very Practical hack days where we can kind of get together and just build stuff Which has been a lot of fun and we're trying to think of expanding this next year So if anyone wants to get involved with that give one of us a shout So that's that's me and I'm here to give this talk about internet browsers So this talk is a play on the term Internet of Things Which I would define as lots of devices that are connected together They're able to take input from their environment and Also made also able to make changes to their environment and they're connected together by the internet And I really love the Internet of Things I think I love it for a couple of reasons Firstly, we're seeing all these like really interesting new types of devices that are coming out like network connected bike locks or Fire alarms and just really interesting ways of interacting with technology and the second reason I like it is that I Think it's really changed the way that as a developer how we view problems and solutions and rather than having to be locked into a particular way of developing software we're kind of inventing new ways to kind of interact with technology and I think the key part of this is this word thing. So I'm going to read out this definition thing An object that one need not cannot or does not wish to give a specific name to Look at that metal rail thing over there And I like this I like the vagueness of this this definition. It's really kind of just whatever You don't actually have to kind of care about what it is and I think by thinking about things it kind of liberates us to Just not really bother too much about the implementation details so I'm here to talk about browsers and browsers Browsers are quite different from a thing. Okay, like we Know what to feed in and what we expect to get out the other side. We kind of know how it works and also The websites that we build are very much informed by the websites that we built in the past or the websites that we've browsed and so We're without realizing we're quite tied into a particular idea of how the web should be and Yeah, it doesn't have this vague notion of opportunities to have So what we're going to do is we're going to look at Our devices in this room as things and I need to refresh this because it's broken a little bit cool So every circle on this graph represents one of our devices that's connected to that URL that you first visited and So your screens that number should have disappeared and it will have turned great gray if it's not you might want to refresh Because you can do that because of the web So What we're going to do is we're going to look at each of these browsers and their capabilities and the kind of things that we can read from them So first up we've got meta information information about the device itself What data we can read about that so first up we've got battery so you can access The battery API and this allows you to kind of see the current level of the battery so you can see some here aren't as charged as the others and The pink ones are the ones that are currently charging as well So you can detect that through the battery API and see detect when that changes and the gray ones here don't Don't have access to the battery API so we can't pull out that data Every one of our devices supports geolocation through the web API So you can kind of pull out your latitude longitude the precision of that you can also Do it in a way that you get Updates periodically as you're moving around so we can find out where our devices within the world which is huge right Our devices have a location, but they also have a position and we can read the orientation of our devices Like which way it's actually facing in its environment And we can kind of gather that together. It doesn't always work for laptops So, you know Yes, we can find out what orientation of the device has to like the center of the world. We're just gonna handy Proximity so a few devices support proximity API and this allows you to see How far away an object is from that device? So the standard use cases when you're holding your phone to your to your face to answer a call You can detect that through the proximity API But as far as things go it's quite cool to be able to see That another thing is close by your thing in your hand It's gonna handy. So that's data about the particular device itself but we can also pull in data from our environments and read stuff so Video and audio so using get using media we can access Webcam and microphone streams so we can pull out all this data from our environment and Yeah, do whatever you want with that You've got fairly good support here The ambient light API allows you to see The the lighting in the room in lumens So you rather than having to access it through a webcam and try and work out from that You can actually access the raw lumen value from the light in the room so you can attach your interface appropriately and touch like so our devices can see if We're touching them with with our fingers so we can kind of see We can do a lot with that right like that's a really kind of powerful thing to be able to do and This obviously drives the way that we interact with the web So that's the way that we can gather the ways as we can gather input into our devices Using the web platform We could also make changes to our environment with a number of different APIs so Some of our devices support the vibrate API so we can actually physically move our devices So if it sports your phone will buzz every couple of seconds And that's really powerful that like through calling a JavaScript method we can make something move We have access to the pixels on each phone so we can change the color of objects in a room Which is super powerful when you think about it like changing the color of things And obviously you can do this to a lot finer green control Another thing we have is audio So using the web audio API we can synthesize sounds So if you get turn up your volumes you can hear all these different tones Are being generated on your device itself and so it's kind of random tones between two different frequencies So we're able to kind of make sound waves from our devices and we'll actually kind of go into this in a little bit more detail in a bit That's gonna happen a lot cool So the other thing this we have with our devices is that they're connected to other things So we can connect our devices through web APIs to anything that is exposing that So for instance Sky is clear 25 point six eight degrees centigrade. This is the weather in Tokyo. So we're able to access this through just a fetch command and We can talk to another device that knows what weather it is in Tokyo And we can do this with the same ease that we might access a local property of the orientation of our devices This is really powerful Okay, so Why should we bother thinking about things on this level like input output and general devices I Think it's quite easy as a developer to get caught up in the implementation So to think that writing code is my job when actually my job Is about facilitating a user to achieve a task and I think it's quite easy to kind of get caught up in choosing the right framework or writing things with writing indentation and I Think it's it's hard sometimes to kind of keep focus on that That end goal of our craft So at white October we do we have multi-disciplinary teams and this kind of helps us get around this by working really closely with UX design and development together and so by kind of keeping like by Using user stories and wireframes it allows us to kind of align what we're trying to achieve Which is something for the user to interact with and I think we can take this even further by just Imagining a user trying to do a thing and seeing how the object they have in their hand fits into that so Maybe it's not about them Pressing a call to action or maybe it's not about them filling out a form. Maybe they They want maybe it's easier for them to like make a phone call or Move this wave this phone around I think it's really It can be powerful to to think of what we create on this kind of term to and how our solutions can fit around that and What I think it should something what I would like to think it boils down to is that people use things to do stuff and Working with this kind of like vagueness. I think that allows us to And create the best solution for solving someone's problem. Cool. And so what we've done is we've Looked at our devices as not just being browsers But being things and the things that we can kind of pull out from that But it's something quite interesting about all of our devices that can visit that URL And that's that we all they all share the same environment this space So we're gonna do is we're gonna play around with that a little bit And the way we're gonna do that is I want you to get your phones or laptops and you should see these three buttons a B&C And what we're gonna do is we're gonna do a really Very rudimentary positioning system Which will work By pressing these three buttons at very precise moments Cool If you've pressed any of them by accident press the X to reset it and then we'll get started Okay, so the a button What you're gonna do is I'm gonna in a few seconds move my arm slowly across the room And when it passes you I want you to press the a button. So at that instant And that's gonna give us obviously the angle through the room So is everyone ready does that make sense? cool Right here it comes right Okay, and we're gonna use the B button to work out our distance up through the room and The way they're gonna do this is like with this line along the top so there's gonna be a circle that travels along that line and When it passes where you are I want you to press the B button So there's gonna be some points. So this point here is the front row down here This point here is the back of the downstairs area this point here is the start of the upstairs area and This point here is right up at the back So this pink circle is gonna travel along really slowly along and I want you to press the B button when it passes you is that clear It's gonna be about seven seconds. So very precise Go ready So up at the back now Cool, right. So we've got those two kind of data points and we need to Have a third point that allows us to work out where they are how they relate to each other So what we're gonna do is we're gonna press the C button at exactly the same time So everyone's gonna press it and once you've done that Our devices should know where they are roughly in the room. So I'm gonna count us down and What I'm gonna do is I'm gonna count down Three two one and then say go and I want you to press it on the go not the one Right, okay, so get ready five four three two one go Right now, I want you to turn your phones to get in the center of the room on your laptops So everyone can see the screens So whatever you've kind of got on the URL and hold it up high and it should have gone white Yeah, perfect, and yeah point it towards the center so that everyone can see and we should see first using the Angle through the room it will kind of use a hue so you can see it goes from blue over here to three to green over that side and Now we're using the y-axis so it will kind of should go into strips Which are kind of seeing the green strip over there it kind of works This is good enough. Yeah, that one's a bit sketchy and now They're all going white and we're gonna play a note as it travels around the room. So it's gonna go this way around Yeah, that's worked, right so That what happened so all of our devices Kind of calculated themselves where they are in the room, but because we're all connected together We should bear to visualize we should bear to gather that information in the same way as we gather any other information, so This is everyone's devices in the room And me in the center so you can see there's some people behind me Which is kind of interesting But you can see like the kind of front row here Yeah So these are our positions in the room and now that we're all connected together. We can do some interesting stuff with this So what we're gonna do is we're gonna get a sound that goes from one side of the room to the other and Our phones are gonna change color that yeah happens a lot Our phones are gonna change color Based on their position through that so we're gonna start over on this side And then we're gonna go right up to the back Don't go behind me And then over here And back over to this side Cool, so in about like 10 or 15 seconds if you hold up your phones again Then we should be able to see the transition of Hugh going across from as well It's gonna start low. It's gonna go high So you should be able to hear moving through the room Yep, and I'm not sure where it is actually So it feels like it's over here So that's it gone over to this side I think that's gone up the back. So that's us synchronized so we're using the the time stamp of when you Last press that C button to kind of synchronize our devices together for the time of that But this can be when you've got several devices together Synchronizing the timestamps can be quite a difficult thing to do So what I'm gonna do is I'm gonna Send out a message To play a single note at the same time. We'll see how this works So you can hear that kind of is not will happening at exact the same time And what we're hearing is the latency of our particular devices to their their network So I'll try that again So it's not just one single note and then this gets a bit harder when we're playing Several notes together. Yeah, so that's not very musical It was really interest by this is you can actually hear the latency Happening like that last note was more delayed than any of the others I guess because the Wi-Fi hotspots got saturated or something So a way around this is instead of Relying on a single point in time instead of expecting something to happen there We can kind of embrace this sketchiness And instead of playing a single note to put a single time We can distribute our note playing over a longer period of time and make it fade in and fade out So what we're gonna play is we're gonna play that same note, but It's gonna increase over time and get a bit louder and a bit more Notey, and then it's gonna fade out again Okay, or not. There's a lot of things going on here Turn the Wi-Fi off Cool, right. Okay, so we're gonna play this note and it's gonna come in Hopefully yeah, so it's gonna come in slowly and quietly But then get a bit more intense and then fade out a little bit So instead of playing a note at a particular time we're kind of embracing this The way the networks Not allowing us to do that that limitation So what we can use this to do is we can combine these two things together So we can use this this idea of not relying on a particular timestamp but fading it in in a kind of distribution and our position in the room So what we're gonna do is we're gonna get these two like we're gonna get some ricks, and we're gonna get them to Play right up in the back of the room and move down towards the front. So it's gonna sound like a Flock of ricks, hopefully It might be quite scary I'm sorry for that. You can feel it kind of moving down, right? Yeah, so that's like Yeah, so basically we're kind of rolling that wave of frequency down through the room and the volume is going up at the same time So we get a bit more of a notion of movement in the space That's basically gonna happen for the rest of this talk so Yeah, I don't really know much about birds but In kind of like looking for bird sounds I I Found this the sound of a rook So we played like a one like core of a rook But when a rook plays when it when it makes its call It does several of these same calls and then the last one sounds really interesting. It sounds like the rook's been surprised So as a bit of a side note, we're gonna listen to some ricks So watch out for the last one when it sounds surprised I love ricks Um King fishers, so these are like little tiny birds that are native to the UK. They don't usually Swarm around the place, but if they did They might sound something like this, so we're gonna get some King fishers So this is a higher pitched noise Which better for the so it's gonna move from the front to the back and you can hear it getting a bit more intense as that kind of waves coming in They're a bit cuter than ricks, but So Yeah, the interesting thing about this is that we're utilizing the environment of our devices together, so we're not Playing media on a particular device We're playing it in the space between devices, which I find really interesting and it's only by thinking about how The sites that we create how they are used that you can start utilizing that kind of thing so we've talked about Our devices as things and we've talked about our things as sharing an environment in which with us but the last thing I want to talk about is how we actually How technology is related to us our kind of relationship with this virtual world because I think Yeah So I don't know if know where that came from That's really interesting So, yeah, so what I'm gonna Talk about is This which is so this is my favorite bit of archaic technology. This is a storage unit from uni back to The way this works what this is called is a mercury delay line Storage and it's a really interesting bit of technology and the way this works. It's like you've basically got a line in on one side Which turns into a speaker and then you've got a line of mercury in that square And then you've got a microphone on the other side that with a line out And what you can do is you can feed input down that First line it gets converted into sound waves and travels down that line of mercury And then get picked up at the other end by that microphone and converted back into a signal And Critically this takes a little bit of time to To travel down so that's the delay through this mercury And what's interesting you can you can feed in data through this you can encode binary signals and You can feed it in one side and it will travel along that mercury and it will get converted back into a Signal on the other side after a delay And when this gets interesting is when you add a feedback line So as it comes out the other side, it's feeding back into the first input and so by this method What we've got is we've got persistent storage, but what's really beautiful about this is The actual data is stored in ripples of mercury Right, so it's like it's a very physical Physical thing Rather than being a virtual thing And I think this is like can be quite tempting for us to kind of treat our devices as being some kind of virtual Magic object when actually they are fundamentally of our physical world like I Think if we remember that we can Interact more with it. So inversely We Are part of that physical world too. So we are kind of connected to technology in a much more profound way than Then we sometimes actually cater for so the way that we interact with Websites isn't necessarily doesn't have to be constrained to a keyboard and mouse it can be touch or it can be much deeper ways a way of understanding the technology and feeding into So rather than that mercury delay line storage, I'm gonna show you something else Which is a lot crapper but we're gonna do it anyway and so What we're gonna do is we're gonna store some data and that Data is going to be in the format of a four-digit hex code And we're gonna map this to a particular point and the way that we're gonna do this is we're gonna subdivide an area into 16 And then we're gonna just pick the first digit and pick the the relevant Square of that subdivision And we're gonna subdivide that and then pick the next digit out of that and then do this again and Do this again and what we've done is we've taken that four-digit hex code. We've mapped it to a particular point So what I'd like you to do is scroll down on your page and you should see a text input field and I want you to put in that four-digit number that I first asked you to remember Remember so what we're seeing here is we're seeing all that data that everyone here is memorized and there's a few wrong ones but Kind of not too bad And you can see that it's kind of aligned in this circle which we've kind of re-encoded as these four-digit hex codes And what I really like about this is When you consider where this data for this image is stored Right it's kind of stored in everyone's memory. We kind of like distributed that storage And it's actually pretty good. This is like probably the best I've seen So I've kind of talked in a pretty literal sense about our relationship with technology and how we can use our browsers and devices to Make changes to our environment and to read information from our environment to And But by creating things for the web we actually have the opportunity to do this in much more deeper and more profound way So this is a blog that my now colleague Jared put together and This documents his bike rides around the Oxfordshire area and this particular page is a route from Oxford to London And I found this and ended up cycling that route from Oxford to London So this web content Changed my life in a physical way in that I got on my bike and cycled 80 miles and that's a huge Thing to have happened for from Jared just putting that blog up there This is our JS Oxford community thing which helps us bring together a community and helps people learn stuff and Is a lot of fun and having this website Allows us to physically get together and meet This is a project that one of my friends works on which is to Find out the water levels in the Oxfordshire area by these sensors that he's been putting under bridges And this website allows you to kind of see if something's flooded. It's very It's a very kind of real thing that you're able to kind of get out that and in this site I like to think that this site is part of why we're all here today together sharing this these talks and learning all this stuff together and To change the world, I think there's only a couple of things you need to do Firstly to consider What a person is trying to do when you're actually building Building a site and secondly it has to exist Okay, so it doesn't really matter if you've got a kind of a perfectly architected Tool and it never sees light of day You want to get something out there to be able to make a difference to people no matter how hacky no matter how ugly just Make it exist So, yeah, thanks