Like most of the web developers I too develop the pages using Mozilla Firefox with the help of the Firebug extension. After making everything correct in Mozilla Firefox the next step is to test the page(s) in Google Chrome and Apple Safari. As the last step I will start my tests in Internet Explorer.

As far as the JavaScript testing is concerned I extensively uses Firebug’s console APIs in my JavaScript source code.

console.log("This is a test");
console.info("The value of name: " + name);

What I usually miss before starting the Internet Explorer tests is to remove the calls that I’ve made to the Firebug’s console object. IE breaks down its execution without any fail as it does not support a console object until IE7. As you know IE8 supports a console, which is a first attempt from microsoft to make something that we can call a better debugger.

I’ve created a small JavaScript function through which this issue can be avoided. I mean I can log whatever I want in Firebug’s console from my JavaScript as usual but even if miss to remove those calls IE will not break down saying that “Console is not defined”.

function trim(str) {
	return str.replace(/^\s\s*/, '').replace(/\s\s*$/, '');
}
function log(obj, consoleMethod) {
	if (window.console && trim(window.console.firebug) !== '') {
		if (typeof consoleMethod === "string" && typeof console[consoleMethod] === "function") {
			console[consoleMethod](obj);
		} else {
			console.log(obj);
		}
	}
}

The function accepts two arguments.

• The first one is the “item” that you want to log in to Firebug’s console. It can be string, object, rather anything from the JavaScript code.
• The second one is an optional firebug’s console name in string mode. If there is nothing then the function will use log as the default option.

Typical function calls would be like the following

log("This will be logged");

log("This will be displayed in console as info", "info");

log("This will be displayed in console as error ", "error");

This is a very simple thing through which some head aches can be avoided.

I’ve been looking for a free PHP enabled site quite a while from now for showing some of my experiments. The free wordpress blog has its own limitations as a result not much can be done there. Last friday I’ve found one such free PHP host – Zymic and created a site.

I am planning to explore PHP, especially the OOP features of PHP and PHP Frameworks in 2010. I hope that this new site will help me in publishing my PHP experiments as and when it comes.

Ajax is one of the most important technology that is a part of web 2.0 applications. Unfortunately the Cross/Sub-domain communications through Ajax are not allowed in browsers due to the security restrictions imposed by them. There are few techniques through which a web developer can make Cross/Sub-domain Ajax calls. A method is using the browser’s Flash plug-in to make this communication possible. In this tutorial we are going to use the YUI framework to make Cross/Sub-domain Ajax calls.

JavaScript is a very powerful language that allows its developers to enhance the features provided by JavaScript itself. Simply putting if a developer wishes (s)he can introduce new methods and properties in to the built-in objects supported by JavaScript. This can be done through the prototype property of the built-in objects without much trouble.

A simple example would be extending the Array object with a method that determines whether an item is present in the Array or not. The following code will do that

 

Array.prototype.exists = function (item) {
    var i = 0,
        len = this.length,
        currentItem;
    for (; i < len; i++) {
        currentItem = this[i];
        if (currentItem === item) {
            return true; //Value exists in the array
        }
    }
    return false; //Value does not exists in the array
}

 

With the above code we have added a new method in the built-in Array object. A typical usage of the new method introduced would be something like the following

 

var arr = [1, 2, 3, 4, 5];
console.log(arr.exists(10)); //Will result in false
console.log(arr.exists(4)); //Will result in true

 

This seems to be pretty simple and better way to have the functionalities that we needs using the built-in objects. Unfortunately this may not be the right method to enhance the functionalities of an existing built-in object.

Different developers thinks differently about this option. The developers of Prototype framework thinks that this is an ideal solution and uses this in their library. The YUI Framework thinks just the opposite.

From the user point of view augmenting built-in object by a JavaScript Framework can be a confusing step. This is because the developers may not realize that the new methods/functionalities offered by the built-in object is the result of the framework in use or the default behavior of JavaScript itself. It would be really difficult to identify the enhancements done by the frameworks and the original ones supported by the language itself.

Moreover browsers come up with new versions that provide more features frequently nowadays. A missing feature today might be a built-in one the next day.

Another possibility is assume that you’ve extended the built-in objects and added lots of functionalities. The next release of browser supports all these functionalities as built-in functionalities. In this case the browsers original functionalities will be overriden by the one defined by you. In other words the most efficient and optimized code will be overriden by the custom code developed and used by the user.

