Tardate 2016

Thanks to nfarina for a patch to improve compatibility with older IE versions.. jQuery UI AddToCal widget is stepped to 0.1.1 and now listed in the jQuery plugin store.

To recap .. use AddToCal if you want to offer your website visitors the ability to add any events you list or present on your site to their own calendar. It supports Google Calendar, Microsoft Live Calendar, Yahoo! Calendar, 30boxes, any iCal or vCalendar compatible desktop application (and you can extend it to support any special calendar software you might be dealing with).

See my previous post that describes how to use it in a bit more detail..

Blogarhythm: Birthday

If you deal with any kind of event-based information on your websites, you would probably really like an easy way of letting users add it to their calendar.

Unlike link sharing—where there are some great drop-in solutions like AddToAny and AddThis—calendar integration unfortunately remains a bit rough around the edges. Varying standards with varying degrees of adoption; consideration for desktop and web-based calendar clients; and the complicating factor of timezones make it all a bit harder than it really should be.

AddToCal is a jQuery UI Widget that I put together to help me solve the problem and do things like you see in the screen clip on the right. It's freely shared and available on github.

Using it on a web page is as simple as including the js links, binding it to the DOM elements or classes on your page that contain "events", and provide an implementation of the getEventDetails method that knows how to extract the event details from your particular DOM structure.

The example also demonstrates how to use AddToCal in conjunction with the hCalendar microformat for event notation (try it out here).

I've currently included support for the web-based calendars by Google, Yahoo!, and Microsoft Live. If you can serve iCal or vCalendar format event links then AddToCal also links to 30boxes and iCal/vCalendar desktop software—including the iPad Calendar application;-)

Serving iCal and vCalendar links

What about iCal and vCalendar formats? These are complicated a little because we need a URL to the respective iCal and vCalendar format resources .. so we need to be able to serve them before AddToCal can link to them.

Thankfully, this can be relatively trivial once you get a handle on the file formats. Here's an example of how to implement with Ruby on Rails.

Say we have an Events controller and associated Event model that represents an activity people may like to add to their calendars. A simple iCal implementation with ERB means creating a views/events/show.ics.erb along these lines:

BEGIN:VCALENDAR
PRODID:-//AddToCal Example//EN
VERSION:2.0
METHOD:PUBLISH
BEGIN:VEVENT
DTSTART:<%= @event.start_time.rfc3339 %>
DTEND:<%= @event.end_time.rfc3339 %>
LOCATION:<%= event_url( @event ) %>
SEQUENCE:0
UID:
DTSTAMP:<%= Time.zone.now.rfc3339 %>
DESCRIPTION:<%= event_url( @event ) %>\n<%= @event.full_title %>
SUMMARY:<%= @event.synopsis %>
PRIORITY:5
CLASS:PUBLIC
END:VEVENT
END:VCALENDAR

Sharp eyes will note the unusual rfc3339 helper method I've provided to make it easy to get date/times in RFC3339 format as required by the iCal and vCal standards. You could extend Time::DATE_FORMATS, but here I've simply added the method to ActiveSupport::TimeWithZone

class ActiveSupport::TimeWithZone
 def rfc3339
 utc.strftime("%Y%m%dT%H%M%SZ")
 end
end

To support vCalendar, we also implement views/events/show.vcs.erb

BEGIN:VCALENDAR
PRODID:-//AddToCal Example//EN
VERSION:1.0
BEGIN:VEVENT
SUMMARY:<%= @event.full_title %>
PRIORITY:0
CATEGORIES:SHOW
CLASS:PUBLIC
DTSTART:<%= @event.start_time.rfc3339 %>
DTEND:<%= @event.end_time.rfc3339 %>
URL:<%= event_url( @event ) %>
DESCRIPTION;ENCODING=QUOTED-PRINTABLE:<%= event_url( @event ) %> =0A<%= @event.synopsis %>
LOCATION;ENCODING=QUOTED-PRINTABLE:<%= event_url( @event ) %>
END:VEVENT
END:VCALENDAR

