Firefox addons

Useful addons for webdevelopers: Firefox: Firebug Firefinder fireQuery ySlow Page speed Live http headers

Create Fixed div where you can add messages that will fade out automatically.

When you use a lot of ajax requests in your site, especially requests that make some changes on server side and do not return any html content, there is a need to inform user if the request he performed has succeeded. The output will look like this: The plan to achieve it is: 1) Create a hidden div with fixed position in your MasterPage file: 2) Create javaScript function that will show your text for some time. 3) Call this function when your ajax request succeeded. ad. 1) Listing 1: Div html

   1:  <div id="ajax_messages" style="">Operation succeeded</div>

Listing 2: Div style

   1:  #ajax_messages {

   2:  background-color:#FFFF99;

   3:  bottom:0;

   4:  display:block;

   5:  font-family:Arial,Helvetica,sans-serif;

   6:  font-size:110%;

   7:  font-weight:bold;

   8:  height:20px;

   9:  margin:0;

  10:  padding:5px 0 0;

  11:  position:fixed;

  12:  text-align:center;

  13:  width:100%;

  14:  }

ad. 2) In your MasterPage file place javascript source code. This code uses jQuery js library. Listing 3: showMessage function

   1:  <script type="text/javascript">        

   2:          function showMessage(text) {

   3:              var am = $("#ajax_messages");

   4:              am.html(text);

   5:              am.show();

   6:              am.fadeOut(900);

   7:          }

   8:  </script>

The 3rd line grabs the div, 4th places your text in it, 5th shows the div and 6th makes the div disappear slowly (900 is the time of fading out in milliseconds). ad. 3) Listing 4: An example of using this function

   1:  <script type="text/javascript">

   2:      function MakeAjaxRequest(param1, param2) {        

   3:          var url = "/Some/Site?param1=" + param1

   4:          if (param2) {

   5:              url = url + "&param2=" + param2;

   6:          }

   7:          $.ajax({

   8:              method: "POST",

   9:              url: url,

  10:              dataType: "html",

  11:              success: function(result) {                             

  12:                  showMessage("Operation succeeded");

  13:              }

  14:          });

  15:      }

  16:  </script>

Now on your link you can put:

   1:  <a href="javascript:MakeAjaxRequest('param1value', 'param2value')">Make ajax request</a>

Prevent caching javascript or css files

The reason for this post is to make an application prevent user's browser from caching css or js files when you deploy new version of this files. Here is an oryginal post for this. The goal is to make css links or javascript links in your application look like this: Listing 1: Desired css link format.

   1:  <script type="text/javascript" src="/content/js/global.js?33433651"></script>

You just have to create an helper which is going to take your application version number and add it to the parameter of css or js files source. Number with application version should change everytime you deploy your site.