xaringan Playground: Using xaringan to learn web development

Making slides with xaringan is a great way to learn more about CSS and web development.

Web Development

Garrick Aden-Buie


January 21, 2021



This year, I’m presenting a lightning talk at rstudio::globalxaringan Playground: Using xaringan to learn web development.

The talk is short and covers just a taste of how xaringan can make learning web development fun. In future posts I’ll dive deeper into CSS and web development basics for xaringan users.

For now I just want to share some of the reasons why I love xaringan for tinkering with web development ideas.

xaringan ❤️ CSS

Over the last few years, I’ve built many presentations with xaringan. There are a lot of things to love about xaringan, but one thing I’ve noticed is that xaringan presentations can be a gateway into the world of web development.

If you’ve worked with R Markdown to create a report or blog or website to share online, you’ve probably encountered a few stylistic things you’ve wanted to change. These changes tend to be small, like choosing a new font family or changing the color of links. If you don’t like the look of your report, there are lots of themes to choose from in rmarkdown, or in other packages like prettydocs, rmdformats, or cleanrmd.

xaringan is a little different. Slides are a visual medium. You probably have an idea of how you want your slides to look as you work on them.

You can get really far with plain markdown using the few little extras that xaringan provides, but at a certain point in the process of transferring your vision of your talk to the screen, you’ve probably said, out loud and not without a slight hint of frustration: I just want that thing to go right there.

In point-and-click software, this is where you’d spend some time dragging text and images around or digging through menus to make your slides look awesome. In xaringan, your slides are web page, so we instead need to turn to CSS to style our slides. I’m not going to say that one method is necessarily better than the other, just that I personally love writing code and I actually enjoy CSS. I might be weird in that respect, but since you’re still reading this I’m guessing you are too.

This is why I love xaringan. Each slide is a small, self-contained web design project. The constraints are well-defined: you aren’t building an entire website. You don’t have to make an app or think about a user interface. You just need to make this slide look great.

There are two advantages of using xaringan and CSS for our slides that I think are important. First, knowing CSS is useful in more places than just making slides. Many of the things I’ve designed for a presentation have been useful in other areas of my life as an R Markdown user and person who puts things on the internet for others to enjoy.

Second, while CSS can be daunting to learn, the stakes are relatively low with xaringan. You don’t need to know everything about CSS or web development. When you create a new slide, you only need to worry about the things you’re going to put in that slide. You don’t have to think about laying out an entire web page. And as long as you slides look good when you present them, then your job was well done.

This is why I see xaringan as a playground for trying new things. It sets you up to play with CSS, to learn something new, and to get quick, immediate feedback. Plus, it feels good to make things that look great and to share them with the world!

Not only that, xaringan has a few tricks up its sleeve. Catch the talk or wait for the next post in this series to learn more!