Om-powered HTML slide-decks

[Malcolm Sparks]

There are some HTML-based tools out there (reveal.js, slidy, impress.js, deck.js ...) for building slide-based presentations for conference talks.

But you usually have to write your slides in raw HTML. This feels cumbersome when you're used to writing LISP s-expressions with paredit. And if you want to build in more interactivity, you have to be proficient in JavaScript.

Last week I gave a presentation at QCon in London for which I built a slide-deck in Om. This proved (far) easier than my previous failed attempts with other technologies (including vanilla ClojureScript).

I've found that ClojureScript + Om/RevealJS + core.async (go-blocks) also makes a great platform for browser-based interactive SVG diagrams and animations. Not quite Flash, but almost, and in some ways better.

Anyway, I've uploaded the slides, code, instructions and everything to here: https://github.com/juxt/qcon2014. in case anyone else wants to try building an Om-based slide-deck at a future event.

[Base]

This is really cool. Could you share some examples of the SVG animations you have been playing with?

[haosdent]

An awesome slide.

On Sun, Mar 9, 2014 at 11:15 PM, Base <basse...@gmail.com> wrote:

This is really cool.  Could you share some examples of the SVG animations you have been playing with?

--
You received this message because you are subscribed to the Google
Groups "Clojure" group.
To post to this group, send email to clo...@googlegroups.com
Note that posts from new members are moderated - please be patient with your first post.
To unsubscribe from this group, send email to
clojure+u...@googlegroups.com
For more options, visit this group at
http://groups.google.com/group/clojure?hl=en
---
You received this message because you are subscribed to the Google Groups "Clojure" group.
To unsubscribe from this group and stop receiving emails from it, send an email to clojure+u...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

--
Best Regards,

Haosdent Huang

[Ben Mabey]

These look great Malcom! It so happens that I'm presenting on
core.async next month and so having some cljs interactive examples will
be very helpful. Thanks for sharing!

-Ben

[Malcolm Sparks]

Sure. For SVG examples please view the presentation here: http://qcon.juxt.pro - I'm sorry it isn't (yet) responsive or touch-sensitive (getting it working on my laptop before the talk became the overriding priority) so you'll need a keyboard to control it. Use the left/right arrow keys to navigate between slides.

SVG animations are on slides 19, 20, 22, 26, 29 and 30.

Source code is here: https://github.com/juxt/qcon2014/blob/master/src-cljs/qcon/main.cljs

Thanks in part to Ŝablono[1] providing the Hiccup syntax, blending together SVG, ClojureScript and Om component state is easy :-

[:g {:transform "translate(30,0)"

      :onClick (fn [_] (new-random-pick owner))}

  [:rect

     {:x 0 :y 65 :width 100 :height 100 :fill "black" :stroke "white" :stroke-width 3}]

     (when-let [n (om/get-state owner :pending-put)]

       [:text {:x 20 :y 150 :style {:font-size "64pt" :color "white"} :fill "white"} (str n)])]

[1] Ŝablonp - https://github.com/r0man/sablono

[Manuel Paccagnella]

Wonderful! I was looking for something like this for a while. I've managed to make it work following the instructions (after creating a symlink from qcon2014 to qcon), and I plan to use it for my next presentation. It'd be very useful a way to easily create blank slide decks (lein template and appropriate lib(s)?).

Thanks for sharing!

[Laurens Van Houtven]

Hi Malcolm,


Love the code, excited about the talk as well. Will it eventually end up on infoq.com/Clojure?


thanks in advance
lvh

[Malcolm Sparks]

Yes, I believe it will be posted there soon.

> --
> You received this message because you are subscribed to the Google
> Groups "Clojure" group.
> To post to this group, send email to clo...@googlegroups.com
> Note that posts from new members are moderated - please be patient with your
> first post.
> To unsubscribe from this group, send email to
> clojure+u...@googlegroups.com
> For more options, visit this group at
> http://groups.google.com/group/clojure?hl=en
> ---

> You received this message because you are subscribed to a topic in the
> Google Groups "Clojure" group.
> To unsubscribe from this topic, visit
> https://groups.google.com/d/topic/clojure/2f7cQCl6q28/unsubscribe.
> To unsubscribe from this group and all its topics, send an email to