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 gives birth to 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 past: slides
We list the "slides" behaviour that slip can also do:
  • We can make things appear step by step, with 
    chg-visib-at
    . For instance, this bullet code is 
    <li chg-visib-at="1">...</li>
    .
  • 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 have a similar mechanism with 
    <span emphasize-at="...">...</span>
    : emphasize-at="5", emphasize-at="6", emphasize-at="6 7"...
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 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
    . Here, we have 
    <li down-at="5">...</li>
    .
  • 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, the first bullet code has in reality 
    <li down-at="5" up-at="7">...</li>
    .

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

  • By default, slips are positioned on top of the "universe", from left to right. But they are just html elements and can be placed statically, relatively and 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
    Choose a color
    Red Slip
  • 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

  • When 
    slip.js
    is loaded, several objects are defined:
    • A variable 
      engine
      which allows to command the window showing the slips. It has the method 
      moveWindow(x, y, scale, rotate, delay)
      , 
      moveWindowRelative(dx, dy, dscale, drotate, delay)
      .
    • A variable 
      presentation
      which allows to command the presentation. It has the method 
      next()
      , 
      nextSlip()
      , 
      gotoSlipIndex()
      , 
      getCurrentSlip()
      , 
      get/setSlips()
      , 
      refresh()
      .
    • An object 
      slip
      correspond to an HTML element of class 
      slip
      . It has the method 
      query(selector)
      , 
      queryAll(selector)
      , 
      next()
      , 
      move{Up;Down;Center}To(selector, delay, offset)
      , 
      {reveal;hide}{∅;All}(selector)
      , 
      setAction(actionList)
      , 
      setNthAction(n, action)
      . An action is a function which takes a slip as input.
  • The best is to see an example:
    let options = { init: (slip) => {}, firstVisit: (slip) => {}, whenLeaving: (slip) => {}};
// the "options" parameter allows to set function to call when document is ready, when entering slip for the first time and when leaving the slip

let intro = new Slip("intro", [], presentation, engine, options);
// We could have specified the actions in the instanciation (instead of [])
intro.setAction([
 (slip) => { engine.moveWindowRelative(0,0,1,0,1);
}, (slip) => { engine.moveWindowRelative(0,0,-1,0,1);
}, (slip) => { presentation.nextSlip();
}, (slip) => { slip.revealAll("*");
}]);

let devel = new Slip("devel", [], presentation, engine); // options is optionnal
// We can specify an action for the 5-th "next" of the slip.
devel.setNthAction(5, (slip) => { 
     slip.query(".random-number").innerText = Math.random();
});

// We can specify an order on slips
presentation.setSlips([intro, devel, intro]);
    <div class="slip" id="intro">
  <div class="title">Introduction to the subject</div> <!-- for Beamer style title -->
  <div class="slip-body-container"> <!-- for Beamer style margin (remove for full-width slips) -->
      Blablabla
      <!-- avoid including JS in slips -->
  </div>
</div>  

<div class="slip" id="devel">
  <div class="title">Developping the subject</div>
  <div class="slip-body-container">
      <span class="random-number">Bliblibli</span>
  </div>
</div>