There is nothing more annoying than trying to understand code that is impossible to read. Different developers have different ways of writing code and these differences cost time when new developers to a project need to understand whats going on.

One practice that I push developers on my teams to follow is to write code so that it seems like one developer wrote it. I have come across a best practice document, idiomatic, that many developers and myself use.

To add this to your Eclipse environment:

  1. Go to Windows -> Preferences -> JavaScript -> Code Style -> Formatter
  2. Click Import and navigate to the idiomatic.xml file (attached in email)
  3. Click Apply then Ok

To apply the filter on your page you can press Ctrl+Shift+F. You can also set it up so that the filtering happens automatically on save. To do this:

  1. Go to Windows -> Preferences -> JavaScript -> Code Style -> Editor -> Save Actions
  2. Check the first 2 checkboxes

You can download it here: idiomatic.xml

A common problem I come across in the projects I work on is the need to check to see if an object exists in an Array of objects.  There are numerous solutions that are available to see if a value exists in an Array.  You can use jQuery.inArray(value,array) method or Array.indexOf(array,item, start) method, but if you try those solutions when passing in an object your object does not seemed to be found.

I found that the reason those solutions don’t work is because when you are searching an Array for an object it is comparing the reference of the objects not the values.

A solution I have will loop through a passed in Array and then compare all the properties of an object against the passed in object.  If all the properties match then you get the index of the object in the Array.  If not then you get -1

Here is the code:

function( arrArray, oObject )
{
var length = arrArray.length;
for (var i = 0; i < length; i++)
{
var matchFound = false;
for( var p in arrArray[i] )
{
if( arrArray[i][p] === oObject[p] && arrArray[i].length === oObject.length )
{
matchFound = true;
}
else
{
matchFound = false;
break;
}
}
if( matchFound )
{
return i;
}

return -1;
};

HTML5 offers a new way to store data instead of having to send and retrieve data from a database or by using cookies.

Local Storage & Session Storage

Local Storage
Local storage give you the ability to store values in the browser so that the next time a user visits the page.

Setting a value is easy. Just add this line of code in your JavaScript function and a value will be set.

// valueName = the storage key
// Myvalue = the storage value for 'valueName'
// set value for localstorage
window.localstorage.setItem('valueName', 'MyValue');

To retrieve a value is just as simple.
// valueName = the storage key
// set value for localstorage
window.localstorage.getItem(‘valueName’);

Session Storage
Session storage works the same way as localstorage, except that the session is stored per browser tab.

Setting a value is easy. Just add this line of code in your JavaScript function and a value will be set.

// valueName = the storage key
// Myvalue = the storage value for 'valueName'
// set value for localstorage
window.sessionstorage.setItem('valueName', 'MyValue');

To retrieve a value is just as simple.
/*
valueName = the storage key
*/
// set value for localstorage
window.sessionstorage.getItem(‘valueName’);