Polyglot Conference 2013: Enhancing Development Tooling, Touch Events, and Iframes

Polyglot Conference 2013 - May 24, 2013

Polyglot Conference 2013 - May 24, 2013

http://lanyrd.com/2013/polyglotconf/may-24/

Development Tooling

Linting

flymake
grunt + jshint
fixjsstyle

// Gruntfile.js example
module.exports = function(grunt) {
  grunt.initConfig({
    jshint: {
      files: ['Gruntfile.js', 'src/**/*.js', 'test/**/*.js'],
      options: {
        globals: {
          jQuery: true
        }
      }
    }
  });

  grunt.loadNpmTasks('grunt-contrib-jshint');
  grunt.registerTask('default', ['jshint']);
};

BDD

Look at the Cucumber tests as one of the styles for better integration support: verbose but focus is on customer rather than unit tests.

# features/step_definitions/calculator_steps.rb
Given(/^I have entered (\d+) into the calculator$/) do |n|
  @calc = Calculator.new
  @calc.push n.to_i
end

When(/^I press add$/) do
  @result = @calc.add
end

Then(/^the result should be (\d+) on the screen$/) do |result|
  expect(@result).to eq result.to_i
end

Touch Events

Demo

Combining touch and mouse with the new Chromebooks.

touch vs. mouse

function handleInteraction(event) {
  event.preventDefault();
  var touch = event.touches ? event.touches[0] : event;
  // Handle the interaction
}

element.addEventListener('mousedown', handleInteraction);
element.addEventListener('touchstart', handleInteraction);

Use libraries for gesture detection

hammer.js

var hammertime = new Hammer(myElement);
hammertime.on('pan', function(ev) {
    console.log(ev.type +" gesture detected.");
});

Performance

fast click
requestAnimationFrame

function animate() {
    // Update animations
    requestAnimationFrame(animate);
}
requestAnimationFrame(animate);

Fun with Iframes

Communication

// In the parent window
var iframe = document.getElementById('myIframe');
iframe.contentWindow.postMessage('Hello from parent!', '*');

// In the iframe
window.addEventListener('message', function(event) {
    if (event.origin !== "http://example.com") return;
    console.log('Received message:', event.data);
}, false);

iframe sandboxing

<iframe src="https://example.com" sandbox="allow-scripts allow-same-origin"></iframe>

Productivity Pulse

Quantified Self + Emacs. Shell and Emacs tooling like RescueTime.

;; Example of tracking in Emacs
(defun track-activity ()
  (let ((file-name (buffer-file-name)))
    (when file-name
      (append-to-file 
       (concat (format-time-string "[%Y-%m-%d %H:%M:%S]")
               " Edited: " file-name "\n")
       nil 
       "~/.emacs_activity_log"))))

(add-hook 'after-save-hook 'track-activity)

Messaging

pub/sub
req/res
server - broker - worker
push / pull

// Using Socket.io for pub/sub
var io = require('socket.io')(80);

io.on('connection', function (socket) {
  socket.on('subscribe', function(room) { 
    socket.join(room); 
  });

  socket.on('send message', function(data) {
    io.sockets.in(data.room).emit('conversation', data);
  });
});

Distributed Databases

riak + neo4j
redis + riak (common pattern)
couchdb
node

// Example of using CouchDB with Node.js
var nano = require('nano')('http://localhost:5984');
var db = nano.db.use('my_database');

db.insert({ name: 'John Doe' }, 'john', function(err, body) {
  if (!err)
    console.log("Document inserted");
});

Platform

Several using Couch + Node as backend stack.

Options

http://opentsdb.net/