+ - 0:00:00
Notes for current slide
Notes for next slide

Maiden Voyage

How to Build a Website

Garrick Aden-Buie

rstudio::conf(2020, "JavaScript for Shiny Users")

1

Anatomy of an HTML Document

HEAD
BODY
2

Anatomy of an HTML Document

HEAD
BODY
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <!-- meta -->
    <title>My First Webpage</title>
  </head>
  <body>
    <!-- content -->
  </body>
</html>
3

Anatomy of an HTML Document

HEAD
BODY
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <!-- meta -->
    <title>My First Webpage</title>
  </head>
  <body>
    <!-- content -->
  </body>
</html>
4

Anatomy of an HTML Document

HEAD
BODY
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <!-- meta -->
    <title>My First Webpage</title>
  </head>
  <body>
    <!-- content -->
  </body>
</html>
5

Anatomy of an HTML Document

HEAD
BODY
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <!-- meta -->
    <title>My First Webpage</title>
  </head>
  <body>
    <!-- content -->
  </body>
</html>
6

Create an HTML Document

  1. Open RStudio

  2. New File ▸ Text Document

  3. first-page/index.html

  4. Add 👉

  5. Use html5 or html:basic snippet

  6. 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")

7

Add a header to our page

Note that there's no title on the page (it's just the browser window title)

<title>My First Webpage</title>
8

Add a header to our page

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>
9

Add some content to your page

<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>
10

Our First Page

You should have something that looks like 1993

iframe content
11

HTML is a tree

object
{2}
head
{2}
meta
{1}
charset
:
UTF-8
title
:
Californian Cities
body
{3}
h1
[1]
0
:
Californian Cities
h2
[1]
0
:
San Francisco
p
[5]
0
:
The median age of residents...
1
{1}
strong
:
San Francisco
2
:
is
3
{1}
strong
:
38.8
4
:
years old
12

Browsers: The RStudio IDE of Web Dev

 

Firefox

Win Ctrl + Shift + I

Mac Cmd + Opt + I

Chrome

Win Ctrl + Shift + C

Mac Cmd + Opt + C

13

Browsers: The RStudio IDE of Web Dev

Firefox

Win Ctrl + Shift + I

Mac Cmd + Opt + I

Chrome

Win Ctrl + Shift + C

Mac Cmd + Opt + C

RStudio

Inspect Element

14
15
16
17
18
19
20

HTML Tag Rules

rstudio::conf rocks 🤘

<p>rstudio::conf <em>rocks</em> &#x1F918;</p>

21
22
23
24

<tag>  …  </tag>

25

<parent>  …  <child>  …  </child>  …  </parent>

26

<parent>  …  <child>  …  </child>  …  </parent>

✅

27

<parent>  …  <child>  …  </parent>  …  </child>

28

<parent>  …  <child>  …  </parent>  …  </child>

🚫

29
30
31
32
33
34
35

Escaped HTML Characters

→ toptal.com/designers/htmlarrows

🤓 gadenbuie/ermoji

36
Block
vs
Inline
37
Block
vs
Inline
38
Block
vs
Inline
39
Block
vs
Inline
40
Block
vs
Inline
41
Block
vs
Inline
42
<div>
vs
<span>
43

Tag Detective: Block or Inline?

🕵 bit.ly/yihui-js-tricks

  • ↕️ <section>

  • ↕️ <blockquote>

  • ↕️ <nav>

  • ↔️ <img>

  • ↕️ <header>

  • ↔️ <li>

  • ↕️ <ul>

  • ↔️ <code>

  • ↔️ <a>

  • ↔️ <em>

  • ↕️ <article>

  • ↕️ <pre>

  • ↔️ <strong>

  • ↕️ <h2>

04:00
44

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?

Tag Detective: Block or Inline?

🕵 bit.ly/yihui-js-tricks

  • ↕️ <section>

  • ↕️ <blockquote>

  • ↕️ <nav>

  • ↔️ <img>

  • ↕️ <header>

  • ↔️ <li>

  • ↕️ <ul>

  • ↔️ <code>

  • ↔️ <a>

  • ↔️ <em>

  • ↕️ <article>

  • ↕️ <pre>

  • ↔️ <strong>

  • ↕️ <h2>

45

Any trouble finding any of these tags?

  • Demonstrate searching in browser dev tools

  • Show Layout tab

