Presenting like a kunoichi kunoichi with ⚔️aringan

# Presenting like a kunoichi <img src="img/kunoichi.svg" alt="kunoichi" /> with ⚔️aringan
### Earo Wang

---

```
#> 
#>  -------------- 
#> Kia Ora! I'm Earo. 
#>  --------------
#>     \
#>       \
#>         \
#>         /\_/\         _
#>        /``   \       / )
#>        |n n   |__   ( (
#>       =(Y =.‛`   `\  \ \
#>       {`"`        \  ) )
#>       {       /    |/ /
#>        \\   ,(     / /
#>         ) ) /-‛\  ,_.‛
#>   jgs  (,(,/ ((,,/
#> 
```
]

package developer

???

* Kia ora koutou.
* Most of us will feel nervous when start presenting, like this anxious cat. But will calm down
* Joined as a lecturer, turned out a zoomer, lecturer in pyjamas
* The only thing I managed to upskill is zoom in the past 6 months.
* At Uni, I teach data science, do research on data str, data wrangling, data vis
* I make my research methods available in the form of R packages, developed a bunch of R packages.

---

## My PhD timeline

![:scale 100%](https://thesis.earo.me/img/phd-commits.png)

???

* Completed my PhD at Monash U
* This beeswarm plot: gh commits
* As a PhD student, my academic activities are roughly grouped into 3 cat: writing, coding, and presenting
* 3 chapters, 3 packages, presenting those packages for ts.
* In the past 3 years, I've given 15 talks, formal or informal. Academic seminars, conferences, meetups, workshops.
* I started trying out html5 slides when I started PhD in 2016. I finally settled with xaringan when it was first out in 2016 Dec.
* Interestingly, the first public talk I gave using xaringan, at the wombat conference. Yihui was sitting there. He was invited for the keynote.

---

.pull-left[
 
# Opinionated kunoichi
<hr>
# Non-opinionated xaringan
]
.pull-right[
![:scale 45%](img/kunoichi.svg)

![:scale 45%](https://upload.wikimedia.org/wikipedia/commons/b/be/Sharingan_triple.svg)
]

???

* divided into 2 parts
* first: how to be a kunoichi presenter, which is quite opinionated
* Bc I'm going to share what I've learnt while presenting. No hard rules about presenting
* Grad schools deliver workshops on presentation tips, 
* We learn presenting by presenting
* And the second part is not opinionated. It's about xaringan.

---

.pull-left[
.animate__animated.animate__bounceInDown[
![kunoichi](img/kunoichi.svg)
]
]
.pull-right[
 
 
# HTML.orange[]
<hr>
# Creative
# Unconventional
]

???

* Kunoichi is a Japanese word for female ninja, an unconventional presenter
* We can creatively use our tones, gestures, facial expressions, but mostly visuals on the slides to express our thoughts.
* To design those visuals, we need to choose tools, and tools shouldn't be a constraint, when we want to be creative and expressive.
* Using latex beamer, I can't embed youtube videos, interactive graphics.
* But HTML5 slides leverages the whole web technology, and allow me to produce creative visuals when needed.

## Creative formats

* Lightning talk vs TikTok
* 20 minutes talk vs Youtube
* 1 hour talk vs Documentary

## Onsite vs remote presentations

* Laugh alone (no passive laugh)
* Presentation vs conversation tone
* Not sure when to pause

---

## .right[🛠 Crafting]

???

* No matter what type of talk we give, (lightning) we'll have these 3 slides:
* We do want to craft them well. Bc they are on the screen much longer than the rest of the slides.
* I'll use my own slides as case studies.

---

1. Bigger than big font size
2. Background image
3. Google fonts
4. Handles
5. URLs
]
.pull-right[
![:scale 100%](https://slides.earo.me/rstudioconf19/img/slides-title.png)
![:scale 100%](img/alison-jsm.png)
]

???

* Title slide stays longer on the screen, bc you set up the computer
* In short talks, you introduce yourself in the beginning without an extra intro slide. 
* font: cliche
* image: evocative. I don't do it, lazy, rearrange the text positions.
* Occasionally, I chose evocative fonts. Another good thing about H5 slides is we can use google fonts on the fly. 991
* FA icon, but now have no idea why I chose a Halloween colour theme for a conference held in Jan.
* wondering if I presented tidy ts, or spooky ts
* handles: live tweeting
* URLs (I don't share my slides url upfront anymore, to focus on my talk atm)
* But venue is big, screen is small, URLs first

---

# Motivating ???? .blue[`beta`]
<hr>
## 🤦‍♀

???

* A critical lesson I learnt from my past talks is motivation matters.
* Motivating well will help set the tone for a successful talk. Bc motivation slides come after the title.
* To accumulate audience's interest and grab their attention, the first 5 minutes is the key.
* I'll give you a facepalming version of how I motivated the tsibble package

---

![:scale 30%](img/cat-eye-rolling.gif)

???

* I gave my first tsibble talk for an internal department talk. This is the motivation page of tsibble in the early stage.
* The targeted audience is my PhD committee, a small group of faculties and PhD students.
* I thought I was telling my committee. Look I'm not talking about software, I'm talking about matrix. I'm doing serious research.
* The problem is I repeated this slide at useR! and NYC R meetups. Diverse backgrounds
* This slide is made for insiders who know ts in R well, and a narrow focus.
* As you could imagine, half of my audience would lost the interests after this slide.

---

## Motivating well .blue[`v1.0.0`]
<hr>
## 💃

???

* Redesign
* Helped me to position the tsibble and write the tsibble paper

---

.left-column[
 
 
## .center[.red[time series verse]]
]
.right-column[
 
 
![:scale 100%](img/ts-model.png)
]

### .center[WAT!😱]

???

Include audience who are not just insiders, but also data scientists in general.

---

background-image: url(img/tsibble-model.png)
background-size: 70%
background-position: 91% 38%

.left-column[
 
 
 
 
## .center[tidyver.red[ts]]
]
.right-column[
.animate__animated.animate__rollIn.animate__slower[
.pipeline[<img src="img/tsibble.png", style="width:150px">]
]
]

???

* The focus of the tsibble is a workflow facilitator, not a matrix vs a data frame.
* A big picture
* Attract users who don't play with time series data.
* A mixed group, go for breath over depth.

---

# Thank you!

# Questions?

# Fin

---

.animate__animated.animate__hinge[
# Thank you!
# Questions?
# Fin
]

???

* One slide is wasted.
* This slide is the background when you answering questions.
* But almost zero information.

---

## .center[📸 Closing slide with 🔗🔗🔗]

.pull-left[
 
.center[.card[
![](img/rladiesakl20.png)
.small[[slides.earo.me/rladiesakl20](https://slides.earo.me/rladiesakl20)]
]
]
]
.pull-right[
 
📝 [Carpe Talk](https://www.tidyverse.org/blog/2018/07/carpe-talk/) by Jenny Bryan and Mara Averick
<hr>
📝 [Guidelines I follow when giving talks](https://www.amelia.mn/blog/misc/2020/04/16/presentations.html) by Amelia McNamara
<hr>
📝 [How to Present Good](http://www.rebeccabarter.com/blog/2017-02-02-how-to-present-good/) by Rebecca Barter
]

???

* Ending talks with resources, I'll say "Thank you"
* If useful and helpful, they take out their phones and fire up the cameras. They will do their homeworks
* 3 blog posts and 4 great presenters in the R community.
* Bc slides are in html, you probably would like a short URL to link to the slides.

---

???

* Presenting is fun, and xaringan adds more creative fun on top it.
* I hope I accumulate your interests for xaringan, time to talk about it.
* You might think, xaringan is cool, fancy, and dynamic
* The most appealing reason to use xaringan for me is it naturally fits into presentation workflow.

1. pour down all your thoughts and ideas in markdown
2. style them with css
3. for more engaging slides, add js

Unlike other h5 slides or latex beamer, e.g slidyfy, it's highly customisable and easy to customise.

---

## Learn? Unbox and use!

.pull-left[
```r
install.packages("xaringan")
```
.center[![:scale 75%](img/rstudio-xaringan.png)]
]
.pull-right[
```yml
---
title: "Presentation Ninja"
subtitle: "⚔ with xaringan"
author: "Yihui Xie"
institute: "RStudio, PBC"
date: "2016/12/12 (updated: 2020-06-15)"
output:
* xaringan::moon_reader:
 lib_dir: libs
 nature:
 highlightStyle: github
 highlightLines: true
 countIncrementalSlides: false
