Skip to content

Commit e9741e4

Browse files
bxiebxie
committed
first commit with info461 content
0 parents  commit e9741e4

File tree

123 files changed

+5408
-0
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

123 files changed

+5408
-0
lines changed

‎.gitignore

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
.idea/

‎activities/adaptive.html

+50
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
5+
<meta name="viewport" content="width=device-width, initial-scale=1">
6+
7+
<!-- Latest compiled and minified CSS -->
8+
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
9+
10+
<!-- Optional theme -->
11+
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
12+
13+
<!-- Latest compiled and minified JavaScript -->
14+
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
15+
16+
<link rel="stylesheet" href="../style.css" />
17+
18+
<title>Adaptive</title>
19+
20+
</head>
21+
<body>
22+
<p><a href="../index.html">Back to Homepage</a></p>
23+
24+
<img src="images/finches.jpg" class="img-responsive" />
25+
<small>Credit: public domain</small>
26+
27+
<h1>Adaptive</h1>
28+
<div class="lead">Andrew J. Ko</div>
29+
30+
<p>Those are finches above. Darwin's finches, to be precise. He found them remarkable because of their highly adapted beaks, rapidly evolved to be tightly fit to its environment.</p>
31+
32+
<p>Great software engineers have to be adaptive to, responding rapidly to changes in the team, their business, their market, and the world. Unfortunately, not every engineer is so adaptable: some spend years acquiring skills, and rather than adapt to changes in software engineering (such as the introduction of the internet, cloud computing, scripting languages, or other new technologies), they resist change, failing to embrace or at least understand the new technology.</p>
33+
34+
<p>To help you be more adaptive, we're going to practice reacting to changes in the market of web frameworks.</p>
35+
36+
<ul>
37+
<li>Find the <em>latest</em> "hot" web framework (as if a web framework can be hot).</li>
38+
<li>Try to discover why that framework is hot.</li>
39+
<li>With your team, develop justifications both for adopting <em>and</em> for not adopting that web framework for this class project. Decide which argument is more convincing to your team.</li>
40+
<li>Present your arguments to the class.</li>
41+
</ul>
42+
43+
<p>Which arguments suggest adaptability? Which suggest inflexibility?</p>
44+
45+
</body>
46+
47+
</html>
48+
49+
50+

‎activities/builds.html

