Teaching in Production

class: title-slide, center, bottom

# Teaching in Production

## Make your teaching more robust & reproducible with R Markdown

### Dr. Alison Presmanes Hill

???

Welcome to the webinar on sharing on short notice

Where we'll show you how to get your teaching materials online with R Markdown.

---
layout: true

---
name: clouds
class: center, middle
background-image: url(images/clouds.jpg)
background-size: cover

.panelset .panel-tabs .panel-tab > a {
	color: #023d4d;
}
</style>

---
template: clouds

## .big-text[Hello.]

???

So hello- I'm so happy to be invited to join you all today.

---
name: clouds
background-image: url(images/clouds.jpg)
background-size: cover

---
name: hello
template: clouds
class: middle, center

### Alison Hill

[<i class="fab  fa-github "></i> @apreshill](https://github.com/apreshill)  
[<i class="fab  fa-twitter "></i> @apreshill](https://twitter.com/apreshill)  
[<i class="fas  fa-link "></i> alison.rbind.io](https://alison.rbind.io)

???

My name is Alison Hill, and I'm a data scientist and professional educator at RStudio.

---
class: freight-slide, center, middle, inverse

# .shadow-text[I teach a lot.]

---
class: freight-slide, center, middle, inverse

# .shadow-text[I teach a lot.]

https://ohsu-conj620.netlify.com/

https://apreshill.github.io/data-vis-labs-2018/

https://ohsu-math630.netlify.com/

https://alison.rbind.io/project/tidyml/

https://conf20-intro-ml.netlify.com/

https://summer-of-blogdown.netlify.com/

https://alison.rbind.io/project/rmd4medicine/

all here: https://alison.rbind.io/projects/

???

All of these are courses or workshops that I have developed and taught. Sometimes, I've taught them more than once. Others, just the one time.

Each site was built using R Markdown, with different tools chosen depending on what we needed.

---
template: clouds
class: middle, center

## Who are you?

---
class: middle, center

<div class="flex" style="margin: 0 1em;">
  <div class="column">
    <h3> You're an educator <h3>
    <img src="images/educator.jpg" style="width: 100%;">
  </div>
  
???

Here's who I know you are...

You're an educator
  
--

<div class="column"style="margin: 0 1em;">
    <h3> You know R Markdown  </h3>
    <img src="images/rmd-buddy.jpg" style="width: 100%;">
  </div>

???

You have R Markdown files for teaching...

---
class: middle, center

<div class="flex" style="margin: 0 1em;">
  <div class="column">
    <h3> You're an educator </h3>
    <img src="images/educator.jpg" style="width: 100%;">
  </div>
  
  <div class="column"style="margin: 0 1em;">
    <h3> You know R Markdown </h3>
    <img src="images/rmd-buddy.jpg" style="">
  </div>

--
  <div class="column" style="margin: 0 1em;">
    <h3> You work really hard </h3>
    <img src="images/hard-mode.png"  style="">
  </div>
</div>

???

Maybe sometimes too hard.

---
class: center
background-image: url("images/rmd_flowchart.png")
background-size: contain
background-color: #f6f6f6

---
class: center
background-image: url("images/lesson-time.jpg")
background-size: contain
background-color: #f6f6f6

## How it feels

???

As educators, you create a ton of materials. Slides, notes, exercises.

---
background-image: url(images/Whisper.jpg)
background-size: contain

<div class="word-bubble" style="
  position: absolute; 
  text-align: center;
  width: 50%; 
  top: 100px;
  left: 310px;
  font-size: 1.3em;
"> We need to talk about <br> your teaching workflow. </div>

---

# Do you teach code?

.panelset[
.panel[.panel-name[Pop quiz]

```r
penguins %>% 
  dplyr::n_distinct(species)
```
]

.panel[.panel-name[Answer]

```r
penguins %>% 
  dplyr::n_distinct(species)
## Error in list2(...): object 'species' not found
```
]

.panel[.panel-name[Solution]

```r
n_distinct(penguins$species)
## [1] 3
penguins %>% 
  distinct(species) %>% 
  tally()
## # A tibble: 1 x 1
##       n
##   <int>
## 1     3
```
<https://gist.github.com/apreshill/d9107e054f3358d438e04a582b76f7cc>
]
]

---

# Do you teach code?

.panelset[
.panel[.panel-name[Pop quiz]

```r
penguins %>% 
  group_by(species) %>% 
  summarize(across(where(is.numeric), mean(na.rm = TRUE)))
```
]

.panel[.panel-name[Answer]

```r
penguins %>% 
  group_by(species) %>% 
  summarize(across(where(is.numeric), mean(na.rm = TRUE)))
## Error: Problem with `summarise()` input `..1`.
## x argument "x" is missing, with no default
## ℹ Input `..1` is `across(where(is.numeric), mean(na.rm = TRUE))`.
## ℹ The error occurred in group 1: species = "Adelie".
```
]

.panel[.panel-name[Solution]

```r
penguins %>% 
  group_by(species) %>% 
  summarize(across(where(is.numeric), mean, na.rm = TRUE))
## `summarise()` ungrouping output (override with `.groups` argument)
## # A tibble: 3 x 6
##   species   bill_length_mm bill_depth_mm flipper_length_mm body_mass_g  year
##   <fct>              <dbl>         <dbl>             <dbl>       <dbl> <dbl>
## 1 Adelie              38.8          18.3              190.       3701. 2008.
## 2 Chinstrap           48.8          18.4              196.       3733. 2008.
## 3 Gentoo              47.5          15.0              217.       5076. 2008.
```
]
]

---

# Do you teach data visualization?

.panelset[
.panel[.panel-name[Pop quiz]

.pull-left[

```r
# Histogram example: flipper length by species
ggplot(data = penguins, 
       aes(x = flipper_length_mm)) +
  geom_histogram(
    aes(fill = species), 
    alpha = 0.5) +
  scale_fill_manual(values = c("darkorange","darkorchid","cyan4"))
```

]

.pull-right[
<img src="index_files/figure-html/dodge-hist-1.png" width="80%" />

]
]

.panel[.panel-name[Answer]

.pull-left[

]

.pull-right[
<img src="index_files/figure-html/unnamed-chunk-9-1.png" width="80%" />
]

]

.panel[.panel-name[Solution]

.pull-left[

```r
# Histogram example: flipper length by species
ggplot(data = penguins, 
       aes(x = flipper_length_mm)) +
  geom_histogram(
    aes(fill = species), 
    alpha = 0.5, 
*   position = "identity") +
  scale_fill_manual(values = c("darkorange","darkorchid","cyan4"))
```
]

.pull-right[
<img src="index_files/figure-html/unnamed-chunk-11-1.png" width="80%" />
]

]
]

---

# Do you teach literate programming?

.panelset[
.panel[.panel-name[Pop quiz]

````
```{r, fig.caption="Why no caption?"}
flipper_hist
```
````
]

.panel[.panel-name[Answer]

.pull-left[
````
```{r, fig.caption="Why no caption?"}
flipper_hist
```
````

]

.pull-right[
<img src="index_files/figure-html/unnamed-chunk-12-1.png" width="80%" />
]

]

.panel[.panel-name[Solution]

.pull-left[

````
```{r, fig.cap="Yes caption!"}
flipper_hist
```
````

]

.pull-right[

<div class="figure">
<img src="index_files/figure-html/unnamed-chunk-13-1.png" alt="Yes caption!" width="70%" />
<p class="caption">Yes caption!</p>
</div>

]

]
]

---

# YAML

![](images/yaml.png)

---
class: left, middle
background-image: url(images/scream.jpg)
background-size: contain
background-position: right

.pull-left[
These moments happen to every educator.

You may just not know it if:

+ folks were not ACTUALLY following along,

+ folks didn't feel comfortable speaking up,

+ folks didn't have a way to speak up

]

---
name: surprise
class: right, middle
background-image: url(images/santa-reveal.jpg)
background-size: contain
background-position: left

.pull-right[
### WHAT IF I TOLD YOU...
]

---
name: surprise2
template: surprise

.pull-right[
The tools you teach learners to use...
]

---
name: surprise3
template: surprise2

.pull-right[
are the same tools **you** can use to teach.
]

---
template: surprise3

.pull-right[
# 🤯
]

---
background-image: url(images/rmd-friends.jpg)
background-size: 50%
background-position: middle, center
class: top, center

# It's all R Markdown

---
background-image: url(images/rmarkdown_hedgehog_wide.png)
background-size: contain
background-position: middle, center

---
class: bottom, center
background-color: #e6f3fc
background-image: url(images/rmarkdown_hedgehog.png)
background-size: 25%
background-position: 50% 20%

# Teaching in Production

Tip #1: Use R Markdown to make slides with [xaringan](https://github.com/yihui/xaringan)

Tip #2: Use R Markdown to make a shareable site with [distill](https://rstudio.github.io/distill/)

Q & A

---
class: inverse, center, middle

# TIP #1:

# Use R Markdown to

# make slides with xaringan

---

# The package

```r
# install.packages("xaringan")
library(xaringan)
```

---

# The output format

```yaml
---
output: xaringan::moon_reader
---
```

---

# Making new slides

.pull-left[
- Slide 1 starts where YAML ends

- 3 dashes in a row `---` on a line by itself is a new slide 
]

.pull-right[
```
---
output: xaringan::moon_reader 
---

Hello I'm slide 1

---

And I'm slide 2

```
]

---

# Using markdown

.pull-left[
Fair game:

+ headers (`#`, etc.)

+ `**bold**`

+ `*italics*`

+ lists (like this one!)

]

.pull-right[
```
---
output: xaringan::moon_reader 
---

# Intro

Hello I'm **slide** 1

---

# About *me*

And I'm slide 2

```
]

---

# Each slide has its own YAML

.pull-left[
Change slide properties with the `class` key:

+ top
+ bottom
+ middle

<hr>

+ left
+ right
+ center

<hr>
+ inverse

]

.pull-right[
```
---
output: xaringan::moon_reader 
---
class: center, middle, inverse

# Intro

Hello I'm **slide** 1

---
class: bottom, right

# About *me*

And I'm slide 2

```
]

---
class: inverse, center, middle

# PRO-TIP:

# Leverage remark.js

<https://arm.rbind.io/slides/xaringan.html#block1>

---
class: inverse, middle, center
background-color: #e6f3fc

# xaringan demo

---
name: yt1
class: inverse, middle
background-color: #e6f3fc

# Your turn #1

Add content to your slide deck. Need some inspiration? Check out:

<https://allisonhorst.github.io/palmerpenguins/articles/intro.html>

Try:

+ Use my [YAML](#penguin-yaml)
+ Jumping to [named slides](https://arm.rbind.io/slides/xaringan.html#43) ([`hello`](#hello), [`goodbye`](#goodbye))
+ Present to each other with [keyboard shortcuts](https://arm.rbind.io/slides/xaringan.html#44)
+ [Incremental reveals](https://arm.rbind.io/slides/xaringan.html#61)
+ [Two columns](https://arm.rbind.io/slides/xaringan.html#66)
+ Highlight [code input](https://arm.rbind.io/slides/xaringan.html#78) or [output](https://arm.rbind.io/slides/xaringan.html#79)

---
name: penguin-yaml

Jump back to [Your turn #1](#yt1)

```yaml
---
author: Alison
date: '`r format(Sys.Date())`'
title: Presenting the penguins
output:
  xaringan::moon_reader:
    css:
    - default
    - rladies
    - rladies-fonts
    nature:
      highlightStyle: github
      highlightLines: true
---
```

---
class: inverse, center, middle

# PRO-TIP:

# Power up R Markdown and knitr

---

# Side-by-side code + plot

Why? Don't repeat yourself!

1. Code first, plot second

- Chunk 1: `` {r plot-last, fig.show = 'hide'} ``
    - Chunk 2: `` {r ref.label = 'plot-last', echo = FALSE} ``
    
--

1. Plot first, code second

- Chunk 1: `` {r plot-first, echo = FALSE} ``
    - Chunk 2: `` {r ref.label = 'plot-first', fig.show = 'hide'} ``

---

## Code first, plot second

.panelset[
.panel[.panel-name[What you type]

````
.pull-left[
```{r plot-last, fig.show = 'hide'}
code goes here
```
]
.pull-right[
```{r ref.label = 'plot-last', echo = FALSE}
```
]
````
]

.panel[.panel-name[What you see]

.pull-left[

```r
tx_names <- babynames %>%
  filter(name == "Dallas" | 
           name == "Austin") %>% 
  filter(sex == "F")
tx_plot <- 
  ggplot(tx_names, 
         aes(x = year, 
             y = prop,  
             group = name, 
             color = name)) + 
  geom_line() 
tx_plot
```
]

.pull-right[
<img src="index_files/figure-html/unnamed-chunk-20-1.png" width="80%" />
]
]
]

---

## Plot first, code second

.panelset[
.panel[.panel-name[What you type]

````
.pull-left[
```{r plot-first, echo = FALSE}
code goes here
```
]
.pull-right[
```{r ref.label = 'plot-first', fig.show = 'hide'}
```
]
````
]

.panel[.panel-name[What you see]

.pull-left[

]

.pull-right[

---

# Your turn counter

.panelset[
.panel[.panel-name[What you type]

````
```{r, include=FALSE}
yt <- 0
```
````

\# Your turn \# `` `r
(yt <- yt + 1)` ``

Try this!

\# Your turn \# `` `r
(yt <- yt + 1)` ``

Check this!

]

.panel[.panel-name[What you see]

# Your turn # 1

Try this!

# Your turn # 2

Check this!
]

.panel[.panel-name[Example]

.pull-left[
<iframe src="https://tmv.netlify.app/slides/01-model#28" width="504" height="400px"></iframe>
]

.pull-right[
<iframe src="https://tmv.netlify.app/slides/01-model#33" width="504" height="400px"></iframe>
]

]

---

# Use your YAML

.panelset[
.panel[.panel-name[What you type]

Hi my name is `` `r
rmarkdown::metadata$author` ``, and welcome to `` `r
rmarkdown::metadata$title` ``.

]

.panel[.panel-name[What you see]

Hi my name is Dr. Alison Presmanes Hill, and welcome to 
Teaching in Production.
]
]

---

# Use `params` to wrangle your links 🚀

.panelset[
.panel[.panel-name[YAML]

```yaml
---
output: xaringan::moon_reader
params:
  wifi_name: TBD
  wifi_pass: penguins-are-the-new-iris
  cloud_link: RStudio Cloud link here
  repo_link: Link to Github here
  site_link: rstd.io/tip
---
```

]

.panel[.panel-name[What you type]

```
## Wifi password
```

`` `r
params$wifi_pass` ``

]

.panel[.panel-name[What you see]

## Wifi password

penguins-are-the-new-iris

]

---
class: middle, center
background-image: url("images/short1.jpg")
background-size: cover

# [Sharing on **short notice**](https://rstd.io/sharing)

???

**R Markdown tools** you can use to get your course materials...

---
class: middle, center
background-image: url("images/short2.jpg")
background-size: cover

# [Sharing on **short notice**](https://rstd.io/sharing)

???

**online**...

---
class: middle, center
background-image: url("images/short3.jpg")
background-size: cover

# [Sharing on **short notice**](https://rstd.io/sharing)

???

on **short notice**.

---
class: center, middle

# Packages that play well with xaringan

📦 [xaringanthemer](https://pkg.garrickadenbuie.com/xaringanthemer/)

📦 [xaringanExtra](https://pkg.garrickadenbuie.com/xaringanExtra/)

📦 [countdown](https://pkg.garrickadenbuie.com/countdown/#1)

📦 [flair](https://kbodwin.github.io/flair/index.html)

📦 [ymlthis](https://ymlthis.r-lib.org/)

📦 [metathis](https://pkg.garrickadenbuie.com/metathis/)

---
background-image: url(images/ship.jpg)
background-size: contain
background-position: left
class: middle

.right-column[
### Deep thoughts on R Markdown slides

+ "If it knits, it ships"

+ Resist the `eval=FALSE` urge, try instead: 
    + `include=FALSE`
    + `error=TRUE`
    + `results='hide'`
    + `fig.show='hide'`

]

---
background-image: url(images/warning.jpg)
background-size: contain
background-position: left
class: middle

.pull-right[
### And now, a warning

<blockquote class="twitter-tweet"><p lang="en" dir="ltr">🧠: You just wasted 4 hours tweaking css and changing colors<br><br>Me: It&#39;s SLIDECRAFT!</p>&mdash; aden_buie(&quot;garrick&quot;) (@grrrck) <a href="https://twitter.com/grrrck/status/1159087961931169795?ref_src=twsrc%5Etfw">August 7, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

]

---
class: inverse, center, middle

# TIP #2:

# Use R Markdown to

# make a shareable site with distill

---

# The package

```r
# install.packages("distill")
library(distill)
```

---

# The output format

```r
---
site: distill::distill_website
---
```

---
background-image: url(images/Whisper.jpg)
background-size: contain

<div class="word-bubble" style="
  position: absolute; 
  text-align: center;
  width: 50%; 
  top: 100px;
  left: 310px;
  font-size: 1.3em;
"> Why do you insist on <br> websites for teaching? </div>

---
background-image: url(images/fortify.jpg)
background-size: cover

---
class: middle, center
template: clouds

<https://rstudio.github.io/distill/>

???

This is a distill website.

The style is not easy to change without CSS, but it looks pretty slick out-of-the-box.

Think of distill as the nerdier sibling of an R Markdown site- it is built for technical and scientific communication.

For example...

---
class: middle, center
template: clouds

<https://rstudio.github.io/distill/>
<img src="images/distill-authors.png" style="margin-top: -28px;">

???

There's a way to list multiple authors and their affiliations...

---
class: middle, center
template: clouds

<https://rstudio.github.io/distill/>
<img src="images/distill-aside.png" style="margin-top: -28px;">

???

You can include footers and asides...

---
class: middle, center
template: clouds

<https://rstudio.github.io/distill/>
<img src="images/distill-reuse.png" style="margin-top: -28px;">

???

And you can display reuse licenses for your educational content.

---
background-image: url(images/clouds.jpg)
background-size: cover

![](images/min-distill.png)
--

--
<img src="images/min-distill1.png" style="
  position: absolute; 
  width: 100%; 
  top: 0px;
  left: 0px;
">

???

Quick things to notice -- let's look inside.

---
class: middle
background-image: url(images/hello-index.jpg)
background-position: right
background-size: 60%

.left-column[

```r
.
├── DataViz.Rproj
├── _site.yml 
*└── index.Rmd
```
]

???

The index page in a distill site will work just the same as in an R Markdown site.

It will be the site's home page.

Any existing R Markdown document you have will do.

But there is one addition we make inside of this file.

---
background-image: url(images/clouds.jpg)
background-size: cover
## Inside the `index.Rmd`

.left-column[

```r
.
├── DataViz.Rproj
├── _site.yml 
*└── index.Rmd
```
]

.right-column[

```r
---
title: Intro to Data Visualization
description: Spring 2020 Course Website
author:
  - name: Alison Hill
    affiliation: RStudio
  - name: Desirée De Leon
    affiliation: Teacup Giraffes, Inc.
*site: distill::distill_website
---

# Welcome to the course!
```
]

???

`site: distill::distill_website` should be added to the YAML.

Including a title and short description is nice too.

[*note*: `site: distill::website` is only necessary if you wanna make the blog later]

---
background-image: url(images/rawpixel/bunch-balloons-rmd2.jpg)
background-position: right
background-size: contain

## .hidden[Inside the `_site.yml`]

.left-column[

```r
.
├── DataViz.Rproj
*├── _site.yml
├── index.Rmd
├── lab01.Rmd
├── lab02.Rmd 
└── project.Rmd 
```

]

???

Next we move on to the `_site.yml` page. 
It's still for site configuration. This should sound a bit familiar...

---
background-image: url(images/Clouds2.jpg)
background-size: cover
## Inside the `_site.yml`

.left-column[

```r
.
├── DataViz.Rproj
*├── _site.yml
├── index.Rmd
├── lab01.Rmd
├── lab02.Rmd 
└── project.Rmd 
```

]

.right-column[

```r
title: DataViz 
navbar:
  right:
    - text: Labs
      menu:
      - text: Lab 1
        href: lab01.html
      - text: Lab 2
        href: lab02.html
    - text: Project
      href: project.html
*output: distill::distill_article
```
]

???

The YAML navbar keys here are all similar to what we used in an R Markdown site, with one important change:

The output **must** specify that this is a Distill article.

---
## Build your site

.left-column[

```r
.
├── DataViz.Rproj
*├── _site/
├── _site.yml 
└── index.Rmd 
```
]

.right-column[
<img src="images/build-distill.png" style="margin-top: -28px;">
]

???

So now let's build a minimal Distill site of our own.

Just like we did with the R Markdown site, we use the build tab to knit all our files at once.

This creates a `_site` folder for our HTML files.

---
class: inverse, middle
background-color: #e6f3fc

# <center>distill demo</center>

```r
distill::create_website(dir = ".", 
                        title = "penguin-eda",
                        gh_pages = TRUE)
```

---
name: yt2
class: inverse, middle
background-color: #e6f3fc

# Your turn # 2

Let's add a xaringan slide deck to our distill site (see `_site.yml` below), and link to it from the `index.Rmd`.

```yaml
---
output_dir: docs
include: slides/
---
```

Do we have time? Are we feeling brave? Permission to deploy??

---
background-image: url(images/ship.jpg)
background-size: contain
background-position: left
class: middle

.right-column[
### Deep thoughts on Distill sites

+ [KISS principle](https://en.wikipedia.org/wiki/KISS_principle)

+ Nice features out-of-the-box

+ Can have [blog-like collections](https://rstudio-education.github.io/sharing-short-notice/#103)

+ 🙍 Less flexible than a Hugo site (example [here](https://share-blogdown.netlify.app/))

+ 🎉 Less dependencies than a Hugo site

]

---
background-image: url(images/warning.jpg)
background-size: contain
background-position: left
class: middle

.pull-right[
### And now, a warning

+ Care & feeding

+ ~~Slidecraft~~ Sitecraft is hard

]

---
class: middle, center, inverse

# What questions do you have?

---
name: goodbye
class: right, bottom
background-color: #e6f3fc
background-image: url(images/rmarkdown_hedgehog.png)
background-size: 25%
background-position: bottom left

# Thank you!

All art by [Allison Horst](https://www.allisonhorst.com/) & [Desirée De Leon](https://desiree.rbind.io/)

### Find me at...

[<i class="fab  fa-twitter "></i> @apreshill](http://twitter.com/apreshill)  
[<i class="fab  fa-github "></i> @apreshill](http://github.com/apreshill)  
[<i class="fas  fa-link "></i> alison.rbind.io](https://alison.rbind.io)  
[<i class="fas  fa-paper-plane "></i> alison@rstudio.com](mailto:alison@rstudio.com)