---
```
]

???

* We don't learn markdown. Similarly, we don't learn xaringan.
* install
* in rstudio, create rmarkdown
* It generates an example document for you
* Like other RMarkdown documents, yaml, go through yaml
* Click "knit" button, you'll get this slide

---

.center[
👇 (nested) slides
<iframe src="https://slides.yihui.org/xaringan/" frameborder="0" height="480" width="640">
</iframe>
]

.footnote[`<iframe>` to embed [slides.yihui.org/xaringan](https://slides.yihui.org/xaringan/) within the current document]

???

* This's not a static image. It's official xaringan slides nested within my slides.
* p3: pronouciation
* It documents detailed usage, check it out after this talk.

---

# Chap.

???

I'll continue with my cookbook. The first chapter: mark your thoughts down in Rmd

---

.left-column[
.center[![:scale 50%](https://user-images.githubusercontent.com/163582/45438104-ea200600-b67b-11e8-80fa-d9f2a99a03b0.png)]
### - markdown
]
.right-column[
````markdown
---
background-image: url(img/kunoichi.svg)
background-position: 50% 50%
background-size: cover
class: inverse middle

## Presenting like a kunoichi with ⚔️aringan

1. Jot down in Markdown
2. Prettify with CSS
3. Interact with JS

```{r eval = FALSE}
install.packages("xaringan") #<<
```

````
]

---

background-image: url(img/kunoichi.svg)
background-position: 50% 50%
background-size: cover
class: inverse middle

## Presenting like a kunoichi with ⚔️aringan

1. Jot down in Markdown
2. Prettify with CSS
3. Interact with JS

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

---

# Chap.

???

Next chapter is styling your slides with css. Like all stuff on the web, css controls the style.

---

```
 [1] "chocolate-fonts"  "chocolate"        "default-fonts"    "default"         
 [5] "duke-blue"        "fc-fonts"         "fc"               "hygge-duke"      
 [9] "hygge"            "ki-fonts"         "ki"               "kunoichi"        
