talk/index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=1024, user-scalable=no">

  <title>Alice in Videoland: building an interactive storybook in HTML5 with Rachel Nabors</title>

  <!-- Required stylesheet -->
  <link rel="stylesheet" href="core/deck.core.css">

  <!-- Extension CSS files go here. Remove or add as needed. -->
  <link rel="stylesheet" href="extensions/goto/deck.goto.css">
  <link rel="stylesheet" href="extensions/menu/deck.menu.css">
  <link rel="stylesheet" href="extensions/navigation/deck.navigation.css">
  <link rel="stylesheet" href="extensions/status/deck.status.css">
  <link rel="stylesheet" href="extensions/hash/deck.hash.css">
  <link rel="stylesheet" href="extensions/scale/deck.scale.css">
  <link rel="stylesheet" href="extensions/pointer/deck.pointer.css">
  <link rel="stylesheet" href="extensions/syntaxhighlighter/deck.syntaxhighlighter.css">

  <!-- Style theme. More available in /themes/style/ or create your own. -->
  <link rel="stylesheet" href="themes/style/profesh.css">

  <!-- Transition theme. More available in /themes/transition/ or create your own. -->
  <link rel="stylesheet" href="themes/transition/horizontal-slide.css">

  <!-- Required Modernizr file -->
  <script src="modernizr.custom.js"></script>

  <!-- Fonts! -->
  <script type="text/javascript" src="//use.typekit.net/pxo8qyc.js"></script>
  <script type="text/javascript">try{Typekit.load();}catch(e){}</script>
</head>
<body class="deck-container">

<section class="slide slide_preso-title">
  <div class="talk-title">
    <h1>Alice in Videoland</h1>
    <p class="tagline">Building an interactive storybook in HTML5</p>
    <p class="author">with Rachel Nabors<br><a href="http://rachelnabors.com" target="_blank">RachelNabors.com</a><br><a href="http://twitter.com/rachelnabors" target="_blank">@RachelNabors</a></p>
    <img src="img/p_alice.png" alt=" ">
  </div>
</section>

<section class="slide slide_about">
  <figure>
    <img src="img/fig_rachel-tuna.png" alt="Rachel the Great and her talking cat Tuna, waving.">
    <figcaption style="text-align: center">You can still read the comic adventures of Rachel and Tuna at <a href="http://www.rachelthegreat.com" target="_blank">RacheltheGreat.com</a></figcaption>
  </figure>
</section>

<section class="slide slide_about">
  <figure>
    <img src="img/p_square-bird-trans.png" alt="Tin Magpie">
    <figcaption style="text-align: center">Now I tell stories using my front-end development skills at my company, <a href="http://www.tinmagpiebcom.com" target="_blank">TinMagpie.com</a></figcaption>
  </figure>
</section>

<section class="slide slide_cover" id="cover_project">
  <div class="vcenter title-card">
    <h1 class="section-title">The Project</h1>
  </div>
</section>

<div class="slide slide_texty" id="project_quest">
  <h2 class="texty-title">The Quest</h2>
  <div class="texty-body">
    <p>Write an article for <a href="http://www.adobe.com/inspire/2013/12/interactive-html5-storybook.html?trackingid=KJGDU&amp;PID=7114730" target="_blank">Adobe's Inspire zine</a> that will:</p>
    <ul>
      <li class="slide"><strong>inspire</strong> Adobe's vast creative community to think about using the browser to tell stories.</li>
      <li class="slide"><strong>explore</strong> popular techniques and find their weaknesses.</li>
      <li class="slide"><strong>compare</strong> creating an iPad experience alongside desktop.</li>
    </ul>
    <p class="slide">And get paid to tell a story. (Much harder than it seems.)</p>
  </div>
</div>

