Category Archives: Internet

All blogposts on blog.futtta.be about Internet (browsers, web development and mobile web).

Autoptimize 2.3.3 and beyond

Autoptimize 2.3.3 was just released. It is a minor release with the following minor improvements & fixes:

  • improvement: updated to latest version of Filamentgroup’s loadCSS
  • improvement: by default exclude wp-content/cache and wp-content/uploads from CSS optimization (Divi, Avada & possibly others store page-specific CSS there)
  • bugfix: stop double try/catch-blocks
  • misc. bugfixes (see GitHub commit log)

This is (supposed to be) the last minor release of the 2.3 branch, 2.4 is a major change with some big under-the-hood and functional changes. That new version has been in the works for some months already and if you’re up for it you can install by simply downloading this zip-file from GitHub. The GitHub version will also auto-update thanks to the great Plugin Update Checker library.

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.

 

Introducing zytzagoo’s major changes for Autoptimize 2.4

[UPDATE 29/03/2018: Autoptimize 2.4 can now be downloaded from https://github.com/futtta/autoptimize/archive/beta.zip and will automatically update so ensure all new functionality and fixes are applied]

TL;DR Autoptimize 2.4 will be a major change. Tomaš Trkulja (aka zytzagoo) has cleaned up and modernized the code significantly, making it easier to read and maintain, switched to the latest and greatest minifiers and added automated testing. And as if that isn’t enough we’re also adding new optimization options! The downside: we will be dropping support for PHP < 5.3 and for the “legacy minifiers”. AO 2.4 will first be made available as a separate “Autoptimize Beta” plugin on wordpress.org via GitHub and will see more releases/ iterations with new options/ optimizations there before being promoted to the official “Autoptimize”.

Back in March 2015 zytzagoo forked Autoptimize, rewriting the CDN-replacement logic (and a lot of autoptimizeStyles::minify really) and started adding automated testing. I kept an eye on the fork and later that year I contacted Tomas via Github to see how we could collaborate. We have been in touch ever since; some of his improvements have already been integrated and he is my go-to man to discuss coding best practices, bugfixes and security.

FFWD to the nearby future; Autoptimize 2.4 will be based on Tomaš’ fork and will include the following major changes:

  • New: option only minify JS/ CSS without combining them
  • New: excluded JS- or CSS-files will be automatically minified
  • Improvement: switching to the current version of JSMin and -more importantly- of YUI CSS compressor PHP port which has some major performance-improvements of itself
  • Improvement: all create_function() instances have been replaced by anonymous functions (PHP 7.2 started issuing warnings about create_function being deprecated)
  • Improvement: all code in autoptimize/classlesses/* (my stuff) has been rewritten into OOP and is now in autoptimize/classes/*
  • Improvement: use of autoload instead of manual conditional includes
  • Improvement: a nice amount of test cases (although no 100% coverage yet), allowing for Travis continuous integration-tests being done
  • dropping support for PHP below 5.3 (you really should be on PHP 7.x, it is way faster)
  • dropping support for the legacy minifiers

These improvements will be released in a separate “Autoptimize Beta” plugin soon (albeit not on wordpress.org as “beta”-plugins are not allowed). You can already download from GitHub here. We will start adding additional optimization options there, releasing at a higher pace. The goal is to create a healthy Beta-user pool allowing us to move code from AO Beta to AO proper with more confidence. So what new optimization options would you like to see added to Autoptimize 2.4 and beyond? :-)

[corrected 19/02; wordpress.org does not allow beta-plugins]

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?