That is, of course, my opinion.  However, it is based on my interpretation of the data collected by TaskSpeed.  TaskSpeed is intended as a set of benchmarks to compare the performance of DOM manipulation in JavaScript toolkits across browsers.  As the title of this post suggests, there is also another not-so-hidden message that is apparent in the graphs.

Aside from XHR, DOM manipulation is probably the single most important factor of any rich web application implementing AJAX.  Armed with that little egg of knowledge and the chart below, which modern browser do you choose?

(Chart adapted from http://dante.dojotoolkit.org/taskspeed/report/charts.html)

We're talking a difference of at least an order of magnitude.  And if you don't understand how significant that is, you've never been to a science museum to see the Powers of 10.

If you need yet another glaring reason to get anyone you know off of IE6, check out the original chart from the link above.

Throughout my professional life, I've felt a bit like an outcast regarding my generalist approach to learning technologies.  Although a bit old, this article says it well:

Why learn a new programming language? Among other excellent reasons (such as good, old-fashioned intellectual curiosity), there's the opportunity to pick up useful techniques, tricks, and idioms that you can apply in your day-to-day programming life. At its best, studying a new language can give you the kind of conceptual shift that illuminates thorny problems in a new light. Even if your mainstream language of choice doesn't provide the special-purpose syntax that you find in a language you're exploring, you can often find a way to implement the underlying technique in a useful manner.

Take that, industry!

Get paid!

I was doing a little bit of legwork before writing a post about spec work and came across this interesting rant (via 8164.org).  While I'm not quite this passionate or colorful about the topic as he is, I couldn't have explained it better.  Although the whole thing is good, it's most relevant at about 2:35.

Doing "spec work" to me is something along the lines of delivering work with only the speculation of getting paid or compensated.  As of right now I'm making it one of my core values to respect the talents and value of individuals that produce high quality work.

Damn, now I feel a little guilty using this clip for free.

Lunch hour is probably the most important 60 minutes of my day.  Chances are I'm making the most of it somehow - remoting home to get some freelance work done, cramming in errands, or doing absolutely nothing (now that's making the most of it).  The last thing I want to do is struggle to get my hands on a $3.49 slice of pizza.

Delta Sonic, if you're listening, here's some quick advice on how not to waste my time.

1. If you're going to make me wait in a line just to wade through your clunky kiosk to order my own food, at least offer a way for me to pay for it at the same console a la the groceries' self-checkout lines.  I don't want to walk 30 feet away from where I pick up my food just to stand in another line to wait again so I can pay for my overpriced slice of pizza.
2. Don't offer items you can't sell me.  The delicious-looking thumbnail of steaming Mac and Cheese had me salivating as I placed it on my order.  Just before I was about to commit, I saw your beautifully laminated sign Scotch-taped to the bottom of the kiosk letting me know you will no longer be selling Mac and Cheese, Mac Salad, etc.  There is something very wrong if you can design, print, laminate, cut, and physically affix a sign to each of four terminals before you can disable items in your system.
3. Don't serialize a process that can't keep up with upstream demand.  Can you spell "bottleneck?"
4. Why are you serializing anyway?  If all I want is a piece of pizza, why should I wait for you to put together a couple time consuming paninis and salads before tossing my slice in the oven?  That way it can reheat in parallel with the panini-making and whatnot.
5. Don't pour salt in the wound by tossing in a slice for the person in front of me then walking off to make her sandwich.  Either fix your system or train your employees to look ahead so my pizza is queued up with at least the same priority as the other slice.
6. Same as #2 above.  I don't want to hear you're out of veggie pizza.  It is bad enough waiting so long, and a whole lot worse when I see the lady in front of me walk out with the last slice.  Since all the veggie pizza was spoken for by the time I ordered, you should have had your kiosk ask me if I minded waiting another couple minutes while you bake another one.  Chances are it would have been done by the time my order was up anyway.  I don't like settling for a second-choice slice after being out 15 minutes and down $3.49.
7. You know what?  Just nix the touch screen interface.  Your process is clearly not working and I really don't want to touch my food after thinking about how many grubby hands were on the thing before mine.