<div class="slide slide_texty" id="project_learn">
  <h2 class="texty-title">What we'll cover</h2>
  <div class="texty-body">
    <ul>
      <li class="slide">Crafting a browser-first story</li>
      <li class="slide">Retina and images</li>
      <li class="slide">Handling a shifting environment with modernizr</li>
      <li class="slide">Loading assets</li>
      <!-- <li class="slide">Performance</li> -->
      <li class="slide">Parallax</li>
      <li class="slide">Reconciling touch with click</li>
    </ul>
  </div>
</div>

<section class="slide slide_cover" id="cover_updating">
  <div class="vcenter title-card">
    <h1 class="section-title">Updating Alice</h1>
  </div>
</section>

<div class="slide slide_topical" id="original-alice">
  <div class="vbottom">
    <p class="slide-tagline">This isn't Alice. <small>Illustration by John Tenniel</small></p>
  </div>
</div>
<div class="slide slide_topical" id="blair-alice">
  <div class="vbottom">
    <p class="slide-tagline">Disney's Alice <small>Illustration by Mary Blair</small></p>
  </div>
</div>
<div class="slide slide_topical" id="movie-alice">
  <div class="vbottom">
    <p class="slide-tagline">Burton's Alice</p>
  </div>
</div>
<div class="slide slide_topical" id="game-alice">
  <div class="vbottom">
    <p class="slide-tagline">American McGee's Alice</p>
  </div>
</div>
<div class="slide slide_topical" id="manga-alice">
  <div class="vbottom">
    <p class="slide-tagline">Quin Rose's Alice</p>
  </div>
</div>

<section class="slide slide_interjection" id="no-blondes">
  <div class="vcenter card">
    <p class="statement">The world doesn't need another blonde and/or blue Alice.</p>
    <p class="small-voice"><span>For reals.</span></p>
  </div>
</section>

<div class="slide slide_topical" id="real-alice">
  <div class="vbottom">
    <p class="slide-tagline">The Real <a href="http://www.retronaut.com/2012/09/the-real-alice-in-wonderland-c-1862/" target="_blank">Alice (Liddell) c. 1862</a></p>
  </div>
</div>

<div class="slide slide_topical" id="chara-alice">
  <div class="vtop">
    <p class="slide-tagline">Our Alice, just a curious little girl</p>
  </div>
</div>

<div class="slide slide_topical" id="chara-sister">
  <div class="vbottom">
    <p class="slide-tagline">Alice's Sister, Denise</p>
  </div>
</div>

<div class="slide slide_topical" id="chara-rabbit">
  <div class="vbottom">
    <p class="slide-tagline">The whitest rabbit you know</p>
  </div>
</div>

<div class="slide slide_topical" id="setting-park">
  <div class="vtop">
    <p class="slide-tagline">The Park</p>
  </div>
</div>

<div class="slide slide_topical" id="setting-hole">
  <div class="vtop">
    <p class="slide-tagline">The Hole</p>
  </div>
</div>

<section class="slide slide_cover" id="cover_ux">
  <div class="vcenter title-card">
    <h1 class="section-title">Formulating the Experience</h1>
  </div>
</section>

<div class="slide slide_texty" id="rewrite">
  <h2 class="texty-title">Rewriting the Original</h2>
  <div class="texty-body">
    <p>Alice was beginning to get very bored, sitting by her sister in the park. Her sister was deeply engrossed in a technical book about web development.</p>

    <p>&ldquo;How can she read a book with no pictures or dialog in it?&rdquo; Alice wondered to herself.</p>

    <p>She was just about to nod off when suddenly a white rabbit wearing a vintage tweed porkpie hat dashed by&hellip; looking anxiously at his smartphone!</p>

    <p class="footnote">And so on. To see the full copy, try printing <a href="../book" target="_blank">the page</a>.</p>
  </div>
</div>

<div class="slide slide_topical" id="storyboard"></div>

<div class="slide slide_interjection" id="prototype">
  <div class="vcenter">
    <p class="statement">Time for a real <a href="../storyboard" target="_blank">storyboard</a>.</p>
  </div>
</div>

