However that is not the case, even though I wouldn’t put it past them.

If I may diverge for a minute, I always thought "Crumb Gutter" would be a cool name for a dog.

Our family dog would have fit the bill. She was stone-age version of the Roomba. She would glide under our feed during dinner and clean the floor with her single-action saliva brush. Not a single dropped crumb would escape her motion sensing ability.

If I may diverge again to assist in my attempt at making a humorous point, pet owners are generally encouraged to spay or neuter their pet. As opposed to allowing their floozy of a pet to prowl the night looking for some action.

The annoying whine of a female cat can manifest one of those "crazy-thoughts" to punt the animal which is performing an amazing moon-walk slowly on to your foot.

Another term use in conversation when regarding this procedure is "fix", as in "I need to get my annoying moon-walking cat fixed."

I was thinking of the use of that work and found it odd that we regard it as fixing the animal. I mean, technically we’re breaking it. It’s as if domestic animals where created by nature broken, and only by the divine hand of man can we "fix" these poor animals from ever procreating again.

Anyway back to my keyboard.

I have never used Caps Lock, since I don’t program in COBOL, and have never found a use for the Insert key. In addition to them being completely useless, they actually get in my way…

A lot…

In the middle of writing some code all of a sudden I’ll notice my awesome foreach clause becomes foreACH. I would have to guess a Cap Lock reduces my efficiency anywhere between 10% and 30%.

So I fix my keyboard In the same way we "fix" animals.

By breaking them.

MyHookedObject.call( "func", "arg1", "arg2" );

//Can be called like this.

MyHookedObject.func("arg1","arg2");

The short of it, I used javascript’s prototyping ability to rewrite all the functions in the hookable object to call the appropriate hook execution function. Not anything new but I though using it in this setting was interesting. Using my Transparent Hook Pattern installation function you can make an object hookable with one line of code in the bottom of the constructor. Another neat use of JavaScript is applying external, arbitrary functions to objects using their context.

InstallTransparentHookPattern.apply(this);

This installs the basic hook functions needed to create and run hooks and also rewrites all the object methods to call hook function. Here’s the complete code.

function InstallTransparentHookPattern()
{
   this.HOOK_PARAMS = 'HOOK_PARAMS';
   this.HOOK_BREAK = 'HOOK_BREAK';

   this.createHooks = function()
   {
      this._hooks = new Array();

      //foreach function, rename to _hook_func()//
      for ( func in this )
      {
         if ( typeof(this[func]) == 'function'
            && !/^(_hook_|initalize|runHook|hook|createHooks)/.test(func) )
         {
            this['_hook_' + func] = this[func];
            this[func] = new Function('return this.runHook("'+func+'",arguments);');
            this.hook(func,this['_hook_'+func]);
         }
      }
   };

   this.runHook = function()
   {
      var hook = arguments[0];
      var arguments = arguments[1];
      var seq = ['before','at','after'];
      var rtn = null;

      if ( typeof(this._hooks[hook]) == 'object'  )
      {
         for ( var s=0; s<3; s++ )
         {
            var size = this._hooks[hook][seq[s]].length;
            for ( var cnt=0; cnt < size; cnt++ )
            {
               var r = this._hooks[hook][seq[s]][cnt].apply(this,arguments);
               rtn = (r != undefined && r != null ? r : rtn );
               if ( rtn && typeof(rtn) == 'object' )
               {
                  switch ( rtn[0] )
                  {
                     case this.HOOK_BREAK:
                        return rtn[1];
                     break;
                     case this.HOOK_PARAMS:
                        arguments = rtn[1];
                     break;
                     default: break;
                  }
               }
            }
         }
      }

      return rtn;
   };

   this.hook = function()
   {
      var args = arguments;
      switch(args.length)
      {
         case 2:
            if ( !this._hooks[args[0]] )
            {
               this._hooks[args[0]] = {'before':[],'at':[],'after':[]};
            }
            this._hooks[args[0]]['at'][this._hooks[args[0]]['at'].length] = args[1];
         break;

         case 3:
            if ( !this._hooks[args[1]] )
            {
               this._hooks[args[1]] = {'before':[],'at':[],'after':[]};
            }

            if ( args[0] == 'around' )
            {
               this._hooks[args[1]]['before'][this._hooks[args[1]]['before'].length] = args[2];
               this._hooks[args[1]]['after'][this._hooks[args[1]]['after'].length] = args[2];
            }
            else
            {
               this._hooks[args[1]][args[0]][this._hooks[args[1]][args[0]].length] = args[2];
            }
         break;

         default:
            return null;
         break;
      }
   };

   this.createHooks();
}

