Madhusudhan Srinivasa

I’ve been developing products on backbone.js on the front end for past couple of months and I feel that the development is rather slow when compared to the server side (have you felt the same?). Here I am talking about fairly large applications in which you are working with collaborators.

I want to address a few things in this post

1. Why go with purely client side approach?
2. Trade-offs of client side approach

Why go with purely client side approach?

1. Responsiveness
2. RESTful interface

One of the main reasons I feel like going with this approach is the responsiveness. If you use tools like grunt.js, you can just have 1 css file, 1 js file and 1 image sprite (yes there is an awesome module called node-spritesheets) and 1 html file. The whole app resides on the browser and its super fast and responsive! With this you’d also get to build a neat RESTful interface. These are the only two main advantages I see.

Trade-offs of client side approach

1. No hard and fast conventions
2. Development time is rather slow
3. Hard to maintain

When I say convention think about the conventions that you’d follow while developing an application server side and then compare it with the conventions that you’d follow with the client side approach (forget about the designs for a moment).

One of the differences between client side approach and server side approach is that - you don’t get to use tools that make your development faster. When I say tools here, it means stuff like generators etc. And there is no convention based approach, like if you place a file somewhere, it would not automatically perform something out of the box. So you need to manually wire up all the connections between these components, which also makes it a bit hard to maintain.

What I love about the js community is its a free world! You can write code however you want! (not literally) There are numerous advantages! The drawback here being the lack of conventions on how to use them with each other. Because of this, there are chances that you might end up doing a particular task in a very complex and time consuming way (as opposed to the way you’d have done if there was a convention) Of-course you can bring some conventions on a project level, that’s what happens all the time but even there, its a bit hard to maintain the code - coz not everyone would write code of the same quality, simplicity. Then you end up doing code reviews.

What do you think? Do you feel the same? I would like to know about your experiences.

Tools and libs I’ve been using:

• backbone.js
• backbone.layoutmanager
• backbone-boilerplate
• grunt-bbb
• twitter bootstrap

I haven’t tried any other libs like angular or meteor…

A simple script to install/update the much frequently updated node.js platform.

Here’s what you have to do to install/update node.js and npm to the version you want in just 1 command

curl https://raw.github.com/gist/3791075 | sh -s 0.8.10

Its a bit difficult to remember the url everytime you want to update, so you can create a simple alias function which does the job. Here’s how

Put the below in your ~/.bash_profile

function update-node {
  version=$1
  curl https://raw.github.com/gist/3791075 | sh -s $version
}

Now you can simply run update-node 0.8.10 !

Oh and btw, it will install node to ~/local/node directory.

Resources:

• gist source

In my previous post I described how to use node-imager to upload images (with different presets) to rackspace cloudfiles. Today I have added support for amazon S3.

To use S3 as your storage, add the below in the imager config

storage: {
  S3: {
    key: 'API_KEY',
    secret: 'SECRET',
    bucket: 'BUCKET_NAME'
  }
}

and specify S3 while initializing imager

var imager = new Imager(imagerConfig, 'S3') 

Resources:

• node-imager on github

A Node.js module to resize, crop, manipulate images, maintain different presets of the same image and upload to rackspace cloudfiles. Its completely asynchronous.

Installation

$ npm install imager

Usage

You need to create imager configuration file with image variants and your storages

Below is an example config

module.exports = {
  variants: {
    items: {
      resize: { mini : "300x200", preview: "800x600" },
      crop: { thumb: "200x200" },
      resizeAndCrop: { large: {resize: "1000x1000", crop: "900x900"} }
    },
  },
  storage: {
    Rackspace: {
      auth: {
        username: "USERNAME", apiKey: "API_KEY", host: "lon.auth.api.rackspacecloud.com" 
      },
      container: "CONTAINER_NAME"
    }
  },
  debug: true
}

and then