<div class="slide slide_texty" id="constraints">
  <h2 class="texty-title">Constraints</h2>
  <div class="texty-body">
    <ul>
      <li class="slide"><strong>Tell a small piece of the story well.</strong><br>No time for telling the whole thing.</li>
      <li class="slide"><strong>Must work on Chrome and iPad Retina.</strong><br>Favor speed and pageweight over compatibility</li>
      <li class="slide"><strong>Interaction must be fairly one-to-one.</strong><br>
        Don't create two different yet parallel experiences.</li>
      <li class="slide"><strong>Prefer to use jQuery plugins.</strong><br> More accessible to designers.</li>
      <li class="slide"><strong>Must. Meet. Deadline.</strong><br>Jettison the things that prevent meeting these goals.</li>
    </ul>
  </div>
</div>

<div class="slide slide_interjection alt" id="book">
  <div class="vcenter">
    <p class="statement">The final <a href="../book" target="_blank">Alice in Videoland &ldquo;storybook&rdquo;</a>.</p>
  </div>
</div>

<section class="slide slide_cover" id="cover_retina">
  <div class="vcenter title-card">
    <h1 class="section-title">Solving for Retina</h1>
  </div>
</section>

<div class="slide slide_interjection" id="retina-approach">
  <div class="vcenter">
    <p class="statement">I took the <br>&ldquo;Big Graphics, <br>Big Compression&rdquo; approach.</p>
    <p class="small-voice"><span>Because I know my use case.</span></p>
  </div>
</div>

<div class="slide slide_texty" id="retina-svg">
  <h2 class="texty-title"><abbr title="Scalable Vector Graphics">SVG</abbr></h2>
  <div class="texty-body">
    <ul>
      <li class="slide">Perfect for <strong>flat color images</strong></li>
      <li class="slide"><a href="http://www.adobe.com/inspire/2013/09/exporting-svg-illustrator.html" target="_blank">Made in Illustrator</a>, even <a href="http://blog.jamesflorentino.com/2012/07/21/svg-spriting-in-css.html" target="_blank">the sprites</a>.</li>
      <li class="slide">Optimize with <a href="http://petercollingridge.appspot.com/svg_optimiser" target="_blank"><abbr title="Scalable Vector Graphics">SVG</abbr> Optimizer</abbr></a> or automated <a href="http://qt-apps.org/content/show.php/SVG+Cleaner?content=147974" target="_blank"><abbr title="Scalable Vector Graphics">SVG</abbr> Cleaner</abbr></a></li>
    </ul>
    <figure class="slide">
      <img src="img/fig_svg-ff.png" alt="Comparing SVG rendering in FireFox to Chrome: FireFox is noticeably blurred." />
      <figcaption>FireFox scales small <abbr title="Scalable Vector Graphics">SVG</abbr>s up poorly.</figcaption>
    </figure>
  </div>
</div>

<div class="slide slide_texty" id="retina-jpg">
  <h2 class="texty-title">JPG</h2>
  <div class="texty-body">
    <img src="img/fig_ps-jpg.jpg" alt="Setting Compression to 0 in Photoshop's Save to Web Dialog" />
    <ul>
      <li class="slide">Perfect for images with mottled colors.</li>
      <li class="slide"><a href="http://alidark.com/responsive-retina-image-mobile/" target="_blank">Compression is your friend again.</a></li>
      <li class="slide">Compress with <a href="http://www.jpegmini.com/" target="_blank">JPEG mini</a>.</li>
      <li class="slide"><strong>Caution:</strong> It looks terrible with red colors.</li>
    </ul>
  </div>
</div>

<div class="slide slide_texty" id="retina-png">
  <h2 class="texty-title">PNG</h2>
  <div class="texty-body">
    <ul>
      <li class="slide">The <em>only</em> option for images with transparent portions.</li>
      <li class="slide">Make the best of it with <a href="http://imageoptim.com/" target="_blank">ImageOptim</a> and <a href="http://pngmini.com/" target="_blank">ImageAlpha</a></li>
      <li class="slide">Could have used multiple sizes as <a href="http://timkadlec.com/2012/04/media-query-asset-downloading-results/" target="_blank">my target browsers only download images referenced in CSS that match their media queries</a>.
    </ul>
  </div>
