 All right, so after my talk earlier today, someone asked me this question. Why you know use semicolon in your JavaScript? A fantastic question, and I actually thought that it deserved a more thoughtful response, and actually this is something that I've been thinking a lot about lately as I've been working on designing the GraphQL language. I actually think that semicolons and commas should be considered white space, and I'll explain about what I mean in forex. So programming languages are amazing and powerful. By typing on our keyboards, we can express all kinds of logic and ideas, and we can do that because programming languages use punctuation to write structure around all those other ABCs and 123s. But there's another super important part of programming languages that I think we probably just don't think about as much, and that's the negative space, the voids between the forms. Code is written to be read, not just by your computer, but far more importantly by you and me. White space helps you improve the legibility so you can see the logic in your code, and it's often totally up to the programmer or your company style guide, I guess, as to how you're gonna use that white space. When we write programs, we're almost always writing lists of things, lists of values in an array, lists of arguments to functions, and lists of statements that we want the computer to execute. One of my favorite families of programming languages, and in fact one of the oldest, is Lisp. It means list processor, and in fact all you can do in Lisp is write lists. But most of the languages that we use day to day, they derive from C, and they use commas and semicolons all over the place, especially for lists of things. That leads us to fight over whether we should do this or this, or ultimately like fighting to change the language so we can make it possible to do this, and really that's just trying to balance legibility with like maintaining blame lines and version control. This is a stupid thing to fight over. And it can also lead to some confusing behaviors. So in an old version of JavaScript, this happens. This happens today, undefined, that doesn't sound right. We can fix that, there we go. Or like, I don't even understand what's happening here, not a function, what? Oh right, I forgot a semicolon. So commas and semicolons are significant, and whether you include them or not can change the meaning and behavior of your code or lead to syntax errors. So that's gonna lead to developer mistakes, bugs, and less legible code. So there are a few languages out there that have fully sidestepped the problems that commas and semicolons can present by omitting them completely. Lisp is one of those examples. So here's just a list of numbers. And here's a function call. And here's a list of expressions to run. There's no ambiguity about where one item in the list ends and the next one begins. So there's no reason for commas or semicolons in the first place. And GraphQL also works this way. We actually borrowed this idea from Lisp. In GraphQL, there's no ambiguity, so we also don't need commas or semicolons. And as a language designer, this is actually a pretty interesting challenge to make this work. We gotta be really careful to avoid the kinds of ambiguity problems that languages like C and JavaScript suffer from. And if we do it right, it means that we can avoid all this accidental misinterpretation, which means fewer bugs and less confusion. So back to whitespace. Even though most languages ignore whitespace when running your code, we still understand that it serves a very important purpose for helping us to read and understand code. But I think whitespace isn't the only thing that can help us make code legible. Sometimes commas and semicolons are actually pretty useful to understand what our code means. So maybe we don't wanna get rid of them, we just wanna treat them like whitespace. Not significant for running the program, which forces us to make sure there's no ambiguity, but still available if we need them or we can omit them if we don't. And in fact, both GraphQL and most versions of Lisp, they support this idea, they let you do this. So if we look at that array of numbers in Lisp, maybe it'd be easier to read if we put some commas in there. And most Lisp languages, like Clojure, they let you do this, even though it means exactly the same thing. And this maybe helps our trailing comma problem. So you can do this, that's fine, or you can do this, that's fine. Or maybe you just do this and this is fine too, why not? Commas could be there purely as eligibility aid if you want them without fear of things getting changed. So if you work on probing languages or you want one, please consider commas as white space. Hello, so hey, I was here last year, but I was talking like for a half an hour, so I'm gonna basically do away with all the boring 25 minute and just go straight into it. So this today, I'm here with Pusher, so we're outside, if you wanna kind of find out what we are, we do like real time stuff, web sockets at scale, which is really fun. But I'm not gonna talk about that, what I'm gonna talk about is I need your help, right? So I came up with like a hack the other day, which I was wanting to test out and I thought this might be a quite a good place to test out. So what I was wondering is whether or not we can use audio and the web audio API to synchronize devices. So if you're here last year, you're gonna like know why I do this kind of stuff. But what I'd like help with is I wanna use your devices for it. So if you could visit brb.pusher.io, and you should see this little kind of diamond thing, hopefully. Basically like the diamond kind of rotates slowly. I'm gonna open it up so you can see. This is like kind of raw canvas and maths and I've spent far too long on it. So yeah, are people able to see that? Cool, nice one. So what we're gonna do is I'm gonna change this so that it should request for access to your microphone and what we're gonna do is we're gonna run that through an analyzer node and pull out which frequencies come out of it. And this is gonna like hack together a little bit so it only recognizes two frequencies, like 330, 350 Hertz and 450 Hertz. So it's recognized something that's probably in my voice. So what we're gonna do is is everyone seeing that? Is it turned black? And if the diamonds turn black, that's because your device doesn't support to get user media. So what I want you to do is turn your devices around here. Actually, sorry, just bear with me one second. Right, because this is an experiment, I want to kind of try and record how this works so I can know if it's gonna work or not. So if you could turn your phone so that it's facing this camera here and what I'm gonna do is I'm gonna, right, so I can see a few black phones there. I'm gonna start playing some tones through these speakers and hopefully all our screens should change color at the same time. So cool, that worked a little bit. So you can see some phones have changed blue because they've detected that at 350 Hertz. Cool. So I'm recording this and what I'm trying to work out is whether or not there's a delay going up which I can utilize for positioning. Okay, so we're gonna try on this side of the room now. Kind of sketchy. So what I'm hoping is that you'll see a sweep if you slow it down quite a lot. And then this is from the other speaker. And then this one's interesting. This is blue on this side and pink on that side which totally doesn't work. Which is good to know. And back again. And then just finally, this should be blue coming across here which I think that kind of works a little bit. And we're gonna pan across. Right, okay, cool. Thank you very much for that. So as a thank you for that, so what we're gonna do is we're gonna use that to give away a prize. So what we've got is I've got a little BB-8 robot unit. Have people seen those outside? They're like a sphero thing. Basically, we're gonna use our diamonds that we've got on the screens to give away that prize. So if you hold your phone up and what's gonna happen is they're all gonna start flashing in unison. And when they stop flashing, they're making sounds as well. When they stop flashing, one person's gonna get a red screen and that person's gonna win. You've won a BB-8. So yeah, congratulations. I think that's me. Thank you very much, cheers. And I'll come and bring one back to you later. Cool, right, bye. Hi, I'm Samuel. And I want to show you a pretty cool service that I just recently discovered. I'm not affiliated with that in any kind, so I just think it's generally cool. And the name is HyperDev. If you already know about this, sorry for stealing your time. Everyone else, check this out. It's pretty cool. So you can basically think of HyperDev as something like JS Fiddle, but including a Node.js server and a pretty neat dev environment. So if we go to hyperdev.com, we get an instant environment. So we have the front end part, which is nothing special, and but we have also a back end part. And if I open another tab here, this is like the default, the default project. I can just type anything in this HTML, of course. And sorry, oh, nice. Okay, sorry for this. I wonder why it's not working. This is the best timing. Okay, then I'll just tell you about it, about the features without showing. So we have the back end part and what it is is it's actually a Node.js server with Express and you can just instantly go and type server stuff. And I think what they do is they spin up a Docker container with some resources and everything is live on this URL then. So I hope it's working now. Okay, doesn't like me. Okay, to the server part. Most of you recognize, okay, this is Express. So I change stuff and in the server logs, I can see that as soon as I change something, it is actually deploying a new server. So I just changed the endpoint of this JSON. And there it is. So the change got deployed right away and this is pretty neat. So if you want to do a prototype or you want to do some hackathon, for the hackathon there's even extra cool stuff so you can invite people to your environment and then you can do collaborative coding within the editor. So therefore I will just post this in this lecture and you guys can join me. So you can see the cursor of other people doing stuff there. That's pretty cool. And you can export stuff to GitHub and you can import stuff to GitHub. There's no history of any kind. So if you fuck it up here, it's gone. If you don't save it, anything else, go to server.js and change something. The people that are already joined. Yeah, I think my time is up. Thank you. Okay, my name is Javier Marquez. I work as a front-end engineer for You Can Book Me and I'm here to introduce React tiles. That is a React component, so we are talking about React. But it's based on an idea that is a really general idea of since all the front-end application can handle in routine. So that means that every application can understand the routes and URLs and translate it to the screens that you know. So if the applications can handle the routine, why can't we show more than one route at the same time? So this component, what it does is just load all the routes of your application in the same screen. For example, I have just opened the sidebar route in the right side and the home route is in the left side. And you can open more and more tiles as you need it. And you may think, why the hell I need more routes all at the same time if I'm struggling to show just one route? Well, it's kind of useful if you have, for example, a user list at the left and you can edit a couple of users at the same time comparing them and all the stuff. And this component allows to do so. It's like a top-level component that you may like to place it at the top of your React tree. And it handles all the routine by using the standard URLs. For example, I am using here React Router for the routine but I have a small adapter that makes React Tiles to understand the routine and communicates with React Router to open more tiles. Since you have tiles, you can use it whatever, in the way you like it, you can resize them, you can even open floating tiles. So if you need to have a look quickly to some data you may need, you can resize the floating tiles, you can dock them also, it's not working here, maybe here, you can close it and since it's working with URLs, the browser history can be used to navigate through the tiles. So it's really cool. You may also use the tiles to load external URLs if you want it, now it's not working. Oh yeah, it is. Here we are, it is the React doc documentation page. So you can close them, the tiles and you can resize. This component comes with a link component too that helps you to open the routes in one place or in a different place or in the same tile that we are already. It's also came with some utilities to know what's the current layout and helps you to know don't open too many windows at the same time, too many tiles and it's in a better stage. I think it needs a lot of job yet but it's quite usable. I am usable with some personal projects right now and if you may want to have a try, yes, I'd be glad to have any feedback. Thank you. Yeah, my name's Mark. I work for, I found a small company in Berlin called Embassy and I'm gonna talk about how to generate API documentation with Webpack, React and Swagger. So I have a few requirements where I want to have my documentation done on the web and so the first one, it has to be cheap. I don't have no money, so it has to be fast so it has to be fast, it has to be static. I wanted to have the separated concerns. I wanted to have different pages everywhere. I wanted to be crawlable by Google and I wanted to use PushState and I wanted to have an API playground. So Swagger UI isn't a great solution. I love Swagger but you can't really use Swagger UI for representing your company and representing your API to your users. So I'll show you a quick demo. Whoops. What's a hotkey for getting like mirroring windows? Does anyone know? How do you mirror windows? Mirror displays. Okay, so here's the documentation. So this is just a, well, a website of course and it's a fully React statically generated HTML with PushState. So you can see here, I've got loads of different pages. Some of these things look pretty similar. I've got the request body, I've got the responses. These are sorts of things you can put in in your Swagger UI, your JSON. And I can do things like authentication if I want with this. I can put in my different scopes and I even got a playgrounds where I can sort of try out different operations. Like this one here, for instance, takes no form fields so I'll just try it and I get a result and here's my JSON information. Do other ones as well. So that's it. How does it work? So let's go back to this. Oh, hang on. I want to get my note, there it is. Okay, so first of all, I'm using Swagger to YML rather than JSON because it's kind of easier to work with. I can load up loads of endpoints, resources and tags, these get really big in your Swagger documentation. So I use JSON ref to split it all up and create smaller files. Swagger tag, obviously, I've got this sort of tag here. I'm using some, I'm hacking Swagger a little bit for its capabilities. There's no concept of nested tags. So to build that menu you saw on the left hand side, I needed to sort of use a delimiter, like a slash, for instance, and the tag names. And then I use the external docs URL to generate the paths, that's where you see when the paths change. And of course, Swagger allows you to use markdowns. So you see all those pages that had markdown in it. Then of course you need to link the tags and the operation definitions and that's where all the operation definitions get put into those pages. So I had to do a few things in order to get there. The first thing I had to do was actually had to load the Swagger YML into it. Of course there's no plugin or loader yet. So I created one called Swagger loader. It basically just loads YML or JSON, compiles it, turns it into a dereferenced file and you can then load it in as JSON to your application. And so then connecting up to React router, you see I have a few paths like the index route and different sort of OAuth route. But then I have an API route and it has child maps, children and that all contains the information which I want. So then I had to build a React router, path extractor, webpack plugin. Naming is hard. So I built this to extract the paths from React router and put them into a React router, a React, sorry, static site generator webpack plugin. And that basically takes a flat array of paths and just generates all the HTML that I want. Oh, shit. Hi, I'm Jan and I want to share an interesting library I found on the weekend while building a mobile app. This is a website I've been building some time ago. It's on Heroku. It's just nothing very special. You just add some notes like hello from the web. There you go. Just add this right. So it's something that I used to more or less like a diary and my weekend project was to bring that to make a mobile app out of it. So weekend project for the mobile app, to store the notes, make it work offline and celebrate success. So I read a bit about possible solutions and I found a tool which is called PouchDB. So similar to CouchDB, but it is written in JavaScript and it can run on any JavaScript environment, can run in a browser, or one of the popular mobile frameworks that use JavaScript right now, like React Native, that was my choice. So it is a very minimal document store but it has the interesting feature that it's compatible to CouchDB's sync feature. So it can sync to CouchDB but also works offline. The same is true for code of an Ionic or a native script or whatever you want and even in a browser. And surprisingly easily I could make this work so it was really just in an hour or something. Let me show you how the code, which no, sorry, how the code for that looks. So implementation is really like this. So for the local version, you just create a new PouchDB object, then you create a remoteDB by URL. You have my local credentials there, go to town if you want. It's just a demo account. So, and then the magic here is like this simple sync command which on app start will directly sync all of the information to the remote database. And here the live feature is actually listening to changes that are being added to the cloud version or locally and automatically syncs it. And the retry feature here will actually care for, when you get offline or you get into an app mode, as soon as you go online again, it will automatically sync. So demo time. I have a little app here running. So you can already see hello from the web that I added before. Hello from mobile. This one is sadly not listening to change automatically, but if I add something here again, wait, stay in front. Test. Wow, test two. It will add automatically here. So offline already it's working well and yeah, very happy with the outcomes. Here are the specs. So it should run in any kind of modern browser. Opera as well, that was actually a reference to the talk earlier. So yeah, sometimes you find these blog posts that are easy and they actually work. So I wanted to share that with you. Hello, I am Marek Piasecki. I'm not giving up. I will show you two demos today of example applications of not React component-based library. Okay, I need to use mirror display, sorry. Okay, so this is the example application of imba, it's built in with imba. So I'd like to tell you some stuff about imba, but it's hidden right now. So it's also component-based library. It's older than React and other stuff. It's faster, like 50 times faster. It has nicer syntax. It uses different approach for speed. Instead of virtual DOM, it uses caching. And you can use all this stuff you learn about components, including managing state with it. But also it has some advantages like virtual DOM is next layer you need to learn and here is gum. And also you always can use any web standard that exists because it uses real DOM. So you don't need to be worried if there is a wrapper around some feature of anything written in imba. You can always use web standards. And we show you also another application, which is quite more complicated in interface. Yeah, it's for animations. It's for building animations for children. And it has a lot of controllers. I'd like you to show all the movie, but I'll better switch to the information about repository, which you can check. Yeah, just go there and give a start to an author. Version 1.0 will be released till the end of this month. And it will be more documentation then also about imba. And also a lot of video tutorials. Thank you.