finished updates ahead of day 2

course-materials/slides/part6.1-debugging-slides.qmd

@@ -405,22 +405,18 @@ ui <- fluidPage(
 server <- function(input, output){
   
   # render penguin text ----
-  output$penguins_text <- renderText({
+  output$penguins_text_output <- renderText({
     
     if(input$img_input == "All penguins"){
-      message("Printing all penguins text")
       "Meet all of our lovely penguins species!"
     }
     else if(input$img_input == "Sassy chinstrap"){
-      message("Printing chinstrap text")
       "Chinstraps get their name from the thin black line that runs under their chins"
     }
     else if(input$img_input == "Staring gentoo"){
-      message("Printing gentoo text")
       "Gentoos stand out because of their bright orange bills and feet"
     }
     else if(input$img_input == "Adorable adelie"){
-      message("Printing adelie text")
       "Adelie penguins are my personal favorite <3"
     }
   }) # END renderText
@@ -430,19 +426,15 @@ server <- function(input, output){
   output$penguin_img_output <- renderImage({
     
     if(input$img_input == "All penguins"){
-      message("Displaying all penguins image")
       list(src = "www/all_penguins.jpeg", height = 240, width = 300)
     }
     else if(input$img_input == "Sassy chinstrap"){
-      message("Displaying chinstrap image")
       list(src = "www/chinstrap.jpeg", height = 240, width = 300)
     }
     else if(input$img_input == "Staring gentoo"){
-      message("Displaying all gentoo image")
       list(src = "www/gentoo.jpeg", height = 240, width = 300)
     }
     else if(input$img_input == "Adorable adelie"){
-      message("Displaying all adelie image")
       list(src = "www/adelie.gif", height = 240, width = 300)
     }
     
@@ -521,7 +513,7 @@ See next slide for code
 ::: {.panel-tabset}
 
 ## `app.R`
-```{r filename="~/reactlog-broken/app.R"}
+```{r filename="~/broken-app/app.R"}
 #| eval: false
 #| echo: true
 # load packages ----
@@ -663,7 +655,7 @@ knitr::include_graphics("images/part6/commented-out-code.gif")
 
 You can insert diagnostic messages within your reactives using `message()` -- here, we'll add a short message where each text and image output should be rendered. 
 
-```{r filename="~/reactlog-broken/app.R"}
+```{r filename="~/broken-app/app.R"}
 #| eval: false
 #| echo: true
 #| code-line-numbers: "53|57|61|65|75|79|83|87"
@@ -857,7 +849,7 @@ knitr::include_graphics("images/part6/reactlog.png")
 
 <hr>
 
-`reactlog` should already be installed as a dependency of `shiny` (but be sure to import the package at the top of your script using `library(reactlog)`). When enabled, it provides an interactive browser-based tool to visualize reactive dependencies and executions in your app.
+`reactlog` should already be installed as a dependency of `shiny` (but you'll need to load it using `library(reactlog)` in your console). When enabled, it provides an interactive browser-based tool to visualize reactive dependencies and executions in your app.
 
 <br>
 
@@ -969,7 +961,7 @@ knitr::include_graphics("images/part6/reactlog-broken.gif")
 
 <p class="body-text-s">Our `outputId` in the **UI** is set to `penguin_text_output`:</p>
 
-```{r filename="~/reactlog-broken/app.R"}
+```{r filename="~/broken-app/app.R"}
 #| eval: false
 #| echo: true
 #| code-line-numbers: "6"
@@ -985,7 +977,7 @@ ui <- fluidPage(
 
 <p class="body-text-s">But we call `penguins_text_output` (note the plural) when rendering our output in the **server**:</p>
 
-```{r filename="~/reactlog-broken/app.R"}
+```{r filename="~/broken-app/app.R"}
 #| eval: false
 #| echo: true
 #| code-line-numbers: "6"

course-materials/slides/part6.2-testing-slides.qmd

@@ -132,7 +132,7 @@ knitr::include_graphics("images/part6/shinytest2-hex.png")
 
 ##  {#shinytest2-resources data-menu-title="{shinytest2} resources"}
 
-[`shinytest2` resources & demos]{.slide-title}
+[`{shinytest2}` resources & demos]{.slide-title}
 
 <hr>
 
@@ -145,7 +145,7 @@ The following demo comes straight from the [`{shinytest2}` vignette](https://rst
 <br>
 
 ::: {.center-text .body-text-l .teal-text}
-Check out the **[resources page](https://ucsb-meds.github.io/EDS-430-Intro-to-Shiny/resources.html)** on the course website for additional talks / tutorials / resources about testing shiny apps.
+Check out the **[resources page](https://ucsb-meds.github.io/EDS-430-Intro-to-Shiny/resources.html#testing)** on the course website for additional talks / tutorials / resources about testing shiny apps.
 :::
 
 ---
@@ -198,7 +198,7 @@ shinyApp(ui, server)
 
 . . . 
 
-[[**(1)**]{.teal-text} Run `record_test(<app-directory>)` to launch the app recorder in a browser window]{.body-text-s}
+[[**(1)**]{.teal-text} Run `shinytest2::record_test(<app-directory>)` to launch the app recorder in a browser window]{.body-text-s}
 
 . . . 
 

course-materials/slides/part7.1-functions-slides.qmd

@@ -163,9 +163,9 @@ ui <- fluidPage(
              # species (scatterplot) pickerInput ----
              pickerInput(inputId = "penguinSpp_scatterplot_input", label = "Select a species:",
                          choices = c("Adelie", "Chinstrap", "Gentoo"),
-                         options = pickerOptions(actionsBox = TRUE),
                          selected = c("Adelie", "Chinstrap", "Gentoo"),
-                         multiple = T),
+                         options = pickerOptions(actionsBox = TRUE),
+                         multiple = TRUE),
              
              # scatterplot output ----
              plotOutput(outputId = "penguin_scatterplot_output")
@@ -179,8 +179,8 @@ ui <- fluidPage(
              # species (histogram) pickerInput ----
              pickerInput(inputId = "penguinSpp_histogram_input", label = "Select a species:",
                          choices = c("Adelie", "Chinstrap", "Gentoo"),
-                         options = pickerOptions(actionsBox = TRUE),
                          selected = c("Adelie", "Chinstrap", "Gentoo"),
+                         options = pickerOptions(actionsBox = TRUE),
                          multiple = TRUE),
              
              # scatterplot output ----
@@ -280,9 +280,9 @@ ui <- fluidPage(
              # species (scatterplot) pickerInput ----
              pickerInput(inputId = "penguinSpp_scatterplot_input", label = "Select a species:",
                          choices = c("Adelie", "Chinstrap", "Gentoo"),
-                         options = pickerOptions(actionsBox = TRUE),
                          selected = c("Adelie", "Chinstrap", "Gentoo"),
-                         multiple = T),
+                         options = pickerOptions(actionsBox = TRUE),
+                         multiple = TRUE),
              
              # scatterplot output ----
              plotOutput(outputId = "penguin_scatterplot_output")
@@ -296,8 +296,8 @@ ui <- fluidPage(
              # species (histogram) pickerInput ----
              pickerInput(inputId = "penguinSpp_histogram_input", label = "Select a species:",
                          choices = c("Adelie", "Chinstrap", "Gentoo"),
-                         options = pickerOptions(actionsBox = TRUE),
                          selected = c("Adelie", "Chinstrap", "Gentoo"),
+                         options = pickerOptions(actionsBox = TRUE),
                          multiple = TRUE),
              
              # scatterplot output ----
@@ -327,15 +327,15 @@ This app includes two `pickerInputs`, both of which allow users to select which
 # Scatterplot pickerInput for selecting penguin species:
 pickerInput(inputId = "penguinSpp_scatterplot_input", label = "Select a species:",
             choices = c("Adelie", "Chinstrap", "Gentoo"),
-            options = pickerOptions(actionsBox = TRUE),
             selected = c("Adelie", "Chinstrap", "Gentoo"),
+            options = pickerOptions(actionsBox = TRUE),
             multiple = TRUE)
 
 # Histogram pickerInput for selecting penguin species:
 pickerInput(inputId = "penguinSpp_histogram_input", label = "Select a species:",
             choices = c("Adelie", "Chinstrap", "Gentoo"),
-            options = pickerOptions(actionsBox = TRUE),
             selected = c("Adelie", "Chinstrap", "Gentoo"),
+            options = pickerOptions(actionsBox = TRUE),
             multiple = TRUE)
 ```
 
@@ -355,23 +355,23 @@ Let's write a function for our **penguin species pickerInput** that we can use i
 
 <hr> 
 
-<p class="body-text-s">First, create an `R/` folder inside your `functions-app/` directory, then add a new script to this folder. I'm calling mine `penguinSpp_pickerInput.R`.</p>
+<p class="body-text-s">First, create an `R/` folder inside your `functions-app/` directory, then add a new script to this folder. I'm calling mine `penguinSpp-pickerInput.R`.</p>
 
 <p class="body-text-s">Since the only difference between our original two `pickerInput`s are their `inputId`s, we can write a function that takes `inputId` as an argument (**Recall** that `inputId`s must be unique within an app, so it makes sense that both of our `pickerInput`s have different `inputId`s).</p>
 
 <p class="body-text-s">Once written, `source()` your function script into `global.R` (if necessary) to make your function available for use in your app.</p>
 
 ::: {.panel-tabset}
 
-## `penguinSpp_pickerInput.R`
-```{r filename="~/functions-app/R/penguinSpp_pickerInput.R"}
+## `penguinSpp-pickerInput.R`
+```{r filename="~/functions-app/R/penguinSpp-pickerInput.R"}
 #| eval: false  
 #| echo: true
 penguinSpp_pickerInput <- function(inputId) {
   pickerInput(inputId = inputId, label = "Select a species:",
-              choices = c("Adelie", "Gentoo", "Chinstrap"),
+              choices = c("Adelie", "Chinstrap", "Gentoo"),
+              selected = c("Adelie", "Chinstrap", "Gentoo"),
               options = pickerOptions(actionsBox = TRUE),
-              selected = c("Adelie", "Gentoo", "Chinstrap"),
               multiple = TRUE)
 }
 ```
@@ -387,8 +387,8 @@ library(shinyWidgets)
 library(palmerpenguins)
 library(tidyverse)
 
-# IMPORT FUNCTIONS ----
-source("R/penguinSpp_pickerInput.R") # will source automatically with Shiny v1.5.0
+# IMPORT FUNCTIONS (ONLY IF NECESSARY) ----
+source("R/penguinSpp-pickerInput.R") # will source automatically with Shiny v1.5.0
 ```
 
 :::
@@ -456,7 +456,7 @@ So...what's the big deal with this??
 
 **By turning our `pickerInput` code into a function, we:**
 
-[[**(1)**]{.teal-text} **reduced *ten* lines of UI code into *two*** (not only does this make `ui.R` a bit more manageable to navigate, it also means we can more easily isolate `R/penguinSpp_pickerInput.R` when troubleshooting)]{.body-text-s}
+[[**(1)**]{.teal-text} **reduced *ten* lines of UI code into *two*** (not only does this make `ui.R` a bit more manageable to navigate, it also means we can more easily isolate `R/penguinSpp-pickerInput.R` when troubleshooting)]{.body-text-s}
 
 [[**(2)**]{.teal-text} **made our UI code a bit easier to read** (`penguinSpp_pickerInput()` tells a reader / collaborator / future you *exactly* what that line of code is meant to do, which is to create a `pickerInput` that allows users to select penguin species. Even without code comments or additional context, one may deduce what that line of code does)]{.body-text-s}
 
@@ -791,16 +791,16 @@ server <- function(input, output) {
 
 <hr>
 
-[`penguinSpp_pickerInput.R`]{.body-text-m}
+[`penguinSpp-pickerInput.R`]{.body-text-m}
 
-```{r filename="~/functions-app/R/penguinSpp_pickerInput.R"}
+```{r filename="~/functions-app/R/penguinSpp-pickerInput.R"}
 #| eval: false
 #| echo: true
 penguinSpp_pickerInput <- function(inputId) {
   pickerInput(inputId = inputId, label = "Select a species:",
-              choices = c("Adelie", "Gentoo", "Chinstrap"),
+              choices = c("Adelie", "Chinstrap", "Gentoo"),
+              selected = c("Adelie", "Chinstrap", "Gentoo"),
               options = pickerOptions(actionsBox = TRUE),
-              selected = c("Adelie", "Gentoo", "Chinstrap"),
               multiple = TRUE)
 }
 ```
@@ -815,9 +815,9 @@ penguinSpp_pickerInput <- function(inputId) {
 
 ::: {.panel-tabset}
 
-## `build_penguin_scatterplot.R`
+## `build-penguin-scatterplot.R`
 
-```{r filename="~/functions-app/R/build_penguin_scatterplot.R"}
+```{r filename="~/functions-app/R/build-penguin-scatterplot.R"}
 #| eval: false
 #| echo: true
 build_penguin_scatterplot <- function(input) {
@@ -849,9 +849,9 @@ build_penguin_scatterplot <- function(input) {
 }
 ```
 
-## `build_penguin_histogram.R`
+## `build-penguin-histogram.R`
 
-```{r filename="~/functions-app/R/build_penguin_histogram.R"}
+```{r filename="~/functions-app/R/build-penguin-histogram.R"}
 #| eval: false
 #| echo: true
 build_penguin_histogram <- function(input) {

course-materials/slides/part8-wrap-up-slides.qmd

@@ -135,7 +135,7 @@ knitr::include_graphics("images/part8/leaflet-mywebsite.png")
 ```
 
 ::: {.center-text .body-text-s .gray-text}
-An example leaflet map embedded in an Quarto website. Image Source: [my website](https://samanthacsik.github.io/about.html#fa-hiking-titlea-person-with-a-backpack-and-trekking-pole-the-hobby)
+An example leaflet map embedded in a Quarto website. Image Source: [my website](https://samanthacsik.github.io/about.html#fa-hiking-titlea-person-with-a-backpack-and-trekking-pole-the-hobby)
 :::
 
 :::
@@ -240,7 +240,7 @@ knitr::include_graphics("images/part8/quarto-shiny-kmeans.png")
 
 <hr>
 
-[**Shiylive is a serverless version of Shiny**, which was recently annoucned at [posit::conf(2023)](https://posit.co/conference/) by Joe Cheng (rewatch his [talk ](https://www.youtube.com/watch?v=j1M6YyU2ZX8&list=PL9HYL-VRX0oRFZslRGHwHuwea7SvAATHp&index=88)!). It supports Shiny for both R *and* Python (that's right, you can build shiny apps using Python too! See [Shiny for Python](https://shiny.posit.co/py/). for more info). You have a few options:]{.body-text-s}
+[**Shinylive is a serverless version of Shiny**, which was recently annoucned at [posit::conf(2023)](https://posit.co/conference/) by Joe Cheng (rewatch his [talk ](https://www.youtube.com/watch?v=j1M6YyU2ZX8&list=PL9HYL-VRX0oRFZslRGHwHuwea7SvAATHp&index=88)!). It supports Shiny for both R *and* Python (that's right, you can build shiny apps using Python too! See [Shiny for Python](https://shiny.posit.co/py/) for more info). You have a few options:]{.body-text-s}
 
 :::: {.columns}
 
@@ -249,7 +249,7 @@ knitr::include_graphics("images/part8/quarto-shiny-kmeans.png")
 <br>
 <br>
 
-- [**Convert shiny apps to static websites** using this [[`{shinylive}`] package for R](https://github.com/posit-dev/r-shinylive) or [[`{shinylive}`] package for Python](https://github.com/posit-dev/py-shinylive)]{.body-text-s}
+- [**Convert shiny apps to static websites** using this [`{shinylive}` package for R](https://github.com/posit-dev/r-shinylive) or [`{shinylive}` package for Python](https://github.com/posit-dev/py-shinylive)]{.body-text-s}
 - [**Write, run, and share Shiny apps right in the browser** at <https://shinylive.io/r/examples/> (R) or <https://shinylive.io/py/examples/> (Python)]{.body-text-s}
 - [**Include Shiny apps in Quarto docs** using the [Shinylive Quarto extension](https://github.com/quarto-ext/shinylive)]{.body-text-s}
 :::
@@ -367,9 +367,9 @@ You can optionally use a `global.R` file to store objects that are used across y
 
   - save objects you want to display to `output$<id>`
 
-  - Build reactive objects using a render*() function
+  - Build reactive objects using a `render*()` function
 
-  - Access input values with input$<id>
+  - Access input values with `input$<id>`
 
 <br>
 

docs/course-materials/slides/part1.1-shiny-overview-slides.html

@@ -602,7 +602,7 @@ <h2></h2>
 </div>
 <div class="cell">
 <div class="cell-output-display">
-<div class="countdown" id="timer_764230cc" data-update-every="1" tabindex="0" style="right:0;bottom:0;font-size:2em;">
+<div class="countdown" id="timer_726790e3" data-update-every="1" tabindex="0" style="right:0;bottom:0;font-size:2em;">
 <div class="countdown-controls"><button class="countdown-bump-down">−</button><button class="countdown-bump-up">+</button></div>
 <code class="countdown-time"><span class="countdown-digits minutes">05</span><span class="countdown-digits colon">:</span><span class="countdown-digits seconds">00</span></code>
 </div>

docs/course-materials/slides/part1.2-setup-app-slides.html

@@ -586,7 +586,7 @@ <h2></h2>
 </div>
 <div class="cell">
 <div class="cell-output-display">
-<div class="countdown" id="timer_2c320da5" data-update-every="1" tabindex="0" style="right:0;bottom:0;font-size:2em;">
+<div class="countdown" id="timer_9f4a1ce7" data-update-every="1" tabindex="0" style="right:0;bottom:0;font-size:2em;">
 <div class="countdown-controls"><button class="countdown-bump-down">−</button><button class="countdown-bump-up">+</button></div>
 <code class="countdown-time"><span class="countdown-digits minutes">05</span><span class="countdown-digits colon">:</span><span class="countdown-digits seconds">00</span></code>
 </div>

docs/course-materials/slides/part2.1-single-file-app-slides.html

@@ -1494,7 +1494,7 @@ <h2></h2>
 </div>
 <div class="cell">
 <div class="cell-output-display">
-<div class="countdown" id="timer_8b3caa26" data-update-every="1" tabindex="0" style="right:0;bottom:0;font-size:2em;">
+<div class="countdown" id="timer_0417eecb" data-update-every="1" tabindex="0" style="right:0;bottom:0;font-size:2em;">
 <div class="countdown-controls"><button class="countdown-bump-down">−</button><button class="countdown-bump-up">+</button></div>
 <code class="countdown-time"><span class="countdown-digits minutes">05</span><span class="countdown-digits colon">:</span><span class="countdown-digits seconds">00</span></code>
 </div>

docs/course-materials/slides/part2.2-two-file-app-slides.html

@@ -1538,7 +1538,7 @@ <h2></h2>
 </div>
 <div class="cell">
 <div class="cell-output-display">
-<div class="countdown" id="timer_106a4920" data-update-every="1" tabindex="0" style="right:0;bottom:0;font-size:2em;">
+<div class="countdown" id="timer_3b96fcef" data-update-every="1" tabindex="0" style="right:0;bottom:0;font-size:2em;">
 <div class="countdown-controls"><button class="countdown-bump-down">−</button><button class="countdown-bump-up">+</button></div>
 <code class="countdown-time"><span class="countdown-digits minutes">05</span><span class="countdown-digits colon">:</span><span class="countdown-digits seconds">00</span></code>
 </div>
@@ -1848,7 +1848,7 @@ <h2></h2>
 </div>
 <div class="cell">
 <div class="cell-output-display">
-<div class="countdown" id="timer_00e5b770" data-update-every="1" tabindex="0" style="right:0;bottom:0;font-size:2em;">
+<div class="countdown" id="timer_6e718096" data-update-every="1" tabindex="0" style="right:0;bottom:0;font-size:2em;">
 <div class="countdown-controls"><button class="countdown-bump-down">−</button><button class="countdown-bump-up">+</button></div>
 <code class="countdown-time"><span class="countdown-digits minutes">05</span><span class="countdown-digits colon">:</span><span class="countdown-digits seconds">00</span></code>
 </div>
@@ -2456,7 +2456,7 @@ <h2></h2>
 </div>
 <div class="cell">
 <div class="cell-output-display">
-<div class="countdown" id="timer_fe099ead" data-update-every="1" tabindex="0" style="right:0;bottom:0;font-size:2em;">
+<div class="countdown" id="timer_d8e87eb7" data-update-every="1" tabindex="0" style="right:0;bottom:0;font-size:2em;">
 <div class="countdown-controls"><button class="countdown-bump-down">−</button><button class="countdown-bump-up">+</button></div>
 <code class="countdown-time"><span class="countdown-digits minutes">05</span><span class="countdown-digits colon">:</span><span class="countdown-digits seconds">00</span></code>
 </div>

docs/course-materials/slides/part2.2A.html

@@ -1531,7 +1531,7 @@ <h2></h2>
 </div>
 <div class="cell">
 <div class="cell-output-display">
-<div class="countdown" id="timer_4a41c556" data-update-every="1" tabindex="0" style="right:0;bottom:0;font-size:2em;">
+<div class="countdown" id="timer_9fa08f0b" data-update-every="1" tabindex="0" style="right:0;bottom:0;font-size:2em;">
 <div class="countdown-controls"><button class="countdown-bump-down">−</button><button class="countdown-bump-up">+</button></div>
 <code class="countdown-time"><span class="countdown-digits minutes">05</span><span class="countdown-digits colon">:</span><span class="countdown-digits seconds">00</span></code>
 </div>