Most people I’ve seen, when presented with this problem do this the long, boring and potentially error-prone way: opening up each and every stored procedure or view in SSMS and using the good old "Find and replace" tool to find out whether it is using the table or field we’re looking for.

There is, however, a much, much better way to do this, with a simple SQL query. Suppose we want to find out which stored procedure or view uses the table foobar:

SELECT DISTINCT OBJECT_NAME(ID) FROM SYS.SYSCOMMENTS WHERE [TEXT] LIKE '%foobar%'

Taking the web by surprise (didn’t they have a partnership with Mozilla?), Google has made another step towards a better web (or towards world domination, some may argue ) by releasing its browser, Google Chrome, yesterday.

Based on the WebKit rendering engine (the one powering Konqueror and Safari), but otherwise designed from the ground-up, Chrome promises web developers something they have being begging for since the (re)discovery of AJAX: blazing fast javascript performance and a multi-threaded browsing experience.

The performance gains come from the V8 javascript engine, that compiles javascript code down to bytecode, instead of just interpreting it.

Also, in Chrome, every tab is hosted in a separate (and sandboxed) process, which means that the javascript execution in one tab won’t impact negatively on the execution of other tabs.

You can read more on the online cartoon/book:

In the end, what does Chrome mean for us web developers?

In my opinion, it means that soon we will have better browsers.

The release of Chrome comes after two very important announcements: TraceMonkey, the new javascript engine that will power Firefox 3.1 and SquirrelFish, the new javascript engine that will power Safari 4.0, both of which promise tremendous peformance gains over SpiderMonkey (the engine powering Firefox 3.0, which should also be the fastest one at the moment).

The only browser left behind is, sadly, Internet Explorer, as shown by the benchmarks. Sure, IE8 is much faster than IE7, but it’s still way slower than any of its competitors.

The browser war has just got a bit more intense and Microsoft will have to do much better if they want to remain competitive.

Just like software developers abandoned procedural languages like C or Pascal for object oriented ones like C++ all the way up to C# and Java, the same concept applies to the web: with (web)applications growing in complexity, it’s better to keep a modular approach and have a finite number of classes instead of a million of functions.

A *very* basic example

For this example, we are going to create a new class that observes an element and adds the ‘hover’ class name to it when the mouse is over it. If you are impatient, you can see the end result on this demo page.

Let’s start by declaring the new class. The class must be declared with the var keyword. The function Class.create takes a javascript object and transforms it into a Prototype class.

var HoverObserver = Class.create({
    initialize: function(element)
    {
    }
});

The initialize function is very important, as it will be the constructor for our class.

Let’s add some more code:

var HoverObserver = Class.create({
    initialize: function(element)
    {
        this.element = element;
        element.observe('mouseover', this.addClass.bindAsEventListener(this));
        element.observe('mouseout', this.removeClass.bindAsEventListener(this));
    },
    addClass : function(event)
    {
        this.element.addClassName('hover');
    },
    removeClass : function(event)
    {
        this.element.removeClassName('hover');
    }
});

Now that our class is actually doing something, we can start using it:

document.observe('dom:loaded', function(){
    new HoverObserver($('someDiv'));
});

You can see that the element we are passing to the constructor is actually passed by Prototype to the initialize function.

Adding options

Another nice thing we can do is to add an options parameter to the initialize function, so that we can pass one or more additional parameters to the constructor. For example, we can add an option to specify the class name to use instead of the default ‘hover’:

var HoverObserver = Class.create({
    initialize: function(element, options)
    {
        this.options = Object.extend({
            hoverClass : 'hover'
        }, options ||{});

        this.element = element;
        element.observe('mouseover', this.addClass.bindAsEventListener(this));
        element.observe('mouseout', this.removeClass.bindAsEventListener(this));
    },
    addClass : function(event)
    {
        this.element.addClassName(this.options.hoverClass);
    },
    removeClass : function(event)
    {
        this.element.removeClassName(this.options.hoverClass);
    }
});

This is how we can use the options parameter:

document.observe('dom:loaded', function(){
    new HoverObserver($('someDiv'), {hoverClass: 'highlighted'});
});

The nice thing about this approach is not that we can specify every single parameter in the options argument, but that we don’t have to, since every parameter we don’t specify will use its default value.

Common (and not-so-common) mistakes explained

Problem: I can’t use my object’s properties or methods, it says they are undefined!

Solution: You forget to add a .bind(this) or .bindAsEventListener(this) to a function called by an event handler or an iterator.

// wrong
element.observe('click', this.doClickAction);
elements.each(this.doSomething);
// right
element.observe('click', this.doClickAction.bindAsEventListener(this));
elements.each(this.doSomething.bind(this));

Problem: Everything works fine in Firefox, Opera and Safari, but IE refuses to run my script. It looks like IE doesn’t even recognize it as JS code!

Solution: You forgot a comma next to the last function declaration.

var MyClass = Class.create({
    initialize: function(){
    },
    method1: function(){
    },
    lastMethod: function(){
    },  // <-- this is the evil bastard
});

