11.1 Prepping the Gallery - Video Tutorials & Practice Problems

<v Instructor>To get started,</v> we're going to make a copy of the full starting application which is just a slight variation on the ending application in Learn Enough CSS &amp; Layout to Be Dangerous. The way we'll do this is by forking and cloning that application. Let's take a look. You can find the URL for this application in the text. You can see it up here too. It's at github.com/learnenough/le_js_full. The first step is to make your own personal copy of this repository, and operation that's called forking. You can see here with this button. So I'm just gonna click this. The next step depends on which repository you already have at GitHub. In particular, if you don't already have a default GitHub page's website, then the easiest thing to do is just rename this repository to that default name which is just your username.github.io. If you do already have such a site, then you'll have to copy some files over by hand, and you can see the text for the details. But I've removed my default site so that I can show you how to do this from scratch. The way to do is to go to settings, and just change it here rename it to mhartl.github.io. The check mark here indicates that the name's available. Then whether you change the name or not, the next step is to clone the repository to your local system. You can get the clone URL here, just copy it. I'll change to my repository directory, see repos and then get clone, and the clone URL. And now let's run it locally. This application is built using the Jekyll static site builder. If you don't already have Jekyll installed, you can see the text for some pointers on how to do it, but I do have it installed as you might imagine. So first I have to cd into the directory, and then run Jekyll serve. You can see it's at this URL, it's an IP number 127.0.0.1 is often called local host. And then there's a port number 4000. So let's visit localhost:4000. There we go. It's running locally. I'm gonna put this into separate tab, and it'll be a smaller font. You'll see here. It's actually hard to get them both the same size. So, let's do this. It's okay. We're never gonna go over here. This is just so that I have the other terminal for running commands. Run that there. And then over here I can run commands. And in particular, what I want to do is do just a little bit more preparation. As usual, I like to start with a basic hello world style application just to prove that something is basically working. In this case, we're going to create a JavaScript file called gallery.js. This is actually simpler in a sense than our previous application. In that it's just going to be a single self-contained JavaScript file. There's no npm modules, we don't have to run Browserify none of that stuff. And in fact, the core of this will just be one function. But as we'll see we'll get a lot of mileage outta that one function. There's a standard location for JavaScript files and Jekyll application. It's a directory called js. So let's make that directory, and see why I needed the terminal here. And then we're gonna call our file gallery.js. Now let's run atom on this directory. You can see the structure here. Again, this will be familiar to you if you followed Learn Enough CSS &amp; Layout to Be Dangerous. In this case, let's go to js, gallery.js. The function will be running is called activate gallery. Like that. It doesn't need any argument. So we have empty argument there. And this is where we're gonna put our code. But for now, let's just start off with an alert. Hello from the gallery file. Now our application doesn't know about this yet, we have to link it. And the place to do that is in one of the includes here. In particular the head.html file has the HTML head right here. So after this line here, it actually can go anywhere. First we'll include the file. Remember that's with script source equals then the full path through the file. And the way Jekyll works, you need to have a leading slash like that to tell it where it is. It might work without the slash locally, but we definitely need the slash in production. We got that. And now we're gonna put in the script. Well, let's see if this works. Script. Well, we just loaded gallery.js, we should be able to do this. Right? Activate gallery. Hello from the gallery file. All right, that's a good start, but this should make you a little nervous. What if I, for example, did this. Suppose I wanted to have an alert for the h1 on the page. In other words, suppose we wanted to use the Dom. That didn't do anything. The reason as usual is because the Dom hasn't been defined yet. We have a null object as the result of document.querySelector("h1"). So there is no textcontent. As before the solution is to add a listener in here that listens for the DOMContentLoaded event. By the way, if you ever get stuck on something like this, don't hesitate to look at code you've already written. So for example, in js_tutorial, we've got main.js, and here it is the same thing. And also an index. We've got the script source equals the name of the file. It's hard to remember all these things. So, it's often a good idea to look at things you've already done just to refresh your memory. Let's go back and see if it's working. There we go. In fact, code dangerously is the text content of the h1 is this right here. And we can also verify that the code is being loaded on the gallery page itself. In this case, nothing is happening. See if you can figure out why. It says why it's good to check. There's an error here. What's going on here? The problem here is there's no h1 on the page. So if we go back here, change this back to what it was before. Okay. This should work. Refresh it. And there we go. Hello from the gallery file. Is a final step. Let's deploy it. And push it up. Well, actually let's check it first. You can see it's there. Here's the gallery. Now let's push it up. Take a look. It's not working yet, usually you have to wait a little bit. And there we go. So this is now at mhartl.github.io, which is on the live web. So any changes we make locally, we can now reliably deploy to a production website.