Candy Bicycle Screencast 3 — Creating

How to author a Screedcast

Pull in the requirements.

(require '[screedcast.core :refer [panel prettyfy-form-prettyfy-eval screencast-title whats-next-panel]])

Click/tap footer to advance precisely one panel.

1/9

It's just hiccup/html...

...which is just Clojure.

[:p "This is a paragraph element"]

And this is an ordered list.

[:ol
   [:li "1st item"]
   [:li "2nd item"]
   [:li "3rd item"]]

And this is a pre-formatted code element.

[:pre [:code "(inc 99)"]]

But we'll see soon that Screedcast has a utility that displays code examples better.

2/9

Create a panel

(panel
  [:h3 "Panel title"]
  [:p "Panel contents"]
  [:div.note [:p "Speaker notes"]])

panel is a convenience utility that automatically creates the hiccup/html for a screencast panel with

clickable headers and footers,
panel numbering/progress indicator
webpage url

3/9

Demonstrate code

(prettyfy-form-prettyfy-eval "(inc 99)")

Gets rendered as this clickable element:

(inc 99)
;; => 100

prettyfy-form-prettyfy-eval is a utility that creates the hiccup/html for simulating evaluating a Clojure expression.

The expression is passed to prettyfy-form-prettyfy-eval as a string. It then evaluates the expression, converts that value to a pretty-printed string, and appends it to the original expression with an interleaved separator, which defaults to => .

Those strings are then wrapped in hiccup/html div elements that are manipulated by javascript/jQuery during the screencast presentation to give the illusion of repl evaluation.

See the API documentation for details on how to use prettyfy-form-prettyfy-eval.

4/9

css helper #1: vertical spacing

Element foo

[:div.vspace]

Element bar

[:div.vspace]

Element baz

Screedcast doesn't replicate Microsoft PowerPoint, Apple Keynote, et. al., so it doesn't have all the facilities for infinite visual adjustment. But it does have a basic method for spacing elements vertically by inserting a [:div.vspace] element.

5/9

css helper #2: side-by-side

Stuff in the left column.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Stuff in the right column.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

[:div.side-by-side-container
   [:div.side-by-side
    [:p "Stuff in the left column."]
    [:p "Lorem ipsum dolor..."]]
   [:div.side-by-side
    [:p "Stuff in the right column."]
    [:p "Duis aute irure..."]]]

The css file contains layout directives to display content side-by-side for easier comparison.

6/9

css helper #3: speaker notes

Don't junk up the panel with what to say, then bore the audience by reading to them.
Write speaker notes in a [:div.note [:p "..."]] block.
Toggle the speaker notes visibility by clicking the copyright notice at the end of the screencast section.

The speaker notes appear in orange so that they're easily distinguishable from the main content.

7/9

Setup

See the Screedcast project ReadMe for details on how to setup the files, directories, and options, and how to generate the html.

https://github.com/blosavio/screedcast

8/9