-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
609 lines (606 loc) · 65 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
<!DOCTYPE html><html lang="en-GB"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0"><meta name="apple-mobile-web-app-capable" content="yes"><meta http-equiv="X-UA-Compatible" content="ie=edge"><meta property="og:type" content="website"><meta name="twitter:card" content="summary"><style>@media screen{body,html{background:#000;height:100%;margin:0;overflow:hidden}[data-bespoke-marp-fragment=inactive]{visibility:hidden}.bespoke-marp-osc{display:none;opacity:0}.bespoke-marp-parent{bottom:0;left:0;position:absolute;right:0;top:0}.bespoke-marp-parent>.bespoke-marp-osc{background:rgba(0,0,0,.65);border-radius:7px;bottom:50px;color:#fff;display:block;font-family:Helvetica,Arial,sans-serif;font-size:16px;left:50%;line-height:0;opacity:1;padding:12px;position:absolute;touch-action:manipulation;transform:translateX(-50%);transition:opacity .2s linear;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;white-space:nowrap;z-index:1}.bespoke-marp-parent>.bespoke-marp-osc>*{margin-left:6px}.bespoke-marp-parent>.bespoke-marp-osc>:first-child{margin-left:0}.bespoke-marp-parent>.bespoke-marp-osc>span{opacity:.8}.bespoke-marp-parent>.bespoke-marp-osc>span[data-bespoke-marp-osc=page]{display:inline-block;min-width:140px;text-align:center}.bespoke-marp-parent>.bespoke-marp-osc>button{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent;border:0;color:inherit;cursor:pointer;font-size:inherit;opacity:.8;outline:none;padding:0;transition:opacity .2s linear;-webkit-tap-highlight-color:transparent}.bespoke-marp-parent>.bespoke-marp-osc>button:disabled{cursor:not-allowed;opacity:.15!important}.bespoke-marp-parent>.bespoke-marp-osc>button:hover{opacity:1}.bespoke-marp-parent>.bespoke-marp-osc>button:hover:active{opacity:.6}.bespoke-marp-parent>.bespoke-marp-osc>button:hover:not(:disabled){transition:none}.bespoke-marp-parent>.bespoke-marp-osc>button[data-bespoke-marp-osc=prev]{background:transparent url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj48cGF0aCBmaWxsPSJub25lIiBzdHJva2U9IiNmZmYiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSI1IiBkPSJNNjggOTBMMjggNTBsNDAtNDAiLz48L3N2Zz4=") no-repeat 50%;background-size:contain;height:32px;overflow:hidden;text-indent:100%;white-space:nowrap;width:32px}.bespoke-marp-parent>.bespoke-marp-osc>button[data-bespoke-marp-osc=next]{background:transparent url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj48cGF0aCBmaWxsPSJub25lIiBzdHJva2U9IiNmZmYiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSI1IiBkPSJNMzIgOTBsNDAtNDAtNDAtNDAiLz48L3N2Zz4=") no-repeat 50%;background-size:contain;height:32px;overflow:hidden;text-indent:100%;white-space:nowrap;width:32px}.bespoke-marp-parent>.bespoke-marp-osc>button[data-bespoke-marp-osc=fullscreen]{background:transparent url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj48ZGVmcz48c3R5bGU+LmF7ZmlsbDpub25lO3N0cm9rZTojZmZmO3N0cm9rZS1saW5lY2FwOnJvdW5kO3N0cm9rZS1saW5lam9pbjpyb3VuZDtzdHJva2Utd2lkdGg6NXB4fTwvc3R5bGU+PC9kZWZzPjxyZWN0IGNsYXNzPSJhIiB4PSIxMCIgeT0iMjAiIHdpZHRoPSI4MCIgaGVpZ2h0PSI2MCIgcng9IjUuNjciLz48cGF0aCBjbGFzcz0iYSIgZD0iTTQwIDcwSDIwVjUwbTIwIDBMMjAgNzBtNDAtNDBoMjB2MjBtLTIwIDBsMjAtMjAiLz48L3N2Zz4=") no-repeat 50%;background-size:contain;height:32px;overflow:hidden;text-indent:100%;white-space:nowrap;width:32px}.bespoke-marp-parent>.bespoke-marp-osc>button[data-bespoke-marp-osc=fullscreen].exit{background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj48ZGVmcz48c3R5bGU+LmF7ZmlsbDpub25lO3N0cm9rZTojZmZmO3N0cm9rZS1saW5lY2FwOnJvdW5kO3N0cm9rZS1saW5lam9pbjpyb3VuZDtzdHJva2Utd2lkdGg6NXB4fTwvc3R5bGU+PC9kZWZzPjxyZWN0IGNsYXNzPSJhIiB4PSIxMCIgeT0iMjAiIHdpZHRoPSI4MCIgaGVpZ2h0PSI2MCIgcng9IjUuNjciLz48cGF0aCBjbGFzcz0iYSIgZD0iTTIwIDUwaDIwdjIwbS0yMCAwbDIwLTIwbTQwIDBINjBWMzBtMjAgMEw2MCA1MCIvPjwvc3ZnPg==")}.bespoke-marp-parent.bespoke-marp-inactive{cursor:none}.bespoke-marp-parent.bespoke-marp-inactive>.bespoke-marp-osc{opacity:0;pointer-events:none}svg.bespoke-marp-slide{height:100%;left:0;pointer-events:none;position:absolute;top:0;width:100%;z-index:-1}svg.bespoke-marp-slide.bespoke-marp-active{pointer-events:auto;z-index:0}svg.bespoke-marp-slide[data-bespoke-marp-load=hideable]{display:none}svg.bespoke-marp-slide[data-bespoke-marp-load=hideable].bespoke-marp-active{display:block}.bespoke-progress-parent{background:#222;display:flex;height:5px;width:100%}.bespoke-progress-parent+.bespoke-marp-parent{top:5px}.bespoke-progress-parent .bespoke-progress-bar{flex:0 0 0;background:#0288d1;transition:flex-basis .2s cubic-bezier(0,1,1,1)}}@media print{.bespoke-marp-osc,.bespoke-progress-parent{display:none!important;transition:none!important}.bespoke-marp-parent{top:0}}</style><style>div#p>svg>foreignObject>section{width:1280px;height:720px;box-sizing:border-box;overflow:hidden;position:relative;scroll-snap-align:center center}div#p>svg>foreignObject>section:after{bottom:0;content:attr(data-marpit-pagination);padding:inherit;pointer-events:none;position:absolute;right:0}div#p>svg>foreignObject>section:not([data-marpit-pagination]):after{display:none}/* Normalization */div#p>svg>foreignObject>section h1{font-size:2em;margin:0.67em 0}@page{size:1280px 720px;margin:0}@media print{body,html{background-color:#fff;margin:0;page-break-inside:avoid;break-inside:avoid-page}div#p>svg>foreignObject>section{page-break-before:always;break-before:page}div#p>svg>foreignObject>section,div#p>svg>foreignObject>section *{-webkit-print-color-adjust:exact!important;color-adjust:exact!important}div#p>svg[data-marpit-svg]{display:block;height:100vh;width:100vw}}div#p>svg>foreignObject>section svg[data-marp-fitting=svg]{display:block;height:auto;width:100%}@supports (-ms-ime-align:auto){div#p>svg>foreignObject>section svg[data-marp-fitting=svg]{position:static}}div#p>svg>foreignObject>section svg[data-marp-fitting=svg].__reflow__{content:""}@supports (-ms-ime-align:auto){div#p>svg>foreignObject>section svg[data-marp-fitting=svg].__reflow__{position:relative}}div#p>svg>foreignObject>section [data-marp-fitting-svg-content]{display:table;white-space:nowrap}div#p>svg>foreignObject>section [data-marp-fitting-svg-content-wrap]{white-space:pre}div#p>svg>foreignObject>section img[data-marp-twemoji]{background:transparent;height:1em;margin:0 .05em 0 .1em;vertical-align:-.1em;width:1em}
/*!
* Marp / Marpit Uncover theme
*
* @theme uncover
* @author Yuki Hattori
*
* @auto-scaling fittingHeader,math
* @size 4:3 960px 720px
*/div#p>svg>foreignObject>section{display:flex;flex-direction:column;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;flex-wrap:nowrap;font-size:40px;height:720px;justify-content:center;letter-spacing:3px;line-height:1.4;padding:30px 70px;position:relative;text-align:center;width:1280px;z-index:0;background:#fdfcff;color:#202228}div#p>svg>foreignObject>section:after{align-items:flex-end;display:flex;font-size:.6em;height:80px;justify-content:flex-end;padding:30px;text-align:right;width:80px;background:url('data:image/svg+xml;utf8,<svg xmlns="http:https://www.w3.org/2000/svg" viewbox="0 0 1 1" width="1" height="1"><path d="M0 1h1v-1Z" fill="rgba(32, 34, 40, 0.05)"/></svg>') no-repeat 50%;background-size:cover;color:#202228;text-shadow:0 0 5px #fdfcff}div#p>svg>foreignObject>section code,div#p>svg>foreignObject>section pre{background:#f2f1f4;color:#202228}div#p>svg>foreignObject>section a{color:#009dd5}div#p>svg>foreignObject>section a:hover{color:#087eaa}div#p>svg>foreignObject>section h1 strong,div#p>svg>foreignObject>section h2 strong,div#p>svg>foreignObject>section h3 strong,div#p>svg>foreignObject>section h4 strong,div#p>svg>foreignObject>section h5 strong,div#p>svg>foreignObject>section h6 strong{color:#33b1dd}div#p>svg>foreignObject>section footer,div#p>svg>foreignObject>section header{color:rgba(32,34,40,.4);text-shadow:0 1px 0 rgba(253,252,255,.8)}div#p>svg>foreignObject>section mark{color:#009dd5;background:transparent}div#p>svg>foreignObject>section:not(.invert) .hljs{display:block;overflow-x:auto;padding:.5em;background:#fff}div#p>svg>foreignObject>section:not(.invert) .hljs,div#p>svg>foreignObject>section:not(.invert) .hljs-subst{color:#000}div#p>svg>foreignObject>section:not(.invert) .hljs-addition,div#p>svg>foreignObject>section:not(.invert) .hljs-meta,div#p>svg>foreignObject>section:not(.invert) .hljs-string,div#p>svg>foreignObject>section:not(.invert) .hljs-symbol,div#p>svg>foreignObject>section:not(.invert) .hljs-template-tag,div#p>svg>foreignObject>section:not(.invert) .hljs-template-variable{color:#756bb1}div#p>svg>foreignObject>section:not(.invert) .hljs-comment,div#p>svg>foreignObject>section:not(.invert) .hljs-quote{color:#636363}div#p>svg>foreignObject>section:not(.invert) .hljs-bullet,div#p>svg>foreignObject>section:not(.invert) .hljs-link,div#p>svg>foreignObject>section:not(.invert) .hljs-literal,div#p>svg>foreignObject>section:not(.invert) .hljs-number,div#p>svg>foreignObject>section:not(.invert) .hljs-regexp{color:#31a354}div#p>svg>foreignObject>section:not(.invert) .hljs-deletion,div#p>svg>foreignObject>section:not(.invert) .hljs-variable{color:#88f}div#p>svg>foreignObject>section:not(.invert) .hljs-built_in,div#p>svg>foreignObject>section:not(.invert) .hljs-doctag,div#p>svg>foreignObject>section:not(.invert) .hljs-keyword,div#p>svg>foreignObject>section:not(.invert) .hljs-name,div#p>svg>foreignObject>section:not(.invert) .hljs-section,div#p>svg>foreignObject>section:not(.invert) .hljs-selector-class,div#p>svg>foreignObject>section:not(.invert) .hljs-selector-id,div#p>svg>foreignObject>section:not(.invert) .hljs-selector-tag,div#p>svg>foreignObject>section:not(.invert) .hljs-strong,div#p>svg>foreignObject>section:not(.invert) .hljs-tag,div#p>svg>foreignObject>section:not(.invert) .hljs-title,div#p>svg>foreignObject>section:not(.invert) .hljs-type{color:#3182bd}div#p>svg>foreignObject>section:not(.invert) .hljs-emphasis{font-style:italic}div#p>svg>foreignObject>section:not(.invert) .hljs-attribute{color:#e6550d}div#p>svg>foreignObject>section.invert{background:#202228;color:#fff}div#p>svg>foreignObject>section.invert:after{background:url('data:image/svg+xml;utf8,<svg xmlns="http:https://www.w3.org/2000/svg" viewbox="0 0 1 1" width="1" height="1"><path d="M0 1h1v-1Z" fill="rgba(255, 255, 255, 0.05)"/></svg>') no-repeat 50%;background-size:cover;color:#fff;text-shadow:0 0 5px #202228}div#p>svg>foreignObject>section.invert code,div#p>svg>foreignObject>section.invert pre{background:#2b2d33;color:#fff}div#p>svg>foreignObject>section.invert a{color:#60d0f0}div#p>svg>foreignObject>section.invert a:hover{color:#88dcf4}div#p>svg>foreignObject>section.invert h1 strong,div#p>svg>foreignObject>section.invert h2 strong,div#p>svg>foreignObject>section.invert h3 strong,div#p>svg>foreignObject>section.invert h4 strong,div#p>svg>foreignObject>section.invert h5 strong,div#p>svg>foreignObject>section.invert h6 strong{color:#80d9f3}div#p>svg>foreignObject>section.invert footer,div#p>svg>foreignObject>section.invert header{color:hsla(0,0%,100%,.4);text-shadow:0 1px 0 rgba(32,34,40,.8)}div#p>svg>foreignObject>section.invert mark{color:#60d0f0;background:transparent}div#p>svg>foreignObject>section.invert .hljs{display:block;overflow-x:auto;padding:.5em;background:#222;color:#fff}div#p>svg>foreignObject>section.invert .hljs-comment,div#p>svg>foreignObject>section.invert .hljs-quote{color:#777}div#p>svg>foreignObject>section.invert .hljs-built_in,div#p>svg>foreignObject>section.invert .hljs-builtin-name,div#p>svg>foreignObject>section.invert .hljs-bullet,div#p>svg>foreignObject>section.invert .hljs-deletion,div#p>svg>foreignObject>section.invert .hljs-link,div#p>svg>foreignObject>section.invert .hljs-literal,div#p>svg>foreignObject>section.invert .hljs-meta,div#p>svg>foreignObject>section.invert .hljs-number,div#p>svg>foreignObject>section.invert .hljs-params,div#p>svg>foreignObject>section.invert .hljs-regexp,div#p>svg>foreignObject>section.invert .hljs-symbol,div#p>svg>foreignObject>section.invert .hljs-tag,div#p>svg>foreignObject>section.invert .hljs-template-variable,div#p>svg>foreignObject>section.invert .hljs-variable{color:#ab875d}div#p>svg>foreignObject>section.invert .hljs-attribute,div#p>svg>foreignObject>section.invert .hljs-name,div#p>svg>foreignObject>section.invert .hljs-section,div#p>svg>foreignObject>section.invert .hljs-selector-class,div#p>svg>foreignObject>section.invert .hljs-selector-id,div#p>svg>foreignObject>section.invert .hljs-title,div#p>svg>foreignObject>section.invert .hljs-type{color:#9b869b}div#p>svg>foreignObject>section.invert .hljs-addition,div#p>svg>foreignObject>section.invert .hljs-keyword,div#p>svg>foreignObject>section.invert .hljs-selector-tag,div#p>svg>foreignObject>section.invert .hljs-string{color:#8f9c6c}div#p>svg>foreignObject>section.invert .hljs-emphasis{font-style:italic}div#p>svg>foreignObject>section.invert .hljs-strong{font-weight:700}div#p>svg>foreignObject>section>:first-child,div#p>svg>foreignObject>section[data-header]>:nth-child(2){margin-top:0}div#p>svg>foreignObject>section>:last-child,div#p>svg>foreignObject>section[data-footer]>:nth-last-child(2){margin-bottom:0}div#p>svg>foreignObject>section svg[data-marp-fitting=svg]{max-height:660px;--preserve-aspect-ratio:xMidYMid meet}div#p>svg>foreignObject>section blockquote,div#p>svg>foreignObject>section p{margin:0 0 15px}div#p>svg>foreignObject>section h1,div#p>svg>foreignObject>section h2,div#p>svg>foreignObject>section h3,div#p>svg>foreignObject>section h4,div#p>svg>foreignObject>section h5,div#p>svg>foreignObject>section h6{margin:15px 0 30px}div#p>svg>foreignObject>section h1 strong,div#p>svg>foreignObject>section h2 strong,div#p>svg>foreignObject>section h3 strong,div#p>svg>foreignObject>section h4 strong,div#p>svg>foreignObject>section h5 strong,div#p>svg>foreignObject>section h6 strong{font-weight:inherit}div#p>svg>foreignObject>section h1{font-size:2em}div#p>svg>foreignObject>section h2{font-size:1.7em}div#p>svg>foreignObject>section h3{font-size:1.4em;letter-spacing:2px}div#p>svg>foreignObject>section h4{font-size:1.2em;letter-spacing:2px}div#p>svg>foreignObject>section h5{font-size:1em;letter-spacing:1px}div#p>svg>foreignObject>section h6{font-size:.8em;letter-spacing:1px}div#p>svg>foreignObject>section footer,div#p>svg>foreignObject>section header{position:absolute;z-index:1;left:70px;right:70px;font-size:.45em;letter-spacing:1px}div#p>svg>foreignObject>section header{top:30px}div#p>svg>foreignObject>section footer{bottom:30px}div#p>svg>foreignObject>section a{text-decoration:none}div#p>svg>foreignObject>section a:hover{text-decoration:underline}div#p>svg>foreignObject>section ol,div#p>svg>foreignObject>section ul{margin:0 auto;text-align:left}div#p>svg>foreignObject>section>ol,div#p>svg>foreignObject>section>ul{margin-bottom:15px}div#p>svg>foreignObject>section code,div#p>svg>foreignObject>section pre{font-family:SFMono-Regular,Consolas,Liberation Mono,Menlo,Courier,monospace;letter-spacing:0;margin:-.2em .2em .2em;padding:.2em}div#p>svg>foreignObject>section pre{box-shadow:0 4px 8px rgba(0,0,0,.2);font-size:70%;line-height:1.15;margin:15px auto 30px;min-width:40%;padding:.4em .6em;text-align:left}div#p>svg>foreignObject>section pre>code{margin:0;padding:0}div#p>svg>foreignObject>section table{border-collapse:collapse;margin:0 auto 15px}div#p>svg>foreignObject>section table>tbody>tr>td,div#p>svg>foreignObject>section table>tbody>tr>th,div#p>svg>foreignObject>section table>thead>tr>td,div#p>svg>foreignObject>section table>thead>tr>th{padding:.15em .5em}div#p>svg>foreignObject>section table>thead>tr>td,div#p>svg>foreignObject>section table>thead>tr>th{border-bottom:3px solid}div#p>svg>foreignObject>section table>tbody>tr:not(:last-child)>td,div#p>svg>foreignObject>section table>tbody>tr:not(:last-child)>th{border-bottom:1px solid}div#p>svg>foreignObject>section blockquote{font-size:90%;line-height:1.3;padding:0 2em;position:relative;z-index:0}div#p>svg>foreignObject>section blockquote:after,div#p>svg>foreignObject>section blockquote:before{content:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj48cGF0aCBkPSJNNDQgMTkuM0wzOC45NCAwQzguMTQgOS41OSAwIDQwLjA1IDAgNTQuODNWMTAwaDQxLjQ3VjU0LjgzaC0yM2MtLjA0LS4yOC4yNS0yNy42NiAyNS41My0zNS41M3ptNTYgMEw5NC45NCAwQzY0LjE0IDkuNTkgNTYgNDAuMDUgNTYgNTQuODNWMTAwaDQxLjQ3VjU0LjgzaC0yM2MtLjA0LS4yOC4yNS0yNy42NiAyNS41My0zNS41M3oiIGZpbGw9IiM4ODgiIG9wYWNpdHk9Ii4zMyIvPjwvc3ZnPg==");height:auto;pointer-events:none;position:absolute;width:1em;z-index:-1}div#p>svg>foreignObject>section blockquote:before{left:0;top:0}div#p>svg>foreignObject>section blockquote:after{bottom:0;right:0;transform:rotate(180deg)}div#p>svg>foreignObject>section blockquote>:last-child{margin-bottom:0}div#p>svg>foreignObject>section[data-marpit-scope-NCJ7Kv1Z] table{font-size:15px;width:100%}div#p>svg>foreignObject>section[data-marpit-scope-5dfK5q8P] table{font-size:15px;width:100%}div#p>svg>foreignObject>section[data-marpit-scope-ajpV2GFT] table{font-size:15px;width:100%}div#p>svg>foreignObject>section[data-marpit-scope-FmUhJQ5m] table{font-size:20px;width:100%}div#p>svg>foreignObject>section[data-marpit-advanced-background=background]{display:block!important;padding:0!important}div#p>svg>foreignObject>section[data-marpit-advanced-background=background]:after,div#p>svg>foreignObject>section[data-marpit-advanced-background=background]:before,div#p>svg>foreignObject>section[data-marpit-advanced-background=content]:after,div#p>svg>foreignObject>section[data-marpit-advanced-background=content]:before{display:none!important}div#p>svg>foreignObject>section[data-marpit-advanced-background=background]>div[data-marpit-advanced-background-container]{all:initial;display:flex;flex-direction:row;height:100%;overflow:hidden;width:100%}div#p>svg>foreignObject>section[data-marpit-advanced-background=background]>div[data-marpit-advanced-background-container][data-marpit-advanced-background-direction=vertical]{flex-direction:column}div#p>svg>foreignObject>section[data-marpit-advanced-background=background][data-marpit-advanced-background-split]>div[data-marpit-advanced-background-container]{width:var(--marpit-advanced-background-split,50%)}div#p>svg>foreignObject>section[data-marpit-advanced-background=background][data-marpit-advanced-background-split=right]>div[data-marpit-advanced-background-container]{margin-left:calc(100% - var(--marpit-advanced-background-split, 50%))}div#p>svg>foreignObject>section[data-marpit-advanced-background=background]>div[data-marpit-advanced-background-container]>figure{all:initial;background-position:center;background-repeat:no-repeat;background-size:cover;flex:auto;margin:0}div#p>svg>foreignObject>section[data-marpit-advanced-background=content],div#p>svg>foreignObject>section[data-marpit-advanced-background=pseudo]{background:transparent!important}div#p>svg>foreignObject>section[data-marpit-advanced-background=pseudo],div#p>svg[data-marpit-svg]>foreignObject[data-marpit-advanced-background=pseudo]{pointer-events:none!important}div#p>svg>foreignObject>section[data-marpit-advanced-background-split]{width:100%;height:100%}</style></head><body><div class="bespoke-marp-osc"><button data-bespoke-marp-osc="prev" tabindex="-1" title="Previous slide">Previous slide</button><span data-bespoke-marp-osc="page"></span><button data-bespoke-marp-osc="next" tabindex="-1" title="Next slide">Next slide</button><button data-bespoke-marp-osc="fullscreen" tabindex="-1" title="Toggle fullscreen (f)">Toggle fullscreen</button></div><div id="p"><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="1" data-theme="uncover" style="--theme:uncover;">
<h1>Codemotion 2019</h1>
<h4>Mimacom|Flowable expedition selected notes & things we learned</h4>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="2" data-marpit-fragments="7" data-theme="uncover" style="--theme:uncover;">
<h4>Thinking like a Founder - Chad Arimura</h4>
<ul>
<li data-marpit-fragment="1">CEO's functions:
<ul>
<li data-marpit-fragment="2"><strong>People</strong> <img class="emoji" draggable="false" alt="🧍🏻" src="https://twemoji.maxcdn.com/2/svg/1f9cd-1f3fb.svg" data-marp-twemoji=""/> Choose wisely and empower your team</li>
<li data-marpit-fragment="3"><strong>Vision</strong> 👁 Just a north star</li>
<li data-marpit-fragment="4"><strong>Capital</strong> <img class="emoji" draggable="false" alt="🏃♀️" src="https://twemoji.maxcdn.com/2/svg/1f3c3-200d-2640-fe0f.svg" data-marp-twemoji=""/> Fear the treadmill</li>
</ul>
</li>
<li data-marpit-fragment="5">Culture
<ul>
<li data-marpit-fragment="6">YOU are the culture. Less words. Acts.</li>
<li data-marpit-fragment="7"><strong>Shitty or incoherent culture brings a shitty incoherent company.</strong> <img class="emoji" draggable="false" alt="⬅️" src="https://twemoji.maxcdn.com/2/svg/2b05.svg" data-marp-twemoji=""/> FUCKIN'AMEN</li>
</ul>
</li>
</ul>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="3" data-marpit-fragments="4" data-theme="uncover" style="--theme:uncover;">
<h4>Taking Back “Software Engineering”</h4>
<h6>By Dave Farley</h6>
<ul>
<li data-marpit-fragment="1">"UML is only a tool. It's not engineering"</li>
<li data-marpit-fragment="2">Solid disciplines are made with solid principles</li>
<li data-marpit-fragment="3"><strong>SCRUM is project management stuff. It's not SE. There is no word about coding in the SCRUM spec.</strong></li>
<li data-marpit-fragment="4">Craftsmanship: Production is not a problem (we simply copy bytes to deliver a product). The problem is design.</li>
</ul>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="4" data-marpit-fragments="4" data-theme="uncover" style="--theme:uncover;">
<h4>Taking Back “Software Engineering”</h4>
<ul>
<li data-marpit-fragment="1">Software industry
<ul>
<li data-marpit-fragment="2">Craft <img class="emoji" draggable="false" alt="⬅️" src="https://twemoji.maxcdn.com/2/svg/2b05.svg" data-marp-twemoji=""/> We are here</li>
<li data-marpit-fragment="3">Mass production <img class="emoji" draggable="false" alt="⬅️" src="https://twemoji.maxcdn.com/2/svg/2b05.svg" data-marp-twemoji=""/> WRONG</li>
<li data-marpit-fragment="4">Lean production techniques <img class="emoji" draggable="false" alt="⬅️" src="https://twemoji.maxcdn.com/2/svg/2b05.svg" data-marp-twemoji=""/> We WANT to be here (but we are not here yet)</li>
</ul>
</li>
</ul>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="5" data-marpit-fragments="3" data-theme="uncover" style="--theme:uncover;">
<h4>Taking Back “Software Engineering”</h4>
<ul>
<li data-marpit-fragment="1">The most expensive user story: "As the President of the U.S.A. I want to send a man to the moon before the end of this decade". JFK 1961</li>
<li data-marpit-fragment="2">Be experimental. Waterfall is not an option for big challenges: The Ranger Programme (to "hit" the moon)</li>
<li data-marpit-fragment="3">Just guessing is not good enough. You have to measure it! Be empirical</li>
</ul>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="6" data-theme="uncover" style="--theme:uncover;">
<h4>The first engineer <img class="emoji" draggable="false" alt="🙇🏻" src="https://twemoji.maxcdn.com/2/svg/1f647-1f3fb.svg" data-marp-twemoji=""/></h4>
<p><img src="images/margaret_hamilton.jpg" alt="Margaret Hamilton" /></p>
<p>Margaret Hamilton</p>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="7" data-theme="uncover" style="--theme:uncover;">
<h1><svg data-marp-fitting="svg"><foreignObject><span data-marp-fitting-svg-content> Don't be <em>like</em> engineers. <strong>Be</strong> engineers</span></foreignObject></svg></h1>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="8" data-marpit-fragments="6" data-theme="uncover" style="--theme:uncover;">
<h4>The Future of Serverless Java - Chad Arimura</h4>
<ul>
<li data-marpit-fragment="1">80% of the world is using Java, but Java is not popular in serverless environments and the trend is quite bad</li>
<li data-marpit-fragment="2">Java optimizations for serverless applications
<ul>
<li data-marpit-fragment="3">Class Data Sharing (JVM Enhancement)</li>
<li data-marpit-fragment="4"><a href="https://openjdk.java.net/projects/portola/">Project Portola</a>, a port of the JDK to the Alpine Linux distribution.</li>
<li data-marpit-fragment="5"><a href="https://github.com/oracle/graal/tree/master/substratevm">SubstrateVM</a>, a framework that allows ahead-of-time (AOT) compilation of Java applications.</li>
<li data-marpit-fragment="6"><a href="https://docs.oracle.com/javase/9/tools/jlink.htm">jlink</a>, a tool to create reduced JDKs</li>
</ul>
</li>
</ul>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="9" data-marpit-fragments="4" data-theme="uncover" style="--theme:uncover;">
<h4>The Future of Serverless Java - Chad Arimura</h4>
<ul>
<li data-marpit-fragment="1">Language improvements
<ul>
<li data-marpit-fragment="2">Less ceremony
<ul>
<li>var</li>
<li>Text blocks with """</li>
<li>Switch expressions</li>
</ul>
</li>
</ul>
</li>
<li data-marpit-fragment="3">JDK 10+ provides better integration with containers (recognizes cgroup limits)</li>
<li data-marpit-fragment="4">Simplified native code access with <a href="https://openjdk.java.net/projects/panama/">Project Panama</a></li>
</ul>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section data-theme="uncover" style="--theme:uncover;" data-marpit-advanced-background="background"><div data-marpit-advanced-background-container="true" data-marpit-advanced-background-direction="horizontal"><figure style="background-image:url("images/cambio1.jpg");"></figure></div></section></foreignObject><foreignObject width="1280" height="720"><section id="10" data-theme="uncover" style="--theme:uncover;" data-marpit-advanced-background="content"></section>
</foreignObject><foreignObject width="1280" height="720" data-marpit-advanced-background="pseudo"><section style="" data-marpit-advanced-background="pseudo"></section></foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="11" data-theme="uncover" style="--theme:uncover;">
<h4>¡GraalVM y Micronaut: compañeros perfectos! - Iván López (El simpático)</h4>
<ul>
<li>GraalVM: VM políglota de Oracle</li>
<li>Sin reflexión ni runtime proxies<br />
<img src="images/graalvm_architecture.png" alt="width:600" style="width:600px;" /></li>
</ul>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="12" data-theme="uncover" style="--theme:uncover;">
<h4>Descubriendo Quarkus, java sub-atómico en acción - Katia Aresti y Aurea Amunozhe</h4>
<ul>
<li>Quakus 1.0.0 Final --> 25 de Noviembre 2019</li>
<li>Container First</li>
<li>Standards-based (RESTEasy and JAX-RS, Hibernate ORM and JPA, Netty, Eclipse Vert.x, Eclipse MicroProfile, Apache Camel, Spring, etc)</li>
<li>Microservice First: Fast startup time and code turn around to Java apps</li>
</ul>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="13" data-theme="uncover" style="--theme:uncover;">
<h4>Descubriendo Quarkus, java sub-atómico en acción - Katia Aresti y Aurea Amunozhe</h4>
<p><img src="images/quarkus_rest_crud_size.png" alt="width:800px" style="width:800px;" /><br />
<img src="images/quarkus_rest_crud_time.png" alt="width:900px" style="width:900px;" /></p>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="14" data-theme="uncover" style="--theme:uncover;">
<h4>El futuro era esto: Reconocimiento facial sobre video en tiempo real sin servidores - Javier Ramirez</h4>
<ul>
<li>AWS Rekognition</li>
<li>Análisis de imágenes, videos y reconocimiento facial<br /><br />
<img src="images/aws_architecture.png" alt="width:1000px" style="width:1000px;" /></li>
</ul>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section data-theme="uncover" style="--theme:uncover;" data-marpit-advanced-background="background"><div data-marpit-advanced-background-container="true" data-marpit-advanced-background-direction="horizontal"><figure style="background-image:url("images/cambio2.jpg");"></figure></div></section></foreignObject><foreignObject width="1280" height="720"><section id="15" data-theme="uncover" style="--theme:uncover;" data-marpit-advanced-background="content"></section>
</foreignObject><foreignObject width="1280" height="720" data-marpit-advanced-background="pseudo"><section style="" data-marpit-advanced-background="pseudo"></section></foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="16" data-theme="uncover" style="--theme:uncover;">
<h2>Lo nuevo de CSS (Sonia Ruiz)</h2>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="17" data-marpit-scope-NCJ7Kv1Z="" data-theme="uncover" style="--theme:uncover;">
<h4>Presente</h4>
<table>
<thead>
<tr>
<th style="text-align:left"></th>
<th style="text-align:left"></th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:left"><strong>Custom Properties</strong></td>
<td style="text-align:left"></td>
</tr>
<tr>
<td style="text-align:left">Variables en css</td>
<td style="text-align:left"><img src="images/jruiz/custom-properties.jpg" alt="h:150" style="height:150px;" /></td>
</tr>
<tr>
<td style="text-align:left"><strong>Calc</strong></td>
<td style="text-align:left"></td>
</tr>
<tr>
<td style="text-align:left">Calculo entre distintas tipos de medidas.<br /> En un futuro se agregarán:<br /> max(), min(), clamp() <br />y funciones trigonométricas</td>
<td style="text-align:left"><img src="images/jruiz/calc.png" alt="h:150" style="height:150px;" /></td>
</tr>
<tr>
<td style="text-align:left"><strong>Conic Gradients</strong></td>
<td style="text-align:left"></td>
</tr>
<tr>
<td style="text-align:left">Hacer un pie chart solo con css<br />70% de compatibilidad en navegadores</td>
<td style="text-align:left"><img src="images/jruiz/conic.png" alt="h:200" style="height:200px;" /></td>
</tr>
</tbody>
</table>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="18" data-marpit-scope-5dfK5q8P="" data-theme="uncover" style="--theme:uncover;">
<h4>Futuro</h4>
<table>
<thead>
<tr>
<th style="text-align:left"></th>
<th style="text-align:left"></th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:left"><strong>Custom Selectors</strong></td>
<td style="text-align:left"></td>
</tr>
<tr>
<td style="text-align:left">Damos formato a todos los parrafos hijos<br /> de encabezados del 1 al 6</td>
<td style="text-align:left"><img src="images/jruiz/selectors.png" alt="h:50" style="height:50px;" /></td>
</tr>
<tr>
<td style="text-align:left"><strong>Scroll Snap</strong></td>
<td style="text-align:left"></td>
</tr>
<tr>
<td style="text-align:left">Sliders con css, para pc o movil</td>
<td style="text-align:left"><img src="images/jruiz/slider.png" alt="h:150" style="height:150px;" /></td>
</tr>
<tr>
<td style="text-align:left"><strong>Pseudo Clases</strong></td>
<td style="text-align:left">Selectores según tipos y estado</td>
</tr>
<tr>
<td style="text-align:left"><strong>Has</strong></td>
<td style="text-align:left"></td>
</tr>
<tr>
<td style="text-align:left">Seleccionamos todos los elementos enlace<br /> que tengan como hijo directo una imágen</td>
<td style="text-align:left"><img src="images/jruiz/has.png" alt="h:30" style="height:30px;" /></td>
</tr>
<tr>
<td style="text-align:left"><strong>Is</strong></td>
<td style="text-align:left"></td>
</tr>
<tr>
<td style="text-align:left">Seleccionamos todos los parrafos que tenga<br /> como padre un elemento de clase header, main, footer</td>
<td style="text-align:left"><img src="images/jruiz/is.png" alt="h:30" style="height:30px;" /></td>
</tr>
<tr>
<td style="text-align:left"><strong>Not</strong></td>
<td style="text-align:left"></td>
</tr>
<tr>
<td style="text-align:left">Seleccionamos todos los elementos li que no<br /> tengan la clase moreinfo</td>
<td style="text-align:left"><img src="images/jruiz/li.png" alt="h:30" style="height:30px;" /></td>
</tr>
</tbody>
</table>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="19" data-marpit-scope-ajpV2GFT="" data-theme="uncover" style="--theme:uncover;">
<table>
<thead>
<tr>
<th style="text-align:left"></th>
<th style="text-align:left"></th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:left"><strong>Sticky</strong></td>
<td style="text-align:left"></td>
</tr>
<tr>
<td style="text-align:left">Fijar un elemento en pantalla, hasta que<br /> aparezca otro con posicionamiento sticky.<br /> Tambien sirve para la fila header de una tabla</td>
<td style="text-align:left"><img src="images/jruiz/sticky.png" alt="h:300" style="height:300px;" /></td>
</tr>
<tr>
<td style="text-align:left"><strong>Fuentes variables</strong></td>
<td style="text-align:left"></td>
</tr>
<tr>
<td style="text-align:left">Con un único archivo de fuente, tenemos los textos con apariencias de fuente distintos</td>
<td style="text-align:left"><img src="images/jruiz/fuentes.png" alt="h:300" style="height:300px;" /></td>
</tr>
</tbody>
</table>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="20" data-marpit-scope-FmUhJQ5m="" data-theme="uncover" style="--theme:uncover;">
<h6>Todas estas propiedades son muy chulas, pero todavía no están 100% soportadas por todos los navegadores.</h6>
<h6>Os aconsejo consultarlas antes de usarlas en:</h6>
<h6><a href="https://caniuse.com/#home">https://caniuse.com/#home</a></h6>
<table>
<thead>
<tr>
<th style="text-align:left"></th>
<th style="text-align:left"></th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:left"><strong>Feature Queries</strong></td>
<td style="text-align:left"></td>
</tr>
<tr>
<td style="text-align:left">Para aplicar estilos según sean o no soportados por el navegador</td>
<td style="text-align:left"><img src="images/jruiz/features.png" alt="h:200" style="height:200px;" /></td>
</tr>
</tbody>
</table>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="21" data-theme="uncover" style="--theme:uncover;">
<h6>Para conocer que más cosas tendremos a futuro visitad:</h6>
<p><a href="http:https://cssdb.org">http:https://cssdb.org</a></p>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section data-theme="uncover" style="--theme:uncover;" data-marpit-advanced-background="background"><div data-marpit-advanced-background-container="true" data-marpit-advanced-background-direction="horizontal"><figure style="background-image:url("images/cambio3.jpg");background-size:contain;"></figure></div></section></foreignObject><foreignObject width="1280" height="720"><section id="22" data-theme="uncover" style="--theme:uncover;" data-marpit-advanced-background="content"></section>
</foreignObject><foreignObject width="1280" height="720" data-marpit-advanced-background="pseudo"><section style="" data-marpit-advanced-background="pseudo"></section></foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="23" data-marpit-fragments="6" data-theme="uncover" style="--theme:uncover;">
<h4>Interfaces en tiempo real con Angular y Redux - Antonio Pérez y Manuel Maldonado</h4>
<ul>
<li data-marpit-fragment="1">Típicos problemas en aplicaciones frontend <img class="emoji" draggable="false" alt="🤯" src="https://twemoji.maxcdn.com/2/svg/1f92f.svg" data-marp-twemoji=""/></li>
<li data-marpit-fragment="2">Patrón Flux:
<ul>
<li data-marpit-fragment="3">Store como única fuente de verdad</li>
<li data-marpit-fragment="4">Acciones como reglas para cambiar el estado del Store</li>
</ul>
</li>
<li data-marpit-fragment="5">Redux como solución</li>
<li data-marpit-fragment="6">Valoración del uso de Redux en un proyecto <img class="emoji" draggable="false" alt="🧐" src="https://twemoji.maxcdn.com/2/svg/1f9d0.svg" data-marp-twemoji=""/></li>
</ul>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="24" data-marpit-fragments="4" data-theme="uncover" style="--theme:uncover;">
<h4>Interfaces en tiempo real con Angular y Redux - Antonio Pérez y Manuel Maldonado</h4>
<ul>
<li data-marpit-fragment="1">Ejemplo práctico del uso en Angular con NgRx con múltiples fuentes de datos
<ul>
<li data-marpit-fragment="2">Módulos</li>
<li data-marpit-fragment="3">Estructura recomendada</li>
<li data-marpit-fragment="4">Acciones -> Efectos -> Acciones</li>
</ul>
</li>
</ul>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="25" data-marpit-fragments="6" data-theme="uncover" style="--theme:uncover;">
<h4>How to build Javascript-powered Smartglasses - Ruben van der Leun</h4>
<ul>
<li data-marpit-fragment="1">Smartglasses / Vuzix prototype <img class="emoji" draggable="false" alt="🤓" src="https://twemoji.maxcdn.com/2/svg/1f913.svg" data-marp-twemoji=""/></li>
<li data-marpit-fragment="2">Motivación</li>
<li data-marpit-fragment="3">3 elementos hardware:
<ul>
<li data-marpit-fragment="4">Vufine</li>
<li data-marpit-fragment="5">Raspberry Pi</li>
<li data-marpit-fragment="6">Powerbank</li>
</ul>
</li>
</ul>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="26" data-marpit-fragments="4" data-theme="uncover" style="--theme:uncover;">
<h4>How to build Javascript-powered Smartglasses - Ruben van der Leun</h4>
<ul>
<li data-marpit-fragment="1">Software: Rubeye platform connected with a Webapp</li>
<li data-marpit-fragment="2">Demo: navegador, cámara, Youtube, GoogleMaps, Face-Recognition</li>
<li data-marpit-fragment="3">Conclusiones</li>
<li data-marpit-fragment="4">Nuevos retos <img class="emoji" draggable="false" alt="🧐" src="https://twemoji.maxcdn.com/2/svg/1f9d0.svg" data-marp-twemoji=""/></li>
</ul>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="27" data-marpit-fragments="5" data-theme="uncover" style="--theme:uncover;">
<h4>Are Web Components the Betamax of Web Development? - Horacio Gonzalez</h4>
<ul>
<li data-marpit-fragment="1">Concepto de Componente Web (W3C)
<ul>
<li data-marpit-fragment="2">Custom Elements</li>
<li data-marpit-fragment="3">Shadow DOM</li>
<li data-marpit-fragment="4">Template</li>
</ul>
</li>
<li data-marpit-fragment="5">Historia Betamax <img class="emoji" draggable="false" alt="📼" src="https://twemoji.maxcdn.com/2/svg/1f4fc.svg" data-marp-twemoji=""/></li>
</ul>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="28" data-marpit-fragments="6" data-theme="uncover" style="--theme:uncover;">
<h4>Are Web Components the Betamax of Web Development? - Horacio Gonzalez</h4>
<ul>
<li data-marpit-fragment="1">Componentes Web compatibles con todos los navegadores</li>
<li data-marpit-fragment="2">Ionic
<ul>
<li data-marpit-fragment="3">AngularJS -> Angular</li>
<li data-marpit-fragment="4">Stencil</li>
</ul>
</li>
<li data-marpit-fragment="5">Polymer, deprecated?</li>
<li data-marpit-fragment="6">Los componentes web valen la pena, son el estándar <img class="emoji" draggable="false" alt="🤨" src="https://twemoji.maxcdn.com/2/svg/1f928.svg" data-marp-twemoji=""/></li>
</ul>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="29" data-marpit-fragments="8" data-theme="uncover" style="--theme:uncover;">
<h4>React hooks, bye bye to classes - Carlos P. Jimeno</h4>
<ul>
<li data-marpit-fragment="1">Hooks:
<ul>
<li data-marpit-fragment="2">useState (Toggle)</li>
<li data-marpit-fragment="3">useEffect (Scroll)</li>
<li data-marpit-fragment="4">useContext (Theme)</li>
</ul>
</li>
<li data-marpit-fragment="5">Powerful useReducer + useContext combination <img class="emoji" draggable="false" alt="💪" src="https://twemoji.maxcdn.com/2/svg/1f4aa.svg" data-marp-twemoji=""/></li>
<li data-marpit-fragment="6">Custom hooks:
<ul>
<li data-marpit-fragment="7">useChecked</li>
<li data-marpit-fragment="8">useArray</li>
</ul>
</li>
</ul>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="30" data-theme="uncover" style="--theme:uncover;">
<h4>React hooks, bye bye to classes - ~~Carlos P. Jimeno~~ Victor Ibáñez <img class="emoji" draggable="false" alt="🤷♂️" src="https://twemoji.maxcdn.com/2/svg/1f937-200d-2642-fe0f.svg" data-marp-twemoji=""/></h4>
<p><img src="images/React_hooks_bye_bye_classes.jpg" alt="width:300px" style="width:300px;" /></p>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section data-theme="uncover" style="--theme:uncover;" data-marpit-advanced-background="background"><div data-marpit-advanced-background-container="true" data-marpit-advanced-background-direction="horizontal"><figure style="background-image:url("images/cambio4.jpg");"></figure></div></section></foreignObject><foreignObject width="1280" height="720"><section id="31" data-theme="uncover" style="--theme:uncover;" data-marpit-advanced-background="content"></section>
</foreignObject><foreignObject width="1280" height="720" data-marpit-advanced-background="pseudo"><section style="" data-marpit-advanced-background="pseudo"></section></foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="32" data-theme="uncover" style="--theme:uncover;">
<h4>Building Reactive Pipelines - Mark Heckler</h4>
<ul>
<li>Procesamiento de datos asíncrono, no bloqueante y orientado a eventos</li>
<li>Reactive Stream API</li>
<li>Reactive Cloud Stream (requiere una cola de mensajería: Kafka, RabbitMQ)</li>
<li>Publisher<T>, Processor<T,R>, Subscriber<T>, Subscription.</li>
<li>Mono vs Flux</li>
</ul>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="33" data-theme="uncover" style="--theme:uncover;">
<h4>Building Reactive Pipelines - Mark Heckler</h4>
<ul>
<li>Publisher @EnableBinding(Source.class)</li>
<li>Processor @EnableBinding(Processor.class)</li>
<li>Subscriber @EnableBinding(Sink.class)</li>
</ul>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="34" data-theme="uncover" style="--theme:uncover;">
<h4>One Click Development Environments - Pablo Chico de Guzman</h4>
<ul>
<li>Entorno de desarrollo: replicable, integrado, rápido</li>
</ul>
<table>
<thead>
<tr>
<th></th>
<th>Replicable</th>
<th>Integrado</th>
<th>Rápido</th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>Local</strong></td>
<td>NO</td>
<td>NO</td>
<td>SÍ</td>
</tr>
<tr>
<td><strong>Vagrant</strong></td>
<td>SÍ</td>
<td>SÍ</td>
<td>NO</td>
</tr>
<tr>
<td><strong>Docker</strong></td>
<td>SÍ</td>
<td>SÍ</td>
<td>NO</td>
</tr>
</tbody>
</table>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="35" data-theme="uncover" style="--theme:uncover;">
<h4>One Click Development Environments - Pablo Chico de Guzman</h4>
<ul>
<li>Cloud Native Development: pod mutables, cambio de imagen local en el pod
<ul>
<li>Sincronización código desde el propio editor en local hasta el pod</li>
</ul>
</li>
</ul>
<table>
<thead>
<tr>
<th></th>
<th>Replicable</th>
<th>Integrado</th>
<th>Rápido</th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>Cloud Native</strong></td>
<td>SÍ</td>
<td>SÍ</td>
<td>SÍ</td>
</tr>
</tbody>
</table>
<ul>
<li>Visual Studio Code Remote development</li>
</ul>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section data-theme="uncover" style="--theme:uncover;" data-marpit-advanced-background="background"><div data-marpit-advanced-background-container="true" data-marpit-advanced-background-direction="horizontal"><figure style="background-image:url("images/cambio5.jpg");"></figure></div></section></foreignObject><foreignObject width="1280" height="720"><section id="36" data-theme="uncover" style="--theme:uncover;" data-marpit-advanced-background="content"></section>
</foreignObject><foreignObject width="1280" height="720" data-marpit-advanced-background="pseudo"><section style="" data-marpit-advanced-background="pseudo"></section></foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="37" data-marpit-fragments="1" data-theme="uncover" style="--theme:uncover;">
<h4>Tips para mejorar la gestión de tu tiempo</h4>
<p><strong>Adolfo Sanz De Diego</strong></p>
<ul>
<li data-marpit-fragment="1">Creador de una comunidad, organizador de hackathones, profesor de universidad, imparte cursos de tecnología, asesor técnico y padre de dos hijas</li>
</ul>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="38" data-marpit-fragments="2" data-theme="uncover" style="--theme:uncover;">
<h4>Planificar</h4>
<table>
<thead>
<tr>
<th></th>
<th>Urgente</th>
<th>No Urgente</th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>Importante</strong></td>
<td>Hazlo!</td>
<td>Agéndalo</td>
</tr>
<tr>
<td><strong>No Importante</strong></td>
<td>Delega</td>
<td>Olvida</td>
</tr>
</tbody>
</table>
<ul>
<li data-marpit-fragment="1">Lista Tareas: Cortas, concretas y agendables</li>
<li data-marpit-fragment="2"><strong>Agendar</strong> y poner alarmas</li>
</ul>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="39" data-marpit-fragments="5" data-theme="uncover" style="--theme:uncover;">
<h4>Consejos</h4>
<ul>
<li data-marpit-fragment="1">Si <2 minutos: hazlo</li>
<li data-marpit-fragment="2">Aprende a decir que no (O posponer)</li>
<li data-marpit-fragment="3">Conoce tus herramientas</li>
<li data-marpit-fragment="4">Orden</li>
<li data-marpit-fragment="5">Automatizar: scripts, filtros de email, etc..</li>
</ul>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="40" data-marpit-fragments="5" data-theme="uncover" style="--theme:uncover;">
<h4>Distracciones</h4>
<ul>
<li data-marpit-fragment="1">Darse de baja de listas de correo</li>
<li data-marpit-fragment="2">Redes sociales cerradas</li>
<li data-marpit-fragment="3">Cerrar pestañas que no utilicemos</li>
<li data-marpit-fragment="4">Primero lo primero/importante</li>
<li data-marpit-fragment="5">Regla de los 5 segundos</li>
</ul>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="41" data-marpit-fragments="6" data-theme="uncover" style="--theme:uncover;">
<h4>Interrupciones</h4>
<ul>
<li data-marpit-fragment="1">Modo no molestar en móvil y pc</li>
<li data-marpit-fragment="2">Correo 2/3 veces al día</li>
<li data-marpit-fragment="3">Una cosa a la vez</li>
<li data-marpit-fragment="4">Mejor una llamada que un mail</li>
<li data-marpit-fragment="5">Cascos</li>
<li data-marpit-fragment="6">Reuniones <1h con agenda clara</li>
</ul>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="42" data-theme="uncover" style="--theme:uncover;">
<h4>Perfectionism, Impostor Syndrome and Anxiety - Understanding your fears and learning to be kind to yourself</h4>
<p><strong>Jo Franchetti</strong></p>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="43" data-marpit-fragments="5" data-theme="uncover" style="--theme:uncover;">
<h4>Sindrome del impostor</h4>
<ul>
<li data-marpit-fragment="1">Sensación de que los demás son mejores que tú</li>
<li data-marpit-fragment="2">Miedo a pedir ayuda por parecer ignorante</li>
<li data-marpit-fragment="3">Pánico a justificar en el daily tu trabajo diario -> sobreesfuerzo</li>
<li data-marpit-fragment="4">Sensación de que no mereces estar donde estás y de que van a descubrir que eres un fraude</li>
<li data-marpit-fragment="5">Miedo a colaborar en un proyecto opensource por no estar al nivel</li>
</ul>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="44" data-marpit-fragments="6" data-theme="uncover" style="--theme:uncover;">
<h4>Perfeccionismo</h4>
<ul>
<li data-marpit-fragment="1">Autoexigirse un nivel inalcanzable</li>
<li data-marpit-fragment="2">Preocupación por lo que piensen los demás</li>
<li data-marpit-fragment="3">"Bastante bien" no es suficiente</li>
<li data-marpit-fragment="4">Miedo a entregar un trabajo porque alguien pueda encontrar un error</li>
<li data-marpit-fragment="5">Dejar cosas inacabadas por no conseguir exáctamente lo que se pretendía en un principio</li>
<li data-marpit-fragment="6">Pedir ayuda es no ser perfecto</li>
</ul>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="45" data-marpit-fragments="5" data-theme="uncover" style="--theme:uncover;">
<h4>Consejos</h4>
<ul>
<li data-marpit-fragment="1">"Perfecto" es un enemigo de "muy bien"</li>
<li data-marpit-fragment="2">Pedir ayuda te hace mejorar y ahorrar tiempo</li>
<li data-marpit-fragment="3">Nadie te va a criticar más que tú mismo</li>
<li data-marpit-fragment="4">Si alguien encuentra un error, es una oportunidad para aprender</li>
<li data-marpit-fragment="5">Hablar de tus problemas y ayudar a los demás</li>
</ul>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="46" data-theme="uncover" style="--theme:uncover;">
<p><em>"We learn most when reality does NOT match our predictions"</em></p>
<p><strong>Dave Farley</strong></p>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="47" data-marpit-fragments="5" data-theme="uncover" style="--theme:uncover;">
<h4>Wrap-up</h4>
<ul>
<li data-marpit-fragment="1">
<p>El nivel de las charlas fue muy variable.</p>
</li>
<li data-marpit-fragment="2">
<p>La organización, excelente.</p>
</li>
<li data-marpit-fragment="3">
<p>Vale la pena para:</p>
<ol>
<li data-marpit-fragment="4">Mantenerse al corriente, enterarse de en qué dirección van las cosas, etc.</li>
<li data-marpit-fragment="5">Hacer equipo y ¡pasarlo bien!</li>
</ol>
</li>
</ul>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="48" data-theme="uncover" style="--theme:uncover;">
<p>Tenéis toda la información y las slides de esta charla en el siguiente repositorio:</p>
<p><a href="https://gitlab.edorasware.com/solutionsES/codemotion2019">https://gitlab.edorasware.com/solutionsES/codemotion2019</a></p>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="49" data-theme="uncover" style="--theme:uncover;">
<h1><svg data-marp-fitting="svg"><foreignObject><span data-marp-fitting-svg-content> <img class="emoji" draggable="false" alt="🍕" src="https://twemoji.maxcdn.com/2/svg/1f355.svg" data-marp-twemoji=""/> ¡Gracias!</span></foreignObject></svg></h1>
</section>
</foreignObject></svg></div><script>!function(){"use strict";const t=()=>"Apple Computer, Inc."===navigator.vendor?[e]:[];function e(t){Array.from(document.getElementsByTagName("svg"),e=>{if(e.hasAttribute("data-marpit-svg")){const{clientHeight:r,clientWidth:a}=e;e.style.transform||(e.style.transform="translateZ(0)");const i=t||e.currentScale||1,n=e.viewBox.baseVal.width/i,s=e.viewBox.baseVal.height/i,o=Math.min(r/s,a/n);Array.from(e.querySelectorAll(":scope > foreignObject"),t=>{const e=t.x.baseVal.value,i=t.y.baseVal.value;Array.from(t.querySelectorAll(":scope > section"),t=>{t.style.transformOrigin||(t.style.transformOrigin="0 0");const l=(a-o*n)/2-e,c=(r-o*s)/2-i;t.style.transform=`translate3d(${l}px,${c}px,0) scale(${o}) translate(${e}px,${i}px)`})})}})}const r="data-marp-fitting",a="data-marp-fitting-code",i="data-marp-fitting-math",n=(t,e,r)=>{if(t.getAttribute(e)!==r)return t.setAttribute(e,r),!0};!function(e=!0){const s=()=>{for(const e of t())e();Array.from(document.querySelectorAll(`svg[${r}="svg"]`),t=>{const e=t.firstChild,r=e.firstChild,{scrollWidth:s,scrollHeight:o}=r;let l,c=1;if(t.hasAttribute(a)&&(l=t.parentElement.parentElement),t.hasAttribute(i)&&(l=t.parentElement),l){const t=getComputedStyle(l),e=Math.ceil(l.clientWidth-parseFloat(t.paddingLeft)-parseFloat(t.paddingRight));e&&(c=e)}const m=Math.max(s,c),p=Math.max(o,1),g=`0 0 ${m} ${p}`;n(e,"width",`${m}`),n(e,"height",`${p}`),n(t,"preserveAspectRatio",getComputedStyle(t).getPropertyValue("--preserve-aspect-ratio")||"xMinYMin meet"),n(t,"viewBox",g)&&t.classList.toggle("__reflow__")}),e&&window.requestAnimationFrame(s)};s()}()}();
</script><script>!function(){"use strict";var e={from:function(e,t){var n,r=1===(e.parent||e).nodeType?e.parent||e:document.querySelector(e.parent||e),s=[].filter.call("string"==typeof e.slides?r.querySelectorAll(e.slides):e.slides||r.children,(function(e){return"SCRIPT"!==e.nodeName})),a={},o=function(e,t){return(t=t||{}).index=s.indexOf(e),t.slide=e,t},i=function(e,t){a[e]=(a[e]||[]).filter((function(e){return e!==t}))},l=function(e,t){return(a[e]||[]).reduce((function(e,n){return e&&!1!==n(t)}),!0)},c=function(e,t){s[e]&&(n&&l("deactivate",o(n,t)),n=s[e],l("activate",o(n,t)))},u=function(e,t){var r=s.indexOf(n)+e;l(e>0?"next":"prev",o(n,t))&&c(r,t)},d={off:i,on:function(e,t){return(a[e]||(a[e]=[])).push(t),i.bind(null,e,t)},fire:l,slide:function(e,t){if(!arguments.length)return s.indexOf(n);l("slide",o(s[e],t))&&c(e,t)},next:u.bind(null,1),prev:u.bind(null,-1),parent:r,slides:s,destroy:function(e){l("destroy",o(n,e)),a={}}};return(t||[]).forEach((function(e){e(d)})),n||c(0),d}},t=function(){return function(e){e.slides.forEach((function(e){e.addEventListener("keydown",(function(e){(/INPUT|TEXTAREA|SELECT/.test(e.target.nodeName)||"true"===e.target.contentEditable)&&e.stopPropagation()}))}))}};function n(e){e.parent.classList.add("bespoke-marp-parent"),e.slides.map(e=>e.classList.add("bespoke-marp-slide")),e.on("activate",t=>{e.slides.map(e=>e.classList.remove("bespoke-marp-active")),t.slide.classList.add("bespoke-marp-active")})}function r(e=2e3){return t=>{let n;function r(){n&&clearTimeout(n),n=setTimeout(()=>{t.parent.classList.add("bespoke-marp-inactive")},e),t.parent.classList.remove("bespoke-marp-inactive")}document.addEventListener("mousedown",r),document.addEventListener("mousemove",r),document.addEventListener("touchend",r),setTimeout(r,0)}}function s(e){window.addEventListener("load",()=>{for(const t of e.slides){const e=t.querySelector("[data-marp-fitting]")?"":"hideable";t.setAttribute("data-bespoke-marp-load",e)}})}function a(e){let t=0,n=0;Object.defineProperty(e,"fragments",{enumerable:!0,value:e.slides.map(e=>[null,...e.querySelectorAll("[data-marpit-fragment]")])});const r=r=>void 0!==e.fragments[t][n+r],s=(r,s)=>{t=r,n=s,e.fragments.forEach((e,t)=>{e.forEach((e,n)=>{if(null==e)return;const a=t<r||t===r&&n<=s;e.setAttribute("data-bespoke-marp-fragment",a?"active":"inactive"),t===r&&n===s?e.setAttribute("data-bespoke-marp-current-fragment","current"):e.removeAttribute("data-bespoke-marp-current-fragment")})}),e.fragmentIndex=s;const a={slide:e.slides[r],index:r,fragments:e.fragments[r],fragmentIndex:s};e.fire("fragment",a)};e.on("next",()=>{if(r(1))return s(t,n+1),!1;const a=t+1;e.fragments[a]&&s(a,0)}),e.on("prev",()=>{if(r(-1))return s(t,n-1),!1;const a=t-1;e.fragments[a]&&s(a,e.fragments[a].length-1)}),e.on("slide",({index:t,fragment:n})=>{let r=0;if(void 0!==n){const s=e.fragments[t];if(s){const{length:e}=s;r=-1===n?e-1:Math.min(Math.max(n,0),e-1)}}s(t,r)}),s(0,0)}var o,i=function(e,t){return e(t={exports:{}},t.exports),t.exports}((function(e){!function(){var t="undefined"!=typeof window&&void 0!==window.document?window.document:{},n=e.exports,r=function(){for(var e,n=[["requestFullscreen","exitFullscreen","fullscreenElement","fullscreenEnabled","fullscreenchange","fullscreenerror"],["webkitRequestFullscreen","webkitExitFullscreen","webkitFullscreenElement","webkitFullscreenEnabled","webkitfullscreenchange","webkitfullscreenerror"],["webkitRequestFullScreen","webkitCancelFullScreen","webkitCurrentFullScreenElement","webkitCancelFullScreen","webkitfullscreenchange","webkitfullscreenerror"],["mozRequestFullScreen","mozCancelFullScreen","mozFullScreenElement","mozFullScreenEnabled","mozfullscreenchange","mozfullscreenerror"],["msRequestFullscreen","msExitFullscreen","msFullscreenElement","msFullscreenEnabled","MSFullscreenChange","MSFullscreenError"]],r=0,s=n.length,a={};r<s;r++)if((e=n[r])&&e[1]in t){for(r=0;r<e.length;r++)a[n[0][r]]=e[r];return a}return!1}(),s={change:r.fullscreenchange,error:r.fullscreenerror},a={request:function(e){return new Promise(function(n,s){var a=function(){this.off("change",a),n()}.bind(this);this.on("change",a),e=e||t.documentElement,Promise.resolve(e[r.requestFullscreen]()).catch(s)}.bind(this))},exit:function(){return new Promise(function(e,n){if(this.isFullscreen){var s=function(){this.off("change",s),e()}.bind(this);this.on("change",s),Promise.resolve(t[r.exitFullscreen]()).catch(n)}else e()}.bind(this))},toggle:function(e){return this.isFullscreen?this.exit():this.request(e)},onchange:function(e){this.on("change",e)},onerror:function(e){this.on("error",e)},on:function(e,n){var r=s[e];r&&t.addEventListener(r,n,!1)},off:function(e,n){var r=s[e];r&&t.removeEventListener(r,n,!1)},raw:r};r?(Object.defineProperties(a,{isFullscreen:{get:function(){return Boolean(t[r.fullscreenElement])}},element:{enumerable:!0,get:function(){return t[r.fullscreenElement]}},isEnabled:{enumerable:!0,get:function(){return Boolean(t[r.fullscreenEnabled])}}}),n?e.exports=a:window.screenfull=a):n?e.exports={isEnabled:!1}:window.screenfull={isEnabled:!1}}()}));i.isEnabled;function l(e){e.fullscreen=()=>{i.isEnabled&&i.toggle(document.body)},document.addEventListener("keydown",t=>{70!==t.which&&122!==t.which||t.altKey||t.ctrlKey||t.metaKey||!i.isEnabled||(e.fullscreen(),t.preventDefault())})}function c(e={}){const t=Object.assign({interval:200},e);return e=>{document.addEventListener("keydown",t=>{(32===t.which&&t.shiftKey||33===t.which||37===t.which||38===t.which)&&e.prev(),(32===t.which&&!t.shiftKey||34===t.which||39===t.which||40===t.which)&&e.next(),35===t.which&&e.slide(e.slides.length-1,{fragment:-1}),36===t.which&&e.slide(0)});let n,r,s=0;e.parent.addEventListener("wheel",a=>{let i=!1;const l=(e,t)=>{e&&(i=i||function(e,t){return function(e,t){const n=t===o.X?"Width":"Height";return e[`client${n}`]<e[`scroll${n}`]}(e,t)&&function(e,t){const{overflow:n}=e,r=e[`overflow${t}`];return"auto"===n||"scroll"===n||"auto"===r||"scroll"===r}(getComputedStyle(e),t)}(e,t)),e&&e.parentElement&&l(e.parentElement,t)};if(0!==a.deltaX&&l(a.target,o.X),0!==a.deltaY&&l(a.target,o.Y),i)return;a.preventDefault(),r&&clearTimeout(r),r=setTimeout(()=>{n=0},t.interval);const c=Date.now()-s<t.interval,u=Math.sqrt(Math.pow(a.deltaX,2)+Math.pow(a.deltaY,2)),d=u<=n;if(n=u,c||d)return;let f;(a.deltaX>0||a.deltaY>0)&&(f="next"),(a.deltaX<0||a.deltaY<0)&&(f="prev"),f&&(e[f](),s=Date.now())})}}function u(e=".bespoke-marp-osc"){const t=document.querySelector(e);if(!t)return()=>{};const n=(e,n)=>{t.querySelectorAll(`[data-bespoke-marp-osc=${JSON.stringify(e)}]`).forEach(n)};return i.isEnabled||n("fullscreen",e=>e.style.display="none"),e=>{t.addEventListener("click",t=>{if(t.target instanceof HTMLElement)switch(t.target.dataset.bespokeMarpOsc){case"next":e.next();break;case"prev":e.prev();break;case"fullscreen":"function"==typeof e.fullscreen&&i.isEnabled&&e.fullscreen()}}),e.parent.appendChild(t),e.on("activate",({index:t})=>{n("page",n=>n.textContent=`Page ${t+1} of ${e.slides.length}`)}),e.on("fragment",({index:t,fragments:r,fragmentIndex:s})=>{n("prev",e=>e.disabled=0===t&&0===s),n("next",n=>n.disabled=t===e.slides.length-1&&s===r.length-1)}),i.isEnabled&&i.onchange(()=>n("fullscreen",e=>e.classList.toggle("exit",i.isEnabled&&i.isFullscreen)))}}!function(e){e.X="X",e.Y="Y"}(o||(o={}));const d=".bespoke-progress-bar";function f(e){e.on("activate",t=>{document.querySelectorAll(d).forEach(n=>{n.style.flexBasis=`${100*t.index/(e.slides.length-1)}%`})})}const h=(e,{protocol:t,host:n,pathname:r,hash:s}=location)=>{const a=e.toString();return`${t}//${n}${r}${a?"?":""}${a}${s}`},m=e=>new URLSearchParams(location.search).get(e),g=e=>{const t=Number.parseInt(e,10);return Number.isNaN(t)?null:t};function p(e={}){const t=Object.assign({history:!0},e);return e=>{let n=!0;const r=e=>{const t=n;try{return n=!0,e()}finally{n=t}},s=(t={fragment:!0})=>{((t,n)=>{const{fragments:r,slides:s}=e,a=Math.max(0,Math.min(t,s.length-1)),o=Math.max(0,Math.min(n||0,r[a].length-1));a===e.slide()&&o===e.fragmentIndex||e.slide(a,{fragment:o})})((g(location.hash.slice(1))||1)-1,t.fragment?g(m("f")||""):null)};e.on("fragment",({index:e,fragmentIndex:r})=>{if(n)return;const s=new URLSearchParams(location.search);0===r?s.delete("f"):s.set("f",r.toString()),((...e)=>t.history?history.pushState(...e):history.replaceState(...e))(null,document.title,h(s,Object.assign(Object.assign({},location),{hash:`#${e+1}`})))}),setTimeout(()=>{s(),window.addEventListener("hashchange",()=>r(()=>{s({fragment:!1});const e=new URLSearchParams(location.search);e.delete("f"),history.replaceState(null,document.title,h(e))})),window.addEventListener("popstate",()=>{n||r(()=>s())}),n=!1},0)}}var b=self.crypto||self.msCrypto,v=function(e){e=e||21;for(var t="",n=b.getRandomValues(new Uint8Array(e));0<e--;)t+="Uint8ArdomValuesObj012345679BCDEFGHIJKLMNPQRSTWXYZ_cfghkpqvwxyz-"[63&n[e]];return t};function w(e={}){const t=e.key||v(),n=`bespoke-marp-sync-${t}`,r=()=>{const e=localStorage.getItem(n);return e?JSON.parse(e):Object.create(null)},s=e=>{const t=r(),s=Object.assign(Object.assign({},t),e(t));return localStorage.setItem(n,JSON.stringify(s)),s};return s(e=>({reference:(e.reference||0)+1})),e=>{Object.defineProperty(e,"syncKey",{value:t,enumerable:!0}),setTimeout(()=>{e.on("fragment",e=>{s(()=>({index:e.index,fragmentIndex:e.fragmentIndex}))})},0),window.addEventListener("storage",t=>{if(t.key===n&&t.oldValue&&t.newValue){const n=JSON.parse(t.oldValue),r=JSON.parse(t.newValue);n.index===r.index&&n.fragmentIndex===r.fragmentIndex||e.slide(r.index,{fragment:r.fragmentIndex})}}),e.on("destroy",()=>{const{reference:e}=r();void 0===e||e<=1?localStorage.removeItem(n):s(()=>({reference:e-1}))})}}function E(e={}){const t=Object.assign({slope:Math.tan(-35*Math.PI/180),swipeThreshold:30},e);return e=>{let n;const r=e.parent,s=e=>{const t=r.getBoundingClientRect();return{x:e.pageX-(t.left+t.right)/2,y:e.pageY-(t.top+t.bottom)/2}};r.addEventListener("touchstart",e=>{n=1===e.touches.length?s(e.touches[0]):void 0}),r.addEventListener("touchmove",e=>{if(n)if(1===e.touches.length){e.preventDefault();const t=s(e.touches[0]),r=t.x-n.x,a=t.y-n.y;n.delta=Math.sqrt(Math.pow(Math.abs(r),2)+Math.pow(Math.abs(a),2)),n.radian=Math.atan2(r,a)}else n=void 0}),r.addEventListener("touchend",r=>{if(n){if(n.delta&&n.delta>=t.swipeThreshold){let s=n.radian-t.slope;s=(s+Math.PI)%(2*Math.PI)-Math.PI,e[s<0?"next":"prev"](),r.stopPropagation()}n=void 0}})}}!function(o=document.getElementById("p")){const i=e.from(o,[t(),n,r(),s,p({history:!1}),c(),l,f,E(),u(),a,w({key:m("sync")||void 0})]);window.addEventListener("unload",()=>i.destroy())}()}();
</script><script>window.__marpCliWatchWS="ws:https://localhost:37717/c6754462340025ce6ef70745396edd2e966140d2512372ec1cc0e01cb3346e00";!function(){"use strict";const e=(n,o=!1)=>{const t=new WebSocket(n);return t.addEventListener("open",()=>{console.info("[Marp CLI] Observing the change of file..."),o&&location.reload()}),t.addEventListener("close",()=>{console.warn("[Marp CLI] WebSocket for file watcher was disconnected. Try re-connecting in 5000ms..."),setTimeout(()=>{e(n,!0)},5e3)}),t.addEventListener("message",e=>{"reload"===e.data&&location.reload()}),t};!function(){const n=window.__marpCliWatchWS;if(n)e(n)}()}();
</script></body></html>