Design Systems + Git = Success - Clarity Conference 2018

1. Design Systems + Git = Success Katie Sylor-Miller Staff Engineer, Etsy Frontend Systems twitter: @ksylor

2. Agenda Intros Fundamental Concepts Data Structures Workflow in-depth Viewing and changing history Managing and sharing repos Problems, solutions, and tips

7. Your name Your preferred pronouns Where do you work? How comfortable are you with Git? What’s your favorite NYC experience so far? Intros

8. Agenda Intros Fundamental Concepts Data Structures Workflow in-depth Viewing and changing history Managing and Sharing repos Problems, solutions, and tips

9. What is Git? Why Git? Git vs. Github Exercise 1 Fundamental Concepts

10. What is Git?

11. Git is a Version Control System (VCS)

12. Provide a way to store the history of files: • when they changed • how they changed • who changed them • why they changed Version Control Systems

13. 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

14. Versioning: the awesome Git way my-file.psd v5 v4 v3 v2 v1

15. Repositories (repos) by Etsy seller IliaSCoolVintage

16. 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

17. Git is a distributed Version Control System

18. 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!

19. Distributed Version Control remote my local local local local local

20. ksylormiller:~$ 20 Copy a repository

21. 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

22. Distributed Version Control remote origin my local local local local local

23. Distributed Version Control remote origin my local local local local local

24. Pushing to a remote remote origin my local local local local local

25. Pulling from a remote remote origin my local local local local local

26. Why use Git?

27. 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.

28. 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.

29. Git vs. Github

30. 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

31. Cloning and Creating Repos https://github.com/ksylor/clarity-workshop-exercises/ tree/master/exercise-1 Exercise 1

33. Commits Branches HEAD History Exercise 2 Data Structures

34. Commits

35. 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

36. 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

37. Commit hashes a4df41a8045877d50396d00113598e47f6ad10ef aec561108fd86412c2a9083d7d95ed1668d2f4e4 6dab6a712177cf2dd2cf8b79a2cee24351be60eb 1a3531222242241153ac8a76b752d5f525a99d2c 912bde5d4e5e962269ddff87da83cc5ce55e75d0v5 v4 v3 v2 v1

38. Commit hash abbreviations a4df41a aec5611 6dab6a7 1a35312 912bde5v5 v4 v3 v2 v1

39. Branches

40. by Etsy seller SwearsandStares

41. Mental model: branches are a linked list a4df41aaec56116dab6a71a35312 912bde5 A B C D E

42. 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

43. 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

44. Branches are a linked list reference A4DF41A6DAB6A7 a4df41aaec56116dab6a71a35312 912bde5 A B C D EA B C D E master

45. Branches are a linked list reference text file A4DF41A6DAB6A7 a4df41aaec56116dab6a71a35312 912bde5 master .git/refs/heads/master 912bde5d4e5e962269ddff87da83cc5ce55e75d0 A B C D E

46. ksylormiller:~/ohshitgit (master)$ git branch new-branch 46 Create a new branch

47. New branches are a new reference A4DF41A6DAB6A7 a4df41aaec56116dab6a71a35312 912bde5 master new-branch A B C D E

48. 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

49. HEAD

50. HEAD points to your currently checked-out branch HEAD a4df41aaec56116dab6a7 912bde5 master new-branch B C D E

51. 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

52. 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)

53. ksylormiller:~/ohshitgit (master)$ git checkout new-branch 53 Change branches

54. 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

55. ksylormiller:~/ohshitgit (master)$ git commit -m “Your message here” 55 Add a new commit to our branch

56. A new commit becomes the new HEAD 1668d2f HEAD a4df41aaec56116dab6a7 912bde5 master new-branch B C D E F

57. History

58. History is a linked list 1668d2fa4df41aaec56116dab6a7 912bde5 master new-branch B C D E F

59. History is a linked list tree master ca53f4f 1668d2f a4df41a 912bde5 new-branch 3de21fa C D E F G H

60. 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

61. 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

62. Commits, Branches, Refs and HEAD https://github.com/ksylor/clarity-workshop-exercises/tree/ master/exercise-2 Exercise 2

64. Environments A simple workflow A complicated workflow Exercise 3 A real workflow Exercise 4 Workflows in depth

65. Git Environments

66. 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

67. REMOTE/ORIGIN Your machineGithub LOCAL STAGING/INDEX WORKSPACE

68. 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

69. 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

70. 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

71. A simple workflow

72. REMOTE/ORIGIN Your machineGithub LOCAL STAGING/INDEX WORKSPACE MASTER

73. 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

74. REMOTE/ORIGIN Your machineGithub LOCAL STAGING/INDEX WORKSPACE MASTER MASTER baz.php foo.php bar.php baz.php foo.php bar.php HEAD

75. REMOTE/ORIGIN Your machineGithub LOCAL STAGING/INDEX WORKSPACE MASTER MASTER baz.php foo.php bar.php baz.php foo.php bar.php