Personally I don’t prefer to augment built-in objects. If I need any functionality I do it using the normal functions rather extending the built-in object. Every one has their own point of views in this matter. An example we can have a simple function that get the functionality of the above Array object augmentation.

 

function existsInArray(arr, item) {
    if (typeof arr === "object" && typeof arr.length === "number") {
        var i = 0,
            len = arr.length,
            currentItem;
        for (; i < len; i++) {
            currentItem = this[i];
            if (currentItem === item) {
                return true; //Value exists in the array
            }
        }
    }
    return false; //Value does not exists in the array
}

 

If you still want to extend a built-in object then you should check whether the object supports the method or property that you are intending to add already. Consider the following code

 

if (!Array.prototype.exists) {
    Array.prototype.exists = function (item) {
        var i = 0,
            len = this.length,
            currentItem;
        for (; i < len; i++) {
            currentItem = this[i];
            if (currentItem === item) {
                return true; //Value exists in the array
            }
        }
        return false; //Value does not exists in the array
    }
}

After reading the headline of this article a fairly experienced JavaScript developer will have a thought about ActiveX objects through which this is possible.

The problem of ActiveX objects is they only work in Microsft IE browser. Due to this limitation none of the serious developer didn’t even think about the client-side files.

Downloadify is a small JavaScript + Flash library that makes the client-side file creation possible. The main requirement for making this method work is the end user must have Flash 10 plugin or higher installed.

You can read the detailed documentation of this small library here

Leaving or do not using alt attribute of the img tag is considered as one of the most important fault in current web standards. Even the web page validation will fail if you are using a strict DTD in the web page due to this.

There is an interesting issue in Webkit browsers (Apple Safari & Google Chrome) related to the alt attribute in the img tag.

This issue can be seen by simply putting an img tag in a web page with an alt text value but with a wrong src value.

In other words you should use an incorrect image name in this case to experience this issue. As a web developer you are sure that if the browser can’t find the image you wanted to show it will show the alt text value in place of the image, this is a well known fact. Consider the following code:

<img src="1.png" alt="Missing image alt text">

In IE, Firefox and Opera you can view the alt text (whatever value you’ve used) in the browser.

But in Webkit browsers (Apple Safari & Google Chrome) you can see an image place holder but there is no sign of the alt text in those browsers.

There are two questions that comes at this point :

• Is this a browser issues?
• Whether webkit browsers avoids the alt text completely? I mean there is no effect whether you use it or not in Webkit?

As far as the first part is concerned this is an incorrect treatment from the browser point of view.

The second point is bit tricky actually the alt text is coming to the browser like the way it should. But it will be visible only if the img tag(element) has enough width and height specified in it to display the alt text.

As you know we can show an image using img tag with or without specifying the width and height of the image.

If the width and height are missing then the browser will calculate the dimensions its own and show the image accordingly, otherwise it will use the specified width and height.

But in Webkit browsers if you want to show the alt text in case of missing image the img tag should have enough height and width for showing the text. Simply putting you have to maintain a minimum width and height for the worst case purpose.

Mozilla has released Firefox 3.6 Beta 2.

I have published the article in Bukisa.

The article explain the lazy loading techniques using YUI Get utility.

If you are looking for a way to create your screencasts for free then Screenr is for you.

The new expression closures introduced in JavaScript 1.8 based on Lambda notation looks bit weird. In JavaScript 1.8 the developer will be able to write single line functions based on this notation differently compared to the method that we’ve been following for years. Lets jump into an example:

function foo() alert("hello world");

The first thing that the developer will notice is the absence of the curly bracket that we’ve been using during most of our programming. I don’t know what is going to achieve by excluding the curly brackets at this point. Even though the developer can avoid curly brackets while using any looping, conditional constructs, etc the wise developer never avoids those. I think {} used to group things neatly.

Lets see another example

function foo() true;

This looks more confusing than the first one. This is a function whose name is foo that returns true to the caller . In other words these single line creature will return whatever comes in the single line function body.

function foo() "Hello world";
var strMsg = foo();
alert(strMsg); //Will output Hello World

Another simple function that finds the largest of 3 provided numbers. I haven’t done any input validation here.

function foo(a, b, c) (a > b ? (a > c? a : c):(b > c? b:c));
alert(foo(8, 4, 1));

Though this is not a compulsory rule to write the single line functions using this new notation. Developers can use the old method