Git of Parts

117
Git of Parts #balancedTeamLA 2/12/14

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 of Git of Parts

Page 1: Git of Parts

Git of Parts#balancedTeamLA

2/12/14

Page 2: Git of Parts

Rudy Jahchan @rudy

Page 3: Git of Parts

Wolfie

Page 4: Git of Parts

carbon five

Page 5: Git of Parts

git

Page 6: Git of Parts

Kit of Parts

Page 7: Git of Parts

good 'nuff

Page 8: Git of Parts

Developers are idiots.forgiveness, please.

Page 9: Git of Parts

I’m a developer.

Page 10: Git of Parts

I'm an idiot.

Page 11: Git of Parts

git

Page 12: Git of Parts

git is a tool for developers

Page 13: Git of Parts

git is a tool for developers EVERYONE!

Page 14: Git of Parts

We've built our cadence on it.

Page 15: Git of Parts

Eliminate the "divide" by having everyone use it.

Page 16: Git of Parts

Except I'm not going to teach you it.

forgiveness, please

Page 17: Git of Parts

source: git-scm.com

Page 18: Git of Parts

source: atlassian.com/git/tutorial

Page 19: Git of Parts

source: try.github.io

Page 20: Git of Parts

git reflects balanced team values.

Page 21: Git of Parts

Shared ownership.(okay really happens by having everyone use it

but bear with me).

Page 22: Git of Parts

git is a versioning system.

Just not on a file by file basis; it's your entire project.

Page 23: Git of Parts

CommitA snapshot.

Page 24: Git of Parts

Series of Commits

Page 25: Git of Parts

Series of Commits

Page 26: Git of Parts

Series of Commits

Page 27: Git of Parts

Series of Commits

Page 28: Git of Parts

Series of Commits

Page 29: Git of Parts

Series of CommitsAnd you can roll them back!

Page 30: Git of Parts

Series of CommitsAnd you can roll them back!

Page 31: Git of Parts

Series of CommitsAnd you can roll them back!

Page 32: Git of Parts

Small, frequent changes.Contrast against the large, bloated, risky all or

nothing release.

Page 33: Git of Parts

Branches

Page 34: Git of Parts

Branches

Page 35: Git of Parts

Branches

Page 36: Git of Parts

Branches

Page 37: Git of Parts

Branches

Page 38: Git of Parts

Branches

Page 39: Git of Parts

Branches

Page 40: Git of Parts

Branches

Page 41: Git of Parts

Branches

master

bug/fix-name-123

feature/login-42

They are also named.

Page 42: Git of Parts

Many experiments.Branches can be features, A/B variations,

whatevs!

Page 43: Git of Parts

Merge it Back

Page 44: Git of Parts

Merge it Back

Page 45: Git of Parts

Merge it Back

Page 46: Git of Parts

Pull RequestHave others check out your work, comment on it,

and approve its inclusion.

Page 47: Git of Parts

Encourages collaboration.

Page 48: Git of Parts

What if I break something?

Page 49: Git of Parts

Pull and Push to ReposYour copy is a repo!

Page 50: Git of Parts

Pull and Push to ReposYour copy is a repo!

Page 51: Git of Parts

Pull and Push to ReposYour copy is a repo!

Page 52: Git of Parts

Pull and Push to ReposYour copy is a repo!

Page 53: Git of Parts

Pull and Push to ReposYour copy is a repo!

Page 54: Git of Parts

Safe Space

Page 55: Git of Parts

What should designers work on?

Page 56: Git of Parts

What should designers work on?Anything you want! Though I suggest …

Page 57: Git of Parts

Kit of Parts

Page 58: Git of Parts

Nicole Sullivan@stubbornella

Page 59: Git of Parts

source: stubbornella.org

Page 60: Git of Parts

Object Oriented CSS

Page 61: Git of Parts

Web Components

Page 62: Git of Parts

A single location defining all components.Clearly defines the HTML, CSS, and Javascript.

Page 63: Git of Parts

Bootstrap getbootstrap.com

Page 64: Git of Parts

Our Kit of Parts

Page 65: Git of Parts

It is not just style guide!

Page 66: Git of Parts

It is a living part of the app.

Uses the SAME resources as the entire app.

Page 67: Git of Parts

Changes to Kit-of-Parts affects entire app.

Page 68: Git of Parts
Page 69: Git of Parts

The Bootstrap Team

Page 70: Git of Parts

The Bootstrap Teamuses

Page 71: Git of Parts

The Bootstrap Teamuses

Bootstrap

Page 72: Git of Parts

The Bootstrap Teamuses

Bootstrapto build

Page 73: Git of Parts

The Bootstrap Teamuses

Bootstrapto build

The Bootstrap Site

Page 74: Git of Parts

The Bootstrap Teamuses

Bootstrapto build

The Bootstrap Site

Yo dawg, I heard you like Bootstrap …

Page 75: Git of Parts

Pro-tip: Only accessible in development & UAT.

We mount it under the path /kit-of-parts

Page 76: Git of Parts

Dev can compose new UX from it.

Allows them to move forward if they can't get a design pair.

Page 77: Git of Parts

good 'nuff

Page 78: Git of Parts

Chris Nodder@uxgrump

Page 79: Git of Parts

EQ

Page 80: Git of Parts

EQ

Dev

Page 81: Git of Parts

EQ

Dev UX

Page 82: Git of Parts

good 'nuff

Dev UX

Page 83: Git of Parts

good 'nuff

Dev UX User

Page 84: Git of Parts

good 'nuff

Dev UX

Page 85: Git of Parts

"It needs to be pixel perfect."

Page 86: Git of Parts

Pairing

Page 87: Git of Parts

Navigator and Driver

Page 88: Git of Parts
Page 89: Git of Parts
Page 90: Git of Parts
Page 91: Git of Parts
Page 92: Git of Parts
Page 93: Git of Parts

Developer left to own devices to decide UI.

Page 94: Git of Parts

source: codinghorror.com

Page 95: Git of Parts

good 'nuff

Page 96: Git of Parts

"Developers can not design."*

* generalization. forgiveness, please.

Page 97: Git of Parts

"That's a lot of setup, where do I start?"

Page 98: Git of Parts

"Git" of Parts

Page 99: Git of Parts

Tools used

Page 100: Git of Parts

Tools used

HTML & CSS

Page 101: Git of Parts

Tools used

Haml & SASS HTML & CSS

Page 102: Git of Parts

Github

Page 103: Git of Parts

Github Pages

Page 104: Git of Parts

Web-site for your project!

Page 105: Git of Parts

[github-name].github.io/[project]

Page 106: Git of Parts

Create gh-pages branch

master

gh-pages

Page 107: Git of Parts

Add files

Page 108: Git of Parts

Add files

index.html

Page 109: Git of Parts

Add files

index.htmlkit-of-parts.pdf

Page 110: Git of Parts

Add files

index.htmlkit-of-parts.pdflol_cat.png

Page 111: Git of Parts

Add files

index.htmlkit-of-parts.pdflol_cat.pngfashionable.css

Page 112: Git of Parts

Push it to Github

Page 113: Git of Parts

source: carbonfive.github.com/vimtronner

Page 114: Git of Parts
Page 115: Git of Parts
Page 116: Git of Parts

Get git