+87
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
5+
<meta name="viewport" content="width=device-width, initial-scale=1">
6+
7+
<!-- Latest compiled and minified CSS -->
8+
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
9+
10+
<!-- Optional theme -->
11+
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
12+
13+
<!-- Latest compiled and minified JavaScript -->
14+
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
15+
16+
<link rel="stylesheet" href="../style.css" />
17+
18+
<title>Builds</title>
19+
20+
</head>
21+
<body>
22+
<p><a href="../index.html">Back to Homepage</a></p>
23+
24+
<img src="images/build.jpg" class="img-responsive" />
25+
26+
<small>Credit: public domain</small>
27+
28+
<h1>Builds</h1>
29+
<div class="lead">Andrew J. Ko</div>
30+
31+
<p>If you're building anything more than just a static web page, build automation can be key to accelerating the development cycle of edit, run, debug. In today's activity, determine the following:</p>
32+
33+
<ul>
34+
<li>Do you need to build?</li>
35+
<li>If so, what do you need to build?</li>
36+
<li>Will a simple <code>npm</code> build script work or do you need something more sophisticated?</li>
37+
<li>Will you adopt a continuous integration tool like <a href="codeship.com">CodeShip</a> to streamline testing and releases?</li>
38+
<li>How will you integrate tests into your builds?</li>
39+
</ul>
40+
41+
<p>The simplest of build scripts can still have a lot of complexity. For example, here's an <code>npm</code> <code>package.json</code> file that I've been using to build my <a href="http://faculty.uw.edu/ajko">faculty web site</a>, which uses React and a variety of other dependencies:</p>
42+
43+
<pre>
44+
{
45+
"name": "UWFacultyPage",
46+
"version": "1.0.0",
47+
"scripts": {
48+
"build": "browserify -t [ babelify --presets [ react ] ] src/app.js | uglifyjs > build/app.js",
49+
"watch": "watch 'npm run build' src"
50+
},
51+
"devDependencies": {
52+
"babel-cli": "^6.0.0",
53+
"babel-preset-es2015": "^6.3.13",
54+
"browserify": "latest",
55+
"watch": "latest"
56+
},
57+
"dependencies": {
58+
"babel-preset-react": "^6.5.0",
59+
"babelify": "^7.2.0",
60+
"react": "^0.14.0",
61+
"react-dom": "^0.14.0",
62+
"react-router": "^2.0.0",
63+
"history": "latest",
64+
"jquery": "^1.12.0",
65+
"bootstrap": "^3.3.6",
66+
"lodash": "latest",
67+
"uglify-js": "latest"
68+
}
69+
}
70+
</pre>
71+
72+
<p>When I execute <code>npm run build</code>, <code>npm</code> executes the command that I've named "build" above, which runs <code>browserify</code>. This is an <code>npm</code> package that first converts all of the JSX files in my source directly into JavaScript, then compiles all of the JavaScript files in all of those big source files into a single monolithic JavaScript source file, and then pipes that big file into <code>uglifyjs</code>, which minifies the big monolithic JavaScript file, shrinking variable names and removing unnecessary whitespace. All of this means that I only have to have a single JavaScript import in my main HTML file and that it's small, accelerating page load.</p>
73+
74+
<p>Also note the <code>watch</code> command. It uses a command line utility called <code>watch</code> to run a build every time I edit a file in my <code>src</code> folder, so I always have a fresh build for manual testing.</p>
75+
76+
<p>You might not want or need all of the things above. You might also want more. What you do depends on the plans you've devised for coordination and testing.</p>
77+
78+
<h2>For credit</h2>
79+
80+
<p>Explain your build process to me or the TA for credit.</p>
81+
82+
</body>
83+
84+
</html>
85+
86+
87+

‎activities/communication.html

