The Big Dumb Developer

Apple sent me an email - "The iPhone is here!!!!" Sinners repent! I followed a link in the mail and ended up "checking iPhone availability", which led me to this screen:
No, I don't know about the rest of you normal-eyed folks, but I can't tell the difference between those dots. What the hell, Apple? And I'm not that color blind. Take off the border and the highlight thing, and I've got about 4 pixels of color for my color-impaired eyes to work with. Shouldn't Apple know better than this?

I have this new piece of survey functionality. One of the screens gives you a list of people who have the survey, you click on a name and you see details, complete with some fancy animation and dynamic table action. Problem is, it feels slow. Click on the "Steve Test" user... wait ... wait ... wait ... Blind down, show results. What to do:

Ahh, I do have a lot of test data...

Ahh, I have 15 open Firefox windows, it must just be bogged down...

Ahh, Script.aculo.us is just slow...

OR: open firebug, click profile, click on "Steve Test", click profile again, and bam - that took 800ms, 80% of which was spent doing getElementsByClassName! DOH, that was stupid! One line of code later and 120ms is feeling sooooo much better than 800.

Firebug, you complete me.

Here is something I see from time to time:

    function MyObjectConstructor(param1, param2, param3, param4, param5, param6)...

    ....

    var o = new MyObjectConstructor('foo', null, null, null, null, 'bar');

That's just how you would do it in java, too... except you would probably create a couple of versions that didn't have every parameter. But, remember, this is NotJava Script, and there is a better way to do this. So, what's wrong with the above in javascript-land? Well:

• 
  
• It's up to the caller to figure out what a default value would be. What happens if someone uses MyObjectConstructor('foo', '', '', '', '', 'bar') or MyObjectConstructor('foo',0,0,0,0,'bar') or MyObjectConstructor('foo',undefined,undefined,undefined,undefined,'bar')?
• 
  
• It's fragile - the order of parameters is important. "Ok, I want to set default color, that's the 14th paremeter, I've specified 4, so I need 9 nulls..."
• 
  
• Adding new parameters can be cumbersome. Removing parameters from the API will break existing callers
• 
  
• Readability is weak. Are all those nulls just defaults, or does null mean something here? What is 'foo'?
• 
  

Javascript's object literals provides a better way:

  function MyObjectConstructor(params){
    var param1 = params["param1"] || "param1default";
    var param2 = params["param2"] || "param2default";
    ....
  }

  ....

  var myObj = new MyObjectConstructor({param1 : 'myParam1Value", param3 : 'myParam3Value'});

Notice:

• 
  
• The caller doesn't have to know what the proper default values are.
• 
  
• The order that you specify parameters doesn't matter.
• 
  
• If you decide to add or remove a parameter, old calling code will still work
• 
  
• Readability is much imporved
• 
  

Also not the use of the || operator. If you read that as "use of the OR operator" - let me tell you about || in javascript. || is the default operator in javascript, not boolean OR. So, A || B returns A if A is "thruthy" and B otherwise. So, think of var a = b || c as "a equals b defaulting to c if b isn't truthy".

A suggestion from the last post - make the select all toggle the results. Sounds good to me. The functionality of the link will be:
if all the boxes are checked, then uncheck all of them, else check all the boxes.

We can extend the previous code to first determine whether we'll be checking or unchecking:

var checked = false;
for( var i = 0; inputs && i < inputs.length; i++ ){
    if( inputs[i].type == "checkbox" && inputs[i].checked == false ){
        checked = true;
        break;
    }   
}

Then, use the checked variable in the lower loop. The final code looks like this:

BIGDUMBDEV.selectAll = function(element){
    element = this.getElement(element) || document;
    if( element && element.getElementsByTagName ){
        var inputs = element.getElementsByTagName("input");
        var checked = false;
        for( var i = 0; inputs && i < inputs.length; i++ ){
            if( inputs[i].type == "checkbox" && inputs[i].checked == false ){
                checked = true;
                break;
            }   
        }
        
        for( var i = 0; inputs && i < inputs.length; i++ ){
            if( inputs[i].type == "checkbox" )
                inputs[i].checked = checked;
        }
    }   
}

Real world problem from my UI buddy, . The problem - you want to select all the checkboxes inside of a specific div.

Starting out, we can get all the check boxes on a page with getElementsByTagName:

var inputs = document.getElementsByTagName("input");

Note, this will give us all inputs, not just checkboxes. The next step is to loop through the array, find all of the checkboxes, and check them:

for( var i = 0; inputs && i < inputs.length; i++ ){
    if( inputs[i].type == "checkbox" )
        inputs[i].checked = true;
}

So, wrapping it all up gives us this:

BIGDUMBDEV.selectAll = function(element){
    element = this.getElement(element) || document;
    if( element && element.getElementsByTagName ){
        var inputs = element.getElementsByTagName("input");
        for( var i = 0; inputs & i < inputs.length; i++ ){
            if( inputs[i].type == "checkbox" )
                inputs[i].checked = true;
        }
    }   
}

Note, I wrote my own "getElement" function for this example, you should use the $ function in prototype.js or something similar.

As a developer, I do a lot of reading about the art. I come across a lot of help content like this:

How to add autocomplete:
1) use text_field_with_auto_complete
2) that's it!

Am I the only one who things "can I get a little more than that?" Don't get me wrong, I love rails, and that method is awesome, but knowing how to use that function does not mean you could build auto complete. I always want to know how the problem really gets solved, not how to just use a function. You know, like, sort of, learn how to solve problems.

So, I'm writing my own blog.

Where did the name come from:
Big - I'm bigger than your average NFL lineman.
Dumg - I'm from Arkansas. I can't spel, ether.
Developer - I'm a developer.

I'm going to hit up my buddy, Travis, for a character of me at a desk wearing a dunce cap, until then, enjoy the blogger template this big, dumb, and color blind, developer picked out.