Node bits

Parse a Markup & read contents of a folder

const md = require('commonmark');
const fs = require('fs-extra');

const parser = new md.Parser();
const renderer = new md.HtmlRenderer();

var input = '# This is a header\n\nAnd this is a paragraph';
var content = renderer.render(parser.parse(input)).trim();


// __dirname
fs.readdir(__dirname, function (err, files) {
 if (err) throw err;
 for (var index in files) {
// package.json
  "author": "Hamzeen H ",
  "bin": "hello.js",
  "bugs": {
    "url": ""
  "dependencies": {
    "commonmark": "^0.25.0",
    "fs-extra": "^0.29.0"

Build an Ember Project and Launch

// build.js
var sys = require("sys"),
    exec = require('child_process').exec,
    util = require('util');

var visits = 0;
var result = exec("ember s --port=4300", function(err, stdout, stderr) {
//sys.puts("Obj:: "+util.inspect(result, false, null));

result.stdout.on('data', function(data) {

  visits += 1;
  if(visits == 5) {
    sys.puts("1 [Serving at 4300]");

    var spawn = require('child_process').spawn
    var sp = spawn('open', ['http://localhost:4300']);
    sp.on('exit', function (code) {
      sys.puts("2 [Opened Browser]");

Built to last; Build with Ember

#01. Wildcard Route for 404

// app/router.js {
  // other routes
  this.route('page-not-found', { path: '/*wildcard' });
// app/templates/page-not-found.hbs
Page Not Found

#02. Helper Method

// app/helpers/increment.js
import Ember from "ember";

export function increment(integer){
  return ++integer;

export default Ember.Helper.helper(increment);
// app/templates/index.hbs
{{#each model as |contact index|}}
    #{{increment index}}. {{contact.title}}

#03. Load a model within a Route

// app/routes/post.js
import Ember from 'ember';

var articles = [{
  id: 1,
  title: 'FirstPost',
  content: 'First Post'
}, {
  id: 2,
  title: 'About',
  content: 'About Splash'
}, {
  id: 5,
  title: 'Contact',
  content: 'You can reach us too!'

export default Ember.Route.extend({
  model: function(params) {
    var index = params.post_id -1;
    return articles[index];
// app/templates/post.hbs
Id:: {{}}
title: {{model.title}}
body: {{model.content}}

Port an Ember App to Cordova

1. Pre-Requisites

1.1. Ember Cli
$sudo npm install -g ember-cli

1.2. Cordova
$sudo npm install -g cordova

1.3. Also consider
Git, Node.js (with NPM), Bower, Ember CLI, PhantomJS

2. create ember project

$ember new labs

3. include ember-cordova-cli in package.json

“ember-cli-cordova”: “0.0.15‚ÄĚ,

4. alter config/environment.js

modulePrefix: ‘hello’,
environment: environment,
baseURL: ‘/’,
locationType: ‘hash’,
EmberENV: {
// Here you can enable experimental features on an ember canary build
// e.g. ‘with-controller’: true

APP: {
// Here you can pass flags/options to your application instance
// when it is created

cordova: {
rebuildOnChange: false,
emulate: false

5. Generate Cordova Proj (reverse domain name)

sudo ember generate cordova-init com.hamzeen.hello –platform=android

6. Open Existing Proj

ember cordova:prepare

7. Open iOS Porject in Xcode

ember cordova:open

8. Build for target platform

$sudo ember cordova:build –environment=production –platform=android

9. Additional

9.1. full access
$chmod 777 -R /dir

9.2. To modify npmrc for proxies and npm registry
$vi ~/.npmrc

10. Live debug

visit this url on chrome




for iOS

Deploying an ember app made with Firebase Adapter

I got an Ember.js project named “hello-hamzeen” which I did to explore “Ember.js” where I chose to use Firebase as the Adapter. Here is the world’s most succinct deployment instructions ever! ūüôā


1. If you don’t have firebase tools

$ sudo npm install -g firebase-tools

2. Otherwise, if you want to get it updated

$ sudo npm update -g firebase-tools

3. Login to your firebase account from terminal

$ sudo firebase login

Note: Upon successful login you should see something similar to the following url open up in your browser,


Now to the meat of it, initialize and deploy to Run the following from your project directory,

4. Initialize

When prompted select our project and type in the public folder you want to use. Typically this is ‘dist’ for Ember apps,
$ sudo firebase init

5. Deploy your project to

$ sudo firebase deploy

Mine can be found at,

Build Watchman from Source

Watchman doesn’t need introduction if you have done Compass, Susy or Sass. Simply put it’s a node module; an observer for picking up any changes in the filesystem at a specified location to afterwards, trigger an action based on it. Typically it is sued to transpile your .scss files into .css files. For some reason I’m unable to install it via npm command. So I got around to write the instructions to build it from its source.

$ git clone
$ cd watchman
$ git checkout v4.5.0 # for the latest stable version
$ ./
$ ./configure
$ make
$ sudo make install


Compass: Painless CSS Precompilation

If you have been up to any kind of web designing in the past 6 months, you have probably heard of css precompilers.¬†In a nutshell, they have emerged to give css the capabilities it didn‚Äôt have.¬†But not without the cost of introducing an intermediate file which would¬†eventually get transformed into css.¬†So here I get down¬†to write a beginner’s guide that might help kick-off¬†with sass (syntactically awesome style sheets) & compass. It covers important concepts, installation & a sample project to see it in action.


I. Important Concepts

As mentioned above, both sass & less needs to be compiled into css but to be careful with the terms this process is more formally known as transpiling. Because compiling often involves taking a source code and transforming it into something which is runnable in a machine readable (byte code) format. However with sass & less, this whole thing is slightly different as it only involves a process where the source files in these languages are¬†taken and transformed into another language. Here it’s css which is a stylesheet language. However making things more confusing, the same process is also widely referred to as precompiling. I’m sorry if I had already cracked your head here ūüė¶


II. Installation

Focusing back on Compass, it is just another implementation of sass which comes as a ruby gem & if you’re not a rubyist a ruby gem is more like a library when you think of it from a C++ perspective. So let’s setup compass first,

  1. Being a ruby gem, compass¬†requires ruby. If you’re on a mac/linux you should probably have it. If you want to confirm whether ruby is¬†already there, you can do so by hitting up “ruby -v” on your terminal/command prompt. If you don’t have it, head to Ruby Lang.
  2. To install compass hit the following two commands in your terminal,
    $sudo gem update --system
    $sudo gem install compass

Note: Sometimes you might face trouble, if you don’t use sudo. Hence, I have chosen to do it in sudo mode. If you’re on windows you just need to open cmd.exe as an administrator. Above¬†$ is nothing but a placeholder that you don’t need to type.


III. Sample Project

Now that we got everything setup. We can jump into our first project, a simple responsive page with a background video played from youtube. So to create our sass/compass enabled project there are two ways one is to generate project skeleton by using the following command,

$compass create compass_demo

The next approach which is mostly used by those who have been using compass over a period of time is to create it manually from an existing project. I know for certain that you are unlikely to have one especially, if you had decided to follow this post in order to try compass for the first time.¬†Don’t worry, I got you covered! you can use the project I have worked out for this post from github.

However, I wouldn’t encourage you to follow the second approach above as it will prevent your hand getting dirty¬†building a compass enabled app from scratch. Therefore, assuming you stick with the first mode, here comes the gist of this post, setting up the¬†config.rb ruby file¬†which got¬†generated after the create command above. let’s tackle it, this file gives in our hand to define two important aspects of this whole process. The first would be to define where¬†our css, sass, js and image files are going to reside basically, the structure of our project.

The next is to define which syntax we are going to use with our sass files. I have chosen .scss, as I prefer its syntax over .sass. Here is the content of my configurator (i.e. config.rb),

# Require any additional compass plugins here.

# Set this to the root of your project when deployed:
http_path = "/"
css_dir = "css"
sass_dir = "sass"
images_dir = "images"
javascripts_dir = "js"

output_style = :expanded # After dev :compressed

# To enable relative paths to assets via compass helper functions.
# relative_assets = true

line_comments = true

# If you prefer the indented syntax, you might want to regenerate this
# project again passing --syntax sass, or you can uncomment this:
preferred_syntax = :scss

That was neat isn’t it? However for 2¬†reasons I’m not going to walkthrough the sass file

  1. it’s very simple that it only uses few mixins & exactly 3 variables!
  2. it would make this post a very lengthy one

So here is my style.scss, simple as it can get!

@import 'compass/css3';

$bg_color: #3b3531;
$text_color: #ffffff;
$header_color: #B7AE74;

@mixin height($min, $max) {
    min-height: $min;
    max-height: $max;

@mixin min_height($min) {
    min-height: $min;

body {
    background: $bg_color;
    color: $text_color;

.video-section .pattern-overlay {
    background-color: rgba(71, 71, 71, 0.59);
    padding: 110px 0 32px;
    @include min_height(496px);

#footer {
    @include height(250px, 300px);

.dark-overlay {
    padding: 20px;
    @include min_height(206px);

.dark, .video-section h1, .video-section h3 {
    text-align: center;

.dark h1, .video-section h1 {
    font-size: 110px;
    font-family: 'Buenard', serif;
    font-weight: bold;
    text-transform: uppercase;
    margin: 40px auto 0px;
    text-shadow: 1px 1px 1px #000;
    -webkit-text-shadow: 1px 1px 1px #000;
    -moz-text-shadow: 1px 1px 1px #000;

h3 {
    font-size: 25px;
    font-weight: lighter;
    margin: 0px auto 15px;

.dark h3 {
    margin: 10px auto 2px;
    color: $header_color;
    font-size: 22px;

.dark h4 {
    margin: 16px auto 2px;
    color: $header_color;
    font-size: 12px;
    font-weight: lighter;

#credits {
    margin-top: 90px;

.video-section .buttonBar {
    display: none;

.player {
    font-size: 1px;

So where is my css? Let me get there! once we properly setup our config.rb, all what we need to do is open up a terminal window, browse to our project directory and hit the following command,

$compass watch

If you trust me, here on you never need to worry about your css file as far as you can write your sass file correct. Because the watch command above is constantly on the lookout for any change(s) or modification(s) you make to your sass file. As soon as you save it, it will pick it/them up, transform it into css (i.e transpiling) & then will place it in the designated directory which is defined in the configuration file. So let alone the watch process to look after the css file(s).


IV. Tl;dr

You can view the completed demo here & obtain its code too! One will always have the doubt what happens to those css files which don’t require pre-compilation like the bootstrap.css. Well, that too is handled well by the watch process that it doesn’t over-write or remove any css files(s) that do not have a corresponding sass file. You can actually observe it if you happen to work with the above repository.¬†Hope it helps you take the dive into the¬†sass world with confidence, thanks.


Javadoc from Eclipse

  1. Project > Generate Javadoc
  2. For Javadoc command field: browse & point javadoc.exe (found in \\JDK_dir\bin)
  3. In the next split pane check the project/package/class you need to generate the doc for
  4. Browse & point the Destination directory to which you would like to get the javadoc
  5. Click Finish
  6. Open the index.html (from your destination folder which you pointed in 4.)


Kudos You are done with your documentation, now it’s a code with its manual ūüôā