Garrick Aden-Buie | xaringan Playground: Using xaringan to learn web development | RStudio
xaringan is a quirky package that extends R Markdown to create beautiful web-based HTML slides. Some of xaringan’s quirks come from the JavaScript library it uses, remarkjs, and some of it from the unusual naming scheme xaringan uses for its functions. But under this quirky exterior lies a powerful tool for learning and practicing web development, especially when combined with infinite_moon_reader() for immediate feedback. In this talk I'll cover some basic web concepts that illustrate how fun and rewarding it can to learn HTML, CSS and JavaScript while building awesome slides in R Markdown. About Garrick: The workshop will be led by friend of RStudio, Garrick Aden-Buie, R developer and educator and Data Scientist at Moffitt Cancer Center, where he uses Shiny to enable and accelerate cancer research
image: thumbnail.jpg
Transcript#
This transcript was generated automatically and may contain errors.
Hi, I'm Garrick Aden-Buie, a data science educator at RStudio and an R and Shiny developer. I also tinker with web development, and I realize that I've learned the most about web development by working on my slides. Wanting to put images in the right place or give text the right color, it's like each slide ends up becoming a small web project, and I've learned more about web development this way than any other. So that's what I want to share with you today. How can we use xaringan as a playground to learn web development?
What is xaringan?
So wait, what? What is xaringan? First of all, it's an R package that you can install from Crayon. Second, it's a way to write an R markdown with some extra syntax, and then have your R markdown, R code, and outputs, plots, widgets, all rendered into slides. The slides are web pages in HTML, and the great thing about that is that you can use CSS to layout and style your slides. But the downside is that you have to use CSS to layout and style your slides. So CSS is a little tricky to wrap your mind around, but I think that xaringan makes it a little more fun.
CSS and the web basics
So let's first learn a little bit about CSS and the web. CSS styles are rules about how elements on the screen should appear. The most common way to link a rule to an element is to use a class. In CSS, these start with a dot. Xaringan has an extra little syntax that makes it easier to reference these CSS classes. You write the class name, then a pair of brackets, and then you put text or whatever you want inside the brackets. Here we use the complement class for the whole sentence, and the RStudioBlue class for just the word RStudio.
Inside a rule, there are CSS properties where you can set a property equal to a value, like font family to monospace, or color to tomato. Notice that because RStudioBlue has its own color, and it's closer to the word RStudio, it wraps around RStudio. It doesn't turn tomato.
The second thing to know about the web is that everything is in a box. The block boxes take up a full line of horizontal space. In Markdown, their brackets span more than one line. Inline boxes fit within block boxes and don't break the flow. In Markdown, their brackets are on the same line, like with RStudioBlue.
The second thing to know about the web is that everything is in a box.
Infinite moon reader demo
The real reason xaringan is so fun is infinite moon reader. Let me show you why. Okay, I have a little project here with some slides. It's an RMD file, and I've cleared out all of the starter text. So let's add a heading and render the slides. Great. But now let's use infinite moon reader. It's available under the add-ins menu. When we run it, it first renders the slides. But when I type, my text shows up right away. This is awesome.
So let's recreate the example we saw in the slides. I have a compliment that RStudio is cool. And I'll put RStudio in RStudioBlue. Okay, that takes care of the Markdown. But we can add HTML to the slides too, which means I can create a style block and create rules for the compliment in RStudioBlue color. Look, the slides are updated live.
Are we having fun? Classes are reusable, so let's make fun blue too. Okay, one more example. Let's create a block element called cat box. In the box, we'll put a cat. It's hard to see the block element, so let's give it a background color. Now you can see it takes up the whole line. And let's give it a height and a width, say 300 pixels each.
And rather than have it be a blue background, let's actually put a cat in the box. For this, we can use background image with URL, and then a URL to a placeholder kitten image. Now usually cats on slides are positioned off to the side a bit, and we can do this too. We'll set position to absolute, which tells the browser to put the box exactly where we want it to be, relative to the top, right, bottom, or left of the box's container, which is our slide. So let's put it about 50 pixels from the bottom, and 50 pixels from the right. Great.
One last note, when you're done, you should put these styles in a CSS file.
Okay, I hope you enjoyed this and learned a little. Go explore and have fun. And also, check out Scheringen Extra. It's an R package that brings lots of little goodies to Scheringen. Go make great slides.
