Lets try the new Express 4.0 version

Express is well known library for building simple web applications. Also express is really modular library you can easily add other modules and middlewares to make your life easier. With the new version the structure is more modular and the core of the code is split into multiple modules.

Getting started, as you remember the old express version had express generator built-in which is now separated to `express-generator` module. To generate application boilerplate:

npm install -g express-generator
mkdir express4
cd express4
express
npm i

Now the express should be installed with the dependencies of other libraries. The server start is hidden in `bin/www` file, run it and open browser localhost:3000. The browser page should look like this:

2014-04-10-215445_542x263_scrot 

The changes that 4.0 bring are more like structural, all the previously included middlewares are now separated modules:

The use of the middleware is same with app.use, so the setup looks like this:

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');

app.use(favicon());
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded());
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));

// Routes setup
app.use('/', routes);
app.use('/users', users);

The greatest change is the Router support, which allows to create sub routes with separated middleware stack. Read more about the router usage in Express guide router. For example in the project you have created users routes, which contains separate router instance with authentication middleware which is applied only for this router.

var express = require('express');
var router = express.Router();

router.use(function authenticationMiddleware (req, res, next) {

    if (new Date().getSeconds() % 2) {
        next();
    }

    next(new Error('User not allowed to page'));
});

/* GET users listing. */
router.get('/', function(req, res) {
  res.send('respond with a resource');
});

module.exports = router;

If you are using the old version of express 3.5 and want to upgrade to express 4, make sure you have look through all the middleware changes. There are a lot of middlewares which might not be compatible with the new session middleware. But in overall there is not any big changes that breaks the compatibility and upgrading to newer version should be easy.

How to use generators support in Heroku

The use of Javascript has increased and the projects are getting more complex. The EcmaScript 6 brings many new features into languages that should make the development easier and make the Javascript ecosystem richer. Currently you could use some of the features on the server side with Node.js newer versions like 0.11. There isn’t many hosting services where you could select the running node engine. Luckily, Heroku has this support for this, there is nice site for versions.

2014-03-29-115418_1096x450_scrot

As you could see the version 0.11.12 is unstable but still you could use it. Lets assume you have already setup the project, now change the package.json, node property set it to ~0.11.


{
  "name": "myapp",
  "description": "a really cool app",
  "version": "0.0.1",
  "engines": {
    "node": "~0.11"
  },
  "dependencies": {
    "co": "^3.0.5"
  }
}
web: node --harmony server.js

The last step is to change the Procfile and add the –harmony flag. So the file should look something like this. This enables only small part of the ES6 functionality.

Stackoverflow new SEO paradise ?

Over the years SEO(search engine optimization) has become more important and profitable then ever. How many of you scroll down and look other pages in search engine results ? Not many, mostly the result should appear on first page and about first ten results are really important. That is the reason why companies try to get better ranking. There are many tips and tricks how to do that and it’s really long and boring topic.

Image

Image

But how it is related to SO(Stackoverflow.org) ? As you already have seen that when you are searching software related question you might end up in the SO page. The SO pages get really high page result rank and this is one of the tricks that SEO users use. It is actually good way to advertise your product or company. When you search for mailing software with API support I am sure some of the SO pages will contain similar answer “use MailChimp as it has 12k emails per month for free”. Well this is all great to explore new products and with also some user opinions. But now it has been pushed a little bit further as the SEO users create new questions and try to advertise their products with spamming such meaningless noise in SO.

Book Advanced Express Web Application Development

Book cover

I had opportunity to  read a book “Advanced Express Web Application Development”. There are many books written about using Express.js framework, some of are good and some not so good. This book gives you good ground understanding of the Node.js Express usage and example of how to develop solid application. Through the book you are working on single-page application called “Vision“, which covers both the client side (Backbone) and server-side development.

Some of the key points and topics what I liked in this book:

  • Single application through book, not just random code snippets which does not give the understanding how the project structure should be
  • Test driven development – TDD all the server-side code is tested
  • Scaling: vertical and horizontal – many books miss this chapter but that’s the reason you are using Node.js, right ? Actually this is large topic and needs to be covered more, maybe in future “someone” writes a book about scaling in Node.js.
  • Lastly there is the chapter of making your application ready for production

Well if you are using Express daily  this is “must read” book because there are many useful tips an guides you might find and apply in your projects.

Turn your dumb TV into smart TV

The most of the TV-s you can find in shops are with high-end built-in smart TV operations you can access YouTube, Twitter and so on. But these systems features are really limited and are meant to be used by common consumer. What if you want some more possibilities or have some older TV without all the smart TV functionality. But you still would like to see movies from external hard disk ?

There exists different Media Center building options:

  • Create small Intel i3 based Micro ATX box
  • Buy Media Player, like these http://www.xtreamer.net/
  • Or last option, if you want something cheaper consider buying Raspberry Pi, this is the option that I liked most.

