 Thank you so much for coming to this conference and for being here, so I'm going to end here all here. So I'm Julian, talk about HDTV. But I actually kind of hate just pure technical talk. So actually there's like a narrative around us about learning. So I just started the drop in apps in. Absolutely nothing about geospatial systems or anything like that. So tell me if this sounds familiar to any of you, that's something kind of like this. So I was sitting down at my computer and I was reading up on geospatial maps and the company and the blog. And all of a sudden I have like a hundred tabs open. And I kind of get like a sinking feeling of, oh my God, there's more than I can possibly ever learn. If you're like in the software, you feel that it's nothing actually because all the people that have been here a while know that that is normal. And you just learn another deal of it. So I want to, the whole purpose of this talk is to share what we need to do that which is by ignoring as much complexity as possible and focusing on the fundamentals and things. So we all use, you know, our web browser, tens of millions of lines of code. There's way more code in Firefox and Chrome than in the Linux kernel or probably in Windows, which is frankly really scary. But people who don't know how many of that code works at all can be paid and be great web developers, which is really awesome. So I want to show you a tool called NetCAD. And we're going to do some fun stuff with it and hopefully you all will learn some cool foundational stuff. So NetCAD looks like this. It's a nice little command line utility. So everything on the Net works with what they call a client server model. So there will be one thing, listening, and that will be all. There are things connecting to it and then all the talking is created. So NetCAD here, we can run it in server, I would say. We'll listen on a certain port and pick it up. And then the dash K says, keep it open for multiple requests. We'll be doing that for the English a little talk. So we can have this running. Notice it doesn't really do anything yet. We can switch over to the other side. We can run it again. And this time we'll run it and now I'm client mode. So we'll type localhost 3001. It's going to connect to the other one here. Nothing happens again yet, but it shows up on the other side. And if I switch over to this other side again, I type A. It shows back up on the other side. So this is NetCAD is pretty much the simplest program you can run that does network communication. I'm just doing it on my own laptop to itself here. But if you want, you can find a friend and get their IP address. And you can talk to them over the NetCAD. But what you see here is exactly what's typed. So if you want some sort of security, maybe you shouldn't type in your secret messages. If you do something, if you've heard of Rope 13, maybe instead of typing hollow, you'll type a read. But what you see here on the screen in NetCAD is exactly what's on the network. So let's do something a little more cool with it. I've got a little web server running. So it's hosting this page. And you can see, you can imagine on the HTML it's like this page with a little header. It's just an image, just some other images. There's some links. So what happens? We go over to NetCAD. Oh, it's running on port 3000. It's not real spy. There's no turbulence here yet. So let's do NetCAD again for local host and port 3000. So nothing happens. What if we type a Git intro, HTTP 1.1. So we hit enter. And we get a bunch of stuff back. So let's talk to the bottom here. Oh, shit. Thank you. All right. Oh, we need one more thing. A lot of good results. So we need the host. So HTTP 1.1, unlike the older versions of HTTP, is actually a huge sticker about these sort of things. HTTP 1.1. And now the host. And the host can just be local host. So now, there we go. So look at this. It's an HTML back. If I scroll up just a little bit, you'll see exactly what you expect to see a title. You see Rails through in its own style sheets. And now here we see some more stuff, which is in its own way more interesting. So these are the actual headers that are sent back by the web server. So the web server says 200k. Everything's great. I'll probably recognize some of these if you've ever looked at like the Chrome or Firefox developer piece. Is this thing going in now for me? Yeah, okay. It's supposed to have questions back. Anyways, so it's got some stuff. You guys got the dates. I guess if the servers don't know about the date, then maybe they need to. So what you're going to get is some HTML. That's good so you know how to interpret it. But if you've used like the Chrome developer tools, but the whole thing is this stuff is not some visual interpretation of the headers or some sort of fancy nice display. This is actually the text that is sent over the network. So it's really nice to know that whenever you have something in the headers of your HTML requests, it's just some text. So it's up here. And we'll play around with it more in a second. Let's look things around. So let's run Netcat again. We're going to run it in server mode. So it moves to 2003. And we'll keep it open here. So it's Netcat's waiting for requests here. And go back to the browser. And we can connect to 2003. And Firefox will diligently wait for a while, which is good because I'm a slow human and I cannot respond to each of your requests. I'm even slower than Rails. So this is what Firefox sent along. So it sends a bunch of stuff. So it sends a git request for the root, just like you would expect. It sends a user agent string if you're ever interested in a really crazy tale of like deception and various companies and mystery and stuff in the tech readup of user agent strings because they're pretty crazy. Firefox sends things like it looks up HTML, it looks up XHTML, it looks up XML, but it really doesn't want to accept XML for quite as much. And then it looks up anything else, but not even as much as that. A bunch of other stuff. But now here's the key part. So Firefox is still diligently waiting. And we can just start typing some stuff. We can type HTTP, 1.1, 200, OK. And then if I make a type open, that sucks. And we can type it twice to separate from the headers from the body. We can just start typing some HTML. So I can type like h1, hello. And then if you're very used to the Linux command, the Linux terminal, you know, ctrl-d will kill the output, keep things going. So if I switch back over to Firefox, hello, with some HTML, this is pretty cool. So we just type some HTML and Firefox sends things with it. So let's do something a little bit more complicated. Let's keep building. Let's run another server. Yeah, and then we've got it. 2004 this time. Keep it open. This is actually really important. You'll see why. So we're going to just change the port here. Do the exact same thing again. And then I'm just going to type the same request again, except I'm going to add one thing. I'm actually going to add a little bit of this HTML. So it should be 1.120 today. And then I'm going to make a little bit more complete page. Let's start with our head. We're going to add a link tag. We're going to add some loops with style sheets. So relatively cool style sheets. And each breath, you can actually remain against style.css. Whenever you use a style sheet, it's not called style.css. I have that. Head type book. Oh, thank you. Save some time. Style sheet each breath. We'll figure out any type of thing. It doesn't matter. It doesn't matter. That's access. That was the head tag. And then let's do another go-to-by tag. Let's do another, another each one. Head pull over again. We'll actually process it ridiculously for giving it a go-to set. Let's close out that body tag. We're going to the gym. We're going to our body. Okay, that's it. Head edge, pull D. So what came back is a whole other request. And now Firefox is asking for a style sheet. Notice this time it says, hey, I really want some CSS. And anything else it doesn't want at all. This Q number is quite a little lower. So if we go back to Firefox, it's still kind of waiting here down at the bottom. It says it's waiting. I have this a little bit earlier than the last one. So we should ignore that. So let's type some CSS. So let's do some stuff with our each one. What color do you want to make them? Red. Red. Red it is. Alright. Color, red. So let's sit in here. Pull D. Go back here. And we have hello and red. So if you've ever gone to a web page and the HTML loads, and then you see like a little spinner and you see then like a deal opens and like then image loads, like a couple seconds later, you're told to not do stuff like that, right? Because basically how those, how those, most of those work is there's multiple round trips to server, right? And human web server Julian is ridiculous as well. But even, you know, if your users are on a mobile network, it's almost as slow as I am sometimes based on my iPhone at least. So you saw that there was, you know, like a multiple round trips here and I've never found a way to drive at home rather than to actually see the multiple restaurants there. Let's do something even more fun. So I live in Berlin right now and if you've ever been to Europe or you've been following E-Politics, they're really scared of you. Every single web page I go to now asks me if I'd like to accept this and it's kind of fun. So let's see what the story is with this here. So we're going to do the same thing as last time. We're going to do net cat. That's about 2005 this time. And we'll just keep it open. Let's open a new tab. 2005. Hit enter. Let me get our request as I've seen before. So we're going to throw something into the headers here. It's going to set a cookie. It's pretty simple. Do the same thing as before. If you want to put it on 200, okay. But then we're going to type our header line. We're going to do sets. Cookie. And what would like our cookie to be called? Any suggestions. It can be any text we want. Come on. Cookie monster. Cookie monster. Awesome. And then let's just do an H1. Cookies are yummy. Cool. So if we go back. It says hello cookies. They're changed. Put up the refresh list page. We get back here. And in addition to all the Google traffic stuff that is being used to show me ads. You can see that our cookie monster is in the cookies. And basically that's really all cookie is it's just a line header that your browser remembers and sends it back the next time around. And obviously they can get fairly complicated but it's all cookies. Let's go on to JavaScript. One more server. Actually this one. We have a full example. So this is just a view from our little rails out here. So what this thing is going to do is we're going to load up in a second. Just because I don't want to really type this HTML over time. So we've got some JavaScript here. It's just using jQuery. So we'll give requests to this URL. 2006. JS pull. And whenever it gets back, it's just going to kind of append into this content div down here. So it looks like this thousand JavaScript. 300. So it says jQuery put stuff below and it's waiting. And now if we go close this. Actually, you know, we have to start a server before we send our browser off to get it here. So we'll run it again. 2006. It's because it's just a local host. JavaScript example. So now if we go back here, we've got another request. This one's again a little bit different for a XHR request. So that's kind of interesting. And we can respond back with some text. We can respond back with some XMLs or JavaScript. But there's one thing we have to do. We have to do HTTP 200 okay just like before. And we also have to set another header here. So the mega browsers are very nice. They're very friendly. They want to protect us. They don't want our browsers to be able to just run any script from anywhere that depends on the internet. So they ask any server that's sending back a response to some JavaScript XHR to say that it's okay to use this. Because it could be a post request that's going to be like deleting something from a list or doing something crazy. Now we have to type accept. Accept the origin. AC takeoff. Accept. Anyone know where it's going? I haven't even got to call that. We can just set star. I see what that says. Anyone can grab this stuff. Which is great for a little help. So there's our header. And then we can just type hello from JavaScript. And if we get back here. You can see that it measures the hello from JavaScript here. Thanks to the magic of jQuery. So that's all on XHR. XHR requested. It's just a segregation. I don't know exactly the same request we've been doing before. So one last thing. Let's talk about each of the two. Which we've just finalized. Just a couple of weeks ago. So let me show you an issue two. It's a little bit different. I have some bad news and some good news. The bad news is that the good news is the reason it won't work. Is because all these things you request require encryption. Which is awesome. What we're doing today is encryption. It is even for new sites or things that you're not logged in. There's just too many kinds of data. Things like HTML. Anyone in the way. You and the server you're talking to. You're just starting accepting things. If you saw the recent funds that GitHub had. They're denial of service tax from China. They're definitely looking forward to HB2. The good news about HB2 beyond that is. HB2 is significantly smarter. About what it sends. And when it sends it. So we saw earlier back at the CSS. We type our HTML document. We send it off to our browser. The browser looks at it and says back to the server. Oh hey, by the way, I got that nice HTML you sent me. I'm going to need this style sheet too. But what percentage of the time you think right after a server gets a request for some HTML. It gets that request for the style sheet. Maybe 100% of the time? So HB2 is a little bit smarter. And instead of waiting for the web browser to come back. And say, hey, I need this style sheet. The web server really already knows that. The web server can actually send the HTML. And then essentially I'm prompted to also say, oh, by the way, web browser, I have a bunch that you're going to need this CSS. So here you go. So that's great. That solves a lot of the problems with run trips for multiple assets and JavaScript in the rest of the game forever. So that's really cool. And there's a bunch of other cool stuff about HB2. The good news is when you're in your developer tools, all the semantics are exactly the same. So you've probably been doing HB2 requests already, or really speedy requests I guess. And you don't even know it. And if you were to look at those requests in the developer tools, you wouldn't notice anything different. All the headers, all the semantics, you don't have to forget that 404 means not found or 500 means server error. It's all exactly the same. But if you want to correspond like this, you can't use metcats. I actually used an awesome program called Wireshark that's used to inspect everything in the developer tools on their own. So I'm going to show you one last thing about metcats. So if you have a request, a request that's a little bit more complicated, maybe it has some binary data you don't really or can't, you don't really want to or you can't type it out, you can send that or you can type it into a file or create a file that has the response that you want, however you want, and you can send it off to metcats. So let's do this. So we'll do metcat, listen, I'm for 3008. And we're going to just send a file over. And there's a file here called thanks. So now what this means is if you go over to localhost for 3008, you get a picture of my cat. Thank you very much.