LFE Presentation for Erlang Factory 2014

San Francisco

This presentation was created with holpon.reveal. There is a live version of it running here. It only seemed a natural thing to do, when creating an Erlang presentation, to create the slides in a Lisp as well ;-)

The hoplon.reveal library let's you create slide decks/presentations with Reveal.js and Hoplon, using Clojure + ClojureScript.

The information that follows below is for using hoplon.reveal, or for using this presentation as the basis for your own.

Dependencies

• java 1.7+
• boot
• leiningen

If you want to build your own themes, you'll also need:

• Node.js
• Grunt
• sass

Usage

The latest version is: [hoplon.reveal "0.1.0"]

(defproject your-project "1.2.3"
  ...
  :dependencies [[hoplon.reveal "0.1.0"]
                  ...]
  ...)

You can then use it in your project like so:

(ns your-project.some-module
  (:require [hoplon.reveal :refer
              [intro chapter slide notes highlight bullet]]))
...

Although this would allow you to use the Hoplon and hoplon.reveal functions and macros, you would still need to add the Reveal.js files. As such, it might be easier to simply clone this repo and work from there (see the "example deck").

To get a better sense of how you'd use hoplon.reveal, here is a complete slide deck defined in a file called example_deck.cljs.hl (but compiled to example-deck.html):

(page "example-deck.html"
      (:require [hoplon.reveal :refer
                  [slideshow deck chapter slide bullet notes highlight
                   quicklist]]
                [hoplon.util :as util]
                [example-deck.chapter1 :as ch1]
                [example-deck.chapter2 :as ch2]
                [example-deck.chapter3 :as ch3]
                [example-deck.chapter4 :as ch4]
                [example-deck.chapter5 :as ch5]
                [example-deck.chapter6 :as ch6]
                [example-deck.chapter7 :as ch7]))


(html
  (head)
  (body
    (slideshow :theme "moon"
      (ch1/slides)
      (ch2/slides)
      (ch3/slides)
      (ch4/slides)
      (ch5/slides)
      (ch6/slides)
      (ch7/slides))))

And here's what one of the chapters (set of slides) looks like from that deck:

  (chapter :title "HTTP Kit"
    (slide :title "A Clojure web server"
     (quicklist
      "Supports WebSockets and long polling"
      "Supports HTTP streaming"
      "Compatible with Ring"
      "So fast"
      "Also a HTTP client"))
    (slide :title "Streaming example"
      (sample-code/get-http-streaming))
    (slide :title "Streaming an OutputStream (part 1)"
      (sample-code/get-http-outstream-p1))
    (slide :title "Streaming an OutputStream (part 2)"
      (sample-code/get-http-outstream-p2))
    (slide :title "WebSocket example"
      (sample-code/get-http-websocket)
      (notes "Note the unified API, allowing us to degrade to long polling")))

Dev Environment

We're going to assume that you will develop your slides inside a clone of this repo, for your convenience:

1. Open two terminals in the cloned directory.

2. Start the auto-compiler in one terminal:

   $ make watch

3. Run a dev HTTP server in the other terminal:

   $ make dev

4. Open the example deck and navigate through it!

   • http:localhost:9999/example-deck.html

5. Check out the beautifully clean source code :-)

6. Create your own slide deck!

Themeing

You can give your slide deck a feel all your own by following these steps:

1. Install Node.js on your system.

2. Install Grunt:

   $ npm install -g grunt-cli

3. Install Saas:

   $ gem install sass

4. Change directory:

   $ cd resources/assets/reveal.js

5. Install any missing deps for Reveal.js:

   $ npm install

6. Duplicate any needed .scss file in css/theme/source.

7. Add it to the compilation list in Gruntfile.js.

8. Add any needed images and update your .scss file(s).

9. Update any of the css/theme/template/*.scss files that you need.

10. Run `grunt themes``.

11. Update your hoplon.reveal slideshow to use the new theme, e.g.:

      (html
        (head)
        (body
          (slideshow :theme "my-new-theme"
            ...)))

License

Copyright © 2014, Clinton N. Dreisbach