├── .gitignore
├── .vscode
    └── settings.json
├── _code.styl
├── _deps.styl
├── demos
    ├── breathe
    │   └── index.html
    ├── error-handling
    │   └── error.html
    ├── examples.js
    ├── gum
    │   ├── index.html
    │   └── scripts.js
    ├── intersection-observer.html
    ├── intersection-observer
    │   ├── index.html
    │   └── scripts.js
    ├── pip
    │   ├── index.html
    │   └── scripts.js
    ├── resize-observer
    │   ├── index.html
    │   ├── scripts.js
    │   └── video-player.html
    └── webpayment
    │   ├── applepay.html
    │   ├── index.html
    │   └── package-lock.json
├── fonts
    ├── PureHeartSVG-Regular.otf
    ├── bavro-regular-webfont.eot
    ├── bavro-regular-webfont.svg
    ├── bavro-regular-webfont.ttf
    ├── bavro-regular-webfont.woff
    └── bavro-regular-webfont.woff2
├── gulpfile.js
├── image-downloader.js
├── images
    ├── 1.jpg
    ├── 10.jpg
    ├── 11.jpg
    ├── 12.jpg
    ├── 13.jpg
    ├── 14.jpg
    ├── 15.jpg
    ├── 16.jpg
    ├── 17.jpg
    ├── 18.jpg
    ├── 19.jpg
    ├── 2.jpg
    ├── 20.jpg
    ├── 21.jpg
    ├── 22.jpg
    ├── 23.jpg
    ├── 24.jpg
    ├── 25.jpg
    ├── 26.jpg
    ├── 27.jpg
    ├── 28.jpg
    ├── 29.jpg
    ├── 3.jpg
    ├── 30.jpg
    ├── 31.jpg
    ├── 4.jpg
    ├── 5.jpg
    ├── 6.jpg
    ├── 7.jpg
    ├── 8.jpg
    ├── 9.jpg
    ├── Twitter_logo_white.png
    ├── applepay.mp4
    ├── babel.svg
    ├── canada-flag.png
    ├── commandline.png
    ├── cover.png
    ├── css-next-logo.svg
    ├── fgHm.png
    ├── flexbox.png
    ├── gum.mp4
    ├── hackerYou-logomark.png
    ├── intersection-observer.mp4
    ├── intersection-observer2.mp4
    ├── laptop-sticker.jpg
    ├── meta.mp4
    ├── paymentRequest.mp4
    ├── resize-video-player.mp4
    ├── resizeObserver.mp4
    ├── screenshots
    │   ├── fffe.png
    │   ├── ffjT.png
    │   ├── ffjW.png
    │   ├── ffls.png
    │   ├── ffq2.png
    │   ├── ffsj.png
    │   ├── ffvp.png
    │   ├── ffxI.png
    │   ├── fg1n.png
    │   ├── fg83.png
    │   ├── fgCZ.png
    │   ├── fgCq.png
    │   ├── fgHO.png
    │   ├── fgHm.png
    │   ├── fgIK.png
    │   ├── fgLW.png
    │   ├── fgUE.png
    │   ├── fgWF.png
    │   ├── fgWl.png
    │   ├── fgXl.png
    │   ├── fgYU.png
    │   ├── fgbG.png
    │   ├── fgbJ.png
    │   ├── fgbo.png
    │   ├── fgbz.png
    │   ├── fgck.gif
    │   ├── fgdA.png
    │   ├── fgfW.png
    │   ├── fgfo.gif
    │   ├── fgfu.png
    │   ├── fggs.png
    │   ├── fgh5.png
    │   ├── fgiQ.png
    │   ├── fgir.png
    │   ├── fgl6.png
    │   ├── fgmB.gif
    │   ├── fgmT.png
    │   ├── fgnB.png
    │   ├── fgnM.png
    │   ├── fgnc.png
    │   ├── fgrF.png
    │   ├── fgrg.png
    │   ├── fgsY.png
    │   ├── fgtC.png
    │   ├── fgvC.gif
    │   ├── fgx0.png
    │   ├── fgyV.png
    │   ├── fgz3.png
    │   ├── fgzX.png
    │   ├── fgzX2.png
    │   ├── fgzh.png
    │   ├── fgzk.png
    │   ├── fh01.png
    │   ├── fh0F.png
    │   ├── fh13.png
    │   ├── fh1U.gif
    │   ├── fh2l.png
    │   ├── fh59.png
    │   ├── fh6L.png
    │   ├── fh8u.png
    │   ├── fhAQ.gif
    │   ├── fhAe.png
    │   ├── fhDp.png
    │   ├── fhEM.png
    │   ├── mufS.png
    │   ├── muk4.png
    │   ├── mul6.png
    │   ├── mupq.png
    │   ├── musk.png
    │   ├── mv6R.png
    │   ├── mv93.png
    │   ├── mvHv.png
    │   ├── mvLf.png
    │   ├── mvMC.png
    │   ├── mvNc.png
    │   ├── mvNd.png
    │   ├── mvPr.png
    │   ├── mvSI.png
    │   ├── mvbJ.png
    │   ├── mvjO.png
    │   ├── mvjp.png
    │   ├── mvlO.png
    │   ├── mvvk.png
    │   ├── mvxm.png
    │   ├── mw1Y.gif
    │   ├── mw55.png
    │   ├── mw88.png
    │   └── mw8s.png
    ├── sticky.mp4
    ├── uglify.png
    ├── viewport.mp4
    └── webmart.webm
├── index.html
├── index.jade
├── package-lock.json
├── package.json
├── prettify.js
├── readme.md
├── scripts.js
├── slides.js
├── styles.css
└── styles.styl


/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules/
2 | .DS_Store
3 | talk.js
4 | talk.md


--------------------------------------------------------------------------------
/.vscode/settings.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "cSpell.enabledLanguageIds": [
 3 |     "c",
 4 |     "cpp",
 5 |     "csharp",
 6 |     "go",
 7 |     "handlebars",
 8 |     "jade",
 9 |     "javascript",
10 |     "javascriptreact",
11 |     "json",
12 |     "latex",
13 |     "markdown",
14 |     "php",
15 |     "plaintext",
16 |     "python",
17 |     "restructuredtext",
18 |     "text",
19 |     "typescript",
20 |     "typescriptreact",
21 |     "yml"
22 |   ]
23 | }


