Askmike.org

Normally when I start working on a new webapp I end up using Jade as a template language, to get the templates working on the frontend I use a wonderful tool called templatizer which pre compiles all jade templates into plain javascript functions. I love this workflow because it has some awesome advantages like:

• Insanely fast rendering, because you are just running vanillaJS functions with strings in them.
• You still get to write your templates in a very friendly format: a .jade file for each template.
• The compiled templates are stored in .js files, which means you have a lot of control over the client side caching.
• The whole template parsing engine doesn’t need to go over the wire, this way your total JS size goes down.

But this time I started a new project and we decided to go for mustache instead of jade. After some searching I came across Twitter’s fast implementation of the mustache spec: hogan.js. The library not only promises to be very fast, but also that it consists of different modules that would make it easy to pre compile templates on the server.

There already were some wrappers available, but none fit quite right into my workflow: it must be easy to hook into my buildscript & must have some way of supporting client side development.

Meet Hoganizer, a small wrapper around the Hogan compiler to make this easier.

more

A couple of weeks ago I build a mobile app for school that shows you cultural stuff todo around you. It’s called randomapp (the assignment was to build an app using the Artsholland API. Therefor it only works in the Netherlands).

I’ve decided to build the backend in Mongo because of the recently added support for geospatial. I’ve got more experience in MySQL but the idea of having to write all the logic involved with querying location data myself alone was enough for me to choose for Mongo.

The backend for the app is a very simple API written in Node to query the Mongo collection location data. In this tutorial I’ll show you how some easy steps to get started asking Mongo questions about locations. I definitely recommend you check out the official documentation which covers everything I’m about to explain plus a lot more. Though this tutorial is more of an introduction to the subject.

more

We are creating mobile webbased-app for the iPhone called RandomApp. RandomApp is a compass like app that guides you through cultural venues in Amsterdam. Normally I set the apple-mobile-web-app-capable meta tag so that when the app gets added to the homescreen it runs chromeless (without the footer bar and the URL bar). However, due to a bug in iOS 6 (which has been fixed in the 6.1 beta) we can’t use this feature.

When you are building a webapp you want to hide the URL bar so you have more space available for you app. However when you have a certain amount of text on the page Safari offers the user a Reader button inside the URL bar. The consequence is that the URL bar won’t be hidden for at least five seconds. This shouldn’t bother you because it’s a great feature, except when you are trying to build an app with functionality instead of plain content.

more

Yesterday I made a mini HTML5 game based on the retro game Asteroids (here is a flashversion) without the asteroids, so I just made a ship with those controls. You can check it out on my personal site and the code is at my Github.

What about instead of using the keyboard for controls, using a potentiometer for the controls? Here is a video with me explaining it (the demo is at 8:30 into the video).

Here is the code to get it working:

The arduino code is straight from the node duino module. Read more about it in my article about duino.

Nodejs script

dependencies: node, duino, socket.io

var l = console.log;

var http = require('http');
var url  = require('url');

var io = require('socket.io').listen(1337);
io.set('log level', 1);

var arduino = require('duino');
var board = new arduino.Board({
  // debug: true
});
// defaults to a01
var pot = new arduino.Sensor({
  board: board,
});
var init = function() {
  broadcast();
}
board.on( 'ready', function() {
  // still not ready somehow
  setTimeout( init, 100 );
});

HTML file

<?php 
    header("Access-Control-Allow-Origin: *");
    header("Access-Control-Allow-Headers: *");
    header("Access-Control-Expose-Headers: Access-Control-Allow-Origin");
?>
<!doctype html>
<!--#

          Insert coin(s)

    &lt;Push any button to start&gt;

-->
<html lang=en>
    <head>
        <meta charset=utf-8>
        <meta http-equiv=X-UA-Compatible content="IE=edge,chrome=1">
        <title>ardiono game</title>
        <style>
            body {
                background-color:black;
            }
            #game {
              position: absolute;
              top: 0px;
              left: 0px;
              z-index: -1;
            }
        </style>
    </head>
    <body>
        <canvas id=game></canvas>
        <script src="//cdnjs.cloudflare.com/ajax/libs/socket.io/0.9.10/socket.io.min.js">
        <script src="game.js"></script>
    </body>
