Feel free to fork/contribute at your leisure.
http://github.com/zachleat/ALARMd

If you’re new, you can check out ALARMd.com to see what I’m talking about.

As many of you may already know, my day job includes managing a large and complex enterprise jQuery-based user interface component library. It’s used by all new web applications at the company, which boasts over an IT department of approximately 1500 people and hundreds of web applications. Needless to say, I get a fair volume of interesting support tickets that come my way. A few weeks ago, I had the pleasure of receiving one such ticket.

The support ticket’s symptoms included a oft-heard complaint: poor performance. On the web, poor performance can be attributed to a great many things, but most often can be boiled down to a bottleneck in JavaScript code using the DOM API. This time, strangely enough, the culprit was something else entirely.

One of the first things I check when an application complains of poor performance is the total size of the document, or how many nodes it has. One of the best ways to ensure good performance is to keep your document small, especially on projects using heavy dynamic element selection and filtering (think jQuery, Mootools, Prototype, Dojo, or any code using a selector engine like Sizzle). Any JavaScript library emulating CSS selectors executing over a very large document is going to take quite a bit longer than querying a small document, especially when the user’s browser doesn’t support native querySelector or getElementsByClassName.

To get an idea of what the size of a large document is, I usually go to a site with some fairly advanced JavaScript and query their size.

// Returns the total number of nodes in the document
document.getElementsByTagName('*').length;
// note: this number will not include any child nodes inside of iframes.

Getting back to the support ticket in question. After querying the document, I quickly found that the page contained over 50000 nodes. Wow. So, we’ve caught a big one. You’re going to be telling your grandkids about this some day. But, now what?

I decided it would be beneficial to find out where and what all of those nodes were. After clicking around the live document in the Firebug’s HTML tab for awhile, looking at View Source, and Ajax requests in the Console, I successfully determined the culprit. This particular application was using Wicket, a popular Java library for web applications, which includes its own Ajax Logger component (similar to my favorite log4javascript; or something like the YUI Logger), used to keep track of an application’s Ajax calls and JavaScript page manipulations with an inline GUI embedded in the parent document. On one page load, this application’s Ajax logger component had created 40000 nodes of log content.

It’s important to realize that embedding unnecessary content of that magnitude on the page can be very detrimental to performance. JavaScript loggers should log to a new child window, rather than be embedded in the parent document. This way they won’t bloat the document, but still provide you with much needed logging information.

But, in the future, how might this type of problem be more easily diagnosed and prevented? Ideally, when confronted with large documents, we want to see where in the document the majority of those nodes are located. But there isn’t an easy way to see which portion of the document is using the largest number of nodes, especially if the culprit is deep into the document tree. We can go through the source code manually, but that isn’t very efficient.

So in the spirit of exploratory development to help troubleshoot real-world problems, I decided to make a Firebug Lite plugin. This would give me an easy cross-browser tool to diagnose my problem in a familiar interface. Load up Firebug Lite, load the DOM Sailbloat JavaScript file, and easily spot the HTML love handles.

Here’s what it looks like in action:

Go Forth

1. See the demo
2. Download the source
3. Fork the Sailbloat on GitHub

Note: there is currently an undiagnosed issue with the Sailbloat and it fails to load intermittently. If you know why, I’d be happy to put your name in the source code credits.

Take a look at the Dingbats section on fontsquirrel to get your brain going in the same direction.

Hit Options, then the Clock Format tab to change to Unix Time. Enjoy!

Download the Source Code

Here’s a use case. An unregistered visitor visits your blog, and decides that your content is so good that it merits a comment! Congratulations, you’ve fooled them! Now you can twply their account details for $1200 on Sitepoint! Just kidding. But generally, when you visit a blog’s commenting section (such as the Tournology Blog shown above), you’ll see a simple form to authenticate you’re not a spammer, generally including (among other things) an e-mail address field.

Well, since they’re typing their e-mail address, wouldn’t it be cool if we could show them their gravatar right there, inline with the blog comment form? Well, that’s now possible with my new JavaScript Gravatar Plugin! It doesn’t have any server side language dependencies.

Hell, gravatar.com could even use this to improve the user experience of registering your e-mail account. Right now it does a full page refresh and doesn’t even show you a preview!

See the Demo

