Hide-my-WordPress & Autoptimize compatibility glue

An “Autoptimize Critical CSS“-user saw some weirdness in how the site looked when optimized. The reason for this turned out to be not the critical CSS, but the fact that he used “Hide My WordPress Pro”, a plugin that changes well-known paths in WordPress URL’s to other paths (e.g. /wp-content/plugins -> /modules/ and /wp-content/themes -> /templates) and uses rewrite rules .htaccess to map requests to the filesystem. This resulted in Autoptimize not finding the files on the filesystem (as AO does not “see” the mapping in .htaccess), leaving them un-aggregated.
To fix something like that, a small code snippet that hooks into Autoptimize’s API can do the trick;

add_filter('autoptimize_filter_cssjs_alter_url', 'rewrite_hidemywp');
function rewrite_hidemywp($url) {
    if ( strpos( $url, 'modules/' ) !== false && strpos( $url, 'wp-content' ) === false ) {
        $url = str_replace('modules/','wp-content/plugins/', $url);
    } elseif ( strpos( $url, 'templates/' ) !== false && strpos( $url, 'wp-content' ) === false ) {
	$url = str_replace('templates/','wp-content/themes/', $url);
    }
    return $url;
}

The above is just an example (as in the Pro version of hide-my-wp you can set paths of your own liking and you can even replace theme names by random-ish strings), but with a small amount of PHP-skills you should be able to work out the solution for your own site. Happy optimized hiding!

Making Autoptimize faster

One of the big changes in Autoptimize 2.0 (estimated released between Christmas & New Year) is a significant improvement in the minification speed (30% faster should be no exception). As a quick reminder, this is what Autoptimize did until now;

  1. extract code from HTML & remove original references
  2. aggregate all code into one string
  3. check if a minified version of that string exists in cache
  4. if not in cache;
    1. minify that string
    2. store the result in cache
  5. inject reference to cached autoptimized code in HTML

It is the actual minification in step (4) which can slow Autoptimize down (hence the importance of making sure your cached files are reusable). In Autoptimize 2.0 above logic was changed to improve performance;

  1. extract code from HTML & remove original references
  2. aggregate all unminified code into one string, but only put a reference to already minified files (*min.css and *min.js)
  3. check if a minified version of that string exists in cache
  4. if not in cache;
    1. minify that string
    2. replace references to minified files with (slightly optimized) contents
    3. store the result in cache
  5. inject reference to cached autoptimized code in HTML

