presentation.html

<!DOCTYPE html>

<meta charset="utf-8">
<title>Node.js - What is good for?</title>
<link rel="stylesheet" href="http://yandex.st/highlightjs/7.0/styles/arta.min.css">
<script src="http://yandex.st/highlightjs/7.0/highlight.min.js"></script>
<script>
  hljs.tabReplace = '    ';
  hljs.initHighlightingOnLoad();
  </script>
<!-- Fonts from big daddy google. -->
<link href='http://fonts.googleapis.com/css?family=Oswald|Yanone+Kaffeesatz' rel='stylesheet'>
<link rel="Stylesheet" href="css/main.css">
<section>
  <h1><img src='imgs/node_logo.png' /> - What can it do?</h1>

  <footer>by Steve Venzerul
    <br>Credit: Ryan Dahl,
  </footer>
</section>


<section>
    <h3>What is Node.js?</h3>
    <p>
      In the words of Ryan Dahl:
      <p>
        Node.js is a platform built on Chrome's JavaScript runtime for easily building fast, scalable network applications. Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient, perfect for data-intensive real-time applications that run across distributed devices.
      </p>
      <p>
        Short Version: Server-side Javascript runtime powered by Google's V8 engine.
      </p>
    </p>
    <details>
    </details>
</section>

<section>
  <h3>What can you do with Node?</h3>
  <ul>
    <li>Small and very fast static file servers. </li>
    <li>Various network daemons and services. </li>
    <li>Full fledged web application servers like apache and friends.</li>
    <li>Unix style command line utilities.</li>
    <li>Shell scripting and parsers</li>
  </ul>
  <p>The application we're going to look at is a demonstration
    of node serving as a web app server.
  </p>
  <details>
  </details>
</section>

<section>
    <h3>This is required!</h3>
    <p>
      Node uses CommonJS as it's module management system. CommonJS is
      very similar in functionality to python packages or ruby gems.<br>
      When a file is require()'d Node takes care of importing the module
      and executing it's code.
    </p>
  <pre>
    <code class='javascript'>
      var fs = require('fs');
      var http = require('http');
    </code>
  </pre>
  <p>
    Node first checks if it's a built-in module,
    if not, Node begins to search the local directory tree for a folder called
    node_modules and attempts to load the module from there. Failing that, it will check the global node_modules folder created when Node was installed.
    <details>
      Node uses the typical local path syntax when loading custom
      modules. "/dir_name/dir_name/etc".
      The root directory for a running Node script is whatever directory
      it was launched from.
    </details>
</section>

<section>
  <h3>Joey, the tiniest server</h3>
  <pre>
    <code class='javascript'>
      var fs = require('fs');
      var http = require('http');

      http.createServer(function (req, res) {
        var data = "Some string of data with an exlamation point!"
        res.writeHead(200, {'Content-Type': 'text/html'});
        res.end(data + '\n');
      }).listen(8080, 'localhost');
      console.log('Server running at http://localhost:8080/');
    </code>
  </pre>
  <p>Simple, but effective.</p>
  <details>
    We usually think of servers as sort of complex, intricate software,
    but underneath all the dark magic is a just simple socket listener and
    file reader.
  </details>
</section>


<section>
  <h3>Ok, so what else?</h3>
  <p>Unfournately, Joey the server can only do so much. He's small and weak
    and is going to need some serious help from beefier Node modules to actually
    be useful.
  </p>
  <h3>Meet Node's right hand man, NPM</h3>
  <p>
    NPM is Node's most popular package manager. And it really makes
    life quite a bit simpler. With the swing of a bash command, you can
    install and uninstall Node modules both locally and globally. These
    modules can then be imported into any of your projects with a simple
    require() call.<br>
    <pre>
      <code class='javascript'>
        [user@localhost]$ npm install -g express
      </code>
    </pre>
  </p>
  <details>
  </details>
</section>

<section>
  <h3>Introducing Express, also Joey goes to the gym!</h3>
  <p>
    Here's how Express describes itself: <br>
    <span class='quote'>"High performance, high class web development for Node."</span>
    <br><br>
    Express is to Node as Rails is to Ruby. And if you're familier with Rails' middleware architecture you will feel
    right at home with Express. It's really that easy. <br><br>
    In the spirit of Express' concise description, let's jump right in and
    see what goodies it has to offer.
  </p>
  <details>
  </details>
