Reveal.js

http://lab.hakim.se/reveal-js/#/

by shandip • 13 years ago

286 50 13 years ago

lab.hakim.se

NKCSS• 13 years ago

Been around for a good while, but still awesome.

You should check out all his labs on http://hakim.se/

Be ware that most of the stuff there is just PoC and you may have some issues trying to adapt them, but the showcases are awesome :)

chid• 13 years ago

Is there anything new about this?

tillinghast• 13 years ago

Not really. But it's awesome. I'm ok with being reminded of awesome things.

crazcarl• 13 years ago

I had not seen this before. This is pretty neat.

hakim2• 13 years ago

Don't think it has been on HN since around the 1.2.0 release, so a lot has changed: https://github.com/hakimel/reveal.js/releases

cbhl• 13 years ago

Previous Discussion: https://news.ycombinator.com/item?id=4323172 (107 points, 420 days ago, 32 comments)

cburgmer• 13 years ago

I am using impress.js for all my presentations: http://bartaz.github.io/impress.js/

phillc• 13 years ago

I use it here and there as well. I combined it with meteor to give a presentation without having to screen share. https://github.com/phillc/meteor-impress

Example: http://phillc-cd.meteor.com/

Open in multiple tabs and click the following button in the top left and move around.

bnejad• 13 years ago

Hey this is pretty cool. Not having to use additional screen share software is nice.

susi22• 13 years ago

It's impressive. But I think it's too much and distracts from the content. Use animations wisely!

Use animations to explain concepts & context but don't make the animations your presentation!

marksbrown• 13 years ago

