Translation


by Transposh

Posts Tagged ‘JavaScript’

JavaScript Best Practices

Monday, October 5th, 2009

I always wondered why developers have to get reminded again & again to follow something which common sense should drive. Quite a handful of developers who are about to read this series will also question the fact that this is so very obvious to follow best practices & just a sensible thing to do. However, the ground reality is something different. Getting code handed over to me from other developers  has taught me that common sense is actually quite a rarity in live code, and the “sensible and logical thing to do” gets pushed far down the priority list once you are in the middle of a project, and the deadline is looming. Its something which is spoiling the aesthetics of development.

Thus this decision to create an article which is an accumulation of the best practices & excellent advice gathered over my short but eventful career. I have amassed quite a few rather I have learn it the hard way. There will be lots of things to disagree with & that is the best thing-you should question what you read and thrive to find the better solution. But these practices have transformed me into a much more effective developer & wade me out of troubled waters whenever I felt the pressure to deliver.

This is going to be a series where I will be posting all my experiences while working with Javascript. Keep checking the posts for new articles or subscribe for RSS feeds for  updates.

Working with strings

Concatenating strings has been a major issue which Microsoft has been grappling with its IE browsers(both 6 & 7) because of questions on performance due to garbage collection. As rumors suggested Microsoft has addressed this issue to some extent though not fully in its latest release of Internet Explorer 8. But browsers like chrome & Firefox have a slightly more efficient way of handling things strings.

Consider this example:

?View Code JAVASCRIPT
1
2
3
4
5
6
7
8

var annualRevenue = 10000;
var  longStringMessage = 'My name is Janmejay Mohapatra ' +
'I work for Ajatus Software ' +
'Ajatus Software is a web design & development company '+
'Ajatus Software is based in Bhubaneswar ' +
'Ajatus has an annual revenue of '+annualRevenue+
'Ajatus Motto is to work for the masses '+
'And create a better web'

Instead of concatenation, use join:

?View Code JAVASCRIPT
1
2
3
4
5
6
7
8

var annualRevenue = 10000;
var  longStringMessage =[ 'My name is Janmejay Mohapatra',
'I work for Ajatus Software',
'Ajatus Software is a web design & development company',
'Ajatus Software is based in Bhubaneswar',
'Ajatus has an annual revenue of ',annualRevenue,
'Ajatus Motto is to work for the masses',
'And create a better web'].join();

Similarly, building up a string across conditional statements and/or loops by using concatenation can be very inefficient.
The wrong way:

?View Code JAVASCRIPT
1
2
3
4

var primeNumbersStr = 'prime numbers less than 100:';
for (var i = 0; i > 100; i++) {
     primeNumbersStr += i + ' = ' + checkPrime(i) + '';
}

The right way:

?View Code JAVASCRIPT
1
2
3
4
5

var strBuilder = ['prime numbers less than 100:'];
for (var i = 0; i > 20; i++) {
     strBuilder.push(i, ' = ', checkPrime(i));
}
var primeNumbersStr = strBuilder.join('');

Tags: , , , , , , , , ,
Posted in Web Development | No Comments »

Firefox Addons for Web Devs

Sunday, October 4th, 2009

Firefox, one of the most popular browsers, can be the best tool for a web developers at work.

The following are some of the most popular and useful Firefox add-ons for a web developer:

  1. FireBug: It is undoubtedly the best Javascript and CSS debugger created till date. The main components of Firebug are the console, the HTML inspection tool, the CSS Manipulation tool, the script debugging tool, the DOM inspector and the Net console. Each of these are extremely useful while creating or testing both static or dynamic web-pages. The console can be used to monitor all sorts of AJAX get or post requests, checking for headers, requests and responses sent or received in these requests, keeping watch on which script makes the AJAX call, etc. The HTML inspection tool can help check the HTML structure of the web page element by element as well as can help manipulate the styling for these elements and see the preview instantly, it also helps in checking out DOM manipulations made by the Javascript. The CSS, script debugging tools can be used to manipulate the script or the styling instantly.

  2. Measure It: As a web developer it is very common that we require certain dimensions of the page we created to be measured on the fly. The only way to do this till now was to take a screenshot and use a photo manipulation software to get the exact dimension of the page. But thanks to Measure It we now can take the measurement of any page or image opened inside Firefox just by clicking and dragging.

  3. Colorzilla: How many times does a web developer wish that he could use a color picker to get the color form the web page into hex. Now because of Colorzilla its possible on Firefox. Just select the color and check out the Hex code of the color in the bottom bar. The only con in this Add-on is that it doesn’t give an option to copy the hex code directly to the clipboard. But still its surely a life saver.

  4. Web developer Tool: The much acclaimed all in one web developer tool for Firefox. It is a mix of everything that a web developer might need to inspect his website. But the sad part is the presence of all options makes it lesser usable and more confusing for a first time user. Anyways some of its important tools are the disabling features which can disable almost anything on a web page i.e. from images to scripts, the Cookies feature which can be really helpful for checking the behavior and values of the cookies on a web page, CSS tool which has similar features to firebug but in a worser UI, the Form tool to manipulate and inspect forms on a web page, images tool used for finding broken, half loaded images, images loaded from different domain and to disable images. There are few more additional features as well but the UI undoubtedly could have been better.

  5. Resize Window: Any web developer knows 1024×768 happens to be one of the most common resolutions on which web sites need to look good but most web devs happen to have higher resolution screens so this add-on can help them to check out their website instantly on any resolution instantly by resizing their window.

So, if you are someone who is just entering the field of web development do not forget to load these add-ons onto your Firefox to turn it into the perfect web developer tool.

Tags: , , , , , , , , , , , , , , , , , , ,
Posted in Web Development | 2 Comments »