Garrick Aden-Buie
rstudio::conf(2020, "JavaScript for Shiny Users")
<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8" /> <!-- meta --> <title>My First Webpage</title> </head> <body> <!-- content --> </body></html>
<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8" /> <!-- meta --> <title>My First Webpage</title> </head> <body> <!-- content --> </body></html>
<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8" /> <!-- meta --> <title>My First Webpage</title> </head> <body> <!-- content --> </body></html>
<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8" /> <!-- meta --> <title>My First Webpage</title> </head> <body> <!-- content --> </body></html>
Open RStudio
New File ▸ Text Document
first-page/index.html
Add 👉
Use html5 or html:basic snippet
Use Live Preview addin
<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8" /> <!-- meta --> <title>My First Webpage</title> </head> <body> <!-- content --> </body></html>
repl_example("first-page-00")
Note that there's no title on the page (it's just the browser window title)
<title>My First Webpage</title>
Note that there's no title on the page (it's just the browser window title)
<title>My First Webpage</title>
Change the page title and add an <h1>
element to the page.
<title>Californian Cities</title><!-- ... --><body> <h1>Median Resident Age</h1></body>
<body> <h1>Median Resident Age</h1> <div><!-- chart will go here --></div> <h2>San Francisco</h2> <p> The median age of the residents of <strong>San Francisco</strong> is <strong>38.8</strong> years old. </p></body>
Win Ctrl + Shift + I
Mac Cmd + Opt + I
Win Ctrl + Shift + C
Mac Cmd + Opt + C
Win Ctrl + Shift + I
Mac Cmd + Opt + I
Win Ctrl + Shift + C
Mac Cmd + Opt + C
RStudio
Inspect Element
rstudio::conf rocks 🤘
<p>rstudio::conf <em>rocks</em> 🤘</p>
<tag> … </tag>
<parent> … <child> … </child> … </parent>
<parent> … <child> … </child> … </parent>
✅
<parent> … <child> … </parent> … </child>
<parent> … <child> … </parent> … </child>
🚫
↕️ <section>
↕️ <blockquote>
↕️ <nav>
↔️ <img>
↕️ <header>
↔️ <li>
↕️ <ul>
↔️ <code>
↔️ <a>
↔️ <em>
↕️ <article>
↕️ <pre>
↔️ <strong>
↕️ <h2>
04:00
Task is to go find these elements in Yihui's blog post and determine if they are block or inline elements.
Also: what type of content is inside each tag?
↕️ <section>
↕️ <blockquote>
↕️ <nav>
↔️ <img>
↕️ <header>
↔️ <li>
↕️ <ul>
↔️ <code>
↔️ <a>
↔️ <em>
↕️ <article>
↕️ <pre>
↔️ <strong>
↕️ <h2>
Any trouble finding any of these tags?
Demonstrate searching in browser dev tools
Show Layout tab
↕️ <section>
↕️ <nav>
↕️ <header>
↕️ <article>
↕️ <h2>
↕️ <blockquote>
↕️ <pre>
↕️ <ul>
↔️ <strong>
↔️ <em>
↔️ <code>
↔️ <a>
↔️ <img>
↔️ <li>**
Many, many more elements:
bit.ly/mdn-html-elements
Note that <li>
is a little different (it's inline-block
)
All of these are more expressive than <div>
and <span>
Some HTML elements require attributes to be functional
<a>js4shiny.com</a>
Some HTML elements require attributes to be functional
<a href="https://js4shiny.com">
js4shiny.com
</a>
The class attribute differentiates between similar elements
The class attribute differentiates between similar elements
<header class="masthead">
The class attribute differentiates between similar elements
<header class="masthead">
<header class="title">
The id attribute identifies individual elements
The id attribute identifies individual elements
<h2 id="how-to-work-with-mathjax">
The id attribute identifies individual elements
<h2 id="how-to-work-with-mathjax">
<div id="disqus_thread">
The style attribute changes the appearance of just one element
The style attribute changes the appearance of just one element
<p style="text-align: center;">
The style attribute changes the appearance of just one element
<p style="text-align: center;">
<p style="text-align: right;">
class | this kind of thing |
id | this one thing |
style | my special thing |
class | this kind of thing |
id | this one thing |
style | my special thing |
data- | hold my data |
Which items do we want to style similarly or can we find at once? ➞ class
Which items do we need to find, knowing that we'll only get one? ➞ id
Which items do we want to style similarly or can we find at once? ➞ class
Which items do we need to find, knowing that we'll only get one? ➞ id
Add the following classes or ids:
city
age
chart
city-header
city-text
01:00
repl_example("first-page-01")
👀 A set of rules that define how your webpage looks
HTML is supposed to be about content and structure but as soon as you start laying out the content the boundary between CSS and HTML seems odd.
It's really a dance between HTML and CSS.
👀 A set of rules that define how your webpage looks
🎨 If HTML is content, then CSS is presentation
Typography, color, adjust position and size, borders, shadows, and more
HTML is supposed to be about content and structure but as soon as you start laying out the content the boundary between CSS and HTML seems odd.
It's really a dance between HTML and CSS.
👀 A set of rules that define how your webpage looks
🎨 If HTML is content, then CSS is presentation
Typography, color, adjust position and size, borders, shadows, and more
Inside <style>
tags anywhere
In a .css
file that is included with a special <link>
tag inside <head>
(In <tag style = "">
)
HTML is supposed to be about content and structure but as soon as you start laying out the content the boundary between CSS and HTML seems odd.
It's really a dance between HTML and CSS.
There are two main components of a CSS rule.
The selector defines which elements on the page match the rule
The property list set properties of those elements to specific values.
selector {
property: value;
property: value;
}
There are two main components of a CSS rule.
The selector defines which elements on the page match the rule
The property list set properties of those elements to specific values.
selector-one,
selector-two {
property: value;
property: value;
}
<h1 class="page-title" id="title" >
<h1 class="page-title" id="title" >
<h1 class="page-title" id="title" >
<h1 class="page-title" id="title" >
<h1 class="page-title" id="title" >
<h1 class="page-title" id="title" >
<h1 class="page-title" id="title" >
<h1 class="page-title" id="title" >
Give headings the color: #466683;
City names get background: #55ebbc;
The median age gets background: #f6e995;
Style the chart so that it is
800px
wide
250px
high
has a 2px solid #c0c9cc
border
Selector | By |
---|---|
h1 | element |
.page-title | class |
#title | id |
repl_example("first-page-02")
Let's use a good set of fonts: systemfontstack.com
body { font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, Ubuntu, roboto, noto, segoe ui, arial, sans-serif;}
Go to the systemfontstack website and copy and paste, it's super easy.
Let's use a good set of fonts: systemfontstack.com
body { font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, Ubuntu, roboto, noto, segoe ui, arial, sans-serif;}
Changing the body
font changes all the fonts; this is the cascade.
Go to the systemfontstack website and copy and paste, it's super easy.
:root { --dark-blue: #466683; --grey: #c0c9cc; --green: #55ebbc; --yellow: #f6e995;}
h1,h2 { color: var(--dark-blue);}.city { background: var(--green);}.age { background: var(--yellow);}#chart { border: 2px solid var(--gray)}
* Also sometimes called custom properties
Replace our current HTML
<h2 id="city-header" class="city">San Francisco</h2>
with this
<h2> <span id="city-header" class="city">San Francisco</span></h2>
Firefox:
+
, -
, *
, /
, **
x <- 2
or x = 2
Assign/declare at once
Comments — # comment
+
, -
, *
, /
, **
x = 2
Declare variables withconst
, let
, var
Comments — // comment
or
/* * mutliline comments */
Numbers — 1.234
Integers — 1L
Strings — "apple"
or 'banana'
Boolean — TRUE
or FALSE
Arrays — c(1, 2, 3)
Lists — list(a = 1, b = 2)
Numbers — 1.234
Integers — ☝
Strings — 'apple'
, "banana"
or ${fruit}
Boolean — true
or false
Arrays — [1, 2, 3]
Objects — {a: 1, b: 2}
Missing — NA
NULL
NaN
, Inf
, -Inf
Undefined — undefined
null
NaN
, Infinity
, -Infinity
Functions — message("hello")
Methods — print.tbl()
Functions — alert('hello')
Methods — console.log()
If R worked like JavaScript, every tibble
would carry around it's own print function.
const x = 42x = 64
[TypeError] Assignment to constant variable.
let x = 42x = 64x
64
const x = 42x = 64
let x = 42x = 64x
var x = 42x = 48x
48
✔ Use const
or let
✖ Don't replace a const
variable
✖ Don't worry
The browser builds the document from an internal model DOM
Made available to JavaScript via document
The methods of document
let you interact with the browser
The browser builds the document from an internal model DOM
Made available to JavaScript via document
The methods of document
let you interact with the browser
// Find an element in your page by IDlet title = document.getElementById('this-slide-title')// Once you have the element...title.textContent
JavaScript Runs in the Browser
document.getElementById()
document.querySelector()
document.querySelectorAll()
el.textContent
el.innerHTML
el.style.color
document.getElementById()
document.querySelector()
document.querySelectorAll()
el.textContent
el.innerHTML
el.style.color
document is the name of the object
from the browser's API
el is a variable name and
can (or should!) get a better name
document.getElementById()
document.querySelector()
document.querySelectorAll()
el.textContent
el.innerHTML
el.style.color
document is the name of the object
from the browser's API
el is a variable name and
can (or should!) get a better name
Let's change San Francisco ➡ Los Angeles
Change the median age to 35.9
Change the background color of the chart placeholder to match the border color (var(--gray)
)
01:30
Obviously, we can't stand next to our users and ask to type code into their browser console
Obviously, we can't stand next to our users and ask to type code into their browser console
<script> // JavaScript ...</script>
alert('hello rstudio::conf')
<script src="script.js"></script>
<script> let city = 'Los Angeles'; let age = 38.8; document.getElementById('city-header').textContent = city; document.getElementById('city-text').textContent = city; document.querySelector('#age').textContent = age; let chart = document.getElementById('chart'); chart.style.background = 'var(--gray)';</script>
Put this <script>
just before the <style>
we added earlier.
02:00
repl_example("first-page-03")
Follow up questions, activity
<body>
?You can do all of this in R Markdown, too.
# Open a new, empty plain html R markdownjs4shiny::js4shiny_rmd("plain")
Put the HTML in the document
Copy the JavaScript into a js chunk
```{js}let city = 'Los Angeles'// ...```
Copy the CSS into a css
chunk
```{css}.city { background: var(--green);}.age { background: var(--yellow);}```
Hey, it works in rmarkdown::html_document()
too.
<style>
or .css
Mastering Shiny: Advanced UI
https://mastering-shiny.org/advanced-ui.html
FrontEnd Masters Handbook
https://frontendmasters.com/books/front-end-handbook/2019/
Interneting is Hard
https://internetingishard.com/
HTML Semantics Cheat Sheet
https://learn-the-web.algonquindesign.ca/topics/html-semantics-cheat-sheet/
Keyboard shortcuts
↑, ←, Pg Up, k | Go to previous slide |
↓, →, Pg Dn, Space, j | Go to next slide |
Home | Go to first slide |
End | Go to last slide |
Number + Return | Go to specific slide |
b / m / f | Toggle blackout / mirrored / fullscreen mode |
c | Clone slideshow |
p | Toggle presenter mode |
t | Restart the presentation timer |
?, h | Toggle this help |
o | Tile View: Overview of Slides |
Esc | Back to slideshow |
Garrick Aden-Buie
rstudio::conf(2020, "JavaScript for Shiny Users")
<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8" /> <!-- meta --> <title>My First Webpage</title> </head> <body> <!-- content --> </body></html>
<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8" /> <!-- meta --> <title>My First Webpage</title> </head> <body> <!-- content --> </body></html>
<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8" /> <!-- meta --> <title>My First Webpage</title> </head> <body> <!-- content --> </body></html>
<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8" /> <!-- meta --> <title>My First Webpage</title> </head> <body> <!-- content --> </body></html>
Open RStudio
New File ▸ Text Document
first-page/index.html
Add 👉
Use html5 or html:basic snippet
Use Live Preview addin
<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8" /> <!-- meta --> <title>My First Webpage</title> </head> <body> <!-- content --> </body></html>
repl_example("first-page-00")
Note that there's no title on the page (it's just the browser window title)
<title>My First Webpage</title>
Note that there's no title on the page (it's just the browser window title)
<title>My First Webpage</title>
Change the page title and add an <h1>
element to the page.
<title>Californian Cities</title><!-- ... --><body> <h1>Median Resident Age</h1></body>
<body> <h1>Median Resident Age</h1> <div><!-- chart will go here --></div> <h2>San Francisco</h2> <p> The median age of the residents of <strong>San Francisco</strong> is <strong>38.8</strong> years old. </p></body>
Win Ctrl + Shift + I
Mac Cmd + Opt + I
Win Ctrl + Shift + C
Mac Cmd + Opt + C
Win Ctrl + Shift + I
Mac Cmd + Opt + I
Win Ctrl + Shift + C
Mac Cmd + Opt + C
RStudio
Inspect Element
rstudio::conf rocks 🤘
<p>rstudio::conf <em>rocks</em> 🤘</p>
<tag> … </tag>
<parent> … <child> … </child> … </parent>
<parent> … <child> … </child> … </parent>
✅
<parent> … <child> … </parent> … </child>
<parent> … <child> … </parent> … </child>
🚫
↕️ <section>
↕️ <blockquote>
↕️ <nav>
↔️ <img>
↕️ <header>
↔️ <li>
↕️ <ul>
↔️ <code>
↔️ <a>
↔️ <em>
↕️ <article>
↕️ <pre>
↔️ <strong>
↕️ <h2>
04:00
Task is to go find these elements in Yihui's blog post and determine if they are block or inline elements.
Also: what type of content is inside each tag?
↕️ <section>
↕️ <blockquote>
↕️ <nav>
↔️ <img>
↕️ <header>
↔️ <li>
↕️ <ul>
↔️ <code>
↔️ <a>
↔️ <em>
↕️ <article>
↕️ <pre>
↔️ <strong>
↕️ <h2>
Any trouble finding any of these tags?
Demonstrate searching in browser dev tools
Show Layout tab
↕️ <section>
↕️ <nav>
↕️ <header>
↕️ <article>
↕️ <h2>
↕️ <blockquote>
↕️ <pre>
↕️ <ul>
↔️ <strong>
↔️ <em>
↔️ <code>
↔️ <a>
↔️ <img>
↔️ <li>**
Many, many more elements:
bit.ly/mdn-html-elements
Note that <li>
is a little different (it's inline-block
)
All of these are more expressive than <div>
and <span>
Some HTML elements require attributes to be functional
<a>js4shiny.com</a>
Some HTML elements require attributes to be functional
<a href="https://js4shiny.com">
js4shiny.com
</a>
The class attribute differentiates between similar elements
The class attribute differentiates between similar elements
<header class="masthead">
The class attribute differentiates between similar elements
<header class="masthead">
<header class="title">
The id attribute identifies individual elements
The id attribute identifies individual elements
<h2 id="how-to-work-with-mathjax">
The id attribute identifies individual elements
<h2 id="how-to-work-with-mathjax">
<div id="disqus_thread">
The style attribute changes the appearance of just one element
The style attribute changes the appearance of just one element
<p style="text-align: center;">
The style attribute changes the appearance of just one element
<p style="text-align: center;">
<p style="text-align: right;">
class | this kind of thing |
id | this one thing |
style | my special thing |
class | this kind of thing |
id | this one thing |
style | my special thing |
data- | hold my data |
Which items do we want to style similarly or can we find at once? ➞ class
Which items do we need to find, knowing that we'll only get one? ➞ id
Which items do we want to style similarly or can we find at once? ➞ class
Which items do we need to find, knowing that we'll only get one? ➞ id
Add the following classes or ids:
city
age
chart
city-header
city-text
01:00
repl_example("first-page-01")
👀 A set of rules that define how your webpage looks
HTML is supposed to be about content and structure but as soon as you start laying out the content the boundary between CSS and HTML seems odd.
It's really a dance between HTML and CSS.
👀 A set of rules that define how your webpage looks
🎨 If HTML is content, then CSS is presentation
Typography, color, adjust position and size, borders, shadows, and more
HTML is supposed to be about content and structure but as soon as you start laying out the content the boundary between CSS and HTML seems odd.
It's really a dance between HTML and CSS.
👀 A set of rules that define how your webpage looks
🎨 If HTML is content, then CSS is presentation
Typography, color, adjust position and size, borders, shadows, and more
Inside <style>
tags anywhere
In a .css
file that is included with a special <link>
tag inside <head>
(In <tag style = "">
)
HTML is supposed to be about content and structure but as soon as you start laying out the content the boundary between CSS and HTML seems odd.
It's really a dance between HTML and CSS.
There are two main components of a CSS rule.
The selector defines which elements on the page match the rule
The property list set properties of those elements to specific values.
selector {
property: value;
property: value;
}
There are two main components of a CSS rule.
The selector defines which elements on the page match the rule
The property list set properties of those elements to specific values.
selector-one,
selector-two {
property: value;
property: value;
}
<h1 class="page-title" id="title" >
<h1 class="page-title" id="title" >
<h1 class="page-title" id="title" >
<h1 class="page-title" id="title" >
<h1 class="page-title" id="title" >
<h1 class="page-title" id="title" >
<h1 class="page-title" id="title" >
<h1 class="page-title" id="title" >
Give headings the color: #466683;
City names get background: #55ebbc;
The median age gets background: #f6e995;
Style the chart so that it is
800px
wide
250px
high
has a 2px solid #c0c9cc
border
Selector | By |
---|---|
h1 | element |
.page-title | class |
#title | id |
repl_example("first-page-02")
Let's use a good set of fonts: systemfontstack.com
body { font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, Ubuntu, roboto, noto, segoe ui, arial, sans-serif;}
Go to the systemfontstack website and copy and paste, it's super easy.
Let's use a good set of fonts: systemfontstack.com
body { font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, Ubuntu, roboto, noto, segoe ui, arial, sans-serif;}
Changing the body
font changes all the fonts; this is the cascade.
Go to the systemfontstack website and copy and paste, it's super easy.
:root { --dark-blue: #466683; --grey: #c0c9cc; --green: #55ebbc; --yellow: #f6e995;}
h1,h2 { color: var(--dark-blue);}.city { background: var(--green);}.age { background: var(--yellow);}#chart { border: 2px solid var(--gray)}
* Also sometimes called custom properties
Replace our current HTML
<h2 id="city-header" class="city">San Francisco</h2>
with this
<h2> <span id="city-header" class="city">San Francisco</span></h2>
Firefox:
+
, -
, *
, /
, **
x <- 2
or x = 2
Assign/declare at once
Comments — # comment
+
, -
, *
, /
, **
x = 2
Declare variables withconst
, let
, var
Comments — // comment
or
/* * mutliline comments */
Numbers — 1.234
Integers — 1L
Strings — "apple"
or 'banana'
Boolean — TRUE
or FALSE
Arrays — c(1, 2, 3)
Lists — list(a = 1, b = 2)
Numbers — 1.234
Integers — ☝
Strings — 'apple'
, "banana"
or ${fruit}
Boolean — true
or false
Arrays — [1, 2, 3]
Objects — {a: 1, b: 2}
Missing — NA
NULL
NaN
, Inf
, -Inf
Undefined — undefined
null
NaN
, Infinity
, -Infinity
Functions — message("hello")
Methods — print.tbl()
Functions — alert('hello')
Methods — console.log()
If R worked like JavaScript, every tibble
would carry around it's own print function.
const x = 42x = 64
let x = 42x = 64x
const x = 42x = 64
let x = 42x = 64x
var x = 42x = 48x
✔ Use const
or let
✖ Don't replace a const
variable
✖ Don't worry
The browser builds the document from an internal model DOM
Made available to JavaScript via document
The methods of document
let you interact with the browser
The browser builds the document from an internal model DOM
Made available to JavaScript via document
The methods of document
let you interact with the browser
// Find an element in your page by IDlet title = document.getElementById('this-slide-title')// Once you have the element...title.textContent
document.getElementById()
document.querySelector()
document.querySelectorAll()
el.textContent
el.innerHTML
el.style.color
document.getElementById()
document.querySelector()
document.querySelectorAll()
el.textContent
el.innerHTML
el.style.color
document is the name of the object
from the browser's API
el is a variable name and
can (or should!) get a better name
document.getElementById()
document.querySelector()
document.querySelectorAll()
el.textContent
el.innerHTML
el.style.color
document is the name of the object
from the browser's API
el is a variable name and
can (or should!) get a better name
Let's change San Francisco ➡ Los Angeles
Change the median age to 35.9
Change the background color of the chart placeholder to match the border color (var(--gray)
)
01:30
Obviously, we can't stand next to our users and ask to type code into their browser console
Obviously, we can't stand next to our users and ask to type code into their browser console
<script> // JavaScript ...</script>
alert('hello rstudio::conf')
<script src="script.js"></script>
<script> let city = 'Los Angeles'; let age = 38.8; document.getElementById('city-header').textContent = city; document.getElementById('city-text').textContent = city; document.querySelector('#age').textContent = age; let chart = document.getElementById('chart'); chart.style.background = 'var(--gray)';</script>
Put this <script>
just before the <style>
we added earlier.
02:00
repl_example("first-page-03")
Follow up questions, activity
<body>
?You can do all of this in R Markdown, too.
# Open a new, empty plain html R markdownjs4shiny::js4shiny_rmd("plain")
Put the HTML in the document
Copy the JavaScript into a js chunk
```{js}let city = 'Los Angeles'// ...```
Copy the CSS into a css
chunk
```{css}.city { background: var(--green);}.age { background: var(--yellow);}```
Hey, it works in rmarkdown::html_document()
too.
<style>
or .css
Mastering Shiny: Advanced UI
https://mastering-shiny.org/advanced-ui.html
FrontEnd Masters Handbook
https://frontendmasters.com/books/front-end-handbook/2019/
Interneting is Hard
https://internetingishard.com/
HTML Semantics Cheat Sheet
https://learn-the-web.algonquindesign.ca/topics/html-semantics-cheat-sheet/