Download the Source Code

Licensing

Licensed under the WTFPL, as highly recommended by Isaac Schleuter (see discussion).

JavaScript Dependencies:

• Requires jQuery (Feel free to port and post a link!)
• Requires md5.js

Example Usage:

Easiest form, onblur of email text input field:

$('#emailTextField').blur(function(event)
{
    $(this).after($.gravatar($(this).val()));
});

Showing all options, again onblur of email text input field.

$('#email').blur(function(event)
{
    $('body').append($.gravatar($(this).val(), {
        // integer size: between 1 and 512, default 80 (in pixels)
        size: 200,
        // maximum rating (in order of raunchiness, least to most): g (default), pg, r, x
        rating: 'pg',
        // url to define a default image (can also be one of: identicon, monsterid, wavatar)
        image: 'identicon'
    }));
});

See ALARMd on Google Code.

Have a friend that hasn’t registered to vote yet? Do your civic duty by guilting them into action. Help them fight registrastination by sharing a link to a big bold deadline.

Fight Registrastination. Register to vote NOW!

For those demanding technical content from each blog post, the page does use a nice JavaScript IP Address Geocoder hosted by MaxMind that’s worth a look. It also uses a previously mentioned JavaScript Pretty Date Difference script.

Here’s a few other things that one might also look at if they were making a location aware application:

• Google Maps API: Geocoding
• Gears GeoLocation API
• Parse a Facebook user’s location.
• Twitter’s API only provides update_location, not a way to get the current location.
• As mentioned above, MaxMind’s IP Address Geocoding Service
• Yahoo’s FireEagle, BrightKite, Plazes, and Dopplr

MaxMind’s seemed the best fit for my use case: guessing the State of an anonymous user.

Update: added Metric and Unit Circle time formats.

I know, some of you are reading this and thinking to yourself — genital herpes is more appealing than yet another online alarm clock. But to that I say, congratulations, that’s one of the new features in ALARMd 2!

Why did I make another online alarm clock? Mostly due to missing features and limitations in the old version, but also because it’s a good exercise in JavaScript programming and User Interface design. Everyone likes to hone their skills, and this is my publicly viewable work desk. But the real reason I went back to rewrite the old version is that I’m hooked on jQuery. I can’t get enough of that sweet, sweet, source code, and couldn’t stand to see my old, crusty, handwritten DOM manipulations polluting web browsers across the world. Users of the Yahoo User Interface Library (what I used for the original version of ALARMd) would do well to consider jQuery a nice plugin to be used alongside YUI. It will clean up your code MAX_INT-fold.

Here are a few new features and addressed limitations in ALARMd 2.

• Easy Alarm Mode: No more fumbling around when you just want one simple easy-to-add alarm.
• Google Calendar Alarm Mode: Customize your alarm schedule to your heart’s content, it will load your alarms straight from a publicly available Google Calendar. There are some great features with this:
  • Load only the first calendar event of every day
  • Day Limiter (Example: Only load calendar events within the next 3 days)
  • Minute Adjuster (Example: Alarm me 90 minutes before work without adding a separate event)
  • Google does a nice job of normalizing dates as well, so you don’t have to worry about calendar time syncing. If it says 8AM on your calendar, it’s going to alarm you at 8AM on your computer’s local time.
• New Clock Formats:
  • Human Readable Clock Format: Think “Half Past Two”, or “Quarter Til Twelve”. This idea is from Laurence Willmott’s Project “It’s about Time”. I took some liberties with his labeling scheme, I hope he doesn’t mind too much.
  • Metric Time Format: Shows the measurement Centi-days in Local Metric Time. Basically, it’s a percentage of much of the day has passed. If it’s 80.000, 80 percent of the day has passed, which coincides with 7:12 PM.
  • Unit Circle Time Format: Displays the time in radians that would be shown if a clock were pasted on top of a unit circle. If it’s 12 o’clock, it will read π/2. After programming this one, it’s starting to seem normal in my brain. Oh, it’s 3π/2? Time to eat dinner. How the hell did it get 2π/3??
