How the Internet Works for Developers - Pt 1 - Overview & Frontend

so in this video I'm going to try to cover the concept of how does the internet work from a web development perspective what do you need to know about how the internet works what I'm going to be covering in this is really stuff that took I'd say it took me at least five years if not more it's kind of figure out along the way because you don't know what you don't know you don't know what to Google for it'd be easy to learn if you knew what to Google for but it takes five or sometimes ten or more years some people never pick up on stuff just because you're not exposed to it you don't know and so I'm going to kind of compile years worth of stuff and hopefully make it all really simple for you how does the internet work from a web development point of view this video is going to focus mostly on what the front end guys need to know and it's going to cover just minimal knowledge about servers and the next video is really going to cover server configurations that's really a kind of scary world to people that have lived in HTML CSS JavaScript and it doesn't have to be scary it's really simple it can be a million things just like the front end can and so hopefully we'll just kind of cover some basic configurations and give you a peek into what that server world is like for those of you who want to learn in that direction so let's get into it front end point of view at the bottom level at the end of the day really what the internet is is your browser your machine is making a request to a server and it's getting responses back the server is just another machine on the internet it's just another machine connected to the internet and kind of the browser can be your iPhone it could be Chrome whatever and so that servers a machine and whenever a machine connects to the internet it gets what's called an IP address some tons of you guys probably know lots of these things so if your intelligence gets insulted just keep with me we're going to cover a lot of depth here but when you plug into the internet when you connect you get an IP address so a server is a box with an IP address the reason your computer's not a server is you have an IP address you go to google and type what's my IP address it's going to show you your IP address you have it right now so if anyone types in your IP address it can access your computer just like a server but you don't have server software running and installed we'll get into that in the next video but if you type in say my site um it doesn't know your server's IP address so what that's going to do is your internet service provider charter se is going to do a DNS lookup a domain name service lookup it's going to say hey my site comm what IP address is that configured ah that's configured to this guy right here well let's send you to that box so your request for my site comm goes to this box so say google.com your ISP takes that and it routes you to whatever IP address google.com has configured and they probably have thousands of servers and stuff running which I'll cover a little bit of that in the next video as well so you connect to the server it gives you a response that's the Internet you get requests you make requests you get responses so when I request the site mysite.com I expect I'm going to get back the browser doesn't know what it's going to get back I'm saying my site calm as it as a piece of text I could get back an image I could get a CSS stylesheet I could get back in HTML file I can get back anything the server can give me anything at once my browser knows what it's giving me by the content type so I'm going to get a response back that is both the file and the content type so when I say my site comm server gives me the index.html file and it sets a Content type of text slash HTML now my browser knows what to do with it ah let's treat it like HTML and so it begins parsing your HTML document what that parsing process process looks like for the most part it goes head to toe start to finish and it pauses when it finds a request for an asset an asset is another request that we have to make like it's another file we need so that be a CSS file would be an asset an image would be an asset a JavaScript file would be an asset so we're going through dot dot HTML head we need another asset a CSS file so let's tell our browser go give me a request for main dot CSS does that request the server report replies with that CSS file sets the content type to text slash CSS now we know that that's a CSS file and it keeps going through and now anything that appears it will that style sheet before presenting it to make sure it comes out styled correctly one of the reasons we put the styles in the header is because if we were to put the style here you'd get what's called an F oh you see flash of unstyled content I know if you've ever loaded a cheap Lea made web page and you see it flash really ugly real quick and then flicker too beautiful what that is is it's loading your your body it's loading through your h1s and your tags and your paragraphs and your divs and then it's loading your CSS after the fact so it goes top to bottom it's already spinning this out for the user to see and then it pauses up let's get the style sheet get the style sheet did it it all happens in a couple milliseconds and then that style sheet gets applied that's why we put the style sheets up front we do want to load those before we start presenting the user with information now the reason we used to put our scripts up in the head too some people still do but you can for in almost all cases put your scripts at the footer before the last body tag before the closing body tag and what that's going to do is that's going to start presenting your page to the user and then it's going to load your scripts and activate the thing so you'll see your content slider and then it will load the jQuery to make it start sliding which is totally acceptable your users going to feel like the web page is loading a lot faster than it really is another wise thing is you want to concatenate you want to add all your scripts files together as much as possible so instead of loading ten different JavaScript files it's really going to speed things up if you can put those all into one javascript file and then you only have to make one request talk to the server one time give me scripts j/s that gets added in and now you've not made near as many requests you've not paused your page near is often same thing with CSS files it keep them broken up while you're developing but then when you deploy to production you want to concatenate them all together put them all together into one file so then your browser starts loading the HTML HTML says oh give me this one CSS file boom got a one CSS file we can move on get a one javascript file we're done and there are use cases where you need to make more than one but for the most part that's really going to speed up your page a lot and also if these are minified if these are minified which if you don't know what minified is just look up you know what is a minified CSS file minified javascript file it's a way that you could actually get those files even smaller and even faster so that's kind of the whole asset the whole page rendering that's kind of the front end of things the other way you can make asset requests is through JavaScript JavaScript can do what's called an xhr request or an ajax request they're often called and so javascript can say you know real time when you click on a link javascript doesn't take you anywhere instead it says ah let's go make a request for the most recent 5 tweets that response comes back and instead of going to the HTML page it goes into JavaScript JavaScript does something smart with those JavaScript can also make requests for images it can make requests for CSS files it can make requests for pretty much anything because after all a request is just a request to the server the server determines what you get back by its content type so that's kind of the browser world of things before I close out this video let's look at some sample requests let's look at what's going on and so a request contains two things it contains headers and it may or may not contain a post body so let's look at when I request I loaded google.com here Google com so my first request if you open your developer console and go to network and refresh your page I can see right here my first request was www.google.com/mapmaker cookies is one giant long string and that's information that the website has stored on your machine so as you can see Google stores a lot of cookies and the user agent string this is information about my web browser so my browser you can see right here is chrome 37 and that's what the user-agent string is so there's my request and I did not pass a body I just want this page now if I was doing a login say I had sent my username and password the method would be a post and I would have a post body that sent in the username and a password so here's kind of request will include these headers the host the method that's either get post put or delete the path which is say google.com slash images slash logo dot jpg cookies user agent and the content type as well if I'm including a post body so right here my post body is a JSON post and so in that case my posts my content type would be application slash JSON so that's a request responses also have headers and a response body so let's look again at that Google if I scroll down here my response headers it said my content type is text slash HTML and it said let's see we're going to get a content we're going to get basically the two headers that are important to you if you're learning the content type and the status your status code so here I got a status of 200 that means okay and I got a content type of text slash HTML my response itself hey look it's an HTML page so I say give me google.com it gave me the HTML page for google comm and it said the content type is text HTML status is 200 ok status doesn't really matter if you're doing HTML stuff status matters a lot if you're doing JavaScript stuff so the status code we can give you a status of anything in the 200s means it's okay anything in 300s means you got redirected anything in the 400s means there was an error or the it's not found or you're not logged in so you can't access it anything in the 500s says the server broke it blew up you either gave it something it wasn't expecting or there's a problem on there and that's what a 500 error level error is so that's kind of what a status code is javascript will look for that sometimes JavaScript to make a request and a 400 a 404 or 403 those are all considered air 500 is considered an error so JavaScript will say that wasn't successful and so that's kind of requests and responses you'll get a response body let's look at some more requests here the next request we made was google.com let's Google com in the path with images sprepper logo so I am looking for a PNG and then my response here is the content type is image PNG and the response was well they can't really show you because it was an image so they sent me an image and with a 200 okay yep we accepted your request here's that image content type blah blah blah so that's kind of how that works we then requested a lots of data that's from the CSS file requested some other stuff here's another get request and this was a text JavaScript file that we were requesting so the response is JavaScript and it replied with text JavaScript and further on and further on and that's just how that goes so there's all the requests that I made just to load google.com a lot of stuff going on let's look at a couple sample requests in writing and then we'll be done with this video we'll move on to the backend the server stuff so you make your homepage request to Google com you're going to do a get request I probably haven't covered it yet I'll give you a brief demonstration my jQuery tutorial covers a lot of what the different methods are get just says give me a resource I'm not passing anything with that usually a get request a post request is for when you're usually creating something new or when you're doing something basic like a login so let's say I'm log in to Twitter that's going to be a post request let's say I create a new tweet that's going to be a post request I'm sending a post and I'm passing it the information of my tweets and any mentions a put request is when you want to edit something if I edit a tweet so let's say if I did a post real quick I would post tweets slash I don't know my tweet ID would be something huge like that I would do a post to that and I would have a post body of the new tweet content oh actually if I'm if I'm posting to tweets if I'm doing a post I'm doing a new tweet so the other posts to tweets are opposed to tweet slash new and then the server knows that if I'm posting to that that's a new one if I'm doing a put request I'll have the ID of what I'm editing so if I'm doing a put request I'm putting to this ID that was the new ID of the new post I just made and it's going to update that with what's going on and then there's also a delete request so if I do a delete method to this path it will probably delete that tweet so on Twitter if you click delete JavaScript is sending off a delete request to that tweet ID and it will go away so that's kind of what those methods are get something create something update something delete something and so that's what your method is the paths are we already covered path path is the path there's your user agent the back end will sometimes if you have a massive website sometimes the back end will look at this and say either on on iPhone they're on a mobile device let's send them to a completely different web site that's just for mobile so that's kind of why that user agent is important and then here's a sample post request say I was doing a login I would do a post method to slash login my content type would be application JSON and my request body would be you know a JSON object user name this password this my response would be 200 okay and if I did a say this is a JavaScript thing and it was expecting a JavaScript response and it would give me a response that was probably JSON my response body would say hey here's your full profile Magic Man 11 and then the content type would be application JSON for that so that's kind of requests that's kind of your whole front-end world of thing things in the next video we're going to really cover the server world and how the internet works from the server side of things and that's going to be really fun especially if if you're completely clueless as to what the server world looks like I'll leave you for now have a great day

Channel: LearnCode.academy

Views: 463,827

Rating: 4.9612021 out of 5

Keywords: how the internet works, internet, Web Development (Interest), web, development, Web Browser (Software Genre), website design, Website (Industry), Web 2.0 (Industry), How-to (Website Category), how does the internet work, the internet work, php, JavaScript (Programming Language), Node.js (Software), Cascading Style Sheets (Programming Language), Web Design (Interest), technology

Id: e4S8zfLdLgQ

Length: 15min 24sec (924 seconds)

Published: Wed Oct 08 2014

Reddit Comments

[u/budt3nder]

5 years! That's about right. <sigh> 10,000 hours for reals.