## 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 ```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 ```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 ```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 ```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 ```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 ```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 ```vega { "$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 ```fretboard {title="horizontal, 5 frets", type="h6 noNut"} -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! * 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?