Transcript#

This transcript was generated automatically and may contain errors.

Okay, today I am so excited to introduce our featured Lab Manager who is a two-time guest he's in the Leaderboard for repeat guests at the Data Science Lab, Emil Hvitfeldt. Thank you so much for being here. Would you like to introduce yourself?

Thank you for having me. So I'm Emil Hvitfeldt. I'm on the Tidy Models team, trying to make modeling better. And in my spare time, I do a little bit of slide art, which is what we'll be talking about today.

It's his secret passion. We're going to talk all about that today. I'm also joined by Isabella Velasquez. She is here. Would you like to say hello? Hi, everyone. Thanks so much for joining.

All right. I say let's go ahead and get started. So Emil, today we are going to be talking about slide crafting in Quarto. And slide crafting, I feel like, is a word that you use a lot. I like it. What we're really talking about is the output format of Reveal.js and all of the magical extensions that you have been working on over the years, including very recently, to make slides better. Would you like to share your screen and give us a little bit of a primer?

Quarto revealjs basics

So everything we'll be doing today is Quarto-related. So it's how you would expect everything to be. So you do Quarto, and you put a format. But we're doing slide crafting, or making slides, presentations. And the main difference here is we're setting a different format. So here is an example of where we create an HTML page and also make PDFs in different ways. But by setting this format to Reveal.js, we are getting something that looks like this.

So now everything is in a non-scrollable format, and we can advance and see how you would expect slides to be in a presentation format. And you can do most everything you can do in a normal Quarto document. So we have a whole chunk highlighting, a little animation highlighting. You can basically do everything you expect and a couple of things that are specific to slides.

So one of the things, which we'll get to later, is normally you press the arrows to advance to the next slide. But sometimes you also want something to happen within the slide itself. And that's in Reveal.js terminology called a fragment. So you have the whole slide, but you're turning it into fragments. So an easy way of this is just the idea of an instrumental list.

So here we are not actually creating three or four different slides, each with one more element. They're all happening on the same page. But when we press Next, it just modifies the slide itself instead of creating copies over. And it can do all the little things like zoom in, fades in, and what have you. And this is all just built into Quarto. No extension needed. This is default behavior.

All of it, yeah. And just a few more things. There's a little menu where you can see the slides. And there's some tools, too, which I think is very nice. And you can also see it says what they are, but it's also a little... If you look at the top, it's full screen, but it's also an F. So if you press F, it full screens as well.

Yeah, my favorite one is E. If you're ever like, I'm looking at this, but I just want to print this out as a PDF. Just hit the E key, and it will turn into a PDF for you to print out. Yeah. So if you press E, it turns into a scrollable thing, which doesn't seem useful. But if you line it up and try to print it, it prints in how you would expect it to print. So as long as you're not doing anything crazy or have videos, you now have something that you can turn into a PDF.

But this is technically a website that is being hosted. This one is being hosted online, using local hosted as yourself.

Gregory is asking, does that PDF export still use Pandoc, or is there an option of exporting via Typed? So none of this uses Pandoc, technically. I'm pretty sure, and I might be wrong, because I'm not that deep in the portal. But I'm pretty sure Reveal.js is one of our non-Pandoc paths. So we're just turning something into something that Reveal.js understands. And then Reveal.js does a thing. And then this PDF export mode is just basically fancy CSS that makes it so when you try to print it, everything aligns how you would expect it to align.

Setting up a template

So, I always like to be on the desktop, at least for demos, because I have a lot of different things in here. So, you can create actually many things.

If you're in Positron and have the Quarto extension installed, which I will show in just a little bit. We don't have a slide deck project template, but we can just change our format.

So, the way it works is if you have a title, it will show up. And if you do a subtitle, it will show up. I don't really use the title and subtitle because the styling is weird and very esoteric and specific only to the title slide. And if you just remove it, it just go directly to the first section. So, you can note each new slide with like a level two heading. So, there's like these two hashtags. And that denotes a new slide.

So, if you have Quarto, you probably also have it installed as a CLI tool. So, you can use Quarto use template, and then you can put in like a GitHub name of something. So, I have a template. So, if you use Quarto use template and then Emil Hvitfeldt Quarto reveal JS template, we say I trust myself and I want it as a subdirectory. Yes. And we just call it demo. And then we can open it.

So, this is a very small demo, or the template I use for all my slides. And it doesn't have a lot, but it has enough of the things you need to remember. So, the slides look the same as how they did before. But I added a couple of things I never remember.

So, I'm setting a different width and height to everything. The aspect ratio is fine in the other one. But if you do any total slides with a font size big enough that people can read it, I find that this aspect ratio is slightly better. Because otherwise, you can only really put like 40 characters in it before it starts wrapping, and then it's not nice.