In this particular case none of the browsers I tested throws an error (they should!): IE simply refuses to parse the javascript file while the others ignore the syntactical error.

The basic (as in “only”) idea is that RockScroll extends the scrollbar in Visual Studio to show a syntax highlighted thumbnail view of your source. This is really useful for those excessively long source code files you know you have. It’s just one DLL and you can turn it off from Tools|AddIns just by un-checking the checkbox.

The only problems I have with RockScroll are that it doesn’t support JS files and it doesn’t handle collapsed code too well. Other than that, it provides a set of interesting features: for example, double-clicking any word in your code will highlight the same word everywhere it is found in the same file, both in the small “preview” area and in the code area. The addin works nicely with VS 2008.

Download RockScroll

I found out today that text/javascript will work fine in any browser, except for Internet Explorer. Changing it to application/x-javascript does the trick, however.

In case you’re wondering, the content type is easily changed by adding:

Response.ContentType = "application/x-javascript";

in the page_load event (or the onLoad method).

Firefox

Some love it, some hate it. But this browser is probably the best tool a web developer could dream. Alone, it features “just” a robust web standards support and a fast javascript engine, but the real power comes in the form of two extensions: 

Firebug for Firefox

The Swiss army knife for web developers. You could love it just for the javascript debugger, but the goodies don’t stop here: it also helps you inspect the structure of your page, alter and analyze the CSS, monitor the network activity and explore the DOM.  

Web developer Toolbar for Firefox

Another great tool. The feature I like most is the “Edit CSS” command, which can also be invoked by pressing CTRL+E.  It also gives you quick access to other useful commands like disabling cache / stylesheets / javascript.

A rather complete review is available on this site.

Internet Explorer Developer Toolbar

Sometimes Internet Explorer is a little “challenging” to work with. CSSs or scripts that work well in Firefox, Opera or Safari don’t behave correctly in IE. While Internet explorer’s developer toolbar is not as good as its Firefox counterpart, it surely helps fixing IE’s discordances with the web standards. 

Microsoft Visual Web Developer Express 2008 / Visual C# Express 2008

The latest version of the best .net IDE you could get.  The 2008 version adds support for the new version of .Net, 3.5, while still maintaining backwards compatibility to the 2.0 version. VWD also features a javascript debugger for Internet Explorer, which could be especially useful to debug scripts that work in Firefox but not in IE.

Microsoft SQL Server Express 2005 / 2008 CTP

Almost every web application will need to store data in a database. Microsoft SQL Server Express 2005 is the ideal choice: it’s free (though it’s limited to a maximum database size of 4Gb and to work on a single processor, among the other things) and it’s of the same quality of the expensive version.

And, if you’re feeling adventurous, try out the newest version!

Notepad++

The ideal editor for quick prototyping and JS coding. With its low memory footprint and its wealth of functions, I always find myself using this program instead of a “proper” editor.

More browsers

Testing for Firefox and IE is better than developing just for Internet Explorer, but it’s even better to test also for Opera and Safari. They are free to download, so there is really no excuse not to use them. And if you have windows vista, there is still a way to test with IE6.

Why then, did I choose otherwise?

While ASP.Net Ajax is a good choice for many developers, there are some things I don’t like about it:

• I don’t like the concept. “Put everything inside an UpdatePanel to make it asynchronous” seems to be the motto during Microsoft’s presentations.
• I don’t like the standard asp.net controls. Most of the times, they’ll try to render themselves using a table layout. So ’90s. 
• I don’t want to mix content, presentation and behavior. Using ASP.Net AJAX controls will inevitably result in poor XHTML code. The classic example is an anchor pointing to a javascript function (<a href="javascript:__someFunction()">)
• Black box syndrome: the javascript code is generated by Visual Studio. This is great when you need to throw out a prototype and “just make it work”, but what about optimization? What exactly is being transferred asynchronously? [note: this could be just me being paranoid]
• It’s easy to do simple things, it’s very hard to do the complex stuff. The whole ASP.Net Ajax concept seems to be geared more towards the creation of simple websites (especially when time is scarce) than complex RIAs. A complex RIA usually consists of a very small number of significant pages (often just one or two) and each of them is carefully thought and planned, down to the single HTML element.

Ok then, but why choose Prototype over JQuery, Mootools, [any other javascript library here] ?

It’s just my personal preference, really. There are a ton of other javascript frameworks of varying quality. Since I had to choose one, I picked my favorite

Feel free to point out how much my assumptions are wrong in the comments!

Then, with the rise of the XMLHttpRequest object, everything changed. It is now possible to create Rich Internet Applications (RIAs) that defy the synchronous post/download routine we were used to.

Today there are a lot of excellent javascript libraries that can simplify our life as RIA developers.

On the server side of the equation, we can count on a lot of exciting new frameworks in addition to the usual asp, php and jsp: The trend today is towards Ruby on rails for linux/unix servers and ASP.net for windows servers.

This blog (as the name implies ) focuses on the Prototype javascript framework for the client side and on Microsoft’s ASP.net for the server side.