Your Slides are So Extra!

class: title-slide middle

# Your Slides are So Extra!

## Extra-Special Presentations with xaringanExtra

.author[
Garrick Aden-Buie
]

.twitter[
@grrrck
]

---

# What is xaringan?.red.not-last[*]

.w-50.pr3.fl[
.b.f4[R Markdown]

```markdown
---

# Hello Ninja

As a presentation ninja, you certainly should not be satisfied by the "Hello World" example. You need to understand more about two things:

1. The [remark.js](https://remarkjs.com) library;

1. The **xaringan** package;

Basically **xaringan** injected the 
chakra of R Markdown (minus Pandoc) 
into **remark.js**. The slides are 
rendered in the web browser...
```
]

.absolute.bottom-0.left-1.red.o-90.animated.delay-2s.slideInUp.not-last[
*All mispronunciations are my own
]

.w-50.fl[
.b.f4[HTML]
![](images/presentation-ninja.png)
]

---
class: middle

.w-40.h-50.fl[
## Install xaringan

```r
install.packages("xaringan")
```
]

.w-60.fr.right[
## Learn xaringan

.f3[
[slides.yihui.org/xaringan](https://slides.yihui.org/xaringan)  
[github.com/yihui/xaringan/wiki](https://github.com/yihui/xaringan/wiki)
]
]

---
class: hide-count
background-image: url('images/yihui.jpg')
background-size: cover

#arrow {
  transform: rotateY(180deg) scale(0.5);
  position: absolute;
  top: -30px;
  right: 330px;
}

.the-real-hero {
	color: white;
	font-size: 2.5em;
	position: absolute;
	top: 230px;
	right: 50px;
  font-family: Megrim,Pompiere,var(--header-font-family);
}
</style>

<div class="the-real-hero">thank you, yihui!</div>

---
class: middle

# Make Your Slides Extra Special

<div class="f1 pompiere mt3 mb4">xaringanExtra</div>

```r
remotes::install_github("gadenbuie/xaringanExtra")
```

.f2.pompiere.right[
[pkg.garrickadenbuie.com/.b[xaringanExtra]](https://pkg.garrickadenbuie.com/xaringanExtra)
]

---
class: full-screen hide-count

---
layout: true
class: bigger

# Tile View

---

````markdown
```{r xaringan-tile-view, echo=FALSE}

```
````

---

````markdown
```{r xaringan-tile-view, echo=FALSE}
*xaringanExtra::use_tile_view()
```
````

Press .key[O] for overview

---
layout: false
class: full-screen hide-count

<div class="grid-3-2">
<div class="extension-tile tileview"><div>Tile View</div></div>
<div class="extension-tile panelset-tile animated flipInX"><div>Panelset</div></div>
</div>

---
class: bigger

.panelset[
.panel[.panel-name[Setup]

````markdown
```{r xaringan-panelset, echo=FALSE}
*xaringanExtra::use_panelset()
```
````
]

.panel[.panel-name[Create a Panel]

````markdown
.panelset[
.panel[.panel-name[R Code]

```r
# ... r code ...
```
]

.panel[.panel-name[Plot]

![](index_files/figure-html/panel-chunk-1.png)
]
]
````
]

.panel[.panel-name[Enjoy]

<video width="100%" height="100%" autoplay loop>
  <source src="images/tada.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video> 
]
]

---
class: full-screen hide-count

---
layout: true
class: bigger

## Enable .secondary[webcam]

---

````markdown
```{r xaringan-webcam, include = FALSE}
*xaringanExtra::use_webcam()
```
````

---

````markdown
```{r xaringan-webcam, include = FALSE}
*xaringanExtra::use_webcam(width = 300, height = 225)
```
````

.mt5[
Then press .key[w] to turn on the **webcam** 
]

.mt4[
Or .key[Shift] + .key[w] to cycle through the corners
]

---
layout: false
class: full-screen hide-count

<div class="grid-3-2">
<div class="extension-tile tileview"><div>Tile View</div></div>
<div class="extension-tile panelset-tile"><div>Panelset</div></div>
<div class="extension-tile webcam"><div>Webcam</div></div>
<div class="extension-tile editable animated fadeInRight"><div>Editable</div></div>
</div>

---

## Welcome to UseR!2020

.flex.tc[
.w-50.f2[
&#x1F4F6;  
<span autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" class="can-edit">wifi</span>
]
.w-50.f2[
&#x1F510;  
.can-edit[pwd]
]
]

---

## My Favorite .code[tidyverse] Functions

.can-edit.f3.code[
- one
- ...
]

---
layout: true
class: bigger

## Editable

````markdown
```{r xaringan-editable, include = FALSE}
*xaringanExtra::use_editable()
```
````

---

Wrap in .b[`.can-edit[]`]

```markdown
*.can-edit[
- one
- ...
*]
```

---

Wrap in .b[`.can-edit[]`]

```markdown
The WiFi password is .can-edit[password].
```

---

Add `.can-edit`.b[`.key-<NAME>`]`[]` to save for _your browser_

```markdown
The WiFi password is .can-edit.key-password[password].
```

---
layout: false
class: full-screen hide-count

<div class="grid-3-2">
<div class="extension-tile tileview"><div>Tile View</div></div>
<div class="extension-tile panelset-tile"><div>Panelset</div></div>
<div class="extension-tile webcam"><div>Webcam</div></div>
<div class="extension-tile editable"><div>Editable</div></div>
<div class="extension-tile slide animated heartBeat"><div>Slide Tone</div></div>
</div>

---
class: bigger

## Slide Tone

````markdown
```{r xaringan-slide-tone, include = FALSE}
*xaringanExtra::use_slide_tone()
```
````

.f3[
&#x1F50A; [.o-60[pkg.garrickadenbuie.com/].o-80[xaringanExtra/].secondary[slide-tone/]](https://pkg.garrickadenbuie.com/xaringanExtra/slide-tone/)
]

---
class: full-screen hide-count

<div class="grid-3-2">
<div class="extension-tile tileview"><div>Tile View</div></div>
<div class="extension-tile panelset-tile"><div>Panelset</div></div>
<div class="extension-tile webcam"><div>Webcam</div></div>
<div class="extension-tile editable"><div>Editable</div></div>
<div class="extension-tile slide"><div>Slide Tone</div></div>
<div class="extension-tile animate animated slideInLeft"><div>Animate</div></div>
</div>

---
class: animated slideInUp bigger

## Animate

````markdown
```{r xaringan-animate-css, echo=FALSE}
*xaringanExtra::use_animate_css()
```
````

---
class: animated fadeIn fadeOutLeft bigger

## Animate

````markdown
```{r xaringan-animate-css, echo=FALSE}
*xaringanExtra::use_animate_css()
```
````

```markdown
---
class: animated slideInRight fadeOutLeft

## This slide...

- slides in from the right 
- and fades out to the left on exit
```

---
class: bigger animated fadeInLeft

## Animate All The Slides

````markdown
```{r xaringan-animate-all, echo=FALSE}
*xaringanExtra::use_animate_all("slide_left")
```
````

---
class: animated zoomIn
background-image: url(images/that-was-awesome.gif)
background-size: cover

---
layout: true
class: bigger

## Use xaringanExtra

---

````markdown
```{r xaringan-extra-all-the-things, echo=FALSE}
xaringanExtra::use_tile_view()
xaringanExtra::use_panelset()
xaringanExtra::use_editable()
xaringanExtra::use_slide_tone()
xaringanExtra::use_animate_css()
```
````

---

````markdown
```{r xaringan-extra-all-the-things, echo=FALSE}
*xaringanExtra::use_xaringan_extra(
* c("tile_view", "panelset", "editable", 
*   "slide_tone", "animate", "tachyons")
*)
```
````

---
layout: false
class: middle left

<p class="pompiere f1">&#x1F31F; <a href="https://github.com/gadenbuie/xaringanExtra"><span class="gray">gadenbuie</span>/xaringanExtra</a></p>

<p class="pompiere f1">&#x1F5E3; <a href="https://twitter.com/grrrck">&commat;grrrck</a></p>

<p class="pompiere f1">&#x1F468;&#x1F3FC;&#x200D;&#x1F4BB; <a href="https://garrickadenbuie.com">garrickadenbuie.com</a></p>