git of parts
DESCRIPTION
Let’s GIT ready to rumble! How the practice of Kit of Parts and Git source control can bring devs and designers closer together.TRANSCRIPT
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.
CommitA snapshot.
Series of Commits
Series of Commits
Series of Commits
Series of Commits
Series of Commits
Series of CommitsAnd you can roll them back!
Series of CommitsAnd you can roll them back!
Series of CommitsAnd 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
Branches
master
bug/fix-name-123
feature/login-42
They are also named.
Many experiments.Branches can be features, A/B variations,
whatevs!
Merge it Back
Merge it Back
Merge it Back
Pull RequestHave others check out your work, comment on it,
and approve its inclusion.
Encourages collaboration.
What if I break something?
Pull and Push to ReposYour copy is a repo!
Pull and Push to ReposYour copy is a repo!
Pull and Push to ReposYour copy is a repo!
Pull and Push to ReposYour copy is a repo!
Pull and Push to ReposYour 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 Teamuses
The Bootstrap Teamuses
Bootstrap
The Bootstrap Teamuses
Bootstrapto build
The Bootstrap Teamuses
Bootstrapto build
The Bootstrap Site
The Bootstrap Teamuses
Bootstrapto build
The Bootstrap Site
Yo dawg, I heard you like Bootstrap …
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
EQ
Dev
EQ
Dev UX
good 'nuff
Dev UX
good 'nuff
Dev UX User
good 'nuff
Dev UX
"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
Tools used
HTML & CSS
Tools used
Haml & SASS HTML & CSS
Github
Github Pages
Web-site for your project!
[github-name].github.io/[project]
Create gh-pages branch
master
gh-pages
Add files
Add files
index.html
Add files
index.htmlkit-of-parts.pdf
Add files
index.htmlkit-of-parts.pdflol_cat.png
Add files
index.htmlkit-of-parts.pdflol_cat.pngfashionable.css
Push it to Github
source: carbonfive.github.com/vimtronner
Get git