react_best_practices-1453211146748

Getting started with React.Js using NPM

My assumptions: You have prior experience of Web framework like 
  Ruby on Rails, Django, Phoenix, etc. 
Please refer to this React.js style guide for community comprehensible source code.

Hey, its not mandatory to use NPM to build applications with ReactJs; but, it will be alot easier to build, maintain, share codes using NPM. Firstly you should have NodeJs installed in your development machine.

Installation for Development Environment

$ sudo apt-get install nodejs
# try 
$ node -v
# v4.2.6
# if its says command not found: node then try 
$ nodejs
# If it shows up, it means due no some name conflicts 
# the name/command node is already taken by some binary. 
# So, its get it back.
$ sudo update-alternatives --install /usr/bin/node node /usr/bin/nodejs 10

Probable Issues: NPM not found

Continue reading

Object Oriented Javascript : ECMA Script 5 : Summary

Introduction

JavaScript is famous for being the world’s most misunderstood programming language. JavaScript is now used by an incredible number of high-profile applications, showing that deeper knowledge of this technology is an important skill for any web or mobile developer.

Unlike most programming languages, the JavaScript language has no concept of input or output. It is designed to run as a scripting language in a host environment, and it is up to the host environment to provide mechanisms for communicating with the outside world.

The most common host environment is the browser, but JavaScript interpreters can also be found in a huge list of other places, including Adobe Acrobat, Adobe Photoshop, SVG images, Yahoo’s Widget engine, server-side environments such as Node.js, NoSQL databases like the open source Apache CouchDB, embedded computers, complete desktop environments like GNOME (one of the most popular GUIs for GNU/Linux operating systems), and others. Continue reading

javaScript benchmarking : Console : Compare execution time between two functions / statements

If you want to be one of the best programmers and you are best practice enthusiast then you might wonder for minutes thinking about the standard of the code you have just written or about to write. If you are working on sensitive application that must pass certain performance bench mark then you have to compare the execution time of the statements or functions you are up to. Continue reading

JavaScript : jQuery : Best way to add Event Handlers makes debuging easy

I work on Rails project with 20+ javascript files. I even have implement the Javascript/script response using the js.erb template. Also, I am using jQuery instead of the vanillaJs to code easily. These days I figured out that in developer mode in browsers its impossible to find the actual event handler function by pointing at any node element. It was awesomely easy when there was no jQuery or any other library. Continue reading

Javascript : Deleting cookies from the current page

function deleteCookie(name) {
        document.cookie = name + "=;expires=Thu, 01 Jan 1970 00:00:00 GMT";
    }

    document.cookie = 'man=my_value';

    deleteCookie('man');

To delete all the cookies from a page

function deleteAllCookies() {
    var cookies = document.cookie.split(";");

    for (var i = 0; i < cookies.length; i++) {
    	var cookie = cookies[i];
    	var eqPos = cookie.indexOf("=");
    	var name = eqPos > -1 ? cookie.substr(0, eqPos) : cookie;
    	document.cookie = name + "=;expires=Thu, 01 Jan 1970 00:00:00 GMT";
    }
}

Javascript: Check execution time of code : Improve app performance

Basically, almost everybody can code. However, code is not the only ingredient to build great apps. Performance matters a lot. Now a days developers are more concerned about performance which mostly depends on execution speed of code. On the other hand coding standards and readability of codes are important topics too.

Therefore, to overcome the dilemma I have written an example with which one can choose  between two snippets of working codes.

console.time('timer_label')
var $elm1 = $('#highlighter_510863 table td:first-child div:first-child code:first-child');
$.each($elm1, function () {
  console.log($elm1.length)
});
console.timeEnd('time_label')
//VM10671:10 time_label: 10.416ms

Or, you could make a function and passing a block of code inside it which you want to measure

function measureTime(functionToExecute){
   console.time('exec_time');
   functionToExecute();
   console.timeEnd('exec_time');
}
measureTime(function(){
   var $elm1 = $('#highlighter_510863 table td:first-child div:first-child code:first-child')
   $.each($elm1,function(){
   console.log($elm1.length)
 });
});