--------------------------------------------------------------------------------
/_code.styl:
--------------------------------------------------------------------------------
 1 | yellow = #FFDD00
 2 | 
 3 | //  Cobalt2 Prettyify Styles by Wes Bos
 4 | 
 5 | pre .str, code .str { color: #39D905; } /* string  - green */
 6 | pre .kwd, code .kwd { color: yellow; } /* keyword - dark pink */
 7 | pre .com, code .com { color: #0088FF; font-style: italic; } /* comment - gray */
 8 | pre .typ, code .typ { color: #0088FF; } /* type - light blue */
 9 | pre .lit, code .lit { color: #0088FF; } /* literal - blue */
10 | pre .pun, code .pun { color: #FF9D00; } /* punctuation - white */
11 | pre .pln, code .pln { color: #fff; } /* plaintext - white */
12 | pre .tag, code .tag { color: #89bdff; } /* html/xml tag    - light blue */
13 | pre .atn, code .atn { color: #bdb76b; } /* html/xml attribute name  - khaki */
14 | pre .atv, code .atv { color: #65B042; } /* html/xml attribute value - green */
15 | pre .dec, code .dec { color: #3387CC; } /* decimal - blue */
16 | 
17 | pre.prettyprint, code.prettyprint {
18 |   background-color: #193549
19 |   border-radius: 2px;
20 |   border 0
21 |   font-size 55px
22 |   line-height 1.7
23 |   text-align left
24 | }
25 | 
26 | code
27 |   background none
28 |   font-family 'Operator Mono', monospace;
29 |   font-weight 400
30 | 
31 | pre.prettyprint {
32 |   width: 95%;
33 |   margin: 1em auto;
34 |   padding: 10px;
35 |   white-space: pre-wrap;
36 |   border 3px solid #1F4662
37 | }
38 | 
39 | 
40 | /* Specify class=linenums on a pre to get line numbering */
41 | ol.linenums { margin-top: 0; margin-bottom: 0; color: #AEAEAE; } /* IE indents via margin-left */
42 | li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8 { list-style-type: none }
43 | /* Alternate shading for lines */
44 | li.L1,li.L3,li.L5,li.L7,li.L9 { }
45 | 
46 | @media print {
47 |   pre .str, code .str { color: #060; }
48 |   pre .kwd, code .kwd { color: #006; font-weight: bold; }
49 |   pre .com, code .com { color: #600; font-style: italic; }
50 |   pre .typ, code .typ { color: #404; font-weight: bold; }
51 |   pre .lit, code .lit { color: #044; }
52 |   pre .pun, code .pun { color: #440; }
53 |   pre .pln, code .pln { color: #000; }
54 |   pre .tag, code .tag { color: #006; font-weight: bold; }
55 |   pre .atn, code .atn { color: #404; }
56 |   pre .atv, code .atv { color: #060; }
57 | }
58 | 


--------------------------------------------------------------------------------
/_deps.styl:
--------------------------------------------------------------------------------
  1 | /*
  2 |   Google HTML5 slides template
  3 | 
  4 |   Authors: Luke Mahé (code)
  5 |            Marcin Wichary (code and design)
  6 | 
  7 |            Dominic Mazzoni (browser compatibility)
  8 |            Charles Chen (ChromeVox support)
  9 | 
 10 |   URL: http://code.google.com/p/html5slides/
 11 | */
 12 | 
 13 | /* Framework */
 14 | 
 15 | 
 16 | html {
 17 |   height: 100%;
 18 | }
 19 | 
 20 | body {
 21 |   margin: 0;
 22 |   padding: 0;
 23 |   display: block !important;
 24 |   height: 100%;
 25 |   min-height: 740px;
 26 |   overflow-x: hidden;
 27 |   overflow-y: auto;
 28 | }
 29 | 
 30 | .slides {
 31 |   width: 100%;
 32 |   height: 100%;
 33 |   left: 0;
 34 |   top: 0;
 35 |   color:#f21818;
 36 |   background:;
 37 |   position: absolute;
 38 |   -webkit-transform: translate3d(0, 0, 0);
 39 | }
 40 | 
 41 | 
 42 | /*
 43 |   Slide Widths
 44 | */
 45 | 
 46 | w = 1920px
 47 | // h = 1080px
 48 | h = 1107px
 49 | h = 1130px
 50 | 
 51 | // w = 1920px
 52 | // h = 1440px
 53 | 
 54 | .slides > article {
 55 |   display: block;
 56 |   position: absolute;
 57 |   overflow: hidden;
 58 |   width w
 59 |   height h
 60 |   margin-left: -(w / 2);
 61 |   margin-top: -(h / 2);
 62 | 
 63 |   left: 50%;
 64 |   top: 50%;
 65 |   border-radius 5px;
 66 |   padding: 0;
 67 |   background-color: none;
 68 |   transition: all 0.3s ease-out;
 69 |   justify-content center
 70 |   flex-direction column
 71 |   & > * {
 72 |     display block
 73 |     clear both
 74 |     min-width 100%
 75 |     flex-wrap wrap
 76 |   }
 77 |   & > img {
 78 |     min-width: 0;
 79 |     display: block;
 80 |     margin: 0 auto
 81 |   }
 82 | 
 83 | }
 84 | 
 85 | .slide-area {
 86 |   z-index: 1000;
 87 | 
 88 |   position: absolute;
 89 |   left: 0;
 90 |   top: 0;
 91 |   width: 150px;
 92 |   height: 100%;
 93 |   left: 0;
 94 |   top: 0;
 95 |   cursor: pointer;
 96 |   tap-highlight-color: transparent;
 97 | 
 98 | }
 99 | #prev-slide-area {
100 | 
101 | }
102 | #next-slide-area {
103 |   right 0
104 |   left auto
105 | }
106 | .slides.layout-widescreen #prev-slide-area,
107 | .slides.layout-faux-widescreen #prev-slide-area {
108 |   margin-left: -650px;
109 | }
110 | .slides.layout-widescreen #next-slide-area,
111 | .slides.layout-faux-widescreen #next-slide-area {
112 |   margin-left: 500px;
113 | }
114 | 
115 | /* Slides */
116 | 
117 | .slides > article {
118 |   display: none;
119 |   text-align: center;
120 | }
121 | .slides > article.far-past {
122 |   display: block;
123 |   transform: translate(-4000px);
124 |   display none;
125 | }
126 | .slides > article.past {
127 |   display: flex;
128 |   transform: scale(0.5) translate(-(w + (0))px);
129 |   opacity: 0.3;
130 |   display: none;
131 | 
132 | }
133 | .slides > article.current {
134 |   display: flex;
135 |   transform: translate(0);
136 |   z-index 10
137 | }
138 | .slides > article.next {
139 |   display: flex;
140 |   transform: scale(0.5) translate((w + (0))px);
141 |   opacity: 0.3;
142 |   display: none;
143 | }
144 | .slides > article.far-next {
145 |   display: flex;
146 |   transform: translate(4000px);
147 |   display none;
148 | }
149 | 
150 | 
151 | /* Styles for slides */
152 | 
153 | .slides > article {
154 |   color: #6C818F;
155 |   font-size: 30px;
156 |   letter-spacing: -1px;
157 | }
158 | 
159 | b {
160 |   font-weight: 600;
161 | }
162 | 
163 | .blue {
164 |   color: rgb(0, 102, 204);
165 | }
166 | .yellow {
167 |   color: rgb(255, 211, 25);
168 | }
169 | .green {
170 |   color: #29E254;
171 | }
172 | .red {
173 |   color: rgb(255, 0, 0);
174 | }
175 | .black {
176 |   color: black;
177 | }
178 | .white {
179 |   color: white;
180 | }
181 | 
182 | a {
183 |   color: #FFDD00;
184 | }
185 | 
186 | ::-moz-selection { background: #FFDD00; }
187 | ::selection      { background: #FFDD00; }
188 | 
189 | 
190 | p {
191 |   margin: 0;
192 |   padding: 0;
193 | }
194 | p:first-child {
195 |   margin-top: 0;
196 | }
197 | 
198 | body {
199 |   // font-family: inconsolata, courier;
200 |     font-family: 'Open Sans', sans-serif;
201 | }
202 | h1 {
203 |   font-size: 60px;
204 |   padding: 0;
205 |   margin: 0;
206 |   color: white;
207 | }
208 | 
209 | h2 {
210 |   font-size: 45px;
211 |   line-height: 45px;
212 | 
213 |   bottom: 150px;
214 | 
215 |   padding: 0;
216 |   margin: 0;
217 |   font-weight: 600;
218 |   color:white;
219 |   letter-spacing: -2px;
220 | }
221 | 
222 | h2 a {
223 |   text-decoration: none;
224 | }
225 | 
226 | h3 {
227 |   font-size: 20px;
228 |   line-height: 36px;
229 |   padding: 0 0 10px 0;
230 |   margin: 0;
231 |   padding-right: 40px;
232 |   font-weight: 600;
233 |   letter-spacing: -1px;
234 |   color:#EAEAEA;
235 | }
236 | 
237 | .half {
238 |   width:350px;
239 |   float:left;
240 | }
241 | 
242 | .button:hover {
243 |   color:#fff;
244 |   background:#392C44;
245 | }
246 | 
247 | pre.half {
248 |   width: 400px;
249 |   font-size:17px;
250 | }
251 | 
252 | p.small {
253 |   color:#000;
254 |   font-size:18px;
255 | }
256 | article.fill h3 {
257 |   background: rgba(255, 255, 255, .75);
258 |   padding-top: .2em;
259 |   padding-bottom: .3em;
260 |   margin-top: -.2em;
261 |   margin-left: -60px;
262 |   padding-left: 60px;
263 |   margin-right: -60px;
264 |   padding-right: 60px;
265 | }
266 | 
267 | h4 {
268 |   margin:0;
269 | }
270 | 
271 | 
272 | .center {
273 |   text-align:center;
274 | }
275 | 
276 | .center h3 {
277 |   font-size:100px;
278 |   margin-top:220px;
279 | }
280 | ul {
281 |   list-style: none;
282 |   margin: 0;
283 |   padding: 0;
284 | 
285 |   margin-top: 40px;
286 | 
287 |   margin-left: .75em;
288 | }
289 | ul:first-child {
290 |   margin-top: 0;
291 | }
292 | ul ul {
293 |   margin-top: .5em;
294 | }
295 | li {
296 |   padding: 0;
297 |   margin: 0;
298 | 
299 |   margin-bottom: .5em;
300 | }
301 | li::before {
302 |   content: '·';
303 | 
304 |   width: .75em;
305 |   margin-left: -.75em;
306 | 
307 |   position: absolute;
308 | }
309 | 
310 | pre {
311 | 
312 |   font-size: 20px;
313 |   line-height: 28px;
314 |   padding: 5px 10px;
315 | 
316 |   letter-spacing: -1px;
317 | 
318 |   margin-top: 20px;
319 |   margin-bottom: 20px;
320 | 
321 |   color: black;
322 |   background: rgb(240, 240, 240);
323 |   border: 1px solid rgb(224, 224, 224);
324 |   box-shadow: inset 0 2px 6px rgba(0, 0, 0, .1);
325 | 
326 |   overflow: hidden;
327 | }
328 | 
329 | code {
330 |   font-size: 95%;
331 |   font-family: 'Droid Sans Mono', 'Courier New', monospace;
332 |   display: inline-block;
333 |   background rgba(255,255,255,0.2);
334 |   padding 10px
335 |   border-radius 4px;
336 |   font-weight 600
337 | }
338 | 
339 | iframe {
340 |   width: 100%;
341 |   height: 620px;
342 |   background: white;
343 |   border: 1px solid rgb(192, 192, 192);
344 |   margin: -1px;
345 |   /*box-shadow: inset 0 2px 6px rgba(0, 0, 0, .1);*/
346 | }
347 | 
348 | img {
349 |   max-width: 100%;
350 |   max-height:570px;
351 | }
352 | 
353 | h3 + iframe {
354 |   margin-top: 40px;
355 |   height: 540px;
356 | }
357 | 
358 | article.fill iframe {
359 |   position: absolute;
360 |   left: 0;
361 |   top: 0;
362 |   width: 100%;
363 |   height: 100%;
364 | 
365 |   border: 0;
366 |   margin: 0;
367 | 
368 |   border-radius: 10px;
369 |   -o-border-radius: 10px;
370 |   -moz-border-radius: 10px;
371 |   -webkit-border-radius: 10px;
372 | 
373 |   z-index: -1;
374 | }
375 | 
376 | article.fill img {
377 |   position: absolute;
378 |   left: 0;
379 |   top: 0;
380 |   min-width: 100%;
381 |   min-height: 100%;
382 | 
383 |   border-radius: 10px;
384 |   -o-border-radius: 10px;
385 |   -moz-border-radius: 10px;
386 |   -webkit-border-radius: 10px;
387 | 
388 |   z-index: -1;
389 | }
390 | img.centered {
391 |   margin: 0 auto;
392 |   display: block;
393 | }
394 | 
395 | table {
396 |   width: 100%;
397 |   border-collapse: collapse;
398 |   margin-top: 40px;
399 | }
400 | th {
401 |   font-weight: 600;
402 |   text-align: left;
403 | }
404 | td,
405 | th {
406 |   border: 1px solid rgb(224, 224, 224);
407 |   padding: 5px 10px;
408 |   vertical-align: top;
409 | }
410 | 
411 | .source {
412 |   position: absolute;
413 |   left: 60px;
414 |   top: 644px;
415 |   padding-right: 175px;
416 | 
417 |   font-size: 15px;
418 |   letter-spacing: 0;
419 |   line-height: 18px;
420 | }
421 | 
422 | q {
423 |   display: block;
424 |   font-size: 60px;
425 |   line-height: 72px;
426 | 
427 |   margin-left: 20px;
428 | 
429 |   margin-top: 100px;
430 |   margin-right: 150px;
431 | }
432 | q::before {
433 |   content: '“';
434 | 
435 |   position: absolute;
436 |   display: inline-block;
437 |   margin-left: -2.1em;
438 |   width: 2em;
439 |   text-align: right;
440 | 
441 |   font-size: 90px;
442 |   color: rgb(192, 192, 192);
443 | }
444 | q::after {
445 |   content: '”';
446 | 
447 |   position: absolute;
448 |   margin-left: .1em;
449 | 
450 |   font-size: 90px;
451 |   color: rgb(192, 192, 192);
452 | }
453 | div.author {
454 |   text-align: right;
455 |   font-size: 40px;
456 | 
457 |   margin-top: 20px;
458 |   margin-right: 150px;
459 | }
460 | div.author::before {
461 |   content: '—';
462 | }
463 | 
464 | /* Size variants */
465 | 
466 | article.smaller p,
467 | article.smaller ul {
468 |   font-size: 20px;
469 |   line-height: 24px;
470 |   letter-spacing: 0;
471 | }
472 | article.smaller table {
473 |   font-size: 20px;
474 |   line-height: 24px;
475 |   letter-spacing: 0;
476 | }
477 | article.smaller pre {
478 |   font-size: 15px;
479 |   line-height: 20px;
480 |   letter-spacing: 0;
481 | }
482 | article.smaller q {
483 |   font-size: 40px;
484 |   line-height: 48px;
485 | }
486 | article.smaller q::before,
487 | article.smaller q::after {
488 |   font-size: 60px;
489 | }
490 | 
491 | /* Builds */
492 | 
493 | .build > * {
494 |   transition: opacity 0.2s ease-in-out 0.2s;
495 | }
496 | 
497 | .to-build {
498 |   opacity: 0;
499 | }
500 | 


--------------------------------------------------------------------------------
/demos/breathe/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |   <meta charset="UTF-8">
 6 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |   <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8 |   <title>Document</title>
 9 | </head>
10 | 
11 | <body>
12 |   <script>
13 |     function sleep(amount) {
14 |       return new Promise((resolve, reject) => {
15 |         if (amount <= 300) {
16 |           return reject('That is too fast, cool it down!');
17 |         }
18 |         setTimeout(() => resolve(`Slept for ${amount}`), amount)
19 |       });
20 |     }
21 | 
22 |     async function go() {
23 |       // just wait
24 |       await sleep(1000);
25 |       // or capture the returned value
26 |       const response = await sleep(750);
27 |       console.log(response);
28 |     }
29 | 
30 | 
31 | 
32 | 
33 |     sleep(500)
34 |       .then((result) => {
35 |         console.log(result)
36 |         return sleep(1000);
37 |       })
38 |       .then((result) => {
39 |         console.log(result)
40 |         return sleep(750);
41 |       })
42 |       .then((result) => {
43 |         console.log(result)
44 |         console.log('Done!');
45 |       })
46 |   </script>
47 | </body>
48 | 
49 | </html>


--------------------------------------------------------------------------------
/demos/error-handling/error.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |   <meta charset="UTF-8">
 6 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |   <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8 |   <title>Document</title>
 9 | </head>
10 | 
11 | <body>
12 |   <script>
13 |     function breathe(amount) {
14 |       return new Promise((ya, nah) => {
15 |         if (amount < 500) {
16 |           nah('You need to go longer than that!');
17 |           return;
18 |         }
19 |         setTimeout(() => ya('good job!'), amount);
20 |       });
21 |     }
22 | 
23 |     async function go() {
24 |       const res = await breathe(600); // good
25 |       const res2 = await breathe(300); // rejected
26 |     }
27 | 
28 |     go().catch(e => console.error(e));
29 |   </script>
30 | </body>
31 | 
32 | </html>


--------------------------------------------------------------------------------
/demos/examples.js:
--------------------------------------------------------------------------------
  1 | /* eslint-disable */
  2 | 
  3 | function yum() {
  4 | 
  5 | 
  6 |   // kick off both things, one after another
  7 |   const coffeePromise = makeCoffee();
  8 |   const breakfastPromise = makeBreakfast();
  9 | 
 10 |   // then once each are done, deal with them
 11 |   coffeePromise.then(coffee => {
 12 |     drinkCoffee();
 13 |   });
 14 | 
 15 |   breakfastPromise.then(([eggs, bacon]) => {
 16 |     eat(eggs, bacon);
 17 |   });
 18 | 
 19 |   // You can also wait until both are done
 20 |   Promise
 21 |     .all([coffeePromise, breakfastPromise])
 22 |     .then(([coffee, breakfast]) => {
 23 |       sitDownWith(coffee, breakfast);
 24 |     });
 25 | 
 26 | 
 27 | 
 28 | 
 29 | }
 30 | 
 31 | 
 32 | makeBreakfast(function () {
 33 |   makeCoffee(function () {
 34 |     eatBreakfast(function () {
 35 |       drinkCoffee(function () {
 36 |         cleanUp(function () {
 37 |           // Finally done and it's time for lunch
 38 |         });
 39 |       });
 40 |     });
 41 |   });
 42 | }); // wtf
 43 | 
 44 | 
 45 | 
 46 | 
 47 | fetch('http://cooldogs.org')
 48 |   .then(data => data.json())
 49 |   .then(dogs => pet(dogs));
 50 | 
 51 | 
 52 | 
 53 | axios.get('http://cooldogs.org')
 54 |   .then(dogs => pet(dogs));
 55 | 
 56 | 
 57 | moveTo(50, 50, function () {
 58 |   moveTo(20, 100, function () {
 59 |     moveTo(100, 200, function () {
 60 |       moveTo(2, 10, function () {
 61 |         // done
 62 |       });
 63 |     });
 64 |   });
 65 | });
 66 | 
 67 | // becomes
 68 | 
 69 | moveTo(50, 50)
 70 |   .then(() => moveTo(20, 100))
 71 |   .then(() => moveTo(100, 200))
 72 |   .then(() => moveTo(2, 10))
 73 | 
 74 | // becomes
 75 | 
 76 | async function animate() {
 77 |   await moveTo(50, 50);
 78 |   await moveTo(20, 100);
 79 |   await moveTo(100, 200);
 80 |   await moveTo(2, 10);
 81 | }
 82 | 
 83 | 
 84 | 
 85 | const getDetails = async function () {
 86 |   const wes = await axios.get('https://api.github.com/users/wesbos');
 87 |   const scott = await axios.get('https://api.github.com/users/stolinski');
 88 |   const html = `
 89 |           <h1>${wes.name}</h1>
 90 |           <h1>${scott.name}</h1>
 91 |         `;
 92 | }
 93 | 
 94 | const getDetails = async function () {
 95 |   // Fire Both off
 96 |   const wesPromise = axios.get('https://api.github.com/users/wesbos');
 97 |   const scottPromise = axios.get('https://api.github.com/users/stolinski');
 98 |   // and wait to both to come back
 99 |   const [wes, scott] = await Promise.all([wesPromise, scottPromise]);
100 |   const html = `
101 |           <h1>${wes.name}</h1>
102 |           <h1>${scott.name}</h1>
103 |         `;
104 | }
105 | 
106 | 
107 | 


--------------------------------------------------------------------------------
/demos/gum/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |   <meta charset="UTF-8">
 6 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |   <title>Document</title>
 8 | </head>
 9 | 
10 | <body>
11 |   <video autoplay playsinline class="handsome"></video>
12 |   <canvas id="paint"></canvas>
13 |   <button onClick="takePhoto()">📸</button>
14 |   <div class="strip"></div>
15 |   <script src="scripts.js"></script>
16 |   <style>
17 |     body {
18 |       font-family: sans-serif;
19 |       background: #ffc600;
20 |       margin: 0;
21 |       text-align: center;
22 |     }
23 | 
24 |     video {
25 |       width: 200px;
26 |       margin: 20px auto;
27 |       transform: rotate(10deg);
28 |       border: 10px solid white;
29 |       box-shadow: 0 0 10px rgba(0, 0, 0, 0.2)
30 |     }
31 | 
32 |     button {
33 |       display: block;
34 |       background: black;
35 |       font-size: 50px;
36 |       padding: 10px;
37 |       color: white;
38 |       width: 100%;
39 |       border: 0;
40 |     }
41 | 
42 |     #paint {
43 |       display: none;
44 |     }
45 | 
46 |     .strip {
47 |       width: 100%;
48 |       width: 100%;
49 |       display: flex;
50 |       overflow-x: scroll;
51 |       -webkit-overflow-scrolling: touch;
52 |     }
53 | 
54 |     .strip img {
55 |       width: 100px;
56 |       border: 2px solid white;
57 |       box-shadow: 0 0 10px rgba(0, 0, 0, 0.2)
58 |     }
59 | 
60 |     .strip a {
61 |       transition: all 0.3s;
62 |     }
63 | 
64 | 
65 |     .strip a:nth-child(2n+1) {
66 |       transform: rotate(10deg)
67 |     }
68 | 
69 |     .strip a:nth-child(2n+2) {
70 |       transform: rotate(-10deg)
71 |     }
72 |   </style>
73 | </body>
74 | 
75 | </html>


--------------------------------------------------------------------------------
/demos/gum/scripts.js:
--------------------------------------------------------------------------------
 1 | /* eslint-disable */
 2 | 
 3 | 
 4 | const video = document.querySelector('.handsome');
 5 | 
 6 | async function go() {
 7 |   const stream = await navigator.mediaDevices.getUserMedia({ video: true });
 8 |   video.srcObject = stream;
 9 | }
10 | 
11 | const strip = document.querySelector('.strip');
12 | const canvas = document.querySelector('#paint');
13 | const ctx = canvas.getContext('2d');
14 | 
15 | function takePhoto() {
16 |   console.log('Taking photo!');
17 |   canvas.width = video.videoWidth;
18 |   canvas.height = video.videoHeight;
19 | 
20 |   ctx.drawImage(video, 0, 0, video.videoWidth, video.videoHeight);
21 |   const data = canvas.toDataURL('image/jpeg');
22 |   const link = document.createElement('a');
23 |   link.href = data;
24 |   link.setAttribute('download', 'handsome.jpg');
25 |   link.innerHTML = `<img src="${data}" alt="Handsome Man" />`;
26 |   strip.insertBefore(link, strip.firsChild);
27 | }
28 | 
29 | 
30 | 
31 | 
32 | go().catch(err => {
33 |   alert(err.message);
34 | });
35 | 


--------------------------------------------------------------------------------
/demos/intersection-observer.html:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wesbos/future-js/2722bdd2ad50361a529718b87f2c97aff595a447/demos/intersection-observer.html


--------------------------------------------------------------------------------
/demos/intersection-observer/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 |   <meta charset="UTF-8">
  6 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7 |   <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8 |   <title>Document</title>
  9 | 
 10 | </head>
 11 | 
 12 | <body>
 13 | 
 14 |   <style>
 15 |     body {
 16 |       font-family: sans-serif;
 17 |       background: #ffc600;
 18 |     }
 19 | 
 20 |     .wrapper {
 21 |       max-width: 500px;
 22 |       background: white;
 23 |       padding: 20px;
 24 |       margin: 0 auto;
 25 |     }
 26 | 
 27 |     img {
 28 |       width: 100%;
 29 |     }
 30 | 
 31 |     .box {
 32 |       height: 200px;
 33 |       background: black;
 34 |       transform: translateX(-60%);
 35 |       transition: all 0.5s;
 36 |       opacity: 0;
 37 |     }
 38 | 
 39 |     .box.visible {
 40 |       opacity: 1;
 41 |       transform: translateX(0);
 42 |     }
 43 |   </style>
 44 |   <div class="wrapper">
 45 |     <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptatum sed officia neque praesentium, reprehenderit amet
 46 |       tenetur, porro ipsum vitae nisi aliquid, ea corporis doloremque exercitationem consectetur inventore quam laboriosam
 47 |       nemo. Cupiditate sapiente, reiciendis suscipit consequuntur accusamus nihil. Minus inventore, atque dicta voluptatem
 48 |       numquam molestias reiciendis, ad aliquid reprehenderit tenetur ex?</p>
 49 |     <img src="https://source.unsplash.com/random/800x300?v=1" alt="" class="box">
 50 |     <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptatum sed officia neque praesentium, reprehenderit amet
 51 |       tenetur, porro ipsum vitae nisi aliquid, ea corporis doloremque exercitationem consectetur inventore quam laboriosam
 52 |       nemo. Cupiditate sapiente, reiciendis suscipit consequuntur accusamus nihil. Minus inventore, atque dicta voluptatem
 53 |       numquam molestias reiciendis, ad aliquid reprehenderit tenetur ex?</p>
 54 |     <img src="https://source.unsplash.com/random/800x300?v=2" alt="" class="box">
 55 |     <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptatum sed officia neque praesentium, reprehenderit amet
 56 |       tenetur, porro ipsum vitae nisi aliquid, ea corporis doloremque exercitationem consectetur inventore quam laboriosam
 57 |       nemo. Cupiditate sapiente, reiciendis suscipit consequuntur accusamus nihil. Minus inventore, atque dicta voluptatem
 58 |       numquam molestias reiciendis, ad aliquid reprehenderit tenetur ex?</p>
 59 |     <img src="https://source.unsplash.com/random/800x300?v=3" alt="" class="box">
 60 |     <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptatum sed officia neque praesentium, reprehenderit amet
 61 |       tenetur, porro ipsum vitae nisi aliquid, ea corporis doloremque exercitationem consectetur inventore quam laboriosam
 62 |       nemo. Cupiditate sapiente, reiciendis suscipit consequuntur accusamus nihil. Minus inventore, atque dicta voluptatem
 63 |       numquam molestias reiciendis, ad aliquid reprehenderit tenetur ex?</p>
 64 |     <img src="https://source.unsplash.com/random/800x300?v=4" alt="" class="box">
 65 |     <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptatum sed officia neque praesentium, reprehenderit amet
 66 |       tenetur, porro ipsum vitae nisi aliquid, ea corporis doloremque exercitationem consectetur inventore quam laboriosam
 67 |       nemo. Cupiditate sapiente, reiciendis suscipit consequuntur accusamus nihil. Minus inventore, atque dicta voluptatem
 68 |       numquam molestias reiciendis, ad aliquid reprehenderit tenetur ex?</p>
 69 |     <img src="https://source.unsplash.com/random/800x300?v=5" alt="" class="box">
 70 |     <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptatum sed officia neque praesentium, reprehenderit amet
 71 |       tenetur, porro ipsum vitae nisi aliquid, ea corporis doloremque exercitationem consectetur inventore quam laboriosam
 72 |       nemo. Cupiditate sapiente, reiciendis suscipit consequuntur accusamus nihil. Minus inventore, atque dicta voluptatem
 73 |       numquam molestias reiciendis, ad aliquid reprehenderit tenetur ex?</p>
 74 |     <img src="https://source.unsplash.com/random/800x300?v=6" alt="" class="box">
 75 |     <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptatum sed officia neque praesentium, reprehenderit amet
 76 |       tenetur, porro ipsum vitae nisi aliquid, ea corporis doloremque exercitationem consectetur inventore quam laboriosam
 77 |       nemo. Cupiditate sapiente, reiciendis suscipit consequuntur accusamus nihil. Minus inventore, atque dicta voluptatem
 78 |       numquam molestias reiciendis, ad aliquid reprehenderit tenetur ex?</p>
 79 |     <img src="https://source.unsplash.com/random/800x300?v=7" alt="" class="box">
 80 |     <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptatum sed officia neque praesentium, reprehenderit amet
 81 |       tenetur, porro ipsum vitae nisi aliquid, ea corporis doloremque exercitationem consectetur inventore quam laboriosam
 82 |       nemo. Cupiditate sapiente, reiciendis suscipit consequuntur accusamus nihil. Minus inventore, atque dicta voluptatem
 83 |       numquam molestias reiciendis, ad aliquid reprehenderit tenetur ex?</p>
 84 |     <img src="https://source.unsplash.com/random/800x300?v=8" alt="" class="box">
 85 |     <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptatum sed officia neque praesentium, reprehenderit amet
 86 |       tenetur, porro ipsum vitae nisi aliquid, ea corporis doloremque exercitationem consectetur inventore quam laboriosam
 87 |       nemo. Cupiditate sapiente, reiciendis suscipit consequuntur accusamus nihil. Minus inventore, atque dicta voluptatem
 88 |       numquam molestias reiciendis, ad aliquid reprehenderit tenetur ex?</p>
 89 |     <img src="https://source.unsplash.com/random/800x300?v=9" alt="" class="box">
 90 |     <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptatum sed officia neque praesentium, reprehenderit amet
 91 |       tenetur, porro ipsum vitae nisi aliquid, ea corporis doloremque exercitationem consectetur inventore quam laboriosam
 92 |       nemo. Cupiditate sapiente, reiciendis suscipit consequuntur accusamus nihil. Minus inventore, atque dicta voluptatem
 93 |       numquam molestias reiciendis, ad aliquid reprehenderit tenetur ex?</p>
 94 |     <img src="https://source.unsplash.com/random/800x300?v=10" alt="" class="box">
 95 |     <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptatum sed officia neque praesentium, reprehenderit amet
 96 |       tenetur, porro ipsum vitae nisi aliquid, ea corporis doloremque exercitationem consectetur inventore quam laboriosam
 97 |       nemo. Cupiditate sapiente, reiciendis suscipit consequuntur accusamus nihil. Minus inventore, atque dicta voluptatem
 98 |       numquam molestias reiciendis, ad aliquid reprehenderit tenetur ex?</p>
 99 |     <img src="https://source.unsplash.com/random/800x300?v=11" alt="" class="box">
100 |     <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptatum sed officia neque praesentium, reprehenderit amet
101 |       tenetur, porro ipsum vitae nisi aliquid, ea corporis doloremque exercitationem consectetur inventore quam laboriosam
102 |       nemo. Cupiditate sapiente, reiciendis suscipit consequuntur accusamus nihil. Minus inventore, atque dicta voluptatem
103 |       numquam molestias reiciendis, ad aliquid reprehenderit tenetur ex?</p>
104 |     <img src="https://source.unsplash.com/random/800x300?v=12" alt="" class="box">
105 |     <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptatum sed officia neque praesentium, reprehenderit amet
106 |       tenetur, porro ipsum vitae nisi aliquid, ea corporis doloremque exercitationem consectetur inventore quam laboriosam
107 |       nemo. Cupiditate sapiente, reiciendis suscipit consequuntur accusamus nihil. Minus inventore, atque dicta voluptatem
108 |       numquam molestias reiciendis, ad aliquid reprehenderit tenetur ex?</p>
109 |     <img src="https://source.unsplash.com/random/800x300?v=13" alt="" class="box">
110 |     <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptatum sed officia neque praesentium, reprehenderit amet
111 |       tenetur, porro ipsum vitae nisi aliquid, ea corporis doloremque exercitationem consectetur inventore quam laboriosam
112 |       nemo. Cupiditate sapiente, reiciendis suscipit consequuntur accusamus nihil. Minus inventore, atque dicta voluptatem
113 |       numquam molestias reiciendis, ad aliquid reprehenderit tenetur ex?</p>
114 |     <img src="https://source.unsplash.com/random/800x300?v=14" alt="" class="box">
115 |     <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptatum sed officia neque praesentium, reprehenderit amet
116 |       tenetur, porro ipsum vitae nisi aliquid, ea corporis doloremque exercitationem consectetur inventore quam laboriosam
117 |       nemo. Cupiditate sapiente, reiciendis suscipit consequuntur accusamus nihil. Minus inventore, atque dicta voluptatem
118 |       numquam molestias reiciendis, ad aliquid reprehenderit tenetur ex?</p>
119 |     <img src="https://source.unsplash.com/random/800x300?v=15" alt="" class="box">
120 |     <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptatum sed officia neque praesentium, reprehenderit amet
121 |       tenetur, porro ipsum vitae nisi aliquid, ea corporis doloremque exercitationem consectetur inventore quam laboriosam
122 |       nemo. Cupiditate sapiente, reiciendis suscipit consequuntur accusamus nihil. Minus inventore, atque dicta voluptatem
123 |       numquam molestias reiciendis, ad aliquid reprehenderit tenetur ex?</p>
124 |     <img src="https://source.unsplash.com/random/800x300?v=16" alt="" class="box">
125 |     <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptatum sed officia neque praesentium, reprehenderit amet
126 |       tenetur, porro ipsum vitae nisi aliquid, ea corporis doloremque exercitationem consectetur inventore quam laboriosam
127 |       nemo. Cupiditate sapiente, reiciendis suscipit consequuntur accusamus nihil. Minus inventore, atque dicta voluptatem
128 |       numquam molestias reiciendis, ad aliquid reprehenderit tenetur ex?</p>
129 |     <img src="https://source.unsplash.com/random/800x300?v=17" alt="" class="box">
130 |     <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptatum sed officia neque praesentium, reprehenderit amet
131 |       tenetur, porro ipsum vitae nisi aliquid, ea corporis doloremque exercitationem consectetur inventore quam laboriosam
132 |       nemo. Cupiditate sapiente, reiciendis suscipit consequuntur accusamus nihil. Minus inventore, atque dicta voluptatem
133 |       numquam molestias reiciendis, ad aliquid reprehenderit tenetur ex?</p>
134 |     <img src="https://source.unsplash.com/random/800x300?v=18" alt="" class="box">
135 |     <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptatum sed officia neque praesentium, reprehenderit amet
136 |       tenetur, porro ipsum vitae nisi aliquid, ea corporis doloremque exercitationem consectetur inventore quam laboriosam
137 |       nemo. Cupiditate sapiente, reiciendis suscipit consequuntur accusamus nihil. Minus inventore, atque dicta voluptatem
138 |       numquam molestias reiciendis, ad aliquid reprehenderit tenetur ex?</p>
139 |     <img src="https://source.unsplash.com/random/800x300?v=19" alt="" class="box">
140 |     <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptatum sed officia neque praesentium, reprehenderit amet
141 |       tenetur, porro ipsum vitae nisi aliquid, ea corporis doloremque exercitationem consectetur inventore quam laboriosam
142 |       nemo. Cupiditate sapiente, reiciendis suscipit consequuntur accusamus nihil. Minus inventore, atque dicta voluptatem
143 |       numquam molestias reiciendis, ad aliquid reprehenderit tenetur ex?</p>
144 |     <img src="https://source.unsplash.com/random/800x300?v=20" alt="" class="box">
145 |     <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptatum sed officia neque praesentium, reprehenderit amet
146 |       tenetur, porro ipsum vitae nisi aliquid, ea corporis doloremque exercitationem consectetur inventore quam laboriosam
147 |       nemo. Cupiditate sapiente, reiciendis suscipit consequuntur accusamus nihil. Minus inventore, atque dicta voluptatem
148 |       numquam molestias reiciendis, ad aliquid reprehenderit tenetur ex?</p>
149 |     <img src="https://source.unsplash.com/random/800x300?v=21" alt="" class="box">
150 |     <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptatum sed officia neque praesentium, reprehenderit amet
151 |       tenetur, porro ipsum vitae nisi aliquid, ea corporis doloremque exercitationem consectetur inventore quam laboriosam
152 |       nemo. Cupiditate sapiente, reiciendis suscipit consequuntur accusamus nihil. Minus inventore, atque dicta voluptatem
153 |       numquam molestias reiciendis, ad aliquid reprehenderit tenetur ex?</p>
154 |     <img src="https://source.unsplash.com/random/800x300?v=22" alt="" class="box">
155 |     <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptatum sed officia neque praesentium, reprehenderit amet
156 |       tenetur, porro ipsum vitae nisi aliquid, ea corporis doloremque exercitationem consectetur inventore quam laboriosam
157 |       nemo. Cupiditate sapiente, reiciendis suscipit consequuntur accusamus nihil. Minus inventore, atque dicta voluptatem
158 |       numquam molestias reiciendis, ad aliquid reprehenderit tenetur ex?</p>
159 |     <img src="https://source.unsplash.com/random/800x300?v=23" alt="" class="box">
160 |     <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptatum sed officia neque praesentium, reprehenderit amet
161 |       tenetur, porro ipsum vitae nisi aliquid, ea corporis doloremque exercitationem consectetur inventore quam laboriosam
162 |       nemo. Cupiditate sapiente, reiciendis suscipit consequuntur accusamus nihil. Minus inventore, atque dicta voluptatem
163 |       numquam molestias reiciendis, ad aliquid reprehenderit tenetur ex?</p>
164 |     <img src="https://source.unsplash.com/random/800x300?v=24" alt="" class="box">
165 |     <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptatum sed officia neque praesentium, reprehenderit amet
166 |       tenetur, porro ipsum vitae nisi aliquid, ea corporis doloremque exercitationem consectetur inventore quam laboriosam
167 |       nemo. Cupiditate sapiente, reiciendis suscipit consequuntur accusamus nihil. Minus inventore, atque dicta voluptatem
168 |       numquam molestias reiciendis, ad aliquid reprehenderit tenetur ex?</p>
169 |     <img src="https://source.unsplash.com/random/800x300?v=25" alt="" class="box">
170 |     <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptatum sed officia neque praesentium, reprehenderit amet
171 |       tenetur, porro ipsum vitae nisi aliquid, ea corporis doloremque exercitationem consectetur inventore quam laboriosam
172 |       nemo. Cupiditate sapiente, reiciendis suscipit consequuntur accusamus nihil. Minus inventore, atque dicta voluptatem
173 |       numquam molestias reiciendis, ad aliquid reprehenderit tenetur ex?</p>
174 |     <img src="https://source.unsplash.com/random/800x300?v=26" alt="" class="box">
175 |     <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptatum sed officia neque praesentium, reprehenderit amet
176 |       tenetur, porro ipsum vitae nisi aliquid, ea corporis doloremque exercitationem consectetur inventore quam laboriosam
177 |       nemo. Cupiditate sapiente, reiciendis suscipit consequuntur accusamus nihil. Minus inventore, atque dicta voluptatem
178 |       numquam molestias reiciendis, ad aliquid reprehenderit tenetur ex?</p>
179 |     <img src="https://source.unsplash.com/random/800x300?v=27" alt="" class="box">
180 |     <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptatum sed officia neque praesentium, reprehenderit amet
181 |       tenetur, porro ipsum vitae nisi aliquid, ea corporis doloremque exercitationem consectetur inventore quam laboriosam
182 |       nemo. Cupiditate sapiente, reiciendis suscipit consequuntur accusamus nihil. Minus inventore, atque dicta voluptatem
183 |       numquam molestias reiciendis, ad aliquid reprehenderit tenetur ex?</p>
184 |     <img src="https://source.unsplash.com/random/800x300?v=28" alt="" class="box">
185 |     <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptatum sed officia neque praesentium, reprehenderit amet
186 |       tenetur, porro ipsum vitae nisi aliquid, ea corporis doloremque exercitationem consectetur inventore quam laboriosam
187 |       nemo. Cupiditate sapiente, reiciendis suscipit consequuntur accusamus nihil. Minus inventore, atque dicta voluptatem
188 |       numquam molestias reiciendis, ad aliquid reprehenderit tenetur ex?</p>
189 |     <img src="https://source.unsplash.com/random/800x300?v=29" alt="" class="box">
190 |     <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptatum sed officia neque praesentium, reprehenderit amet
191 |       tenetur, porro ipsum vitae nisi aliquid, ea corporis doloremque exercitationem consectetur inventore quam laboriosam
192 |       nemo. Cupiditate sapiente, reiciendis suscipit consequuntur accusamus nihil. Minus inventore, atque dicta voluptatem
193 |       numquam molestias reiciendis, ad aliquid reprehenderit tenetur ex?</p>
194 |     <img src="https://source.unsplash.com/random/800x300?v=30" alt="" class="box">
195 |     <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptatum sed officia neque praesentium, reprehenderit amet
196 |       tenetur, porro ipsum vitae nisi aliquid, ea corporis doloremque exercitationem consectetur inventore quam laboriosam
197 |       nemo. Cupiditate sapiente, reiciendis suscipit consequuntur accusamus nihil. Minus inventore, atque dicta voluptatem
198 |       numquam molestias reiciendis, ad aliquid reprehenderit tenetur ex?</p>
199 |     <img src="https://source.unsplash.com/random/800x300?v=31" alt="" class="box">
200 |     <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptatum sed officia neque praesentium, reprehenderit amet
201 |       tenetur, porro ipsum vitae nisi aliquid, ea corporis doloremque exercitationem consectetur inventore quam laboriosam
202 |       nemo. Cupiditate sapiente, reiciendis suscipit consequuntur accusamus nihil. Minus inventore, atque dicta voluptatem
203 |       numquam molestias reiciendis, ad aliquid reprehenderit tenetur ex?</p>
204 |     <img src="https://source.unsplash.com/random/800x300?v=32" alt="" class="box">
205 |     <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptatum sed officia neque praesentium, reprehenderit amet
206 |       tenetur, porro ipsum vitae nisi aliquid, ea corporis doloremque exercitationem consectetur inventore quam laboriosam
207 |       nemo. Cupiditate sapiente, reiciendis suscipit consequuntur accusamus nihil. Minus inventore, atque dicta voluptatem
208 |       numquam molestias reiciendis, ad aliquid reprehenderit tenetur ex?</p>
209 |     <img src="https://source.unsplash.com/random/800x300?v=33" alt="" class="box">
210 |     <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptatum sed officia neque praesentium, reprehenderit amet
211 |       tenetur, porro ipsum vitae nisi aliquid, ea corporis doloremque exercitationem consectetur inventore quam laboriosam
212 |       nemo. Cupiditate sapiente, reiciendis suscipit consequuntur accusamus nihil. Minus inventore, atque dicta voluptatem
213 |       numquam molestias reiciendis, ad aliquid reprehenderit tenetur ex?</p>
214 |     <img src="https://source.unsplash.com/random/800x300?v=34" alt="" class="box">
215 | 
216 |     <p></p>
217 |   </div>
218 |   <script src="./scripts.js"></script>
219 | </body>
220 | 
221 | </html>
222 | </div>


--------------------------------------------------------------------------------
/demos/intersection-observer/scripts.js:
--------------------------------------------------------------------------------
 1 | /* eslint-disable */
 2 | 
 3 | 
 4 | const options = {
 5 |   // Specify the scroller, uses viewport if omitted
 6 |   root: document.querySelector('.scrollingDiv'),
 7 |   // Optional margin offset
 8 |   rootMargin: '100px',
 9 |   // Thresholds as to when you'd like it to alert you
10 |   // off, half, and totally on
11 |   threshold: [0, 0.5, 1.0],
12 | };
13 | 
14 | 
15 | const callback = (entries, observer) => {
16 |   // Entries are elements that are within view
17 |   entries.forEach(entry => {
18 |     // only using 1.0 threshold here
19 |     if (entry.isIntersecting && entry.intersectionRatio >= 1) {
20 |       console.log(entry);
21 |       entry.target.classList.add('visible'); // CSS will animate it in
22 |     } else {
23 |       entry.target.classList.remove('visible'); // animate out
24 |     }
25 |     // at this point you can also un-observe for a single animation
26 |     // observer.unobserve(entry.target);
27 |   });
28 | };
29 | 
30 | 
31 | 
32 | const observer = new IntersectionObserver(callback, options);
33 | 
34 | 
35 | 
36 | 
37 | 
38 | 
39 | // get some elements to observe
40 | const boxes = document.querySelectorAll('.box');
41 | // Observe each of those elements
42 | boxes.forEach(box => observer.observe(box));
43 | 


--------------------------------------------------------------------------------
/demos/pip/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |   <meta charset="UTF-8">
 6 |   <title>Picture in Picture</title>
 7 | </head>
 8 | 
 9 | <body>
10 |   <video controls id="video" src="http://www.w3schools.com/html/mov_bbb.mp4">
11 |   </video>
12 | 
13 |   <div class="controls">
14 |     <button id="picture-in-picture">Picture in Picture</button>
15 |   </div>
16 | 
17 |   <script src="scripts.js"></script>
18 | </body>
19 | 
20 | </html>


--------------------------------------------------------------------------------
/demos/pip/scripts.js:
--------------------------------------------------------------------------------
 1 | const videoEl = document.getElementById('video');
 2 | const PiP = document.getElementById('picture-in-picture');
 3 | 
 4 | // picture-in-picture
 5 | if (videoEl.webkitSupportsPresentationMode && typeof videoEl.webkitSetPresentationMode === 'function') {
 6 |   // Toggle PiP when the user clicks the button.
 7 |   PiP.addEventListener('click', event => {
 8 |     videoEl.webkitSetPresentationMode('picture-in-picture');
 9 |   });
10 | } else {
11 |   PiP.disabled = true;
12 | }
13 | 


--------------------------------------------------------------------------------
/demos/resize-observer/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |   <meta charset="UTF-8">
 6 |   <title>Document</title>
 7 | </head>
 8 | 
 9 | <body>
10 | 
11 |   <div class="resize" draggable="true">Resizeable!</div>
12 | 
13 |   <style>
14 |     body {
15 |       font-family: sans-serif;
16 |     }
17 | 
18 |     .resize {
19 |       resize: both;
20 |       border: 1px solid black;
21 |       padding: 20px;
22 |       margin: 20px;
23 |       font-size: 30px;
24 |       height: 100px;
25 |       overflow: scroll;
26 |     }
27 |   </style>
28 | 
29 |   <script src="scripts.js"></script>
30 | </body>
31 | 
32 | </html>


--------------------------------------------------------------------------------
/demos/resize-observer/scripts.js:
--------------------------------------------------------------------------------
 1 | /* eslint-disable */
 2 | 
 3 | // function callback(entries, observer) {
 4 | //   entries[0].target.innerHTML = `
 5 | //     <pre>
 6 | //       ${JSON.stringify(entries[0].contentRect, null, ' ')}
 7 | //     </pre>`;
 8 | // }
 9 | 
10 | // const observer = new ResizeObserver(callback);
11 | 
12 | // // get some elements to observe
13 | // const element = document.querySelector('.resize');
14 | // observer.observe(element);
15 | 
16 | function callback(entries, observer) {
17 | 
18 |   entries[0].target.innerHTML = `
19 |             <pre>
20 |               ${JSON.stringify(entries[0].contentRect, null, ' ')}
21 |             </pre>`;
22 | }
23 | 
24 | const observer = new ResizeObserver(callback);
25 | 
26 | // get some elements to observe
27 | const element = document.querySelector('.resize');
28 | observer.observe(element);
29 | 


--------------------------------------------------------------------------------
/demos/resize-observer/video-player.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 |   <meta charset="UTF-8">
  6 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7 |   <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8 |   <title>Video player-wrap</title>
  9 | </head>
 10 | 
 11 | <body>
 12 |   <style>
 13 |     body {
 14 |       background: mistyrose;
 15 |       font-family: sans-serif;
 16 |       display: flex;
 17 |       min-height: 100vh;
 18 |       justify-content: center;
 19 |       align-items: center;
 20 |     }
 21 | 
 22 | 
 23 |     .player-wrap {
 24 |       border: 10px double black;
 25 |       width: 900px;
 26 |       height: 500px;
 27 |       margin: 0 auto;
 28 |       display: flex;
 29 |     }
 30 | 
 31 |     .player {
 32 |       resize: horizontal;
 33 |       overflow-x: scroll;
 34 |       background: black;
 35 |     }
 36 | 
 37 |     .videos {
 38 |       flex: 1;
 39 |     }
 40 | 
 41 |     video {
 42 |       width: 100%;
 43 |     }
 44 | 
 45 |     .videos__list * {
 46 |       transition: all 0.5s;
 47 |     }
 48 | 
 49 |     .videos__list {
 50 |       margin: 0;
 51 |       list-style: none;
 52 |       padding: 0;
 53 |       width: 100%;
 54 |       overflow: scroll;
 55 |       height: 100%;
 56 |     }
 57 | 
 58 |     .videos__list.small {
 59 |       background: rgba(255, 255, 255, 1);
 60 |     }
 61 | 
 62 |     .videos__list.small .title {
 63 |       font-size: 20px;
 64 |     }
 65 | 
 66 |     .videos__list.small li {
 67 |       padding: 5px;
 68 |     }
 69 | 
 70 |     .videos__list.medium li {
 71 |       padding: 15px;
 72 |     }
 73 | 
 74 |     .videos__list.small p,
 75 |     .videos__list.medium p {
 76 |       margin: 0;
 77 |     }
 78 | 
 79 |     .videos__list.medium .title {
 80 |       font-size: 25px;
 81 |     }
 82 | 
 83 |     .videos__list.medium {
 84 |       background: rgba(255, 255, 255, 0.75);
 85 |     }
 86 | 
 87 |     .videos__list.medium {
 88 |       background: rgba(255, 255, 255, 0.5);
 89 |     }
 90 | 
 91 |     .videos__list li {
 92 |       padding: 10px;
 93 |       background: white;
 94 |       display: block;
 95 |       border-bottom: 1px solid grey;
 96 |       position: relative;
 97 |     }
 98 | 
 99 |     .timecode {
100 |       background: black;
101 |       color: white;
102 |       border-radius: 10px;
103 |       padding: 2px 5px;
104 |       position: absolute;
105 |       top: 10px;
106 |       right: 10px;
107 |     }
108 | 
109 |     .medium .timecode {
110 |       top: 30px;
111 |       font-size: 12px;
112 |     }
113 | 
114 |     .medium .desc {
115 |       color: rgba(0, 0, 0, 0.8);
116 |       font-size: 15px;
117 |     }
118 | 
119 |     .small .desc {
120 |       color: rgba(0, 0, 0, 0.5);
121 |       font-size: 11px;
122 |     }
123 | 
124 |     .small .timecode {
125 |       top: 30px;
126 |       font-size: 8px;
127 |     }
128 | 
129 |     .title {
130 |       font-size: 30px;
131 |       margin: 0;
132 |       font-weight: 500;
133 |     }
134 |   </style>
135 | 
136 |   <div class="player-wrap">
137 |     <div class="player">
138 |       <video poster="https://i.ytimg.com/vi/5h_y3svpNiw/hqdefault.jpg"></video>
139 |     </div>
140 |     <div class="videos">
141 |       <ul class="videos__list">
142 |         <li>
143 |           <p class="title">Video 001</p>
144 |           <p class="desc">This is the video Desc</p>
145 |           <span class="timecode">01:21</span>
146 |         </li>
147 |         <li>
148 |           <p class="title">Video 002</p>
149 |           <p class="desc">This is the video Desc</p>
150 |           <span class="timecode">02:22</span>
151 |         </li>
152 |         <li>
153 |           <p class="title">Video 003</p>
154 |           <p class="desc">This is the video Desc</p>
155 |           <span class="timecode">03:23</span>
156 |         </li>
157 |         <li>
158 |           <p class="title">Video 004</p>
159 |           <p class="desc">This is the video Desc</p>
160 |           <span class="timecode">04:24</span>
161 |         </li>
162 |         <li>
163 |           <p class="title">Video 005</p>
164 |           <p class="desc">This is the video Desc</p>
165 |           <span class="timecode">05:25</span>
166 |         </li>
167 |         <li>
168 |           <p class="title">Video 006</p>
169 |           <p class="desc">This is the video Desc</p>
170 |           <span class="timecode">06:26</span>
171 |         </li>
172 |         <li>
173 |           <p class="title">Video 007</p>
174 |           <p class="desc">This is the video Desc</p>
175 |           <span class="timecode">07:27</span>
176 |         </li>
177 |         <li>
178 |           <p class="title">Video 008</p>
179 |           <p class="desc">This is the video Desc</p>
180 |           <span class="timecode">08:28</span>
181 |         </li>
182 |         <li>
183 |           <p class="title">Video 009</p>
184 |           <p class="desc">This is the video Desc</p>
185 |           <span class="timecode">09:29</span>
186 |         </li>
187 |         <li>
188 |           <p class="title">Video 010</p>
189 |           <p class="desc">This is the video Desc</p>
190 |           <span class="timecode">10:210</span>
191 |         </li>
192 |         <li>
193 |           <p class="title">Video 011</p>
194 |           <p class="desc">This is the video Desc</p>
195 |           <span class="timecode">11:211</span>
196 |         </li>
197 |         <li>
198 |           <p class="title">Video 012</p>
199 |           <p class="desc">This is the video Desc</p>
200 |           <span class="timecode">12:212</span>
201 |         </li>
202 |         <li>
203 |           <p class="title">Video 013</p>
204 |           <p class="desc">This is the video Desc</p>
205 |           <span class="timecode">13:213</span>
206 |         </li>
207 |         <li>
208 |           <p class="title">Video 014</p>
209 |           <p class="desc">This is the video Desc</p>
210 |           <span class="timecode">14:214</span>
211 |         </li>
212 |         <li>
213 |           <p class="title">Video 015</p>
214 |           <p class="desc">This is the video Desc</p>
215 |           <span class="timecode">15:215</span>
216 |         </li>
217 |         <li>
218 |           <p class="title">Video 016</p>
219 |           <p class="desc">This is the video Desc</p>
220 |           <span class="timecode">16:216</span>
221 |         </li>
222 |         <li>
223 |           <p class="title">Video 017</p>
224 |           <p class="desc">This is the video Desc</p>
225 |           <span class="timecode">17:217</span>
226 |         </li>
227 |         <li>
228 |           <p class="title">Video 018</p>
229 |           <p class="desc">This is the video Desc</p>
230 |           <span class="timecode">18:218</span>
231 |         </li>
232 |         <li>
233 |           <p class="title">Video 019</p>
234 |           <p class="desc">This is the video Desc</p>
235 |           <span class="timecode">19:219</span>
236 |         </li>
237 |         <li>
238 |           <p class="title">Video 020</p>
239 |           <p class="desc">This is the video Desc</p>
240 |           <span class="timecode">20:220</span>
241 |         </li>
242 |         <li>
243 |           <p class="title">Video 021</p>
244 |           <p class="desc">This is the video Desc</p>
245 |           <span class="timecode">21:221</span>
246 |         </li>
247 |         <li>
248 |           <p class="title">Video 022</p>
249 |           <p class="desc">This is the video Desc</p>
250 |           <span class="timecode">22:222</span>
251 |         </li>
252 |         <li>
253 |           <p class="title">Video 023</p>
254 |           <p class="desc">This is the video Desc</p>
255 |           <span class="timecode">23:223</span>
256 |         </li>
257 |         <li>
258 |           <p class="title">Video 024</p>
259 |           <p class="desc">This is the video Desc</p>
260 |           <span class="timecode">24:224</span>
261 |         </li>
262 |         <li>
263 |           <p class="title">Video 025</p>
264 |           <p class="desc">This is the video Desc</p>
265 |           <span class="timecode">25:225</span>
266 |         </li>
267 |         <li>
268 |           <p class="title">Video 026</p>
269 |           <p class="desc">This is the video Desc</p>
270 |           <span class="timecode">26:226</span>
271 |         </li>
272 |         <li>
273 |           <p class="title">Video 027</p>
274 |           <p class="desc">This is the video Desc</p>
275 |           <span class="timecode">27:227</span>
276 |         </li>
277 |         <li>
278 |           <p class="title">Video 028</p>
279 |           <p class="desc">This is the video Desc</p>
280 |           <span class="timecode">28:228</span>
281 |         </li>
282 |         <li>
283 |           <p class="title">Video 029</p>
284 |           <p class="desc">This is the video Desc</p>
285 |           <span class="timecode">29:229</span>
286 |         </li>
287 |         <li>
288 |           <p class="title">Video 030</p>
289 |           <p class="desc">This is the video Desc</p>
290 |           <span class="timecode">30:230</span>
291 |         </li>
292 |         <li>
293 |           <p class="title">Video 031</p>
294 |           <p class="desc">This is the video Desc</p>
295 |           <span class="timecode">31:231</span>
296 |         </li>
297 |         <li>
298 |           <p class="title">Video 032</p>
299 |           <p class="desc">This is the video Desc</p>
300 |           <span class="timecode">32:232</span>
301 |         </li>
302 |         <li>
303 |           <p class="title">Video 033</p>
304 |           <p class="desc">This is the video Desc</p>
305 |           <span class="timecode">33:233</span>
306 |         </li>
307 |         <li>
308 |           <p class="title">Video 034</p>
309 |           <p class="desc">This is the video Desc</p>
310 |           <span class="timecode">34:234</span>
311 |         </li>
312 |         <li>
313 |           <p class="title">Video 035</p>
314 |           <p class="desc">This is the video Desc</p>
315 |           <span class="timecode">35:235</span>
316 |         </li>
317 |         <li>
318 |           <p class="title">Video 036</p>
319 |           <p class="desc">This is the video Desc</p>
320 |           <span class="timecode">36:236</span>
321 |         </li>
322 |         <li>
323 |           <p class="title">Video 037</p>
324 |           <p class="desc">This is the video Desc</p>
325 |           <span class="timecode">37:237</span>
326 |         </li>
327 |         <li>
328 |           <p class="title">Video 038</p>
329 |           <p class="desc">This is the video Desc</p>
330 |           <span class="timecode">38:238</span>
331 |         </li>
332 |         <li>
333 |           <p class="title">Video 039</p>
334 |           <p class="desc">This is the video Desc</p>
335 |           <span class="timecode">39:239</span>
336 |         </li>
337 |         <li>
338 |           <p class="title">Video 040</p>
339 |           <p class="desc">This is the video Desc</p>
340 |           <span class="timecode">40:240</span>
341 |         </li>
342 |         <li>
343 |           <p class="title">Video 041</p>
344 |           <p class="desc">This is the video Desc</p>
345 |           <span class="timecode">41:241</span>
346 |         </li>
347 |         <li>
348 |           <p class="title">Video 042</p>
349 |           <p class="desc">This is the video Desc</p>
350 |           <span class="timecode">42:242</span>
351 |         </li>
352 |         <li>
353 |           <p class="title">Video 043</p>
354 |           <p class="desc">This is the video Desc</p>
355 |           <span class="timecode">43:243</span>
356 |         </li>
357 |         <li>
358 |           <p class="title">Video 044</p>
359 |           <p class="desc">This is the video Desc</p>
360 |           <span class="timecode">44:244</span>
361 |         </li>
362 |         <li>
363 |           <p class="title">Video 045</p>
364 |           <p class="desc">This is the video Desc</p>
365 |           <span class="timecode">45:245</span>
366 |         </li>
367 |         <li>
368 |           <p class="title">Video 046</p>
369 |           <p class="desc">This is the video Desc</p>
370 |           <span class="timecode">46:246</span>
371 |         </li>
372 |         <li>
373 |           <p class="title">Video 047</p>
374 |           <p class="desc">This is the video Desc</p>
375 |           <span class="timecode">47:247</span>
376 |         </li>
377 |         <li>
378 |           <p class="title">Video 048</p>
379 |           <p class="desc">This is the video Desc</p>
380 |           <span class="timecode">48:248</span>
381 |         </li>
382 |         <li>
383 |           <p class="title">Video 049</p>
384 |           <p class="desc">This is the video Desc</p>
385 |           <span class="timecode">49:249</span>
386 |         </li>
387 |         <li>
388 |           <p class="title">Video 050</p>
389 |           <p class="desc">This is the video Desc</p>
390 |           <span class="timecode">50:250</span>
391 |         </li>
392 |       </ul>
393 |     </div>
394 |   </div>
395 | 
396 |   <script>
397 |     function callback(entries, observer) {
398 |       const { width } = entries[0].contentRect;
399 |       console.log(width);
400 |       if (width > 400) {
401 |         size = 'large';
402 |       } else if (width > 300) {
403 |         size = 'medium';
404 |       } else {
405 |         size = 'small';
406 |       }
407 | 
408 |       entries[0].target.classList.remove('small', 'medium', 'large');
409 |       entries[0].target.classList.add(size);
410 |     }
411 | 
412 |     const observer = new ResizeObserver(callback);
413 | 
414 |     // get some elements to observe
415 |     const element = document.querySelector('.videos__list');
416 |     observer.observe(element);
417 |   </script>
418 | 
419 | </body>
420 | 
421 | </html>


--------------------------------------------------------------------------------
/demos/webpayment/applepay.html:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wesbos/future-js/2722bdd2ad50361a529718b87f2c97aff595a447/demos/webpayment/applepay.html


--------------------------------------------------------------------------------
/demos/webpayment/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <title>Web Payments!</title>
 6 | </head>
 7 | <body>
 8 | 
 9 |   <button onClick="takeMyMoney()">Take My Money!</button>
10 | 
11 |   <script>
12 |     const supportedPaymentMethods = [{ supportedMethods: ['basic-card'] }];
13 |     const paymentDetails = { total: { label: 'Total', amount: { currency: 'USD', value: 100 } } };
14 |     const request = new PaymentRequest(supportedPaymentMethods, paymentDetails);
15 | 
16 |     async function takeMyMoney() {
17 |       // show the payment Popup and wait until they fill it out
18 |       const paymentResponse = await request.show();
19 |       // Complete the payment
20 |       await paymentResponse.complete();
21 |       // now send this data to Stripe / Your Payment Provider
22 |       console.log(paymentResponse.details); // CC #, name, security Code, Expiry, etc...
23 |     }
24 |   </script>
25 | </body>
26 | </html>
27 | 


--------------------------------------------------------------------------------
/demos/webpayment/package-lock.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   "lockfileVersion": 1,
  3 |   "dependencies": {
  4 |     "asap": {
  5 |       "version": "2.0.6",
  6 |       "resolved": "https://registry.npmjs.org/asap/-/asap-2.0.6.tgz",
  7 |       "integrity": "sha1-5QNHYR1+aQlDIIu9r+vLwvuGbUY="
  8 |     },
  9 |     "chain-function": {
 10 |       "version": "1.0.0",
 11 |       "resolved": "https://registry.npmjs.org/chain-function/-/chain-function-1.0.0.tgz",
 12 |       "integrity": "sha1-DUqzfn4Y6tC9xHuSB2QRjOWHM9w="
 13 |     },
 14 |     "classnames": {
 15 |       "version": "2.2.5",
 16 |       "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.2.5.tgz",
 17 |       "integrity": "sha1-+zgB1FNGdknvNgPH1hoCvRKb3m0="
 18 |     },
 19 |     "core-js": {
 20 |       "version": "1.2.7",
 21 |       "resolved": "https://registry.npmjs.org/core-js/-/core-js-1.2.7.tgz",
 22 |       "integrity": "sha1-ZSKUwUZR2yj6k70tX/KYOk8IxjY="
 23 |     },
 24 |     "dom-helpers": {
 25 |       "version": "3.2.1",
 26 |       "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-3.2.1.tgz",
 27 |       "integrity": "sha1-MgPgf+0he9H0JLAZc1WC/Deyglo="
 28 |     },
 29 |     "encoding": {
 30 |       "version": "0.1.12",
 31 |       "resolved": "https://registry.npmjs.org/encoding/-/encoding-0.1.12.tgz",
 32 |       "integrity": "sha1-U4tm8+5izRq1HsMjgp0flIDHS+s="
 33 |     },
 34 |     "fbjs": {
 35 |       "version": "0.8.14",
 36 |       "resolved": "https://registry.npmjs.org/fbjs/-/fbjs-0.8.14.tgz",
 37 |       "integrity": "sha1-0dviviVMNakeCfMfnNUKQLKg7Rw="
 38 |     },
 39 |     "iconv-lite": {
 40 |       "version": "0.4.18",
 41 |       "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.18.tgz",
 42 |       "integrity": "sha512-sr1ZQph3UwHTR0XftSbK85OvBbxe/abLGzEnPENCQwmHf7sck8Oyu4ob3LgBxWWxRoM+QszeUyl7jbqapu2TqA=="
 43 |     },
 44 |     "is-stream": {
 45 |       "version": "1.1.0",
 46 |       "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-1.1.0.tgz",
 47 |       "integrity": "sha1-EtSj3U5o4Lec6428hBc66A2RykQ="
 48 |     },
 49 |     "isomorphic-fetch": {
 50 |       "version": "2.2.1",
 51 |       "resolved": "https://registry.npmjs.org/isomorphic-fetch/-/isomorphic-fetch-2.2.1.tgz",
 52 |       "integrity": "sha1-YRrhrPFPXoH3KVB0coGf6XM1WKk="
 53 |     },
 54 |     "js-tokens": {
 55 |       "version": "3.0.2",
 56 |       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-3.0.2.tgz",
 57 |       "integrity": "sha1-mGbfOVECEw449/mWvOtlRDIJwls="
 58 |     },
 59 |     "loose-envify": {
 60 |       "version": "1.3.1",
 61 |       "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.3.1.tgz",
 62 |       "integrity": "sha1-0aitM/qc4OcT1l/dCsi3SNR4yEg="
 63 |     },
 64 |     "node-fetch": {
 65 |       "version": "1.7.2",
 66 |       "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-1.7.2.tgz",
 67 |       "integrity": "sha512-xZZUq2yDhKMIn/UgG5q//IZSNLJIwW2QxS14CNH5spuiXkITM2pUitjdq58yLSaU7m4M0wBNaM2Gh/ggY4YJig=="
 68 |     },
 69 |     "object-assign": {
 70 |       "version": "4.1.1",
 71 |       "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
 72 |       "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM="
 73 |     },
 74 |     "promise": {
 75 |       "version": "7.3.1",
 76 |       "resolved": "https://registry.npmjs.org/promise/-/promise-7.3.1.tgz",
 77 |       "integrity": "sha512-nolQXZ/4L+bP/UGlkfaIujX9BKxGwmQ9OT4mOt5yvy8iK1h3wqTEJCijzGANTCCl9nWjY41juyAn2K3Q1hLLTg=="
 78 |     },
 79 |     "prop-types": {
 80 |       "version": "15.5.10",
 81 |       "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.5.10.tgz",
 82 |       "integrity": "sha1-J5ffwxJhguOpXj37suiT3ddFYVQ="
 83 |     },
 84 |     "react-transition-group": {
 85 |       "version": "2.2.0",
 86 |       "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-2.2.0.tgz",
 87 |       "integrity": "sha1-eTv4yxW/6RsxAbJLzhwdKJFllXU="
 88 |     },
 89 |     "setimmediate": {
 90 |       "version": "1.0.5",
 91 |       "resolved": "https://registry.npmjs.org/setimmediate/-/setimmediate-1.0.5.tgz",
 92 |       "integrity": "sha1-KQy7Iy4waULX1+qbg3Mqt4VvgoU="
 93 |     },
 94 |     "ua-parser-js": {
 95 |       "version": "0.7.14",
 96 |       "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.14.tgz",
 97 |       "integrity": "sha1-EQ1T+kw/MmwSEpK76skE0uAzh8o="
 98 |     },
 99 |     "warning": {
100 |       "version": "3.0.0",
101 |       "resolved": "https://registry.npmjs.org/warning/-/warning-3.0.0.tgz",
102 |       "integrity": "sha1-MuU3fLVy3kqwR1O9+IIcAe1gW3w="
103 |     },
104 |     "whatwg-fetch": {
105 |       "version": "2.0.3",
106 |       "resolved": "https://registry.npmjs.org/whatwg-fetch/-/whatwg-fetch-2.0.3.tgz",
107 |       "integrity": "sha1-nITsLc9oGH/wC8ZOEnS0QhduHIQ="
108 |     }
109 |   }
110 | }
111 | 


--------------------------------------------------------------------------------
/fonts/PureHeartSVG-Regular.otf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wesbos/future-js/2722bdd2ad50361a529718b87f2c97aff595a447/fonts/PureHeartSVG-Regular.otf


--------------------------------------------------------------------------------
/fonts/bavro-regular-webfont.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wesbos/future-js/2722bdd2ad50361a529718b87f2c97aff595a447/fonts/bavro-regular-webfont.eot


--------------------------------------------------------------------------------
/fonts/bavro-regular-webfont.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wesbos/future-js/2722bdd2ad50361a529718b87f2c97aff595a447/fonts/bavro-regular-webfont.ttf


--------------------------------------------------------------------------------
/fonts/bavro-regular-webfont.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wesbos/future-js/2722bdd2ad50361a529718b87f2c97aff595a447/fonts/bavro-regular-webfont.woff


--------------------------------------------------------------------------------
/fonts/bavro-regular-webfont.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wesbos/future-js/2722bdd2ad50361a529718b87f2c97aff595a447/fonts/bavro-regular-webfont.woff2


--------------------------------------------------------------------------------
/gulpfile.js:
--------------------------------------------------------------------------------
 1 | var gulp = require('gulp');
 2 | var p = require('gulp-load-plugins')();
 3 | 
 4 | var browserSync = require('browser-sync');
 5 | var reload = browserSync.reload;
 6 | 
 7 | // Start the server
 8 | gulp.task('browser-sync', function() {
 9 |     browserSync({
10 |         open : true,
11 |         server: {
12 |             baseDir: "./"
13 |         }
14 |     });
15 | });
16 | 
17 | gulp.task('slides',function () {
18 |   gulp.src('index.jade')
19 |     .pipe(p.plumber())
20 |     .pipe(p.jade())
21 |     .pipe(gulp.dest('./'))
22 |     .pipe(reload({stream:true}))
23 | });
24 | 
25 | 
26 | gulp.task('styles',function() {
27 |   gulp.src('./styles.styl')
28 |     .pipe(p.stylus())
29 |     .pipe(p.autoprefixer())
30 |     .pipe(gulp.dest('./'))
31 |     .pipe(reload({stream:true}))
32 | });
33 | 
34 | 
35 | gulp.task('default', ['slides','styles','browser-sync'] ,function() {
36 |   gulp.watch('./**/*.jade',['slides']);
37 |   gulp.watch('./**/*.styl',['styles']);
38 | });
39 | 


--------------------------------------------------------------------------------
/image-downloader.js:
--------------------------------------------------------------------------------
 1 | let fs = require('fs'),
 2 |   request = require('request');
 3 | 
 4 | let download = function(callback) {
 5 |   const uri = images.pop(); // take the last one off
 6 |   request.head(uri, (err, res, body) => {
 7 |     const extension = res.headers['content-type'].split('/').pop();
 8 |     const fileName = `${uri.split('/')[3]}.${extension}`;
 9 |     console.log("downloading...", fileName);
10 |     request(uri).pipe(fs.createWriteStream('images/screenshots/' + fileName)).on('close', callback);
11 |   });
12 | };
13 | 
14 | var images = [
15 |   'http://wes.io/mw8s/content',
16 |   'http://wes.io/mvNc/content',
17 |   'http://wes.io/mvvk/content',
18 |   'http://wes.io/mvlO/content',
19 |   'http://wes.io/mw1Y/content',
20 |   'http://wes.io/mvjp/content',
21 |   'http://wes.io/mul6/content',
22 |   'http://wes.io/mul6/content',
23 |   'http://wes.io/mv6R/content',
24 |   'http://wes.io/mufS/content',
25 |   'http://wes.io/mw88/content',
26 |   'http://wes.io/mvxm/content',
27 |   'http://wes.io/mvLf/content',
28 |   'http://wes.io/mvHv/content',
29 |   'http://wes.io/mvPr/content',
30 |   'http://wes.io/muk4/content',
31 |   'http://wes.io/mupq/content',
32 |   'http://wes.io/mvSI/content',
33 |   'http://wes.io/mvbJ/content',
34 |   'http://wes.io/mvMC/content',
35 |   'http://wes.io/mvMC/content',
36 |   'http://wes.io/mw55/content',
37 |   'http://wes.io/mv93/content',
38 |   'http://wes.io/musk/content',
39 |   'http://wes.io/mvNd/content',
40 |   'http://wes.io/mvjO/content',
41 | ];
42 | 
43 | function start() {
44 |   console.log('done');
45 |   if (images.length) {
46 |     download(start);
47 |   }
48 | }
49 | 
50 | download(start);
51 | 


--------------------------------------------------------------------------------
/images/1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wesbos/future-js/2722bdd2ad50361a529718b87f2c97aff595a447/images/1.jpg


--------------------------------------------------------------------------------
/images/10.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wesbos/future-js/2722bdd2ad50361a529718b87f2c97aff595a447/images/10.jpg


--------------------------------------------------------------------------------
/images/11.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wesbos/future-js/2722bdd2ad50361a529718b87f2c97aff595a447/images/11.jpg


--------------------------------------------------------------------------------
/images/12.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wesbos/future-js/2722bdd2ad50361a529718b87f2c97aff595a447/images/12.jpg


--------------------------------------------------------------------------------
/images/13.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wesbos/future-js/2722bdd2ad50361a529718b87f2c97aff595a447/images/13.jpg


--------------------------------------------------------------------------------
/images/14.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wesbos/future-js/2722bdd2ad50361a529718b87f2c97aff595a447/images/14.jpg


--------------------------------------------------------------------------------
/images/15.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wesbos/future-js/2722bdd2ad50361a529718b87f2c97aff595a447/images/15.jpg


--------------------------------------------------------------------------------
/images/16.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wesbos/future-js/2722bdd2ad50361a529718b87f2c97aff595a447/images/16.jpg


--------------------------------------------------------------------------------
/images/17.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wesbos/future-js/2722bdd2ad50361a529718b87f2c97aff595a447/images/17.jpg


--------------------------------------------------------------------------------
/images/18.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wesbos/future-js/2722bdd2ad50361a529718b87f2c97aff595a447/images/18.jpg


--------------------------------------------------------------------------------
/images/19.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wesbos/future-js/2722bdd2ad50361a529718b87f2c97aff595a447/images/19.jpg


--------------------------------------------------------------------------------
/images/2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wesbos/future-js/2722bdd2ad50361a529718b87f2c97aff595a447/images/2.jpg


--------------------------------------------------------------------------------
/images/20.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wesbos/future-js/2722bdd2ad50361a529718b87f2c97aff595a447/images/20.jpg


--------------------------------------------------------------------------------
/images/21.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wesbos/future-js/2722bdd2ad50361a529718b87f2c97aff595a447/images/21.jpg


--------------------------------------------------------------------------------
/images/22.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wesbos/future-js/2722bdd2ad50361a529718b87f2c97aff595a447/images/22.jpg


--------------------------------------------------------------------------------
/images/23.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wesbos/future-js/2722bdd2ad50361a529718b87f2c97aff595a447/images/23.jpg


--------------------------------------------------------------------------------
/images/24.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wesbos/future-js/2722bdd2ad50361a529718b87f2c97aff595a447/images/24.jpg


--------------------------------------------------------------------------------
/images/25.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wesbos/future-js/2722bdd2ad50361a529718b87f2c97aff595a447/images/25.jpg


--------------------------------------------------------------------------------
/images/26.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wesbos/future-js/2722bdd2ad50361a529718b87f2c97aff595a447/images/26.jpg


--------------------------------------------------------------------------------
/images/27.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wesbos/future-js/2722bdd2ad50361a529718b87f2c97aff595a447/images/27.jpg


--------------------------------------------------------------------------------
/images/28.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wesbos/future-js/2722bdd2ad50361a529718b87f2c97aff595a447/images/28.jpg


--------------------------------------------------------------------------------
/images/29.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wesbos/future-js/2722bdd2ad50361a529718b87f2c97aff595a447/images/29.jpg


--------------------------------------------------------------------------------
/images/3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wesbos/future-js/2722bdd2ad50361a529718b87f2c97aff595a447/images/3.jpg


--------------------------------------------------------------------------------
/images/30.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wesbos/future-js/2722bdd2ad50361a529718b87f2c97aff595a447/images/30.jpg


--------------------------------------------------------------------------------
/images/31.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wesbos/future-js/2722bdd2ad50361a529718b87f2c97aff595a447/images/31.jpg


--------------------------------------------------------------------------------
/images/4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wesbos/future-js/2722bdd2ad50361a529718b87f2c97aff595a447/images/4.jpg


--------------------------------------------------------------------------------
/images/5.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wesbos/future-js/2722bdd2ad50361a529718b87f2c97aff595a447/images/5.jpg


--------------------------------------------------------------------------------
/images/6.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wesbos/future-js/2722bdd2ad50361a529718b87f2c97aff595a447/images/6.jpg


--------------------------------------------------------------------------------
/images/7.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wesbos/future-js/2722bdd2ad50361a529718b87f2c97aff595a447/images/7.jpg


--------------------------------------------------------------------------------
/images/8.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wesbos/future-js/2722bdd2ad50361a529718b87f2c97aff595a447/images/8.jpg


--------------------------------------------------------------------------------
/images/9.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wesbos/future-js/2722bdd2ad50361a529718b87f2c97aff595a447/images/9.jpg


--------------------------------------------------------------------------------
/images/Twitter_logo_white.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wesbos/future-js/2722bdd2ad50361a529718b87f2c97aff595a447/images/Twitter_logo_white.png


--------------------------------------------------------------------------------
/images/applepay.mp4:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wesbos/future-js/2722bdd2ad50361a529718b87f2c97aff595a447/images/applepay.mp4


--------------------------------------------------------------------------------
/images/babel.svg:
--------------------------------------------------------------------------------
  1 | <?xml version="1.0" encoding="utf-8"?>
  2 | <!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
  3 | <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
  4 | <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
  5 | 	 viewBox="0 294.3 612 235.9" enable-background="new 0 294.3 612 235.9" xml:space="preserve">
  6 | <path d="M543.2,301.3c-1.6,7.3-4.2,12.7-7.7,16.3L533,316c2.7-6.9,4-10.9,3.9-11.9l-0.7-1.1c-0.9,0.1-2.1,2.5-3.6,7.3l-1.3,0.1
  7 | 	c-0.1-0.9-0.3-1.6-0.7-2.3l-0.6,0.1c-11.8,32.9-17.1,48.2-28,73.5c-2,6.5-3.7,10.1-5.2,10.8c0.1,0.7,0.5,1.1,1.3,1
  8 | 	c0.3,3.2-0.5,6.3-2.2,9.4c-5.1,14.5-8.4,22.5-10.1,23.9l1.1,6.9c0.1,0.7-0.3,1.2-1.1,1.2l-1.2,0.1c-0.2-1.9-0.9-2.8-2.1-2.7
  9 | 	l-0.6,0.1c-1.5,2.4-2.7,5.2-3.5,8.4l1.2-0.1c1.6-1,2.3-2.2,2.2-3.7l2.4-0.2l1.3,0.5c-1.1,1.7-1.6,3.1-1.5,4.1l0.6,1.1l-1.5,3.6
 10 | 	l0.1,0.6c1.4-0.1,2.9,0.3,4.5,1.3c1.1-0.1,2.3-0.6,3.6-1.4c1.4-0.1,6.4-0.2,15.2-0.2l4.4-1.5c5.4-0.1,6.2,0.1,10.9-0.3l1.9-0.2
 11 | 	l1-0.7l0.1,0.6c4.8-0.4,5.2-0.1,9,0.4l0.1,0.6l-2.7,0.2l0.1,1.1c0.8-0.1,1.5-0.3,2.1-0.8c0.7-0.1,1.1,0.3,1.2,1.1
 12 | 	c-1.1,0.1-2.3,0.4-3.7,0.8l-1.2-0.4c-1.9,0.5-1.5,0.6-2.7,0.7l-1.9-0.4c0,0.3-0.1,0.5-0.4,0.6c0.1,0.7,0.4,1.1,1.1,1l2.3-0.2l-1-0.4
 13 | 	c0,0.3,0.2,0.5,0.6,0.5l9.9-0.9l3.8-0.8c0,0.3,0.2,0.5,0.5,0.5l1.8-0.7l3.4-0.3c2.7-0.2,2.6-0.4,8.3-1.3c0-0.3,0.1-0.5,0.4-0.5
 14 | 	l0,0.5c10.9-1.8,9.9-1.7,12.2-2.5l-0.5-1.2c-3.1,0.7-3,0.3-4.6,0.5l-8.3,0.4l-0.1-0.6l4.6-0.6l1.7-0.1l0.9-0.7l0.1,0.6
 15 | 	c6.5-0.6,8.8,1.1,39.1-5.3c1.6-0.1,1.5-1.5,2.5-4.3c-0.6,0-1.1-0.1-1.6-0.4c-2.5,1-3.8,0.5-8.6,1.3c-0.4,0-0.7-0.3-0.9-1.1l0-0.5
 16 | 	l4.6,0.2c0.8-0.1,2.6-0.2,5-1.6c0.5,0.3-0.4,0.6,0.1,0.5l0.8-0.1c0.5,0,0.7-0.4,0.7-1.2l-0.5-1.1c-3.1,0.3-4.6,0.4-7.1,1.8l-0.1-0.6
 17 | 	l-3.8,0.4c-0.1-1.2-0.4-1.7-0.9-1.7l-2,0.2c-2.3,0.2-3.4,0.1-4.5,1c0-0.4-0.2-0.6-0.4-0.6l-2.2,0.2l-1.3,0.7c0-0.4-0.2-0.6-0.4-0.6
 18 | 	l-0.8,0.7l-0.1-0.6l-3-0.2l-0.7,0.1l0.1,1.1l1.6,0.4l1.4-0.1c0.5,0.3,1.1,0.4,1.7,0.4l1.3-0.6l0,0.5c-7.1,1.8-7.1,1.4-12,2.3
 19 | 	c-0.6-0.4-1-0.5-1.2-0.5c-0.5,0.5,0.6,0.1,0.3,0.1c-0.8,0.1-1.2-0.3-1.3-1l2.5-0.3c0.2,0,0.3,0.2,1.7,0.5c2-1,2.1-1.4,3.2-1.5
 20 | 	l-0.1-1.1c-7,1.4-4.2,0.5-13,1.2l-0.4,0l-0.1-1.1c11.3-1.4,7.5-0.6,11.3-1.7c0,0.4,0.2,0.6,0.4,0.6c0.4-0.4,1-0.7,1.6-0.7l0.8-0.1
 21 | 	c3.9-0.3,5.3,0.5,13.1-1.7l0,0.5l1.3-0.6l1.2-0.1c-0.1-1.2,1.7-1.3,2.2-1.4l-0.1-1.2c-13.7,2.8-17.3,2-21.1,3.1l0-0.5
 22 | 	c-3.6,0.7-3.7,0.3-4.6,0.4c-0.3,0-0.7,0.3-1.1,0.7c0-0.4-0.2-0.6-0.5-0.6c-0.6,0-0.3,0.2-0.8,0.7l0.8-0.7l-11.9,1.9
 23 | 	c0-0.3-0.2-0.5-0.5-0.5c-6,1.3-4.4,1.5-12.5,2.2c-0.4,0-0.9,0.2-1.5,0.6c0-0.3-0.2-0.5-0.6-0.5l-5,0.4l-3.3,0.8
 24 | 	c0-0.3-0.2-0.5-0.6-0.5c-1.9,0.5-3.5,0.8-4.8,0.9l-0.1,0c-0.8,0.1,0.4-0.2-0.2-0.5l-1,0.6c-1.5,0.1-0.7-0.1-5.7,0
 25 | 	c-8.8,1.1-7.8,1.2-8.8,1.3l-3.3-0.2c0,0.3-0.1,0.5-0.5,0.6c-3.7-0.5-5.6-1.1-5.7-1.8c0.5-3.5,1.3-5.3,2.6-5.5l0.6-0.1l-0.6,1.2
 26 | 	l0.6-0.1c1.2-0.6,1.7-1.2,1.7-1.8l-0.1-1.2l-1.2,0.1l-0.1-1.1c-0.1-0.9,0-1.6,0.3-2.3l2.7-4.3l0.1,1.1l1.3-0.1l-0.1-1.1l-0.7-1.1
 27 | 	c0.9-0.8,1.7-1.3,2.3-1.3l-0.1-0.6l-1.7,0.1l-0.1-1.7c3.4-7.2,5.1-11.4,5-12.5l1.2,0.5c0.8-0.1,1.2-0.5,1.1-1.3l-1.2,0.1l0-0.5
 28 | 	c-0.1-0.9,0.1-1.7,0.4-2.4c1.9-1.9,2.7-3.9,2.5-6c0.4,0,0.6,0.2,0.6,0.6c1.6-0.9,2.8-3.3,3.7-7.3c2.8-5.1,6.8-15.3,12-30.5
 29 | 	c10-26.9,9.6-29.8,11-36.1l-1.2,0.1c0.1,0.8-0.1,1.6-0.5,2.3c-0.8-0.3-1.5-0.5-1.9-0.5l0-0.5c-0.2-2.3,0.8-5.1,3-8.4l0.5,0l1,3.9
 30 | 	l1.2-0.1c0-0.3,0.3-1.8,0.9-4.7c-0.1-0.6-0.5-0.9-1.4-1l-1.1,0.7c-0.1-0.8,0-2.9,0.1-6.4L543.2,301.3z M528.8,318.6l0.6-0.1
 31 | 	c-0.9,1.6-1.6,2.5-2.3,2.6l-0.1-1.7C527.5,319.3,528.1,319.1,528.8,318.6L528.8,318.6z M523.8,330.6c1.2-4.9,2.4-7.7,3.5-8.4
 32 | 	l0.1,0.6c-0.6,4.6-1.6,6.9-3,7.1l0.2,2.9c-1.1,1.5-1.6,2.7-1.5,3.6l-0.6,0.1l-0.3-4C522.8,332.4,523.4,331.8,523.8,330.6
 33 | 	L523.8,330.6z M521.9,337.1c0.1,0.7-0.4,2.3-1.3,4.7l-0.6,0.1l-0.1-1.7C520.6,338.2,521.3,337.2,521.9,337.1L521.9,337.1z
 34 | 	 M489,409.8l0.6,1.1c0.9-0.1,1.3-0.5,1.2-1.2l-0.1-0.6l-0.6,0.1L489,409.8z M504.8,422.9l0,0.5c0.9-0.1,1.8-1.7,2.6-4.8l-1.2-0.4
 35 | 	C505.2,420.9,504.8,422.4,504.8,422.9L504.8,422.9z M606,426.4l0,0.5l-1,1.2l1.9-0.7l0.2,0l-0.1-1.1l-0.4,0l-0.7,0.6
 36 | 	c0-0.3,2.1-0.9,0.5-1.2C606.1,426.2,606.9,426.3,606,426.4L606,426.4z M609.9,430l2.7-0.2c-0.1-0.7-1.8-0.9-2.4-0.9l-0.4,0
 37 | 	L609.9,430z M562.1,431l0.8,1c0-0.3,0.1-0.5,0.4-0.5l0.6,1.1l-2.5-0.3C561.2,431.5,561.5,431.1,562.1,431L562.1,431z M553.9,431.9
 38 | 	c0.9-0.1,1.5,0.5,1.5,1.3l-2.8,0l0-0.5C552.9,432.6,553.4,432.4,553.9,431.9L553.9,431.9z M560.3,431.6l0.1,0.6l-2.3,0.2l-0.1-0.6
 39 | 	L560.3,431.6z M537.1,434c0,0.3,0.2,0.5,0.6,0.5c3.7-0.7,3.3-0.8,5.1-1c0.6-0.1,0.9,0.3,1,1l-10.3,0.9l1,0.5l-0.1-0.6l-3.9,0.3
 40 | 	l-0.1-0.6l3.5-0.3L537.1,434z M547.7,433.1l0,0.5c-0.3,0,1,0.1,0.4,0.6c-2.2-0.2-2.3-0.4-3.9-0.3l0-0.5L547.7,433.1z M550.3,432.8
 41 | 	l0,0.5l-1.9,0.2l0-0.5L550.3,432.8z M486.3,443l0.1,1.7c-0.6,0.1-1.1-0.3-1.3-1.1l0-0.5L486.3,443z M571.9,441.5l0.1,1.1l2-0.2
 42 | 	l-0.8-0.5l0.1,0.6l2-0.8c13.7-1.5,15.3-0.9,15.1-2.5l0-0.5C576.6,441.8,574.8,441.2,571.9,441.5L571.9,441.5z M593.3,439.6l2,0.4
 43 | 	l-0.1-1.1l-2-0.4L593.3,439.6z M534.1,443.5c0.6,0.3-0.7,0.6,0.1,0.5l7-0.6l0.1,0.6c-2,0.2-3.3,0.5-3.7,0.9c0-0.4-0.2-0.6-0.6-0.6
 44 | 	l-3,0.3l-0.1-0.6C534.7,443.9,533.5,443.9,534.1,443.5L534.1,443.5z M566.5,442.7l0.6,1.1c2.3-0.5,1-0.4,1.6-0.9
 45 | 	c0,0.4,0.2,0.6,0.4,0.6l1.6-0.1l-0.1-1.2l-4.2-0.1L566.5,442.7z M526.9,447l-0.4,0l-0.1-1.1l0.4,0L526.9,447z M495.6,450.8l0.1,0.6
 46 | 	l18.4-1.5l-0.1-1.1l-14.7,1.2l-3.1-0.4L495.6,450.8z M516.1,449.7l0.2,0l-0.1-1.1l-0.2,0L516.1,449.7z"/>
 47 | <path d="M236.1,353.1c-13,15.5-19.7,24-20.2,25.7c-5.3,5.5-7.9,8.8-7.6,9.9c-1.4,0.9-2,1.8-1.8,2.8c-0.4,0.1-0.7-0.1-0.8-0.5
 48 | 	c-2.3,3.7-5.6,6-10.1,7.1l-4.7,1.1c-0.6,0.1-0.9,0.6-0.9,1.4l0.1,0.6l1.8-0.4l0.1,0.5l-4,1.5l-7.1,1.6l-3.7,0.2
 49 | 	c-0.5,0.5,2.9-0.1,1.6,0.3l-4.6,1.1c-2.8,0.7-4.4,0.4-4.6-0.7l-0.5,0.1c0.3,1.1,0,1.8-0.8,2l0.9-0.2l-0.4-1.7l-8.4,2l0.9,0.4
 50 | 	c-0.1-0.4-0.5-0.5-1.3-0.3l-1.1,0.9l-1.3-0.3c-1.2,0.7-2,1.1-2.2,1.1l-1.3-0.3c-3.5,2-0.9,2-1.1,2l0.3,1.1l2-0.5l3.1-0.2l-0.3,1.3
 51 | 	c-11.4,3-3.1,1.3-6.2,2l-0.6,0.1l0.3,1.1l1.8-0.4l0.1,0.6c-2.3,0.5-3.6,1-4,1.5l-0.1-0.6c-3,0.7-6,3-9,6.8c0.5,2.2-6,4.9,24.6-2.2
 52 | 	c2.1-0.1,3.3-0.1,3.6-0.2c-0.1-0.4,0.1-0.6,0.5-0.7c3.4-0.4,1.8,0.2,3.9-0.3l6.6-1.5l-1.4,0.8c-0.1-0.3,0.1-0.5,0.4-0.6
 53 | 	c0.8,0.2,1.6,0.1,2.5-0.1l0.4,1.7l-26.1,41.4l-5.8,7.2l-2.8,9.5l0.5-0.1l2.8-1.2l-0.9,3.7l0.3,1.1l0.8,1c-0.4,0.1-0.5,0.3-0.4,0.7
 54 | 	l0.1,0.6l1.2-0.3c1.7-1.5,2.4-2.9,2.2-4.1c1.9,0.3,3.1,0.4,3.7,0.3l0.1,0.6c-1.1,0.3-1.7,1.2-1.8,2.7l0.1,0.6l0.6-0.1
 55 | 	c9.5-10.3,32.6-45.6,51.2-69.6c-0.6-2.6,9.1-6.2,29.1-10.8l0.6-0.1c0.7,3.1-0.8,10.7-4.6,22.8c-2.5,7.3-3.6,11.3-3.5,11.9
 56 | 	c-3.2,9.7-4.7,14.9-4.5,15.7l-7.1,23.2c-4.6,11.9-8.1,24.4-10.5,37.6c0.4-0.1,1.1,0,1.9,0.2l1-0.9c0.1,0.4,0.3,0.5,0.8,0.5l-0.4-1.7
 57 | 	l3.1-0.1c0.9-0.2,1.7-1.4,2.3-3.5c-0.1-3.1,0.5-4.8,1.9-5.2c1.9-7.4,3.1-11.2,3.5-11.3c1.8-7.4,3.1-11.6,4-12.7
 58 | 	c2.7-9.6,4.6-14.6,5.9-14.9l0.3,1.2l-1.9,5.1c-3.4,15.1-6.9,27.1-10.4,35.9l1,4.4l0.6-0.1c8.5-18.2,20.6-54.2,36.5-108
 59 | 	c0.5-4.7,2.7-8.4,6.8-11l-0.9-0.9l-0.1-0.5c1.8-0.4,3.1-1.1,3.8-2.1c-0.1-0.4-1.7-1-4.8-1.8l9.4-40.2c2.8-12,4.7-22.5,5.7-31.7
 60 | 	l-0.1-0.6c-1.9-1.2-3.8-2.9-5.5-5.1c0-1.4,0-2.2,0-2.4l-0.1-0.5l-0.5,0.1C264.8,316,253.2,331.3,236.1,353.1L236.1,353.1z
 61 | 	 M249.4,362.2c0.5,2.1-0.3,6-2.3,11.7c-0.6,7.2-3.2,11.3-7.7,12.4l-0.1-0.6l-4,1.5l-1.8,0.4c-0.9,0.2-1.7,0.2-2.5-0.1l-0.4-1.6
 62 | 	c-0.1-0.6,5.6-8.6,17.4-23.9L249.4,362.2z M240.2,387.2l1.3-0.3l0.3,1.1c-6.3,1.9-9.8,2.9-10.5,3.1c-0.4,0.1-1,0.4-1.7,1
 63 | 	c-0.1-0.4-0.9-0.4-2.5-0.1C226.8,390.9,231.2,389.3,240.2,387.2L240.2,387.2z M178.1,404l1.4-0.3l-0.3-1.2l-1.4,0.3L178.1,404z
 64 | 	 M196.4,399.2l0.3,1.1l-3,0.2l-0.1-0.6L196.4,399.2z M161.4,410.7l0.1,0.6l-1.9,0.4l-0.1-0.6L161.4,410.7z M157.9,418l0.1,0.5
 65 | 	l-2.3,0.5l-0.3-1.1L157.9,418z M163.4,416.8l0.1,0.5l-4.2,1l-0.1-0.5L163.4,416.8z M170.7,415.6l0.1,0.6l-11,2.5l-0.3-1.1
 66 | 	C165.9,416.5,165.2,416.9,170.7,415.6L170.7,415.6z M225.8,402.8l0.9,1c-1.3,0.3-2.3,0.7-2.8,1.2l-1.3-0.2c-2,0.8-3.8,1.4-5.2,1.7
 67 | 	l-1.2,0.3c-0.7,0.2-1.2-0.1-1.5-0.8l8.3-1.9L225.8,402.8z M231.7,401.5l5.9-1.4l0.1,0.6c-3.2,0.7-5.7,1.5-7.5,2.4l-0.1-0.6
 68 | 	C230.6,402.4,231.1,402,231.7,401.5L231.7,401.5z M169.7,418.3l2.8-0.6l0.3,1.1c-1.2,0.3-0.3,0.3-1.8,1c-2.9,0.3-2.3-0.1-6.9,1
 69 | 	l-0.1-0.6L169.7,418.3z M177.3,417c0.8-0.2,1.3,0.1,1.4,0.9l-1.7,0.4c-0.7,0.2-1.2-0.1-1.5-0.9L177.3,417z M146,480.2l0.1,0.6
 70 | 	c0.8-0.2,1.1-0.6,0.9-1.4l-0.1-0.6C146.2,479,145.9,479.4,146,480.2L146,480.2z M148.4,490.2c0.2,0.7,0.6,1,1.4,0.8
 71 | 	c0.8-0.2,1.1-0.6,0.9-1.4l-0.1-0.6l-1.2,0.3L148.4,490.2z M212.2,507.4c0.8-0.2,1.2,0.1,1.4,0.8l0.1,0.6l-2.3,0.5
 72 | 	c0.2-0.8,0.2-1.4,0.1-1.8L212.2,507.4z"/>
 73 | <path d="M304.8,322.4c-5.2,3.7-11.1,7.5-17.7,11.2l0.1,1.1c0.4,0,1-0.3,1.8-0.8c0.8-0.1,1.2,0.3,1.3,1l1.1-0.6l0.5,0l0,0.5
 74 | 	c0.1,0.6-4.1,3.8-12.3,9.6l0.6,1.2l-0.5,0l-1.3-0.5c0,0.4-0.5,0.7-1.7,0.8l0,0.5l1.3,1.6c-0.4,0-1.1-0.1-1.9-0.5
 75 | 	c-2.7,0.2-5.3,2.2-7.9,5.8l0.6,1.1c2.3-2.1,3.6-3.2,4-3.2l0.1,1.7c-0.4,0-1,0.3-1.8,0.8l1.5,2.1c2.7-3,5.7-5.5,8.9-7.6
 76 | 	c1.6,0.5,2.5,1,2.5,1.5l1.2-0.1c9-6.6,17.8-11.3,26.5-14.2l0.1,1.1c-1.6,2.4-2.7,3.6-3.3,3.7c0.1,0.8,0.3,1.5,0.7,2.2
 77 | 	c0.1,1.5-3.8,11.5-11.8,30c-18.3,42.9-33.6,74.7-46,95.3c0,0.4,0.3,1,0.8,1.7c3.1-0.7,5-1.5,5.8-2.2l0.5,0l0.1,1.1l1.3-0.1l1.1-0.6
 78 | 	c0,0.3,0.4,0.5,1.2,0.4l0.1,1.2c0.1,1.1-0.6,2.8-1.9,5.2c-1.3,1.4-2.7,4.4-4.1,8.9l0.1,0.6l1.2-0.1c5-5.6,8.7-11,11.3-16.4
 79 | 	c14.5-4.3,25.5-8.4,33.2-12.5c7.8-0.7,13.6-2.7,17.6-6l-0.1-0.6l-3,0.9l-0.6,0.1l-0.1-0.6c5.7-0.8,9.6-2.1,11.7-3.8
 80 | 	c11-8.5,19.3-14.5,25-18c17.4-12.8,25.6-25,24.6-36.8c-0.1-1.2-3.9-6-11.5-14.4c-0.1-1.6,2.5-3.9,7.8-6.9l15.2-13.2
 81 | 	c3.4-4.3,5.4-11.3,6-21l-0.2-2.2c-0.6-6.7-5.5-12.1-14.7-16.3c-5.5-3.7-15.3-5.7-29.4-6.1C339,310.8,323.7,315,304.8,322.4
 82 | 	L304.8,322.4z M386.2,323.2l-0.6,1.2l-16.8-7.1C380.1,317.8,385.9,319.7,386.2,323.2L386.2,323.2z M318,370
 83 | 	c1.2-6.3,2.5-9.8,3.9-10.6l12.7-28.4c-0.1-1.7,2.5-3.1,8-4.1l1.8-0.2l0.1,1.7c5.4-0.9,8.7-1.4,10.1-1.5c10-0.9,15.2,1.2,15.6,6
 84 | 	l1.2-0.1l-0.2-2.7l1.2-0.1c2.9,1.6,4.4,3.5,4.6,5.8c0.1,1.6-0.7,3.6-2.4,6c-0.8,0.1-1.2-0.5-1.3-1.6l-1.2,0.1l-0.4,3.4
 85 | 	c-5.1,7.7-8.7,11.6-11,11.8c-2,2.8-3.3,4.2-3.9,4.2c-1.6,1.9-5.9,5.2-13,9.7c-2.4,0.2-11.1,3.6-26.2,10.2c-0.7-0.3-1.6-0.4-2.4-0.3
 86 | 	l-0.1-1.1C314.9,376.1,315.9,373.4,318,370L318,370z M387.8,335l0.1,1.2c-0.6,0-1.7-1.8-3.5-5.4l-0.1-1.1
 87 | 	C385.4,329.6,386.6,331.4,387.8,335L387.8,335z M277,348.6l0.1,0.6c-0.4,0-1,0.3-1.8,0.7l-0.5,0l-0.1-1.1L277,348.6z M313.7,347.7
 88 | 	l0.1,1.7c-0.6,0-1.3,0.9-2.2,2.4l-0.1-1.1c1-1.3,1.5-2.3,1.5-3L313.7,347.7z M308,359.5l0.2,2.2l-0.6,0.1l-0.2-2.2L308,359.5z
 89 | 	 M306.6,363.6c-0.1,1.9-0.6,2.9-1.5,3l-0.6,0.1c0.7-1.3,1-2.3,0.9-3L306.6,363.6z M304,369.5l0.1,0.6l-1,1.8l-1.2,0.1l-0.1-0.6
 90 | 	c1.2-0.1,1.8-0.7,1.7-1.9L304,369.5z M301.5,374.8l-0.4,2.9l-0.5,0l-0.2-2.9L301.5,374.8z M363.1,376.9l2.5,1.5
 91 | 	c0.1,0.7-0.3,1.2-1.1,1.2c-1.1-0.7-1.9-1-2.5-0.9L362,377L363.1,376.9z M314.9,383.3l0.1,1.1l-2.4,0.2l-0.1-1.1L314.9,383.3z
 92 | 	 M353.8,387.4c1.7,0.8,2.5,1.5,2.6,2.1l0,0.5c-1.6,0.1-3.1-0.7-4.5-2.5L353.8,387.4z M303.7,399.7c6.8-0.6,17.5-3.8,32.2-9.6
 93 | 	l3.7-0.3c7.4-0.6,12.9,0.8,16.6,4.3l0.2,2.2c-2.7,7.8-5.7,12.4-9,13.8l-15.1,12.2c-11.3,7.4-17.4,11.1-18.4,11.2
 94 | 	c-18,9.9-29.2,15-33.6,15.4l-0.6,0.1C280.1,446.9,288.1,430.5,303.7,399.7L303.7,399.7z M320,393.2l0.1,0.6l-2.4,0.2l-0.1-0.6
 95 | 	L320,393.2z M374.5,390.7l0.4,4.6c-0.6,1.1-1.1,1.7-1.7,1.8l-0.7-7.8C373.8,389.7,374.5,390.2,374.5,390.7L374.5,390.7z
 96 | 	 M282.2,429.9c-0.8,3.8-1.6,5.8-2.4,5.8l0-0.5C279.5,433.4,280.3,431.6,282.2,429.9L282.2,429.9z M297.3,451.3
 97 | 	c4.4-0.8,16.5-7.1,36.3-19l0.1,1.1c0,0.5-1.6,2-5.1,4.4c-10,5-16,8.3-17.8,10c-10.9,3.8-16.3,6.2-16.2,7.1c-9.7,3.8-16,6.6-19.1,8.4
 98 | 	c-0.7,0.1-1.8-0.2-3.1-0.9c-0.2-2,0.7-3.5,2.6-4.7c1.7-0.1,3.3,0.1,4.8,0.7c1.8-0.9,4.9-1.9,9.4-3.1l-0.1-1.1l-3.7,0.3
 99 | 	c0.4-0.7,3.9-2.3,10.4-4.9l1.8-0.2l0,0.5c-3.1,0.3-4.8,1.2-5.2,2.8c0.1,0.7,0.5,1.1,1.3,1C296.2,452.5,297.3,451.6,297.3,451.3
100 | 	L297.3,451.3z M278.6,437.6l0,0.5c0.1,0.8-0.3,1.3-1.1,1.3l-0.1-0.6C277.4,438.3,277.8,437.8,278.6,437.6L278.6,437.6z M307,445.4
101 | 	c-1.4,0.1-4.1,1.3-8.1,3.5l-0.6,0.1l-0.1-1.1c2.9-0.3,5.5-1.4,7.5-3.4C306.5,444.4,306.9,444.7,307,445.4L307,445.4z M277.6,453.6
102 | 	l1.8-0.2l0.1,0.6c-0.4,0-1,0.3-1.8,0.7l-1.2,0.1C276.4,454.2,276.8,453.8,277.6,453.6L277.6,453.6z M265.5,460.3l1.2,0.5
103 | 	c-0.4,3.5-1.5,5.3-3.1,5.4c-1.4-0.6-2.6-0.9-3.7-0.8l-0.1-1.7c-0.1-0.6,0.3-1,1.1-1.2c0.8-0.1,1.2,0.5,1.3,1.6
104 | 	C264.2,461.6,265.3,460.3,265.5,460.3L265.5,460.3z"/>
105 | <path d="M69.4,317.4c-6.8,5-14.6,9.9-23.3,14.7l0.1,1.5c0.6,0,1.3-0.4,2.3-0.9c1-0.1,1.6,0.3,1.6,1.3l1.6-0.9l0.8-0.1l0.1,0.7
106 | 	c0.1,0.7-5.4,5-16.3,12.7l0.9,1.4l-0.8,0.1l-1.7-0.6c0,0.5-0.7,0.8-2.3,0.9l0.1,0.8l1.8,2c-0.6,0-1.4-0.1-2.4-0.5
107 | 	c-3.5,0.3-7,2.9-10.4,7.7l0.9,1.4c3-2.7,4.7-4.1,5.2-4.1l0.2,2.2c-0.5,0-1.3,0.4-2.3,0.9l1.9,2.8c3.6-3.9,7.5-7.2,11.9-9.9
108 | 	c2.2,0.6,3.3,1.2,3.3,2l1.6-0.1c11.7-8.7,23.3-14.9,34.8-18.8l0.1,1.5c-2.1,3.2-3.6,4.8-4.4,4.9c0.1,1.1,0.5,2,1.1,2.9
109 | 	c0.2,2-5,15.1-15.6,39.5C36,440,15.8,481.8-0.5,509c0,0.5,0.4,1.3,0.9,2.2c4-1,6.6-1.9,7.7-2.9l0.9-0.1l0.1,1.5l1.5-0.1l1.6-0.9
110 | 	c0,0.5,0.6,0.7,1.6,0.6l0.1,1.5c0.1,1.5-0.7,3.8-2.6,6.9c-1.7,1.9-3.4,5.8-5.3,11.7l0.1,0.7l1.5-0.1c6.5-7.3,11.5-14.5,14.9-21.5
111 | 	c19.1-5.6,33.6-11.1,43.7-16.5c10.1-0.9,17.9-3.5,23.1-7.9l-0.1-0.8l-3.8,1.1l-0.9,0.1l-0.1-0.8c7.4-1.1,12.6-2.8,15.4-5
112 | 	c14.5-11.2,25.4-19.1,32.8-23.8c22.9-16.8,33.7-33,32.4-48.4c-0.1-1.6-5.2-7.9-15.1-18.9c-0.2-2.1,3.3-5.1,10.3-9.1l19.9-17.5
113 | 	c4.4-5.7,7.1-14.9,8-27.6l-0.3-3c-0.8-8.9-7.2-16.1-19.4-21.6c-7.2-4.9-20.1-7.5-38.7-7.8C114.4,302.4,94.2,307.8,69.4,317.4
114 | 	L69.4,317.4z M176.6,318.7l-0.6,1.5l-22.2-9.3C168.6,311.5,176.2,314.1,176.6,318.7L176.6,318.7z M86.8,380.3
115 | 	c1.5-8.2,3.2-12.9,5.1-14l16.6-37.3c-0.2-2.3,3.3-4.1,10.6-5.3l2.4-0.2l0.2,2.1c7.2-1.1,11.6-1.7,13.3-1.9c13.2-1.1,20,1.5,20.6,8
116 | 	l1.5-0.1l-0.3-3.8l1.6-0.1c3.9,2.1,6,4.7,6.2,7.8c0.2,2.1-0.9,4.7-3.4,7.8c-1,0.1-1.6-0.6-1.7-2.1l-1.6,0.1l-0.4,4.5
117 | 	c-6.7,10-11.5,15.1-14.5,15.4c-2.7,3.7-4.4,5.6-5.1,5.7c-2.1,2.5-7.8,6.8-17.2,12.8c-3.1,0.3-14.6,4.7-34.5,13.4
118 | 	c-1-0.5-2-0.6-3.2-0.5l-0.1-1.4C82.7,388.3,83.9,384.7,86.8,380.3L86.8,380.3z M178.7,334.3l0.1,1.4c-0.8,0.1-2.3-2.3-4.5-7.1
119 | 	l-0.1-1.4C175.6,327,177.1,329.4,178.7,334.3L178.7,334.3z M32.7,352.1l0.1,0.7c-0.5,0-1.3,0.4-2.3,0.9l-0.8,0.1l-0.1-1.4
120 | 	L32.7,352.1z M81,350.9l0.2,2.2c-0.7,0.1-1.7,1.1-2.9,3.2l-0.1-1.5c1.4-1.7,2.1-3,2.1-3.9L81,350.9z M73.6,366.5l0.3,3l-0.8,0.1
121 | 	l-0.3-3L73.6,366.5z M71.7,371.9c-0.2,2.5-0.8,3.8-2.1,3.9l-0.8,0.1c0.9-1.7,1.4-2.9,1.3-3.8L71.7,371.9z M68.4,379.7l0.1,0.7
122 | 	l-1.4,2.4l-1.5,0.1l-0.1-0.7c1.5-0.1,2.2-0.9,2.1-2.4L68.4,379.7z M65,386.7l-0.4,3.7l-0.8,0.1l-0.3-3.7L65,386.7z M146.1,389.4
123 | 	l3.3,2c0.1,1-0.4,1.6-1.4,1.7c-1.4-0.9-2.5-1.3-3.3-1.3l-0.2-2.2L146.1,389.4z M82.6,397.9l0.1,1.4l-3.1,0.3l-0.1-1.4L82.6,397.9z
124 | 	 M133.8,403.1c2.2,1,3.3,2,3.4,2.8l0.1,0.7c-2.1,0.2-4-0.9-5.8-3.3L133.8,403.1z M67.8,419.3c9-0.8,23.2-5,42.5-12.6l4.7-0.4
125 | 	c9.8-0.8,17.1,1,21.9,5.6l0.3,3c-3.6,10.4-7.6,16.4-11.9,18.3l-20,15.9c-14.9,9.8-22.9,14.7-24.1,14.8
126 | 	c-23.7,13.1-38.5,19.8-44.2,20.3l-0.9,0.1C36.9,481.5,47.4,459.9,67.8,419.3L67.8,419.3z M89.4,410.8l0.1,0.7l-3.2,0.3l-0.1-0.7
127 | 	L89.4,410.8z M161.2,407.6l0.5,5.9c-0.7,1.6-1.4,2.4-2.2,2.4l-0.9-10.4C160.3,406.2,161.1,406.9,161.2,407.6L161.2,407.6z
128 | 	 M39.5,459.2c-1,5.1-2.1,7.7-3.2,7.8l-0.1-0.7C36,463.7,37.1,461.4,39.5,459.2L39.5,459.2z M59.5,487.4c5.8-1.1,21.7-9.5,47.8-25
129 | 	l0.1,1.4c0.1,0.6-2.2,2.5-6.7,5.8c-13.3,6.5-21.1,11-23.4,13.3c-14.4,5-21.5,8.1-21.4,9.3c-12.8,5.1-21.2,8.8-25.2,11.1
130 | 	c-0.9,0.1-2.3-0.3-4.1-1.1c-0.2-2.6,0.9-4.7,3.5-6.4c2.2-0.2,4.4,0.1,6.4,1c2.4-1.2,6.5-2.6,12.4-4l-0.1-1.5l-4.7,0.4
131 | 	c0.6-0.8,5.1-2.9,13.7-6.4l2.4-0.2l0.1,0.7c-4,0.3-6.3,1.6-6.8,3.7c0.1,0.9,0.6,1.4,1.6,1.3C58,488.8,59.5,487.7,59.5,487.4
132 | 	L59.5,487.4z M34.9,469.3l0.1,0.7c0.1,1-0.4,1.6-1.4,1.7l-0.1-0.7C33.4,470.1,33.9,469.5,34.9,469.3L34.9,469.3z M72.3,479.5
133 | 	c-1.9,0.2-5.4,1.7-10.7,4.7l-0.8,0.1l-0.1-1.5c3.8-0.3,7.1-1.8,9.8-4.5C71.6,478.1,72.2,478.6,72.3,479.5L72.3,479.5z M33.5,490.3
134 | 	l2.4-0.2l0.1,0.8c-0.6,0-1.3,0.4-2.3,0.9l-1.5,0.1C32.1,491.2,32.5,490.6,33.5,490.3L33.5,490.3z M17.6,499.2l1.7,0.7
135 | 	c-0.6,4.5-1.9,6.8-4.2,7c-1.8-0.8-3.4-1.1-4.9-1l-0.2-2.2c-0.1-0.9,0.4-1.4,1.5-1.7c1-0.1,1.6,0.6,1.7,2.1
136 | 	C15.9,500.8,17.4,499.2,17.6,499.2L17.6,499.2z"/>
137 | <path d="M461.2,302.7l-1.3-0.5l-21.3,3.3c-0.8-0.4-1.8-0.6-2.9-0.5c-1.2,0.1-3,0.5-5.7,1.2l-10.3,4.3l0.8,1.3c0.5,0,1.2-0.3,2.1-0.8
138 | 	l3.6,0.3l-0.5,3.4c-3.3,1.5-5.3,3.7-5.8,6.6c-5,2.2-7.5,3.8-7.5,4.8l0.1,0.6l0.8-0.1l1.4-0.7l1.6,1.9l0.2,2.6
139 | 	c0.1,0.8-8.4,18.7-25.4,53.6c-14.7,33.6-22.4,52-23.2,55.3c-5,1.4-8,3.5-8.8,6.2c0.1,0.9,1.6,1.4,4.5,1.7l0.1,1.3l-1.3,2.2l0.2,2.6
140 | 	c0.1,1.4,3.8,2.4,11,3.2c0-0.5,0.2-0.7,0.7-0.8c0.1,1.6-0.3,4.8-1.4,9.6l0.8-0.1c3-4.1,4.4-6.9,4.3-8.5l0.6-0.1
141 | 	c0.7-0.1,1.5,0.8,2.4,2.6c-0.9,0.4-4.1,7.6-9.5,21.7l0.8,1.3l0.8-0.1c6.7-16.9,10.9-26.3,12.6-28.1c8.8-0.8,23.9-2.3,45.5-4.6
142 | 	l1.3-0.8c0,0.5,0.3,0.7,0.8,0.6l1.4-0.1l1.3-0.8c0,0.5,0.3,0.7,0.8,0.6l16.3-1.4c4.3-0.4,6.4-1.7,6.2-3.9c-0.1-0.6,2.5-1.3,7.7-2
143 | 	c0.5,0,1.2,0.1,2.2,0.4c0-0.4,2.5-0.8,7.7-1.3c0.1-2.7,1-4.2,2.6-4.3l-0.1-1.3c-1.4,0.1-3.1,0.5-5,1.1c-3.4-0.2-5.6-0.4-6.5-0.8
144 | 	c-0.9,0.5-1.6,0.8-2.1,0.8l-11.4,0.4l-1.4,0.7c0-0.4-0.3-0.6-0.8-0.5l-0.6,0.1l-1.5,0.7c0-0.4-1.2-0.7-3.6-1l-1.4,0.8l-2.8,0.2
145 | 	l-0.1-0.7c14.6-1.6,21.9-3.6,21.7-6c0.9-0.1,1.4,0.4,1.5,1.3l4.3-1.1l-0.1-1.3l-35,1c0,0.5-0.2,0.7-0.7,0.8l-4.3-0.4
146 | 	c-1.1,0.1-2,0.4-2.7,1l-1.6-0.6c-4.4,0.4-7.7,0.9-9.9,1.6c-3-0.2-6.3-0.2-10,0.1l-7.9,0.7l-3.6-0.4c-0.2-2.3,4.3-13.7,13.6-34.2
147 | 	c2.7-6.9,5.2-11.2,7.5-12.8c0.5,0,1.2,0.1,2.2,0.5l5.6-1.9l2.9,0.5c4.8-0.4,10.4-1.8,16.8-4.1c1.6-0.1,2.8,0,3.6,0.3l4.3-1l12.7-1.1
148 | 	c5.4-0.5,11.3-1.7,17.6-3.6l-0.1-1.3c-2.4,0.2-3.6-0.2-3.7-1.1c-0.2-1.8-1.9-2.5-5.2-2.2l-0.1-1.3l3.5-1l9.2-0.8l-0.1-1.3
149 | 	c-0.4,0-2.2,0-5.7-0.1l-0.1-1.4l3.6-0.3c0.9-0.1,1.4-0.6,1.3-1.4c-4.8,0.1-7.2-0.1-7.2-0.7c-33.3,1.6-49.9,1.9-50,0.9
150 | 	c-0.5,0-1.2,0.3-2.1,0.9l-0.9-1.4c8.8-18.7,14-28.2,15.5-28.3c0.1,0.7-0.3,1.9-1.1,3.5l0.1,0.6l1.4-0.1c3.5-8.4,6.4-12.7,8.9-12.9
151 | 	c10.4-0.9-1.5-1.6,20.9-5.1c0.9,0.4,1.6,0.6,2,0.5c8.8-1.8,21-3.6,36.7-5.5l-0.1-1.3l-8.4,0.8l-0.1-1.3c1-0.1,1.8-0.4,2.5-1l0.1,0.7
152 | 	c0.5,0,1.1-0.3,1.9-0.9c1.4-0.1,2.5,0,3.3,0.4c2.9-0.8,5.2-1.2,7-1.4l5.2-0.5c1.3-0.8,1.9-1.5,1.8-2.2l0-0.6c-1.3,0.1-2.8,0-4.6-0.3
153 | 	c-0.1-0.7,0.3-1.2,1.2-1.4l9.7-0.9l4.5-1.1c0,0.5,0.3,0.7,0.6,0.7c0.5,0,1.1-0.3,1.9-0.9c2.3,0.3,3.7,0.4,4,0.3
154 | 	c1.8-1.7,3.9-3.1,6.2-4c-1-1-1.5-1.8-1.6-2.5l-6.5,0.6c0-0.5-0.3-1.1-0.7-2c0-0.6,1.4-1.2,4.4-1.8l1.3,0.5l1.2-0.7
155 | 	c0,0.4,0.3,0.6,0.7,0.5l1.2-0.7c0,0.4,0.3,0.6,0.7,0.5l0.6-0.1l-0.1-1.3c-0.9,0.1-3.3,0.1-7.1,0l-1.2,0.8l-0.1-0.7
156 | 	c-30.5,2.5-47.8,3.9-51.9,4.3c-0.5,0-2.7,0-6.4-0.1c0,0.5-0.4,0.8-1.3,0.8l-1.3-0.6l-4.5,1.1c-1,0.1-2.8,0-5.3-0.2
157 | 	c-0.7,0.5-1.5,0.9-2.5,1c-1,0.1,24.2-1.4,23.4-1.8l-3.9,1.1l-0.6,0.1c-1.6,0.1-3.6,0.1-6-0.2c-0.7,0.5-1.7,0.9-3.2,1
158 | 	c-1,0.1-1.9-0.1-2.6-0.5C469.8,300.9,466.6,301.7,461.2,302.7L461.2,302.7z M462.8,306.7c0,0.5,0.5,0.7,1.3,0.6l0.1,1.3l-1.3,0.1
159 | 	c-1,0.1-1.9-0.1-2.6-0.5c-0.7,0.6-1.6,0.9-2.5,1l0.4,0l-3.6-0.4l-0.1-0.6C458.9,307.9,460.3,307.4,462.8,306.7L462.8,306.7z
160 | 	 M466.1,306.4l0.7-0.1l0.1,1.3l-2,0.2C464.9,307.1,465.2,306.6,466.1,306.4L466.1,306.4z M473.8,305.6l0.1,0.7
161 | 	c-1.5,0.1-3.4,0.5-5.7,1.2l-0.7,0.1l0.6-1.4L473.8,305.6z M417,312.1l2.2-0.2l-0.1-1.3l-2.2,0.2L417,312.1z M432.7,310.7l0.8-0.1
162 | 	l1.5,0.6c0.1,0.9-0.4,1.4-1.3,1.4l-2.2,0.2l-0.1-0.7C431.3,311.4,431.8,311,432.7,310.7L432.7,310.7z M483,313.6l0,0.6l-4.5,0.4
163 | 	l0-0.6L483,313.6z M470.1,315.5l0.1,0.7l-2.6,0.2l-0.1-0.7L470.1,315.5z M482.5,316.5l9-1.5l4.6,0.2l0.1,0.7
164 | 	c-2.2,0.2-4.1,0.6-5.7,1.2c0-0.5-0.9-0.9-2.7-1.1l-7.1,2c-1.4-0.8-2.1-1.4-2.1-1.8L482.5,316.5z M473.6,318.5
165 | 	c0.9-0.1,1.3,0.3,1.4,1.2l-3.8,0.4l-0.1-1.3L473.6,318.5z M465.7,318.1l0.1,0.7l23.4-1.1l-0.1-0.7L465.7,318.1z M467.1,319.9l0,0.6
166 | 	L462,321l0-0.6L467.1,319.9z M433.6,346.4l0.1,0.7l1.5-0.1c0-0.5,0.1-1.2,0.5-2.1l-0.1-1.3C434.8,343.7,434.1,344.6,433.6,346.4
167 | 	L433.6,346.4z M382.1,421.2l0.1,0.6c0.1,0.9-0.4,1.4-1.4,1.5l-0.1-0.6C380.6,421.9,381.1,421.5,382.1,421.2L382.1,421.2z M380.8,424
168 | 	c0.1,1.3-0.8,4.5-2.6,9.7l-2.2,0.2c-0.1-0.9,1.1-4.1,3.4-9.7L380.8,424z M404.9,444.9c0.1,0.7-1.1,1.5-3.4,2.3l-4.4-0.3l-1.4,0.1
169 | 	l-0.1-1.3L404.9,444.9z M409.2,445.3l0.1,0.6l-3.6,0.3l-0.1-0.6L409.2,445.3z"/>
170 | </svg>
171 | 


--------------------------------------------------------------------------------
/images/canada-flag.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wesbos/future-js/2722bdd2ad50361a529718b87f2c97aff595a447/images/canada-flag.png


--------------------------------------------------------------------------------
/images/commandline.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wesbos/future-js/2722bdd2ad50361a529718b87f2c97aff595a447/images/commandline.png


--------------------------------------------------------------------------------
/images/cover.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wesbos/future-js/2722bdd2ad50361a529718b87f2c97aff595a447/images/cover.png


--------------------------------------------------------------------------------
/images/css-next-logo.svg:
--------------------------------------------------------------------------------
  1 | <svg class="SVGIcon-svg SVGIcon--cleaned-svg cssnext-Header-logo-img-svg" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 256 48.102" enable-background="new 0 0 256 48.102" xml:space="preserve">
  2 | <g>
  3 | 
  4 |     <linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="14.688" y1="740.7053" x2="14.688" y2="788.7076" gradientTransform="matrix(1 0 0 1 0 -742.8984)">
  5 |     <stop offset="0" style="stop-color:#5B6FB5"></stop>
  6 |     <stop offset="0.675" style="stop-color:#4F7DBF"></stop>
  7 |     <stop offset="1" style="stop-color:#428BCA"></stop>
  8 |   </linearGradient>
  9 |   <path fill="url(#SVGID_1_)" d="M15.143,16.166c-1.305,0-2.4,0.298-3.279,0.894c-0.886,0.596-1.608,1.362-2.162,2.302
 10 |     c-0.558,0.944-0.952,1.98-1.182,3.112c-0.229,1.137-0.344,2.252-0.344,3.371c0,1.068,0.115,2.166,0.344,3.275
 11 |     c0.229,1.121,0.605,2.129,1.123,3.029c0.523,0.904,1.222,1.641,2.102,2.217c0.884,0.577,1.959,0.862,3.23,0.862
 12 |     c1.954,0,3.462-0.548,4.521-1.64c1.053-1.099,1.718-2.564,1.988-4.407h7.892c-0.541,3.952-2.075,6.965-4.608,9.042
 13 |     c-2.538,2.071-5.78,3.106-9.738,3.106c-2.227,0-4.272-0.37-6.133-1.12c-1.864-0.745-3.451-1.795-4.753-3.142
 14 |     c-1.302-1.345-2.323-2.947-3.05-4.808C0.361,30.402,0,28.359,0,26.125c0-2.301,0.335-4.441,1.008-6.42
 15 |     c0.671-1.979,1.66-3.685,2.968-5.128c1.304-1.443,2.897-2.559,4.776-3.371c1.882-0.806,4.036-1.209,6.453-1.209
 16 |     c1.766,0,3.464,0.235,5.098,0.694c1.63,0.457,3.091,1.161,4.377,2.1c1.285,0.941,2.332,2.114,3.139,3.516
 17 |     c0.807,1.4,1.269,3.061,1.383,4.982h-8.007C20.653,17.875,18.638,16.166,15.143,16.166z"></path>
 18 | 
 19 |     <linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="46.3359" y1="740.7063" x2="46.3359" y2="788.7085" gradientTransform="matrix(1 0 0 1 0 -742.8984)">
 20 |     <stop offset="0" style="stop-color:#5B6FB5"></stop>
 21 |     <stop offset="0.675" style="stop-color:#4F7DBF"></stop>
 22 |     <stop offset="1" style="stop-color:#428BCA"></stop>
 23 |   </linearGradient>
 24 |   <path fill="url(#SVGID_2_)" d="M40.864,33.187c0.361,0.637,0.834,1.152,1.411,1.556c0.574,0.403,1.238,0.704,1.988,0.896
 25 |     c0.748,0.188,1.525,0.281,2.332,0.281c0.577,0,1.182-0.062,1.813-0.201c0.636-0.131,1.21-0.343,1.73-0.633
 26 |     c0.52-0.286,0.952-0.671,1.296-1.153c0.347-0.474,0.518-1.078,0.518-1.814c0-1.228-0.815-2.146-2.449-2.761
 27 |     c-1.631-0.614-3.907-1.233-6.825-1.847c-1.19-0.265-2.353-0.587-3.485-0.948c-1.134-0.365-2.143-0.849-3.023-1.443
 28 |     c-0.884-0.596-1.594-1.341-2.133-2.245c-0.539-0.901-0.807-2.005-0.807-3.312c0-1.918,0.374-3.495,1.123-4.722
 29 |     c0.75-1.229,1.74-2.198,2.968-2.911c1.228-0.708,2.609-1.209,4.148-1.496c1.536-0.291,3.11-0.438,4.723-0.438
 30 |     c1.611,0,3.178,0.155,4.695,0.461c1.517,0.308,2.871,0.827,4.059,1.555s2.178,1.697,2.964,2.906
 31 |     c0.788,1.208,1.259,2.739,1.413,4.58h-7.776c-0.114-1.574-0.712-2.64-1.783-3.197c-1.076-0.553-2.347-0.834-3.802-0.834
 32 |     c-0.462,0-0.961,0.027-1.498,0.083c-0.541,0.061-1.031,0.183-1.47,0.375c-0.44,0.191-0.815,0.473-1.123,0.836
 33 |     s-0.462,0.855-0.462,1.47c0,0.729,0.27,1.324,0.806,1.787c0.539,0.457,1.242,0.834,2.102,1.121c0.865,0.292,1.854,0.55,2.967,0.778
 34 |     c1.114,0.229,2.248,0.483,3.399,0.748c1.19,0.266,2.35,0.597,3.484,0.981c1.132,0.38,2.141,0.891,3.024,1.521
 35 |     c0.883,0.64,1.594,1.427,2.132,2.358c0.539,0.947,0.807,2.11,0.807,3.488c0,1.959-0.396,3.6-1.182,4.927
 36 |     c-0.785,1.327-1.814,2.387-3.08,3.197c-1.269,0.807-2.718,1.369-4.35,1.701c-1.631,0.323-3.293,0.482-4.981,0.482
 37 |     c-1.729,0-3.419-0.168-5.067-0.516c-1.653-0.349-3.121-0.924-4.407-1.729c-1.287-0.807-2.346-1.87-3.169-3.196
 38 |     c-0.825-1.322-1.277-2.986-1.352-4.983h7.774C40.313,31.799,40.499,32.554,40.864,33.187z"></path>
 39 | 
 40 |     <linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="77.269" y1="740.7063" x2="77.269" y2="788.7085" gradientTransform="matrix(1 0 0 1 0 -742.8984)">
 41 |     <stop offset="0" style="stop-color:#5B6FB5"></stop>
 42 |     <stop offset="0.675" style="stop-color:#4F7DBF"></stop>
 43 |     <stop offset="1" style="stop-color:#428BCA"></stop>
 44 |   </linearGradient>
 45 |   <path fill="url(#SVGID_3_)" d="M71.794,33.187c0.361,0.637,0.834,1.152,1.411,1.556s1.238,0.704,1.987,0.896
 46 |     c0.748,0.188,1.525,0.281,2.332,0.281c0.577,0,1.182-0.062,1.814-0.201c0.638-0.131,1.209-0.343,1.732-0.633
 47 |     c0.518-0.286,0.949-0.671,1.296-1.153c0.344-0.474,0.518-1.078,0.518-1.814c0-1.228-0.815-2.146-2.452-2.761
 48 |     c-1.631-0.614-3.907-1.233-6.825-1.847c-1.19-0.265-2.353-0.587-3.484-0.948c-1.133-0.365-2.141-0.849-3.024-1.443
 49 |     c-0.884-0.596-1.594-1.341-2.13-2.245c-0.541-0.901-0.807-2.005-0.807-3.312c0-1.918,0.37-3.495,1.123-4.722
 50 |     c0.748-1.229,1.737-2.198,2.965-2.911c1.23-0.708,2.611-1.209,4.148-1.496c1.535-0.291,3.111-0.438,4.722-0.438
 51 |     c1.612,0,3.179,0.155,4.695,0.461c1.516,0.308,2.871,0.827,4.062,1.555c1.188,0.728,2.177,1.697,2.962,2.906
 52 |     c0.788,1.208,1.259,2.739,1.413,4.58h-7.774c-0.115-1.574-0.712-2.64-1.787-3.197c-1.075-0.553-2.346-0.834-3.801-0.834
 53 |     c-0.462,0-0.961,0.027-1.498,0.083c-0.539,0.061-1.029,0.183-1.47,0.375c-0.438,0.191-0.816,0.473-1.123,0.836
 54 |     c-0.308,0.363-0.461,0.855-0.461,1.47c0,0.729,0.269,1.324,0.806,1.787c0.541,0.457,1.243,0.834,2.103,1.121
 55 |     c0.866,0.292,1.855,0.55,2.967,0.778c1.114,0.229,2.25,0.483,3.399,0.748c1.19,0.266,2.353,0.597,3.484,0.981
 56 |     c1.132,0.38,2.141,0.891,3.024,1.521c0.883,0.64,1.593,1.427,2.135,2.358c0.537,0.947,0.807,2.11,0.807,3.488
 57 |     c0,1.959-0.396,3.6-1.182,4.927c-0.788,1.327-1.814,2.387-3.082,3.197c-1.269,0.807-2.717,1.369-4.35,1.701
 58 |     c-1.632,0.323-3.293,0.482-4.979,0.482c-1.731,0-3.422-0.168-5.069-0.516c-1.653-0.349-3.12-0.924-4.407-1.729
 59 |     c-1.288-0.807-2.346-1.87-3.169-3.196c-0.825-1.322-1.277-2.986-1.35-4.983h7.772C71.245,31.799,71.427,32.554,71.794,33.187z"></path>
 60 | 
 61 |     <linearGradient id="SVGID_4_" gradientUnits="userSpaceOnUse" x1="107.0151" y1="740.7053" x2="107.0151" y2="788.7094" gradientTransform="matrix(1 0 0 1 0 -742.8984)">
 62 |     <stop offset="0" style="stop-color:#5B6FB5"></stop>
 63 |     <stop offset="0.675" style="stop-color:#4F7DBF"></stop>
 64 |     <stop offset="1" style="stop-color:#428BCA"></stop>
 65 |   </linearGradient>
 66 |   <path fill="url(#SVGID_4_)" d="M103.443,10.809l-0.921,4.495h0.115c1.23-1.729,2.784-3.023,4.666-3.886
 67 |     c1.88-0.867,3.858-1.299,5.932-1.299c2.804,0,4.886,0.614,6.251,1.844c1.359,1.231,2.044,3.168,2.044,5.821
 68 |     c0,0.651-0.078,1.496-0.229,2.532c-0.155,1.038-0.366,2.135-0.638,3.286l-3.629,16.991h-4.896l3.802-17.396
 69 |     c0.04-0.31,0.096-0.665,0.173-1.067c0.075-0.404,0.153-0.826,0.229-1.264c0.08-0.438,0.148-0.865,0.202-1.269
 70 |     c0.059-0.402,0.086-0.739,0.086-1.007c0-1.42-0.499-2.467-1.497-3.139c-0.998-0.673-2.226-1.009-3.686-1.009
 71 |     c-1.343,0-2.677,0.327-4.004,0.979c-1.325,0.65-2.447,1.476-3.368,2.474c-0.883,0.77-1.575,1.702-2.072,2.795
 72 |     c-0.499,1.096-0.902,2.234-1.209,3.425l-3.457,16.478H92.5l6.22-29.779h4.722L103.443,10.809L103.443,10.809z"></path>
 73 | 
 74 |     <linearGradient id="SVGID_5_" gradientUnits="userSpaceOnUse" x1="139.3008" y1="740.7053" x2="139.3008" y2="788.7114" gradientTransform="matrix(1 0 0 1 0 -742.8984)">
 75 |     <stop offset="0" style="stop-color:#5B6FB5"></stop>
 76 |     <stop offset="0.675" style="stop-color:#4F7DBF"></stop>
 77 |     <stop offset="1" style="stop-color:#428BCA"></stop>
 78 |   </linearGradient>
 79 |   <path fill="url(#SVGID_5_)" d="M130.23,29.761c0,1.146,0.211,2.179,0.633,3.084c0.424,0.898,0.998,1.649,1.729,2.246
 80 |     c0.729,0.595,1.555,1.054,2.477,1.383c0.922,0.323,1.881,0.487,2.879,0.487c2.188,0,3.992-0.487,5.414-1.467
 81 |     c1.423-0.979,2.478-2.392,3.168-4.232h4.896c-0.384,1.647-1,3.098-1.844,4.344c-0.847,1.252-1.863,2.288-3.052,3.113
 82 |     c-1.189,0.83-2.518,1.448-3.975,1.871c-1.459,0.421-2.994,0.638-4.607,0.638c-2.456,0-4.504-0.376-6.135-1.125
 83 |     c-1.633-0.749-2.93-1.706-3.888-2.878c-0.961-1.171-1.634-2.456-2.016-3.863c-0.384-1.396-0.577-2.751-0.577-4.059
 84 |     c0-2.843,0.413-5.443,1.24-7.806c0.826-2.359,1.94-4.387,3.342-6.073c1.398-1.693,3.031-2.995,4.896-3.919
 85 |     c1.857-0.92,3.809-1.385,5.846-1.385c4.378,0,7.574,1.153,9.59,3.46c2.018,2.303,3.023,5.545,3.023,9.729
 86 |     c0,0.769-0.054,1.5-0.17,2.188c-0.115,0.693-0.211,1.251-0.287,1.673h-22.408C130.289,28.016,130.23,28.877,130.23,29.761z
 87 |      M148.174,19.767c-0.21-1.018-0.595-1.919-1.148-2.707c-0.557-0.788-1.297-1.42-2.221-1.903c-0.921-0.478-2.054-0.716-3.4-0.716
 88 |     c-1.418,0-2.695,0.221-3.826,0.659c-1.135,0.439-2.125,1.048-2.969,1.814c-0.844,0.77-1.555,1.662-2.131,2.682
 89 |     c-0.578,1.018-1.039,2.1-1.385,3.253h17.281C148.451,21.81,148.385,20.783,148.174,19.767z"></path>
 90 | 
 91 |     <linearGradient id="SVGID_6_" gradientUnits="userSpaceOnUse" x1="168.0459" y1="740.7073" x2="168.0459" y2="788.7106" gradientTransform="matrix(1 0 0 1 0 -742.8984)">
 92 |     <stop offset="0" style="stop-color:#5B6FB5"></stop>
 93 |     <stop offset="0.675" style="stop-color:#4F7DBF"></stop>
 94 |     <stop offset="1" style="stop-color:#428BCA"></stop>
 95 |   </linearGradient>
 96 |   <path fill="url(#SVGID_6_)" d="M159.204,10.809h5.646l4.493,10.833l8.868-10.833h5.936l-12.789,14.398l7.604,15.382h-5.586
 97 |     l-5.416-12.212l-10.14,12.212h-5.875l13.882-15.784L159.204,10.809z"></path>
 98 | 
 99 |     <linearGradient id="SVGID_7_" gradientUnits="userSpaceOnUse" x1="193.6748" y1="740.7043" x2="193.6748" y2="788.7076" gradientTransform="matrix(1 0 0 1 0 -742.8984)">
100 |     <stop offset="0" style="stop-color:#5B6FB5"></stop>
101 |     <stop offset="0.675" style="stop-color:#4F7DBF"></stop>
102 |     <stop offset="1" style="stop-color:#428BCA"></stop>
103 |   </linearGradient>
104 |   <path fill="url(#SVGID_7_)" d="M202.059,10.809l-0.927,4.322H195.2l-3.687,17.512c-0.039,0.347-0.078,0.67-0.115,0.979
105 |     c-0.039,0.306-0.061,0.632-0.061,0.976c0,0.769,0.299,1.298,0.895,1.584c0.596,0.291,1.277,0.437,2.05,0.437
106 |     c0.499,0,0.977-0.053,1.438-0.146c0.461-0.1,0.92-0.222,1.381-0.375l-0.863,4.491c-0.574,0.079-1.148,0.146-1.727,0.201
107 |     c-0.58,0.061-1.15,0.088-1.729,0.088c-0.921,0-1.785-0.068-2.593-0.2c-0.807-0.137-1.506-0.385-2.104-0.75
108 |     c-0.595-0.361-1.076-0.854-1.438-1.468c-0.365-0.612-0.553-1.4-0.553-2.361c0-0.422,0.028-0.825,0.088-1.209
109 |     c0.057-0.384,0.125-0.807,0.201-1.267l3.918-18.491h-5.012l0.922-4.317h5.012L193.07,2h4.896l-1.848,8.813h5.938v-0.005H202.059z"></path>
110 | </g>
111 | <g>
112 | 
113 |     <linearGradient id="SVGID_8_" gradientUnits="userSpaceOnUse" x1="225.5234" y1="742.9016" x2="225.5234" y2="790.9006" gradientTransform="matrix(1 0 0 1 0 -742.8984)">
114 |     <stop offset="0" style="stop-color:#5B6FB5"></stop>
115 |     <stop offset="0.675" style="stop-color:#4F7DBF"></stop>
116 |     <stop offset="1" style="stop-color:#428BCA"></stop>
117 |   </linearGradient>
118 |   <path fill="url(#SVGID_8_)" d="M231.709,3.111c-0.966,0-1.727,0.47-2.275,1.421c-0.551,0.946-0.933,1.991-1.139,3.126l-1.914,9.359
119 |     c-0.277,1.212-0.682,2.239-1.217,3.085c-0.539,0.841-1.096,1.536-1.68,2.066c-0.59,0.535-1.166,0.947-1.735,1.242
120 |     c-0.565,0.291-1.013,0.474-1.319,0.546l-0.049,0.147c0.242,0.04,0.549,0.144,0.93,0.314c0.379,0.168,0.75,0.455,1.114,0.852
121 |     c0.361,0.395,0.673,0.896,0.931,1.5c0.258,0.604,0.388,1.369,0.388,2.301c0,0.311-0.033,0.619-0.103,0.93
122 |     c-0.072,0.312-0.14,0.656-0.207,1.04l-1.914,9.31c-0.104,0.591-0.153,1.168-0.153,1.758c0,0.793,0.104,1.453,0.311,1.992
123 |     c0.208,0.535,0.671,0.798,1.397,0.798h2.587l-0.672,3.104h-3.621c-0.521,0-1.045-0.104-1.577-0.311
124 |     c-0.539-0.207-1.009-0.497-1.424-0.877c-0.418-0.374-0.749-0.861-1.01-1.446c-0.258-0.592-0.387-1.263-0.387-2.017
125 |     c0-0.313,0.016-0.651,0.049-1.014c0.033-0.359,0.086-0.73,0.156-1.11l1.963-9.359c0.067-0.382,0.121-0.75,0.154-1.116
126 |     c0.031-0.361,0.048-0.693,0.048-1.008c0-1.205-0.317-2.161-0.954-2.869c-0.637-0.707-1.408-1.063-2.302-1.063l0.774-3.516
127 |     c0.55,0,1.111-0.146,1.68-0.439c0.568-0.292,1.105-0.693,1.604-1.214c0.498-0.517,0.951-1.152,1.349-1.913
128 |     c0.396-0.762,0.696-1.603,0.903-2.536l1.965-9.418c0.207-1.101,0.57-2.071,1.086-2.922c0.518-0.841,1.104-1.55,1.76-2.117
129 |     c0.652-0.568,1.344-1.003,2.07-1.293c0.724-0.292,1.412-0.439,2.063-0.439h3.624l-0.671,3.103h-2.583V3.111L231.709,3.111z"></path>
130 | 
131 |     <linearGradient id="SVGID_9_" gradientUnits="userSpaceOnUse" x1="234.8008" y1="742.8987" x2="234.8008" y2="790.9018" gradientTransform="matrix(1 0 0 1 0 -742.8984)">
132 |     <stop offset="0" style="stop-color:#5B6FB5"></stop>
133 |     <stop offset="0.675" style="stop-color:#4F7DBF"></stop>
134 |     <stop offset="1" style="stop-color:#428BCA"></stop>
135 |   </linearGradient>
136 |   <path fill="url(#SVGID_9_)" d="M239.591,8.576l-6.139,31.602h-3.442l6.133-31.602H239.591z"></path>
137 | 
138 |     <linearGradient id="SVGID_10_" gradientUnits="userSpaceOnUse" x1="241.5293" y1="742.8977" x2="241.5293" y2="790.9018" gradientTransform="matrix(1 0 0 1 0 -742.8984)">
139 |     <stop offset="0" style="stop-color:#5B6FB5"></stop>
140 |     <stop offset="0.675" style="stop-color:#4F7DBF"></stop>
141 |     <stop offset="1" style="stop-color:#428BCA"></stop>
142 |   </linearGradient>
143 |   <path fill="url(#SVGID_10_)" d="M245.541,10.341l-5.562,28.065h-2.461l5.584-28.065H245.541L245.541,10.341z"></path>
144 | 
145 |     <linearGradient id="SVGID_11_" gradientUnits="userSpaceOnUse" x1="247.7324" y1="742.8987" x2="247.7324" y2="790.902" gradientTransform="matrix(1 0 0 1 0 -742.8984)">
146 |     <stop offset="0" style="stop-color:#5B6FB5"></stop>
147 |     <stop offset="0.675" style="stop-color:#4F7DBF"></stop>
148 |     <stop offset="1" style="stop-color:#428BCA"></stop>
149 |   </linearGradient>
150 |   <path fill="url(#SVGID_11_)" d="M251.053,11.661l-4.968,25.423h-1.673l4.974-25.423H251.053z"></path>
151 | 
152 |     <linearGradient id="SVGID_12_" gradientUnits="userSpaceOnUse" x1="252.8135" y1="742.8997" x2="252.8135" y2="790.9009" gradientTransform="matrix(1 0 0 1 0 -742.8984)">
153 |     <stop offset="0" style="stop-color:#5B6FB5"></stop>
154 |     <stop offset="0.675" style="stop-color:#4F7DBF"></stop>
155 |     <stop offset="1" style="stop-color:#428BCA"></stop>
156 |   </linearGradient>
157 |   <path fill="url(#SVGID_12_)" d="M255.475,13.569l-4.391,21.613h-0.932l4.373-21.613H255.475z"></path>
158 | </g>
159 | </svg>
160 | 


--------------------------------------------------------------------------------
/images/fgHm.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wesbos/future-js/2722bdd2ad50361a529718b87f2c97aff595a447/images/fgHm.png


--------------------------------------------------------------------------------
/images/flexbox.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wesbos/future-js/2722bdd2ad50361a529718b87f2c97aff595a447/images/flexbox.png


--------------------------------------------------------------------------------
/images/gum.mp4:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wesbos/future-js/2722bdd2ad50361a529718b87f2c97aff595a447/images/gum.mp4


--------------------------------------------------------------------------------
/images/hackerYou-logomark.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wesbos/future-js/2722bdd2ad50361a529718b87f2c97aff595a447/images/hackerYou-logomark.png


--------------------------------------------------------------------------------
/images/intersection-observer.mp4:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wesbos/future-js/2722bdd2ad50361a529718b87f2c97aff595a447/images/intersection-observer.mp4


--------------------------------------------------------------------------------
/images/intersection-observer2.mp4:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wesbos/future-js/2722bdd2ad50361a529718b87f2c97aff595a447/images/intersection-observer2.mp4


--------------------------------------------------------------------------------
/images/laptop-sticker.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wesbos/future-js/2722bdd2ad50361a529718b87f2c97aff595a447/images/laptop-sticker.jpg


--------------------------------------------------------------------------------
/images/meta.mp4:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wesbos/future-js/2722bdd2ad50361a529718b87f2c97aff595a447/images/meta.mp4


--------------------------------------------------------------------------------
/images/paymentRequest.mp4:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wesbos/future-js/2722bdd2ad50361a529718b87f2c97aff595a447/images/paymentRequest.mp4


--------------------------------------------------------------------------------
/images/resize-video-player.mp4:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wesbos/future-js/2722bdd2ad50361a529718b87f2c97aff595a447/images/resize-video-player.mp4


--------------------------------------------------------------------------------
/images/resizeObserver.mp4:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wesbos/future-js/2722bdd2ad50361a529718b87f2c97aff595a447/images/resizeObserver.mp4


--------------------------------------------------------------------------------
/images/screenshots/fffe.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wesbos/future-js/2722bdd2ad50361a529718b87f2c97aff595a447/images/screenshots/fffe.png


--------------------------------------------------------------------------------
/images/screenshots/ffjT.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wesbos/future-js/2722bdd2ad50361a529718b87f2c97aff595a447/images/screenshots/ffjT.png


--------------------------------------------------------------------------------
/images/screenshots/ffjW.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wesbos/future-js/2722bdd2ad50361a529718b87f2c97aff595a447/images/screenshots/ffjW.png


--------------------------------------------------------------------------------
/images/screenshots/ffls.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wesbos/future-js/2722bdd2ad50361a529718b87f2c97aff595a447/images/screenshots/ffls.png


--------------------------------------------------------------------------------
/images/screenshots/ffq2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wesbos/future-js/2722bdd2ad50361a529718b87f2c97aff595a447/images/screenshots/ffq2.png


--------------------------------------------------------------------------------
/images/screenshots/ffsj.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wesbos/future-js/2722bdd2ad50361a529718b87f2c97aff595a447/images/screenshots/ffsj.png


--------------------------------------------------------------------------------
/images/screenshots/ffvp.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wesbos/future-js/2722bdd2ad50361a529718b87f2c97aff595a447/images/screenshots/ffvp.png


--------------------------------------------------------------------------------
/images/screenshots/ffxI.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wesbos/future-js/2722bdd2ad50361a529718b87f2c97aff595a447/images/screenshots/ffxI.png


--------------------------------------------------------------------------------
/images/screenshots/fg1n.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wesbos/future-js/2722bdd2ad50361a529718b87f2c97aff595a447/images/screenshots/fg1n.png


--------------------------------------------------------------------------------
/images/screenshots/fg83.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wesbos/future-js/2722bdd2ad50361a529718b87f2c97aff595a447/images/screenshots/fg83.png


--------------------------------------------------------------------------------
/images/screenshots/fgCZ.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wesbos/future-js/2722bdd2ad50361a529718b87f2c97aff595a447/images/screenshots/fgCZ.png


--------------------------------------------------------------------------------
/images/screenshots/fgCq.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wesbos/future-js/2722bdd2ad50361a529718b87f2c97aff595a447/images/screenshots/fgCq.png


--------------------------------------------------------------------------------
/images/screenshots/fgHO.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wesbos/future-js/2722bdd2ad50361a529718b87f2c97aff595a447/images/screenshots/fgHO.png


--------------------------------------------------------------------------------
/images/screenshots/fgHm.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wesbos/future-js/2722bdd2ad50361a529718b87f2c97aff595a447/images/screenshots/fgHm.png


--------------------------------------------------------------------------------
/images/screenshots/fgIK.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wesbos/future-js/2722bdd2ad50361a529718b87f2c97aff595a447/images/screenshots/fgIK.png


--------------------------------------------------------------------------------
/images/screenshots/fgLW.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wesbos/future-js/2722bdd2ad50361a529718b87f2c97aff595a447/images/screenshots/fgLW.png


--------------------------------------------------------------------------------
/images/screenshots/fgUE.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wesbos/future-js/2722bdd2ad50361a529718b87f2c97aff595a447/images/screenshots/fgUE.png


--------------------------------------------------------------------------------
/images/screenshots/fgWF.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wesbos/future-js/2722bdd2ad50361a529718b87f2c97aff595a447/images/screenshots/fgWF.png


--------------------------------------------------------------------------------
/images/screenshots/fgWl.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wesbos/future-js/2722bdd2ad50361a529718b87f2c97aff595a447/images/screenshots/fgWl.png


--------------------------------------------------------------------------------
/images/screenshots/fgXl.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wesbos/future-js/2722bdd2ad50361a529718b87f2c97aff595a447/images/screenshots/fgXl.png


--------------------------------------------------------------------------------
/images/screenshots/fgYU.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wesbos/future-js/2722bdd2ad50361a529718b87f2c97aff595a447/images/screenshots/fgYU.png


--------------------------------------------------------------------------------
/images/screenshots/fgbG.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wesbos/future-js/2722bdd2ad50361a529718b87f2c97aff595a447/images/screenshots/fgbG.png


--------------------------------------------------------------------------------
/images/screenshots/fgbJ.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wesbos/future-js/2722bdd2ad50361a529718b87f2c97aff595a447/images/screenshots/fgbJ.png


--------------------------------------------------------------------------------
/images/screenshots/fgbo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wesbos/future-js/2722bdd2ad50361a529718b87f2c97aff595a447/images/screenshots/fgbo.png


--------------------------------------------------------------------------------
/images/screenshots/fgbz.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wesbos/future-js/2722bdd2ad50361a529718b87f2c97aff595a447/images/screenshots/fgbz.png


--------------------------------------------------------------------------------
/images/screenshots/fgck.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wesbos/future-js/2722bdd2ad50361a529718b87f2c97aff595a447/images/screenshots/fgck.gif


--------------------------------------------------------------------------------
/images/screenshots/fgdA.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wesbos/future-js/2722bdd2ad50361a529718b87f2c97aff595a447/images/screenshots/fgdA.png


--------------------------------------------------------------------------------
/images/screenshots/fgfW.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wesbos/future-js/2722bdd2ad50361a529718b87f2c97aff595a447/images/screenshots/fgfW.png


--------------------------------------------------------------------------------
/images/screenshots/fgfo.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wesbos/future-js/2722bdd2ad50361a529718b87f2c97aff595a447/images/screenshots/fgfo.gif


--------------------------------------------------------------------------------
/images/screenshots/fgfu.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wesbos/future-js/2722bdd2ad50361a529718b87f2c97aff595a447/images/screenshots/fgfu.png


--------------------------------------------------------------------------------
/images/screenshots/fggs.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wesbos/future-js/2722bdd2ad50361a529718b87f2c97aff595a447/images/screenshots/fggs.png


--------------------------------------------------------------------------------
/images/screenshots/fgh5.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wesbos/future-js/2722bdd2ad50361a529718b87f2c97aff595a447/images/screenshots/fgh5.png


--------------------------------------------------------------------------------
/images/screenshots/fgiQ.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wesbos/future-js/2722bdd2ad50361a529718b87f2c97aff595a447/images/screenshots/fgiQ.png


--------------------------------------------------------------------------------
/images/screenshots/fgir.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wesbos/future-js/2722bdd2ad50361a529718b87f2c97aff595a447/images/screenshots/fgir.png


--------------------------------------------------------------------------------
/images/screenshots/fgl6.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wesbos/future-js/2722bdd2ad50361a529718b87f2c97aff595a447/images/screenshots/fgl6.png


--------------------------------------------------------------------------------
/images/screenshots/fgmB.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wesbos/future-js/2722bdd2ad50361a529718b87f2c97aff595a447/images/screenshots/fgmB.gif


--------------------------------------------------------------------------------
/images/screenshots/fgmT.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wesbos/future-js/2722bdd2ad50361a529718b87f2c97aff595a447/images/screenshots/fgmT.png


--------------------------------------------------------------------------------
/images/screenshots/fgnB.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wesbos/future-js/2722bdd2ad50361a529718b87f2c97aff595a447/images/screenshots/fgnB.png


--------------------------------------------------------------------------------
/images/screenshots/fgnM.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wesbos/future-js/2722bdd2ad50361a529718b87f2c97aff595a447/images/screenshots/fgnM.png


--------------------------------------------------------------------------------
/images/screenshots/fgnc.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wesbos/future-js/2722bdd2ad50361a529718b87f2c97aff595a447/images/screenshots/fgnc.png


--------------------------------------------------------------------------------
/images/screenshots/fgrF.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wesbos/future-js/2722bdd2ad50361a529718b87f2c97aff595a447/images/screenshots/fgrF.png


--------------------------------------------------------------------------------
/images/screenshots/fgrg.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wesbos/future-js/2722bdd2ad50361a529718b87f2c97aff595a447/images/screenshots/fgrg.png


--------------------------------------------------------------------------------
/images/screenshots/fgsY.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wesbos/future-js/2722bdd2ad50361a529718b87f2c97aff595a447/images/screenshots/fgsY.png


--------------------------------------------------------------------------------
/images/screenshots/fgtC.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wesbos/future-js/2722bdd2ad50361a529718b87f2c97aff595a447/images/screenshots/fgtC.png


--------------------------------------------------------------------------------
/images/screenshots/fgvC.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wesbos/future-js/2722bdd2ad50361a529718b87f2c97aff595a447/images/screenshots/fgvC.gif


--------------------------------------------------------------------------------
/images/screenshots/fgx0.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wesbos/future-js/2722bdd2ad50361a529718b87f2c97aff595a447/images/screenshots/fgx0.png


--------------------------------------------------------------------------------
/images/screenshots/fgyV.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wesbos/future-js/2722bdd2ad50361a529718b87f2c97aff595a447/images/screenshots/fgyV.png


--------------------------------------------------------------------------------
/images/screenshots/fgz3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wesbos/future-js/2722bdd2ad50361a529718b87f2c97aff595a447/images/screenshots/fgz3.png


--------------------------------------------------------------------------------
/images/screenshots/fgzX.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wesbos/future-js/2722bdd2ad50361a529718b87f2c97aff595a447/images/screenshots/fgzX.png


--------------------------------------------------------------------------------
/images/screenshots/fgzX2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wesbos/future-js/2722bdd2ad50361a529718b87f2c97aff595a447/images/screenshots/fgzX2.png


--------------------------------------------------------------------------------
/images/screenshots/fgzh.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wesbos/future-js/2722bdd2ad50361a529718b87f2c97aff595a447/images/screenshots/fgzh.png


--------------------------------------------------------------------------------
/images/screenshots/fgzk.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wesbos/future-js/2722bdd2ad50361a529718b87f2c97aff595a447/images/screenshots/fgzk.png


--------------------------------------------------------------------------------
/images/screenshots/fh01.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wesbos/future-js/2722bdd2ad50361a529718b87f2c97aff595a447/images/screenshots/fh01.png


--------------------------------------------------------------------------------
/images/screenshots/fh0F.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wesbos/future-js/2722bdd2ad50361a529718b87f2c97aff595a447/images/screenshots/fh0F.png


--------------------------------------------------------------------------------
/images/screenshots/fh13.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wesbos/future-js/2722bdd2ad50361a529718b87f2c97aff595a447/images/screenshots/fh13.png


--------------------------------------------------------------------------------
/images/screenshots/fh1U.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wesbos/future-js/2722bdd2ad50361a529718b87f2c97aff595a447/images/screenshots/fh1U.gif


--------------------------------------------------------------------------------
/images/screenshots/fh2l.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wesbos/future-js/2722bdd2ad50361a529718b87f2c97aff595a447/images/screenshots/fh2l.png


--------------------------------------------------------------------------------
/images/screenshots/fh59.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wesbos/future-js/2722bdd2ad50361a529718b87f2c97aff595a447/images/screenshots/fh59.png


--------------------------------------------------------------------------------
/images/screenshots/fh6L.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wesbos/future-js/2722bdd2ad50361a529718b87f2c97aff595a447/images/screenshots/fh6L.png


--------------------------------------------------------------------------------
/images/screenshots/fh8u.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wesbos/future-js/2722bdd2ad50361a529718b87f2c97aff595a447/images/screenshots/fh8u.png


--------------------------------------------------------------------------------
/images/screenshots/fhAQ.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wesbos/future-js/2722bdd2ad50361a529718b87f2c97aff595a447/images/screenshots/fhAQ.gif


--------------------------------------------------------------------------------
/images/screenshots/fhAe.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wesbos/future-js/2722bdd2ad50361a529718b87f2c97aff595a447/images/screenshots/fhAe.png


--------------------------------------------------------------------------------
/images/screenshots/fhDp.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wesbos/future-js/2722bdd2ad50361a529718b87f2c97aff595a447/images/screenshots/fhDp.png


--------------------------------------------------------------------------------
/images/screenshots/fhEM.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wesbos/future-js/2722bdd2ad50361a529718b87f2c97aff595a447/images/screenshots/fhEM.png


--------------------------------------------------------------------------------
/images/screenshots/mufS.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wesbos/future-js/2722bdd2ad50361a529718b87f2c97aff595a447/images/screenshots/mufS.png


--------------------------------------------------------------------------------
/images/screenshots/muk4.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wesbos/future-js/2722bdd2ad50361a529718b87f2c97aff595a447/images/screenshots/muk4.png


--------------------------------------------------------------------------------
/images/screenshots/mul6.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wesbos/future-js/2722bdd2ad50361a529718b87f2c97aff595a447/images/screenshots/mul6.png


--------------------------------------------------------------------------------
/images/screenshots/mupq.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wesbos/future-js/2722bdd2ad50361a529718b87f2c97aff595a447/images/screenshots/mupq.png


--------------------------------------------------------------------------------
/images/screenshots/musk.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wesbos/future-js/2722bdd2ad50361a529718b87f2c97aff595a447/images/screenshots/musk.png


--------------------------------------------------------------------------------
/images/screenshots/mv6R.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wesbos/future-js/2722bdd2ad50361a529718b87f2c97aff595a447/images/screenshots/mv6R.png


--------------------------------------------------------------------------------
/images/screenshots/mv93.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wesbos/future-js/2722bdd2ad50361a529718b87f2c97aff595a447/images/screenshots/mv93.png


--------------------------------------------------------------------------------
/images/screenshots/mvHv.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wesbos/future-js/2722bdd2ad50361a529718b87f2c97aff595a447/images/screenshots/mvHv.png


--------------------------------------------------------------------------------
/images/screenshots/mvLf.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wesbos/future-js/2722bdd2ad50361a529718b87f2c97aff595a447/images/screenshots/mvLf.png


--------------------------------------------------------------------------------
/images/screenshots/mvMC.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wesbos/future-js/2722bdd2ad50361a529718b87f2c97aff595a447/images/screenshots/mvMC.png


--------------------------------------------------------------------------------
/images/screenshots/mvNc.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wesbos/future-js/2722bdd2ad50361a529718b87f2c97aff595a447/images/screenshots/mvNc.png


--------------------------------------------------------------------------------
/images/screenshots/mvNd.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wesbos/future-js/2722bdd2ad50361a529718b87f2c97aff595a447/images/screenshots/mvNd.png


--------------------------------------------------------------------------------
/images/screenshots/mvPr.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wesbos/future-js/2722bdd2ad50361a529718b87f2c97aff595a447/images/screenshots/mvPr.png


--------------------------------------------------------------------------------
/images/screenshots/mvSI.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wesbos/future-js/2722bdd2ad50361a529718b87f2c97aff595a447/images/screenshots/mvSI.png


--------------------------------------------------------------------------------
/images/screenshots/mvbJ.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wesbos/future-js/2722bdd2ad50361a529718b87f2c97aff595a447/images/screenshots/mvbJ.png


--------------------------------------------------------------------------------
/images/screenshots/mvjO.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wesbos/future-js/2722bdd2ad50361a529718b87f2c97aff595a447/images/screenshots/mvjO.png


--------------------------------------------------------------------------------
/images/screenshots/mvjp.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wesbos/future-js/2722bdd2ad50361a529718b87f2c97aff595a447/images/screenshots/mvjp.png


--------------------------------------------------------------------------------
/images/screenshots/mvlO.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wesbos/future-js/2722bdd2ad50361a529718b87f2c97aff595a447/images/screenshots/mvlO.png


--------------------------------------------------------------------------------
/images/screenshots/mvvk.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wesbos/future-js/2722bdd2ad50361a529718b87f2c97aff595a447/images/screenshots/mvvk.png


--------------------------------------------------------------------------------
/images/screenshots/mvxm.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wesbos/future-js/2722bdd2ad50361a529718b87f2c97aff595a447/images/screenshots/mvxm.png


--------------------------------------------------------------------------------
/images/screenshots/mw1Y.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wesbos/future-js/2722bdd2ad50361a529718b87f2c97aff595a447/images/screenshots/mw1Y.gif


--------------------------------------------------------------------------------
/images/screenshots/mw55.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wesbos/future-js/2722bdd2ad50361a529718b87f2c97aff595a447/images/screenshots/mw55.png


--------------------------------------------------------------------------------
/images/screenshots/mw88.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wesbos/future-js/2722bdd2ad50361a529718b87f2c97aff595a447/images/screenshots/mw88.png


--------------------------------------------------------------------------------
/images/screenshots/mw8s.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wesbos/future-js/2722bdd2ad50361a529718b87f2c97aff595a447/images/screenshots/mw8s.png


--------------------------------------------------------------------------------
/images/sticky.mp4:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wesbos/future-js/2722bdd2ad50361a529718b87f2c97aff595a447/images/sticky.mp4


--------------------------------------------------------------------------------
/images/uglify.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wesbos/future-js/2722bdd2ad50361a529718b87f2c97aff595a447/images/uglify.png


--------------------------------------------------------------------------------
/images/viewport.mp4:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wesbos/future-js/2722bdd2ad50361a529718b87f2c97aff595a447/images/viewport.mp4


--------------------------------------------------------------------------------
/images/webmart.webm:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wesbos/future-js/2722bdd2ad50361a529718b87f2c97aff595a447/images/webmart.webm


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 | <!DOCTYPE html><html><head><title>What's New in JS by Wes Bos</title><meta charset="utf-8"><script src="slides.js"></script><link href="https://fonts.googleapis.com/css?family=Bangers|Open+Sans:400,700" rel="stylesheet" type="text/css"><link href="styles.css" rel="stylesheet" type="text/css"></head><body><section class="slides layout-regular template-default"><article class="first"><h1 style="font-size:250px;">What's New<br>In JavaScript?</h1><br><p></p><p></p><a href="http://wesbos.com">wesbos.com</a><a href="http://twitter.com/wesbos">@wesbos</a></article><article><h1>I&apos;m<br>Wes Bos</h1><p><br></p><p><img src="images/canada-flag.png"></p></article><article><h2 style="font-size:60px;">These slides will be available shortly after this talk <br>I&apos;ll tweet the link out.</h2><img src="images/Twitter_logo_white.png" width="300" style="margin:100px auto"><h2><a href="http://twitter.com/wesbos" target="_blank">@wesbos</a></h2></article><article style="background:white;"><a href="https://ES6.io/?utm_source=toolingtalk&amp;utm_medium=link&amp;utm_campaign=talkpromo"><img src="https://ES6.io/images/es6-facebook-share.png" class="wide"></a><a href="https://ES6.io/?utm_source=toolingtalk&amp;utm_medium=link&amp;utm_campaign=talkpromo">ES6.io</a></article><article style="background:white;"><a href="https://ReactForBeginners.com/?utm_source=toolingtalk&amp;utm_medium=link&amp;utm_campaign=talkpromo"><img src="https://reactforbeginners.com/images/facebook-share.png" class="wide"></a><a href="https://ReactForBeginners.com/?utm_source=toolingtalk&amp;utm_medium=link&amp;utm_campaign=talkpromo">ReactForBeginners.com</a></article><article style="background:white;"><a href="https://LearnNode.com/?utm_source=toolingtalk&amp;utm_medium=link&amp;utm_campaign=talkpromo"><img src="https://learnnode.com/images/NODE/node-facebook-share.jpg" class="wide"></a><a href="https://LearnNode.com/?utm_source=toolingtalk&amp;utm_medium=link&amp;utm_campaign=talkpromo">LearnNode.com</a></article><article style="background:white;"><a href="https://CSSGrid.io/?utm_source=toolingtalk&amp;utm_medium=link&amp;utm_campaign=talkpromo"><img src="http://wes.io/qEI9/conte  nt" class="wide"></a><a href="https://CSSGrid.io/?utm_source=toolingtalk&amp;utm_medium=link&amp;utm_campaign=talkpromo">CSSGrid.io</a></article><article><img src="https://pbs.twimg.com/media/DLTTKRoXUAEwuZR.jpg:large" class="high"><a href="https://syntax.fm">Syntax.fm</a></article><article><h1>JavaScript is Always Evolving</h1></article><article><h1>ES6</h1></article><article><h1>ES2016 (ES7)</h1></article><article><h1>ES2017 (ES8)</h1></article><article><h1 class="huge">New DOM Apis</h1></article><article><h1>This Talk</h1></article><article><h1>Reaaaady?</h1><p class="sub hl">Let's go!</p></article><article class="section"><h1>Promises</h1><p class="sub">Not brand new, but let's do a quick review</p></article><article><h2>Promises are an IOU for something that will happen in the future</h2></article><article><ul class="build"><li>AJAX call returning data</li><li>Access to a User's webcam</li><li>Resizing an image</li></ul></article><article><h2>All of these things take time, we simply kick off the process and move along with our lives.</h2></article><article><h1>But why do we do it this way?</h1></article><article><h1>JavaScript Waits for no one!</h1></article><article><h1>Almost Everything Is Asynchronous</h1></article><article><h2>Let's say we wanted to do a few things:</h2><ul class="build"><li>Make Coffee</li><li>Drink Coffee</li><li>Cook Breakfast</li><li>Eat Breakfast</li></ul></article><article><p>Do you need to finish making coffee before you can Start Breakfast?</p><p>Would it make sense to wait until coffee is made and consumed before we even start cooking breakfast?</p></article><article><p>No - we want to start one thing, come back to it once it's finished, and deal with the result accordingly!</p></article><article><img src="./images/screenshots/mw8s.png" class="high"></article><article><h2>Most new browser APIs are built on Promises, or Observables</h2><p class="sub">More on Observables in a bit</p></article><article><h2>fetch()</h2></article><article><img src="./images/screenshots/mvNc.png" class="wide"></article><article><h2>Axios</h2></article><article><img src="./images/screenshots/mvvk.png" class="wide"></article><article><h2>Many, many more</h2><p class="sub flat">PaymentRequest, getUserMedia(), Web Animation API</p></article><article><h1>It's easy to make your own too!</h1></article><article><img src="./images/screenshots/mvlO.png" class="wide"></article><article><img src="./images/screenshots/mw1Y.gif" class="high"></article><article><h1>Christmas Tree Callback Hell</h1></article><article><img src="./images/screenshots/mvjp.png" class="wide"></article><article><img src="./images/screenshots/mul6.png" class="high"></article><article><h2>we get it<br>Promises are great.</h2></article><article class="section"><h1>buuuuuuttt</h1></article><article class="section"><h1>What's the deal with .then()?</h1><p class="sub">It's still kinda callback-y</p></article><article><h2>Any code that needs to come after the promise still needs to be in the final .then() callback :\</h2></article><article class="section"><h1>Async + Await</h1></article><article class="section"><h2>Async + Await still is promises, but with a really nice syntax</h2></article><article><img src="./images/screenshots/mul6.png" class="high"></article><article><img src="./images/screenshots/mv6R.png" class="high"></article><article><h1>Let's break it down</h1></article><article><h1 class="big">JavaScript is almost entirely asynchronous / non-blocking</h1></article><article><h1>great! - But it's hard to read/write</h1></article><article><h1>PHP</h1><img src="./images/screenshots/mufS.png" class="wide"></article><article><h1>JS</h1><img src="./images/screenshots/mw88.png" class="wide"></article><article><div class="build"><h2>😕😕😕</h2><p>The PHP is easier to read</p><p>The JS is more performant</p><p>I'm not really happy</p></div></article><article><h1>Synchronous looking code, without the wait.</h1></article><article><h1>How does it work?</h1></article><article><h1>1. Mark it as Async</h1></article><article><img src="./images/screenshots/mvxm.png" class="wide"></article><article><h1>2. await inside your async fn</h1></article><article><img src="./images/screenshots/mvLf.png" class="wide"></article><article><h1>Best of Both Worlds!</h1></article><article><h1>Another Example</h1></article><article><h2>Slow...</h2><img src="./images/screenshots/mvHv.png" class="wide"></article><article><h2>Why wait for Wes?</h2><p class="sub">Remember, async+await is just promises</p></article><article><img src="./images/screenshots/mvPr.png" alt="" class="wide"></article><article><h1>Error Handling</h1><p class="sub">A few options (which we don't have time for)...</p></article><article class="section"><h1>Done with Async+ Await!</h1><p class="sub">Let's see more new stuff!</p></article><article class="section"><h1>Intersection Observer</h1></article><article class="section"><h2>How do you know when an element is on screen?</h2></article><article><video src="./images/viewport.mp4" loop controls class="high"></video></article><article><p>With Intersection Observer, you can be alerted when an element is fully or partially scrolled into or out of view.</p></article><article><h2>Uses</h2><ul class="build"><li>Animate elements in on scroll</li><li>Play video on scroll in</li><li>Lazy Load images</li><li>Record views for ads beyond fold</li><li>Use with sticky headers</li></ul></article><article><video src="./images/intersection-observer.mp4" loop muted class="high"></video></article><article><video src="./images/sticky.mp4" loop controls class="high"></video><a href="https://developers.google.com/web/updates/2017/09/sticky-headers">Google Developers</a></article><article><h1>Ready for Meta?</h1></article><article><video src="./images/meta.mp4" loop controls></video></article><article><h1>How does it work?!</h1></article><article><h2>1. Setup some Options</h2><img src="./images/screenshots/muk4.png" class="wide"></article><article><h2>2. Create an empty Observer</h2><img src="./images/screenshots/mupq.png" class="wide"></article><article><h2>3. Give it a callback</h2><img src="./images/screenshots/mvSI.png" class="wide"></article><article><h2>4. Observe Away!</h2><img src="./images/screenshots/mvbJ.png" class="wide"></article><article><img src="./images/screenshots/mvMC.png" class="wide"></article><article class="section"><h1>Payment Request API</h1></article><article><h2>Every single online store needs to reinvent the checkout form.</h2></article><article><h2>We're all just trying to do the same thing - collect payment info from the user.</h2></article><article><h2>The Payment Request is a standardized browser API to collect billing and shipping information from your users.</h2></article><article><video style="width: auto; height: 100%; min-width: 0;" src="./images/paymentRequest.mp4" controls loop class="high"></video></article><article><img src="https://developers.google.com/web/fundamentals/payments/images/state01-receipt-view.png" class="high"><a href="https://developers.google.com/web/fundamentals/payments/">[Google Developers]</a></article><article><video style="width: auto; height: 100%; min-width: 0;" src="./images/webmart.webm" controls loop class="high"></video></article><article><video style="width: auto; height: 100%; min-width: 0;" src="./images/applepay.mp4" controls loop class="high"></video></article><article><h2>So, Does the Browser Charge Your Card?</h2><p class="sub">nope!</p></article><article><h2>Is it secure?</h2><p class="sub">The same, or more!</p></article><article class="section"><h1>getUserMedia()</h1></article><article><h2>Not new at all</h2></article><article><img src="./images/screenshots/mw55.png" class="high"></article><article><h1>BUT</h1><p class="sub">Safari Doesn't give a shit</p></article><article><h1>September 2017 / iOS11</h1><p class="sub">playsinline and getUserMedia()</p></article><article><video style="width: auto; height: 100%; min-width: 0;" src="./images/gum.mp4" controls loop class="high"></video></article><article><h2>Promise Based!</h2><img src="./images/screenshots/mv93.png" class="wide"></article><article><img src="./images/screenshots/musk.png" class="high"></article><article class="section"><h1>Resize Observer</h1><p class="sub">per-element resize events!</p></article><article><video style="width: auto; height: 100%; min-width: 0;" src="./images/resizeObserver.mp4" controls loop class="high"></video></article><article><img src="./images/screenshots/mvNd.png" class="high"></article><article class="section"><h1>Gateway Drug to Element Queries!</h1></article><article><img src="./images/screenshots/mvjO.png" class="high"></article><article><video style="width: auto; height: 100%; min-width: 0;" src="./images/resize-video-player.mp4" controls loop class="high"></video></article><article class="section"><h1>WOWOWOWOWOW!</h1><p class="sub">Some cool stuff!</p></article><article class="section"><h1>What About Support?</h1></article><article class="section"><h1><strong>Async + Await</strong> via Babel</h1></article><article class="section"><h1><strong>Resize Observer</strong> Polyfillable, but expensive.</h1></article><article class="section"><h1><strong>Intersection Observer</strong> has an official W3 polyfill</h1></article><article class="section"><h1><strong>Web Payment</strong> is easily polyfillable</h1><p class="sub">or Fallback to checkout form</p></article><article class="section"><h1><strong>getUserMedia</strong> is everywhere</h1></article><article><h1 class="big">Thanks<br>Folks!</h1><a href="http://twitter.com/wesbos">@wesbos</a><a href="http://instagram.com/wesbos">Insta @wesbos</a><a href="http://wesbos.com">WesBos.com</a></article></section><script src="scripts.js"></script></body></html>


--------------------------------------------------------------------------------
/index.jade:
--------------------------------------------------------------------------------
  1 | doctype html
  2 | html
  3 |   head
  4 |       title What's New in JS by Wes Bos
  5 |       meta(charset='utf-8')
  6 |       script(src='slides.js')
  7 |       link(href='https://fonts.googleapis.com/css?family=Bangers|Open+Sans:400,700' rel='stylesheet' type='text/css')
  8 |       link(href='styles.css'  rel='stylesheet' type='text/css')
  9 |     body
 10 |       section.slides.layout-regular.template-default
 11 |         //- article.first
 12 |         //-   each _,i in Array(31)
 13 |         //-     img(width=10 src="images/#{i}.jpg")
 14 |         article.first
 15 |           h1(style="font-size:250px;") What's New<br>In JavaScript?
 16 |           br
 17 |           p
 18 |           p
 19 |           a(href='http://wesbos.com') wesbos.com
 20 |           a(href='http://twitter.com/wesbos') @wesbos
 21 | 
 22 |         article
 23 |           h1 I&apos;m<br>Wes Bos
 24 |           p: br
 25 |           p: img(src="images/canada-flag.png")
 26 | 
 27 |         article
 28 |           h2(style="font-size:60px;") These slides will be available shortly after this talk <br>I&apos;ll tweet the link out.
 29 |           img(src='images/Twitter_logo_white.png', width='300' style="margin:100px auto")
 30 | 
 31 |           h2
 32 |             a(href='http://twitter.com/wesbos', target='_blank') @wesbos
 33 | 
 34 |         article(style='background:white;')
 35 |           a(href='https://ES6.io/?utm_source=toolingtalk&utm_medium=link&utm_campaign=talkpromo')
 36 |             img.wide(src='https://ES6.io/images/es6-facebook-share.png')
 37 |           a(href='https://ES6.io/?utm_source=toolingtalk&utm_medium=link&utm_campaign=talkpromo') ES6.io
 38 | 
 39 | 
 40 |         article(style='background:white;')
 41 |           a(href='https://ReactForBeginners.com/?utm_source=toolingtalk&utm_medium=link&utm_campaign=talkpromo')
 42 |             img.wide(src='https://reactforbeginners.com/images/facebook-share.png')
 43 |           a(href='https://ReactForBeginners.com/?utm_source=toolingtalk&utm_medium=link&utm_campaign=talkpromo') ReactForBeginners.com
 44 | 
 45 |         article(style='background:white;')
 46 |           a(href='https://LearnNode.com/?utm_source=toolingtalk&utm_medium=link&utm_campaign=talkpromo')
 47 |             img.wide(src='https://learnnode.com/images/NODE/node-facebook-share.jpg')
 48 |           a(href='https://LearnNode.com/?utm_source=toolingtalk&utm_medium=link&utm_campaign=talkpromo') LearnNode.com
 49 | 
 50 |         article(style='background:white;')
 51 |           a(href='https://CSSGrid.io/?utm_source=toolingtalk&utm_medium=link&utm_campaign=talkpromo')
 52 |             img.wide(src='http://wes.io/qEI9/conte  nt')
 53 |           a(href='https://CSSGrid.io/?utm_source=toolingtalk&utm_medium=link&utm_campaign=talkpromo') CSSGrid.io
 54 | 
 55 |         article
 56 |           img.high(src="https://pbs.twimg.com/media/DLTTKRoXUAEwuZR.jpg:large")
 57 |           a(href='https://syntax.fm') Syntax.fm
 58 |         article
 59 |           h1 JavaScript is Always Evolving
 60 | 
 61 |         article
 62 |           h1 ES6
 63 | 
 64 |         article
 65 |           h1 ES2016 (ES7)
 66 | 
 67 |         article
 68 |           h1 ES2017 (ES8)
 69 | 
 70 |         article
 71 |           h1.huge New DOM Apis
 72 | 
 73 |         article
 74 |           h1 This Talk
 75 | 
 76 |         article
 77 |           h1 Reaaaady?
 78 |           p.sub.hl Let's go!
 79 | 
 80 |         article.section
 81 |           h1 Promises
 82 |           p.sub Not brand new, but let's do a quick review
 83 | 
 84 |         article
 85 |           h2 Promises are an IOU for something that will happen in the future
 86 | 
 87 |         article
 88 |           ul.build
 89 |             li AJAX call returning data
 90 |             li Access to a User's webcam
 91 |             li Resizing an image
 92 | 
 93 |         article
 94 |           h2 All of these things take time, we simply kick off the process and move along with our lives.
 95 | 
 96 |         article
 97 |           h1 But why do we do it this way?
 98 | 
 99 |         article
100 |           h1 JavaScript Waits for no one!
101 | 
102 |         article
103 |           h1 Almost Everything Is Asynchronous
104 | 
105 |         article
106 |           h2 Let's say we wanted to do a few things:
107 |           ul.build
108 |             li Make Coffee
109 |             li Drink Coffee
110 |             li Cook Breakfast
111 |             li Eat Breakfast
112 | 
113 |         article
114 |           p Do you need to finish making coffee before you can Start Breakfast?
115 |           p Would it make sense to wait until coffee is made and consumed before we even start cooking breakfast?
116 | 
117 |         article
118 |           p No - we want to start one thing, come back to it once it's finished, and deal with the result accordingly!
119 | 
120 |         article
121 |           img.high(src="./images/screenshots/mw8s.png")
122 | 
123 |         article
124 |           h2 Most new browser APIs are built on Promises, or Observables
125 |           p.sub More on Observables in a bit
126 | 
127 |         article
128 |           h2 fetch()
129 | 
130 |         article
131 |           img.wide(src="./images/screenshots/mvNc.png")
132 | 
133 |         article
134 |           h2 Axios
135 | 
136 |         article
137 |           img.wide(src="./images/screenshots/mvvk.png")
138 | 
139 |         article
140 |           h2 Many, many more
141 |           p.sub.flat PaymentRequest, getUserMedia(), Web Animation API
142 | 
143 |         article
144 |           h1 It's easy to make your own too!
145 | 
146 |         article
147 |           img.wide(src="./images/screenshots/mvlO.png")
148 | 
149 |         article
150 |           img.high(src="./images/screenshots/mw1Y.gif")
151 | 
152 | 
153 |         article
154 |           h1 Christmas Tree Callback Hell
155 | 
156 |         article
157 |           img.wide(src="./images/screenshots/mvjp.png")
158 | 
159 |         article
160 |           img.high(src="./images/screenshots/mul6.png")
161 | 
162 |         article
163 |           h2 we get it<br>Promises are great.
164 | 
165 |         article.section
166 |           h1 buuuuuuttt
167 | 
168 | 
169 |         article.section
170 |           h1 What's the deal with .then()?
171 |           p.sub It's still kinda callback-y
172 | 
173 |         article
174 |           h2 Any code that needs to come after the promise still needs to be in the final .then() callback :\
175 | 
176 |         article.section
177 |           h1 Async + Await
178 | 
179 |         article.section
180 |           h2 Async + Await still is promises, but with a really nice syntax
181 | 
182 |         article
183 |           img.high(src="./images/screenshots/mul6.png")
184 | 
185 |         article
186 |           img.high(src="./images/screenshots/mv6R.png")
187 | 
188 |         article
189 |           h1 Let's break it down
190 | 
191 |         article
192 |           h1.big JavaScript is almost entirely asynchronous / non-blocking
193 | 
194 |         article
195 |           h1 great! - But it's hard to read/write
196 | 
197 |         article
198 |           h1 PHP
199 |           img.wide(src="./images/screenshots/mufS.png")
200 | 
201 |         article
202 |           h1 JS
203 |           img.wide(src="./images/screenshots/mw88.png")
204 | 
205 |         article
206 |           .build
207 |             h2 😕😕😕
208 |             p The PHP is easier to read
209 |             p The JS is more performant
210 |             p I'm not really happy
211 | 
212 |         article
213 |           h1 Synchronous looking code, without the wait.
214 | 
215 |         article
216 |           h1 How does it work?
217 | 
218 |         article
219 |           h1 1. Mark it as Async
220 | 
221 |         article
222 |           img.wide(src="./images/screenshots/mvxm.png")
223 | 
224 |         article
225 |           h1 2. await inside your async fn
226 | 
227 |         article
228 |           img.wide(src="./images/screenshots/mvLf.png")
229 | 
230 |         article
231 |          h1 Best of Both Worlds!
232 | 
233 |         article
234 |          h1 Another Example
235 | 
236 |         article
237 |           h2 Slow...
238 |           img.wide(src="./images/screenshots/mvHv.png")
239 | 
240 |         article
241 |           h2 Why wait for Wes?
242 |           p.sub Remember, async+await is just promises
243 | 
244 |         article
245 |           img.wide(src="./images/screenshots/mvPr.png", alt="")
246 | 
247 |         article
248 |           h1 Error Handling
249 |           p.sub A few options (which we don't have time for)...
250 | 
251 |         article.section
252 |           h1 Done with Async+ Await!
253 |           p.sub Let's see more new stuff!
254 | 
255 |         article.section
256 |           h1 Intersection Observer
257 | 
258 |         article.section
259 |           h2 How do you know when an element is on screen?
260 | 
261 |         article
262 |           video.high(src="./images/viewport.mp4" loop controls)
263 | 
264 |         article
265 |           p With Intersection Observer, you can be alerted when an element is fully or partially scrolled into or out of view.
266 | 
267 |         article
268 |           h2 Uses
269 |           ul.build
270 |             li Animate elements in on scroll
271 |             li Play video on scroll in
272 |             li Lazy Load images
273 |             li Record views for ads beyond fold
274 |             li Use with sticky headers
275 | 
276 |         article
277 |           video.high(src="./images/intersection-observer.mp4" loop muted)
278 | 
279 |         article
280 |           video.high(src="./images/sticky.mp4" loop controls)
281 |           a(href="https://developers.google.com/web/updates/2017/09/sticky-headers") Google Developers
282 | 
283 |         article
284 |           h1 Ready for Meta?
285 | 
286 |         article
287 |           video(src="./images/meta.mp4" loop controls)
288 | 
289 |         article
290 |           h1 How does it work?!
291 | 
292 |         article
293 |           h2 1. Setup some Options
294 |           img.wide(src="./images/screenshots/muk4.png")
295 | 
296 |         article
297 |           h2 2. Create an empty Observer
298 |           img.wide(src="./images/screenshots/mupq.png")
299 | 
300 |         article
301 |           h2 3. Give it a callback
302 |           img.wide(src="./images/screenshots/mvSI.png")
303 | 
304 |         article
305 |           h2 4. Observe Away!
306 |           img.wide(src="./images/screenshots/mvbJ.png")
307 | 
308 |         article
309 |           img.wide(src="./images/screenshots/mvMC.png")
310 | 
311 |         article.section
312 |           h1 Payment Request API
313 | 
314 |         article
315 |           h2 Every single online store needs to reinvent the checkout form.
316 | 
317 |         article
318 |           h2 We're all just trying to do the same thing - collect payment info from the user.
319 | 
320 |         article
321 |           h2 The Payment Request is a standardized browser API to collect billing and shipping information from your users.
322 | 
323 |         article
324 |           video.high(style="width: auto; height: 100%; min-width: 0;" src="./images/paymentRequest.mp4" controls loop)
325 | 
326 |         article
327 |           img.high(src="https://developers.google.com/web/fundamentals/payments/images/state01-receipt-view.png")
328 |           a(href="https://developers.google.com/web/fundamentals/payments/") [Google Developers]
329 | 
330 |         article
331 |           video.high(style="width: auto; height: 100%; min-width: 0;" src="./images/webmart.webm" controls loop)
332 | 
333 |         article
334 |           video.high(style="width: auto; height: 100%; min-width: 0;" src="./images/applepay.mp4" controls loop)
335 | 
336 |         article
337 |           h2 So, Does the Browser Charge Your Card?
338 |           p.sub nope!
339 | 
340 |         article
341 |           h2 Is it secure?
342 |           p.sub The same, or more!
343 | 
344 |         article.section
345 |           h1 getUserMedia()
346 | 
347 |         article
348 |           h2 Not new at all
349 | 
350 |         article
351 |           img.high(src="./images/screenshots/mw55.png")
352 | 
353 |         article
354 |           h1 BUT
355 |           p.sub Safari Doesn't give a shit
356 | 
357 |         article
358 |           h1 September 2017 / iOS11
359 |           p.sub playsinline and getUserMedia()
360 | 
361 |         article
362 |           video.high(style="width: auto; height: 100%; min-width: 0;" src="./images/gum.mp4" controls loop)
363 | 
364 |         article
365 |           h2 Promise Based!
366 |           img.wide(src="./images/screenshots/mv93.png")
367 | 
368 |         article
369 |           img.high(src="./images/screenshots/musk.png")
370 | 
371 |         article.section
372 |           h1 Resize Observer
373 |           p.sub per-element resize events!
374 | 
375 |         article
376 |           video.high(style="width: auto; height: 100%; min-width: 0;" src="./images/resizeObserver.mp4" controls loop)
377 |         article
378 |           img.high(src="./images/screenshots/mvNd.png")
379 | 
380 | 
381 |         article.section
382 |           h1 Gateway Drug to Element Queries!
383 | 
384 |         article
385 |           img.high(src="./images/screenshots/mvjO.png")
386 | 
387 |         article
388 |           video.high(style="width: auto; height: 100%; min-width: 0;" src="./images/resize-video-player.mp4" controls loop)
389 | 
390 |         article.section
391 |           h1 WOWOWOWOWOW!
392 |           p.sub Some cool stuff!
393 | 
394 |         article.section
395 |           h1 What About Support?
396 | 
397 |         article.section
398 |           h1 <strong>Async + Await</strong> via Babel
399 | 
400 |         article.section
401 |           h1 <strong>Resize Observer</strong> Polyfillable, but expensive.
402 | 
403 |         article.section
404 |           h1 <strong>Intersection Observer</strong> has an official W3 polyfill
405 | 
406 |         article.section
407 |           h1 <strong>Web Payment</strong> is easily polyfillable
408 |           p.sub or Fallback to checkout form
409 | 
410 |         article.section
411 |           h1 <strong>getUserMedia</strong> is everywhere
412 | 
413 |         article
414 |           h1.big Thanks<br>Folks!
415 |           a(href="http://twitter.com/wesbos") @wesbos
416 |           a(href="http://instagram.com/wesbos") Insta @wesbos
417 |           a(href="http://wesbos.com") WesBos.com
418 |       script(src='scripts.js')


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "modern-workflow-and-tooling",
 3 |   "version": "1.0.0",
 4 |   "description": "",
 5 |   "main": "slides.js",
 6 |   "directories": {
 7 |     "example": "examples"
 8 |   },
 9 |   "scripts": {
10 |     "start": "gulp"
11 |   },
12 |   "author": "",
13 |   "license": "ISC",
14 |   "devDependencies": {
15 |     "browser-sync": "^2.18.13",
16 |     "gulp": "^3.9.1",
17 |     "gulp-autoprefixer": "^4.0.0",
18 |     "gulp-jade": "^1.1.0",
19 |     "gulp-load-plugins": "^1.5.0",
20 |     "gulp-plumber": "^1.1.0",
21 |     "gulp-stylus": "^2.6.0",
22 |     "request": "^2.83.0"
23 |   }
24 | }
25 | 


--------------------------------------------------------------------------------
/prettify.js:
--------------------------------------------------------------------------------
 1 | !function(){/*
 2 | 
 3 |  Copyright (C) 2013 Google Inc.
 4 | 
 5 |  Licensed under the Apache License, Version 2.0 (the "License");
 6 |  you may not use this file except in compliance with the License.
 7 |  You may obtain a copy of the License at
 8 | 
 9 |       http://www.apache.org/licenses/LICENSE-2.0
10 | 
11 |  Unless required by applicable law or agreed to in writing, software
12 |  distributed under the License is distributed on an "AS IS" BASIS,
13 |  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
14 |  See the License for the specific language governing permissions and
15 |  limitations under the License.
16 | 
17 |  Copyright (C) 2006 Google Inc.
18 | 
19 |  Licensed under the Apache License, Version 2.0 (the "License");
20 |  you may not use this file except in compliance with the License.
21 |  You may obtain a copy of the License at
22 | 
23 |       http://www.apache.org/licenses/LICENSE-2.0
24 | 
25 |  Unless required by applicable law or agreed to in writing, software
26 |  distributed under the License is distributed on an "AS IS" BASIS,
27 |  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
28 |  See the License for the specific language governing permissions and
29 |  limitations under the License.
30 | */
31 | (function(){function ba(g){function k(){try{M.doScroll("left")}catch(g){t.setTimeout(k,50);return}z("poll")}function z(k){if("readystatechange"!=k.type||"complete"==A.readyState)("load"==k.type?t:A)[B](p+k.type,z,!1),!q&&(q=!0)&&g.call(t,k.type||k)}var Y=A.addEventListener,q=!1,C=!0,x=Y?"addEventListener":"attachEvent",B=Y?"removeEventListener":"detachEvent",p=Y?"":"on";if("complete"==A.readyState)g.call(t,"lazy");else{if(A.createEventObject&&M.doScroll){try{C=!t.frameElement}catch(da){}C&&k()}A[x](p+
32 | "DOMContentLoaded",z,!1);A[x](p+"readystatechange",z,!1);t[x](p+"load",z,!1)}}function U(){V&&ba(function(){var g=N.length;ca(g?function(){for(var k=0;k<g;++k)(function(g){t.setTimeout(function(){t.exports[N[g]].apply(t,arguments)},0)})(k)}:void 0)})}for(var t=window,A=document,M=A.documentElement,O=A.head||A.getElementsByTagName("head")[0]||M,B="",F=A.getElementsByTagName("script"),q=F.length;0<=--q;){var P=F[q],Z=P.src.match(/^[^?#]*\/run_prettify\.js(\?[^#]*)?(?:#.*)?$/);if(Z){B=Z[1]||"";P.parentNode.removeChild(P);
33 | break}}var V=!0,H=[],Q=[],N=[];B.replace(/[?&]([^&=]+)=([^&]+)/g,function(g,k,z){z=decodeURIComponent(z);k=decodeURIComponent(k);"autorun"==k?V=!/^[0fn]/i.test(z):"lang"==k?H.push(z):"skin"==k?Q.push(z):"callback"==k&&N.push(z)});q=0;for(B=H.length;q<B;++q)(function(){var g=A.createElement("script");g.onload=g.onerror=g.onreadystatechange=function(){!g||g.readyState&&!/loaded|complete/.test(g.readyState)||(g.onerror=g.onload=g.onreadystatechange=null,--T,T||t.setTimeout(U,0),g.parentNode&&g.parentNode.removeChild(g),
34 | g=null)};g.type="text/javascript";g.src="https://cdn.rawgit.com/google/code-prettify/master/loader/lang-"+encodeURIComponent(H[q])+".js";O.insertBefore(g,O.firstChild)})(H[q]);for(var T=H.length,F=[],q=0,B=Q.length;q<B;++q)F.push("https://cdn.rawgit.com/google/code-prettify/master/loader/skins/"+encodeURIComponent(Q[q])+".css");F.push("https://cdn.rawgit.com/google/code-prettify/master/loader/prettify.css");(function(g){function k(q){if(q!==z){var t=A.createElement("link");t.rel="stylesheet";t.type=
35 | "text/css";q+1<z&&(t.error=t.onerror=function(){k(q+1)});t.href=g[q];O.appendChild(t)}}var z=g.length;k(0)})(F);var ca=function(){window.PR_SHOULD_USE_CONTINUATION=!0;var g;(function(){function k(a){function d(e){var b=e.charCodeAt(0);if(92!==b)return b;var a=e.charAt(1);return(b=W[a])?b:"0"<=a&&"7">=a?parseInt(e.substring(1),8):"u"===a||"x"===a?parseInt(e.substring(2),16):e.charCodeAt(1)}function f(e){if(32>e)return(16>e?"\\x0":"\\x")+e.toString(16);e=String.fromCharCode(e);return"\\"===e||"-"===
36 | e||"]"===e||"^"===e?"\\"+e:e}function b(e){var b=e.substring(1,e.length-1).match(/\\u[0-9A-Fa-f]{4}|\\x[0-9A-Fa-f]{2}|\\[0-3][0-7]{0,2}|\\[0-7]{1,2}|\\[\s\S]|-|[^-\\]/g);e=[];var a="^"===b[0],c=["["];a&&c.push("^");for(var a=a?1:0,h=b.length;a<h;++a){var l=b[a];if(/\\[bdsw]/i.test(l))c.push(l);else{var l=d(l),n;a+2<h&&"-"===b[a+1]?(n=d(b[a+2]),a+=2):n=l;e.push([l,n]);65>n||122<l||(65>n||90<l||e.push([Math.max(65,l)|32,Math.min(n,90)|32]),97>n||122<l||e.push([Math.max(97,l)&-33,Math.min(n,122)&-33]))}}e.sort(function(e,
37 | a){return e[0]-a[0]||a[1]-e[1]});b=[];h=[];for(a=0;a<e.length;++a)l=e[a],l[0]<=h[1]+1?h[1]=Math.max(h[1],l[1]):b.push(h=l);for(a=0;a<b.length;++a)l=b[a],c.push(f(l[0])),l[1]>l[0]&&(l[1]+1>l[0]&&c.push("-"),c.push(f(l[1])));c.push("]");return c.join("")}function g(e){for(var a=e.source.match(/(?:\[(?:[^\x5C\x5D]|\\[\s\S])*\]|\\u[A-Fa-f0-9]{4}|\\x[A-Fa-f0-9]{2}|\\[0-9]+|\\[^ux0-9]|\(\?[:!=]|[\(\)\^]|[^\x5B\x5C\(\)\^]+)/g),c=a.length,d=[],h=0,l=0;h<c;++h){var n=a[h];"("===n?++l:"\\"===n.charAt(0)&&(n=
38 | +n.substring(1))&&(n<=l?d[n]=-1:a[h]=f(n))}for(h=1;h<d.length;++h)-1===d[h]&&(d[h]=++k);for(l=h=0;h<c;++h)n=a[h],"("===n?(++l,d[l]||(a[h]="(?:")):"\\"===n.charAt(0)&&(n=+n.substring(1))&&n<=l&&(a[h]="\\"+d[n]);for(h=0;h<c;++h)"^"===a[h]&&"^"!==a[h+1]&&(a[h]="");if(e.ignoreCase&&I)for(h=0;h<c;++h)n=a[h],e=n.charAt(0),2<=n.length&&"["===e?a[h]=b(n):"\\"!==e&&(a[h]=n.replace(/[a-zA-Z]/g,function(a){a=a.charCodeAt(0);return"["+String.fromCharCode(a&-33,a|32)+"]"}));return a.join("")}for(var k=0,I=!1,
39 | m=!1,J=0,c=a.length;J<c;++J){var r=a[J];if(r.ignoreCase)m=!0;else if(/[a-z]/i.test(r.source.replace(/\\u[0-9a-f]{4}|\\x[0-9a-f]{2}|\\[^ux]/gi,""))){I=!0;m=!1;break}}for(var W={b:8,t:9,n:10,v:11,f:12,r:13},u=[],J=0,c=a.length;J<c;++J){r=a[J];if(r.global||r.multiline)throw Error(""+r);u.push("(?:"+g(r)+")")}return new RegExp(u.join("|"),m?"gi":"g")}function q(a,d){function f(a){var c=a.nodeType;if(1==c){if(!b.test(a.className)){for(c=a.firstChild;c;c=c.nextSibling)f(c);c=a.nodeName.toLowerCase();if("br"===
40 | c||"li"===c)g[m]="\n",I[m<<1]=k++,I[m++<<1|1]=a}}else if(3==c||4==c)c=a.nodeValue,c.length&&(c=d?c.replace(/\r\n?/g,"\n"):c.replace(/[ \t\r\n]+/g," "),g[m]=c,I[m<<1]=k,k+=c.length,I[m++<<1|1]=a)}var b=/(?:^|\s)nocode(?:\s|$)/,g=[],k=0,I=[],m=0;f(a);return{a:g.join("").replace(/\n$/,""),c:I}}function t(a,d,f,b,g){f&&(a={h:a,l:1,j:null,m:null,a:f,c:null,i:d,g:null},b(a),g.push.apply(g,a.g))}function A(a){for(var d=void 0,f=a.firstChild;f;f=f.nextSibling)var b=f.nodeType,d=1===b?d?a:f:3===b?T.test(f.nodeValue)?
41 | a:d:d;return d===a?void 0:d}function C(a,d){function f(a){for(var m=a.i,k=a.h,c=[m,"pln"],r=0,W=a.a.match(g)||[],u={},e=0,q=W.length;e<q;++e){var D=W[e],w=u[D],h=void 0,l;if("string"===typeof w)l=!1;else{var n=b[D.charAt(0)];if(n)h=D.match(n[1]),w=n[0];else{for(l=0;l<p;++l)if(n=d[l],h=D.match(n[1])){w=n[0];break}h||(w="pln")}!(l=5<=w.length&&"lang-"===w.substring(0,5))||h&&"string"===typeof h[1]||(l=!1,w="src");l||(u[D]=w)}n=r;r+=D.length;if(l){l=h[1];var E=D.indexOf(l),G=E+l.length;h[2]&&(G=D.length-
42 | h[2].length,E=G-l.length);w=w.substring(5);t(k,m+n,D.substring(0,E),f,c);t(k,m+n+E,l,F(w,l),c);t(k,m+n+G,D.substring(G),f,c)}else c.push(m+n,w)}a.g=c}var b={},g;(function(){for(var f=a.concat(d),m=[],p={},c=0,r=f.length;c<r;++c){var q=f[c],u=q[3];if(u)for(var e=u.length;0<=--e;)b[u.charAt(e)]=q;q=q[1];u=""+q;p.hasOwnProperty(u)||(m.push(q),p[u]=null)}m.push(/[\0-\uffff]/);g=k(m)})();var p=d.length;return f}function x(a){var d=[],f=[];a.tripleQuotedStrings?d.push(["str",/^(?:\'\'\'(?:[^\'\\]|\\[\s\S]|\'{1,2}(?=[^\']))*(?:\'\'\'|$)|\"\"\"(?:[^\"\\]|\\[\s\S]|\"{1,2}(?=[^\"]))*(?:\"\"\"|$)|\'(?:[^\\\']|\\[\s\S])*(?:\'|$)|\"(?:[^\\\"]|\\[\s\S])*(?:\"|$))/,
43 | null,"'\""]):a.multiLineStrings?d.push(["str",/^(?:\'(?:[^\\\']|\\[\s\S])*(?:\'|$)|\"(?:[^\\\"]|\\[\s\S])*(?:\"|$)|\`(?:[^\\\`]|\\[\s\S])*(?:\`|$))/,null,"'\"`"]):d.push(["str",/^(?:\'(?:[^\\\'\r\n]|\\.)*(?:\'|$)|\"(?:[^\\\"\r\n]|\\.)*(?:\"|$))/,null,"\"'"]);a.verbatimStrings&&f.push(["str",/^@\"(?:[^\"]|\"\")*(?:\"|$)/,null]);var b=a.hashComments;b&&(a.cStyleComments?(1<b?d.push(["com",/^#(?:##(?:[^#]|#(?!##))*(?:###|$)|.*)/,null,"#"]):d.push(["com",/^#(?:(?:define|e(?:l|nd)if|else|error|ifn?def|include|line|pragma|undef|warning)\b|[^\r\n]*)/,
44 | null,"#"]),f.push(["str",/^<(?:(?:(?:\.\.\/)*|\/?)(?:[\w-]+(?:\/[\w-]+)+)?[\w-]+\.h(?:h|pp|\+\+)?|[a-z]\w*)>/,null])):d.push(["com",/^#[^\r\n]*/,null,"#"]));a.cStyleComments&&(f.push(["com",/^\/\/[^\r\n]*/,null]),f.push(["com",/^\/\*[\s\S]*?(?:\*\/|$)/,null]));if(b=a.regexLiterals){var g=(b=1<b?"":"\n\r")?".":"[\\S\\s]";f.push(["lang-regex",RegExp("^(?:^^\\.?|[+-]|[!=]=?=?|\\#|%=?|&&?=?|\\(|\\*=?|[+\\-]=|->|\\/=?|::?|<<?=?|>>?>?=?|,|;|\\?|@|\\[|~|{|\\^\\^?=?|\\|\\|?=?|break|case|continue|delete|do|else|finally|instanceof|return|throw|try|typeof)\\s*("+
45 | ("/(?=[^/*"+b+"])(?:[^/\\x5B\\x5C"+b+"]|\\x5C"+g+"|\\x5B(?:[^\\x5C\\x5D"+b+"]|\\x5C"+g+")*(?:\\x5D|$))+/")+")")])}(b=a.types)&&f.push(["typ",b]);b=(""+a.keywords).replace(/^ | $/g,"");b.length&&f.push(["kwd",new RegExp("^(?:"+b.replace(/[\s,]+/g,"|")+")\\b"),null]);d.push(["pln",/^\s+/,null," \r\n\t\u00a0"]);b="^.[^\\s\\w.$@'\"`/\\\\]*";a.regexLiterals&&(b+="(?!s*/)");f.push(["lit",/^@[a-z_$][a-z_$@0-9]*/i,null],["typ",/^(?:[@_]?[A-Z]+[a-z][A-Za-z_$@0-9]*|\w+_t\b)/,null],["pln",/^[a-z_$][a-z_$@0-9]*/i,
46 | null],["lit",/^(?:0x[a-f0-9]+|(?:\d(?:_\d+)*\d*(?:\.\d*)?|\.\d\+)(?:e[+\-]?\d+)?)[a-z]*/i,null,"0123456789"],["pln",/^\\[\s\S]?/,null],["pun",new RegExp(b),null]);return C(d,f)}function B(a,d,f){function b(a){var c=a.nodeType;if(1==c&&!k.test(a.className))if("br"===a.nodeName)g(a),a.parentNode&&a.parentNode.removeChild(a);else for(a=a.firstChild;a;a=a.nextSibling)b(a);else if((3==c||4==c)&&f){var d=a.nodeValue,p=d.match(q);p&&(c=d.substring(0,p.index),a.nodeValue=c,(d=d.substring(p.index+p[0].length))&&
47 | a.parentNode.insertBefore(m.createTextNode(d),a.nextSibling),g(a),c||a.parentNode.removeChild(a))}}function g(a){function b(a,c){var d=c?a.cloneNode(!1):a,n=a.parentNode;if(n){var n=b(n,1),e=a.nextSibling;n.appendChild(d);for(var f=e;f;f=e)e=f.nextSibling,n.appendChild(f)}return d}for(;!a.nextSibling;)if(a=a.parentNode,!a)return;a=b(a.nextSibling,0);for(var d;(d=a.parentNode)&&1===d.nodeType;)a=d;c.push(a)}for(var k=/(?:^|\s)nocode(?:\s|$)/,q=/\r\n?|\n/,m=a.ownerDocument,p=m.createElement("li");a.firstChild;)p.appendChild(a.firstChild);
48 | for(var c=[p],r=0;r<c.length;++r)b(c[r]);d===(d|0)&&c[0].setAttribute("value",d);var t=m.createElement("ol");t.className="linenums";d=Math.max(0,d-1|0)||0;for(var r=0,u=c.length;r<u;++r)p=c[r],p.className="L"+(r+d)%10,p.firstChild||p.appendChild(m.createTextNode("\u00a0")),t.appendChild(p);a.appendChild(t)}function p(a,d){for(var f=d.length;0<=--f;){var b=d[f];X.hasOwnProperty(b)?R.console&&console.warn("cannot override language handler %s",b):X[b]=a}}function F(a,d){a&&X.hasOwnProperty(a)||(a=/^\s*</.test(d)?
49 | "default-markup":"default-code");return X[a]}function H(a){var d=a.j;try{var f=q(a.h,a.l),b=f.a;a.a=b;a.c=f.c;a.i=0;F(d,b)(a);var g=/\bMSIE\s(\d+)/.exec(navigator.userAgent),g=g&&8>=+g[1],d=/\n/g,p=a.a,k=p.length,f=0,m=a.c,t=m.length,b=0,c=a.g,r=c.length,x=0;c[r]=k;var u,e;for(e=u=0;e<r;)c[e]!==c[e+2]?(c[u++]=c[e++],c[u++]=c[e++]):e+=2;r=u;for(e=u=0;e<r;){for(var A=c[e],D=c[e+1],w=e+2;w+2<=r&&c[w+1]===D;)w+=2;c[u++]=A;c[u++]=D;e=w}c.length=u;var h=a.h;a="";h&&(a=h.style.display,h.style.display="none");
50 | try{for(;b<t;){var l=m[b+2]||k,n=c[x+2]||k,w=Math.min(l,n),E=m[b+1],G;if(1!==E.nodeType&&(G=p.substring(f,w))){g&&(G=G.replace(d,"\r"));E.nodeValue=G;var aa=E.ownerDocument,v=aa.createElement("span");v.className=c[x+1];var B=E.parentNode;B.replaceChild(v,E);v.appendChild(E);f<l&&(m[b+1]=E=aa.createTextNode(p.substring(w,l)),B.insertBefore(E,v.nextSibling))}f=w;f>=l&&(b+=2);f>=n&&(x+=2)}}finally{h&&(h.style.display=a)}}catch(y){R.console&&console.log(y&&y.stack||y)}}var R=window,K=["break,continue,do,else,for,if,return,while"],
51 | L=[[K,"auto,case,char,const,default,double,enum,extern,float,goto,inline,int,long,register,short,signed,sizeof,static,struct,switch,typedef,union,unsigned,void,volatile"],"catch,class,delete,false,import,new,operator,private,protected,public,this,throw,true,try,typeof"],S=[L,"alignof,align_union,asm,axiom,bool,concept,concept_map,const_cast,constexpr,decltype,delegate,dynamic_cast,explicit,export,friend,generic,late_check,mutable,namespace,nullptr,property,reinterpret_cast,static_assert,static_cast,template,typeid,typename,using,virtual,where"],
52 | M=[L,"abstract,assert,boolean,byte,extends,finally,final,implements,import,instanceof,interface,null,native,package,strictfp,super,synchronized,throws,transient"],N=[L,"abstract,as,base,bool,by,byte,checked,decimal,delegate,descending,dynamic,event,finally,fixed,foreach,from,group,implicit,in,interface,internal,into,is,let,lock,null,object,out,override,orderby,params,partial,readonly,ref,sbyte,sealed,stackalloc,string,select,uint,ulong,unchecked,unsafe,ushort,var,virtual,where"],L=[L,"debugger,eval,export,function,get,instanceof,null,set,undefined,var,with,Infinity,NaN"],
53 | O=[K,"and,as,assert,class,def,del,elif,except,exec,finally,from,global,import,in,is,lambda,nonlocal,not,or,pass,print,raise,try,with,yield,False,True,None"],P=[K,"alias,and,begin,case,class,def,defined,elsif,end,ensure,false,in,module,next,nil,not,or,redo,rescue,retry,self,super,then,true,undef,unless,until,when,yield,BEGIN,END"],K=[K,"case,done,elif,esac,eval,fi,function,in,local,set,then,until"],Q=/^(DIR|FILE|vector|(de|priority_)?queue|list|stack|(const_)?iterator|(multi)?(set|map)|bitset|u?(int|float)\d*)\b/,
54 | T=/\S/,U=x({keywords:[S,N,M,L,"caller,delete,die,do,dump,elsif,eval,exit,foreach,for,goto,if,import,last,local,my,next,no,our,print,package,redo,require,sub,undef,unless,until,use,wantarray,while,BEGIN,END",O,P,K],hashComments:!0,cStyleComments:!0,multiLineStrings:!0,regexLiterals:!0}),X={};p(U,["default-code"]);p(C([],[["pln",/^[^<?]+/],["dec",/^<!\w[^>]*(?:>|$)/],["com",/^<\!--[\s\S]*?(?:-\->|$)/],["lang-",/^<\?([\s\S]+?)(?:\?>|$)/],["lang-",/^<%([\s\S]+?)(?:%>|$)/],["pun",/^(?:<[%?]|[%?]>)/],["lang-",
55 | /^<xmp\b[^>]*>([\s\S]+?)<\/xmp\b[^>]*>/i],["lang-js",/^<script\b[^>]*>([\s\S]*?)(<\/script\b[^>]*>)/i],["lang-css",/^<style\b[^>]*>([\s\S]*?)(<\/style\b[^>]*>)/i],["lang-in.tag",/^(<\/?[a-z][^<>]*>)/i]]),"default-markup htm html mxml xhtml xml xsl".split(" "));p(C([["pln",/^[\s]+/,null," \t\r\n"],["atv",/^(?:\"[^\"]*\"?|\'[^\']*\'?)/,null,"\"'"]],[["tag",/^^<\/?[a-z](?:[\w.:-]*\w)?|\/?>$/i],["atn",/^(?!style[\s=]|on)[a-z](?:[\w:-]*\w)?/i],["lang-uq.val",/^=\s*([^>\'\"\s]*(?:[^>\'\"\s\/]|\/(?=\s)))/],
56 | ["pun",/^[=<>\/]+/],["lang-js",/^on\w+\s*=\s*\"([^\"]+)\"/i],["lang-js",/^on\w+\s*=\s*\'([^\']+)\'/i],["lang-js",/^on\w+\s*=\s*([^\"\'>\s]+)/i],["lang-css",/^style\s*=\s*\"([^\"]+)\"/i],["lang-css",/^style\s*=\s*\'([^\']+)\'/i],["lang-css",/^style\s*=\s*([^\"\'>\s]+)/i]]),["in.tag"]);p(C([],[["atv",/^[\s\S]+/]]),["uq.val"]);p(x({keywords:S,hashComments:!0,cStyleComments:!0,types:Q}),"c cc cpp cxx cyc m".split(" "));p(x({keywords:"null,true,false"}),["json"]);p(x({keywords:N,hashComments:!0,cStyleComments:!0,
57 | verbatimStrings:!0,types:Q}),["cs"]);p(x({keywords:M,cStyleComments:!0}),["java"]);p(x({keywords:K,hashComments:!0,multiLineStrings:!0}),["bash","bsh","csh","sh"]);p(x({keywords:O,hashComments:!0,multiLineStrings:!0,tripleQuotedStrings:!0}),["cv","py","python"]);p(x({keywords:"caller,delete,die,do,dump,elsif,eval,exit,foreach,for,goto,if,import,last,local,my,next,no,our,print,package,redo,require,sub,undef,unless,until,use,wantarray,while,BEGIN,END",hashComments:!0,multiLineStrings:!0,regexLiterals:2}),
58 | ["perl","pl","pm"]);p(x({keywords:P,hashComments:!0,multiLineStrings:!0,regexLiterals:!0}),["rb","ruby"]);p(x({keywords:L,cStyleComments:!0,regexLiterals:!0}),["javascript","js"]);p(x({keywords:"all,and,by,catch,class,else,extends,false,finally,for,if,in,is,isnt,loop,new,no,not,null,of,off,on,or,return,super,then,throw,true,try,unless,until,when,while,yes",hashComments:3,cStyleComments:!0,multilineStrings:!0,tripleQuotedStrings:!0,regexLiterals:!0}),["coffee"]);p(C([],[["str",/^[\s\S]+/]]),["regex"]);
59 | var V=R.PR={createSimpleLexer:C,registerLangHandler:p,sourceDecorator:x,PR_ATTRIB_NAME:"atn",PR_ATTRIB_VALUE:"atv",PR_COMMENT:"com",PR_DECLARATION:"dec",PR_KEYWORD:"kwd",PR_LITERAL:"lit",PR_NOCODE:"nocode",PR_PLAIN:"pln",PR_PUNCTUATION:"pun",PR_SOURCE:"src",PR_STRING:"str",PR_TAG:"tag",PR_TYPE:"typ",prettyPrintOne:function(a,d,f){f=f||!1;d=d||null;var b=document.createElement("div");b.innerHTML="<pre>"+a+"</pre>";b=b.firstChild;f&&B(b,f,!0);H({j:d,m:f,h:b,l:1,a:null,i:null,c:null,g:null});return b.innerHTML},
60 | prettyPrint:g=g=function(a,d){function f(){for(var b=R.PR_SHOULD_USE_CONTINUATION?c.now()+250:Infinity;r<p.length&&c.now()<b;r++){for(var d=p[r],k=h,q=d;q=q.previousSibling;){var m=q.nodeType,v=(7===m||8===m)&&q.nodeValue;if(v?!/^\??prettify\b/.test(v):3!==m||/\S/.test(q.nodeValue))break;if(v){k={};v.replace(/\b(\w+)=([\w:.%+-]+)/g,function(a,b,c){k[b]=c});break}}q=d.className;if((k!==h||u.test(q))&&!e.test(q)){m=!1;for(v=d.parentNode;v;v=v.parentNode)if(w.test(v.tagName)&&v.className&&u.test(v.className)){m=
61 | !0;break}if(!m){d.className+=" prettyprinted";m=k.lang;if(!m){var m=q.match(t),C;!m&&(C=A(d))&&z.test(C.tagName)&&(m=C.className.match(t));m&&(m=m[1])}if(x.test(d.tagName))v=1;else var v=d.currentStyle,y=g.defaultView,v=(v=v?v.whiteSpace:y&&y.getComputedStyle?y.getComputedStyle(d,null).getPropertyValue("white-space"):0)&&"pre"===v.substring(0,3);y=k.linenums;(y="true"===y||+y)||(y=(y=q.match(/\blinenums\b(?::(\d+))?/))?y[1]&&y[1].length?+y[1]:!0:!1);y&&B(d,y,v);H({j:m,h:d,m:y,l:v,a:null,i:null,c:null,
62 | g:null})}}}r<p.length?R.setTimeout(f,250):"function"===typeof a&&a()}for(var b=d||document.body,g=b.ownerDocument||document,b=[b.getElementsByTagName("pre"),b.getElementsByTagName("code"),b.getElementsByTagName("xmp")],p=[],k=0;k<b.length;++k)for(var m=0,q=b[k].length;m<q;++m)p.push(b[k][m]);var b=null,c=Date;c.now||(c={now:function(){return+new Date}});var r=0,t=/\blang(?:uage)?-([\w.]+)(?!\S)/,u=/\bprettyprint\b/,e=/\bprettyprinted\b/,x=/pre|xmp/i,z=/^code$/i,w=/^(?:pre|code|xmp)$/i,h={};f()}},
63 | S=R.define;"function"===typeof S&&S.amd&&S("google-code-prettify",[],function(){return V})})();return g}();T||t.setTimeout(U,0)})();}()
64 | 


--------------------------------------------------------------------------------
/readme.md:
--------------------------------------------------------------------------------
1 | # Some Cool JS Stuff Talk
2 | 
3 | cool eh
4 | 


--------------------------------------------------------------------------------
/scripts.js:
--------------------------------------------------------------------------------
 1 | if (navigator.userAgent.includes('Firefox')) {
 2 |   document.body.classList.add('firefox');
 3 | }
 4 | 
 5 | const options = {
 6 |   threshold: [0, 1.0],
 7 | };
 8 | 
 9 | const callback = entries => {
10 |   entries.forEach(entry => {
11 |     if (entry.isIntersecting && entry.target.parentElement.classList.contains('current')) {
12 |       entry.target.play();
13 |     } else {
14 |       entry.target.pause();
15 |     }
16 |   });
17 | };
18 | 
19 | const observer = new IntersectionObserver(callback, options);
20 | 
21 | // get a list of all videos on the page
22 | const videos = document.querySelectorAll('video');
23 | // Observe each of those elements
24 | videos.forEach(video => observer.observe(video));
25 | 


--------------------------------------------------------------------------------
/slides.js:
--------------------------------------------------------------------------------
  1 | /*
  2 |   Google HTML5 slides template
  3 | 
  4 |   Authors: Luke Mahé (code)
  5 |            Marcin Wichary (code and design)
  6 | 
  7 |            Dominic Mazzoni (browser compatibility)
  8 |            Charles Chen (ChromeVox support)
  9 | 
 10 |   URL: http://code.google.com/p/html5slides/
 11 | */
 12 | 
 13 | // var PERMANENT_URL_PREFIX = 'http://localhost/demos/talks/snow/';
 14 | 
 15 | let PERMANENT_URL_PREFIX = window.location.origin + window.location.pathname;
 16 | 
 17 | // var PERMANENT_URL_PREFIX = window.location.href.split('/index.html')[0] + '/'
 18 | 
 19 | let SLIDE_CLASSES = ['far-past', 'past', 'current', 'next', 'far-next'];
 20 | 
 21 | let PM_TOUCH_SENSITIVITY = 15;
 22 | 
 23 | let curSlide;
 24 | 
 25 | /* ---------------------------------------------------------------------- */
 26 | /* classList polyfill by Eli Grey
 27 |  * (http://purl.eligrey.com/github/classList.js/blob/master/classList.js) */
 28 | 
 29 | if (typeof document !== 'undefined' && !('classList' in document.createElement('a'))) {
 30 | 
 31 |   (function(view) {
 32 |     let classListProp = 'classList',
 33 |       protoProp = 'prototype',
 34 |       elemCtrProto = (view.HTMLElement || view.Element)[protoProp],
 35 |       objCtr = Object;
 36 |     (strTrim =
 37 |       String[protoProp].trim ||
 38 |       function() {
 39 |         return this.replace(/^\s+|\s+$/g, '');
 40 |       }),
 41 |       (arrIndexOf =
 42 |         Array[protoProp].indexOf ||
 43 |         function(item) {
 44 |           for (let i = 0, len = this.length; i < len; i++) {
 45 |             if (i in this && this[i] === item) {
 46 |               return i;
 47 |             }
 48 |           }
 49 |           return -1;
 50 |         }),
 51 |       // Vendors: please allow content code to instantiate DOMExceptions
 52 |       (DOMEx = function(type, message) {
 53 |         this.name = type;
 54 |         this.code = DOMException[type];
 55 |         this.message = message;
 56 |       }),
 57 |       (checkTokenAndGetIndex = function(classList, token) {
 58 |         if (token === '') {
 59 |           throw new DOMEx('SYNTAX_ERR', 'An invalid or illegal string was specified');
 60 |         }
 61 |         if (/\s/.test(token)) {
 62 |           throw new DOMEx('INVALID_CHARACTER_ERR', 'String contains an invalid character');
 63 |         }
 64 |         return arrIndexOf.call(classList, token);
 65 |       }),
 66 |       (ClassList = function(elem) {
 67 |         let trimmedClasses = strTrim.call(elem.className),
 68 |           classes = trimmedClasses ? trimmedClasses.split(/\s+/) : [];
 69 |         for (let i = 0, len = classes.length; i < len; i++) {
 70 |           this.push(classes[i]);
 71 |         }
 72 |         this._updateClassName = function() {
 73 |           elem.className = this.toString();
 74 |         };
 75 |       }),
 76 |       (classListProto = ClassList[protoProp] = []),
 77 |       (classListGetter = function() {
 78 |         return new ClassList(this);
 79 |       });
 80 |     // Most DOMException implementations don't allow calling DOMException's toString()
 81 |     // on non-DOMExceptions. Error's toString() is sufficient here.
 82 |     DOMEx[protoProp] = Error[protoProp];
 83 |     classListProto.item = function(i) {
 84 |       return this[i] || null;
 85 |     };
 86 |     classListProto.contains = function(token) {
 87 |       token += '';
 88 |       return checkTokenAndGetIndex(this, token) !== -1;
 89 |     };
 90 |     classListProto.add = function(token) {
 91 |       token += '';
 92 |       if (checkTokenAndGetIndex(this, token) === -1) {
 93 |         this.push(token);
 94 |         this._updateClassName();
 95 |       }
 96 |     };
 97 |     classListProto.remove = function(token) {
 98 |       token += '';
 99 |       let index = checkTokenAndGetIndex(this, token);
100 |       if (index !== -1) {
101 |         this.splice(index, 1);
102 |         this._updateClassName();
103 |       }
104 |     };
105 |     classListProto.toggle = function(token) {
106 |       token += '';
107 |       if (checkTokenAndGetIndex(this, token) === -1) {
108 |         this.add(token);
109 |       } else {
110 |         this.remove(token);
111 |       }
112 |     };
113 |     classListProto.toString = function() {
114 |       return this.join(' ');
115 |     };
116 | 
117 |     if (objCtr.defineProperty) {
118 |       let classListPropDesc = {
119 |         get: classListGetter,
120 |         enumerable: true,
121 |         configurable: true,
122 |       };
123 |       try {
124 |         objCtr.defineProperty(elemCtrProto, classListProp, classListPropDesc);
125 |       } catch (ex) {
126 |         // IE 8 doesn't support enumerable:true
127 |         if (ex.number === -0x7ff5ec54) {
128 |           classListPropDesc.enumerable = false;
129 |           objCtr.defineProperty(elemCtrProto, classListProp, classListPropDesc);
130 |         }
131 |       }
132 |     } else if (objCtr[protoProp].__defineGetter__) {
133 |       elemCtrProto.__defineGetter__(classListProp, classListGetter);
134 |     }
135 |   })(self);
136 | }
137 | /* ---------------------------------------------------------------------- */
138 | 
139 | /* Slide movement */
140 | 
141 | function getSlideEl(no) {
142 |   if ((no < 0) || (no >= slideEls.length)) {
143 |     return null;
144 |   } 
145 |     return slideEls[no];
146 |   
147 | }
148 | 
149 | function updateSlideClass(slideNo, className) {
150 |   let el = getSlideEl(slideNo);
151 | 
152 |   if (!el) {
153 |     return;
154 |   }
155 | 
156 |   if (className) {
157 |     el.classList.add(className);
158 |   }
159 | 
160 |   for (let i in SLIDE_CLASSES) {
161 |     if (className != SLIDE_CLASSES[i]) {
162 |       el.classList.remove(SLIDE_CLASSES[i]);
163 |     }
164 |   }
165 | }
166 | 
167 | function updateSlides() {
168 |   for (let i = 0; i < slideEls.length; i++) {
169 |     switch (i) {
170 |       case curSlide - 2:
171 |         updateSlideClass(i, 'far-past');
172 |         break;
173 |       case curSlide - 1:
174 |         updateSlideClass(i, 'past');
175 |         break;
176 |       case curSlide:
177 |         updateSlideClass(i, 'current');
178 |         break;
179 |       case curSlide + 1:
180 |         updateSlideClass(i, 'next');
181 |         break;
182 |       case curSlide + 2:
183 |         updateSlideClass(i, 'far-next');
184 |         break;
185 |       default:
186 |         updateSlideClass(i);
187 |         break;
188 |     }
189 |   }
190 | 
191 |   triggerLeaveEvent(curSlide - 1);
192 |   triggerEnterEvent(curSlide);
193 | 
194 |   window.setTimeout(() => {
195 |     // Hide after the slide
196 |     disableSlideFrames(curSlide - 2);
197 |   }, 301);
198 | 
199 |   enableSlideFrames(curSlide - 1);
200 |   enableSlideFrames(curSlide + 2);
201 | 
202 |   if (isChromeVoxActive()) {
203 |     speakAndSyncToNode(slideEls[curSlide]);
204 |   }
205 | 
206 |   updateHash();
207 | }
208 | 
209 | function buildNextItem() {
210 |   let toBuild = slideEls[curSlide].querySelectorAll('.to-build');
211 | 
212 |   if (!toBuild.length) {
213 |     return false;
214 |   }
215 | 
216 |   toBuild[0].classList.remove('to-build');
217 | 
218 |   if (isChromeVoxActive()) {
219 |     speakAndSyncToNode(toBuild[0]);
220 |   }
221 | 
222 |   return true;
223 | }
224 | 
225 | function prevSlide() {
226 |   if (curSlide > 0) {
227 |     curSlide--;
228 |     updateSlides();
229 |   }
230 | }
231 | 
232 | function nextSlide() {
233 |   if (buildNextItem()) {
234 |     return;
235 |   }
236 | 
237 |   if (curSlide < slideEls.length - 1) {
238 |     curSlide++;
239 |     updateSlides();
240 |   }
241 | }
242 | 
243 | function triggerEnterEvent(no) {
244 |   let el = getSlideEl(no);
245 |   if (!el) {
246 |     return;
247 |   }
248 | 
249 |   let onEnter = el.getAttribute('onslideenter');
250 |   if (onEnter) {
251 |     new Function(onEnter).call(el);
252 |   }
253 | 
254 |   let evt = document.createEvent('Event');
255 |   evt.initEvent('slideenter', true, true);
256 |   evt.slideNumber = no + 1; // Make it readable
257 | 
258 |   el.dispatchEvent(evt);
259 | }
260 | 
261 | function triggerLeaveEvent(no) {
262 |   let el = getSlideEl(no);
263 |   if (!el) {
264 |     return;
265 |   }
266 | 
267 |   let onLeave = el.getAttribute('onslideleave');
268 |   if (onLeave) {
269 |     new Function(onLeave).call(el);
270 |   }
271 | 
272 |   let evt = document.createEvent('Event');
273 |   evt.initEvent('slideleave', true, true);
274 |   evt.slideNumber = no + 1; // Make it readable
275 | 
276 |   el.dispatchEvent(evt);
277 | }
278 | 
279 | /* Touch events */
280 | 
281 | function handleTouchStart(event) {
282 |   if (event.touches.length == 1) {
283 |     touchDX = 0;
284 |     touchDY = 0;
285 | 
286 |     touchStartX = event.touches[0].pageX;
287 |     touchStartY = event.touches[0].pageY;
288 | 
289 |     document.body.addEventListener('touchmove', handleTouchMove, true);
290 |     document.body.addEventListener('touchend', handleTouchEnd, true);
291 |   }
292 | }
293 | 
294 | function handleTouchMove(event) {
295 |   if (event.touches.length > 1) {
296 |     cancelTouch();
297 |   } else {
298 |     touchDX = event.touches[0].pageX - touchStartX;
299 |     touchDY = event.touches[0].pageY - touchStartY;
300 |   }
301 | }
302 | 
303 | function handleTouchEnd(event) {
304 |   let dx = Math.abs(touchDX);
305 |   let dy = Math.abs(touchDY);
306 | 
307 |   if (dx > PM_TOUCH_SENSITIVITY && dy < dx * 2 / 3) {
308 |     if (touchDX > 0) {
309 |       prevSlide();
310 |     } else {
311 |       nextSlide();
312 |     }
313 |   }
314 | 
315 |   cancelTouch();
316 | }
317 | 
318 | function cancelTouch() {
319 |   document.body.removeEventListener('touchmove', handleTouchMove, true);
320 |   document.body.removeEventListener('touchend', handleTouchEnd, true);
321 | }
322 | 
323 | /* Preloading frames */
324 | 
325 | function disableSlideFrames(no) {
326 |   let el = getSlideEl(no);
327 |   if (!el) {
328 |     return;
329 |   }
330 | 
331 |   let frames = el.getElementsByTagName('iframe');
332 |   for (var i = 0, frame; (frame = frames[i]); i++) {
333 |     disableFrame(frame);
334 |   }
335 | }
336 | 
337 | function enableSlideFrames(no) {
338 |   let el = getSlideEl(no);
339 |   if (!el) {
340 |     return;
341 |   }
342 | 
343 |   let frames = el.getElementsByTagName('iframe');
344 |   for (var i = 0, frame; (frame = frames[i]); i++) {
345 |     enableFrame(frame);
346 |   }
347 | }
348 | 
349 | function disableFrame(frame) {
350 |   frame.src = 'about:blank';
351 | }
352 | 
353 | function enableFrame(frame) {
354 |   let src = frame._src;
355 | 
356 |   if (frame.src != src && src != 'about:blank') {
357 |     frame.src = src;
358 |   }
359 | }
360 | 
361 | function setupFrames() {
362 |   let frames = document.querySelectorAll('iframe');
363 |   for (var i = 0, frame; (frame = frames[i]); i++) {
364 |     frame._src = frame.src;
365 |     disableFrame(frame);
366 |   }
367 | 
368 |   enableSlideFrames(curSlide);
369 |   enableSlideFrames(curSlide + 1);
370 |   enableSlideFrames(curSlide + 2);
371 | }
372 | 
373 | function setupInteraction() {
374 |   /* Clicking and tapping */
375 | 
376 |   var el = document.createElement('div');
377 |   el.className = 'slide-area';
378 |   el.id = 'prev-slide-area';
379 |   el.addEventListener('click', prevSlide, false);
380 |   document.querySelector('section.slides').appendChild(el);
381 | 
382 |   var el = document.createElement('div');
383 |   el.className = 'slide-area';
384 |   el.id = 'next-slide-area';
385 |   el.addEventListener('click', nextSlide, false);
386 |   document.querySelector('section.slides').appendChild(el);
387 | 
388 |   /* Swiping */
389 | 
390 |   document.body.addEventListener('touchstart', handleTouchStart, false);
391 | }
392 | 
393 | /* ChromeVox support */
394 | 
395 | function isChromeVoxActive() {
396 |   if (typeof (cvox) == 'undefined') {
397 |     return false;
398 |   } 
399 |     return true;
400 |   
401 | }
402 | 
403 | function speakAndSyncToNode(node) {
404 |   if (!isChromeVoxActive()) {
405 |     return;
406 |   }
407 | 
408 |   cvox.ChromeVox.navigationManager.switchToStrategy(cvox.ChromeVoxNavigationManager.STRATEGIES.LINEARDOM, 0, true);
409 |   cvox.ChromeVox.navigationManager.syncToNode(node);
410 |   cvox.ChromeVoxUserCommands.finishNavCommand('');
411 |   let target = node;
412 |   while (target.firstChild) {
413 |     target = target.firstChild;
414 |   }
415 |   cvox.ChromeVox.navigationManager.syncToNode(target);
416 | }
417 | 
418 | function speakNextItem() {
419 |   if (!isChromeVoxActive()) {
420 |     return;
421 |   }
422 | 
423 |   cvox.ChromeVox.navigationManager.switchToStrategy(cvox.ChromeVoxNavigationManager.STRATEGIES.LINEARDOM, 0, true);
424 |   cvox.ChromeVox.navigationManager.next(true);
425 |   if (!cvox.DomUtil.isDescendantOfNode(cvox.ChromeVox.navigationManager.getCurrentNode(), slideEls[curSlide])) {
426 |     let target = slideEls[curSlide];
427 |     while (target.firstChild) {
428 |       target = target.firstChild;
429 |     }
430 |     cvox.ChromeVox.navigationManager.syncToNode(target);
431 |     cvox.ChromeVox.navigationManager.next(true);
432 |   }
433 |   cvox.ChromeVoxUserCommands.finishNavCommand('');
434 | }
435 | 
436 | function speakPrevItem() {
437 |   if (!isChromeVoxActive()) {
438 |     return;
439 |   }
440 | 
441 |   cvox.ChromeVox.navigationManager.switchToStrategy(cvox.ChromeVoxNavigationManager.STRATEGIES.LINEARDOM, 0, true);
442 |   cvox.ChromeVox.navigationManager.previous(true);
443 |   if (!cvox.DomUtil.isDescendantOfNode(cvox.ChromeVox.navigationManager.getCurrentNode(), slideEls[curSlide])) {
444 |     let target = slideEls[curSlide];
445 |     while (target.lastChild) {
446 |       target = target.lastChild;
447 |     }
448 |     cvox.ChromeVox.navigationManager.syncToNode(target);
449 |     cvox.ChromeVox.navigationManager.previous(true);
450 |   }
451 |   cvox.ChromeVoxUserCommands.finishNavCommand('');
452 | }
453 | 
454 | /* Hash functions */
455 | 
456 | function getCurSlideFromHash() {
457 |   let slideNo = parseInt(location.hash.substr(1));
458 | 
459 |   if (slideNo) {
460 |     curSlide = slideNo - 1;
461 |   } else {
462 |     curSlide = 0;
463 |   }
464 | }
465 | 
466 | function updateHash() {
467 |   location.replace(`#${  curSlide + 1}`);
468 | }
469 | 
470 | /* Event listeners */
471 | 
472 | function handleBodyKeyDown(event) {
473 |   switch (event.keyCode) {
474 |     case 39: // right arrow
475 |     case 13: // Enter
476 |     case 32: // space
477 |     case 34: // PgDn
478 |       nextSlide();
479 |       event.preventDefault();
480 |       break;
481 | 
482 |     case 37: // left arrow
483 |     case 8: // Backspace
484 |     case 33: // PgUp
485 |       prevSlide();
486 |       event.preventDefault();
487 |       break;
488 | 
489 |     case 40: // down arrow
490 |       if (isChromeVoxActive()) {
491 |         speakNextItem();
492 |       } else {
493 |         nextSlide();
494 |       }
495 |       event.preventDefault();
496 |       break;
497 | 
498 |     case 38: // up arrow
499 |       if (isChromeVoxActive()) {
500 |         speakPrevItem();
501 |       } else {
502 |         prevSlide();
503 |       }
504 |       event.preventDefault();
505 |       break;
506 |   }
507 | }
508 | 
509 | function addEventListeners() {
510 |   document.addEventListener('keydown', handleBodyKeyDown, false);
511 | }
512 | 
513 | /* Initialization */
514 | 
515 | function addPrettify() {
516 |   let els = document.querySelectorAll('pre');
517 |   for (var i = 0, el; (el = els[i]); i++) {
518 |     if (!el.classList.contains('noprettyprint')) {
519 |       el.classList.add('prettyprint');
520 |     }
521 |   }
522 | 
523 |   var el = document.createElement('script');
524 |   el.type = 'text/javascript';
525 |   el.src = `${PERMANENT_URL_PREFIX  }prettify.js`;
526 |   el.onload = function() {
527 |     // prettyPrint(); don't need it!
528 |   };
529 |   document.body.appendChild(el);
530 | }
531 | 
532 | function addFontStyle() {
533 |   return; // NONONONON
534 |   let el = document.createElement('link');
535 |   el.rel = 'stylesheet';
536 |   el.type = 'text/css';
537 |   el.href =
538 |     'http://fonts.googleapis.com/css?family=' + 'Open+Sans:regular,semibold,italic,italicsemibold|Droid+Sans+Mono';
539 | 
540 |   document.body.appendChild(el);
541 | }
542 | 
543 | function addGeneralStyle() {
544 |   var el = document.createElement('link');
545 |   el.rel = 'stylesheet';
546 |   el.type = 'text/css';
547 |   el.href = `${PERMANENT_URL_PREFIX  }styles.css`;
548 |   document.body.appendChild(el);
549 | 
550 |   var el = document.createElement('meta');
551 |   el.name = 'viewport';
552 |   el.content = 'width=1100,height=750';
553 |   document.querySelector('head').appendChild(el);
554 | 
555 |   var el = document.createElement('meta');
556 |   el.name = 'apple-mobile-web-app-capable';
557 |   el.content = 'yes';
558 |   document.querySelector('head').appendChild(el);
559 | }
560 | 
561 | function makeBuildLists() {
562 |   for (var i = curSlide, slide; (slide = slideEls[i]); i++) {
563 |     let items = slide.querySelectorAll('.build > *');
564 |     for (var j = 0, item; (item = items[j]); j++) {
565 |       if (item.classList) {
566 |         item.classList.add('to-build');
567 |       }
568 |     }
569 |   }
570 | }
571 | 
572 | function handleDomLoaded() {
573 |   slideEls = document.querySelectorAll('section.slides > article');
574 | 
575 |   setupFrames();
576 | 
577 |   addFontStyle();
578 |   // addGeneralStyle(); do it myself
579 |   addPrettify();
580 |   addEventListeners();
581 | 
582 |   updateSlides();
583 | 
584 |   setupInteraction();
585 |   makeBuildLists();
586 | 
587 |   document.body.classList.add('loaded');
588 | }
589 | 
590 | function initialize() {
591 |   getCurSlideFromHash();
592 | 
593 |   if (window._DEBUG) {
594 |     PERMANENT_URL_PREFIX = '../';
595 |   }
596 | 
597 |   if (window._DCL) {
598 |     handleDomLoaded();
599 |   } else {
600 |     document.addEventListener('DOMContentLoaded', handleDomLoaded, false);
601 |   }
602 | }
603 | 
604 | // If ?debug exists then load the script relative instead of absolute
605 | if (!window._DEBUG && document.location.href.indexOf('?debug') !== -1) {
606 |   document.addEventListener(
607 |     'DOMContentLoaded',
608 |     function() {
609 |       // Avoid missing the DomContentLoaded event
610 |       window['_DCL'] = true;
611 |     },
612 |     false
613 |   );
614 | 
615 |   window._DEBUG = true;
616 |   let script = document.createElement('script');
617 |   script.type = 'text/javascript';
618 |   script.src = '../slides.js';
619 |   let s = document.getElementsByTagName('script')[0];
620 |   s.parentNode.insertBefore(script, s);
621 | 
622 |   // Remove this script
623 |   s.parentNode.removeChild(s);
624 | } else {
625 |   initialize();
626 | }
627 | 


--------------------------------------------------------------------------------
/styles.css:
--------------------------------------------------------------------------------
  1 | html {
  2 |   height: 100%;
  3 | }
  4 | body {
  5 |   margin: 0;
  6 |   padding: 0;
  7 |   display: block !important;
  8 |   height: 100%;
  9 |   min-height: 740px;
 10 |   overflow-x: hidden;
 11 |   overflow-y: auto;
 12 | }
 13 | .slides {
 14 |   width: 100%;
 15 |   height: 100%;
 16 |   left: 0;
 17 |   top: 0;
 18 |   color: #f21818;
 19 | background
 20 |   position: absolute;
 21 |   -webkit-transform: translate3d(0, 0, 0);
 22 | }
 23 | .slides > article {
 24 |   display: block;
 25 |   position: absolute;
 26 |   overflow: hidden;
 27 |   width: 1920px;
 28 |   height: 1130px;
 29 |   margin-left: -960px;
 30 |   margin-top: -565px;
 31 |   left: 50%;
 32 |   top: 50%;
 33 |   border-radius: 5px;
 34 |   padding: 0;
 35 |   background-color: none;
 36 |   -webkit-transition: all 0.3s ease-out;
 37 |   transition: all 0.3s ease-out;
 38 |   -webkit-box-pack: center;
 39 |       -ms-flex-pack: center;
 40 |           justify-content: center;
 41 |   -webkit-box-orient: vertical;
 42 |   -webkit-box-direction: normal;
 43 |       -ms-flex-direction: column;
 44 |           flex-direction: column;
 45 | }
 46 | .slides > article > * {
 47 |   display: block;
 48 |   clear: both;
 49 |   min-width: 100%;
 50 |   -ms-flex-wrap: wrap;
 51 |       flex-wrap: wrap;
 52 | }
 53 | .slides > article > img {
 54 |   min-width: 0;
 55 |   display: block;
 56 |   margin: 0 auto;
 57 | }
 58 | .slide-area {
 59 |   z-index: 1000;
 60 |   position: absolute;
 61 |   left: 0;
 62 |   top: 0;
 63 |   width: 150px;
 64 |   height: 100%;
 65 |   left: 0;
 66 |   top: 0;
 67 |   cursor: pointer;
 68 |   tap-highlight-color: transparent;
 69 | }
 70 | #next-slide-area {
 71 |   right: 0;
 72 |   left: auto;
 73 | }
 74 | .slides.layout-widescreen #prev-slide-area,
 75 | .slides.layout-faux-widescreen #prev-slide-area {
 76 |   margin-left: -650px;
 77 | }
 78 | .slides.layout-widescreen #next-slide-area,
 79 | .slides.layout-faux-widescreen #next-slide-area {
 80 |   margin-left: 500px;
 81 | }
 82 | .slides > article {
 83 |   display: none;
 84 |   text-align: center;
 85 | }
 86 | .slides > article.far-past {
 87 |   display: block;
 88 |   -webkit-transform: translate(-4000px);
 89 |           transform: translate(-4000px);
 90 |   display: none;
 91 | }
 92 | .slides > article.past {
 93 |   display: -webkit-box;
 94 |   display: -ms-flexbox;
 95 |   display: flex;
 96 |   -webkit-transform: scale(0.5) translate(-1920px);
 97 |           transform: scale(0.5) translate(-1920px);
 98 |   opacity: 0.3;
 99 |   display: none;
100 | }
101 | .slides > article.current {
102 |   display: -webkit-box;
103 |   display: -ms-flexbox;
104 |   display: flex;
105 |   -webkit-transform: translate(0);
106 |           transform: translate(0);
107 |   z-index: 10;
108 | }
109 | .slides > article.next {
110 |   display: -webkit-box;
111 |   display: -ms-flexbox;
112 |   display: flex;
113 |   -webkit-transform: scale(0.5) translate(1920px);
114 |           transform: scale(0.5) translate(1920px);
115 |   opacity: 0.3;
116 |   display: none;
117 | }
118 | .slides > article.far-next {
119 |   display: -webkit-box;
120 |   display: -ms-flexbox;
121 |   display: flex;
122 |   -webkit-transform: translate(4000px);
123 |           transform: translate(4000px);
124 |   display: none;
125 | }
126 | .slides > article {
127 |   color: #6c818f;
128 |   font-size: 30px;
129 |   letter-spacing: -1px;
130 | }
131 | b {
132 |   font-weight: 600;
133 | }
134 | .blue {
135 |   color: #06c;
136 | }
137 | .yellow {
138 |   color: #ffd319;
139 | }
140 | .green {
141 |   color: #29e254;
142 | }
143 | .red {
144 |   color: #f00;
145 | }
146 | .black {
147 |   color: #000;
148 | }
149 | .white {
150 |   color: #fff;
151 | }
152 | a {
153 |   color: #fd0;
154 | }
155 | ::-moz-selection {
156 |   background: #fd0;
157 | }
158 | ::selection {
159 |   background: #fd0;
160 | }
161 | p {
162 |   margin: 0;
163 |   padding: 0;
164 | }
165 | p:first-child {
166 |   margin-top: 0;
167 | }
168 | body {
169 |   font-family: 'Open Sans', sans-serif;
170 | }
171 | h1 {
172 |   font-size: 60px;
173 |   padding: 0;
174 |   margin: 0;
175 |   color: #fff;
176 | }
177 | h2 {
178 |   font-size: 45px;
179 |   line-height: 45px;
180 |   bottom: 150px;
181 |   padding: 0;
182 |   margin: 0;
183 |   font-weight: 600;
184 |   color: #fff;
185 |   letter-spacing: -2px;
186 | }
187 | h2 a {
188 |   text-decoration: none;
189 | }
190 | h3 {
191 |   font-size: 20px;
192 |   line-height: 36px;
193 |   padding: 0 0 10px 0;
194 |   margin: 0;
195 |   padding-right: 40px;
196 |   font-weight: 600;
197 |   letter-spacing: -1px;
198 |   color: #eaeaea;
199 | }
200 | .half {
201 |   width: 350px;
202 |   float: left;
203 | }
204 | .button:hover {
205 |   color: #fff;
206 |   background: #392c44;
207 | }
208 | pre.half {
209 |   width: 400px;
210 |   font-size: 17px;
211 | }
212 | p.small {
213 |   color: #000;
214 |   font-size: 18px;
215 | }
216 | article.fill h3 {
217 |   background: rgba(255,255,255,0.75);
218 |   padding-top: 0.2em;
219 |   padding-bottom: 0.3em;
220 |   margin-top: -0.2em;
221 |   margin-left: -60px;
222 |   padding-left: 60px;
223 |   margin-right: -60px;
224 |   padding-right: 60px;
225 | }
226 | h4 {
227 |   margin: 0;
228 | }
229 | .center {
230 |   text-align: center;
231 | }
232 | .center h3 {
233 |   font-size: 100px;
234 |   margin-top: 220px;
235 | }
236 | ul {
237 |   list-style: none;
238 |   margin: 0;
239 |   padding: 0;
240 |   margin-top: 40px;
241 |   margin-left: 0.75em;
242 | }
243 | ul:first-child {
244 |   margin-top: 0;
245 | }
246 | ul ul {
247 |   margin-top: 0.5em;
248 | }
249 | li {
250 |   padding: 0;
251 |   margin: 0;
252 |   margin-bottom: 0.5em;
253 | }
254 | li::before {
255 |   content: '·';
256 |   width: 0.75em;
257 |   margin-left: -0.75em;
258 |   position: absolute;
259 | }
260 | pre {
261 |   font-size: 20px;
262 |   line-height: 28px;
263 |   padding: 5px 10px;
264 |   letter-spacing: -1px;
265 |   margin-top: 20px;
266 |   margin-bottom: 20px;
267 |   color: #000;
268 |   background: #f0f0f0;
269 |   border: 1px solid #e0e0e0;
270 |   -webkit-box-shadow: inset 0 2px 6px rgba(0,0,0,0.1);
271 |           box-shadow: inset 0 2px 6px rgba(0,0,0,0.1);
272 |   overflow: hidden;
273 | }
274 | code {
275 |   font-size: 95%;
276 |   font-family: 'Droid Sans Mono', 'Courier New', monospace;
277 |   display: inline-block;
278 |   background: rgba(255,255,255,0.2);
279 |   padding: 10px;
280 |   border-radius: 4px;
281 |   font-weight: 600;
282 | }
283 | iframe {
284 |   width: 100%;
285 |   height: 620px;
286 |   background: #fff;
287 |   border: 1px solid #c0c0c0;
288 |   margin: -1px;
289 | /*box-shadow: inset 0 2px 6px rgba(0, 0, 0, .1);*/
290 | }
291 | img {
292 |   max-width: 100%;
293 |   max-height: 570px;
294 | }
295 | h3 + iframe {
296 |   margin-top: 40px;
297 |   height: 540px;
298 | }
299 | article.fill iframe {
300 |   position: absolute;
301 |   left: 0;
302 |   top: 0;
303 |   width: 100%;
304 |   height: 100%;
305 |   border: 0;
306 |   margin: 0;
307 |   border-radius: 10px;
308 |   -o-border-radius: 10px;
309 |   -moz-border-radius: 10px;
310 |   -webkit-border-radius: 10px;
311 |   z-index: -1;
312 | }
313 | article.fill img {
314 |   position: absolute;
315 |   left: 0;
316 |   top: 0;
317 |   min-width: 100%;
318 |   min-height: 100%;
319 |   border-radius: 10px;
320 |   -o-border-radius: 10px;
321 |   -moz-border-radius: 10px;
322 |   -webkit-border-radius: 10px;
323 |   z-index: -1;
324 | }
325 | img.centered {
326 |   margin: 0 auto;
327 |   display: block;
328 | }
329 | table {
330 |   width: 100%;
331 |   border-collapse: collapse;
332 |   margin-top: 40px;
333 | }
334 | th {
335 |   font-weight: 600;
336 |   text-align: left;
337 | }
338 | td,
339 | th {
340 |   border: 1px solid #e0e0e0;
341 |   padding: 5px 10px;
342 |   vertical-align: top;
343 | }
344 | .source {
345 |   position: absolute;
346 |   left: 60px;
347 |   top: 644px;
348 |   padding-right: 175px;
349 |   font-size: 15px;
350 |   letter-spacing: 0;
351 |   line-height: 18px;
352 | }
353 | q {
354 |   display: block;
355 |   font-size: 60px;
356 |   line-height: 72px;
357 |   margin-left: 20px;
358 |   margin-top: 100px;
359 |   margin-right: 150px;
360 | }
361 | q::before {
362 |   content: '“';
363 |   position: absolute;
364 |   display: inline-block;
365 |   margin-left: -2.1em;
366 |   width: 2em;
367 |   text-align: right;
368 |   font-size: 90px;
369 |   color: #c0c0c0;
370 | }
371 | q::after {
372 |   content: '”';
373 |   position: absolute;
374 |   margin-left: 0.1em;
375 |   font-size: 90px;
376 |   color: #c0c0c0;
377 | }
378 | div.author {
379 |   text-align: right;
380 |   font-size: 40px;
381 |   margin-top: 20px;
382 |   margin-right: 150px;
383 | }
384 | div.author::before {
385 |   content: '—';
386 | }
387 | article.smaller p,
388 | article.smaller ul {
389 |   font-size: 20px;
390 |   line-height: 24px;
391 |   letter-spacing: 0;
392 | }
393 | article.smaller table {
394 |   font-size: 20px;
395 |   line-height: 24px;
396 |   letter-spacing: 0;
397 | }
398 | article.smaller pre {
399 |   font-size: 15px;
400 |   line-height: 20px;
401 |   letter-spacing: 0;
402 | }
403 | article.smaller q {
404 |   font-size: 40px;
405 |   line-height: 48px;
406 | }
407 | article.smaller q::before,
408 | article.smaller q::after {
409 |   font-size: 60px;
410 | }
411 | .build > * {
412 |   -webkit-transition: opacity 0.2s ease-in-out 0.2s;
413 |   transition: opacity 0.2s ease-in-out 0.2s;
414 | }
415 | .to-build {
416 |   opacity: 0;
417 | }
418 | pre .str,
419 | code .str {
420 |   color: #39d905;
421 | }
422 | pre .kwd,
423 | code .kwd {
424 |   color: #fd0;
425 | }
426 | pre .com,
427 | code .com {
428 |   color: #08f;
429 |   font-style: italic;
430 | }
431 | pre .typ,
432 | code .typ {
433 |   color: #08f;
434 | }
435 | pre .lit,
436 | code .lit {
437 |   color: #08f;
438 | }
439 | pre .pun,
440 | code .pun {
441 |   color: #ff9d00;
442 | }
443 | pre .pln,
444 | code .pln {
445 |   color: #fff;
446 | }
447 | pre .tag,
448 | code .tag {
449 |   color: #89bdff;
450 | }
451 | pre .atn,
452 | code .atn {
453 |   color: #bdb76b;
454 | }
455 | pre .atv,
456 | code .atv {
457 |   color: #65b042;
458 | }
459 | pre .dec,
460 | code .dec {
461 |   color: #3387cc;
462 | }
463 | pre.prettyprint,
464 | code.prettyprint {
465 |   background-color: #193549;
466 |   border-radius: 2px;
467 |   border: 0;
468 |   font-size: 55px;
469 |   line-height: 1.7;
470 |   text-align: left;
471 | }
472 | code {
473 |   background: none;
474 |   font-family: 'Operator Mono', monospace;
475 |   font-weight: 400;
476 | }
477 | pre.prettyprint {
478 |   width: 95%;
479 |   margin: 1em auto;
480 |   padding: 10px;
481 |   white-space: pre-wrap;
482 |   border: 3px solid #1f4662;
483 | }
484 | ol.linenums {
485 |   margin-top: 0;
486 |   margin-bottom: 0;
487 |   color: #aeaeae;
488 | }
489 | li.L0,
490 | li.L1,
491 | li.L2,
492 | li.L3,
493 | li.L5,
494 | li.L6,
495 | li.L7,
496 | li.L8 {
497 |   list-style-type: none;
498 | }
499 | @media print {
500 |   pre .str,
501 |   code .str {
502 |     color: #060;
503 |   }
504 |   pre .kwd,
505 |   code .kwd {
506 |     color: #006;
507 |     font-weight: bold;
508 |   }
509 |   pre .com,
510 |   code .com {
511 |     color: #600;
512 |     font-style: italic;
513 |   }
514 |   pre .typ,
515 |   code .typ {
516 |     color: #404;
517 |     font-weight: bold;
518 |   }
519 |   pre .lit,
520 |   code .lit {
521 |     color: #044;
522 |   }
523 |   pre .pun,
524 |   code .pun {
525 |     color: #440;
526 |   }
527 |   pre .pln,
528 |   code .pln {
529 |     color: #000;
530 |   }
531 |   pre .tag,
532 |   code .tag {
533 |     color: #006;
534 |     font-weight: bold;
535 |   }
536 |   pre .atn,
537 |   code .atn {
538 |     color: #404;
539 |   }
540 |   pre .atv,
541 |   code .atv {
542 |     color: #060;
543 |   }
544 | }
545 | html {
546 |   -webkit-box-sizing: border-box;
547 |           box-sizing: border-box;
548 | }
549 | *,
550 | *:before,
551 | *:after {
552 |   -webkit-box-sizing: inherit;
553 |           box-sizing: inherit;
554 | }
555 | body {
556 |   overflow: hidden;
557 | }
558 | .slides > article {
559 |   padding: 50px;
560 | }
561 | .slides > article:before {
562 |   content: '';
563 |   display: block;
564 |   width: 100%;
565 |   height: 100%;
566 |   position: absolute;
567 |   background: url("images/3.jpg");
568 |   background-size: cover;
569 |   top: 0;
570 |   left: 0;
571 |   z-index: -2;
572 | }
573 | .slides > article:after {
574 |   z-index: -1;
575 |   content: '';
576 |   display: block;
577 |   width: 100%;
578 |   height: 100%;
579 |   position: absolute;
580 |   top: 0;
581 |   left: 0;
582 |   opacity: 0.8;
583 |   background-image: linear-gradient(246deg, #2e0067 0%, #400090 100%);
584 | }
585 | .slides > article.plain:before,
586 | .slides > article.plain:after {
587 |   display: none;
588 | }
589 | .slides > article.section:after {
590 |   background-image: linear-gradient(237deg, #fd0 0%, #ffe01a 100%);
591 | }
592 | .slides > article.section h1,
593 | .slides > article.section h2,
594 | .slides > article.section h3,
595 | .slides > article.section h4,
596 | .slides > article.section h5,
597 | .slides > article.section h6 {
598 |   -webkit-filter: none;
599 |           filter: none;
600 | }
601 | .slides > article.section .sub {
602 |   color: #000;
603 | }
604 | .slides > article.old-tools:before {
605 |   background-image: url("images/soldering.jpg") !important;
606 |   background-size: contain;
607 | }
608 | .slides > article.old-tools:after {
609 |   opacity: 0.1;
610 | }
611 | .slides > article:nth-child(39n+1):before {
612 |   background-image: url("images/25.jpg");
613 | }
614 | .slides > article:nth-child(39n+2):before {
615 |   background-image: url("images/11.jpg");
616 | }
617 | .slides > article:nth-child(39n+3):before {
618 |   background-image: url("images/31.jpg");
619 | }
620 | .slides > article:nth-child(39n+4):before {
621 |   background-image: url("images/17.jpg");
622 | }
623 | .slides > article:nth-child(39n+5):before {
624 |   background-image: url("images/24.jpg");
625 | }
626 | .slides > article:nth-child(39n+6):before {
627 |   background-image: url("images/16.jpg");
628 | }
629 | .slides > article:nth-child(39n+7):before {
630 |   background-image: url("images/1.jpg");
631 | }
632 | .slides > article:nth-child(39n+8):before {
633 |   background-image: url("images/29.jpg");
634 | }
635 | .slides > article:nth-child(39n+9):before {
636 |   background-image: url("images/7.jpg");
637 | }
638 | .slides > article:nth-child(39n+10):before {
639 |   background-image: url("images/31.jpg");
640 | }
641 | .slides > article:nth-child(39n+11):before {
642 |   background-image: url("images/16.jpg");
643 | }
644 | .slides > article:nth-child(39n+12):before {
645 |   background-image: url("images/17.jpg");
646 | }
647 | .slides > article:nth-child(39n+13):before {
648 |   background-image: url("images/20.jpg");
649 | }
650 | .slides > article:nth-child(39n+14):before {
651 |   background-image: url("images/14.jpg");
652 | }
653 | .slides > article:nth-child(39n+15):before {
654 |   background-image: url("images/21.jpg");
655 | }
656 | .slides > article:nth-child(39n+16):before {
657 |   background-image: url("images/2.jpg");
658 | }
659 | .slides > article:nth-child(39n+17):before {
660 |   background-image: url("images/19.jpg");
661 | }
662 | .slides > article:nth-child(39n+18):before {
663 |   background-image: url("images/28.jpg");
664 | }
665 | .slides > article:nth-child(39n+19):before {
666 |   background-image: url("images/20.jpg");
667 | }
668 | .slides > article:nth-child(39n+20):before {
669 |   background-image: url("images/10.jpg");
670 | }
671 | .slides > article:nth-child(39n+21):before {
672 |   background-image: url("images/25.jpg");
673 | }
674 | .slides > article:nth-child(39n+22):before {
675 |   background-image: url("images/6.jpg");
676 | }
677 | .slides > article:nth-child(39n+23):before {
678 |   background-image: url("images/17.jpg");
679 | }
680 | .slides > article:nth-child(39n+24):before {
681 |   background-image: url("images/30.jpg");
682 | }
683 | .slides > article:nth-child(39n+25):before {
684 |   background-image: url("images/3.jpg");
685 | }
686 | .slides > article:nth-child(39n+26):before {
687 |   background-image: url("images/22.jpg");
688 | }
689 | .slides > article:nth-child(39n+27):before {
690 |   background-image: url("images/7.jpg");
691 | }
692 | .slides > article:nth-child(39n+28):before {
693 |   background-image: url("images/29.jpg");
694 | }
695 | .slides > article:nth-child(39n+29):before {
696 |   background-image: url("images/20.jpg");
697 | }
698 | .slides > article:nth-child(39n+30):before {
699 |   background-image: url("images/12.jpg");
700 | }
701 | .slides > article:nth-child(39n+31):before {
702 |   background-image: url("images/28.jpg");
703 | }
704 | .slides > article:nth-child(39n+32):before {
705 |   background-image: url("images/25.jpg");
706 | }
707 | .slides > article:nth-child(39n+33):before {
708 |   background-image: url("images/25.jpg");
709 | }
710 | .slides > article:nth-child(39n+34):before {
711 |   background-image: url("images/12.jpg");
712 | }
713 | .slides > article:nth-child(39n+35):before {
714 |   background-image: url("images/28.jpg");
715 | }
716 | .slides > article:nth-child(39n+36):before {
717 |   background-image: url("images/19.jpg");
718 | }
719 | .slides > article:nth-child(39n+37):before {
720 |   background-image: url("images/7.jpg");
721 | }
722 | .slides > article:nth-child(39n+38):before {
723 |   background-image: url("images/12.jpg");
724 | }
725 | .slides > article:nth-child(39n+39):before {
726 |   background-image: url("images/19.jpg");
727 | }
728 | h1,
729 | h2,
730 | h3,
731 | h4,
732 | h5,
733 | h6 {
734 |   color: #fff;
735 |   font-family: "pure", "Bavro", sans-serif;
736 |   font-weight: 700;
737 |   line-height: 0.8;
738 |   letter-spacing: 0;
739 |   line-height: auto;
740 |   text-shadow: 10px 10px 0 rgba(255,255,255,0.01);
741 |   margin: -50px 0 15px 0;
742 |   will-change: filter;
743 | }
744 | .firefox h1,
745 | .firefox h2,
746 | .firefox h3,
747 | .firefox h4,
748 | .firefox h5,
749 | .firefox h6 {
750 |   -webkit-filter: invert(100%);
751 |           filter: invert(100%);
752 |   text-shadow: 10px 10px 0 rgba(255,255,255,0.2);
753 | }
754 | p,
755 | a,
756 | li {
757 |   text-shadow: 4px 3px 0 rgba(0,0,0,0.3);
758 |   margin: 15px 0;
759 |   font-family: 'bavro';
760 | }
761 | p,
762 | li,
763 | small {
764 |   color: #fff;
765 |   font-size: 90px;
766 | }
767 | .sub {
768 |   font-family: 'bavro';
769 |   -webkit-transform: skew(0, -8deg);
770 |           transform: skew(0, -8deg);
771 |   margin-top: 100px;
772 |   font-weight: 100;
773 |   color: #fd0;
774 |   font-size: 60px;
775 | }
776 | h2 + .sub {
777 |   -webkit-transform: none;
778 |           transform: none;
779 | }
780 | small {
781 |   font-size: 25px;
782 | }
783 | h1 {
784 |   -webkit-transform: skew(0, -8deg);
785 |           transform: skew(0, -8deg);
786 |   font-size: 300px;
787 |   letter-spacing: -2px;
788 | }
789 | h1 a {
790 |   text-decoration: none;
791 |   font-size: 20px;
792 |   color: #000;
793 |   padding-left: 10px;
794 | }
795 | ul {
796 |   text-align: left;
797 |   margin-left: 100px;
798 | }
799 | h2 {
800 |   font-size: 200px;
801 |   line-height: 1;
802 |   margin: 0;
803 | }
804 | h2 a {
805 |   color: #00f;
806 | }
807 | h2 + img {
808 |   margin-top: 20px !important;
809 | }
810 | .large {
811 |   font-size: 200px;
812 | }
813 | .big {
814 |   font-size: 250px;
815 | }
816 | .huge {
817 |   font-size: 450px;
818 | }
819 | h3 {
820 |   font-size: 70px;
821 |   color: #fd0;
822 |   line-height: 1.5;
823 | }
824 | h4 {
825 |   color: #fd0;
826 |   font-size: 50px;
827 | }
828 | .halves {
829 |   width: 100%;
830 | }
831 | .half {
832 |   width: 50%;
833 | }
834 | img.wide {
835 |   width: 100%;
836 |   height: auto;
837 |   max-height: none;
838 | }
839 | img.high {
840 |   width: auto;
841 |   height: 100%;
842 |   max-height: 1200px;
843 | }
844 | video.high {
845 |   width: auto;
846 |   height: 100%;
847 |   min-width: 0;
848 | }
849 | .hl {
850 |   color: #fd0;
851 | }
852 | article.treats h1 {
853 |   margin-bottom: 90px;
854 |   font-size: 250px;
855 | }
856 | .flex {
857 |   display: -webkit-box !important;
858 |   display: -ms-flexbox !important;
859 |   display: flex !important;
860 | }
861 | .flex > * {
862 |   -webkit-box-flex: 1;
863 |       -ms-flex: 1;
864 |           flex: 1;
865 | }
866 | .flex > *:before {
867 |   content: '';
868 | }
869 | .emoji {
870 |   font-size: 116px;
871 |   font-family: serif;
872 | }
873 | body.square .slides > article {
874 |   width: 1920px;
875 |   height: 1080px;
876 |   margin-left: -960px;
877 |   margin-top: -540px;
878 |   border-radius: 0;
879 | }
880 | body.square .slides > article h2 {
881 |   font-size: 110px;
882 | }
883 | body.square .slides > article p,
884 | body.square .slides > article li,
885 | body.square .slides > article small {
886 |   font-size: 30px;
887 | }
888 | body.square .slides > article .big {
889 |   font-size: 180px;
890 | }
891 | body.square .slides > article .large {
892 |   font-size: 140px;
893 | }
894 | body.square .slides > article .huge {
895 |   font-size: 220px;
896 | }
897 | @font-face {
898 |   font-family: 'bavro';
899 |   src: url("./fonts/bavro-regular-webfont.eot");
900 |   src: url("./fonts/bavro-regular-webfont.eot?#iefix") format('embedded-opentype'), url("./fonts/bavro-regular-webfont.woff2") format('woff2'), url("./fonts/bavro-regular-webfont.woff") format('woff'), url("./fonts/bavro-regular-webfont.ttf") format('truetype'), url("./fonts/bavro-regular-webfont.svg#bavroregular") format('svg');
901 |   font-weight: normal;
902 |   font-style: normal;
903 | }
904 | @font-face {
905 |   font-family: "pure";
906 | /* reference name */
907 |   src: url("./fonts/PureHeartSVG-Regular.otf");
908 |   font-weight: 400;
909 | /* or whatever applies */
910 |   font-style: normal;
911 | /* or whatever applies */
912 |   text-rendering: optimizeLegibility;
913 | /* maybe */
914 | }
915 | body::after {
916 |   position: absolute;
917 |   width: 1px;
918 |   height: 1px;
919 |   overflow: hidden;
920 |   z-index: -1;
921 |   content: url("./images/1.jpg") url("./images/2.jpg") url("./images/3.jpg") url("./images/4.jpg") url("./images/5.jpg") url("./images/6.jpg") url("./images/7.jpg") url("./images/8.jpg") url("./images/9.jpg") url("./images/10.jpg") url("./images/11.jpg") url("./images/12.jpg") url("./images/13.jpg") url("./images/14.jpg") url("./images/15.jpg") url("./images/16.jpg") url("./images/17.jpg") url("./images/18.jpg") url("./images/19.jpg") url("./images/20.jpg") url("./images/21.jpg") url("./images/22.jpg") url("./images/23.jpg") url("./images/24.jpg") url("./images/25.jpg") url("./images/26.jpg") url("./images/27.jpg") url("./images/28.jpg") url("./images/29.jpg") url("./images/30.jpg") url("./images/31.jpg");
922 | }
923 | 


--------------------------------------------------------------------------------
/styles.styl:
--------------------------------------------------------------------------------
  1 | @import "_deps"
  2 | @import "_code"
  3 | 
  4 | yellow = #FFDD00
  5 | orange = #FF9D00
  6 | 
  7 | html {
  8 |   box-sizing: border-box;
  9 | }
 10 | 
 11 | *, *:before, *:after {
 12 |   box-sizing: inherit;
 13 | }
 14 | 
 15 | body
 16 |   overflow hidden
 17 | 
 18 | // Mixin
 19 | random(min,max)
 20 |   return floor(math(0, 'random')*(max - min + 1) + min)
 21 | 
 22 | purple = #2E0067
 23 | 
 24 | 
 25 | .slides > article
 26 |   padding 50px
 27 |   &:before
 28 |     content ''
 29 |     display block
 30 |     width 100%
 31 |     height 100%
 32 |     position absolute
 33 |     // filter grayscale(100%) contrast(160%)
 34 |     background:url(images/3.jpg); // blacksmith
 35 |     background-size cover
 36 |     top 0
 37 |     left 0
 38 |     z-index -2
 39 |   &:after
 40 |     z-index -1
 41 |     content ''
 42 |     display block
 43 |     width 100%
 44 |     height 100%
 45 |     position absolute
 46 |     top 0
 47 |     left 0
 48 |     opacity 0.8
 49 |     background-image linear-gradient(random(0,360)deg, purple 0%, lighten(purple,10%) 100%);
 50 |   &.plain
 51 |     &:before, &:after
 52 |       display none
 53 |   &.section
 54 |     &:after
 55 |       background-image linear-gradient(random(0,360)deg, yellow 0%, lighten(yellow,10%) 100%);
 56 |     h1,h2,h3,h4,h5,h6
 57 |       filter none
 58 |     .sub
 59 |       color black
 60 | 
 61 | .slides > article.old-tools
 62 |   &:before
 63 |     background-image url("images/soldering.jpg") !important
 64 |     background-size contain
 65 |   &:after
 66 |     opacity 0.1
 67 | 
 68 | 
 69 | randomColor()
 70 |   return rgb(random(0,255),random(0,255),random(0,255))
 71 | 
 72 | combos = (#825854 #3de7e4) (#29519e #94eced) (#e26ab5 #1e4823) (#11feec #FF00E0) (#006C8D #006C8D) (#3a5c8e #eb821b) (#ca5723 #7d5794) (#6aa4e1 #ae5ceb) (#226443 #5e9ccd) (#6d6528 #3768f7) (#2decf5 #52aeea) (#d07dd7 #e1e34a) (#3456fd #14e839) (#f8078c #17156b)
 73 | 
 74 | randomGradient()
 75 |   n = random(1,13)
 76 |   combo = combos[n]
 77 |   return combo
 78 | 
 79 | 
 80 | 
 81 | for num in 1...40
 82 |   path = "images/"+ random(1,31)+".jpg"
 83 |   combo = randomGradient();
 84 |   .slides > article:nth-child(39n+{num})
 85 |     &:before
 86 |       background-image url(path)
 87 |       // background-image linear-gradient(random(0,360)deg, rando 0%, lighten(rando,10%) 100%);
 88 | 
 89 | // .slides > article:nth-child(1n):after
 90 | //     background-image: linear-gradient(-173deg, #007EFF 0%, #6DD7BA 51%);
 91 | 
 92 | h1,h2,h3,h4,h5,h6
 93 |   color white
 94 |   font-family: "pure", "Bavro", sans-serif;
 95 |   font-weight 700
 96 |   line-height: 0.8
 97 |   letter-spacing 0
 98 |   line-height auto
 99 |   text-shadow 10px 10px 0 alpha(white, 0.01)
100 |   margin -50px 0 15px 0
101 |   will-change: filter;
102 | 
103 | .firefox
104 |   h1,h2,h3,h4,h5,h6
105 |     filter: invert(100%);
106 |     text-shadow 10px 10px 0 alpha(white, 0.2)
107 | 
108 | 
109 | p, a, li
110 |   text-shadow 4px 3px 0 rgba(0,0,0,0.3)
111 |   margin 15px 0
112 |   font-family 'bavro'
113 | 
114 | p, li, small
115 |   color white
116 |   font-size 90px
117 | 
118 | .sub
119 |   font-family 'bavro'
120 |   transform skew(0, -8deg)
121 |   margin-top 100px
122 |   font-weight 100
123 |   color yellow
124 |   font-size 60px
125 | 
126 | h2 + .sub
127 |   transform none
128 | 
129 | 
130 | small
131 |   font-size 25px
132 | 
133 | h1
134 |   transform skew(0, -8deg)
135 |   font-size 300px
136 |   // color yellow
137 |   letter-spacing -2px
138 |   a
139 |     text-decoration none
140 |     font-size 20px
141 |     color black
142 |     padding-left 10px
143 | 
144 | ul {
145 |   text-align: left;
146 |   margin-left: 100px;
147 | }
148 | 
149 | h2
150 |   font-size 200px
151 |   // color yellow
152 |   line-height 1
153 |   margin 0
154 |   a
155 |     color blue
156 | 
157 | h2 + img
158 |   margin-top 20px !important
159 | 
160 | 
161 | .large
162 |   font-size 200px
163 | 
164 | .big
165 |   font-size 250px
166 | 
167 | .huge
168 |   font-size 450px
169 | 
170 | h3
171 |   font-size 70px
172 |   color yellow
173 |   line-height 1.5
174 | 
175 | h4
176 |   color yellow
177 |   font-size 50px
178 | 
179 | .halves
180 |   width 100%
181 | 
182 | .half
183 |   width 50%
184 | 
185 | 
186 | img.wide
187 |   width 100%
188 |   height auto
189 |   max-height none
190 | 
191 | img.high
192 |   width auto
193 |   height 100%
194 |   max-height 1200px
195 | 
196 | video.high
197 |   width: auto;
198 |   height: 100%;
199 |   min-width: 0;
200 | 
201 | .hl
202 |   color yellow
203 | 
204 | article.treats
205 |   h1
206 |     margin-bottom 90px
207 |     font-size 250px
208 |     // color orange
209 | 
210 | 
211 | .flex
212 |   display flex !important
213 |   & > *
214 |     flex 1
215 |     &:before
216 |       content  ''
217 | 
218 | 
219 | .emoji
220 |   font-size 116px
221 |   font-family serif
222 | 
223 | 
224 | // Smaller Screens
225 | body.square
226 |   .slides
227 |     & > article
228 |       w = 1920
229 |       h = 1080
230 |       width w px
231 |       height h px
232 |       margin-left (w/2) * -1px
233 |       margin-top (h/2) * -1px
234 |       border-radius 0
235 |       h2
236 |         font-size 110px
237 |       p, li, small
238 |         font-size 30px
239 |       .big
240 |         font-size 180px
241 |       .large
242 |         font-size 140px
243 |       .huge
244 |         font-size 220px
245 | 
246 | 
247 | // Fonts!
248 | @font-face {
249 |     font-family: 'bavro';
250 |     src: url('./fonts/bavro-regular-webfont.eot');
251 |     src: url('./fonts/bavro-regular-webfont.eot?#iefix') format('embedded-opentype'),
252 |          url('./fonts/bavro-regular-webfont.woff2') format('woff2'),
253 |          url('./fonts/bavro-regular-webfont.woff') format('woff'),
254 |          url('./fonts/bavro-regular-webfont.ttf') format('truetype'),
255 |          url('./fonts/bavro-regular-webfont.svg#bavroregular') format('svg');
256 |     font-weight: normal;
257 |     font-style: normal;
258 | }
259 | 
260 | @font-face {
261 |   font-family: "pure";
262 |   /* reference name */
263 |   src: url('./fonts/PureHeartSVG-Regular.otf');
264 |   font-weight: 400;
265 |   /* or whatever applies */
266 |   font-style: normal;
267 |   /* or whatever applies */
268 |   text-rendering: optimizeLegibility;
269 |   /* maybe */
270 | }
271 | 
272 | body::after
273 |   position:absolute;
274 |   width:1px;
275 |   height:1px;
276 |   overflow:hidden;
277 |   z-index:-1;
278 |   content: url(./images/1.jpg) url(./images/2.jpg) url(./images/3.jpg) url(./images/4.jpg) url(./images/5.jpg) url(./images/6.jpg) url(./images/7.jpg) url(./images/8.jpg) url(./images/9.jpg) url(./images/10.jpg) url(./images/11.jpg) url(./images/12.jpg) url(./images/13.jpg) url(./images/14.jpg) url(./images/15.jpg) url(./images/16.jpg) url(./images/17.jpg) url(./images/18.jpg) url(./images/19.jpg) url(./images/20.jpg) url(./images/21.jpg) url(./images/22.jpg) url(./images/23.jpg) url(./images/24.jpg) url(./images/25.jpg) url(./images/26.jpg) url(./images/27.jpg) url(./images/28.jpg) url(./images/29.jpg) url(./images/30.jpg) url(./images/31.jpg)


--------------------------------------------------------------------------------