GITHUB FOR PEOPLE

WHO DON’T CODE

Christopher Schmitt ★ http://twitter.com/teleject
http://DWMGBook.com/
http://nonbreakingspace.tv/
• nib - Stylus mixins, utilities, components, and
gradient image generation

• This is Responsive - Online repo for Brad Frost's

site about RWD resources

• Kraken - A lightweight, mobile-first boilerplate for

front-end web developers

• Yeoman Style Prototype - Style guide generator

• OpenType Features - A Sass mix-in for turning

OpenType features on and off in your embedded
web fonts.

• HiSRC - The simple jQuery plugin for adaptive

images in responsive web design

• Responsive Layouts - Jen Simmons’ slides

GitHub
GitHub

• Git on your local machine, connect to

GitHub to send your code out to the
world Web-based, social versioning control
• Cloud-based code repos
• Social coding = community coding
GitHub Tour

• Login, profile
• Bootcamp
• Look at open source projects
• commits, contributors
• Readme files
http://www.emoji-cheat-sheet.com
GitHub Tour

• Issue tracking software

• Setting milestones
• Projects mentioned at ARTIFACT Conf
• nib - Stylus mixins, utilities, components, and
gradient image generation

• This is Responsive - Online repo for Brad Frost's

site about RWD resources

• Kraken - A lightweight, mobile-first boilerplate for

front-end web developers

• Yeoman Style Prototype - Style guide generator

• OpenType Features - A Sass mix-in for turning

OpenType features on and off in your embedded
web fonts.

• HiSRC - The simple jQuery plugin for adaptive

images in responsive web design

• Responsive Layouts - Jen Simmons’ slides

Version Control
Version Control
• “Cowboy coding”
$
$
X
X
X
X
X
X

X
X

X
X X
X
X X
X
X X X

X X X
X X X

X X X
X X X

X X X
X X X

X X
X X X

X X
X
X
X X
X X

X
X
X
X
X
X X
X X

X
X
X
X
X
X X
X X

X
X
X
X
X
X X
X X

X
X
X
X
X
X X
X X

X
X
X
X
X
X X
X X

X
X
X
Version Control
• “Cowboy coding”
• Centralized code base
Version Control
• “Cowboy coding”
• Centralized code base
• Decentralized code base
X
X
Command
Line
Interface
CLI Basics

• Open a session, launch Terminal

• Since you are logged into OSX, you are
logged into your session!
CLI Basics
• Top down, current information is always at
the bottom
• The flashing rectangle is our cursor
• The prompt tells us that it's ready to
accept some text
• The prompt tells us the account and
directory.
CLI Basics

• Type a command with keyboard

• Use left and right arrows to edit a
command
• Use up and down arrows to cycle through
past commands
CLI Basics

• To exit out of a session, close the Terminal

window
• Or type EXIT
CLI Basics

• To exit out of a session, close the Terminal

window
• Or type EXIT
CLI Basics

• Control + A moves cursor to start of line

• Control + E moves curosr to end of line
• In Terminal, option + click line to move
cursor to click point
CLI Basics

• When writing a command or filename, try

TAB for autocompleting file or folder
names.
• TAB + TAB, when autocompletes doesn't
work as Tab + Tab shows you what all the
possibilities are for autocompleting
CLI Basics

• When writing a command or filename, try

tab key for autocompleting file or folder
names.
• tab + tab, when autocompletes doesn't
work as tab + tab shows you what all the
possibilities are for autocompleting
CLI Basics
• ls -l is going to give listing in a vertical file
format, with information about the file

• ls -la is going to give a listing in a vertical file

format with additional files. "." files are
configuration files

• ls -lah gives us file sizes in human-friendly terms

• For example, .DS_Store if a file for apple that

keeps information on how you like to present
the GUI of your files.
CLI Basics

• pwd shows current directory

• cd .. moves to parent folder
• cd / means the root of the hard drive
• cd Users/Christopher is a relative path
• cd ~ takes us into our user directory
CLI Basics

• Type open . that references the current

directory and it opens up the finder
• Type open .. to open parent directory
• Type open -a calculator to open up the
calculator
CLI Basics

• Type CLEAR to clean up the screen, if you

are sick and tired of all that freaking text.
CLI Basics
• Someone’s going to tell you iTerm app is
better than Terminal, so I’m just going to
beat them to the punch and say “get
iTerm” (but you don’t need it cause you are
awesome the way you are)
• But seriously.
• http://www.iterm2.com
CLI Basics
Git Basic Commands
Git CLI Commands

git --version
Git CLI Commands

git init
[project name]
Git CLI Commands

git add [file(s)]

Git CLI Commands

git commit -a -m
“message”
Git CLI Commands

git status
Git CLI Commands

