Category Archives: lang:en

Blogposts on blog.futtta.be in English (mostly because these posts are republished in a non-Dutch-speaking context).

Taking over Async JavaScript WordPress plugin

David Clough, author of the Async JavaScript WordPress plugin contacted me on March 5th to ask me if I was interested to take over ownership of his project. Fast-forward to the present; I will release a new version of AsyncJS on March 13th on wordpress.org, which will:

  • integrate all “pro” features (that’s right, free for all)
  • include some rewritten code for easier maintenance
  • be fully i18n-ready (lots of strings to translate :-) )

I will provide support on the wordpress.org forum (be patient though, I don’t have a deep understanding of code, functionality & quirks yet). I also have some more fixes/ smaller changes/ micro-improvements in mind (well, a Trello-board really) for the next release, but I am not planning major changes or new functionality. But I vaguely remember I said something similar about Autoptimize a long time ago and look where that got me …

Anyway, kudo’s to David for a great plugin with a substantial user-base (over 30K active installations) and for doing “the right thing” (as in not putting it on the plugin-market in search for the highest bidder). I hope I’ll do you proud man!

Long overdue: WP YouTube Lyte update

It took me way too long (Autoptimize and related stuff is great fun, but it is eating a lot of time), but I just pushed out an update to my first ever plugin; WP YouTube Lyte. From the changelog:

So there you have it; Lite YouTube Embeds 2018 style and an example Lyte embed of a 1930’s style Blue Monday …

Orkestra Obsolete play Blue Monday using 1930s instruments – BBC Arts

Watch this video on YouTube.

Preventing WP Super Cache from caching if no Slimstat in HTML

I was struggling with an occasional loss of reported traffic by SlimStat, due to my pages being cached by WP Super Cache (which is not active for logged in users) but not having SlimStatParams & the slimstat JS-file in it. I tried changing different settings in Slimstat, but the problem still occurred. As I was not able to pinpoint the exact root cause, I ended up using this code snippet to prevent pages being cached by WP Super Cache;

add_filter('wp_cache_ob_callback_filter','slimstat_checker');
function slimstat_checker($bufferIn) {
  if ( strpos($bufferIn, "<html") && strpos($bufferIn, "SlimStatParams") === false ) {
	define("DONOTCACHEPAGE","no slimstat no cache");
	error_log("no slimstat = no cache");
  }
  return $bufferIn;
}

Changing the condition on line 3 allow one to stop caching based on whatever (not) being present in the HTML.

Want to test automated Critical CSS creation?

Over 3 years ago Autoptimize added support for critical CSS and one and a half year ago the first “power-up” was released for Critical CSS rules creation.

But time flies and it’s time for a new evolution; automated creation of critical CSS, using a deep integration with https://criticalcss.com using their powerful API! A first version of the plugin is ready and the admin-page looks like this (look to the right of this paragraph);

The plan:

  1. beta-test (asap)
  2. release as separate plugin on wordpress.org (shooting for April)
  3. release as part of Autoptimize 2.5 (target mid 2018)

This new “criticalcss.com” power-up has been tested on a couple of sites already (including this little blog of mine) and we are now looking for a small group of to help beta-test for that first target.  Beta-testers will be able to use criticalcss.com for free during the test (i.e. for one month). If you’re interested; head on up to the contact form and tell me what kind or site you would test this on (main plugins + theme; I’m very interesting in advanced plugins like WooCommerce, BuddyPress and some of the major themes such as Avada, Divi, Astra, GeneratePress, … ) and I’ll get back to you with further instructions.

 

How to extract blocks from Gutenberg

So Gutenberg, the future of WordPress content editing, allows users to create, add and re-use blocks in posts and pages in a nice UI. These blocks are added in WordPress’ the_content inside HTML-comments to ensure backwards-compatibility. For WP YouTube Lyte I needed to extract information to be able to replace Gutenberg embedded YouTube with Lytes and I took the regex-approach. Ugly but efficient, no?

But what if you need a more failsafe method to extract Gutenberg block-data from a post? I took a hard look at the Gutenberg code and came up with this little proof-of-concept to extract all data in a nice little (or big) array:

add_action('the_content','gutenprint',10,1);
function gutenprint($html) {
  	// check if we need to and can load the Gutenberg PEG parser
  	if ( !class_exists("Gutenberg_PEG_Parser") && file_exists(WP_PLUGIN_DIR."/gutenberg/lib/load.php") ) {
  		include_once(WP_PLUGIN_DIR."/gutenberg/lib/load.php");
	}

  	if ( class_exists("Gutenberg_PEG_Parser") && is_single() ) {
	  // do the actual parsing
	  $parser = new Gutenberg_PEG_Parser;
	  $result = $parser->parse(  _gutenberg_utf8_split( $html ) );
	  
	  // we need to see the HTML, not have it rendered, so applying htmlentities
  	  array_walk_recursive($result,
		function (&$result) { $result = htmlentities($result); }
		);

	  // and dump the array to the screen
	  echo "<h1>Gutenprinter reads:</h1><pre>";
	  var_dump($result);
	  echo "</pre>";
	} else {
	  echo "Not able to load Gutenberg parser, are you sure you have Gutenberg installed?";
	}
  
  	// remove filter to avoid double output
  	remove_filter('the_content','gutenprint');
  
  	// and return the HTML
	return $html;
}

I’m not going to use it for WP YouTube Lyte as I consider the overhead not worth it (for now), but who know it could be useful for others?