Configure ace editor

February 10th, 2014 § 0 comments § permalink

While I was working on my latest side project, I though of using ace editor for syntax highlighting and code styling. But, configuring editor was bit confusing for me. There was a bunch of CDN links of ace editor available on the site, But didn’t have much information about which one I should use. I tried some of them but didn’t worked for me. At last after some googling, I got the below solution.

I started with defining a div for the editor.

<div id="editor"></div>

Now I need to add the ace editor script, the script worked for me is the one given below.

<script src= '//d1n0x3qji82z53.cloudfront.net/src-min-noconflict/ace.js'></script>

At last need to configure the editor, as you needed

var editor = ace.edit("editor");
editor.getSession().setMode("ace/mode/json");
editor.setTheme("ace/theme/twilight");
editor.getSession().setTabSize(4);
editor.getSession().setUseWrapMode(true);

You can configure the editor as you need, I set the mode as json for my application. You set it as ruby, php, etc.. as you need.

Thanks

set up a node environment

May 14th, 2013 § 0 comments § permalink

Setting up a development environment starts with installing a version manager, so that we can install different versions and switch and test to versions we needed. For nodejs development environment, I start with installing node version manager, NVM.

Installing NVM

The installation of NVM is quite simple, either you can run install script or do it manually by cloning the git repo. I find the install script as handy.

https://raw.github.com/creationix/nvm/master/install.sh | sh

OR you can clone the git repo

git clone git://github.com/creationix/nvm.git ~/.nvm

Then add the following to your .bashrc file. if you are using zsh, add to .zshrc file.

 . ~/.nvm/nvm.sh

Install the node

Install the node versions you need.

nvm install v0.10.5

npm.js will be installed by default with nodejs version > 0.10.0

Switch the version you need using the command

nvm use v0.10.5

Install packages

Now you can install the packages globally or locally, as your need. You won’t require to use sudo when installing packages globally.

npm install -g grunt-cli

Hooray, you are done. Try node on terminal to enter into node console.

Thank you.

 

writing js module compatible for node and browser

April 4th, 2013 § 0 comments § permalink

This is a simple blog post which will help you to write js modules which is compatible to node and browser.

In this I am writing a module named mylibrary which can used in both node environment and browser environment.

// mylibrary.js
(function(root, factory){
  if(typeof exports == 'object'){
    factory(exports);
  }else{
    root.mylibrary = {};
    factory(root.mylibrary);
  }

}(this,function(exports){
  exports.firstFunction = function(){
    console.log("firstFunction");
  };

  exports.secondFunction = function(){
    console.log("secondFunction");
  };
}));


In mylibrary we have firstFunction and secondFunction as methods.

For browser we can use the methods as

mylibrary.firstFuction();
mylibrary.secondFunction();


In node Environment

var mylibrary = require('mylibrary');
mylibrary.firstFuction();
mylibrary.secondFunction();


Thats it.

Thanks.

Reducing reflow using DocumentFragement

April 3rd, 2013 § 0 comments § permalink

This is a simple post which will demonstrate how you can reduce the reflow in browser and enhance the performance of the webpage. Before getting started with it lets look into what is reflow?

what is reflow?

According to Google,

Reflow is the name of the web browser process for re-calculating the positions and geometries of elements in the document, for the purpose of re-rendering part or all of the document.

So any actions, like adding an element to DOM, changing style or position of element etc may lead to reflow. Since this is really an expensive operation we have to reduce to get maximum performance.

Using DocumentFragement

Consider a case that you have a <ul> tag and you need to append 5 <li> tags into it.

var n=5;
var wrapper = document.getElementsByTagName("ul")[0];
while(n--){
    var inner = document.createElement('li');
    inner.innerHTML = "Inner" + n;
    wrapper.appendChild(inner);
}


Of course this code will works fine, But the issue is the appendChild is called in side loop, means 5 times it append a new element to DOM which leads to 5 reflow. Here is the rewrite for the same functionality.

