• Outstanding User Interfaces with Shiny Book Club
  • Welcome
    • Book club meetings
    • Pace
    • Introductions
    • Before reading this book
    • What will we learn?
    • What will we be able to do?
    • Book structure
    • Getting Example code
  • 1 Shiny and the Web
    • Introduction
    • Shiny generates HTML code
    • Be a DJ
    • HTML tags basic types
    • HTML tags role types
    • Box Model
    • Flow Layout
    • Semantic tags
    • Tag attributes
    • The simplest HTML skeleton
    • The simplest Shiny skeleton
    • Document Object Model (DOM)
    • Web Inspector 101
    • First Website
    • CSS Introduction
    • HTML and CSS
    • HTML and CSS in Shiny
    • HTML and JavaScript
    • HTML and JavaScript in Shiny
    • Summary
    • 1.1 Meeting Videos
      • 1.1.1 Cohort 1
  • 2 Manipulate HTML tags from R with htmltools
    • 2.1 Writing HTML tags from R
    • 2.2 Notations
    • 2.3 Adding new tags
    • 2.4 Alternative way to write tags
    • 2.5 Playing with tags
    • Tags structure
    • Practical examples
    • Useful functions for tags
      • Add attributes
      • Check if an element has an specific attribute
      • Get the attribute value of an element
      • Replace children
      • Add child or children
      • Build your own functions
      • Other functions
      • Conditionally set attributes
      • Using the pipe operator
      • Programatically create children elements
    • 2.6 Modern {htmltools}
    • Basics
    • Query tags
    • Modify tags
      • Playing with attributes
      • Altering element/children/siblings
      • Chain tag queries
      • Specific cases
      • Practice
      • Alter tag rendering with rendering hooks
    • 2.7 Meeting Videos
      • 2.7.1 Cohort 1
  • 3 Discover Shiny dependencies
    • 3.1 Introduction
    • 3.2 Bootstrap
    • 3.3 jQuery, DOM manipulation
    • 3.4 Custom dependencies
    • 3.5 Exercise
    • 3.6 Conclusion
    • 3.7 Meeting Videos
      • 3.7.1 Cohort 1
  • 4 Handle HTML dependencies with htmltools
    • Finding a card
    • Wrapping html into a function
    • Checking the result
    • Finding dependencies
    • Adding a link on the head tag
    • includeCSS() on the head tag
    • Using htmlDependency()
    • Using htmlDependency()
    • Using htmlDependency()
    • htmlDependency() disanvantage
    • Extracting web dependencies
    • font-awesome
    • Using extracted web dependencies
    • Suppress Dependencies
    • Removing AdminLTE
    • Removing redundant dependencies
    • Insert custom script in the head
    • 4.1 Meeting Videos
      • 4.1.1 Cohort 1
  • 5 Web application concepts
    • 5.1 The client-server model
      • 5.1.1 HyperText Transfer Protocol (HTTP)
    • 5.2 About HTTP requests
    • 5.3 Structure of an URL
      • 5.3.1 Web app files structure
    • 5.4 Serving web apps
    • 5.5 About {httpuv}
    • 5.6 Shiny app lifecycle
      • 5.6.1 Building the UI
    • 5.7 Meeting Videos
      • 5.7.1 Cohort 1
  • 6 CSS for Shiny
    • 6.1 How to include CSS?
    • What does Shiny’s creator think?
    • 6.2 CSS selectors
    • 6.3 Basic
      • Select by tag name
      • Select by class or id
    • 6.4 Intermediate
      • Pseudo-class
      • Pseudo-element
      • Attributes
    • 6.5 Advanced
      • Nesting
      • Parent selector
    • Animations
    • 6.6 Layout
    • Flexbox and CSS Grid
    • Media queries
    • 6.7 BEM
    • 6.8 Meeting Videos
      • 6.8.1 Cohort 1
  • 7 Tidy your CSS with Sass
    • 7.1 Sass
      • 7.1.1 What?
      • 7.1.2 Why?
      • 7.1.3 How?
    • 7.2 {sass}
    • 7.3 Variables
    • 7.4 Partials and modules
      • 7.4.1 Why
      • 7.4.2 How
    • 7.5 Mixins and functions
      • 7.5.1 Mixins
      • 7.5.2 Functions
    • 7.6 Extend/inheritance
    • 7.7 Flow control
      • 7.7.1 if/else
      • 7.7.2 Loops
    • 7.8 Nesting code
      • 7.8.1 … with CSS
      • 7.8.2 … with Sass
    • 7.9 Meeting Videos
      • 7.9.1 Cohort 1
  • 8 Beautify with fresh
    • 8.1 SLIDE 1
    • 8.2 Meeting Videos
      • 8.2.1 Cohort 1
  • 9 Become a theming wizard with bslib
    • 9.1 SLIDE 1
    • 9.2 Meeting Videos
      • 9.2.1 Cohort 1
  • 10 JavaScript for Shiny
    • 10.1 SLIDE 1
    • 10.2 Meeting Videos
      • 10.2.1 Cohort 1
  • 11 Communicate between R and JS
    • Introductory example
    • How R and JS communicate?
    • Read JSON in R
    • Read JSON in R
    • Export JSON from R
    • Export JSON from R
    • Read and Export JSON in JS
    • What is a websocket?
    • Creating a server
    • Creating a client
    • Websocket diagram
    • Starting connection
    • Create the app
    • call: HTTP response
    • onWSOpen: websocket server
    • App example
    • Meeting Videos
      • 11.0.1 Cohort 1
  • 12 Understand and develop new Shiny inputs
    • Input bindings
    • Adding JS to UI
    • Input structure
    • Binding Shiny inputs
    • Binding Shiny inputs
    • Binding Shiny inputs
    • Binding Shiny inputs
    • Binding Shiny inputs
    • Re-create textInput
    • Re-create textInput
    • Re-create textInput
    • Re-create textInput
    • Debbuging JS methods
    • Initialize inputs
    • Get the value
    • Get the value
    • Updating Inputs From Server
    • Updating Inputs From R
    • Session Object (REMANDER)
    • Sending one value from server
    • Sending several values from server
    • Triggering the update from a buttom
    • Use the debbuger to send your own message
    • Updating outputs when typing
    • Updating outputs when clicking a buttom
    • Updating outputs when clicking a buttom
    • Setting rate policies
    • Setting rate policies
    • Register an input binding
    • Other binding methods
    • Edit an input binding
    • Edit an input binding
    • Edit an input binding
    • Capturing the state of a box in a (secundary) input
    • Capturing the state of a box in a (secundary) input
    • Capturing the state of a box in a (secondary) input
    • Capturing the state of a box in a (secundary) input
    • Capturing the state of a box in a (secundary) input
    • Getting rid of the renderUI
    • Getting rid of the renderUI
    • Getting rid of the renderUI
    • Getting rid of the renderUI
    • Getting rid of the renderUI
    • Getting rid of the renderUI
    • Getting rid of the renderUI
    • Getting rid of the renderUI
    • Using Shiny.setInputValue
    • Shiny.setInputValue and Shiny JavaScript events
    • Shiny.setInputValue and Shiny JavaScript events
    • Input handlers: without getType
    • Input handlers: with getType
    • Input handlers: with getType
    • Input handlers: with getType
    • Extending input handlers with numbers
    • Extending input handlers with numbers
    • Extending input handlers with numbers
    • Extending input handlers with numbers
    • 12.1 Meeting Videos
      • 12.1.1 Cohort 1
  • 13 Shiny inputs lifecycles
    • 13.1 SLIDE 1
    • 13.2 Meeting Videos
      • 13.2.1 Cohort 1
  • 14 Mastering Shiny’s events
    • 14.1 SLIDE 1
    • 14.2 Meeting Videos
      • 14.2.1 Cohort 1
  • 15 Optimize your apps with custom handlers
    • Introduction
    • renderUI and uiOutput
    • renderUI and uiOutput Example Code
    • renderUI and uiOutput Example App
    • renderUI and uiOutput Example HTML
    • insertUI Process
    • insertUI Process
    • insertUI Process
    • insertUI Process
    • insertUI vs renderUI
    • insertUI Example Code
    • insertUI Example Code
    • insertUI Example App
    • insertUI Example App (Updated Selector)
    • Updating counters Code
    • Updating counters App
    • Custom handlers Diagram
    • Custom handlers Example Code
    • Custom handlers Example Code
    • Custom handlers Example App
    • 15.1 Meeting Videos
      • 15.1.1 Cohort 1
  • 16 Define dependencies
    • 16.1 SLIDE 1
    • 16.2 Meeting Videos
      • 16.2.1 Cohort 1
  • 17 Create template elements
    • 17.1 SLIDE 1
    • 17.2 Meeting Videos
      • 17.2.1 Cohort 1
  • 18 Develop custom input widgets
    • Tabler action button
    • Tabler action button
    • Tabler action button
    • Tabler action button
    • Toggle Switch
    • Toggle Switch
    • Toggle Switch
    • Toggle Switch
    • Navbar menu input
    • Navbar menu input
    • Navbar menu input
    • Navbar menu input
    • Navbar menu input
    • Navbar menu input
    • Navbar menu input
    • 18.1 Meeting Videos
      • 18.1.1 Cohort 1
  • 19 Adding more interactivity
    • 19.1 SLIDE 1
    • 19.2 Meeting Videos
      • 19.2.1 Cohort 1
  • 20 Testing and validating templates elements
    • 20.1 SLIDE 1
    • 20.2 Meeting Videos
      • 20.2.1 Cohort 1
  • 21 Automate new template creation with charpente
    • 21.1 SLIDE 1
    • 21.2 Meeting Videos
      • 21.2.1 Cohort 1
  • 22 Introduction
    • 22.1 SLIDE 1
    • 22.2 Meeting Videos
      • 22.2.1 Cohort 1
  • 23 Reconstruct shinyMobile
    • 23.1 SLIDE 1
    • 23.2 Meeting Videos
      • 23.2.1 Cohort 1
  • 24 shinyMobile and PWA
    • 24.1 SLIDE 1
    • 24.2 Meeting Videos
      • 24.2.1 Cohort 1
  • 25 Design widgets
    • 25.1 SLIDE 1
    • 25.2 Meeting Videos
      • 25.2.1 Cohort 1
  • 26 Fine tune shinyMobile
    • 26.1 SLIDE 1
    • 26.2 Meeting Videos
      • 26.2.1 Cohort 1
  • 27 Shiny and React with reactR
    • 27.1 SLIDE 1
    • 27.2 Meeting Videos
      • 27.2.1 Cohort 1
  • 28 Divide and Conquere
    • 28.1 SLIDE 1
    • 28.2 Meeting Videos
      • 28.2.1 Cohort 1
  • 29 What to do next
    • 29.1 SLIDE 1
    • 29.2 Meeting Videos
      • 29.2.1 Cohort 1
  • Published with bookdown

Outstanding User Interfaces with Shiny Book Club

Adding a link on the head tag

fluidPage(
  tags$head(
    tags$link(
      rel = "stylesheet",
      type = "text/css",
      href = mdb_css
    )
  )
)