This page title here is kind of weird. Because what this actually means is the name of the tab in the browser of this specific page. Because otherwise, I think it's untitled or just index. So, if you're giving a talk, you can put the name of the talk here, and then it actually shows up in the browser totally when other people read it. I really like that.

Another thing is if you do anything where you need JavaScript, you need to put it under include after body. So, I already have just an empty HTML file with a strip tag in there. So, if I need to add some JavaScript somehow, it's already lined up how it needs to be. And it doesn't hurt right now. So, if you use this and don't use that file, it's fine. But I never remember where to put it, if it's include after, before, whatever. So, this is just everything I need.

This is where Emil mentions that this UI is not exclusive to Positron. This should work anywhere, really. Because we're in Positron, we have some affordances.

And that's why we have the preview button and the random save and some little niceties like that. But you can also do everything like this by just going. A lot of this is just that Positron's UI is just really, really changeable and customizable. So, what Emil has is a side-by-side view where his source is on the left and his terminal and viewer and everything else is on the right. And he also has render on save on. So, every time he makes a change, he's just going back to the viewer and it's listening for his changes constantly. He saves, and then that change is just showing up in the viewer.

Columns, CSS, and fenced divs

So, on a slide, we typically want to put things side by side. And since all of this is HTML, CSS, things that sometimes can be a little bit annoying to deal with, we have this built-in thing called columns. So, we start with just like this. This is a div, which is HTML, like container of content. And we add on. This syntax here means div with the class name columns. And then this is a nested structure. So, inside of it, we are putting two columns in it. And then inside those, and then we put content. So, this is a way of us to make sure we have things that happen side by side.

So, the exciting part is, since all of this is just HTML and CSS, we as the users of this can do the same things. So, if I do a thing called read... So, I'm making a CSS class called read. And I'm saying the color should be red. So, I just created a little CSS class here called read. If I now add that in here, it now turns everything in that one column red. Or the text inside that column red. So, this is obviously not the best example. But imagine that this expands out of different things. And this is basically how all the slide works in here.

Quarto extensions explained

So, I'm making a CSS class called read. So, let's look at one extension that I made recently that, in a way, showcases a similar thing to this. I'm so excited about extensions. If you don't know what an extension is, it's not a package. It's a little bit different.

So, the important thing is we first look in and see how do we install it. And most extensions have an installation link. So, we just look in. And this is a piece of terminal code that you're running. It's not in your R console. Yes. And I will show a different way to install it to the read and use. But I'm partial to the terminal. So, we then say, yes, I trust myself. So, basically, it first asks, do you trust this person to download these files?

Essentially, the Quarto add command is a very fancy copy-paste. So, it looks at the repo and then copy-pastes a folder into your working directory. There's a couple of things. So, you can exclude things. But essentially, just copy-paste over. And at the end, it also asks, hey, do you want to open the documentation?

Essentially, the Quarto add command is a very fancy copy-paste. So, it looks at the repo and then copy-pastes a folder into your working directory.

So, what really happened is it added this underscore extensions folder, if it wasn't already there. And then it added this extension called chatbubbles, which we'll see. And it has some information about what happens. And then it bundles some CSS and some JavaScript. So, it's just functionally copied over some CSS and some JavaScript that we can now use.

So, all the Quarto extensions don't go on any marketplace because they're just mostly on GitHub. But you can also have them on a file on desk or whatever. But they don't have anything to do with the OpenVSX marketplace at all.

So, they work within the project itself, right? So, you could have, which is not super recommended, but you could have multiple projects nested, but that becomes really messy. So, you can have an underscore Quarto YAML file and that denotes its project. But if it isn't there, it just assumes that it's within the folder you're in. But yeah, all these extensions are just within their folder that they're being used in.

But they're also not that heavy. Like, I feel most of them are fairly small. So, it isn't. I find that they don't bloat your project.

And the thing that I have been helping or trying to explain is, like, since it's not a package and you're not calling it, the version changes aren't as big of a problem. Like, you've downloaded this thing that is now sort of static, for the most part. I mean, for most extensions. I'm not going to say for all of them. I think there are some more complex ones. But for the most part, you are downloading assets that then you can use in your project. And you don't have to worry so much about whether or not that GitHub repo that contains that extension that you downloaded at one time changes. It's not as big of a problem.

It's just a copy-paste of a folder, essentially. Basically, all Quarto extensions are separate. Very few of them, if any, install other things. So, it is the version that it is when you download it. There's no compile thing. There's no, oh, let me find the most recent thing of all the dependencies. No, it's whatever is in the repo of the time that you did it. Yes, it's a snapshot in time copy-paste.

