Posts tagged "html5"

There's no shortage of blog posts which — like this one — provide an introduction to Socket.IO. Many, though, were written prior to the release of 0.7, which ushered in significant API changes. Here I'll provide examples of server- and client-side code using APIs provided by the current version (0.7.4 at time of writing).

This post has been a long time coming.

Reminder message, dated 18 January 2010

It's unacceptable for any website or web application to output dates and times using an arbitrary time zone. Displaying dates and times in UTC/GMT is only slightly better: dates cannot be relied upon, and users must perform mental gymnastics in order to localize date–time combos.

Early this year I wrote a post titled Auto-populating input fields with Prototype. Looking at the code now, I realize that it's not very pretty. I'm rewriting this site's JavaScript in MooTools, and the new code is quite a bit more elegant.

// provide input hints
window.addEvent('domready', function () {
    $$('input[placeholder]').addEvents({
        focus: function () {
            if (this.hasClass('placeholder')) {
                this.removeClass('placeholder').set('value', '');
            }
        },
        blur: function () {
            if (this.get('value') === '') {
                this.addClass('placeholder').set('value', this.get('placeholder'));
            }
        }
    }).fireEvent('blur');
});

I really appreciate the fact that MooTools provides addEvents in addition to addEvent. As a result, the code above is clearer than a well-written Prototype equivalent.

Yesterday I wrote a simple class which auto-populates input fields, and thought it worth sharing. I was originally inspired to write this code by Roger Johansson's post titled Autopopulating text input fields with JavaScript. While I approached the problem from a slightly different angle, I made sure to avoid the pitfalls Roger mentions.

I've begun retrofitting this site with HTML5 elements. I'm thoroughly enjoying the process (I love meaningful markup).

One of the first HTML5 elements I've introduced is the time element which, through its datetime attribute, provides a machine-readable version of dates and times.

<time datetime="2009-11-01T16:41:53+13:00">1 November 2009</time>

I wrote a function to generate the machine-readable dates and times for blog comments.

/**
 * echoes comment's date and time in format 2009-11-01T03:41:53+13:00
 */
function comment_datetime()
{
    $comment = get_comment($comment);
    $local = strtotime($comment->comment_date);
    $gmt = strtotime($comment->comment_date_gmt);
    $seconds = abs($local - $gmt);
    $hours = (int) ($seconds / 3600);
    $minutes = (int) (($seconds - $hours * 3600) / 60);
    $output = get_comment_time('Y-m-d\TH:i:s');

    if ($local == $gmt)
        $output .= 'Z';
    else
        $output .= ($local > $gmt ? '+' : '-')
                . str_pad($hours, 2, '0', STR_PAD_LEFT) . ':'
                . str_pad($minutes, 2, '0', STR_PAD_LEFT);

    echo $output;
}

While looping through comments in your WordPress theme, call the above function to print a valid datetime string.

<time datetime="<?php comment_datetime(); ?>">