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.
Git of Parts
#balancedTeamLA
2/12/14
Rudy Jahchan
@rudy
Wolfie
carbon five
git
Kit of Parts
good 'nuff
Developers are idiots.
forgiveness, please.
I’m a developer.
I'm an idiot.
git
git is a tool for
developers
git is a tool for
developers EVERYONE!
We've built our cadence
on it.
Eliminate the "divide" by
having everyone use it.
Except I'm not going to
teach you it.
forgiveness, please
source: git-scm.com
source: atlassian.com/git/tutorial
source: try.github.io
git reflects
balanced team values.
Shared ownership.
(okay really happens by having everyone use it
but bear with me).
git is a versioning
system.
Just not on a file by file basis; it's your entire
project.
Commit
A snapshot.
Series of Commits
Series of Commits
Series of Commits
Series of Commits
Series of Commits
Series of Commits
And you can roll them back!
Series of Commits
And you can roll them back!
Series of Commits
And you can roll them back!
Small, frequent changes.
Contrast against the large, bloated, risky all or
nothing release.
Branches
Branches
Branches
Branches
Branches
Branches
Branches
Branches
bug/fix-name-123

master

feature/login-42

Branches

They are also named.
Many experiments.
Branches can be features, A/B variations,
whatevs!
Merge it Back
Merge it Back
Merge it Back
Pull Request
Have others check out your work, comment on it,
and approve its inclusion.
Encourages
collaboration.
What if I break
something?
Pull and Push to Repos
Your copy is a repo!
Pull and Push to Repos
Your copy is a repo!
Pull and Push to Repos
Your copy is a repo!
Pull and Push to Repos
Your copy is a repo!
Pull and Push to Repos
Your copy is a repo!
Safe Space
What should designers
work on?
What should designers
work on?
Anything you want!
Though I suggest …
Kit of Parts
Nicole Sullivan
@stubbornella
source: stubbornella.org
Object Oriented CSS
Web Components
A single location
defining all components.
Clearly defines the HTML, CSS, and Javascript.
Bootstrap
getbootstrap.com
Our Kit of Parts
It is not just style guide!
It is a living part of the
app.
Uses the SAME resources as the entire app.
Changes to Kit-of-Parts
affects entire app.
The Bootstrap Team
The Bootstrap Team
uses
The Bootstrap Team
uses

Bootstrap
The Bootstrap Team
uses

Bootstrap
to build
The Bootstrap Team
uses

Bootstrap
to build

The Bootstrap Site
The Bootstrap Team
Yo dawg, I
hearduses like
you
Bootstrap …
Bootstrap

to build

The Bootstrap Site
Pro-tip: Only accessible
in development & UAT.
We mount it under the path /kit-of-parts
Dev can compose new
UX from it.
Allows them to move forward if they can't get a
design pair.
good 'nuff
Chris Nodder
@uxgrump
EQ
Dev

EQ
Dev

UX

EQ
Dev

UX

good 'nuff
Dev

UX

good 'nuff

User
Dev

UX

good 'nuff
"It needs to be pixel
perfect."
Pairing
Navigator and Driver
Developer left to own
devices to decide UI.
source: codinghorror.com
good 'nuff
"Developers can not
design."*
* generalization. forgiveness, please.
"That's a lot of setup,
where do I start?"
"Git" of Parts
Tools used
HTML & CSS

Tools used
Haml & SASS

HTML & CSS

Tools used
Github
Github
Pages
Web-site for your
project!
[github-name].github.io/[project]
master

gh-pages

Create gh-pages branch
Add files
Add files
index.html
Add files
index.html
kit-of-parts.pdf
Add files
index.html
kit-of-parts.pdf
lol_cat.png
Add files
index.html
kit-of-parts.pdf
lol_cat.png
fashionable.css
Push it to Github
source: carbonfive.github.com/vimtronner
Get git
Thanks!
rudy@carbonfive.com
@rudy
Git of Parts
Git of Parts
Git of Parts
Git of Parts
Git of Parts
Git of Parts
Git of Parts
Git of Parts
Upcoming SlideShare
Loading in …5
×

Git of Parts

1,258 views

Published on

Let’s GIT ready to rumble! How the practice of Kit of Parts and Git source control can bring devs and designers closer together.

Published in: Technology
  • Be the first to comment