</div>

<div class="slide slide_texty" id="retina-png">
  <h2 class="texty-title">Streamlining and Automation</h2>
  <div class="texty-body">
    <ul>
      <li class="slide">Automate PNG and JPG compression with <a href="http://jamiemason.github.io/ImageOptim-CLI/" target="_blank">ImageOptim-CLI</a></li>
      <li class="slide">Use <a href="https://github.com/Team-Sass/animation-studio" target="_blank">Sass Animation Studio</a> to build sprite animations.</li>
    </ul>
  </div>
</div>

<!-- <section class="slide slide_cover" id="cover_performance">
  <div class="vcenter title-card">
    <h1 class="section-title">Performance Problems</h1>
  </div>
</section>

<div class="slide slide_texty">
  <h2 class="texty-title">Maintaining 60 <abbr title="Frames Per Second"</abbr>FPS</abbr></h2>
  <div class="texty-body">
    <p class="slide">You can animate <code>background-position</code>, <a href="http://codepen.io/rachelnabors/full/rCost" target="_blank">as in this animation</a>.</p>
    <p class="slide">Let's see <a href="http://codepen.io/rachelnabors/pres/rCost" target="_blank">how that works</a>. (Follow along at <a href="http://codepen.io/rachelnabors/pres/rCost" target="_blank">cdpn.io/rCost</a>!)</p>
    <p class="footnote slide">(Psst, look at the paint rectangles.)</p>
  </div>
</div>

<section class="slide slide_about">
  <figure>
    <img src="img/fig_cheap-operations.jpg" alt="Modern browsers can animate four things really cheaply: position, scale, rotation and opacity, natch.">
    <figcaption style="text-align: center">Heisted from <a href="http://www.html5rocks.com/en/tutorials/speed/high-performance-animations/" target="_blank">High Performance Animations</a> on HTML5 Rocks</figcaption>
  </figure>
</section>


<div class="slide slide_texty">
  <h2 class="texty-title">Kicking it to the GPU</h2>
  <p>Better to bake backgrounds, then animate moving them.</p>
  <p>Check out the code at <a href="http://codepen.io/rachelnabors/pres/qnEhd?editors=110" target="_blank">cdpn.io/qnEhd</a></p>
  <p data-height="268" data-theme-id="0" data-slug-hash="qnEhd" data-user="rachelnabors" data-default-tab="result" class='codepen'>See the Pen <a href='http://codepen.io/rachelnabors/pen/qnEhd'>Down the Hipster Rabbit Hole</a> by Rachel Nabors (<a href='http://codepen.io/rachelnabors'>@rachelnabors</a>) on <a href='http://codepen.io'>CodePen</a></p>
  <script async src="http://codepen.io/assets/embed/ei.js"></script>
</div> -->

<section class="slide slide_cover" id="cover_load">
  <div class="vcenter title-card">
    <h1 class="section-title">Loading</h1>
  </div>
</section>

<div class="slide slide_texty" id="load_opacity">
  <h2 class="texty-title">Loading hidden scenes</h2>
  <div class="texty-body">
    <p>The load screen disappears after <code>$(window).load()</code>.</p>
    <p class="slide">All the scenes must remain hidden while the page's images load and <abbr title="Document Object Model">DOM</abbr> renders.</p>
    <p class="slide"><code>load()</code> will fire without <code>display: none</code>'s background images.</p>
    <p class="slide">But <code>opacity: 0</code> elements background images must be downloaded to fire <code>load()</code>.</p>
<pre class="language-css slide">
.loading .scene {
  opacity: 0;
}
</pre>
  </div>
</div>

<div class="slide slide_texty" id="load_screen">
  <h2 class="texty-title">Animating the Load Screen</h2>
  <div class="texty-body">
    <p>Follow along at <a href="http://codepen.io/rachelnabors/pres/modpi" target="_blank">cdpn.io/modpi</a></p>
