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

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

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>

49

HTML Attributes: Extra Information

Some HTML elements require attributes to be functional

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

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 FranciscoLos Angeles

97

In the developer tools console...

  1. Change the median age to 35.9

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

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. How can you find out if your code has errors?

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

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