-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathgit.html
310 lines (267 loc) · 38 KB
/
git.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
<!DOCTYPE html><html><head><meta charset="utf-8"><style>.codehilite pre .hll { background-color: #f8eec7 }
.codehilite pre { background: #ffffff; color: #333333 }
.codehilite pre .c { color: #999988; font-style: italic } /* Comment */
.codehilite pre .err { color: #a61717; background-color: #e3d2d2 } /* Error */
.codehilite pre .k { font-weight: bold } /* Keyword */
.codehilite pre .n { color: #333333 } /* Name */
.codehilite pre .o { font-weight: bold } /* Operator */
.codehilite pre .cm { color: #999988; font-style: italic } /* Comment.Multiline */
.codehilite pre .cp { color: #999999; font-weight: bold } /* Comment.Preproc */
.codehilite pre .c1 { color: #999988; font-style: italic } /* Comment.Single */
.codehilite pre .cs { color: #999988; font-style: italic } /* Comment.Special */
.codehilite pre .gd { color: #000000; background-color: #ffdddd } /* Generic.Deleted */
.codehilite pre .ge { font-style: italic } /* Generic.Emph */
.codehilite pre .gr { color: #aa0000 } /* Generic.Error */
.codehilite pre .gh { color: #999999 } /* Generic.Heading */
.codehilite pre .gi { color: #000000; background-color: #ddffdd } /* Generic.Inserted */
.codehilite pre .go { color: #888888 } /* Generic.Output */
.codehilite pre .gp { color: #555555 } /* Generic.Prompt */
.codehilite pre .gs { font-weight: bold } /* Generic.Strong */
.codehilite pre .gu { color: #800080; font-weight: bold } /* Generic.Subheading */
.codehilite pre .gt { color: #aa0000 } /* Generic.Traceback */
.codehilite pre .kc { font-weight: bold } /* Keyword.Constant */
.codehilite pre .kd { font-weight: bold } /* Keyword.Declaration */
.codehilite pre .kn { font-weight: bold } /* Keyword.Namespace */
.codehilite pre .kp { font-weight: bold } /* Keyword.Pseudo */
.codehilite pre .kr { font-weight: bold } /* Keyword.Reserved */
.codehilite pre .kt { font-weight: bold } /* Keyword.Type */
.codehilite pre .m { color: #945277 } /* Literal.Number */
.codehilite pre .s { color: #df5000 } /* Literal.String */
.codehilite pre .na { color: #008080 } /* Name.Attribute */
.codehilite pre .nb { color: #0086b3 } /* Name.Builtin */
.codehilite pre .nc { color: #445588; font-weight: bold } /* Name.Class */
.codehilite pre .no { color: #094e99 } /* Name.Constant */
.codehilite pre .nd { color: #333333 } /* Name.Decorator */
.codehilite pre .ni { color: #800080 } /* Name.Entity */
.codehilite pre .ne { color: #990000; font-weight: bold } /* Name.Exception */
.codehilite pre .nf { color: #945277; font-weight: bold } /* Name.Function */
.codehilite pre .nl { color: #333333 } /* Name.Label */
.codehilite pre .nn { color: #555555 } /* Name.Namespace */
.codehilite pre .nx { color: #333333 } /* Name.Other */
.codehilite pre .py { color: #333333 } /* Name.Property */
.codehilite pre .nt { color: #000080 } /* Name.Tag */
.codehilite pre .nv { color: #008080 } /* Name.Variable */
.codehilite pre .ow { font-weight: bold } /* Operator.Word */
.codehilite pre .w { color: #bbbbbb } /* Text.Whitespace */
.codehilite pre .mb { color: #945277 } /* Literal.Number.Bin */
.codehilite pre .mf { color: #945277 } /* Literal.Number.Float */
.codehilite pre .mh { color: #945277 } /* Literal.Number.Hex */
.codehilite pre .mi { color: #945277 } /* Literal.Number.Integer */
.codehilite pre .mo { color: #945277 } /* Literal.Number.Oct */
.codehilite pre .sb { color: #df5000 } /* Literal.String.Backtick */
.codehilite pre .sc { color: #df5000 } /* Literal.String.Char */
.codehilite pre .sd { color: #df5000 } /* Literal.String.Doc */
.codehilite pre .s2 { color: #df5000 } /* Literal.String.Double */
.codehilite pre .se { color: #df5000 } /* Literal.String.Escape */
.codehilite pre .sh { color: #df5000 } /* Literal.String.Heredoc */
.codehilite pre .si { color: #df5000 } /* Literal.String.Interpol */
.codehilite pre .sx { color: #df5000 } /* Literal.String.Other */
.codehilite pre .sr { color: #017936 } /* Literal.String.Regex */
.codehilite pre .s1 { color: #df5000 } /* Literal.String.Single */
.codehilite pre .ss { color: #8b467f } /* Literal.String.Symbol */
.codehilite pre .bp { color: #999999 } /* Name.Builtin.Pseudo */
.codehilite pre .vc { color: #008080 } /* Name.Variable.Class */
.codehilite pre .vg { color: #008080 } /* Name.Variable.Global */
.codehilite pre .vi { color: #008080 } /* Name.Variable.Instance */
.codehilite pre .il { color: #945277 } /* Literal.Number.Integer.Long */</style><title>git</title></head><body><article class="markdown-body"><div class="hidden"><meta property="og:image" content="http://dinphil.github.io/code-weekend/assets/img/logo.png"><link rel="shortcut icon" href="assets/images/favicon.png"><link rel="stylesheet" href="assets/css/global.css"><link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css"><link rel="stylesheet" href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,400,300,600,700' type='text/css'></div>
<p><img class="full-img" src="assets/img/logo.png"><div class="nav-items"><div class="nav-item" id="jquery-menu">jQuery</div><div class="nav-item" id="git-menu">Git/Command Line</div></div></p>
<h1 id="code-camp"><a name="user-content-code-camp" href="#code-camp" class="headeranchor-link" aria-hidden="true"><span class="headeranchor"></span></a>Code Camp</h1>
<h2 id="learning-the-basics-of-real-code"><a name="user-content-learning-the-basics-of-real-code" href="#learning-the-basics-of-real-code" class="headeranchor-link" aria-hidden="true"><span class="headeranchor"></span></a>Learning the basics of real code</h2>
<p>Code Camp is a workshop series hosted by the Dining Philosophers at the University of Pennsylvania to teach students real-world coding skills from scratch. These workshops are highly interactive and offer participants a lot of support in the form of mentors that help as participants code.</p>
<blockquote>
<p>These workshops have been organized by the Dining Philosophers with the help of many talented individuals. Individual workshops will be credited to the people that made and ran them.</p>
</blockquote>
<h1 id="intro-to-jquery"><a name="user-content-intro-to-jquery" href="#intro-to-jquery" class="headeranchor-link" aria-hidden="true"><span class="headeranchor"></span></a>Intro to jQuery <a id="jquery-section"></a></h1>
<h2 id="with-cathy-chen-and-joe-farned"><a name="user-content-with-cathy-chen-and-joe-farned" href="#with-cathy-chen-and-joe-farned" class="headeranchor-link" aria-hidden="true"><span class="headeranchor"></span></a>with Cathy Chen and Joe Farned</h2>
<p>Scheduled for November 22th, 2014. The tutorial will run from 3 PM to 5 PM in McClelland. See the powerpoint slides for the workshop <a href="assets/intro_jquery.pdf">here</a>;</p>
<h3 id="to-install"><a name="user-content-to-install" href="#to-install" class="headeranchor-link" aria-hidden="true"><span class="headeranchor"></span></a>To install</h3>
<ul>
<li>Sublime Text</li>
<li>Google Chrome</li>
</ul>
<h3 id="what-is-jquery"><a name="user-content-what-is-jquery" href="#what-is-jquery" class="headeranchor-link" aria-hidden="true"><span class="headeranchor"></span></a>What is jQuery?</h3>
<p>jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript. (<a href="http://jquery.com/"><a href="http://jquery.com/"><a href="http://jquery.com/">http://jquery.com/</a></a></a>).</p>
<p>It basically let’s you select certain HTML elements and do cool things with them! Brush up on what HTML is <a href="http://www.w3schools.com/html/html_intro.asp">here</a>.</p>
<h3 id="playing-around-in-the-google-chrome-javascript-console"><a name="user-content-playing-around-in-the-google-chrome-javascript-console" href="#playing-around-in-the-google-chrome-javascript-console" class="headeranchor-link" aria-hidden="true"><span class="headeranchor"></span></a>Playing around in the Google Chrome Javascript Console</h3>
<p>What is the Javascript Console? It’s a cool tool on Chrome that you can use when developing. You can pull it up by clicking the menu on the top right of the browser and going down to More Tools > Javascript Console. It looks like this:</p>
<p><img alt="Console" src="assets/img/console.png" /></p>
<p>To get acquainted with jQuery and Javascript, it’s a great idea to play around with websites using the console! It allows you to inject bits of Javascript code into the website so you can see whatever changes you make live. (Make sure the website you’re playing around with has jQuery enabled like <a href="http://www.dolphin.upenn.edu/hksa/index.html">this</a> one.)</p>
<p>Things you can try:</p>
<div class="codehilite"><pre> <span class="c1">// changing the css of the area</span>
<span class="err">$</span><span class="p">(</span><span class="s">"[HTML SELECTOR]"</span><span class="p">).</span><span class="n">css</span><span class="p">(</span><span class="s">"color"</span><span class="p">,</span> <span class="s">"red"</span><span class="p">);</span>
<span class="c1">// adding event listeners so you can change the area when you do something to it (mouseclick)</span>
<span class="err">$</span><span class="p">(</span><span class="s">"[HTML SELECTOR]"</span><span class="p">).</span><span class="n">on</span><span class="p">(</span><span class="s">"click"</span><span class="p">,</span> <span class="n">function</span><span class="p">()</span> <span class="p">{</span>
<span class="err">$</span><span class="p">(</span><span class="s">"[HTML SELECTOR]"</span><span class="p">).</span><span class="n">css</span><span class="p">(</span><span class="s">"color"</span><span class="p">,</span> <span class="s">"blue"</span><span class="p">);</span>
<span class="p">});</span>
<span class="c1">// the cool thing about jQuery is that you can click one area of the page and have something happen to a totally separate section of the page</span>
</pre></div>
<h3 id="navbar-demo"><a name="user-content-navbar-demo" href="#navbar-demo" class="headeranchor-link" aria-hidden="true"><span class="headeranchor"></span></a>Navbar Demo</h3>
<p>You can use jQuery to make your menus interactive. Here’s a simple example of a dropdown navbar you can make with jQuery.</p>
<p><a href="assets/html/navbar_after.html">Let’s start by seeing how it will look when we’ve finished!</a></p>
<h4 id="the-starting-file"><a name="user-content-the-starting-file" href="#the-starting-file" class="headeranchor-link" aria-hidden="true"><span class="headeranchor"></span></a>The Starting File</h4>
<p><a href="assets/html/navbar_before.html">The starting file</a></p>
<p>We’ll be giving you a small template to work with! All the CSS styles and HTML markup has been done for you so all you need to do is add the Javascript/jQuery between the “script” tags!</p>
<h4 id="opening-the-submenu"><a name="user-content-opening-the-submenu" href="#opening-the-submenu" class="headeranchor-link" aria-hidden="true"><span class="headeranchor"></span></a>Opening the SubMenu</h4>
<p>First let’s add an event listener to the button:</p>
<div class="codehilite"><pre><span class="w"> </span><span class="err">$</span><span class="p">(</span><span class="c1">'.myMenu > li').bind('mouseover', openSubMenu);</span>
</pre></div>
<p>This calls the function “openSubMenu” when you mouse over the menu button.</p>
<p>Now let’s create the function “openSubMenu”:</p>
<div class="codehilite"><pre><span class="w"> </span><span class="vg">function</span><span class="w"> </span><span class="vg">openSubMenu</span><span class="p">()</span><span class="w"> </span><span class="p">{</span>
<span class="w"> </span><span class="o">//</span><span class="w"> </span><span class="vg">changes</span><span class="w"> </span><span class="vg">the</span><span class="w"> </span><span class="vg">visibility</span><span class="w"> </span><span class="vg">of</span><span class="w"> </span><span class="vg">the</span><span class="w"> </span><span class="vg">submenu</span><span class="w"> </span><span class="vg">to</span><span class="w"> </span><span class="vg">visible</span>
<span class="w"> </span><span class="err">$</span><span class="p">(</span><span class="vg">this</span><span class="p">)</span><span class="o">.</span><span class="vg">find</span><span class="p">(</span><span class="c1">'ul').css('visibility', 'visible'); </span>
<span class="w"> </span><span class="p">};</span>
</pre></div>
<p>Now when you hover over the button it should drop down! But the problem now is that it doesn’t close when you leave the button.</p>
<h4 id="closing-the-submenu"><a name="user-content-closing-the-submenu" href="#closing-the-submenu" class="headeranchor-link" aria-hidden="true"><span class="headeranchor"></span></a>Closing the SubMenu</h4>
<p>Let’s add another event listner to the button:</p>
<div class="codehilite"><pre><span class="w"> </span><span class="err">$</span><span class="p">(</span><span class="c1">'.myMenu > li').bind('mouseout', closeSubMenu);</span>
</pre></div>
<p>This calls the function “closeSubMenu” when your mouse leaves the menu button.</p>
<p>Now let’s create the function “closeSubMenu”:</p>
<div class="codehilite"><pre><span class="w"> </span><span class="vg">function</span><span class="w"> </span><span class="vg">closeSubMenu</span><span class="p">()</span><span class="w"> </span><span class="p">{</span>
<span class="w"> </span><span class="o">//</span><span class="w"> </span><span class="vg">changes</span><span class="w"> </span><span class="vg">the</span><span class="w"> </span><span class="vg">visibility</span><span class="w"> </span><span class="vg">of</span><span class="w"> </span><span class="vg">the</span><span class="w"> </span><span class="vg">submenu</span><span class="w"> </span><span class="vg">to</span><span class="w"> </span><span class="vg">hidden</span>
<span class="w"> </span><span class="err">$</span><span class="p">(</span><span class="vg">this</span><span class="p">)</span><span class="o">.</span><span class="vg">find</span><span class="p">(</span><span class="c1">'ul').css('visibility', 'hidden'); </span>
<span class="w"> </span><span class="p">};</span>
</pre></div>
<p>Now when your mouse leaves the sub menu will disappear.</p>
<h3 id="hadouken-animation-challenge"><a name="user-content-hadouken-animation-challenge" href="#hadouken-animation-challenge" class="headeranchor-link" aria-hidden="true"><span class="headeranchor"></span></a>Hadouken Animation Challenge</h3>
<p>For some practice, let’s build an animated Street Fighter using the jQuery we have learned. The original tutorial can be found <a href="http://www.thinkful.com/learn/intro-to-jquery">here</a>.</p>
<p><a href="assets/html/fighter_after.html">Let’s start by seeing how it will look when we’ve finished!</a></p>
<h4 id="download-the-file"><a name="user-content-download-the-file" href="#download-the-file" class="headeranchor-link" aria-hidden="true"><span class="headeranchor"></span></a>Download the file</h4>
<p>Let’s start by downloading a file to get us started <a href="assets/html/fighter_before.html">here</a>. This file (fighter_before.html) is a basic HTML file. We’ve already included the line:</p>
<div class="codehilite"><pre> <span class="nt"><script</span> <span class="na">src=</span><span class="s">"http://code.jquery.com/jquery-1.11.0.min.js"</span><span class="nt">></script></span>
</pre></div>
<p>in the header. This imports the jQuery library into your file.</p>
<h4 id="use-jquery-to-add-the-starting-image"><a name="user-content-use-jquery-to-add-the-starting-image" href="#use-jquery-to-add-the-starting-image" class="headeranchor-link" aria-hidden="true"><span class="headeranchor"></span></a>Use jQuery to add the starting image</h4>
<p>Our ‘body’ right now has only on one ‘div’ which is ‘#my-div’. We will start by adding the image to this div by adding the following code right below the ‘/<strong> Add your code between here </strong>/’ comment:</p>
<div class="codehilite"><pre><span class="w"> </span><span class="err">$</span><span class="p">(</span><span class="c1">'#my-div').html('<img src="http://i.imgur.com/90Mmdcm.png">')</span>
</pre></div>
<p>This adds the following ‘HTML’ under my ‘#my-div’:</p>
<div class="codehilite"><pre><span class="w"> </span><span class="o"><</span><span class="vg">img</span><span class="w"> </span><span class="vg">src</span><span class="o">=</span><span class="s2">"http://i.imgur.com/90Mmdcm.png"</span><span class="o">></span>
</pre></div>
<p>Now, when you open your ‘before_fighter.html’ in your browser, you should see Ryu.</p>
<h4 id="add-the-first-animation"><a name="user-content-add-the-first-animation" href="#add-the-first-animation" class="headeranchor-link" aria-hidden="true"><span class="headeranchor"></span></a>Add the first animation</h4>
<p>We want Ryu to get ready to fire when we hover our mouse over him. To do this, we use jQuery to select the image. Add the following code:</p>
<div class="codehilite"><pre><span class="w"> </span><span class="err">$</span><span class="p">(</span><span class="c1">'#my-div img').hover( function() {</span>
<span class="w"> </span><span class="vg">this</span><span class="o">.</span><span class="vg">src</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="c1">'http://i.imgur.com/nTj3Fxx.gif'</span>
<span class="w"> </span><span class="p">},</span><span class="w"> </span><span class="vg">function</span><span class="p">()</span><span class="w"> </span><span class="p">{</span>
<span class="w"> </span><span class="vg">this</span><span class="o">.</span><span class="vg">src</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="c1">'http://i.imgur.com/90Mmdcm.png'</span>
<span class="w"> </span><span class="p">})</span>
</pre></div>
<p>The first function says we should replace the current image with the one at ‘<a href="http://i.imgur.com/nTj3Fxx.gif">http://i.imgur.com/nTj3Fxx.gif</a>‘ when we hover the image. The second function tells us what image to use when we move our mouse off the image. Putting them together, we get a nice animating.</p>
<h4 id="make-ryu-shoot-first-step"><a name="user-content-make-ryu-shoot-first-step" href="#make-ryu-shoot-first-step" class="headeranchor-link" aria-hidden="true"><span class="headeranchor"></span></a>Make Ryu shoot: first step</h4>
<p>When the user clicks on Ryu, we want him to hunch down and appear as if he’s shooting. To do this, we use the jQuery ‘mousedown’ function. ‘.mousedown’ is called when we click on the image. Add the following line:</p>
<div class="codehilite"><pre><span class="w"> </span><span class="err">$</span><span class="p">(</span><span class="c1">'#my-div img').mousedown( function() {</span>
<span class="w"> </span><span class="vg">this</span><span class="o">.</span><span class="vg">src</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="c1">'http://i.imgur.com/Rfj0a80.png' </span>
<span class="w"> </span><span class="p">})</span>
</pre></div>
<p>Now, the image we added earlier will be replaced by the new image of Ryu hunched down. As soon as we’re done clicking (which is pretty much instantaneous), we want to revert back to the image of Ryu we started with. To this, we use the mouse-up function, which is not much different than the ‘.mousedown’. It’s just called when we finish clicking. Add the following line:</p>
<div class="codehilite"><pre><span class="w"> </span><span class="err">$</span><span class="p">(</span><span class="c1">'#my-div img').mouseup(function() {</span>
<span class="w"> </span><span class="vg">this</span><span class="o">.</span><span class="vg">src</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="c1">'http://i.imgur.com/90Mmdcm.png'</span>
<span class="w"> </span><span class="p">})</span>
</pre></div>
<h4 id="make-ryu-shoot-second-step"><a name="user-content-make-ryu-shoot-second-step" href="#make-ryu-shoot-second-step" class="headeranchor-link" aria-hidden="true"><span class="headeranchor"></span></a>Make Ryu shoot: second step</h4>
<p>Now, we’re going to add in the Hadouken - what Ryu shoots. To do this, we realize that when we click, we want a new image - of the Hadouken - to be added to screen. </p>
<p>In fact, we just saw an example of how to get a click event - the ‘.mousedown’ function! Let’s use it again. This time, we’ll add a new image to ‘#my-div’. Add the following code:</p>
<div class="codehilite"><pre><span class="w"> </span><span class="err">$</span><span class="p">(</span><span class="c1">'#my-div img').mousedown(function() {</span>
<span class="w"> </span><span class="err">$</span><span class="p">(</span><span class="c1">'#my-div').append(</span>
<span class="w"> </span><span class="c1">'<img class="shooting-space" src="http://i.imgur.com/oTyQRvX.gif">'</span>
<span class="w"> </span><span class="p">);</span>
<span class="w"> </span><span class="p">})</span>
</pre></div>
<p>We give our image the class ‘shooting-space’ so that we can modify it in the next step. This will make sense in just a second.</p>
<h4 id="make-ryu-shoot-third-step"><a name="user-content-make-ryu-shoot-third-step" href="#make-ryu-shoot-third-step" class="headeranchor-link" aria-hidden="true"><span class="headeranchor"></span></a>Make Ryu shoot: third step</h4>
<p>Here’s where the real magic occurs. We’re going to use the jQuery animate function. We’ll explain it here, but you can also read the <a href="http://api.jquery.com/animate/">docs</a> for a good idea of what it does.</p>
<p>First, we notice the ‘.mousedown’ function below, which will look familiar. When we click Ryu, the followingn code will execute. Go ahead and add it to your file:</p>
<div class="codehilite"><pre><span class="w"> </span><span class="err">$</span><span class="p">(</span><span class="c1">'#my-div img').mousedown(function() {</span>
<span class="w"> </span><span class="err">$</span><span class="p">(</span><span class="c1">'.shooting-space').animate( {</span>
<span class="w"> </span><span class="s2">"margin-left"</span><span class="o">:</span><span class="w"> </span><span class="s2">"600px"</span>
<span class="w"> </span><span class="p">},</span><span class="w"> </span><span class="il">1000</span><span class="p">,</span><span class="w"> </span><span class="c1">'swing', function() {</span>
<span class="w"> </span><span class="vg">this</span><span class="o">.</span><span class="vg">remove</span><span class="p">();</span>
<span class="w"> </span><span class="p">})</span>
<span class="w"> </span><span class="p">})</span>
</pre></div>
<p>the ‘.animate’ function will, well, animate the Hadouken. Let’s break it apart. First, </p>
<div class="codehilite"><pre><span class="w"> </span><span class="s2">"margin-left"</span><span class="o">:</span><span class="w"> </span><span class="s2">"600px"</span>
</pre></div>
<p>tells us that we are going to slowly add a margin (space) to the left of the Hadouken image. In fact, we want it to take</p>
<div class="codehilite"><pre><span class="w"> </span><span class="il">1000</span>
</pre></div>
<p>milliseconds to slowly add this margin. The ‘swing’ part tells jQuery to ease in and out. We could have instead used ‘linear’ which would not ease in and out. Finally, the last function says what the code should do when the animation is finished - in this case, remove the image of the Hadouken.</p>
<h3 id="make-sure-its-working"><a name="user-content-make-sure-its-working" href="#make-sure-its-working" class="headeranchor-link" aria-hidden="true"><span class="headeranchor"></span></a>Make sure it’s working</h3>
<p>To check your final product, you can download a finished version <a href="assets/html/fighter_after.html">here</a>.</p>
<h1 id="intro-to-git-and-command-line"><a name="user-content-intro-to-git-and-command-line" href="#intro-to-git-and-command-line" class="headeranchor-link" aria-hidden="true"><span class="headeranchor"></span></a>Intro to Git and Command Line <a id="git-section"></a></h1>
<h2 id="with-brynn-claypoole"><a name="user-content-with-brynn-claypoole" href="#with-brynn-claypoole" class="headeranchor-link" aria-hidden="true"><span class="headeranchor"></span></a>with Brynn Claypoole</h2>
<p>Schdeuled for October 25th, 2014. The tutorial will run from 3 PM to 5 PM in McClelland.</p>
<h3 id="installing-git"><a name="user-content-installing-git" href="#installing-git" class="headeranchor-link" aria-hidden="true"><span class="headeranchor"></span></a>Installing Git</h3>
<p>Start off by getting ready to use Git via command line. You can find downloadable versions <a href="http://git-scm.com/downloads">here</a>. You may already have git installed: If you have a Mac/Linux machine, search for the “Terminal” application, then type “git” and hit enter. If it doesn’t say “command not found”, you should be good! Windows users should search their applications for “Git Bash”.</p>
<h3 id="what-is-command-line"><a name="user-content-what-is-command-line" href="#what-is-command-line" class="headeranchor-link" aria-hidden="true"><span class="headeranchor"></span></a>What is command line?</h3>
<p>Have you ever seen programmers, maybe in class, in the computer lab, or on TV, typing into a black box on their computer screens? </p>
<p>That box is known as a command line. Command line is a less visual way of interacting with your computer. In some ways, it’s like a “Finder” window. It allows you to open files and navigate through your directories. It’s also the interface for interacting with your computer in more complicated and technical ways. You can run processes and programs, ping Internet servers, and do a whole host of other things that require some technical knowledge.</p>
<p><img alt="Terminal" src="assets/img/terminal.png" /></p>
<p>This is what command line looks like on a Mac.</p>
<p>On Mac and Linux computers, you can access it by searching for the “Terminal” program. In Windows, it’s called “Command Prompt”. Be careful, because the languages used on these different operating systems are different. Macs use Unix, which is extremely similar to Linux. Windows machines have their own command prompt language that uses different syntax from Unix/Linux.</p>
<p>There are some <em>basic commands</em> you should be able to use:</p>
<ul>
<li><code>ls</code> (<code>DIR</code> on Windows) lists all the files in the current folder.</li>
<li><code>cd</code> allows you to change directories. For example, <code>cd Documents</code> will move into the folder “Documents”, if there is such a folder in the current directory. You can use <code>ls</code> (<code>DIR</code> on Windows) to check that your current folder contains “Documents”.</li>
<li><code>mkdir</code> allows you to make a folder. So <code>mkdir New</code> makes a folder named ‘New’.</li>
<li><code>mv</code> (<code>move</code> on Windows) will let you move files and folders. In Terminal you can do <code>mv ~/Desktop/MyFile.rtf /Volumes/Backup/MyFolder</code> to move MyFile.rtf. On Windows <code>move c:\windows\temp\*.* c:\temp</code> will move everything from C:\windows\temp to C:\temp.</li>
</ul>
<p>Command line has some funky syntax that you’ll need to get used to:</p>
<h4 id="soim-lost"><a name="user-content-soim-lost" href="#soim-lost" class="headeranchor-link" aria-hidden="true"><span class="headeranchor"></span></a>So…I’m lost.</h4>
<p>Understanding how to navigate in your command line can be weird if you’ve never done it before. I recommend moving around folders in command line while clicking around a Finder window. Perhaps start in your home directory (frequently represented with <code>~</code>) and move into your Documents folder, both on command line and in Finder.</p>
<h4 id="what-are-all-of-these-dots-for"><a name="user-content-what-are-all-of-these-dots-for" href="#what-are-all-of-these-dots-for" class="headeranchor-link" aria-hidden="true"><span class="headeranchor"></span></a>What are all of these dots for?</h4>
<p>Dots can be used as shortcuts for certain commands. <code>.</code> is a shortcut referring to the folder you’re currently in. <code>..</code> is the folder that contains the folder you’re currently in. For example, if you’re currently in a “Git Code Camp” directory within a “Fall 2014” folder, <code>.</code> would refer to “Git Code Camp” and <code>..</code> to “Fall 2014”.</p>
<h4 id="regex-sounds-like-a-medication"><a name="user-content-regex-sounds-like-a-medication" href="#regex-sounds-like-a-medication" class="headeranchor-link" aria-hidden="true"><span class="headeranchor"></span></a>Regex sounds like a medication.</h4>
<p>It’s not. Regex stands for “regular expression”, which is a notation typically used for searching. You mainly just need to worry about the <code>*</code>, which means “anything that looks like this”. For example, if you’re trying to move all .txt files in a folder, you can do it without manually moving each one. Just type in <code>*.txt</code>, and your command will apply to every file in that folder with a .txt ending.</p>
<h4 id="command-line-gets-kind-of-tedious"><a name="user-content-command-line-gets-kind-of-tedious" href="#command-line-gets-kind-of-tedious" class="headeranchor-link" aria-hidden="true"><span class="headeranchor"></span></a>Command line gets kind of tedious…</h4>
<p>Yeah, we noticed. There are a few shortcuts you can use to make your terminal experience significantly more pleasant. You can frequently hit tab to autocomplete commands or file names. You can also use the arrow keys to move through your command history. For example, the up arrow replaces your current command with the one before it.</p>
<h3 id="what-is-git"><a name="user-content-what-is-git" href="#what-is-git" class="headeranchor-link" aria-hidden="true"><span class="headeranchor"></span></a>What is Git?</h3>
<p>Git is a beautiful gift from the heavens that helps us with something called source control. Imagine (or think back to) a worst-case situation: You’ve been working on your code for hours and hours. It was kind of working twenty minutes ago, but you need to fix a couple things to get it working. This time, when you try running it, nothing works! You’ve changed a lot of different things in twenty minutes and have no idea what broke it. You’d really like to just go back to the version you had twenty minutes ago, but there’s no easy way to do that.</p>
<p>Git is essentially a language (or group of concepts and commands) for fixing this problem via source control. In short, you save snapshots of your code (called <em>commits</em>) from different points in time. One project and all of it’s versions are stored in a <em>repository</em>, or <em>repo</em>.</p>
<p><img alt="Github logo" src="assets/img/github-logo.png" /></p>
<h4 id="and-github"><a name="user-content-and-github" href="#and-github" class="headeranchor-link" aria-hidden="true"><span class="headeranchor"></span></a>And Github?</h4>
<p>Github is the online tool for using Git. You can:</p>
<ul>
<li>Quickly save commits in repos online (so you don’t lose good work or eat up memory on your computer).</li>
<li>Work collaboratively with peers on class, work, hackathon, or outside projects.</li>
<li>Create a profile of projects to show off to employers.</li>
<li>Find open source projects you think are interesting and contribute.</li>
</ul>
<p>Most importantly, Github has an adorable mascot named Octocat (in the logo above). They have dozens of unique and fun stickers with different versions of Octocat that coders treasure like gold.</p>
<p><img alt="Github stickers" src="assets/img/octocat-stickers.jpg" /></p>
<p>When working with Git and Github, it’s easiest to imagine that your code is being stored in two different places: locally, on your own computer, and remotely, on Github’s servers (the alias for that location is <em>origin</em>). Generally, you edit code on your computer, create a commit (snapshot), and send it to the Github servers. Github stores all previous versions of your code.</p>
<h3 id="basic-git-commands"><a name="user-content-basic-git-commands" href="#basic-git-commands" class="headeranchor-link" aria-hidden="true"><span class="headeranchor"></span></a>Basic Git Commands</h3>
<p><em>Cloning</em>: When you clone a repository, you take all of the code from a repo and create a local version of it on your computer. This is generally how you get code off of Github so you can actually edit it. To clone a repo, try: <em>git clone (HTTPS address of online repo)</em>, like:</p>
<div class="codehilite"><pre><span class="w"> </span><span class="o">//</span><span class="vg">Clone</span><span class="w"> </span><span class="vg">a</span><span class="w"> </span><span class="vg">repo</span><span class="w"> </span><span class="vg">called</span><span class="w"> </span><span class="s2">"node-basic"</span><span class="w"> </span><span class="vg">from</span><span class="w"> </span><span class="vg">user</span><span class="w"> </span><span class="s2">"bclay"</span><span class="w"> </span>
<span class="w"> </span><span class="vg">git</span><span class="w"> </span><span class="vg">clone</span><span class="w"> </span><span class="nl">https:</span><span class="o">//</span><span class="vg">github</span><span class="o">.</span><span class="vg">com</span><span class="o">/</span><span class="vg">bclay</span><span class="o">/</span><span class="vg">node</span><span class="o">-</span><span class="vg">basic</span><span class="o">/</span>
<span class="w"> </span><span class="o">//</span><span class="vg">Go</span><span class="w"> </span><span class="vg">into</span><span class="w"> </span><span class="vg">the</span><span class="w"> </span><span class="vg">repo</span>
<span class="w"> </span><span class="vg">cd</span><span class="w"> </span><span class="vg">node</span><span class="o">-</span><span class="vg">basic</span>
</pre></div>
<p><em>Forking</em>: Forking allows you to copy the entierty of someone else’s repo onto your Github account online. You still need to clone it (from your account) to get the code on your computer. You can fork a repo by clicking the “Fork” button on a repo’s Github page.</p>
<p><em>Committing</em>: As stated above, committing is taking a snapshot of your code to be saved. Before you commit, you always need to do <em>git add .</em> first. “Adding” is commonly explained as “staging your changes to be committed”. You don’t really need to know what that means, just do it before you commit. To commit, type in <em>git commit -m ‘some message’</em>.</p>
<p><img alt="Github commits" src="assets/img/git-commit.png" /></p>
<p><em>Pushing</em>: Pushing is simply sending code to your repo on Github. See below for the full process you should go through every time you send code to Github:</p>
<div class="codehilite"><pre><span class="w"> </span><span class="o">//</span><span class="vg">Stage</span><span class="w"> </span><span class="vg">changes</span>
<span class="w"> </span><span class="vg">git</span><span class="w"> </span><span class="vg">add</span><span class="w"> </span><span class="o">.</span>
<span class="w"> </span><span class="o">//</span><span class="vg">Commit</span><span class="w"> </span><span class="vg">current</span><span class="w"> </span><span class="vg">code</span>
<span class="w"> </span><span class="vg">git</span><span class="w"> </span><span class="vg">commit</span><span class="w"> </span><span class="o">-</span><span class="vg">m</span><span class="w"> </span><span class="c1">'Updated CSS'</span>
<span class="w"> </span><span class="o">//</span><span class="vg">Push</span><span class="w"> </span><span class="vg">your</span><span class="w"> </span><span class="vg">code</span><span class="w"> </span><span class="vg">to</span><span class="w"> </span><span class="vg">Github</span><span class="w"> </span><span class="p">(</span><span class="vg">origin</span><span class="p">)</span><span class="w"> </span><span class="vg">at</span><span class="w"> </span><span class="vg">the</span><span class="w"> </span><span class="vg">master</span><span class="w"> </span><span class="vg">branch</span>
<span class="w"> </span><span class="vg">git</span><span class="w"> </span><span class="vg">push</span><span class="w"> </span><span class="vg">origin</span><span class="w"> </span><span class="vg">master</span>
</pre></div>
<p><em>Pulling</em>: The expected opposite of pushing is pulling. You type <em>git pull</em> every time you need to get code from a repo you’ve already cloned off Github. When working with other coders, it’s good practice to pull every time you begin working on code.</p>
<div class="footer"><p>© Dining Philosophers 2015. Page created by <a href="http://pvrnav.com">Pranav Vishnu Ramabhadran</a>.</div>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="assets/js/nav.js"></script>
<script src="assets/js/FlowType.js"></script>
<script type="text/javascript">
$('body').flowtype({
minimum : 500,
maximum : 1000,
minFont : 16,
maxFont : 65,
fontRatio : 40
});
</script></article></body></html>