Adding content, first pass at first part

.jshintrc

@@ -41,6 +41,7 @@
     "it": true,
     "jasmine": true,
     "module": true,
+    "phantom": true,
     "process": true,
     "require": true,
     "requirejs": true,

Gruntfile.js

@@ -63,11 +63,19 @@ module.exports = function (grunt) {
         dest: '<%= clean.app %>',
         cwd: './assets/app',
         expand: true
+      },
+
+      img: {
+        src: '**/*.png',
+        dest: '<%= clean.img %>',
+        cwd: './assets/images',
+        expand: true
       }
     },
 
     clean: {
       app: './static/app',
+      img: './static/images',
       compass: './sass-cache',
       karma: './karma-*',
       tmp: './tmp-*.tmp'

assets/app/widgets/slide/template.hbs

@@ -1,11 +1,12 @@
 <div class="slide slide-{{id}}">
   <div class="copy"></div>
   {{#code}}
+  <section class="code-layout">
     <pre><code class="language-javascript"></code></pre>
-    <button class="request" data-env="phantomjs-1.9.8">phantomjs-1.9.8</button>
-    <button class="request" data-env="phantomjs-2.0.0">phantomjs-2.0.0</button>
-    <button class="request" data-env="node">node</button>
-    <pre><code class="stdout"></code></pre>
-    <pre><code class="stderr"></code></pre>
+    <button class="request" data-env="phantomjs-1.9.8">PhantomJS v1.9.8</button>
+    <button class="request" data-env="phantomjs-2.0.0">PhantomJS v2.0.0</button>
+    <button class="request" data-env="node">Node v0.10.36</button>
+    <button class="request" data-env="clear">Code</button>
+  </section>
   {{/code}}
 </div>

assets/app/widgets/slide/view.js

@@ -23,9 +23,7 @@ define([
     ui: {
       copy: '.copy',
       code: '.language-javascript',
-      button: '.request',
-      stdout: '.stdout',
-      stderr: '.stderr'
+      button: '.request'
     },
 
     events: {
@@ -50,16 +48,18 @@ define([
     onRequestResult: function onRequestResult(event) {
       event.preventDefault();
       var env = $(event.target).data('env');
+      if (env === 'clear') {
+        this.render();
+        return;
+      }
       var results = new ResultsModel({id: this.model.get('id'), env: env});
-      var $stdout = this.ui.stdout;
-      var $stderr = this.ui.stderr;
+      var $code = this.ui.code;
       results.fetch({
         success: function () {
-          $stdout.text(results.get('stdout'));
-          $stderr.text(results.get('stderr'));
+          $code.text(results.get('stdout') + results.get('stderr'));
         },
         error: function () {
-          $stdout.text('error');
+          $code.text('error');
         }
       });
     }

assets/style/main.scss

@@ -1,11 +1,36 @@
 @import "_normalize";
+@import "compass";
+
+
+$slide-width: 1280px;
+$slide-height: 720px;
+
+$main-text: #4a2c0a;
+$base-font-size: 36px;
+$mega-font-size: 80px;
+$strong-color: #566b15;
+$background-color: #ffdfdf;
 
 html, body {
   height: 100%;
+  @include background-image(linear-gradient(to bottom, $background-color, white));
 }
 
-$slide-width: 1280px;
-$slide-height: 720px;
+h1 {
+  font-size: $mega-font-size;
+}
+
+h2 {
+  font-size: $mega-font-size / 12 * 9;
+}
+
+strong {
+  color: $strong-color;
+}
+
+li {
+  line-height: 3em;
+}
 
 .deck {
   position: relative;
@@ -13,9 +38,12 @@ $slide-height: 720px;
 
 .slide {
   width: $slide-width;
+  height: $slide-height;
   margin: 0 auto;
-}
+  color: $main-text;
+  font-size: $base-font-size;
 
-.page-2 {
-  background-color: #bada55;
+  pre, code {
+    overflow: visible;
+  }
 }

bin/deck

@@ -24,9 +24,9 @@ app.use((function log() {
 }()));
 
 function renderError(res, err) {
-  console.error(err);
+  console.error(err.toString());
   res.writeHead(500, {'Content-Type': 'text/plain'});
-  res.write(err);
+  res.send(err.toString());
 }
 
 function pathToFile() {
@@ -127,8 +127,11 @@ app.get(/slide\/(\d+)/, function showHandler(req, res, next) {
 app.get(/results\/([^\/]+)\/(\d\d)$/, function resultsHandler(req, res, next) {
   var app = req.params[0];
   var slideId = req.params[1];
+  var validApps = [
+    'node', 'phantomjs-1.9.8', 'phantomjs-2.0.0'
+  ];
 
-  if (!_.contains(['node', 'phantomjs-1.9.8', 'phantomjs-2.0.0'], app)) {
+  if (!_.contains(validApps, app)) {
     next();
     return;
   }
@@ -177,7 +180,7 @@ app.get(/results\/([^\/]+)\/(\d\d)$/, function resultsHandler(req, res, next) {
         return;
       }
       if (err) {
-        renderError(res, err);
+        res.send({stdout: '', stderr: err.toString()});
         return;
       }
       res.send({stdout: stdout, stderr: stderr});

data/code/phantom-webpage-screenshot.js

@@ -0,0 +1,10 @@
+var webpage = require('webpage');
+var page = webpage.create();
+
+page.viewportSize = {width: 1280, height: 720};
+
+page.open('http://phantomjs.org', function() {
+   page.render('phantomjs.png');
+   console.log('created phantomjs.png');
+   phantom.exit();
+});

data/code/prototypes.js

@@ -1,5 +1,11 @@
 (function (phantom) {
-  console.log(Function.prototype.bind);
+  console.log('bind:', typeof Function.prototype.bind);
+  console.log('9 === parseInt("09"):', 9 === parseInt('09'));
+
+  console.log('map:', typeof Array.prototype.map);
+  console.log('reduce:', typeof Array.prototype.reduce);
+  console.log('filter:', typeof Array.prototype.filter);
+  console.log('Object.create:', typeof Object.create);
 
   if (phantom) {
     phantom.exit();

data/copy/about.md

@@ -0,0 +1,7 @@
+# About Me
+
+ - Hi, I'm Buddy ☺
+ - Not affiliated with PhantomJS in any way
+ - Principal Software Engineer at Convertro/AOL (we're hiring)
+ - Full Stack engineer (JavaScript, Go, Python, etc)
+ - Like motorcycles, math, science and obnoxious 80's punk

data/copy/define-developer.md

@@ -0,0 +1,3 @@
+# Developer Definition:
+
+## PhantomJS is a **JavaScript runtime** that gives access to native **Qt/WebKit** objects.

data/copy/define-simple.md

@@ -0,0 +1,3 @@
+# Simple Definition:
+
+## Headless Web Browser

data/copy/js-runtime.md

@@ -0,0 +1 @@
+# JavaScript Runtime

data/copy/only-title.md

@@ -0,0 +1 @@
+# PhantomJS

data/copy/screen-shot.md

@@ -0,0 +1,3 @@
+# PhantomJS
+
+![PhantomJS webpage screenshot](/static/images/phantomjs.png "PhantomJS")

data/copy/title.md

@@ -1,3 +1,7 @@
 # PhantomJS Under the Hood
 
- - Buddy Sandidge
+## Buddy Sandidge
+
+ - [github.com/xbudex/phantom-talk](https://github.com/xbudex/phantom-talk)
+
+ - buddy.sandidge@gmail.com

data/slide/01.json

@@ -1,4 +1,3 @@
 {
-  "copy": "title",
-  "code": "prototypes"
+  "copy": "title"
 }

data/slide/02.json

@@ -1,3 +1,3 @@
 {
-  "copy": "define"
+  "copy": "about"
 }

data/slide/03.json

@@ -0,0 +1,3 @@
+{
+  "copy": "screen-shot"
+}

data/slide/04.json

@@ -0,0 +1,4 @@
+{
+  "copy": "only-title",
+  "code": "phantom-webpage-screenshot"
+}

data/slide/05.json

@@ -0,0 +1,3 @@
+{
+  "copy": "define-developer"
+}

data/slide/06.json

@@ -0,0 +1,4 @@
+{
+  "copy": "js-runtime",
+  "code": "prototypes"
+}