-
Notifications
You must be signed in to change notification settings - Fork 1
/
github.html
487 lines (429 loc) · 19.3 KB
/
github.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Github & Version Control - Girl Develop It</title>
<meta name="description" content="">
<meta name="author" content="">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link rel="stylesheet" href="css/reveal.css">
<link rel="stylesheet" href="css/theme/simple.css" id="theme">
<link rel="stylesheet" href="css/custom.css">
<link rel="stylesheet" href="lib/css/dark.css">
<link rel="stylesheet" href="lib/css/zenburn.css">
<!-- If the query includes 'print-pdf', use the PDF print sheet -->
<script>
document.write( '<link rel="stylesheet" href="css/print/' + ( window.location.search.match( /print-pdf/gi ) ? 'pdf' : 'paper' ) + '.css" type="text/css" media="print">' );
</script>
<!--[if lt IE 9]>
<script src="lib/js/html5shiv.js"></script>
<![endif]-->
</head>
<body>
<div class="reveal">
<!-- Any section element inside of this container is displayed as a slide -->
<div class="slides">
<section>
<h1>Version Control &</h1>
<h1>Github</h1>
</section>
<section>
<h3>What we will cover today</h3>
<ul>
<li class ="fragment">What is version control and why should we care?</li>
<li class ="fragment">Basics of git: the essential commands</li>
<li class ="fragment">"Gitting" social with GitHub</li>
</ul>
</section>
<!-- Version control-->
<section>
<section data-background="#f05b62">
<h2>Version Control</h2>
</section>
<section>
<h3>What is Version Control?</h3>
<p>Allows you (and your team) to do 2 powerful things</p>
<div class="fragment">
<h4>Collaborate</h4>
<p>Create anything with other people, from academic papers to entire websites and apps.</p>
</div>
<div class="fragment">
<h4>Track and Revert Changes</h4>
<p>See the changes that have been made</p>
<p>Go "back in time" to a past version</p>
</div>
</section>
<section>
<h3>Working without Version Control</h3>
<img src = "image/novc-filenames.png" alt = "Final final"/>
<p>No, really this time.</p>
</section>
<section>
<h3>Working without Version Control</h3>
<img src = "image/y-no-vcs.jpg" alt = "y u no"/>
</section>
</section>
<!-- <section>
<h3>Working without Version Control</h3>
<img src = "image/no-vc.png" alt = "Trying to make a grocery list with 5 people and no version control"/>
<p>The Horror!</p>
</section>
<section>
<h3>Working with Version Control</h3>
<img src = "image/with-vc.png" alt = "Successfully making a grocery list with 5 people and version control"/>
<p>Rainbows and bunny rabbits!</h3>
</section>
-->
<!-- VCS History -->
<section>
<section data-background="#f05b62">
<h2>Version Control History</h2>
</section>
<section>
<h3>Popular VCS</h3>
<p><span class ="green">1990s</span> -- CVS (Concurrent Version Systems)</p>
<p><span class ="green">2000s</span> -- SVN (Apache Subversion)</p>
<p><span class ="green">2005</span> -- Git (well, Git)</p>
</section>
<section>
<h3>Version Control Types</h3>
<div class="fragment">
<h4>Centralized Version Control</h4>
<p>Examples: CVS, SVN</p>
<p>One central server, each client (person) checks out and merges changes to main server</p>
</div>
<div class="fragment">
<h4>Distributed Version Control</h4>
<p>Examples: Git, Mercurial</p>
<p>Each client (person) has a local repository, which they can then reconcile with the main server.</p>
</div>
</section>
<section>
<h3>Centralized Vs Distributed</h3>
<a href="https://www.git-tower.com/learn/git/ebook/en/mac/appendix/from-subversion-to-git" target="_blank"><img src = "image/centralized-vs-distributed.png" alt ="centralized vs distributed vcs"/></a>
</section>
<section>
<h3>Version Control Distribution</h3>
<a href="https://www.backblaze.com/blog/backblaze-subversion-time-to-change/" target="_blank" alt ="Version Control Statistics"><img src = "image/version-control-share.jpg" alt ="Version control share between Bazaar, CVS, Git, Mercurial and Subversion"/></a>
</section>
</section>
<!-- Git-->
<section>
<section data-background="#f05b62">
<h2>Intro to Git</h2>
</section>
<section>
<h3>Why Use Git?</h3>
<ul>
<li><span class="green">Fast!</span> Access information quickly and efficiently.</li>
<li><span class="green">Distributed!</span> Everyone has her own local copy.</li>
<li><span class="green">Mind-bogglingly scalable!</span> Enables potentially thousands (millions!) of developers to work on single project.
<li><span class="green">Local!</span> You don't need a network connection to use it. You only need a remote server if you want to share your code with others (e.g., using GitHub).</li>
<li><span class="green">Branches!</span> Keep your coding experiments separate from code that is already working.</li>
<li>Everyone has a local copy of the <span class="green">shared files</span> and the <span class="green">history.</span></li>
</ul>
</section>
<section>
<h2>Git has its own peculiar vocabulary </h2>
<p> Here are some of the most basic ones. </p>
<ul>
<li> A <span class="green">repository</span> is where you keep all the files you want to track.</li>
<li> A <span class="green">branch</span> is the name for a separate line of development, with its own history.</li>
<li> A <span class="green">commit</span> is an object that holds information about a particular change. </li>
<li> <span class="green">HEAD</span> refers to the most recent commit on the current branch.</li>
</ul>
</section>
</section>
<section>
<h2>Workflow</h2>
<ul>
<li>Branch</li>
<li>Add, edit, delete, commit</li>
<li>Open a pull request</li>
<li>Review & discuss</li>
<li>Deploy</li>
<li>Merge</li>
</ul>
<img src="image/githubworkflow.png" />
</section>
<section>
<h2>Workflow</h2>
<img src="image/basic-remote-workflow.png" />
</section>
</section>
<!-- REPO -->
<section>
<section data-background="#f05b62">
<h2>Repository</h2>
</section>
<section>
<h2>Repo</h2>
<p>A <strong>repository</strong> is usually used to organize a single project. Repositories can contain folders and files, images, videos, spreadsheets, and data sets – anything your project needs. We recommend including a README, or a file with information about your project.</p>
</section>
<section>
<h3>Create your first repository</h3>
<img src = "image/bootcamp_2_newrepo.jpg" alt ="How to create a new repository. Image from https://help.github.com/articles/create-a-repo"/>
</section>
<section>
<h3>Create your first repository</h3>
<img src = "image/bootcamp_2_repoinfo.png" alt ="How to create a new repository. Image from https://help.github.com/articles/create-a-repo"/>
</section>
<section>
<h3>Create your first repository</h3>
<h4>ReadME</h4>
<blockquote>
While a README isn't a required part of a GitHub repository, it is a very good idea to have one. READMEs are a great place to describe your project or add some documentation such as how to install or use your project. You might want to include contact information - if your project becomes popular people will want to help you out.
</blockquote>
</section>
<section>
<h2>Add, edit, delete, commit</h2>
<p>Whenever you add, edit, or delete a file, you're making a commit, and adding them to your branch.</p>
<p>Each commit has an associated commit message, helpful for others to understand your code.</p>
<p>Each commit is a separate unit of change, letting you roll back changes.</p>
</section>
<section>
<h3>Add, edit, delete, commit</h3>
<img src="image/commit-changes.png">
</section>
<section>
<h3>View history</h3>
<img src="image/view-history.png">
</section>
<section>
<h3>Initialize repository with Git</h3>
<pre><code data-trim class ="command-line">git init
git status
</code></pre>
</section>
<section>
<h3>Add files</h3>
<p>Create a new hello_world.txt file in your new folder</p>
<p>Check repo status</p>
<pre><code data-trim class ="command-line">
git status
</code></pre>
<p>Tell Git to track our new file</p>
<pre><code data-trim class ="command-line">
git add hello_world.txt
git status
</code></pre>
<p>File is now tracked by Git</p>
</section>
<section>
<h3>Changes and commits</h3>
<p>Open hello_world.txt and add some more text</p>
<pre><code data-trim class ="command-line">
git status
</code></pre>
<p>Stage and commit the change</p>
<pre><code data-trim class ="command-line">
git add hello_world.txt
git commit -m "First commit. Added hello world to repository."
</code></pre>
</section>
</section>
<section data-background="#f05b62">
<h2><a style="color: #ffffff;" href="exercises/start_git/start_git_instructions.html" target="_blank">Exercise: Manage Your Code With Git</a></h2>
</section>
<section>
<section data-background="#f05b62">
<h2>Branching</h2>
</section>
<section>
<h3>Branching</h3>
<ul>
<li>Develop different code on the same base</li>
<li>Conduct exploratory work without affecting the work on master branch (e.g. to try out new ideas)</li>
<li>Incorporate changes to your master branch only when you are ready</li>
</ul>
</section>
<section>
<h3>Branching</h3>
<p>Create a new branch</p>
<img src="image/create-new-branch.png" />
</section>
<section>
<h3>Branching</h3>
<p>Create a new branch called trucs-slides</p>
<pre><code data-trim class ="command-line">
git checkout -b trucs-slides
</code></pre>
<p>Add new lines to hello_world.txt</p>
<pre><code data-trim class ="command-line">
git add hello_world.txt
git commit -m "Adding changes to trucs-slides
</code></pre>
</section>
<section>
<h3>Branching</h3>
<p>Switching branches</p>
<img src="image/switch-branch.png" />
</section>
<section>
<h3>Branching</h3>
<h4>Switching branches</h4>
<p>See all branches. Branch with * is active</p>
<pre><code data-trim class ="command-line">
git branch
</code></pre>
<p>Switch to master and look at hello_world.txt</p>
<pre><code data-trim class ="command-line">
git checkout master
</code></pre>
<p>Switch to version2 and look at hello_world.txt</p>
<pre><code data-trim class ="command-line">
git checkout version2
</code></pre>
</section>
</section>
<section>
<section data-background="#f05b62">
<h2>Deploy</h2>
</section>
<section>
<h2>Commits</h2>
<p>Knowledge Test: When you <code>commit</code>, will the chnages you make show up online?</p>
<p class="fragment">Commits are local, so they don't appear in your host environment until you <code>push</code></p>
</section>
<section>
<h2>Deploy</h2>
<p>Deploy your changes to verify them in production.</p>
<p>If your branch causes issues, you can roll it back by deploying the existing master into production.</p>
</section>
</section>
<section>
<section data-background="#f05b62">
<h2>Forking</h3>
</section>
<section>
<h3>Forking</h3>
<ul>
<li>There are <span class = "green">MILLIONS</span> of public repositories on GitHub</li>
<li>If you want to <span class = "green">use</span> or <span class = "green">contribute</span> to a repository, you can fork it.</li>
</ul>
</section>
<section>
<h3>Forking</h3>
<img src = "image/bootcamp_3_fork.jpg" alt ="How to fork a repository. Image from https://help.github.com/articles/fork-a-repo"/>
</section>
<section>
<h3>Forking</h3>
<h4>Clone - to get a local repository of your fork</h4>
<pre><code data-trim class ="command-line">
cd ../
git clone https://github.com/username/FORKED-REPO-NAME.git
cd FORKED-REPO-NAME
git remote add upstream https://github.com/original-username/FORKED-REPO-NAME.git
# Assigns the original repository to a remote called "upstream"
git fetch upstream
# Pulls in changes not present in your local repository, without modifying your files
</code></pre>
</section>
</section>
</section>
<section>
<section data-background="#f05b62">
<h2>Pull Requests & Merging</h2>
</section>
<section>
<h2>Pull Requests (PRs)</h2>
<p>Pull Requests initiate discussion about your commits.</p>
<p>You can open a Pull Request at any point during the development process.</p>
</section>
<section>
<h3>Pull Requests</h3>
<ul>
<li class = "fragment">After you <code>fork</code> and <code>clone</code> a repository all pushed changes will go to your fork</li>
<li class = "fragment">These changes will not affect the original repository</li>
<li class = "fragment">If you would like to get your changes to be incorporated into the original repo, you can submit a pull request</li>
</ul>
</section>
<section>
<h3>Start Pull Request</h3>
<img src="image/start-pr-desktop.png" alt ="How to initiate a pull request. Image from https://help.github.com/articles/using-pull-requests"/>
</section>
<section>
<h3>Managing Pull Requests</h3>
<p>If you are the owner of repo, you will review and decide whether to merge in the pull requests you receive.</p>
Learn more at <a href = "https://help.github.com/categories/collaborating-on-projects-using-issues-and-pull-requests" target="_blank" alt="Links to tutorials on pull requests and collaboration">Github Collaboration Tutorials</a>
</section>
<section>
<h2>Review & discuss</h2>
<p>Pull Requests are designed to encourage and capture discussion to make your code great.</p>
<p>If someone comments that there is a bug, you can fix it in your branch and push up the change.</p>
<p>GitHub will show your new commits and any additional feedback.</p>
</section>
<section>
<h2>Merge</h2>
<p>Merge your code with the master branch!</p>
<img src="image/merge-pr.png" />
<p>Once merged, Pull Requests preserve a record of the historical changes to your code.</p>
</section>
<section>
<h3>What could possibly go wrong?</h3>
<img src="image/merge_conflicts_are_coming.jpg"/>
</section>
<section>
<h3>What is a merge conflict?</h3>
<img src="image/merge-conflict.png"/>
</section>
</section>
<section data-background="#f05b62">
<h2><a style="color: #ffffff;" href="exercises/directory/directory_instructions.html" target="_blank">Exercise: Contribute To A Repo</a></h2>
</section>
<section>
<section data-background="#f05b62">
<h2>Let's your site on the web!</h2>
</section>
<section>
<h2>Github Pages</h2>
<ul>
<li>Public webpages hosted and published through Github</li>
<li>Designed to host your personal, organization, or project pages directly from a GitHub repository</li>
</ul>
</section>
</section>
<section data-background="#f05b62">
<h2><a style="color: #ffffff;" href="exercises/ghpages/ghpages_instructions.html" target="_blank">Exercise: Host Your Stuff On Github Pages</a></h2>
</section>
<section>
<h2>Questions?</h2>
<div style = "font-size:1200%; height:100%; margin-top:40%" class ="blue">?
<div class ="clear"></div></div>
</section>
<section>
<h1>THE END</h1>
<h3>Mary Ann & Truc</h3>
</section>
</div>
</div>
<script src="lib/js/head.min.js"></script>
<script src="js/reveal.min.js"></script>
<script>
// Full list of configuration options available here:
// https://github.com/hakimel/reveal.js#configuration
Reveal.initialize({
controls: true,
progress: true,
history: true,
center: true,
theme: Reveal.getQueryHash().theme, // available themes are in /css/theme
transition: Reveal.getQueryHash().transition || 'default', // default/cube/page/concave/zoom/linear/fade/none
// Parallax scrolling
// parallaxBackgroundImage: 'https://s3.amazonaws.com/hakim-static/reveal-js/reveal-parallax-1.jpg',
// parallaxBackgroundSize: '2100px 900px',
// Optional libraries used to extend on reveal.js
dependencies: [
{ src: 'lib/js/classList.js', condition: function() { return !document.body.classList; } },
{ src: 'plugin/markdown/marked.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
{ src: 'plugin/markdown/markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
{ src: 'plugin/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } },
{ src: 'plugin/zoom-js/zoom.js', async: true, condition: function() { return !!document.body.classList; } },
{ src: 'plugin/notes/notes.js', async: true, condition: function() { return !!document.body.classList; } }
]
});
</script>
</body>
</html>