forked from mhaidarhanif/talk-reactive
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
537 lines (480 loc) · 24.6 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
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="icon" href="assets/favicon.png" type="image/png" />
<title>Get Reactive Today by M Haidar Hanif on Meteor Day at Meteor Jakarta Meetup</title>
<meta name="description" content="Getting started into reactive programming with Meteor">
<meta name="author" content="M Haidar Hanif">
<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">
<!-- default css/tidy.css -->
<link rel="stylesheet" href="css/reveal.min.css">
<link rel="stylesheet" href="css/theme/night-meteor.css" id="theme">
<!-- default css/tidy.css -->
<!-- For syntax highlighting -->
<link rel="stylesheet" href="lib/css/github.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 id="title" class="fragments" data-background="assets/backgrounds/abstract-meteor.jpg">
<h1 class="fragment">Get <span class="reactive animated pulse">Reactive</span> Today</h1>
<p class="fragment"><b>Getting started into reactive programming/development with any technology stack or
<span class="meteor-logo small">Meteor</span></b></p>
</aside>
<aside class="notes">
<ul>
<li>Bahasa, English, or bilingual?</li>
<li>Give the big picture what is going to talk about, so mostly the explanation is simplified.</li>
<li>This isn't just about Meteor, but all kinds of applicable system. Because the current condition is, everyone is using various different stacks.</li>
<li>Let's have a all-way discussion, not just a one-way presentation.</li>
<li>This is one of my first public talks, so let me know if there's a suggestion or something wrong.</li>
</ul>
</aside>
</section>
<section id="about-presentation">
<img class="icon" height="300" width="300" src="assets/icons/happy.svg" onerror="this.src='assets/icons/happy.png'" alt="Happy slide">
<br>
<a href="http://bit.ly/mhaidarh-talk-reactive">http://bit.ly/mhaidarh-talk-reactive</a>
<small>
<a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/"><img alt="Creative Commons License" style="border-width:0" src="https://i.creativecommons.org/l/by-nc-sa/4.0/88x31.png"></a>
<br>This presentation is licensed under a
<br>
<a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/">Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License</a>
</small>
<br>
<small class="credit">
"Happy slide icon" designed by <a href="http://thenounproject.com/Julihan">Julien Deveaux</a> from the <a href="http://thenounproject.com">Noun Project</a>
</small>
</section>
<section id="about-me">
<a class="image" href="https://keybase.io/mhaidarh" target="_blank">
<img class="avatar" height="200" width="200" src="assets/mhaidarh.png" alt="M Haidar Hanif's avatar">
</a>
<p>
M Haidar Hanif | Technology Generalist
<br>
<a href="https://twitter.com/mhaidarh">@mhaidarh</a> | <a href="https://google.com/+MHaidarHanif">+MHaidarHanif</a>
<br>
<a href="http://mhaidarhanif.org">http://mhaidarhanif.org</a>
<br>
[<i>or just google me</i>]
<br>
</p>
<aside class="notes">
<ul>
<li>Quick introduction about personal identity.</li>
<li>Currently a generalist alias a student.</li>
<li>Will be software engineer/developer/designer.</li>
</ul>
</aside>
</section>
<section id="story">
<h2>Let's begin with a story</h2>
<p>
of informatics student who is approaching his graduation soon and trying to finish an MVP for a thesis before it officially got started...
</p>
<aside class="notes">
<ul>
<li>Just a side story before and after discover Meteor and reactive programming.</li>
<li>Also how amazing software development mainly web is revolving rapidly.</li>
<li>Most current education system haven't catch up yet.</li>
<li>And then I discovered the next stage of software/web development workflow, notably Meteor.</li>
</ul>
</aside>
</section>
<section id="quick-question">
<h2 class="white">Quick <u>Question</u></h2>
<aside class="notes">
<ul>
<li>Who are here have actually know reactive programming before Meteor?</li>
<li>Actually tried Meteor?</li>
<li>Using/developing reactive or real-time application?</li>
<li>But you have seen all of that, right?</li>
</ul>
</aside>
</section>
<section id="quick-demo-time" data-background="assets/backgrounds/perseids-stars.jpg">
<h2 class="white">Quick <u>Demo Time</u>!</h2>
<aside class="notes">
<ul>
<li>Open TodoMVC, Meteor and SocketStream version</li>
</ul>
</aside>
</section>
<section id="what-reactivity">
<h2>What is <span class="reactive animated pulse">reactivity</span>?</h2>
<blockquote cite="http://solidmeteor.com/meteor-reactivity-gear-1-explained-simply">
“Reactivity is a data-centric feature that allows executing certain functions when the data, which they depend on, change. Reactivity is not a pattern, it's a general idea implemented using several patterns.”
</blockquote>
<!-- <img height="200px" src="assets/mhaidarh.png" alt="Reactivity illustatrion"> -->
</section>
<section id="what-reactive">
<h2>What is <span class="reactive animated pulse">reactive</span> programming?</h2>
<blockquote cite="https://en.wikipedia.org/wiki/Reactive_programming">
“A programming paradigm that is a subset of dataflow programming, oriented around data flows and the propagation of change.”
</blockquote>
<!-- <img height="200px" src="assets/mhaidarh.png" alt="Reactive programming illustatrion"> -->
<!-- <small>[<i></i>]</small> -->
</section>
<section id="what-frp">
<h2>What about functional <span class="reactive animated pulse">reactive</span> programming (FRP)?</h2>
<blockquote cite="https://gist.github.com/staltz/868e7e9bc2a7b8c1f754">
“FRP is programming with asynchronous data streams. And anything can be a stream: variables, user inputs, properties, caches, data structures, etc. Then the stream can be manipulated (with create, merge, combine, filter, map, scan, etc) using functions that create new stream, because the original stream is immutable.”
</blockquote>
<!-- <img height="200px" src="assets/mhaidarh.png" alt="Reactive programming illustatrion"> -->
<!-- <small>[<i></i>]</small> -->
<aside class="notes">
There is even object-oriented reactive programming (OORP).
</aside>
</section>
<section id="what-more">
<h2>Furthermore</h2>
<ul>
<li>Mostly implemented in the next step of functional programming</li>
<li>Native support in <a href="http://elm-lang.org">Elm</a> or with additional library in <a href="https://haskell.org/haskellwiki/Functional_Reactive_Programming">Haskell.</li>
<li>Implemented in dozen of languages with <a href="https://rx.codeplex.com">RX (Reactive Extensions) Framework</a></li>
<li>Even used in a UI library with its application architecture, <a href="http://facebook.github.io/react">React</a> and <a href="http://facebook.github.io/flux">Flux</a></li>
</ul>
</section>
<section id="illus-ordinary">
<h2>An ordinary illustration: Typical/Imperative</h2>
<pre><code data-trim contenteditable class="rounded">
var a = 1; // 1
var b = a + 1; // 2
a = 10; // 10
b = a + 1; // 11
</code></pre>
</section>
<section id="illus-super">
<h2>A super illustration: <span class="reactive animated pulse">Reactive</span></h2>
<pre><code data-trim contenteditable class="rounded">
var a = 1;
var b <= a + 1;
a = 10;
// b is automagically 11
</code></pre>
</section>
<section id="observable">
<h2>A comprehensive illustration: Observable</h2>
<p>From the <a href="https://en.wikipedia.org/wiki/Observer_pattern">observer pattern</a></p>
<p>Supposed there is a stream where within it there are some ongoing events ordered in time</p>
<a href="http://rxmarbles.com/#map" target="_blank">
<img class="rounded" height="225px" width="657px" src="assets/rxmarbles-map.png" alt="RxMarbels map">
</a>
<aside class="notes">
There are a lot of ways of seeing the reactive stream. But here we can use a common observer pattern with marbles to illustrate reactivity. It can emit three different signals: a value (of some type that can change over time), an error, or a "completed" signal. These emitted evetns captured asynchronously.
</aside>
</section>
<section id="what-vs">
<h2><span class="reactive animated pulse">Reactive</span> vs* Real-Time</h2>
<table>
<thead>
<tr>
<th><a href="https://en.wikipedia.org/wiki/Reactive_programming">Reactive</a></th>
<th><a href="https://en.wikipedia.org/wiki/Real-time_computing">Real-Time</a></th>
</tr>
</thead>
<tbody>
<tr>
<td>Living/Responsive</td>
<td>Instant/Immediate</td>
</tr>
<tr>
<td>Paradigm/System</td>
<td>System</td>
</tr>
<tr>
<td>Model/Code/Style</td>
<td>Structure/Organization</td>
</tr>
<tr>
<td>11</td>
<td>12</td>
</tr>
<tr></tr>
</tbody>
</table>
<small>*in most cases</small>
<aside class="notes">
This is just some notes. Actually not so much differences, often can be interchangeable.
But the point is, reactive is not necessarily a real-time.
</aside>
</section>
<section id="why" class="fragments">
<h2>Why do we do this?</h2>
<p class="fragment">Because it's <span class="fragment highlight-red">hot</span></p>
<p class="fragment">Also it's the <span class="fragment highlight-blue">future</span></p>
<p class="fragment">
<img class="icon" height="300" width="300" src="assets/icons/space-shuttle.svg" onerror="this.src='assets/icons/space-shuttle.png'" alt="Space shuttle">
<br>
<small class="credit">
"Space shuttle icon" designed by <a href="http://thenounproject.com/alydodds">Aly Dodds</a> from the <a href="http://thenounproject.com">Noun Project</a>
</small>
</p>
<aside class="notes">
Also like hot code push. So, who agree or think the same?
</aside>
</section>
<section id="why-seriously" class="fragments">
<h2>Why, seriously?</h2>
<p>
This way we can improve the performance of our system or application. Particularly reducing the amount of work to quickly implement a logic that require data flow, and more power beyond asynchronous.
</p>
<aside class="notes">
Additionally, it is a time-saving and bug-preventing programming paradigm worthy of all developers.
</aside>
</section>
<section id="done">
<h2>What I've <u>done</u> with it</h2>
<p>Mostly still in development, exploration, and experimentation phase</p>
</section>
<section id="build">
<h2>What we can <br> <u>get</u> and <u>build</u></h2>
<ul>
<li>Programs that consistently <span class="reactive animated pulse">react</span> to events, especially an actual real-time system</li>
<li>Always responsive application that is quick to <span class="reactive animated pulse">react</span> to all users --anywhere and anytime-- with consistent positive user experience</li>
<li>Better interactive applications that highly dependent time such as GUIs, animations, computer music, or robot controllers</li>
<li>Building the future of the more modern app that we haven't seen yet</li>
</ul>
<aside class="notes">
Like a chat, shopping store,
</aside>
</section>
<section id="manifesto">
<h2>The <span class="reactive animated pulse">Reactive</span> Manifesto</h2>
<p><a href="http://reactivemanifesto.org">http://reactivemanifesto.org</a></p>
<br>
<blockquote cite="http://reactivemanifesto.org">
“Organisations working in disparate domains are independently discovering patterns for building software that look the same. These systems are more robust, more resilient, more flexible and better positioned to meet modern demands.”
</blockquote>
<small class="fragment grow">This principles basically expressing that relationships in code could last happily ever after.</small>
</section>
<section id="refer">
<img height="244px" width="670px" src="assets/reactive-traits.svg" alt="Reactive traits">
<p>Refer to system modeling after human organizations or inter-human communication</p>
<ul>
<li>Responsive and asynchronous</li>
<li>Elastic or scalable under load</li>
<li>Resilient in the presence of failures</li>
<li>Message or event driven</li>
</ul>
<aside class="notes">
<!-- Large systems are composed of smaller ones and therefore depend on the Reactive properties of their constituents. This means that Reactive Systems apply design principles so these properties apply at all levels of scale, making them composable. -->
</aside>
</section>
<!--
<section id="composable">
<h2>Composable</h2>
<ul>
<li><strong>Self-contained (modular)</strong>: It can be deployed independently, may cooperate with other components but dependent components are replaceable</li>
<li><strong>Stateless</strong>: It treats each request as an independent transaction, unrelated to any previous request.</li>
</ul>
<aside class="notes">
<ul>
<li>So we can use or integrate any technology with it</li>
<li>Stateless is just one technique; managed state and transactional systems can also be composable, but with greater difficulty.</li>
</ul>
</aside>
</section>
-->
<section id="meet-meteor">
<h2>Meet <span class="meteor-logo">Meteor</span></h2>
<h3><a href="https://meteor.com">https://meteor.com</a></h3>
<p>The most amazingly easy and rapid web development platform for building full-stack <span class="reactive animated pulse">reactive</span> and real-time JavaScript web/mobile apps to date</p>
<aside class="notes">
<ul>
<li>So as you have previously know...</li>
<li>Meteor is more than a framework, it is a platform with combining the best of Node.js and NoSQL as the first class citizen.</li>
<li>Meteor make it really easy to build reactive apps without early cumbersome details.</li>
</ul>
</aside>
</section>
<section id="meteor-principles">
<h2>7 Principles of <span class="meteor-logo">Meteor</span></h2>
<ol>
<li>Data on the Wire</li>
<li>One Language</li>
<li>Database Everywhere</li>
<li>Latency Compensation</li>
<li class="fragment grow highlight-blue">Full Stack <span class="reactive animated pulse">Reactivity</span></li>
<li>Embrace the Ecosystem</li>
<li>Simplicity Equals Productivity</li>
</ol>
<aside class="notes">
Read them completely on Meteor documentation.
</aside>
</section>
<section id="meteor-reactivity">
<h2>5. Full Stack <span class="reactive animated pulse">Reactivity</span></h2>
<p>Make realtime the default. All layers, from database to template, should make an event-driven interface available.</p>
<aside class="notes">
Meteor make it really easy and seamless to do this.
</aside>
</section>
<section id="meteor-reactive-core">
<h2>Inside Meteor Core Library</h2>
<ul>
<li><a href="https://meteor.com/tracker">Meteor Tracker</a> (formerly Deps): Transparent <span class="reactive animated pulse">reactive</span> programming in JavaScript and Dependency tracker to allow reactive callbacks</li>
<li><a href="https://meteor.com/blaze">Meteor Blaze</a>: <span class="reactive animated pulse">Reactive</span> UI/Templating Library</li>
</ul>
<aside class="notes">
<ul>
<li>Tracker is a very simple convention or interface that gives the power of an FRP system without requiring to rewrite the program as a FRP data flow graph. Combined with Tracker-aware libraries, this lets to build complex event-driven programs without writing a lot of boilerplate event-handling code. Also reactive data sources (like your database) talk to reactive data consumers (such as a live-updating HTML templating library) without the application code in between having to be involved.</li>
<li>Blaze is a powerful library for creating live-updating user interfaces. Blaze has the same purpose as Angular, Backbone, Ember, React, Polymer, or Knockout; but is much easier to use. The template syntax is using Spacebars, Meteor's dialect of Handlebars, but could also use another templating language. It is like "reactive jQuery", but declarative rather than imperative. It consists of a template compiler and a reactive DOM engine.</li>
</ul>
</aside>
</section>
<section id="full-demo-time" data-background="assets/backgrounds/perseids-stars.jpg">
<h2 class="white">Full <u>Demo Time</u>!</h2>
<aside class="notes">
<ul>
<li>...</li>
<li>Creating Meteor-Jakarta website</li>
</ul>
</aside>
</section>
<section id="news-time">
<h2><u>News Time</u>!</h2>
<h4>Concurrently on 28 October 2014!</h4>
<p>
HTML5 specification has finalized and became a W3C recommendation
<a href="http://www.w3.org/blog/news/archives/4167">http://www.w3.org/blog/news/archives/4167</a>
</p>
<p>
Meteor 1.0 has released
<a href="https://meteor.com/blog/2014/10/28/meteor-1-0">https://meteor.com/blog/2014/10/28/meteor-1-0</a>
</p>
</section>
<section id="promo-time-devs">
<h2><u>Promo Time</u>!</h2>
<h3>Influential/Inspiring Developers</h3>
<ul>
<li>Jafar Husain: <a href="https://twitter.com/jhusain">@jhusain</a></li>
<li>Dr. Roland Kuhn: <a href="https://twitter.com/rolandkuhn">@rolandkuhn</a> / <a href="http://rolandkuhn.com">http://rolandkuhn.com</a></li>
<li>James Roper: <a href="https://twitter.com/jroper">@jroper</a> / <a href="https://jazzy.id.au">https://jazzy.id.au</a></li>
</ul>
</section>
<section id="promo-time-community">
<h2><u>Promo Time</u>!</h2>
<h3>Recently Active Community/Meetup</h3>
<ul>
<li>JakartaJS: <a href="http://meetup.com/JakartaJS">http://meetup.com/JakartaJS</a></li>
<li>NoSQL Indonesia: <a href="http://meetup.com/NoSQL-Indonesia">http://meetup.com/NoSQL-Indonesia</a></li>
<li>Python Indonesia: <a href="http://meetup.com/Python-ID">http://meetup.com/Python-ID</a></li>
<li>Docker Jakarta: <a href="http://meetup.com/Docker-Jakarta">http://meetup.com/Docker-Jakarta</a></li>
<li>StartupLokal: <a href="http://meetup.com/startuplokal">http://meetup.com/startuplokal</a></li>
</ul>
<small>if interested to join or even become a co-organizer</small>
</section>
<section id="startup-idea">
<img height="200" width="200" alt="Hazeorid logo" src="assets/hazeorid.png">
<h2>Startup Idea</h2>
<p>
Satellid: Micro Knowledge Management System
<br>
<a href="https://github.com/hazeorid/satellid">https://github.com/hazeorid/satellid</a>
</p>
<ul>
<li>Platform for managing any kind of knowledge</li>
<li>Still in early development, design, system, SaaS, business value, and experience craftsmanship</li>
<li>The MVP will be based on Meteor</li>
</ul>
<aside class="notes">
<ul>
<li>Because most tools and system are not good enough.</li>
<li>Focusing on micro scale, modularity is high.</li>
<li>Featuring reactivity, JSON only document, transclusion, and much more.</li>
<li>Actually also my thesis.</li>
</ul>
</aside>
</section>
<section id="any">
<h2>Any comments or questions?</h2>
<p>
<img class="icon" height="300" width="300" src="assets/icons/asteroid.svg" alt="Space shuttle">
<br>
<small class="credit">
"Asteroid icon" designed by <a href="http://thenounproject.com/iainhector">Iain Hector</a> from the <a href="http://thenounproject.com">Noun Project</a>
</small>
</p>
<aside class="notes">
<li>I feel for the first run of Meteor is kinda very slow, huge size, resource intensive, and hard to debug. Especially meteor-tool package and when updating package catalog. Too many hidden complexities and no verbose option. Most of the time the server logs are not very helpful for newcomers. Also, it is previously not using semantic versioning properly (there is Meteor v0.9.3.1?!). You can not run multiple Meteor instance on same machine even on different port easily. There is no Meteor version manager yet. Do you feel the same?</li>
<li>The name is cool. Meteor. But when I search more specific resources about it, it still gotten mixed up with the actual meteor.<li>
<li>Last but not least, it is still one of the best technology choice for today. But even at 1.0, I don't think it ready yet for global adoption.</li>
</aside>
</section>
<section id="more-info">
<h3>All Assets Repository</h3>
<ul>
<li><a href="https://github.com/mhaidarh/talk-reactive">https://github.com/mhaidarh/talk-reactive</a></li>
<li><a href="https://github.com/mhaidarh/talk-reactive-demo">https://github.com/mhaidarh/talk-reactive-demo</a></li>
</ul>
<h3>Additional Info and Materials</h3>
<p>Check out the repo's <a href="https://github.com/mhaidarh/talk-reactive/blob/master/README.md">README</a></p>
<h3>Super Quick Discussion?</h3>
<p>Chat on <a href="https://gitter.im/mhaidarh/talk-reactive">https://gitter.im/mhaidarh/talk-reactive</a></p>
<aside class="notes">
This presentation is just a glimpse, a tip of the iceberg, of all things that need to explore and be covered. For complete knowledge, learn more from the additional info and materials. You can even consider to take a course.
</aside>
</section>
<section id="end" class="wallpaper" data-background="assets/backgrounds/space-meteorite-planet-rain_meteor-logo.jpg">
<!-- <h2>Thank You!</h2> -->
<aside class="notes">
As always, thank you!
</aside>
</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 || 'fade', // default/cube/page/concave/zoom/linear/fade/none
transitionSpeed: 'slow', // default / fast / slow
// Parallax scrolling
// parallaxBackgroundImage: 'assets/patterns/stardust.png',
parallaxBackgroundImage: 'assets/backgrounds/outer-space-hd.jpg',
parallaxBackgroundSize: '1920px 1200px',
parallaxBackgroundOpacity: 0.3,
/*
Credits:
http://imgstocks.com/outer-space-wallpaper-41243.html
http://planezen.com/post/outer-space-hd-background-wallpaper-18-hd-wallpaper.html
*/
// 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; } }
]
});
</script>
</body>
</html>