</section>

<section>
  <h3>Express Yourself!</h3>
<!--   <p>
    Here's yet another basic server, this time with Express backing us up.
  </p> -->
  <pre>
    <code class='javascript'>
      var express = require('express');
      var fs = require('fs');

      var app = express.createServer();

      app.get('/', function(req, res){
          var data = fs.readFileSync('page.html', 'utf-8');
          res.send(data);
      });

      app.listen(8080);
    </code>
  </pre>
  <p>
    Reading the above code, this server also looks very simple. But you can already tell
    there's some magic in the air.
  </p>
  <details>
  </details>
</section>

<section>
  <h3>It's a Route!</h3>
  <p>
    Express, like Sinatra and Rails has a concept of routes. Routes let you easily define the URL map that your application is going to handle. You can follow any scheme you like, however, it is highly recommended to use REST best practices.
  </p>
  <pre>
    <code class='javascript'>
      app.get('/', function(req, res){
        var data = fs.readFileSync('page.html', 'utf-8');
        res.send(data);
      });
    </code>
  </pre>
  <p>The route string can be specified in serveral different ways.
    You can use plain regex, or go with Express' builtin shortcuts.
  <details>
  </details>
</section>

<section>
  <h3>Anybody got a match?</h3>
  <p>
  </p>
  <pre>
    <code class='javascript'>
      app.all('/user/:id/:op?', function(req, res, next){ });
      app.get('/user/:id', function(req, res){ });
      app.get('/user/:id/edit', function(req, res){ });
      app.put('/user/:id', function(req, res){ });
      app.put('/user/:id[0-9]+', function(req, res){ });
      app.post('\/user\/([^\/]+)\/?', function(req, res){ });

    </code>
  </pre>
  <p>The 'all' verb is a pretty nifty helper if you want to perform the same
    action for all possible HTTP verbs.
  </p>
  <details>
  </details>
</section>

<section>
  <h3>Putting it all together</h3>
  <pre>
    <code class='javascript'>
      var express = require('express');
      var fs = require('fs');

      var app = express.createServer();

      app.configure(function(){
        app.set('view engine', 'jade');
        app.set('views', __dirname + '/views');

        app.use(express.bodyParser());
        app.use(app.router);
      });

      app.get('/', function(req, res) {
        //Render something
      });

      app.listen(8080);
    </code>
  </pre>
  <details>
  </details>
</section>

<section>
  <h3>Like an onion</h3>
  <p>Express uses a very convenient layering and middleware architecture which some may recongnize from
    the like of Rails. This form of loading components allows for great flexibility when choosing which
    components you'd like to use in your web app, while at the same time giving you free decoupling and the ability
    to switch components quickly so long as they maintain the interface.<br> Below we can see how middlewares are being loaded
    into Express. It's important to remember that requests will flow through these middlewares in the same sequenece they
    were loaded.
  </p>
  <pre>
    <code class='javascript'>
      app.configure(function(){
        app.set('view engine', 'jade');
        app.set('views', __dirname + '/views');

        app.use(express.bodyParser());
        app.use(app.router);
      });
    </code>
  </pre>
  <details>
  </details>
</section>

<section>
  <h3>Viewing it</h3>
  <p>
    No framework is complete without support for some kind of templating engine,
    and Express is no different. There are serveral good engines out there, but the one
    we're going to use is Jade, because of how nicely it integrates with Express. Using
    Mustache.js in this case is generally a better idea, but it requires creating our own
    middleware for it and is out of scope.
  </p>
  <pre>
    <code class='javascript'>
      app.configure(function(){
        app.set('view engine', 'jade');
        app.set('views', __dirname + '/views');

        app.use(express.bodyParser());
        app.use(app.router);
      });

      app.get('/', function(req, res) {
        res.render('index', { layout : true });
      });
    </code>
  </pre>
  <details>
  </details>
</section>

<section>
  <h3>Something's missing...</h3>
  <p>
    We have routes, structure, even views, but we're still missing a place
    to put our shtuff. We need a database.
  </p>
  <pre>
    <code class='javascript'>
        //DB code
    </code>
  </pre>
  <details>
  </details>
</section>


