December 2006


Developing with JavaScript can get really ugly if you don’t know how to do it. It is not a question of language abilities but of tool chains. The best developer will get tired of stupid alert() statements to debug the application.

My usual tool chain consisted out of LiveHTTPHeaders, Venkman and Firebug. The best feature of firebug is its JavaScript Console – simply enter your code, execute it and see what happens.

By now a brand new beta of Firebug 1.0 was released and what can I say more, than this version is incredible. If you are a web developer than this tool provides more than you will ever need. The most tremendous changes are:

  • Tab Completion for the JavaScript console – enter a few chars and complete objects and their methods
  • Direct editing of HTML using the DOM inspector of Firebug
  • Profiling – start the profiler, execute a piece of code and stop the profiler. What you will get is a precise list of function calls and the time that it took
  • Network Monitor – always have an overview about what is loaded and how long each request took

And there are so many other new features that you can only explore while using it. But be awre, that you can really safe time, if you use firebug. And I did not even mention all the other nice CSS and HTML Features. So whats left to say?

Get Firebug, Now!

Advertisements

As soon as a project evolves and more than one developer works on the same source code it becomes obvious, that you can guess whos has written the source code, just by the coding style of the writer. Some people use more comments here and there, indention maybe differen and so on. What looks funny on the one hand can be dangerous on the other hand.

A major principle for software projects is, that all developers are able to read and understand the code. This does not only refer to the semantic understanding, but as well to the syntactic understanding. If it is easier to understand a certain piece of code, it is easier to improve it. Otherwise you would think about a workaround or another hook, but not to touch this piece of code.

A help comes with the quite mature tool JSLint. JSLint provides what is called source code verification. The verification of your source code helps to find a common coding standard and to provide a safer code.

JSLint defines a professional subset of JavaScript, a stricter language than that defined by Edition 3 of the ECMAScript Language Specification. The subset is related to recommendations found in Code Conventions for the JavaScript Programming Language.

Furthermore a strict coding will help to prevent ugly bugs that only appear because of syntactic failures.

Further Reading:

By now there is a very interesting discussion going on about the future of prototype in the “Ruby on Rails: Spinoffs” newsgroup. If you are interested in prototype and script.aculo.us you should definitly have a look.  Besides intersting points in the discussion very interesting links are posted to other valuable resources. Let’s see what happens.

While developing your nice JavaScript application you have to test if it works as well with all those different browsers your future users could use. Today I stumbled across a problem with Opera.

Imagine the following code:

var form = $(document.createElement("form"));
var e = $(document.createElement("textfield"));
form.appendChild(e);
//...
Event.observe(e, "keypress", function(a){Event.stop(a);});

You would imagine, that this code would stop the event from beeing propageted if a keypress event is received. Usually this works fine in almost all browsers, well there is the problem: almost all. In Opera this works like it is expected to work but with one difference: if you press the enter key, two events will be fired – one is the keypress event for the textfield and the other event for the surrounding form. In this case the Even.stop() method will not work. The only way to prevent the form from beeing submitted is to stop the event directly within the form.

Now you will ask where do we need such input fields? Imagine the InPlaceTextfield and the Autocomplete from script.aculo.us as examples. By now there is no correct support for opera, if you use these controls.