The Nitty Gitty

Git is not complicated, but it is complex (and confusing). In this talk, Daniel attempts to de-mystify git. He explains the basics of git and its building blocks: commits, blobs, trees and refs. He then goes on to discuss the branch model, and how you can use git to rewrite history.

Presented online at Megabites Tech Lunch n Learn, May 2020.

https://www.meetup.com/MEGABITES-Tech-Lunch-n-Learns/events/270359119/

Transcript

1. Daniel van Berzon
   @ocastahq ocasta.com
   @dvberzon vanberzon.com
   

   View Slide

2. View Slide

3. Developers treat git like a car
   • ! Complicated, intricate and dangerous
   • " Learn enough to get from A to B
   • ⚠ Problem? Call for help
   • $ Rarely lift the hood
   

   View Slide

4. Git is not a car
   

   View Slide

5. Git is not a car ... it's a skateboard
   • Many complicated, intricate and
   dangerous things you can do with Git
   • But Git itself is pretty simple
   

   View Slide

6. Git is ...
   Complicated
   ?
   Confusing
   Complex
   145 commands
   Naming
   

   View Slide

7. Check out
   ...a book from a library
   • Check out a file
   • File is locked
   • Only you can change it
   • Check in file when finished
   

   View Slide

8. checkout
   • Move onto a branch
   • Start a new branch
   • Temporarily move on to a commit
   • Remove local changes to a file
   > git checkout mybranch
   > git checkout -b mybranch
   > git checkout 5bd33a3b
   > git checkout index.html
   

   View Slide

9. Demystify
   Building blocks Branch model History
   Basics
   

   View Slide

10. Basics
    

    View Slide

11. ?
    • Version control system (VCS)
    • Keep a history of your project
    • Restore previous versions
    • Multi-task
    • Collaborate
    • Document evolution of project
    

    View Slide

12. Snapshots
    

    View Slide

13. Snapshots
    

    View Slide

14. Snapshots
    

    View Slide

15. Snapshots
    

    View Slide

16. Basics
    Git repository
    Working directory Index
    index.html
    css
    styles.css
    index.html
    css
    styles.css
    

    View Slide

17. Basics
    Git repository
    Working directory Index
    index.html
    css
    styles.css
    index.html
    css
    styles.css
    

    View Slide

18. Basics
    Git repository
    Working directory Index
    index.html
    css
    styles.css
    index.html
    css
    styles.css
    index.html
    > git add
    styles.css
    

    View Slide

19. Basics
    Git repository
    Working directory Index
    index.html
    css
    styles.css
    index.html
    css
    styles.css
    index.html
    > git add
    styles.css
    index.html
    css
    styles.css
    > git commit
    

    View Slide

20. Building blocks
    

    View Slide

21. Blob Tree
    Ref Commit
    Object database
    

    View Slide

22. Blob Tree
    Ref Commit
    Object database
    

    View Slide

23. %Blob Binary Long Object
    mr-blobby.jpg
    1111111111011000111111111110000000000000000100
    0001001010010001100100100101000110000000000000
    0001000000010000000000000000000000010000000000
    0000010000000000000000111111111101101100000000
    1000010000000000000001010000001100000100000010
    0000000110000001110000100000000101000001010000
    1000000001100000010100000101000001010000011000
    0001110000010100000101000001110000010100000111
    0000010100000101000001110000010100000101000001
    0100000111000010000000011100000111000001110000
    0111000001110000011100001010000100000000101100
    0001110000100000001110000010010000011100000111
    0000110100010101000011010000111000010001000100
    0100010011000100110001001100000111000010110001
    0110000110000001011000010010000110000001000000
    0100100001001100010010000000010000010100000101
    0000010100001000000001110000100000001111000010
    0100001001000011110001001000001101000011010000
    1101000100100001001000010010000100100001001000
    0100100001001000010010000100100001001000010010
    0001001000010010000100100001001000010010000100
    1000010010000100100001001000010010000100100001
    0010000100100001001000010010000100100001001000
    0100100001001000010010000100100001001000010010
    0001001000010010000100100001001000010010000100
    1000010010000100100001001000010010000100100001
    0010000100100001001000010010000100101111111111
    0000000000000000010001000010000000001011010000
    0000010100000000000000110000000100100010000000
    

    View Slide

