In this video we're going to talk about git and github and source control.
Now you might remember github from our previous section where we used to put the Web site online but
I'll show you that it is so much more than that.
More importantly, getting github is used by most professional companies and it is a skill that is expected
to be known by all developers now.
So this is an important section.
One of the first things most developers have to do on their first day at the job is to meet something
called a pull request which uses git and github.
We'll get through that in this section.
Don't worry you're going to learn all of this and it's going to make sense.
Let's first start with source control.
Up until now we have only worked on small files.
No team members just ourselves.
Just a couple of files.
But in real life you're most likely not the only developer on a team.
Most likely the projects are huge.
There's many many files.
Source control allows us to make sure that multiple people can work on the same file from different
locations.
Think of it as Google Docs that allows people to collaborate on one document but enough talk.
Let's actually check it out.
I have over here set up two folders One's for myself, Andrei who just started a new job at X company and
I have Marcy here who has been working at the company for a while and she has project files over here.
I'm actually using the files from our background generator video now without git or github.
What I can do is just copy and paste these files so I have whatever Marcy has and we can start working
on these files.
I can have my developer environment here with my terminal and my sublime text and I can work on whatever
changes that need to be made on the app and Marcy over here also has her own version where she can work
on it and we're both working on the same project.
But let's say that both Marcy and I are working on this project and she decides to change the project
name from Gradient background to Super background and at the same time in my project I decide to call
this Cool background.
Well, now you'll have to set up a meeting between myself and Marcy and decide how we should change the
code.
And this is a small example but you can imagine that as different programmers worked together there's
always going to be this issue of one person changing one thing and another person changing another thing.
This is where Source Control came in and Source Control is a way to control this where we have
one place instead of our own computers.
In this case it's just represented by the folder that I have in here. Instead of each of us having a
copy of the project, with source control
we have a copy of the project file.
There is a centralized location up somewhere maybe owned by the company or somewhere on the internet
that has the ultimate version that we each talked to make sure that we each have the same version
Getting github is a way to do this to be able to use source control.
And as a matter of fact it's the de facto way of doing this.
Like I said before this is most likely the tool you'll be using every single day at your workplace.
So if I go to the github website here what it allows us to do is it's a place, a central place that
both Andrei and Marcy can talk to.
So even though we work on the same files the same project I can ask this central location such as
github.
Hey, has Marcy made any changes?
And Marcy can ask, hey has Andrei made any changes?
And every once in a while you'll get something like this where we have Cool background and Super background
where we have something called a merge conflict.
What github allows us to do is say hey, I notice there is a merge conflict.
I see that you guys have both changed your background.
I don't know who's right but here's the information. Andrei and Marcy,
Can you guys talk amongst yourself and figure it out.
That's pretty much work for.
So let's actually see what this looks like.
The first thing we want to do is set up a github account.
If you haven't done it in the previous exercises, you absolutely should start a github account.
It's FREE.
And like I said before if you're a developer you just need to have it where everybody puts their projects.
It's where you work you'll be spending a lot of time on this website.
You might remember that when we had the github project,
I also told you to get github for Desktop.
Although we use that to make things simpler during that video.
This is actually not the recommended way of doing it.
It allows you to visually see and interact with github but it's kind of looked down upon by employers
and most people use the terminal or the command prompt to actually do it.
So I won't be teaching you this way just because I think it's bad practice and getting used to the terminal
is important.
I'm going to close that and we're going to get the start. The very first thing we're going to do is we're
going to click on start a project. And here we're going to call it whatever we want, we'll call it
background-generator.
And you also want to leave it up as public and we want to click on initialize this with a readme and
we'll click Create repository.
And what that does.
Well we've created a new project on github.
And here the readme which is just a file that describes your project.
You can see that it's here, we can type into the readme whatever we want and it'll describe our project.
But let's go back. If Marcy let's say Marcy has been working at this company for a long time.
I'm actually going to remove my files here.
Marcy has been working at this company for a long time, and the employer finally decided hey we need
to use github we're going to hire this new guy Andrei.
We want to make sure that you both can work on it on the project together without any issues.
Can you put the project up on github.
So what Marcy will do is she will go to github, create background generator and then she's going to
click right over here to clone or download.
And she's going to make sure it says use HTTPS.
And from here you just click on this button which copies this link to your keyboard.
Then Marcy goes to her terminal and right now we're in Documents, we want to have the project in the
Marcy folder.
So I'll cd into Marcy. If I click ls
I see that,
Yep, I have my files.
Now, the first command that we're going to learn is called git clone and then copy and paste what we copied
from the Web site.
We're just saying hey clone this project from github.com
So I press enter and there you go.
Everything is downloaded.
If I go back to the folder now I see that I have background-generator. If I double click this you'll
see that I have a .git folder here that's actually hidden.
You might not even see it on your laptop if you don't have this feature on your computer enabled.
But this .git now allows me to communicate with github.
So what we can do now.
Marcy can copy and paste these files and put it into background-generator.
Now let me show you the next git command.
Marcy right now,
If we see, she's in her folder but now we need to go into background-generator because if we do any
git commands here,
well, it won't work because it's not a git project.
We need to actually go inside of the project that was created on github.
So I'm going to cd into that directory.
Notice here I have my terminal set so that it actually shows me what github location I'm in
and I'll explain what master means later.
Now that we're here we can look at all our files.
Yep I see that.
Now I have my README which I created on github.
Plus the files that I copied and pasted it. We need to sync this so that if I go into my background-generator,
instead of the README files Marcy can put up her files on github the way we do that is our second command
git status. It tells us that we have untracked files. That is we have index.html, script.js,
and style that are untracked. And it says use git add file to include what will be committed.
So now that we see our status of what we have in our folder we can say git add and the file name so
I can do index.html, git add script.js and git add style.css
Let's clear this so we can see it.
And now I can do git status again just to see what our status is.
And now I have your branch is up to date, changes to be committed.
You see that now with add we've said hey we want to add these changes.
We have new files that we've added and says to be committed.
So the second step is to do something called git commit and git commit says hey I'm committing that
these are the changes that I want to make to github.
And it allows you to pass a message so that on github will show the message when Andrei comes back
in he can say oh Marcy added these files and this is the message.
And we do that by doing this.
And within here within the double quotes I can say, adding starting project close the bracket,
press enter.
I'm going to clear this.
Now there is one last step. We've added.
We did git add to add our changes then git commit to commit and say yeah we're locking in those changes.
And then finally we need to let github.com know that these are the changes.
So we do git push
and there you go, it has now been pushed to this repository. So if I go back and I refresh, look at that
it's the same thing that we did when we put up our first web site online.
But instead of using the desktop version of github, we use the command line and now we have our project
which is very good.
Now let's go back to our example.
So Marcy has been working on this project.
There's a git repository and I just joined the company and now I need to start working on this.
What do I do? Now I need to access github and get the copy of background generator.
The way I do that well I go into my folder
and I do the same thing.
I do git clone and then I copy and paste the repository just like before. git clone and clone the repo.
And there you go.
If I go back to my folder, look at that, I have background-generator.
So we're both working now on background-generator but not off of each other's files we're working with
whatever version is on github.
All right.
So now more realistic.
We go back to working and on the first day of my job, I say, I'm going to change the Gradient background
title, actually, the h1 tag
to Cool generator.
If I save this and I do git status.
Well, I'm not in a git repository right now if you remember I have to go into background generator.
Let me open that up a bit so you can see.
There you go
Again, these git commands won't work if you're not in a folder that has .git folder.
So let me do that, cd into background-generator.
I'm going to clear this and I'm going say git status.
And look at that.
It tells me that I've modified index.html file.
And if we remember, I will say, git add, I only have one file I can do
index.html
But if I wanted, if I had multiple files and I wanted to just commit all them at once, I can just do
the period. So I'll do that and then git commit and I'll add a message.
Changing title. I press enter.
I clear this OK.
And again, I do git push and it looks like everything went through.
So let's open that up and check it out.
I now refresh here,
and we haven't seen any changes but we now see that we have three commits. We have the initial commit,
the adding background project that Marcy did and it shows you all the files that we're added.
And if I go back I have the changing title commit and now I see that yep, Andrei just changed the Background
generator which is in red to Cool generator.
So as you can see we have a history of all the changes and we can always go back if there's any mistakes
but there's one issue right now.
If I go back to the code and I go to Marcy's computer, I see that
well, she still has Background generator here.
Why is that?
Well, because her computer doesn't know that github has been updated.
The next command I'm going to show you this is the last one I'm going to show you in this video is
git pull.
So, remember git push? To push the changes to github.com and git pull to pull whatever's the latest.
So I do git pull and there you go.
You see over here that it shows me that index.html file was changed.
Now you see that my title has been changed to Cool generator.
Let's just say that Marcy saw my first change and she really really likes how I've added cool generator.
But I think she wants to make it capitalized,
Again, she's going to save that.
She's going to say git status.
All right.
I have my index.html file, git add then git commit and I'll add the message, capitalize title
then git push.
There you go. Again, I go back, I refresh.
And now there's four commits and we see that capitalize title is the new changes.
The first day at work is done.
I come into the next day at work and well, I want to start with whatever the latest project is of
background generator. And let's say Marcy worked all night to change that title to cool, capitalize.
I want to make sure that I have the most updated version.
So what I do is when I get into work in the morning, I'll say, well I want to make sure that if there's
any changes that Marcy made I know about them, so I'm going to say git pull.
And notice here how the titles are going to change after I do the pull and now I click the sublime text
and there you go.
Cool generator.
All right.
In the next video we're going to expand on this and show you what happens if both Marcy and Andrei make
the same changes.
What does github do?
I'll see you in that one.
Bye-bye