</html>
<!--#

    GAME OVER

front end javascript (game)

(function(d, c){
  //helpers
  var getHeight = function() {
    var D = document;
    return Math.max(
        Math.max(D.body.scrollHeight, D.documentElement.scrollHeight),
        Math.max(D.body.offsetHeight, D.documentElement.offsetHeight),
        Math.max(D.body.clientHeight, D.documentElement.clientHeight)
    );
  };
  var getWidth = function() {
    var D = document;
    return Math.max(
        Math.max(D.body.scrollWidth, D.documentElement.scrollWidth),
        Math.max(D.body.offsetWidth, D.documentElement.offsetWidth),
        Math.max(D.body.clientWidth, D.documentElement.clientWidth)
    );
  };
  // polyfill: set the window.requestAnimationFrame to the browsers specific version.
  (function() {
    var lastTime = 0
      , vendors = ['ms', 'moz', 'webkit', 'o']
      , x
      , length
      , currTime
      , timeToCall;

for(x = 0, length = vendors.length; x < length && !window.requestAnimationFrame; ++x) {
    window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
    window.cancelAnimationFrame = 
      window[vendors[x]+'CancelAnimationFrame'] || window[vendors[x]+'CancelRequestAnimationFrame'];
}
if (!window.requestAnimationFrame)
    window.requestAnimationFrame = function(callback, element) {
        currTime = new Date().getTime();
        timeToCall = Math.max(0, 16 - (currTime - lastTime));
        lastTime = currTime + timeToCall;
        return window.setTimeout(function() { callback(currTime + timeToCall); }, 
          timeToCall);
    };
if (!window.cancelAnimationFrame)
    window.cancelAnimationFrame = function(id) {
        clearTimeout(id);
    };

}());
  var angle = 0;
  // socket io hook
  var socket = io.connect('http://localhost:1337');
   socket.on('news', function (data) {
     // console.log(data.v);
     angle = data.v / 1024 * 8;
   });

var canvas = document.getElementById("game");
  canvas.height = getHeight();
  canvas.width = getWidth();
  // draw function is in a closure
  var draw = (function() {
    var PI = Math.PI
      , twoPI = PI * 2
      , speed = 5
      , shipX = 100
      , shipY = 100
      , degrees
      , cap = function( n, cap ) {
        return n < 0 ? n + cap : n % cap;
      }
    return function() {
      // clear the stage
      ctx.clearRect( 0, 0, canvas.width, canvas.height );
      ctx.save();
      // calc new position
      shipX += Math.sin( angle ) * speed;
      shipY -= Math.cos( angle ) * speed;
      shipX = cap( shipX, canvas.width );
      shipY = cap( shipY, canvas.height );
      // draw the changes
      // position
      ctx.translate( shipX, shipY );
      // rotate
      ctx.rotate( angle );
      // draw
      ctx.beginPath();
      ctx.fillStyle   = 'white';
      ctx.strokeStyle = 'white';
      // ship
      ctx.lineTo(0, -15);
      ctx.lineTo(10, 15);
      ctx.lineTo(0, 13);
      ctx.lineTo(-10, 15);
      // finish
      ctx.fill();
      ctx.stroke();
      ctx.closePath();
      ctx.restore();
    }
  })();
  if( canvas.getContext ) {
    var ctx = canvas.getContext("2d");
    // the loop
    (function animloop(){
        requestAnimationFrame( animloop );
        draw();
      })();
  }

This post is in Dutch because it is only useful for my fellow students.

In deze post leg ik wat basis dingen uit over hoe je functie’s voor je Arduino schrijft. Je schrijft je code voor je Arduino in Java Arduino taal en dat heeft een net iets andere syntax dan wat je misschien gewend bent.

Het antwoord van de eerste huiswerkopdracht voor week 3 staat onderaan.

more