This repository has been archived by the owner on Jan 16, 2019. It is now read-only.
forked from hakimel/reveal.js
-
Notifications
You must be signed in to change notification settings - Fork 3
/
index.html
630 lines (539 loc) · 21.8 KB
/
index.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
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>How to Level Up as a Developer @ NUS</title>
<meta name="description" content="Slides for the NUSMods team's talk at NUS Hackers' Friday Hacks #71 on 15 August 2014">
<meta name="author" content="Beng Hee Eu">
<meta name="author" content="Yang Shun Tay">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link rel="image_src" href="thumbnail.png">
<link rel="stylesheet" href="css/reveal.min.css">
<link rel="stylesheet" href="css/theme/default.css" id="theme">
<link rel="stylesheet" href="css/style.css">
<!-- For syntax highlighting -->
<link rel="stylesheet" href="lib/css/zenburn.css">
<!-- If the query includes 'print-pdf', include the PDF print sheet -->
<script>
if( window.location.search.match( /print-pdf/gi ) ) {
var link = document.createElement( 'link' );
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = 'css/print/pdf.css';
document.getElementsByTagName( 'head' )[0].appendChild( link );
}
</script>
<!--[if lt IE 9]>
<script src="lib/js/html5shiv.js"></script>
<![endif]-->
</head>
<body>
<div class="reveal">
<!-- Any section element inside of this container is displayed as a slide -->
<div class="slides">
<section>
<h1>How to Level Up as a Developer @ NUS</h1>
<p>
By <a href="http://benghee.eu/" target="_blank">Beng</a> / <a href="https://github.com/ahbeng" target="_blank">ahbeng</a>
& <a href="http://yangshun.im" target="_blank">Yang Shun</a> / <a href="https://github.com/yangshun" target="_blank">yangshun</a>
</p>
<p>Slides source can be found <a href="https://github.com/nusmodifications/how-to-level-up-as-a-developer-at-nus" target="_blank">here</a>.</p>
</section>
<section>
<h2>Hi, I'm Beng</h2>
</section>
<section>
<h2>He's Yang Shun</h2>
</section>
<section>
<h2>We built NUSMods</h2>
<p>
(And some other things...)
</p>
</section>
<section>
<h2>Introduction</h2>
</section>
<section>
<h2>Outline</h2>
<ul>
<li><a href="#/7">Learning</a></li>
<li><a href="#/21">Modules for Learning Development</a></li>
<li><a href="#/36">Hackathons</a></li>
<li><a href="#/47">Open Source</a></li>
</ul>
</section>
<section>
<h2>Disclaimer</h2>
<p>
This talk is made up of our opinions and experiences.
</p>
<p>
Your results may vary.
</p>
</section>
<section>
<h2>No. 1 thing Google looks for?</h2>
<h3 class="fragment">
Learning Ability
</h3>
<ul class="fragment">
<li>Technology moves really rapidly</li>
<li>Important to large companies</li>
<li>Even more important to startups</li>
<li>Eventually overtake those with more experience</li>
</ul>
</section>
<section>
<h2>Optimize for Learning (Not grades)</h2>
<ul>
<li>Grades matter most before university</li>
<li>University is a whole new ball game</li>
<li>Choose what you want to learn</li>
</ul>
</section>
<section>
<blockquote>
G.P.A.’s are worthless as a criteria for hiring, and test scores are worthless. ... We found that they don’t predict anything.
</blockquote>
<cite>
<small>
Laszlo Bock, senior VP of people operations for Google
</small>
</cite>
</section>
<section>
<h2>Optimizing for Learning</h2>
<ul>
<li>Not optimizing for grades doesn't mean it's ok to get C's</li>
<li>You'll naturally get decent grades</li>
<li>How much learning value vs. time spent?</li>
</ul>
</section>
<section>
<h2>Don't take easy modules<br>just to pull your CAP up</h2>
<ul>
<li>Challenging modules force you to learn</li>
<li>Pick electives you find interesting, not easier</li>
</ul>
</section>
<section>
<h2>S-shaped Learning Curve</h2>
<img src="images/Alanf777_Lcd_fig07.png">
</section>
<section>
<h2>Key: Increase Learning Efficiency</h2>
<ul>
<li>Learning accelerates over time</li>
<li>Small efficiency gains have compounding effect</li>
</ul>
</section>
<section data-background="images/7217.multidesk.jpg">
</section>
<section>
<h2>Multiple Monitors</h2>
<ul>
<li>10% - 50% boost in productivity</li>
<li>Diminishing marginal returns after dual monitors</li>
<li>Sweet spot: Two 24" monitors</li>
</ul>
</section>
<section data-background="images/20120307-210852.jpg">
</section>
<section data-background="images/power-of-silence.jpg">
</section>
<section>
<h2>Silence</h2>
<ul>
<li>Very focused mental concentration needed, especially coding</li>
<li>Deep state of flow desired</li>
<li>Give total silence a try</li>
<li>Earplugs / noise-canceling headphones</li>
</ul>
</section>
<section>
<h2>Sleep & Exercise</h2>
<ul>
<li>Often neglected, especially with many deadlines looming</li>
<li>Proven many times over to improve learning and memory</li>
<li>Health benefits (of course)</li>
</ul>
</section>
<section>
<h2>Learning by Doing</h2>
</section>
<section>
<h2>How to get started?</h2>
<p>Many modules in SoC are optional</p>
<p>Do modules because you want to, not because you have to</p>
</section>
<section>
<h2>The Good Modules</h2>
<ul>
<li><a href="http://nusmods.com/modules/CP3101A" target="_blank">CP3101A</a> Global Open Source Project</li>
<li><a href="http://nusmods.com/modules/CP3101B" target="_blank">CP3101B</a> Web Programming and Applications</li>
<li><a href="http://nusmods.com/modules/CP3108A" target="_blank">CP3108A</a> Independent Work</li>
<li><a href="http://nusmods.com/modules/CP3108B" target="_blank">CP3108B</a> Independent Work (Orbital)</li>
<li><a href="http://nusmods.com/modules/CS3216" target="_blank">CS3216</a> Software Development on Evolving Platforms</li>
<li><a href="http://nusmods.com/modules/CS3217" target="_blank">CS3217</a> Software Engineering on Modern Application Platforms</li>
</ul>
</section>
<section>
<h2>The Origin of CS3216 and CS3217</h2>
<ul>
<img src="http://graph.facebook.com/benlwl/picture?type=large" class="ben">
<li>It all started with one man: Prof Ben Leong</li>
<li>Allow students to work with the latest technology relevant to the industry</li>
<li>Opportunity to work on their own ideas</li>
</ul>
</section>
<section>
<h2>CS3216 Software Development on Evolving Platforms</h2>
<ul>
<li>About product creation and development, not just about coding</li>
<li>Learn to deal with cutting edge and evolving technology</li>
<li>Work in multidisciplinary teams</li>
</ul>
</section>
<section>
<h2>CS3216</h2>
<ul>
<li>Lots of teamwork involved</li>
<li>Chance to work with different talented people</li>
<li>Multidisciplinary in nature (developers, designers, biz dev)</li>
</ul>
</section>
<section>
<h2>Course Structure</h2>
<ul>
<li>3 Assignments (Facebook App, App Seminar, Mobile Web)</li>
<li>Blogging assignments</li>
<li>Final Project (Any web-based application)</li>
</ul>
</section>
<section>
<h2>Why CS3216?</h2>
<ul>
<li>Get to meet cool people</li>
<li>Level up in web development. Fast</li>
<li>Build something you are interested in</li>
</ul>
</section>
<section>
<h2>Notable CS3216 Projects</h2>
<div class="part">
<h3><a href="https://github.com/darora/hush" target="_blank">Hush</a></h3>
<ul>
<li>Anonymous social network</li>
</ul>
</div>
<div class="part">
<h3><a href="http://una-org.github.io/" target="_blank">Una</a></h3>
<ul>
<li>Library for building real-time multi-users interactive apps</li>
</ul>
</div>
<div class="part">
<h3><a href="http://www.quickvi.com" target="_blank">GeeMeow / QuickVi</a></h3>
<ul>
<li>Instant Hangout / Skype service</li>
<li>Along with useful collaboration features</li>
<li>No login nor download required</li>
</ul>
</div>
</section>
<section>
<h2>CS3217 Software Engineering on Modern Application Platforms</h2>
<ul>
<li>Hardcore software engineering module</li>
<li>Reason for the existence of PL1 (iMac lab)</li>
<li>Each student is loaned an iPad for the course</li>
</ul>
</section>
<section>
<h2>Course Structure</h2>
<ul>
<li>5 Problem Sets (individual)</li>
<li>Build a Puzzle Bobble game by the first half of the semester</li>
<br>
<li>1 Final Project (team)</li>
<li>Build any iOS application of your wish</li>
</ul>
</section>
<section>
<h2>Why CS3217?</h2>
<ul>
<li>Mobile is hot.</li>
<li>More Facebook users are on mobile than desktops.</li>
<li>Mobile developers are highly sought after.</li>
</ul>
</section>
<section>
<h2>Notable CS3217 Projects</h2>
<div class="part">
<h3>Tenza Yakitori</h3>
<iframe width="640" height="360" src="http://www.youtube.com/embed/wI-4l_FhHsk" frameborder="0" allowfullscreen></iframe>
</div>
</section>
<section>
<h2>Notable CS3217 Projects</h2>
<div class="part">
<h3>Huntville</h3>
<iframe width="640" height="360" src="//www.youtube.com/embed/Tuui0LOw5nA" frameborder="0" allowfullscreen></iframe>
</div>
</section>
<section>
<h2>How to Survive CS3216 and CS3217</h2>
<ul>
<li>Sleep less</li>
<li>Make friends</li>
<li>Learn fast</li>
<li>Use libraries and frameworks. Do not reinvent the wheel</li>
</ul>
</section>
<section>
<h2>Personal Experience</h2>
<ul>
<li>Very little handholding; thrown into the deep end of the pool</li>
<li>Extremely fast way to level up <strike>provided you don't die</strike></li>
<li>You'll never die alone even if you do</li>
</ul>
</section>
<section>
<h2>Hackathons</h2>
<p>Eat. Hack. <s>Sleep.</s> Repeat</p>
</ul>
</section>
<section>
<h2>What's a Hackathon?</h2>
<ol>
<li>Form a team and code over 24 hours</li>
<li>Free food for a weekend</li>
<li>Cool swag!</li>
</ol>
</section>
<section>
<h2>What should I hack?</h2>
<ul>
<li>Anything! But usually there's a theme</li>
</ul>
</section>
<section>
<h2>What kind of hacks win?</h2>
<ul>
<li>Polished apps with well-communicated ideas.</li>
<li>Networking involved.</li>
<li><a href="http://tessrinearson.com/blog/?p=452" target="_blank">8 kinds of projects you meet at a hackathon.</a>
</li>
</ul>
</section>
<section>
<h2>Winning Strategies</h2>
<ul>
<li>Swiss-army knife team</li>
<li>A front-end deve with design experience</li>
<li>Using the right tools to accelerate development</li>
<li>All about fluff and showmanship</li>
</ul>
</section>
<section>
<h2>Swiss Army Knife Team</h2>
<ul>
<li>Diverse and multiple roles.</li>
<ul>
<li>Back-end guy</li>
<li>Front-end guy (who can design)</li>
<li>Guy who can pitch</li>
</ul>
<li>Pick up new skills fast.</li>
</ul>
</section>
<section>
<h2>Polish</h2>
<ul>
<li>Recognize cheap ways to attain polish!</li>
<li>Bootstrap is <u><strong>NOT</strong></u> sufficient. Use <a href="http://bootswatch.com/" target="_blank">bootstrap themes</a></li>
<li>People love things that move. Use <a href="http://daneden.github.io/animate.css/" target="_blank">animate.css</a></li>
</ul>
</section>
<section>
<h2>Showmanship</h2>
<ul>
<li>Only 2-3 mins per presentation.</li>
<li>Know what you want to demonstrate and rehearse the presentation flow well.</li>
<li>Focus on the part that needs to be shown. Make sure those work! <strike>Hard code the rest</strike></li>
</ul>
</section>
<section>
<h2>Winning Hacks</h2>
<div class="part">
<h3>SoundMesh</h3>
<p>3rd in PennApps Fall 2013</p>
<iframe width="640" height="360" src="//www.youtube.com/embed/mkTRKo3D7WA" frameborder="0" allowfullscreen></iframe>
</div>
</section>
<section>
<h2>Winning Hacks</h2>
<div class="part">
<h3>Magellan</h3>
<p>2nd Runner Up in Smart Port Hackathon 2014</p>
<iframe src="//player.vimeo.com/video/101667009" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
</section>
<section>
<h2>Hackathon Experience</h2>
<ul>
<li>Good way to learn a new library/framework</li>
<li>Tiring but rewarding process</li>
<li>Potentially complete your homework through a hackathon</li>
</ul>
</section>
<section>
<h2>Open Source Software (OSS)</h2>
<ul>
<li>Observe and learn from real-world projects</li>
<li>Empowers you to make an immediate impact on the world (Even with limited resources as a student)</li>
<li>Collaborate and learn from more experienced people</li>
</ul>
</section>
<section>
<h2>Open Source @ NUS</h2>
<ul>
<li><a href="http://nusmods.com/modules/CP3101A" target="_blank">CP3101A</a> Global Open Source Project (Facebook Open Academy)</li>
<li><a href="http://nusmods.com/modules/CP3106" target="_blank">CP3106</a> Independent Project</li>
<li><a href="http://nusmods.com/modules/CP3108A" target="_blank">CP3108A</a>/<a href="http://nusmods.com/modules/CP3108B" target="_blank">CP3108B</a> Independent Work</li>
<li><a href="https://developers.google.com/open-source/soc/" target="_blank">Google Summer of Code</a> (GSoC)</li>
</ul>
</section>
<section>
<h2>Open Source (Most Of) Your Code</h2>
<ul>
<li><a href="https://github.com/" target="_blank">GitHub</a> is almost like a portfolio</li>
<li>Push projects and significant homework to GitHub</li>
<li>5 private repositories <a href="https://education.github.com/" target="_blank">free for students</a></li>
</ul>
</section>
<section>
<h2>Commit Logs from Last Night</h2>
<iframe class="stretch" src="http://www.commitlogsfromlastnight.com/" style="background-color:white"></iframe>
</section>
<section>
<h2>Soloing: Starting your own OSS Project</h2>
<ul>
<li>Put together everything you've been learning</li>
<li>Don't worry if not polished</li>
<li>You only see final product</li>
</ul>
</section>
<section>
<h2>Codename: <a href="corset/">CORSet</a></h2>
<iframe class="stretch" src="corset/" style="background-color:white"></iframe>
</section>
<section>
<h2>Early NUSMods Release</h2>
<iframe class="stretch" src="NUSMods-Offline/"></iframe>
<p>Please refresh if the page doesn't load</p>
</section>
<section>
<h2>NUS-Related Projects</h2>
<ul>
<li>Scratch your own itches</li>
<li>Directly accessible community of users</li>
<li>Help your fellow students</li>
</ul>
</section>
<section>
<h2>NUSMods.com</h2>
<ul>
<li>65K unique devices</li>
<li>2.1 million page views</li>
<li>Most visible student-led OSS project</li>
<li>Use that visibility to benefit the community</li>
</ul>
</section>
<section>
<h2>NUSModifications GitHub Organization</h2>
<ul>
<li>Check it out <a href="http://github.com/nusmodifications/" target="_blank">here</a>
<li>Link or host other NUS OSS projects</li>
<li>Yang Shun integrated <a href="http://www.corspedia.com/" target="_blank">Corspedia</a></li>
<li>Ashray integrated <a href="http://nusmodmaven.appspot.com/" target="_blank">ModMaven</a></li>
</ul>
</section>
<section>
<h2>Getting Started</h2>
<ul>
<li>Hang out on our <a href="https://www.hipchat.com/invite/138374/5dc7a5e8ef2e4d735d67d8e64cbf636e" target="_blank">HipChat development channel</a></li>
<li>Look at open <a href="https://github.com/nusmodifications/nusmods/issues" target="_blank">issues</a></li>
<li>Chat and discuss with us</li>
<li>Make a Pull Request (PR)</li>
<li>Make first few PRs in a helpful environment</li>
</ul>
</section>
<section>
<h2>Keeping it Going: Write Code Every Day</h2>
<ul>
<li><a href="http://ejohn.org/" target="_blank">John Resig</a>, jQuery creator has a great <a href="http://ejohn.org/blog/write-code-every-day/" target="_blank">blog post</a> about this</li>
<li>Develop the habit of working on your side projects every single day</li>
</ul>
</section>
<section>
<h2>Gamification: GitHub Streaks</h2>
<img src="images/jeresig.png">
</section>
<section>
<h1>Wrapping Up</h1>
</section>
<section>
<h1>1.50</h1>
</section>
<section>
<h1>1.13</h1>
</section>
<section>
<h1>My Story</h1>
</section>
<section>
<h1>Work Hard, Dream Big</h1>
</section>
<section>
<h1>Q & A</h1>
<h3>By Beng and Yang Shun</h3>
</section>
<section>
<h1>THE END</h1>
</section>
</div>
</div>
<script src="lib/js/head.min.js"></script>
<script src="js/reveal.min.js"></script>
<script>
// Full list of configuration options available here:
// https://github.com/hakimel/reveal.js#configuration
Reveal.initialize({
controls: true,
progress: true,
history: true,
center: true,
theme: Reveal.getQueryHash().theme, // available themes are in /css/theme
transition: Reveal.getQueryHash().transition || 'default', // default/cube/page/concave/zoom/linear/fade/none
// Parallax scrolling
// parallaxBackgroundImage: 'https://s3.amazonaws.com/hakim-static/reveal-js/reveal-parallax-1.jpg',
// parallaxBackgroundSize: '2100px 900px',
// Optional libraries used to extend on reveal.js
dependencies: [
{ src: 'lib/js/classList.js', condition: function() { return !document.body.classList; } },
{ src: 'plugin/markdown/marked.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
{ src: 'plugin/markdown/markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
{ src: 'plugin/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } },
{ src: 'plugin/zoom-js/zoom.js', async: true, condition: function() { return !!document.body.classList; } },
{ src: 'plugin/notes/notes.js', async: true, condition: function() { return !!document.body.classList; } },
// // Remote control your reveal.js presentation using a touch device
// { src: 'plugin/remotes/remotes.js', async: true, condition: function() { return !!document.body.classList; } }
]
});
</script>
</body>
</html>