Transcript#
This transcript was generated automatically and may contain errors.
So we have the GitHub page we sent, and it leads us to this website that has everything we need. And we're really just starting in order, and I am going to just full screen that.
So I'll just start. And really, I'm breaking this up into five different questions, like five different sections. And what is Quarto and how to use it. Just a little refresher in case you haven't used it that much. But it isn't hopefully going to be that long of a section. It's just really making sure everybody has the same foundations down. Then moving into theming, which is changing the visual alert of your slides, content or element, which is how are we adding things to our slides and changing the way they look.
Interactivity is the next step up. So you're done basically with theming and content, right? That is, you're showing what you need to show, and it's looking the way you want it to look. But interactivity is then this next step that I just find to be fun, where we're adding a little bit more flair, and things happen when we advance the slides, and it will make more sense when we get to it. And lastly, as a roundup, and because I'm a little bit uncertain on time, we will go through some different extensions that I have created and a lot of people have created that will work well in your slide drafting journey.
Fundamentals of Quarto revealjs slides
What we really want to do here first is just understanding how we can create our Quarto revealjs slides, the fundamentals about how they work, which is really how do we create a singular slide and a section within our file, some of the time and YAML options that we need to set, and how we can change them, how we can find new ones, and a way to... We sadly need to understand what a div and what a span is, and that will become needed later. So we're just bringing it up now because that is technically a HTML-specific thing that we will be using later. But it will all make sense.
So beyond this workshop, I also have this, but it's like most likely all ways will be just a web book because this is going to be a pain to print. So everything that you will see in this workshop should also be in the book, but in a readable format instead of in a workshop format. And it also covers some things not in this workshop, but there's also a couple of things in the workshop that isn't in the book.
So the question really is, why Quarto? And I think most of you here, I assume, already know a lot of the benefits of why we love Quarto. But to those that aren't aware yet, it comes from all the work that was done with R Markdown being bundled up. Now we have Quarto, which is a literary programming device where we have a file that essentially is markdown that then can be turned into other formats like PDF, Word, HTML, so on and so forth. But it's also been extended here to work with the revealjs JavaScript framework that can create slides.
The reason why we want to use both together is that we're getting all the benefits from Quarto. One of them is that we have our Quarto cells that render the results out as we need them. So instead, how you would normally do it if you did it in a Word document or a LaTeX document without using Quarto or R Markdown is you would have your script, run the code, and then copy and paste the files over. But then the problem really becomes, what if my data changes now? I need to remember which files have updated, what numbers have changed. You're just putting this chunk in your markdown file, and it will just input it in.
But we just put all our Quarto chunks in our Quarto files. They're being rendered, moved along into our markdown files, and into the document itself. So we never have to worry about topping things over. Everything stays in one. And this can become less useful here in slides because it's less of a report and more of where we use slides is typically different than other types of reporting systems. But it's still useful getting all of these wins, especially with charts and stuff. It just works how we would expect.
It's HTML native, so it is technically a web page. So I'm showing the slides right now, and it's just a website. And we are getting all the benefits from it being a website. So you can put animations, you can put videos, and you just embed a YouTube video in here, and it should just work. But we also enabled to do the code. We're still not like moved out. I'm not showing it right now because I just thought about it right now, but we still get all of the latest features. So if you want to put an iteration in there, there are HTML frameworks around that that Quarto just supports natively. So if you use LaTeX formulas to make an iteration, it will also just render as you would expect, even though it's a website. So we're really getting the best of both worlds.
And if you really need to, there are ways to turn our slides that we're creating with Quarto and revealjs into PDFs and PowerPoint. One of them, actually, if you go to the bottom left in the slides or press M, go to tools, there's this PDF export mode, clicking that and then doing like the command P or the Windows equivalent to print the page. It will generate the PDF for us for everything that it makes sense for. So obviously, we can't print a bit embedded YouTube video to PDF. And likewise, if we have animations happening, slide transitions, they obviously also felt like disappear. But everything else should work. And if it doesn't, let us know and we can fix most of these things. So you might want a PDF or PowerPoint. We can get to that most of the time, if that is the required deliverable for you.
Creating slides: YAML and structure
So the first step you will make really looks like this. So with Quarto, we have the stuff with YAML at the top. And the only required thing here really is this format revealjs. So that is telling Quarto, hey, this thing needs to be revealjs. And then everything else just modifies what it looks like. So here, title and author, if you're setting them, creates a nifty title slide for you with the title and author. But if you omit them, it just won't do it. But this is also where we can put in other arguments that we'll show later that will be useful and that I also set. But then the rest of the document is exactly how you would expect a Quarto document to look. So we have some content in different ways, we can bold things, we can make lists. And the important note here is we are creating slides by using what Quarto H2 header. So the hashtag or pound symbol, putting two of them and then some text is what creates the next slide.
You don't have to put text there. So if you just do the two hashtags and then the new line, you get a slide without a header on it, and that's fine. So this code right here will then produce this slide that we're seeing right here, where our first slide, everything is now rendered to HTML. We have our code and it's being evaluated and put in how we would expect.
And there's two ways of really doing this. One of them is you go to the command line and do that Quarto render and in the name of your file, it produces the HTML. If you're already in a repo and it's the only thing, or at least if it's Quarto index, I'm pretty sure you can just do Quarto render, you don't need to specify the name. That's also if you're in RStudio or Positron and you're in a Quarto document, there should be a little render button you can just press too. So that's a little bit affordance as well.
Another thing you can do is the Quarto preview, which I use a lot. So if you're actively working on a document, and this isn't revealjs just specifically, this is just a Quarto thing. When you preview, it will re-render as needed. A lot of times they're on save or something like that. So you can do a two-sided view in your editor having Quarto on the left side, the render slides on the right-hand side. And then whenever you write, you see the updates on the live as it happens. And all of this is also just a thing, there's a button for it in our IDs that will handle all of that for you.
Presentation tools and speaker notes
And we just have a few presentation tools as well. If you're in the slide, you like obviously go back and forth. That's also full screen. There's a speed preview, which I'm...let's ignore it, it's fine, it's only retarded. If you press speed preview, you now see the slide you're on and the next slide coming up. You have a little timer. The timer is from when you started the speed preview.
So if you're in more of a time crunch, you know where you are, you can see what's coming up. There's also this, the bottom right area is for notes. So you can also include speed notes. These will only appear for you in the speed preview. But where this is actually useful is when I created this speed preview, and if I can make this happen, right? So now I'm doing a little two browser window situation. So left-hand side is the slides and the right-hand side is the slides and speed preview. But as I advance in one of them, both advances. So you can use speed preview in a situation where you can have two monitors and you just share the main one and then you put the speed preview on the one that you're not sharing with other people.
So that's the thing. I don't use it that much. Also, I know for positive tasks, we don't have a way to do it. So I practice a lot without speed preview, but it's there if you need it. It's a great place to put things in.
All right, YAML header real fast. So we already saw the format revealjs and the title and author, but you can put a bunch of other stuff in there too. And here's just a couple of them. I find useful for a thing. So we didn't change slide number, pro address, a bunch of different things we can really set in here. And there is a lot. And this is how you do it. You say format revealjs and put all the ones in it, and they will then update globally.
And here's how we did it. Since we set the footer, now each slide has the same footer, and we also changed everything else.
I see a question. The question is, is it possible to save the speed of your notes somewhere or to write them while you're creating the slides? So you write them as you are writing the slides themselves. So let me show real quick. So here I'm in a slide. Let me find it. Here we have a slide that. So the way, and if I preview it right here. So this is like a little bit of a, this will come later. So here we see the first slide with the objectives. The way you add, but if you do. The way you would write the notes is you would add this diff right here with notes. And you say, these are my notes, a preview, a then, and if I didn't pop it out and press speed to view. So now I have my notes. You add the notes with this little note diff within the slide, and they will then be transported in here. And my preview is messing up a little bit right now. But that's essentially how you do.
Key YAML options
So the main options I think you should really know about. If that's all you need to know is you want to know about the theme, which we will show later because that's important to do the theming. Width and height. So Quarto revealjs slides have this one thing I don't love where the content of the slides, depending on how you put it on, changes with your aspect ratio. So if I can really move images, but depending on how we are having your aspect ratio of your content, it can mess it a little bit. And we also have what I'd like to think of the chart area. And I don't like the default that much. So the default height and width gives you more space on the sides of your slides. So I typically do 1280x720 as my width and height. That makes it a little bit wider because a lot of screens now are just a little bit wider. So I always set those.
Echo is the standard thing whether it do show code or not. So it defaults to false when you're in the revealjs slide. So if you have code, it doesn't show the input code, it only shows the results. So like the chart and whatnot. So depending on what you need, you either want to just set it to true globally or true for each chunk that you wanted. But this one is also a thing you can just set in each chunk as you do. Code line numbers is on by default, and it's fine. But I find sometimes it's a little bit cluttering, especially if you're not having that many lines of code. So I think that we have to turn it off. We don't have to turn it off. So these are the line numbers right here on the left-hand side, we have these gray numbers telling you what line is which. They're on by default, you can turn them off with that YAML argument.
So it's really just a preference. I a lot of times turn them off, especially if you have large font for your code, you end up only having like 10 lines that you just say like line so and so, you don't necessarily need to reference by the line. The last one that's really important, and if you don't set it, it kind of adds a lot is the page title, and maybe I set it. So here, if you look on my browser tabs, it says Slide Traffic Workshop, what is Quarto? Because I set the page title to that string. Because if you don't do it, I think you just get like an index or like some non-informative names in your tabs. And it's just nice that when people see like Quarto on your website and your slides, it says a thing. Like that is a little bit useful.
Slides, sections, divs and spans
All right, last. What is like a slide? Well, we did kind of what a slide is, but we need to also say what divs and spans are. So we do the double hashtag to do a new slide. If you do three of them, it just becomes a smaller header inside, so it doesn't create a slide break. It's the same one. But a single one is what we call a section slide, which is really just a title-only divider, and we'll show it right now. So here, we're doing part one as a section, part two as another section, then a top of slides within each. And it looks like this. So part one has this other styling where the text is bigger and it's more available, but in the middle.
Then we move on to a normal slide, normal slide, new section, and then a normal slide after. And it has two interesting parts about this. One of them is just, if you're doing something longer, especially like how I'm doing while we're talking about multiple parts that have a clear split in them, adding a section is nice to just be like, all right, now we're moving on to something new. Another thing, if you open the menu in your slides, you have all the slides here on a list, and the sections are functional in that list, so you have this little nice divider that is also a little bit beneficial as well. But it's really mostly a visual thing, but I find it very useful to signal a section is done, we move on to the next one. But it's not at all required to include.
All right, last, divs and spans. So Markdown can tell us easily this thing is something we want to work with, so we want to make a way to denote a section of our content. And because we're doing HTML as an output, we will be using divs and spans. So a div is a very fundamental structure in a HTML page, really. This is a website, it is that we have our HTML body. It really is an HTML, a head and a body, and body is where all this stuff is. But then there's a div, and then inside it, there's probably another div, and then there's a div with a div with something. So if you're nothing, it's a div, but then there's other more special ones. There's a little P1 that is a paragraph linked or special things. But if you're nothing, you're a div, and we can specify something to be a div, and it's something that can contain any amount of content.
A span is some piece of text inside a paragraph. So if we wanted to just highlight this part of our text as something that needs styling or special attention, we would make it a span. Because if we tried to make this a div, the rendering of it will try to put on a new line. So a span is something that is easily allowed to be inside an existing paragraph, and we need to do both.
And just before we move on, I see a question about ADA compliance. I know that it has improved, and I think Mateo is in the chat as well, to help. One of the recent Quarto releases, I want to say 1.10, one of the latest ones had a lot of improvements in making it easier to do accessibility-rich document. And I know it includes some stuff like ads, but if no one posts, we will send things out about it afterwards. But that is something that we value, making sure that most things coming out of Quarto is as accessible as possible.
So the syntax to do a div and a span is like this. So you do this triple colon on that by itself makes a span. But a triple colon on by itself gives us a div, but by itself is not useful. So we can give it a CSS class, which we'll explain in the next section what that is. But we're using the syntax. So right here, we're creating a div that has these two lines in it, and we're giving it the class center. We can give it more classes, just put a little space between the names, so like period, name of class, space, period, name of the next class. And that's how we do that. A span is done with the square brackets to denote what the span is, and then identitarily brackets to put in your class name again.
This question right now, I'll take that if you want to nest divs, you don't have to increase the number of colons. It will just match to the next one. But actually, I will show, because you can still do it better. So here we have a span right here that includes something, and we have another span right here. They're both using three. You can do four. So you can do four if it just has to be a larger amount than what's inside, because we're essentially nesting. So the outside one, just to have a larger number than the inside one. But it doesn't have to be four. You can do seven, but that's a waste of time to remember to match everything.
And if you're in an IDE, I think if you have the Quarto extension now, you also did this like rainbow nest, but you don't need it. So if I do this, it still works. And if I then more deeply nest everything, it doesn't matter, but this is more of like it can help you see what happens by having this highlight, especially now with the latest follow vs. Quarto extension. We get the rainbows now, so that is helpful a lot. They're not needed though. It's really just to make it nice for you.
You should be able to nest spans as well, but then there's no extra syntax. You would just put another rounding of the brackets inside. Because we end up doing a lot of nested diffs. And you can also put many things in the braces. So like multiple classes, but we can also pass other things in. So if you just know, I just want to give it another color, you can pass in the style attribute and just how you would in a HTML setting, and that will be passed in as well. If you do the pound symbol inside, it's technically an ID. It's not as useful. I don't use it as much, but it's good to know that that's a thing, or it shouldn't matter.
I try to always put the classes first, but it doesn't really matter what you do. And we already had nesting. So nesting we can do.
I think I'm saying it doesn't need more than inner ones. But you have to start at three. It has to be at least three, but then you can go up. And this is just like a showing that is working.
We want to do some red text, so we're adding a span, setting the color. We're adding, making some diffs, change thing, and the blood isn't that much smaller. So that's not great, but that's how it should work.
Columns and layout
That's the idea of tolerance. So if you're making a slide, having things side to side is really important. And this is a great example of how we can use classes and nested diffs. So we create this tolerance diff, and inside of it we put tolerance, and we put some width.
And if you're in IDE, I'm pretty sure we even just have, if I do tolerance to tolerance, it's already Thomas as a helper if you have the Toro extension installed as a little short code. So I end up barely even writing it manually because it's just Thomas as a thing. But this is how it works. We're nesting diffs, and they have different attributes that makes it so when we didn't have our rendered slides, we now have two tolerance. So we have a left-hand side and right-hand side, and this is a very useful thing. And we will see later how much this notion can be used.
There's a question from Eric about Positron. I will let Isabel answer that one because she knows so much more about that than I do. So Positron, when you update Positron, Quarto will automatically update. So the answer is no, you do not. Thank you, Isabel.
Theming overview
All right, so now we did a very brief overview of how to make slides, as in how to actually make something that renders. But the next question is, how can we make them learn the way we want them to learn?
I'm pretty sure there's also an autocomplete tolerance thing in our studio, but I'm not perfect. I haven't used our studio in so long now, but someone else that uses it might be able to answer that.
All right, we want to change the way our slides learn, and I'm a big fan of this 10-minute theme idea, which is once you know how to do it, which is what we're doing in the slide deck, you should be able to change the way your slides learn in 10 minutes or less. Enough where they feel different than where you do. You won't be able to do everything, but you can do enough that it feels I'm happy with where we are. But you really only have to change the fonts, the colors, and the sizes. That is the vast majority of the visual changes that we have.
CSS basics
The way we specify them is with something called CSS, which is an HTML computer science thing. But it's just a language specifying how HTML learns, and it comes in a pair. So we're both having selectors and properties. The properties also specify which element we want to modify, and the properties are specifying how they should learn, and it's easy to show it. So this is what CSS looks like.
We have the selector here is this line right here, which are saying... So this is saying all the A's, where A here is just the HTML word for a link. So all the links that have the classes reveal and slide. So you go through the whole website and find all the divs that are in A type are linked that are also inside of like reveal and slidebus that's like the classes that are being attached to our slide that right now and in the taller and text iterator other properties so we can change how they look and in different ways. And there's so many different options so this is — I don't want to talk about this section too much because it's really easy to find online or for AI agent being like what's the CSS to make my code bold and twice as big and there's like a million pages coming up but this is how you do it.
Emil do you have any rules of thumb of when you should use the traditional approach like this versus brand yaml? Yes that's a great question. Brand yaml is great if you haven't — so actually we can just — actually I'll have someone post it in the chat but brand yaml is this yaml notion where you can specify how a document looks in the broad sense so it has the same notion of taller fonts and sizes so you can specify how something looks with the taller fonts and sizes but it is made to be output agnostic so you can specify one brand yaml and it will help you change not just your slides but also your pdf output your word document your shiny apps.
It really expands more it's great as a start. The problem is sometimes you I run into the brand yaml not being specific enough but it has some great options to modify a lot of things but eventually I find myself moving into also needing to do some manual css.
I typically don't reuse a theme from time to time because I'm less worried about showing what like having a brand identity and way more focused on showing what's possible to deal with document styling wise but brand yaml is great and you can mix and match too so you can use brand yaml to do all the things it does well and then use css and scss to fill in the gaps in your slides.
SCSS and Sass
CSS very powerful is used on every single website in existence basically but sometimes you feel a little wordy a little expressive it's like maybe not expressive but like that might be the opposite word of what I wanted but it can be a lot. So we will be using something called scss or sass.
So we will be using a language that compiles to scss but to css and it's easy just to show because like what we do is we write sass which then a compiler will turn into css the browser can only understand css so that's what it wants and this maybe sounds like a lot of work but the trick is that Quarto can do this for you. So Quarto handles all of this for us we just have to put in the right file name and put the stuff in it.
Just once this what's a little confusing with sass is that there's two — yeah exactly it's like scss instead of maybe I'm saying it wrong — but it's two syntaxes so there's the sass format or the scss format which they do the same thing but one uses braces and one doesn't use braces. I don't like invisible syntax so I very partial to the right hand side of things right here. So recap names — I'm calling sass is a language and a compiler that makes things that turns something in scss is the sentence we're writing it in and css is what comes out and what's being used and Quarto expects our scss files anyway.
So it's a question of how do we make a css file so we do it how we would make really any file — you go to your id new file, new file if it doesn't already have it you just say test file and we can say a color red and we just have to save it as a style as css and then it should wipe. And then because here I'm in Positron there's a little bit affordances so it also knows oh this is how you want to load and there's like a little neat things we can do.
So I talked a lot about how we can do but why do we now need another lane which they're not compiler why are we adding all these things. There's a couple of things one of them is the notion of value so like like really like variables so if you're programming this feels like natural to you like we specified once and we use it and you can technically do this in default css but it's a little bit cumbersome a little bit but we can do it easily with scss.
We specify a value at the beginning give it a color and now we just use this color value where we need it and when it goes through the compiler we did the right hand side out. The reason why this is useful is if you realize I don't love this part of the code, if you realize I don't love this blue one a slightly different shade of blue we change it once everything feeds through.
We can write some really neat — like it also has loops and like other data structures so we can do some more — this is more advanced and I'm not expecting people to actually like use everything I do well. Essentially if we have a list of colors so a pair of names and colors and you wanted to create a bunch of classes based on that we can do a for loop around it and it will generate these nice pairs.
Depending on how you write this scss file it becomes a little bit like our brand yaml file in the sense that we can just move it to the next step and just modify a little bit if we need to because it's just another file that depending on how you write it is just a generally specifying how things happen. So that's kind of nice so you just type it over fix the things change some stuff and you're done so the setup is even better so I would say 10 minutes for the first time but you can really make the slide kind of different in like two minutes by just changing the variables at the top.
Connecting the SCSS file to Quarto
So the way we're setting it up is now that we have a scss file we want to tell the Quarto document where it is so we use the theme argument in our yaml and you can technically do more. I always do d so it's a thomas separated list of things I always do default to make sure that I don't do something weird and I'm overriding something and you put a style in it. You can also do — Quarto also comes with built-in themes there's a dart theme there's a drag here a bunch of different themes you can always start with a built-in theme and just modify what you want which that's technically what I'm doing here I'm starting with the default theme and modify what I want. You can also add more and the the latest file wins so if you're modifying if you're specifying the linked color in two style sheets the last file wins so that's another thing you can do.
We have a question about AI — what models do you recommend to create optimal css files for custom themes? I don't know I believe that css at least for slides because we're not doing that much — there's so much css out there on the web and tools about it that even like the cheapest models do fairly well worth it as long as you point it towards scss and like it needs to know what Quarto revealjs slides needs to look like but other than that I think any model can really do it like that you don't need something fancy for this.
Sass variables for fonts and colors
So I alluded to this already so there's this thing called sass variables because we always show the sass in two variables and this is done in a really neat way where now that we are writing revealjs slides it has already created a bunch of variables that we can now specify in our file and then everything else updates according to it so we did so much for free right now. And the three ones that we can set that are about fonts is the presentation heading font which is what changes this with the top one and like the section one bit section one of the title one the body text is using this sass variable and then all inline toad like the blue text right here and the toad plots is with this monospace. We just set these three variables to something else and now all the text in our slide will look different.
So that's how you do it so that's how you find it you pick around the top of the import version you put it at the top and then you specify the font families like this and now your slides look a little bit different. It can be if you're not don't have an eye for fonts which I don't really have an eye for font they can be hard to tell it's different but if you put them side by side you see oh they are different but that's all you need to change to change all the fonts just three lines four lines one for import three four like the different specific ones.
If you want to find a good font I recommend like first of all just seeing what other people are doing being like oh this font is nice it's like this one does well. There's this idea of font pairings because a lot of people do a different font for the headings than the body attached and some people have strong opinions that there's pairs that work well with that so you can just click for that trial and error. The default fonts are fine and especially if you care about accessibility using commonly used fonts are typically also a great idea because the commonly used fonts are used a lot so people that maybe have a harder time seeing them are more used to them so there's a little bit of familiarity. Obviously some fonts are created to be more accessible but obscure can sometimes be detrimental as well.
All right, tell us same thing we have a number of sass variables here that changes a couple of different things right so we change to the background color the text color the title color links which is both the clickable links but also modifies the line progress bar at the bottom and the little menu button on the left hand side so you're changing all those at once and then the inline code which solid blue we are seeing right here so not the total chunk just all the inline things. We have five colors right here and we just set them like we do right so this is like a well five lines right here boom we have a dark theme.
Color contrast
Obviously it's not that easy because we still need to play how do we pit all of these so there's this notion called color contrast which is the idea of how easy some text is to read and it's based on like the color of the background and the color of the text but also the size of the text. So if you go to the bottom here I might be able to put this into the chat real fast there's many websites I like this one so you just put a foreground color and a background color in.
So here we have a background color of green and a photo of red — I'm just gonna finish my thought and then we will take the break — and it says that if you have a large font it's like the A up here right we can read days that's fine but any smaller colors at the foreground color right here and like some of the other ones these colors are too similar that they can be a little bit hard to read. So when you're pitting colors and they're like you can — and also didn't technically let the font also matters well — you didn't try it out right so when you're picking colors when we go back here the bat you want to check the background color against all the other ones and make sure they have an appropriate contrast because otherwise you're alienating a good amount of people that otherwise have a hard time seeing that.
These colors are too similar that they can be a little bit hard to read. You want to check the background color against all the other ones and make sure they have an appropriate contrast because otherwise you're alienating a good amount of people that otherwise have a hard time seeing that.
All right this is the perfect time for a 10 minute timer.
So if you want to do it let's we can do a list. This is how we would just do a normal list, unordered list in Quarto we can make it — we can make it — or by giving it giving it numbers interestingly you can also — but you don't actually have to enumerate them as you go so you can technically just have all of them one and then Quarto was up someone eventually I think might be painter will say oh you're having a numbered list but let me number them for you.
And you can continue moving in — like that's how you do the nested part of that.
Choosing colors for your slides
So we talked about how to set the colors and how to help make sure the colors work the way they should work. Then where do you get them — like some people are lucky they have a brand guideline that creative made for you so you just need to drop those colors even just like write them down and put them in and you're done. You can also find taller palace different ways.
you can also find color palettes different ways noticeably these are different color palettes than from a data visualization because we want high contrast in them and we typically also want like a very light color and a dark color or reverse to make sure that text and background work
you can also pull from images one thing i love is doing pinterest you can do like pinterest and you put in your vibe and there's a bunch of taller palettes in there i love pinterest for that
yeah so the the highlight style is different so we like it just works a little bit like so these taller changes most of the things but doesn't do exactly everything so there's like other ways of handling how toad chunks work and i will go to the bird and it explains it in detail more because it isn't that hard it's just more tedious to change how the toad blood
Sizes and CSS variables
changes last one sizes and it probably does we have some such variables this one is really neat because we have this idea of a presentation of root size so we specify that and then everything else is based off of it so the root size have some value but then the heading is set up when i say the default is set to two times the root size so i think by default the root is always twice as big like these headers always twice as big as this text so if we change the root everything else changes with it so we can either hard toad the heading sizes to a specific value or change the ratio to be like actually i want 1.8 so then these are specific here i'm showing both so i'm changing the root size and i'm hard toading in the header sizes but then i'm saying the font size of the toad bloods should be 90% of the root size
and this is what it looks like this maybe this isn't the best sizing but i wanted to show something that was felt different enough where you feel oh this is new
if you know how to set those and you don't need to set all of them you just set the ones you want right so if you already want the bad white background slides you don't need to change that one knowing about these size variables that's your 10 minutes right there you just find them set them it's fairly fast and as we can see your slides look a lot different obviously this is just a random dark theme but you can really change it to what you want fairly easily when you run out
Writing your own CSS rules
we need to do uh write our own rules so this is where you need to know css coming in and how i'm doing it if i don't know is we open our developer tool it's up there somewhere developer uh view open developer domain shift i is what i pressed there's this little button that you can click and select different things it will look different in different browsers this is a chromium based one so this is how it looks over here and so i can see here here i click i click on the heading and it shows oh there's an h2 nice but i already know how to change that but let's say i want to change the blood quote i don't know what that's called so we click on it again saying oh there's technically a p but it is inside what's called a block quote element so then we can say hey i want to change the color to to paint but it's a bad color that's that's hard to see but we can like change it around but we can see oh yeah that's nice we can do like that and also because it has all the variables in here right so you can say
attached transform and i'm like that's this neat thing where you can be like oh automatically operates everything so you do lots of things so that's how i do it i if i don't know how to do something i click this thing click on the thing see where it is then you can modify it live right here and when you're done you copy copies this out into your file and then that should work and that's what i always said
all right and that's how you write a rule so one of the things yeah i kind of already showed this right now um we can always do this neat thing where you can define a class to use multiple times so if i want instead of manually putting a span around something to like highlight a word in light of a color instead of saying color each hole blah blah every time i do it we do a short cut we can do a here one color highlight so i'm with this highlight class that changes the background colors it changes colors background colors a little bit finding liberators right to highlight
so now if i now put this highlight class on a span it will take all of those attributes and put it in here so this is like boom i want to make a point i'm highlighting right here um i use this a lot so if you need to if you want to have a couple of colors to highlight things with throughout your slide specify the class what and reuse it
um yeah so question do we know when to include the reveal and slide uh it it never i feel it almost never hurts to add it because we're in it the reason why you sometimes needs to do it is if the theme that came bundled with revealjs are specifying something and you don't put it if you just say blood throat change the color but the theme that was bundled with it said reveal slide blood throat change the color then it wins because as css has this idea of specificity and like the most precise way of specifying something wins so saying all blood throats that are in a slide in a reveal thing wins over all blood throats so putting it in will help but this is also like i think i end up doing trial and error a lot here but it's anyway
Slide variants
which is a sad answer for that there's also this other thing i call slide variants which is to just a teaser of something to do where i should have even changed a little bit but we don't change a lot so we can not just specify like we made a class as css class but for the whole slide and we add a bunch of stuff to it and this way we end up doing basically no styling in our total document we just add these classes to specific slides and then we put tons it in and then everything works and we can do some neat things here so one of the things here we can say in our variant we change the background color and the color but we can also specify other things in it so we say the headers and the links need to have a different vibe to them um i we have the section header where like the section slide is different i like the slide variant on that where give it a fun color a little pop of color to like help the people into a different uh mode if you've been around for a little bit those are syringent slides that have the inverse class that's basically a slide variant where it makes a dark mode for a slide we can do the same thing here
um i also like it for like oh if um it can also be a fun thing to do in like the slides that do the demo or the results so we have normal slides have a color but in slides with exercise have a different color so a bunch of different ways of doing this we are stepping to your turn content layout full screen
Content layout
all right so basically when you do things content shows up how it's been doing so far starts at the top moving down moving to the right and that's fine you don't need to do more than this but i'll be showing a couple of things you can do to expand this idea
tolerance while we've seen tolerance you can change the widths right so we can instead of it has to be 50 50 it can be like 40 60 whatever we must do more because it's just a div inside we can just change the class so now oh we have three times you can't really do more than like you maybe do four but eventually the width of the tile like you can't put anything in them anymore but that's technically something you can do um i also some if you really want to move something to the side of the slides easily i use tolerance where i don't put something in the left one so i want to move some times in 30 percent over i made it a two column thing or 30 percent left column and now it's moved over is it the best way of doing it no but it's pretty fast especially if you're in an ide that has to auto complete with the tolerance but this is a fast way of doing it
Obviously, if you're aligning things visually, that doesn't come across in a screen reader. It won't be able to tell that whatever is on the fifth line matches a trust tolerance, so you would have to explicitly state that in the slides itself, if that is what the question was leaning towards. Sometimes we just want text bit on the screen, and we kind of want it as big as possible, but we also don't want to fiddle with the numbers all the time. So, there's this handy class called rfit-text. If you put rfit-text around something, it uses a little bit of JavaScript and changes the font size so it is as wide as possible within the confines of the slide area, because then these slides filter the screen. So, now it's like, oh, it fits perfectly. If we put more text in it, it changes all the text to the same color. So, here we have two lines, but only the top line fits in the width. Adding two of these makes it so now they are both the same width, but obviously the font size has a different number of letters.
So, this is a fun way of just putting a thing of trust, being like, oh, never touch the test set. Put that in a bit chunk like this. Images. We can add them in a couple of different ways.
We can just add an image, how it comes and just flows. We can absolute it, and we put as a background. The way we know to put an image is how we just do things in Quarto with the syntax. There's the exclamation point, brackets, name to file, and the image just shows up.
And it moves just fine. If you put stuff before it, it moves down. If you put stuff after it, that will be below it. It is in line with everything else. There's this notion of absoluteness.
Emil, there's a question before we go any further. Do you have any good tips for how we can have text or images or divs react to the height of a div?
Oh, that's really hard. Tinkering with image height all the time. Yeah. So, the hard thing is that because these are HTML slides, it has a really good notion of how wide the slide is, but it doesn't have the notion of how tall it is because normally HTML documents allow you to scroll. There is a section in the book about how to do this. It's especially about I want to call it spread or something like that. Basically, if you have a list of elements in a list, if you only have three items on a list, sometimes it looks weird on a slide. So, getting the spacing right. I wrote some code that you can steal from the bot that helps you with the height, but that is hard. It's a hard problem just in general, and a lot of times you just have to manually put in the height, which is sadly what it is right now. Sorry, I couldn't answer better for that.
Absolute positioning and background images
The other way of adding an image is this idea of absolute. So, give it the absolute class and give it these attributes, and now the image appears where we specify it is. So, I said I want it to be near the top and to the right, and it is. I can change those and it moves around. This will then overlap with any other content you have. Very important. So, all the other content will flow how it normally does. Absolute will overlay or underlay depending on the order. You specify width, height, and then the directions. You only need one of the left and right and one of the top and bottom, depending on which is easier for you to do. You don't have to do images, absolute, words, or anything. Toad, images, text, whatever. You can really move anything around.
One quick thing to note is images by default stop at 95%. So, sometimes you're like, oh, why? I'm making the height taller, but the image stays the same. It's like, oh, because revealjs tries to stop you from having an image that is bigger than the slides. If you unset it, you can then technically zoom in and have the image be larger than the slides, if you so wish.
So, that's the thing we're showing right here. Now, we can do end-to-end easy. Another thing we can do is set an image as a background image. I don't use it that often, but it's still a thing we can do. It looks nice. The main thing, but it doesn't show it here, but one of the problems with having a background image is that it's set to the width. So, the text on top will shift in relation to your aspect ratio. So, it's really hard to place something specifically on it if you're using a background image like this. This looks fine here, but it might look weird if we're on a 4x3 monitor. So, that's my main thing. Be careful about that.
Another thing is if we put text on top of an image here, it can be hard to tell. It's hard to read because it's like, whatever. We add a little bit of styling here. I'm just adding a background color and a little bit of padding, and now we can see it. You can do whatever. There's a little bit of transparency. You don't need it. You need to play around with it. That's just a thing you can do, but that is a way to always have text on any slide, no matter the background, as long as you make sure to add enough content like this.
I have this fun idea of a float. So, you can steal it from the slide, from the web. So, you just have to copy this, and this is a really fun notion where now I'm setting a background color. So, you set this globally in your theme, and now if you set a background color or a background image, that will appear behind the slide content area. So, you never have to worry about the content of your slides being hard to read, but you still get that splash of color or, if you want to go for a mountain theme, you still see the mountain in the peripherals of your slides, but they never interfere. That's a different way of doing it. So, it's basically the same idea as before, but they're hard coded in. I find this in a way kind of fun to add a splash without actually being hard to work around.
Plots and transparent backgrounds
Plots are like how images do, but there's a couple of other things we need to do with them to make them look a little bit nicer sometimes. So, we have the width and height aspect ratio is basically the same. So, you only tune one instead of those. DPI is like dots per inch. So, if the images are put into a PNG format, it's like the resolution, and we can move it around. I find the default make the axis test a little bit too small, so I change them around a little bit. So, now we have a plot here. I think this is just a normal base up chart, but changing the sizing a little bit makes the axis look a little bit more readable. Here, it looks well because it's a chart on a white background. If we have a non-white background, it won't look good because most plotting software plots with the background, which typically is white. We can fix this. We fix them differently in different languages, sadly. So, if you do R things, you can set the background of the graphical device to be transparent in the nether chart options. So, you copy the first thing, put in the yaml. If you're in Python, you need to do it differently depending on how it's done. But you can also set the background color to a transparent color because we want to avoid this. Here, we have a lovely little off-white color, but it's a white background chart. It doesn't look great. Making it transparent makes it flow well, makes it feel in. At the end, everything needs to match. So, if you're having a dark theme, you need to then also invert all the colors you use for the chart to be white so you can see them. But adding a transparent background is just a really nifty little fast thing you can do to make it look nice.
Code highlighting and fragments
Highlighting code. We can do it one by one. So, if you set this highlighting like toad line numbers arguments in our chart, it allows us to do this neat thing where, oh, here's our toad. Let me show the first line, then the next two, then the last one. So, it's a way of going through. I actually don't use it that often, but I know that a lot of people liked it. It also computed charts. The vertical line here just specified the groups. So, there's a lot of things happening there. Sometimes, you need to do more than that, more than line by line.
One thing I do, which is way more intense, is hand-rolling it. So, I start by writing this monoclass. So, it's just making a class that makes the toad monospaced so it looks like the toad charts. And then I create this monstrosity where I'm just writing the toad as in, but now I can do spans on the toad things in I want, and I can do fragments on just the thing I wanted. The thing is, for this to work, you also need to add these invisible line breaks. So, it's a little bit of extra work to make this happen, but you can do things that you otherwise couldn't. I find this really nice, and you can do so much more with it, but I wouldn't do it on the daily. This is only if you really needed to point at something.
So, we've already seen some of this beforehand where, normally, when we advance, it goes to the next slide like this. But sometimes, when we advance, something happens on the slides like this. We're seeing, while this, in a way, could be done as a separate image, like just a new slide we're moving over, each of these list items are not a new slide. We're updating the content on our current slide. So, I think that's a fun, interesting thing to do, and we do so much with it. A lot of my fun extra work has been around really exploiting this notion. All of this comes in what we view as toad fragments. That's the mechanism that triggers something to happen on the slide instead of advancing. So, if you have a fragment on a slide, and you press next, the fragment will happen instead of moving to the next slide. It's only when we're out of fragments we move on to the next one. We've already seen this with our incremental lists, which are technically written like this. We put a div around our list and div class incremental, and there's a little bit of stuff underneath the hood to then turn it into a bunch of fragments.
This is how we see it, and we've been seeing this all along. So, basically, this is what you're writing, but technically, you could have written it like this as well. It's a shorthand that we added, but the way we do it is the fragment is another CSS class that can be picked up by the revealjs to do interesting things. So, we just add it to our divs and our spans like we would otherwise. If we don't do anything, we just put the fragment here, it will make that content appear. So, it will hide it first and then appear.
But we do so much more, and this is where the fun starts. So, it defaults to fade in, so you don't actually have to put fade in here. It just comes in it. But we can modify it, saying not just this is a fragment, but we can make it highlight in red, draw in size, fade out a little bit. So, this is how it is. So, now when we're advancing, text appears, something changes colors, it draws. I don't know why it moves, and it fades out a little bit.
So, this should work as a thing. I'm seeing a question about fragments and table columns. I am not aware of that issue, so I'll look up that later because I don't remember that being a thing. I also don't know if I use table columns that much, but I'll look into it. You can also specify the order. So, generally, they trigger as appearing. VTL is informing me lovingly that I don't need to put data here. So, you need to put data fragment index or just fragment index and give it a number, and it will appear in that number. You can also have multiple things happen at the same time. So, that's sometimes nice. You want to have text appear on one side and an image appear at the same time. Easy. You just give them the same number. So, here are out-of-order words just as well.
It comes with 10 built-in fragments, but we can add more, and this is where I find a lot of joy in life.
It comes with 10 built-in fragments, but we can add more, and this is where I find a lot of joy in life.
There are two ways of doing it. One of them is CSS, where we just give the elements some styling before and after, and then the infrastructure knows how to tween between it. We don't have to do the JavaScript. Obviously, that's more. Now, we're adding a whole new programming language, but there's a lot to do with it. So, let's see some examples. So, in the SCSS world, there's three stages. Before we activate the fragment, when is the current fragment, and after. So, we just have to think about what styles do I want before we trigger it, when we trigger it, and after. We don't have to specify all of them. So, all the ones you've seen so far only did two of them. It's only really been before and after, and current is just being treated as after. We combine the last two, but technically, we can split it into three. And you do it like this. You put this in your SCSS file. MyName here is the name of your fragment class. So, whatever name you want, everything else stays the same, and you just put some CSS in here, and that changes the different stages of your content.
All that matters. So, it has to be like this. This is the staff folder, and you just put the names in. By default, they're always hidden. So, if you want something to appear, let's start on the slides, and then maybe change color. You need to make it so the visibility is no longer. You need to unset the visibility and opacity.
it will start not being there, and then appear at the same time as it turns yellow, and it's like, that's not what we want. So, that's just a caveat here.
So, here, I'm doing a thing where I am changing. It starts gray, turns. When it's a tone, it has a color. It starts invisible, but we're kind of doing a modified version of the increment list. So, it starts being invisible.
It then shows up as, I want to say, this is a purple color, and then when the next one happens, then all the previous turns gray. So, this is really like here. Oh, no. Oh, that's not. I messed up somehow. We won't be able to see that one, but that is essentially how you do it. Maybe I should have...I don't know why I messed up here, but that's a thing. I can show it because it's in there. So, here's a similar idea. So, here, I'm showing that as I move back and forth, the before is red, turning is green, and after is blue. So, we technically have three stages to work with. We can do a lot of that. We don't have to set the tone. We can set all the other ones.
Here's another little example of why the SCSS is nice because we are reducing a little bit of... First, the visible is like another class on top of it. So, we can, in a way, remove a little duplication. We just write what we need. So, here's a way to...Oh, we're highlighting orange. So, we are updating it to say, make it so it always appears, and then when it's visible, turn it orange. Now, we have this, and we can imagine that if we're using the SCSS stretch from earlier, we can put this in a for loop and have as many different highlight colors as we want as fragments. Oh, that's what I'm showing right here. So, this stays the same, and if we want to add a new color, we just add a new color to this first line right here. Now, we have highlight colors that we just add. So, we just add as many fragments as we want because it doesn't matter. They're fairly easy to add once we have the structure done.
Tweening and fragment limitations
We can only change things that the engine knows how to tween. So, like color, text, size, border, opacity. It can fade between them. So, this is like a computer science thing where if you have an element of a certain size and shape or color, it's a size and a color, and you want it to change to a different size and color. Tweening is the act of calculating all the intermediary steps between it. So, for size, we just made a straight line of sizes and have it grow and similar color. We can just find a path in the color space, but how we do it, that's the tweening. There are different ways of doing it. But, if we don't have it, if we're trying to change between things it doesn't know how to tween, we just did an instantaneous change of it just pops out and pops in with the new one.
As a note, if you have a fragment that deals with sizes and positions, it sometimes doesn't look great because if you make text bigger but there's text below it, it shifts it down. Or, if you try to highlight a word with a span inside of a paragraph and make that bigger, not only are you making awkward changes in size, you also might force a reflow because now the words don't fit on the line. They need to go back on the next line, and it's hard to make it look nice. So, just avoid fragmenting with sizes and positions if it's a content that needs to be within other things.
JavaScript fragments
So, that's all we can do with SSS, which is, in many ways, everything we've shown so far mostly has been SSS fragments, but there's another way, which is the JavaScript ones. This is a lovely time if you use AI for agents like this because AI knows how to do JavaScript.
And, if you use AI agents, there is a still that you can load from the boot that has information on how to write fragments with JavaScript and SSS that work with revealjs and pause lines. But, basically, instead of having three states, we have two events. We are being told when a fragment is being shown, and we are shown when it's being hidden, which is basically the fragment that happens when we do throwback. This is why it's a little bit harder because the SSS knew that because it had the before and after, and it knew how to go back and forth. If we're doing fancier things with JavaScript, we need to write it both ways. So, if we have a thing that strolls down on a page, we also need to be able to stroll back up. So, sometimes, if you write a JavaScript fragment incorrectly, it's still wired forward, but then you can't go back. So, then you just need to be confident enough that you don't ever go back in your slides, and that may be fine.
So, the way I wire it up is in our YAML, we put this includeAfterBody, and in it, I put an HTML document. In that HTML document, I put a stripped tab in it where I then put my JavaScript in. And the JavaScript would be like this. So, we are putting a thing, and we are saying, oh, my class is the name of my fragment, and then this structure will know when to trigger when that class fragment is done.
We can do so many more things. One of the things we can do is we don't need content here. So, a fragment is just something that triggers and JavaScript decides what has to happen. So, here we can make a fragment and div it like this data color orange. So, when we advance that, it could change the background to orange. If we know the JavaScript to change it, we can just, in a way, put it in the fragment itself. We can put it in the div itself, the information it needs, instead of hard coding a bunch of stuff in the JavaScript. We can have it read the information from the document. Sometimes useful.
One thing you can do is this idea of scrolling. So, sometimes we have code that is too long. It doesn't fit. And you could go in manually, move your mouse in, and click on it, and then scroll up and down. But with a fragment, we can trigger the scrolling behavior, which you need to fit. Obviously, I googled this for so long trying to figure it out. But basically, there's a reveal object that's available in our slide, but that's how everything happens. That's our authoritarian slide. I'm selecting what I need, and then find out, oh, I didn't do a stroll too tall to it. This is a thing you can do if you know enough JavaScript to do it or know someone to do it. But this is really an interesting thing we can do. So, here, because I am moving forward, if I didn't add the reverse fragment, it would just stay down. So, this is like I'm doing the reverse here by saying, oh, now scroll to the top.
I have been actually using the JavaScript reveal fragments this whole time to advance these embedded slides in my slides. So, whenever I show an example, that's actually a fragment. And this is the fragment in it. It finds its way in, uses a little bit of JavaScript to attach itself to the reveal object inside, and then presses right. And the way I trigger it is then adding this empty span outside of it. So, advanced slide. So, if I'm showing a slide there that I want to advance twice, I'm putting two of these in it. So, when I advance, it knows to move it later. So, this is actually happening a lot.
We will see some of these notions of fragments later because I use a lot of them in the extensions I will touch at the end.
And you can really go really far with this. So, here we have a slide where we have toad on the left-hand side, and this is ggplot specifically, and I'm just showing the other side on the other end. And I always thought this was neat, but I also always mentally thought about a ggplot as layers. And we can use a fragment to go through this notion of animation where we're looking at things one at a time. This is very hand-drafted stuff, but in the end, this is done using fragments. Then, it's using this JavaScript library called Anime.js, and you can click the link at the footer. It brings you to a bunch of these animations, but they're done as fragments.
I think they're really nice for teaching because you can be like, it's not a video. You can say, oh, let's look at this, and we move over here, and then it's a question. You just stop. You don't advance. You can go back. You can move forward. This is technically all done as fragments. They're hand-drafted, so you either have to hand-modify stuff or use AI to help you set it up, but it's using the fragment idea, and I think that's very powerful.
They're hand-drafted, so you either have to hand-modify stuff or use AI to help you set it up, but it's using the fragment idea, and I think that's very powerful.
Quarto extensions
I am going to skip this last section just because I think it's more important we talk about extensions before people have to leave. But, again, it's all there. You can see it as you go.
Extensions. Much like with R and Python, everything is great, but where it becomes useful is its extensions, its packages, its libraries. You very rarely use Python, just Python. We very rarely just use R. We typically add in a package or a library, and the same notion extends to Quarto. We have this idea of Quarto extensions that is basically just more like Toad that other people have written that is bundled in a way that you can easily just add it to your project. And so, just a folder of different stuff that then Quarto essentially just copy-pastes into your repo, and then know how to read and add on. I'm selfishly showing mostly my stuff, but there are hundreds of extensions out there that all do different things.
You add them in your terminal, you go to the project you're in, Quarto add, and then the name. You can either do a GitHub name of something, but since this is technically just, oh, one for each idea, that's fine. It can also be a file, so you can also have extensions internally in your company, behind a firewall, whatever. As long as the terminal has access to the file, Quarto will know to copy it over, so it doesn't have to be public. You can have internal ones, as well. It just downloads everything, and then depending on it, you might want to put a little plugin. You've already seen one. This is what I call the Toad window.
So, you put it as a reveal plugin in the YAML. All the readmes of all the extensions will show how to set it up, and this one is kind of easy. You just have your ToadChart, and you put a div around it. It's a class ToadWindow, and here R, because I know it's an R thing. You put a little text on it, and it renders these ToadCharts that we've been seeing so far. So, it's just a little visual flare that adds...I find they're nice. They break it up a little bit, but they're not actually useful. They're a more visual thing that helps it. Also, because here in this, we're doing multiple file types, it's a nice little visual indicator of what type of file we're in.
Another amazing extension is the FontAwesome extension. It adds this short Toad. So, if you want to add an icon instead of just install the FontAwesome one, and you just put this little syntax, and then you just change this name right here, then it gives you all the different icons that comes with it. On top of other icons, extensions that work the same way.
that is also fragment-based. So, you do it like this. You give it a fragment name and there's also some options you can add on top of it. And now, you have this little hand-drawn fragment. So, we are highlighting, but it's fun. A little different. Another little fun thing I did is this chatlist fragment. So, you use a syntax like this all in the readme. But now, we have a little bit more of a fun, like, chatlist idea. But then, it's not super useful, but I enjoy it. Chatbubble is the same way. We're using a list of divs that now allows us to do this fun back and forth thing in slides, which is kind of fun.
This one's the most important one to show. So, if you're making slides, one of the things you probably have seen is that the image is fine and the absolute thing is fine, but it can be kind of hard to mess around with the numbers one by one. Install the editable extension, add this to it, and now, you get this banner at the top. And if you click modify, you can now move around your image as you want. Maybe you want to make it opaque. You can add a new text field right here. Let's see. So, now, you're modifying your slides as you go. You press save, and you save it overlapping. And now, you, in a way, have an IDE modifier way of doing things. In a way, I'm trying to replace PowerPoint for the data person with this. There's more support coming later.
In a way, I'm trying to replace PowerPoint for the data person with this.
But, technically, we can add arrows and shapes. We don't have it installed, but basically, you can also just drag and drop an arrow to something. There's more, but I think we're out of time, but that is partly planned as in I put more extensions than I thought I had time for.
So, we're technically out of time. I'm so happy to see all of you here. And thank you for everybody, Isabel and everybody else in the chat being really helpful with fielding questions. It definitely helped me with time as well. And some of them I didn't know. We're all in this together. I don't know everything. So, I'm grateful for all of you to be there.
