Zach’s ugly mug (his face) Zach Leatherman

ALARMd 2 Beta, with Google Calendar Integration

April 06, 2008

Take a look: ALARMd 2 Beta

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.


< Newer
Rethinking JavaScript Grids and DataTables
Older >
20000 Leagues Under the API: YouTube JavaScript

Zach Leatherman IndieWeb Avatar for https://zachleat.com/is a builder for the web at IndieWeb Avatar for https://cloudcannon.com/CloudCannon. He is the creator and maintainer of IndieWeb Avatar for https://www.11ty.devEleventy (11ty), an award-winning open source site generator. At one point he became entirely too fixated on web fonts. He has given 79 talks in nine different countries at events like Beyond Tellerrand, Smashing Conference, Jamstack Conf, CSSConf, and The White House. Formerly part of Netlify, Filament Group, NEJS CONF, and NebraskaJS. Learn more about Zach »

12 Comments
  1. Jered Disqus

    10 Apr 2008
    IE Bug: The "Naked" checkbox doesn't work at all. Clicking the actual word works, but the checkbox is marked when not in Naked mode and is unchecked when in Naked mode.Also, cool stuff, man! Now I can Rick Roll myself every morning. There's no better way to start the day!
  2. Zach Leatherman Disqus

    11 Apr 2008
    Hey Jered.Thanks for the bug report. So, the change event doesn't fire all the time in IE when the actual checkbox is clicked? Turns out if you put a click handler on the actual checkbox, the click event for the checkbox fires even when you click on the label. Useful information for the future, I suppose.Anyway, I fixed it up real nice. I also fixed a minor display bug that put the options button in the middle of the screen on IE if you didn't have any alarms.Now I gotta work on my YSlow score for this thing :P
  3. Zach Leatherman Disqus

    11 Apr 2008
    Log:Outstanding bug in IE6: CSS will stay attached to elements on the page even when the stylesheet has been removed. (Switching skins on the page)
  4. Bruce M. Disqus

    28 Jan 2009
    I was attempting to use the ALARMd program with Google Calender and after setting the Calender to be made public and pasting the URL, I got this message.."Google GDATA Error: Request via script load timed out. Possible causes: feed URL is incorrect; feed requires authentication" Just wanted to know what action is required to stop the script load from timing out.
  5. Zach Leatherman Disqus

    29 Jan 2009
    Well, you're welcome to e-mail me the Calendar URL and I'll test it out, but otherwise I'd guess the error message that Google is giving you is the best clue. Either you've fat-fingered an extra character in the URL, or you haven't correctly setup permissions.Did you follow the steps shown in the Help link after you've selected "Google Calendar" in the Alarm Types (from the Options button, Alarm Dates and Times tab)?
  6. Alex Disqus

    01 Feb 2009
    Hey Zach,All I need now is a timer for when i goto bed that plays whatever last.fm or youtube stuff i set for 30 - 40 mins depending on my mood.. so i can fall asleep too :) possibly with fading of volume .. and raising of volume when the alarm in the morning goes off..
    1. Zach Leatherman Disqus

      01 Feb 2009
      Check out the Google Code page, you can be the first to log an enhancement request, or submit code back to the project!http://code.google.com/p/al...
  7. Kyle Disqus

    02 Nov 2009
    Your alarm clock is great only one crucial thing missing....... daylight savings time adjust....
  8. dld Disqus

    19 Jun 2010
  9. TomNCatz Disqus

    22 Nov 2010
    so this is an update/ re-iteration of Bruce M.'s issue. the problem is that not everyone's google calendar ends with the same @ extension, for example mine is simply @gmail.com instead of @group.calander.google.com so when you add the extension internally it works for some people and not for others...you might want to switch to people just putting in the extension themselves or giving the option to override the default extension at least. love the alarm clock though, I was using your old one to get my lazy butt out of bed, but was having trouble with the internet connection bit. now that you fixed that i'm looking forward to being able to use it again!
  10. Josh Disqus

    06 Dec 2011
    URL launch doesn't seem to work. Can get it to launch correctly when pressing the test button but when I set the alarm, on reaching the time it logs the alarm as having been triggered but it fails to launch or do anything. If you need to know am running Safari.
  11. Zach Leatherman Disqus

    07 Dec 2011
Shamelessly plug your related post

These are webmentions via the IndieWeb and webmention.io.

Sharing on social media?

This is what will show up when you share this post on Social Media:

How did you do this? I automated my Open Graph images. (Peer behind the curtain at the test page)