• Human Readable Alarm Dates: Think “29 Minutes”, “1 Hour”, “2 Days Ago”.
• Much cleaner interface, using a jQuery accordion to display the options.
• The old ALARMd required an internet connection for all sources, and provided no safeguard if your internet went down whilst you were sleeping. ALARMd 2 preloads all Youtube videos in the background when the page loads using the new Youtube JavaScript API. A nice benefit of this is that the browser window no longer requires focus to play the YouTube video.
• Less clunky interface for adding new alarm sources.
• Repeat option for YouTube videos and MP3′s. Turn infinite loop on or off. Careful with this one. Don’t leave ALARMd going if you’re not going to be home when it goes off.
• CSS Skins, Use the really simple ones I’ve included for Red, Green, or Blue, or include your own URL to your own hosted CSS file. Have a good skin? I’ll include it in the select list and give you some props here, just link to it in the comments below. Use some CSS class hooks to spice up your skins (they are mutually exclusive). These are CSS classes that are added to the body tag to allow you to style the alarm differently depending on the alarm clock’s current state. Future enhancements might include more than just alarm-based hooks: Year, day of the year, and hour of the day might be useful, that way you could style the clock to show a lighter background during the day and a darker background at night.
  • .alarmWithin30Minutes
  • .alarmWithin15Minutes
  • .alarmWithin5Minutes
  • .alarmWithin1Minute
  • .alarmActive (Alarm is being played)
• Still has all the old favorites:
  • Test Button to make sure the video or source is working and to check your volume.
  • Count Down mode to show the time between now and the first alarm.
  • Store your own list of alarm sources, using YouTube, MP3, Last.FM, or any URL (Pandora is included).
  • Military time (24 hour clock) and seconds toggle.
  • Naked mode (get rid of the extras)

Finished reading? I’m surprised you didn’t click the link at the top: ALARMd 2 Beta

Remember, this is BETA. That means it’s new. I’ve done my best to test and code out all the kinks, but there may be a few that slipped through. Try it out and please report any bugs. And once again, this code is released under the BSD license.

I’ll probably move this to the main ALARMd.com domain shortly.

Alarmd has been personally tested with Firefox 2, Firefox 3, Internet Explorer 7, Safari 3.1, and Opera 9.27, all on Windows. Google GDATA reports an unsupported browser error on Safari and Opera, which you can hide using custom CSS.

The more I used Dean Landolt’s script, the more problems I began to see with his implementation. It was a good start, but definitely had bugs. His assumptions translating from integer second differences to human readable labels stretched too far at times (there is an error in logic to say anything between 24 hours and 48 hours from now can be labeled “Tomorrow”), and he was a bit loose with his difference categories (assumed average month length was 28 days, and always used Math.floor instead of rounding — 47 hours from now would be labeled “1 Day”). It was great code otherwise, and I definitely liked the way he used the while loop to run through the comparisons.

So, I’ve cleaned up his great start, and am releasing it to the world in the spirit of cooperation and open sauce. You just read that typo out loud didn’t you?

Download: Yet Another Pretty Date Implementation (2 KB)

Update: Dates for this script must have a specific ISO8601 format: YYYY-MM-DDTHH:MM:SSZ (in UTC) where T and Z are literals.

• Requires PHP >= 5.10, due to the usage of PHP’s new DateTimeclass.
• The new DateTime object parses strings using PHP’s strtotime, so you don’t need to pass in an ISO8601 formatted date, as in JavaScript Pretty Date. Try “now”, or “next Wednesday”, or “+2 weeks 4 days 23 hours 9 seconds”.
• Extended to handle Months and Years in the past (JavaScript version only goes to weeks)

Usage:

// pass in a String DateTime, compared to another String DateTime (defaults to now)
$myString = Date_Difference::getStringResolved('-7 weeks');
$myString = Date_Difference::getStringResolved('-7 weeks', '+1 week');
 
// pass in a DateTime object, compared to another DateTime object (defaults to now)
// useful with the Propel ORM, which uses DateTime objects internally.
$myString = Date_Difference::getString(new DateTime('-7 weeks'));
$myString = Date_Difference::getString(new DateTime('-7 weeks'), new DateTime('+1 week'));

Download PHP Pretty Date (PHP 5.10+, 1.86KB)
http://www.zachleat.com/Projects/phpPrettyDate/Date_Difference.phps

I added this to use maLArquee as an alarm. For instance you can try adding this one to your ALARMd for a nice wake up message.