<!--     <p data-height="268" data-theme-id="0" data-slug-hash="modpi" data-user="rachelnabors" data-default-tab="result" class='codepen'>See the Pen <a href='http://codepen.io/rachelnabors/pen/modpi'>Alice in Videoland Load Screen</a> by Rachel Nabors (<a href='http://codepen.io/rachelnabors'>@rachelnabors</a>) on <a href='http://codepen.io'>CodePen</a></p>
 -->    <ul>
      <li class="slide">The height is animated to &ldquo;roll the screen up&rdquo;.</li>
      <li class="slide">The cup and saucer use <a href="http://cubic-bezier.com/" target="_blank">custom cubic beziers</a> on their animations to add bounce.</li>
    </ul>
  </div>
</div>

<section class="slide slide_cover" id="cover_progress">
  <div class="vcenter title-card">
    <h1 class="section-title">Tracking Reading Progress</h1>
  </div>
</section>

<div class="slide slide_texty" id="progress_waypoints">
  <h2 class="texty-title">Using jQuery Waypoints</h2>
  <div class="texty-body">
    <p class="slide">My Twitter friend <a href="https://twitter.com/KevinLozandier" target="_blank">Kevin Lozandier</a> reminded me about <a href="http://imakewebthings.com/jquery-waypoints/" target="_blank">jQuery Waypoints</a></p>
<pre class="language-js slide">
$(element).waypoint(function() {
  doSomething();
}, { offset: someNumber });  // of pixels from the top
</pre>
    <p class="slide"><em>Only</em> works with visible things.</p>
  </div>
</div>

<div class="slide slide_texty" id="progress_read">
  <h2 class="texty-title">Calculating which page is being read</h2>
  <div class="texty-body">
    <p>We can assume that if a page is of equal distance from top as from bottom, it's being read.</p>
<pre class="language-js slide">
var beingRead = function() {
  var $screenHeight = $.waypoints('viewportHeight');
  var $pageHeight = $(".page").height();
  var offset = ($pageHeight - $screenHeight) / 2 * -1;

  return offset;
}
</pre>
  </div>
</div>

<div class="slide slide_texty" id="progress_revealed">
  <h2 class="texty-title">Using Waypoints when you reveal things</h2>
  <div class="texty-body">
<pre class="language-js">
// fired when rabbit hole is clicked
var downTheHole = function() {
  $tunnel.find(".page").waypoint(function() {
    $(this).addClass("in-view");
    // more stuff...
  }, {
    offset: beingRead()
  });
};
</pre>
  </div>
</div>

<div class="slide slide_texty" id="progress_extras">
  <h2 class="texty-title">Additional Uses for Waypoints</h2>
  <div class="texty-body">
    <ul>
      <li class="slide">Handy screen height calculator: <code>$.waypoints('viewportHeight')</code></li>
      <li class="slide">Sweet <a href="http://imakewebthings.com/jquery-waypoints/shortcuts/sticky-elements/" target="_blank">sticky elements shortcut</a> (as used on Alice in the tunnel).</li>
    </ul>
  </div>
</div>

<div class="slide slide_texty" id="rwd_resize">
  <h2 class="texty-title">Dealing with Resizes</h2>
  <div class="texty-body">
    <p>There's a lot of math being done, and all of it relies on measuring <em>visible</em> elements. You'll have to re/take these measurements whenever:</p>
    <ul>
      <li class="slide">the browser window is <strong>resized</strong></li>
      <li class="slide">content is <strong>revealed</strong></li>
      <li class="slide">device <strong>orientation changes</strong></li>
    </ul>
  </div>
</div>

<div class="slide slide_texty" id="progress_recalc">
  <h2 class="texty-title">Recalculating Waypoints</h2>
  <div class="texty-body">
    <p>Assume someone turns their iPad. All that math for nothing!</p>
    <div class="slide">
      <p>Not so!</p>
<pre class="language-js">
var recalcWaypoints = function() {
  $(".page").waypoint({
    offset: beingRead()
  });
}

