Travel the multiverse with Git and Github
I think the best history class would give each student a time machine so that they could go back through history and document it.
The problem with giving everyone a time machine is that it would be too tempting to not just document but also change history.
Show you how developers use Git to document and change a projects history.
Plus Ill introduce you to a cloud based tool called GitHub that lets you collaborate with others. So if you are ready to travel the multiverse in your own time machine lets get started.
What is Git ?
Now Git is whats called a version control or source control system. In essence it lets you manage changes you've made to files over time. With Git youre basically a historian with a time machine.
Youre in charge of documenting the history of your project with the added benefit of being able to jump back and forth through time. But unlike normal historians you have the ability to rewrite history. Now you can save checkpoints which are called commits and leave messages about what happened at each of these different checkpoints.
The best part is another feature called branching that lets you create alternate versions of your code. Its like being able to create alternate realities of your project.
A branch is a copy of your project that you can work on with or without changing the original. You can then synchronize branches which is called merging or go back and forth in between them. In order to use GitHub youre going to need a few things. First of course you need to install Git from the Git website.
Now you may already have Git in your machine but its a good idea to make sure that you have the latest version. You can find Git at this URL right here gitscm.com and the SCM means source control management. From there you can simply download an installer for your machine type and follow the instructions. The defaults are fine for most installations.
However if youre on Windows one of the options is to install a terminal application called GitBash which makes it easier to run Linux commands.
Thats what most people use when working with Git. However the commands on a Windows machine are pretty similar. You just have to remember that to list files you use DIR on Windows instead of LS on Linux.
Youll also need a terminal to run commands. Now if youre on a Mac you can use the terminal application that comes with your machine or another terminal like Hyper which is also available for Windows. And thats what Ill be using in some parts of the course.
Ill also be using Visual Studio Code and heres where you can get that. Finally on most web projects you ll be using something called Node.js which handles most of the tools for the web.
Installing Git and Requirements
Lets take care of setting up a project to use Git. Now the first step is to set up some of the configuration variables. Git is designed to be used by more than one person. You have to tell it who you are so that it will give you credit for the changes that you make.
You can use the Git Config command and set up the username as well as the user email. If you already have a GitHub account you may want to use your GitHub email address here. So youll get credit on GitHub as well. The global option makes sure that every project in this computer will use the same name and email address. Right so I have a terminal open right here.
You can use hyper on a Mac or it git bash on a PC and Im going to start off by adding those configuration variables. So Ill say Git config with the global option and type in user.name. And then Ill type in my name next Ill type in my email address. Once you configure Git the next step is to prepare the folder thats going to hold the project. For this project Ive got a folder with some files that I like to manage with Git you can use your own files but if you want to find out how to get these make sure you watch the video on working with the exercises. Lets open this up in visual studio code. Now visual studio code has a builtin terminal that you can use.
You can go to the terminal menu and select new terminal. This terminal can use different flavors of whatever is installed in the operating system. I have seashell installed here on my Mac so that will work. If youre on a PC you may still want to use something like git bash. Lets start off by using the git init command. Notice that the colors in my project changed. That means that this project is now being managed with Git.
When you initialize Git it creates an invisible folder called .git in the project folder. Now this is where Git stores all the information about the project. If youre on Linux you can take a look at it by doing an ls minus la command. We make this a lot bigger. Youll see that there is now a Git folder. We can even switch to that folder by doing a cd .git command and then well do an ls minus la command again.
Thats going to show us all the files that are in there. Git us going to write these files for us and take care of keeping track of what the project is doing. Im going to switch back up to the previous directory with cd.. and lets go ahead and issue a clear command.
In order to create an entry that we can go back to. We have to add the files to the staging environment. With the add command staging is a temporary area that we can store files that we want to commit later on you use the git add and then specified the file name that you want to move to staging. There are some alternative versions of this command. So for example the minus minus all flag well add all of the files in the project. The shortcut for that is minus capital A. Most of the longer GitHub commands usually have a shortcut.
Thats the first letter of the command. If theres more than one command with the same letter some of them will be capitalized like this one. Theres also an even shorter way to write this. The period is a shortcut and Linux for the current directory. So we can use that.
Youll see the shortcut used very often. Lets go ahead and add all these files to staging. Notice that the letter right here change to an a the last step in the process is to commit the files with the commit command. You always need to include a message for this. It can be a short label so that you can remember what you were doing.
You issue a git commit and use the minus M flag and then type in something like first commit or anything else that will make you remember what you were doing. This will tell Git that this is one of the checkpoints that we want to track for our project. That way we can come back to it later. Lets go ahead and clear this out. To verify that Git is keeping track of what weve done. We can issue a git log command.
You can see the entry that Git has made which is being tracked and the .git folder. Youve also finished your very first commit. So congratulations well see more about whats happening in the next video.
Understanding Git Requirements
Now that weve created our first commit lets dig into how Git takes care of things. If you take a look at what you got when you issued the law command you should see something like this. Our sole entry starts off by listing the commit hash.
This is a unique ID for the commit. Next to that hash Git shows us that the head is currently in our main branch. Git uses branches to organize project. Each branch is like an alternate reality for the project.
The head always points to the current reality which is called a branch. So this is the current branch were working on. Now by default his branch is called main but older versions of Git use the term master. On the next line you can see the name of the author and email.
It should be the same as what we configured with the Git config command. Next that shows the date the commit was made. And finally whatever message you wrote when committing the file. And if I had a realtime machine one of the things that I change is to make sure that I understand the different Git environments and states before I start working with Git.
So this next stuff is really important. Git has three places where you can move files. The first is the working environment. Here are the files look like what they did during the last commit. Now before you create a new commit you can move your files to a temporary location called staging we do this using the add command.
This gives you a way to queue up changes until youre ready to commit. Consider it a bit like dating before marriage. The final environment is a commit. Once you move files using the Git commit command a new log entry is created with a new hash. Now before a commit files can be in one of two main states.
The first is tracked files. These are files that existed in the previous snapshot which is another name for the commit that you did. Untracked files are anything else. So for example a new file added since the last commit. Tracked files can also be in several states.
Unmodified means that the files havent changed since the last commit and of course modified means that the files have been changed. Finally they can also be in staging and listed as staged. They have been moved into that staging environment. You can take a look at whats happening with the command called git status lets take a look at how that works.
Im going to go ahead and clear my screen and type in git status. You can see that right now there is nothing new. We havent made any changes to any of the files. So were still on branch main and we have nothing to commit. So our working tree is clean. Lets go ahead and make a change into this read me file. Im going to delete this last paragraph right here.
Im going to save this and youll see that my file now has a different color. And well issue the git status command again. Now the first line is showing you the current branch and then the next few lines tells you about whats happening the current environment.
It says that there are some changes that havent been staged for commit. So theyre in the work in directory but their status has changed. So right now we have two options. We can use the add command to move these files into staging or we can discard the changes weve made using the restore command. Weve already used the add command.
So lets try the restore command. Now theres a few ways that you can run this. Again issue a git restore command with the file name or use the period to restore your current directory. Its definitely a lot shorter. You may also see the git checkout period command used in a lot of different places. This is an older version of the restore command that is still in use.
And I think restore makes a lot more sense since checkout can be used in other ways. Lets go back into our project. Ill go ahead and clear the terminal and I can issue the git add. And here I can type in the name of the file directly like read me.md or I can use the shortcut and just say git add period. This adds everything in the current directory.
Lets go ahead and clear this out and do a new git status command. Now you can see that we have changes in staging ready to be committed. If we want to we can move them out of the staging command using the restore command with the extra stage flag which you can shorten to capital S. Lets go ahead and do that.
Once again lets clear this out and do a git status. Now were back to where we were a minute ago. Lets go ahead and use git restored to get rid of the changes that we made to this read me. Now notice that the change has come back in the original file and this looks like pretty much what we had in the last commit. Now lets see what happens when we add a new file. Well go ahead and add a file called notes.MD this will have some notes for our project.
Lets go to the terminal and use the git status command to see whats happening. Now youll notice that it says that we have untracked files. Lets try issuing the git restore command to see what happens. Now notice that it didnt do anything to the notes document and thats because git isnt doing anything with untracked files. So if you want to get rid of notes you would have to delete it manually. Lets go ahead and get rid of it.
Now we can say clear and git status again and you can see that everything looks like it did before in our last commit. Now trust me the most important thing that you can understand is how the different environments work as well as the file states and what each of them does. This will make it easier to understand what is happening with your project as it gets more complicated.
Git ignoring files
Git is great at tracking files but you dont always have to track everything. You could have some files with some passwords or other sensitive information that you dont want to share with others that could be authentication tokens API keys et cetera.
Ignore files arent uploaded to GitHub so this is a great way to add notes that you dont need to share with others so for example a great place to keep todo items. Operating systems and applications can have settings that you dont need to share as well.
macOS for example keeps a file called DS_Store on most folders to keep track of all the files within those folders. Visual Studio Code can have a list of local preferences in a vscode folder. To take care of ignoring files you can create a .gitignore file at the root level of your project.
And inside that file you can add any type of file or patterns that you want to ignore. For example you can add an entry for the DS_Store file as well as the vscode/ folder. Notice that the folder has a slash at the end. If your project requires it you can add a file here like authentication.js to store any tokens API keys et cetera. Another common file is called node_modules. This is created by NPM when working on a lot of web projects so we can add that here.
You can also add a notes folder for local notes about the project that you dont want to share or you can create a special extension and add the notes anywhere in your project. By the way Git doesnt track empty folders so you dont have to worry about those. Im going to go ahead and copy these right here and Im going to go back to my project and create a file in my editor.
Ill call it gitignore and Ill go ahead and paste those things into my file. Now Ill go ahead and save it and add it and commit it. Once thats committed I can start adding those type of folders. So lets go ahead and add a notes folder and anything in here will not be tracked but I do need to put something in there so Ill add a projecttodo.md file.
And you can see that Git grays this file out which means that this file will not be tracked by it. So if I did a git status it would say that theres nothing to commit even though thats a new file. If I add another file here and put it in the main folder its still going to get ignored because this extension is automatically ignored in the files that Ive added right here.
Theres a couple of other tips that you can use. You can create your own global ignore file. And that way if you have a lot of different projects you can add this as a config variable pointing to a file on your hard drive.
You can add anything want in there and whenever you create a new project it will pick up this file automatically. Now another thing that can happen is that if you add something to the gitignore file after youve done a lot of commits sometimes the way that Git caches information locally will get a little bit dirty.
So in order to clear that you can issue this command git rm r and then use the cached option with a period for the current folder and itll delete all of the files that are cached recursively. You may have to do another add and a commit but this will clear out your cache and your gitignore should work after that.
One of the reasons I wanted to talk about the gitignore file this early is that you may already be seeing folders like the DS_Store folder on mac OS appear or perhaps youve modified some settings on Visual Studio Code and you would see a vscode file and you want to make sure that those things are not tracked by Git before you get started on your project.
So its a good idea to work with the gitignore file at the very beginning of when youre setting things up.
Deleting and Renaming files on git
As youre working with your Git projects youll need to rename move or delete certain files the way that Git handles these normal file operations can be a bit confusing. So lets go over those. Now deleting is the simpler of the different functions that we can perform.
So lets go ahead and start with that. Theres two ways to delete files managed by Git. Now the first is the obvious just deleting the file from your file system. And we can do that from Visual Studio Code by right clicking on a file and then select and Delete or using the shortcut right here. You can also go to the operating system look in your folder and get rid of the files that way as well.
Now if we do a Git status youll see that it records that deletion as a separate function. So its actually recording a deletion as something that you need to add into staging. Now if you want to you can go ahead and do Git add and then commit the files. Thats one way of doing this. Now you can also restore the file by issuing the Git restore command. And well just use period here.
Lets go ahead and clear this out. Thatll bring back our index at HTML and you can see that there is nothing to commit. We have a working tree that is currently clean. The other way to delete a file is by using the Git RM command and then type it in the file that you want to delete. Now this gets rid of the file but it does something else. Lets take a look at the status. Now this is actually deleted the file and is automatically moved that deletion into staging. So this is already to commit. So that saves us a step.
Now if we went to Undo this function we have to do it in two parts. We can say git restore. And this time we can use minus minus stage or just use minus S and well just do a period here. You can type in the file name if you want to. So this is going to restore the file from staging into the work and directory.
Lets clear out and do it git log. That was a mistake. Lets go ahead and clear this out and do it git status. And you can see that now the file is looking like it did a minute ago. It is recorded as a deletion that needs to be added into staging. So once again we can get restored this time without the S flag and just hit the period right here. Now the index that HTML comes back and lets go ahead and clear this out and the status should be clear. Now similar deleting files. You can rename files in a couple of different ways but the way Git handles this is pretty interesting. So you can simply rename things in the operating system. I can click on a file in Visual Studio Code and just give it a different name.
Now if I do a git status keyboard chattering youll notice that its recording it as two different things. Its recording the deletion of index at HTML and then an addition of a new file called home.html. So this sort of makes sense and this is really just the way that Linux deals with files. When you rename something what youre doing is creating a new file and then deleting the old one.
Now undoing this is going to be a little bit harder. You can unstage the files but at some point git well try to keep both copies of the two files. So lets go ahead and do that. Well try doing git restore period. Lets clear this out. Youll see that index at HTML reappeared git status and you can see that now we still have home in there. So all we have to do is delete it. And now things look like they did before.
Lets clear this out git status again and theres nothing to commit and lets go back and clear this out as well. Now just like with the Delete command we have a command to take care of renaming but its a little bit weird. Its called git mv and then we can give it the name of the file that we want to rename and the new name after that. So you can see that the index at HTML file got changed into home HTML and we can do a git status to see what that looks like.
So you can see that this again saves us the step of staging the files and it goes directly into something that we can commit now on doing this would have to be done in the same way that we did the deletion. But since we can rename files like this we can also go backwards and type in mv and just reverse what we type in here. So we can say rename home.html to index.html. So git mv and then reverse the names of the files. And now this one will be index.html. And if we do a git status its says that theres nothing to commit.
I think that you have to remember here is that git is always looking at what youre doing based on the last commit. So since we renamed the file back to what it used to be it compares everything that weve done to the last commit and realizes that theres nothing thats different. And so thats why its telling you that theres nothing to commit. In other words there havent really been any changes to any files.
Now you might be wondering why mv instead of something like rn or rename or something like that it doesnt sound anything like rename In Linux mv is a command that moves files. And its what you use to rename things. Move is doing the same thing that git does when you rename the file moving the file with a new name and then deleting the old one.
Now git mv does make it easier to go back just move the files back if you want to. However I continuously delete files just with the operating system or I delete files by just renaming them. And most of the confusion when I was learning git was about what happened to my files.
It does all these kind of weird things as you can see right here and its good to get used to them by practice them a little bit. Its a good idea to use git status as often as possible when youre learning to see whats going on make sure you spend some time practicing commands especially deleting things renaming and moving things otherwise Gits going to be really confusing until you get used to it.
Differences on Git
Git gives you a lot of freedom to experiment with your code. And one of the features that can really help is showing the differences between files. Lets go back into our project and Im going to go to this readme document and delete this last paragraph right here. Then Ill go ahead and save it and Ill do a git diff.
Now this command is going to show you the difference between these two files. You can see that we have deleted and thats what this minus means right here. Not only the paragraph but also this carriage return that was right here. Now lets go ahead and undo this and save it. Clear this out. And well do a git diff again. Theres no differences between those two. And if we do some more changes lets go ahead and add a new folder.
Well call it docs and Im going to move all of my HTML documents onto that docs folder. Now lets try doing a git diff. Now its showing us all the different changes but the changes here involved a move. And if you remember from the last video we saw that moving means that youre deleting a file and then youre adding another file. So to see this entire change I have to scroll all the way down for a long time. Whenever you see that colon right there if you want to exit you can hit the Q key.
Lets go ahead and clear this out. And its a little bit difficult to use that git diff command in the terminal whenever you have a lot of changes. So to do that the Visual Studio code provides a source control editor. Now here you can see what happened. We have deleted these three files and updated or added these other files.
Remember that renaming or moving things causes these kind of changes.
But you can see that the changes are recorded as a deletion of files and then an updating of some other files. Theres a lot of functionality that this screen has so for example if I click on this plus sign I can go ahead and stage the changes directly from this interface. And we can take a look at git status and go ahead and add all the files.
Lets just go ahead and add everything into staging and that automatically will update it everything that is right here. Thats pretty cool. Lets go ahead and commit this change. keyboard typing All right you can see that there are no longer any changes in this source control tab.
Ill go back into the editor and lets go ahead and clear this out. Now diff is pretty flexible. You can use it to compare all types of things. So for example you can compare a file to its date at any one of your other commits. By comparing history youll often check the log to see what the changes were.
When your logs get really long so if I do a git log right now you can see that I get that scrolling text and this can be really long so there is a better way to do a git log and that is with the oneline flag. This puts the commit in order and also shows them to you all in a single line. Can tell that it has a little bit of the hash at the beginning plus the fact that the head pointer is pointing to the main branch and then the commit messages.
This is a great way to take a look at your commit and its also a great way to take a look and compare what youve done right now with some other commit. So if I wanted to I can do a git diff and type in one of these other commits here and its going to show you the differences between those two commits.
Now this is not as useful and there is an extension that you should try using if you are doing a lot of diffing between branches and checkpoints. Its called GitLens and you can get it from the Visual Studio code marketplace.
Search techniques for web Developer.
In this little guide I share searching techniques for a web developer .
Always use MDN for latest up to date information about JS, HTML and CSS.
w3c.org is best website to find more information.
1. These are sites collecting data about the web to provide statistics about the current status
of the platform as a whole.
CanIUse.com and
HTTPArchive.org.
CanIUse.com might be the most aptly named service on the web. It gives you up-to-date information
about worldwide browser support for most platform features including HTML, CSS, JavaScript and beyond.