review : mozilla add-on : FireShot

Once in a while (like 5 times in a day) I find the necessity to take a screenshot of the webpage, edit it for annotation, and then send it across. My normal procedure was PrtScr + open MSPaint + paste the screengrab + edit according to requirements. Yeah! I know.. Ugly!!

And then I chanced upon FireShot; a firefox add-on. Yes again! Firefox is my browser of choice.

FireShot is one hell of an awesome application. I can instantly save (or) edit the current page. Annotate it as I wish; save it in different formats; or even copy it to the clipboard and paste it to Word or PowerPoint.

The following grab details what all functions it allows -


It even has a Pro version; albeit a paid one, and more suited for content creators. For me, the free version works just fine. I highly recommend FireShot. It greatly enhances one's productivity.

review : mozilla add-on : firebug

I have created a web page. Now, should I align that DIV to the left? Or should it be centered? Will it look good if the font size is 11px or 12 px? should I change the background color to yellow or magenta? Now again, what was the class selector that I used on that DIV? How much should I specify the left value as for this element, to align it with the rest?

Imagine wanting to do all that and more... You update your web page on the server. Refresh! Tweak the page on the server! Refresh! Tweak again! Refresh!

Enter Firebug. Firebug is a mozilla addon that helps ease a web developer's life. It allows you to inspect the html elements on a page; edit and modify them; run remote scripts; see the network utilisation; view the various requests that your page makes; view each request's query and response; inspect the DOM; inspect the layout of the page; and the list goes on and on.

For someone looking to architect the web, firebug is a must-have.

JavaScript function to make an AJAX call

How many times have you had to go to the web, to look how to make a proper AJAX call? Many? Well.. Not anymore. Use this JavaScript function to make an AJAX call and process the response.

/**
* Purpose: to make a client-side request to the server, and obtain the response
*
* Input Params:
*  1. pURL - string - request URL
*  2. pPostVars - string - POST variables
*  3. pCallbackFunc - function reference - function that is to be called on 
*     successful response
*  4. pAsync - int - if request to be asynchronous - 1/0
*
* Output Params:   none
*
* Return Value:
*  on success - string - the response from the server
*  on failure - bool - false
*
* Notes:
*  1. By default the request will *NOT* be asynchronous.
*     This behaviour can be changed by the param pAsync.
*     1 is for asynchronous, and 0 is for synchronous.
*  2. By default the request method is GET. If however pPostVars is passed to the 
*     func, then the request method will be POST.
*     pPostVars will a set of post variables as
*     "var1=val1&var2=val2&var3=val3&varn=valn"
*  3. pCallbackFunc is a reference to a JS function. If specified, this function must 
*     mandatorily take a parameter to which the response string will be passed.
*  4. In most cases, if the request is going to be asynchronous, then it is always 
*     better to pass a callback function to do needful scripting after the response
*/
function GetServerResponse ( pURL, pPostVars, pCallbackFunc, pAsync )
{
var http_request = false;
var http_method = "GET";
var request_type = false;
var server_response;

if (pPostVars && pPostVars != "") var http_method = "POST";
if (pAsync && pAsync == 1) request_type = true;

// Browser - IE
if (window.ActiveXObject)
{
  try { http_request = new ActiveXObject ("Msxml2.XMLHTTP"); }
  catch (e)
  {
    try { http_request = new ActiveXObject ("Microsoft.XMLHTTP"); }
    catch (e) {}
  }
}

// Browser - Mozilla, ...
else if ( window.XMLHttpRequest )
{
  http_request = new XMLHttpRequest ();

    // some versions of Mozilla browsers won't work properly if
    // response from server doesn't have xml mime-type header
  if (http_request.overrideMimeType)
  {
    http_request.overrideMimeType("text/xml");
  }
}

  // unable to create xmlhttp obj
if (!http_request)
{
  alert('Error : Cannot create an XMLHTTP instance');
  return false;
}

  // return server output on successful retrieval
http_request.onreadystatechange = function() {
if ( http_request.readyState == 4 )
{
    // successfully got response
  if ( http_request.status == 200 )
  {
      // case : if callback function specified,
      // pass on the server response string to it as a parameter
    if ( pCallbackFunc && typeof(pCallbackFunc) == "function")
    {
      pCallbackFunc(http_request.responseText);
    }

    server_response = http_request.responseText;
  }

  else
  {
    var err = 'Error : Server returned a status code : ';
    err += http_request.status;
    alert ( err );
    server_response = false;
  }
}
};

  // GET method
if ( http_method == "GET" )
{
  http_request.open ( "GET", pURL, request_type );
  http_request.send ( null );
}

  // POST method
else if ( http_method == "POST" )
{
  http_request.open ( "POST", pURL, request_type );
  var post_ctype = "application/x-www-form-urlencoded";
  http_request.setRequestHeader ( "Content-Type", post_ctype );
  http_request.send ( pPostVars );
}

return server_response;
}