News

A beginners guide to Git for Designers pt1

Take responsibility of your code and start using Git for version control. Discover how to install Git and a look at the basic cycle.

website

You’re likely to be familiar with tools such as Git and Subversion. However, although you might claim that you leverage version control in your web-design projects, more often than not, you probably don’t.

If you think you’re guilty of not doing this, you’re certainly not alone. In fact, it’s more than likely that the majority of web designers don’t use version control properly in their projects, if at all. The dilemma stems from the common belief that version control is strictly for hardcore coders; those who spend most days in total darkness, and who rarely come up for air. This isn’t and shouldn’t be the case.
In reality, if you code for the web, whether on the front-end or back-end, it’s your duty to code responsibly, so make sure you use version control.

Five Signs That You’re Overdue for Version Control

1. You have no concept of what version control is, or why it might be useful.
2. You code locally, and have no backup system.
3. You back up your projects by sporadically duplicating the root directory.
4. You accidentally deleted a file permanently, and had to recode from scratch.
5. Upon making a number of edits, your application breaks, at which point you have to hold down Command+Z for a painful number of seconds, as you watch the editor reverse your changes.

It’s likely that every developer has identified with one of the above signs at one point or another in his or her career. But remember the first step to recovery is to admit that you have a problem!

Five Immediate Benefits to Version Control

1. Accidentally deleted that class or PSD? Run a single command in the Terminal to revert to a previous state in the project. Disaster avoided!
2. Ever gasped in horror, as your website somehow vanished from your desktop? It was there yesterday, but today it’s gone! A free service, called GitHub, makes this a non-issue.
3. Who the heck would write this bit of code that I now have to spend hours re-writing? No need to wonder who’s to blame; Git will tell you.
4. Code with abandon, while knowing that, with each commit, ‘snapshots’ of your application are being saved, just in case you need to roll back to this state at some point in the future.
5. Accept that developers, who are likely to be far more seasoned than you, have deemed it a best practice. It’s helpful to mimic those we admire, and this situation is no exception.

How git works

So how does Git actually factor into this whole version control thing? Well, the super nerdy definition is that Git is a distributed version control system, developed by Linus Torvalds, where each working directory is its own repository with the full history available at any point. In addition to this, Git also offers the ability to share code, and create multiple branches (or timelines) for your projects, making it particularly suitable for agile development teams.
A more understandable definition might be: Git is a command-line tool that you – and any other developers on your team – can use to save frequent snapshots of your projects. At any given point, it offers the flexibility to roll back changes to previous states, with only a single command.

Installing Git

Certainly, the first step to wreckless ‘cowboy coding’ recovery is to download Git from git-scm.com. Use either of the following URLs, depending upon your operating system.
– Mac git-scm.com/download/mac
– Windows git-scm.com/download/win
Next, we need to configure the installation just a touch, by associating a username and email address. Open your nearest console (Terminal on the Mac), and run:

001$ git config –global user.name “Your Name”
002$ git config –global user.email email@ example.com

This only needs to be typed once, right after you first install Git. Now, for every action that you take, Git will use these settings.
There are further configuration options, such as specifying which code editor should be used when Git requires you to type in a commit message, but ignore that at the moment. Now Git is successfully installed!

The Basic Cycle

One of the most difficult aspects of learning Git is deciphering what the various jargon refers to. Commits; staging; branches; logs – it can be confusing.
As with any new technology, there’s a small bit of learning required. Luckily, as complex as Git can be, particularly as a web designer, you’ll find that a handful of commands will go a long way. For comparison, consider the English dictionary, and then the number of words that we realistically use in everyday conversations. The same is true for Git – at a much lower level. So don’t feel overwhelmed. Take it one command at a time.
To knock out this confusing terminology, it might help to think of something tangible in the real world, such as a delivery truck. We’ll refer to this analogy later.
First, imagine that you’ve begun a new static website. You’ve created folders for JavaScript and CSS files, as well as an index.html file with a bit of boilerplate HTML. In fact, do that very thing right now! When finished, it’s time to create the first commit.
Return to the Terminal, and type:

001git init

This command, ‘initialise Git’, informs Git that we desire version control for this project. It ‘starts the ignition’ of our delivery truck. It only needs to be executed once, at the start of a new project’s life cycle.
Next, let’s determine what the ‘status’ is.

001git status

If working along, you’ll likely see something along the lines of:
001# On branch master
002# Initial commit
003# Untracked files:
004# (use “git add …” to include in 
what will be committed)
005# index.html
nothing added to commit but untracked files present (use “git add” to track)

Though somewhat confusing, if we take a moment, we’ll see that, by default, we’re working on a ‘branch’ called ‘master’. Next, we have one untracked file: index.html. From this, we’re able to decipher that Git isn’t magic; it must be told which files to monitor.
Curious why the JavaScript and CSS directories aren’t included in the list of untracked files? Git tracks files, not folders. A common technique, though, to include empty directories in a commit is to add a .gitignore file to each subdirectory. More on that later.

DONT FORGET TO COME BACK FOR PART TWO. THIS WILL INCLUDE TRACKING FILES, EXPERIMENTING, IGNORING FILES AND SOCIAL CODING

×