As a designer, there are times that you feel a little constrained when it comes to making a small design tweak in production. You may not be lucky enough to have great devs to pair with like we have here at Tandem. If you are like me, and you want to make style changes, you will most likely have to learn a little git. If you have never used git before, it may feel completely foreign to you. I know it did for me. There is no shortage of articles, blog posts and documentation out there, but if you just starting out, it may be overwhelming and you may not know where to start. If that is the case, I have put this beginner’s guide to git together to try and put you on your way to submitting your own code.
What is Git
Git is a distributed version control system that allows developers to collaborate on a codebase. It is called version control because it is common for an organization to maintain multiple versions of the same code. This allows developers to work simultaneously on a codebase and deploy features independently from each other. Here at Tandem we use Github but there are a number of other services out there that such as BitBucket which also use git.
Getting Started
First, download git and install it. Once you have you have that done go to Github and create an account. Next, you will need to authenticate when talking to a git platform. For this article, let’s assume you’re using Github. You will need to decide whether you want to use HTTPS or SSH. HTTPS just asks you for you username and password every time you talk to Github (You can set up a credential helper to cache your login info). SSH requires you to generate keys, one for your local machine and one you upload to Github. The SSH route takes a little more upfront effort but it worth it in the end. To setup, enter your SSH key follow these instructions.
Cloning a repository
Once you are set up with access to Github you will want to clone the repository that your team is working on. This will download a local copy of the code to your computer. Copy and paste the command below to clone a repository. You can find the URL from the repository page on GitHub. Just click on the “clone or download” button.
git clone https://github.com/ORGANIZATION-NAME/REPOSITORY-NAME
(I would like to mention that cloning is different from forking. Forking creates a duplicate version of the code and adds it to your Github account, while cloning just downloads a copy to your local machine.)
Assuming that you are all set up to run your code base locally, you are all set to start making design changes. Just remember to code responsibly.
Git Basics
So by default, a git clone will pull the entire code repository, all branches and history, from GitHub and establish a link between it and your local copy. You will commit code changes to this local copy and then push them to the remote, whose default name is the origin, located on GitHub. Sometimes you will have to pull down changes before you can push your up which we’ll also cover. You can choose to add other remote servers to push and pull from as well, but that’s not a very common thing and outside the scope of this post.
Once you have made some changes to your local files, you can go back in into your terminal and enter the following commands
git status
This command will show you what files you have changed and display them in red. If you want see the actually changes you can run the following command.
git diff
The output of the diff might seem a little hard to read at first but it’s pretty easy once you get used to it. After confirming we’re happy with the changes we made, we need to add the files something called the index which is where git stages changes ready to commit. In order to add we use the git add command.
git add .
This will stage all your changes for a commit. It’s also possible to add individual files and even individual lines from within a file using `git add -p`. This can help to break up your commit but since we’re just getting started, let’s stick to adding everything in this commit.
Now that everything is staged you will have to commit. Commit adds a point in the repository’s history documenting the changes you made and a quick message describing them. The command for doing this is as follows.
git commit -m “Enter a message here"
Once you have committed your code the next step is to push it up to GitHub. The following command will push your code to the master branch of the remote repository.
git push
Master is the default branch that your code gets pushed to when you clone from Github, but this may not be what your organization does. Be sure to check with your devs first about their git workflow. You may be wondering what the purpose of a branch is. Basically, it allows you to push changes to a separate branch without effect the main branch. This is really helpful when you want to share changes with someone on your team. More on branches to come in another post.
Git can be daunting to learn for a designer. All the information you need is out there, but it can be hard to put it all together for someone new to git. I hope this guide helps give you a basic understanding of how to work in git and make it less nerve wracking.
Tandem is chicago custom software development company with practice areas in digital strategy, human-centered design, UI/UX, and web application and custom mobile development.
