GitKraken or: How I Learned Git by Using a GUIReid BoudreauBlockedUnblockFollowFollowingMar 18The BackstoryRoughly 6 months into my job as a graphic designer I was informed that the company would be upgrading their E-commerce CMS.
It was going to be a more robust code-heavy platform and interestingly enough I would be the one overseeing it.
Great, I thought to myself, they guy that just got comfortable building HTML tables is sure to do a bang-up job managing and building out the code on an enterprise-level CMS!The experience was truly trial by fire.
There was a lot of Googling, a lot of time invested in YouTube tutorials (ranging from Bootstrap to Backbone.
js to jQuery to local servers & Gulp), and a lot of on the job / off the job learning.
It was exciting, at times frustrating, and in the beginning, well, it was rather reckless.
You see, I hadn’t heard of Version Control and for the first several months I relied on my own rudimentary system which consisted of a single Excel spreadsheet (formatted as: Date, User, File Location, Brief Description of Change).
Git – What Is Version Control?Version control is a system that records changes to a file of set of files over time so that you can recall specific versions later…git-scm.
comBasically, everything I did was destructive.
That doesn’t mean that the changes to the scss, tpl, or js files were wrong, it simply means that once the changes were made there was no going back — and that, my friends, is terrifying.
I eventually came to the conclusion that other E-commerce sites (i.
e.
REI, Nike, Barney’s, Amazon, etc) most likely didn’t rely on a single .
xlsx file to track their site’s changes ????♂️.
I knew there had to be a better way.
Release the Kraken!Enter Git.
And then quickly exit Git because as a designer that black box with the blinking cursor that has the ability to access the depths of my computer is terrifying and lacks intuitiveness and no way no how.
And breathe.
There are always alternatives and Git and version control are no exceptions.
After researching several Git GUIs I ended up going with GitKraken because of its seemingly intuitive UX.
There is plenty of documentation about how to get GitKraken up and running (found here &here), but I don’t really want to delve into that.
What I’m interested in is how GitKraken made Git 1) Accessible, & 2) visual.
GitKraken made Git AccessibleWhen it comes Git basics — clone, commit, push, pull — it’s relatively straight forward and using the CLI shouldn’t be too difficult for a novice user.
That being said, GitKraken makes “the basics” even easier.
Here’s how one would stage and push a change:When a file(s) has been updated and saved GitKraken will display an orange file icon.
Click it!Review the diffs between the original and newly saved file in a nice side-by-side format.
If you want to accept the changes hit the stage button.
If not you can discard them (red trashcan)The file is now staged and you can make a Commit Message.
Select the “Commit Changes to ‘X’” files button and then Push the changes to your repo.
If you need to revert the changes it’s as simple as pressing the “Undo” button on the top bar.
Pretty easy, right?And what if you want to see a commit you made a few days, weeks, or months back?.Sure you can navigate to your repo on GitHub or Bitbucket or you could type in some version of the commands that Git has provided…$ git log$ git log –oneline$ git log –pretty=format:"%h – %an, %ar : %s"…and you’ll be greeted with the following results, respectively:There’s a lot of information there and it’s not terribly easy to parse.
But by using a GUI like GitKraken that same information is only a couple of clicks away.
I can select any of my previous commits, see the comments associated with them, and see the files that were updated as well as the file diff views.
This feature, this ease of use, was huge for me when I started my dev career.
There would be instances of files being buried deep in the file tree that I had to access on rare occasions — think of something like excluding delivery dates on a datepicker.
When one of these files needed to be worked on I could quickly find a previous commit, the path where the file was located, and the exact lines of code that needed to be worked on.
This was a huge timesaver.
It was simple, it was clear, it was in one place, and it was all right at my fingertips.
GitKraken made Git VisualIn my opinion Git and version control are visual things: there are branches, commits, merges, users, file diffs, etc.
As a beginner to version control this can all be very confusing, but less so when GitKraken is utilized.
The visual representation of of each commit, each branch, each merge really helps to explain what exactly is going on.
As your project grows so does your commit graph in an easy to read, digestible, manner.
GitKraken was a godsend for a graphic designer turned front-end developer.
The more I used it the more comfortable I became with Git, Git commands, and version control in general.
While some devs see Git GUIs as a “crutch” of sorts, I view it more as a learning tool, not entirely different from training wheels on a child’s bike.
When I found myself becoming proficient with GitKraken I did begin to utilize the command-line and it became way less scary because, well, I could now visualize what what occurring with each command sent.
.