--- Title: Tools for making and giving presentations Date: 2024-11-03 Author: Fabrice Category: Tips Tags: presentation, vim, latex Slug: presenting Header_Cover: ../images/covers/pts24-talk.jpg Summary: Some of the tools I use for making and giving presentations. lang: en --- # Introduction Over the past year, I have to give quite a few presentations in different contexts: internal to the company, for open-source conferences, for business conferences… I used these different opportunities to refine a bit my presentation tools, and I just summarize them here for curious people. Please note that this blog post will only cover the tooling needed to produce slides, not what to put inside. This page may be updated, for instance if I start using yet another tool for slide making that I think is worth mentioning. If you have subscribed to this blog’s [RSS feed], you will be notified of future updates. # Making Slides For slide making, I prefer using tools that separate the content from the actual design. I’m thus not using fancy WYSIWYG tools for that. If you are not interested in that, you can already skip to the [presenting slides] section. ## LaTeX Beamer As explained in the [typst article], I’m mostly using [LaTeX] to produce/typeset documents, and presentations are not an exception. For this purpose I’m using [beamer]. For this purpose, my [vim setup for LaTeX] proved to be pretty useful, especially with the “compilation on save” feature. It allows me to have an already set up text editor for LaTeX without having to fiddle and twiddle with multiple setups. However, the backward search is not very accurate with beamer slides. ### Overlays and Graphics The main advantage, besides my familiarity with [LaTeX], lays in the [overlay] system in beamer, that is quite powerful and provides a very precise way to display elements. This overlay mechanism also compounds well with [TikZ] to design animated graphics. For instance in the example below, I can show the top part of the graph initially, then the bottom, and change the name of the last node for the second slide. That can be easily adjusted to have more steps in the process. ```latex … \usetikzlibrary{positioning} … \begin{tikzpicture} \tikzstyle{node} = [draw, rectangle, fill=blue!40, minimum height=2em] \tikzstyle{arrow} = [->, >=stealth, very thick] \node[node] (start) {Data}; \node[node, right=1cm of start] (a1) {Enc($\cdot$)}; \node<2->[node, below=5mm of a1] (a2) {Sig($\cdot$)}; \node<1>[node, right=1cm of a1] (stop) {Encrypted Data}; \node<2->[node, right=1cm of a1] (stop) {Encrypted and Signed Data}; \draw[arrow] (start) -- (a1); \draw<2->[arrow] (start) -- (a2); \draw[arrow] (a1) -- (stop); \draw<2->[arrow] (a2) -- (stop); \end{tikzpicture} ``` Resulting in: ![The last image from the above code](../examples/tikz-graph.svg "The last image from the above code"){width=66%} Moreover, you have access to the whole latex ecosystem, especially those for neat illustrations such as [tikzpingus]. **Note:** I feel compelled to say that the above technique is unsafe under fairly reasonable assumptions. Long story short you should sign first *then* encrypt and not do both in parallel. Please see [this paper](https://ia.cr/2001/045) from the Crypto 2001 conference if you want a more detailed explanation. ### Customisation It is also quite easy to customise slides with beamer. For instance, with [metropolis], from its [documentation](https://ctan.tetaneutral.net/macros/latex/contrib/beamer-contrib/themes/metropolis/doc/metropolistheme.pdf), section 8 describes where to find specific colours. As for the fonts, if you are using xelatex/lualatex, a simple `\setmainfont` suffices to redefine it. For instance, if I want to have the alert text in orange: ```latex \setbeamercolor[alerted text]{fg=orange} ``` ### Drawbacks However, LaTeX starts to slow down quickly, especially with a lot of [TikZ] drawings… On documents, it’s not really an issue as it is possible to cache the drawings with the `externalize` tikz library. However, when mixing overlays and TikZ, it starts to [need some tweaks](https://tex.stackexchange.com/questions/78955/use-tikz-external-feature-with-beamer-only). I never included them in my workflow as they make TikZ drawings more complicated than they are. ## Typst Touying ## Pandoc and reveal.js [reveal.js] is a javascript framework to produce clean and dynamic slides. My settings to generate them are liberally inspired by [Pablo Coves](https://pcoves.gitlab.io/blog/pandoc-markdown-revealjs/). [Pandoc] on the other hand is a document converter tool that supports a very extensive spectrum of formats and syntaxes. My most use case is to convert markdown to some other reflowable format (usually HTML, and sometimes EPUB). Using both in conjunction allows for quick and dynamic presentations which don’t require _accuracy_ in placements. That may be the case for lightning talks for instance. The main advantage compared to the two above solutions is that [reveal.js] takes advantage of web browser capabilities to produce dynamic transitions. Those are otherwise hard to get from PDFs (some people made custom PDF reader for that). I know that it’s also possible to use [pandoc] to produce directly [beamer] slides for instance, thus benefiting from the simpler [Markdown] syntax while having [LaTeX] as an engine. I however find this approach too rigid. It is indeed easy to feed some LaTeX‑specific commands via the YAML header, e.g., for styling. Unfortunately, when the need arises to do some specific positioning on a slide for example, then we end up with some markdown-TeX mix that I found deeply inelegant. That’s why I usually stick to LaTeX (or more recently [typst]) to produce PDFs, as these tools are designed with an awareness of the page layout (which blends well into the language). This property is not the case with [Markdown], which is a markup language for text formatting (not typesetting). ### Ease of use One nice thing about [pandoc] + [reveal.js] slide making is that, for simple intends and purpose, there are very little structural codes (contrary to [beamer] for instance where you have to define several variables before starting). From the following code, you can start making a presentation: ```yaml --- title: Example Presentation subtitle: It’s all about presenting author: Fabrice Mouhartem date: 2025-01-29 theme: solarized --- ``` Then run: ```sh pandoc --standalone -t revealjs -o output.html input.md ``` And that’s all… well, it’s just a title slide and an empty slide, but it’s the beginning of a **wonderful** presentation. Then, similarly to [typst] + [touying], a level 1 heading creates a title slide, and a level 2 heading spawns a new content slide. You can also spawn a new slide with three hyphens (`---`). ### Speaker view One of the advantage of [reveal.js] is the built-in [speaker view]. It spans a pop-up with useful pieces of information for the speaker: a chronometer, a preview of the upcoming slide and notes if there are any. Its behaviour is similar to what you can have with `pdfpc` that I’ll show later for PDF slides. ![Screenshot of the speaker view in reveal.js](/examples/revealjs-speakerview.png "Speaker View") ### Customisation - List of default [reveal.js styles] - Simple customisation with CSS: see as well for exposed variables. - However, in standalone mode, changing the font does not work well… - Create custom theme: - # Presenting Slides {#presenting-slides} ## wl-mirror ## pdfpc [RSS feed]: /feeds/all.rss.xml [typst]: https://typst.app/ [touying]: https://touying-typ.github.io/ [typst article]: {filename}../software/typst.md [presenting slides]: #presenting-slides [LaTeX]: https://www.latex-project.org/ [beamer]: https://ctan.org/pkg/beamer [vim setup for LaTeX]: {filename}../software/nvim-latex.md [overlay]: https://www.overleaf.com/learn/latex/Beamer_Presentations%3A_A_Tutorial_for_Beginners_(Part_4)%E2%80%94Overlay_Specifications [TikZ]: https://www.ctan.org/pkg/pgf [tikzpingus]: https://github.com/EagleoutIce/tikzpingus [reveal.js]: https://revealjs.com/ [reveal.js styles]: https://revealjs.com/themes/ [pandoc]: https://pandoc.org/ [metropolis]: https://github.com/matze/mtheme [markdown]: https://en.wikipedia.org/wiki/Markdown [speaker view]: https://revealjs.com/speaker-view/