HAML : Using variable in JavaScript block

February 10th, 2014 § 0 comments § permalink

While I was getting started with HAML templating, everything went fine until I need to use a HAML variable inside a JavaScript block. I hope you may familiar with JavaScript block in HAML like below.

:javascript
  var a = 10;
  console.log(a);

But what if that variable a is a HAML variable and I need to use  inside the :javascript block? I had no idea how to do it, so went for some googling. The result yeilded was pretty amazing and easy. I just need to interpolate the variable as we do string interpolation in ruby.

:javascript
  console.log(#{a});

That’s it you are done. Now you are using a HAML variable inside the :javascript block.

Pretty easy right?

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

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());