I get the idea, you can interface with a handful of customers at once while eliminating the middleman at the point-of-sale.  Since you're like the only place in the area to let consumers place their own orders, it's kinda cool.  But what I don't understand is why invest in the technology if the whole system and process is so #$%@ screwed up?

Either fix it yourself or contact me and I'll send you a quote ASAP.

Basically everything and everyone in which you were ever or will ever be even remotely interested can be found on the internet. Successfully completing freelance work is often impossible with all the distractions. Mix in a day job and a family or social life, and you have no hope. That was my situation. So I share with you Part 1 of a (possibly) multi-part exploration of how I changed my habits to become more successful.

Cut the crap

We all want to be in on the latest joke, viral video, political debate, and blowout deals. Additionally, we couldn't possibly think of ever giving our email client and RSS reader a break. There is a constant barrage of information coming at us and it's easy to kid ourselves into thinking that computers are helping us process everything in parallel. But seriously, I'm observant enough to know we're all wasting time. You'll know you're at least guilty of keeping some of the items on this list of stuff to cut out.

• Automatically filter out the FWDs from your mother-in-law, and if you feel bad tell yourself you'll read them "later"
• Unsubscribe from those mailings you never read anyway... you know, all the ones you delete as soon as they hit your inbox?
• Purge your music library of the songs you never listen to or alway skip
• Uninstall old or unused software
• Put the tools you need in close reach
• Clean up your desktop (and tell FireFox to put your downloaded stuff somewhere else!)
• Unsubscribe from the RSS feeds you don't keep up with
• Only bookmark your current projects, plus tools and references
• Kill bookmarks to the stuff you didn't have time to finish reading in the first place

Limit your click depth

This is especially relevant when reading blog posts by authors who cross-reference stuff inline (guilty!) or Wikipedia articles. It's awesome from a content author perspective because articles become conveniently modular. If you're like me, you read one article, get interested in some inline link, <right-click> and Open Link in New Tab, continue reading, <right-click> another link and Open Link in New Tab, close current article, start reading next tab, <right-click> and Open Link in New Tab, etc. The situation grows exponentially into an entirely irrelevant waste of time.

We've all got to blow off steam or do some reading to stay current, but put a cap on it. At very least, start paying attention to how deep you go and know when to pull out.

Turn off the TV

TV content is designed to captivate.  Every time I start a movie on one monitor or sit down with a laptop in front of the TV I pretty much already know I'm not gong to get anything done.  Kick the habit.  If you've got work to do, get down to it and watch your Buffy Season 2 DVD another time.

That should be a good start.  Part 2 to come as soon as I learn to follow my own advice...

The obsession

While I am busy changing diapers, planting trees, and replacing brick moulding, several other web developers are spending their remaining summer days sipping on cocktails or one-upping each other with their respective takes on ampersands on the web. Don't get me wrong - I do love the fact that I have been lucky enough to recently become a homeowner and a father and am amazed at how well the my body has adjusted to function on a couple interrupted hours of sleep - but I feel like I'm missing out on the party.

Through the eye crusties and clouds of baby powder, I've managed to gather the following:

1. Meagan Fisher self-diagnosed her ampersand fever, and spewed a desktop wallpaper containing some of the more interesting ampersands.
2. Dan Cederholm revisited his presentation on using CSS to add some salt and pepper to ampersands by wrapping them in <span class="amp"> tags which the browser then styles using corresponding CSS. Apparently he also bought some sweet ampersand swag.
3. Jeremy Keith replied to Dan's post that it is arguably semantically more appropriate to use the <abbr> element since the ampersand is used as an abbreviation of the word "and."
4. Patrick Haney decided that Dan and Jeremy had good ideas, but thought it was a pain to hand wrap each ampersand with care. It's better to use JavaScript via the jQuery framework to automatically find and style all appropriate ampersands. This is similar to the way Google Prettify stylizes source code on this blog. As an added bonus, you don't have to manually find and wrap ampersands in old code and blog archives to give them the special wrapping needed!