[13] "lucy-fonts"       "lucy"             "metropolis-fonts" "metropolis"      
[17] "middlebury-fonts" "middlebury"       "ninjutsu"         "rladies-fonts"   
[21] "rladies"          "robot-fonts"      "robot"            "rutgers-fonts"   
[25] "rutgers"          "shinobi"          "tamu-fonts"       "tamu"            
[29] "uo-fonts"         "uo"               "uol-fonts"        "uol"             
```

```yaml
output:
  xaringan::moon_reader:
*   css: [default, rladies, rladies-fonts]
```
]

???

* Don't have time to write your own CSS?
* The default theme is not bad, but get boring quickly when you see the same style everywhere.
* That's Yihui's motivation to make xaringan, he got bored with default beamer slides.
* It bundles many user-contributed themes.

---

.left-column[
.center[![:scale 50%](https://user-images.githubusercontent.com/163582/45438104-ea200600-b67b-11e8-80fa-d9f2a99a03b0.png)]
### - markdown
### - prettify
]
.right-column[
## 🎨 [xaringanthemer](https://pkg.garrickadenbuie.com/xaringanthemer)
```yaml
output:
  xaringan::moon_reader:
*   css: xaringan-themer.css
```

![:scale 100%](https://raw.githubusercontent.com/gadenbuie/xaringanthemer/assets/examples.gif)
]

???

Not a cup of tea?

---

.left-column[
.center[![:scale 50%](https://user-images.githubusercontent.com/163582/45438104-ea200600-b67b-11e8-80fa-d9f2a99a03b0.png)]
### - markdown
### - prettify
]
.right-column[
## [emitanaka/ninja-theme](https://github.com/emitanaka/ninja-theme)
![:scale 100%](https://raw.githubusercontent.com/emitanaka/ninja-theme/master/docs/themes/kunoichi/images/kunoichi-showcase.gif)
]

???

* The kunoichi theme made by a cool kunoichi Emi
* It inspired this talk's title
* Layouts, colours, and animations bundled into one theme
* It's a repo rather than a package

---

.left-column[
.center[![:scale 50%](https://user-images.githubusercontent.com/163582/45438104-ea200600-b67b-11e8-80fa-d9f2a99a03b0.png)]
### - markdown
### - prettify
]
.right-column[
## Ultimate `custom.css`
```css
@import url('https://fonts.googleapis.com/css2?family=Libre+Barcode+128+Text&display=swap');
.encoding {
  font-family: 'Libre Barcode 128 Text', cursive;
}
```

.pull-left[
```yml
---
output:
  xaringan::moon_reader:
    css: [default, custom.css]