76. git status is your BFF by Etsy seller SmittenKittenKendall

77. 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

78. git status and git diff are your BFFs by Etsy seller SmittenKittenKendall

79. 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

80. 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

81. ksylormiller:~/ohshitgit (master)$ git add bar.php 81 git add

83. 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)

85. 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)

86. ksylormiller:~/ohshitgit (master)$ git commit -m "Meaningful commit message" [master 4875652] Meaningful commit message 1 file changed, 1 insertion(+) 86 git commit

87. REMOTE/ORIGIN Your machineGithub LOCAL STAGING/INDEX WORKSPACE MASTER MASTER baz.php foo.php bar.php

88. 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

89. REMOTE/ORIGIN Your machineGithub LOCAL STAGING/INDEX WORKSPACE MASTER MASTER

91. But… it’s almost never that simple

92. A complicated workflow

94. REMOTE/ORIGIN Your machineGithub LOCAL STAGING/INDEX WORKSPACE MASTER ORIGIN/ MASTER MASTER

95. 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

97. ksylormiller:~/ohshitgit (master)$ git merge origin/master 97 git merge

98. 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

99. 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

101. 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

103. 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

104. REMOTE/ORIGIN Your machineGithub LOCAL STAGING/INDEX WORKSPACE ORIGIN/ MASTER MASTERMASTER

105. Rebase all the things!

107. 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

110. 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

112. 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

115. I solemnly swear never to run git pull

116. 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

117. 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!)

118. Workflow https://github.com/ksylor/clarity-workshop-exercises/ tree/master/exercise-3 Exercise 3

119. A real workflow

120. REMOTE/ORIGIN Your machineGithub LOCAL STAGING/INDEX WORKSPACE MASTER MASTER baz.php foo.php bar.php baz.php foo.php bar.php HEAD

121. ksylormiller:~/ohshitgit (master)$ git checkout -b feature-branch 121 Create & checkout a branch

122. 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

123. REMOTE/ORIGIN Your machineGithub LOCAL STAGING/INDEX WORKSPACE MASTER baz.php foo.php bar.php FEATURE -BRANCH MASTER baz.php foo.php bar.php

124. ksylormiller:~/ohshitgit (feature-branch)$ git add bar.php 124 git add

125. REMOTE/ORIGIN Your machineGithub LOCAL STAGING/INDEX WORKSPACE MASTER baz.php foo.php FEATURE -BRANCH MASTER baz.php foo.php bar.phpbar.php

126. 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

127. 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

128. ksylormiller:~/ohshitgit (feature-branch)$ git commit -m "Meaningful commit message" [feature-branch 4875652] Meaningful commit message 1 file changed, 1 insertion(+) 128 git commit

129. REMOTE/ORIGIN Your machineGithub LOCAL STAGING/INDEX WORKSPACE FEATURE- BRANCH MASTER baz.php foo.php bar.php baz.php foo.php bar.php MASTER

130. REMOTE/ORIGIN Your machineGithub LOCAL STAGING/INDEX WORKSPACE MASTER baz.php foo.php bar.php baz.php foo.php bar.php MASTER FEATURE- BRANCH

131. 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

132. 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

133. by Etsy seller ninjagrl Pull requests (PRs)

134. 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!

144. Reviewing a PR by Etsy seller SimplyPerfectDesignL

150. Merging a PR by Etsy seller InkinPark

151. REMOTE/ORIGIN Your machineGithub LOCAL STAGING/INDEX WORKSPACE MASTER FEATURE- BRANCH

153. merge commit

155. rebase merge

159. squash merge

162. 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

163. 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

164. 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

165. 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

166. REMOTE/ORIGIN Your machineGithub LOCAL STAGING/INDEX WORKSPACE MASTER ORIGIN/ MASTER FEATURE- BRANCH baz.php foo.php bar.php MASTER

167. ksylormiller:~/ohshitgit (master)$ git commit -m “Merge feature-branch” [master 4875652] Merge feature branch 1 file changed, 1 insertion(+) 167 git commit

168. REMOTE/ORIGIN Your machineGithub LOCAL STAGING/INDEX WORKSPACE MASTER ORIGIN/ MASTER baz.php foo.php bar.php MASTER

170. 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

172. by Etsy seller JulieYegen

173. Feature branches and Pull Requests https://github.com/ksylor/clarity-workshop-exercises/tree/ master/exercise-4 Exercise 4

175. Viewing history Changing history Exercise 5 Viewing and changing history

176. Viewing history

177. View the history of a branch 1668d2f HEAD a4df41aaec56116dab6a7 912bde5 master B C D E F

178. 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

179. 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

180. by Etsy seller Birdwoodshack git reflog is your magic time machine

181. 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

182. 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

183. 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

184. 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

185. 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?

186. post-checkout detached HEAD 1668d2f HEAD a4df41aaec56116dab6a7 912bde5 master B C D E F

187. • 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

188. 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/

189. Changing history

190. Changing history of a branch 1668d2f HEAD a4df41aaec56116dab6a7 master B C D E F 912bde5

