---
tags: presentation
title: Sketchdance @ Code4LibBC
slideOptions:
parallaxBackgroundImage: https://i.imgur.com/6VC8AQ3.png
---

## Temporary file sharing with Moat, Lightweight Animation with Shimmy, Advanced Markdown with HackMD, Games at the Library

#### Dethe Elza, Digital Services Technician 

----

* 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

start
if (condition A) then (yes)
  :Text 1;
elseif (condition B) then (yes)
  :Text 2;
  stop
elseif (condition C) then (yes)
  :Text 3;
elseif (condition D) then (yes)
  :Text 4;
else (nothing)
  :Text else;
endif
stop

----

#### 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 :smile:

----

### 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!

* [e-mail]
* 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?