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);
It’s bound to happen. You build yourself a sweet webapp with some sweet javascript action and you unleash it to the world only to get angry emails yelling, “IT DOESn’T WoRK! FIX iT okAy?” And it’s the darndest problem because it’s happening to both IE and Firefox users (Chrome and Safari users have been silent) and you can’t replicate it.
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:
I think I’ll be using this license for pretty much all my future work:
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
Tired of all those boring emails that you get from WordPress? Do you dread opening emails from WordPress because plain text and/or over-querystringified links terrify you? Rest easy friend, HTML emails for WordPress are here.
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).
Update (2010-04-20): These Gleeks are crazy. Since being released, the clock has been viewed over 200,000 times. Insane.
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.
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.
<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.