Common Tags

Structure (Block)

  • ↕️ <section>

  • ↕️ <nav>

  • ↕️ <header>

  • ↕️ <article>

  • ↕️ <h2>

  • ↕️ <blockquote>

  • ↕️ <pre>

  • ↕️ <ul>

Markup (Inline)

  • ↔️ <strong>

  • ↔️ <em>

  • ↔️ <code>

  • ↔️ <a>

  • ↔️ <img>

  • ↔️ <li>**

Many, many more elements:
bit.ly/mdn-html-elements

46

Note that <li> is a little different (it's inline-block)

All of these are more expressive than <div> and <span>

Searching MDN

RStudio
📦 js4shiny

47

HTML Attributes

48

HTML Attributes: Extra Information

Some HTML elements require attributes to be functional

<a>js4shiny.com</a>

js4shiny.com

49

HTML Attributes: Extra Information

Some HTML elements require attributes to be functional

<a href="https:​//js4shiny​.com">
  js4shiny.com
</a>

js4shiny.com

50

HTML Attributes: class

The class attribute differentiates between similar elements

51

HTML Attributes: class

The class attribute differentiates between similar elements

<header class="masthead">

52

HTML Attributes: class

The class attribute differentiates between similar elements

<header class="masthead">

<header class="title">

53

HTML Attributes: id

The id attribute identifies individual elements

54

HTML Attributes: id

The id attribute identifies individual elements

<h2 id="how-to-work-with-mathjax">

55

HTML Attributes: id

The id attribute identifies individual elements

<h2 id="how-to-work-with-mathjax">

<div id="disqus_thread">

56

HTML Attributes: style

The style attribute changes the appearance of just one element

57

HTML Attributes: style

The style attribute changes the appearance of just one element

<p style="text-align: center;">

58

HTML Attributes: style

The style attribute changes the appearance of just one element

<p style="text-align: center;">

<p style="text-align: right;">

59

The Most Important
HTML Attributes

class this kind of thing
id this one thing
style my special thing
60

The Most Important
HTML Attributes

class this kind of thing
id this one thing
style my special thing
data- hold my data
61

Add ids and classes to our web page

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

62

Add ids and classes to our web page

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")

63

Cascading Style Sheets

64

What is it?

👀 A set of rules that define how your webpage looks

65

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.

What is it?

👀 A set of rules that define how your webpage looks

What does it do?

🎨 If HTML is content, then CSS is presentation

Typography, color, adjust position and size, borders, shadows, and more

66

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.

What is it?

👀 A set of rules that define how your webpage looks

What does it do?

🎨 If HTML is content, then CSS is presentation

Typography, color, adjust position and size, borders, shadows, and more

Where does it go?

  • Inside <style> tags anywhere

  • In a .css file that is included with a special <link> tag inside <head>

  • (In <tag style = "">)

67

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.

HTML and CSS: A Coordinated Dance

68

HTML and CSS: A Coordinated Dance

69

CSS Rules

There are two main components of a CSS rule.

  1. The selector defines which elements on the page match the rule

  2. The property list set properties of those elements to specific values.

selector {
property: value;
property: value;
}

70

CSS Rules

There are two main components of a CSS rule.

  1. The selector defines which elements on the page match the rule

  2. The property list set properties of those elements to specific values.

selector-one,
selector-two {
property: value;
property: value;
}

71

Selecting Elements with CSS

<h1 class="page-title" id="title" >

72

Selecting Elements with CSS

<h1 class="page-title" id="title" >

73

Selecting Elements with CSS

<h1 class="page-title" id="title" >

74

Selecting Elements with CSS

<h1 class="page-title" id="title" >

75

Selecting Elements with CSS

<h1 class="page-title" id="title" >

76

Selecting Elements with CSS

<h1 class="page-title" id="title" >

77

Selecting Elements with CSS

<h1 class="page-title" id="title" >

78

Selecting Elements with CSS

<h1 class="page-title" id="title" >

79

Give our page some style 🕶️

  • 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")

80

Give our page some style 🕶️

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;
}
81

Go to the systemfontstack website and copy and paste, it's super easy.

Give our page some style 🕶️

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.

82

Go to the systemfontstack website and copy and paste, it's super easy.

The Best Part of CSS: variables*

: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

83

Wrap the City Header in a span

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>
84

JavaScript

85

Find The JavaScript Console in Dev Tools

86

Firefox: Cmd + Alt + K

Like R, But Different

R

JavaScript

  • +, -, *, /, **

  • x <- 2 or x = 2

  • Assign/declare at once
     

  • Comments — # comment

  • +, -, *, /, **

  • x = 2

  • Declare variables with
    const, let, var

  • Comments — // comment or

    /*
     * mutliline comments
     */
87

Like R, But Different

R

JavaScript

  • 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}

88

Like R, But Different

R

JavaScript

  • Missing — NA

  • NULL

  • NaN, Inf, -Inf

  • Undefined — undefined

  • null

  • NaN, Infinity, -Infinity

89

Like R, But Different

R

JavaScript

  • 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.

90

What kind of variable am I?

Won't Change

const x = 42
x = 64
[TypeError] Assignment to constant variable. 

Could Change

let x = 42
x = 64
x
64 
91

What kind of variable am I?

Won't Change

const x = 42
x = 64





Could Change




let x = 42
x = 64
x









Old School




var x = 42
x = 48
x


48 





Don't Overthink



✔ Use const or let


✖ Don't replace a const variable


✖ Don't worry




92
JavaScript Runs in 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
93
JavaScript Runs in 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 ID
let title = document.getElementById('this-slide-title')
// Once you have the element...
title.textContent


JavaScript Runs in the Browser 
94
JavaScript Runs in the Browser


Find Elements



document.getElementById()


document.querySelector()


document.querySelectorAll()




Modify Elements



el.textContent


el.innerHTML


el.style.color




95
JavaScript Runs in the Browser


Find Elements



document.getElementById()


document.querySelector()


document.querySelectorAll()




Modify Elements



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




96
JavaScript Runs in the Browser


Find Elements



document.getElementById()


document.querySelector()


document.querySelectorAll()




Modify Elements



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
97
In the developer tools console...


    

  1. Change the median age to 35.9
    

    2. 

  2. Change the background color of the chart placeholder to match the border color (var(--gray))
    

    3. 







01:30

98
A more permanent solution
99
A more permanent solution


Obviously, we can't stand next to our users and ask to type code into their browser console
100
A more permanent solution


Obviously, we can't stand next to our users and ask to type code into their browser console


101
Where to Write JavaScript Code


Write right inside your HTML


<script>
  // JavaScript ...
</script>


Write in a separate file




alert('hello rstudio::conf')


<script src="script.js"></script>
102
Where to Put Your JavaScript Code


HEAD


BODY




103
Where to Put Your JavaScript Code


HEAD


BODY







104
Where to Put Your JavaScript Code


HEAD


BODY







105
Where to Put Your JavaScript Code


HEAD


BODY







106
Where to Put Your JavaScript Code


HEAD


BODY







107
Where to Put Your JavaScript Code


HEAD


BODY







108
Where to Put Your JavaScript Code


HEAD


BODY







109
Where to Put Your JavaScript Code


HEAD


BODY







110
Where to Put Your JavaScript Code


HEAD


BODY







111
Where to Put Your JavaScript Code


HEAD


BODY







112
Where to Put Your JavaScript Code


HEAD


BODY









113
Make it official


<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")
114
Follow up questions, activity


    

  1. What happens if you move the script to the top of the <body>?
    2. 

  2. How can you find out if your code has errors?
    3. 

R Markdown is Awesome


You can do all of this in R Markdown, too.


# Open a new, empty plain html R markdown
js4shiny::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);
    }
    ```
    

    • 





115
Hey, it works in rmarkdown::html_document() too.
Summary


    

  • HTML is a tree, called the DOM
    • 

  • HTML tags have a name, attributes, and contents
    • 

  • HTML for content, CSS for presentation
    • 

  • CSS selectors
    • 

  • CSS in <style> or .css
    • 

  • JavaScript is like R but different
    • 

  • JavaScript runs in the browser
    • 

  • JavaScript manipulates the DOM
    • 



116
HTML Resources


117
Next: Ghost in the Machine (Interactivity)
118


Anatomy of an HTML Document


HEAD


BODY






2





  

    Paused
  





  

    
Help

    
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
      

    
oTile View: Overview of Slides

  

  

    

      

        
          Esc
        
        Back to slideshow