http://www.zachleat.com/Projects/Malarquee/index.html?text=Jnxr%2520hc!!!

Of course the obvious downfall of this approach is that your target website would need sound if you wanted to actually use it to wake up. But you could also use it to open up a new window at a specific time to prank a friend, coworker, or loved one. Try setting up ALARMd to use a naked lady website as a target url on your coworkers computer and set the time for right after lunch! Or open ALARMd up on your colleague’s computer and get it to open a competitor’s website during a big presentation to the company president.

Fun to be had by all, I’m sure.

Well today, we’re going to solve all of that. Today, I’m going to show you a full screen web browser marquee that will both amaze and excite you. Here we go:

http://www.zachleat.com/Projects/Malarquee

What is it for?

There are a few obvious uses, I suppose. You can send someone a nice greeting in an email link (it does a ROT13 encoding to mask the text inside the link). Try one of these:

For a spouse: I want a divorce.

For an employee: You’re fired.

For a doctor: I’m sorry but you have anal warts.

For your son or daughter: You were adopted.

So, what else does it do?

I knew you’d ask. If you click the Options link in the top right corner, you can scroll your text across multiple web clients! Input the number of clients you’d like to use and the number of your current client. Hit the update and save button to refresh your page. It will automatically parse your text accordingly (adding extra spaces at the end as blank slides if needed). You can test this using one computer by bringing up the following two links in separate windows side by side (you can use a different web browser for each link if you’d like):

maLArquee Client #1
maLArquee Client #2

You could also go into a computer lab and scroll some text on a couple different computers.

Why?

I think it’s fun to try new things on the web, experiment a bit. That’s also why I made ALARMd, an Internet Alarm Clock. For this project, I think it might be fun to try a new JavaScript library, just to get a little bit more experience with a range of different coding types. So I decided to use MooTools, and wrote a little review on my experience, coming from a YUI and jQuery background.

How does it work?

Every 5 scrolls (I reserve the right to change this number at any time I so wish to conserve bandwidth), the page makes an XmlHttpRequest to the server, gets the server time, and adjusts the delay of the next scroll event to synchronize scrolling between multiple browsers. Ideally, if every computer were the same, we could just do a single XmlHttpRequest at page load and do a standard interval for scrolling. But we all know that every web browser is different, and just because you do a setInterval(yourFunction,1000) doesn’t mean it’s actually going to run yourFunction every second. It might run in 1010 ms or 990 ms. Thus, the XmlHttpRequest is needed to resynchronize all of the clients to a standard clock.

If there is any interest, I’ll post the code to the time.php script that returns the JSON containing the server time.

What would you do different next time?

I told my gracious web host about this project after I was approximately 90% complete with it, and his response was: “Did you use NTP?”, with which I replied: “What is NTP?” Ugh. There is even a JavaScript implementation.

In order to provide balance and order to the universe, please read the following link.

The day I sent the link to the LifeHacker editor, I purchased the alarmd.com domain. My thoughts on the domain were that I should have it just in case I decided to host the clock on the domain for easy access, and I certainly didn’t want anyone else to have it. That turned out to be a good idea since an unnamed internet charlatan purchased a similar domain mere hours after I had purchased mine and pointed it to his website. This same person was going onto various blogs and websites where ALARMd had been posted saying that it was a ripoff of his site, which of course was not true. I’m sure he got some traffic from it, and certainly am curious about the liberties he takes with the truth just to make a buck. Obviously I am not going to post a link to his website, since I do not want him to receive any traffic to his Google Ads machine. I hope that you, as a reader of my website, will trust that anything linked to this guy’s name is not worth any of your time.

The link was posted to LifeHacker, and my meager website went from an average of 50 hits a day to receiving 87000 hits in two weeks. In the end, I got more visitors from stumbleupon than LifeHacker, which is really a testament to that website’s popularity.

It was on delicious popular bookmarks for a while. It actually also ended up being on television. I know, I know, it seems ridiculous to even put websites on television, but it was. A lady named Erin O’Hearn does a segment called “Right Now on the Net” for Channel 6 Action News in Philadelphia. She had a blurb about it and you can even watch it here [Skip to 1:07]. I guess it was also on an internet radio show called “Techtalk Radio” and was featured as their site of the week. You can listen to that podcast here [Skip to 47:09], even though they pronounce my name “Zach-A-Lot” and are obsessed with the “Naked” checkbox. But to be fair, who isn’t obsessed with Naked checkboxes?

