rebuilt

Author: JohnCoene

.gitignore

@@ -9,3 +9,4 @@ _book/bookdown.pdf
 .vscode
 _bookdown_files
 bookdown.rds
+corrector-note.md

3-25-htmlwidgets-advanced.Rmd

@@ -278,7 +278,7 @@ is.null(g$dependencies)
 
 As shown above, the object created by `gio` includes dependencies, currently `NULL` as no such extra dependency is specified. One can therefore append those to that object in a fashion similar to what the `gio_style` function does.
 
-From the root of the gio package, we create a new directory for the stats.js dependency and download the latest version from Github.
+From the root of the gio package, we create a new directory for the stats.js dependency and download the latest version from GitHub.
 
 ```r
 dir.create("htmlwidgets/stats")

7-01-webpack-npm-intro.Rmd

@@ -24,7 +24,7 @@ Combine all of the above and software that involves JavaScript can quickly becom
 
 There are admittedly few R packages that make use of such technology though it must be said that many could greatly benefit from it. Given its size and complexity a package such as shiny, however, could probably not do without it.
 
-Shiny makes use of Grunt, the source code that comprises all of the JavaScript required to run the front-end (inputs, outputs, modals, etc.) is in the `srcjs` directory which can be seen on [official Github repository](https://github.com/rstudio/shiny). This folder includes a multitude of JavaScript files the name of which indicates the code they encompass; `input_binding_checkbox.js`, `modal.js`, etc.
+Shiny makes use of Grunt, the source code that comprises all of the JavaScript required to run the front-end (inputs, outputs, modals, etc.) is in the `srcjs` directory which can be seen on [official GitHub repository](https://github.com/rstudio/shiny). This folder includes a multitude of JavaScript files the name of which indicates the code they encompass; `input_binding_checkbox.js`, `modal.js`, etc.
 
 These files are processed by Grunt which, based on the `Gruntfile.js` configuration file in the `tools` directory, into different bundles that go in the `inst` folder of the package.
 

7-02-webpack-npm-discover.Rmd

@@ -95,7 +95,7 @@ As mentioned, it is rarely a good idea to install packages globally at the excep
 
 There are two other scopes on which packages can be installed. NPM allows distinguishing between packages that are needed to develop the project and packages that are needed in the final product being built. 
 
-R does not come with such convenience but could perhaps be useful, for instance throughout the book we used the usethis package to develop packages from setting it up to adding packages to the `DESCRIPTION` file, and more. Perhaps one would like to make this a "developer" dependency so that other developers that pull the package from Github have usethis installed and readily available. The advantage is that this dependency would not be included in the final product, that is, usethis is not required to use the package (only to develop it) and therefore is not installed by the user.
+R does not come with such convenience but could perhaps be useful, for instance throughout the book we used the usethis package to develop packages from setting it up to adding packages to the `DESCRIPTION` file, and more. Perhaps one would like to make this a "developer" dependency so that other developers that pull the package from GitHub have usethis installed and readily available. The advantage is that this dependency would not be included in the final product, that is, usethis is not required to use the package (only to develop it) and therefore is not installed by the user.
 
 As stated in the previous chapter, file size matters in JavaScript; it is, therefore, crucial that dependencies that are used only for development are not included in the final JavaScript file. With NPM this can be done by using the `--save-dev` flag, e.g.: `npm install webpack --save-dev` to install webpack. This is how it will be eventually installed as it is needed to prepare the final product (minify, bundle, etc.) but is not required to run the bundled file(s).
 
@@ -117,7 +117,7 @@ Notice that this updated the `package.json` file, created the `package-lock.json
 └── package.json
 ```
 
-The directory `node_modules` actually holds all the dependencies, it will grow in size as you add more, it's important that this directory is not pushed to whatever version control system you happen use (Github, Bitbucket, Gitlab). 
+The directory `node_modules` actually holds all the dependencies, it will grow in size as you add more, it's important that this directory is not pushed to whatever version control system you happen use (GitHub, Bitbucket, Gitlab). 
 
 ```{block, type='rmdnote'}
 Exclude the `node_modules` directory from your version control (Git or otherwise)
@@ -279,7 +279,7 @@ This is by no means a safe way to secure an application!
 
 Though it is certainly not a  real-world example, it is educational and quite a bit of fun.
 