window.addEventListener('orientationchange', recalcWaypoints);</pre>
    </div>
    </div>
  </div>
</div>

<section class="slide slide_cover" id="cover_parallax">
  <div class="vcenter title-card">
    <h1 class="section-title">Parallaxin' Down the Rabbit Hole</h1>
  </div>
</section>

<div class="slide slide_texty" id="parallax_skrollr">
  <h2 class="texty-title">Using Skrollr</h2>
  <div class="texty-body">
    <p>I used <a href="https://github.com/Prinzhorn/skrollr" target="_blank">skrollr.js</a>.</p>
    <p>Follow along at <a target="_blank" href="http://codepen.io/rachelnabors/pres/AeEHw">cdpn.io/AeEHw</a></p>
<!--     <p data-height="268" data-theme-id="0" data-slug-hash="AeEHw" data-user="rachelnabors" data-default-tab="result" class='codepen'>See the Pen <a href='http://codepen.io/rachelnabors/pen/AeEHw'>Falling Down the Rabbit Hole</a> by Rachel Nabors (<a href='http://codepen.io/rachelnabors'>@rachelnabors</a>) on <a href='http://codepen.io'>CodePen</a></p>
 -->  </div>
</div>

<div class="slide slide_texty" id="parallax_skrollr">
  <h2 class="texty-title">Calculating the Fall</h2>
  <div class="texty-body">
    <p>I put the following into <code>downTheHole()</code>:</p>
<pre class="language-js">
// calculate the height of the tunnels
var tunnelTop = Math.round($tunnel.offset().top);
var tunnelTopData = "data-" + tunnelTop;
var tunnelBottomData =  "data-" + (tunnelTop + Math.round($tunnel.height()));

$alice.waypoint('sticky') // make her sticky!
.attr(tunnelTopData, "top:0%").attr(tunnelBottomData, "top:80%");   // Give Falling Alice her skrollr measurements as data attributes
</pre>
  </div>
</div>

<div class="slide slide_texty" id="parallax_mood">
  <h2 class="texty-title">Changing Alice's Mood</h2>
  <div class="texty-body">
    <p>Remember calculating those waypoints?</p>
<pre class="language-js">
$tunnel.find(".page").waypoint(function() {
  $(this).addClass("in-view");
  var mood = $(this).data("mood");
  $("body").removeClass().addClass(mood);
}, {
  offset: beingRead()
});
</pre>
  <p class="slide">Tie those classes to different <code>background-position</code>s on Alice's sprite.</p>
  </div>
</div>

<section class="slide slide_cover" id="cover_touch">
  <div class="vcenter title-card">
    <h1 class="section-title">From &ldquo;Click and Scroll&rdquo; <br>to &ldquo;Tap and Swipe&rdquo;</h1>
  </div>
</section>

<div class="slide slide_interjection" id="touch_touch">
  <div class="vcenter">
    <p class="statement">It's not &ldquo;mobile.&rdquo; <br>It's &ldquo;touch.&rdquo;</p>
  </div>
</div>

<div class="slide slide_texty" id="touch_tap">
  <h2 class="texty-title">Mapping Tap to Click</h2>
  <div class="texty-body">
    <p>My <a href="https://coderwall.com/p/yzlqpq" target="_blank">original function</a> was good.</p>
    <p class="slide"><a href="https://twitter.com/rodneyrehm" target="_blank">Rodney Rehm</a> offered up <a href="https://gist.github.com/rodneyrehm/6464641" target="_blank">a better solution</a>.</p>
<pre class="language-js slide">
// To get to #tunnels, activate #tunnels
$("#to-tunnels").activate(downTheHole);
</pre>
  </div>
</div>