And just recently, I put up the alarmd.com domain as a redirect to the site for all the hard-core users still going to it and using it. It’s still getting a couple of hundred hits a day.

So, hindsight. The alarm clock is a device that everyone uses and easily relates to, but also a device that people have low expectations for. Most alarms only have one or two times they go off for, and with only a few options for alerting: buzzer or radio. Most go off every day, even on the weekends when you want to sleep in. But people put up with their crappy alarm clocks because there is literally no good alarm clock hardware out there. And some of the features I’ve put into ALARMd can also be seen in alarm clocks that cost over $100 USD. Ridiculous. I would bet that there is a huge market for someone to come out with an alarm clock that does suck and costs $40, or maybe people just want to use their cell phones all the time. I wonder if the iPhone alarm is any good. Look for my next project, which will be just as, if not more, retarded as the Internet Alarm Clock.

The DOM. Arch-nemesis of web developers attempting to support the ultimately tiny (I think it’s down to about 5 or 8% now?) sliver of browser market share that Internet Explorer currently entails. Let’s make it easier on ourselves and make a little package to do it for us. Run a function, pass in an argument with a description of the DOM node(s) we wish to create, and have the package auto-correct any bugs we would have encountered during manual creation, and maybe even have it inserted or appended for us.

But wait, why are we doing this when there are literally 80 billion other DOM element creation classes already out there? It’s all about syntax. The existing packages are incredibly verbose, focusing too much on a complex object structure to describe the nodes, in some cases even having separate objects for attributes inside a single node. Why not use the syntax we’ve already come to love in the various DOM query libraries that are available? Why not use DOMDom? Let’s see a few examples:

Single Node String

'div'

<div></div>

Single Node String with ID and Classes

'div#id1.class1.class2'

<div id="id1" class="class1 class2"></div>

Single Node String for a Form Element

'input[name="myTextBox",type="text",maxlength="5"]'

<input name="myTextBox" maxlength="5" type="text"/>

Single Node String with Style Syntax

'div{height=80px,color=#f90,border=1px solid #000}'

<div style="border: 1px solid #000; height: 80px; color: #f90"></div>

Complex Single Node String with ID, multiple classes, Style, and Namespaced Attribute)

'div#id1.class1.class2[style="width:60px;color:#f90",@class="class4",@att="true",@namespace:att="false"]'

<div id="id1" att="true" namespace:att="false" class="class1 class2 class4" style="width: 60px; color: #f90;"></div>

Multiple Node String: Linear (Parents with one Child)

'div span div'

<div>
     <span>
          <div></div>
     </span>
</div>

Multiple Node String: Non-Linear (Parent with more than one Child)

{ 'div': [ 'span', 'span' ] }

<div>
     <span></span>
     <span></span>
</div>

How Does It Work?

By default, it’s set up to do HTML Fragments (innerHTML) because they are much speedier than the manual DOM element creation (createElement). But if you desire, you can toggle a boolean in the code and it will switch back to DOM element creation. When in DOM element creation mode, it will account for the following browser bugs:

• (IE6) Standardized for attribute representation (pointer to htmlFor)
• (IE6) Standardized case for accesskey, usemap, maxlength, and frameborder attributes.
• (IE6) Standardized checked attribute for radio and checkboxes.
• (IE6) Special consideration for dynamic handling of name and type attributes (on form elements).
• (Firefox) Works with whitespace that is treated as a node.

Syntax

You should already be able to tell how to create a node from the examples above. Here are some more things you might not have guessed:

Creating a node with an id

'div#myId'

Creating a node with CSS classes

'div.class1.class2'

Creating two nodes at the same level

[ 'div', 'div' ]

Creating a node with two children

{ 'div': [ 'div', 'div' ] }

You can mix the {} and [] syntax wherever you like, but if you want a node to have non-linear children, you have to use the {} object notation.

