Here an example:

Get the JavaScript code
Get the HTML/JavaScript code

Edit: Just found this which seems to make this plugin obsolete. Wish I would have found this earlier…

Just for my own reference and some other poor people out there trying to get this to work:

1. Download XAMPP 1.7.2 from sourceforge.net/projects/xampp/files/XAMPP%20Windows/1.7.2/xampp-win32-1.7.2.exe/download
2. Install
3. Download php_xdebug-2.0.5-5.3-vc6.dll from xdebug.org/download.php
4. Place it in C:\xampp\php\ext
5. Edit C:\xampp\php\php.ini add:
   zend_extension = “C:\xampp\php\ext\php_xdebug-2.0.5-5.3-vc6.dll”[xdebug]

   xdebug.remote_enable=on

   xdebug.remote_host=127.0.0.1

   xdebug.remote_port=9000

   xdebug.remote_handler=”dbgp”

6. Enjoy!

Choosing the right algorithm

… is probably the best optimization you can be doing when writing code. Before you think of saving at the register level, think about how efficient the algorithm is that you are using. For example using quick sort for sorting elements is probably a good idea, rather than using slower algorithms like bubble or insertion sort. If you are using a high-level-language (HLL) like PHP, you would probably want to use the internal *sort() functions. They use quick sort on a low level (written in C). For example, suppose you have an array with 1000 variables (which can be objects, primitives or arrays) and you want to sort it by your own sorting order algorithm. Instead of going through great lengths of searching for an implementation of a sort algorithm online or even writing your own, in PHP, for example, you should use the usort() function and be passing in your compare function. Like this you can sort dates, strings or numbers in any order that you like, you just need to define when item A is smaller than item B and return a negative number in that case, and in the converse return a positive number as well as 0 when they are equal. You get the idea. If you find a good algorithm and need to implement it yourself, it might be hard and challenging but it can be well-worth the time spent on it, because you can save the user of your application time and your application server number crunching resources.

Saving on the byte or even bit level

Now to the more generic optimisations that you can think of when you have chosen the right algorithm for your implementation. When you know that the algorithm you are using is good or even could not be better, great. You can go on implementing it. When you do so, you should think of every expression you use more than once as a variable and also reserve the necessary space for it. For example, you could have an expression like (a < b && b < c && b+2 == d). If you use this expression in only one if statement, it is probably a good idea to use the expression as is. As soon as you use the expression more than once, make a variable that describes the purpose of the expression. For example:

aGreaterBAndBLessCAndBPlus2EqualD = a < b && b < c && b+2 == a;

Remember that code readability and understanding of it after the initial implementation is more important than saving a few bytes for the variable name. In compiled languages the length of a variable name does not matter usually. Only in higher level, interpreted languages it can make a difference, but again only nano seconds or so. It is still more important to have an efficient algorithm which is easier to achieve when the code is readable, at least when you later come back to it.

Another trick, which actually follows from the above is to optimise loops in a generic way. A simple for loop like:

for (var i = 0; i < somevar.length; i++) {
  // do something with somevar[i]
}

(in JavaScript) can simply be rewritten as

for (var i = -1, leni = somevar.length; ++i < leni;) {
  // do something with somevar[i]
  // THIS SAVES 20% PERFORMANCE FOR EACH LOOP!
}

This only works if you know ahead of time, that somevar.length will not and need not change inside of the loop, which is mostly the case. This runs faster because somevar.length is re-evaluated every time it is called in every iteration of the top-most for-loop. If you give it a temporary variable the CPU can cache the leni variable in a register and check much quicker if i is smaller than that. I read also that ++i can be faster than i++ in some implementations of programming languages such as JavaScript in some browsers. It depends on how the low-level assembly for that is written. I have seen arguments that i++ and ++i have exactly the same amount of machine instructions, but also ++i is not less readable than i++ and it does not hurt to write it that way if it can cut down the number of instructions by one or two in each iteration.

Edit:
You can use the same concepts in C(++). Actually the book “Write Great Code” talks about C and other lower level languages mainly. In C++ it would look like so, if you want to output a string char by char:

char cstring[10] = "My String";
for (int i = -1, leni = strlen(cstring); ++i < leni; ) {
  cout << cstring[i];
}

Also, if you want to improve your low-level knowlege, even as a high-level programmer like me, it might pay to read the ‘Write Great Code’ series by Randall Hyde. But in essence these tips here should be sufficient for some improvement of your code and should be simple enough to implement for any level programmer. Just remember that the best compiler or interpreter cannot replace a skilled programmer and I think this will stay that way for a long time if not forever. This is also a good thing and will keep us employed.

I hope someone could learn something from this and you think it was worthwhile to read this short article.

The arguments array as well as the caller instance are universal variables inside every JavaScript function. The names are self-explanatory.
An anonymous function inside another function keeps the variables in scope as in:

var somefunction = function(arg1) {
  var avar1 = 10;  
  object.onclick = function() {
    alert('arg1=' + arg1 + ' avar1=' + avar1);
  }
}
somefunction('Foo');
// "arg1=Foo avar1=10" when object is clicked on

So this means that the scope of the function defines what variables can be accessed within it, even after the function call has finished.

Another part I always found confusing in JavaScript is the “this”-keyword, but that might have to be the topic of another post.

First create the normal and the custom control with:

var inZoom = false;
var navigation = new OpenLayers.Control.Navigation();
var ZoomBoxNav = OpenLayers.Class(OpenLayers.Control.Navigation, {
 zoomBoxKeyMask: null // this ensures that a box is always drawn
});
var zoomBox = new ZoomBoxNav();

Then all you need is a button or better Action object, which adds the appropriate control to the map:

var toggleRectZoom = function() {
  if (inZoom) {
    map.addControl(navigation);
    map.removeControl(zoomBox);
    inZoom = false;
  } else {
    map.addControl(zoomBox);
    map.removeControl(navigation);
    inZoom = true;
  }
}
 
zoomButton = new GeoExt.Action({
  text: 'Zoom Mode',
  handler: function() {
    if (inZoom) {
      zoomButton.setText('Zoom Mode');
    } else {
      zoomButton.setText('Pan Mode');
    }
    toggleRectZoom();
  }
});
 
toolBar = new Ext.Toolbar({
  items: [ zoomButton ]
});
mapPanel = new GeoExt.MapPanel({
  border: true,
  region: "center",
  // we do not want all overlays, to try the OverlayLayerContainer
  map: map,
  center: [172.1569825, -42.6109735],
  zoom: 6,
  layers: myLayers,
  tbar: toolBar
});

Anyway, let me know your thoughts in a comment.