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
Facebook
Twitter
LinkedIn
Weibo
Instapaper
A
A
Serif
Sans
White
Sepia
Night
Spacing -
Spacing +
Outstanding User Interfaces with Shiny Book Club
Chapter 6
CSS for Shiny
Learning objectives:
Cover the basics of
CSS
.
Use
CSS
to customize a Shiny app appearance.