Creating a text node (start the node declaration with a #, you can change this to another non-conflicting character in the code if you like)

'#Any Text Here'

Creating a node with attributes (the @ is optional)

'div[class="class3",style="width:60px;color:#f90",@att="true",@namespace:att="false"]'

Creating a node with a Style Shortcut (mixing with a style attribute is handled properly)

'div{color=#f90,border=1px solid #000}[style="height:80px;background:#fff"]'

A few notes on attributes. Quotes are required on attributes (single or double but be consistent), but are not required in the style shortcut declaration. Quotes are not allowed to be nested inside of attributes (a single quote cannot be inside of a double quote and vice versa).

And of course, all of the above can be mixed together

'div#myId.class1.class2{color=#f90}[customAttr="true",@customAttr2="false"] div#child1 div#child2'

Usage

Appending at the end of a parent’s children:

DOMDom.append( 'div', yourParentNode );

Replacing the children of a parent:

DOMDom.replace( 'div', yourParentNode );

Unshifting (inserting at the beginning of a parent’s children):

DOMDom.unshift( 'div', yourParentNode );

Inserting before a certain integer index of a parent’s children:

DOMDom.insert( 'div', yourParentNode, 2 ); // must have at least 3 children, the index is 0 based, if index is null with unshift by default

Templates

Use <$var> to indicate a variable, in this example <$test>


// "Compile" the template
var str = DOMDom.compile( { 'div.test span': '#Test <$test>' } );

// Use your template in some context, notice the test variable being set.
for( var j = 0; j < 1000; j++ )
{
// knows we're using a compiled template since we're passing in variables as a third argument.
DOMDom.append( str, d, { test: j } );
}


Benchmarks

(If you have Firebug open, make sure it's not on the HTML tab, this will slow down the benchmark significantly)

Most of my work here has been inspired by the DomQuery and DomHelper classes written by JavaScript rock star Jack Slocum (the guy's initials are J.S. for God's sake), so I modeled my benchmark after his benchmark hosted on his website to test the DomHelper class. I'm running the same nodes he's testing on his website, so the results should be comparable. You can test my benchmark for DOMDom here. Here are some results, reporting the average of 3 results with the format of an uncompiled element first and the compiled template in square brackets.

DOMDom Results

Internet Explorer 6: 666 ms [328 ms]
Firefox 2.0.0.4: 1880 ms [666 ms]
Safari 3.0.2 [Windows]: 546 ms [151 ms]
Opera 9.21: 343 ms [140 ms]

Comparative numbers from Jack Slocum's DomHelper

Internet Explorer 6: 2458 ms [677 ms]
Firefox 2.0.0.4: 672 ms [458 ms]
Safari 3.0.2 [Windows]: 291 ms [119 ms]
Opera 9.21: 370 ms [166 ms]

The thing to take away from this is the question of why Satan is haunting my benchmarks? Two 666 averages? Anyway, DOMDom is quite a bit faster in the most popular browser, Internet Explorer, although I haven't tested it on IE7 yet. In Firefox, the opposite is true, with DomHelper taking the lead. Opera is comparable and Safari is faster in DomHelper as well. You can run your own tests using the links above.

Dependencies

This library was built to work with Yahoo User Interface (YUI), but could be trivially ported to another library by changing the function dependencies listed in the ADAPTER variable in the code.

var ADAPTER = {
	setStyle: YAHOO.util.Dom.setStyle,
	addClass: YAHOO.util.Dom.addClass,
	isString: YAHOO.lang.isString,
	isArray: YAHOO.lang.isArray,
	isNumber: YAHOO.lang.isNumber,
	isObject: YAHOO.lang.isObject,
	get: YAHOO.util.Dom.get
}; // to port, change these references

If you're still reading this encyclopedia, here are some links:

• DOWNLOAD DOMDom
• DOWNLOAD DOMDom Minimized with JSMIN (10KB)
• DOWNLOAD DOMDom Minimized with Packer (6KB)
• See the benchmark
• See the test file with a bunch of examples of syntax

-dom suffix denoting condition or state, as in freedom, wisdom, or DOMDom

Update: changed the variable syntax to allow variables inside of nodes (not just text).

Did you take your contacts out last night and you can’t see the time on your alarm clock from all the way across the room?

I’m here to calm your fears. Enter ALARMD, the Internet Alarm Clock. Wake up to any Youtube video (that allows embedding), a last.fm user stream or tag, or any mp3 hosted online. There are a few defaults in there, but you can add and modify your own.

Features:

• Supports multiple alarms (ALT+R to add an alarm or use the Add Alarm button).
• Options for 24 Hour (Military) time and Seconds display
• Supports MP3 (hosted online), YouTube videos (that allow embedding), and last.fm user or tag streams.
• Key Mash Mode to kill the alarm (hit five random keys in one second)
• Time Font Size customization (automatically size to the width of the window using the Max option)
• Typical alarm clock colors: Red, Green, or Blue
• Alarm Toggle based on the Day of the Week
• Test button to make sure your speaker volume is set correctly.
• Sleep Mode button to get rid of the extra GUI while you don’t need it.
• Save all of your settings, URL’s, and alarms locally in a cookie (you don’t need yet another account to use this)

Things to think about:

• Power Settings – disable your screen saver, or any sort of automatic suspend or sleep setting. In my testing, having your monitor go into power save mode is acceptable, and the alarms will still sound (but you might want to test this yourself and leave a comment with your result).
• You might not want to use with a CRT, for fear of burn in.
• Personally, I like to use this in Opera, just because their default full screen mode (F11) doesn’t have toolbars or a status bar. But you can use the Fuller Screen Firefox plug-in to soup up your Firefox for similar functionality.
• Word of warning, the window must have focus to autoplay YouTube videos.
• Make sure your local time on your computer is correct, especially if you are traveling between time zones. It doesn’t do any server side validation on the time (yet?).

Possible Future Improvements:

• Countdown mode, displays amount of time until next alarm in place of the clock (good for timed presentations, where you want to see how much time is left before you have to quit).
• Google Gears integration for offline mode (if your internet goes out during the night)
• Support customizing source URL’s on a per alarm basis.
• Support days of the week toggle on a per alarm basis.
• Support user specified color customization.
• A crescendo alarm MP3 that increases in volume for a more peaceful wake up experience.
• An alarm MP3 with especially violent noises for heavy sleepers.
• An alarm MP3 of my mom’s voice to get that nice feeling of childhood back.

This internet application was built using the Yahoo UI Libraries (YUI) and Jack Slocum’s Ext DomQuery class. It is written entirely without using any server side programming languages, and therefore can be saved to your local machine. Not that anyone might want to use the Internet Alarm Clock, but if you do, I declare it officially released under the BSD license. Just don’t forget to cite the source when you redistribute.

Update: added a couple more things to think about.

Recently, I’ve become interested in client side automated testing tools. When I found the Selenium plug-in for Firefox, I was blown away. I can record actions in my browser and play them back! No more manual testing of JavaScript code!

Researching a little bit more about automated testing tools led to the discovery of a metric called ‘Code Coverage’, a statistic that gives you a percentage of how much of your code executed during a certain period of time (usually while your automated test was executing).

Of course, I immediately thought of Joe Hewitt’s Firebug extension for Firefox, which includes a feature for JavaScript Profiling. The Profile feature of Firebug was similar to a Function Entry Code Coverage report, so I decided to modify the feature and release an add-on for Firefox that showed (at a file level) a list of which functions executed and which functions did not.

So, now, to test my JavaScript code coverage, I will write automated tests using the Selenium IDE plug-in for Firefox, hit the Code Coverage button in Firebug, and try to get my Code Coverage statistics in the upper 90%’s.

Screenshot Example of running the tool at yahoo.com

Download FirebugCodeCoverage-0.1.xpi.

Requirements (obviously)

• Mozilla Firefox
• Firebug Extension for Mozilla Firefox

Limitations:

• Does not include statistics on anonymous functions.
• Is limited to function (entry) code coverage, does not include other forms such as exit, statement, condition, or path code coverage. (Description: Wikipedia)
• Is my first Firefox add-on, so there was a learning curve involved.

Future Improvements:

• Automated integration with Selenium IDE (one button to run tests and do code coverage)
• Better display of results, instead of a big kludge of function names
• Additional types of coverage, depending on what options are available from jsdIDebuggerService

Update: After many requests and much self deliberation, I have decided not to update the plugin to work with newer versions of Firefox. Code Coverage doesn’t belong in the browser, it’s just the wrong place in the tool chain to have something like this. Code Coverage results need to be exportable, and the utility must be executable from the command line to use with unit tests and continuous integration.