Welcome to

Code Management

for Designers

Future of Web Design, NYC November 2011

What it says on the tin

"Become a more powerful designer by learning how to deploy your sites with Git and cloud hosting solutions like Heroku."

Hi!

• I'm @jonathanpberger
• I use Git every day to make stuff at @pivotallabs
• My background is in philosophy and then design and now development

Who are you?

Show of hands:

• Who's used any version control before?
• Who's used git before?
• Who uses the terminal regularly?

The Plan

• 40m to Speed through a ton of material.
• Try to show actual use and common workflows. No time to be exhaustive
• This will be a live-coded technical talk.

• Act 1 - Solo Git & Heroku
• Act 2 - Team Git
• Act 3 - Setting-up, links to more

I'm going to tell a story about ping pong.

Act 1 - Solo Git

Copy an Open Source project for use.

Using Github

Github.com is a web-based hosting service for projects that use the Git revision control system.

Copying a project with Git Clone

• First we'll fork the Pivot Pong project.
• Then we'll take our fork and git clone pivot-pong.

Making an edit

• Let's change the name of the app.

Seeing what changed

• git status
• git diff

Commiting Changes

• git commit -am

Distributed VCS

• This works even if when you're offline(!)

Pushing code to the Repo

• git status
• git log
• git push origin master

Let's try another

• Let's try running the app.
• Change the db.
• Change the styling.

Staging multiple files

• Let's use the GUI: GitX
• Each commit should be a unit of work.
• This isn't always a single file or single line.

Deploying to the Web

"Heroku is a cloud application platform...[that] lets app developers spend 100% of their time on their application code, not managing servers, deployment, ongoing operations, or scaling."

Deploying with Heroku

• heroku create
• git push heroku master: deploy to new heroku instance
• heroku rename

Act 2 - Team Git

In which the A17 House Style is applied.

• My friend, Mr. FakeyPants didn't like the styling, so he made his own changes.
• I'll set him up as a collaborator on the site.
• I want to work on top of those.

Mr. Fakeypants Goes to Work

Mr. Fakeypants does:

• In real life, he'd git clone, edit, git commit, git push, etc.
• For the purposes of this demo, we'll use GitHub's live edtiing feature.

I do some more work

• Makes changes and commits them (git add, git ci)
• git push origin master

Oh noes! It breaks. Conflict!

• I want to work on top of his changes
• First I have to git rebase
• Now I can git push

• Push successfully.
• Deploy again to Heroku.

Act 3 - Setting-up

Trying this at home

You've seen me do it; here's what you need to do:

• To use git: Install Git on your machine using Homebrew.
• To backup and share: create a Github account, set up a remote repo
• To deploy to the web: set up a Heroku account
• Install gem install heroku to make deploying easier

The Links Slide:

• GitX, the Mac git GUI at https://gitx.frim.nl/
• My preferred "Brother Bard" Gitx branch at https://github.com/brotherbard/gitx/downloads
• Install git using Brew https://mxcl.github.com/homebrew/
• Practice git basics with https://gitimmersion.com/
• Set up a Github account at https://help.github.com/mac-set-up-git/
• Set up a Heroku account at https://devcenter.heroku.com/articles/quickstart
• Use the Heroku Gem to make life easier at https://github.com/heroku/heroku

Some other fun stuff to explore:

This is intermediate git that I use every day:

• git branch
• git stash
• git reset HEAD^
• git blame

For more info

• https://jonathanpberger.com/code_management
• Say hi at @jonathanpberger
• or jonathanpberger on github, gmail, forrst, etc...

Thanks!

Experiment safely

• git branch

Attribute changes to someone

• git blame

Quickly get back to a clean state

• git stash

Unstage your last few commits

• git reset HEAD^

Thanks again!