The Raspberry Pi gives freedom, you get computer and use as you like. You can create personal web server or torrent download center, there’s endless possibilities what you can do.

Here is my current setup, which certainly will change in near future:

  • SD card 1GB Class 4 – really slow and if you want faster I/O, booting take at least class 10, also there are many SD Card models which are not supported.
  • Power supply with at least 1A 5V, works also with 700mA but I have connected some external USB devices
  • HDMI cable
  • External hard disk – I use WD Passport 500GB
  • Wireless Microsoft Arc keyboard – also the TV-s remote control works through the HDMI
  • Cat 5 cable or if not possible use USB Wifi adapter
  • Raspberry Pi comes without case so you need to buy one or build http://www.geek.com/chips/11-best-raspberry-pi-cases-1530907/ your own

OLYMPUS DIGITAL CAMERA

OLYMPUS DIGITAL CAMERA

As an operating system I am using OpenElec which is fast and does not come with any useless packages. If you would like to install some additional packages the better option is http://www.raspbmc.com.

Chrome missing feature…

I have been using Chrome for long time, before that I used Firefox which is also great browser but in Linux FF has this ugly title bar which can not be hidden. Off curse this is not the only reason why I mainly use Chrome.

Well it is not all so great when you are developing AJAX based sites you need to deal with different file formats like JSON and XML. Most of the browsers have really good XML built in formatting as the XML has been out for really long time, but what we are missing today is the support for JSON formatting.

Here is example of the formatted XML:
XML format in chrome

JSON example without formatting, currently it is readable but when more data needs to be handled makes it complicated to read:
JSON without formatting

At least we have extensions which can save the situation, I liked this extension called . What makes this extension good is that you can easily switch back to raw format.
Screenshot - 06102013 - 12:15:23 PM

Getting formidable form object in Express 3.0 on upload

The recent versions of Express frameworks, not only recent use for form handling the middleware bodyParser which makes uploading easy. Only problem is that the form object is not added to request object so you can not listen for some of the useful events like progress. To get the access to formidable form object you have to remove the multipart handling from middleware.

What does this mean ?

    app.use(express.bodyParser());

Is equal to this and now we have possibility to remove the multipart handling from middleware:

    app.use(express.json());
    app.use(express.urlencoded());
    app.use(express.multipart()); // Remove this line

Now comes the handling part on request:

exports.upload = function(req, res) {
    var form = new formidable.IncomingForm;
    form.keepExtensions = true;
    form.uploadDir = 'tmp/';

    form.parse(req, function(err, fields, files){
      if (err) return res.end('You found error');
      // do something with files.image etc
      console.log(files.image);
    });

    form.on('progress', function(bytesReceived, bytesExpected) {
        console.log(bytesReceived + ' ' + bytesExpected);
    });

    form.on('error', function(err) {
        res.writeHead(200, {'content-type': 'text/plain'});
        res.end('error:\n\n'+util.inspect(err));
    });
    res.end('Done');
    return;
};

Screenshot from 2012-12-02 10:53:11

Well this kind of form object creation is only needed if you want to access the events. If not use the default bodyParser’s multipart middleware which holds the code cleaner and you still can access the files properties like name, size etc.

IRC bot with Node.js

The old IRC protocol remains still pretty active as it is main communication for people who does not like to use Facebook. I have used IRC chat for long time and there are plenty of helpful people for discussing about programming.

Main thing is that you can connect to irc server by opening TCP connection and simply sending the commands. Lets give example with telnet, to connect you only need to:

  • telnet irc.freenode.net 6667
  • NICK username
  • USER username 8 * : Full Name
  • JOIN #node.js

As a result these command should bring you to node.js channel and you should see all the text stream. To send message to channel PRIVMSG #node.js :Test message, before sending message you have to specify who(user) or what channel receives the message. Another important thing is to follow the PING messages sent by server. If the user does not replay to the PING with PONG, user gets timeout and is disconnected from server.


All this can be really simply implemented in Node.js, the evented programming comes helpful when dealing with network. Here comes small example of IRC bot, which sends the user uptime if command @uptime is written to channel.

var net = require('net')
  , util = require('util')
  , exec = require('child_process').exec;

var options = {
    PORT: 6667
  , HOST: 'irc.freenode.net'
  , NICK: 'Miska'
  , CHANNELS: [ '#node.js', '#javascript', '#randomChan' ]
  , USER: {
        ALLOWED: [ 'risto_' ]
  }
};

var command = [
    { match: /^PING/, emit: 'pong' }
  , { match: '@uptime', emit: 'uptime' }
];

var socket = net.connect(options.PORT, options.HOST, function() {
    console.log('Connection up to irc server');
});

socket.setEncoding('ascii');
socket.setNoDelay();

socket.on('connect', function() {

    setTimeout(function() {
        socket.write(util.format('NICK %s\n', options.NICK));
        socket.write(util.format('USER %s 8 *: %s\n', options.NICK, 'Full Name'));
        socket.write(util.format('JOIN %s\n', options.CHANNELS.join(','))); 
    }, 10000);
});

