The Grubbsian

Moved to WordPress

So I've finally jumped ship on TypePad and moved over to WordPress.  Not that I haven't been happy with TypePad, it's a pretty good blogging platform but I wanted more control...so WordPress it is.  If you're a subscriber please update your feed URL to:

http://www.thegrubbsian.com/?feed=rss2

Custom JavaScript Events with the Observer Pattern

Anyone that's worked with JavaScript in the browser knows that it's all about events.  And in our daily work with the DOM we use the provided events like "click", "change", and "load" all over the place.  But what if you want to create new events for custom objects that might not even have any associated UI.  Unfortunately, the W3C standard for custom events in JavaScript has spotty implementation across browsers, or none at all in some cases.

So, what are we to do...well...here's a simple implementation of the observer pattern that can help solve the lack of internal support for custom events.  Here's the Observer "classes":

var Observer = function() {
	this.observations = [];
};

var Observer = function() {
    this.observations = [];
};

var Observation = function(name, func) {
    this.name = name;
    this.func = func;
};

Observer.prototype = {
    observe: function(name, func) {
        var exists = this.observations.findAll(function(i) {
            return i.name == name && i.func == func; }).length > 0;
        if (!exists) { this.observations.push(new Observation(name, func)); }
    },
    unobserve: function(name, func) {
        this.observations.remove(function(i) {
            return i.name == name && i.func == func;
        });
    },
    fire: function(name, data, scope) {
        var funcs = this.observations.findAll(function(i) {
            return i.name == name; });
        funcs.forEach(function(i) { i.func.call(scope || window, data); });
    }
};

First thing you'll notice is methods on the "observations" array like forEach() and findAll().  These methods are added by my set of JavaScript extensions found in a previous post.  You'll also notice that this is very simple...so simple in fact that I'm not going to go through it line-by-line...I'm just going to demonstrate.  Here's how you might use this object:

	
	 var Person = function() {
	    this.name = "John Doe";
	    this.age = 23;
	    this.observer = new Observer();
	    this.changeName = function(newName) {
	        this.name = newName;
	        this.observer.fire("nameChanged", newName);
	    };
	    this.changeAge = function(newAge) {
	        this.age = newAge;
	        this.observer.fire("ageChanged", newAge);
	    };
	};

	var p1 = new Person();
	var p2 = new Person();

	p1.observer.observe("nameChanged", alertNameChanged);
	p2.observer.observe("ageChanged", alertAgeChanged);

	function alertNameChanged(data) { alert("name changed to: " + data); }
	function alertAgeChanged(data) { alert("age changed to: " + data); }

	p1.changeName("James Doeson");
	p2.changeAge(35);
	

Super simple...create an observer, observe a few things by name, fire a few things by name.  So now you have a behavior very similar to custom events.  One thing to note is that you can change the scope of the callback by passing a third parameter to the observe() method.  So, if you want this to reference some different object within the callback function, just pass it in.

Useful JavaScript Extensions

Over the years I've collected a set of useful extensions to the Object, Array, and String constructs in JavaScript and I thought I might publish them.  They are all pretty simple but it's a pain to have to write these over and over for each new project so I just compiled them into on file and off we go.  There are probably improvements that could be made to these methods and new ones to be added so please feel free to share your ideas and I'll incorporate them back in.

Here is a listing of all the methods that this file adds:

ObjUtil.isString(Object)
ObjUtil.isNumber(Object)
ObjUtil.isBoolean(Object)
ObjUtil.isArray(Object)
Object.isFunc(Object)
ObjUtil.isDate(Object)
ObjUtil.isRegEx(Object)

ObjUtil.addOverload(Object, String, Function)
This function adds some pseudo function overloading to JavaScript.  The first argument is the name of the function you'd like to expose and the second is the function to be called using that name.  The limitation here is that the only way to distinguish between method implementations is by the number of arguments (JavaScript does not discriminate by type or name).  Thanks to John Resig for the inspiration for this method.

Example:
    var obj = { };
    obj.addOverload("doSomething", function(a) { ... });
    obj.addOverload("doSomething", function(a, b) { ... });
    obj.doSomething(a);
    obj.doSomething(a, b);

ObjUtil.compareTo(Object, Object)

A generic comparison method that can be used in sorting functions.  Handles differences in lexicographical order of strings by converting to lower case.

Function.partial()

