-
Notifications
You must be signed in to change notification settings - Fork 0
/
summer-lambs-blog.html
443 lines (397 loc) · 23 KB
/
summer-lambs-blog.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
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<!-- 2019-09-02 Mon 13:20 -->
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>The Summer Lambs Project</title>
<meta name="generator" content="Org mode" />
<meta name="author" content="Sami Kallinen, contributions by Jaakko Ojalehto" />
<style type="text/css">
<!--/*--><![CDATA[/*><!--*/
.title { text-align: center;
margin-bottom: .2em; }
.subtitle { text-align: center;
font-size: medium;
font-weight: bold;
margin-top:0; }
.todo { font-family: monospace; color: red; }
.done { font-family: monospace; color: green; }
.priority { font-family: monospace; color: orange; }
.tag { background-color: #eee; font-family: monospace;
padding: 2px; font-size: 80%; font-weight: normal; }
.timestamp { color: #bebebe; }
.timestamp-kwd { color: #5f9ea0; }
.org-right { margin-left: auto; margin-right: 0px; text-align: right; }
.org-left { margin-left: 0px; margin-right: auto; text-align: left; }
.org-center { margin-left: auto; margin-right: auto; text-align: center; }
.underline { text-decoration: underline; }
#postamble p, #preamble p { font-size: 90%; margin: .2em; }
p.verse { margin-left: 3%; }
pre {
border: 1px solid #ccc;
box-shadow: 3px 3px 3px #eee;
padding: 8pt;
font-family: monospace;
overflow: auto;
margin: 1.2em;
}
pre.src {
position: relative;
overflow: visible;
padding-top: 1.2em;
}
pre.src:before {
display: none;
position: absolute;
background-color: white;
top: -10px;
right: 10px;
padding: 3px;
border: 1px solid black;
}
pre.src:hover:before { display: inline;}
/* Languages per Org manual */
pre.src-asymptote:before { content: 'Asymptote'; }
pre.src-awk:before { content: 'Awk'; }
pre.src-C:before { content: 'C'; }
/* pre.src-C++ doesn't work in CSS */
pre.src-clojure:before { content: 'Clojure'; }
pre.src-css:before { content: 'CSS'; }
pre.src-D:before { content: 'D'; }
pre.src-ditaa:before { content: 'ditaa'; }
pre.src-dot:before { content: 'Graphviz'; }
pre.src-calc:before { content: 'Emacs Calc'; }
pre.src-emacs-lisp:before { content: 'Emacs Lisp'; }
pre.src-fortran:before { content: 'Fortran'; }
pre.src-gnuplot:before { content: 'gnuplot'; }
pre.src-haskell:before { content: 'Haskell'; }
pre.src-hledger:before { content: 'hledger'; }
pre.src-java:before { content: 'Java'; }
pre.src-js:before { content: 'Javascript'; }
pre.src-latex:before { content: 'LaTeX'; }
pre.src-ledger:before { content: 'Ledger'; }
pre.src-lisp:before { content: 'Lisp'; }
pre.src-lilypond:before { content: 'Lilypond'; }
pre.src-lua:before { content: 'Lua'; }
pre.src-matlab:before { content: 'MATLAB'; }
pre.src-mscgen:before { content: 'Mscgen'; }
pre.src-ocaml:before { content: 'Objective Caml'; }
pre.src-octave:before { content: 'Octave'; }
pre.src-org:before { content: 'Org mode'; }
pre.src-oz:before { content: 'OZ'; }
pre.src-plantuml:before { content: 'Plantuml'; }
pre.src-processing:before { content: 'Processing.js'; }
pre.src-python:before { content: 'Python'; }
pre.src-R:before { content: 'R'; }
pre.src-ruby:before { content: 'Ruby'; }
pre.src-sass:before { content: 'Sass'; }
pre.src-scheme:before { content: 'Scheme'; }
pre.src-screen:before { content: 'Gnu Screen'; }
pre.src-sed:before { content: 'Sed'; }
pre.src-sh:before { content: 'shell'; }
pre.src-sql:before { content: 'SQL'; }
pre.src-sqlite:before { content: 'SQLite'; }
/* additional languages in org.el's org-babel-load-languages alist */
pre.src-forth:before { content: 'Forth'; }
pre.src-io:before { content: 'IO'; }
pre.src-J:before { content: 'J'; }
pre.src-makefile:before { content: 'Makefile'; }
pre.src-maxima:before { content: 'Maxima'; }
pre.src-perl:before { content: 'Perl'; }
pre.src-picolisp:before { content: 'Pico Lisp'; }
pre.src-scala:before { content: 'Scala'; }
pre.src-shell:before { content: 'Shell Script'; }
pre.src-ebnf2ps:before { content: 'ebfn2ps'; }
/* additional language identifiers per "defun org-babel-execute"
in ob-*.el */
pre.src-cpp:before { content: 'C++'; }
pre.src-abc:before { content: 'ABC'; }
pre.src-coq:before { content: 'Coq'; }
pre.src-groovy:before { content: 'Groovy'; }
/* additional language identifiers from org-babel-shell-names in
ob-shell.el: ob-shell is the only babel language using a lambda to put
the execution function name together. */
pre.src-bash:before { content: 'bash'; }
pre.src-csh:before { content: 'csh'; }
pre.src-ash:before { content: 'ash'; }
pre.src-dash:before { content: 'dash'; }
pre.src-ksh:before { content: 'ksh'; }
pre.src-mksh:before { content: 'mksh'; }
pre.src-posh:before { content: 'posh'; }
/* Additional Emacs modes also supported by the LaTeX listings package */
pre.src-ada:before { content: 'Ada'; }
pre.src-asm:before { content: 'Assembler'; }
pre.src-caml:before { content: 'Caml'; }
pre.src-delphi:before { content: 'Delphi'; }
pre.src-html:before { content: 'HTML'; }
pre.src-idl:before { content: 'IDL'; }
pre.src-mercury:before { content: 'Mercury'; }
pre.src-metapost:before { content: 'MetaPost'; }
pre.src-modula-2:before { content: 'Modula-2'; }
pre.src-pascal:before { content: 'Pascal'; }
pre.src-ps:before { content: 'PostScript'; }
pre.src-prolog:before { content: 'Prolog'; }
pre.src-simula:before { content: 'Simula'; }
pre.src-tcl:before { content: 'tcl'; }
pre.src-tex:before { content: 'TeX'; }
pre.src-plain-tex:before { content: 'Plain TeX'; }
pre.src-verilog:before { content: 'Verilog'; }
pre.src-vhdl:before { content: 'VHDL'; }
pre.src-xml:before { content: 'XML'; }
pre.src-nxml:before { content: 'XML'; }
/* add a generic configuration mode; LaTeX export needs an additional
(add-to-list 'org-latex-listings-langs '(conf " ")) in .emacs */
pre.src-conf:before { content: 'Configuration File'; }
table { border-collapse:collapse; }
caption.t-above { caption-side: top; }
caption.t-bottom { caption-side: bottom; }
td, th { vertical-align:top; }
th.org-right { text-align: center; }
th.org-left { text-align: center; }
th.org-center { text-align: center; }
td.org-right { text-align: right; }
td.org-left { text-align: left; }
td.org-center { text-align: center; }
dt { font-weight: bold; }
.footpara { display: inline; }
.footdef { margin-bottom: 1em; }
.figure { padding: 1em; }
.figure p { text-align: center; }
.inlinetask {
padding: 10px;
border: 2px solid gray;
margin: 10px;
background: #ffffcc;
}
#org-div-home-and-up
{ text-align: right; font-size: 70%; white-space: nowrap; }
textarea { overflow-x: auto; }
.linenr { font-size: smaller }
.code-highlighted { background-color: #ffff00; }
.org-info-js_info-navigation { border-style: none; }
#org-info-js_console-label
{ font-size: 10px; font-weight: bold; white-space: nowrap; }
.org-info-js_search-highlight
{ background-color: #ffff00; color: #000000; font-weight: bold; }
.org-svg { width: 90%; }
/*]]>*/-->
</style>
<link rel="stylesheet" type="text/css" href="./8bs-blog.css"/>
<link rel="stylesheet" type="text/css" href="MyFontsWebfontsKit.css">
<link rel="stylesheet" type="text/css" href="./8bs-blog.css"/>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script
async
src="https://www.googletagmanager.com/gtag/js?id=UA-145050363-1"
></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() {
dataLayer.push(arguments);
}
gtag("js", new Date());
gtag("config", "UA-145050363-1");
</script>
<script type="text/javascript">
/*
@licstart The following is the entire license notice for the
JavaScript code in this tag.
Copyright (C) 2012-2019 Free Software Foundation, Inc.
The JavaScript code in this tag is free software: you can
redistribute it and/or modify it under the terms of the GNU
General Public License (GNU GPL) as published by the Free Software
Foundation, either version 3 of the License, or (at your option)
any later version. The code is distributed WITHOUT ANY WARRANTY;
without even the implied warranty of MERCHANTABILITY or FITNESS
FOR A PARTICULAR PURPOSE. See the GNU GPL for more details.
As additional permission under GNU GPL version 3 section 7, you
may distribute non-source (e.g., minimized or compacted) forms of
that code without the copy of the GNU GPL normally required by
section 4, provided you include this license notice and a URL
through which recipients can access the Corresponding Source.
@licend The above is the entire license notice
for the JavaScript code in this tag.
*/
<!--/*--><![CDATA[/*><!--*/
function CodeHighlightOn(elem, id)
{
var target = document.getElementById(id);
if(null != target) {
elem.cacheClassElem = elem.className;
elem.cacheClassTarget = target.className;
target.className = "code-highlighted";
elem.className = "code-highlighted";
}
}
function CodeHighlightOff(elem, id)
{
var target = document.getElementById(id);
if(elem.cacheClassElem)
elem.className = elem.cacheClassElem;
if(elem.cacheClassTarget)
target.className = elem.cacheClassTarget;
}
/*]]>*///-->
</script>
</head>
<body>
<div id="content">
<h1 class="title">The Summer Lambs Project</h1>
<div id="outline-container-org5fd814d" class="outline-2">
<h2 id="org5fd814d"><b>How we offered teenagers a summer job and taught them to code</b></h2>
<div class="outline-text-2" id="text-org5fd814d">
</div>
<div id="outline-container-orga706814" class="outline-3">
<h3 id="orga706814"><b>— A recursive dogfooding story</b></h3>
<div class="outline-text-3" id="text-orga706814">
<p>
<div class="video-container"><iframe width="940" height="557" src="https://www.youtube.com/embed/AvxUjVJ_vEg" frameborder="0" allowfullscreen></iframe></div>
</p>
</div>
</div>
<div id="outline-container-orgb3cbde6" class="outline-3">
<h3 id="orgb3cbde6"><b>Spaced Repetition with The Summer Lambs</b></h3>
<div class="outline-text-3" id="text-orgb3cbde6">
<p>
This summer we organized a lovely experiment, the Summer lambs project, where we offered a handful of teenagers the opportunity to get some work experience within tech and the chance to learn to code. We were curious whether someone could learn to program in just six weeks.
</p>
<p>
We ended up using a pattern that could be described as dogfooding mixed with a recursive learning loop. It turned out to work wonderfully and meant that the high schoolers coded an actual real-world application but also learned about ideas in programming and computer science through dogfooding the same app that they were programming.
</p>
<p>
The product they built is a quiz app that is meant to help people trying to learn through spaced repetition. The larger vision for the product was that they would build something during the six weeks that could become a Wikipedia of quizzes; a service where all the source materials of the world such as books, videos, and lectures could be found in a quiz form. After you have read a chapter from a book, you can learn the content by practicing with the quiz app, and by returning to the app until you have properly digested it.
</p>
<p>
You can try out the quiz app at <a href="https://8-bit-sheep.com/various/lamb-quiz/index.html">https://8-bit-sheep.com/various/lamb-quiz/index.html</a>! As the lambs put it "It's not ready and will probably never be ready, but it works!"
</p>
</div>
</div>
<div id="outline-container-org38cc303" class="outline-3">
<h3 id="org38cc303"><b>Crash Course Computer Science</b></h3>
<div class="outline-text-3" id="text-org38cc303">
<p>
For most of the days the kids, or the "lambs", would watch one or two videos in the mornings. Then they would generate about 20 questions for each video. Every day they would watch a new episode of the absolutely brilliant Crash Course Computer Science series. Sometimes they would also watch some more hands-on videos and tutorials related to programming.
</p>
<p>
The <a href="https://www.youtube.com/playlist?list=PLME-KWdxI8dcaHSzzRsNuOLXtM2Ep_C7a">Crash Course Computer Science</a> is a fantastic resource. We had already been using it at home with my kids during the past year. It is a fun way to learn computer science. We used to watch the videos together and collect insights on sticky notes. Then we would post them on a wall and return to them regularly, often while brushing our teeth, to review and discuss them. This experience was also one of the inspirations that led to the Summer Lambs Project.
</p>
<p>
The series consists of short 10+ minute youtube videos packed with information. It is designed very well and the manner in which the host <a href="https://twitter.com/missphilbin">Carrie Ann Philbin @MissPhilbin</a> explains computer science with wonderful clarity yet at some considerable depth makes it both fun and inspiring. The series basically covers what, say, a first-year computer science student would learn at university, albeit in a much more enjoyable way.
</p>
<p>
Before watching the videos and generating new questions, the lambs would actually start each day by answering 50 random questions from what they had previously produced. This was a natural way to assist them in their learning. Moreover, it was a good lesson in the merits of dogfooding while developing digital services.
</p>
<div class="figure">
<p><img src="./lamb1.jpg" alt="lamb1.jpg" />
</p>
</div>
</div>
</div>
<div id="outline-container-org5964ccd" class="outline-3">
<h3 id="org5964ccd"><b>Teaching high schoolers to code in 6 weeks</b></h3>
<div class="outline-text-3" id="text-org5964ccd">
<p>
The rest of the day was spent programming. We decided to throw them in at the deep end right from the start. They started coding on the very first day. Of course, this actually meant they were mostly copying code that was presented to them. At the start we were following a JavaScript <a href="https://www.youtube.com/watch?v=u98ROZjBWy8">tutorial</a> by James Q Quick where a simple quiz app is built. This was a perfect way to quickly get started and see some tangible results.
</p>
<p>
In terms of language, we chose JavaScript. Yeah, we know. Not perhaps our favorite languages in every sense nor the best. Clojure/ClojureScript, PureScript or even TypeScript comes to mind as something that might have been preferred. Nor is JS maybe the best choice in terms of teaching programming. Many schools and universities seem to opt for Python these days.
</p>
<p>
But there are other issues that speak in favour of JS: According to the <a href="https://insights.stackoverflow.com/survey/2019">StackOverflow 2019 Survey</a>, as many of you no doubt are aware, JavaScript is the most popular programming language — as it has been for seven years in a row now. JS has pwned the web stack. We saw this popularity as an important consideration as it increases the utility of the language. The number of resources out there that can help your learning journey are limitless as well as is the general ecosystem that can be taken advantage of to solve almost any problem at hand.
</p>
<p>
Perhaps an even more important rationale behind the choice was the tooling, which can be straight forward, particularly if you are writing vanilla ES6 for the frontend. It does not require the compiling steps which increase the distance between coding and seeing the results of that code. This helps the beginner experience.
</p>
<p>
Also the "replesque" experience that the JS console provides is an asset. It might not be a real repl nor a great one as repl experiences go, but it does help learners tremendously to do step by step iteration, data exploration, experimentation and help overall easier debugging. The lambs learned very quickly to do experiments in the console when they did not understand something. Furthermore, as ES6 is now supported in the modern browser, this also helped to make this decision.
</p>
</div>
</div>
<div id="outline-container-orga14a5f8" class="outline-3">
<h3 id="orga14a5f8"><b>Google Drive as backend</b></h3>
<div class="outline-text-3" id="text-orga14a5f8">
<p>
Another important decision was that we chose to focus exclusively on the front end to limit the complexity of the systems that the lambs would have to grok. As a consequence, we ended up using Google Spreadsheets as the backend. It was handy and easy to input data manually to a sheet, while the lambs were creating content for the quiz. It is fairly trivial to retrieve data from there.
</p>
<p>
The lambs also developed a feature where users can submit feedback on how to improve a particular question and these are collected into another sheet. Another similar implementation was the feature where the users are asked to contribute a question of their own to the platform in order to offer the users the option to do some active learning.
</p>
<p>
The highscore functionality is slightly more complex as there is some latency after submission and before an updated row can be retrieved through the Google Sheets csv-API. This led to some hacks in the app, but the case also highlighted why backends are needed and what kind of basic security concerns need to be solved. Anyone can in the current implementation rather trivially just inject any highscore with any nickname into the sheet. Still, it made a lot of sense to try to limit the scope of the project.
</p>
</div>
</div>
<div id="outline-container-org083785f" class="outline-3">
<h3 id="org083785f"><b>Also version control and mob coding</b></h3>
<div class="outline-text-3" id="text-org083785f">
<p>
The lambs also learned stuff like version control, ie. command-line Git, GitHub and pull requests. They were also introduced to the basics of some agile patterns and thinking. We especially made sure to do frequent retros which the kids seemed to find useful and enjoy. Pair coding, as well as mob coding, was also something they were used and taught.
</p>
<p>
Even though we did invest and "donate" a considerable amount of our own time to this project, we did also try to get the kids to do as much p2p learning as possible. Mob coding is a great tool for that and was used especially in the beginning. It helps complete novice learners not to get stuck as often, as they through mob coding get to "pool" their knowledge and solve problems as a group. When they got a bit further in their learning journey they started to focus much more on pair coding. It demands a bit more from each participant which is good.
</p>
<div class="figure">
<p><img src="./lambs2.JPG" alt="lambs2.JPG" />
</p>
</div>
</div>
</div>
<div id="outline-container-org968807b" class="outline-3">
<h3 id="org968807b"><b>The experience of teaching from scratch</b></h3>
<div class="outline-text-3" id="text-org968807b">
<p>
The experience of teaching someone who is starting from scratch was an enormously difficult but also fascinating and gratifying experience.
</p>
<p>
Something that struck us as especially interesting was how important it is to carefully choose what not to teach and resist the urge to explain. This might even be more difficult than, indeed, to choose what to teach. There are so many layers of abstractions even in a simple front end JS app and as we humans can only keep a handful of concepts in our minds at once, it is easy to overload the learner with too many things. Just to keep track of simple programming fundamentals and the system ie. how the browser, HTML, CSS, JavaScript, and the DOM interact and are related to each other is not an easy task for any beginner.
</p>
<p>
You have to be careful to only introduce one idea at a time. Though we did choose to break this rule at the beginning and did jump right in at the outset. Seeing the effect of the code you are writing is necessary to build motivation.
</p>
<p>
Another wonderfully gratifying experience was to see how the mechanics of repetition work in learning. It is not very surprising, but to see it unfold in front of your eyes was really fascinating.
</p>
<p>
For instance, to learn how the map function works takes careful repetition multiple times until it sticks. The learner might understand it, but not remember it a few hours later. Or take the git commands. We repeated the same steps every day for about a week until they stuck. I'm not entirely sure we appreciate the mechanics of this when we go about our business ordinarily. We communicate and think people remember and understand. Usually, they don't.
</p>
</div>
</div>
<div id="outline-container-org9e3e6fc" class="outline-3">
<h3 id="org9e3e6fc"><b>Fantastic Kids</b></h3>
<div class="outline-text-3" id="text-org9e3e6fc">
<p>
It needs to be said that the kids were amazingly bright and fast learners. It was such a pleasure to work with them. There were many moments when we were taken aback when realizing how they had figured out how to do something very advanced that had hardly been mentioned.
</p>
<p>
We are extremely happy and proud of what the lambs managed to learn and produce in such a short time. We are also grateful for the opportunity to learn ourselves. You can get a glimpse of how amazing these kids are in the video above.
</p>
<p>
And did they learn to programme in six weeks? Like they also express in the video, no, but then again learning to program is never finished. But they did get a great start that helps them to continue the life long journey if they would choose to.
</p>
<p>
We want to stress our gratitude to our partner, the Smart Data and Audience Insight team at Yle, The Finnish Broadcasting Company and Eija Moisala there who got excited by the idea and at very short notice decided to join the project and sponsor two of the lambs.
</p>
<p>
Of course, the project would not have been possible without the work of people like Carrie-Ann Philby and the team who produced the Crash Course Computer Science series not to mention the Green Brothers (<a href="https://twitter.com/johngreen">@johngreen</a> and <a href="https://twitter.com/hankgreen">@hankgreen</a>) offering the Crash Course concept and content to the universe. Also, a big hand to James Q Quick and Brad Traversy at <a href="https://www.youtube.com/channel/UC29ju8bIPH5as8OGnQzwJyA">Traversy Media</a> who have created some great tutorials for learners of programming, which we enjoyed during our adventure.
</p>
<p>
The planning, production of the project and the teaching were mostly done by yours truly, but the rest of the sheep at <a href="https://8-bit-sheep.com/">8-bit-sheep</a> are owed gratitude for their help and efforts. A special shoutout to Jaakko Ojalehto for jumping in and supervising as well as expertly teaching the lambs.
</p>
<div class="figure">
<p><a href="https://8-bit-sheep.com/"><img src="sheep-logo.gif" alt="sheep-logo.gif" /></a>
</p>
</div>
</div>
</div>
</div>
</div>
<div id="postamble" class="status">
<p class="author">Author: Sami Kallinen, contributions by Jaakko Ojalehto</p>
<p class="date">Created: 2019-09-02 Mon 13:20</p>
<p class="validation"><a href="http://validator.w3.org/check?uri=referer">Validate</a></p>
</div>
</body>
</html>