Hello World

[00:00:00]
>> Okay, so the next thing I want you to do is, I want you to go down to the hello world here. And I have a repo here at github.com/btholt/project-files-for-fox-game, and I want you to clone this repo. The reason being is, we would've spent a lot of time doing CSS, and that's not what I wanted to focus on for this particular workshop.

[00:00:21]
So I did some of the CSS heavy lifting for you already. And so I gave you, and then the other nice thing about this repo, which I'll click into here for just a second, is I made milestones. So if you fall behind, you can just jump to the next milestone, right?

[00:00:39]
So we're gonna start with the aptly named start-here. But I think the next one is maybe frontend-infra or build-process, right? So we're gonna hit these milestones. So if you fall behind, you could just jump to the next milestone. And then eventually, we'll arrive at code-complete-game, which is this one, right?

[00:00:59]
So it has all of the files here, ready to go for the code-complete-game. Cool, But yeah, you'll start writing your code. You can either copy the things out out of start-here into a new directory, or you can just work directly in start-here. I would probably say, if you wanna like push this later to your GitHub, maybe copy it out and then make a new git repo of that one.

[00:01:25]
That's probably how I would do it, so I'll show you how to do that. Okay, so let's go ahead, and again, I wrote this here for you, so you can just copy this git clone, or you can do it yourself, that's fine. I'm gonna open my prompt here, So let's do clear, okay, so I'm gonna say git clone, or I can just paste that here.

[00:01:51]
And I'm gonna put this in fam-fox-game. And actually, what I should have done is, so what I told you is, I'm gonna copy this into, copy -r, so recursive, from fam-fox-game/start-here, and I'm gonna copy that to fox-game. So now if I go into fox-game here, you can see I have just the source directory.

[00:02:28]
If I look inside the source directory, then I have a background, the pet, and sprites.css. So I will be minimally using the command line for some of this class. If you're not familiar with the command line for Mac, you just have to open your terminal, which is what I'm using.

[00:02:52]
You can also use iTerm or Hyper or something like that. If you're on Windows, you can mostly follow along with everything I'm doing if you open PowerShell. So if you open your windows and you type PowerShell, you can use that as well, or you can use cmd. I don't know cmd very well, it's ironic, I work at Microsoft, and I know this much of PowerShell.

[00:03:14]
And most of the things I'm doing will directly work in PowerShell. But if you have any questions about that, feel free to shoot me a message, or if you're following on live right now, just ask in the chat. I guarantee you there are some Windows experts in there that will be happy to help you.

[00:03:30]
And lastly, if that just doesn't work for you, you can just go ahead and say Clone or Download here from the repo, and just click Download ZIP, and that'll download a ZIP file and you can do it all from there. There's also the GitHub desktop client which works super well as well.

[00:03:46]
Okay, so hopefully you've arrived at a point, and I'll, just to prove a point, open this in the Finder, I have fox-game right here. You can see I have a lot of copies of fox, I've been working on this for a while, that's why. But I have fox-game here, it has a source directory in it, it has bg for backgrounds.

[00:04:05]
It has pet for all the various different pets, and it has sprites.css, which is the CSS part that I'm not going to make you write. Okay, good, hopefully everyone's kind of in the same state as me. I can only assume that I'm nailing this, and that everyone knows exactly what I'm talking about, and I'm an awesome teacher.

[00:04:27]
So we're in the command line now. You need to be in the directory of your projects. So you can see here, I am in btholt/personal/fox-game, right, and I have Node installed. So hopefully you already have Node installed. If not, just go to Nodejs.org, you can download the binary install, it doesn't take very long.

[00:04:48]
Okay, so if you type node -v, you should see the version of Node, I'm actually gonna use 12. So now if I say node -v, it says 12.16.0, right? As long as you're above 10, I don't really care, so if you type node -v, it should be above 10, okay?

[00:05:12]
The next thing I want you to do, again, inside of this directory is, I want you to say npm init. Now if you can just init, and it'll ask you a bunch of questions like, what's the name of this, what version of this, what's your test command? I'm just gonna type init -y, and it's just gonna give me the default, means yes, just say yes to all the questions, I don't really care.

