-
Notifications
You must be signed in to change notification settings - Fork 0
/
campjs.xml
646 lines (618 loc) · 24.9 KB
/
campjs.xml
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
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
<scene>
<spawn position="0 13 2" />
<link href="chase.xml" position="0 1 -6.7" rotation="0 0 0" />
<skybox style="color: linear-gradient(#555, #000)" />
<box id="black" position="0 10.1 11" rotate="0 0.3 0" scale="20 20 40" style="collision: none; texture-repeat: 40 20; texture-map: url(/images/box.png); double-sided: true" />
<billboard id="turnaround" position="0 15 -6.5" scale="16 9 0.1"><![CDATA[
<center style="font-size:2em;position:relative;top:40%;transform:translateY(-50%);">
<h1>TURN</h1>
<h1>AROUND</h1>
</center>
]]></billboard>
<box id="backwall" position="0 10 -7" scale="18 20 0.25" style="color: #f07" />
<box id="landing" position="0 7 -2" scale="18 0.25 10" style="color: #f07" />
<box id="ramp" position="-8 3.5 8.2" scale="2 12.7 0.25" style="color: #f07" rotation="-0.9827949 0 0"/>
<box id="row_g" position="1 7.9 3.0" scale="16 0.5 0.25" style="color: #f07" />
<box id="row_g" position="1 6.95 3.5" scale="16 0.25 1.5" style="color: #f07" />
<box id="row_f" position="1 6 5" scale="16 0.25 1" style="color: #f07" />
<box id="row_e" position="1 5 6.5" scale="16 0.25 1" style="color: #f07" />
<box id="row_d" position="1 4 8" scale="16 0.25 1" style="color: #f07" />
<box id="row_c" position="1 3 9.5" scale="16 0.25 1" style="color: #f07" />
<box id="row_b" position="1 2 11" scale="16 0.25 1" style="color: #f07" />a
<box id="row_a" position="1 1 12.5" scale="16 0.25 1" style="color: #f07" />
<box id="stage" position="0 0.125 18.3" scale="18 0.25 10" style="color: #f07" />
<box id="lectern" position="8 0.5 20" scale="1 1.25 0.5" style="color: #f07" />
<box id="next" position="7.75 1.124 20" scale="0.3 0.01 0.3" style="color: #fff; texture-map: url(/images/next.png)" />
<box id="previous" position="8.25 1.124 20" scale="0.3 0.01 0.3" style="color: #fff; texture-map: url(/images/previous.png)" />
<billboard id="screen_odd" position="0 9.5 27.01" scale="18 18 0.1" rotation="-0.2 3.14159 0"><![CDATA[
]]></billboard>
<billboard id="screen_even" position="0 9.5 27" scale="18 18 0.1" rotation="-0.2 3.14159 0"><![CDATA[
]]></billboard>
<billboard id="notes" position="8 0.69 20.25" scale="0.85 0.82 0.001"><![CDATA[
]]></billboard>
<slide><![CDATA[
<center style="position:relative;top:40%;transform:translateY(-50%);">
<h1>CampJS VI</h1>
<h2>Goldcoast 2015</h2>
</center>
]]></slide>
<slide><![CDATA[
<center style="position:relative;top:40%;transform:translateY(-50%);">
<h2>a.k.a.</h2>
<h1>What I did <br> on my holiday</h1>
</center>
]]></slide>
<slide><![CDATA[
<center style="position:relative;top:40%;transform:translateY(-50%);">
<h1>CampJS</h1>
<h2>• What is it?</h2>
<h2>• Who is it for?</h2>
<h2>• Why do we go?</h2>
<h2>• Why should you go?</h2>
</center>
]]></slide>
<slide><![CDATA[
<center style="position:relative;top:40%;transform:translateY(-50%);">
<h2>But first!</h2>
<br>
<h1>Granny was a hacker</h1>
<p>Kris Howard</p>
<p><a href="https://www.youtube.com/watch?v=eS9bI7KDmeU">Watch!</a></p>
</center>
]]></slide>
<slide><![CDATA[
<center style="position:relative;top:40%;transform:translateY(-50%);">
<h1>What is CampJS?</h1>
<p>• An event for the JavaScript community</p>
<p>• Mixes expert-led, structured content<br>and self-directed, unstructured learning</p>
<p>• A full weekend to learn, relax, make friends,<br>and network</p>
<p>• Demos!</p>
</center>
]]></slide>
<slide><![CDATA[
<center style="position:relative;top:50%;transform:translateY(-50%);">
<img style="max-width:100%" src="/images/campjs/knitters.png" alt="Knitting">
</center>
]]></slide>
<slide><![CDATA[
<center style="position:relative;top:40%;transform:translateY(-50%);">
<h1>1. Undefined is<br>not a function</h1>
<h2><em>A guide to the care and feeding of new devs</em></h2>
<p>http://git.io/v41CJ</p>
</center>
]]></slide>
<slide><![CDATA[
<img style="max-width:100%" src="/images/campjs/undefined-is-not-a-function.jpg" alt="Amy Simmons">
<center><h3><em>Amy Simmons, @amesimmons</em></h3></center>
]]></slide>
<slide><![CDATA[
<center style="position:relative;top:40%;transform:translateY(-50%);">
Excited+Overwhelmed+Frustrated+Fear
</center>
]]></slide>
<slide><![CDATA[
<center style="position:relative;top:40%;transform:translateY(-50%);">
<quote>“Only went home crying once<br>in the last six months”</quote>
</center>
]]></slide>
<slide><![CDATA[
<center style="position:relative;top:40%;transform:translateY(-50%);">
<h1>Juniors</h1>
<p>are embarrassed to ask</p>
<p>are supposed to know more</p>
</center>
]]></slide>
<slide><![CDATA[
<center style="position:relative;top:40%;transform:translateY(-50%);">
<h2>“Foster a supportive environment where juniors can be vulnerable without fear”</h2>
</center>
]]></slide>
<slide><![CDATA[
<center style="position:relative;top:40%;transform:translateY(-50%);">
<h1>Recommendations</h1>
<p>• Weekly pair programming with a senior</p>
<p>• Code Reviews</p>
<p>• Onboarding</p>
<p>• Open source</p>
</center>
]]></slide>
<slide><![CDATA[
<center style="position:relative;top:40%;transform:translateY(-50%);">
<h1>Knowledge is continuous!</h1>
</center>
]]></slide>
<slide><![CDATA[
<center style="position:relative;top:40%;transform:translateY(-50%);">
<h1>It's probably the same in every industry</h1>
<br>
<p>but IT has more made up words</p>
</center>
]]></slide>
<slide><![CDATA[
<center style="position:relative;top:50%;transform:translateY(-50%);">
<img style="max-width:100%" src="/images/campjs/full-of-noobs.jpg" alt="Full of noobs">
<p>We're all noobs</p>
</center>
]]></slide>
<slide><![CDATA[
<center style="position:relative;top:40%;transform:translateY(-50%);">
<h1>Who is CampJS for?</h1>
<p>• All ages</p>
<p>• All genders</p>
<p>• All levels of skill</p>
</center>
]]></slide>
<slide><![CDATA[
<center style="position:relative;top:40%;transform:translateY(-50%);">
<h1>Who is CampJS for?</h1>
<p>• Programmers</p>
<p>• Managers</p>
<p>• Artists</p>
<p>• Musicians</p>
<p>• Magicians</p>
<p>• Web personalities</p>
<p>• Sponsors</p>
</center>
]]></slide>
<slide><![CDATA[
<center style="position:relative;top:40%;transform:translateY(-50%);">
<h1>2. Data Visualisation</h1>
<h2>An unnecessary history</h2>
<p>• Pioneered by Willian Playfair 1759 - 1823</p>
<p>• credited with inventing the line, bar,<br>and pie charts.</p>
</center>
]]></slide>
<slide><![CDATA[
<center>
<img style="max-width:100%" src="/images/campjs/pie.png" alt="Pie chart">
</center>
]]></slide>
<slide><![CDATA[
<img style="max-width:100%" src="/images/campjs/bar.png" alt="Bar chart">
]]></slide>
<slide><![CDATA[
<img style="max-width:100%" src="/images/campjs/time-series.png" alt="Time series graph">
<center><h3><em>Clear data is invaluable</em></h3></center>
]]></slide>
<slide><![CDATA[
<center style="position:relative;top:40%;transform:translateY(-50%);">
<h1>Poorly presented data is garbage</h1>
</center>
]]></slide>
<slide><![CDATA[
<center style="position:relative;top:40%;transform:translateY(-50%);">
<h1>The purpose of data visualisation lies on a spectrum</h1>
<br>
<h1>SCIENCE <---> ART</h1>
</center>
]]></slide>
<slide><![CDATA[
<p>• Data science <strong><--- SCIENCE</strong></p>
<p>• Computer science</p>
<p>• Statistics</p>
<br>
<p>• Creative coding</p>
<p>• Cartography</p>
<br>
<p>• Graphic design</p>
<p>• Information design</p>
<p>• Journalism <strong><--- ART</strong></p>
]]></slide>
<slide><![CDATA[
<h1>Why?</h1>
<p>• Art (data artists)</p>
<p>• Story telling (http://guns.periscopic.com)</p>
<p>• Explain a product</p>
<p>• Exploration (big data)</p>
]]></slide>
<slide><![CDATA[
<center style="position:relative;top:40%;transform:translateY(-50%);">
<h1>Motion tracked dance data</h1>
<h2>by Ri Liu</h2>
<p>Ri's work http://ri.id.au/</p>
<p>Motion tracking http://motion-data.studiometric.co/</p>
</center>
]]></slide>
<slide><![CDATA[
<center style="position:relative;top:40%;transform:translateY(-50%);">
<h1>Dancer loved it</h1>
<h1>:D</h1>
</center>
]]></slide>
<slide><![CDATA[
<center style="position:relative;top:40%;transform:translateY(-50%);">
<h1>Teacher didn't get it</h1>
<h1>:\</h1>
</center>
]]></slide>
<slide><![CDATA[
<h1>Recommendations</h1>
<p>• Learn D3.js and Raphael/Snap.svg</p>
<p>• Abstractions like Highcharts only let you colour inside the lines</p>
<p>• Generate throwaways</p>
<p>• Be inspired - http://twitter.com/riblah</p>
]]></slide>
<slide><![CDATA[
<center style="position:relative;top:40%;transform:translateY(-50%);">
<h1>3. Legals for Developers</h1>
<p>Kay Lam-MacLeod</p>
<p>Idea Lawyer</p>
<p>@IdeaLaw</p>
</center>
]]></slide>
<slide><![CDATA[
<center style="position:relative;top:40%;transform:translateY(-50%);">
<h1>3. Making Games for the Web</h1>
<p>Not "How To Makes Games"</p>
</center>
]]></slide>
<slide><![CDATA[
<img style="max-width:100%" src="/images/campjs/ash.jpg" alt="Ash Kyd">
<center><h3><em>Ash Kyd, <a href="http://ash.ms">http://ash.ms</a></em></h3></center>
]]></slide>
<slide><![CDATA[
<center style="position:relative;top:40%;transform:translateY(-50%);">
<h1>TEACH YOURSELF <br>to make games</h1>
<p>Make something achievable</p>
<p>Work to your strengths</p>
<p>Take ALL the shortcuts</p>
<p>Prototype with familiar tech</p>
</center>
]]></slide>
<slide><![CDATA[
<center style="position:relative;top:50%;transform:translateY(-50%);">
<img style="max-width:50%" src="/images/campjs/pixijs.png" alt="Pixi.js">
<p>Just a rendering engine</p>
<p>2D WebGL renderer with canvas fallback</p>
<p><a href="http://www.pixijs.com/">http://www.pixijs.com/</a></p>
</center>
]]></slide>
<slide><![CDATA[
<center style="position:relative;top:50%;transform:translateY(-50%);">
<img style="max-width:50%" src="/images/campjs/phaser.png" alt="Phaser">
<p>Built on Pixi</p>
<p>A Fast, fun and free open source framework <br>for canvas and WebGL powered browser games</p>
<p><a href="http://phaser.io/">http://phaser.io/</a></p>
</center>
]]></slide>
<slide><![CDATA[
<center style="position:relative;top:50%;transform:translateY(-50%);">
<img style="max-width:50%" src="/images/campjs/threejs.png" alt="Three.js">
<p>WebGL engine </p>
<p>A JavaScript 3D Library <br>which makes WebGL simpler</p>
<p><a href="http://threejs.org/">http://threejs.org/</a></p>
</center>
]]></slide>
<slide><![CDATA[
<center style="position:relative;top:50%;transform:translateY(-50%);">
<img style="max-width:50%" src="/images/campjs/babylonjs.png" alt="Babylon.js">
<p>A complete JavaScript framework <br>for building 3D games with <br>HTML5, WebGL and Web Audio</p>
<p><a href="http://www.babylonjs.com/">http://www.babylonjs.com/</a></p>
</center>
]]></slide>
<slide><![CDATA[
<center style="position:relative;top:40%;transform:translateY(-50%);">
<h1>Incidentally!</h1>
<p>Three.js and Babylon.js are able to produce WebVR effects</p>
</center>
]]></slide>
<slide><![CDATA[
<center style="position:relative;top:50%;transform:translateY(-50%);">
<img style="max-width:50%" src="/images/campjs/cordova.png" alt="Cordova">
<p>For building native mobile applications <br>using HTML, CSS and JavaScript</p>
<p><a href="https://cordova.apache.org/">https://cordova.apache.org/</a></p>
</center>
]]></slide>
<slide><![CDATA[
<center style="position:relative;top:50%;transform:translateY(-50%);">
<img style="max-width:75%" src="/images/campjs/electron.png" alt="Electron">
<p>Build cross platform desktop apps<br>with web technologies</p>
<p><a href="https://cordova.apache.org/">http://electron.atom.io/</a></p>
</center>
]]></slide>
<slide><![CDATA[
<center style="position:relative;top:40%;transform:translateY(-50%);">
<h1>4. SceneVR</h1>
<p>by Ben Nolan</p>
</center>
]]></slide>
<slide><![CDATA[
<center style="position:relative;top:40%;transform:translateY(-50%);">
<p>Not even a session.</p>
</center>
]]></slide>
<slide><![CDATA[
<center style="position:relative;top:40%;transform:translateY(-50%);">
<p>The actual session was...</p>
<h1>WebVR!</h1>
<p>What's the state of VR on the web, rendering techniques, and challenges</p>
</center>
]]></slide>
<slide><![CDATA[
<center style="position:relative;top:40%;transform:translateY(-50%);">
<p>• Mozilla is [doing a lot of things]</p>
<p>• Depth in CSS will be a thing</p>
<p>• WebGL2 and web workers [will be great]</p>
</center>
]]></slide>
<slide><![CDATA[
<center style="position:relative;top:40%;transform:translateY(-50%);">
<quote>If correctness is everything, work at Pixar. Realtime requires shortcuts.</quote>
</center>
]]></slide>
<slide><![CDATA[
<img style="max-width:100%" src="/images/campjs/webvr.jpg" alt="Ash Kyd">
<center><h3>I took this photo <br>because Marcus likes X-Wings</h3></center>
]]></slide>
<slide><![CDATA[
<center style="position:relative;top:40%;transform:translateY(-50%);">
<h1>SceneVR!</h1>
<p>• Mobile support (Supports Google Cardboard)</p>
<p>• Multiplayer (with websockets)</p>
<p>• Renders on server, streamed to clients</p>
<p>• Portals to link to scenes</p>
</center>
]]></slide>
<slide><![CDATA[
<center style="position:relative;top:40%;transform:translateY(-50%);">
<p>• Uses WebGL</p>
<p>• Loads <strong>.xml</strong> scene descriptions</p>
<p>• Imports <strong>.obj</strong> models</p>
</center>
]]></slide>
<slide><![CDATA[
<center style="position:relative;top:40%;transform:translateY(-50%);">
<p>• Audio support</p>
<p>• WebRTC voice chat</p>
<p>• Uses OpenTok for server multiplexing</p>
<p>• Server creates separate channel for each scene</p>
</center>
]]></slide>
<slide><![CDATA[
<center style="position:relative;top:40%;transform:translateY(-50%);">
<p>• Script your worlds using JavaScript</p>
<p>• Supports jQuery</p>
<p>• Simulate physics with Cannon.js<br><a href="http://cannonjs.org">http://cannonjs.org</a></p>
<p>• Renders with Three.js<br><a href="http://threejs.org">http://threejs.org</a></p>
</center>
]]></slide>
<slide><![CDATA[
<center style="position:relative;top:40%;transform:translateY(-50%);">
<p>• Interoperable with JanusVR (<a href="http://janusvr.com/">http://janusvr.com/</a>)</p>
<p>• Declarative VR markup, similar to</p>
<p> – A-frame by Mozilla</p>
<p> – Glam by Tony Parisi</p>
<p> – JanusVR by James McCrae</p>
<p> – Metaroom by Tee Jia Hen</p>
<p>The goal is to converge</p>
</center>
]]></slide>
<slide><![CDATA[
<center style="position:relative;top:40%;transform:translateY(-50%);">
<h1>The Easy way</h1>
<p>• Download the editor/server app</p>
<p><a href="http://docs.scenevr.com/download.html">http://docs.scenevr.com/download.html</a></p>
<p>or</p>
<h1>The hard way</h1>
<p>• Install using npm</p>
<p><code>npm install scenevr -g</code></p>
<p>(ask a dev)</p>
</center>
]]></slide>
<slide><![CDATA[
<center style="position:relative;top:40%;transform:translateY(-50%);">
<h1>5. Creating <br>Command-line Tools <br>with NodeJS</h1>
<p>by Glen Arrowsmith</p>
<p>Prompts, spinners, tests, and more!</p>
<p><a href="http://ow.ly/VPBjf">http://ow.ly/VPBjf</a></p>
</center>
]]></slide>
<slide><![CDATA[
<center style="position:relative;top:40%;transform:translateY(-50%);">
<h1>6. Hardware Hacking</h1>
<p><strong>Making Wearables</strong> <br>by Anna Gerber</p>
<p><strong>Lets Go Fly Kites</strong>, <br>by Glen Arrowsmith</p>
<p><strong>IoT Showbag</strong>, <br>everyone, all the time</p>
</center>
]]></slide>
<slide><![CDATA[
<center style="position:relative;top:50%;transform:translateY(-50%);">
<img style="max-width:100%" src="/images/campjs/balloons.jpg" alt="Balloons">
<h1>Hackers with balloons</h1>
</center>
]]></slide>
<slide><![CDATA[
<center style="position:relative;top:40%;transform:translateY(-50%);">
<p>• Learn new skills</p>
<p>• Remind developers that <br>they can make real things</p>
<p>• Go play outside for a while</p>
<p>• Kites are awesome</p>
</center>
]]></slide>
<slide><![CDATA[
<center style="position:relative;top:40%;transform:translateY(-50%);">
<h1>The IoT showbag</h1>
<img style="max-width:100%" src="/images/campjs/esp8266.jpg" alt="IoT development board">
</center>
]]></slide>
<slide><![CDATA[
<center style="position:relative;top:40%;transform:translateY(-50%);">
<h1>Featuring ESP8266</h1>
<p>• WiFi built-in</p>
<p>• JavaScript programmable</p>
<p>• Arduino compatible (so I can <br>buy ALL the sensors and things)</p>
<p>• USB powered</p>
<h2>• $4.89</h2>
</center>
]]></slide>
<slide><![CDATA[
<center style="position:relative;top:40%;transform:translateY(-50%);">
<h1>7. ReactJS</h1>
<p>• “A JavaScript library for building user interfaces”</p>
<p>• The “V” in “MVC”, - independant of your technology stack</p>
<p>• Simplifies creating your interface dynamically in the browser, pre-rendered on the server, or powering a native mobile application</p>
<p>• Implements a one-way reactive data flow</p>
<p>• We have adopted this<br>for the new Meerkats website</p>
</center>
]]></slide>
<slide><![CDATA[
<center style="position:relative;top:40%;transform:translateY(-50%);">
<h1>8. ES2015 and Babel</h1>
<p>• Formerly known as ES6</p>
<p>• ECMA TC39 will be making constant additions to ECMAScript</p>
<p>• It's no big deal</p>
<p>• Use Babel to adopt new features without fear</p>
<p>• We have adopted this<br>for the new Meerkats website</p>
</center>
]]></slide>
<slide><![CDATA[
<center style="position:relative;top:40%;transform:translateY(-50%);">
<h1>9. Webpack</h1>
<p>• Simple<sup>*</sup> build process specifically for web projects</p>
<p>• I rejected this last year, but it hasn't gone away</p>
<p>• We have adopted this<br>for the new Meerkats website</p>
<p>* once you understand it :/</p>
</center>
]]></slide>
<slide><![CDATA[
<center style="position:relative;top:40%;transform:translateY(-50%);">
<h1>10. TypeScript</h1>
<p>• Adds enforceable data types to JavaScript</p>
<p>• Reduce errors, improve understandability</p>
<p>• Enables Intellisense</p>
<p>• Supports ES201x</p>
<p>• Works great with ReactJS</p>
<p>• We'll get there eventually</p>
</center>
]]></slide>
<slide><![CDATA[
<center style="position:relative;top:40%;transform:translateY(-50%);">
<h1>11. CouchDB</h1>
<p>• <b>C</b>luster <b>O</b>f <b>U</b>nreliable <b>C</b>ommodity <b>H</b>ardware (DB)</p>
<p>• Extremely failure resistant</p>
<p>• "If you get a response, your data is written<br>and safe"</p>
<p>• Clean shut down = pull the plug</p>
<p>• Replicates between peers</p>
<p>• Push or pull from any other CouchDB server</p>
</center>
]]></slide>
<slide><![CDATA[
<center style="position:relative;top:43%;transform:translateY(-50%);">
<h1>12. PouchDB</h1>
<p>• The JavaScript database that syncs!</p>
<p>• "PouchDB was created to help web developers build applications that work as well offline as they do online."</p>
<p>• Replicate with CouchDB</p>
<p>• Create a new instance of PouchDB, sync with remote CouchDB - continuous replication</p>
<p>• Manage with Resources > IndexedDB - or Chrome plugin</p>
<p>• Can put HTML into local storage!</p>
<p>• See also Couchbase Lite for mobile devices</p>
</center>
]]></slide>
<slide><![CDATA[
<center style="position:relative;top:40%;transform:translateY(-50%);">
<h1>12. Other things</h1>
<p>• Falcor</p>
<p>• Aspect-oriented Programming</p>
<p>• Braintree Payments</p>
</center>
]]></slide>
<slide><![CDATA[
<center style="position:relative;top:40%;transform:translateY(-50%);">
<h1>Why do I go?</h1>
<p>• Get inspired</p>
<p>• Get help</p>
<p>• Get smarter</p>
</center>
]]></slide>
<slide><![CDATA[
<center style="position:relative;top:40%;transform:translateY(-50%);">
<h1>Why do I go?</h1>
<p>• Talk to the authors and experts</p>
<p>• Play with code</p>
<p>• Catch up with friends</p>
<p>• Be with the kind of people<br>who love JavaScript enough<br>to travel interstate to wallow in it</p>
</center>
]]></slide>
<slide><![CDATA[
<center style="position:relative;top:40%;transform:translateY(-50%);">
<h1>Why do I go?</h1>
<h2><i>“We bring rock stars from around Australia and around the world so you can see that they are normal people, and that you can be a normal person too” -- Tim Oxley, CampJS founder</i></h2>
</center>
]]></slide>
<slide><![CDATA[
<center style="position:relative;top:40%;transform:translateY(-50%);">
<h1>Why should you go?</h1>
<p>• See what you could be doing (better?)</p>
<p>• See what other people are doing</p>
<p>• Expand your skill set</p>
<p>• Know what you can ask a dev to do!</p>
<h2>• <i>Everyone should learn to code. Even just a little.</i></h2>
</center>
]]></slide>
<slide><![CDATA[
<center style="position:relative;top:40%;transform:translateY(-50%);">
<h1>What's next?</h1>
<p>• CampJS Sydney</p>
<p>• CampJS Singapore</p>
<p>• NodeSchool at Meerkats</p>
<p>• Revive Perth.js</p>
</center>
]]></slide>
<script><![CDATA[
var screenOdd = document.getElementById("screen_odd");
var screenEven = document.getElementById("screen_even");
var screens = [screenEven, screenOdd];
var notes = document.getElementById("notes");
var turnaround = document.getElementById("turnaround");
var index = 0;
var altIndex = 1;
var screenIndices = [index, altIndex];
var slides = [];
function parseSlides() {
slides = document.getElementsByTagName('slide');
}
function initSlides() {
index = 0;
altIndex = 1;
screens[(index % 2)].firstChild.data = slides[index].firstChild.data;
updateScreen();
}
function nextSlide() {
index = ++index % slides.length;
altIndex = (index+1) % slides.length;
updateScreen();
}
function previousSlide() {
index = (--index + slides.length) % slides.length;
altIndex = ((index - 1) + slides.length) % slides.length;
updateScreen();
}
function updateScreen() {
if (screenIndices[(index % 2)] !== index) {
screens[(index % 2)].firstChild.data = slides[index].firstChild.data;
screenIndices[(index % 2)] = index;
}
screens[(index % 2)].position.set(0, 9.5, 27);
screens[(altIndex % 2)].position.set(0, 9.5, 27.01);
setTimeout(function () {
screens[(altIndex % 2)].firstChild.data = slides[altIndex].firstChild.data;
screenIndices[(altIndex % 2)] = altIndex;
}, 500);
updateNotes();
}
function updateNotes() {
notes.firstChild.data = screens[(index % 2)].firstChild.data;
}
function setupControls() {
document.getElementById("previous").addEventListener('click', function () {
previousSlide();
});
document.getElementById("next").addEventListener('click', function () {
nextSlide();
});
}
parseSlides();
setupControls();
initSlides();
]]></script>
</scene>