+71
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
5+
<meta name="viewport" content="width=device-width, initial-scale=1">
6+
7+
<!-- Latest compiled and minified CSS -->
8+
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
9+
10+
<!-- Optional theme -->
11+
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
12+
13+
<!-- Latest compiled and minified JavaScript -->
14+
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
15+
16+
<link rel="stylesheet" href="../style.css" />
17+
18+
<title>Setup communication</title>
19+
20+
</head>
21+
<body>
22+
<p><a href="../index.html">Back to Homepage</a></p>
23+
24+
<!-- UPDATE -->
25+
<img src="images/slack.png" class="img-responsive" />
26+
<small>Credit: public domain</small>
27+
28+
<!-- UPDATE -->
29+
<h1>Setup communication</h1>
30+
<div class="lead">Andrew J. Ko</div>
31+
32+
<p>Today you're going to set up the communication channels necessary for productive exchange. You're going to use <a href="https://slack.com" target="_blank">Slack</a> for most of your communication. If you haven't used Slack before, it's basically a one or more chat rooms in which you can write text and share images and documents. (Technologies like this have been around since the early 1980's; apparently it took 40 years for them to become worth <a href="http://fortune.com/2016/04/01/slack-raises-200-million-at-3-8-billion-valuation/" target="_blank">more than a billion dollars</a>).</p>
33+
34+
<h2>Join the class Slack Team</h2>
35+
36+
<p>If you haven't already, respond to the invite to the team. </p>
37+
38+
<p>Do the following:</p>
39+
40+
<ul>
41+
<li>Create one or more channels for your team's communication, preferably using your team's name.</li>
42+
<li>Ensure everyone on your team is invited to the channel(s).</li>
43+
<li>Make sure everyone has installed the Slack desktop/mobile apps</li>
44+
<li>Setup push notifications (especially on mobile) on your channels so you know when someone is trying to reach you and your team.</li>
45+
<li>Request the instructor or TA to add any integrations you might want with Google Docs, Google Drive, Google Hangouts, etc. to streamline communication.</li>
46+
</ul>
47+
48+
<h2>Create a shared Google Hangout</h2>
49+
50+
<p>To facilitate synchronous remote meetings, create a shared <a href="https://hangouts.google.com/" target="_blank">Google Hangout</a>. Integrate this into your Slack team so that you can easily start a Hangout from Slack.</p>
51+
52+
<h2>Define communication policies</h2>
53+
54+
<ul>
55+
<li>What are your team's expectations about timeliness of replies? Immediately? Within the hour? By the end of the day?</li>
56+
<li>When should you use @channel to <a href="https://get.slack.help/hc/en-us/articles/202009646-Make-an-announcement" target="_blank">make an announcement on Slack?</a></li>
57+
<li>When someone asks a question, who should reply? The "right" person or everyone?</li>
58+
</ul>
59+
60+
<p>Write all of these down in a new document on your GitHub wiki so everyone is clear on expectations.</p>
61+
62+
<h2>Credit</h2>
63+
64+
<p>For credit, invite the instructor and TA to your channel and write a message to them mentioning their names using the "@" syntax.</p>
65+
66+
</body>
67+
68+
</html>
69+
70+
71+

‎activities/complexity.html

+66
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
5+
<meta name="viewport" content="width=device-width, initial-scale=1">
6+
7+
<!-- Latest compiled and minified CSS -->
8+
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
9+
10+
<!-- Optional theme -->
11+
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
12+
13+
<!-- Latest compiled and minified JavaScript -->
14+
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
15+
16+
<link rel="stylesheet" href="../style.css" />
17+
18+
<!-- UPDATE -->
19+
<title>Complexity</title>
20+
21+
</head>
22+
<body>
23+
<p><a href="../index.html">Back to Homepage</a></p>
24+
25+
<!-- UPDATE -->
26+
<img src="images/complexity.jpg" class="img-responsive" />
27+
<small>Credit: public domain</small>
28+
29+
<!-- UPDATE -->
30+
<h1>Complexity</h1>
31+
<div class="lead">Andrew J. Ko</div>
32+
33+
<p>One of the most important attributes of a great engineer is their ability to reason about software complexity with agility. This means comprehending the smallest detail in a software implementation, all the way up to its impact on the highest level architectural detail, linking everything between, and explaining all of this complexity to other people. This skill is central because it not only demonstrates a mastery over how complex software systems are built, but also helps others acquire that mastery through communication.</p>
34+
35+
<p>Your task today is to practice acquiring knowledge of software complexity and communicating that complexity to others. To do this, you're going to choose an line of code in a file in an open source project and write explanations of the following:</p>
36+
37+
<ul>
38+
<li>The role of the line <em>locally</em> inside the function that it's in.</li>
39+
<li>The role of the function in the component it is in.</li>
40+
<li>The role of the class in the architecture of the program</li>
41+
<li>The role of the architecture in solving the problem the program solves.</li>
42+
</ul>
43+
44+
<p>To do these, you need to be savvy with program comprehension tools. Get good at searching code to find calls to functions, instantiations of classes, uses of variable names. GitHub's search features aren't as powerful as a proper IDE's search features, but they're good enough for today's practice.</p>
45+
46+
<p>Ready? Pick one of the following:</p>
47+
48+
<!-- UPDATE These will likely change. More stable links? -->
49+
<ul>
50+
<li><a href="https://github.com/adobe/brackets/blob/master/src/widgets/StatusBar.js#L116">Mystery line 1</a>.</li>
51+
<li><a href="https://github.com/adobe/brackets/blob/master/src/filesystem/FileIndex.js#L57">Mystery line 2</a>.</li>
52+
<li><a href="https://github.com/adobe/brackets/blob/master/src/search/FindInFiles.js#L341">Mystery line 3</a>.</li>
53+
<li><a href="https://github.com/adobe/brackets/blob/master/src/document/Document.js#L354">Mystery line 4</a>.</li>
54+
</ul>
55+
56+
57+
<p>When you think you know the answer, find someone else who is done but analyzed a different line. Try to explain the four details above to them until they understand.</p>
58+
59+
<p>When you're done, choose another until the end of class.</p>
60+
61+
</body>
62+
63+
</html>
64+
65+
66+

‎activities/dependencies.html

+45
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
5+
<meta name="viewport" content="width=device-width, initial-scale=1">
6+
7+
<!-- Latest compiled and minified CSS -->
8+
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
9+
10+
<!-- Optional theme -->
11+
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
12+
13+
<!-- Latest compiled and minified JavaScript -->
14+
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
15+
16+
<link rel="stylesheet" href="../style.css" />
17+
18+
<!-- UPDATE -->
19+
<title>Dependencies</title>
20+
21+
</head>
22+
<body>
23+
<p><a href="../index.html">Back to Homepage</a></p>
24+
25+
<!-- UPDATE -->
26+
<img src="images/bulb.jpg" class="img-responsive" />
27+
<small>Credit: unknown</small>
28+
29+
<!-- UPDATE -->
30+
<h1>Dependencies</h1>
31+
<div class="lead">Andrew J. Ko</div>
32+
33+
<p>Content TBD.</p>
34+
35+
<!--
36+
* Select packages
37+
* Evaluate quality of community
38+
-->
39+
40+
</body>
41+
42+
</html>
43+
44+
45+

‎activities/honest.html

+47
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
5+
<meta name="viewport" content="width=device-width, initial-scale=1">
6+
7+
<!-- Latest compiled and minified CSS -->
8+
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
9+
10+
<!-- Optional theme -->
11+
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
12+
13+
<!-- Latest compiled and minified JavaScript -->
14+
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
15+
16+
<link rel="stylesheet" href="../style.css" />
17+
18+
<title>Honest</title>
19+
20+
</head>
21+
<body>
22+
<p><a href="../index.html">Back to Homepage</a></p>
23+
24+
<img src="images/abe.jpg" class="img-responsive" />
25+
<small>Credit: public domain</small>
26+
27+
<h1>Honest</h1>
28+
<div class="lead">Andrew J. Ko</div>
29+
30+
<p>Because coordination is so important to productivity, great software engineers proactively provide credible information regardless of how it influences them personally. If you're stuck on something, tell someone and get help. If you broke something, tell someone. Don't let shame and consequence get in the way of shipping.</p>
31+
32+
<p>Now, whether it's easy to be honest isn't just an attribute of individual personality and ethics. It's also an attribute of your social setting. Some organizational cultures incentivize honesty by not punishing it; others might incentivize dishonesty and concealment by firing or reprimanding people who make mistakes. The right thing for your team and your product might be to say something, but it could be the wrong thing for your career.</p>
33+
34+
<p>Because we often can't change organizational culture factors, today we'll practice the individual factors. To get good at being honest, we'll do the following:
35+
<ol>
36+
<li>In groups of 3-5, share a professional or educational setting in which we weren't honest and describe the consequences it had.
37+
If you've never told anyone this, it could be hard, because it might mean experiencing some shame.
38+
That's ok! This class is a place of <a href="https://en.wikipedia.org/wiki/Psychological_safety" target="_blank">psychological safety</a>.</p></li>
39+
<li>As a class, we will go around and each person will share the story of member in their group (Do <em>not</em> mention names to the class). To be clear, you are sharing a group member's story, not your own. </li>
40+
</ol>
41+
42+
</body>
43+
44+
</html>
45+
46+
47+

‎activities/images/abe.jpg

187 KB
Loading

‎activities/images/build.jpg

77.1 KB
Loading

‎activities/images/calendar.jpg

147 KB
Loading

‎activities/images/complexity.jpg

477 KB
Loading

‎activities/images/finches.jpg

406 KB
Loading

‎activities/images/kitten.jpg

144 KB
Loading

‎activities/images/openmind.png

3.44 KB
Loading

‎activities/images/priority.jpg

237 KB
Loading

‎activities/images/puzzle.jpg

515 KB
Loading

‎activities/images/puzzle2.jpg

6.13 MB
Loading

‎activities/images/reflection.jpg

65.1 KB
Loading

‎activities/images/review.png

46.2 KB
Loading

‎activities/images/scales.png

11.8 KB
Loading

‎activities/images/slack.png

57 KB
Loading

‎activities/images/snail.jpg

350 KB
Loading

‎activities/images/teamwork.jpg

104 KB
Loading

‎activities/images/tools.jpg

392 KB
Loading

0 commit comments

Comments
 (0)