Adds partial function capability through simple currying.  Thanks to Oliver Steele's Functional.js library for this method.

Example:

var add = function(a, b, c) { return a + b + c; };

var addPart = add.partial(1, undefined, 3);

alert(addPart(2)); // alerts 6

String.toBoolean()
Converts the following values to true/false: "true" or "1".

Array.copy()
Copies an array's contents to a new array.  Keep in mind that if the array isn't made of simple types like string, number, or boolean that the new array will contain references to the old array's objects.  However, using the copy facilitates sorting and other mutations without affecting the original array.

Array.forEach(Function)

Takes a in a function and calls that function once for every item in the array.

Example: arr.forEach(function(i) { alert(i); });

Array.find(Function)

Takes a function that returns a boolean and returns the item that matches the functions criteria.  If more than one item match the first one is returned.

Example: var item = arr.find(function(i) { return i.name == "Bob"; });

Array.findAll(Function)

Takes a function that returns a boolean and returns an array of all items matching the functions criteria.

Example: var items = arr.findAll(function(i) { return i.age > 25; });

Array.contains(Object)

Tests if an array contains a certain item, returns a boolean.

Array.distinct()

Returns a new array of distinct values from the source array.

Array.min()

Returns the minimum alpha-numeric value in the array.

Array.max()

Returns the maximum alpha-numeric value in the array.

Array.first()

Returns the first item in an array or null if the array is empty.

Array.last()

Returns the last item in an array or null if the array is empty.

Array.sortAscending()

Sorts the array in ascending numerical or lexicographical order depending on if the first item in the array is a number or not.

Array.sortDescending()

Sorts the array in descending numerical or lexicographical order depending on if the first item in the array is a number or not.

Array.randomize()

Randomizes the order of the array.

Array.count(), Array.count(Function)

Returns the number of items in the array.  If a function is passed in it counts the items matching the functions criteria.

Example: var penguinCount = birds.count(function(i) { i.birdType == 'penguin'; });

Array.except(Array)

Takes two Array objects and returns a new array of only the items that are unique to both of the first two.

Example: var itmes = arrA.except(arrB);

Array.intersect(Array)

Takes two Array objects and returns a new array of only the items shared between the first two.

Example: var items = arrA.intersect(arrB);

Array.average()

Returns the average numeric value in the array.

Array.sum()

Returns the sum of the numeric values in the array.

Array.union()

Returns a new array after joining two others but does not include duplicates.

Example: var newArr = arrA.union(arrB);

Array.safePush(Object)

Adds an item to an array but only if that item doesn't already exist in the array.

Array.getRandom()

Returns a random item from the array.

Array.insertAt(Number, Object)
Adds an item to an array at the specified position (first parameter).

Array.remove(Function)
Removes items matching the functions criteria from the array.

Example:
    var arr = [{id:1, name:"Bob"}, {id:2, name:"Tom"}, {id:3, name:"Jim"}];
    arr.remove(function(i) { return i.name == "Tom"; });

Array.indexOf(Object)
Returns the index of the item in the array or -1 if the item isn't found.

Download JavaScript-Extensions

Note: There is a "tests.html" file which contains examples and unit tests for all of these extensions.  The unit tests are written for FireUnit for FireBug.

A Study in Patterns: The State Pattern

I'm a big fan of software development patterns.  They're an excellent way to get the ball rolling when you're faced with a puzzling design situation.  But sometimes they're difficult to grok and it can be confusing to know when and how to implement just the right pattern for the circumstance.  So to improve my own skill and knowledge with patterns I'm going to start a series of posts exploring some useful patterns - undoubtedly these posts will be as much for me as anyone who reads them.

One of the patterns I've recently found useful is the State Pattern.  If you've ever used an enumeration to define or transition an object's state, or written an elaborate switch statement with nested "if" blocks to modify an object's behavior depending on its state then the State Pattern might be right up your ally.  The GoF defines the State Pattern as:

Allow an object to alter its behavior when its internal state changes. The object will appear to change its class.

This definition is all well and good (and I might argue with the "change its class" business), but how would you actually implement such magic.  Let's use the following model as an example:

The basic premise is that we hide changes in our implementation of methods like "Graduate" and "IssueTranscript" behind the private field "_state" which is a reference to an IStudentState.  Our public methods Student.Graduate() and Student.IssueTranscript() call the implementations of _state.Graduate() and _state.IssueTranscript().  If _state happens to be an instance of ApplicationState then IssueTranscript() will likely perform a different action than if _state was a GraduatedState.