1. The minimized Dojo resources needed to query the DOM is lighter than minimized jQuery. At the time of this writing, YSlow shows empty-cache requests for Dojo coming over the AOL CDN at 39K and jQuery via Amazon S3 at 56K.
2. When querying the DOM, Dojo consistently comes in first during benchmark tests on FireFox 2.x and FireFox 3.x (here Dojo is twice as fast!). The results are a wash on Google Chrome 0.2 ans Safari 3.x because they are both blazingly fast. Unfortunately Dojo lags a bit behind jQuery in IE 6.x and IE 7.x, and the tests are butchered in IE 8 beta, but I find the majority of my users are not using IE.
3. Dojo's syntax is a bit more legible.
4. I was a technical reviewer of Pragmatic's Mastering Dojo book and use Dojo at my day job so you might say I am an advocate.
5. There is more than one way to skin a cat, and this might help someone who has an interest in the Dojo Toolkit.

Jumping right in

All the great groundwork is already laid out in Patrick's 2,000 word post, so I'll spare you the details and jump right into the meat and potatoes (or potatoes and potatoes for my vegetarian audience). Check out his post because he does a better job of explaining the background and regular expression string replacement.

In summary his jQuery code

$(document).ready(function() {
  $("*:contains('&')", document.body)
    .contents()
    .each(
      function() {
        if( this.nodeType == 3 ) {
          $(this)
            .replaceWith( this
              .nodeValue
              .replace( /&/g, "<abbr title='and' class='amp'>&</abbr>" )
              );
            }
         }
    );
});

makes all ampersands in the html body DOM node turn into

<abbr title='and' class='amp'>&</abbr>

and the CSS

abbr.amp {
   font-family: Baskerville, Palatino, Constantia,
       "Book Antiqua", "URW Palladio L", serif;
   font-style: italic;
}

gives them a little bit of style.

In Dojo, the CSS doesn't change, but the JavaScript becomes:

dojo.addOnLoad(function() {
  dojo.forEach(
    dojo.query("body *:contains(&)"),
    function(node) {
      node.innerHTML
        = node.innerHTML.replace(/&amp;/g,"<abbr title='and' class='amp'>&</abbr>");
    }
  )
});

Here you can see why I prefer Dojo's syntax over jQuery. The code reads a bit more like English pseudocode. Simply:

Wait for the page to finish loading loading. For each DOM node we're looking for, perform a certain string replacement.

If you're still scratching your head, don't worry. Here are complete working examples.

• jQuery Ampersand relpacement tests
• Dojo Ampersand relpacement tests

Comparing the Dojo and jQuery examples

1. For all intents and purposes, dojo.addOnLoad function is the same as jQuery's $(document).ready function. Both are used to specify JavaScript to run after the page is loaded.
2. dojo.forEach function takes two parameters - an array and a function - and performs the function for each element of the array. jQuery's .each is an Array method that iterates over each element and performs the function passed to it on the current element.
3. dojo.query can query the DOM just like CSS selectors. So we can specify that we only want to look at the body right in our selector. This is more straightforward than jQuery's $, which requires a second parameter to specify a context node, if desired. (Can someone tell me why the selector in the Dojo example doesn't work in jQuery?)
4. dojo.forEach passes the current element to the function (a DOM node in this case). jQuery uses the "this" JavaScript object to refer to the current element, which can be pretty confusing and lead to some dicey debugging.
5. I'm not sure why jQuery example diverges futher from the native DOM language by introducing .replaceWith and .nodeValue. I think these are pretty worthless "helpers" that only add to confusion. Getting the DOM node's value by the standard .innerHTML is suitable and allows for more legibile code for anyone familiar with JavaScript and DOM.
6. Using .innerHTML, we have to replace "&amp;" instead of "&" with the markup because we're looking at exactly that, the inner HTML of the node (and because you are using the proper XHTML character code, right?). Counterintuitively, jQuery's nodeObject.nodeValue returns the value as it is rendered by the browser, so the regular expression in that example only looks for "&". How confusing, because nodeObject.replaceWith expects markup!
7. This dojo.query example comes in at 2/3 the character count of jQuery!
8. dojo.query performs better than jQuery on FireFox, and about the same on Safari and Chrome. jQuery performs better than Dojo with any significance in IE only.

