High quality UX controls rarely are. I love slides.com and pay for the premium option to support the efforts. It’s awesome that they let you take a zip extract of the html/js version and run your whole presentation offline, which is handy at conferences. You can also export to PowerPoint and pdf too, which is was useful a few times.
+1 on Reveal. My last job required a fair amount of lessons with Jupyter. Reveal let me stay in the browser for both slides and code, and since it's all HTML, let me programmatically and quickly style the slides instead of WYSIWYGing in Keynote/PowerPoint.
Plus, I just ran the thing running in Docker with the actual slide HTML file in different host directories. Starting a presentation was just docker run -v.
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).
The PDF doesn't show it but I had a lot of animated gifs (almost every terminal screenshot is animated). Overall it only took like 30 seconds to assemble each slide once I knew the content I wanted to have, since it's just HTML in the end.
It also has a nice a presenter layout to see slide notes. Perfect for live streaming a remote presentation while having notes off to the side that no one can see on the stream.
The best part about it is the standalone version doesn't require running a Node server. It's just basic HTML, CSS and JS that you can open straight in a browser.
I went with a manual approach. It was more than capturing text input in a shell. I was showing things like Vim and tmux workflows, so it involved recording my entire terminal at the application level.
What I ended up doing was taking individual screenshots of each frame I wanted in the animation. Most of them were only ~5 frames long.
Then if needed, I enhanced each screenshot by adding text labels. Like when I demo'd Vim splits I wanted to put a "1", "2", etc. on each split to make it easier to see what's going on.
Then I took all of those individual screenshots and fed them into https://ezgif.com/maker which is an online tool that converts screenshots into an animated gif where I was able to configure how long each frame should stay visible before transitioning to the next one.
It sounds like a lot of work but it wasn't too bad considering I needed to sometimes add graphics to each frame and control the length of each frame. Once you get the work flow down it was pretty fast.
Interesting, I just used deck.js (I think a similar thing) to create a presentation after decades of professional power-pointing.
I decided to create my presentation in a series of markdown files, then run a script to compile them into a single HTML+deck.js side deck.
The overhead of setting the thing up originally was worth it, the iteration on the presentation (eg ability to work on a single section in a markdown editor) was much faster.
Interesting, thank you. I looked just a bit and that seemed like it required hosting, while with deck.js I just end up with a .HTML file I can send around / play locally. But it does look cool.
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 defeats the purpose. Anyone have a good solution?
Have you given the official online editor a whirl? The last time I used it, I recall it being relatively feature-complete, although there's definitely a tradeoff compared to writing HTML.
I had, however I was relying on quite a few plugins and I could not find a way of integrating it into the slides presentation without having to export it to reveal first and the editing the resulting html. Admittedly I did not have time to investigate this in depth.
My favorite Reval.js trick is to iframe my public demo site. I give a quick look into the actual thing being presented, without switching windows.
My university examiners always ave at my presentations.
I'm very happy using this tool, but I have to admit you need to be HTML savvy to be really productive. For me the WYSIWYG editors are surely a stepdown for now, and sadly I haven't seen much improvement recently.
I use pandoc + markdown to create a Beamer pdf that we use to guide the agenda for team meeting every week. It works well enough. The layouts are a little minimalist and have an academic feel but it works very well for putting together content for internal teams.
pandoc is magical software. One of those rare examples of a tool that does everything you would hope it does (and more) and nearly always does so correctly or as expected.
Alas that's not exactly the case for all language inputs. LaTeX conversion is patchy . Doubtless because of the sprawling ecosystem, but still, even support for pretty core packages is left still wanting.
FYI: Slideshow (S9) [1] lets you write your presentations in markdown and than lets you pick one of many template packs [2] such as Reveal.js, Bespoke.js, Deck.js, Shower.js, S6 and some more.
[1] http://slideshow-s9.github.io/
[2] http://slideshow-templates.github.io
PS: Yes, Slideshow (S9) is basically a static website generator / compiler for (web) presentations.
Can anyone recommend a realtime remote presentation solution? That is, something that updates the slides for the viewers as well, to use instead of sharing a screen with slides.
Good question. Would also be interested in this, as something to accompany [insert video conferencing tool of choice] to make use of dual monitors sensibly.
It would be very useful for schools. I have to grade quite a few presentations and many students have crappy internet so a lot of the times the slides appear smudgy and I have to go over them manually after the presentations.
Having the slides automatically synced during presentation would require way less bandwidth than screen sharing and thus result in a better experience for both parties.
I used this to present my weekly updates to clients and offered a url for them to follow along. I still screenshared for those who couldn’t be bothered.
Would be nice to stream audio directly with the presentation to facilitate things like investor calls without requiring a full conferencing solution
I made something like this for my wife with clojure and clojurescript. Basically it used websockets to broadcast a url to the clients and the client displayed the image at the url with some css decoration.
She was doing phone conferencing for audio at the time.
Worked really well for its purpose and was super simple.
She has since moved to zoom and just does plain screen shares now.
I work for Beautiful.ai - we have this, but currently behind a feature flag. We'll be releasing what you described soon - the reason it isn't fully released yet is that you still need some kind of conference call link, and having two links gets a bit awkward for viewers. We're also working on a way to record video with synchronized slide advancement for an asynchronous "meeting" with the same intended effect. Let me know if you want to chat or check it out.
Take a look at BigBluebutton [0]. It allows presentation sharing in a nice way and is generally built for sessions with 50 or less users. You have to self host it though but they have a nice install.sh script.
We have a few customers beta testing liven.io right now, which does exactly this. Primarily we're working with venues to coordinate presentations / livestreams across multiple screens (think main pres on one screen, event agenda on another, speaker timer on another, etc.), then broadcasting that out for a remote or hybrid event. It's all browser based and runs on websockets - if that sounds interesting feel free to reach out and you can try it out!
I feel the design constraints enforced (size / amount of text per slide) is awesome, but at the same time very limiting for technical presentations where large amounts of text data is pretty important.
Does anyone else have this issue / work around it? Maybe I suck at designing slide decks, but I just feel that the ability to break design rules easily is sometimes a must-have.
Wow, spent some time fiddling with this framework. I really like it and I think the potential is huge, unfortunately I am too lazy so I will probably just stick with PowerPoint. Maybe make an adapter and publish to this format is possible..?
I did something along those lines a few years ago but the scripts for it are long since gone. The basic workflow was to compose the deck in LibreOffice and then do a few conversions:
- ODT -> PDF
- PDF -> directory of PNG images
Then all you need is a basic web page with an image and some nav buttons, coupled with some JS that knows the list of files and can update the image's URL based on nav button clicks. At the end you have a portable web slide deck.
Fancier setups are definitely possible (you could for example mimic multi-monitor presenter mode by having multiple
pages where one drives the other via websockets, or even just add a timer and presenter's notes) but it gets
around having to hope that the other side has a decent PDF reader or a presentation editor that likes your preferred file format.
I use it _because_ I’m lazy. :) PowerPoint is fiddly. Emacs and org-reveal is simple. Just edit in plaintext org. Press a key command and the browser shows the result. Presentation can be version controlled in git.
Take reveal.js to the next level with markdeck. It a dockerfied version of reveal using markdown and graphics generated on the fly with asciitosvg and graphviz.
https://github.com/arnehilmann/markdeck
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).
- (edit) The scroll bar always shows where you are in the slides.
I keep recommending this to my colleagues, but they're still sticking with PDFs and PowerPoints.
Fascinating idea. I guess the current format is the result of over head transparencies or basically a book format. No reason to stick with it, unless you have to be conservative.
I’m a big fan of reveal.js via reveal-md: https://github.com/webpro/reveal-md. Makes it very easy to quickly create good looking slides without clicking around GUIs.
I've dabbled with reveal-md a bit and I like it, but I really want to love it more. I found that, even as a programmer, presentation slides is one of those things that I just wish I'm using a WYSIWYG GUI editor to create. I remember trying out reveal-md; and a little while later, went back to Google Slides next time, and found it simply more liberating to write slides in a GUI. I'll admit this may simply be personal preference though. Or I simply need to give it more time to try to write slides in markdown?
I've got a dozen presentations [1] that all use reveal.js. I like it for presenting at live events because I just host them on my public website [2], and if my machine were to die, I could just borrow one from an audience member.
ClickHouse presentations are almost 100% in HTML [1].
All of them are based on Shower [2] and to prepare a new presentation I just copy-paste previous presentation and edit HTML directly... actually very understandable and convenient even for C++ developer.
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.
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.
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:
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]
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.
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.
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.
Interesting. How do you handle things like fragment markup from org mode, for example to reveal a bullet point or paragraph?
Also, is your workflow org -> MD or org-> html? If to md, as I assume it probably is, can you just call in the slide breaks (---) in org mode directly?
Could you maybe share some code?
Edit: just learned about org-reveal. How did I miss this!
108 comments
[ 2495 ms ] story [ 293 ms ] thread2013 https://news.ycombinator.com/item?id=6450223
2012 https://news.ycombinator.com/item?id=4323172
For anyone still looking for an open source editor:
https://docs.deckdeckgo.com/
https://pencil.evolus.vn/
http://thomas.nadev.net/notes/2017-inkscape.html
https://github.com/rainwoodman/inkslides
https://sozi.baierouge.fr/
Plus, I just ran the thing running in Docker with the actual slide HTML file in different host directories. Starting a presentation was just docker run -v.
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). Overall it only took like 30 seconds to assemble each slide once I knew the content I wanted to have, since it's just HTML in the end.
It also has a nice a presenter layout to see slide notes. Perfect for live streaming a remote presentation while having notes off to the side that no one can see on the stream.
The best part about it is the standalone version doesn't require running a Node server. It's just basic HTML, CSS and JS that you can open straight in a browser.
I'll be using it for future presentations.
https://www.screentogif.com
What I ended up doing was taking individual screenshots of each frame I wanted in the animation. Most of them were only ~5 frames long.
Then if needed, I enhanced each screenshot by adding text labels. Like when I demo'd Vim splits I wanted to put a "1", "2", etc. on each split to make it easier to see what's going on.
Then I took all of those individual screenshots and fed them into https://ezgif.com/maker which is an online tool that converts screenshots into an animated gif where I was able to configure how long each frame should stay visible before transitioning to the next one.
It sounds like a lot of work but it wasn't too bad considering I needed to sometimes add graphics to each frame and control the length of each frame. Once you get the work flow down it was pretty fast.
I decided to create my presentation in a series of markdown files, then run a script to compile them into a single HTML+deck.js side deck.
The overhead of setting the thing up originally was worth it, the iteration on the presentation (eg ability to work on a single section in a markdown editor) was much faster.
0: https://htns.xyz/4f98xk54
Is that what you are after, or you're talking about something else?
https://slides.com/
My university examiners always ave at my presentations.
I'm very happy using this tool, but I have to admit you need to be HTML savvy to be really productive. For me the WYSIWYG editors are surely a stepdown for now, and sadly I haven't seen much improvement recently.
* Beamer presentations
* Powerpoint presentations
* Reveal.js presentations
Kind of crazy and interesting. I made a nuclear power deck with it and it worked ok.
https://pandoc.org/MANUAL.html#slide-shows
Made me really excited and happy when I discovered it.
PS: Yes, Slideshow (S9) is basically a static website generator / compiler for (web) presentations.
What's your use case out of interest?
Having the slides automatically synced during presentation would require way less bandwidth than screen sharing and thus result in a better experience for both parties.
Would be nice to stream audio directly with the presentation to facilitate things like investor calls without requiring a full conferencing solution
She was doing phone conferencing for audio at the time.
Worked really well for its purpose and was super simple.
She has since moved to zoom and just does plain screen shares now.
[0] https://bigbluebutton.org
The official reveal.js platform at slides.com also support remote presenting, streamed to any number of viewers. More info and screenshots at https://help.slides.com/knowledgebase/articles/333924-presen...
I feel the design constraints enforced (size / amount of text per slide) is awesome, but at the same time very limiting for technical presentations where large amounts of text data is pretty important.
Does anyone else have this issue / work around it? Maybe I suck at designing slide decks, but I just feel that the ability to break design rules easily is sometimes a must-have.
- ODT -> PDF - PDF -> directory of PNG images
Then all you need is a basic web page with an image and some nav buttons, coupled with some JS that knows the list of files and can update the image's URL based on nav button clicks. At the end you have a portable web slide deck.
Fancier setups are definitely possible (you could for example mimic multi-monitor presenter mode by having multiple pages where one drives the other via websockets, or even just add a timer and presenter's notes) but it gets around having to hope that the other side has a decent PDF reader or a presentation editor that likes your preferred file format.
- 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).
- (edit) The scroll bar always shows where you are in the slides.
I keep recommending this to my colleagues, but they're still sticking with PDFs and PowerPoints.
Anyway, do you use a template? Or any tooling?
https://mark.show
proudly powered by RevealJS
- [1]: https://github.com/tlhunter/presentations
- [2]: https://thomashunter.name/presentations/
All of them are based on Shower [2] and to prepare a new presentation I just copy-paste previous presentation and edit HTML directly... actually very understandable and convenient even for C++ developer.
- [1] https://github.com/ClickHouse/clickhouse-presentations - [2] https://shwr.me/
You can make reveal.js slides in a gui at slides.io
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
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.
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.
Also, is your workflow org -> MD or org-> html? If to md, as I assume it probably is, can you just call in the slide breaks (---) in org mode directly?
Could you maybe share some code?
Edit: just learned about org-reveal. How did I miss this!
Here's a link to the source for that particular talk: https://github.com/TikhonJelvis/talks/tree/master/haskell-lo...
Should have thought to link to it in my original comment :P.