socket.on('timeout', function() {
    console.log('TIMEOUT for connection');
    console.log('Total of bytes written: ' + socket.bytesWritten);
});

/**
 * Custom command for bot send the uptime
 */
socket.on('uptime', function() {
    var child = exec('uptime', function(err, stdout, stderr) {
        if (err) throw err;
        else {
            options.CHANNELS.forEach(function(elem) {
                var response = util.format('PRIVMSG %s :%s\n', elem, stdout);
                console.log(response);
                socket.write(response);
            });
        }
    });
});

socket.on('pong', function() {
    console.log('PONG message back');
    socket.write('PONG\n');
});

socket.on('data', function(data) {
    var cleanedData = data.toString().trim();
    console.log(cleanedData);

    command.forEach(function(command) {
        if (cleanedData.match(command.match)) {
            socket.emit(command.emit);
        }
    });
});



Classical and ES5 JavaScript inheritance

The inheritance and OOP concept is in JavaScript really hard to learn because there is not any standards for that like in Java or PHP. There is no structure like class, the keyword is in strict mode reserved keyword but no implementation or use. In JavaScript there are functions and using prototype to implement some of the OOP conception. That is why I made small example how to use the JavaScript objects in classical and ES5 way. This is not the complete example of OO.

Classical example and using the NEW keyword:

(function(document) {
'use strict';

  var Shape = function() { };
  
  Shape.prototype = {
    x: 30,
    y: 30,
    width: 25,
    height: 25,
    
    draw: function(ctx) {
      throw new Error("This is parent method");
    },
    
    print: function() {
      console.log(this.x + ':' + this.y + ' ' + this.width + '<>' + this.height);
    }
  };
  
  var Circle = function() { this.radius = 20; };
  Circle.prototype = new Shape();
  Circle.prototype.draw = function(ctx) {
    ctx.arc(12, 22, 66, 0, 2 * Math.PI, false);
  };
  
  var Square = function() { };
  Square.prototype = new Shape();
  Square.prototype.draw = function(ctx) {
    ctx.fillRect(this.x, this.y, this.width, this.height);
  };  
    
  var canvas = document.getElementById('panel');
  if (canvas.getContext) {
    var ctx = canvas.getContext('2d');
    var perfectCircle = new Circle();
    var mySquare = new Square();
    
    mySquare.draw(ctx);
    mySquare.print();
    
    perfectCircle.draw(ctx);
    perfectCircle.print();
    
  }
  
})(document);

ES5 example:

(function(document, console) {
'use strict';

  var Shape = Object.create({
    x: 30,
    y: 30,
    width: 25,
    height: 25,
    
    draw: function(ctx) {
      throw new Error("This is parent method");
    },
    
    print: function() {
      console.log(this.x + ':' + this.y + ' ' + this.width + '<>' + this.height);
    }
  });

 
  var Circle = Object.create(Shape);
  Circle.radius = 10;
  Circle.draw = function(ctx) {
    ctx.beginPath();
    ctx.arc(this.x, this.y, this.radius, 0, 2 * Math.PI, false);
    ctx.stroke();
  };
  
  var Square = Object.create(Shape);
  Square.draw = function(ctx) {
    ctx.fillRect(this.x, this.y, this.width, this.height);
  };  
  
  // Drawing to canvas
  var canvas = document.getElementById('panel');
  if (canvas.getContext) {
    var ctx = canvas.getContext('2d');
    var perfectCircle = Object.create(Circle);
    var mySquare = Object.create(Square);
    
    mySquare.draw(ctx);
    mySquare.print();
    
    perfectCircle.draw(ctx);
    perfectCircle.print();
    
  }
  
})(document, console);

Also the html to get the example working:

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Inheritance example</title>
</head>
<body>
  <canvas id="panel" width="150" height="150">Canvas not supported get better browser</canvas>
</body>
</html>

Result image should be something like this(well only the shapes not gradient):

jQuery too slow ?

jQuery is great JavaScript library, only that in time the core code has changed too heavy and most of the functionality is not used. Also jQuery has great support for cross browser functions, which need additional checks and boilerplate. This all slows down performance and may not be suitable for the mobiles.

What could be alternatives is to use some of the lightweight versions of jQuery like zepto.js, snack.js etc. Well even if these libraries seems to be too heavy, the last thing is to use JavaScript without any library or create your own layer top of the functions you need.

I did some of the performance test with jQuery, Zepto.js and using pure JavaScript DOM. All of the tests are done with , which runs the testing code in loop and counts the operations per second. ALl the benchmark tests are pushed to Github.

Example code of the JSlitmus test:

/*
 * Simple DOM object creation without adding to html.
 */
JSLitmus.test('DOM element creation', function() {
  document.createElement('div');
});


As you can see the winner of benchmark is JavaScript DOM API, also if the development is clearly mobile platform you should take advantage from lighter libraries.