This repository was archived by the owner on Nov 16, 2020. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathgithub-collab-and-project1.html
More file actions
332 lines (329 loc) · 21.3 KB
/
Copy pathgithub-collab-and-project1.html
File metadata and controls
332 lines (329 loc) · 21.3 KB
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
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Reem+Kufi" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto+Slab:400,400i,700,700i,800" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=IBM+Plex+Mono:200i,400,400i,700,700i" rel="stylesheet">
<link rel='stylesheet' type='text/css' href="../css/reset.css" >
<link rel='stylesheet' type='text/css' href="../css/theme.css">
<link rel='stylesheet' type='text/css' href="../css/styles.css" >
<link rel='stylesheet' type='text/css' href="../css/new-styles.css" >
</head>
<body>
<header>
<pre id='ascii-title' style='font-size:1.25vw; line-height:0.75em; letter-spacing: -0.2em; font-weight: 800;'>
.sSSSSs.
SSSSSSSSSs. SSSSS .sSSSSSSSSSSSSSs. .sSSS SSSSS .sSSS s. .sSSSSs.
S SSS SSSSS S SSS SSSSS S SSS SSSSS S SSS SSSSS S SSS SSSs. S SSSSSSSs.
S SS SSSS' S SS SSSSS S SS SSSSS S SS SSSSS S SS SSSSS S SS SSSS'
S..SS S..SS `:S:' S..SS `:S:' S..SSsSSSSS S..SS SSSSS S..SSsSSSa.
S:::S`sSSs. S:::S S:::S S:::S SSSSS S:::S SSSSS S:::S SSSSS
S;;;S SSSSS S;;;S S;;;S S;;;S SSSSS S;;;S SSSSS S;;;S SSSSS
S%%%S SSSSS S%%%S S%%%S S%%%S SSSSS S%%%S SSSSS S%%%S SSSSS
SSSSSsSSSSS SSSSS SSSSS SSSSS SSSSS SSSSSsSSSSS SSSSSsSSSS'
.sSSSSs.
SSSSSSSSSs. .sSSSSs. SSSSS SSSSS .sSSSSs. .sSSSSs. .sSSSSs. .sSSSSSSSs. .sSSSSs. .sSSSSSSSSSSSSSs. SSSSS .sSSSSs. .sSSSs. SSSSS
S SSS SSSSS S SSSSSSSs. S SSS S SSS S SSSSSSSs. S SSSSSSSs. S SSSSSSSs. S SSS SSSSS S SSSSSSSs. SSSSS S SSS SSSSS S SSS S SSSSSSSs. S SSS SS SSSSS
S SS SSSS' S SS SSSSS S SS S SS S SS SSSSS S SS SSSS' S SS SSSSS S SS SSSS' S SS SSSSS SSSSS S SS SSSSS S SS S SS SSSSS S SS `sSSSSS
S..SS S..SS SSSSS S..SS S..SS S..SSsSSSSS S..SSsSSSa. S..SS SSSSS S..SSsSSSa. S..SSsSSSSS `:S:' S..SS `:S:' S..SS S..SS SSSSS S..SS SSSSS
S:::S SSSSS S:::S SSSSS S:::S S:::S S:::S SSSSS S:::S SSSSS S:::S SSSSS S:::S SSSSS S:::S SSSSS S:::S S:::S S:::S SSSSS S:::S SSSSS
S;;;S SSSSS S;;;S SSSSS S;;;S S;;;S S;;;S SSSSS S;;;S SSSSS S;;;S SSSSS S;;;S SSSSS S;;;S SSSSS S;;;S S;;;S S;;;S SSSSS S;;;S SSSSS
S%%%S SSSSS S%%%S SSSSS S%%%S SSSSS S%%%S SSSSS S%%%S SSSSS S%%%S SSSSS S%%%S SSSSS S%%%S SSSSS S%%%S SSSSS S%%%S S%%%S S%%%S SSSSS S%%%S SSSSS
SSSSSsSSSSS SSSSSsSSSSS SSSSSsSS;:' SSSSSsSS;:' SSSSS SSSSS SSSSSsSSSS' SSSSSsSSSSS SSSSS SSSSS SSSSS SSSSS SSSSS SSSSS SSSSSsSSSSS SSSSS SSSSS
.sSSSSs. .sSSSs. SSSSS .sSSSSs.
S SSSSSSSs. S SSS SS SSSSS S SSSSSSSs.
S SS SSSSS S SS `sSSSSS S SS SSSSS
S..SSsSSSSS S..SS SSSSS S..SS SSSSS
S:::S SSSSS S:::S SSSSS S:::S SSSSS
S;;;S SSSSS S;;;S SSSSS S;;;S SSSSS
S%%%S SSSSS S%%%S SSSSS S%%%S SSSS'
SSSSS SSSSS SSSSS SSSSS SSSSSsS;:'
.sSSSSs. .sSSS s.
SSSSSSSSSs. .sSSSSSSSs. .sSSSSs. SSSSS .sSSSSs. .sSSSSs. .sSSSSSSSSSSSSSs. SSSSS SSSs. .sSSSSs. .sSSSSs. .sSSS SSSSS
S SSS SSSSS S SSS SSSSS S SSSSSSSs. S SSS S SSSSSSSs. S SSSSSSSs. SSSSS S SSS SSSSS S SSS SSSSS S SSSSSSSs. S SSSSSSSs. S SSS SSSSS
S SS SSSSS S SS SSSS' S SS SSSSS S SS S SS SSSS' S SS SSSS' SSSSS S SS SSSSS S SS SSSSS S SS SSSS' S SS SSSS' S SS SSSSS
S..SS SSSSS S..SSsSSSa. S..SS SSSSS S..SS S..SS S..SS `:S:' S..SS `:S:' S..SS SSSSS S..SS S..SS S..SSsSSSSS
S:::SsSSSSS S:::S SSSSS S:::S SSSSS S:::S S:::SSSS S:::S SSSSS S:::S S:::S SSSSS S:::SSSS S:::SSSS S:::S SSSSS
S;;;S S;;;S SSSSS S;;;S SSSSS S;;;S S;;;S S;;;S SSSSS S;;;S S;;;S S SSSSS S;;;S S;;;S S;;;S SSSSS
S%%%S S%%%S SSSSS S%%%S SSSSS SSSSS S%%%S S%%%S SSSSS S%%%S SSSSS S%%%S S%%%S SSS SSSSS S%%%S SSSSS S%%%S SSSSS S%%%S SSSSS
SSSSS SSSSS SSSSS SSSSSsSSSSS `:;SSsSSSSS SSSSSsSS;:' SSSSSsSSSSS SSSSS SSSSSsSS SSsSSSSS SSSSSsSS;:' SSSSSsSS;:' SSSSS SSSSS
</pre>
<h2 class='date'> July 16th, 2018</h2>
</header>
<article class='container'>
<section id="todo" >
<h1>To Do's:</h1>
<ul>
<li>Administrivia</li>
<li>Project Goals and Requirements</li>
<li>Git Workflows</li>
<li>Brainstorm session</li>
</ul>
</section>
<section>
<h1>Administrivia</h1>
<h2>🛠 Welcome to <span class="id rotate">Project Week!</span> 🛠</h2>
<p>This week will be a lot less pressure than even the review weeks we had. You'll be learning how to effectively
collaborate and use the tools you have to make something really cool!
</p>
<p>Be sure you sit in your groups today (makes sense, right?) as you'll be working on your project exclusively today and this week.</p>
<p>As briefly discussed in the past, we'll be using git's <span class="note">branching</span> functionality
to work on the same project simulatenously without stepping on each others' toes.</p>
</section>
<section>
<h1>Project Goals and Requirements</h1>
<p>For this project, you will need to complete a half page proposal to us by the end of the day.
Feel free to just Slack the file to us so we can review your formalized plans.
</p>
<p>To get to that point you'll have time today to research APIs, outline project ideas,
submit those ideas for approval and do some initial design work. Next class will be hardcore development!
</p>
<p>As a refresher, here are your complete requirements:</p>
<ul>
<li>Must use at least two APIs</li>
<li>Must use AJAX to pull data</li>
<li>Must utilize at least one new library or technology that we haven’t discussed</li>
<li>Must have a polished frontend / UI</li>
<li>Must meet good quality coding standards (indentation, scoping, naming)</li>
<li>Must NOT use alerts, confirms, or prompts (look into modals!)</li>
<li>Must have some sort of repeating element (table, columns, etc)</li>
<li>Must use Bootstrap or Alternative CSS Framework</li>
<li>Must be Deployed (GitHub Pages or Firebase)</li>
<li>Must have User Input Validation</li>
</ul>
<p>Presentation date: one week from this Saturday. Get hype.</p>
<hr>
<p>Now, as for non-requirements, it would be <span class='italic'>nice to have:</span></p>
<ul>
<li>Use Firebase for persistent data (this is more or less a requirement.
Plus, data persistence is cool as heck, so why not?)</li>
<li>Mobile responsiveness: slip in some media queries, some nice flexbox/CSS grid layout changes, etc.</li>
<li>Use an alternative CSS framework such as Materialize (material design is super hot right now!)</li>
<li>Do something original and cool you can show off on your portfolio!</li>
</ul>
<h2>Project Presentation</h2>
<p>Presentations are inescapable in the real world: it's something you gotta do.
We'll be talking about how to present well, and how you can actually enjoy talking about
your finish product in front of a group of people. This thing's gonna be 10min, and will be a
formal presentation in which you'll detail:
</p>
<ul>
<li>Application concept</li>
<li>Motivation for development</li>
<li>Design process</li>
<li>Technologies used</li>
<li>Quick demo</li>
<li>Directions for future development</li>
</ul>
<p>Please take this seriously. Oftentimes talking about what you did and how you did it is
<span class="italic">more important</span> than the thing itself. Think about copy/pasting
vs. explaining what you actually copied: what good is the final product if you don't know what it does?
</p>
<hr>
<h2>Metrics</h2>
<ul>
<li>Concept</li>
<li>Design</li>
<li>Functionality</li>
<li>Collaboration</li>
<li>Presentation</li>
</ul>
<hr>
<h2>🏆 Awards 🏅</h2>
<p>Yes, awards!</p>
<ul>
<li>Most Awe-Inspiring</li>
<li>Most Useful</li>
<li>Most Creative</li>
<li>Best Use of Tech</li>
<li>Best UI/UX</li>
<li>Most Hilarious</li>
<li>Most Disruptive</li>
<li>Most Socially Conscious</li>
</ul>
<hr>
<h1>API Suggestions</h1>
<p>Stick to APIs that do all of the following:</p>
<ul>
<li>Allow CORS</li>
<li>Simple/No authentication</li>
<li>JSON response returned</li>
<li>Well-documented</li>
</ul>
<hr>
<h2>Tools</h2>
<p>Not a comprehensive list, but let's talk about: GitHub Pull Requests, GitHub Issues,
Trello, FreedCamp, many many many many more.
</p>
<h2>What do we want by the end of the day?</h2>
<p>Half a page to a page proposal including:</p>
<ul>
<li>Project title</li>
<li>Team memebers</li>
<li>Project description</li>
<li>Rough sketch (scanned paper, wireframe in software of choice, etc.)</li>
<li>APIs to be used</li>
<li>Rough breakdown of tasks</li>
</ul>
<h1>Questions?</h1>
</section>
<section>
<h1>Git Workflows</h1>
<p>Time to make a shared repo and learn some cool stuff.</p>
<div class="student-activity">
<h2>Group activity!</h2>
<p>One group member should create a new Github repository. Don't worry about the project name now,
this can always be changed later. Add your fellow group members as collaborators by:</p>
<ul>
<li>Going to the repo's main page and clicking "Settings"</li>
<li>Selecting "Collaborators" menu item in the settings</li>
<li>Inviting group members from "Collaborators" page by entering their GitHub usernames one by one</li>
<li>Accept email from GitHub to be added to the repo</li>
</ul>
</div>
<p>Cool! Now that everyone is on the same repo, we can talk about <span class="note">Pull Requests</span>,
which are basically the best. It's important to do code review for each other, combing through your group members'
code to look for bugs or weirdness or possible conflicts before they get merged into the master branch.</p>
<p>Code review also helps group members who didn't write the code understand how it works, which is
super, super useful.
</p>
<p>Now, let's protect the master branch such that:</p>
<ol>
<li>Pushes to master are prohibited.</li>
<li>Merges from other branches are not allowed without another team member's review.</li>
</ol>
<p>As a general rule: don't push to master.</p>
<h3 class="bold italic special-char">Seriously. Don't push to master on a shared repo.</h3>
<h3 class="bold italic special-char">Not even once.</h3>
<p>Instead of just talking about it, let's protect the branch so that we couldn't even do this
if we wanted to.
</p>
<div class="student-activity">
<h2>Group activity!</h2>
<h3>Protecting the master branch</h3>
<p>Only one group member needs to do this.</p>
<p>Navigate back to the repo's "Settings" and select "Branches" from the left sidebar.</p>
<p>Under "Branch Protection Rules", select "master" from the dropdown.</p>
<p>You should be presented with some options, check off the following:</p>
<ul>
<li>Protect this branch</li>
<li>Require pull request reviews before merging</li>
<li>Include administrators</li>
</ul>
<p>If completed successfully, no one should be able to push directly to the master
branch. Instead, all changes must be made in the form of pull requests that are to be
reviewed by another group member.</p>
</div>
<hr>
<h2>Branching</h2>
<p>Right now, most—if not, all—of you have been pushing directly to master, overwriting
whatever was in there previously.</p>
<p>For individual project owners? Not great, but not the end of the world.
<p>For collaborative projects? This is bad. <span class="italic">Really, <span class="bold">really</span> bad.</span>
I'm purposefully repeating this ad nauseum because it is seriously important. Based on what you've heard so far,
why is pushing to master on a shared repo bad?</p>
<p>Let's be good about this.</p>
<div class="activity">
<h2>Instructor activity...</h2>
<p>I'll demonstrate some basic branching shortly. In fact, I can make changes
in my notes repo on a new branch and then submit a pull request from the feature
branch to master.
</p>
<p>A pull request is a request to merge the diffs or changes from the source branch (the feature branch)
to the target branch (master).</p>
<p>With the way your repos are set up now, another group member has to look at it to approve
the pull request before its changes can be merged into master.
</p>
<p>Once a feature branch has been merged into master, we delete it and then check back out to the master branch. From there,
we'd check back out to a new feature branch and repeat the process for each feature we add.</p>
<p>Here's a decent diagram, and I can draw another if you'd like. Please ask plenty of questions.
</p>
<img src="../images/01-Git-Branching.png" />
</div>
<hr>
<div class="student-activity">
<h2>Group activity!</h2>
<h3>Part I: Branching</h3>
<p>You'll be using this time to create branches,
submit pull requests, and perform code reviews before merging.
</p>
<p>Only one group member should complete this section—others should observe.</p>
<p>Clone the project repo onto your computer and cd into it.</p>
<p>Run the following command in your terminal to create and checkout
to a new branch:</p>
<pre class="brush: shell">git checkout -b create-html-skeleton</pre>
<p>You should now be on a new branch named "create-html-skeleton". In order to verify this worked, run the following command
in your terminal:</p>
<pre class="brush: shell">git branch</pre>
<p>You should see two branches listed: <code>master</code> and <code>create-html-skeleton</code>. The <code>create-html-skeleton</code> branch should have an
asterisk to the left of it. This indicates that this is the branch you're currently on.</p>
<p>At the root of the repo, create a new file named <code>index.html</code>. Inside this file, add code for a basic HTML skeleton and save.</p>
<p>In your terminal, add and
commit the changes. Then push up your code by running following in your terminal:</p>
<pre class="brush: shell">git push origin create-html-skeleton</pre>
<p>This should push up your code to to GitHub on a branch with the same name (`create-html-skeleton`).</p>
<p>Go to the main repo
page at github.com and you should see an button that says "Compare & pull request"—click this.</p>
<p>On the next screen, add
a description of the work that was done in the textarea and click the "Pull Request" button.</p>
<p>If completed successfully,
you should see the pull request listed under the repo's "Pull request" tab.</p>
<hr>
<h2>Part II: Reviewing a Pull Request</h2>
<p>In
this section we will review the pull request from Part I and merge it into master. <span class="italic">A different project member should complete
this section while others observe.</span></p>
<p>Clone the repo to your computer if you haven't already done so and cd into it.</p>
<p>First you will want to test the changes introduced by the <code>add-html-skeleton</code> branch locally.
In order to examine the new branch
on your local machine, run the following commands in your terminal:
<pre class="brush: shell">git fetch
git checkout -b add-html-skeleton origin/add-html-skeleton</pre>
<p>This code should bring the copy of the <code>add-html-skeleton</code> branch that's on GitHub onto your computer.</p>
<p>Make sure this
worked by verifying that there's an <code>index.html</code> file in your local repo.</p>
<p>Normally, you'd run the code here to make sure everything works properly.
<p>Check back out to your local <code>master</code> branch by running the following in your terminal:</p>
<pre class="brush: shell">git checkout master</pre>
<p>Now go to your GitHub repo's main page and go to the "Pull request" section. Select the <code>add-html-skeleton</code>
pull request from the list.</p>
<p>At the next page select the option to see the "Files changed".</p>
<p>You should be presented with
all of the files that were changed in this PR along with line numbers for any code added/removed.</p>
<p>If there are any changes
you would like made, you can click the line number to leave a comment the PR author will see and should address before approval.
Otherwise, click "Review changes" and approve the PR. You should be taken to a screen with an option to "Merge pull request"—click this button.</p>
<p>Once complete, you can delete the feature branch from your machine by running the following in your
terminal:</p>
<pre class="brush: shell;">git branch -D add-html-skeleton</pre>
</div>
</section>
<section>
<h1>Brainstorming Session</h1>
<p>Now that you've had a little crash course in pull requests and branching, it's time to dedicate the rest of our class
to brainstorming your project ideas as well as the things you'll implement, slowly building up to a complete project
proposal.
</p>
<p>We'll walk around and see what your initial ideas are, as well as talk about tech you can use.</p>
</section>
<div class="page-break">
<h1>Break time!</h1>
</div>
<section>
<h1>Brainstorming Session</h1>
<p>We have a whole hour(!) to identify ideas, research APIs, and create project designs.</p>
<p>Again, we'll be coming around to touch base with y'all periodically, just to make sure you're on the right track.</p>
</section>
<div class="page-break">
<h1>That's all for today, see you Wednesday!</h1>
</div>
</article>
</body>
<!-- Script to make <pre> tags pretty -->
<script type='text/javascript' src="../js/syntaxhighlighter.js"></script>
<script type='text/javascript' src="https://code.jquery.com/jquery.js"></script>
</html>
</html>