Yihui said he wasn’t going to use slides, but do some live-coding. I decided to take some notes here and commit them to the day 0 repo so they would be available.

Usually, I would make an html file using SublimeText2, but Yihui showed a way to use an R function to create and open a new HTML document!

file.edit("test.html")

You can serve the file using the servr package.

servr::httw()

If you navigate to test.html in your Viewer, you can add code to the file, save, and see it immediately reflected in the served version.

We started with a text file, which didn’t have any tags. But now we’re going to start making it more like a real HTML file.

We’re adding HTML tags into index.html. RStudio actually does tag matching! So cool.

Almost every time you start a tag, like <html>, you need to close it with a slash version, </html>. This is not true for <src>, though.

One magic thing

Greg Wilson has a quote, “…and that ninety percent of magic consists of knowing one extra thing.”

One magic thing is to right-click on any web page and select “View Source.”

Another magic thing

You can also right-click on an element and select “Inspect” to see how any element on a page has been generated.

Styling

You can style globally, using css. This doesn’t need to be in a separate file, it can just be between <style> tags in the <head> of your document. For example, we added the styling for p, which works globally.

Another way to style things is with classes. If you have something set for a tag and something for a class, you get both.

But, you can also override styles with other styles. For example, the id rule will override the rule on p. css has a heirarchical structure. You can define rules based on the order of elements on the page. div > p means a paragraph that is a direct child of div. With a space, it can be any descendent in the tree. div p could mean a paragraph that is a child, grandchild, etc. of the div

Another piece of magic– live-changing css on a web page

Yihui inspected an element in his browser (image of Amanda), and edited the css in the Styles panel.