The way this has been recently tied into `ipython notebook'[1] is surprisingly nice.

[1]http://www.youtube.com/watch?v=rBS6hmiK-H8

captn3m0• 13 years ago

There is also a presentation hosting service, based on this at http://Slid.es

nailer• 13 years ago

I looked at Reveal recently (the Google Chrome DevTools guys use it for all their demos) for a presentation but ended up using Bespoke.JS instead (which oddly enough the Mozilla folks have been using recently):

The following presentation gives a good overview of the differences between Bespoke and Reveal: http://markdalgleish.com/presentations/bespoke.js/

(keep pressing forward...it gets more interesting as you progress)

I liked the plugins, the docs were simple, they include grunt so your style changes are applied live, and they linked to other people presentations so you could peak at what others were doing.

In particular, I was 100% willing to switch right back to Keynote the moment any JS based presentation tool made me work on the tool more than the content. That never happened, and I ended up finishing the slides in Bespoke.

sequoia3• 13 years ago

I'm confused- you stuck with Bespoke, right? It looks cool, but what recommends it over reveal.js? Did you try reveal or just look at it? I'm a reveal.js user but I'm not married to it.

ChrisArchitect• 13 years ago

comments from last year https://news.ycombinator.com/item?id=3383673

gren• 13 years ago

I've just "hacked" Reveal.js on my own prez to support some code injection and enter/leave support :-)

http://greweb.me/webaudioapi-introduction/

franze• 13 years ago

shameless plug: reveal.js works great with onsnap.js (http://miniqr.com/onsnap.r) how-to: allow microphone, start snapping

prezjordan• 13 years ago

If you like whipping up quick, simple slideshows without any effort - I've been hacking away at Cleaver [0] for the past few weeks. You write a single markdown document and it parses into a single HTML document. I built it primarily for quick presentations at my Open Source club.

[0] http://jdan.github.io/cleaver/

BinRoo• 13 years ago

For a cool example of using Reveal.js, check out my Haskell Lectures http://shuklan.com/haskell/lec01.html

daGrevis• 13 years ago

Not sure what's cooler — presentation itself or the topic.

hakim2• 13 years ago

For those of you wondering what we've changed in reveal.js since it was last on HN, have a look at https://github.com/hakimel/reveal.js/releases (everything since 1.2.0 is new). Changes include support for RTL, MathJax, Multiplexing, Leap Motion and much more.

I'm also working on making reveal.js available to folks who don't know HTML. Give it a go at http://slid.es/

azakai• 13 years ago

I've been using reveal.js for all my presentations for a while now. It's great, keep up the good work! :)

sequoia3• 13 years ago

Yay .stretch! I was resizing & using negative top margin to fit big elems onscreen- it really didn't work very well :p http://sequoia.github.io/composer-talk/#/5/2

tharshan09• 13 years ago

Just used it in my presentation for uni! via slid.es However, the computer I used only had IE. So no cool animations, but I was happy with the fallback result (scrolling)!

moondowner• 13 years ago

To people that want more classic style presentations which are exportable to PDF slides there's shower.

https://github.com/shower/shower

Used it for several presentations and I'm pretty satisfied.

GeneralMayhem• 13 years ago

I've been using slid.es for a few things recently. It's really well-made, gives you a workable GUI with the option to edit HTML directly, gives you free cloud storage for your presentations, and is a nice change of pace and extra bit of glitter compared to Powerpoint. A job very well done.

lallysingh• 13 years ago

I ended up presenting my PhD with this and a mix of d3.js and inkscape-generated svg. You can do a lot with this, especially if you tune down the transitions, colors, and fonts a bit.

sequoia3• 13 years ago

+1 for reveal.js. In a talk I gave recently about a PHP dep management tool, I used reveal.js (+fragments) + `script` command + ansi2html.sh to create colorized, step-by-step terminal demos without running it in the console.

Nice cuz a) no live coding, no risk there b) dep tool requires network access for most operations; bad wifi at conference = "oh no" c) ppl can follow along at home or go over the steps themselves d) not an image so you can select/copy text.

Here's an example: http://sequoia.github.io/composer-talk/#/7/1 (press spacebar to advance). I plan to write a blog post about my strategies for avoiding live coding in presentations... one of these days :p

chops• 13 years ago

Reveal.js is great.

Up until recently, I was putting slides together using Google Docs (ugh!), and thought there had to be a different way so I started looking around. Reveal.js looked the best to me, but I wanted two things:

1) It running on a server reading new slideshows automatically, and

2) To write the slides in pure markdown (like how some others use `---` for slide separation).

I ended up hacking together a quick Erlang-based slideshow server called Sliderl[1] that lists all slideshows (showing a quick preview of the first slide), and has a simple text-search. And of course, all the slideshows are rendered with Reveal.js.

1) Make sure Erlang is installed

2) clone the repo

3) put your slideshows in its "slideshow/" directory (slideshows must end with .markdown)

4) make

5) make run

6) Open browser to http://127.0.0.1:8000

I suppose it's simple if you have Erlang installed already, but if you don't have Erlang installed, you probably don't want to install it just to show some slides. A running example with some of my slide decks is at http://slides.sigma-star.com/

[1] https://github.com/choptastic/sliderl

davidp• 13 years ago

Nice.

It looks like the "pure markdown" part is built into reveal.js now: https://github.com/hakimel/reveal.js#external-markdown

Might this also address your requirement to read new slideshows (via browser refresh)?

agumonkey• 13 years ago

Being on the low end of computing power, every time I see a reveal.js based presentation I cringe. I'm not embracing the trend for fancy transition in presentation, content first I guess. Maybe there are ways to gracefully degrade slides to avoid lagging ?

TallboyOne• 13 years ago

More of the same: http://pineapple.io/tags/presentations

Kiro• 13 years ago

Everything Hakim makes is gold.

sgt• 13 years ago

I loved signing up to slid.es - for some reason it's just never that smooth, but my brain was completely on autopilot and before I knew it, I could start building slides.

As for the app itself, I'll have to play around a bit more, but initial impressions are that it's very responsive and something I wish was available years ago.

bahmutov• 13 years ago

For quick and dirty presentations, I created http://glebbahmutov.com/slides-now/ - just drag and drop .md file. Supports themes, timers, etc. Even does very nice jobs with code blocks, because I need to show code a lot.

fiddlosopher• 13 years ago

The recently-released pandoc 1.12 (http://johnmacfarlane.net/pandoc) supports reveal.js as an output format. I've been using it for some time to give talks, and it works well. The 2-D navigation structure makes it easier to find slides when there are questions.

chrisfarms• 13 years ago

Am I the only one who finds the concept of "vertical slides" a bit, errr, wrong?

A presentation is a linear process. The first time a skipped through someone's slides who had this concept (without being presented to) I missed half of the content.

Is it for "things I might not have time for"? or What am I missing here?

qznc• 13 years ago

I use them as "chapters". When there are question, I can navigate through chapters and the audience gets a repeat of the main points.

Use "space" for advancing.

steveklabnik• 13 years ago

I recently used reveal for a conference talk, and structured it so that most of the slides are vertical. My talk had 5 horizontal slides: hello, topic 1, topic 2, topic 3, and then goodbye. I started off by saying "hi, i'm gonna talk about these three things:" and then scrolling right, then going back left and saying "Okay, topic 1" and then down.

Someone who didn't see the talk but looked at the slides found it VERY confusing.

tobinharris• 13 years ago

Agree vertical is a bit suck. It's because it's much more complex to navigate - you're twice as likely to get lost as your brain works hard to remember it's position in a 2D space, much harder than a 1D "line" I think.

The need for drill-down is valid, but I some means of entering/exiting a new context would require less brain power. Like tabbed browsing. Or push/pop from a stack.

We're trying to crack these problems with some presenation tools we're prototyping. Fun fun...

alokv28• 13 years ago

I still prefer Keynote to JS presentation tools since playing with layout is easier manually than with css (for me).

But one killer feature Keynote lacks is slide inheritance. I love using build-outs and I wish I could edit a parent slide and have the changes propagate to its children. This feature would be much easier to build out with a JS presentation framework.

RealCasually• 13 years ago

Sounds like Slide Masters in PowerPoint. Have you given it a try lately?

shocks2• 13 years ago

I wrote a cool little node application for reveal.js that lets you control the slideshow with your phone over websockets.

Reveal.js is great! :D

https://github.com/wridgers/slide

mwagstaff• 13 years ago

Just created an account here to say I downloaded this and gave it a go... Very cool indeed, and love the use of socket.io! :)

shocks2• 13 years ago

Awesome. Glad you like it. :)

efyx• 13 years ago

Another framework for making presentation that I love is Impress.js : http://bartaz.github.io/impress.js

It's a bit different and more technical than Reveal.js but it allow you to create fully customizable and unique presentation.

deathanatos• 13 years ago

“Hold down alt and click on any element to zoom in on it using zoom.js. Alt + click anywhere to zoom back out.”

Alt+mouse is bound to "move window" by default in GNOME (and perhaps others), and your event handlers will never get fired. (Personally, I love this keybinding: IMHO, it's a every quick and efficient way to move windows, since it increases the "catchable" area to the entire window, not just the title bar.)

Also, did anyone else notice that progress bar at the bottom?

wildmXranat• 13 years ago

It was great and it looks like it's just steady as she goes. Good job.

oddshocks• 13 years ago

I suggest that you make the alt-click shortcut something else. Many Linux users have alt-click/drag mapped to moving/resizng their windows.

rcthompson• 13 years ago

Protip: In addition to standard fullscreen, Chrome also has a "Presentation mode" that makes all the browser UI autohide at the top and makes the content full screen. Useful if you don't want the browser UI cluttering up your presentation.

Reveal.js

Related Stories