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 pathlinting-and-projects.html
More file actions
236 lines (233 loc) · 13.3 KB
/
linting-and-projects.html
File metadata and controls
236 lines (233 loc) · 13.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
<!DOCTYPE html>
<html>
<head>
<title>Linting and Project 2</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=BioRhyme:800" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Josefin+Sans:400,400i,700,700i,800" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=IBM+Plex+Mono:400,700" rel="stylesheet">
<link rel='stylesheet' type='text/css' href="../css/reset.css">
<link rel='stylesheet' type='text/css' href="../css/prism.css">
<link rel='stylesheet' type='text/css' href="../css/styles.css">
</head>
<body>
<header>
<pre id='ascii-title' style='font-size:2.5vw; line-height:0.8em; letter-spacing: 0.001em; font-weight:700;'>
8
8 e eeeee eeeee e eeeee eeeee eeeee eeeee eeeee
8e 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8
88 8e 8e 8 8e 8e 8e 8 8e 8eee8 8e 8 8e 8
88 88 88 8 88 88 88 8 88 "8 88 8 88 8 88 8
88eee 88 88 8 88 88 88 8 88ee8 88 8 88 8 88ee8
8""""8
8 8 eeeee eeeee e eeee eeee eeeee eeeee
8eeee8 8 8 8 88 8 8 8 8 8 8 "
88 8eee8e 8 8 8e 8eee 8e 8e 8eeee
88 88 8 8 8 e 88 88 88 88 88
88 88 8 8eee8 8ee88 88ee 88e8 88 8ee88
</pre>
<h2 class='date'> September 15th, 2018</h2>
</header>
<article>
<section id="todo">
<h1>To-Do's:</h1>
<ul>
<li>Administrivia</li>
<li>Project 2 Requirements</li>
<li>Create a Repo</li>
<li>Linting</li>
<li>Boilerplate Code</li>
<li>Travis</li>
<li>Project Brainstorming</li>
</ul>
</section>
<section>
<h1>Administrivia</h1>
<p>Good morning, all! At this point in our class, we find ourselves, finally, at Project 2. Much like our
last project, today's class will be partially focused on some small tips and tools to make the development process
more efficient—namely ESLint and Travis. The rest of the time will be for brainstorming project ideas, researching APIs, and
beginning inital planning.
</p>
<p>As a warning, during this upcoming unit you'll have slightly less in-class time to work on your projects,
so some boilerplate code will be provided for you. Despite the other material we have to cover next week, this will save you time and
ensure you can dive in and focus on features for your apps.
</p>
</section>
<section>
<h1>Project 2 Requirements</h1>
<p>Project 2 will be similar to the first in that it will be mainly data-driven. The requirements are fairly similar
to those of your previous project, with some modifications such that you can apply your new knowledge. They are as follows:</p>
<ul>
<li>Must use a Node and Express Web Server</li>
<li>Must be backed by a MySQL Database with a Sequelize ORM</li>
<li>Must have both <code>GET</code> and <code>POST</code> routes for retrieving and adding new data</li>
<li>Must be deployed using Heroku (with Data)</li>
<li>Must utilize at least one new library, package, or technology that we haven’t discussed</li>
<li>Must have a polished frontend/UI</li>
<li>Must have folder structure that meets MVC Paradigm</li>
<li>Must meet good quality coding standards (indentation, scoping, naming)</li>
<li>Must not expose sensitive API key information on the server; recall how to use the <span class="mono">dotenv</span> npm package</li>
</ul>
</section>
<section>
<h1>Create a Repo</h1>
<p class="no-letter">
Sit with your project groups to create a new project repo, inviting your teammates as collaborators.
</p>
<div class="student-activity">
<h2>Student activity!</h2>
<h3>Project 2 Repo</h3>
<ul>
<li>One group member should create a new Github repo for the project.</li>
<li>Protect the repo's master branch as we did during project 1.</li>
<ul>
<li>Once at the repo's page, click the "Settings" tab.</li>
<li>Select "Branches" from the left sidebar.</li>
<li>Under "Branch protection rules", choose "master" from the dropdown.</li>
<li>Check off the following options:</li>
<ul>
<li>"Protect this branch"</li>
<li>"Require pull request reviews before merging"</li>
<li>"Include administrators"</li>
<li>"Require status checks to pass before merging"</li>
<li>"Require branches to be up to date before merging"</li>
</ul>
<li>Click "Save changes"</li>
</ul>
<li>Once complete, invite the other group members as collaborators.</li>
</ul>
</div>
</section>
<section>
<h1>Linting</h1>
<p>Some of you may have installed one of these powerful tools already during a VS Code tips and tricks session.
For those who have, you're already familiar with the concept of a <span class="note">linter</span>. What is it?
</p>
<p>Put simply, a linter is a tool that we can use to analyze our code for potential errors as we're writing it. Linters can also be used
to enforce particular styles of coding based on rules we can turn on or off. Linters are useful because they can help teams write more consistent and readable code according to what they consider
to be best practices. They're also helpful for identifying potential errors before the code is even run, thus improving
overall code quality.</p>
<p>We'll be using <a class="mono" href="https://eslint.org/" target="_blank">eslint</a>. The following activity will
test your knowledge of proper programming practices.</p>
<div class="student-activity">
<h2>Partner activity!</h2>
<h3>No Lint Example</h3>
<p>Before looking at any code, open <span class="mono">Unsolved/index.html</span> in your web browser and study the rendered application.</p>
<p>After studying what it does, open <span class="mono">Unsolved/example.js</span> in your editor.</p>
<ul>
<li>For what this application is supposed to do, the code works perfectly.</li>
</ul>
<p>Discuss with your partner: Even though the code works, what's wrong with it?</p>
</div>
<div class="review">
<h2>No Lint Review</h2>
<p>While none of what we saw are actual JavaScript errors, consistency is important because it makes code easier to
understand, especially if working on a team with others. Additionally, having a linter helps ensure code reviews aren't
just nitpicks over stylistic opinions.</p>
<p>The next activity will allow us to fix these problems.</p>
</div>
<hr>
<div class="student-activity">
<h2>Student activity!</h2>
<h3>ESLint Example</h3>
<ul>
<li>Install the VS Code Eslint Extension</li>
<li>Open the Unsolved folder and run <code class="langauge-bash">npm install</code> from your terminal to install dependencies.</li>
<li>Now, open <span class="mono">Unsolved/example.js</span> in your code editor. If you were able to complete the previous steps correctly, you should see red annotations under different parts of the code. Hovering over each displays a popover with an eslint rule being broken.</li>
<li>Work to fix each part of the annotated code.</li>
<li><span class="bonus">Bonus:</span> Try changing the quote style to enforce single-quotes instead of double-quotes.</li>
<li><span class="hint">Hint:</span> If you're unsure about what an eslint rule is asking for, type it into Google for examples.</li>
</ul>
</div>
<div class="review">
<h2>ESlint Example Review</h2>
<p>We can leverage the ESLint extension to see annotations over improperly-styled code that breaks ESLint rules.</p>
<p>This extension uses npm's globally installed <span class="mono">eslint</span> module, which can be run via a CLI:</p>
<pre><code class="language-bash">npm run lint</code></pre>
<p>The rules are being set in a <span class="mono">.eslintrc.json</span>, and can be found at
<a href="http://eslint.org/docs/rules/" target="_blank">http://eslint.org/docs/rules/</a>. Changing conventions in a project is as easy as distributing
this file.
</p>
</div>
</section>
<section>
<h1>Project 2 Boilerplate</h1>
<p>This project will come with its own starter code. As a remindr, the focus here is on features: it's not really important to know how to set
up everything from scratch. Such tasks can be done very easily via Express, Sequelize and Handlebars CLIs. Your starter code already has
express, handlebars, and sequelize set up, as well as a basic linter, <span class="mono">.travis.yml</span>
<span class="italic">(mostly ignored; used to make sure that only code that passes the linter can be merged into the Github master branch)</span>.
</p>
<p>You'll be adding this code to your repos shortly.</p>
<div class="student-activity">
<h2>Student activity!</h2>
<h3>Project 2 Starter</h3>
<p>Once you have this initial boilerplate added to your project repos, all you need to do is submit smaller
pull requests to layer on each new change.</p>
<hr>
<p>Only one member of each group should complete this activity while the others watch.</p>
<ul>
<li>Copy the entire Unsolved folder to another location on your computers — wherever you would like your local copyof the group project to be.</li>
<li>Rename the copied "Unsolved" folder to the name of your project.</li>
<li>Open the copied project folder's <span class="mono">package.json</span> file and change its <span class="mono">name</span> property to the name of your project, e.g. <span class="mono">bathroom-finder-v2</span>. If you're unsure now, leave this field as is—it can be changed later.</li>
<li>
CD to the root of the copied project folder with your terminal and run the following commands:
<pre><code class="language-bash">git init
git add .
git commit -m "Initial commit"</code></pre></li>
<li>
Then, copy the GitHub repo's remote SSH URL (the same URL you'd use to clone the repo).
</li>
<li>
Run the following commands in your terminal, replacing <span class="mono"><remote-url></span> with your GitHub repo's remote SSH URL.
<pre><code class="language-bash">git remote add origin <remote-url>
git push origin master</code></pre>
</li>
<li>If completed successfully you should see all of the files uploaded to GitHub.</li>
<li>All other group members should now clone the repo.</li>
<li>Discuss as a group:</li>
<ul>
<li>How would you now add changes to this project?</li>
</ul>
</ul>
</div>
</section>
<section>
<h1>Travis</h1>
<p>Linters aren't very helpful if some group members choose to ignore their rules. In the next
activity, we'll set up <span class="note">Travis CI</span>, where CI stands for
<span class="note">Continuous Integration</span>. Travis will prevent any code from being merged into master that doesn't pass the linter,
as well as run a check on any new branches PR'd against master. This check may take a minute, but you will only be allowed to
merge the code if the lint passes. Otherwise, whoever made the PR will have to fix their code and try again.
</p>
<div class="student-activity">
<h2>Student activity!</h2>
<h3>Travis Setup</h3>
<h4>Part I: Protecting Master</h4>
<p>Make sure the master branch is protected before going forward.</p>
<h4>Part II: Add Travis</h4>
<li>Navigate to <a href="https://github.com/marketplace/travis-ci" target="_blank">https://github.com/marketplace/travis-ci</a>.</li>
<li>Select the option to "Set up a new plan" and choose the $0 "Open Source" plan when prompted.</li>
<li>Click "Install it for free" and then on the next page click "Complete order and begin installation".</li>
<li>On the next page select the radio button that reads "Only select repositories".</li>
<li>From the "Select repositories" drop-down, choose your project repo.</li>
<li>Click the "Install" button to complete the process.</li>
</div>
</section>
<div class="page-break">
<h1>Break time!</h1>
</div>
<section>
<h1>Project Brainstorming</h1>
<p>Continue working on ideas, API research and project designs. Submit your
initial project idea proposal by the end of class today.
</p>
</section>
<div class="page-break">
<h1>That's all for today, see you Monday!</h1>
</div>
</article>
</body>
<!-- Script to make code pretty -->
<script type='text/javascript' src="../js/prism.js"></script>
</html>