Emil Hvitfeldt - Slidecraft: The Art of Creating Pretty Presentations
Slidecraft: The Art of Creating Pretty Presentations by Emil Hvitfeldt Visit https://rstats.ai/nyr to learn more. Abstract: Do you want to make slides that catch the eye of the room? Are you tired of using defaults when making slides? Are you ready to spend every last hour of your life fiddling with css and js? Then this talk is for you! Making slides with Quarto and revealjs is a breeze and comes with many tools and features. This talk gives an overview of how we can improve the visuals of your slides with the highest effect to effort ratio. Bio: Emil Hvitfeldt is a software engineer at Posit and part of the tidymodels team’s effort to improve R’s modeling capabilities. He maintains several packages within the realms of modeling, text analysis, and color palettes. He co-authored the book Supervised Machine Learning for Text Analysis in R with Julia Silge. Twitter: https://twitter.com/Emil_Hvitfeldt Presented at the 2023 New York R Conference (July 13, 2023)
image: thumbnail.jpg
Transcript#
This transcript was generated automatically and may contain errors.
This next speaker is a repeat, and we always like to ask speakers a little fun fact about themselves. And his fun fact is, he ran out of fun facts. So with that, everyone please welcome Emil.
I'm very happy to be here. This is a talk I've been very excited to talk about. I like to think about this topic as what I do when I'm supposed to do other things. So I'm sure some people in here wouldn't want to hear that.
When you spend time working on making your slides prettier for some definition of prettier, it can end up taking all the time you have. So my rule of thumb is, I set a predefined time of fixing the aesthetic of a slide, and then when I'm done with that, I don't spend more time on it. So if I have two days, I do one day of making them pretty, and then one day of filling in the content. So then you just use it, and it's the content switching kind of thing.
I'm also not trying to pretend like I know anything about how to make things pretty, but I know how to change the aesthetic of slides in Quarto, and that's what I'll show now. I don't try to at all say I know what I'm doing.
Introduction to Quarto and revealjs
So I'll be talking about what I like to call slide crafting, which is doing fun things with slides. So before we need to talk about what is Quarto. So Quarto is this new open source scientific and technical publishing system built in PaintDot. It is this new thing from Parsif, I think last year we announced it. And everybody here, I assume, know or have heard about R Markdown.
And Quarto is, I like to think of the technical, like the spiritual successor to R Markdown, except that now it works independent from R, so you also have support for Python, Julia, Observable, and it has room to improve later. It's built on PaintDot, Lua, so you don't need R installed anymore. But if you want to, you can use it with R. And yeah, it's like many, many years of R Markdown development has been distilled into Quarto, so they learned from their mistakes and now everything fits more uniformly into one package.
Quarto, so they learned from their mistakes and now everything fits more uniformly into one package.
And it works the same, like the way you would expect. So here we have like a, you can use it with Jupyter Notebooks to do Python things, you can use it how you would R Markdown. It's a little bit different syntax-wise, but it's mostly the same. You can also use Julia or Observable. So, and I assume that our scripting languages will get support in the future.
What I will talk about is one of the formats that come out of Quarto is this revealjs. So this is a framework of creating presentations and slides that are HTML slides. And these types of slides are reminiscent of like the Syringean, like Remot.js slides that we used to make. So there's some subtle differences on syntax and how actually everything works, but it's the same idea. You create basically a website, and this is what I'm using right now.
We have on the left, we have a Quarto document, which is a glorified Markdown document. So we have a YAML at the top with some information, and then we do like headers to differentiate the slides. So level two header, which is like two hashtags, is a new slide. One is a section, so I tend to use the two. So we have like a title, and then each slide just works how you would expect with Markdown. So like bullet, like you can do like the little like, you can bold things how you expect them to bold. You can create lists the same way you do too. And how we expect from a Markdown, if you add total chunks, the total will be evaluated and be posted into the slides right away.
Layout features and columns
So we have net tolems. So we have these, they are like fenced diffs. So when you add these like triple tolems, they create a diff in HTML. And if you add like a thing after, like here's its tolems, so that will get a class tolems. And then you can nest them how you want. So here we have a bit old diff, tall tolems, and inside that we have two diffs, each with the class tolem, and they have their width set to 50%, so you get 50-50 tolems. And you can do whatever, this is flexible, you can add four tolems that all has width that add up to 100, or less than 100, so you have spaces and stuff.
You can add images like absolute. So you put in an image like how you normally would, and then add the class absolute, and then with like top left, right, all these things and sizes, you can precisely put in an image where you want it to be, you don't have to try to make things work.
One thing that isn't documented at all is if you diff a whole slide, the class center, it will center the content vertically, which is normally super hard to do, but you have like this little thing that centers it vertically, and it's really like, I think it's hard to use otherwise. And then another thing is if you just want the biggest text possible, you use the class R dash fit text, and it will just make it as big as it can within the container. So that is also very fast, which just makes slides all fit text everywhere, and you get nice big slides.
Colors and fonts
So the first thing when I want to change the state of my slides is I want to deal with colors and fonts. And I'm quite basic, so I end up on Pinterest, and you can just search color palettes, and a bunch of things come up, and it's all different. You can search beach theme, and it's all beach pictures with little palettes on them. But you can find your colors everywhere. You might have some inspiration, you have some pictures, you have something that inspires you, you use the eyedropper tool and pick out a certain number of colors.
You don't necessarily want to go too overboard, and you need, I feel like you need two to at most five colors. So you need a background color, you need a text color, and then you have a color of accents. You also need to make sure that these colors work well together. So you need to make sure you've got your background, and that your text is visible when people don't have your computer right there. So you just search, like, color type chatter, you can put in some colors, and it will tell you how legible is the text.
And annoyingly, it also depends on font size, so you can't just use the best number, you need to also look, is this going to be body text or titles. And then for fonts, you can use any type of font you want. I end up using Doodle fonts a lot because you just use the little import statement, and I will show how to do that later. But you also use local files as fonts, you have a really fancy font, or a homemade font. I have a blog post that is linked at the end showing you how to use any font at all. So you can, like, do really fun things. So just finding fonts, also just Doodle fonts, like, Doodle fonts work together. I don't, I end up stealing other people's fonts because I don't know enough about pitting Doodle fonts.
SCSS variables and theming
So these basic characteristics of how your slide works are governed by these things called SAS variables. And I'll show how to set them in a moment, but at the documentation with the little link at the bottom of the slide, we have these variable names, and they are fairly, like, intuitive names. So a background color and a body color, and, like, the font families of, like, presentations and other things. So you find what you want to change, and then you set that variable.
So add your, in your mat-dom file, you specify in the YAML saying, hey, I want to add some CSS. And here we're technically using, like, a SAS, SCSS. So it's, like, a supercharged SCSS that allows us to do larger and, like, more easily variable passing. And then, yeah, so we have, again, our style slide will look like this. So here is the input statement that came in that we downloaded from Doodle. And then we just say, hey, I want the font family of the sans serif description text. So we want the presentation size, like, the text size of everything to be fairly big because otherwise you can't read it. And it needs to be, it's bigger than you think, like, you can't do 20. You need to do, like, a fairly big number. And it will depend on your font you choose. And we can say, oh, I also want to change the link color.
So you could say, and it does it already, like, you have the link color. And you can reuse this link color over here. And we want to make it 25% lighter. So there is this, like, hierarchy of light. So you can specify everything at the top, and everything just, like, flows through.
So the way I end up doing all my slides is at the very top of my CSS file, I write, I create a bunch of variables, and all theme, and then a color name. And then I just pick the colors I'm using, and then I can use those color names later. So each color or name is only really going to be used once, because if I decide this blue isn't really, like, giving what I need, you can change it once, and everything flows through.
What I also do with my colors is I create these custom CSS classes at the very bottom. You see it has .blue, and it's the color is my theme blue. And then I use that in, like, my slides, so that if I want to do some highlighting that's other than bolding, and making things italic, I can just say, hey, make this word blue, or make this area teal, and it works. And this isn't necessarily, you can also, like, you can also make these custom classes to make things bold. You can make things a specific font color, fonts, like, style, if you want to have, like, a wavy font to, like, show something is starry or something.
This becomes very manual over time, and what I do if I really feel like I want to do something kind of neat is I spend my time in my CSS, and I write these, like, themes that are, like, slide specific. So I'm saying on this slide, I want the background to be this. I want it to have these font colors, I want it to have these font sizes. If you used a Syringe, and that's an inverse theme, where you just put inverse, and then instead of being white with black text, it's black with white text. But you can, like, expand that however you want. So a little bit how in PowerPoint you have, like, a template where you say, oh, I want to now add a thing that has, like, text on one side and image on the other side. That's what I'm doing here in CSS.
So then when I'm writing my slides, I don't really use much theming. When I write the slides, I just add the theme type I want for each of the slides. So you get, like, slides that look like this. So now, like, it just knows everything. This is the background. It's just the SVG that has a little animation in it. But you can also say, like, here, like, there's a bit old globe on the right-hand side. And the CSS knows that and is restricting the area where the text will happen. So you don't have to do it manually every time. You set everything up front, and then you just write your slides real fast.
And a lot of these can also be made to, like, be re-shared. So, like, you create it once. You create your talk slide that has all the colors you need. It has, like, a different, like, type of slide. You write it once, and then you use that every time moving forward.
Fragments and JavaScript interactivity
So another thing that I don't like about real slides is the way the content is. So the background just fills the screen no matter the size of the screen. So if you put in an image in the background, and your presentation dimensions is different than your computer dimensions, it might overlap with text because the background isn't absolute. It's based on the dimensions of the slide. So I wrote this Tor extension. So this is, like, it's basically revealjs slides, but they behave how, like, Syringe and Deadware, like. The slide content is always fixed in space, and then it just adds, like, a background color on the side.
One thing to add a little bit of, like, pizzazz to your slides is this thing called fragments. So you're specifying what needs to happen, and these fragments happen one by one. So you say there's a fragment. It defaults to, like, fading in. So when we go forward, the text that says fade in fades in. Then the next one will be the next sort of thing. It says fade out. It will fade out. And the things that says highlight red will highlight red.
But we can also create our own fragments. So it comes from, like, 20 different ones. But we might want to do something a little bit more fun. So this is, like, a template of how it works. So you just copy this in and change the blue part to the name of what you want to call your fragment. And then you fill in the blanks. So here in this specific one, I want to say it needs to just look normal to begin with. But then when it becomes visible, it needs to have a background color of orange. So this means that when you have a new slide that you can do, like, you're highlighting, which I feel like this is more highlighting than, like, changing the color.
Where things become a little bit more fun, I think, is this is just a HTML page that does some fancy things. And right now in this page, it has a JavaScript object that is, like, what the slides are. So this, like, reveal object has a lot of information about the slide and is used to modify it. So if I go into the console and press reveal.left, it will go back a slide. Or I can, like, go forward a slide. I can get, like, how far I am on my slides and find out all this information about the slide. Or, like, do things about it. I can shuffle the slides, which is kind of fun.
What it has is these event listeners. So every time, like, first one, every code that is inside this, like, parentheses that says slide changed is run every time a slide is changed. Or you can run some arbitrary JavaScript code every time the window is resized. So if there's some things you can't do, if you know enough JavaScript, you can do anything you want.
What I found that what I want to spend time moving forward working on is this idea of fragment shown and fragment hidden. So every time a fragment is shown, you can also call arbitrary JavaScript code. So that's actually what I've been doing to do the, whenever I press forward, the embedded slide that moves forward. So I added advanced slide fragment, and every time it goes forward, it uses some JavaScript to find the iframe and advance it. And it also works backwards, so I also have it moving backwards. So when I hide it, so if I go back and forth, the slides inside work with me.
And you can do more fun things with this. This is maybe not the, it's a way of hiding things, but you can add trader custom animations in JavaScript. So when you click something, something unfolds. You can do a lot of things, you can change. Things that you might not be able to do with CSS, you can now do with JavaScript. So this is where life becomes really hard for someone like me, because I have a real job, and I can't spend my time just writing slides all the time.
So this is where life becomes really hard for someone like me, because I have a real job, and I can't spend my time just writing slides all the time.
I wrote a very stagnant blog post series where I try to condense some of these points, and I'm trying to add more. So if you're interested, find me. I'm immediately everywhere. So I'm easy to find. Thank you.
