Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Design Systems + Git = Success - Clarity Conference 2018

279 views

Published on

Design Systems are most successful when they have a solid process in place to manage, maintain, and share component code across multiple teams and codebases. The best way to achieve this is to manage code using a version control system like Git. Git is the defacto industry standard tool for storing and editing code for a reason - it's powerful, scalable, flexible... but can be confusing or intimidating, whether you're a newbie or you use it every day!

In this workshop, Katie Sylor-Miller, the creator of OhShitGit.com, and co-author of The Design Systems Handbook, will teach you all you need to know to use Git as a tool for managing your Design System code.

We'll walk through everything you need to know to create, contribute to, maintain, and share your design system code as a standalone repo in Git. We'll go over how the fundamental structures in Git and how it all works under the hood. We'll create our own repos and get comfortable running common git commands in the terminal. We'll learn about best practices, workflows, and tools that will keep your commits in order and reduce the panic caused by merge conflicts. And, we'll cover some cool features in the Github UI to help you document, manage, and share your Design System code.

Published in: Engineering
  • Login to see the comments

  • Be the first to like this

Design Systems + Git = Success - Clarity Conference 2018

  1. 1. Design Systems + Git = Success Katie Sylor-Miller Staff Engineer, Etsy Frontend Systems twitter: @ksylor
  2. 2. Agenda Intros Fundamental Concepts Data Structures Workflow in-depth Viewing and changing history Managing and sharing repos Problems, solutions, and tips
  3. 3. Agenda Intros Fundamental Concepts Data Structures Workflow in-depth Viewing and changing history Managing and sharing repos Problems, solutions, and tips
  4. 4. Your name Your preferred pronouns Where do you work? How comfortable are you with Git? What’s your favorite NYC experience so far? Intros
  5. 5. Agenda Intros Fundamental Concepts Data Structures Workflow in-depth Viewing and changing history Managing and Sharing repos Problems, solutions, and tips
  6. 6. What is Git? Why Git? Git vs. Github Exercise 1 Fundamental Concepts
  7. 7. What is Git?
  8. 8. Git is a Version Control System (VCS)
  9. 9. Provide a way to store the history of files: • when they changed • how they changed • who changed them • why they changed Version Control Systems
  10. 10. Versioning: the not awesome way my-file.psd my-file-v2.psd my-file-v3.psd my-file- FINAL.psd my-file-FINAL- FINAL-for-real- this-time.psd
  11. 11. Versioning: the awesome Git way my-file.psd v5 v4 v3 v2 v1
  12. 12. Repositories (repos) by Etsy seller IliaSCoolVintage
  13. 13. Repositories (repos) happy.scss pretty.scss app.js hi-world.js fun.js /css cool.svg /svg README.md v5 v4 v3 v2 v1 /Users/ksylor/my-git-repo
  14. 14. Git is a distributed Version Control System
  15. 15. Distributed Version Control • A “cloned” copy of the entire repository - including all files, metadata, and it’s full history - is mirrored on each user’s local host machine. • Usually (but not always!) there is a central/canonical copy of the repository stored in a remote git server called origin. • You can configure multiple remote repositories, even another repo on your machine can be a remote!
  16. 16. Distributed Version Control remote my local local local local local
  17. 17. ksylormiller:~$ 20 Copy a repository
  18. 18. ksylormiller:~$ git clone https://github.com/ksylor/ohshitgit.git Cloning into 'ohshitgit'... remote: Enumerating objects: 28, done. remote: Total 28 (delta 0), reused 0 (delta 0), pack-reused 28 Unpacking objects: 100% (28/28), done. ksylormiller:~$ 21 Copy a repository
  19. 19. Distributed Version Control remote origin my local local local local local
  20. 20. Distributed Version Control remote origin my local local local local local
  21. 21. Pushing to a remote remote origin my local local local local local
  22. 22. Pulling from a remote remote origin my local local local local local
  23. 23. Why use Git?
  24. 24. Benefits of Git • Historical context - view and compare different versions of files to understand what changed and why. • Safety net - if you make a mistake, you can easily revert back in time to a previous version of a file. • Collaboration - multiple people can work on the same files at the same time, then share their changes with each other. • Conflict resolution - Git can resolve conflicts that arise when multiple people make changes to the same file.
  25. 25. Benefits of Git for Design Systems • Sandboxing - you can work on changes locally, without affecting anyone else, until they are ready to be shared. • Versioned releases - you can control when you are ready to share code with other teams. • Quality control - pull requests allow core team members to review file changes before they end up in a release. • Documentation - the Github interface has simple documentation capabilities built-in.
  26. 26. Git vs. Github
  27. 27. Git A tool for distributed version control (the stuff you do in the command line) A company that hosts Git repos (with some extra features) (the stuff you do in the github.com website) Github
  28. 28. Cloning and Creating Repos https://github.com/ksylor/clarity-workshop-exercises/ tree/master/exercise-1 Exercise 1
  29. 29. Agenda Intros Fundamental Concepts Data Structures Workflow in-depth Viewing and changing history Managing and sharing repos Problems, solutions, and tips
  30. 30. Commits Branches HEAD History Exercise 2 Data Structures
  31. 31. Commits
  32. 32. What’s in a commit Each commit contains a few pieces of information: • A snapshot of the entire repo • Who made this change • When this change was made • A message describing the commit • A pointer to the previous commit
  33. 33. What’s in a commit SHA-1 Unique 40-char hash Each commit contains a few pieces of information: • A snapshot of the entire repo • Who made this change • When this change was made • A message describing the commit • A pointer to the previous commit
  34. 34. Commit hashes a4df41a8045877d50396d00113598e47f6ad10ef aec561108fd86412c2a9083d7d95ed1668d2f4e4 6dab6a712177cf2dd2cf8b79a2cee24351be60eb 1a3531222242241153ac8a76b752d5f525a99d2c 912bde5d4e5e962269ddff87da83cc5ce55e75d0v5 v4 v3 v2 v1
  35. 35. Commit hash abbreviations a4df41a aec5611 6dab6a7 1a35312 912bde5v5 v4 v3 v2 v1
  36. 36. Branches
  37. 37. by Etsy seller SwearsandStares
  38. 38. Mental model: branches are a linked list a4df41aaec56116dab6a71a35312 912bde5 A B C D E
  39. 39. Mental model: branches are a linked list a4df41aaec56116dab6a71a35312 912bde5 • A snapshot of the entire repo • Who made this change • When this change was made • A message describing the commit • A pointer to the previous commit A B C D E
  40. 40. Mental model: branches are a linked list a4df41aaec56116dab6a71a35312 912bde5 • A snapshot of the entire repo • Who made this change • When this change was made • A message describing the commit • A pointer to the previous commit A B C D E
  41. 41. Branches are a linked list reference A4DF41A6DAB6A7 a4df41aaec56116dab6a71a35312 912bde5 A B C D EA B C D E master
  42. 42. Branches are a linked list reference text file A4DF41A6DAB6A7 a4df41aaec56116dab6a71a35312 912bde5 master .git/refs/heads/master 912bde5d4e5e962269ddff87da83cc5ce55e75d0 A B C D E
  43. 43. ksylormiller:~/ohshitgit (master)$ git branch new-branch 46 Create a new branch
  44. 44. New branches are a new reference A4DF41A6DAB6A7 a4df41aaec56116dab6a71a35312 912bde5 master new-branch A B C D E
  45. 45. New branches are a new text file A4DF41A a4df41aaec56116dab6a71a35312 912bde5 master A B C D E .git/refs/heads/master 912bde5d4e5e962269ddff87da83cc5ce55e75d0 .git/refs/heads/new-branch 912bde5d4e5e962269ddff87da83cc5ce55e75d0 new-branch
  46. 46. HEAD
  47. 47. HEAD points to your currently checked-out branch HEAD a4df41aaec56116dab6a7 912bde5 master new-branch B C D E
  48. 48. HEAD is a reference to a reference HEAD A4DF41A6DAB6A7 a4df41aaec56116dab6a7 912bde5 master new-branch .git/refs/HEAD ref: refs/heads/master B C D E
  49. 49. WTF is the HEAD • The HEAD decides what branch/commit will be the target of your actions • There is only one HEAD per repository • The HEAD is unique to your local install of git • The history of the HEAD is recorded, which gives you a way to undo your work (more on this later)
  50. 50. ksylormiller:~/ohshitgit (master)$ git checkout new-branch 53 Change branches
  51. 51. HEAD points to your currently checked-out branch HEAD a4df41aaec56116dab6a7 912bde5 master new-branch .git/refs/HEAD ref: refs/heads/new-branch B C D E
  52. 52. ksylormiller:~/ohshitgit (master)$ git commit -m “Your message here” 55 Add a new commit to our branch
  53. 53. A new commit becomes the new HEAD 1668d2f HEAD a4df41aaec56116dab6a7 912bde5 master new-branch B C D E F
  54. 54. History
  55. 55. History is a linked list 1668d2fa4df41aaec56116dab6a7 912bde5 master new-branch B C D E F
  56. 56. History is a linked list tree master ca53f4f 1668d2f a4df41a 912bde5 new-branch 3de21fa C D E F G H
  57. 57. ca53f4f 1668d2f fd4ab1a 912bde5 3de21fa new-branch 86bcaed 2d3a4da whee 3037cf2 master 44ff212 4aa3b5f c1d2ea8 40648a8 5ae77a5 omg-stop fd4ab1a and-another History is a linked list tree directed acyclic graph f6e51fd E F G H I J K L M N O P Q R S
  58. 58. Fundamental concepts: recap • Commits are a unique snapshot of a repository at a single point in time • History is a linked list tree directed acyclic graph • Branches are a reference to a single commit in history • HEAD is a symbolic reference to your current working branch
  59. 59. Commits, Branches, Refs and HEAD https://github.com/ksylor/clarity-workshop-exercises/tree/ master/exercise-2 Exercise 2
  60. 60. Agenda Intros Fundamental Concepts Data Structures Workflow in-depth Viewing and changing history Managing and sharing repos Problems, solutions, and tips
  61. 61. Environments A simple workflow A complicated workflow Exercise 3 A real workflow Exercise 4 Workflows in depth
  62. 62. Git Environments
  63. 63. REMOTE/ORIGIN Your machineGithub LOCAL STAGING/INDEX WORKSPACE Central server where shared git repositories are stored -- Remotes typically are “bare” - you can’t directly modify them
  64. 64. REMOTE/ORIGIN Your machineGithub LOCAL STAGING/INDEX WORKSPACE
  65. 65. REMOTE/ORIGIN Your machineGithub LOCAL STAGING/INDEX WORKSPACE Your local copy of the remote git repository -- Lives in a .git folder inside your local copy folder -- Contains the entire history of a remote repo plus local changes
  66. 66. REMOTE/ORIGIN Your machineGithub LOCAL STAGING/INDEX WORKSPACE Snapshot of changes to the current branch that you want to commit -- Is a copy of all of the files in the repo, not just the changed files
  67. 67. REMOTE/ORIGIN Your machineGithub LOCAL STAGING/INDEX WORKSPACE Where changes to files are made -- Analogous to the physical directory where files are stored on disk
  68. 68. A simple workflow
  69. 69. REMOTE/ORIGIN Your machineGithub LOCAL STAGING/INDEX WORKSPACE MASTER
  70. 70. ksylormiller:~$ git clone https://github.com/ohshitgit/example.git Cloning into 'fluent-example'... remote: Counting objects: 12, done. remote: Compressing objects: 100% (9/9), done. remote: Total 12 (delta 2), reused 7 (delta 0), pack-reused 0 Unpacking objects: 100% (12/12), done. Checking connectivity... done. 73 git clone
  71. 71. REMOTE/ORIGIN Your machineGithub LOCAL STAGING/INDEX WORKSPACE MASTER MASTER baz.php foo.php bar.php baz.php foo.php bar.php HEAD
  72. 72. REMOTE/ORIGIN Your machineGithub LOCAL STAGING/INDEX WORKSPACE MASTER MASTER baz.php foo.php bar.php baz.php foo.php bar.php
  73. 73. git status is your BFF by Etsy seller SmittenKittenKendall
  74. 74. ksylormiller:~/ohshitgit (master)$ git status On branch master Your branch is up-to-date with ‘origin/master'. Changes not staged for commit: (use "git add <file>..." to update what will be committed) (use "git checkout -- <file>..." to discard changes in working directory) modified: bar.php no changes added to commit (use "git add" and/or "git commit -a”) 77 git status is your BFF
  75. 75. git status and git diff are your BFFs by Etsy seller SmittenKittenKendall
  76. 76. ksylormiller:~/ohshitgit (master)$ git diff diff --git a/bar.php b/bar.php index f81fce0..bdd3cb3 100644 --- a/bar.php +++ b/bar.php @@ -1 +1,4 @@ this is a file -with nothing in it +with some stuff in it 79 git diff is your other BFF
  77. 77. REMOTE/ORIGIN Your machineGithub LOCAL STAGING/INDEX WORKSPACE git diff compares changes
 in workspace to changes
 (if any) in index git diff --staged compares changes
 in index to HEAD
 (e.g. current state
 of your checked-out
 branch) git diff HEAD compares changes
 in both index and
 workspace to HEAD
  78. 78. ksylormiller:~/ohshitgit (master)$ git add bar.php 81 git add
  79. 79. REMOTE/ORIGIN Your machineGithub LOCAL STAGING/INDEX WORKSPACE MASTER MASTER baz.php foo.php bar.php baz.php foo.php bar.php
  80. 80. ksylormiller:~/ohshitgit (master)$ git status On branch master Changes to be committed: (use "git reset HEAD <file>..." to unstage) modified: bar.php 83 git status (again)
  81. 81. REMOTE/ORIGIN Your machineGithub LOCAL STAGING/INDEX WORKSPACE MASTER MASTER baz.php foo.php bar.php baz.php foo.php bar.php
  82. 82. ksylormiller:~/ohshitgit (master)$ git status On branch master Changes to be committed: (use "git reset HEAD <file>..." to unstage) modified: bar.php Changes not staged for commit: (use "git add <file>..." to update what will be committed) (use "git checkout -- <file>..." to discard changes in working directory) modified: bar.php 85 git status (I told you it was our BFF)
  83. 83. ksylormiller:~/ohshitgit (master)$ git commit -m "Meaningful commit message" [master 4875652] Meaningful commit message 1 file changed, 1 insertion(+) 86 git commit
  84. 84. REMOTE/ORIGIN Your machineGithub LOCAL STAGING/INDEX WORKSPACE MASTER MASTER baz.php foo.php bar.php
  85. 85. ksylormiller:~/ohshitgit (master)$ git push Counting objects: 4, done. Delta compression using up to 8 threads. Compressing objects: 100% (2/2), done. Writing objects: 100% (3/3), 328 bytes | 0 bytes/s, done. Total 3 (delta 0), reused 0 (delta 0) To https://github.com/ksylor/fluent-example.git 4875652..97e8858 master -> master 88 git push
  86. 86. REMOTE/ORIGIN Your machineGithub LOCAL STAGING/INDEX WORKSPACE MASTER MASTER
  87. 87. REMOTE/ORIGIN Your machineGithub LOCAL STAGING/INDEX WORKSPACE MASTER MASTER
  88. 88. But… it’s almost never that simple
  89. 89. A complicated workflow
  90. 90. REMOTE/ORIGIN Your machineGithub LOCAL STAGING/INDEX WORKSPACE MASTER MASTER
  91. 91. REMOTE/ORIGIN Your machineGithub LOCAL STAGING/INDEX WORKSPACE MASTER ORIGIN/ MASTER MASTER
  92. 92. ksylormiller:~/ohshitgit (master)$ git fetch remote: Counting objects: 3, done. remote: Compressing objects: 100% (3/3), done. remote: Total 3 (delta 1), reused 0 (delta 0), pack-reused 0 Unpacking objects: 100% (3/3), done. From https://github.com/ksylor/fluent-example 97e8858..8a97966 master -> origin/master 95 git fetch
  93. 93. REMOTE/ORIGIN Your machineGithub LOCAL STAGING/INDEX WORKSPACE MASTER ORIGIN/ MASTER MASTER
  94. 94. ksylormiller:~/ohshitgit (master)$ git merge origin/master 97 git merge
  95. 95. Merge remote-tracking branch 'origin/master' # Please enter a commit message to explain why this merge is necessary, # especially if it merges an updated upstream into a topic branch. # # Lines starting with '#' will be ignored, and an empty message aborts # the commit. ~ ~ ~ ~ "~/ohshitgit/.git/MERGE_MSG" 7L, 293C 98 oh god we’re in vim
  96. 96. ksylormiller:~/ohshitgit (master)$ git merge origin/master Updating 97e8858..8a97966 Fast-forward README.md | 2 ++ 1 file changed, 2 insertions(+) create mode 100644 README.md 99 git merge complete
  97. 97. REMOTE/ORIGIN Your machineGithub LOCAL STAGING/INDEX WORKSPACE MASTER ORIGIN/ MASTER MASTER
  98. 98. ksylormiller:~/ohshitgit (master)$ git pull Merge made by the 'recursive' strategy. README.md | 2 ++ 1 file changed, 2 insertions(+) create mode 100644 README.md 101 git pull == git fetch && git merge
  99. 99. REMOTE/ORIGIN Your machineGithub LOCAL STAGING/INDEX WORKSPACE MASTER ORIGIN/ MASTER MASTER
  100. 100. ksylormiller:~/ohshitgit (master)$ git push Counting objects: 8, done. Delta compression using up to 8 threads. Compressing objects: 100% (4/4), done. Writing objects: 100% (5/5), 537 bytes | 0 bytes/s, done. Total 5 (delta 2), reused 0 (delta 0) remote: Resolving deltas: 100% (2/2), completed with 1 local object. To https://github.com/ksylor/fluent-example.git 8a97966..91f6790 master -> master 103 git push
  101. 101. REMOTE/ORIGIN Your machineGithub LOCAL STAGING/INDEX WORKSPACE ORIGIN/ MASTER MASTERMASTER
  102. 102. Rebase all the things!
  103. 103. REMOTE/ORIGIN Your machineGithub LOCAL STAGING/INDEX WORKSPACE MASTER ORIGIN/ MASTER MASTER
  104. 104. ksylormiller:~/ohshitgit (master)$ git rebase origin/master First, rewinding head to replay your work on top of it... Applying: Meaningful commit message 107 git rebase
  105. 105. REMOTE/ORIGIN Your machineGithub LOCAL STAGING/INDEX WORKSPACE MASTER ORIGIN/ MASTER MASTER
  106. 106. REMOTE/ORIGIN Your machineGithub LOCAL STAGING/INDEX WORKSPACE MASTER ORIGIN/ MASTER MASTER
  107. 107. ksylormiller:~/ohshitgit (master)$ git pull --rebase First, rewinding head to replay your work on top of it... Applying: Meaningful commit message 110 git pull --rebase == git fetch && git rebase
  108. 108. REMOTE/ORIGIN Your machineGithub LOCAL STAGING/INDEX WORKSPACE MASTER ORIGIN/ MASTER MASTER
  109. 109. ksylormiller:~/ohshitgit (master)$ git push Counting objects: 5, done. Delta compression using up to 8 threads. Compressing objects: 100% (3/3), done. Writing objects: 100% (3/3), 331 bytes | 0 bytes/s, done. Total 3 (delta 1), reused 0 (delta 0) remote: Resolving deltas: 100% (1/1), completed with 1 local object. To https://github.com/ksylor/fluent-example.git f6e51fd..3c2335c master -> master 112 git push
  110. 110. REMOTE/ORIGIN Your machineGithub LOCAL STAGING/INDEX WORKSPACE MASTER ORIGIN/ MASTER MASTER
  111. 111. REMOTE/ORIGIN Your machineGithub LOCAL STAGING/INDEX WORKSPACE MASTER ORIGIN/ MASTER MASTER
  112. 112. I solemnly swear never to run git pull
  113. 113. Workflows in depth: recap • We interact with git repos via remote (bare) servers, and on your machine w/ it’s local copy, workspace, and staging area • git add takes a snapshot of a changed file in it’s current state & adds it to staging • git status and git diff your BFFs • We interact with the remote via tracking branches, another kind of reference
  114. 114. Workflows in depth: recap • git pull = git fetch && git merge 
 creates a new merge commit (gross! vim! no!) • git pull --rebase = git fetch && git rebase replays your work at the tip of master (beautiful! yes!)
  115. 115. Workflow https://github.com/ksylor/clarity-workshop-exercises/ tree/master/exercise-3 Exercise 3
  116. 116. A real workflow
  117. 117. REMOTE/ORIGIN Your machineGithub LOCAL STAGING/INDEX WORKSPACE MASTER MASTER baz.php foo.php bar.php baz.php foo.php bar.php HEAD
  118. 118. ksylormiller:~/ohshitgit (master)$ git checkout -b feature-branch 121 Create & checkout a branch
  119. 119. REMOTE/ORIGIN Your machineGithub LOCAL STAGING/INDEX WORKSPACE MASTER baz.php foo.php bar.php baz.php foo.php bar.php HEAD FEATURE -BRANCH MASTER
  120. 120. REMOTE/ORIGIN Your machineGithub LOCAL STAGING/INDEX WORKSPACE MASTER baz.php foo.php bar.php FEATURE -BRANCH MASTER baz.php foo.php bar.php
  121. 121. ksylormiller:~/ohshitgit (feature-branch)$ git add bar.php 124 git add
  122. 122. REMOTE/ORIGIN Your machineGithub LOCAL STAGING/INDEX WORKSPACE MASTER baz.php foo.php FEATURE -BRANCH MASTER baz.php foo.php bar.phpbar.php
  123. 123. ksylormiller:~/ohshitgit (feature-branch)$ git status On branch feature-branch Changes not staged for commit: (use "git add <file>..." to update what will be committed) (use "git checkout -- <file>..." to discard changes in working directory) modified: bar.php no changes added to commit (use "git add" and/or "git commit -a”) 126 git status
  124. 124. ksylormiller:~/ohshitgit (feature-branch)$ git diff diff --git a/bar.php b/bar.php index f81fce0..bdd3cb3 100644 --- a/bar.php +++ b/bar.php @@ -1 +1,4 @@ this is a file -with nothing in it +with some stuff in it 127 git diff
  125. 125. ksylormiller:~/ohshitgit (feature-branch)$ git commit -m "Meaningful commit message" [feature-branch 4875652] Meaningful commit message 1 file changed, 1 insertion(+) 128 git commit
  126. 126. REMOTE/ORIGIN Your machineGithub LOCAL STAGING/INDEX WORKSPACE FEATURE- BRANCH MASTER baz.php foo.php bar.php baz.php foo.php bar.php MASTER
  127. 127. REMOTE/ORIGIN Your machineGithub LOCAL STAGING/INDEX WORKSPACE MASTER baz.php foo.php bar.php baz.php foo.php bar.php MASTER FEATURE- BRANCH
  128. 128. ksylormiller:~/ohshitgit (feature-branch)$ git push -u Counting objects: 9, done. Delta compression using up to 8 threads. Compressing objects: 100% (7/7), done. Writing objects: 100% (9/9), 820 bytes | 820.00 KiB/s, done. Total 9 (delta 1), reused 0 (delta 0) remote: Resolving deltas: 100% (1/1), done. remote: remote: Create a pull request for 'feature-branch' on GitHub by visiting: remote: https://github.com/ksylor/clarity-workshop-example/pull/new/feature-branch remote: To https://github.com/ksylor/clarity-workshop-example.git * [new branch] feature-branch -> feature-branch Branch feature-branch set up to track remote branch feature-branch from origin. 131 push a new branch
  129. 129. REMOTE/ORIGIN Your machineGithub LOCAL STAGING/INDEX WORKSPACE MASTER baz.php foo.php bar.php baz.php foo.php bar.php MASTER FEATURE- BRANCH FEATURE- BRANCH ORIGIN/ FEATURE- BRANCH
  130. 130. by Etsy seller ninjagrl Pull requests (PRs)
  131. 131. Pull Requests (PRs) • An additional feature on top of core Git functionality. • PRs do a diff comparison between two branches - usually comparing a feature branch to the current state of master. • Allows teammates to review code, ask questions, find possible bugs before code hits production. • Provides a nice visual way to confirm that the code in your branch contains only the changes that you want!
  132. 132. Reviewing a PR by Etsy seller SimplyPerfectDesignL
  133. 133. Merging a PR by Etsy seller InkinPark
  134. 134. REMOTE/ORIGIN Your machineGithub LOCAL STAGING/INDEX WORKSPACE MASTER FEATURE- BRANCH
  135. 135. merge commit
  136. 136. REMOTE/ORIGIN Your machineGithub LOCAL STAGING/INDEX WORKSPACE MASTER
  137. 137. rebase merge
  138. 138. REMOTE/ORIGIN Your machineGithub LOCAL STAGING/INDEX WORKSPACE MASTER FEATURE- BRANCH
  139. 139. REMOTE/ORIGIN Your machineGithub LOCAL STAGING/INDEX WORKSPACE MASTER FEATURE- BRANCH
  140. 140. REMOTE/ORIGIN Your machineGithub LOCAL STAGING/INDEX WORKSPACE MASTER
  141. 141. squash merge
  142. 142. REMOTE/ORIGIN Your machineGithub LOCAL STAGING/INDEX WORKSPACE MASTER FEATURE- BRANCH
  143. 143. REMOTE/ORIGIN Your machineGithub LOCAL STAGING/INDEX WORKSPACE MASTER
  144. 144. ksylormiller:~/ohshitgit (feature-branch)$ git fetch remote: Counting objects: 3, done. remote: Compressing objects: 100% (3/3), done. remote: Total 3 (delta 1), reused 0 (delta 0), pack-reused 0 Unpacking objects: 100% (3/3), done. From https://github.com/ksylor/fluent-example 97e8858..8a97966 master -> origin/master ksylormiller:~/ohshitgit (master)$ 162 git fetch
  145. 145. ksylormiller:~/ohshitgit (feature-branch)$ git checkout master On branch master Your branch is behind 'origin/master' by 2 commits, and can be fast- forwarded. (use "git pull" to update your local branch) nothing to commit, working tree clean ksylormiller:~/ohshitgit (master)$ 163 checkout master
  146. 146. ksylormiller:~/ohshitgit (master)$ git pull --rebase Updating 74877c3..2ea524f Fast-forward fun.txt | 2 ++ 1 file changed, 2 insertions(+) Current branch master is up to date. ksylormiller:~/ohshitgit (master)$ 164 update master
  147. 147. ksylormiller:~/ohshitgit (master)$ git merge --squash feature-branch Squash commit -- not updating HEAD Automatic merge went well; stopped before committing as requested 165 Squash merging
  148. 148. REMOTE/ORIGIN Your machineGithub LOCAL STAGING/INDEX WORKSPACE MASTER ORIGIN/ MASTER FEATURE- BRANCH baz.php foo.php bar.php MASTER
  149. 149. ksylormiller:~/ohshitgit (master)$ git commit -m “Merge feature-branch” [master 4875652] Merge feature branch 1 file changed, 1 insertion(+) 167 git commit
  150. 150. REMOTE/ORIGIN Your machineGithub LOCAL STAGING/INDEX WORKSPACE MASTER ORIGIN/ MASTER baz.php foo.php bar.php MASTER
  151. 151. REMOTE/ORIGIN Your machineGithub LOCAL STAGING/INDEX WORKSPACE MASTER ORIGIN/ MASTER MASTER
  152. 152. ksylormiller:~/ohshitgit (master)$ git push Counting objects: 8, done. Delta compression using up to 8 threads. Compressing objects: 100% (4/4), done. Writing objects: 100% (5/5), 537 bytes | 0 bytes/s, done. Total 5 (delta 2), reused 0 (delta 0) remote: Resolving deltas: 100% (2/2), completed with 1 local object. To https://github.com/ksylor/fluent-example.git 8a97966..91f6790 master -> master 170 git push
  153. 153. REMOTE/ORIGIN Your machineGithub LOCAL STAGING/INDEX WORKSPACE MASTER ORIGIN/ MASTER MASTER
  154. 154. by Etsy seller JulieYegen
  155. 155. Feature branches and Pull Requests https://github.com/ksylor/clarity-workshop-exercises/tree/ master/exercise-4 Exercise 4
  156. 156. Agenda Intros Fundamental Concepts Data Structures Workflow in-depth Viewing and changing history Managing and sharing repos Problems, solutions, and tips
  157. 157. Viewing history Changing history Exercise 5 Viewing and changing history
  158. 158. Viewing history
  159. 159. View the history of a branch 1668d2f HEAD a4df41aaec56116dab6a7 912bde5 master B C D E F
  160. 160. ksylormiller:~/ohshitgit (master)$ git log commit 3c2335c50a1ad48a283a475e3d3f9ac445a20ff5 Author: Katie Sylor-Miller <katie@ohshitgit.com> Date: Thu Jun 8 23:42:05 2017 -0400 Another awesome commit A detailed message about this commit goes here commit f6e51fdd6650c7bbc39895c0392ec6a9fb5a9c15 Author: Someone else <someone@ohshitgit.com> Date: Thu Jun 8 23:39:36 2017 -0400 Oh hai this is a change commit 4f9a80ff7732f252ffbe7841e96748707da1a78d 178 git log
  161. 161. ksylormiller:~/ohshitgit (master)$ git log --oneline 3c2335c Another awesome commit f6e51fd Oh hai this is a change 91f6790 Meaningful commit message 4f9a80f Fake commit messages are hard 8a97966 Is anyone actually reading this? 97e8858 Lolz 4875652 Hello world 179 Short history
  162. 162. by Etsy seller Birdwoodshack git reflog is your magic time machine
  163. 163. ksylormiller:~/ohshitgit (master)$ git reflog 3c2335c HEAD@{0}: rebase finished: returning to refs/heads/master 3c2335c HEAD@{1}: pull --rebase: lolz f6e51fd HEAD@{2}: pull --rebase: checkout f6e51fdd6650c7bbc39895c0392ec6a9fb5a9c15 f4f4d99 HEAD@{3}: reset: moving to HEAD@{4} f6e51fd HEAD@{4}: reset: moving to HEAD~ 1ecad3a HEAD@{5}: rebase finished: returning to refs/heads/master 1ecad3a HEAD@{6}: rebase: lolz f6e51fd HEAD@{7}: rebase: checkout origin/master f4f4d99 HEAD@{8}: commit: lolz 4f9a80f HEAD@{9}: commit: Another awesome commit 4875652 HEAD@{10}: commit: Meaningful commit message 181 git reflog
  164. 164. HEAD notation • HEAD@{index} : go to a specific point • HEAD~ == HEAD@{currentindex+1} : back one action • HEAD~x == HEAD@{currentindex+x} : back x actions • Or, you can always reference by hash
  165. 165. ksylormiller:~/ohshitgit (master)$ git show HEAD@{8} commit f4f4d996d44bbf824cdd22ace9e6d154d27c9a5d Author: Katie Sylor-Miller <katie@ohshitgit.com> Date: Thu Jun 8 23:42:05 2017 -0400 lolz diff --git a/bar.php b/bar.php index f81fce0..bdd3cb3 100644 --- a/bar.php +++ b/bar.php @@ -1 +1,4 @@ this is a file -with nothing +with some lolz 183 git show
  166. 166. ksylormiller:~/ohshitgit (master)$ git checkout HEAD@{8} Note: checking out 'HEAD@{8}'. You are in 'detached HEAD' state. You can look around, make experimental changes and commit them, and you can discard any commits you make in this state without impacting any branches by performing another checkout. If you want to create a new branch to retain commits you create, you may do so (now or later) by using -b with the checkout command again. Example: git checkout -b new_branch_name HEAD is now at a4df41a... Merge remote-tracking branch 'origin/master' ksylormiller:~/ohshitgit (master) ((detached from a4df41a))$ 184 git checkout
  167. 167. A detached HEAD is when your HEAD points directly to a commit or a tracking branch (not an editable branch) WTF is a detached HEAD?
  168. 168. post-checkout detached HEAD 1668d2f HEAD a4df41aaec56116dab6a7 912bde5 master B C D E F
  169. 169. • Checking out an existing branch - throws away any work you might have done • Create a new branch from this state - allows you to save any work, or create a branch from any point in time Re-attaching the HEAD
  170. 170. Checkout all the things Checkout can be used to move the HEAD OR checkout can also change the state of a file in the workspace (w/o moving HEAD) • Discard workspace changes to a file or directory
 git checkout -- path/to/file/or/dir/ • Reset file or dir to state in history (then commit to save!)
 git checkout <commit hash> —-path/to/file/or/dir/ • Get state of a file or dir from another branch (then commit)
 git checkout other-branch --path/to/file/or/dir/
  171. 171. Changing history
  172. 172. Changing history of a branch 1668d2f HEAD a4df41aaec56116dab6a7 master B C D E F 912bde5
  173. 173. git reset brings you back to a previous state in history, undoing everything that changed between now and then Hit the reset button
  174. 174. ksylormiller:~/ohshitgit (master)$ git reflog 1668d2f HEAD@{0}: rebase finished: returning to refs/heads/master 3c2335c HEAD@{1}: pull --rebase: lolz 912bde5 HEAD@{2}: pull --rebase: checkout f6e51fdd6650c7bbc39895c0392ec6a9fb5a9c15 f4f4d99 HEAD@{3}: commit: lolz 192 git reflog
  175. 175. ksylormiller:~/ohshitgit (master)$ git reset HEAD@{3} Unstaged changes after reset: M foo.php 193 git reset
  176. 176. Three basic types of resetting Discards the changes from the affected commits Leaves the changes from the affected commits in the workspace (default) --hard--mixed--soft Leaves the changes from the affected commits in staging
  177. 177. Post-reset 1668d2f HEAD a4df41aaec56116dab6a7 master Changes move to the index or workspace or discarded 912bde5 B C D E F
  178. 178. Disclaimer: never change public history
  179. 179. git revert creates a new commit that undoes the changes in the specified commit(s) Undo a public commit
  180. 180. ksylormiller:~/ohshitgit (master)$ git revert f4f4d99 198 git revert
  181. 181. Revert "lolz" This reverts commit f4f4d996d44bbf824cdd22ace9e6d154d27c9a5d. # Please enter the commit message for your changes. Lines starting # with '#' will be ignored, and an empty message aborts the commit. # On branch master # Your branch is ahead of 'origin/master' by 3 commits. # (use "git push" to publish your local commits) # # Changes to be committed: # modified: bar.php # ~ "~/ohshitgit/.git/COMMIT_EDITMSG" 14L, 450C 199 ugh, vim again
  182. 182. ksylormiller:~/ohshitgit (master)$ git revert f4f4d996d44bbf824cdd22ace9e6d154d27c9a5d [master b483271] Revert "lolz" 1 file changed, 3 deletions(-) 200 git revert complete
  183. 183. Post-revert 1668d2f HEAD a4df41aaec5611 b75fb8b912bde5 master reverts changes from C D E F G
  184. 184. Viewing and changing history: recap • git log shows the history of your branch • git reflog shows the history of the HEAD aka the magic time machine • git checkout lets you view a previous state of the repo in a read-only “detached HEAD” state • git reset lets you go back in time and change things • git revert creates a new commit to undo changes
  185. 185. Viewing and Changing History https://github.com/ksylor/clarity-workshop-exercises/tree/ master/exercise-5 Exercise 5
  186. 186. Agenda Intros Fundamental Concepts Data Structures Workflow in-depth Viewing and changing history Managing and sharing repos Problems, solutions, and tips
  187. 187. Versioning npm Packages Releases Documentation Issues Managing and sharing repos
  188. 188. Versioning
  189. 189. Why version your design system? • You won’t get it perfect the first time, so you need to plan for how to handle changes to your code. • With versioning, you make controlled releases of changes to your code, and consuming teams can chose which version they use, and when and how to upgrade (or not!). • Versions allow you to release breaking changes, e.g. a change that will break existing uses of a pattern, without disrupting existing users.
  190. 190. Semver (Semantic Versioning) 0.1.0 Major Release Changes are not
 backwards- compatible with prior versions More info at semver.org Minor Release New functionality
 is backwards-
 compatible with 
 prior versions Patch Release Only contains
 bug fixes, which
 are backwards-
 compatible
  191. 191. Semver (Semantic Versioning) 0.1.0-alpha More info at semver.org Optional Pre-Release Version Indicates that this
 version is unstable or
 might change before
 the “real” release
  192. 192. npm packages
  193. 193. ksylormiller:~/ohshitgit (master)$ npm init This utility will walk you through creating a package.json file. It only covers the most common items, and tries to guess sensible defaults. See `npm help json` for definitive documentation on these fields and exactly what they do. Use `npm install <pkg>` afterwards to install a package and save it as a dependency in the package.json file. Press ^C at any time to quit. 211 npm init
  194. 194. package name: (clarity-workshop-example) version: (1.0.0) 0.1.0 description: An example npm package for clarity workshop entry point: (index.js) test command: git repository: (https://github.com/ksylor/clarity-workshop-example.git) keywords: author: Katie Sylor-Miller license: (ISC) About to write to /Users/ksylormiller/clarity-workshop-example/package.json: 212 npm init (cont)
  195. 195. { "name": "clarity-workshop-example", "version": "0.1.0", "description": "An example npm package for clarity workshop", "main": "index.js", "scripts": { "test": "echo "Error: no test specified" && exit 1" }, "repository": { "type": "git", "url": "git+https://github.com/ksylor/clarity-workshop-example.git" }, "author": "Katie Sylor-Miller", "license": "ISC", "bugs": { "url": "https://github.com/ksylor/clarity-workshop-example/issues" }, "homepage": "https://github.com/ksylor/clarity-workshop-example#readme" } Is this OK? (yes) yes 213 npm init (cont)
  196. 196. ksylormiller:~/ohshitgit (master)$ git status On branch master Your branch is up-to-date with 'origin/master'. Untracked files: (use "git add <file>..." to include in what will be committed) package.json nothing added to commit but untracked files present (use "git add" to track) 214 package.json
  197. 197. ksylormiller:~/ohshitgit (master)$ git add . && commit -m “add package.json” [master 995198f] add package.json 1 file changed, 19 insertions(+) create mode 100644 package.json ksylormiller:~/ohshitgit (master)$ git push Counting objects: 3, done. Delta compression using up to 8 threads. Compressing objects: 100% (3/3), done. Writing objects: 100% (3/3), 554 bytes | 554.00 KiB/s, done. Total 3 (delta 1), reused 0 (delta 0) remote: Resolving deltas: 100% (1/1), completed with 1 local object. To https://github.com/ksylor/clarity-workshop-example.git 2ea524f..995198f master -> master 215
  198. 198. Releases
  199. 199. ksylormiller:~/someotherproject (master)$ npm install --save-dev https:// github.com/ksylor/clarity-workshop-example/archive/v0.1.1.tar.gz npm notice created a lockfile as package-lock.json. You should commit this file. + clarity-workshop-example@0.1.0 added 1 package from 1 contributor and audited 1 package in 1.325s found 0 vulnerabilities 221 add your package as a dependency to another project
  200. 200. Documentation
  201. 201. Issues
  202. 202. Versions and releases https://github.com/ksylor/clarity-workshop-exercises/tree/ master/exercise-6 Exercise 6
  203. 203. Agenda Intros Fundamental Concepts Data Structures Workflow in-depth Viewing and changing history Managing and sharing repos Problems, solutions, and tips
  204. 204. Always Be Committing
  205. 205. Problem: Committing the wrong thing
  206. 206. • Set up your command line to show you what branch you are on • Remember git status and git diff your BFFs • Understand how staging works (subsequent changes to a file are not reflected • Use a feature branch so you don’t accidentally commit to master! Avoid the problem: Committing the wrong thing
  207. 207. --amend
  208. 208. ksylormiller:~/ohshitgit (master)$ git commit --amend 237 Fix the problem: Entering the wrong commit message
  209. 209. 238 vim again :( My wrong commit message # Please enter the commit message for your changes. Lines starting # with '#' will be ignored, and an empty message aborts the commit. # On branch master # Your branch is ahead of 'origin/master' by 3 commits. # (use "git push" to publish your local commits) # # Changes to be committed: # modified: bar.php # ~ "~/ohshitgit/.git/COMMIT_EDITMSG" 14L, 450C
  210. 210. 239 vim again :( My right commit message # Please enter the commit message for your changes. Lines starting # with '#' will be ignored, and an empty message aborts the commit. # On branch master # Your branch is ahead of 'origin/master' by 3 commits. # (use "git push" to publish your local commits) # # Changes to be committed: # modified: bar.php # ~ "~/ohshitgit/.git/COMMIT_EDITMSG" 14L, 450C
  211. 211. ksylormiller:~/ohshitgit (master)$ git commit --amend [master f0c2e62] My correct commit message 1 file changed, 3 deletions(-) 240 Fix the problem: Entering the wrong commit message
  212. 212. ksylormiller:~/ohshitgit (master)$ git add file/i/forgot/to/commit.ext ksylormiller:~/ohshitgit (master)$ git commit --amend —no-edit [master 014035a] My commit message 1 file changed, 1 insertion(+), 3 deletions(-) 241 Fix the problem: Forgetting to commit a file, or just one small change
  213. 213. Always Be Branching
  214. 214. Problem: Committing to the wrong branch
  215. 215. stash
  216. 216. Your machine LOCAL STAGING/INDEX WORKSPACE MASTER baz.php foo.php bar.php baz.php foo.php bar.php STASH
  217. 217. Your machine LOCAL STAGING/INDEX WORKSPACE MASTER baz.php foo.php bar.php baz.php foo.php bar.php STASH
  218. 218. Your machine LOCAL STAGING/INDEX WORKSPACE MASTER baz.php foo.php bar.php baz.php foo.php bar.php STASH YOUR CHANGES HEAD COMMIT
  219. 219. Your machine LOCAL STAGING/INDEX WORKSPACE MASTER baz.php foo.php bar.php baz.php foo.php bar.php STASH
  220. 220. ksylormiller:~/ohshitgit (master)$ git stash Saved working directory and index state WIP on master: 3c2335c lolz 249 add to the stash
  221. 221. Your machine LOCAL STAGING/INDEX WORKSPACE MASTER baz.php foo.php bar.php baz.php foo.php bar.php STASH
  222. 222. Your machine LOCAL STAGING/INDEX WORKSPACE MASTER baz.php foo.php bar.php baz.php foo.php bar.php STASH
  223. 223. ksylormiller:~/ohshitgit (master)$ git stash list stash@{0}: WIP on master: 3c2335c lolz stash@{1}: WIP on feature-branch: a682e3a my feature rocks stash@{2}: WIP on master: f6e51fd oh hai stash@{3}: WIP on master: 6d4cf2d something else 252 git stash list
  224. 224. ksylormiller:~/ohshitgit (master)$ git stash save “started on ticket OSG-42” Saved working directory and index state WIP on master: 3c2335c lolz 253 git stash save a better message
  225. 225. ksylormiller:~/ohshitgit (master)$ git stash list stash@{0}: WIP on master: started on ticket OSG-42 stash@{1}: WIP on feature-branch: a682e3a my feature rocks stash@{2}: WIP on master: f6e51fd oh hai stash@{3}: WIP on master: 6d4cf2d something else 254 git stash list again
  226. 226. ksylormiller:~/ohshitgit (master)$ git stash show -p diff --git a/bar.php b/bar.php index ebc0bc8..a44188c 100644 --- a/bar.php +++ b/bar.php @@ -1,4 +1,8 @@ +aaaaaaa +fdfjdklfjdsalf;j fdafsdfas fdafdsfdas fdfadasfdas this is a file 255 viewing a stash entry
  227. 227. ksylormiller:~/ohshitgit (master)$ git stash pop On branch feature-branch Changes not staged for commit: (use "git add <file>..." to update what will be committed) (use "git checkout -- <file>..." to discard changes in working directory) modified: bar.php ksylormiller:~/ohshitgit (master)$ git stash apply 256 pop changes back off the stack
  228. 228. Your machine LOCAL STAGING/INDEX WORKSPACE MASTER baz.php foo.php bar.php baz.php foo.php bar.php STASH
  229. 229. Stash tips and tricks • git stash --keep-index - leaves the index intact after stashing changes. • git stash --patch - opens interactive mode for deciding what chunks of what files to stash. • git stash —include-untracked - save untracked files (w/o this flag untracked files are only included if they are in the index)
  230. 230. ksylormiller:~/ohshitgit (master)$ git reset HEAD~ —soft ksylormiller:~/ohshitgit (master)$ git stash Saved working directory and index state WIP on master: 3c2335c lolz ksylormiller:~/ohshitgit (master)$ git checkout feature-branch Switched to branch ‘feature-branch’ 259 Option 1: Fix committing to the wrong branch
  231. 231. ksylormiller:~/ohshitgit (feature-branch)$ git stash pop On branch feature-branch Changes not staged for commit: (use "git add <file>..." to update what will be committed) (use "git checkout -- <file>..." to discard changes in working directory) modified: baz.php modified: foo.php no changes added to commit (use "git add" and/or "git commit -a") Dropped refs/stash@{0} (3c0529b7e598984b78647f391eab1ca6fd7897a0) ksylormiller:~/ohshitgit (feature-branch)$ git commit -am “on the right branch now” 260 Option 1: Fix committing to the wrong branch
  232. 232. cherry-pick
  233. 233. REMOTE/ORIGIN Your machineGithub LOCAL STAGING/INDEX WORKSPACE MASTER FEATURE- BRANCH MASTER COMMIT ON THE WRONG BRANCH :(
  234. 234. ksylormiller:~/ohshitgit (master)$ git log // get the hash for your commit ksylormiller:~/ohshitgit (master)$ git checkout feature-branch ksylormiller:~/ohshitgit (feature-branch)$ git cherry-pick 3c2335c [feature-branch 16759ae] lolz Date: Thu Jun 8 23:42:05 2017 -0400 1 file changed, 3 insertions(+) 263 Option 2: Fix committing to the wrong branch
  235. 235. REMOTE/ORIGIN Your machineGithub LOCAL STAGING/INDEX WORKSPACE MASTER MASTER 16759ae 3c2335c FEATURE- BRANCH
  236. 236. ksylormiller:~/ohshitgit (feature-branch)$ git checkout master ksylormiller:~/ohshitgit (master)$ git reset --hard HEAD~ HEAD is now at fcebc22 my prior commit message ksylormiller:~/ohshitgit (master)$ git status On branch master Your branch is up-to-date with 'origin/master'. nothing to commit, working tree clean 265 Option 2: Fix committing to the wrong branch
  237. 237. Stay up to date
  238. 238. Problem: Rebasing kinda sucks
  239. 239. interactive rebase
  240. 240. ksylormiller:~/ohshitgit (feature-branch)$ git rebase -i HEAD~2 269 Avoid the problem: Combine commits before rebasing
  241. 241. REMOTE/ORIGIN Your machineGithub LOCAL STAGING/INDEX WORKSPACE MASTER ORIGIN/ MASTER FEATURE- BRANCH MASTER
  242. 242. pick 2f5bae4 example feature branch pick 0ee2a20 Another commit # Rebase aaff258..0ee2a20 onto aaff258 # # Commands: # p, pick = use commit # r, reword = use commit, but edit the commit message # e, edit = use commit, but stop for amending # s, squash = use commit, but meld into previous commit # f, fixup = like "squash", but discard this commit's log message # x, exec = run command (the rest of the line) using shell ~ "~/ohshitgit/.git/rebase-merge/git-rebase-todo" 20L, 670C 271 Interactive rebase
  243. 243. pick 2f5bae4 example feature branch fixup 0ee2a20 Another commit # Rebase aaff258..0ee2a20 onto aaff258 # # Commands: # p, pick = use commit # r, reword = use commit, but edit the commit message # e, edit = use commit, but stop for amending # s, squash = use commit, but meld into previous commit # f, fixup = like "squash", but discard this commit's log message # x, exec = run command (the rest of the line) using shell ~ "~/ohshitgit/.git/rebase-merge/git-rebase-todo" 20L, 670C 272 Interactive rebase
  244. 244. ksylormiller:~/ohshitgit (feature-branch)$ git rebase -i HEAD~2 [detached HEAD a682e3a] example feature branch 3 files changed, 5 insertions(+) Successfully rebased and updated refs/heads/feature-branch. 273 Avoid rebasing problems: combine commits
  245. 245. REMOTE/ORIGIN Your machineGithub LOCAL STAGING/INDEX WORKSPACE MASTER ORIGIN/ MASTER FEATURE- BRANCH MASTER
  246. 246. ksylormiller:~/ohshitgit (master)$ git merge-base master feature-branch 3c2335c50a1ad48a283a475e3d3f9ac445a20ff5 ksylormiller:~/ohshitgit (feature-branch)$ git rebase -i 3c2335c 275 If you don’t know how many commits to go back
  247. 247. squash merge
  248. 248. ksylormiller:~/ohshitgit (master)$ git merge --squash feature-branch Squash commit -- not updating HEAD Automatic merge went well; stopped before committing as requested 278 Squash merging
  249. 249. REMOTE/ORIGIN Your machineGithub LOCAL STAGING/INDEX WORKSPACE MASTER ORIGIN/ MASTER FEATURE- BRANCH baz.php foo.php bar.php MASTER
  250. 250. REMOTE/ORIGIN Your machineGithub LOCAL STAGING/INDEX WORKSPACE MASTER ORIGIN/ MASTER baz.php foo.php bar.php MASTER
  251. 251. REMOTE/ORIGIN Your machineGithub LOCAL STAGING/INDEX WORKSPACE MASTER FEATURE- BRANCH
  252. 252. Problem: Merge conflicts
  253. 253. • Update your local master and origin/master all.the.time. • Rebase your feature branches to stay up to date • Periodically squash feature branch commits to reduce the number of conflicts to resolve (esp. when rebasing) • Communication with teammates • If things don’t seem right, abort! Avoid the problem: Merge conflicts
  254. 254. ksylormiller:~/ohshitgit (master)$ git config merge.tool <toolname> ksylormiller:~/ohshitgit (master)$ git mergetool 284 Use a visual merge tool
  255. 255. Merge master into your feature branch Rebase master against your feature branch Merge your feature branch into master Rebase your feature branch against master Merge and rebase in the right direction DON’T DO
  256. 256. ksylormiller:~/ohshitgit (master)$ git merge feature-branch Auto-merging conflict_file.txt CONFLICT (content): Merge conflict in conflict_file.txt Automatic merge failed; fix conflicts and then commit the result. ksylormiller:~/ohshitgit (master)$ cat conflict_file.txt <<<<<<< HEAD this code is from master ======= this code is from feature-branch >>>>>>>> d34367 287 Conflict markers
  257. 257. ksylormiller:~/ohshitgit (master)$ git diff --check foo.php:1: leftover conflict marker foo.php:4: leftover conflict marker foo.php:5: trailing whitespace. +fdfakadsfldjfasd^M foo.php:6: leftover conflict marker 289 check your diffs before committing!
  258. 258. Avoiding & getting out of messes: Recap • Always be committing - commits are cheap and easy to use! • git commit --amend for when you mess up a commit • Always be branching - feature branch workflow FTW • Stay up to date • Squash branches into a single commit before rebasing • Squash merge back into master • Use a visual merge tool whenever you can
  259. 259. That’s it! Easy, right?
  260. 260. DON’T PANIC
  261. 261. If all else fails ohshitgit.com
  262. 262. Thank you! @ksylor @ohshitgit

×