Installing Yeoman Front-end Development Stack in Windows

14th Sep 2012 :
1. Alternate method to install Yeoman using Chocolatey.
2. Github Yeoman windows issues link.

15th Sep 2012 :
1. Added description (Chocolatey method).

17th Feb 2013 :
1. On Feb 15th 2013 Yeoman 1.0 BETA released. Its not supported on windows yet. 

3rd March 2013 :
1. Yeoman 1.0 Beta can be installed on windows.

This post is for Yeoman 0.9 and a new beta version, Yeoman 1.0 Beta is available and installation instructions can be found here Yeoman 1.0 Beta installation on windows

What is Yeoman?


Its a tool to make the front-end development workflow easier. It includes tools and front-end frameworks that helps to create web apps quickly and easily.


Initialize and scaffold a new project
Build & deploy app
Launch server, preview & live reload
Run automated tests using PhantomJS
Install & update packages
Customise your apps framwork
Genarator for chrome app

JavaScript Memoization – Caching Results for Better Performance.


Memoization is a technique used to cache result of a previously calculated value thus can avoid the need to recalculate.

Simplest example.

function square(num){
    return num*num;

square(10) //100

Each time when we call square(), value will re-calculate. Caching result is importent when we do CPU intensive tasks.

Re-writing above code using cache

Mac OSX Shortcuts

I’m using both windows and mac. Sometimes I missed up with keyboard shortcuts. Both OS has its own plus and minus. Enter/Return key opens a folder in windows but it renames file/folder in mac, in windows double clicking on titlebar maximize window, but same thing minimizes window in mac (you have to enable it from preference > doc – “Double-click a windows titlebar to minimize”).

Global shortcuts

Quickly open finder

cmd + opt + spacebar = win + E

Open Finder

Safari 6 Developer Tools Quick Look


Accessing developer tool
    Navigation sidebar
        Resources panel
    Content browser
    Details sidebar


Safari 6 web developer tool has substantial makeover from previous versions. It helps to prototype, debug and optimize web sites and safari extensions.


Web development process can be generalized as follows. Developer tool can accelerate this process.

Web development process

Prototype Prototype using HTML, CSS & javascript. Safari Snippet editor can help to create and test code snippets / functional modules. Use web Inspector console to find any errors in the code. User agent switcher will help to quickly check code is working as expected in different browsers and devices. Open site in other browsers and devices directly from safari develop menu.

How to Build a Nodejs Npm Package From Scratch.

Aim is to create a node package and publish it in npm registery. This is a simple example code with which you can understand all the process involved to create, install and publish node packages.

What is nodejs?

Hmm.. you will get plenty of good resources when you google it with this keyword. Start by installing it from here : nodejs

What is npm?

Node package manager and it is used to add or remove node applications. It came as a default package in newer node installations, both windows and mac. Install it on other platforms by refering this resource. Check out all the npm registry entries here.

Install your fevorite application – npm install app-name. Example:- npm install jsbeautify

Weight Scale Using HTML5 Drag & Drop and CSS3 Rotation

Weight scale using HTML5 drag & drop and CSS3 rotation

Lets start with a demo (only works in chrome).

Weight scale


Drag and drop weight block into scale [over doted outline]. Double click to remove a weight. Demo uses jQuery for DOM manipulation, css3 rotation for needle movement.

HTML5 Drag and drop basics

Before implementing check the readiness of drag and drop Currently it better to use jQuery UI or other JavaScript libraries to do a better cross browser handling.

StyleDocco – Create Generated Style Guide and Documentation for Your Web Project

StyleDocco is a style guide and documentation generator. It parse CSS comments in your stylesheet and creates style guide based on the comments. Its a nodejs package and can install using npm install.

Example style document generated using styledocco – twitter bootstrap


It is JavaScript running on server using google’s V8 JavaScript engine. Download latest node installer (win/mac/source code) form & install it.


After installation open command prompt and type “node -v”. You will get the node version number.