191. git reset brings you back to a previous state in history, undoing everything that changed between now and then Hit the reset button

192. 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

193. ksylormiller:~/ohshitgit (master)$ git reset HEAD@{3} Unstaged changes after reset: M foo.php 193 git reset

194. 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

195. Post-reset 1668d2f HEAD a4df41aaec56116dab6a7 master Changes move to the index or workspace or discarded 912bde5 B C D E F

196. Disclaimer: never change public history

197. git revert creates a new commit that undoes the changes in the specified commit(s) Undo a public commit

198. ksylormiller:~/ohshitgit (master)$ git revert f4f4d99 198 git revert

199. 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

200. ksylormiller:~/ohshitgit (master)$ git revert f4f4d996d44bbf824cdd22ace9e6d154d27c9a5d [master b483271] Revert "lolz" 1 file changed, 3 deletions(-) 200 git revert complete

201. Post-revert 1668d2f HEAD a4df41aaec5611 b75fb8b912bde5 master reverts changes from C D E F G

202. 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

203. Viewing and Changing History https://github.com/ksylor/clarity-workshop-exercises/tree/ master/exercise-5 Exercise 5

205. Versioning npm Packages Releases Documentation Issues Managing and sharing repos

206. Versioning

207. 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.

208. 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

209. 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

210. npm packages

211. 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

212. 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)

213. { "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)

214. 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

215. 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

216. Releases

221. 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

222. Documentation

226. Issues

231. Versions and releases https://github.com/ksylor/clarity-workshop-exercises/tree/ master/exercise-6 Exercise 6

233. Always Be Committing

234. Problem: Committing the wrong thing

235. • 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

236. --amend

237. ksylormiller:~/ohshitgit (master)$ git commit --amend 237 Fix the problem: Entering the wrong commit message

238. 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

239. 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

240. 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

241. 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

242. Always Be Branching

243. Problem: Committing to the wrong branch

244. stash

245. Your machine LOCAL STAGING/INDEX WORKSPACE MASTER baz.php foo.php bar.php baz.php foo.php bar.php STASH

247. Your machine LOCAL STAGING/INDEX WORKSPACE MASTER baz.php foo.php bar.php baz.php foo.php bar.php STASH YOUR CHANGES HEAD COMMIT

249. ksylormiller:~/ohshitgit (master)$ git stash Saved working directory and index state WIP on master: 3c2335c lolz 249 add to the stash

252. 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

253. 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

254. 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

255. 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

256. 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

258. 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)

259. 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

260. 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

261. cherry-pick

262. REMOTE/ORIGIN Your machineGithub LOCAL STAGING/INDEX WORKSPACE MASTER FEATURE- BRANCH MASTER COMMIT ON THE WRONG BRANCH :(

263. 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

264. REMOTE/ORIGIN Your machineGithub LOCAL STAGING/INDEX WORKSPACE MASTER MASTER 16759ae 3c2335c FEATURE- BRANCH

265. 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

266. Stay up to date

267. Problem: Rebasing kinda sucks

268. interactive rebase

269. ksylormiller:~/ohshitgit (feature-branch)$ git rebase -i HEAD~2 269 Avoid the problem: Combine commits before rebasing

270. REMOTE/ORIGIN Your machineGithub LOCAL STAGING/INDEX WORKSPACE MASTER ORIGIN/ MASTER FEATURE- BRANCH MASTER

271. 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

272. 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

273. 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

274. REMOTE/ORIGIN Your machineGithub LOCAL STAGING/INDEX WORKSPACE MASTER ORIGIN/ MASTER FEATURE- BRANCH MASTER

275. 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

276. squash merge

278. 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

279. REMOTE/ORIGIN Your machineGithub LOCAL STAGING/INDEX WORKSPACE MASTER ORIGIN/ MASTER FEATURE- BRANCH baz.php foo.php bar.php MASTER

280. REMOTE/ORIGIN Your machineGithub LOCAL STAGING/INDEX WORKSPACE MASTER ORIGIN/ MASTER baz.php foo.php bar.php MASTER

282. Problem: Merge conflicts

283. • 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

284. ksylormiller:~/ohshitgit (master)$ git config merge.tool <toolname> ksylormiller:~/ohshitgit (master)$ git mergetool 284 Use a visual merge tool

286. 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

287. 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

289. 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!

290. 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

291. That’s it! Easy, right?

292. DON’T PANIC

293. If all else fails ohshitgit.com

294. Thank you! @ksylor @ohshitgit

Design Systems + Git = Success - Clarity Conference 2018

Design Systems + Git = Success - Clarity Conference 2018

Recommended

More Related Content

Similar to Design Systems + Git = Success - Clarity Conference 2018

Similar to Design Systems + Git = Success - Clarity Conference 2018(20)

More from Katie Sylor-Miller

More from Katie Sylor-Miller(10)

Recently uploaded

Recently uploaded(20)

Design Systems + Git = Success - Clarity Conference 2018