---
.encoding[
This message is encoded.
]
```
]

.pull-right[
```html
<div class="encoding">
 This message is encoded.
</div>
```
.alert.center[.encoding[
This message is encoded.
]]
]
]

???

* Believe it or not, the ultimate theme is creating your own one.
* As you progress towards kunoichi, no theme will express yourself properly until your theme comes out.

---

# Chap.

???

* Impress your audience with stylish slides
* Engage with them by adding JS
* Interactive graphics always look impressive
* An excellent tool for teaching, particularly if you teach with R

---

````markdown
```{r}
# remotes::install_github("gadenbuie/countdown")
countdown::countdown(minutes = 0, seconds = 42)
```
````

.pull-left[
.center[
.alert[
.purple[
## Keep Calm
## and
## Countdown
## 
]
]
]
]
.pull-right[
.large[## .center[👇]]
]
]

???

* Another package from Garrick
* Your turn / small exercises in class and workshops
* I'll give you 42 seconds to try out with this package, start now!
* Works in RMarkdown documents and RStudio viewers
* Anna, is this in your trying-out list now?

---

````markdown
```{r echo = FALSE}
# remotes::install_github("gadenbuie/xaringanExtra")
xaringanExtra::use_panelset()
```
````

````md
.panelset[
 .panel[.panel-name[Code]
 
 ]

???

* Yet another package from Garrick
* Many enhanced and useful features, great additions to xaringan
* One of my favourites is creating panels in a slide

---

```r
library(ggplot2)
ggplot(mpg, aes(displ, hwy, colour = class)) +
  geom_point()
```
]

<img src="figure/unnamed-chunk-3-1.png" width="70%" style="display: block; margin: auto;" />
]
]
]

???

* code and then plot
* or the other way around

---

.left-column[
.center[![:scale 50%](https://user-images.githubusercontent.com/163582/45438104-ea200600-b67b-11e8-80fa-d9f2a99a03b0.png)]
### - markdown
### - prettify
### - interact
]
.right-column[
## Use `custom.js`
 
```yml
output:
 xaringan::moon_reader:
* includes:
* after_body: "custom.js"
```

???

Use audio input js to control, so speak "Next page" for next page

---

## xaringan in class

.card[
[![](img/monash.png)](https://wcd.numbat.space/slides/week07-abs-data)
]
.card[
[![](img/georgia.png)](https://datavizm20.classes.andrewheiss.com/slides/01-slides.html)
]

???

* Give 2 eg how xaringan used in class
* WCD at Monash Uni and Data vis at Georgia state

---

.pull-left[
]
.pull-right[
# .large[ ➕ ]
![:scale 40%](https://raw.githubusercontent.com/thomasp85/gganimate/master/man/figures/logo.svg)
![:scale 40%](https://raw.githubusercontent.com/rstudio/gt/master/man/figures/logo.svg)
]

???

* Use H5 slides with R, sky is not the limit.
* htmlwidgets for making plotly, leaflet
* use gganimate to embed incredible animations
* gt (grammar of tables) for amazing tables, talk/tutorials/workshops on gt?

portable || dynamic

---

.pull-left[
.center[
.card[
![](img/rladiesakl20.png)
.small[
[slides.earo.me/rladiesakl20](https://slides.earo.me/rladiesakl20)  
]
]

[earowang/rladiesakl20](https://github.com/earowang/rladiesakl20)
]
]

[Presentation ninja](https://slides.yihui.org/xaringan)

[Making slides in R Markdown](https://arm.rbind.io/slides/xaringan.html)

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

[Infinite moon reader](https://yihui.org/en/2019/02/ultimate-inf-mr/)
]