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:

Berczy Park (in Toronto) rocks.

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.

All files in this repository are covered by the:

DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE
Version 2, December 2004

Copyright (C) 2004 Sam Hocevar

Everyone is permitted to copy and distribute verbatim or modified copies of this license document, and changing it is allowed as long as the name is changed.

DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION

0. You just DO WHAT THE FUCK YOU WANT TO.

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>

I’m excited to announce the release of Zen v1.0, a plugin for WordPress that brings the much beloved idea of distraction-free writing to the WordPress admin.

I provided a sneak peek of the plugin a few weeks ago, and after some fine tuning a lot of awesome changes, Zen is finally ready for prime-time.

If you can’t wait till the end of this post, download it directly from WordPress (under Plugins > Add New, search for “Zen”) or grab it from the WordPress Plugins Directory.

What is Zen?

In a nutshell, Zen is a distraction-free environment for WordPress.

If you’re a fan of WriteRoom, OmmWriter, or similar tools that help you focus on your words instead of the tools you’re using, this plugin will soon make your wildest dreams come true (and give you a simple clean environment within WordPress to write to your heart’s content)! While Zen does not replace the existing Edit Post/Page screen, it provides a layer on top that will help you focus more on the quality of your words and less on the distracting fine-tuning of minuscule details.

I’ve got a quick breakdown of the plugin and it’s features below.

Zen Mode

Zen adds a handy-dandy little button right above the publish module that toggles Zen mode (you can also use the keyboard shortcut listed below).

Zen mode includes a textboxes for the title and content, save and publish buttons below them, and a close button on the top left.

To leave Zen mode, click on the close button or use the keyboard shortcut below.

The content textbox is a basic textbox without the Visual and HTML editors. Initially, this was because of an issue with the HTML editor, but it’s become more of a conscious choice since it keeps with the whole mantra of distraction-free writing. If you think that it would be worthwhile to include the Visual and HTML editors, let me know, and I’ll consider it.

Yes, you can write in HTML in the textbox.

And yes, autosave still works in Zen mode, so you can rest assured that WordPress will chug away in the background to keep your writing safe as you work on that next great blog post.

Zen Settings

Settings for Zen are accessible via Users > Your Profile. At this point, you can specify whether Zen should automatically open when you go to Add or Edit a Post or Page and your preferred theme. I’m considering adding the option to include additional modules (Categories and Post Tags) in Zen mode as well.

Keyboard Shortcuts

Zen has simple keyboard shortcuts to help you get the most out of Zen:

z – enters Zen mode
q – exit Zen mode
t – switch theme

Note: the keyboard shortcuts do not work while you’re writing in one of the textboxes. This is something I’m hoping to change in a future release.

Themes

Zen comes prepackaged with 5 themes:

• Zen Light
• Zen Dark
• Zen Papyrus
• Zen Papyrus Lite
• Zen Terminal

You can specify which theme you prefer under Zen Settings and Zen will automatically open with that theme enabled. You can easily switch between themes while in Zen mode using the “t” key. If you switch between themes, Zen will autosave your preference and load that next time you go into Zen mode.

What Now?

I’d love to add more themes to Zen, and have a few potentials lined up that I’ll release over the coming weeks. However, I’d really, love to see your theme ideas implemented as well. If you’d like to contribute a theme or have an idea for a theme, you should contact me.

If you have any features you’d like to see in Zen or found bugs that are driving you insane, you should contact me

Thanks

Thanks go out to:

• ifranky, Habari, WriteRoom, and OmmWriter for inspiring Zen.
• Suzanne Gardner for providing beta feedback.
• Andrew Spittle for providing beta feedback and helping me with the base themes.

P.S. Yes, this post was entirely (except for adding images) written in Zen mode, and it was fantastic. My current themes of choice are Zen Terminal and Zen Papyrus Lite.