Depending on your Rails version and web server, you may have to teach it about these MIME types e.g. add to config/initializers/mime_types.rb:

Mime::Type.register "application/hbs-vcs, text/calendar, text/x-vcalendar", :vcs

Blogarhythm: Remember - Jimi Hendrix

Many server-side languages (e.g. Ruby and Python JSON encoders) and encoding formats like ATOM send dates in RFC 3339 / ISO 8601 format. The standard Javascript Date object cannot parse these values, which can make client-side scripting involving dates a pain.

There have been snippets of code floating around the net for ages, and various libraries that include necessary support. rfc3339date.js is my attempt at rolling the best into an standalone, unobtrusive, and open-sourced Date extension that plays well with other libraries that also extend the Date class.

It lets you do things like:

var d = Date.parse( "2010-07-20T15:00:00.333Z" );

d.toRFC3339UTCString();
=> "2010-07-20T15:00:00.333Z"

d.toRFC3339UTCString(true);
=> "20100720T150000.333Z"

d.toRFC3339LocaleString(true);
=> "20100720T230000.333+0800" // assuming current timezone is GMT+8

The readme in the project repository on github has more information about the range of date formats supported and other methods available.

Blogarhythm: Too Many Times - Mental as Anything

Any+Time was one of the more interesting options I covered in my Quick Review of jQuery Date/Time Widgets the other day.

Any+Time had a lot more functionality than I got to investigate at the time, and there were some specific features I wanted to checkout in more detail - in particular timezone handling - so I built another little demo called kalinka.

kalinka is a simple tool to construct Google Calendar Event URLs without needing to publish an event in your own calendar. You can then put the link in an email or a website. Other people can then use the link to create the event in their own Google Calendar.

kalinka mimics the basic functionality of the Google Calendar Event Publisher, except that it also demonstrates using Any+Time to offer specific control of the timezone.

Try out kalinka here, and feel free to pillage the scripts.



Blogarhythm for this post: kalinka malinka - The Red Army Choir (a.k.a. Alexandrov Ensemble or Дважды краснознаменный академический ансамбль песни и пляски Российской армии имени А. В. Александрова)

On a jQuery binge today and saw a tweet fly by with this excellent overview by Marc Grabanski (via @elijahmanor)


Motivated me to finally toss out my old jQuery wallpaper. There's a great selection over at devcheatsheet (I'm going with Future Colors for now).

Update (via @mahemoff): Rebecca Murphey has just released the "jQuery Fundamentals" Open-Source jQuery Training Curriculum under Creative Commons. Some kind of awesome!

Blogarhythm for this post: Run with the $ - Lita Ford

LOLs: ..and some dumb script at amazon translated $ to dollar, when she actually sings "money";-)

Once again I find myself browsing around for a better javascript calendar tool. I'm particularly looking for jQuery support, the ability to handle both date and time entry, and — being post-iPhone/Android/iPad 2010 — I'm concerned about making sure it is finger friendly (i.e. it works on a touch screen).

