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...
GitHub
GitHub
• Git on your local machine, connect to

GitHub to send your code out to the
world Web-based, social versioning con...
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...
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 tel...
CLI Basics
• Type a command with keyboard
• Use left and right arrows to edit a
command

• Use up and down arrows to cycle...
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 + c...
CLI Basics
• When writing a command or filename, try
TAB for autocompleting file or folder
names.

• TAB + TAB, when autocom...
CLI Basics
• When writing a command or filename, try
tab key for autocompleting file or folder
names.

• tab + tab, when aut...
CLI Basics
•

ls -l is going to give listing in a vertical file
format, with information about the file

•

ls -la is going ...
CLI Basics
• pwd shows current directory
• cd .. moves to parent folder
• cd / means the root of the hard drive
• cd Users...
CLI Basics
• Type open . that references the current
directory and it opens up the finder

• Type open .. to open parent di...
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 a...
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 comm...
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 ...
Git Merging Branches
• If there isn’t any conflict on the lines of
code in each respective branch, git lets
the merges just...
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
A...
<html>
<head>
<<<<<<< HEAD
<link type="text/css" rel="stylesheet"
media="all" href="style.css" />
=======
<!-- no style --...
<html>
<head>
<link type="text/css" rel="stylesheet"
media="all" href="style.css" />
</head>
<body>
<h1>Hello,World!</h1>
...
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 gr...
Git Remote Repos
• Technically, a “remote repo” can be any

repository that’s not the same as our the
repository we are wo...
Git Remote Repos
• Having a repository hosting elsewhere

online, we can allow others to contribute
to the code making it ...
GitHub
GitHub
• Git on your local machine, connect to

GitHub to send your code out to the
world Web-based, social versioning con...
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...
GitHub Tour
•

HTML5Please.com - markdown files, compiled to
GH pages

•
•

Jekyl - easy wireframing tool

•

