Code to Website Overview

[00:00:00]
>> So that was all of the JavaScript kind of grammar, and intros, and things like that. I wanna start going in and actually doing front-end programming. Most of the what we've been doing so far is just been learning to program in general. That could have been JavaScript. It could have been Python.

[00:00:13]
It could have been Ruby. You would've learned more or less the same thing. But now we're gonna go do the specific, interesting functionality of JavaScript, which is playing with the browser. So, we've been writing code in a vacuum, which is to say, we've basically just been writing code directly into our browsers are using my little plugins that I built in for you, right?

[00:00:37]
Typically, you don't write code directly into a website, you write it into something like VS Code. And then that VS Code, you save that, and that gets run on someone's computer, right? But I wanna go through just kind of the life cycle of what happens with code cuz some people kinda get confused of how do I get from point A to point B?

[00:00:57]
How do I get from writing code to someone seeing it in their browser? So let's just go through kinda step by step. First thing that we're gonna do is you're gonna write code, right? You write it in VS Code, Emacs, Vim, WebStorm, something like that. You save it.

[00:01:15]
Then you need to put your code on a server somewhere. Somehow there's a trillion ways to do it. This particular website is hosted on GitHub, right? So for you to view this code, I had to go put it out on GitHub, so that you could get it, right?

[00:01:33]
And I had to set some things up called GitHub pages, which ends up serving this particular website. If you go to frontendmasters.com, they put all this stuff on Amazon Web Services, right? Or if you go to, I don't know, Peloton I know is hosted on Netlify, right? There's a bunch of different places where you can go host your code.

[00:01:52]
That's up to you. There's a course by Jem Young on Frontend Masters that talks about how to get your stuff up and running on DigitalOcean, which is a good place to get started. There's an AWS class. There's tons of things or ways to do that. But that's what step 2 is.

[00:02:07]
It's get it to a place where someone can see it. A good example of this one is you can see this one's doing it with file:///. You're using your own file system as your server, right? So that's kind of the standard here. If you're doing it locally and you're using file, your computer is acting like it's own server, okay?

[00:02:31]
So next thing is someone visits your website. So someone hits your server with the right URL or something like that. A lot of stuff happens in terms of how the handshake goes. Like if it's over SSL, it has to do like a negotiation to make sure that they speaks the same language.

[00:02:48]
And then it has to say like, is this your public key? Yes, this is my public key. There's a lot of stuff that goes on there. But let's just skip past all that stuff. The request hits your server, grabs your index to the HTML, and then returns that back to the user, right?

[00:03:08]
If we're talking about this website, it receives this, right? The very first thing that the website gets, sorry, the person's browser gets after requesting it from the server. That's this step. Your browser is gonna start going step by step, okay? This is the kinda DOCTYPE it is. It's in English.

[00:03:31]
I'm gonna set the character set to be UTF-8. I have something here that messes with edge. I'm gonna set this as the variable or as the viewport. I'm going to set the title, like the tab title, to be JS Experiments, okay? I'm gonna render an h1 that says hello, and then it's gonna hit this thing as like, there's JavaScript to load.

[00:03:51]
It then opens a request line back to the server. It's like hey, I need this experiments.js file. Can I have that please? The servers be like, cool, I got that. So it'll then send the person back this. Oops. Okay, so it'll request this. It's actually going to pause here.

[00:04:17]
It's not going to continue. If there was stuff underneath this, it would not keep going, okay? It's then going to say, okay, I downloaded that. And then it's going to run all this code, strangles this, this does this, and then console.log this. It'll finish all that, it's then going to head back here and it's going to finish out all of the HTML.

[00:04:41]
And at that point it's done. So the spinner that you see that your browser loading will stop spinning because it has finished loading everything Okay, this kind of follows. There's a tab here called the network tab. If I click all here and I click Refresh, this actually probably won't show me cuz I'm on file, but let's look at it here in this website cuz this has a lot of stuff.

[00:05:05]
You see all this stuff that are requests. So it first requests this page the DOM. And what else is it gonna request to your latest js. All this coming from simple analytics. So I have like a little analytics script that runs to just tell me how many people are visiting the site.

[00:05:30]
It'll do that, right? Some of you are probably using ad blockers and so it'll say like 500 there, something like that. It'll have blocked that from running curse you I'm just kidding that's fine I don't care. [LAUGH] You can see here, I have an ad blocker myself on, so I'm not gonna complain.

[00:05:47]
It's then going to go get the CSS. It then gets the clips plug in, which runs all of the code snippets. It then grabs some stuff back, get hooked out. This is all probably react code here. Web pack, this one's the actual page that we're on. Build manifest, this one will go down to, this again to the analytics, which one is this?

[00:06:13]
This one goes to, this is the clips again. So this is running more stuff to do the code execution. So you can see here, it starts going into a lot of stuff. There's a bunch of stuff down here at the bottom from Twitter. Cuz if you see down here at the bottom there's like the words of encouragement stuff, Twitter loads a bunch of stuff in the background.

[00:06:32]
They're probably tracking all of our information, I don't know probably. But at the end that's kind of the whole process of everything that happens, ight? Good so far? Same thing happens with CSS too. If there's like a CSS link in there, we'll go out there, load all the CSS, parse it, execute it and then continue on, okay?

[00:06:56]
So you after you're done with this course, if you wanted to deploy this, you'd have to go to something like Azure, Amazon web services, Digital Ocean. I really good one to get started with this like net, Le fi that's very friendly to the two new developers. So is Digital Ocean.

[00:07:12]
Kind of up to you. I tend to use Netlify quite a bit like I host my wife's website on Netlify. I say that as someone that used to literally work on Azure it's just complicated. [LAUGH] Big hosting environments that end up just being complicated. Yeah, Big hosting environments that end up just being complicated.

[00:07:34]
That's just kind of the way it is. So, this was a point of confusion for me when I started writing code like how does my code get to person, right? I want to take code give person, right? That's how it works.