Git of Parts

  1. 1. Git of Parts #balancedTeamLA 2/12/14
  2. 2. Rudy Jahchan @rudy
  3. 3. Wolfie
  4. 4. carbon five
  5. 5. git
  6. 6. Kit of Parts
  7. 7. good 'nuff
  8. 8. Developers are idiots. forgiveness, please.
  9. 9. I’m a developer.
  10. 10. I'm an idiot.
  11. 11. git
  12. 12. git is a tool for developers
  13. 13. git is a tool for developers EVERYONE!
  14. 14. We've built our cadence on it.
  15. 15. Eliminate the "divide" by having everyone use it.
  16. 16. Except I'm not going to teach you it. forgiveness, please
  17. 17. source: git-scm.com
  18. 18. source: atlassian.com/git/tutorial
  19. 19. source: try.github.io
  20. 20. git reflects balanced team values.
  21. 21. Shared ownership. (okay really happens by having everyone use it but bear with me).
  22. 22. git is a versioning system. Just not on a file by file basis; it's your entire project.
  23. 23. Commit A snapshot.
  24. 24. Series of Commits
  25. 25. Series of Commits
  26. 26. Series of Commits
  27. 27. Series of Commits
  28. 28. Series of Commits
  29. 29. Series of Commits And you can roll them back!
  30. 30. Series of Commits And you can roll them back!
  31. 31. Series of Commits And you can roll them back!
  32. 32. Small, frequent changes. Contrast against the large, bloated, risky all or nothing release.
  33. 33. Branches
  34. 34. Branches
  35. 35. Branches
  36. 36. Branches
  37. 37. Branches
  38. 38. Branches
  39. 39. Branches
  40. 40. Branches
  41. 41. bug/fix-name-123 master feature/login-42 Branches They are also named.
  42. 42. Many experiments. Branches can be features, A/B variations, whatevs!
  43. 43. Merge it Back
  44. 44. Merge it Back
  45. 45. Merge it Back
  46. 46. Pull Request Have others check out your work, comment on it, and approve its inclusion.
  47. 47. Encourages collaboration.
  48. 48. What if I break something?
  49. 49. Pull and Push to Repos Your copy is a repo!
  50. 50. Pull and Push to Repos Your copy is a repo!
  51. 51. Pull and Push to Repos Your copy is a repo!
  52. 52. Pull and Push to Repos Your copy is a repo!
  53. 53. Pull and Push to Repos Your copy is a repo!
  54. 54. Safe Space
  55. 55. What should designers work on?
  56. 56. What should designers work on? Anything you want! Though I suggest …
  57. 57. Kit of Parts
  58. 58. Nicole Sullivan @stubbornella
  59. 59. source: stubbornella.org
  60. 60. Object Oriented CSS
  61. 61. Web Components
  62. 62. A single location defining all components. Clearly defines the HTML, CSS, and Javascript.
  63. 63. Bootstrap getbootstrap.com
  64. 64. Our Kit of Parts
  65. 65. It is not just style guide!
  66. 66. It is a living part of the app. Uses the SAME resources as the entire app.
  67. 67. Changes to Kit-of-Parts affects entire app.
  68. 68. The Bootstrap Team
  69. 69. The Bootstrap Team uses
  70. 70. The Bootstrap Team uses Bootstrap
  71. 71. The Bootstrap Team uses Bootstrap to build
  72. 72. The Bootstrap Team uses Bootstrap to build The Bootstrap Site
  73. 73. The Bootstrap Team Yo dawg, I hearduses like you Bootstrap … Bootstrap to build The Bootstrap Site
  74. 74. Pro-tip: Only accessible in development & UAT. We mount it under the path /kit-of-parts
  75. 75. Dev can compose new UX from it. Allows them to move forward if they can't get a design pair.
  76. 76. good 'nuff
  77. 77. Chris Nodder @uxgrump
  78. 78. EQ
  79. 79. Dev EQ
  80. 80. Dev UX EQ
  81. 81. Dev UX good 'nuff
  82. 82. Dev UX good 'nuff User
  83. 83. Dev UX good 'nuff
  84. 84. "It needs to be pixel perfect."
  85. 85. Pairing
  86. 86. Navigator and Driver
  87. 87. Developer left to own devices to decide UI.
  88. 88. source: codinghorror.com
  89. 89. good 'nuff
  90. 90. "Developers can not design."* * generalization. forgiveness, please.
  91. 91. "That's a lot of setup, where do I start?"
  92. 92. "Git" of Parts
  93. 93. Tools used
  94. 94. HTML & CSS Tools used
  95. 95. Haml & SASS HTML & CSS Tools used
  96. 96. Github
  97. 97. Github Pages
  98. 98. Web-site for your project!
  99. 99. [github-name].github.io/[project]
  100. 100. master gh-pages Create gh-pages branch
  101. 101. Add files
  102. 102. Add files index.html
  103. 103. Add files index.html kit-of-parts.pdf
  104. 104. Add files index.html kit-of-parts.pdf lol_cat.png
  105. 105. Add files index.html kit-of-parts.pdf lol_cat.png fashionable.css
  106. 106. Push it to Github
  107. 107. source: carbonfive.github.com/vimtronner
  108. 108. Get git
  109. 109. Thanks! rudy@carbonfive.com @rudy

×