24. %Blob Binary Long Object
    mr-blobby.jpg
    index.html
    1111000010000101100100011011110110001101110100
    0111100101110000011001010010000001101000011101
    0001101101011011000011111000001010000010100011
    1100011010000111010001101101011011000010000001
    1011000110000101101110011001110011110100100010
    0110010101101110001000100011111000001010001111
    0001101000011001010110000101100100001111100000
    1010001000000010000000111100011011010110010101
    1101000110000100100000011000110110100001100001
    0111001001110011011001010111010000111101001000
    1001110101011101000110011000101101001110000010
    0010001111100000101000100000001000000011110001
    1101000110100101110100011011000110010100111110
    0100000101110011011110010110111001100011001000
    0001000111011010010111010000100000010101000110
    0001011011000110101100111100001011110111010001
    1010010111010001101100011001010011111000001010
    0010000000100000001111000110110101100101011101
    0001100001001000000110111001100001011011010110
    0101001111010010001001100100011001010111001101
    1000110111001001101001011100000111010001101001
    0110111101101110001000100010000001100011011011
    1101101110011101000110010101101110011101000011
    1101001000100100000101110011011110010110111001
    1000110010000001100111011010010111010000100000
    0111010001100001011011000110101100100010001111
    1000001010001000000010000000111100011011010110
    0101011101000110000100100000011011100110000101
    1011010110010100111101001000100110000101110101
    

    View Slide

25. 88d4d9db7773a672280c5dfb085689041f0e9a70
    14b564ced10ef9ef0e741718d60ac1966d6913c0
    SHA hash
    %Blob
    

    View Slide

26. • Represents a folder in the project file system
    • Associated with an SHA hash
    • Has an entry for each file and subfolder
    • Each entry has:
    & Tree
    - Name (index.html)
    - Type (blob or tree)
    - SHA hash
    

    View Slide

27. & Tree
    blob a0423896973644771497bdc03eb99d5281615b51 index.html
    tree aaa96ced2d9a1c8e72c56b253a0e2fe78393feb7 css
    aaa96ced2d9a1c8e72c56b253a0e2fe78393feb7
    blob 790cce91278c3ad02f160faa6e1e61ca147a5c3a styles.css
    &
    ad5a762c172647d211a0881b8d9e98d38edc1de9
    &
    index.html
    css
    styles.css
    

    View Slide

28. • Commit is a snapshot of file system
    • Commit points project root tree
    • Meta-data:
    - SHA hash
    - Author, committer and date
    - A commit message
    - Parent commit
    ☄ Commit
    

    View Slide

29. • Store a blob for the new version of index.hml
    • Store a tree for the project root
    • Store a commit pointing to the new tree
    ☄ Commit
    Index.html
    css
    styles.css
    tree be5b6a45346870a56564ed2652bc51c5f48e1b59
    parent 343e4048d816fa663b56ff5021f2679018381b8d
    author Daniel van Berzon 1564416292 +0200
    committer Daniel van Berzon 1564416292 +0200
    Updating index.html with new banner
    

    View Slide

30. ( Ref
    • Points to a commit
    • Has a meaningful name
    • Two types:
    ) Tag * Branch
    Fixed to the commit Updates to latest commit
    

    View Slide

31. ) Tag
    a
    a b c d e f
    ( Ref
    ) v2.0
    

    View Slide

32. ) Tag
    a
    a b c d
    * Branch
    a
    a b c d
    e f
    ( Ref
    ) v2.0
    * my-feature
    

    View Slide

33. ) Tag
    a
    a b c d
    * Branch
    a
    a b c d
    e f
    e f
    ( Ref
    ) v2.0
    * my-feature
    

    View Slide

