Matt Gauger - Git & Github web414 December 2010


Published on

Slides from Matt Gauger's talk at the December 2010 Web414 on Git & Github

Published in: Technology
No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • Can you believe it?\n
  • \n
  • \n
  • My name is Matt Gauger. I’m a web app developer, Member of the Bucket Brigade. I work upstairs. I’ve been using Git since at least the beginning of 2008 \nIf I go too fast or get too quiet, stop me and let me know. Thankyou!\nOk, so first off:\n
  • In the sense that I use git every day. I love it. But I don’t worry about its algorithms for storing changes.\nWe won’t go over the low level implementation of git or\ndiscuss the design decisions that make it fast, or any of that. Instead:\n
  • I’ve included plenty of resources at the end to learn from.\n
  • Feel free to follow along on the websites I’m looking at\nand sign up for things as we go along.\nNow, to set the stage, <announcer>imagine a world. A world where one man stands against the code.. </announcer> No. nothing like that.\n
  • I'm going to focus on a beginner user\nSomeone who has never contributed to open source\nThey’re not trying to learn version control, \nbut they do want to contribute to an open source project\n
  • Like many of this, this fictional user just wants to get stuff done.\nSo, how do they find git?\n
  • It's likely that a person would run into git for the first time by visiting Github. This was not the case a year or two ago.\nThere are a lot of big, popular open source projects hosted there. \nToo many to list here, in fact, but here's a quick teaser:\n
  • \n
  • so you see all those and you have to ask:\n
  • \n
  • \n
  • It certainly has a nice design. \nDesign alone doesn't necessarily attract developers\nMost of them still use the commandline with bitmap fonts\n
  • I'll put forward the theory that \nGithub is popular with developers because it optimizes for the things they need to do\n
  • It doesn’t get in their way.\n
  • There’s very little barrier of entry for a developer \nto contribute back to open source\nto upload new code\nor to find projects that interest them.\n
  • Let's assume our beginner has stumbled upon Pete's blog,\nand read the post about the Heard project\nwhich lets you mirror your scrobbles and host it\n
  • \n
  • The blog post contains a link to the Github repo, which looks like this:\n
  • This is the first time the user has been to Github, so they don't quite know how it works. If the user hovers over the Watch or Fork buttons, they will be instructed to sign in.\n
  • They might just click the big Download button and never come back, \nbut let's assume this person wants to hack on the project and contribute back to it. \n
  • \n
  • because they’re beautiful\nand graphs are cool.\n
  • \n
  • \n
  • \n
  • \n
  • But that doesn’t seem to do anything except change the text from Watch to Unwatch.\n(They’re following the project in their Dashboard to see changes, but our user doesn’t\nknow that yet.)\n
  • \n
  • \n
  • \n
  • As soon as you click the Fork button, you’ll see:\n
  • \n
  • What’s a fork?\n
  • Forks are copies of a project.\n
  • \n
  • \n
  • \n
  • \n
  • We will need to generate an SSH key and enter it into Github to get started.\n
  • \n
  • now, you don’t really need to understand that part.\n
  • \n
  • \n
  • isn’t the magic of cryptography awesome?\n
  • \n
  • Our user runs the ssh-keygen command in their shell, after doing some research.\nThis will generate some files in .ssh/\nid_rsa and\n
  • \n
  • which looks something like this:\n
  • The text is not important. \nJust remember it is a very unique string that helps Github identify you by your private key.\n
  • \n
  • \n
  • Now, the user is wondering, how do I get the code?\nThat big download button looks awfully enticing.\nBut that’s not how you develop and contribute back with git, so let’s assume our character knows this.\n
  • we can copy this URL to the clipboard.\nbut our user doesn’t know what it does yet.\n
  • \n
  • \n
  • and if our user cd’s (changes directory) into the newly created Heard directory:\n
  • If the user's SSH key was right, this will work. \nIf not, they'll have to go back and fix it. \nLooks like it worked, though, so we'll move on.\n
  • The git clone command created a directory named Heard in the user's home directory. \n
  • Our user makes some basic changes to the PHP files in their local Heard directory.\n
  • our user reasons that if git keeps tracks of versions of files, it will need to create a new version containing these changes. further, it will need to be told to track a given change, it doesn’t do it automatically.\nGit tracks changes on an object level, not a file or project/directory level. \nYou don’t need to understand that concept, but that means git is really smart about what changed and where.\n
  • \n
  • The documentation says that the commit command is used to take a snapshot of the code in the current state. That sounds perfect. \nBut typing the command yields:\n
  • which, to me, after puzzling over it, looks like\n
  • which we could see in the line:\n
  • wait a second!\n
  • that’s confusing. why doesn’t git see the user’s changes?\nluckily, git also includes a helpful pointer at the bottom there:\n
  • so now we have two more commands to use and figure out.\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • What is going on here? \nThere’s very little instruction as to what to do.\nWhat is our user supposed to do with a text editor now?\n
  • \n
  • now, vim isn’t the most helpful or user-friendly text editor out there, if you don’t know it.\nso, I’m going to share with you a little spell from the wizards of old.\n
  • type this:\n
  • Now, why are we in a text editor? What it is for?\n
  • \n
  • that is, git can already show us the files that changed.\nso when we do a commit, we want to leave a message about what we changed and maybe why.\n
  • than just listing off what files you changed.\n
  • \n
  • \n
  • \n
  • \n
  • I want to cover the commands that our fictional user will encounter while working on Heard.\nThis is the Keynote equivilent of a montage:\n
  • (that’s the lyrics from a song on Team America: World Police, if you remember it.)\n
  • so, let’s go do a typical commit and see what it looks like:\n
  • The git user in me wants to point out two things here:\nFirst, we’re committing everything that changed.\nSecond, we’re committing to the master branch, you can see it in brackets.\n
  • remember that git add command?\n
  • You'll notice there's no output from these commands. That's because nothing has changed yet. Those changes still need to be committed. It would probably be helpful at this point to have a look at what changed and what didn't. For that, we use the git status command.\n
  • when we run git status, the output will look like this:\n
  • you can see we added config.php and init.php with the git add command,\nso those are changes to be committed. Our change to tracks.php is not staged to commit yet.\n
  • \n
  • after committing, we do another git status and see tracks.php is still there, modified but not staged, waiting to be committed too\n
  • \n
  • This is a very important concept to grasp in git. Maybe you caught it in the last few slides.\nWhen we git add some files, they’re added to a pending commit but not committed immediately. Files that aren’t staged won’t be a part of the commit. This is called the staging area.\n
  • next up, we want to take a look at the history of our project, that is, the changes that git has tracked.\n
  • \n
  • \n
  • at this point\n
  • \n
  • In git, sending changes out to the server is called a push\na more complicated form of git push specifies the server to talk and the branch to use.\nfor our purposes, it will default to our master branch and to github.\n
  • the output here isn’t important\nbut we can see it worked.\n
  • \n
  • which again defaults to the default server, which is github.\nthis command will go out and ask github if there are any changes to the project, and pull them down if there are. This is useful if you have two computers and want to get your changes on say, your laptop, after developing on your desktop.\n
  • that is, what if I saved a file that I didn’t mean to save, or I deleted a file I didn’t mean to delete? Is git storing it somewhere for me? \nThe answer is Yes. What you want to do is:\n
  • the command to do that is:\n
  • \n
  • \n
  • \n
  • which restores init.php to the HEAD state.\nThe HEAD state is just a useful placeholder name for the “last commit”\nGit has a lot of these placeholder names, learning them is worth it.\n
  • \n
  • we go back to github:\n
  • \n
  • \n
  • because, again, the user’s github project is a fork of Pete’s github project. Pete needs to pull in the user’s changes, that is, accept the pull request.\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • if you’d like to learn more about git, I highly recommend these sources\n
  • Matt Gauger - Git & Github web414 December 2010

    1. 1. Git &Github
    2. 2. Housekeeping•Slides & blog post will be available at:•Follow me:•More resources at the end & linked in my blog post
    3. 3. Giving not just one talk,not two, but three talks in December!
    4. 4. MKE PHP User’s Group: PHP vs. Rails Dec 14th 6PM
    5. 5. MKE Ruby User’s Group:What’s new and great in Rails 3 Dec 20th 7PM
    6. 6. About Me
    7. 7. I am not an expert.
    8. 8. This talk is aimed at beginners.
    9. 9. So please do play along.
    10. 10. Introducing:A fictional user thathas never used git.
    11. 11. Get Stuff Done.
    12. 12. Github is the hook.
    13. 13. jQuery prototypescriptaculous mootoolsyui3
    14. 14. Ruby on Rails &Symfony many othersDjango
    15. 15. But why is Github so popular?
    16. 16. Let’s take a look.
    17. 17. Github is popular becauseit optimizes for the things developers need to do
    18. 18. It doesn’t get in the way.
    19. 19. And because it’s fun.
    20. 20. Back to our user.
    21. 21. Found Heard on Pete’s blog.
    22. 22. The user wants to addgRaphaël graphs to Heard
    23. 23. Graphs are cool.
    24. 24. The user signs up for Github.
    25. 25. They go back and click “Watch”
    26. 26. Clicks “Fork”
    27. 27. And somethingmagical happens.
    28. 28. (Parents please make your children leave the room or cover their eyes during this part of the program.)
    29. 29. We now have ourown fork of Heard.
    30. 30. Forks are copies.
    31. 31. The first step in usingGithub after signing up is to install git (duh)
    32. 32. This is left as an exercise for the reader!
    33. 33.
    34. 34. Meanwhile, in ourAccount Settings
    35. 35. Sidenote:What are SSH keys and why do I need them?
    36. 36. SSH is a secure communicationsmethod that uses public/private key encryption.
    37. 37. You generate two keys:a public and a private key.
    38. 38. Github knows that only you have the private key
    39. 39. So every time we communicate with the Github server, we don’thave to type a password!
    40. 40. Generate a key pair
    41. 41. $ ssh-keygen
    42. 42. Generates id_rsaand inyour .ssh/ folder
    43. 43. The .pub file isthe public key
    44. 44. ssh-rsaAAAAB3NzaC1yc2EAAAABIwAAAQEAx5qfMKhR/+PQcOw2P/ho36T/aorbGJxiNwLDjrLenFK122nrdjdAKJtBVqCLd2Doagd0iEOFFhMhdJ8hNZ3depupx3JAiCswCBMsL4orjfX1suyR5DA5QyHpf5OGZdKacutlD3l/CsPq2IH2coQnwlnZTVo6oEBklweTHImx0ElfTaqdYOZZ+SW4NQ01aj+6jNb4g4D9BqcIcXA/XDL6B4fi6FtbJo4HlfjAt/YYOKhxblKYRvBuftfJ0Mrn4Nl1twY5tZ23gDG+4LZli7fdoFzRN3EjuEhD/Mg61D1JISQyHDsJQWbOnAdnV3wko8HV9F1D65wpYprHZqueI2xo4w== mathiasx@banshee.local
    45. 45. Copy this key and paste itinto your Github settings.
    46. 46. We’re now ready to hack!
    47. 47. Go back to ourfork of Heard
    48. 48. $ git clone into Heard...remote: Counting objects: 22, done.remote: Compressing objects: 100% (22/22), done.remote: Total 22 (delta 7), reused 0 (delta 0)Unpacking objects: 100% (22/22), done.
    49. 49. $ git clone URI
    50. 50. Creates a local version ofthe project from the server
    51. 51. $ lsCHANGELOG config.php table-tracks.sqlLICENSE heardsync.php tracks.phpREADME init.php
    52. 52. Now we have the code
    53. 53. The user makes somechanges to the code.
    54. 54. User wants git to trackchanges to those files.
    55. 55. For our purposes, theuser finds this command:
    56. 56. $ git commit
    57. 57. $ git commit# On branch master# Changed but not updated:# (use "git add ..." to update what will be committed)# (use "git checkout -- ..." to discard changes in workingdirectory)## modified: config.php# modified: init.php# modified: tracks.php#no changes added to commit (use "git add" and/or "gitcommit -a")
    58. 58. Nothing happened.
    59. 59. “no changes added to commit”
    60. 60. Nothing happened?
    61. 61. (use "git add" and/or "git commit -a")
    62. 62. git add filename
    63. 63. git commit -a
    64. 64. The -a is for all
    65. 65. That is, commit everythingthat changed in the project.
    66. 66. The user types in
    67. 67. $ git commit -a
    68. 68. And is dropped into.. a text editor?
    69. 69. Default text editor.
    70. 70. Likely vim on Linux or Mac OSX.
    71. 71. To change it to something more user-friendly:
    72. 72. $ git config core.editor "nano"
    73. 73. The text editor is fora commit message.
    74. 74. Git is already tracking the exact changes to files.
    75. 75. Your commit messageshould be more abstract.
    76. 76. That boils down to
    77. 77. What did youactually do?
    78. 78. In one line or so.
    79. 79. A good commit messagewill help later when you’re trying to remember what you did.
    80. 80. So now we break the narrative.
    81. 81. Show a lot of things happening at once,remind everyone of whats going on!And with every shot show a littleimprovement,to show it all would take too long!Thats called a montage! MONTAGE!Ooh, we want a montage! MONTAGE!
    82. 82. A typical commit:
    83. 83. $ git commit -am "Added the gRaphael libraryto be loaded, but havent integrated it yet."[master 1a4014f] Added the gRaphael libraryto be loaded, but havent integrated it yet. 3 files changed, 3 insertions(+), 3 deletions(-)
    84. 84. We don’t have to commit all changes at once
    85. 85. [edit some files]$ git add config.php$ git add init.php$ git add filename
    86. 86. git status
    87. 87. $ git status# On branch master## Changes to be committed:# (use "git reset HEAD ..." to unstage)## modified: config.php# modified: init.php## Changed but not updated:# (use "git add ..." to update what will be committed)# (use "git checkout -- ..." to discard changes inworking directory)## modified: tracks.php#
    88. 88. Were only going to commit the changes in the config.php and init.php
    89. 89. $ git commit -m "A little refactoring."[master 6dd5c59] A little refactoring. 2 files changed, 2 insertions(+), 2 deletions(-)$ git status# On branch master## Changed but not updated:# (use "git add ..." to update what will be committed)# (use "git checkout -- ..." to discard changes inworking directory)## modified: tracks.php#no changes added to commit (use "git add" and/or"git commit -a")
    90. 90. Notice that tracks.php is still waiting to be committed.
    91. 91. The “staging area”
    92. 92. To see the history of our project, type:
    93. 93. $ git log
    94. 94. $ git logcommit e47cd6eb917d2a68ec6d1197a38faa1a1ff5e564Author: Matt Gauger <>Date: Thu Dec 9 14:27:04 2010 -0600 Add some newlines after error output.commit 4cce3dff9c8d03b7db1710f7addaa7d556921a44Author: raster <>Date: Sun Nov 14 11:38:50 2010 -0600 Minor changes, still learning git[truncated]
    95. 95. You may be asking
    96. 96. “How do I upload mychanges back to Github?”
    97. 97. $ git push
    98. 98. $ git pushCounting objects: 5, done.Delta compression using up to 4 threads.Compressing objects: 100% (3/3), done.Writing objects: 100% (3/3), 335 bytes, done.Total 3 (delta 2), reused 0 (delta 0)To fb2cc2b..e47cd6e master -> master
    99. 99. And to get changes from the server:
    100. 100. $ git fetch
    101. 101. What happens if I screw up?
    102. 102. Throw away the changes
    103. 103. $ git reset --hard HEAD
    104. 104. Be careful with this, obviously
    105. 105. What if I only want to throwaway changes to one file?
    106. 106. $ git checkout -- init.php$ git checkout HEAD init.php
    107. 107. We’ve covered the most common commands.
    108. 108. Now what?
    109. 109. Our user sends a PullRequest back to Pete.
    110. 110. This asks Pete to merge in their changes.
    111. 111. Pete can use the Githubweb interface to merge those changes in.
    112. 112. Which means our user hascontributed back to Heard,as they originally intended.
    113. 113. What about GUI clients?
    114. 114. “The commandline is scary!”
    115. 115. Mac••Gitbox:•GitX:
    116. 116. Linux•git cola:•gitk is included in git-core•giggle for diffs:
    117. 117. This has been a very brief introduction to Git.
    118. 118. Come see me for freeGithub stickers after.
    119. 119. Thank you for your time.
    120. 120. Further Reading:••••
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.