futtta's blog

Although it has been a few months since I last wrote about my baby WordPress plugin, time did not stand still between version 0.3.0 and 0.5.2; the player size can now be changed in the options-screen, I’ve replaced my newTube html5-hack with Google’s official (yet experimental) new html5-compatible embed code and I started migrating the CSS from the mess that had become the JavaScript-file. And I almost forgot what may be the most important change; I started searching for blogs that use WP-YouTube-Lyte to see how it behaves in the wild. Some of the bugs I discovered that way;

• WordPress has a lousy “the_excerpt”-function which removes script-tags but not the script itself, which caused my JavaScript to be displayed as normal text in excerpts (typically in category-pages). Fixed with some unpleasant CDATA-tinkering.
• Some blogs allow crawlers to see the contents of a directory if no index.* is in place, so e.g. options.php gets indexed with an ugly (but logical) error-message. Fixed with an index.html.
• There’s a lot of themes and some of those have CSS that impacts the way WP YouTube Lyte is displayed. Most issues should be fixed by better CSS for my plugin, but do let me know if you encounter more weird display-problems (especially the controls that are incorrectly positioned).

But with all those changes you might start to wonder if WP-YouTube-Lyte still reduces download size & rendering time substantially, no? So I ran a couple of new tests for this page on my blog (it has 3 embedded YouTube’s) on webpagetest.org (settings: 5 runs on IE7 via Amsterdam, excluding requests to stats.wordpress.com). The difference is … well, judge for yourself (or see below the tables for the summary)

With normal Flash-based embeds (full results here):

And with WP YouTube Lyte (full results here):

Did you see that? Less requests, less data and faster rendering for first and repeat views. Hurray for WP-YouTube-Lyte! But enough with that ego-tripping already, I’ve got an Opera-bug to look into! Or wait, I’ll watch this great new Pomplamoose+Ben Folds+Nick Hornby  videosong first:

Ever since I installed WordPress on my (virtual) server, I’ve been using the WP Contact Form plugin to provide me with simple contact form. The plugin isn’t exactly under active development (Last Updated: 2009-8-28), but it got the job done and I was quite happy with it. Until spammers found the page and started abusing it, that is. There’s a bunch of other Contactform-plugins in the wordpress.org plugins repository, but most of them were either too feature-packed or development for them seemed to have stopped.

I considered adding ReCaptcha at first, but why would I want to put my visitors through such an ordeal; the captcha’s seem to have gotten very difficult to decipher.  Next possibility; implement Akismet (Mollom would have been a great choice as well)? There’s a great Akismet PHP5-class, you just provide your API-key and off you go. But it seemed kind of inefficient to have to do all that with the official Akismet-plugin already in place?

But wait a minute, why not just piggyback on the Akismet-plugin, as the Clean-contact plugin and wp-contactform-akismet did? Keep it simple stupid and so I just copy/pasted the clean_contact_akismet-function from Clean Contact’s code into my wp-content/plugins/wp-contact-form/wp-contactform.php and on line 142 I changed:

mail($recipient, $subject, $fullmsg, $headers);
$results = '<div style="font-weight: bold;">' . $success_msg . '</div>';
echo $results;

into:

$akismet=clean_contact_akismet($msg,$subject,$email,$name);
if (!$akismet) {
mail($recipient, $subject, $fullmsg, $headers);
$results = $success_msg;
} else {
$results = 'If it looks like spam and smells like spam, it must be spam. Leave (or rephrase)!';
}
echo '<div style="font-weight: bold;">'.$results.'</div>';

That was all it took to add Akismet spam-filtering to that KISS-y wp-contact-form plugin. I wonder why this isn’t in the plugin already?

A couple of months ago I removed Google Analytics from this wee little blog, but I still use the less sophisticated WordPress.com stats plugin to follow up on what is being read around here. Loading the stats-page in my Android-browser is far from optimal (it uses Flash to draw the charts and it is a pretty big page), so I was pleased to read that version 1.3 of WordPress for Android features a stats-section. But the reports don’t work, I just get “No stats data found, please try again later”.

Now while playing around with the stats API over the weekend, I noticed some unusual things:

• “blog_uri=futtta.wordpress.com” works
• “blog_uri=blog.futtta.be” results in “Error: zero rows returned.”

The API also supports blog_id instead of blog_uri and after some digging for blog_id’s I found that they are listed in (the html source of) the blog dropdown-list on your wordpress.com-dashboard stats page. And there the problem became clear: I had two blog_id ‘s for the same blog_uri (blog.futtta.be) and the first one was defunct:

• “blog_id=2184847″ results in “Error: zero rows returned.”
• “blog_id=2185033″ works just fine

As I can’t remove the entry with the faulty blog_id from the Stats DB and as I can’t change the Android WordPress app to use one of multiple blog_id’s instead of the blog_uri, I can’t fix this little bugger myself, so I contacted WordPress Support. But how did I end up with 2 blog_id’s in the database?

When a good friend of mine bought a Sony Xperia X10 Mini Pro (that small dude does have a keyboard) and couldn’t find JungleDisk in the Android market, I went looking for alternatives (I had already looked into cloud-based storage/ backup back in 2007) and found Dropbox.

Dropbox is an Amazon S3-based cloud-storage solution with client software for just about every system, Android included. Moreover it offers an API for platforms or applications that need Dropbox access as well. The basic account (with 2Gb storage) is free (sign up here and some more free storage thank-you-very-much), so I installed it on the Windows laptop at work, on my Linux “disktop” and on my HTC Hero and (at first sight) all seems to work exactly as advertised (free, easy, cross-platform).

And now that I have external storage that allows sharing files with anonymous users, I could offload some files from my own server? But more importantly; I really should look into reworking that old backup shell-script again (I’ll have to get dropboxd up and running first though). Or maybe I’ll just install WP Time Machine to automatically back up just this blog to my Dropbox-account?

I re-implemented newTube.js, an earlier experiment to embed HTML5 YouTube video, into my WP YouTube Lyte plugin. This means that WP YouTube Lyte (for easy lite YouTube embeds, reducing download size & rendering time substantially) can now also use the HTML5-based YouTube video-player to play your embedded video.

If the -experimental- HTML5 option is enabled, WP YouTube Lyte will embed HTML5 YouTube video if:

• Your visitor uses a browsers that supports the h264 (Safari, Chrome, IE9) or WebM (currently development versions of Chrome, Opera and Firefox) video codecs
• Your visitor is enrolled in the YouTube html5 beta

If these requirements aren’t met, your visitors will see a Flash-based version of the YouTube video you specified.

As newTube.js is sort of a dirty hack which replaces the LYTE dummy player with an iframe with overflow:hidden, in which the full YouTube-page is carefully positioned to display only the player, there are some other caveats to take into account as well:

• It might break if YouTube implements x-frame-options for their video-pages
• Positioning of the player might be a few pixels off in some browsers
• Some buttons in the embedded player (e.g. view full screen) won’t function properly
• This might (not) work on iPhone/ iPod/ iPad’s (there are known issues with iframes & overflow in mobile Safari that might affect html5 embedding, feedback is welcome)

But apart from all this small print, is works rather nice if I may say so myself. Or better still, just look at this little They Might Be Giants gem embedded here;

I’m a sucker for simple things and in my book, WordPress (the open source software) is a great example of a simple yet powerful solution for publishing on the web. The last few days I experienced their plugin-ecosystem to be just as simple and powerful.

If you have a plugin to share and you:

1. register on wordpress.org
2. fill out a form to submit your plugin for inclusion in their repository
3. after confirmation upload your code (together with a structured readme-file) via svn

Then boom, automatically;

• plugin pages (for description, installation, faq, changelog, …) are created and populated with information from the readme and base php-file
• a zip-file is created containing your stable version
• your plugin is listed on the “new plugins” page

Before you know it, you’ve got a bunch of real users (wp-youtube-lyte was downloaded 128 times in 2 days) who can rate your plugin and provide you with feedback. And every time you upload a new stable version via svn, a new zip-file is created and your users will get a notification in their wp-admin pages, allowing them to upgrade by simply clicking that upgrade link. Don’t you love it when a plan comes together?

But enough raving already, got to go create that admin-page for my plugin now, as requested by a user. I’m a sucker for real users!

This 3rd episode in the “High performance YouTube embeds” series brings you yet another way to use LYTE instead of normal YouTube embeds: wp-youtube-lyte. This WordPress-plugin will automatically replace YouTube-links that start with “httpv://” with Lite YouTube Embeds, thereby significantly reducing download size & rendering time.

wp-youtube-lyte plays nice with the great “Smart Youtube” plugin, in which case it will take care of the default embeds (httpv), while Smart Youtube will parse the other types (httpvh, httpvhd, httpvp, …).

You can download the plugin from http://futtta.be/lyte/wp-youtube-lyte.zip.

A quick demo maybe, to finish things off? Owen Pallett performing “Lewis takes action” live in the KCRW studios: