Opher Vishnia: Wait, you can do that with JavaScript…!? | JSConf Iceland 2018

hi Leon yeah okay cool how's everyone doing how amazing is Jase conf Iceland so far yeah okay stop I have a talk to make so let me start with confession I less than three JavaScript JavaScript is amazing and weird and pure and awesome and strange javascript is the only language I know of where you take your code run it through an igloo fire on it to then run it through a predefined and I mean we've created an ecosystem that allows people to contribute so much that now we constantly complain when people contribute things and javascript is everywhere so my browser runs JavaScript my server runs JavaScript my TV runs JavaScript my washing machine well that doesn't run JavaScript that probably runs C++ but only because you need pointers and memory management when you're handling soft fabrics and and according to some TV shows JavaScript can even run weapons guidance systems well only if you're using jQuery that is like if they haven't uploaded the code to github so I didn't test it yet but it looks legit so we just is is you know it's ubiquitous everyone uses it and you can you know do everything with it but you don't have to trust me like you don't have to trust what I'm saying you can trust this book from 2003 literally titled how to do everything with JavaScript and this book teaches you amazing things like version one point X or version 2.0 new stuff okay so javascript does a lot of things but I'm here to show you maybe things that you weren't we thought weren't possible of JavaScript or kind of off the beaten path the cool thing about web technologies is that they allow all of our ideas the good and interesting ones as well as the dumb and silly ones okay so my name is at offer v I come from you from Tel Aviv Israel where the spoken language is loud Hebrew and you might not notice but my name offer in Hebrew means fun you know like Bambi not sure why I just told you that does seem important at a time I'm a designer a musician I'm sometimes a gamer and it turns out that javascript is really good for all of these things so that makes me a developer in my day to day work at a company called echo as a creative developer what exactly is a creative developer according to some definitions those being my definition that means someone who works with other creative people like film maker game makers musicians designers to do all sorts of cool interactive things on the web and I want to start by telling you a little story about myself and how I got into web development so the year was like 97 or 98 and I was 15 years old and I was spending a weekend over at my grandfather's and it is there that I found a book about HTML and that book was mesmerizing I remember working hours of notepad and then Netscape for like trying to to figure out like what this thing does and I read about this amazing technology called links I allow you to connect one web page to the other web page and that seemed amazing like that seemed but the problem is it didn't work so well for me like I didn't know what was the problem like I I knew I did something wrong but what was like water song and then it hit me after a few hours you see it's not called a Herff element it's called a RIF element cuz that makes so much more sense you know riff and not hurt anyone you understand why I didn't have a girlfriend until date is funny what fast forward a few weeks later and my I had my first website up on Geo CDs does anyone remember Geocities yeah I don't care it looked kind of something like this [Music] actually it looked more like this and you know you're laughing at this because it's you know it's hilarious but we didn't have fancy technology back then we didn't have CSS and the cloud or any idea what we were doing we had to build our websites with nested tables I mean these kinds of nested tables and long not long after like I honed my skills I worked on making websites in the early or late 90s that is and I finally as a teenager was able to make some pocket money by making websites for companies so like one of the first websites I've ever made an actual company paid me actual money for this thing and I don't know it looks like this like maybe shoe shaped sidebars were all the rage back then but uh the funny thing about this is that it actually has a button that allows you to turn off JavaScript how that's an amazing feature but okay enough about me and my sense of nostalgia nostalgia let's talk about JavaScript so what is javascript jscript allows us to add functionality to websites so turn them from static things to interactive experiences so take a look at this simple phone input number phone number and put for example so you know it's style 9 through CSS but this has a slight issue because like if you want to use this you need to like point your mouse at the input and then you know use the keyboard to input your numbers and like that's just inefficient that's inconvenient you'd say like maybe we can add buttons so that you don't have to use the keyboard if you don't want to so okay that's really easily solve JavaScript let's advance there problem solves like now the user can just click on that bounty which is his or hers phone number and we're done and I know what you're thinking like this isn't this is a joke this is an inefficient method of inputting numbers so yeah I know I hear you let's fix that that let's make this more efficient with JavaScript there we're done and and I know where it's like where we're already we're already there but we can continue improving this I mean JavaScript gives us so much power and strength we can make this just better for all of us all of our users we can just you know you can endless so I studied design at the Bezalel Academy of Art and Design in Jerusalem which is one of the best design schools in Israel with one of the worst design logos in Israel like I don't know what they were thinking it's like I can't even okay so when I when I studied there I came to realize just how amazing would it be if we can connect technology and art and what technologies allow us to do that so check out this example from mental oh yeah and here we see using canvas and JavaScript an interactive generative artwork where every time you click you get something completely new so every user that but that just plays with it gets his or her own artwork how amazing is that and that's JavaScript I mean this just you know just code just just script and this creates these amazing patterns but you can take this a step further you can transform this into 3d for example so this one from the Google later arts team generates does generative machines via 3GS and WebGL and JavaScript so every time you click generate you get this new machine this beautiful thing that is generated from seemingly randomness or another example would be this example where you have procedurally generated all tiny airplanes so every time you click on the next button you get this new flying machine and that's that's super cool if you want learn more about generating things I should I definitely recommend you to take a time machine and go back into Kate captains talk yesterday and if you don't have that then when the talks are up you should check that so these are all personal experiences so you see them on your computer on your own personal monitor but just script can do so much more it can go out of your personal monitor and turn into a public thing so this by this work by marpie a Polish base polish-born SAN francisco-based a digital artist lets users play and generate 3d objects and worlds using the 3GS and the HTC vive so this is an public and art piece in a public public space and users can then take the things that they did and print them in their 3d printer and you can even go bigger than that so there is a country somewhere closer than North Pole or so I've heard called Iceland and there they have sometimes they do a conference where you can actually paint on the building where the conference at if you ever get a chance I definitely recommend going to that conference but but but art is a really good way to to learn and understand things it's it's a service a good way to and the learning tool so this is a project like a self project I made while I was studying design and I was really obsessed with the idea of evolution so evolution has a really hard concept to understand and visualize because you have like mutation and and survival of the fittest and time and generations so I thought like maybe I can create something that will help me understand it so I did this little coat pan with just you know canvas and JavaScript and this has digital creatures with very simple rules big creatures eat little creatures little creatures eat food those creatures run away from Bigfoot creatures and then you get this like from simple rules this amazing system which it's kind of like a virtual aquarium that you can look at and all these emerging patterns arise and it's just mesmerizing it's just you know simple JavaScript so I thought okay how can we take that a step further and I turned this into 3d you know because 3d are it's always nicer but the cool thing about that is the web is all about sharing so you can share your experience with someone else so I thought about if I have my aquarium and you have yours what would happen if these two ecosystems would were to meet so if I have my creatures and I open a portal up to your browser where you have your creatures well how would the two ecosystems interact which well one of them completely obliterate the others will new creatures arise like that's super cool that's something you can do just by typing javascript and hitting refresh a lot of the times how amazing is that but there are different ways to do learning so one of these is machine learning and JavaScript also allows you to do that so Jeff's - it might not be like the first thing you think of when you think about like machine learning but turns out that's the possibility so deep learning GIS is a machine learning like library in JavaScript and I'm gonna show you an example here and the way it works is that I'm gonna play a little melody and then via machine learning we're gonna hear another melody that's based on what I just played so I just write this out I didn't say it's gonna be a good melody just that it's kind of work okay and if we're on topic of music music videos so I remember again as a kid watching being glued to the screen watching MTV and which one and those all were passive experiences but the web allows us to be interactive so this is kind of an three dreams of black where you have 2d animation 3d animation whatever the other points the mouse like the stream of animals run around on the building and that way every user gets his or hers own personal experience and it doesn't end there so this video clip for 4-acre decades fire reflector uses WebGL and shaders so wherever you point the mouse like there's an image manipulation there and also some 3d where the the dancer in the video has this 3d thing overlaid on top of her which you can play super cool stuff and I mean the options are endless this video by real estate is an actual like canvas that you can paint on to you like here I tried to tame the sky blue this is really hard when the video keeps moving but you know it gives you something to play with for your you're creating art on top of someone else's AR and this is something that's only possible due to web technology the next project is something I'm really proud of is something I did at work this is the official video for Bob Dylan's like a rolling stone so what happens here is you have sixteen different channels of video and in each different Channel the characters in the video are lip-syncing to Bob Dylan Dylan and song and then the user can pick which channels watch so instead of watching one music video you're like kind of creating your own personal music video and again this is like web video it's just you know what could video player in JavaScript and there are challenges here but it's just pointing your browser somewhere and seeing this pull so okay you can clap it's okay that's one of the things we do one of the ultimate forms of interactive entertainment is video games subjects really close and dear to my heart and video games come in all forms and sizes especially on the web so video games can be something really small like this mini game and the website for the magicians a sci-fi TV show where they use canvas and HTML and some video to create some engagement while you're watching while you're interacting with the website or a video game can be like a 2d thing this is a game I made to teach kids concepts in evolution have I mentioned that I like okay nevermind this was done with 2d library called phaser which is based on a renderer called pixie but you know again you can let take this to 3d so this is an actual 3d pinball game running in the browser and the interesting thing here is that there's physics involved there's a library called p2 physics in the background actually doing the calculations so you have physical simulation again running in the browser but everything that we just saw is a single-player experience so it's just you sitting in front of your computer or mobile or whatever playing but the web again is all about connecting people it's all about sharing so the natural step from this is multiplayer games players that have many players this one called Wanderers IO by game developer and designer called resinar gives you control over a tribe and then you fight other tribes for resources for land and that's super cool I mean games are usually written things like C and C++ to be close to the mell or whatever but then you have to download drivers and update your graphics card and you know all these things but what if you just point out your browser to webpage and just play with someone else without having to download anything so that is what I had in mind when I wrote this library Lance would you can find Lance DG and Lance is a kind of a server and a client that allows people to create their own video games online video games web video games without having to worry about writing net code or synchronization or all the ugly stuff that I had to pull my hair over to do and what can you do with Lance so this is a game that I made with Lance it's called sprocket league and it has nothing to do with any other game with a similar name but in this game each player controls a car and these car these cars actually play soccer and you you this runs with 3d physics engine running on the server on the client and again this is all web technologies this is all stuff then you can do with just notepad you shouldn't do this with notepad but you can if you want to okay another really cool technology that that's up and coming but also out there is web assembly or its precursor ASM which essentially asks you to take other languages like C or C++ or could be anything and compel them to binary that the browser can understand and then you have the browser running something that's far more effective at computation so what does this help us with an example we'll be porting the entire unreal game engine which is like a serious thing web a game engine and run it in the browser using WebGL so what you're seeing here is not JavaScript it wasn't written in JavaScript but it runs in the browser and JavaScript can interface with this and web assembling is going to be gratefull a lot of things that are computationally expensive like audio manipulations video filters everything that needs some juice powering it but I am excited about a lot of things that have to do Bertrand and running in browser so what if and bear with me what if you could run windows 3.11 in the browser how amazing would that be so you could just like open up paint and do something or you can like open up so later you could completely completely reimagine how was it when you were sitting in your mom's basement in the 90s and this gets us to their next technology which is what virtual reality or what we are so maybe you've heard about this but a way to learn about subjects that I don't know is to a way that I like is to look at stock photos of that specific thing so if we look at stock photos of web we are we can learn all sorts of things like for example what VR is kind of taking a stroll up in nature and maybe we have rainbows coming out of your crotch or maybe what we are is sometimes being attacked by really old phones or or maybe you don't need to put anything like you maybe you not need to put VR goggles to be in what we are maybe you just need to take headphones and then put them on your eyes and pointed something and that works just as well but we are and what we are specifically is all about putting you inside a virtual world so in this example you're in this musical landscape we have we have sound yeah okay and and we have these cute tiny creatures where everyone does has its own little sound and you can kind of play around with them in this thing but virtual reality is a oftentimes product of 3d models and like something that's completely virtual and at work I did something really cool it's this project called broken night which is a film a live-action film which showed in the Tribeca Film Festival last year starring Emily Mortimer and the idea here is that you're inside this film you can control it so the plot for this without too many spoilers is that there is this couple and they had an argument and they they're coming back home and then there's an intruder in the house and you get to live that moment so you have like for example the two characters the man in the woman and she takes the gun and then as a viewer you see the pass and wherever you look that's where the story is going to take place so does the guy get the guns as the girl get the gun you get to choose and then you actually sync this interactive video this story that you would prefer to see so the story is not linear it's completely interactive cool right this leads us to our next thing which is web augmented reality or as I like to call it web are and if virtual reality is all about putting you in the virtual space augmented reality is all about taking the virtual space and putting it in the real space in the real world so this example from Disney research allows you to take like a tablet and point it at a kid's coloring book and whatever the kid draws like comes into life in 3d so recent developments in AR allow you to actually do that or at least potentially do that in the browser and there was a talk about this by race yesterday also suggest that you check that out so we talked about web PR and we talked about where they are and today there is a new buzzword that if you combine these two technologies it is now called web X R or web extended reality and I know Mozilla is pushing hard on a standard that to progress this forward and I know I'm joking but this is like super cool stuff so the last last thing we're going to talk about as the physical web or the internet of thing is and there are a lot of interesting stuff going on there so one of these is no BOTS which is a movement that aims to get JavaScript on actual robots so for example if you have a robot and you have node and if your computer is in Spanish then you can actually control the robot via JavaScript and that's pretty cool to Mai's or or you can do something more you know something better you can make a cat remote control so all you need to do in order to get that as needed Arduino and you need the johnny-five JavaScript library and you also probably need a cat that's a requirement or how about controlling and drone from your browser on your phone so this is done via web Bluetooth so this example from Peter Shaughnessy shows how he's using javascript in his browser on his phone to connect to a drone and just fly it so there's no app you didn't down Lenny have to do this just like JavaScript API and this works today on mobile chrome and also on Samsung internet which turns out is a browser but super super cool that you can do that so everything that I just showed you is is out there in the wild you can just use that right now what what does the future hold what does what's coming up next so according to West world an HBO sci-fi show about AI robots that run a theme park these AI robots are written using react so I saw Dan dance talk yesterday he didn't say anything about robots but maybe that's like in the next version I don't know hopefully yeah fingers crossed but other upcoming technologies web USB that allows you to connect peripherals directly to the browser web NFC for near field communications from the browser or web mini for the music people among us and I want to end with something that gives you a little perspective this was the first web server ever that Tim berners-lee used in CERN and it literally had a sticker that says this is the Internet don't power it down and this was the first website that was used but then it showed and you know what a what a way we've done from that day to what we can do today with web technologies I mean that started there and we we are you know four hundred people who are passionate about web technologies coming together to meeting Iceland to talk about this thing that we're so passionate about how amazing is that so I'm gonna leave you with a parting gift something an idea that might again not be the best but it's definitely not the worst and that is JavaScript dance party [Music] okay thank you so much right before before before you leave and before you leave him before I really wish this stage my way my friend under significant other - and I have to show that I had more fun than she than her yeah so I'm gonna take a selfie of myself with you and you're going to make it appear as if you've had the time of your life in this talk and then I am going to win because winning is important in marriage okay okay ready one two three raise your hands thank you so much you

Channel: JSConf

Views: 54,368

Rating: 4.6063757 out of 5

Keywords:

Id: JCATu2WkOq8

Length: 29min 23sec (1763 seconds)

Published: Mon Apr 09 2018