So I was checking up on my twitter feed yesterday and saw a tweet that direceted me to this: http://devthought.com/wp-content/projects/mootools/BSOD/:

The script BSOD.js provides an easy-to-use class to boost the error reporting user experience of your websites.

To fully understand the characteristics of this technique please refer to this external article

I thought to myself… I can do that. I will use jQuery. So I spent most of yesterday after work learning up on how to make a jQuery extension (I wanted to be able to call it the same way as the moo-tools one)

$.bsod();

I got a bit carried away. I didn’t want just a bsod, I wanted each user to feel like the error was specifically made for them, so I added in os detection and os specific styles. I liked the way that he incorporated Spyjax (ajax for evil!), so I added that by default (you can turn it off of course if you want, it will blame a random site that is in the list). I also liked the colour changing, so that is in there too (it works only for the windows bsod though because linux and mac have images). Here are the options:

• color: the background colour (win only, others are all black)
• font_color: the font colour
• error: the error message you want to display
• os: the os (default is to guess the user’s os)
• blame_url: boolean – true = blame a specific url
• url_array: an array of urls you are looking to blame
• error_array: a bunch of errors that you would like to use (one is randomly choosen)

Dependencies

Right now, the images and jQuery (tested with 1.3.1).

There is also a style that is compressed using cssTidy and inserted with the bsod.

Without further ado:

The demo (click on a word to see the bsod)

bsod.1.0.zip (with the dependencies included so you can use it right away!)

And some screen shots:

Tested in:

• IE 8, IE 7
• Firefox 3
• Opera 9.63
• Chrome 1.0.154.48

In case you missed it:

The demo (click on a word to see the bsod)

bsod.1.0.zip (with the dependencies included so you can use it right away!)

Related posts:

1. JQuery and WordPress
2. Using the jQuery-UI Autocomplete Widget
3. A better way to use jQuery in WordPress Themes