<div class="slide slide_texty" id="touch_parallax">
  <h2 class="texty-title">The Perils of Parallax</h2>
  <div class="texty-body">
    <p><strong>Danger!</strong> In iOS Safari, <a href="http://www.youtube.com/watch?v=ELJrG7RTc6c" target="_blank">all animation and JavaScript pauses</a> while you touch the screen.</p>
    <p class="slide">Skrollr has a <a href="http://www.youtube.com/watch?v=TuQGIyKkLjA" target="_blank">&ldquo;solution&rdquo;</a> for that.</p>
    <p class="slide">This leads to an intesting puzzle:</p>
    <ul>
      <li class="slide">Waypoints ties with scroll events</li>
      <li class="slide">The &ldquo;mobile friendly&rdquo; skrollr circumvents scroll by animating the CSS transformed page.</li>
    </ul>
    <p class="slide">So either you can change Alice's mood and everything jumps <em>or</em> her mood doesn't change but she parallaxes fine.</p>
  </div>
</div>

<div class="slide slide_texty" id="touch_hammer">
  <h2 class="texty-title">Gestures with Hammer.js</h2>
  <div class="texty-body">
    <p>An email conversation with <a href="http://johnpolacek.com/" target="_blank">John Polacek</a> convinced me to take another look at <a href="http://eightmedia.github.io/hammer.js/" target="_blank">hammer.js</a>.</p>
    <ul>
      <li class="slide">Small (3kb gzipped) and standalone.</li>
      <li class="slide">jQuery plugin available.</li>
      <li class="slide">Use any gesture, including <em>swipe</em>.</li>
    </ul>
    <p class="slide">Originally I attached it to all <code>.pages</code>, but&hellip;</p>
  </div>
</div>

<div class="slide slide_texty" id="touch_progress">
  <h2 class="texty-title">Tracking Progress on Touch</h2>
  <div class="texty-body">
    <p>In the land of scrolling, Waypoints is enough.</p>
    <p class="slide">In the land of touch, it was important to:</p>
    <ul>
      <li class="slide">keep track of what the previous and next <code>.page</code> is</li>
      <li class="slide">fire some functions (like <code>cutToWonderland()</code>) on swipe instead of by waypoint.</li>
    </ul>
    <p class="slide">So I used counters.</p>
  </div>
</div>

<div class="slide slide_texty" id="touch_modernizr">
  <h2 class="texty-title">Wrapping it in modernizr</h2>
  <div class="texty-body">
    <p>I was already using Modernizr to test for CSS animations/transitions support.</p>
<pre class="language-js slide">
var cutToWonderland = function() {
  if(Modernizr.touch) {
    cutFired = true;
    currentPage = nextPage;
    calcPrevNext(currentPage);
  }
  // ...
}
</pre>
  </div>
</div>

<div class="slide slide_interjection" id="touch_easy">
  <div class="vcenter">
    <p class="statement">People tell stories. Plural.</p>
    <p class="small-voice"><span>In web development, every story has many authors.</span></p>
  </div>
</div>

<section class="slide slide_cover" id="cover_touch">
  <div class="vcenter title-card">
    <h1 class="section-title">To be continued&hellip;</h1>
  </div>
</section>

<div class="slide slide_interjection" id="touch_easy">
  <div class="vcenter">
    <p class="statement">Text <em>#storytelling 5 Brilliant!</em> to 504-229-6828</p>
    <p class="small-voice"><span>Do eet.</span></p>
  </div>
</div>

<!-- <div class="slide slide_interjection" id="touch_easy">
  <div class="vcenter">
    <p class="statement"><a href="http://eepurl.com/Gxv1j" target="_blank">eepurl.com/Gxv1j</a></p>
    <p class="small-voice"><span>Part II comes out in fall, and I need your help.</span></p>
  </div>
</div> -->


<div class="slide slide_interjection alt" id="thanks">
  <div class="vcenter">
    <p class="statement">Thank you!</p>
    <p class="small-voice"><span>CSS 4EVAH!</span></p>
  </div>
</div>

