Extraordinary slides using xaringanExtra

background-image: url("https://images.unsplash.com/photo-1560347964-838d2f63cdc0?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1771&q=80")
background-size: cover
background-position:

# .black[**Extraordinary slides<br>using xaringanExtra**]

## .green.b[Ajay Koli | 30 April, 2022 | R-Ladies Urmia]

---

<div>
<style type="text/css">.xaringan-extra-logo {
width: 70px;
height: 70px;
z-index: 0;
background-image: url(https://pbs.twimg.com/profile_images/1399612666847674369/O6F5fplU_400x400.jpg);
background-size: contain;
background-repeat: no-repeat;
position: absolute;
top:1em;right:1em;
}
</style>
<script>(function () {
  let tries = 0
  function addLogo () {
    if (typeof slideshow === 'undefined') {
      tries += 1
      if (tries < 10) {
        setTimeout(addLogo, 100)
      }
    } else {
      document.querySelectorAll('.remark-slide-content:not(.title-slide):not(.inverse):not(.hide_logo)')
        .forEach(function (slide) {
          const logo = document.createElement('a')
          logo.classList = 'xaringan-extra-logo'
          logo.href = 'https://twitter.com/RLadiesUrmia?ref_src=twsrc%5Egoogle%7Ctwcamp%5Eserp%7Ctwgr%5Eauthor'
          slide.appendChild(logo)
        })
    }
  }
  document.addEventListener('DOMContentLoaded', addLogo)
})()</script>
</div>

.pull-left[
<img src="images/ajaykoli.png" width="70%" style="display: block; margin: auto auto auto 0;" />

Dr Ajay Kumar Koli<br>Head of School of Data Science<br><svg viewBox="0 0 512 512" style="height:1em;position:relative;display:inline-block;top:.1em;" xmlns="http://www.w3.org/2000/svg">  <path d="M320 336c0 8.84-7.16 16-16 16h-96c-8.84 0-16-7.16-16-16v-48H0v144c0 25.6 22.4 48 48 48h416c25.6 0 48-22.4 48-48V288H320v48zm144-208h-80V80c0-25.6-22.4-48-48-48H176c-25.6 0-48 22.4-48 48v48H48c-25.6 0-48 22.4-48 48v80h512v-80c0-25.6-22.4-48-48-48zm-144 0H192V96h128v32z"></path></svg> [Nalanda Academy](https://nalanda-academy.org/) - Wardha, India
<br><svg viewBox="0 0 496 512" style="height:1em;position:relative;display:inline-block;top:.1em;" xmlns="http://www.w3.org/2000/svg">  <path d="M336.5 160C322 70.7 287.8 8 248 8s-74 62.7-88.5 152h177zM152 256c0 22.2 1.2 43.5 3.3 64h185.3c2.1-20.5 3.3-41.8 3.3-64s-1.2-43.5-3.3-64H155.3c-2.1 20.5-3.3 41.8-3.3 64zm324.7-96c-28.6-67.9-86.5-120.4-158-141.6 24.4 33.8 41.2 84.7 50 141.6h108zM177.2 18.4C105.8 39.6 47.8 92.1 19.3 160h108c8.7-56.9 25.5-107.8 49.9-141.6zM487.4 192H372.7c2.1 21 3.3 42.5 3.3 64s-1.2 43-3.3 64h114.6c5.5-20.5 8.6-41.8 8.6-64s-3.1-43.5-8.5-64zM120 256c0-21.5 1.2-43 3.3-64H8.6C3.2 212.5 0 233.8 0 256s3.2 43.5 8.6 64h114.6c-2-21-3.2-42.5-3.2-64zm39.5 96c14.5 89.3 48.7 152 88.5 152s74-62.7 88.5-152h-177zm159.3 141.6c71.4-21.2 129.4-73.7 158-141.6h-108c-8.8 56.9-25.6 107.8-50 141.6zM19.3 352c28.6 67.9 86.5 120.4 158 141.6-24.4-33.8-41.2-84.7-50-141.6h-108z"></path></svg> [https://koliajay.netlify.app/](https://koliajay.netlify.app/)<br><svg viewBox="0 0 512 512" style="height:1em;position:relative;display:inline-block;top:.1em;" xmlns="http://www.w3.org/2000/svg">  <path d="M464 64H48C21.49 64 0 85.49 0 112v288c0 26.51 21.49 48 48 48h416c26.51 0 48-21.49 48-48V112c0-26.51-21.49-48-48-48zm0 48v40.805c-22.422 18.259-58.168 46.651-134.587 106.49-16.841 13.247-50.201 45.072-73.413 44.701-23.208.375-56.579-31.459-73.413-44.701C106.18 199.465 70.425 171.067 48 152.805V112h416zM48 400V214.398c22.914 18.251 55.409 43.862 104.938 82.646 21.857 17.205 60.134 55.186 103.062 54.955 42.717.231 80.509-37.199 103.053-54.947 49.528-38.783 82.032-64.401 104.947-82.653V400H48z"></path></svg> [koliajaykumar@gmail.com](koliajaykumar@gmail.com)<br><svg viewBox="0 0 512 512" style="height:1em;position:relative;display:inline-block;top:.1em;" xmlns="http://www.w3.org/2000/svg">  <path d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"></path></svg> [@ajay_kolii](https://twitter.com/ajay_kolii)
]

]

---

# 🎯 .green.underline[GOAL] 🎯

---

background-image: url("images/xaringan.png")
background-size: 35%
background-position: 50% 65%

# xaringan 🤺

- "The xaringan package is an R Markdown extension based on the JavaScript library remark.js to generate HTML5 presentations of a different style."

---

# Basics of xaringan

- to add a new slide: `---`

- for increment slide: `--`

- two columns: `.pull-left[]` & `.pull-right[]`

- `class: center, inverse, hide-count, hide-logo`

- text size:
  - `# heading`
  - `## sub-heading`
  - `### sub-sub-heading`

---

background-image: url("https://avatars.githubusercontent.com/u/5420529?v=4")
background-size: 30%
background-position: 101% 0%

# 🎡 xaringanExtra (xE)

- by [Garrick Aden-Buie](https://www.garrickadenbuie.com/)

- It "is a playground of enhancements and extensions <br>for [xaringan](https://slides.yihui.org/xaringan/#1) slides."

- Information for the present slides is adapted from <br>Garrick's webpage [xaringanExtra]((https://pkg.garrickadenbuie.com/xaringanExtra/#/).

---

# Download xE from GitHub

```r
install.packages("devtools")
devtools::install_github("gadenbuie/xaringanExtra")
```

## Required packages are:

```r
library(xaringan)
library(xaringanExtra)
library(palmerpenguins) # to get penguins data
library(kableExtra) # to prepare tables
library(metathis) # to prepare social card
```

---

# 🤩 xE can help you to:

.pull-left[
- Add an overview of your presentation with tile view
- Use the Tachyons CSS utility toolkit
- Make your slides editable
- Share your slides in style with share again
- Broadcast your slides in real time to viewers with broadcast
- Scribble on your slides during your presentation with scribble
- Announce slide changes with a subtle tone
- Add extra CSS styles
]

.pull-right[
- Animate slide transitions with animate.css
- Add tabbed panels to slides with panelset
- Add a logo to all of your slides with logo
- Add a search box to search through your slides with search
- Add a live video feed of your webcam
- Add one-click code copying with clipboard
- Always play gifs from the start with freezeframe
- Fit your slides to fill the browser window
]

---

# Slide overview

```r
xaringanExtra::use_tile_view()
```

---

# Tachyons

- a collection of `CSS` utility classes (check this website http://tachyons.io/ for a list of functions)

- color of the text `.nameofthecolor[your text]`

- `.silver[I am red!]` = .silver[I am silver.]
  - `.gold[I am red!]` = .gold[Your are gold.]
  
--

- italicize text `.i[write text here]`

- `.i[Allow me to tilt a bit]` = .i[Allow me to tilt a bit]  
  
--

- bold text `.b[Bold & Beautiful.]` = .b[Bold & Beautiful.]

- underline text `.underline[This is important.]` = .underline[This is important]

- strike text `.strike[This was by mistake.]` = .strike[This was by mistake.]

---

# Combine tachyons

- .b.underline.blue[This is just fantastic.] = `.b.underline.blue[This is just fantastic.]`

- `.b.blue[this is .red[awesome] .strike[but fake]]` = .b.blue[this is .red[awesome] .strike[but fake]]

- Text size
  - `.f1[hello]` = .f1[hello] 
  - `.f2[hello]` = .f2[hello] 
  - `.f3[hello]` = .f3[hello]
  - `.f4[hello]` = .f4[hello]
  - `.f5[hello]` = .f5[hello]

- Capital Text `.ttc[nice thing to say]` = .ttc[nice thing to say]

- UPPER-CASE TEXT `.ttu[we all are tall]` = .ttu[we all are tall]

---

# Combine tachyons

.bg-washed-yellow.b--dark-blue.ba.bw2.br3.shadow-5.ph4.mt5[
The only way to write good code is to write tons of bad code first. 
Feeling shame about bad code stops you from getting to good code

`.bg-washed-yellow.b--dark-blue.ba.bw2.br3.shadow-5.ph4.mt5[
The only way to write good code is to write tons of bad code first. Feeling shame about bad code stops you from getting to good code
.tr[
— Hadley Wickham
]]`

---

# Clipboard

```r
xaringanExtra::use_clipboard(
  #button_text = "Copy code from here",
  #success_text = "Done",
)
```

---

# Progress bar

```r
xaringanExtra::use_progress_bar(color = "#800080", 
                                location = "top",
                                height = "0.25em")
```

---

# Panelset

```r
xaringanExtra::use_panelset()
```

- you can write panel name as you like

- it is very helpful while showing simultaneously code and its output

- use `\(\leftarrow\)` left and `\(\rightarrow\)` right arrow keys to move from one panel to another
]

.panel[.panel-name[Image]
<img src="https://i.giphy.com/media/OFIsBxe3v7mKI/giphy.webp" width="45%" style="display: block; margin: auto;" />

]

.panel[.panel-name[Panel 3]
<table class="table" style="margin-left: auto; margin-right: auto;">
 <thead>
  <tr>
   <th style="text-align:left;"> species </th>
   <th style="text-align:left;"> island </th>
   <th style="text-align:right;"> bill_length_mm </th>
   <th style="text-align:right;"> bill_depth_mm </th>
   <th style="text-align:right;"> flipper_length_mm </th>
   <th style="text-align:right;"> body_mass_g </th>
   <th style="text-align:left;"> sex </th>
   <th style="text-align:right;"> year </th>
  </tr>
 </thead>
<tbody>
  <tr>
   <td style="text-align:left;"> Adelie </td>
   <td style="text-align:left;"> Torgersen </td>
   <td style="text-align:right;"> 39.1 </td>
   <td style="text-align:right;"> 18.7 </td>
   <td style="text-align:right;"> 181 </td>
   <td style="text-align:right;"> 3750 </td>
   <td style="text-align:left;"> male </td>
   <td style="text-align:right;"> 2007 </td>
  </tr>
  <tr>
   <td style="text-align:left;"> Adelie </td>
   <td style="text-align:left;"> Torgersen </td>
   <td style="text-align:right;"> 39.5 </td>
   <td style="text-align:right;"> 17.4 </td>
   <td style="text-align:right;"> 186 </td>
   <td style="text-align:right;"> 3800 </td>
   <td style="text-align:left;"> female </td>
   <td style="text-align:right;"> 2007 </td>
  </tr>
  <tr>
   <td style="text-align:left;"> Adelie </td>
   <td style="text-align:left;"> Torgersen </td>
   <td style="text-align:right;"> 40.3 </td>
   <td style="text-align:right;"> 18.0 </td>
   <td style="text-align:right;"> 195 </td>
   <td style="text-align:right;"> 3250 </td>
   <td style="text-align:left;"> female </td>
   <td style="text-align:right;"> 2007 </td>
  </tr>
  <tr>
   <td style="text-align:left;"> Adelie </td>
   <td style="text-align:left;"> Torgersen </td>
   <td style="text-align:right;"> NA </td>
   <td style="text-align:right;"> NA </td>
   <td style="text-align:right;"> NA </td>
   <td style="text-align:right;"> NA </td>
   <td style="text-align:left;"> NA </td>
   <td style="text-align:right;"> 2007 </td>
  </tr>
  <tr>
   <td style="text-align:left;"> Adelie </td>
   <td style="text-align:left;"> Torgersen </td>
   <td style="text-align:right;"> 36.7 </td>
   <td style="text-align:right;"> 19.3 </td>
   <td style="text-align:right;"> 193 </td>
   <td style="text-align:right;"> 3450 </td>
   <td style="text-align:left;"> female </td>
   <td style="text-align:right;"> 2007 </td>
  </tr>
  <tr>
   <td style="text-align:left;"> Adelie </td>
   <td style="text-align:left;"> Torgersen </td>
   <td style="text-align:right;"> 39.3 </td>
   <td style="text-align:right;"> 20.6 </td>
   <td style="text-align:right;"> 190 </td>
   <td style="text-align:right;"> 3650 </td>
   <td style="text-align:left;"> male </td>
   <td style="text-align:right;"> 2007 </td>
  </tr>
</tbody>
</table>

]

```r
penguins %>% 
  ggplot(aes(bill_length_mm, bill_depth_mm)) +
  geom_point(aes(color = species)) +
  scale_color_brewer(palette = "Dark2") +
  theme_bw() +
  labs(
    title = "Relationship between bill length and depth of the palmer penguins",
    x = "Bill length (mm)",
    y = "Bill depth (mm)"
      ) +
  theme(text = element_text(size = 12))
```
]

.panel[.panel-name[Plot]
<img src="index_files/figure-html/unnamed-chunk-14-1.png" width="100%" style="display: block; margin: auto;" />
]
]

---

# Logo

- add logo to each slide

```r
xaringanExtra::use_logo(
image_url = "https://pbs.twimg.com/profile_images/1399612666847674369/O6F5fplU_400x400.jpg",
link_url = "https://twitter.com/RLadiesUrmia?ref_src=twsrc%5Egoogle%7Ctwcamp%5Eserp%7Ctwgr%5Eauthor",
width = "70px",
height = "70px"))
```

---

# Highlight code

- `#<<` to highlight the code

```r
xaringanExtra::use_extra_styles(
* hover_code_line = TRUE,
* mute_unhighlighted_code = TRUE
)
```

---

# Share again

- To share your xaringan slides

```r
xaringanExtra::use_share_again()
```

<div class="shareagain" style="min-width:300px;margin:1em auto;">
<iframe src="https://xeurmia.netlify.app/#1" width="900" height="300" style="border:2px solid currentColor;" loading="lazy" allowfullscreen></iframe>
<script>fitvids('.shareagain', {players: 'iframe'});</script>
</div>

---
## Social card
````

```r
meta() %>%
  meta_general(
    description = "Ajay Koli - Nalanda Academy",
    generator = "xaringan and remark.js"
  ) %>% 
  meta_name("github-repo" = "koliajaykr/xarExtra-session") %>% 
  meta_social(
    title = "extraordinary slides using xaringanExtra",
    url = "https://xeurmia.netlify.app/",
    image = "https://xeurmia.netlify.app/images/social-card.png",
    og_type = "talk",
    og_author = "Ajay Koli",
    twitter_card_type = "summary_large_image",
    twitter_creator = "@ajay_kolii"
  ) %>%
  include_meta()
```
````

---

# Embed

```r
xaringanExtra::embed_xaringan(url="https://xeurmia.netlify.app/#1",
                              ratio = 3:1)
```

---

# Yalda and Nasrin
]

.pull-right[
<img src="https://pbs.twimg.com/profile_images/1399612666847674369/O6F5fplU_400x400.jpg" style="display: block; margin: auto;" />
]