{"id":3851,"date":"2017-12-17T13:41:51","date_gmt":"2017-12-17T13:41:51","guid":{"rendered":"http:\/\/www.nikola-breznjak.com\/blog\/?p=3851"},"modified":"2018-11-06T22:37:58","modified_gmt":"2018-11-06T22:37:58","slug":"learn-git-fast-job-depends","status":"publish","type":"post","link":"https:\/\/nikola-breznjak.com\/blog\/miscellaneou\/learn-git-fast-job-depends\/","title":{"rendered":"Learn Git fast as if your job depends on it"},"content":{"rendered":"<p><em>Update: Fancy a video course? I made my first one on <a href=\"https:\/\/skl.sh\/2qE11BP\">Skillshare, go check it out<\/a>.<\/em><\/p>\n<h2>TL;DR<\/h2>\n<p>In this post, with a grain of humor, I&#8217;m going to show you the minimum number of Git commands that you need to learn in order to start being productive and get that code from your machine to the company Git server. Also, I&#8217;ll cover a bit of theory and Git installation as well.<\/p>\n<h2>Disclaimer<\/h2>\n<blockquote><p>\n  \u26a0\ufe0f Nobody in this story, and no outfit or corporation, thank God, is based upon an actual person or outfit in the real world. But I can tell you this; as my journey through the software jungle progressed, I came to realize that, by comparison with the reality, my story was as tame as a holiday postcard. ~ John le Carr\u00e9\n<\/p><\/blockquote>\n<h2>Setting the stage<\/h2>\n<p>So, let&#8217;s set a scene; it&#8217;s your first day as a junior developer straight out of college. You get to work, greet your superior that&#8217;s supposed to be responsible for you, and since he&#8217;s too busy with putting down some fire that just popped up, he, conversely, while you&#8217;re trying to keep up walking aside him tells you something like:<\/p>\n<blockquote><p>\n  I&#8217;ve set the Git access for you to my website project.<\/p>\n<p>  You have a ticket in our project management tool assigned to you. No worries, it&#8217;s just some simple stuff that needs to be changed.<\/p>\n<p>  Just check the email details, and you can start immediately.<\/p>\n<p>  I&#8217;m aware that you may not be familiar with Git. I&#8217;m not trying to be an asshole, but just deal with it, learn it, OK? Don&#8217;t they, like, teach you kids nothing in school these days?<\/p>\n<p>  Ah, I gotta run.<\/p>\n<p>  Oh, and one more thing, look up branching and do not EVER, and I repeat &#8211; EVER, commit to master; do a PR instead! Good luck and see ya later!\n<\/p><\/blockquote>\n<p>OK. You sit down at your cubicle, open up your email client, log in, and there you see the email (without the subject line, of course) with the contents:<\/p>\n<blockquote><p>\n  <a href=\"https:\/\/github.com\/Hitman666\/MrSupervisorWebsite\">Here&#8217;s a link to the Git repo on Github<\/a>.<\/p>\n<p>  Good luck,<br \/>\n  Mr. Superior\n<\/p><\/blockquote>\n<h2>Reality sets in<\/h2>\n<blockquote><p>\n  \u26a0\ufe0f This, in and of itself is a poor onboarding if you ask me, but I personally have seen it way too many times, so here are the things you need to do to get productive fast and learn the ropes as fast as you can.\n<\/p><\/blockquote>\n<p>So now you&#8217;re, in lack of better words, screwed (you know the exact word, but we&#8217;re not supposed to be using profanity here, ae?).<\/p>\n<p>You&#8217;re lost. You heard about Git before, but you never used it. Now you&#8217;re kicking yourself for not learning it properly yourself. But, it is what it is, and since you&#8217;re really determined to make it in this &#8216;programming&#8217; world, you&#8217;re ready to do what it takes.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/i.imgur.com\/YZ4W1Ao.jpg\" alt=\"\" \/><\/p>\n<p><em>I would question the fact that if you are &#8216;so into it&#8217;, how come you haven&#8217;t learned it yet, but as Mr. Superior said, I&#8217;m not trying to be an asshole<\/em> ?<\/p>\n<p>Therefore, buckle up young padawan, you&#8217;re in for a ride!<\/p>\n<h2>What is this Git thing?<\/h2>\n<p>First, let me start off with a few problems:<\/p>\n<ul>\n<li>Say you&#8217;re writing a seminar and you make some changes, save them, go out of the text editor, come back, and you want to see all of your changes that you did last in the file. Or, for example, you want to undo some changes that you did last night (writing a seminar after returning from a party is a noble act, but not a very smart one!).<\/li>\n<li>While writing this seminar you create several versions of the same file and you don&#8217;t even know what&#8217;s changed in which version; you would really love to know what was, for example, changed in this current version based on the, say, a version from a few days ago.<\/li>\n<li>You&#8217;re working on a group project and someone deletes your changes &#8216;by accident&#8217;.<\/li>\n<\/ul>\n<p><a href=\"https:\/\/en.wikipedia.org\/wiki\/Version_control\">VCS<\/a> (Version Control Systems) tends to solve these problems. And, let me start off by saying that no, you don&#8217;t need to use VCS <em>only<\/em> for writing code (thus the seminar example). You can use it for any textual project. One of VCS solutions is <a href=\"https:\/\/git-scm.com\/\">Git<\/a>. One other popular VCS, that&#8217;s still used to some extent today is <a href=\"https:\/\/subversion.apache.org\/\">Subversion<\/a>. You can see a detailed list of Version Control Systems <a href=\"https:\/\/en.wikipedia.org\/wiki\/List_of_version_control_software\">here<\/a>.<\/p>\n<p>Git was made by the ever so slightly genius Linus Torvalds, the father of Linux:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/i.imgur.com\/ESoSiQq.jpg\" alt=\"\" \/><\/p>\n<p>Git is a distributed version control system (VCS).<\/p>\n<p><strong>Version control<\/strong> means that you use it to store versions of your documents. True, it seems it&#8217;s very popular among developers, but designers and other people (that are a bit more tech savvy) also use it to track versions of their files.<\/p>\n<p>This whole <strong>distributed<\/strong> part is one of the things that makes it different from other VCS. Rather than have only one single place for the full version history of the software, as is common in once-popular VCS like CVS or Subversion, in Git every developer&#8217;s working copy is also a repository that can contain the <strong>full history of all changes<\/strong>.<\/p>\n<h2>OK, but what is Github?<\/h2>\n<blockquote><p>\n  Something like Dropbox, but customized for Git.\n<\/p><\/blockquote>\n<p><a href=\"https:\/\/github.com\/\">Github<\/a> is a hosting service for Git projects, with some additional batteries included that we&#8217;re not going to get into at this point, as you&#8217;re short on time. Think of it as a place where you store your Git &#8216;stuff&#8217;.<\/p>\n<h2>Installing Git<\/h2>\n<p>To install Git, go to the <a href=\"https:\/\/try.github.io\/\">official website<\/a> and download the executable for your machine. I&#8217;m not going into the installation details as they&#8217;re really just a bunch of <code>Next, Next, Next, yes to malware, Finish<\/code> set of steps. <em>I&#8217;m kidding about the malware OFC<\/em>.<\/p>\n<p>To make sure your installation was successful, run the following command in your Terminal\/Command prompt:<\/p>\n<p><code>git --version<\/code><\/p>\n<p>You should get something like:<\/p>\n<p><code>git version 2.10.1<\/code><\/p>\n<h2>Fetching the repo<\/h2>\n<p>OK, so let&#8217;s finally get some action. In your email, you received an URL to the Git repository. It was this: <a href=\"https:\/\/github.com\/Hitman666\/MrSupervisorWebsite\">https:\/\/github.com\/Hitman666\/MrSupervisorWebsite<\/a>. You click the link, and you see something like this:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/i.imgur.com\/nvz9ulq.png\" alt=\"\" \/><\/p>\n<p>Click the <code>Clone or download<\/code> button, make sure you see the <code>Use SSH<\/code> in the top right corner of a popup and copy the link.<\/p>\n<p>To get this repository to your computer, you have to execute the following command in your Terminal\/Command prompt (I&#8217;ll use Terminal in the rest of the post):<\/p>\n<p><code>git clone https:\/\/github.com\/Hitman666\/MrSupervisorWebsite.git<\/code><\/p>\n<p>The output of the command should look something like this:<\/p>\n<pre><code>Cloning into 'MrSupervisorWebsite'...\nremote: Counting objects: 7, done.\nremote: Compressing objects: 100% (4\/4), done.\nremote: Total 7 (delta 0), reused 7 (delta 0), pack-reused 0\nReceiving objects: 100% (7\/7), done.\n<\/code><\/pre>\n<h2>Checking out the code<\/h2>\n<p>Now, go into the newly created <code>MrSupervisorWebsite<\/code> folder and open it in your editor.<\/p>\n<p>You should see three files: <code>index.htmnl<\/code>, <code>style.css<\/code>, and <code>README.md<\/code>.<\/p>\n<p>You quickly go and click to open the <code>README.md<\/code> file, but all you see is this:<\/p>\n<pre><code># MrSupervisorWebsite\n<\/code><\/pre>\n<p>Hmm, so, no help there.<\/p>\n<p>You open up the <code>index.html<\/code> file and you see:<\/p>\n<pre><code>&lt;!DOCTYPE html&gt;\n&lt;html lang=\"en\"&gt;\n&lt;head&gt;\n    &lt;meta charset=\"UTF-8\"&gt;\n    &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"&gt;\n    &lt;meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\"&gt;\n    &lt;title&gt;MrSupervisorWebsite&lt;\/title&gt;\n    &lt;link rel=\"stylesheet\" href=\"style.css\"&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n    &lt;h1 class=\"title\"&gt;Welcome to MrSupervisorWebsite!&lt;\/h1&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;\n<\/code><\/pre>\n<p>OK, finally something that you&#8217;re familiar with! You also open up the <code>style.css<\/code> file, and you see:<\/p>\n<pre><code>.title {\n    color: blue;\n}\n<\/code><\/pre>\n<p>Next, you take a look at the ticket assigned to you in the project management tool that Mr.Superior mentioned, and it looks something like:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/i.imgur.com\/UV33DqY.png\" alt=\"\" \/><\/p>\n<p>You take a deep breath, finally something that you know how to handle! ?<\/p>\n<p>You&#8217;re a bit taken aback by the &#8216;manly color&#8217;, so you go and ask Google:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/i.imgur.com\/lgoY0Ui.png\" alt=\"\" \/><\/p>\n<p>You pick the <code>4872A2,<\/code> and you&#8217;re happy. You think to yourself: OK, now I just need to change this color in the <code>style.css<\/code> file, somehow add this to this Git thing and &#8216;publish&#8217; it.<\/p>\n<p>You&#8217;re right, but not so fast! You remember that note from Mr.Supervisor that you shouldn&#8217;t commit to master, EVER?<\/p>\n<h2>Creating a new branch<\/h2>\n<p>So, what is this <code>master<\/code> anyway? You go online, and you find that:<\/p>\n<blockquote><p>\n  Git has branches, and its main one is called <code>master<\/code>. You can create as many of them as you want, based on any other existing one.\n<\/p><\/blockquote>\n<p>Also, you read a bit about the PR, and you learn that:<\/p>\n<blockquote><p>\n  PR is short for Pull Request. Pull requests let you tell others about changes you&#8217;ve pushed to a repository on GitHub. Once a pull request is opened, you can discuss and review the potential changes with collaborators and add follow-up commits before the changes are merged into the repository.\n<\/p><\/blockquote>\n<p>So, this is smart, right? You can add your code to the Git repo without breaking any existing stuff on the <code>master<\/code> branch, and through this PR you can then ask a more experienced developer to do a CR (code review) on your PR and accept it or not.<\/p>\n<p>You&#8217;re smart; you see the huge benefit of this vs. just committing something to <code>master<\/code> and potentially breaking something in production.<\/p>\n<p>Now, to circle back a bit and explain how could it be that you would break something!? Well, there&#8217;s a thing called CI (Continuous Integration) and CD (Continuous Deployment), and you can read more about it, but in essence, it&#8217;s this:<\/p>\n<blockquote><p>\n  Every time someone pushes a new commit to <code>master<\/code> branch, a whole set of deploy scripts are being triggered, and essentially the new code that&#8217;s pushed is going to appear in production.\n<\/p><\/blockquote>\n<p>What this means is that if you change that color and you commit it to <code>master<\/code> (you&#8217;ll learn in a minute how to actually do this <code>commit<\/code> action), it will &#8216;automagically&#8217; appear in the production on the website.<\/p>\n<p>\u26a0\ufe0f Of course, the premise is that the service is set like that in the first place.<\/p>\n<p>So, you get the point and value of additional branches, and you <strong>create a new branch<\/strong> by executing the following command in your Terminal:<\/p>\n<p><code>git checkout -b poppingTitle<\/code><\/p>\n<p>The upper command is a shortcut for two commands:<\/p>\n<pre><code>git branch poppingTitle\ngit checkout poppingTitle\n<\/code><\/pre>\n<p>The first one creates a new branch called <code>poppingTitle<\/code> from the current branch that you&#8217;re on (in our case that&#8217;s <code>master<\/code>). The second one &#8216;checks it out&#8217;. Meaning, it places you on that branch.<\/p>\n<h2>Adding some code<\/h2>\n<p>Now you&#8217;re finally ready to add some code!<\/p>\n<p>Open up the <code>style.css<\/code> file, change the color, and save the file. It should look like this now:<\/p>\n<pre><code>.title {\n    color: #4872A2;\n}\n<\/code><\/pre>\n<p>One useful command that you&#8217;ll use a lot is <code>git status<\/code>, which will you tell you the status of your git project. If you execute that in your Terminal you will see that the <code>style.css<\/code> file was modified:<\/p>\n<pre><code>On branch poppingTitle\nChanges not staged for commit:\n  (use \"git add &lt;file&gt;...\" to update what will be committed)\n  (use \"git checkout -- &lt;file&gt;...\" to discard changes in working directory)\n\n    modified:   style.css\n\nno changes added to commit (use \"git add\" and\/or \"git commit -a\")\n<\/code><\/pre>\n<p>As you can see, in the instructions from the output, these changes are not yet added to the commit. To do that, execute the command <code>git add style.css<\/code>. Of course, if you were to have multiple files you would not have to list each and every one of them, you would just use <code>git add .<\/code> command.<\/p>\n<p>If you run the <code>git status<\/code> command again, you&#8217;ll see that we have changes that are ready to be committed:<\/p>\n<pre><code>On branch poppingTitle\nChanges to be committed:\n  (use \"git reset HEAD &lt;file&gt;...\" to unstage)\n\n    modified:   style.css\n<\/code><\/pre>\n<h2>Committing code<\/h2>\n<p>To commit (one could use words like save or apply here for better clarity) the added changes to your local repository, just run:<\/p>\n<p><code>git commit -m \"Changed the title color\"<\/code><\/p>\n<p>Of course, the commit message can be anything, but please do yourself a favor and write meaningful commit messages.<\/p>\n<p>If you run the <code>git status<\/code> command again, you&#8217;ll see that we have a clean repository:<\/p>\n<pre><code>On branch poppingTitle\nnothing to commit, working tree clean\n<\/code><\/pre>\n<h2>Pushing to a remote repository<\/h2>\n<p>So, great, at this point you have the change locally in your repository, but you&#8217;d like to get this back to Github (the so-called remote repository, or <code>origin<\/code> as it&#8217;s usually referred to).<\/p>\n<p>For that you have to execute the following command:<\/p>\n<p><code>git push origin poppingTitle<\/code><\/p>\n<p>You should get an output similar to this:<\/p>\n<pre><code>Counting objects: 3, done.\nDelta compression using up to 8 threads.\nCompressing objects: 100% (2\/2), done.\nWriting objects: 100% (3\/3), 299 bytes | 0 bytes\/s, done.\nTotal 3 (delta 1), reused 0 (delta 0)\nremote: Resolving deltas: 100% (1\/1), completed with 1 local object.\nTo github.com:Hitman666\/MrSupervisorWebsite.git\n * [new branch]      poppingTitle -&gt; poppingTitle\n<\/code><\/pre>\n<h2>Doing a PR<\/h2>\n<p>If you check Github now, you&#8217;ll see that we&#8217;ve pushed this new branch:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/i.imgur.com\/hoaLPE4.png\" alt=\"\" \/><\/p>\n<p>Now, click on the <code>Compare &amp; pull request<\/code> button.<\/p>\n<p>Here you can add some comment summarizing your pull request:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/i.imgur.com\/NZDFScl.png\" alt=\"\" \/><\/p>\n<p>Finally, click the <code>Create pull request<\/code> button.<\/p>\n<p>And now (if we&#8217;re playing by the book) someone else from your team would come and review your code. At this point, you could let someone know about this via your Project Management Tool (JIRA, Trello, Leankit, Kanbanflow, etc&#8230;) by putting this task\/card in the appropriate column.<\/p>\n<h2>Your PR is accepted<\/h2>\n<p>When the pull request is approved (you get a notification from Github when someone approves or rejects it), you as the author go back to Github and just click on the <code>Merge pull request<\/code> button, and that&#8217;s it:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/i.imgur.com\/oDzK7ZE.png\" alt=\"\" \/><\/p>\n<p>Finally, click the <code>Delete branch<\/code> button as it&#8217;s a good practice to not keep the merged branches in the remote repo:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/i.imgur.com\/2XZfov5.png\" alt=\"\" \/><\/p>\n<h2>You get to live another day<\/h2>\n<p>Your merge to <code>master<\/code> goes well, it&#8217;s auto-deployed, you check the website and all is cool. You update the ticket in your ticketing system by placing it in the &#8216;Deployed&#8217; column (or some similarly named column).<\/p>\n<p>It&#8217;s 17:12, you close your laptop and cheerfully go home to learn more about this awesome Git thingy. ?<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/i.imgur.com\/0jaodld.jpg\" alt=\"\" \/><\/p>\n<blockquote class=\"twitter-tweet\" data-width=\"550\">\n<p lang=\"en\" dir=\"ltr\">Learn <a href=\"https:\/\/twitter.com\/hashtag\/Git?src=hash&amp;ref_src=twsrc%5Etfw\">#Git<\/a> fast as if your <a href=\"https:\/\/twitter.com\/hashtag\/job?src=hash&amp;ref_src=twsrc%5Etfw\">#job<\/a> depends on it <a href=\"https:\/\/t.co\/or1bTBS4Vt\">https:\/\/t.co\/or1bTBS4Vt<\/a><\/p>\n<p>&mdash; Nikola Bre\u017enjak (@HitmanHR) <a href=\"https:\/\/twitter.com\/HitmanHR\/status\/942390037483786240?ref_src=twsrc%5Etfw\">December 17, 2017<\/a><\/p><\/blockquote>\n<p><script async src=\"https:\/\/platform.twitter.com\/widgets.js\" charset=\"utf-8\"><\/script><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Update: Fancy a video course? I made my first one on Skillshare, go check it out. TL;DR In this post, with a grain of humor, I&#8217;m going to&hellip;<\/p>\n","protected":false},"author":1,"featured_media":3856,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[32],"tags":[],"class_list":["post-3851","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-miscellaneou"],"_links":{"self":[{"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/posts\/3851","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/comments?post=3851"}],"version-history":[{"count":7,"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/posts\/3851\/revisions"}],"predecessor-version":[{"id":4114,"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/posts\/3851\/revisions\/4114"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/media\/3856"}],"wp:attachment":[{"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/media?parent=3851"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/categories?post=3851"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/tags?post=3851"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}