Making bling ($)

I prefer Dojo's legible syntax over jQuery's, but I know many like the abbreviated bling function to save some typing. If you can't do without the bling, you can make your own in Dojo. Check out Neil Roberts's article over at the DojoCampus to find out how you can use the $ shortcut with Dojo to query the DOM and $.ready(...) in place of dojo.addOnLoad(...). Sick!

Then your blinged out Dojo becomes

$.ready(function() {
  dojo.forEach(
    $("body *:contains(&)"),
    function(node) {
      node.innerHTML
        = node.innerHTML.replace(/&amp;/g,"<abbr title='and' class='amp'>&</abbr>");
    }
  )
});

Wrapping up

When I started at noon yesterday I thought this was going to be a quick post... Alas, I have managed to make a long story longer and bore you with 1,200+ words of my own. Meagan and Dan probably never thought that their interest in an aesthetically pleasing character would devolve into a nerdy discussion about performance and approach, but that's where my Computer Engineering background comes into play.

Anyway, all of the mentioned players brought a lot of good ideas to the table. I've added what I think are reasonable reasons why someone might want to use Dojo over jQuery in similar cases. Those of you who know my know I have a "right tool for the job" mentality. Furthermore, the right tool for one person is not necessarily the right tool for another.

Choose wisely my friends. Choose wisely.

As my buddies gear up for their Fantasy Football drafts and stock the beer fridges, I begin thinking of the science behind America's most popular sport.

1. What makes a Good Tackle? - WGLT's Uncommon Knowledge hosts explore the physics of a good tackle in this quick podcast. Hit low or use torque to offset the opponents center of gravity.
2. How do they get those first down lines on my TV? - To plot lines or graphics on the field, super-fast computers compile information about the cameras - location, pan, tilt, and zoom - and a computer model of the stadium in real time.
   The computers don't have to know where the players, refs, or football is. A technology similar to Chroma key (bluescreen/greenscreen) is used so the images appear under the players and ball. The computers know the color spectrum of the grass or turf for each stadium in certain lighting conditions. The instructions then are, "hey, only draw these images on the grass". This is why the rendered lines get garbled when there is snow or mud on the field.
3. How do they get the "flying" camera angles above the players? - The Skycam captures the shots above the players that are similar to what is seen in video games. A simple method is that the camera unit has four attached cables that extend out to posts in the corners of the stadium. At each of these posts is a motorized reel. Centralized software handles communication among these posts, the camera pilot, and the camera operator. The pilot's movements are translated to a series of points in space. Just as our brain coordinates many muscles to move a hand from points A to B, the computer software pulls or relaxes each reel to move the camera unit in three dimensions.

As of 12:24 PM EST August 18th, 2008, bluecomIT is officially a business.

Where are my millions?

More importantly, does someone owe you a drink? Keep track of it at Foamee.

It's built on top of the Twitter API, thus making Twitter marginally less worthless.

Take the Corporate Logos Quiz to see if you can spot the real versions of the logos.

Some have only subtle differences, and some you may not be all that familiar with. However, it's likely you'll do pretty well. That's the power of a good logo, and a good brand.