git log
Git CLI Commands

git checkout
Git CLI Commands

git diff
Git CLI Commands

git commit
-m “what changed”
Git Branches
Git Branches
Git Branches
Use git status to see
which branch we are
located in.
Git Branches
If “on branch master”,
people regard it as the
“trunk”
Git Branches
“Master” is the
canonical version of
your project
Git Branches
Git Branches
Make copies of a
project or branch to
add, edit, revise code
Git Branches

git branch
name_of_change
Git Branches
Once you created
branch, you need to
check it out
Git Branches

git checkout
name_of_change
Git Branches

• Branch is a different version or set of our

code
• When we give git branch name, git grabs
the latest commit of that branch
• Getting the latest version is known as the
HEAD commit for the branch
Git Branches

• Check status of which branch you are

on, use git status
• To get back to master, use git checkout
master
Git Branches

git checkout -b
name_of_change
Git Branches

Branch A Branch B
Git Branches

Branch A Branch B Branch C

Git Branches

Branch WTF
Git Merging Branches
Git Merging Branches

• Brings code back together from different

branches or alternate dimensions
• Also, brings together the changes or
commits made in respective branches
Git Merging Branches

• If there isn’t any conflict on the lines of

code in each respective branch, git lets
the merges just happen.
Git Merging Branches

git branch
Git Merging Branches

git master
Git Merging Branches

git merge
name_of_change
Git Merging Branches

git log
Git Merging Branches

$ git merge master

Auto-merging lib/hello.html
CONFLICT (content): Merge conflict in lib/
hello.html
Automatic merge failed; fix conflicts and then
commit the result.
<html>
<head>
<<<<<<< HEAD
<link type="text/css" rel="stylesheet"
media="all" href="style.css" />
=======
<!-- no style -->
>>>>>>> master
</head>
<body>
<h1>Hello,World!</h1>
</body>
</html>
<html>
<head>
<link type="text/css" rel="stylesheet"
media="all" href="style.css" />
</head>
<body>
<h1>Hello,World!</h1>
</body>
</html>
Git Merging Branches

git add lib/hello.html

Git Merging Branches

git commit -m "Merged

master fixed
conflict."
Git Merging Branches
Git Remote Repos
Git Remote Repo

• Creating a new repository that is a copy of

another repository is called cloning.
Git Remote Repos
• So far, all our work has been in repositories
on our own computer with our own
branches.
• Which is great.
• However, the power of CVS is to all code
changes from people from all over the
world or next door improve are code.
Git Remote Repos

• Technically, a “remote repo” can be any

repository that’s not the same as our the
repository we are working on.
• Could be on a different server.
• Or could be in a different folder on our
own computer.
Git Remote Repos

• Having a repository hosting elsewhere

online, we can allow others to contribute
to the code making it canonical.
• We can have an offsite backup of our work.
• Work with others.
GitHub
GitHub

• Git on your local machine, connect to

GitHub to send your code out to the
world Web-based, social versioning control
• Cloud-based code repos
• Social coding = community coding
GitHub Tour

• Login, profile
• Bootcamp
• Look at open source projects
• commits, contributors
• Readme files
http://www.emoji-cheat-sheet.com
GitHub Tour

• Issue tracking software

• Setting milestones
• Projects mentioned at ARTIFACT Conf
• nib - Stylus mixins, utilities, components, and
gradient image generation

• This is Responsive - Online repo for Brad Frost's

site about RWD resources

• Kraken - A lightweight, mobile-first boilerplate for

front-end web developers

• Yeoman Style Prototype - Style guide generator

• OpenType Features - A Sass mix-in for turning

OpenType features on and off in your embedded
web fonts.

• HiSRC - The simple jQuery plugin for adaptive

images in responsive web design

• Responsive Layouts - Jen SImmons slides

GitHub Tour

• HTML5Please.com - markdown files, compiled to

GH pages

• Jekyl - easy wireframing tool

• Publish that list of ARTIFACT GitHub Projects onto

GitHub

• ARTIFACT Conf - issue tracking

{% include footer.html %}

http://jekyllrb.com/docs/templates/
http://www.momthisishowtwitterworks.com
http://jekyllrb.com/docs/templates/
http://quotesandaccents.com
GitHub Tour

• CSS Specificity - CSS poster with icons from The

Shining (hosting, custom domain name)

• HiSRC - commits, free hosting, code gone wrong!

Father of Unix OS
Still maintains the
linux kernel
Linux kernel is 3,500
lines of code
Every new version of
that OS has 1,000+
developers
contributing code
linux_old
linux_v2older
linux_coolStuff
Linus made Git to help
maintain that OS
Other types of Version
Control
Thank you!
Christopher Schmitt ★ http://twitter.com/teleject