Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Reveal.js: HTML presentation framework

revealjs.com

Post reply on HN
Print view View original

51–60 of 109 posts

Re: Reveal.js: HTML presentation framework

#51

Post by jez »

Something cool I’ve done with reveal.js slides: it’s just a web page, so why not embed an iframe? Instead of putting a slide that says “Now for a live demo!” and switching over to an editor, why not just embed an interactive editor?

For example, here’s a slide from a presentation where I was showing off some fun features we had built into Sorbet’s[1] LSP editor support:

https://sorbet.run/talks/RubyConf2019/#/18

The slide has the Sorbet web playground embedded as an iframe, so the demo file persists for anyone who wants to browse the slides later. You can play around with the same example I used on the day of the presentation.[2]

[1] https://sorbet.org

[2] https://youtu.be/jielBIZ40mw

Re: Reveal.js: HTML presentation framework

#52

Post by phist_mcgee »

kyawzazaw wrote: post #47
nwsm wrote: post #44

I used this for a pretty casual work presentation. It came out nicely and the presentation went without a hitch. I liked the flexibility in slide progression (you can easily create a graph of sorts to pick different paths to go through as a presenter, instead of just a linear progression). But honestly I struggle to think of many cases where you really need HTML/JS for your presentation.

I think it's good for showcasing slides on your personal website.

Even more for work presentations as a web developer, if you want to demo live code snippets, that's totally possible with reveal within the slides. Great for brown bag presentations.

Re: Reveal.js: HTML presentation framework

#53

Post by phist_mcgee »

tra3 wrote: post #50
nickjj wrote: post #8

It's solid for creating basic slides quickly, and it supports exporting to PDF by having your printer print the PDF from a browser (it came out perfect). Here's a 100+ slide PDF of a talk I did the other month with Reveal using an out of the box theme: https://github.com/nickjj/nyhackr-cli-dev-env/blob/master/ny... The PDF doesn't show it but I had a lot of animated gifs (almost every terminal screenshot is animated)…

How do you capture terminal to gifs?

https://github.com/faressoft/terminalizer is my go to.

Re: Reveal.js: HTML presentation framework

#54

Post by thunderbong »

tra3 wrote: post #50
nickjj wrote: post #8

It's solid for creating basic slides quickly, and it supports exporting to PDF by having your printer print the PDF from a browser (it came out perfect). Here's a 100+ slide PDF of a talk I did the other month with Reveal using an out of the box theme: https://github.com/nickjj/nyhackr-cli-dev-env/blob/master/ny... The PDF doesn't show it but I had a lot of animated gifs (almost every terminal screenshot is animated)…

How do you capture terminal to gifs?

ScreenToGif?

https://www.screentogif.com

Re: Reveal.js: HTML presentation framework

#55

Post by tikhonj »

I've been doing all my talk slides for the past few years with org-mode and Reveal.js. Really happy with both the workflow and the result[1]. I've settled on a pretty simple system with three main files:

ideas.org → outline.org → slides.org

I start with unstructured thoughts, turn them into a structure of a presentation and then into concrete slides, all in roughly the same format. With Emacs, it's easy to navigate between all three files, view them side-by-side, copy/paste between them and make high-level structural changes like reordering slides, all in the same editor I use for everything else.

As a bonus, the defaults are pretty much the opposite of PowerPoint: the path of least resistance is to make simpler, more consistent slides with less text on each one.

I'd use this for any sort of presentation, but it's particularly useful for code. I can easily copy-paste code from my files into slides.org, and I get syntax highlighting in the editor to help catch mistakes. I can use syntax highlighting in the generated slides or not, depending on my needs. I haven't set this up myself, but I've seen people write simple Emacs scripts that compile and test the code from their slides—that would have caught a number of typos that made it into my actual conference presentations!

This also lets me manage everything associated with a presentation in a single git repo. This is incredibly handy, especially for presentations that have their own code or data.

Highly recommend giving a workflow like this a try. Once I got the hang of it, it became far more productive than making slides in PowerPoint, with better results to boot. It's easier to write slides in the first place, make structural changes and reuse content between pretty different presentations.

[1]: Here are the slides for the latest public talk I've given: https://jelv.is/talks/haskell-love-2020/slides.html

I turn the controls in the bottom-left corner off for the presentation itself, but I started enabling them on my website after a few people got confused on how to advance the slides.

Re: Reveal.js: HTML presentation framework

#56

Post by thayne »

EuAndreh wrote: post #22
cycomanic wrote: post #11

I really like reveal. However I still havent found a good way of creating slides. I find writing directly in HTML too tedious, but haven't really found a good other way. Most of the Markdown converters that are floating around are to restricted. At the moment I'm using org-reveal which works quite well, but I often find that the layout options lacking so I end up putting a lot of HTML into the org files which again d…

reveal.js has built-in support for markdown already https://revealjs.com/markdown/ . Is that what you are after, or you're talking about something else?

it looks like there is still a fair amount of boilerplate involved to set that up.

Re: Reveal.js: HTML presentation framework

#58

Post by shepherdjerred »

jez wrote: post #51

Something cool I’ve done with reveal.js slides: it’s just a web page, so why not embed an iframe? Instead of putting a slide that says “Now for a live demo!” and switching over to an editor, why not just embed an interactive editor? For example, here’s a slide from a presentation where I was showing off some fun features we had built into Sorbet’s[1] LSP editor support: https://sorbet.run/talks/RubyConf2019/#/18 The…

Woah that's incredible!

Re: Reveal.js: HTML presentation framework

#59

Post by marcan_42 »

jez wrote: post #51

Something cool I’ve done with reveal.js slides: it’s just a web page, so why not embed an iframe? Instead of putting a slide that says “Now for a live demo!” and switching over to an editor, why not just embed an interactive editor? For example, here’s a slide from a presentation where I was showing off some fun features we had built into Sorbet’s[1] LSP editor support: https://sorbet.run/talks/RubyConf2019/#/18 The…

I've done this with presentations about web stuff - not even an iframe, just embed the demo straight into the slides.

Also, since it's just HTML, you can also dynamically generate content. I've done things like have a bunch of subslides that just mutate content when I'm trying to telling a technical story, with javascript stepping forward the changes. Works much better than copying and pasting and editing the same slide 25 times.

Honestly, I don't think I've made any presentations that didn't use reveal.js (except when forced to) in, what, a decade now? If it wasn't reveal.js back then it was something like it.

Re: Reveal.js: HTML presentation framework

#60

Post by lenkite »

euske wrote: post #31

I tend to think that page-based presentation is becoming a thing of the past. I usually write a big sprawling one-page HTML, magnify it, and do a presentation by gradually scrolling them. The advantages are obvious: - No need to tweak the content to fit the page boundary. - Highly accessible (adjustable to any screen). - No JS. - All figures are in SVGs. - Can also support printing (just insert CSS page break). - (ed…

Can you write a tutorial on this with an example ?
Post reply on HN