The table below summarises my findings at this point (see here for my full survey results). The ranking is just my personal view, and this list is certainly not all inclusive (if you know of other/better options I'd be really interested to hear from you). Each tool links to a test page where I've tried to cut everything back to the bare essentials needed to run a demo. Feel free to pinch the source if it helps.

Conclusions? There are some reasonably effective tools here for quickly dropping in date and time editing support, but at the end of the day I'm not sure that Google haven't already got it right with the simple combo-box time selectors in Google Calendar (is there a widget that includes something similar? Haven't found it yet).

The Field

* indicates the latest versions that I have been able to successfully test

jQuery Datepicker [Rank: B]

• jQuery*: 1.4.2


• jQuery UI*: 1.8.2,1.7.3


• Dates: Yes Times: No


• Finger Friendly:Yes


• Comments:The standard widget

Any+Time [Rank: A]

• jQuery*: 1.4.2


• jQuery UI*: n/a


• Dates: Yes Times: Yes


• Finger Friendly:Yes


• Comments: Extensively customisable and scriptable. Supports jQuery UI themes. Also works with prototype instead of jQuery. Cannot edit the bound field while the widget is active [Update 18-Jun-2010: fixed incorrect statement that jQuery themes not supported]

Martin Milesich's Timepicker [Rank: A-]

• jQuery*: 1.4.2, 1.3.2


• jQuery UI*: 1.8.2, 1.7.2


• Dates: Yes Times: Yes


• Finger Friendly: Cannot use the time slider with finger, but you can select a point on the slider with finger OK.


• Comments: Generally neat extension of the standard datepicker. Supports alternate fields to split out date/time component for easier processing.

Trent Richardson's Timepicker [Rank: B+]

• jQuery*: 1.4.2


• jQuery UI*: 1.8.2


• Dates: Yes Times: Yes


• Finger Friendly: Cannot use the time slider with finger. You can select a point on the slider with finger, but there is a minor bug meaning you need to select twice. You can also edit the bound field while the widget is active.


• Comments: Generally a very neat extension of the standard datepicker. Doesn't support all features however e.g. alternate fields

W3VISIONS Date-Time-Picker [Rank: B-]

• jQuery*: 1.3.2


• jQuery UI*: n/a


• Dates: Yes Times: Yes


• Finger Friendly: Yes. Slider button doesn't work with the finger, but can select positions on the slider OK


• Comments: The UI is a bit klunky and no themes support so I didn't bother with a demo page for this

timepickr [Rank: C]

• jQuery*: 1.4.2


• jQuery UI*: 1.7.3


• Dates: NoTimes: Yes


• Finger Friendly: No fingers, no play (unless the device has a trackball you can fallback on)


• Comments: A different take on time entry. Maybe too different.

Additional Resources

• jQuery Home


• Datejs extends javascript Date parsing capabilities and adds nice syntactic sugar


• Date Format extends javascript Date formating capabilities

Alternative Frameworks

jQuery is not the only game in town of course. Here are some others...

• Dojo Date Controls and
  TimeSpinner


• MooTools Datepicker


• YUI Calendar, timepicker


• Calendar Date Select Prototype-based Rails plugin


• In Railscast 213 Ryan Bates provides some great coverage of date/calendar plugins with Rails

Blogarhythm for this post: Time - Pink Floyd

I announced jTab back in July, and there have been some nice improvements over the past month which I just tagged as a "1.1" release.

jTab is a javascript-based library that allows you to easily render arbitrary guitar chord and tabulature (tab) notation on the web. Automatically. It is open source (available on github).

I've also established a mailing list for jTab. All are welcome to join in to discuss internal development issues, usage, and ideas for enhancement.


Some of the key new features:

1. All chords can be represented in any position on the fretboard e.g. Cm7 Cm7:3 Cm7:6


2. Now allows shorthand tab entry of 6-string chords e.g. X02220 (A chord at nut), 8.10.10.9.8.8 (C chord at the 8th fret)


3. jTab diagrams now inherit foreground and background color of the enclosing HTML element


4. When entering single-string tab, can reference strings by number (1-6) or by note in standard tuning (EAGDBe)


5. The chord library with fingerings has been extended to cover pretty much all common - and uncommon - chord variants (m, 6, m6, 69, 7, m7, maj7, 7b5, 7#5, m7b5, 7b9, 9, m9, maj9, add9, 13, sus2, sus4, dim, dim7, aug).


6. It has been integrated with TiddlyWiki: jTabTwiki combines the guitar chord and tab notation power of jTab with the very popular TiddlyWiki single-file wiki software. Together, they allow you to instantly setup a personal guitar tab wiki/notebook. No kidding. And it's free.

So this weekend I've dressed up jTab as a little web application to help you learn chord fingerings for guitar...

Introducing the ChordMaster 2000 ;-)




OK, so maybe I sexed up the design and UI a little too much for such a simple task, but it was fun to see how far I could go with javascript and SVG (and no flash or silverlight).

It was also a proof point for jTab - the javascript library I released last week that renders arbitrary guitar chord and tab using SVG. Happily, it worked fine without a tweak - just some extension methods that are specific to the ChordMaster application (like getting an array of all chords that are defined as "intermediate" level).

PS: big thanks to @jasonong who's jumped in and already made some great contributions to the jTab project on github -- It's amazing to see github rock as a "social coding" platform - create a public project one day, have changes to merge back the next. Trivial to do with git, and the great visualisation of the project revision/branch history makes merging so easy to understand.

Guitar tab (notation) is all over the internet, but it is usually in either a fixed/non-interactive form, or painstaking ASCII format.

I've always wanted a better way, and two things I've looked at recently inspired me to think it might be possible: Dmitry Baranovskiy's fantastic work on the Raphaël SVG library, and Alex Gorbatchev's syntaxhighlighter.

So now I can introduce the result of my latest weekend project:

jTab - newly minted and ready to rock and roll!

See the project home page at http://jtab.tardate.com for more examples and information about how you can use it too. jTab is open source, with the master source code repository on github .

What does it do?

jTab is a javascript-based library that allows you to easily render arbitrary guitar chord and tabulature (tab) notation on the web. It handles implicit and automatic rendering of any page elements given the special class name 'jtab'. It can also be scripted for more sophisticated or interactive effects.

Bottom line: jTab turns this..

<div class="jtab">Bm 3ドル 4 4h5p3h4 5 2ドル 3 5 7 7h8p7 5/7 | A 4ドル 7 9 3ドル 7 6 5ドル 9 4ドル 7h9 7 5ドル 97円 5/7 | </div>

..into this:


Grab it, use it, help me improve it, or just let me what you think...

I've had a question up on stackoverflow recently in an attempt to get a nice solution for adding a glyph with CSS to indicate a wrapped line (e.g. in a command line sample).

With a few good suggestions, I had a reasonable solution but it still required a bit of manual markup to prepare the example. Then I saw Pranav Prakash's post about syntaxhighlighter by Alex Gorbatchev.

With a few tweaks (see the stackoverflow question for the details), I'm now able to combine the best of both worlds: great formatting and syntax highlighting with syntaxhighlighter and also line continuation glyphs. Here's an example of the result:

public class HelloWorld {

 public static void main (String[] args)

 {

 System.out.println("Hello World! But that's not all I have to say. This line is going to go on for a very long time and I'd like to see it wrapped in the display. Note that the line styling clearly indicates a continuation.");

 }

}

NB: if you have javascript disabled, or reading this through a newsfeed (or if I hit a bug) you may not see the full effect. Here's a screenshot of what should be appearing above:


Now I just need to go back and update the code formatting in all my old posts. Basket!

Choon Keat recently posted a great little web tool to help simple scheduling across timezones.

Makes it really easy to have a quick look at how times line-up around the world. For example, I've saved this link to see Vancouver (my sister), Melbourne/Sydney (most of the rest of the family) and Singapore (me) all in one go.

It's done in pure Javascript, and is a good example of jQuery in action if you care to look;-)

See also: timeanddate.com for encyclopaedic coverage of everything related to times and dates.

Postscript: I've given up all ambitions of hacking NLB now that I have discovered Bookjetty - a bookshelf site with library integration. Check it out!

OK, so this post won't mean diddly unless you live in Singapore, or have a local library using the CARLweb system.

But say you are browsing one of the book retailers on the web - like amazon - and you want to know if the book is available in your local library?

Here's a little trick to help you find that out in one-click (not patented;-). It is inspired by some posts over at The Box Factory.

Below is a link that you save to your bookmarks (Firefox)/favorites (IE). Once saved, when you are on a book page at amazon etc, just select the bookmark/favorite and it will pop-up a window to Singapore's National Library Board catalogue system and try and find the book in the library for you.

<-- Bookmark/Favorite this!

Simple steps: How to Use It

1. Right-click on the link above, and select Bookmark This Link.. (Firefox) or Add to Favorites.. (IE)


2. Go thru the steps to save the link. you may get a warning about "javascript:" links not being recognised. Ignore/proceed .. trust me!


3. Check you Bookmarks/Favourites menu - should now find NLB Book Lookup in the list.


4. Navigate over to a book retailer and find a book (try the Ruby Cookbook (O'Reilly) at Amazon for example)


5. While viewing the book page, select NLB Book Lookup from your Bookmarks/Favorites menu


6. A new window will open to display the NLB Library Catalogue record (if there is one)

Grumpy Stuff - But Looking Forward

The NLB is still using CARLweb, which is an ancient product from TLC.

Once of the really nasty features of this system is that it uses session tracking in the URL query string of your request. Not only does this prevent deep-linking (so you can't easily email a catalogue link to a friend for example), it makes the catalogue un-indexable by web search engines like google.

It also means that the Bookmark/Favorite link I gave you above has to go in the front-door, and creates a new session each request. So unfortunately that means that if you use this a few times in quick succession, you may get a maximum sessions exceeded error. Sorry, for now you'll just have to close the windows and wait a while for sessions to expire.

Yes, CARLweb sux. It truely belongs to an earlier era of computing!

The good news: I've heard whispers that the NLB have a project running to upgrade their catalogue search facilities. Hopefully we'll soon have a much better service to use. My top wishes:

• Support for deep-linking. No user/session-related information in URLs.


• A nice robots.txt that allows the search engines to fully index the catalogue


• Flexible RSS feeds - as well as the usual "latest acquisitions" etc, a flexible and published approach to parameterising the feed e.g. by library location, by subject and any other search criteria. Or another way to express this would be "get any search result as RSS"


• Getting ambitious now ... a published Web Service/REST API


• A mashup developer's guide - encourage people in Singapore to exploit the NLB catalogue! A competition even?

I've been working a bit with AJAX, and that soon prompted me to brush up on my Javascript. In the past I'd never used it to do more than a little validation or form "glue". Now revisiting the language from a true programmer's perspective, I recognise that it is pretty capable!

Speak Good Singlish! is a sample that gives regular expression and multi-dimensional array handling a good workout. It's a Singlish translator implemented in Javascript. I can't remember what sparked the idea to use this as an example, but somehow I got thinking back to ole "Jive" and "Valley girl" translators that have been floating around the net for many years.

The RegExp object usage in the sample is fairly standard, but the array handling is not.

I'm using a 2D array for the "lexicon" - basically a list of regex matches and replacements. For example the following fragment. You'll note that the second dimension can contain either a simple string or an array (as the replacement element):

var slexicon = [
[ '\\benglish\\b', 'Singlish' ] ,
[ '\\bdo\\b', [ 'do', 'do until sian', 'do sure can one' ] ]
];

There's a core routine that iterates through the array and performs the substitutions. Where an array substitution is present, it uses a funtion inline to pick a random element from the array to perform the substitution:

// do the translation
for (var i = 0; i < slexicon.length ; i++) {
var slexiconRow = slexicon[i];
var theRegex = new RegExp( slexiconRow[0], "gim" );
var theReplacement = slexiconRow[1];
if (theReplacement instanceof Array ) {
dataOut = dataOut.replace( theRegex, function (match) {return randomElement(theReplacement)} );
} else {
dataOut = dataOut.replace( theRegex, theReplacement );
}
}

The randomElement function is simplicity itself:

// returns random element of an array
var randomElement = new Function("x", "return x[Math.floor(Math.random() * (x.length))]");

The HTML page contains the whole script inline, so it is easy to review in-place with a "view source". Enjoy!