-The first thing to do is to install the mousetrap dependency, as indicated on the [Github README](https://github.com/ccampbell/mousetrap) it can be obtained from NPM.
+The first thing to do is to install the mousetrap dependency, as indicated on the [GitHub README](https://github.com/ccampbell/mousetrap) it can be obtained from NPM.
 
 ```bash
 npm install mousetrap --save

_book/1-01-intro-introduction.md

@@ -26,14 +26,10 @@ There are multiple ways to create a package. One could manually create every fil
 
 From the RStudio IDE go to `File > New Project > New Directory > R Package` then select "R package" and fill in the small form, namely name the package and specify the directory where it should be created. 
 
-\begin{figure}[H]
-
-{\centering \includegraphics[width=1\linewidth]{images/rstudio-create-package} 
-
-}
-
-\caption{Package creation wizard}(\#fig:rstudio-create-package)
-\end{figure}
+<div class="figure" style="text-align: center">
+<img src="images/rstudio-create-package.png" alt="Package creation wizard" width="100%" />
+<p class="caption">(\#fig:rstudio-create-package)Package creation wizard</p>
+</div>
 
 But it could be argued that it's actually more accessible from the R console with the usethis package. The `create_package` function takes as first argument the path to create the package. If you run it from RStudio a new project window should open.
 
@@ -96,10 +92,9 @@ string_length <- function(string) {
 }
 ```
 
-\begin{rmdnote}
-Note that the function is preceded by its namespace with \texttt{::}
-(more on this later).
-\end{rmdnote}
+<div class="rmdnote">
+<p>Note that the function is preceded by its namespace with <code>::</code> (more on this later).</p>
+</div>
 
 The `DESCRIPTION` file does this, it will make sure that the dependencies of the package are met by users who install it. We can specify such dependencies under `Imports` where we can list packages required separated by a comma.
 
@@ -201,11 +196,9 @@ Above we import the function `str_length` from the `stringr` package using the `
 
 Finally, one can actually generate the `.Rd` documentation files and populate the `NAMESPACE` with either the `devtools::document()` function or `roxygen2::roxygenise()`.
 
-\begin{rmdnote}
-Remember to run \texttt{devtools::document()} after changing roxygen2
-tags otherwise changes are not actually reflected in the
-\texttt{NAMESPACE} and documentation.
-\end{rmdnote}
+<div class="rmdnote">
+<p>Remember to run <code>devtools::document()</code> after changing roxygen2 tags otherwise changes are not actually reflected in the <code>NAMESPACE</code> and documentation.</p>
+</div>
 
 ### Installed files {#basics-installed-files}
 
@@ -233,9 +226,9 @@ Note whilst this short guide will help you develop packages good enough for your
 
 JSON (JavaScript Object Notation) is a prevalent data _interchange_ format with which we will work extensively throughout this book; it is thus crucial that we have a good understanding of it before we plunge into the nitty-gritty. As one might foresee, if we want two languages to work together, we must have a data format that can be understood by both---JSON lets us harmoniously pass data from one to the other. While it is natively supported in JavaScript, it can be graciously handled in R with the [jsonlite package](https://CRAN.R-project.org/package=jsonlite) [@R-jsonlite] it is the serialiser used internally by all the packages we shall explore in this book.
 
-\begin{rmdnote}
-``To serialise'' is just jargon for converting data to JSON.
-\end{rmdnote}
+<div class="rmdnote">
+<p>“To serialise” is just jargon for converting data to JSON.</p>
+</div>
 
 ### Serialising {#serialising}
 
@@ -315,14 +308,10 @@ toJSON(df, pretty = TRUE)
 
 What jsonlite does internally is essentially turning the data.frame into a list _rowwise_ to produce a sub-list for every row then it serialises to JSON. This is generally how rectangular data is represented in lists. For instance, `purrr::transpose` does the same. Another great example is to use `console.table` in the JavaScript console (more on that later) to display the table JSON as a table.
 
-\begin{figure}[H]
-
-{\centering \includegraphics[width=1\linewidth]{images/console-table} 
-
-}
-
-\caption{console.table output}(\#fig:console-table)
-\end{figure}
+<div class="figure" style="text-align: center">
+<img src="images/console-table.png" alt="console.table output" width="100%" />
+<p class="caption">(\#fig:console-table)console.table output</p>
+</div>
 
 We can reproduce this with the snippet below, we remove row names and use apply to turn every row into a list.
 
@@ -391,34 +380,25 @@ The easiest way to run JavaScript interactively is probably to create an HTML fi
 </html>
 ```
 
-\begin{figure}[H]
-
-{\centering \includegraphics[width=1\linewidth]{images/tryingjs} 
-
-}
-
-\caption{Trying JavaScript}(\#fig:trying-js)
-\end{figure}
+<div class="figure" style="text-align: center">
+<img src="images/tryingjs.png" alt="Trying JavaScript" width="100%" />
+<p class="caption">(\#fig:trying-js)Trying JavaScript</p>
+</div>
 
 ### Developer Tools {#basics-chrome-devtools}
 
 Most of the JavaScript code written in this book is intended to be run in web browsers; it is thus vital that you have a great understanding of your web browser and its developer tools (devtools). In this section, we discuss those available in Google Chrome and Chromium but such tools, albeit somewhat different, also exist in Mozilla Firefox and Safari.
 
-\begin{rmdnote}
-The RStudio IDE is built on Chromium, some of these tools will therefore
-also work in RStudio.
-\end{rmdnote}
+<div class="rmdnote">
+<p>The RStudio IDE is built on Chromium, some of these tools will therefore also work in RStudio.</p>
+</div>
 
 The easiest way to access the developer tools from the browser is by "inspecting": right-click on an element on a webpage and select "inspect". This will open the developer tools either at the bottom or on the right of the page.
 
-\begin{figure}[H]
-
-{\centering \includegraphics[width=1\linewidth]{images/devtools} 
-
-}
-
-\caption{Google Chrome Devtools}(\#fig:chrome-devtools)
-\end{figure}
+<div class="figure" style="text-align: center">
+<img src="images/devtools.png" alt="Google Chrome Devtools" width="100%" />
+<p class="caption">(\#fig:chrome-devtools)Google Chrome Devtools</p>
+</div>
 
 The developer tools pane consists of several tabs but we will mainly use:
 
@@ -501,23 +481,23 @@ function foo(){
 foo();
 ```
 
-\begin{rmdnote}
-Accessing variables from the parent environment (context) is useful in
-JavaScript but should not be done in R
-\end{rmdnote}
+<div class="rmdnote">
+<p>Accessing variables from the parent environment (context) is useful in JavaScript but should not be done in R</p>
+</div>
 
 ### Document Object Model {#basics-object-model}
 
 One concept which does not exist in R is that of the "DOM" which stands for Document Object Model; this is also often referred to as the DOM tree as it very much follows a tree-like structure.
 
-\begin{figure}[H]
-
-{\centering \includegraphics[width=1\linewidth]{images/02-dom-viz} 
+<div class="figure" style="text-align: center">
 
-}
+```{=html}
+<div id="htmlwidget-4c9f283262b9ae6159b1" style="width:100%;height:250px;" class="grViz html-widget"></div>
+<script type="application/json" data-for="htmlwidget-4c9f283262b9ae6159b1">{"x":{"diagram":"\ngraph {\n  graph [rankdir = TD]\n\n  node [shape=box]\n  \"document\"\n  \"<html>\"\n  \"<head>\"\n  \"<body>\"\n  \"<title>\"\n  \"<h1>\"\n  \"<div>\"\n  \"<a>\"\n\n  \"document\" -- \"<html>\"\n  \"<html>\" -- \"<head>\"\n  \"<html>\" -- \"<body>\"\n  \"<head>\" -- \"<title>\"\n  \"<body>\" -- \"<h1>\"\n  \"<body>\" -- \"<div>\"\n  \"<div>\" -- \"<a>\"\n\n}\n","config":{"engine":"dot","options":null}},"evals":[],"jsHooks":[]}</script>
+```
 
-\caption{Document Object Model visualisation}(\#fig:dom-viz)
-\end{figure}
+<p class="caption">(\#fig:dom-viz)Document Object Model visualisation</p>
+</div>
 
 When a web page is loaded, the browser creates a Document Object Model of the web page which can be accessed in JavaScript from the `document` object. This lets the developer programmatically manipulate the page itself so one can, for instance, add an element (e.g., a button), change the text of another, and plenty more.
 
@@ -631,10 +611,9 @@ shinyApp(ui, server)
 
 If you then run the application and open it at the `/files/script.js` path (e.g.: `127.0.0.1:3000/files/script.js`) you should see the content of the JavaScript file (`console.log('Hello JS!')`), commenting the `addResourcePath` line will have a "Not Found" error displayed on the page instead.
 
-\begin{rmdnote}
-All files in your asset directory will be served online and accessible
-to anyone: do not place sensitive files in it.
-\end{rmdnote}
+<div class="rmdnote">
+<p>All files in your asset directory will be served online and accessible to anyone: do not place sensitive files in it.</p>
+</div>
 
 Though one may create multiple such directories and correspondingly use `addResourcePath` to specify multiple paths and prefixes, one will routinely specify a single one, named "assets" or "static," which contains multiple subdirectories, one for each type of static file to obtain a directory that looks something like the tree below. This is, however, an unwritten convention which is by no means forced upon the developer: do as you wish.
 
@@ -753,10 +732,9 @@ dependency <- htmltools::htmlDependency(
 
 About the above, the `src` argument points to the directory that contains the dependencies (`script` and `stylesheet`), this is done with a named vector where `file` indicates the path is a local directory and `href` indicates it is a remote server, generally a CDN. Note that one can also pass multiple `script` and `stylesheet` by using vectors, e.g.: `c("script.js", "anotherScript.js")`
 
-\begin{rmdnote}
-CDN stands for Content Delivery Network, a geographically distributed
-group of servers that provide fast transfer of dependencies.
-\end{rmdnote}
+<div class="rmdnote">
+<p>CDN stands for Content Delivery Network, a geographically distributed group of servers that provide fast transfer of dependencies.</p>
+</div>
 
 ```r
 # dependency to the latest jQuery

_book/1-02-basics.md

@@ -47,14 +47,10 @@ Looking at the code presented in the "Get Started" guide reveals just how conven
 </html>
 ```
 
-\begin{figure}[H]
-
-{\centering \includegraphics[width=1\linewidth]{images/candidate-plotly} 
-
-}
-
-\caption{Plotly example}(\#fig:candidate-plotly)
-\end{figure}
+<div class="figure" style="text-align: center">
+<img src="images/candidate-plotly.png" alt="Plotly example" width="100%" />
+<p class="caption">(\#fig:candidate-plotly)Plotly example</p>
+</div>
 
 Now let's look at how another popular library does it.
 
@@ -90,14 +86,10 @@ Now let's look at how another popular library does it.
 </html>
 ```
 
-\begin{figure}[H]
-
-{\centering \includegraphics[width=1\linewidth]{images/candidate-highcharts} 
-
-}
-
-\caption{Highcharts example}(\#fig:candidate-highcharts)
-\end{figure}
+<div class="figure" style="text-align: center">
+<img src="images/candidate-highcharts.png" alt="Highcharts example" width="100%" />
+<p class="caption">(\#fig:candidate-highcharts)Highcharts example</p>
+</div>
 
 The above is very similar to what plotly.js requires: import libraries, create a `<div>` where to put the visualisation. Then, to create the chart, run a function which also takes the id of the div where to place said chart and a JSON of options defining the actual chart, including the data.
 
@@ -134,14 +126,10 @@ The above is very similar to what plotly.js requires: import libraries, create a
 </html>
 ```
 
-\begin{figure}[H]
-
-{\centering \includegraphics[width=1\linewidth]{images/candidate-chartjs} 
-
-}
-
-\caption{Chart.js example}(\#fig:candidate-chartjs)
-\end{figure}
+<div class="figure" style="text-align: center">
+<img src="images/candidate-chartjs.png" alt="Chart.js example" width="100%" />
+<p class="caption">(\#fig:candidate-chartjs)Chart.js example</p>
+</div>
 
 We again observe a very similar structure as with previous libraries. The library is imported, instead of a `div` chart.js uses a `canvas`, the visualisation is also created from a single function which takes the canvas as first argument and a JSON of options as second.
 
@@ -155,13 +143,14 @@ As observed, an interactive visualisation using JavaScript will be contained wit
 
 This gives the following basic diagram; it will be broken down further in the next chapter as the first widget is built.
 
-\begin{figure}[H]
+<div class="figure" style="text-align: center">
 
-{\centering \includegraphics[width=1\linewidth]{images/03-htmlwidget-viz} 
-
-}
+```{=html}
+<div id="htmlwidget-e4c68eb61b801bb14155" style="width:100%;height:250px;" class="grViz html-widget"></div>
+<script type="application/json" data-for="htmlwidget-e4c68eb61b801bb14155">{"x":{"diagram":"\ndigraph {\n  graph [rankdir = LR]\n\n  subgraph cluster_0 {\n    node [shape=box]\n    \"HTML element\"\n    \"JSON\"\n    \"JavaScript\"\n    \"Dependencies\"\n    label=\"HTML\"\n    color=gold\n  }\n\n  subgraph cluster_1 {\n    node [shape=box]\n    \"Data\"\n    \"Chart options\"\n    label = \"R environment\"\n    color=royalBlue\n  }\n\n  \"Data\" -> \"JSON\" \n  \"Chart options\" -> \"JSON\" [label=\"serialise\" constraint=false]\n  \"JSON\" -> \"JavaScript\"\n  \"JavaScript\" -> \"HTML element\"\n  \"Dependencies\" -> \"JavaScript\"\n}\n","config":{"engine":"dot","options":null}},"evals":[],"jsHooks":[]}</script>
+```
 
-\caption{htmlwidgets inner-workings visualised}(\#fig:widget-inner-diagram)
-\end{figure}
+<p class="caption">(\#fig:widget-inner-diagram)htmlwidgets inner-workings visualised</p>
+</div>
 
 Thankfully the htmlwidgets package is there to handle most of this. Nonetheless, it is essential to understand that these operations are undertaken (to some degree) by htmlwidgets.