<section class="slide slide_texty" id="slide_goodbye">
  <h2 class="texty-title">Now tell the story!!</h2>
  <div class="text-content">
    <div class="slide">
      <p>These slides: <a href="http://goo.gl/R4NRbx" target="_blank">http://goo.gl/R4NRbx</a></p>
      <p>Source: <a href="https://github.com/rachelnabors/alice-in-videoland" target="_blank">github.com/rachelnabors/alice-in-videoland</a></p>
    </div>
    <div class="slide">
      <ul>
        <li><a href="http://tinmagpie.com" target="_blank">tinmagpie.com</a> : we tell stories with code</li>
        <li><a href="http://rachelnabors.com" target="_blank">rachelnabors.com</a> : more projects</li>
        <li><a href="http://rachelnabors.com/training" target="_blank">rachelnabors.com/training</a> : training!</li>
        <li><a href="https://twitter.com/rachelnabors" target="_blank">@rachelnabors</a> : show me what you make</li>
      </ul>
    </div>
  </div>
  <span class="img-wrap"><img src="../book/img/p_selfie.png"></span>
</section>

<!-- Begin extension snippets. Add or remove as needed. -->

<!-- deck.navigation snippet -->
<a href="#" class="deck-prev-link" title="Previous">&#8592;</a>
<a href="#" class="deck-next-link" title="Next">&#8594;</a>

<!-- deck.status snippet -->
<p class="deck-status">
  <span class="deck-status-current"></span>
  /
  <span class="deck-status-total"></span>
</p>

<!-- deck.goto snippet -->
<form action="." method="get" class="goto-form">
  <label for="goto-slide">Go to slide:</label>
  <input type="text" name="slidenum" id="goto-slide" list="goto-datalist">
  <datalist id="goto-datalist"></datalist>
  <input type="submit" value="Go">
</form>

<!-- deck.hash snippet -->
<a href="." title="Permalink to this slide" class="deck-permalink">#</a>

<!-- End extension snippets. -->


<!-- Required JS files. -->
<script src="jquery-1.7.2.min.js"></script>
<script src="core/deck.core.js"></script>
<script>
  // https://github.com/imakewebthings/deck.js/issues/134#issuecomment-25665129
  // A patch to keep it from crashing iPads/running slowly. Hopefully not forever.
  (function($, deck, undefined) {
    var $d = $(document),

    toggleHorizon = function(base, fn) {
      var slides = $[deck]('getSlides'),
      opts = $[deck]('getOptions'),
      min = base - opts.horizon,
      max = base + opts.horizon,
      i;

      min = min < 0 ? 0 : min;
      max = max > slides.length ? slides.length : max;

      for (i = 0; i < min; i++) {
        slides[i][fn](opts.classes.horizon);
      }
      for (i = max; i < slides.length; i++) {
        slides[i][fn](opts.classes.horizon);
      }
    },

    updateHorizon = function(e, from, to) {
      if (from || from === 0) {
        toggleHorizon(from, 'removeClass');
      }

      if (to || to === 0) {
        toggleHorizon(to, 'addClass');
      }
    };

    $.extend(true, $[deck].defaults, {
      classes: {
        horizon: 'deck-horizon'
      },

      horizon: 10
    });

    $d.bind('deck.init', function() {
      updateHorizon(null, null, 0);
    })
    .bind('deck.change', updateHorizon);

  })(jQuery, 'deck');

</script>

<!-- Extension JS files. Add or remove as needed. -->
<script src="extensions/hash/deck.hash.js"></script>
<script src="extensions/menu/deck.menu.js"></script>
<script src="extensions/goto/deck.goto.js"></script>
<script src="extensions/status/deck.status.js"></script>
<script src="extensions/navigation/deck.navigation.js"></script>
<script src="extensions/scale/deck.scale.js"></script>
<script src="extensions/pointer/deck.pointer.js"></script>
<script src="extensions/syntaxhighlighter/deck.syntaxhighlighter.js"></script>
<script src="extensions/iframes/deck.iframes.js"></script>
<!-- <script type="text/javascript" src="extensions/presenterview/deck.presenterview.js"></script> -->
<!-- Initialize the deck. You can put this in an external file if desired. -->

<script>
  (function(){
    $.deck('.slide');
  })();
</script>

</body>
</html>