-
Notifications
You must be signed in to change notification settings - Fork 12
/
index.html
2200 lines (2089 loc) · 119 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<!DOCTYPE html>
<html lang="en"><head>
<script src="index_files/libs/clipboard/clipboard.min.js"></script>
<script src="index_files/libs/quarto-html/tabby.min.js"></script>
<script src="index_files/libs/quarto-html/popper.min.js"></script>
<script src="index_files/libs/quarto-html/tippy.umd.min.js"></script>
<link href="index_files/libs/quarto-html/tippy.css" rel="stylesheet">
<link href="index_files/libs/quarto-html/quarto-html.min.css" rel="stylesheet" data-mode="light">
<link href="index_files/libs/quarto-html/quarto-syntax-highlighting.css" rel="stylesheet" id="quarto-text-highlighting-styles">
<link href="index_files/libs/quarto-contrib/fontawesome6-0.1.0/all.css" rel="stylesheet"><meta charset="utf-8">
<meta name="generator" content="quarto-1.0.36">
<title>Hello Quarto</title>
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui">
<link rel="stylesheet" href="index_files/libs/revealjs/dist/reset.css">
<link rel="stylesheet" href="index_files/libs/revealjs/dist/reveal.css">
<style>
code{white-space: pre-wrap;}
span.smallcaps{font-variant: small-caps;}
span.underline{text-decoration: underline;}
div.column{display: inline-block; vertical-align: top; width: 50%;}
div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;}
ul.task-list{list-style: none;}
pre > code.sourceCode { white-space: pre; position: relative; }
pre > code.sourceCode > span { display: inline-block; line-height: 1.25; }
pre > code.sourceCode > span:empty { height: 1.2em; }
.sourceCode { overflow: visible; }
code.sourceCode > span { color: inherit; text-decoration: inherit; }
div.sourceCode { margin: 1em 0; }
pre.sourceCode { margin: 0; }
@media screen {
div.sourceCode { overflow: auto; }
}
@media print {
pre > code.sourceCode { white-space: pre-wrap; }
pre > code.sourceCode > span { text-indent: -5em; padding-left: 5em; }
}
pre.numberSource code
{ counter-reset: source-line 0; }
pre.numberSource code > span
{ position: relative; left: -4em; counter-increment: source-line; }
pre.numberSource code > span > a:first-child::before
{ content: counter(source-line);
position: relative; left: -1em; text-align: right; vertical-align: baseline;
border: none; display: inline-block;
-webkit-touch-callout: none; -webkit-user-select: none;
-khtml-user-select: none; -moz-user-select: none;
-ms-user-select: none; user-select: none;
padding: 0 4px; width: 4em;
color: #767676;
}
pre.numberSource { margin-left: 3em; border-left: 1px solid #767676; padding-left: 4px; }
div.sourceCode
{ color: #545454; background-color: #fefefe; }
@media screen {
pre > code.sourceCode > span > a:first-child::before { text-decoration: underline; }
}
code span { color: #545454; } /* Normal */
code span.al { color: #7928a1; } /* Alert */
code span.an { color: #696969; } /* Annotation */
code span.at { color: #aa5d00; } /* Attribute */
code span.bn { color: #7928a1; } /* BaseN */
code span.bu { } /* BuiltIn */
code span.cf { color: #d91e18; } /* ControlFlow */
code span.ch { color: #008000; } /* Char */
code span.cn { color: #d91e18; } /* Constant */
code span.co { color: #696969; } /* Comment */
code span.cv { color: #696969; font-style: italic; } /* CommentVar */
code span.do { color: #696969; font-style: italic; } /* Documentation */
code span.dt { color: #7928a1; } /* DataType */
code span.dv { color: #7928a1; } /* DecVal */
code span.er { color: #7928a1; } /* Error */
code span.ex { } /* Extension */
code span.fl { color: #aa5d00; } /* Float */
code span.fu { color: #06287e; } /* Function */
code span.im { } /* Import */
code span.in { color: #696969; } /* Information */
code span.kw { color: #d91e18; } /* Keyword */
code span.op { color: #007faa; } /* Operator */
code span.ot { color: #d91e18; } /* Other */
code span.pp { color: #7928a1; } /* Preprocessor */
code span.sc { color: #007faa; } /* SpecialChar */
code span.ss { color: #008000; } /* SpecialString */
code span.st { color: #008000; } /* String */
code span.va { color: #aa5d00; } /* Variable */
code span.vs { color: #008000; } /* VerbatimString */
code span.wa { color: #696969; font-style: italic; } /* Warning */
</style>
<link rel="stylesheet" href="index_files/libs/revealjs/dist/theme/quarto.css" id="theme">
<link href="index_files/libs/revealjs/plugin/quarto-line-highlight/line-highlight.css" rel="stylesheet">
<link href="index_files/libs/revealjs/plugin/reveal-menu/menu.css" rel="stylesheet">
<link href="index_files/libs/revealjs/plugin/reveal-menu/quarto-menu.css" rel="stylesheet">
<link href="index_files/libs/revealjs/plugin/quarto-support/footer.css" rel="stylesheet">
<style type="text/css">
.callout {
margin-top: 1em;
margin-bottom: 1em;
border-radius: .25rem;
}
.callout.callout-style-simple {
padding: 0em 0.5em;
border-left: solid #acacac .3rem;
border-right: solid 1px silver;
border-top: solid 1px silver;
border-bottom: solid 1px silver;
display: flex;
}
.callout.callout-style-default {
border-left: solid #acacac .3rem;
border-right: solid 1px silver;
border-top: solid 1px silver;
border-bottom: solid 1px silver;
}
.callout .callout-body-container {
flex-grow: 1;
}
.callout.callout-style-simple .callout-body {
font-size: 1rem;
font-weight: 400;
}
.callout.callout-style-default .callout-body {
font-size: 0.9rem;
font-weight: 400;
}
.callout.callout-captioned.callout-style-simple .callout-body {
margin-top: 0.2em;
}
.callout:not(.callout-captioned) .callout-body {
display: flex;
}
.callout:not(.no-icon).callout-captioned.callout-style-simple .callout-content {
padding-left: 1.6em;
}
.callout.callout-captioned .callout-header {
padding-top: 0.2em;
margin-bottom: -0.2em;
}
.callout.callout-captioned .callout-caption p {
margin-top: 0.5em;
margin-bottom: 0.5em;
}
.callout.callout-captioned.callout-style-simple .callout-content p {
margin-top: 0;
}
.callout.callout-captioned.callout-style-default .callout-content p {
margin-top: 0.7em;
}
.callout.callout-style-simple div.callout-caption {
border-bottom: none;
font-size: .9rem;
font-weight: 600;
opacity: 75%;
}
.callout.callout-style-default div.callout-caption {
border-bottom: none;
font-weight: 600;
opacity: 85%;
font-size: 0.9rem;
padding-left: 0.5em;
padding-right: 0.5em;
}
.callout.callout-style-default div.callout-content {
padding-left: 0.5em;
padding-right: 0.5em;
}
.callout.callout-style-simple .callout-icon::before {
height: 1rem;
width: 1rem;
display: inline-block;
content: "";
background-repeat: no-repeat;
background-size: 1rem 1rem;
}
.callout.callout-style-default .callout-icon::before {
height: 0.9rem;
width: 0.9rem;
display: inline-block;
content: "";
background-repeat: no-repeat;
background-size: 0.9rem 0.9rem;
}
.callout-caption {
display: flex
}
.callout-icon::before {
margin-top: 1rem;
padding-right: .5rem;
}
.callout.no-icon::before {
display: none !important;
}
.callout.callout-captioned .callout-body > .callout-content > :last-child {
margin-bottom: 0.5rem;
}
.callout.callout-captioned .callout-icon::before {
margin-top: .5rem;
padding-right: .5rem;
}
.callout:not(.callout-captioned) .callout-icon::before {
margin-top: 1rem;
padding-right: .5rem;
}
/* Callout Types */
div.callout-note {
border-left-color: #4582ec !important;
}
div.callout-note .callout-icon::before {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAIKADAAQAAAABAAAAIAAAAACshmLzAAAEU0lEQVRYCcVXTWhcVRQ+586kSUMMxkyaElstCto2SIhitS5Ek8xUKV2poatCcVHtUlFQk8mbaaziwpWgglJwVaquitBOfhQXFlqlzSJpFSpIYyXNjBNiTCck7x2/8/LeNDOZxDuEkgOXe++553zfefee+/OYLOXFk3+1LLrRdiO81yNqZ6K9cG0P3MeFaMIQjXssE8Z1JzLO9ls20MBZX7oG8w9GxB0goaPrW5aNMp1yOZIa7Wv6o2ykpLtmAPs/vrG14Z+6d4jpbSKuhdcSyq9wGMPXjonwmESXrriLzFGOdDBLB8Y6MNYBu0dRokSygMA/mrun8MGFN3behm6VVAwg4WR3i6FvYK1T7MHo9BK7ydH+1uurECoouk5MPRyVSBrBHMYwVobG2aOXM07sWrn5qgB60rc6mcwIDJtQrnrEr44kmy+UO9r0u9O5/YbkS9juQckLed3DyW2XV/qWBBB3ptvI8EUY3I9p/67OW+g967TNr3Sotn3IuVlfMLVnsBwH4fsnebJvyGm5GeIUA3jljERmrv49SizPYuq+z7c2H/jlGC+Ghhupn/hcapqmcudB9jwJ/3jvnvu6vu5lVzF1fXyZuZZ7U8nRmVzytvT+H3kilYvH09mLWrQdwFSsFEsxFVs5fK7A0g8gMZjbif4ACpKbjv7gNGaD8bUrlk8x+KRflttr22JEMRUbTUwwDQScyzPgedQHZT0xnx7ujw2jfVfExwYHwOsDTjLdJ2ebmeQIlJ7neo41s/DrsL3kl+W2lWvAga0tR3zueGr6GL78M3ifH0rGXrBC2aAR8uYcIA5gwV8zIE8onoh8u0Fca/ciF7j1uOzEnqcIm59sEXoGc0+z6+H45V1CvAvHcD7THztu669cnp+L0okAeIc6zjbM/24LgGM1gZk7jnRu1aQWoU9sfUOuhrmtaPIO3YY1KLLWZaEO5TKUbMY5zx8W9UJ6elpLwKXbsaZ4EFl7B4bMtDv0iRipKoDQT2sNQI9b1utXFdYisi+wzZ/ri/1m7QfDgEuvgUUEIJPq3DhX/5DWNqIXDOweC2wvIR90Oq3lDpdMIgD2r0dXvGdsEW5H6x6HLRJYU7C69VefO1x8Gde1ZFSJLfWS1jbCnhtOPxmpfv2LXOA2Xk2tvnwKKPFuZ/oRmwBwqRQDcKNeVQkYcOjtWVBuM/JuYw5b6isojIkYxyYAFn5K7ZBF10fea52y8QltAg6jnMqNHFBmGkQ1j+U43HMi2xMar1Nv0zGsf1s8nUsmUtPOOrbFIR8bHFDMB5zL13Gmr/kGlCkUzedTzzmzsaJXhYawnA3UmARpiYj5ooJZiUoxFRtK3X6pgNPv+IZVPcnwbOl6f+aBaO1CNvPW9n9LmCp01nuSaTRF2YxHqZ8DYQT6WsXT+RD6eUztwYLZ8rM+rcPxamv1VQzFUkzFXvkiVrySGQgJNvXHJAxiU3/NwiC03rSf05VBaPtu/Z7/B8Yn/w7eguloAAAAAElFTkSuQmCC');
}
div.callout-note.callout-style-default .callout-caption {
background-color: #dae6fb
}
div.callout-important {
border-left-color: #d9534f !important;
}
div.callout-important .callout-icon::before {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAIKADAAQAAAABAAAAIAAAAACshmLzAAAEKklEQVRYCcVXTWhcVRS+575MJym48A+hSRFr00ySRQhURRfd2HYjk2SSTokuBCkU2o0LoSKKraKIBTcuFCoidGFD08nkBzdREbpQ1EDNIv8qSGMFUboImMSZd4/f9zJv8ibJMC8xJQfO3HPPPef7zrvvvnvviIkpC9nsw0UttFunbUhpFzFtarSd6WJkStVMw5xyVqYTvkwfzuf/5FgtkVoB0729j1rjXwThS7Vio+Mo6DNnvLfahoZ+i/o32lULuJ3NNiz7q6+pyAUkJaFF6JwaM2lUJlV0MlnQn5aTRbEu0SEqHUa0A4AdiGuB1kFXRfVyg5d87+Dg4DL6m2TLAub60ilj7A1Ec4odSAc8X95sHh7+ZRPCFo6Fnp7HfU/fBng/hi10CjCnWnJjsxvDNxWw0NfV6Rv5GgP3I3jGWXumdTD/3cbEOP2ZbOZp69yniG3FQ9z1jD7bnBu9Fc2tKGC2q+uAJOQHBDRiZX1x36o7fWBs7J9ownbtO+n0/qWkvW7UPIfc37WgT6ZGR++EOJyeQDSb9UB+DZ1G6DdLDzyS+b/kBCYGsYgJbSQHuThGKRcw5xdeQf8YdNHsc6ePXrlSYMBuSIAFTGAtQo+VuALo4BX83N190NWZWbynBjhOHsmNfFWLeL6v+ynsA58zDvvAC8j5PkbOcXCMg2PZFk3q8MjI7WAG/Dp9AwP7jdGBOOQkAvlFUB+irtm16I1Zw9YBcpGTGXYmk3kQIC/Cds55l+iMI3jqhjAuaoe+am2Jw5GT3Nbz3CkE12NavmzN5+erJW7046n/CH1RO/RVa8lBLozXk9uqykkGAyRXLWlLv5jyp4RFsG5vGVzpDLnIjTWgnRy2Rr+tDKvRc7Y8AyZq10jj8DqXdnIRNtFZb+t/ZRtXcDiVnzpqx8mPcDWxgARUqx0W1QB9MeUZiNrV4qP+Ehc+BpNgATsTX8ozYKL2NtFYAHc84fG7ndxUPr+AR/iQSns7uSUufAymwDOb2+NjK27lEFocm/EE2WpyIy/Hi66MWuMKJn8RvxIcj87IM5Vh9663ziW36kR0HNenXuxmfaD8JC7tfKbrhFr7LiZCrMjrzTeGx+PmkosrkNzW94ObzwocJ7A1HokLolY+AvkTiD/q1H0cN48c5EL8Crkttsa/AXQVDmutfyku0E7jShx49XqV3MFK8IryDhYVbj7Sj2P2eBxwcXoe8T8idsKKPRcnZw1b+slFTubwUwhktrfnAt7J++jwQtLZcm3sr9LQrjRzz6cfMv9aLvgmnAGvpoaGLxM4mAEaLV7iAzQ3oU0IvD5x9ix3yF2RAAuYAOO2f7PEFWCXZ4C9Pb2UsgDeVnFSpbFK7/IWu7TPTvBqzbGdCHOJQSxiEjt6IyZmxQyEJHv6xyQsYk//moVFsN2zP6fRImjfq7/n/wFDguUQFNEwugAAAABJRU5ErkJggg==');
}
div.callout-important.callout-style-default .callout-caption {
background-color: #f7dddc
}
div.callout-warning {
border-left-color: #f0ad4e !important;
}
div.callout-warning .callout-icon::before {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAIKADAAQAAAABAAAAIAAAAACshmLzAAAETklEQVRYCeVWW2gcVRg+58yaTUnizqbipZeX4uWhBEniBaoUX1Ioze52t7sRq6APio9V9MEaoWlVsFasRq0gltaAPuxms8lu0gcviE/FFOstVbSIxgcv6SU7EZqmdc7v9+9mJtNks51NTUH84ed889/PP+cmxP+d5FIbMJmNbpREu4WUkiTtCicKny0l1pIKmBzovF2S+hIJHX8iEu3hZJ5lNZGqyRrGSIQpq15AzF28jgpeY6yk6GVdrfFqdrD6Iw+QlB8g0YS2g7dyQmXM/IDhBhT0UCiRf59lfqmmDvzRt6kByV/m4JjtzuaujMUM2c5Z2d6JdKrRb3K2q6mA+oYVz8JnDdKPmmNthzkAk/lN63sYPgevrguc72aZX/L9C6x09GYyxBgCX4NlvyGUHOKELlm5rXeR1kchuChJt4SSwyddZRXgvwMGvYo4QSlk3/zkHD8UHxwVJA6zjZZqP8v8kK8OWLnIZtLyCAJagYC4rTGW/9Pqj92N/c+LUaAj27movwbi19tk/whRCIE7Q9vyI6yvRpftAKVTdUjOW40X3h5OXsKCdmFcx0xlLJoSuQngnrJe7Kcjm4OMq9FlC7CMmScQANuNvjfP3PjGXDBaUQmbp296S5L4DrpbrHN1T87ZVEZVCzg1FF0Ft+dKrlLukI+/c9ENo+TvlTDbYFvuKPtQ9+l052rXrgKoWkDAFnvh0wTOmYn8R5f4k/jN/fZiCM1tQx9jQQ4ANhqG4hiL0qIFTGViG9DKB7GYzgubnpofgYRwO+DFjh0Zin2m4b/97EDkXkc+f6xYAPX0KK2I/7fUQuwzuwo/L3AkcjugPNixC8cHf0FyPjWlItmLxWw4Ou9YsQCr5fijMGoD/zpdRy95HRysyXA74MWOnscpO4j2y3HAVisw85hX5+AFBRSHt4ShfLFkIMXTqyKFc46xdzQM6XbAi702a7sy04J0+feReMFKp5q9esYLCqAZYw/k14E/xcLLsFElaornTuJB0svMuJINy8xkIYuL+xPAlWRceH6+HX7THJ0djLUom46zREu7tTkxwmf/FdOZ/sh6Q8qvEAiHpm4PJ4a/doJe0gH1t+aHRgCzOvBvJedEK5OFE5jpm4AGP2a8Dxe3gGJ/pAutug9Gp6he92CsSsWBaEcxGx0FHytmIpuqGkOpldqNYQK8cSoXvd+xLxXADw0kf6UkJNFtdo5MOgaLjiQOQHcn+A6h5NuL2s0qsC2LOM75PcF3yr5STuBSAcGG+meA14K/CI21HcS4LBT6tv0QAh8Dr5l93AhZzG5ZJ4VxAqdZUEl9z7WJ4aN+svMvwHHL21UKTd1mqvChH7/Za5xzXBBKrUcB0TQ+Ulgkfbi/H/YT5EptrGzsEK7tR1B7ln9BBwckYfMiuSqklSznIuoIIOM42MQO+QnduCoFCI0bpkzjCjddHPN/F+2Yu+sd9bKNpVwHhbS3LluK/0zgfwD0xYI5dXuzlQAAAABJRU5ErkJggg==');
}
div.callout-warning.callout-style-default .callout-caption {
background-color: #fcefdc
}
div.callout-tip {
border-left-color: #02b875 !important;
}
div.callout-tip .callout-icon::before {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAIKADAAQAAAABAAAAIAAAAACshmLzAAADr0lEQVRYCe1XTWgTQRj9ZjZV8a9SPIkKgj8I1bMHsUWrqYLVg4Ue6v9BwZOxSYsIerFao7UiUryIqJcqgtpimhbBXoSCVxUFe9CTiogUrUp2Pt+3aUI2u5vdNh4dmMzOzHvvezuz8xNFM0mjnbXaNu1MvFWRXkXEyE6aYOYJpdW4IXuA4r0fo8qqSMDBU0v1HJUgVieAXxzCsdE/YJTdFcVIZQNMyhruOMJKXYFoLfIfIvVIMWdsrd+Rpd86ZmyzzjJmLStqRn0v8lzkb4rVIXvnpScOJuAn2ACC65FkPzEdEy4TPWRLJ2h7z4cArXzzaOdKlbOvKKX25Wl00jSnrwVxAg3o4dRxhO13RBSdNvH0xSARv3adTXbBdTf64IWO2vH0LT+cv4GR1DJt+DUItaQogeBX/chhbTBxEiZ6gftlDNXTrvT7co4ub5A6gp9HIcHvzTa46OS5fBeP87Qm0fQkr4FsYgVQ7Qg+ZayaDg9jhg1GkWj8RG6lkeSacrrHgDaxdoBiZPg+NXV/KifMuB6//JmYH4CntVEHy/keA6x4h4CU5oFy8GzrBS18cLJMXcljAKB6INjWsRcuZBWVaS3GDrqB7rdapVIeA+isQ57Eev9eCqzqOa81CY05VLd6SamW2wA2H3SiTbnbSxmzfp7WtKZkqy4mdyAlGx7ennghYf8voqp9cLSgKdqNfa6RdRsAAkPwRuJZNbpByn+RrJi1RXTwdi8RQF6ymDwGMAtZ6TVE+4uoKh+MYkcLsT0Hk8eAienbiGdjJHZTpmNjlbFJNKDVAp2fJlYju6IreQxQ08UJDNYdoLSl6AadO+fFuCQqVMB1NJwPm69T04Wv5WhfcWyfXQB+wXRs1pt+nCknRa0LVzSA/2B+a9+zQJadb7IyyV24YAxKp2Jqs3emZTuNnKxsah+uabKbMk7CbTgJx/zIgQYErIeTKRQ9yD9wxVof5YolPHqaWo7TD6tJlh7jQnK5z2n3+fGdggIOx2kaa2YI9QWarc5Ce1ipNWMKeSG4DysFF52KBmTNMmn5HqCFkwy34rDg05gDwgH3bBi+sgFhN/e8QvRn8kbamCOhgrZ9GJhFDgfcMHzFb6BAtjKpFhzTjwv1KCVuxHvCbsSiEz4CANnj84cwHdFXAbAOJ4LTSAawGWFn5tDhLMYz6nWeU2wJfIhmIJBefcd/A5FWQWGgrWzyORZ3Q6HuV+Jf0Bj+BTX69fm1zWgK7By1YTXchFDORywnfQ7GpzOo6S+qECrsx2ifVQAAAABJRU5ErkJggg==');
}
div.callout-tip.callout-style-default .callout-caption {
background-color: #ccf1e3
}
div.callout-caution {
border-left-color: #fd7e14 !important;
}
div.callout-caution .callout-icon::before {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAIKADAAQAAAABAAAAIAAAAACshmLzAAACV0lEQVRYCdVWzWoUQRCuqp2ICBLJXgITZL1EfQDBW/bkzUMUD7klD+ATSHBEfAIfQO+iXsWDxJsHL96EHAwhgzlkg8nBg25XWb0zIb0zs9muYYWkoKeru+vn664fBqElyZNuyh167NXJ8Ut8McjbmEraKHkd7uAnAFku+VWdb3reSmRV8PKSLfZ0Gjn3a6Xlcq9YGb6tADjn+lUfTXtVmaZ1KwBIvFI11rRXlWlatwIAAv2asaa9mlB9wwygiDX26qaw1yYPzFXg2N1GgG0FMF8Oj+VIx7E/03lHx8UhvYyNZLN7BwSPgekXXLribw7w5/c8EF+DBK5idvDVYtEEwMeYefjjLAdEyQ3M9nfOkgnPTEkYU+sxMq0BxNR6jExrAI31H1rzvLEfRIdgcv1XEdj6QTQAS2wtstEALLG1yEZ3QhH6oDX7ExBSFEkFINXH98NTrme5IOaaA7kIfiu2L8A3qhH9zRbukdCqdsA98TdElyeMe5BI8Rs2xHRIsoTSSVFfCFCWGPn9XHb4cdobRIWABNf0add9jakDjQJpJ1bTXOJXnnRXHRf+dNL1ZV1MBRCXhMbaHqGI1JkKIL7+i8uffuP6wVQAzO7+qVEbF6NbS0LJureYcWXUUhH66nLR5rYmva+2tjRFtojkM2aD76HEGAD3tPtKM309FJg5j/K682ywcWJ3PASCcycH/22u+Bh7Aa0ehM2Fu4z0SAE81HF9RkB21c5bEn4Dzw+/qNOyXr3DCTQDMBOdhi4nAgiFDGCinIa2owCEChUwD8qzd03PG+qdW/4fDzjUMcE1ZpIAAAAASUVORK5CYII=');
}
div.callout-caution.callout-style-default .callout-caption {
background-color: #ffe5d0
}
</style>
<style type="text/css">
.reveal div.sourceCode {
margin: 0;
overflow: auto;
}
.reveal div.hanging-indent {
margin-left: 1em;
text-indent: -1em;
}
.reveal .slide:not(.center) {
height: 100%;
}
.reveal .slide.scrollable {
overflow-y: auto;
}
.reveal .footnotes {
height: 100%;
overflow-y: auto;
}
.reveal .slide .absolute {
position: absolute;
display: block;
}
.reveal .footnotes ol {
counter-reset: ol;
list-style-type: none;
margin-left: 0;
}
.reveal .footnotes ol li:before {
counter-increment: ol;
content: counter(ol) ". ";
}
.reveal .footnotes ol li > p:first-child {
display: inline-block;
}
.reveal .slide ul,
.reveal .slide ol {
margin-bottom: 0.5em;
}
.reveal .slide ul li,
.reveal .slide ol li {
margin-top: 0.4em;
margin-bottom: 0.2em;
}
.reveal .slide ul[role="tablist"] li {
margin-bottom: 0;
}
.reveal .slide ul li > *:first-child,
.reveal .slide ol li > *:first-child {
margin-block-start: 0;
}
.reveal .slide ul li > *:last-child,
.reveal .slide ol li > *:last-child {
margin-block-end: 0;
}
.reveal .slide .columns:nth-child(3) {
margin-block-start: 0.8em;
}
.reveal blockquote {
box-shadow: none;
}
.reveal .tippy-content>* {
margin-top: 0.2em;
margin-bottom: 0.7em;
}
.reveal .tippy-content>*:last-child {
margin-bottom: 0.2em;
}
.reveal .slide > img.stretch.quarto-figure-center,
.reveal .slide > img.r-stretch.quarto-figure-center {
display: block;
margin-left: auto;
margin-right: auto;
}
.reveal .slide > img.stretch.quarto-figure-left,
.reveal .slide > img.r-stretch.quarto-figure-left {
display: block;
margin-left: 0;
margin-right: auto;
}
.reveal .slide > img.stretch.quarto-figure-right,
.reveal .slide > img.r-stretch.quarto-figure-right {
display: block;
margin-left: auto;
margin-right: 0;
}
</style>
</head>
<body class="quarto-light">
<div class="reveal">
<div class="slides">
<section id="hello-quarto-title" class="slide level2" data-menu-title="Hello Quarto" data-background-image="images/horst_penguins_telescope.png" aria-label="One penguin standing on another penguin's shoulders in a snowscape, looking through a telescope at a Quarto logo moon in the night sky.">
<h2></h2>
<p><span class="custom-title">Hello Quarto</span></p>
<p><span class="custom-subtitle">share • collaborate • teach • reimagine</span></p>
<p><span class="custom-author">mine çetinkaya-rundel <br> julia stewart lowndes</span></p>
<p><span class="custom-url"><a href="https://mine.quarto.pub/hello-quarto/">mine.quarto.pub/hello-quarto</a></span></p>
<p><span class="custom-artwork">artwork by allison horst</span></p>
<aside class="notes">
<p>Thank you so much, we’re excited to be here! Mine and I have been using Quarto for the last year; she has been teaching and contributing to the development of Quarto it since its earliest days and Openscapes has been the first external users of Quarto. As we’ve woven it into our work we realize we love it, and we’re thrilled to welcome you to Quarto.</p>
<style type="text/css">
span.MJX_Assistive_MathML {
position:absolute!important;
clip: rect(1px, 1px, 1px, 1px);
padding: 1px 0 0 0!important;
border: 0!important;
height: 1px!important;
width: 1px!important;
overflow: hidden!important;
display:block!important;
}</style></aside>
</section>
<section>
<section id="hello-quarto" class="title-slide slide level1 title-top-light center" data-background-image="images/horst-quarto-meteor-transparent.png" aria-label="A meteor where the head of the meteor is the Quarto logo.">
<h1>Hello, Quarto?</h1>
<aside class="notes">
<p>But also, we know you have questions. We did too. What is Quarto? Why is Quarto? And how does it relate to R Markdown and the workflows you already have?</p>
<p>–> Well</p>
<style type="text/css">
span.MJX_Assistive_MathML {
position:absolute!important;
clip: rect(1px, 1px, 1px, 1px);
padding: 1px 0 0 0!important;
border: 0!important;
height: 1px!important;
width: 1px!important;
overflow: hidden!important;
display:block!important;
}</style></aside>
</section>
<section id="unifies-extends-1" class="slide level2 centered" data-menu-title="Unifies and extends 1" data-background-color="#0F1620" data-auto-animate="true">
<h2 data-id="quarto-animate-title"></h2>
<div style="margin-top: 150px; font-size: 3em; color: #75AADB;">
<p>Quarto <strong>unifies</strong> and <strong>extends</strong><br>the R Markdown ecosystem</p>
</div>
<aside class="notes">
<p>Quarto unifies & extends the R Markdown ecosystem.</p>
<style type="text/css">
span.MJX_Assistive_MathML {
position:absolute!important;
clip: rect(1px, 1px, 1px, 1px);
padding: 1px 0 0 0!important;
border: 0!important;
height: 1px!important;
width: 1px!important;
overflow: hidden!important;
display:block!important;
}</style></aside>
</section>
<section id="unifies-extends-2" class="slide level2 centered" data-menu-title="Unifies and extends 2" data-background-color="#0F1620" data-auto-animate="true">
<h2 data-id="quarto-animate-title"></h2>
<div style="margin-top: 100px; font-size: 2.2em; color: #75AADB">
<p>Quarto <strong>unifies</strong> and <strong>extends</strong> <br>the R Markdown ecosystem</p>
</div>
<p><br></p>
<div class="large">
<p><strong>unifies</strong> for people who love R Markdown</p>
</div>
<p><br></p>
<div class="fragment fade-up large" data-fragment-index="2">
<p><strong>extends</strong> for people who don’t know R Markdown</p>
</div>
<aside class="notes">
<p>It unifies it for people who love R Markdown by reducing little points of friction, so that websites, books, and slides all have a common approach.</p>
<p>And it extends it for people who don’t know RMarkdown by being a friendly way to work reproducibly and publish documents that have text and code in the same place</p>
<style type="text/css">
span.MJX_Assistive_MathML {
position:absolute!important;
clip: rect(1px, 1px, 1px, 1px);
padding: 1px 0 0 0!important;
border: 0!important;
height: 1px!important;
width: 1px!important;
overflow: hidden!important;
display:block!important;
}</style></aside>
</section>
<section id="publishing-system-1" class="slide level2 centered" data-menu-title="Publishing system 1" data-background-color="#0F1620" data-auto-animate="true">
<h2 data-id="quarto-animate-title"></h2>
<div style="margin-top: 100px; font-size: 3em; color: #75AADB;">
<p>Quarto is a new, open-source,<br> scientific and technical<br> publishing system</p>
</div>
<aside class="notes">
<p>Quarto is a new open-source scientific and technical publishing system.</p>
<style type="text/css">
span.MJX_Assistive_MathML {
position:absolute!important;
clip: rect(1px, 1px, 1px, 1px);
padding: 1px 0 0 0!important;
border: 0!important;
height: 1px!important;
width: 1px!important;
overflow: hidden!important;
display:block!important;
}</style></aside>
</section>
<section id="publishing-system-2" class="slide level2 centered" data-menu-title="Publishing system 2" data-background-color="#0F1620" data-auto-animate="true">
<h2 data-id="quarto-animate-title"></h2>
<div style="margin-top: 50px; font-size: 2em; color: #75AADB">
<p>Quarto is a new, open-source,<br> scientific and technical<br> publishing system</p>
</div>
<div class="midi">
<p><strong>the goal is to make the process of creating</strong><br> and collaborating dramatically better</p>
</div>
<div class="fragment fade-up">
<div class="quarto-figure quarto-figure-center">
<figure>
<p><img data-src="images/horst_quarto_schematic.png" alt="A schematic representing the multi-language input (e.g. Python, R, Observable, Julia) and multi-format output (e.g. PDF, html, Word documents, and more) versatility of Quarto." width="1100"></p>
</figure>
</div>
</div>
<aside class="notes">
<p>The goal is to make the process of creating and collaborating dramatically better.</p>
<p>–> It handles inputs in multiple languages, and outputs in multiple formats, all going through the same machinery.</p>
<p>–> In our talk today, we’ll introduce you to Quarto with stories and demos.</p>
<style type="text/css">
span.MJX_Assistive_MathML {
position:absolute!important;
clip: rect(1px, 1px, 1px, 1px);
padding: 1px 0 0 0!important;
border: 0!important;
height: 1px!important;
width: 1px!important;
overflow: hidden!important;
display:block!important;
}</style></aside>
</section>
<section id="outline-1" class="slide level2 centered" data-menu-title="Outline 1" data-auto-animate="true">
<h2 data-id="quarto-animate-title"></h2>
<p><img data-src="images/outline-1.png" alt="Quarto logo with two quadrants labelled as Share and Teach with a blue penguin next to it."></p>
<aside class="notes">
<p>First Mine will focus on how Quarto unifies the R Markdown ecosystem through stories of sharing and teaching</p>
<style type="text/css">
span.MJX_Assistive_MathML {
position:absolute!important;
clip: rect(1px, 1px, 1px, 1px);
padding: 1px 0 0 0!important;
border: 0!important;
height: 1px!important;
width: 1px!important;
overflow: hidden!important;
display:block!important;
}</style></aside>
</section>
<section id="outline-2" class="slide level2 centered" data-menu-title="Outline 2" data-auto-animate="true">
<h2 data-id="quarto-animate-title"></h2>
<p><img data-src="images/outline-2.png" alt="Quarto logo with two quadrants labelled as Collaborate and Reimagine with an orange penguin next to it."></p>
<aside class="notes">
<p>Then I will focus on how Quarto extends the R Markdown ecosystem through collaborating and reimagining</p>
<style type="text/css">
span.MJX_Assistive_MathML {
position:absolute!important;
clip: rect(1px, 1px, 1px, 1px);
padding: 1px 0 0 0!important;
border: 0!important;
height: 1px!important;
width: 1px!important;
overflow: hidden!important;
display:block!important;
}</style></aside>
</section>
<section id="outline-3" class="slide level2 centered" data-menu-title="Outline 3" data-auto-animate="true">
<h2 data-id="quarto-animate-title"></h2>
<p><img data-src="images/outline-3.png" alt="Quarto logo with all fouur quadrants labelled as Share, Collaborate, Teach, and Reimagine."></p>
<aside class="notes">
<p><strong>Julie:</strong> We’re excited to get started!</p>
<p>NEXT - So let’s let Mine kick it off to talk about sharing with Quarto.</p>
<style type="text/css">
span.MJX_Assistive_MathML {
position:absolute!important;
clip: rect(1px, 1px, 1px, 1px);
padding: 1px 0 0 0!important;
border: 0!important;
height: 1px!important;
width: 1px!important;
overflow: hidden!important;
display:block!important;
}</style></aside>
</section></section>
<section>
<section id="share" class="title-slide slide level1 title-middle-dark center" data-background-image="images/horst_quarto_penguins_share.png" aria-label="Two happy penguins taking a selfie together in a snowy landscape.">
<h1>Share</h1>
<aside class="notes">
<p><strong>Julie:</strong> We’re excited to get started! So lets starts off with how Quarto enables sharing. Over to you Mine</p>
<p><strong>Mine:</strong> Thanks Julie! I’m very excited to have this opportunity to talk to you about Quarto, which I’ve had the pleasure to live and breathe over the last year.</p>
<style type="text/css">
span.MJX_Assistive_MathML {
position:absolute!important;
clip: rect(1px, 1px, 1px, 1px);
padding: 1px 0 0 0!important;
border: 0!important;
height: 1px!important;
width: 1px!important;
overflow: hidden!important;
display:block!important;
}</style></aside>
</section>
<section id="share-intro" class="slide level2 center" data-menu-title="Share Intro">
<h2></h2>
<div class="columns">
<div class="column" style="width:70%;">
<p><img data-src="images/1-share/mine-venn.svg" alt="A Venn diagram with three circles -- education, research, and development. At the intersection is a blue heart with the word compassion."></p>
</div><div class="column" style="width:30%;">
<p><img data-src="images/horst_penguins_nametag_mine.png" alt="Penguin with nametag that says "Mine""></p>
</div>
</div>
<aside class="notes">
<p>I work at the intersection of education, research, and development.</p>
<p>The word educator might make you think I’m in front of students lecturing 24/7 but, in reality, I spend most of my time in front of my computer authoring and creating materials to share with people in various ways. Whatever it is that I create, I share them all openly - that is, with an open license that allows for free use, reuse, and adaptation. More often than not I’m thinking “web first” for wider reach, but I also still live in the confines of traditional journal publishing and academia, which means I regularly need to create PDF versions of my work as well.</p>
<p>Therefore an authoring system that allows for multiple types of outputs from a single source that contains both code and prose is not only a time saver, but it’s basically essential for me to carry on my existence. And for the last decade, that tool for me has been R Markdown.</p>
<p>In fact, I remember vividly the first time I’ve heard of knitr, now 10 years ago, at Yihui and JJ’s 2012 useR keynote, when they presented on a “new” tool for reproducible authoring. It must have been no more than 3 slides into their talk that I started to converting my teaching materials to use knitr. And by the end of that keynote I was already brainstorming ways of teaching it to my intro stats students.</p>
<p>So, I’ll call this talk a success if some of you are already firing up Quarto right now, instead of listening to me, to see what all the hype is about!</p>
<style type="text/css">
span.MJX_Assistive_MathML {
position:absolute!important;
clip: rect(1px, 1px, 1px, 1px);
padding: 1px 0 0 0!important;
border: 0!important;
height: 1px!important;
width: 1px!important;
overflow: hidden!important;
display:block!important;
}</style></aside>
</section>
<section id="link-to-slides" class="slide level2 center" data-menu-title="Link to slides" data-background-image="images/horst_quarto_penguins_url.png" aria-label="Two penguins standing on an iceberg at dawn, viewed from behind, with their arms around each others' shoulders. A Quarto logo moon is near the horizon. A banner on the illustration shows the URL of the slide deck: mine.quarto.pub/hello-quarto.">
<h2></h2>
<aside class="notes">
<p>But I hope you’ll continue to listen with one ear and take in the beautiful illustrations by Allison Horst. And if you just want to enjoy the talk, feel free to go to this link: mine.quarto.pub/hello-quarto</p>
<p>sit back,</p>
<p>and I’ll advance the slides for you.</p>
<style type="text/css">
span.MJX_Assistive_MathML {
position:absolute!important;
clip: rect(1px, 1px, 1px, 1px);
padding: 1px 0 0 0!important;
border: 0!important;
height: 1px!important;
width: 1px!important;
overflow: hidden!important;
display:block!important;
}</style></aside>
</section>
<section id="the-r-markdown-ecosystem" class="slide level2">
<h2>The R Markdown ecosystem</h2>
<div class="quarto-figure quarto-figure-center">
<figure>
<p><img data-src="images/1-share/rmd_ecosystem.png" alt="Hex logos for various packages from the R Markdown ecosystem."></p>
</figure>
</div>
<aside class="notes">
<p>Julie mentioned unifying the R Markdown ecosystem so let’s dig a bit more into what that means…</p>
<p>Think of all the packages from the R Markdown universe that you’ve come to love and rely on over the years. Each package addresses a different need and offers a different output: for example, you can use blogdown or distill for creating websites and blogs, bookdown for writing a book, rticles for writing journal articles, etc.</p>
<style type="text/css">
span.MJX_Assistive_MathML {
position:absolute!important;
clip: rect(1px, 1px, 1px, 1px);
padding: 1px 0 0 0!important;
border: 0!important;
height: 1px!important;
width: 1px!important;
overflow: hidden!important;
display:block!important;
}</style></aside>
</section>
<section id="quarto-next-generation-r-markdown" class="slide level2" data-transition="zoom">
<h2>Quarto: Next generation R Markdown</h2>
<div class="quarto-figure quarto-figure-center">
<figure>
<p><img data-src="images/horst_quarto_ball_straight.png" alt="Quarto logo." style="width:50.0%"></p>
</figure>
</div>
<aside class="notes">
<p>Quarto unifies the functionality from these packages,</p>
<p>building on Pandoc on the technical side</p>
<p>and on the human side – over a decade of experience developing, maintaining, and tweaking these packages as well as community feedback R Markdown extension packages.</p>
<p>Such a unification effort presents a fantastic opportunity to identify and address gaps functionality and inefficiencies in user experience, and the process of building Quarto has been no different.</p>
<style type="text/css">
span.MJX_Assistive_MathML {
position:absolute!important;
clip: rect(1px, 1px, 1px, 1px);
padding: 1px 0 0 0!important;
border: 0!important;
height: 1px!important;
width: 1px!important;
overflow: hidden!important;
display:block!important;
}</style></aside>
</section>
<section id="quarto-highlights" class="slide level2">
<h2>Quarto highlights</h2>
<div class="columns">
<div class="column" style="width:5%;">
</div><div class="column" style="width:40%;">
<div class="bulletbox">
<div class="fragment fade-in-then-semi-out">
<p><img data-src="images/horst_quarto_ball-1_4.png" alt="One quadrant of the Quarto logo." width="50"> Consistent implementation of attractive and handy features across outputs: tabsets, code-folding, syntax highlighting, etc.</p>
</div>
</div>
</div><div class="column" style="width:5%;">
</div><div class="column" style="width:40%;">
<div class="bulletbox">
<div class="fragment fade-in-then-semi-out">
<p><img data-src="images/horst_quarto_ball-2_4.png" alt="Two quadrants of the Quarto logo." width="50"> More accessible defaults as well as better support for accessibility</p>
</div>
</div>
</div><div class="column" style="width:5%;">
</div>
</div>
<div class="columns">
<div class="column" style="width:5%;">
</div><div class="column" style="width:40%;">
<div class="bulletbox">
<div class="fragment fade-in-then-semi-out">
<p><img data-src="images/horst_quarto_ball-3_4.png" alt="Three quadrants of the Quarto logo." width="50"> Guardrails, particularly helpful for new learners: YAML completion, informative syntax errors, etc.</p>
</div>
</div>
</div><div class="column" style="width:5%;">
</div><div class="column" style="width:40%;">
<div class="bulletbox">
<div class="fragment fade-in-then-semi-out">
<p><img data-src="images/horst_quarto_ball-4_4.png" alt="Four quadrants of the Quarto logo." width="50"> Support for other languages like Python, Julia, Observable, and more via Jupyter engine for executable code chunks.</p>
</div>
</div>
</div><div class="column" style="width:5%;">
</div>
</div>
<aside class="notes">
<p>Some highlights of these improvements include</p>
<p>–> consistent implementation of attractive and handy features across <em>all</em> outputs, like tabsets, code-folding, and syntax highlighting,</p>
<p>–> more accessible defaults as well as better support for creating accessible documents,</p>
<p>–> guardrails that are particularly helpful for new learners, like YAML completion and informative syntax errors,</p>
<p>–> and perhaps most excitingly for those who are not coming from the R ecosystem, Quarto offers support for other languages like Python, Julia, Observable, and more via the Jupyter engine for executable code chunks. And it’s designed to be expandable to more engines and languages, even those that might not exist today.</p>
<p>[pause] So by now I’m assuming many of you have already started playing with Quarto, or you’re waiting for me to do that. So, let’s dive in and see what all the Quarto fuss is about!</p>
<style type="text/css">
span.MJX_Assistive_MathML {
position:absolute!important;
clip: rect(1px, 1px, 1px, 1px);
padding: 1px 0 0 0!important;
border: 0!important;
height: 1px!important;
width: 1px!important;
overflow: hidden!important;
display:block!important;
}</style></aside>
</section>
<section id="demo-share" class="slide level2 centered" data-menu-title="Demo: Share" data-background-video="videos/demo-1-share.mp4" data-background-size="contain" data-background-color="#FFFFFF">
<h2></h2>
<aside class="notes">
<ul>
<li>Open hello.Rmd with source editor -> knit</li>
<li>Change to visual editor -> knit</li>
<li>Close file -> change file type to .qmd -> open + render</li>
<li>Change <code>output: html_document</code> to <code>format: html</code> -> render</li>
<li>Click on Render on save</li>
<li>Change to <code>format: pdf</code> -> render -> then change back</li>
<li>Add chunk option <code>echo: false</code> to the first chunk</li>
<li>Add <code>execute</code> > <code>echo: false</code> to the yaml</li>
<li>Add alt text to figure in second code chunk -> save to render</li>
<li>Change to <code>format: revealjs</code> -> save to render</li>
<li>Add H2 to break slides</li>
<li>Change to <code>format: html</code></li>
<li>Add <code>index.qmd</code> with File > New Quarto Document</li>
<li>Add <code>_quarto.yml</code> for website</li>
<li>Relaunch project</li>
<li>Show new Build tab</li>
<li>Render site, show <code>_site</code> folder</li>
<li>Add freeze to _quarto.yml</li>
<li>From terminal: <code>quarto publish</code></li>
</ul>
<style type="text/css">
span.MJX_Assistive_MathML {
position:absolute!important;
clip: rect(1px, 1px, 1px, 1px);
padding: 1px 0 0 0!important;
border: 0!important;
height: 1px!important;
width: 1px!important;
overflow: hidden!important;
display:block!important;
}</style></aside>
</section>
<section id="quarto-cli-orchestrates-each-step-of-rendering" class="slide level2 takeaway center">
<h2>Quarto CLI orchestrates<br>each step of rendering</h2>
<div class="fragment fade-up">
<div class="quarto-figure quarto-figure-center">
<figure>
<p><img data-src="images/horst_qmd_render_schema.png" alt="A schematic representing rendering of Quarto documents from .qmd, to knitr or jupyter, to plain text markdown, then converted by pandoc into any number of output types including html, PDF, or Word document."></p>
</figure>
</div>
</div>
<aside class="notes">
<p>Now that you’ve all had a chance to see Quarto in action, you might be wondering, “how are R Markdown and Quarto different”?</p>
<p>The main difference is that with R Markdown, the R package rmarkdown does the heavy lifting of going from the source Rmd file to the the output, using knitr for evaluating the code chunks.</p>
<p>–> With Quarto, on the other hand, the Quarto command line interface, or the Quarto CLI, does the orchestration of processing executable code chunks with either knitr or jupyter and then converting the resulting markdown file to the desired output.</p>
<p>While this is technically impressive, I’ll be honest, it’s not exactly what sparked my interest in Quarto in the first place.</p>
<style type="text/css">
span.MJX_Assistive_MathML {
position:absolute!important;
clip: rect(1px, 1px, 1px, 1px);
padding: 1px 0 0 0!important;
border: 0!important;
height: 1px!important;
width: 1px!important;
overflow: hidden!important;
display:block!important;
}</style></aside>
</section>
<section id="quarto-makes-moving-between-formats-straightforward" class="slide level2 takeaway center">
<h2>Quarto makes moving between formats straightforward</h2>
<div class="columns">
<div class="column" style="width:33%;">
<div class="fragment">
<p>Document</p>
<div class="code-file sourceCode cell-code">
<p><i class="fa-solid fa-file"></i> lesson-1.qmd</p>
</div>
<div class="sourceCode" id="cb1"><pre class="sourceCode yaml code-with-copy"><code class="sourceCode yaml"><span id="cb1-1"><a href="#cb1-1" aria-hidden="true" tabindex="-1"></a><span class="fu">title</span><span class="kw">:</span><span class="at"> </span><span class="st">"Lesson 1"</span></span>
<span id="cb1-2"><a href="#cb1-2" aria-hidden="true" tabindex="-1"></a><span class="fu">format</span><span class="kw">:</span><span class="at"> html</span></span></code><button title="Copy to Clipboard" class="code-copy-button"><i class="bi"></i></button></pre></div>
</div>
</div><div class="column" style="width:33%;">
<div class="fragment">
<p>Presentation</p>
<div class="code-file sourceCode cell-code">
<p><i class="fa-solid fa-file"></i> lesson-1.qmd</p>
</div>
<div class="sourceCode" id="cb2"><pre class="sourceCode yaml code-with-copy"><code class="sourceCode yaml"><span id="cb2-1"><a href="#cb2-1" aria-hidden="true" tabindex="-1"></a><span class="fu">title</span><span class="kw">:</span><span class="at"> </span><span class="st">"Lesson 1"</span></span>
<span id="cb2-2"><a href="#cb2-2" aria-hidden="true" tabindex="-1"></a><span class="fu">format</span><span class="kw">:</span><span class="at"> revealjs</span></span></code><button title="Copy to Clipboard" class="code-copy-button"><i class="bi"></i></button></pre></div>
</div>
</div><div class="column" style="width:33%;">
<div class="fragment">
<p>Website</p>
<div class="code-file sourceCode cell-code">
<p><i class="fa-solid fa-file"></i> _quarto.yml</p>
</div>
<div class="sourceCode" id="cb3"><pre class="sourceCode yaml code-with-copy"><code class="sourceCode yaml"><span id="cb3-1"><a href="#cb3-1" aria-hidden="true" tabindex="-1"></a><span class="fu">project</span><span class="kw">:</span></span>
<span id="cb3-2"><a href="#cb3-2" aria-hidden="true" tabindex="-1"></a><span class="at"> </span><span class="fu">type</span><span class="kw">:</span><span class="at"> website</span></span>
<span id="cb3-3"><a href="#cb3-3" aria-hidden="true" tabindex="-1"></a></span>
<span id="cb3-4"><a href="#cb3-4" aria-hidden="true" tabindex="-1"></a><span class="fu">website</span><span class="kw">:</span><span class="at"> </span></span>
<span id="cb3-5"><a href="#cb3-5" aria-hidden="true" tabindex="-1"></a><span class="at"> </span><span class="fu">navbar</span><span class="kw">:</span><span class="at"> </span></span>
<span id="cb3-6"><a href="#cb3-6" aria-hidden="true" tabindex="-1"></a><span class="at"> </span><span class="fu">left</span><span class="kw">:</span></span>
<span id="cb3-7"><a href="#cb3-7" aria-hidden="true" tabindex="-1"></a><span class="at"> </span><span class="kw">-</span><span class="at"> lesson-1.qmd</span></span></code><button title="Copy to Clipboard" class="code-copy-button"><i class="bi"></i></button></pre></div>
</div>
</div>
</div>
<aside class="notes">
<p>What did spark my interest was how how straightforward it is with Quarto to move between output formats.</p>
<p>As an educator, two things are of utmost importance to me about the tools I use to create my materials: reproducibility and ease of transition between output formats, like documents to slides to websites to books.</p>
<p>Over the last year of using Quarto for pretty much everything, I’ve felt like I’ve finally found the tool that lets me go from one output type to the other with minimal, if any, futzing around with my source code beyond the yaml. For example, here are common things I produce</p>
<p>–> a lesson in document form <br> –> the same content in presentation form <br> –> the same content on a page in a website,</p>
<p>and you can see that all that needed to change going between these formats is a few lines in the yaml. Nothing in the content part of my document. No slide breaks to remove, no citation style to change, no headings to re-level. This ease of transition has freed up time to focus my time on content, and that, folks, is the dream!</p>
<style type="text/css">
span.MJX_Assistive_MathML {
position:absolute!important;
clip: rect(1px, 1px, 1px, 1px);
padding: 1px 0 0 0!important;
border: 0!important;
height: 1px!important;
width: 1px!important;
overflow: hidden!important;
display:block!important;
}</style></aside>
</section>
<section id="quarto-facilitates-open-sharing" class="slide level2 takeaway center">
<h2>Quarto facilitates open sharing</h2>
<p><br></p>
<div class="fragment fade-up midi">
<p>Tooling that makes it easy to share what you do<br> with the world on the web is incredibly useful</p>
</div>
<p><br></p>
<div class="fragment fade-up midi">
<p>It’s useful not just to you, but to the world<br> as it facilitates open sharing of knowledge<br> for learning and for reuse</p>
</div>
<aside class="notes">
<p>Ultimately, easily creating reproducible artifacts is great.</p>
<p>But for the sharing story to be complete, the tool also needs to support easily <em>sharing</em> those artifacts, like with a simple command like <code>quarto publish</code>, and hopefully soon a button RStudio that does the same thing.</p>
<p>–> I think that tooling that makes it easy to share what you do with the world on the web is incredibly useful.</p>
<p>–> And it’s not just useful to you, the creator, but to the world, as it facilitates open sharing of knowledge for learning and for reuse.</p>
<p>[Pause]</p>
<p>I’ve been talking just about me and my work so far, but I, like many of you, don’t operate in a silo disconnected from others.</p>
<p><strong>[Mine continue on next slide]</strong></p>
<style type="text/css">
span.MJX_Assistive_MathML {
position:absolute!important;
clip: rect(1px, 1px, 1px, 1px);
padding: 1px 0 0 0!important;
border: 0!important;
height: 1px!important;
width: 1px!important;
overflow: hidden!important;
display:block!important;
}</style></aside>
</section></section>
<section>
<section id="collaborate" class="title-slide slide level1 title-top-ice center" data-background-image="images/horst_penguins_telescope.png" aria-label="One penguin standing on another penguin's shoulders in a snowscape, looking through a telescope at a Quarto logo moon in the night sky.">
<h1>Collaborate</h1>
<aside class="notes">
<p><strong>Mine:</strong> Much of my work, and much of Julie’s work is collaborative. So, over to you Julie, for collaborating with Quarto.</p>
<p><strong>Julie:</strong> Thank you Mine -</p>
<style type="text/css">
span.MJX_Assistive_MathML {
position:absolute!important;
clip: rect(1px, 1px, 1px, 1px);
padding: 1px 0 0 0!important;
border: 0!important;
height: 1px!important;
width: 1px!important;
overflow: hidden!important;
display:block!important;
}</style></aside>
</section>
<section id="collaborate-intro" class="slide level2 center" data-menu-title="Collaborate Intro">
<h2></h2>
<div class="columns">
<div class="column" style="width:20%;">
<p><img data-src="images/horst_penguins_nametag_julie.png" alt="Penguin with nametag that says "Julie""></p>
</div><div class="column" style="width:80%;">
<p><img data-src="images/2-collaborate/lowndes_venn_science.svg"></p>
</div>
</div>
<aside class="notes">
<p>I work at the intersection of actionable environmental science, data science, and open science. What I absolutely love doing is mentoring, teaching, and empowering communities, having learned from so many of you in the R and Mozilla communities, and wanting to pay this forward and welcome others.</p>
<p>I’ve made this my job through Openscapes.</p>
<style type="text/css">
span.MJX_Assistive_MathML {
position:absolute!important;
clip: rect(1px, 1px, 1px, 1px);
padding: 1px 0 0 0!important;
border: 0!important;
height: 1px!important;
width: 1px!important;
overflow: hidden!important;
display:block!important;
}</style></aside>
</section>
<section id="openscapes-intro-1" class="slide level2" data-menu-title="Openscapes Intro 1" data-background-color="#0F1620" data-background-image="images/horst_openscapes_champions.jpg" data-background-size="contain" data-background-position="bottom right" data-fig-alt="Illustration of a grassy field by an ocean, there’s a river that meanders from the midground to the background on the right hand side. There are mountains in the background. The Openscapes hex logo is in the top left hand corner. In the foreground there are many animals: hermit crab working alone on a laptop, a sad rabbit on a laptop under a raincloud, a frustrated skunk on a laptop under a raincloud. Just over a bush is another group of animals: a fox with a welcome sign stands with a hedgehog holding map brochures In front of a larger park map. The fox and hedgehog are in front of a group of animals: a heron, a squirrel, a mouse holding a notebook, a raccoon, a snake, and a quail. In the midground, there’s a turtle, deer, owl and beaver by the river that has stepping stone rocks across. A roadrunner, lizard, blue bird, and rabbit, are walking down a path together, one of the other paths is blocked by a log. There’s a rowboat on the edge of the water. In the background, a duck, turtle, red squirrel, fox, and raven are walking single file over a wooden bridge that crosses the river. Most of the animals have coloured bandanas tied around their necks and a few are wearing hats. Up in the sky, there’s a satellite. Overlaid on the image is the OpenScapes hex logo.">
<h2></h2>
<aside class="notes">
<p>Openscapes is an approach and a movement that I launched in 2018 and have built together with my partner Erin Robinson.</p>
<p>Our flagship activity is mentoring research teams in open science. We think of open science as a landscape full of open source software, data, and communities, and many paths forward.</p>
<style type="text/css">
span.MJX_Assistive_MathML {
position:absolute!important;
clip: rect(1px, 1px, 1px, 1px);
padding: 1px 0 0 0!important;
border: 0!important;
height: 1px!important;
width: 1px!important;
overflow: hidden!important;
display:block!important;
}</style></aside>
</section>
<section id="openscapes-intro-2" class="slide level2" data-menu-title="Openscapes Intro 2" data-background-color="#0F1620" data-background-image="images/horst_openscapes_champions.jpg" data-background-size="contain" data-background-position="bottom right" data-fig-alt="Illustration of a grassy field by an ocean, there’s a river that meanders from the midground to the background on the right hand side. There are mountains in the background. The Openscapes hex logo is in the top left hand corner. In the foreground there are many animals: hermit crab working alone on a laptop, a sad rabbit on a laptop under a raincloud, a frustrated skunk on a laptop under a raincloud. Just over a bush is another group of animals: a fox with a welcome sign stands with a hedgehog holding map brochures In front of a larger park map. The fox and hedgehog are in front of a group of animals: a heron, a squirrel, a mouse holding a notebook, a raccoon, a snake, and a quail. In the midground, there’s a turtle, deer, owl and beaver by the river that has stepping stone rocks across. A roadrunner, lizard, blue bird, and rabbit, are walking down a path together, one of the other paths is blocked by a log. There’s a rowboat on the edge of the water. In the background, a duck, turtle, red squirrel, fox, and raven are walking single file over a wooden bridge that crosses the river. Most of the animals have coloured bandanas tied around their necks and a few are wearing hats. Up in the sky, there’s a satellite. Overlaid on the image is the OpenScapes hex logo.">
<h2></h2>
<aside class="notes">
<p>We help people move from the sad lonely animals like the foreground in the bottom right so that they start to explore and navigate this landscape safely, without too much trampling. Our role is to welcome them at the trail head, helping them seem themselves as a team and identify where they are all starting from</p>
<p>We work with professional research groups in government, academia, nonprofits, and we help these teams modernize their workflows and shift culture with their teams and organization through open software and practices. Adyan Rios from NOAA Fisheries and she’s described Openscapes as saying:</p>
<style type="text/css">
span.MJX_Assistive_MathML {
position:absolute!important;
clip: rect(1px, 1px, 1px, 1px);
padding: 1px 0 0 0!important;
border: 0!important;
height: 1px!important;
width: 1px!important;
overflow: hidden!important;
display:block!important;
}</style></aside>
</section>
<section id="quote-adyan-rios" class="slide level2 center" data-menu-title="Quote: Adyan Rios" data-background-image="images/2-collaborate/torsten-dederichs-KrQJzrZiCak-unsplash.jpg">
<h2></h2>
<div class="quotebox-transparent">
<p>“As fisheries scientists, we know that when we’re in rough seas, it’s important to keep the ship afloat AND get out of the storm. Openscapes helps teams steer out of the storm of email chains with 37 versions of the same spreadsheet and to the calmer waters of open science and meaningful collaboration, using tools like R”</p>
<div class="quote-source">
<p>Adyan Rios<br>
NOAA Southeast Fisheries Science Center</p>
</div>
</div>
<aside class="notes">
<p>Adyan Rios says “As fisheries scientists, we know that when we’re in rough seas, it’s important to keep the ship afloat AND get out of the storm. Openscapes helps teams steer out of the storm of email chains with 37 versions of the same spreadsheet and to the calmer waters of open science and meaningful collaboration, using tools like R”</p>
<p>I have the best job - mentoring teams like Adyan’s who are doing really critical work and we help them do better science by connecting them to the tools and resources you all make.</p>
<p>It really blends mentoring and collabortion, and that is definitely true of our story with NASA.</p>
<style type="text/css">
span.MJX_Assistive_MathML {
position:absolute!important;
clip: rect(1px, 1px, 1px, 1px);
padding: 1px 0 0 0!important;
border: 0!important;
height: 1px!important;
width: 1px!important;
overflow: hidden!important;
display:block!important;
}</style></aside>
</section>
<section id="nasa-beach-ball" class="slide level2 center" data-menu-title="NASA Beach Ball" data-background-video="videos/nasa-beach-ball.mp4" data-background-size="contain" data-background-color="#000000">
<h2></h2>
<aside class="notes">
<p>With NASA you probably think about outer space, but they also collects an unbelievable amount of data about Earth. Researchers use NASA Earthdata in many ways including to understand and address impacts to the heat waves and wildfires like we’re increasingly seeing in summers due to climate change.</p>
<p>These data are freely available from 12 different NASA data centers - but researchers have to download it to analyze it locally - which puts a lot of burden on research groups.</p>
<p>Now, following years of the preparation, these data are migrating to the Cloud, and NASA data centers are supporting researchers who will be migrating their analytical workflows to the Cloud too.</p>
<style type="text/css">