var Imager = require('imager');
  , imagerConfig = require('path/to/imager-config.js')
  , imager = new Imager(imagerConfig, 'Rackspace')

Uploading file(s)

The callback recieves an err object, a files array (containing the names of the files which were uploaded) and the cdnUri.

Suppose you have a variant, say thumb, then you can access the image by cdnUri+'/'+'thumb_'+files[0]. This would be the complete url of the image

1. Form upload (multiple images)

   If you are using express, you will recieve all the form files in req.files.

   imager.upload(req.files.image, function(err, cdnUri, files) {
     // do your stuff
   }, 'projects')

   Here, projects is your scope or variant. If you don’t specify the scope or the variant, imager will try to look for a default variant named default. You must either specify a variant like above or provide a default variant.

2. Upload local images

   imager.upload(['/path/to/file'], function (err, cdnUri, files) {
   // do your stuff
   }, 'projects')

   Here files can be an array or a string. Make sure the path is absolute.

Removing file(s)

1. Remove from cloudfiles

   var files = ['1330838831049.png', '1330838831049.png']
   imager.remove(files, function (err) {
     // do your stuff
   }, 'projects')

   files can be array of filenames or a string of single filename.

   Even here, if the variant is not specified, imager will try to look for the default variant. If neither of them are provided, you will get an error.

Debugging

If you specify debug: true in the imager config, you can see the logs of uploaded / removed files.

To-do’s

• Support amazon storage
• Write more tests

Resources:

• Github source

Ok, here’s how to create simple pagination using jade and mongoose.

Say you have an event model with lots of events.

exports.index = function (req, res) {
  var perPage = 10
    , page = req.param('page') > 0 ? req.param('page') : 0

  Event
    .find()
    .select('name')
    .limit(perPage)
    .skip(perPage * page)
    .sort({name: 'asc'})
    .exec(function (err, events) {
      Event.count().exec(function (err, count) {
        res.render('events', {
            events: events
          , page: page
          , pages: count / perPage
        })
      })
    })
}

We would be using a helper method to create the pagination.

table.table
  thead
    tr
      th #
      th Name
    tbody
      each event, i in events
        tr
          td= 10 * page + (i + 1)
          td
            a(href="/admin/events/"+event.id)= event.name

if (pages > 1)
  .pagination
    ul
      != createPagination(pages, page)

The createPagination helper

res.locals.createPagination = function (pages, page) {
  var url = require('url')
    , qs = require('querystring')
    , params = qs.parse(url.parse(req.url).query)
    , str = ''

  params.page = 0
  var clas = page == 0 ? "active" : "no"
  str += '<li class="'+clas+'"><a href="?'+qs.stringify(params)+'">First</a></li>'
  for (var p = 1; p < pages; p++) {
    params.page = p
    clas = page == p ? "active" : "no"
    str += '<li class="'+clas+'"><a href="?'+qs.stringify(params)+'">'+ p +'</a></li>'
  }
  params.page = --p
  clas = page == params.page ? "active" : "no"
  str += '<li class="'+clas+'"><a href="?'+qs.stringify(params)+'">Last</a></li>'

  return str
}

That’s it!

Resources:

• Demo
• Source

I am a node.js developer and in my everyday development I mostly have node.js , mongodb servers running, bash is my default shell, I was using sublimetext as my default editor until textmate was opensourced yesterday!

dotfiles are great way to manage your development environment. After doing things repeatedly, over and over again, I came up with some scripts which eased my job. All you need to know is bash scripting.

This is how I have organized my dev box.

~/local - all custom built stuff (servers, db servers etc)
~/code - all the projects you work on
~/bin - custom bash scripts if you are using any

My dotfiles contain the following

• .gitconfig - which is the global git-config
• .bashrc - which sources some additional scripts
  • completions - some bash completions
  • aliases - some alias commands
  • paths - exports some custom paths (~/bin for example)
  • prompt - PS1 which shows git branch
  • `e