There are many useful firefox options and extensions that comes in handy during software development life cycle and in this article we will be listing few of useful plugins that we commonly use.

To find information related to the page that is getting displayed on the browser click Tools > Page info. This will give you permission settings of a page, security identity of the page, feed url and other page specific information like page content-type, encoding, meta tags used, cookie permission settings etc.

Web Developer extension
Added as a toolbar in firefox, this extension gives CSS related information, page information, outlines page elements, tab index, gives topographic information and many such details.

Colorzilla
Finds elements on the page corresponding to a given color, find out CSS rules and helps in checking the DOM element colors.

CSS Viewer
Helps give comprehensive list of CSS values for any chosen element.

Link Checker
If you are building applications which will involve heavy cross linking between pages this tool will gracefully point out the broken links in the pages helping the developers in swiftly modifying the links.

MeasureIT
It comes handy for the designers especially when they want to find out the width/height of an image or the size of the layout as it draws a ruler to get the pixel dimensions.

LiveHTTPHeaders
Tool to find the http header information including the cookie information that is transmitted when a request for a page is made.

User Agent Switcher
As a developer have you ever come across a situation where you wanted to identify your web pages with different user agents IE6, IE7, Firefox to the web server. Then this is the tool that you are looking for. It also supports Flock, Seamonkey, Mac OS and Linux user agents.

IE TabFor cross browser compatibility especially with the varied CSS rules in different IE versions, it often becomes hectic to test the functionality across different browsers. This tool helps run IE as a tab inside firefox.

YSlow
This is a plugin from yahoo and it aids in finding why a page loads slowly.

Firebug
This is the single most commonly used plugin by the development community. It helps developers in debugging, tracing attributes and values in html, css, javascript in addition to help traversing ajax requests.

Various scenarios can cause memory leaks which can range from unhandled memory garbage to cyclic references to error in code logic. One best suggestion given in the javascript forums to overcome this problem is to nullify the element once its usage is over.

A simple and readily available tool to check on the memory leaks in the system is the Windows Task Manager » Performance to visually monitor the effect of cyclic references or unhandled situations in your Javascript code.

Another tool is Leak Monitor extension for Firefox.

Screencast on IE Memory Leaks can be viewed at Barelyfitz.com

If you are interested in learning Javascript you can watch a series of lectures from Yahoo Video Library on Javascript by Douglas Crockford. Some interesting points like (i) is NaN a NaN? ii) What is the type of Nan? are discussed in his lectures.

Another interesting article on Memory leakage pattern.

Javascript unlike the server side scripting languages like PHP, ASP, Perl is not compiled at the server side. It is sent as-is from the server to the browser client and it is the browser that interprets the code at the client side.

The total size of the Javascript code and its organization will have a significant effect on the pages served at the client side which in turn will affect the performance of the page.

Organize the libraries in such a fashion that you only have the needed functions associated with the page. You can consider this point right at the time of creating your template pages. This will reduce the number of javascript pages that are called from one page.

Now that there are many javascript frameworks like jQuery, ExtJS, Prototype, Scriptaculous that have become available in the market enabling web2.0 architecture. Developers fascinated by these different frameworks tend to use a combination of these frameworks sometimes enabling the same features which can make your pages crawl hence defeating the purpose.

Choose a framework that best fits your requirements and has the wides support in the market. Ensure that you have a compact code which is easy to manage and maintain in addition to better performance.

Earlier we used to write a string of code in javascript to enable opening external references in a new window in addition to modifying the html code

With JQuery, this can be done with one line of code as shown below

$(document).ready(function(){
    $("a[@href^='http']").attr('target','_blank');
});

The above line checks for occurences http in a tag and if a link has “http” in it, JQuery opens the link in a NEW window.

According to W3C standards, the target attribute has been removed from xhtml 1.1 specification.

Sample script to open external links in New Window

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-GB">
<head>
<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script language="javascript">
$(document).ready(function(){
    $("a[href^='http']").attr('target','_blank');
});
</script>
</head>
<body>

Testing the pages - Open Links in new <a href="http://yahoo.com">window</a>.