As the to-be-minified string is smaller, the JS- & CSS-minifiers have less code to optimize, indeed speeding up the process significantly. Additionally this also reduces the chances of problems with the re-minification of already minified code (e.g. p. So nothing but advantages, right?
Now this was tested rather thoroughly and all known kinks have been ironed out, but If this “injected minified code late”-approach does not work in your context, you can simply disable it by hooking into the API and setting the autoptimize_filter_js_inject_min_late and/ or autoptimize_filter_css_inject_min_late filters to false (use code snippets rather then adding it to your functions.php);

add_filter('autoptimize_filter_js_inject_min_late','no_late_inject');
add_filter('autoptimize_filter_css_inject_min_late','no_late_inject');
function no_late_inject() {
	return false;
}

WP YouTube Lyte: new player UI and API tips

WP YouTube Lyte 1.6.4 was released a couple of hours ago and features the new YouTube player look and feel:

Vieux Farka Touré & Julia Easterlin - Little Things (Music Video)

Here are some tips on how you can tweak that to match your own preferences;
As you can see in the vid above (Vieux Farka Touré & Julia Easterlin – Little Things), I wanted WP YouTube Lyte to show the bottom control (which as on YouTube is now invisible by default) add can be accomplished with just a little CSS:
.ctrl{display:block !important;}</code>

If you’d like Lyte to use the exact same font as YouTube does, you can add CSS to import that font and it will be applied to title-field in Lyte:

@import url(https://fonts.googleapis.com/css?family=Roboto&subset=latin,latin-ext);

You can even use Lyte’s API do alter the CSS like this;

add_filter('lyte_css','lyte_change_css',10,1);
function lyte_change_css($lyte_css) {
        // source the font
        $lyte_css="@import url(https://fonts.googleapis.com/css?family=Roboto&subset=latin,latin-ext);".$lyte_css;
        // show bottom control
        $lyte_css.=" .ctrl{display:block !important;}";
        return $lyte_css;
}

Talking about the API, you can now also force Lyte to be active on mobile as well (which is not the default as it would force your visitors to click “play” twice, once to load the YouTube iFrame and once to play as mobile YouTube doesn’t support autoplay), you can use this code;

add_filter('lyte_do_mobile','lyte_on_mobile',10,0);
function lyte_on_mobile(){
        return true;
}

WP YouTube Lyte and YouTube API v2 end of life

The YouTube API v2 is now officially to be shut down soon after April 20th. That’s bad news for WP YouTube Lyte, which uses this version of the API to perform unauthenticated read-only requests to fetch a.o. video title and thumbnail information (example here). The v3 API is supposed to simpler yet more powerful and migrating should not be a big problem, except for that little detail that v3 doesn’t allow unauthenticated requests at all. So I’ll need to add authentication (via an API key) to the mix, leaving me with the dilemma of having to choose between these approaches, none of which I really like:

  1. Tell WP YouTube Lyte users to get their own API key and have them enter it in the plugin’s settings-page. Risk: upsetting users who all of a sudden have to get an API key (“huh, what key?”)
  2. Get an API key myself and hardcode that in WP YouTube Lyte. Risk: abuse of that key (and neither a server key nor a browser key is applicable really), reaching limits, being denied access.
  3. Create and operate a proxy application that sits between the v3 API and each and every WP YouTube Lyte instance, taking care of authentication with an API key. Risk: having to write & install that proxy application, making sure it is available 24/7 (it’s a single point of failure) + obviously the same abuse-risk as in (2).

No, I’m definitively not happy … 🙁

Power users rejoice; WP YouTube Lyte has an API

Power users of WP YouTube Lyte might be particularly interested in the version that is being pushed out as we speak. 1.3.0 comes with an API, allowing you to substantially change the way the plugin works.
You have the following filters to play around with;

  • lyte_settings; filter to change values in the settingsArray without changing the actual setting
  • lyte_content_preparse; filter to change the_content before the httpv-links are being parsed
  • lyte_match_preparse_fragment; filter to change an individual httpv-link before it is parsed
  • lyte_match_postparse_template; filter to change the parsed code before it is merged back in the_content
  • lyte_content_postparse; filter to parse the_content before it is being handed over to the next plugin
  • lyte_css; filter to change WP YouTube Lyte’s CSS
  • lyte_actionsfilters; action to add extra actions or filters, e.g. to make sure widget_text is parsed by lyte_parse as well

The plugin now comes with “lyte_helper.php_example” which is an sample plugin file that, when copied to “/wp-content/plugins/lyte_helper.php” can be activated as a separate plugin and which contains examples of how the API can be used.
For the less tech-savvy users, these are some of the other changes in 1.3.0 (from the changelog):

  • Support for higher quality thumbnails by adding #hqThumb=1 to httpv-link
  • You can disable microdata on a per-video level by adding #noMicrodata=1 to the httpv-link when microdata is enabled.
  • Checkbox on admin-page to flush WP YouTube Lyte cache (which holds title, description, … from YouTube)

As always; feedback, bug reports, feature requests, criticism or code suggestions are more then welcome in the comments or via the contact form.
But whatever you do, make sure to have fun while doing it! This embedded YouTube audio track (a 2h BBC essential mix by Flying Lotus from back in 2008) might help, if you’re into that type of music that is;

Flying Lotus Essential Mix - All 2 Hours - 2008-11-29 High Quality

5 reasons why the NMBS should have an API

nmbs should have an apiThis weekend I joined the Facebook-group “NMBS should have an API”. The NMBS (or SNCB, for the route planner) and Infrabel (for railtime) have data available that is very relevant for their customers, but this does not really translate in great applications, does it? Wouldn’t it be better for public companies such as the NMBS to focus on exposing their data/ business logic and less on the presentation, allowing 3rd parties to connect to their API’s to create innovative new applications?
Just image what kind of sexy, useful applications that could be created this way. Here’s 5 to start with:

  • A mobile application that can
    • plan your rail-travel based on your current GPS-position and the destination you enter
    • adapting your route while “on rails” in case of delays of current or next train
  • A Netvibes-widget containing basic route planner and railtime funcionality. Netvibes is great by the way, their widgets can be deployed in Netvibes, iGoogle, Live.com and standalone on any site, but also on your Mac OS X and Vista desktop. I build a very simple LinkedIn widget almost a year ago. It’s actually little more then a wrapper around their mobile site, but according to the Netvibes stats it’s installed by more then 1200 users. Great potential!
  • mytrain.be: a personalized website for daily commuters:
    • register and select the train(s) you use on what days of the week
    • receive warnings by mail/ sms in case of delays
    • automatically propose alternative routes in case of delays
  • A sexy mashup of real-time train info and Google Maps, as already seen on http://swisstrains.ch/ (great to look at, not sure it’s that useful though)?
  • A trainusers-application integrating into social websites, allowing you e.g. to hook with fellow-travelers on Twitter or Facebook while on rails?

So indeed, NMBS and Infrabel, give us API’s and enjoy the great stuff that’ll be build on it. And if you’re reading this and you would like to use or develop applications based on such data, join that Facebook group!