Another thing you'll notice is the reference that the "state" classes have back to Student.  There are likely alternate implementations of this pattern that avoid this backward reference, but you might find that you need some context in your implementation methods within the state classes.

So you can begin to see how this can reduce the amount of complex switch/if logic you'll have.  It may seem like it adds complexity in that you have more classes to content with, but after using this pattern a few times you'll be grateful of the clean segregation of behaviors achieve with the State Pattern.

You Can Never Go Back

Sometimes when I'm wrestling with a particularly irritating CSS problem (usually caused by certain flavors of IE) I find myself pining for ye-good-ol'-days of table based layouts.  I find the little devil on my shoulder yelling..."hey stupid, just use a freaking table."  Then I go to the following URL and regain my sanity:

http://www.shouldiusetablesforlayout.com

Integrating Adobe Flex and .NET with ASP.NET MVC

There are a lot of tools out there to help you utilize .NET as a back-end for Flex applications.  All of these solutions come with a heavy customization and implementation cost.  I've used WebORB with quite a bit of success in the past but it always seemed a little heavy to me.  The truth is that WebORB and its compatriots are the right choice for large applications or apps with highly complex server side needs.  But for the lightweight web application that doesn't require tons of server side business logic there is another choice.

With the advent of ASP.NET MVC we have a very simple way to construct web accessible .NET endpoints – controller actions.  In the past when you needed to get data out of .NET using HTTP you might spin up a web service or a WCF service.  These are still great options, but if the data you need to transfer is small and/or jagged you might find yourself writing a lot of extra code.  You’ll also pay the XML tax and nobody likes paying taxes.

So if not XML, what then?  Well, JSON of course.  JavaScript Object Notation is a perfect media for transmitting moderate amounts of data over the wire.  And there are excellent serialization options on both the .NET and Flex sides of the game.  So here’s a little example of this pattern in action.

Create an ASP.NET MVC Controller Action - Return JSON.

public ContentResult GetInventory() {
    var repository = new InventoryRepostiory();
    var items = repository.GetItems().ToList<InventoryItem>();
    return Content(items.ToJSON(null));
}

I’m not going to go into the data access pattern here in this article, but I’m using a repository to return a set of inventory items.  You might also be wondering where this ToJSON() method comes from.  It’s an extension method…and here it is (c/o ScottGu):

public static string ToJSON(this object thing, int? recursionDepth) {
    var serializer = new JavaScriptSerializer();
    if (recursionDepth.HasValue)
        serializer.RecursionLimit = recursionDepth.Value;
    return serializer.Serialize(thing);
}

All it does is take an object, do a little reflection magic on it via the System.Web.Script.Serialization.JavaScriptSerializer class and spits out a JSON string.

Calling Your ASP.NET MVC Controller Action from Flex

The first thing you’ll need on the Flex side before you can consume your MVC action is a way to de-serialize the JSON string.  Fortunately, the Adobe guys have provided a handy library of utilities called AS3CoreLib which contains just such a service.  Once you have the SWC just pop it in the Libs folder of your Flex app.

So now let’s create a wrapper class in ActionScript to consume our ASP.NET MVC action.  I like to mimic the repository pattern on the Flex side as well so that I can keep up with a somewhat consistent API.  There’s nothing that technically holds you to this rule, but it’s helpful to keep things logically organized.  So, here’s the InventoryRepository in AS3:

package Data {

    import com.adobe.serialization.json.*;
    import flash.net.*;
    import flash.events.*;
    import mx.collections.ArrayCollection;
   
    public class InventoryRepository {
       
        private var completeCallback:Function;
       
        public function GetInventory(callback:Function) : void {
            completeCallback = callback;
            var loader:URLLoader = new URLLoader(
                                    new URLRequest("http://localhost/Home/GetInventory"));
            loader.addEventListener(Event.COMPLETE, getInventoryComplete);
        }
       
        private function getInventoryComplete(event:Event) : void {
            var obj:Object = JSON.decode(event.target.data);
            completeCallback(obj);
        }
    }
}

You’ll notice that I’ve imported the com.adobe.serialization.json classes from AS3CoreLib.  That provides us with the JSON.decode() method.