<h1><a href="http://www.kurinchilion.com">Kurinchilion</a></h1>
</body>
</html>

Yusuke Kamiyamane has given a thought in developing this extensive set of icons which will definitely be a handy collection in structuring the sites. Kudos to Yusuke.

What is buffer?
A buffer is a temporary memory location to hold data for faster program execution time. The data may be stored as a heap or as a stack. Stack can be visualized as a FILO array of data and heap as a linked list of data.

Why we need to take care of buffer overflows?
Programmers who know about certain loop holes can exploit this feature in by pointing a record in the heap or stack to prewritten block of hackable code. These are called buffer overflow attacks.

A buffer overflow can lead to Code Injection attacks, Denial of Service attacks (sending huge volumes of data continously to the server), Remote code exploit (where your code is used as the point from which other attacks incur.

The best way by which you can guard your systems against unwanted attacks is to have the necessary patch uploaded to your systems.

i) Include jquery script file in the header section and the following code in the head

<script language="javascript">
$(document).ready(function(){
    $('#progress').hide();
    $("#main a.bgdiv").click(function(){
        $("#progress").show("slow");
        $("body").load($(this).attr('href'));
        return false;
    });
});
</script>

ii) The following html code comes in the body

<div id="progress">
  <img src="progress-rotator.gif">
</div>
<div id="main">
   <a href="link-to-file-for-background-process.php" class="bgdiv">Click here for MySQL Backup</a>
</div>

NOTE: In JQuery, when the click action is initiated by clicking “Click here for MySQL Backup” it will NOT link to php file immediately and it will inturn show the progress gif image layer first. Only after that it will load the php file.

• publishing the outcome of user action on the same page
• designing a single page to flash all success, error, warning, notice level messages
• designing a separate page for each message that gets published for the user

In CakePHP, to publish a message on the same page you need to make the following settings in the controller and view

In the controller
//app/controllers/posts_controller.php
<?php
function add(){
if ($this->Post->save($this->data)) {
$this->Session->setFlash(‘Your post has been saved.’);
$this->redirect(‘/posts’);
}
}
?>

In the view

//app/views/posts/add.ctp
<?php
if ($session->check(‘Message.flash’)){
$session->flash();
}
echo $content_for_layout;
?>

To design a single page to flash all success, error, warning, notice level messages follow the steps below

In the controller
//app/controllers/posts_controller.php
<?php
function add(){
if ($this->Post->save($this->data)) {
$this->Session->setFlash(‘Your post has been saved.’, ‘general’);
$this->redirect(‘/posts’);
}
} //end of add
?>

In the view

//app/views/layouts/general.ctp
<?php
echo “Message :: “.$content_for_layout;
?>

To design a separate page for each message, it is the same as the above step.But instead of one template file, you will have separate file layout file in /app/views/layout like error.ctp, warning.ctp, notice.ctp and custom design these pages to show the respective messages.

Check out the extension at http://trentrichardson.com/Impromptu/index.php

It is a standard compliant technique in which <h1> and <span> tags are used to have nice headings and highlights.

Key fact in this technique is that the text will get displayed even if the CSS is disabled for some reason, hence presenting the text beneath it.

Sample CSS in HTML context

<h1 id="myheading">
	<span id="mytext">Kurinchi Blogger</span>
</h1>

CSS Definition

myheading{background: transparent url(images/logo.gif) no-repeat scroll left top; display:block; float: left; width: 200px; height: 65px;}
#myheading #mytext{display: none;}

To test various possibilities in Firefox browser …

1) Disable CSS, Enable Images: View > Page style > No style
Now check the page where FIR is applied by refreshing the page.

2) Enable CSS, Disable Images: Tools > options > content > UNCHECK “Load images automatically”
Now check the page where FIR is applied by refreshing the page and the text will not get displayed in this case.

Check Zen Garden website to see how FIR is used.

FIR behaved indifferently when in quirksmode and rendered ineffective in screen readers which brought in questions about the usage of this technique.

sFIR technique supersedes FIR technique with its Flash replacement on text rendering styled texts.