ARTIFACT Conf...
{% 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, ...
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
[artifactconf] Github for People Who Don't Code
[artifactconf] Github for People Who Don't Code
[artifactconf] Github for People Who Don't Code
[artifactconf] Github for People Who Don't Code
[artifactconf] Github for People Who Don't Code
[artifactconf] Github for People Who Don't Code
[artifactconf] Github for People Who Don't Code
[artifactconf] Github for People Who Don't Code
[artifactconf] Github for People Who Don't Code
[artifactconf] Github for People Who Don't Code
[artifactconf] Github for People Who Don't Code
[artifactconf] Github for People Who Don't Code
[artifactconf] Github for People Who Don't Code
[artifactconf] Github for People Who Don't Code
[artifactconf] Github for People Who Don't Code
[artifactconf] Github for People Who Don't Code
[artifactconf] Github for People Who Don't Code
[artifactconf] Github for People Who Don't Code
[artifactconf] Github for People Who Don't Code
[artifactconf] Github for People Who Don't Code
[artifactconf] Github for People Who Don't Code
[artifactconf] Github for People Who Don't Code
[artifactconf] Github for People Who Don't Code
[artifactconf] Github for People Who Don't Code
[artifactconf] Github for People Who Don't Code
[artifactconf] Github for People Who Don't Code
[artifactconf] Github for People Who Don't Code
[artifactconf] Github for People Who Don't Code
[artifactconf] Github for People Who Don't Code
[artifactconf] Github for People Who Don't Code
[artifactconf] Github for People Who Don't Code
[artifactconf] Github for People Who Don't Code
[artifactconf] Github for People Who Don't Code
[artifactconf] Github for People Who Don't Code
[artifactconf] Github for People Who Don't Code
[artifactconf] Github for People Who Don't Code
[artifactconf] Github for People Who Don't Code
[artifactconf] Github for People Who Don't Code
[artifactconf] Github for People Who Don't Code
[artifactconf] Github for People Who Don't Code
[artifactconf] Github for People Who Don't Code
[artifactconf] Github for People Who Don't Code
[artifactconf] Github for People Who Don't Code
[artifactconf] Github for People Who Don't Code
[artifactconf] Github for People Who Don't Code
[artifactconf] Github for People Who Don't Code
[artifactconf] Github for People Who Don't Code
[artifactconf] Github for People Who Don't Code
[artifactconf] Github for People Who Don't Code
Upcoming SlideShare
Loading in...5
×

[artifactconf] Github for People Who Don't Code

1,333

Published on

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,333
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Transcript of "[artifactconf] Github for People Who Don't Code"

  1. 1. GITHUB FOR PEOPLE WHO DON’T CODE Christopher Schmitt ★ http://twitter.com/teleject
  2. 2. http://DWMGBook.com/
  3. 3. http://nonbreakingspace.tv/
  4. 4. • 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
  5. 5. GitHub
  6. 6. 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
  7. 7. GitHub Tour • Login, profile • Bootcamp • Look at open source projects • commits, contributors • Readme files
  8. 8. http://www.emoji-cheat-sheet.com
  9. 9. GitHub Tour • Issue tracking software • Setting milestones • Projects mentioned at ARTIFACT Conf
  10. 10. • 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
  11. 11. Version Control
  12. 12. Version Control • “Cowboy coding”
  13. 13. $
  14. 14. $
  15. 15. X
  16. 16. X
  17. 17. X
  18. 18. X
  19. 19. X
  20. 20. X X
  21. 21. X X
  22. 22. X X X X X X
  23. 23. X X X X X X
  24. 24. X X X X X X
  25. 25. X X X X X X
  26. 26. X X X X X
  27. 27. X X X X X
  28. 28. X X X X X X X X X
  29. 29. X X X X X X X X X
  30. 30. X X X X X X X X X
  31. 31. X X X X X X X X X
  32. 32. X X X X X X X X X
  33. 33. X X X X X X X X X
  34. 34. Version Control • “Cowboy coding” • Centralized code base
  35. 35. Version Control • “Cowboy coding” • Centralized code base • Decentralized code base
  36. 36. X
  37. 37. X
  38. 38. Command Line Interface
  39. 39. CLI Basics • Open a session, launch Terminal • Since you are logged into OSX, you are logged into your session!
  40. 40. 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.
  41. 41. 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
  42. 42. CLI Basics • To exit out of a session, close the Terminal window • Or type EXIT
  43. 43. CLI Basics • To exit out of a session, close the Terminal window • Or type EXIT
  44. 44. 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
  45. 45. 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
  46. 46. 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
  47. 47. 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.
  48. 48. 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
  49. 49. 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
  50. 50. CLI Basics • Type CLEAR to clean up the screen, if you are sick and tired of all that freaking text.
  51. 51. 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
  52. 52. CLI Basics
  53. 53. Git Basic Commands
  54. 54. Git CLI Commands git --version
  55. 55. Git CLI Commands git init [project name]
  56. 56. Git CLI Commands git add [file(s)]
  57. 57. Git CLI Commands git commit -a -m “message”
  58. 58. Git CLI Commands git status
  59. 59. Git CLI Commands git log
  60. 60. Git CLI Commands git checkout
  61. 61. Git CLI Commands git diff
  62. 62. Git CLI Commands git commit -m “what changed”
  63. 63. Git Branches
  64. 64. Git Branches
  65. 65. Git Branches Use git status to see which branch we are located in.
  66. 66. Git Branches If “on branch master”, people regard it as the “trunk”
  67. 67. Git Branches “Master” is the canonical version of your project
  68. 68. Git Branches
  69. 69. Git Branches Make copies of a project or branch to add, edit, revise code
  70. 70. Git Branches git branch name_of_change
  71. 71. Git Branches Once you created branch, you need to check it out
  72. 72. Git Branches git checkout name_of_change
  73. 73. 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
  74. 74. Git Branches • Check status of which branch you are on, use git status • To get back to master, use git checkout master
  75. 75. Git Branches git checkout -b name_of_change
  76. 76. Git Branches Branch A Branch B
  77. 77. Git Branches Branch A Branch B Branch C
  78. 78. Git Branches Branch WTF
  79. 79. Git Merging Branches
  80. 80. Git Merging Branches • Brings code back together from different branches or alternate dimensions • Also, brings together the changes or commits made in respective branches
  81. 81. Git Merging Branches • If there isn’t any conflict on the lines of code in each respective branch, git lets the merges just happen.
  82. 82. Git Merging Branches git branch
  83. 83. Git Merging Branches git master
  84. 84. Git Merging Branches git merge name_of_change
  85. 85. Git Merging Branches git log
  86. 86. 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.
  87. 87. <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>
  88. 88. <html> <head> <link type="text/css" rel="stylesheet" media="all" href="style.css" /> </head> <body> <h1>Hello,World!</h1> </body> </html>
  89. 89. Git Merging Branches git add lib/hello.html
  90. 90. Git Merging Branches git commit -m "Merged master fixed conflict."
  91. 91. Git Merging Branches
  92. 92. Git Remote Repos
  93. 93. Git Remote Repo • Creating a new repository that is a copy of another repository is called cloning.
  94. 94. 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.
  95. 95. 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.
  96. 96. 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.
  97. 97. GitHub
  98. 98. 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
  99. 99. GitHub Tour • Login, profile • Bootcamp • Look at open source projects • commits, contributors • Readme files
  100. 100. http://www.emoji-cheat-sheet.com
  101. 101. GitHub Tour • Issue tracking software • Setting milestones • Projects mentioned at ARTIFACT Conf
  102. 102. • 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
  103. 103. GitHub Tour • HTML5Please.com - markdown files, compiled to GH pages • • Jekyl - easy wireframing tool • ARTIFACT Conf - issue tracking Publish that list of ARTIFACT GitHub Projects onto GitHub
  104. 104. {% include footer.html %} http://jekyllrb.com/docs/templates/
  105. 105. http://www.momthisishowtwitterworks.com
  106. 106. http://jekyllrb.com/docs/templates/
  107. 107. http://quotesandaccents.com
  108. 108. GitHub Tour • CSS Specificity - CSS poster with icons from The Shining (hosting, custom domain name) • HiSRC - commits, free hosting, code gone wrong!
  109. 109. Father of Unix OS
  110. 110. Still maintains the linux kernel
  111. 111. Linux kernel is 3,500 lines of code
  112. 112. Every new version of that OS has 1,000+ developers contributing code
  113. 113. linux_old linux_v2older linux_coolStuff
  114. 114. Linus made Git to help maintain that OS
  115. 115. Other types of Version Control
  116. 116. Thank you! Christopher Schmitt ★ http://twitter.com/teleject

×