After installing the Transparent Hook, you hook functions using the below syntax.

//this will add 1 to myObj's value before any calls the myMethod.
myObj.hook('before','myMethod',function(){ this.value++; });

//this will add 1 to myObj's value after any calls the myMethod.
myObj.hook('after','myMethod',function(){ this.value++; });

//this will add 1 to myObj's value immediately after any calls the myMethod.
myObj.hook('at','myMethod',function(){ this.value++; });

I also created some special case global constants to control how a chain of hooked functions are executed. I’m sure there’s a better way of doing, such as a command pattern, this but this is my hack for now. The two global constants are this.HOOK_PARAMS ( which takes what is returned in an array to pass to the next function in the hook chain ) and this.HOOK_BREAK ( which kills the chain of execution and returns to the caller ). To use these in a hooked function, you have to return the constant as the first element in an array. In the case of HOOK_PARAMS, the second array element is another array which constitutes the parameters to pass to the next function in line… Hacky…i know… but it works. And thats my amazing, super awesome transparent hook pattern thing! -bryan bryan AT bluelinecity DOT com

The Blink Tag – Possibly the worst HTML element ever bestowed upon the Web designing community. This tag blinks like a lazy strobe light. It’s terrible. It’s annoying. Its support should be commented out of the browser’s source code everywhere.

Animated Backgrounds – Epilepsy here we come. Unless you enjoy giving yourself a headache and or exercising your irises, don’t to this! It makes it hard to look at the text, makes the browser choke at the amount of processing it has to do and is just plain annoying.

Background Sound – All is quiet, nothing stirs, not even a mouse. You sit complacently at your computer casually surfing the net and enjoying its zen-like quality. Suddenly, the silence it broken by a loud digitized noise that is torturously hypnotic. You scramble for your speakers to try and stop it. With the music now stopped, you search the page for some type of control that lets you turn off the infernal sound. But to no avail. Soon, you feel the urge to jam WinAmp, but can’t because the speakers are turned down. Finally, giving in to your MP3 deck, you leave the site, turn up your speakers, load up your play list, and hit "X". You just lost a user to a simple MIDI.

1000 Animated GIFs – In great numbers, this has the same effect as the an "Animated Background", (see above). Number one, it takes your page 9 hours to load. Number two, most of the GIFs are on the, "Most Used and Abused List". Number three, 98% of all the GIFs don’t match the background or each other, which makes the page look like a compulsive decorator crab in a junkyard.

100 Pictures of your Cat – I’m sure your cat is really cute and cuddly and you love it very much. But when you have one-hundred 87k JPGs of your cat sleeping, eating or just looking blankly into the camera, it gets a little mundane.

Pop-up Dialog Boxes – I wouldn’t call these annoying, I’d call them nerve recking. Especially when you have them pop-up before your page loads because if you’re a Windows user, the first thing that pops into your head is that your browser illegal op’ed and is fixing to close. It’s even worse if you use IE because then it also tries to take Window’s down with it. If you have a one of those dialog boxes that won’t let you by unless you enter your name, don’t feel bad if I Ctrl+ALt+Del your window and never visit again.

Under Construction Signs – Simply put, if your page/site is under construction, DON’T LINK IT! Nothing is more annoying then going to a page expecting to find some information and instead seeing an overly used "Under Construction" animated GIF. That just wasted 3 minutes of my time and precious bandwidth.

Size 7 Text – When I have to scroll my browser to finish a sentence, that’s bad. It’s even worse if you use MS Comic Sans and the three primary colors to do it.

Broken JavaScript – You find this really cool JavaScript and decide to copy and paste into all your HTML files on your site. Except you’re a strict Netscape user and fail to realize people also use IE. An IE user then logs on to your site and gets ambushed by a mass of JavaScript Error dialog boxes. That really places a burden on your site. Users just end up trying to find a way out of your malfunctioning Web site.

And that ends my first collection of Web site annoyances. I hope we all learn from these and use them to help create a nicer, cleaner park to play in.

<sincerely> Your Angry HTML Writer </sincerely>