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)

Technorati Tags: JavaScript

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.

Technorati Tags: JavaScript, Mootools, marquee

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.

Technorati Tags: alarmd

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

Single Node String with ID and Classes

Single Node String for a Form Element

Single Node String with Style Syntax

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

Multiple Node String: Linear (Parents with one Child)

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

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

Creating a node with CSS classes

Creating two nodes at the same level

Creating a node with two children

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)

Creating a node with attributes (the @ is optional)

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

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

Usage

Appending at the end of a parent's children:

Replacing the children of a parent:

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

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

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.

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

Technorati Tags: JavaScript, Yahoo, YUI, DOM, HTML Fragments, Jack Slocum, DomHelper

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.

Technorati Tags: YUI, DomQuery, alarm-clock, javascript

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

Technorati Tags: Firebug, Code Coverage, JavaScript

Click the image above to go to the example.

Notes on the example: The Tree structure is as follows:

• Primary
  • Secondary
    • Tertiary
      • Quaternary
        • Quinary
    • 2nd Tertiary (is a static element that doesn't hide)

So without further adieu or out of place french, what do we have? 3 out of 4 requirements and 1 of 2 luxury items.

• Handles any number of select elements in a linear or tree (luxury item) like structure.
• Child select elements are optional based on parent selection. Can hide entire div element or display a message stating no options are available.
• Compliant with the Reset button.
• Right now only loads from standard HTML markup (not yet from JavaScript or JSON or an XMLHTTPRequest)
• Only supports Select elements for now, in the future should be abstracted to support Checkbox Lists or any multiple option component.

Outstanding Bugs:

• Opera button doesn't reset properly with Reset Button
• Clicking off of the default and then back onto the default has the original selections downstream (but doesn't propagate more than one level)

Technorati Tags: JavaScript, Hierarchical Select, YUI

Are you programming a for loop? How do you know that the client will increment your integers through the loop correctly? That's why you need to call our Incrementer Web Service to increment your loop counter.

Sample Service Calls:
Increment 0: http://www.zachleat.com/Projects/SOA/index.php/incrementer/0
Increment 3920: http://www.zachleat.com/Projects/SOA/index.php/incrementer/3920
Increment 98: http://www.zachleat.com/Projects/SOA/index.php/incrementer/98

Are you programming an array that needs to be magically combined into a string? Do you think you can reliably count on Internet Explorer to perform the function in the same way as your Firefox's, or your Opera's, or even your (God Forbid) Safari's??? No, dare I say it, no.

But don't fear. We are here to comfort your pain, with a shot in the arm of standarditity. Welcome the String Concatenation Web Service.

Sample Service Call:
Concatenate string1 with string2 with string3: http://www.zachleat.com/Projects/SOA/index.php/concat/string1/string2/string3/

And finally, are you feeling lost in this sea of amorphous web technologies mixing and mashing together to form the gelatinous blob of money and media whores we know as Web 2.0? Don't worry, OMG SOA is here for you again to solve all of your identity crisis problems. Ask our Are you Web 2.0 Web Service with your URL and the magic 8 ball service will answer your question.

Sample Service Call:
Is www.zachleat.com Web 2.0? http://www.zachleat.com/Projects/SOA/index.php/am-i-web-2.0/www.zachleat.com/

Technorati Tags: soa, soap, web 2.0

Update: apparently there is already a company called the Object Management Group with a website about SOA. Whoops?