Slip.js
  • Slip.js is a "slide" engine written in javascript.
  • Its goal is to keep the best from both worlds of:
    • Beamer, its simplicity to create slides without worrying too much on presentation.
    • Prezi, which moves/zoom on a canvas, making it nice/original/showing the structure...
  • This hybrid is the concept of slip.
A slip is a slide without inferior boundary (the view moving step by step to show it entirely).
Slip.js, it's slip party.
The basics You need to write html. This is what a minimal slip presentation looks like: 
<!doctype html>
<html>
    <head>
	<link rel="stylesheet" type="text/css" href="slip.css">
	<link rel="stylesheet" type="text/css" href="theorem.css">
    </head>
    <body>
	<div class="cpt-slip">0</div>
	<div class="presentation">
	    <div class="slip" id="id-slip-1"> ... </div>
	    <div class="slip" id="id-slip-2"> ... </div>
	</div>
    </body>
    <script src="slip.js"></script>
</html>
You can use http://choum.net/panglesd/slides/slip-js/ as a CDN for including css and javascript: 
<link rel="stylesheet" type="text/css" href="http://choum.net/panglesd/slides/slip-js/slip.css">
<link rel="stylesheet" type="text/css" href="http://choum.net/panglesd/slides/slip-js/theorem.css">
...
<script src="http://choum.net/panglesd/slides/slip-js/slip.js"></script>
The slide part of Slip We list the "slides" behaviour that slip can also do:
  • We can make things appear step by step. This is made with the attributes 
    chg-visib-at
    .
  • This bullet code is 
    <li chg-visib-at="2">...</li>
    .
  • We hide an element by putting a negative number. This bullet code is 
    <li chg-visib-at="3 -4">...</li>
    . Be careful, it will soon disappear.
  • We can also emphasize at a specified step, using the attribute 
    emphasize-at="..."
    : Bli, Bla, Blu...
We also have environment for theorems/definitions/examples: 
<div class="theorem" title="Slip's recursion theorem" chg-visib-at="8">
We also have environment for theorems/definitions/examples:
        ...
</div>
The 
title
attribute allows to choose the title.
We can also write math with \(mathjax\). This amounts to most of the things done with classic slides.
 The future: slips

Problem

The problems with slides are the following:
  • The elements appearing at the beginning of a slide stay much longer on screen than those appearing at the end.
  • From time to time, we would like to show something that is just slightly bigger than a slide, but does not fit, and separating it in two slides is not really possible.
  • The pdf format is very restricted on "interactivity".
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vestibulum neque eu lectus euismod, eget congue massa ultrices. Integer et bibendum sem. Donec neque erat, laoreet et felis vitae, malesuada varius purus. Aenean lacinia tortor id justo consectetur, non volutpat est rhoncus. Praesent eget risus elit. Nullam tempus mi id erat aliquet, sit amet consequat erat volutpat. Phasellus elementum gravida nisl ut auctor. Donec quis massa a mauris tristique interdum gravida ac sem. Aliquam ligula massa, hendrerit et diam sit amet, vulputate consectetur ligula. Phasellus dictum nisl est, quis commodo nunc pellentesque vel. Nulla facilisi. Donec pharetra tellus ut auctor dignissim. Proin convallis ante in pellentesque consectetur. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Morbi tempor sem a lectus ullamcorper fringilla. Maecenas tempor metus mauris, non tincidunt ligula placerat non. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vestibulum neque eu lectus euismod, eget congue massa ultrices. Integer et bibendum sem. Donec neque erat, laoreet et felis vitae, malesuada varius purus. Aenean lacinia tortor id justo consectetur, non volutpat est rhoncus. Praesent eget risus elit. Nullam tempus mi id erat aliquet, sit amet consequat erat volutpat. Phasellus elementum gravida nisl ut auctor. Donec quis massa a mauris tristique interdum gravida ac sem.

Solution!

Slips address this!
  • We can move the screen to see an element below with 
    down-at
    .
  • Same, we can center on an element with 
    center-at
    .
  • If we really don't want to see what was before, we can align an element with the top of the screen with 
    up-at
    . Here, it is done with the first bullet.

    • This is the concept of slip.js: a downward infinite slide. But slip.js is much more!

  • All slips are placed on a big "universe". But they are just html elements and can be placed statically, relatively or absolutely. 
    <div style="display: flex; justify-content: space-around; margin:40px;">
   <div class="slip" id="red" scale="0.25" delay="1"> ... </div>
   <div class="slip" id="blue" scale="0.25" delay="1"> ... </div>
</div>
    • Choose a color
    Blue Slip
    The presentation is structured as a tree rather than a linear presentation
    Press "t" to hide/see the table of content
    Click on a step or a slip to jump to it
    The counter bottom-left reflects the tree version of a presentation
    Blue Slip
    Blue Slip
    Blue Slip
    Remember: slips are not of fixed height!
         Choose a color
    Red Slip
    You can navigate slip by slip with shift+left/right
    You can restart a slip with "r"
    Soon there will be more navigation fun!
  • We can use all JS/CSS/HTML power to make more or less useful stuff. The goal is of course to make the presentation clearer!
    • Any javascript poorly written:
    • Any HTML5 possibility:
    • Any random CSS trick copy-pasted from the internet:

Slip.js advanced: fine control of events

  • You can annotate presentations: Press "w" to start annotating! Try it on the box below!
    • Whiteboard
  • You can choose the highlight tool by pressing "h"
  • You can choose the "erase pen" with "W" and the "erase highlighter" with "H"
  • You can stop annotating with "x" and clear annotations with "X"

Slip.js advanced: fine control of events

  • It is easy to define custom functions to be called at precise time of the presentation:
    • At a given step of a slip,
    • When refreshing the slip,
    • When leaving or entering...
  • There are already some tools (such as a special querySelector which avoids querying inside subslips) and there will soon be many more!
  • The project is open-source and will (soon) be well-documented!
Github: https://github.com/panglesd/slip-js.
An example (old version of the engine): Slips.