Category Archives: Web development

Blogposts on blog.futtta.be about “web development”; looking into frameworks, security, best practices, the use of Flash, usability and accessibility, …

Whatever you do, don’t lie (when naming files)

So since Autoptimize 2.0.0 got released half a year ago, minified files are not re-minified any more, which can yield important performance-gains. Or that, at least, is the goal. But as checking if a file is minified is non-trivial, AO reverts to a simpler check; does the filename indicate the file is minified. So for example whatever-min.js and thisone_too.min.css would be considered minified and will simply be aggregated, whereas not_minified.js would get minified. Mr Clay’s Minify (which is used by WP Minify, BWP Minify and W3 Total Cache and of which the core minification components are in Autoptimize as well) applies the same logic.

But apparently plugins often lie about their JS and CSS, with some files claiming to be minified which clearly are not and with some files (even WordPress core files) being minified but not having the min-suffix in the name. It’s obvious that lying like that is kind of stupid: saying your files is minified when in fact it is not, offers you no advantages. Not confirming your file is minified in the name when it is, saves you 4 characters in the filename, but I suspect you were just being lazy, sloppy or tired, no?

So, ladies and gentlemen, can we agree on the following:

  1. Ideally you ship your plugin/ theme with minified JS & CSS.
  2. If your files are minified, you confirm that in the filename by adding the “.min”-suffix and minification plugins will skip them.
  3. If your files are not minified, you don’t include the “.min”-suffix in the filename, allowing for those minification plugins tot minify them.

For a more detailed overview of how to responsibly load minified JS/ CSS in WordPress, I’ll happily point you to Matt Cromwell’s excellent article on the subject.

Fun with EDD; showing EUR price in USD (and vice versa)

I was playing around with Easy Digital Downloads (because this) and I choose EUR as currency, but I wanted the price to be also displayed in USD. Obviously there’s a premium add-on for that, but as I don’t want to purchase stuff just yet, I concocted an alternative myself. Here’s the resulting snippet of code that shows the price in USD for shops with EUR currency and shows the price in EUR when the shop is in USD;

add_action("plugins_loaded","edd_curconv_init");
function edd_curconv_init() {
	$curpos = edd_get_option( 'currency_position', 'before' );
	$curcur = strtolower(edd_get_currency());
  	if (in_array($curcur, array("eur","usd"))) {
	  $filtername="edd_".$curcur."_currency_filter_".$curpos;
	  add_filter($filtername, "edd_eur_dollar_conv",10,3);
	}
}

function edd_eur_dollar_conv($formatted, $currency, $price) {
  $rate=1.13;
  if ($currency === "EUR") {
	$outprice = $price * $rate;
	$outrate = "USD";
  } else if ($currency === "USD") {
	$outprice = $price / $rate;
	$outrate = "EUR";
  }
  
  if (!empty($outprice)) {
	$out = " ( ~ ".edd_currency_filter(round($outprice,2),$outrate).")";
	$formatted.=$out;
  }
  
  return $formatted;
}

This obviously lacks the features and robustness of that Currency Converter add-on, so (don’t) use (unless) at your own risk.

Quick KeyCDN’s Cache Enabler test

cache enablerCache Enabler – WordPress Cache is a new page caching kid on the WordPress plugin block by the Switzerland-based KeyCDN. It’s based in part on Cachify (which has a strong user-base in Germany) but seems less complex/ flexible. What makes it unique though, is it that it allows one to serve pages with WEBP images (which are not supported by Safari, MS IE/ Edge or Firefox) instead of JPEG’s to browsers that support WEBP. To be able to do that, you’ll need to also install Optimus, an image optimization plugin that plugs into a freemium service by KeyCDN (you’ll need a premium account to convert to WEBP though).

I did some tests with Cache Enabler and it works great together with Autoptimize out of the box, especially after the latest release (1.1.0) which also hooks into AO’s autoptimize_action_cachepurged action to clear Cache Enabler’s cache if AO’s get purged (to avoid having pages in cache the refer to deleted autoptimized CSS/ JS-files).

Just not sure I agree with this text on the plugin’s settings page;

Avoid […] concatenation of your assets to benefit from parallelism of HTTP/2.

because based on previous tests by smarter people than me concatenation of assets can still make (a lot of) sense, even when on HTTP/2 :-)

The optimism of a pull request

I was getting old yesterday,with pessimism taking over. But then there’s that Git pull request on your open source project, from an Argentinian developer you don’t know at all. And you discuss the idea and together you build on it, step by step and the merged result is an enrichment not only for your little software-project, but also for you personally. Because it reminds you that too is the web; a place where people collaborate for nothing but the selfless desire to improve things. Thanks for reminding me Pablo!

Is the web doomed?

Off course the web is not doomed, but despite the fact that web performance is immensely important (think impact on mobile experience, think impact on search engine ranking, think impact on conversion) the web keeps getting fatter, as witnessed by this graph from mobiforge;

web-page-size-revisited-revised

Yup; your average web page now has the same size as the Doom installer. From the original mobiforge article;

Recall that Doom is a multi-level first person shooter that ships with an advanced 3D rendering engine and multiple levels, each comprised of maps, sprites and sound effects. By comparison, 2016’s web struggles to deliver a page of web content in the same size. If that doesn’t give you pause you’re missing something.

There’s some interesting follow-up remarks & hopeful conclusions in the original article, but still, over 2 Megabyte for a web page? Seriously? Think about what that does that do to your bounce-rate, esp. knowing that Google Analytics systematically underestimates bounce rate on slow pages because people leave before even being seen by your favorite webstats solution?

So, you might want to reconsider if you really should:

  • push high resolution images to all visitors because your CMO says so (“this hero image does not look nice on my iPad”)
  • push custom webfonts just because corporate communications say so (“our corporate identity requires the use of these fonts”)
  • use angular.js (or react.js or any other JS client-side framework for that matter) because the CTO says so (“We need MVC and the modularity and testibility are great for developers”)

Because on the web faster is always better and being slower will always cost you in the end, even if you might not (want to) know.

About Insanely Stupid Code

When looking into a JS-problem on an Autoptimized site, it turned out missing semi-colons messed things up. Missing semi-colons make JS un-minifyable, as eloquently explained by master-minifier and JS-guru Douglas Crockford in this Bootstrap issue from back in the day;

That is insanely stupid code. I am not going to dumb down JSMin for this case.

Forcing Featured Video Plus to display Lyte YouTubes

A couple of days ago a WP YouTube Lyte user asked me if Featured Video Plus and WP YouTube Lyte were compatible. It took me a day to find the answer (I first said “no”), but Featured Video Plus actually has a filter (get_the_post_video_filter) that allows one to override the code used to display the featured video. And after a bit of trial and error this is what I came up with;

add_filter('get_the_post_video_filter','lyte_featured_video');
function lyte_featured_video($in) {
	$post_id = ( null === $post_id ) ? get_the_ID() : $post_id;
	$meta = get_post_meta( $post_id, '_fvp_video', true );
  	if (($meta["provider"]==="youtube") && (function_exists('lyte_parse'))) {
		return lyte_parse($meta["full"]);
	}
 	return $in;
}

Some extra checks ($post_id should not be empty, $meta should not be empty) would make this more reliable, but that’s something you should be able to add, no?