[00:05:33]
So if I type that, you can see here, it'll say, this is what I output for you. So this is going to start a Node project for you. It might give you this, I need to update npm, that's fine, I don't care. Okay, so now if I hit ls again, I have a package.json.

[00:05:53]
And so if I look at that package.json, it's exactly what it said up here. It's just a JSON file, which is a JavaScript Object Notation file, of all the various information, it's metadata about your project, okay? So now if we npm install something, it'll show up here, and so that later we can track it, okay?

[00:06:22]
And so I have this code installed, so I'm gonna say code ., and that's going to open this folder in VS Code. If that doesn't work for you, I'll show you how to initialize that. So now I've opened VS Code, and you can see here, I have my source directory and package.json.

[00:06:44]
If you don't have that special command working for code, I think you can type, so in Windows, I think you hit F5? F1, not F5, F5 starts debug mode. And in Mac, you wanna hit Cmd+Shift+P, and that'll open what's called the command palette here. And if you type install, this top one here, shell command install code in PATH.

[00:07:13]
And that will allow you to the code ., to open something in VS Code. That actually might not work in Windows. Anyway, if you look for how to install code from VS Code, it'll come up, okay? So now I have my package.json, which I can see here. And I have my source file, which has the sprites.css, it has all of my little fox friends pictures.

[00:07:41]
Okay, so that's kind of the state that we wanna be in right now. The next thing that we're gonna do just really quick is, I'm gonna create a new file here and I'm gonna call it .gitignore. This is a file that tells git, don't index these files. And so there's a couple things that you just never wanna index.

[00:08:00]
The first one is a folder called node_modules. When I install stuff from Node, I don't want git to ever track anything inside of it, so that's what I do. So you can put the / there to let it know it's a directory, you can put Node modules like that.

[00:08:12]
That'll ignore anything that has node_modules in its name. I always put the /, and that's mostly just out of habit, okay? The next thing, particularly if you're on a Mac, that I always put is, I just put .DS_Store like this. Mac has this file that, when you drag things around, the way that it remembers where they are in the folder is called DS_Store, and it just randomly generates it and I hate it.

[00:08:37]
You can turn it off, but I just haven't cuz I'm lazy. Anyway, just ignore it, it's fine, everyone's okay. And that should be good for the gitignore. Again, you can always add things to gitignore later, and I frequently do. The next thing I want to do with you is, this is not a git repo yet.

[00:09:00]
So I'm going to go back to my command line, and I'm gonna say git init, like that. And it just says, now this is a git repository. If you are doing it inside of the cloned repo, it might not work. Cuz then you would have a git repo inside of a git repo.

[00:09:23]
That's why I told you to copy it out. If it's not a git repo, it's not the end of the world. This is just so you can put it on GitHub at the end of the course. All right, so that's the end of the hello world section. We should have an empty git repository with a couple of files in it.

[00:09:36]
You can even, if you wanted to, you could say git add, and then you can see here that I have a bunch of my source directory added, package.json, .gitignore. You can also do it from here inside of the pane inside of VS Code. It's amazing, I'm just too used to using the command line for git, so I'm real sorry about that, I don't know what to tell you.

[00:10:02]
So again, what I did is, I said git add ., which is saying just add everything in this directory that counts. You can also do -A, that's another good one. Now if I say git status, you can see, these are all the files about to be committed, or staged for commit is the term for that.

[00:10:18]
And then I'm gonna say git commit, with a -m for message saying, this is my initial commit. And then I like putting fun emojis on GitHub. So I always put :octocat, and that will be transformed into an emoji on GitHub. That's probably the most useful thing that you'll learn today's course, is how to put emojis in your commits for GitHub.

[00:10:42]
So you're welcome, you can just sign off now. Okay, so now we have our first commit here. If I put git log, you can see I have my initial commit here from Brian Holt. If this is your first time using git, you might have to go, well, Apple ships with git.

[00:11:02]
You'd have to go download git for Windows. But if this is your first time with git, I'm not gonna teach you git. There is a great course on Frontend Masters from Nina Zakharenko, my coworker at Microsoft, that you should definitely take. And it goes into really good depth of what git is, how to use git, and it is worth your time, absolutely, it'll pay dividends in your career.