Now, because remote calls in Flex are asynchronous, we need to do a little fancy footwork to deal with it.  So, when you call the GetInventory() method we also have to supply a callback to fire off when the data returns from the MVC action.  This is one of my favorite aspects of ActionScript…it’s dynamic…dynamic in the JavaScript sense of the word.  So we can supply a callback that doesn’t need to be defined in our repository class itself. 

So let’s look at some code that consumes our repository method.  This is just a code-behind file for an MXML application:

package InventoryApplication {
    import mx.core.Application;
    import flash.events.Event;
    import mx.controls.DataGrid;
    import mx.collections.*;
    import Data.*;

    public class HomeApplication extends Application {
       
        public var inventoryGrid:DataGrid = new DataGrid();
       
        public function InventoryApplication() {
            super();
            LoadInventory();
        }
       
        public function LoadInventory () : void {
            var repository:InventoryRepository = new InventoryRepository ();
            repository.GetInventory(function(data:Object) : void {
                inventoryGrid.dataProvider = data;
            });
        }
    }
}

So the only really interesting thing here is how we’re defining the callback as an anonymous function passed into the GetInventory() method.  When the data is returned we just bind it to our data grid and we’re done.

Sending Data To an ASP.NET MVC Action From Flex

So, now we can pull data out of our .NET back end, but how do send data into an MVC action from Flex?  The solution couldn’t be simpler.  So here’s a new method for the AS3 repository:

public function CreateKind(itemName:String,
    itemType:String,
    itemSize:String,
    callback:Function) : void {

    var variables:URLVariables = new URLVariables();
    variables.name = itemName;
    variables.type = itemType;
    variables.size = itemSize;
           
    var request:URLRequest = new URLRequest("http://localhost/Home/CreateKind");
    request.method = URLRequestMethod.POST;
    request.data = variables;
           
    var loader:URLLoader = new URLLoader(request);
}

Here you can see we’re passing in the properties of our new item and adding them to the variables object directly (another nice thing about ActionScript being dynamic).  So now these new properties will become variables in the form collection sent to our controller action.  Here’s our controller action:

public ContentResult CreateItem(string name, string type, string size) {

    var item = new InventoryItem()
    {
        Name = name,
        Type = type,
        Size = size
    };
   
    var repo = new InventoryRepository();
    repo.SaveItem(item);
   
    return Content("true");
}

You’ll notice that the parameters it accepts are “name”, “type”, and “size”.  These are the same properties added to the Flex URLVariables object in our Flex repository class.  Through the magic of ASP.NET MVC these items are simply available to the controller action as parameters, simple as that.

So, hopefully that demonstrates how easy it is to use ASP.NET MVC to integrate a .NET back-end with Flex.  I think the advantages of this method are substantial, but do your research and take a look at the other options as well.

MacBook Pro "Bluetooth Not Available"

Let me just say that I can't wait for Snow Leopard (the next version of Mac OS X).  I'm looking forward to the increased stability and performance promised by the Steve.  I'm especially interested in better multi-proc support as I'm constantly in and out of a Windows VM and I'm hoping that activity will be a little more smooth on a faster host OS.

I generally find Leopard to be very stable and haven't had too many issues but I do occasionally run into issues with the Bluetooth device not responding.  Intermittently the menu bar icon just says "Bluetooth Not Available".  It seems mostly to happen after connecting or disconnecting certain USB devices to the machine.

After hunting for a solution I came across this Apple support document.  It seems like a bit heavy handed, and I'm not exactly sure why: "Over time, the settings in the System Management Controller may become unusable, which can result in operational anomalies with the computer."

However, it solved my problem and I'm once again mousing away with my fantastic Microsoft Bluetooth Notebook Mouse 500, which I highly recommend for the heavy laptop user like myself.

StackOverflow Love

I love stackoverflow.com!  It doesn't get much better than a bunch of geeks answering each others' questions for merit badges ;)

jQuery vs. the ASP.NET Update Panel Revisited - Event Delegation

Recently I was again struggling with the ASP.NET Update Panel killing my JavaScript interactions because it replaces the DOM elements it surrounds on every refresh.  My previous solution for this was simply to rebind those events after each Update Panel refresh was completed.  This works perfectly well, but it always seemed a little heavy handed to me.