<section>
  <h3>Joey, all grown up</h3>
  <pre>
    <code class='javascript'>
        var jade = require('jade');
        var express = require('express');
        var fs = require('fs');

        var app = express.createServer();

        app.configure(function(){
          app.set('view engine', 'jade');
          app.set('views', __dirname + '/views');

          app.use(express.bodyParser());
          app.use(app.router);
        });

        app.configure('development', function(){
          app.use(express.errorHandler( { dumpExceptions: true
                                        , showStack: true }
                                      ));
        });

        app.configure('production', function(){
          app.use(express.errorHandler());
        });
    </code>
  </pre>
  <details>
  </details>
</section>

<section>
  <h3>Dat Data</h3>
  <pre>
    <code class='javascript'>
        var users = {
            'Sam'   : {
                phone   : '555-123-4567'
              , address : 'Something something st., Montreal, QC'
            }
          , 'James' : {
                phone   : '111-987-6543'
              , address : 'Another something st., Montreal, QC'
          }
          , 'Mike'  : {
                phone   : '955-696-7878'
              , address : 'Something the third st., Montreal, QC'
          }
          , 'Anonymous'  : {
                phone   : '431-159-7532'
              , address : 'Something Jr st., Montreal, QC'
          }
        };
    </code>
  </pre>
  <details>
  </details>
</section>

<section>
  <h3>The Meat</h3>
  <pre>
    <code class='javascript'>
        function getUserData(req, res, next) {
          var user = users[req.params.name];
          if (user) {
            req.user = user;
            req.user.name = req.params.name;
            next();
          }
          else {
            next(new Error("Can't find the user " + req.params.name));
          }
        }

        app.get('/', function(req, res) {
          res.render('index', { layout : true });
        });

        app.get('/entry/:name', getUserData, function(req, res) {
          res.render('index', { layout  : true
                              , locals  : req.user });
        });

        app.listen(8080);
    </code>
  </pre>
  <details>
  </details>
</section>

<section>
  <h3>Part deux - Concurrently Crawling Craigslist</h3>
  <p>
    Now that you've seen a bit of Node's callback system, we can have a look at how the non-blocking,
    asynchronous bit is handled in Node.<br><br>

    But first, what is blocking or non-blocking IO anyway?<br>
    When your code uses the hardware to read a file, fetch a network resource, read a device or do
    pretty much anything that requires it to sit and wait until the external resource responds with
    data, is essentially blocking IO.<br><br>

    This is where Node really shines. It allows us to execute
    thousands of operations concurrently, while having the results of the operation delivered to a callback function
    executed when the data is ready. If you're thinking about AJAX than this is very similar concept.<br><br>
  </p>
  <details>
  </details>
</section>

<style>
  html { background-color: #929292; }
  body { background-color: #2D2D2D; border-radius: 0px}
  /* A section is a slide. It's size is 800x600, and this will never change */
  section {
      /* The fonts from Google */
      font-family: 'Yanone Kaffeesatz', 'Oswald', arial, serif;
      font-size: 30px;
      color: #dddddd;
  }
  h1, h2 {
    margin-top: 200px;
    text-align: center;
    font-size: 80px;
  }
  h3 {
    font-size: 45px;
    margin: 50px 0 30px 50px;
  }

  ul {
      margin: 50px 100px;
  }

  p {
    margin: 40px 75px;
    font-size: 30px;
  }

  q {
    display: block;
    width: 100%;
    height: 100%;
    background-color: black;
    color: white;
    font-size: 60px;
    padding: 50px;
  }
 pre {
  font-size: 20px;
 }
/*  img, video {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    background-color: black;
    z-index: -1;
  }*/

  footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: 40px;
    text-align: right;
    background-color: #F3F4F8;
    border-top: 1px solid #eee;
    color: black;
  }

  /* Transition effect */
  /* Feel free to change the transition effect for original
     animations. See here:
     https://developer.mozilla.org/en/CSS/CSS_transitions
     How to use CSS3 Transitions: */
  section {
      -moz-transition: left 400ms linear 0s;
      -webkit-transition: left 400ms linear 0s;
      -ms-transition: left 400ms linear 0s;
      transition: left 400ms linear 0s;
  }

  /* Before */
  section { left: -150%; }
  /* Now */
  section[aria-selected] { left: 0; }
  /* After */
  section[aria-selected] ~ section { left: +150%; }

  /* Incremental elements */

  /* By default, visible */
  .incremental > * { opacity: 1; }

  /* The current item */
  .incremental > *[aria-selected] { opacity: 1; }

  /* The items to-be-selected */
  .incremental > *[aria-selected] ~ * { opacity: 0; }

  /* The progressbar, at the bottom of the slides, show the global
     progress of the presentation. */
  #progress-bar {
    height: 2px;
    background: #AAA;
  }