34. Thats it for data!
    % Blob
    & Tree
    ☄ Commit
    ( Ref
    > commands
    

    View Slide

35. Branch Model
    

    View Slide

36. • Points to commit
    • Each commit has a parent
    • Branch represents a linear history
    * Branch
    * my-feature
    

    View Slide

37. • Branches are lightweight and disposable
    • Default branch is master
    • Create a branch
    • Move onto a branch
    • (Create and move)
    * Branch
    > git checkout mybranch
    > git branch mybranch
    > git checkout -b mybranch
    

    View Slide

38. • Current position
    • Normally points to a branch
    • Checked out onto that branch
    • Possible to point directly to a commit
    + HEAD
    "detached HEAD"
    

    View Slide

39. * Branch
    > git init
    > git commit
    a
    * master +
    

    View Slide

40. * Branch
    > git init
    > git commit
    > git commit
    > git commit
    b
    a c
    * master +
    

    View Slide

41. * Branch
    > git init
    > git commit
    > git commit
    > git commit
    > git branch mybranch
    b
    a c
    * mybranch
    * master +
    

    View Slide

42. * Branch
    > git init
    > git commit
    > git commit
    > git commit
    > git branch mybranch
    > git checkout mybranch
    b
    a c
    * mybranch
    * master
    +
    

    View Slide

43. * Branch
    > git init
    > git commit
    > git commit
    > git commit
    > git branch mybranch
    > git checkout mybranch
    > git commit
    > git commit
    b
    a c
    d e
    * mybranch
    * master
    +
    

    View Slide

44. * Branch
    > git init
    > git commit
    > git commit
    > git commit
    > git branch mybranch
    > git checkout mybranch
    > git commit
    > git commit
    > git checkout master
    b
    a c
    d e
    * mybranch
    * master +
    

    View Slide

45. * Branch
    > git init
    > git commit
    > git commit
    > git commit
    > git branch mybranch
    > git checkout mybranch
    > git commit
    > git commit
    > git checkout master
    > git commit
    > git commit
    b
    a c
    d e
    f g
    * mybranch
    * master +
    

    View Slide

46. * Branch
    b
    a c f g
    * mybranch
    d e
    b
    a c
    * master
    

    View Slide

47. * Branch - why?
    • Multi-task
    

    View Slide

48. * Branch - why?
    • Multi-task
    • Collaborate
    

    View Slide

49. * Branch - why?
    • Multi-task
    • Collaborate
    • Experiment
    

    View Slide

50. * Branch - why?
    • Multi-task
    • Collaborate
    • Experiment
    How can you share work between branches?
    

    View Slide

51. • Incorporate changes from one branch into another
    • Bad name!
    • Merge: two things → one thing
    • Merge branch A into B → still two branches
    • Should be called Import
    , Merge
    

    View Slide

52. , Merge
    Simplest case...
    d e
    b
    a c
    * destination
    * source
    b
    a c
    Source is "ahead" of destination
    

    View Slide

53. , Merge
    * destination
    d e
    b
    a c * source
    b
    a c
    > git checkout destination
    > git merge source
    d e
    Destination has changed - source is unchanged
    

    View Slide

54. , Merge
    Fast-Forward merge
    d e
    b
    a c
    * source
    * destination
    

    View Slide

55. , Merge
    Fast-Forward merge
    d e
    b
    a c
    * source
    * destination
    

    View Slide

56. , Merge
    More complex case...
    source and destination have "diverged"
    * destination
    d e
    b
    a c * source
    b
    a c f g
    

    View Slide

57. , Merge
    * source
    b
    a c f g
    d e
    Merge commit
    * destination
    

    View Slide

58. , Merge
    * source
    b
    a c f g
    d e
    index.html
    Merge commit
    styles.css
    styles.css
    M
    styles.css
    index.html
    Merge commit
    * destination
    > git checkout destination
    > git merge source
    

    View Slide

59. , Merge * destination
    * source
    b
    a c f g
    d e
    M
    • Merge commit has two parents
    • Contains diffs from commits in source branch
    • Source branch remains unchanged
    

    View Slide

60. History
    

    View Slide

61. So far we have been adding commits to history
    Git allows you to
    change history?
    

    View Slide

62. Why?
    

    View Slide

63. Two ways to look at git history
    Story
    Record
    

    View Slide

64. ...
    div.panel {
    background-color: #eee;
    display: flex;
    flex: 1 0 0;
    min-width: 250px;
    }
    ...
    styles.css
    - Story telling
    . in IE11
    

    View Slide

65. ...
    div.panel {
    background-color: #eee;
    display: flex;
    - flex: 1 0 0;
    + flex: 1 0 0%;
    min-width: 250px;
    }
    ...
    styles.css
    Document the change?
    - Story telling
    

    View Slide

66. ...
    div.panel {
    background-color: #eee;
    display: flex;
    - flex: 1 0 0;
    + /* IE11 requires % unit */
    + flex: 1 0 0%;
    min-width: 250px;
    }
    ...
    styles.css
    - Story telling
    

    View Slide

67. ...
    div.panel {
    background-color: #eee;
    display: flex;
    - flex: 1 0 0;
    + flex: 1 0 0%;
    min-width: 250px;
    }
    ...
    styles.css
    ✉ Commit message
    commit 762258f4a4e64cdf156960d12fea785a3f11fdcf
    Author: Daniel van Berzon
    Date: Mon Jul 29 18:54:33 2019 +0200
    Added unit to flex basis
    This was causing a bug in IE11 where `flex`
    command is ignored if the basis part doesn't have
    a unit. More details here:
    https://github.com/philipwalton/flexbugs#flexbug-4
    

    View Slide

68. - Story telling
    • A commit message can be used to document a change
    • Works best if each commit contains one logical change
    - Atomic commit
    • A logical sequence of atomic commits can tell a story
    

    View Slide

69. View Slide

70. Different histories
    

    View Slide

71. 0 Record
    

    View Slide

72. 0 Record
    

    View Slide

73. 0 Record
    

    View Slide

74. - Story
    

    View Slide

75. - Story
    

    View Slide

76. - Story
    

    View Slide

77. • Git history that tells a coherent story has advantages:
    - Documents reason for changes
    - Easier to do code reviews
    - Search history to help fix bugs
    • Process of coding is messy
    • Use git commands to refactor history and tell the story
    - Story telling
    

    View Slide

78. ✏ git commit --amend
    • Same process as commit
    • Instead of adding a new commit, adds changes to the current
    commit.
    • Can also edit the commit message
    b
    a c
    styles.css
    d
    index.html
    Ammend d
    

    View Slide

79. ✏ git commit --amend
    • Same process as commit
    • Instead of adding a new commit, adds changes to the current
    commit.
    • Can also edit the commit message
    b
    a c
    styles.css
    d
    d'
    index.html
    d' has new SHA
    

    View Slide

80. ↩ git reset
    • Opposite process to commit
    • Removes all commits up to and including the target
    • Diffs in the removed commits become local changes
    b
    a d
    Reset to b
    styles.css
    c
    index.html
    

    View Slide

81. ↩ git reset
    • Opposite process to commit
    • Removes all commits up to and including the target
    • Diffs in the removed commits become local changes
    b
    a
    Reset to b
    styles.css
    index.html
    

    View Slide

82. ⚾ git rebase
    • Change starting point (base) of a sequence of commits
    • Rewind commits to the starting point
    • Reapply commits from the new starting point
    b
    a c d e
    f g * branch1
    * master
    Current base
    New base
    

    View Slide

83. ⚾ git rebase
    • Change starting point (base) of a sequence of commits
    • Rewind commits to the starting point
    • Reapply commits from the new starting point
    b
    a c d e
    f g * branch1
    * master > git checkout branch1
    > git rebase master
    Current base
    New base
    

    View Slide

84. ⚾ git rebase
    • Change starting point (base) of a sequence of commits
    • Rewind commits to the starting point
    • Reapply commits from the new starting point
    b
    a c d e * master
    f' g' * branch1
    f' and g' have new SHAs
    

    View Slide

85. * master
    * feature1
    b
    a c
    f g
    ⚾ why rebase?
    • Useful for keeping a clean history shape
    d e
    

    View Slide

86. * master
    * feature1
    b
    a c
    f g
    ⚾ why rebase?
    • Useful for keeping a clean history shape
    d e
    M h
    M
    

    View Slide

87. * master
    * feature1
    * master
    * feature1
    b
    a c
    f g
    ⚾ why rebase?
    • Useful for keeping a clean history shape
    d e
    M h
    M
    b
    a c d e
    f g
    

    View Slide

88. * master
    * feature1
    * master
    * feature1
    b
    a c
    f g
    ⚾ why rebase?
    • Useful for keeping a clean history shape
    d e
    M h
    M
    b
    a c d e
    g'
    M
    h
    f'
    

    View Slide

89. ⚾ why rebase?
    Merge
    Rebase
    

    View Slide

90. That's all we have time for
    

    View Slide

91. 4 In Memoriam Remotes
    Conflicts
    Workflows
    Commands
    > git cherry-pick
    > git stash
    > git revert
    > git reflog
    > git blame (annotate)
    > git log -S (pickaxe)
    

    View Slide

92. 5 Useful links
    git-scm.com/book/en/v2
    • Pro git
    • Atlassian Git Tutorials
    • Git CLI tutorial
    • Oh shit git!
    www.atlassian.com/git
    ohshitgit.com/
    > git help tutorial
    

    View Slide

93. Thank you
    Daniel van Berzon
    @ocastahq ocasta.com
    @dvberzon vanberzon.com
    

    View Slide