So in digging into this issue a little more, I came upon a few posts that talked about using event delegation to solve this problem (thanks to everyone out there who wrote about delegation, cause you're smarter than I am).  The basic idea is that you attach events at a higher level in the DOM tree and use the DOM's event bubbling mechanism to catch them.  For example, let's say we have the following ASPX snippet:

<div id="container">
    <ul>
        <asp:UpdatePanel>
            <li class="listItem">Item One</li>
            <li class="listItem">Item Two</li>
            <li class="listItem">Item Three</li>
            <li class="listItem">Item Four</li>
        </asp:UpdatePanel>
    </ul>
</div>

Now let's assume that you've done this somewhere in JavaScript:

function bindLiEvents() {
    $("li.listItem").bind("click", function() { alert($(this).html()); });
}

When this JavaScript is executed jQuery loops over all the found elements and individually attaches an event handler to each.  So already there is an inherent performance gain to be had by not doing this looping.  Furthermore there is now the problem with the Update Panel.  If the user takes some action that causes the panel to refresh, then the four <li> elements are destroyed and recreated and unless I call bindLiEvents again after the refresh I loose this functionality.

Enter the event delegation concept.  Why not attach my handler to a DOM element that's outside the Update Panel - the <div> element in this case.  This may seem a bit counter intuitive, but if you're aware of how event bubbling works in the DOM you can see how this might work.

Event bubbling simply means that events at lower levels in the DOM tree are propagated to higher levels.  For example when an <li> is clicked in our example, the click event is also fired on the <ul> and the <div> and beyond.  We can use this behavior to our advantage in this instance because event bubbling is intrinsic to DOM elements - when new elements are added they automatically exhibit this behavior.

So now let's look at how we might attach an event to the <div> element:

function bindLiEvents() {
    $("#container").delegate("click", "li.listItem",
        function() { alert($(this).html()); });
}

Don't worry about where the delegate method comes from - it's not native to jQuery but I'll get to that.  What's happening here is that I'm binding a very generic event handler to the <div> element, and telling that handler to listen for click events on elements that match the "li.listItem" selector.  So now, when an event bubbles up from an <li> element the handler on the <div> fires, tests if the event originated on an <li> with a class of "listItem" and then calls the function callback.

There are advantages to using the approach.  First, event handlers are attached only once, and only at a single point which saves time when doing the initial bind.  Second, any new elements added to the Update Panel will automatically fire the delegated event handler - no rebind is required.

So if you want to try this out for yourself, here is a jQuery plugin for the delegate method:

(function ($) {
    var bubbledEvents = ['click', 'dblclick', 'mousedown', 'mouseup', 'mousemove',
        'mouseover', 'mouseout', 'keydown', 'keypress', 'keyup'];
    var allowedEvents = { };
    $.each(bubbledEvents, function(idx,event) { allowedEvents[event] = true; });
    $.fn.extend({
        delegate: function (event, selector, func) {
            return $(this).each(function () {
                if (allowedEvents[event])
                    $(this).bind(event, function (e) {
                        var el = $(e.target), result = false;
                        while (!$(el).is("body")) {
                            if ($(el).is(selector)) {
                                result = func.apply($(el)[0], [e]);
                                if (result === false) { e.preventDefault(); }
                                return;
                            }
                            el = $(el).parent();
                        }
                    });
            });
        },
        undelegate: function (event) { return $(this).each(function () {
            $(this).unbind(event); }); }
    });
})(jQuery);

Dynamic Expressions with LINQ to Entities

There's been a lot of buzz lately around LINQ to Entities (aka Entity Framework).  Some of the buzz has been positive, a lot has been negative, but it does appear that Microsoft will invest a lot in LINQ to Entities moving forward.  On a recent side project I had occasion to use EF to connect to a SQLite database running locally within a web application.  It's an interesting little architecture and despite it's obvious scaling issues, it's working really well for the problem space.

Anyway, one of the features I needed was search...and not just any search, a very dynamic search.  The application is an inventory tracking system and it allows a user to set up different kinds of items and create a unique list of properties that each of those items can have.  For example you might create an item of type 'Widget' with two properties 'Size' and 'Color'.  Another type might be 'Bobble' and it has properties 'Width', 'Volume', and 'Friction Coefficient'.  So in order to search for these types I'm forced to dynamically construct a search screen.

This dynamic search screen is where the issue comes in.  Because I'm searching an indiscriminate number of properties and I don't know at compile time what those properties are, I need to execute some type of dynamic query.  Those of you who are familiar with LINQ will know that this is easier said than done.  It's not like I can just construct a SQL statement at runtime and then pass it to the database for execution.  Enter the System.Linq.Dynamic namespace.

I found this blog post by ScottGu on the exact subject.  (The post is labeled Part 1 but I haven't been able to find a Part 2 anywhere...if you find it let me know.)  His post will point you to where you can download the source for the System.Linq.Dynamic assembly which you'll need to build and include in your project.  I did see mentioned that this is part of .NET 3.5 SP1, however I was unable to find it on my system.

Once you have the library referenced it becomes quite a bit simpler to generate a query at runtime.  The library parses an expression syntax that's pretty simple.  The primary use for generating queries at runtime is going to be setting up WHERE conditions; you can however create an entire query dynamically if you need to.  Here's an example of a LINQ query as it would be written at design time:

var items = (from InventoryItem item in db.InventoryItem
             where item.Category.ID = 7
             select item).ToList<InventoryItem>();

This is a pretty innocuous query and doesn't really warrent being turned into a dynamic query but for example's sake, here's how you'd write it:

var items = db.InventoryItem.Where("Category.ID = @0", 7).ToList<InventoryItem>();

It's really that simple.  After you include System.Linq.Dynamic in your using statements a new overload of the Where method is available.  This new version of Where takes a string predicate (the where statement) and an array of objects that are parameters for the query string.

Because you don't have the benefit of type safety within the query string, you'll have to be careful with your syntax.  For example, when using a property of a property (item.Category.ID in the above example) you have to remember to use the names you've assigned to entities in your model not the names in the underlying data source.

There are other ways to create a query dynamically including using ObjectQuery<T>, or building up predicates in a pseudo-recursive way as in this post from the C# 3.0 in a Nutshell guys.  However, I find the dynamic query method here to be easy to understand and very powerful.

Use jQuery.post to submit to ASP.NET MVC Actions

Recently, Microsoft announced that jQuery will be shipping with future versions of Visual Studio.  In fact, today the ASP.NET MVC bits already ship with jQuery.  ASP.NET MVC is extremely friendly with jQuery. 

One of the things that ASP.NET MVC gives you over web forms is an easy way to expose actions to the client.  Here's where AJAX using jQuery really shines.  In the past if you wanted to initiate some server side action using JavaScript, you'd need to expose a web service of some kind and then call into your server from there.  With ASP.NET MVC you can simply submit a post to an action via a URL and you're off.

For example, I might have the following action called 'DoSomething' on my 'Thing' controller:

public ActionResult DoSomething(int thingId, string thingName, 
        DateTime thingDate) {

        var db = new ThingEntities();
        var thing = (from Thing t in db.Things
                                      where t.ID == thingId,
                                      select t).First<Thing>();

        thing.Name = thingName;
        thing.ThingDate = thingDate;

        db.SaveChanges(true);

return Content("true");
}

Calling this method from JavaScript becomes almost trivial using the jQuery.post method:

$.post("/Thing/DoSomething", { thingId: 7, thingName: 'New Thing', thingDate: '1/1/2008' }, function(data) { alert(data); });

So the post method has three parameters:

1. The URL of the action to post to. 
2. An object comprising the data to send with the post. 
3. A callback method which fires when the request returns. 

It's as simple as that.  So now making calls back to your server from JavaScript is as easy as writing a controller action that takes simple types as parameters.  There are several different jQuery AJAX methods to chose from and obviously some more advanced things that you can do, but as you can see the basics are pretty simple.

Echo-ORM

I think we've all encountered the fear of open source software amongst some of our clients.  I like to call it ossphobia.  It basically amounts to a categorical rejection of anything that doesn't arrive in shrink wrap with a shiny holographic label displaying a Microsoft logo.  While I am primarily a Microsoft developer, I am by no means a fanatic and often find that the best solution to a problem is exactly the opposite of the solution championed by Microsoft.

Recently I was working with one such ossphobic client on a reletively simple reporting application.  We were in need of a very simple ORM-lite solution (similar to what SubSonic provides) to store meta-data information in a database.  My first thought was, "Well, why don't we just use SubSonic?"  This was met with blank stares and a palatable sense of "Oh no he didn't." hanging in the air.  So, after realizing that my chances of changing this client's mind on the subject of OSS was nigh impossible, I decided, "The hell with it, if they don't want to use the inexpensive solution, I'll just write my own ORM and call it custom software."

Some of you (whoever you are) will find the idea of rolling your own ORM in the age of NHibernate, LINQ to SQL, SubSonic, and etc. ridiculous.  "There are so many good frameworks out there, why would you ever want to write your own?"  Well, I'll give you a few reasons...you may not like them...but I do so you'll just have to deal.

1. Full Control - One of the things that's great about SubSonic for example is that it just flat works out of the box.  You do some simple configuration, generate your objects, and your off and running.  Literally, 10 minutes.  The problem here is that much of the internals of SubSonic are kind of a black box.  The source code, while well written, can still be a pretty deep stack.  If I for example wanted to add a feature to SubSonic, I'd find the learning curve pretty high.  A custom ORM designed specifically for simplicity offers a much lower barrier to extension.
2. The Right Tool for the Job - So in the specific case that prompted me to write my own framework, there were some specific features that we needed.  I was able to winnow down my concept to cover just what was needed at the time (the YAGNI principle).  This allowed my framework to be really targeted and the API that I exposed to consumers of the framework was extremely simple.  
3. I Like Learning - I don't often get the chance to work on framework type projects so this gave me the opportunity to really try out some ideas in an environment that wasn't tied immediately to a project deliverable.  I think everyone should have a side project that takes them outside the path of their normal daily development...I have several such side endeavors.

So, now that all that's been said.  I'm introducing Echo ORM as an open source project on Google Code.  It's a very small framework and in a very alpha state, but I'd love some feedback on the approach that I've taken and I welcome comments or contributions.

Echo ORM: http://code.google.com/p/echo-orm

Excellent Post on Project Size

An excellent post on project size...as in how many people are on a project.

http://semanticvector.blogspot.com/2008/10/more-programmers-more-code.html

Personally, I've always subscribed to the Amazon two pizza maxim.  Any project team should be able to eat comfortably on two large pizzas.  As soon as someone says, "Say, I think we might need to order a third pie."  You know your project is too big and is likely going to suffer from hauling around the extra weight.

Optimizing jQuery Selector Performance

Despite the fact that the capacity of modern JavaScript engines is expanding rapidly, I found myself recently fighting with JS performance on a very large web page.  This was an ASP.NET application with one very complex page, very large DOM tree, lots of elements and lots of JS interactions.

As the page became larger and more data was pumped into the DOM the time it took to locate an element or set of elements in the DOM began to lengthen.  My attempts to locate any solid information in Google on improving this situation was fruitless.  So, I starting digging through the jQuery source code to see how the selector engine worked...this was also useless.  Clearly the skills of the JS Ninjas that created jQuery are far superior to mine.

So, then it just became a thought experiment.  Knowing that jQuery uses a context sensitive combination of XPath, native browser API's, and some fancy string parsing for CSS3 selectors there are a few optimizations that come to mind.

Qualify your selector strings when searching by class.
Because one way that jQuery can find DOM elements is XPath style searching, it's important to qualify your selector strings.  Turning $(".some-class") into $("div.container > div.head > div.some-class") can really make a difference.  This is especially true when the branches of your DOM tree become very deep.

Don't Qualify your selector when searching by id.
Because searching by id uses the browsers native getElementById method (which is very fast) it doesn't make sense to overly qualify a selector string that's looking for a unique element.  So $("div#someid") is actually slower than $("#someid").

Select By Element(s)
Don't forget that your argument to $() can also be a reference to an element directly.  One of the techniques that I've used to get over huge numbers of DOM elements is to do some pre-caching of element objects before doing any manipulation.  For example I might keep an array in JavaScript of all of the elements of a particular group.  

Say you have a bunch of textboxes on a page and they're scattered all around in deeply nested trees.  Half of the textboxes belong to group A and the other group B.  I might set up two JavaScript arrays (elementsAarray, and elementsBarray) and before the page is rendered I'll go and grab all of those elements and plop them into my arrays.  This way I can simply grab that array of elements in group A with $(elementsAarray) which completely cuts out the need for DOM traversal.

- - - - -

There are likely other ways to tweak your selectors and I'd love to hear how other people have tackled this issue.  Here's hoping that JavaScript engines get so fast that we don't have to care!