Chat bubbles extension

The syntax was like how we saw it before. Instead of doing columns and column, we call it the Bit 1 Chat. We either put bubbleLeft and bubbleRight as the inside names. Here we're also adding fragments so it shows incrementally. Then we put in text inside. Now it basically looks like we're sending chats on a phone. We can just go forward. It does this annoying math that no one else wants to do. When we advance far enough, it pushes things up and down, which took a while to do.

This is using the exact same idea as the columns and column idea. But now it's just slightly differently formatted. You can change it. This is where we're also saying instead of bubbleLeft, we have bubbleLeft2 and 3 to give the illusion of there's different people talking here.

This is just a little fun thing that isn't useful. It's essentially just a JavaScript file that helps push the bubbles up when it detects that we're filling the page too much. And then the CSS to do the rounding and the colors. But now that we have that, we just fill it in like this.

I love this so much. I feel like somebody has to interject here and say how cool this is because we're all silently saying it on Discord and it needs to be documented on YouTube Live, that it's so cool. Rahat had said, you said this is a funny little thing that isn't useful. It's very useful. And I feel like everybody who teaches could find a use for this. And anybody who wants to get everybody's attention in a meeting by showing them something that they don't expect to see. This is a super, super fun thing.

Rough notation extension

Another one. I'm just doing a little showcase right now of various different things. So one thing I really think fragments are useful for is for highlighting a word or a sentence. So if you want to put emphasis or something, obviously you can bold it. And you can bold it as a fragment. So a fragment has three stages. So it's before the fragment is being treated, as the fragment is being treated, and after. And the simplest form of fragment just adds different CSS styling to different ones.

But there's also this JavaScript library that's been around for a while called Rough Notation. So the way you use it is you have some text you want to highlight and then you put on it .rnFragment. So that's Rough Notation fragment. I maybe should have used a different syntax for this. But basically you do that. And then when you extend, you have this highlighter thing. So it pretends to paint over it. But it also has other modes. But it has this handwritten feel to it. So it has a little bit of noise in it. And you can just add all of that in here.

And since it's a fragment, it's like an extra step in your slides. It doesn't show and then you hit the next on your slide and it's sort of an animation that it's highlighting and underlining. And it's just a way of emphasizing a thing that happens. And there's a bunch of different types that you can do. And you can change the colors. And there's a bunch of different arguments. You can change color and whatever. All of them just happen with the inline.

And I spent some time trying to make it as usable as possible. You can set colors in different ways and whatever.

So this extension right here solves another problem. That is, if you have code... So you can add fragments and styling to text itself. But it's really hard to do it in the code chunks that happen. Because of various reasons, that's what's really hard to do. So Flourish is an extension that allows you to make fragments happen on your code itself.

So here we have a code chunk. But let's say we want to highlight a word here. We'll obviously highlight the word up here. But we can also... This was just a box around ggplot2. Or ggplot. We can use the Flourish syntax with the rough notation if they're both installed at the same time. It will note, hey, I've seen both. And then there's a thing around it. So you can also do the rough notation in code chunks which before wasn't a thing.

The rough notation is like a JavaScript library on its own, right? Yeah. So this is under bundling it in. And I'm technically bundling in something that happened in a branch. Because I wanted the animation to also work in reverse. And the project is basically abandoned. But someone did a PR to make animations happen in reverse. And I'm stealing that too. Well, with attribution.

Editable extension

So one of the issues when you're writing slides is that you might think, oh, I kind of don't... Like the image here is fine. But I want to move it just a little bit. And the normal approach to do that is here I set it with absolute. So adding this absolute class to basically anything, but really with images. You're specifying the position with left, right, top, and bottom. And you specify the widths. And it moves around. But let's say I kind of want this to be a little bit more to the right. You can go in here and change it to be 10 pixels to the left. And then you render. And it moves over a little bit, or maybe a little more. And you do 20. And it moves over just a little bit by a little bit. But this can just take a while to do.

And so where this extension comes in... You install the editable extension the way you would all the other ones. And you add little things to the YAML. Sometimes you need to add things. But you need to add it as probably a filter in the YAML to activate it. But all of that is on the README. So if you follow the README, it should just work.

But if you have the editable extension installed you will see that in the slide area, there's also a little bit of a menu at the top. So if you click on the modify... essentially, clicking on the modify... I can click on a thing like this text field over here. And I can move it a little bit around.

