Depending on the request made, server responds back with specific details which can range from browser specific css layout to calling certain javascriptsfor certain browsers.

Changing the user-agent also helps us in understanding how spider-agents or bots will see the pages that we build. It also helps us design applications that will mimic a request as originating from a mobile phone and helps us in viewing the behavior of the application in different mobile clients.

To read more about HTTP-Headers check ietf

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.

“Servers should be cautious about depending on URI lengths above 255 bytes because some older client or proxy implementations may not properly support these lengths.”

Different browser agents support different URI length acceptance. In addition, servers too play a role in accepting/denying URI’s over certain length which may either truncate the URI or may give lengthy URI message indications.

It is always advisable to rely on shorter URI’s and to post data when more field sets are to be transferred across web pages.

POST data too has its limit. In this case, it is the size of the data which is controlled by the server settings.

Some interesting discussions:

Limit on query string GET URL parameters

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>

• 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.