• Four lightning talks in one!
• Some are even related
• Let's talk about the loosely related ones first

Advanced Markdown with HackMD

• HackMD is a useful online tool for writing, sharing, and collaborating on markdown documents
• This presentation written in it
• Can link docs together like a wiki
• I use it to collaborate with myself, i.e., access docs from whatever computer I happen to be on, anywhere
• That's not the advanced part

The Advanced Part

Mathjax

\[ x = {-b \pm \sqrt{b^2-4ac} \over 2a}. \]

\[ \Gamma(z) = \int_0^\infty t^{z-1}e^{-t}dt\,. \]

Sequence

Alice->Bob: Hello Bob, how are you?
Note right of Bob: Bob thinks
Bob-->Alice: I am good thanks!
Note left of Alice: Alice responds
Alice->Bob: Where have you been?

Flow

st=>start: Start|past:>http://www.google.com[blank]
e=>end: End|future:>http://www.google.com
op1=>operation: My Operation|past
op2=>operation: Stuff|current
sub1=>subroutine: My Subroutine|invalid
cond=>condition: Yes
or No?|approved:>http://www.google.com
c2=>condition: Good idea|rejected
io=>inputoutput: catch something...|future

st->op1(right)->cond
cond(yes, right)->c2
cond(no)->sub1(left)->op1
c2(yes)->io->e
c2(no)->op2->e

Graphviz

digraph hierarchy {

                nodesep=1.0 // increases the separation between nodes

                node [color=Red,fontname=Courier,shape=box] //All nodes will this shape and colour
                edge [color=Blue, style=dashed] //All the lines look like this

                Headteacher->{Deputy1 Deputy2 BusinessManager}
                Deputy1->{Teacher1 Teacher2}
                BusinessManager->ITManager
                {rank=same;ITManager Teacher1 Teacher2}  // Put them on the same level
}

Mermaid

gantt
    title A Gantt Diagram

    section Section
    A task           :a1, 2014-01-01, 30d
    Another task     :after a1  , 20d
    section Another
    Task in sec      :2014-01-12  , 12d
    anther task      : 24d

ABC

X:1
T:Speed the Plough
M:4/4
C:Trad.
K:G
|:GABc dedB|dedB dedB|c2ec B2dB|c2A2 A2BA|
GABc dedB|dedB dedB|c2ec B2dB|A2F2 G4:|
|:g2gf gdBd|g2f2 e2d2|c2ec B2dB|c2A2 A2df|
g2gf g2Bd|g2f2 e2d2|c2ec B2dB|A2F2 G4:|

PlantUML

Vega Lite

{
  "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
  "data": {"url": "https://vega.github.io/editor/data/barley.json"},
  "mark": "bar",
  "encoding": {
    "x": {"aggregate": "sum", "field": "yield", "type": "quantitative"},
    "y": {"field": "variety", "type": "nominal"},
    "color": {"field": "site", "type": "nominal"}
  }
}

Fretboard

-oO-*-
--o-o-
-o-oo-
-o-oO-
-oo-o-
-*O-o-

Also…

• Slide Mode (these slides are in HackMD)
• Book Mode
• Embedding
• Table of Contents
• Automatically saved and versioned
• Much more, check it out: https://hackmd.io/
• Look at the source of these slides

Games at the Library

• https://yourlibrary.ca/rplgames
• Text adventures and escape rooms
• Created by staff and members
• Tie in to writing and game-making workshops
• Will eventually tie in to the other tools (foreshadowing!)

Temporary file sharing with Moat

• We had a problem in the Before Times, a lot of our content creation workshops were done on iPads
• Hard to give members access to the work they created
• Mostly, it got thrown away

Moat to the rescue

• https://glitch.com/edit/#!/sd-moat
• Moat allows creation of a temporary file share
• Only applicable for a specific program at a specific time
• Gives member a link (URL, code, or QR code) to their work
• Link expires after 2 weeks or 3 downloads
• Can be integrated into apps or used standalone
• Open source!

Lightweight Animation with Shimmy

• https://launchpad.yourlibrary.ca/shimmy/
• Simple web-based tool for sketch-based flipbook style animation
• Intentionally limited
• Big buttons, so can be used with fingers on mobile devices or mouse on desktop
• Integrates with Moat, of course
• Open source!

Shimmy tutorials

Playlist: https://youtube.com/playlist?list=PLjgCLYVYeo2zEJh_JMlXumvWkfZbugZkV

But wait, there's more

• Shimmy is the first of the content creation tools we want to build as part of a suite of tools and libraries under the umbrella project of Sketchdance
• All web-based, free, open source
• Veil: Greenscreen effects
• Jitter: Stop-motion animation
• Gammaray: Special FX
• Xastle: Social network for content tools

Back to games for a moment

• Garden, a tool for collaborative text-based games is in early stages
• Kind of like a modern MUD for the web
• Multiple simultaneous authors
• Multiple simultaneous players
• Room-based chat
• Looking to integrate with Twine

And the triumphant return of Waterbear

• Block-based visual programming for the web
• Inspired by Scratch, but with the training wheels taken off
• Ideally you should be able to code anything you could with JavaScript
• Will include tools for bridging the gap between visual and text-based programming

Community is key

• Tools belong to the community
• Current bus factor: 1
• Working on
  • Coding standards
  • Design guidelines
  • Community Participation Guidelines
  • Communication channels
  • Governance structure

Making it open source was the easy part!

Thank You!

If any of this struck a chord, please let me know!

• dethe.elza@yourlibrary.ca
• https://twitter.com/dethe
• https://github.com/dethe
• https://glitch.com/@dethe
• https://hackmd.io/@dethe
• https://codepen.io/dethe

You get the picture…

Questions?