</style>

<!-- {{{{ dzslides core
#
#
#     __  __  __       .  __   ___  __
#    |  \  / /__` |    | |  \ |__  /__`
#    |__/ /_ .__/ |___ | |__/ |___ .__/ core :€
#
#
# The following block of code is not supposed to be edited.
# But if you want to change the behavior of these slides,
# feel free to hack it!
#
-->

<div id="progress-bar"></div>

<!-- Default Style -->
<style>
  * { margin: 0; padding: 0; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
  details { display: none; }
  body {
    width: 960px; height: 720px;
    margin-left: -480px; margin-top: -360px;
    position: absolute; top: 50%; left: 50%;
    /*margin-left: -600px; margin-top: -400px;*/
    position: absolute;
    left: 50%; top: 50%;
    overflow: hidden;
  }
  section {
    position: absolute;
    pointer-events: none;
    width: 100%; height: 100%;
  }
  section[aria-selected] { pointer-events: auto; }
  html { overflow: hidden; }
  body { display: none; }
  body.loaded { display: block; }
  .incremental {visibility: hidden; }
  .incremental[active] {visibility: visible; }
  #progress-bar{
    bottom: 0;
    position: absolute;
    -moz-transition: width 400ms linear 0s;
    -webkit-transition: width 400ms linear 0s;
    -ms-transition: width 400ms linear 0s;
    transition: width 400ms linear 0s;
  }
</style>

<script src='zepto.js'></script>
<script src='presentation.js'></script>

<script>
  var Dz = {
    remoteWindows: [],
    idx: -1,
    step: 0,
    slides: null,
    progressBar : null,
    params: {
      autoplay: "1"
    }
  };

  Dz.init = function() {
    document.body.className = "loaded";
    this.slides = $$("body > section");
    this.progressBar = $("#progress-bar");
    this.setupParams();
    this.onhashchange();
    this.setupTouchEvents();
    this.onresize();
  }

  Dz.setupParams = function() {
    var p = window.location.search.substr(1).split('&');
    p.forEach(function(e, i, a) {
      var keyVal = e.split('=');
      Dz.params[keyVal[0]] = decodeURIComponent(keyVal[1]);
    });
  }

  Dz.onkeydown = function(aEvent) {
    // Don't intercept keyboard shortcuts
    if (aEvent.altKey
      || aEvent.ctrlKey
      || aEvent.metaKey
      || aEvent.shiftKey) {
      return;
    }
    if ( aEvent.keyCode == 37 // left arrow
      || aEvent.keyCode == 38 // up arrow
      || aEvent.keyCode == 33 // page up
    ) {
      aEvent.preventDefault();
      this.back();
    }
    if ( aEvent.keyCode == 39 // right arrow
      || aEvent.keyCode == 40 // down arrow
      || aEvent.keyCode == 34 // page down
    ) {
      aEvent.preventDefault();
      this.forward();
    }
    if (aEvent.keyCode == 35) { // end
      aEvent.preventDefault();
      this.goEnd();
    }
    if (aEvent.keyCode == 36) { // home
      aEvent.preventDefault();
      this.goStart();
    }
    if (aEvent.keyCode == 32) { // space
      aEvent.preventDefault();
      this.toggleContent();
    }
    if (aEvent.keyCode == 70) { // f
      aEvent.preventDefault();
      this.goFullscreen();
    }
  }

  /* Touch Events */

  Dz.setupTouchEvents = function() {
    var orgX, newX;
    var tracking = false;

    var db = document.body;
    db.addEventListener("touchstart", start.bind(this), false);
    db.addEventListener("touchmove", move.bind(this), false);

    function start(aEvent) {
      aEvent.preventDefault();
      tracking = true;
      orgX = aEvent.changedTouches[0].pageX;
    }

    function move(aEvent) {
      if (!tracking) return;
      newX = aEvent.changedTouches[0].pageX;
      if (orgX - newX > 100) {
        tracking = false;
        this.forward();
      } else {
        if (orgX - newX < -100) {
          tracking = false;
          this.back();
        }
      }
    }
  }

  /* Adapt the size of the slides to the window */

  Dz.onresize = function() {
    var db = document.body;
    var sx = db.clientWidth / window.innerWidth;
    var sy = db.clientHeight / window.innerHeight;
    var transform = "scale(" + (1/Math.max(sx, sy)) + ")";

    db.style.MozTransform = transform;
    db.style.WebkitTransform = transform;
    db.style.OTransform = transform;
    db.style.msTransform = transform;
    db.style.transform = transform;
  }


  Dz.getDetails = function(aIdx) {
    var s = $("section:nth-of-type(" + aIdx + ")");
    var d = s.$("details");
    return d ? d.innerHTML : "";
  }

  Dz.onmessage = function(aEvent) {
    var argv = aEvent.data.split(" "), argc = argv.length;
    argv.forEach(function(e, i, a) { a[i] = decodeURIComponent(e) });
    var win = aEvent.source;
    if (argv[0] === "REGISTER" && argc === 1) {
      this.remoteWindows.push(win);
      this.postMsg(win, "REGISTERED", document.title, this.slides.length);
      this.postMsg(win, "CURSOR", this.idx + "." + this.step);
      return;
    }
    if (argv[0] === "BACK" && argc === 1)
      this.back();
    if (argv[0] === "FORWARD" && argc === 1)
      this.forward();
    if (argv[0] === "START" && argc === 1)
      this.goStart();
    if (argv[0] === "END" && argc === 1)
      this.goEnd();
    if (argv[0] === "TOGGLE_CONTENT" && argc === 1)
      this.toggleContent();
    if (argv[0] === "SET_CURSOR" && argc === 2)
      window.location.hash = "#" + argv[1];
    if (argv[0] === "GET_CURSOR" && argc === 1)
      this.postMsg(win, "CURSOR", this.idx + "." + this.step);
    if (argv[0] === "GET_NOTES" && argc === 1)
      this.postMsg(win, "NOTES", this.getDetails(this.idx));
  }

  Dz.toggleContent = function() {
    // If a Video is present in this new slide, play it.
    // If a Video is present in the previous slide, stop it.
    var s = $("section[aria-selected]");
    if (s) {
      var video = s.$("video");
      if (video) {
        if (video.ended || video.paused) {
          video.play();
        } else {
          video.pause();
        }
      }
    }
  }

  Dz.setCursor = function(aIdx, aStep) {
    // If the user change the slide number in the URL bar, jump
    // to this slide.
    aStep = (aStep != 0 && typeof aStep !== "undefined") ? "." + aStep : ".0";
    window.location.hash = "#" + aIdx + aStep;
  }

  Dz.onhashchange = function() {
    var cursor = window.location.hash.split("#"),
        newidx = 1,
        newstep = 0;
    if (cursor.length == 2) {
      newidx = ~~cursor[1].split(".")[0];
      newstep = ~~cursor[1].split(".")[1];
      if (newstep > Dz.slides[newidx - 1].$$('.incremental > *').length) {
        newstep = 0;
        newidx++;
      }
    }
    this.setProgress(newidx, newstep);
    if (newidx != this.idx) {
      this.setSlide(newidx);
    }
    if (newstep != this.step) {
      this.setIncremental(newstep);
    }
    for (var i = 0; i < this.remoteWindows.length; i++) {
      this.postMsg(this.remoteWindows[i], "CURSOR", this.idx + "." + this.step);
    }
  }

  Dz.back = function() {
    if (this.idx == 1 && this.step == 0) {
      return;
    }
    if (this.step == 0) {
      this.setCursor(this.idx - 1,
                     this.slides[this.idx - 2].$$('.incremental > *').length);
    } else {
      this.setCursor(this.idx, this.step - 1);
    }
  }

  Dz.forward = function() {
    if (this.idx >= this.slides.length &&
        this.step >= this.slides[this.idx - 1].$$('.incremental > *').length) {
        return;
    }
    if (this.step >= this.slides[this.idx - 1].$$('.incremental > *').length) {
      this.setCursor(this.idx + 1, 0);
    } else {
      this.setCursor(this.idx, this.step + 1);
    }
  }

  Dz.goStart = function() {
    this.setCursor(1, 0);
  }

  Dz.goEnd = function() {
    var lastIdx = this.slides.length;
    var lastStep = this.slides[lastIdx - 1].$$('.incremental > *').length;
    this.setCursor(lastIdx, lastStep);
  }

  Dz.setSlide = function(aIdx) {
    this.idx = aIdx;
    var old = $("section[aria-selected]");
    var next = $("section:nth-of-type("+ this.idx +")");
    if (old) {
      old.removeAttribute("aria-selected");
      var video = old.$("video");
      if (video) {
        video.pause();
      }
    }
    if (next) {
      next.setAttribute("aria-selected", "true");
      var video = next.$("video");
      if (video && !!+this.params.autoplay) {
        video.play();
      }
    } else {
      // That should not happen
      this.idx = -1;
      // console.warn("Slide doesn't exist.");
    }
  }

  Dz.setIncremental = function(aStep) {
    this.step = aStep;
    var old = this.slides[this.idx - 1].$('.incremental > *[aria-selected]');
    if (old) {
      old.removeAttribute('aria-selected');
    }
    var incrementals = $$('.incremental');
    if (this.step <= 0) {
      $$.forEach(incrementals, function(aNode) {
        aNode.removeAttribute('active');
      });
      return;
    }
    var next = this.slides[this.idx - 1].$$('.incremental > *')[this.step - 1];
    if (next) {
      next.setAttribute('aria-selected', true);
      next.parentNode.setAttribute('active', true);
      var found = false;
      $$.forEach(incrementals, function(aNode) {
        if (aNode != next.parentNode)
          if (found)
            aNode.removeAttribute('active');
          else
            aNode.setAttribute('active', true);
        else
          found = true;
      });
    } else {
      setCursor(this.idx, 0);
    }
    return next;
  }

  Dz.goFullscreen = function() {
    var html = $('html'),
        requestFullscreen = html.requestFullscreen || html.requestFullScreen || html.mozRequestFullScreen || html.webkitRequestFullScreen;
    if (requestFullscreen) {
      requestFullscreen.apply(html);
    }
  }

  Dz.setProgress = function(aIdx, aStep) {
    var slide = $("section:nth-of-type("+ aIdx +")");
    if (!slide)
      return;
    var steps = slide.$$('.incremental > *').length + 1,
        slideSize = 100 / (this.slides.length - 1),
        stepSize = slideSize / steps;
    this.progressBar.style.width = ((aIdx - 1) * slideSize + aStep * stepSize) + '%';
  }

  Dz.postMsg = function(aWin, aMsg) { // [arg0, [arg1...]]
    aMsg = [aMsg];
    for (var i = 2; i < arguments.length; i++)
      aMsg.push(encodeURIComponent(arguments[i]));
    aWin.postMessage(aMsg.join(" "), "*");
  }

  function init() {
    Dz.init();
    window.onkeydown = Dz.onkeydown.bind(Dz);
    window.onresize = Dz.onresize.bind(Dz);
    window.onhashchange = Dz.onhashchange.bind(Dz);
    window.onmessage = Dz.onmessage.bind(Dz);
  }

  window.onload = init;
</script>


<script> // Helpers
  if (!Function.prototype.bind) {
    Function.prototype.bind = function (oThis) {

      // closest thing possible to the ECMAScript 5 internal IsCallable
      // function
      if (typeof this !== "function")
      throw new TypeError(
        "Function.prototype.bind - what is trying to be fBound is not callable"
      );

      var aArgs = Array.prototype.slice.call(arguments, 1),
          fToBind = this,
          fNOP = function () {},
          fBound = function () {
            return fToBind.apply( this instanceof fNOP ? this : oThis || window,
                   aArgs.concat(Array.prototype.slice.call(arguments)));
          };

      fNOP.prototype = this.prototype;
      fBound.prototype = new fNOP();

      return fBound;
    };
  }

  var $ = (HTMLElement.prototype.$ = function(aQuery) {
    return this.querySelector(aQuery);
  }).bind(document);

  var $$ = (HTMLElement.prototype.$$ = function(aQuery) {
    return this.querySelectorAll(aQuery);
  }).bind(document);

  $$.forEach = function(nodeList, fun) {
    Array.prototype.forEach.call(nodeList, fun);
  }

</script>
<!-- vim: set fdm=marker: }}} -->