What’s sexier is an easy way to work with these data attributes using jQuery.

Sure, you could do something like:

jQuery('#pancakes').attr('data-type');

But who wants to type the “data-” prefix over and over again?

So, here’s a quick little plugin I whipped up. It’s probably terrible when it comes to jQuery plugin standards (I do WordPress plugins, not jQuery), but it works. It works as a getter and setter.

Bonus: If you’re using jQuery 1.4.1+, the plugin supports well-formed JSON objects as data attribute values.

/*
* Inline Data - get and set HTML5 data attributes! Yay!
*
* Copyright (c) 2010 Mohammad Jangda (http://digitalize.ca), Vortex Mobile (http://www.vortexmobile.ca)
*
* Licensed under the MIT license:
* http://www.opensource.org/licenses/mit-license.php
*
*/

(function($) {
    $.fn.inlinedata = function(name, value) {

        var prefix = 'data-';
        var attr = prefix + name;
        var values = []

        this.each(function(i) {
            var attrValue;

            // Setting values
            if(value) {
                // If an array is passed, the array index should correspond to the collection index
                if($.isArray(value)) {
                    // Check, check, check the index. Because out of bounds exceptions are the devil!
                    if(typeof(value[i]) !== 'undefined')
                        attrValue = value[i];
                    else
                        attrValue = '';
                } else {
                    // Not an array, so we're just giving all the elements the same value
                    attrValue = value;
                }
                this.setAttribute(attr, attrValue);
            } else {
                // Getting values
                attrValue = this.getAttribute(attr);

                try {
                    // try parsing as JSON
                    attrValue = jQuery.parseJSON(attrValue);
                } catch(e) { }
            }
            attrValue = (attrValue) ? attrValue : '';
            values.push(attrValue);
        });

        if(values.length == 1)
            return values[0]

        return values;
    }
})(jQuery);

Usage is simple:

And then you spend hours trying to figure out the problem to no avail, leaving you scratching that magnificent head of yours with luscious, flowing hair. You just can’t replicate the problem. But then, after hours and days of staring intently at the screen, you find it. It’s a rogue console.log call that you forgot to comment out. And then you spend the remainder of the week chastising yourself for being stupid.

It happens. (To be fair, it’s not your fault that your users don’t have Firebug or IE Developer Tools installed. Blame it on Mozilla/Microsoft.)

But there’s an easy solution. Just copy the following javascript somewhere in your project, and rest easy:

if(typeof(console) === 'undefined') {
    var console = {}
    console.log = console.error = console.info = console.debug = console.warn = console.trace = console.dir = console.dirxml = console.group = console.groupEnd = console.time = console.timeEnd = console.assert = console.profile = function() {};
}

Code is also on the gisthub.

HTML Emails replaces the standard WordPress emails with spruced up versions that simply look good. Sample included below:

Currently, only comment notifications are HTML-ized (new comment and comment moderation emails), but I’m hoping to add all other email notifications soon (and yes, that includes Multi-Site emails coming with WordPress 3.0).

While I have only tested the emails on Gmail, Gmail on Android, and Outlook, they should work on most email clients (including clients without HTML support). If you’re using a client other than the 3 I’ve listed, I would appreciate an email with info on whether the email looks like it should and works correctly.

Don’t like my design chops? (Go ahead, admit it!) I’ve got you covered! HTML emails makes it easy to fully customize the look and feel of emails sent by WordPress. See the Other Notes section on the Plugin page for details on how to customize emails. More detailed walkthroughs to come.

Grab it from the Plugin Directory or install directly from WordPress (Plugins > Add New, search for HTML Emails).

HTML emails from WordPress? Yes, please!

Coming very, very soon!

If you like Glee, you’ll like this. If you like image processing using PHP, you’ll like this even more.

Using PHP and the GD image library*, it’s pretty easy to create a static, image-based countdown clock, which is useful for situations where javascript cannot be used (think WordPress.com/Blogger). A new image is automatically generated server-side for every minute (assuming a request is made for the clock for that minute), and all images are cached to avoid killing the server processor. Check it out in action on Gleeks United or after the jump.

Don’t have code yet, but I’ll post it when I get a chance.

Vertical version:

Powered by Gleeks United

Horizontal version:

Powered by Gleeks United

* Yes, ImageMagick could work too, but it’s too much of a pain to install.

Now, the only downside to the tap event, is that it doesn’t work on anything other than Mobile Safari. So for iPhones, you can use tap event, but non-iPhones, you have to use click event. You could just make things easy on yourself and use clicks across the board, but I can tell you that the tap event immensely increases the performance and responsivity for jQTouch apps on iPhones. Good news is, there’s an easy way to work with both.

The code below was inspired by Samuel’s message on the jQTouch Google Group.

<script type="text/javascript">
var userAgent = navigator.userAgent.toLowerCase();
var isiPhone = (userAgent.indexOf('iphone') != -1 || userAgent.indexOf('ipod') != -1) ? true : false;
clickEvent = isiPhone ? 'tap' : 'click';
</script>

You can now easily bind your events as follows:

<a href="#link" id="mylink">Click or Tap me!</a>
<script type="text/javascript">
$('#mylink').bind(clickEvent, function() {
    e.preventDefault();
    alert('Yay! You just ' + clickEvent + 'ed me!');
});
</script>

Note: in my testing, the tap event doesn’t register too well on the iPod Touch. If that seems to be the case, I’d recommend defaulting iPod Touches to use clicks instead. However, since the iPod Touch user agent includes the term “iPhone”, we have to un-include it from our tap list:

<script type="text/javascript">
var userAgent = navigator.userAgent.toLowerCase();
var isiPhone = (userAgent.indexOf('iphone') != -1) ? true : false;
if(userAgent.indexOf('ipod') != -1) isiPhone = false; // turn off taps for iPod Touches
clickEvent = isiPhone ? 'tap' : 'click';
</script>

More details to come about fun things you can do with it.

Zen: distraction-free writing for WordPress.

Here’s a sneak peek at a plugin I’ve been working on. If you blog using WordPress and you’re a fan of WriteRoom, OmmWriter, or similar tools that help you focus on your words instead of the tools you’re using, then this plugin will soon make your wildest dreams come true (and give you a simple clean environment to write to your heart’s content)! It looks like crap right now, but I’m working on polishing the look and adding some cool features (themes, backgrounds, etc.), and hopefully release something soon.

If there are any features you’d like to see, add a comment or contact moi.

Zen: coming soon to anow available in a WordPress Plugin Directory near you!