But I'm also moving the image around a little bit. This is a bad idea, right? Anybody who has not worked in Quarto Slides... You might not realize that clicking and dragging things like this in a visual editor mode is not possible. This is completely only made possible by Emil's extension.

So as you saw, you modify some things. You click save, and then you find where it isn't overrided. You can also copy it and paste it in. But then hopefully, it's still very well in progress, some of these new things.

And there's a lot of code to make this happen. Because I'm technically parsing the Quarto document in JavaScript with regular expressions, which you shouldn't do. But that will be... with Quarto 2, that can be linked somewhere. They're rewriting Quarto in Rust from the ground up. And that is improving speeds a lot. And once we have that with this, then suddenly we have a much faster feedback loop.

But the problem is, here's a slide. It's one slide. It doesn't take any time. But the re-render still takes a couple of seconds, depending on how long your slides are. So modifying something, pressing preview, then modifying it on the right-hand side, clicking save. And then have to re-wait for the render again. Even if it takes a couple of seconds, that becomes quite a slow loop. Where the new render is so much faster. So it will feel instantaneously once we have it set up with Quarto 2.

Themes and wrap-up

So this is slightly different than extensions. It was a Quarto theme. And then you install it. So here is the Quarto use template and then the VLJ, Sync to the Maya. It also topics a whole bunch of things. But it is this Sync to the Maya theme that I was working on. So it's just fun and happy.

I think the concept of this translates really well into just, you can create themes for slide decks if you want to. And we might want to talk about more of that later in the future if people are interested. But a lot of the hard work with setting up slides can be the first time. And if you're doing it in a corporate setting, you don't want all your people to redo all this work all the time. So you can have one person or a group of people make your theme and then make it into a Quarto theme. And then people just have to import it once. It copies all the things over. And then you just fill in content. You don't have to worry about, oh, are the colors correct? Are the sizing right?

And if you're doing it in a corporate setting, you don't want all your people to redo all this work all the time. So you can have one person or a group of people make your theme and then make it into a Quarto theme. And then people just have to import it once.

You can do little neat things like here. So I called this a slide theme. So basically for each slide, I have a theme dash and then a name. So title one, title two, section, and whatever. And obviously, they're all similar in vibe of fonts and colors and sizes. But also this one, I know that, hey, we have some flourish here on the right-hand side of the slide. So we are constraining everything to be the left-hand side. So you can have just nice little things like this.

Well, we have a poll going in Discord asking, do we want Emil to come back and talk about slide themes so that we can deep dive into it? And so far, it is exclusively yes votes, and it's climbing. So I think that Emil might be at the top of the leaderboard very soon for repeat data science lab leaders.

One is from Raha, and she was asking if there is a Quarto extension that can help dynamically create tabs or chunks. Say I'm working on a Quarto report, and I want to create a series of tabs, but the name and the number of the tabs is not something I know in advance, and I figure it out in the report based on my data. So I basically write code to write the code and render it so it looks like tabs and chunks, but it's messy and it takes a lot of work.

So my first instinct is ā€“ so since everything here is based on HTML, there's this HTML tools package that you can use to help put things in, and you just have to make sure styling works with it. So I think I'll be better helped by just looking at the example and the more precise feedback here.

And Andrew had asked about seeing some slides at a conference and seeing that they were highlighting code chunks, so certain sections of the code were more prominent or emphasized. And I wanted to let everybody know that that is actually a default capability in Quarto, is code highlighting. So you can make it so that your code chunks have highlighting in them. Yeah. There we go. That's a great example. So we have that here with the code highlighting. Like code line numbers, you pass in a range. You can also do ā€“ if you pass in a range, here it says, like, 6 to 8. It highlights line 6 to 8. Well, it actually doesn't highlight. It actually hides everything else by fading it out. If you do the vertical bar, it basically turns into fragments by first not highlighting anything, then highlighting 6, then highlighting 9. So, yeah, this is a default thing that we can do in. And there's more types of highlighting. So, yeah, go take a look at the Quarto documentation to look at all the different types of highlighting. It's very cool.

We have reached the top of the hour. Colin had a question that's in the Discord about getting clarity on how to embed a Reveal.js site into another Quarto document. Colin, we will hop in the Discord and help with that.

Thank you so much, Emil, for hanging out with us, teaching us so much. Thank you for having me. We're all clapping. Camera on Clue is clapping. You're getting tons of reactions and thank yous in Discord. We will find a time for you to come back and talk to us about creating themes for Slides Reveal. Okay, everybody, this was so much fun. I'll see you in Discord with more questions. Thank you for voting in our polls, and I will see you on Thursday at the Data Science Hangout, perhaps. Thank you for hanging out with us, everybody.