var df = document.createDocumentFragment();
var n=5;
var wrapper = document.getElementsByTagName("ul")[0];
while(n--){
    var inner = document.createElement('li');
    inner.innerHTML = "Inner" + n;
    df.appendChild(inner);
}
wrapper.appendChild(df);


Here we Introduced a new element called DocmentFragment. According to Mozilla,

DocumentFragment is a minimal document object that has no parent. It is used as a light-weight version of document to store well-formed or potentially non-well-formed fragments of XML.

Since it is an Document object you can access it a like a node/container and call any document method, But since it doesn’t have a root node and not a part of DOM appending to documentFrament won’t trigger a reflow.

Thats where our second part gain importance, In that we create a documentFragment and append the <li> initially into it while in the loop. So the DocumentFragment can hold it like <ul> itself. Then We append the DocumentFragment to the <ul> in DOM, after exiting the loop, means the reflow will trigger only once even though we appended 5 <li> tags.

Now we reduced reflow to 1 instead of 5.

Thanks

Javascript : constructor pattern

March 1st, 2013 § 0 comments § permalink

Its just a simple demo of constructor pattern on Javascript. In case if you didn’t noticed, in my last post I ready used constructor pattern with Object.create.

In Vanilla JS


function Person(name, school){
	this.name = name;
	this.school = school;
}
 
Person.prototype.toString = function(){
	console.log(this.name + " studied in " + this.school);
}
 
 
var me = new Person("Revath", "St. Joseph's BHSS");
me.toString();

I recommend, you should checkout why you should use prototype instead of this.

jsperf : prototype v/s this

In CoffeeScript


class Person
    constructor: (name, school) ->
        @name = name
        @school = school
        
    toString: ->
        console.log @name + " studied in " + @school
        
        
        
me = new Person("Revath", "St. Joseph's boys high school")
me.toString();

Simple inheritance in ECMAScript 5

February 26th, 2013 § 1 comment § permalink

Here is the simple inheritance in Javascript (ECMAScript 5).



 var person = Object.create(null);
 Object.defineProperty(person,"name", {value:"Revath"});
 console.log(person.name);
 Object.defineProperty(person, "toString", {value: function(){
 	return this.name + " attended " + this.school;
 }});
 
 Object.defineProperties(person, {
 	school:{
 		value:"st. Joseph's BHSS"
 	},
 	college:{
 		value: "NTTF"
 	}
 });
console.log(person.school);
console.log(person.college);
 
var driver = Object.create(person);
Object.defineProperty(driver,"canDrive", {value: ['bike', 'car']});
 
console.log(driver.name);
console.log(driver.school);
console.log(driver.canDrive);
console.log(driver.toString());

Avoid function redefinition using prototype

February 6th, 2013 § 1 comment § permalink

The problem of function redefinition

Here is the simple javascript constructor pattern,  in the first look it looks good and of-course it works fine.

function Person(name, school, college){
	this.name = name;
	this.school = school;
	this.college = college;

	this.toString = function(){
		return this.name + " attended " + this.school + " and " + this.college;
	};
}

var first = new Person("Revath", "st. Joseph's BHSS", "NTTF");
var second = new Person("S Kumar", "Model HSS", "Nettur");
console.log(first.toString());
console.log(second.toString());


The issue in this piece of code is toString() method. The toString() will be redefined for each new objects. Ideally every method should be shared by every instance of Person.

The solution using prototype

Here is the simple work around to get rid of this.

function Person(name, school, college){
	this.name = name;
	this.school = school;
	this.college = college;
}

Person.prototype.toString = function(){		
	return this.name + " attended " + this.school + " and " + this.college;
};

var first = new Person("Revath", "st. Joseph's BHSS", "NTTF");
var second = new Person("S Kumar", "Model HSS", "Nettur");
console.log(first.toString());
console.log(second.toString());


This prototype method will save memory since it uses the same object of toString method with all the instances of Person.  Using `this` results each instance having independent copy of function toString.