Federico Jacobi

Run javascript that depends on multiple remote assets

Async JS is the way of the present (and future). We MUST load all of our scripts async. They are getting heavy and slow, and the browser needs help, specially on mobile devices. Why wouldn’t you want your page to load faster (see this post).

As web pages grow more and more complex, the idea of a single script that does everything is Jurassic. But what if we want to run code that depends on multiple scripts at the same time? If your app/site is complex you should look into requireJS. If you need something less daunting … I got you (with jQuery):

$.when(
	$.getScript( 'myscript1.js' ),
	$.getScript( 'myscript2.js' ),
	$.getScript( 'myscript3.js' ),

	$.Deferred( function( deferred ) {
		$( deferred.resolve );
	})
).done( function( script1, script2, script3 ) {
	// Do whatcha gotta do, all 3 scripts are loaded now
	
} );

$.when(

$.getScript( 'myscript1.js' ),

$.getScript( 'myscript2.js' ),

$.getScript( 'myscript3.js' ),

$.Deferred( function( deferred ) {

$( deferred.resolve );

})

).done( function( script1, script2, script3 ) {

// Do whatcha gotta do, all 3 scripts are loaded now

} );

Neat right? … Let’s kick it up a notch. Say we need the script AND some external data file:

$.when(
	$.getScript( 'myscript1.js' ),
	$.getScript( 'myscript2.js' ),
	$.getScript( 'myscript3.js' ),
	$.ajax( 'myData.json' ),

	$.Deferred( function( deferred ) {
		$( deferred.resolve );
	})
).done( function( script1, script2, script3, myData ) {
	// Do whatcha gotta do, all 3 scripts and data file are in
	
} );

$.when(

$.getScript( 'myscript1.js' ),

$.getScript( 'myscript2.js' ),

$.getScript( 'myscript3.js' ),

$.ajax( 'myData.json' ),

$.Deferred( function( deferred ) {

$( deferred.resolve );

})

).done( function( script1, script2, script3, myData ) {

// Do whatcha gotta do, all 3 scripts and data file are in

} );

And now the cherry on top … we want to load myData.json or yourData.json or just nothing conditionally:

var theCondition = 1;

$.when(
	$.getScript( 'myscript1.js' ),
	$.getScript( 'myscript2.js' ),
	$.getScript( 'myscript3.js' ),
	( function() {
		if ( 1 === theCondition )
			return $.ajax( 'myData.json' );
		
		if ( 2 === theCondition )
			return $.ajax( 'yourData.json' );
	} )(),

	$.Deferred( function( deferred ) {
		$( deferred.resolve );
	})
).done( function( script1, script2, script3, theData ) {
	// Do whatcha gotta do, all 3 scripts and data file depends on the theCondition variable
	
} );

var theCondition = 1;

$.when(

$.getScript( 'myscript1.js' ),

$.getScript( 'myscript2.js' ),

$.getScript( 'myscript3.js' ),

( function() {

if ( 1 === theCondition )

return $.ajax( 'myData.json' );

if ( 2 === theCondition )

return $.ajax( 'yourData.json' );

} )(),

$.Deferred( function( deferred ) {

$( deferred.resolve );

})

).done( function( script1, script2, script3, theData ) {

// Do whatcha gotta do, all 3 scripts and data file depends on the theCondition variable

} );

I’m sure you can do something similar on vanilla JS … but if you need something like this, chances are you are running jQuery.

How to make SYNC javascript assets work ASYNC

Speed is everything. It always is … there is no such thing as “the page loaded too fast”. To make matters worse, today we have Google Pagespeed Insights to make our lives miserable (a whole different topic). They usually recommend loading your JS asynchronous (async) or on the footer.

Why?

Javascript is render blocking, which means the browser can’t work on displaying the page while the script is running. So, consider this:

<html>
	<head>
		<title>Example page</title>
		<script src="myscript.js"></script>
	</head>
	<body>
		<div id="theDiv"></div>
		<script>
			changeText( 'theDiv', 'Hello World' );
		</script>
	</body>
</html>

<html>

<head>

<title>Example page</title>

</head>

<body>

changeText( 'theDiv', 'Hello World' );

</script>

</body>

</html>

// myscript.js
changeText = function( id, text ) {
	var el = document.getElementById( id );
	el.innerHTML( text );
};

// myscript.js

changeText = function( id, text ) {

var el = document.getElementById( id );

el.innerHTML( text );

};

If myscript.js takes 1 minute to load, the whole page will be delayed 1 minute, no matter how simple it is. Not cool. To fix this, we just add async to the script tag. This makes the browser start the load of the asset (myscript.js) but continue parsing html. The problem now is that because the asset is still loading, and will arrive in 1 minute, the function changeText() is not available by the time the browser gets to it. Your code will not run, but the page has loaded, which is good news.

<html>
	<head>
		<title>Example page ASYNC( Failing )</title>
		<script src="myscript.js" async></script>
	</head>
	<body>
		<div id="theDiv"></div>
		<script>
			// If myscript.js takes 1 minute to load, 
			// this function call will fail ... editor is undefined
			// but at least the page finished rendering
			editor.text( 'theDiv', 'Hello World' );
		</script>
	</body>
</html>

<html>

<head>

<title>Example page ASYNC( Failing )</title>

</head>

<body>

// If myscript.js takes 1 minute to load,

// this function call will fail ... editor is undefined

// but at least the page finished rendering

editor.text( 'theDiv', 'Hello World' );

</script>

</body>

</html>

How?

You can implement a queue or a callback*. Both ways work just as nicely, but they have different use cases. (* you can use Promises but that’s kind of a callback, just real fancy)

Queues work better if you need to do many calls to the same script in different parts of the page but all depend on the previous call one way or another. Here you go (Notice the change on the js file):

<html>
	<head>
		<title>Example page ASYNC with queue</title>
		<script src="myscript.js" async></script>
		<script>
			queue = [];
		</script>
	</head>
	<body>
		<div id="theDiv"></div>
		<script>
			queue.push( function() {
				editor.text( 'theDiv', 'Hello' );
			} );
		</script>
		<div id="theSecondDiv"></div>
		<script>
			queue.push( function() {
				editor.text( 'theSecondDiv', 'World' );
			} );
		</script>
	</body>
</html>

<html>

<head>

<title>Example page ASYNC with queue</title>

queue = [];

</script>

</head>

<body>

queue.push( function() {

editor.text( 'theDiv', 'Hello' );

} );

</script>

queue.push( function() {

editor.text( 'theSecondDiv', 'World' );

} );

</script>

</body>

</html>

// myscript.js
changeText = function( id, text ) {
	var el = document.getElementById( id );
	el.innerHTML( text );
};

// Execute all the functions on the queue
queue.forEach( function( q ) {
	q();
} );

// Lets stop queueing and execute immediately
queue.push = function( q ) {
	q();
};

// myscript.js

changeText = function( id, text ) {

var el = document.getElementById( id );

el.innerHTML( text );

};

// Execute all the functions on the queue

queue.forEach( function( q ) {

q();

} );

// Lets stop queueing and execute immediately

queue.push = function( q ) {

q();

};

Tiny change … works like a charm … once myscript.js loads 1 minute later, it’ll execute all the functions pushed to the queue.

Potential pitfall
Lets say instead of the script loading slow, it loads super fast. If you are working on the DOM, make sure the elements you want, are in place by the time the queue executes. In the example this is mitigated by adding to the queue after the dom element ( <div> ).

Implementing a callback is a bit easier, but works better if you only need to run code once. Notice, no changes are needed on myscript.js from the original version.

<html>
	<head>
		<title>Example page with script loader</title>
		<script>
		function loadScript( url, callback ) {
			if ( !callback ) callback = function(){};
			var script = document.createElement( "script" );
			script.type = "text/javascript";
			if (script.readyState) {  //IE
				script.onreadystatechange = function () {
					if (script.readyState === "loaded" || script.readyState === "complete") {
						script.onreadystatechange = null;
						callback();
					}
				};
			} else {
				script.onload = function () {
					callback();
				};
			}

			script.src = url;
			document.getElementsByTagName("body")[0].appendChild(script);
		}
		</script>
	</head>
	<body>
		<div id="theDiv"></div>
		<script>
			loadScript( 'myscript.js', function() {
				editor.text( 'theDiv', 'Hello World' );
			} );
		</script>
	</body>
</html>

<html>

<head>

<title>Example page with script loader</title>

function loadScript( url, callback ) {

if ( !callback ) callback = function(){};

var script = document.createElement( "script" );

script.type = "text/javascript";

if (script.readyState) { //IE

script.onreadystatechange = function () {

if (script.readyState === "loaded" || script.readyState === "complete") {

script.onreadystatechange = null;

callback();

}

};

} else {

script.onload = function () {

callback();

};

}

script.src = url;

document.getElementsByTagName("body")[0].appendChild(script);

}

</script>

</head>

<body>

loadScript( 'myscript.js', function() {

editor.text( 'theDiv', 'Hello World' );

} );

</script>

</body>

</html>

You can make a hybrid of these 2 approaches where the callback is the code to process the queue … but it feels a bit ghetto to me. I’m sure there is some good use case where this would be desirable. The same pitfall as above applies, but as long as you load the script after the dom element you’ll be ok.

As always there is a jQuery way to do this. And it is in fact quite nice, what I don’t like about it is having to load jQuery synchronous. That being said, you can probably turn all your jquery into a queue and now “we all happy“.

<html>
	<head>
		<title>Example page with script loader</title>
		<script src="https://code.jquery.com/jquery-3.2.1.min.js">
	</head>
	<body>
		<div id="theDiv"></div>
		<script>
			$.getScript( 'myscript.js' )
				.done( function() {
					editor.text( 'theDiv', 'Hello World' );
				} )
				.fail( function() {
					// WTF script no loadey
				} );
		</script>
	</body>
</html>

<html>

<head>

<title>Example page with script loader</title>

</head>

<body>

$.getScript( 'myscript.js' )

.done( function() {

editor.text( 'theDiv', 'Hello World' );

} )

.fail( function() {

// WTF script no loadey

} );

</script>

</body>

</html>

When caching is not enough: “Double Buffered” Remote Calls

One of the challenges of running WordPress at scale is dealing with API calls to (insert_external_service_here). Using wp_remote_get (or curl) is probably your go-to method for API calling and this is a fine function for a low traffic site. On a site that gets millions of pageviews, it is just not going to cut it. You will inevitably run into race conditions.

In case you don’t know, a race condition is when person1 is waiting on the server to finish the api call, then person2 makes another call, then person3 … then person X, but person1 is still waiting. If the API server is being slow, there could be a queue of thousands waiting, at that point, your server has crashed for sure. wikipedia

Another reason for not using wp_remote_get on every request is API limiting. Some services do not allow more than X calls per second/minute/day. If you make a call for every visit, you will surely reach that limit extremely fast!

Simple Solution: Caching.

$result = wp_cache_get( 'my_api_call', 'api_calls' );

if ( false === $result ) {
	$result = wp_remote_get( $API_url );
	wp_cache_set( 'my_api_call', $result, 'api_calls', 300 );  // cache for 5 minutes
}

// do something with $result

$result = wp_cache_get( 'my_api_call', 'api_calls' );

if ( false === $result ) {

$result = wp_remote_get( $API_url );

wp_cache_set( 'my_api_call', $result, 'api_calls', 300 ); // cache for 5 minutes

}

// do something with $result

By caching your call the “traditional” way, you’ve now gone way ahead from where you started. The API will only happen every 5 minutes, and people will not have to wait for the results as you have them stored already! This is just perfect for medium traffic sites and fast response APIs.

The problem with this approach is that at the 5 minute mark you still need to wait for the API to respond. If the response is slow you could run into a race condition again, because cache is invalidated, and it goes like so: person1 triggers cache invalidation (past 5 minutes) and calls API, person2 calls API too because cache is not valid, person3 same ….. person100 same, person1’s call is done and cache is set again for the next 5 minutes, person101 gets a cached result everyone is happy from here on, in the meantime, persons2-100 are still waiting on the response slowly. We have somewhat mitigated the problem, but not completely solved it. If the traffic is really high and the API is really slow, your server could crash.

If you have that kind of traffic, you are playing with the big boys. Lazy caching is not going to be enough.

Complex Solution: Double Caching

Instead of just caching the result, you can double cache it. To do so, we are doing the same thing as above, but twice. And we’ll do it in a way where cache1 lives for 5 minutes and cache2 lives for 10 minutes. When cache1 invalidates, that person makes the api call and sets a switch so everyone else uses cache2. Now only person1 is slow.

$switch = wp_cache_get( 'switch', 'api_calls');

if ( false === $switch ) {
	$result = wp_cache_get( 'my_api_call', 'api_calls' );
	
	if ( false === $result ) {
		
		wp_cache_set( 'switch', true, 'api_calls', 300 );		// Set switch BEFORE making the external call. 
																// Time doesn't matter here, just make sure it is longer than PHP's execution time
		
		$result = wp_remote_get( $API_url );
		
		wp_cache_set( 'my_api_call', $result, 'api_calls', 300 );			// cache for 5 minutes
		wp_cache_set( 'my_api_backup_call', $result, 'api_calls', 600 );	// cache longer than 5mins so they don't invalidate at the same time
		
		wp_cache_delete( 'switch', 'api_calls' );				// Call is done, remove the switch
	}
	
} else {
	$result = wp_cache_get( 'my_api_backup_call', 'api_calls' );
}

// do something with $result

$switch = wp_cache_get( 'switch', 'api_calls');

if ( false === $switch ) {

$result = wp_cache_get( 'my_api_call', 'api_calls' );

if ( false === $result ) {

wp_cache_set( 'switch', true, 'api_calls', 300 ); // Set switch BEFORE making the external call.

// Time doesn't matter here, just make sure it is longer than PHP's execution time

$result = wp_remote_get( $API_url );

wp_cache_set( 'my_api_call', $result, 'api_calls', 300 ); // cache for 5 minutes

wp_cache_set( 'my_api_backup_call', $result, 'api_calls', 600 ); // cache longer than 5mins so they don't invalidate at the same time

wp_cache_delete( 'switch', 'api_calls' ); // Call is done, remove the switch

}

} else {

$result = wp_cache_get( 'my_api_backup_call', 'api_calls' );

}

// do something with $result

This is pretty great as is, but we can do better. Let’s say the API starts to malfunction for whatever reason. In that scenario, you’ll have good data for 5 minutes until the next time you do the call … not so awesome. Add a data consistency check (which you SHOULD have), and now we are in business:

$switch = wp_cache_get( 'switch', 'api_calls');

if ( false === $switch ) {
	$result = wp_cache_get( 'my_api_call', 'api_calls' );
	
	if ( false === $result ) {
		
		wp_cache_set( 'switch', true, 'api_calls', 300 );		// Set switch BEFORE making the external call. 
																// Time doesn't matter here, just make sure it is longer than PHP's execution time
		
		$result = wp_remote_get( $API_url );
		
		if ( is_your_data_valid( $result ) ) {
			// the result from the call is as expected
			$save_data = $result
			
		} else {
			// Use the last good result and set backup
			$save_data = wp_cache_get( 'my_api_backup_call', 'api_calls' );
			
			// Something went wrong in the api call.... notify somebody? do something?
		}
		
		wp_cache_set( 'my_api_call', $save_data, 'api_calls', 300 );			// cache for 5 minutes
		wp_cache_set( 'my_api_backup_call', $save_data, 'api_calls', 2000 );	// cache longer than 5mins so they don't invalidate at the same time
		wp_cache_delete( 'switch', 'api_calls' );								// Call is done, remove the switch
		
		$result = $save_data;
	}
	
} else {
	$result = wp_cache_get( 'my_api_backup_call', 'api_calls' );
}

// do something with $result

$switch = wp_cache_get( 'switch', 'api_calls');

if ( false === $switch ) {

$result = wp_cache_get( 'my_api_call', 'api_calls' );

if ( false === $result ) {

wp_cache_set( 'switch', true, 'api_calls', 300 ); // Set switch BEFORE making the external call.

// Time doesn't matter here, just make sure it is longer than PHP's execution time

$result = wp_remote_get( $API_url );

if ( is_your_data_valid( $result ) ) {

// the result from the call is as expected

$save_data = $result

} else {

// Use the last good result and set backup

$save_data = wp_cache_get( 'my_api_backup_call', 'api_calls' );

// Something went wrong in the api call.... notify somebody? do something?

}

wp_cache_set( 'my_api_call', $save_data, 'api_calls', 300 ); // cache for 5 minutes

wp_cache_set( 'my_api_backup_call', $save_data, 'api_calls', 2000 ); // cache longer than 5mins so they don't invalidate at the same time

wp_cache_delete( 'switch', 'api_calls' ); // Call is done, remove the switch

$result = $save_data;

}

} else {

$result = wp_cache_get( 'my_api_backup_call', 'api_calls' );

}

// do something with $result

The only caveat with that approach is if your backup cache invalidates. A neat alternative, save the backup in an option:

“Double Buffer”

$switch = wp_cache_get( 'switch', 'api_calls');

if ( false === $switch ) {
	$result = wp_cache_get( 'my_api_call', 'api_calls' );
	
	if ( false === $result ) {
		
		wp_cache_set( 'switch', true, 'api_calls', 300 );		// Set switch BEFORE making the external call. 
																// Time doesn't matter here, just make sure it is longer than PHP's execution time
		
		$result = wp_remote_get( $API_url );
		
		if ( is_your_data_valid( $result ) ) {
			// the result from the call is as expected, store results
			
			wp_cache_set( 'my_api_call', $result, 'api_calls', 300 );	// cache for 5 minutes
			update_option( 'my_api_backup_call', $result );				// options don't invalidate, they just store stuff
			
			wp_cache_delete( 'switch', 'api_calls' );					// Call is done, remove the switch
			
		} else {
			// The result from the call is NOT ok deal with it somehow.
			// In the meantime do not clear the switch OR update the option
			// Because the switch is on, it'll eventually invalidate allowing another call.
			// If that other call is good, we return to regular use, if it is bad,
			// the switch will be set again, using the backup option
		}
	}
	
} else {
	$result = get_option( 'my_api_backup_call' );
}

// do something with $result

$switch = wp_cache_get( 'switch', 'api_calls');

if ( false === $switch ) {

$result = wp_cache_get( 'my_api_call', 'api_calls' );

if ( false === $result ) {

wp_cache_set( 'switch', true, 'api_calls', 300 ); // Set switch BEFORE making the external call.

// Time doesn't matter here, just make sure it is longer than PHP's execution time

$result = wp_remote_get( $API_url );

if ( is_your_data_valid( $result ) ) {

// the result from the call is as expected, store results

wp_cache_set( 'my_api_call', $result, 'api_calls', 300 ); // cache for 5 minutes

update_option( 'my_api_backup_call', $result ); // options don't invalidate, they just store stuff

wp_cache_delete( 'switch', 'api_calls' ); // Call is done, remove the switch

} else {

// The result from the call is NOT ok deal with it somehow.

// In the meantime do not clear the switch OR update the option

// Because the switch is on, it'll eventually invalidate allowing another call.

// If that other call is good, we return to regular use, if it is bad,

// the switch will be set again, using the backup option

}

} else {

$result = get_option( 'my_api_backup_call' );

}

// do something with $result

Boom! Now even if the API fails or nobody accesses the page and cache dies, your site still has content, all you have to do now is find a way to alert you of the problem.

Overkill? yes … Works? … Really well!

Note: wordpress options have limited size, if the data you are storing is too big, you may want to consider WP Large Options.

Google Web VR test (taken with cardboard camera)

To $(document).ready() or not to $(document).ready() ? that is the question.

TLDR;

If you place your JS/jQuery below the elements, you don’t have to use $(document).ready.

Wrapping all your Javascript in a $(document).ready. All the cool kids are doing it, and it is safe to do so. However, this doesn’t come without drawbacks. Also, there multiple considerations when it comes to loading jQuery itself, but that’s a different conversation.

jQuery SHOULD be loaded on the footer of your <html>. At this point, wrapping or not doesn’t really matter. The magic lies in the fact the by the time your JS runs, the elements are already on the page (aka above the script you are running ).

<html>
	<head>
		<title>To .ready or not to .ready</title>
	</head>
	<body>
		<p id="first">Some random text here</p>
		<p id="second">Some random text here 2</p>
		<p id="third">Some random text here 3</p>
		<div>
			Some div content
		</div>
		<script src="http://code.jquery.com/jquery-1.12.0.min.js"></script>
		<script>
			// No need to wrap, but go ahead, it can't hurt.
			$( document ).ready( function() {
				$( '#first' ).css( 'background', 'yellow' );
				$( '#second' ).css( 'background', 'blue' );
				$( '#third' ).css( 'background', 'red' );
			} );
		</script>
	</body>
</html>

<html>

<head>

<title>To .ready or not to .ready</title>

</head>

<body>

<p id="first">Some random text here</p>

<p id="second">Some random text here 2</p>

<p id="third">Some random text here 3</p>

<div>

Some div content

</div>

// No need to wrap, but go ahead, it can't hurt.

$( document ).ready( function() {

$( '#first' ).css( 'background', 'yellow' );

$( '#second' ).css( 'background', 'blue' );

$( '#third' ).css( 'background', 'red' );

} );

</script>

</body>

</html>

But let’s say you are forced to load jQuery in the <head> AND you are also forced (or want) to place your JS on <head> as well … now you HAVE to use $(document).ready( function() {} ); because by the time the JS runs, the elements to be selected haven’t been seen by the browser yet.

<html>
	<head>
		<title>To .ready or not to .ready</title>
		<script src="http://code.jquery.com/jquery-1.12.0.min.js"></script>
		<script>
			// You have to wrap, or nothing will happen
			$( document ).ready( function() {
				$( '#first' ).css( 'background', 'yellow' );
				$( '#second' ).css( 'background', 'blue' );
				$( '#third' ).css( 'background', 'red' );
			} );
		</script>
	</head>
	<body>
		<p id="first">Some random text here</p>
		<p id="second">Some random text here 2</p>
		<p id="third">Some random text here 3</p>
		<div>
			Some div content
		</div>
	</body>
</html>

<html>

<head>

<title>To .ready or not to .ready</title>

// You have to wrap, or nothing will happen

$( document ).ready( function() {

$( '#first' ).css( 'background', 'yellow' );

$( '#second' ).css( 'background', 'blue' );

$( '#third' ).css( 'background', 'red' );

} );

</script>

</head>

<body>

<p id="first">Some random text here</p>

<p id="second">Some random text here 2</p>

<p id="third">Some random text here 3</p>

<div>

Some div content

</div>

</body>

</html>

From https://learn.jquery.com/using-jquery-core/document-ready/

Code included inside $( document ).ready() will only run once the page Document Object Model (DOM) is ready for JavaScript code to execute. Code included inside $( window ).load(function() { ... }) will run once the entire page (images or iframes), not just the DOM, is ready.

Here’s where the issue lies. When you use $(document).ready() you need to wait for the entire page to load! So, if you want to have your JS do some kind of effect, like a sticky sidebar, or transitions, or anything at all, they will not happen instantly. Sometimes, this isn’t an issue, but the more images and external script your page has, the longer it takes for your js to run. This can be unacceptable, as most of the times, this causes your effect to start working at weird times, making the site … well … act weird.

The solution: instead of wrapping in .ready(), place the <script> just below the elements you want it to work on. Again, by the time your script runs, the elements have already been “seen” by the browser, and the effects will kick in even though the page hasn’t completely loaded yet. No need to wait.

<html>
	<head>
		<script src="http://code.jquery.com/jquery-1.12.0.min.js"></script>
	</head>
	<body>
		<p id="first">Some random text here</p>
		<p id="second">Some random text here 2</p>
		<p id="third">Some random text here 3</p>
		<script>
			// Wait? Ain't nobody got time for that
			$( '#first' ).css( 'background', 'yellow' );
			$( '#second' ).css( 'background', 'blue' );
			$( '#third' ).css( 'background', 'red' );
		</script>
		<div>
			Some div content
		</div>
	</body>
</html>

<html>

<head>

</head>

<body>

<p id="first">Some random text here</p>

<p id="second">Some random text here 2</p>

<p id="third">Some random text here 3</p>

// Wait? Ain't nobody got time for that

$( '#first' ).css( 'background', 'yellow' );

$( '#second' ).css( 'background', 'blue' );

$( '#third' ).css( 'background', 'red' );

</script>

<div>

Some div content

</div>

</body>

</html>

Foundation 6 + Block Grid + WordPress Gallery

If you are using foundation i’m sure you love block grids, but wordpress galleries do their own HTML. No worries, throw this snippet in your functions.php (or wherever it belongs in your theme’s structure) and the markup will change to a blockgrid instead. This works with Foundation 6 … for Foundation 5 you’ll need to change the output to UL and LIs instead of row/column DIVs.

Easy. You are welcome!

function blockgrid_gallery( $output, $atts, $instance ) {
	$atts = shortcode_atts( array(
		'order'   => 'ASC',
		'orderby' => 'menu_order ID',
		'id'      => get_the_ID(),
		'columns' => 3,
		'size'    => 'thumbnail',
		'include' => '',
		'exclude' => '',
		), $atts );

	if ( ! empty( $atts['include'] ) ) {
		$_attachments = get_posts( array( 'include' => $atts['include'], 'post_status' => 'inherit', 'post_type' => 'attachment', 'post_mime_type' => 'image', 'order' => $atts['order'], 'orderby' => $atts['orderby'] ) );

		$attachments = array();
		foreach ( $_attachments as $key => $val ) {
			$attachments[$val->ID] = $_attachments[$key];
		}
	} elseif ( ! empty( $atts['exclude'] ) ) {
		$attachments = get_children( array( 'post_parent' => intval( $atts[ 'id' ] ), 'exclude' => $atts['exclude'], 'post_status' => 'inherit', 'post_type' => 'attachment', 'post_mime_type' => 'image', 'order' => $atts['order'], 'orderby' => $atts['orderby'] ) );
	} else {
		$attachments = get_children( array( 'post_parent' => intval( $atts[ 'id' ] ), 'post_status' => 'inherit', 'post_type' => 'attachment', 'post_mime_type' => 'image', 'order' => $atts['order'], 'orderby' => $atts['orderby'] ) );
	}

	if ( empty( $attachments ) )
		return '';

	$output = '<div class="row small-up-2 medium-up-' . intval( $atts[ 'columns' ] ) . '" >';

	foreach ( $attachments as $id => $attachment ) {
		$img        = wp_get_attachment_image_url( $id, $atts[ 'size' ] );
		$img_srcset = wp_get_attachment_image_srcset( $id, $atts[ 'size' ] );		
		$img_full   = wp_get_attachment_image_url( $id, 'full' );

		$caption = ( ! $attachment->post_excerpt ) ? '' : ' data-caption="' . esc_attr( $attachment->post_excerpt ) . '" ';

		$output .= '<div class="column">'
			. '<a href="' . esc_url( $img_full ) . '">'
			. '<img src="' . esc_url( $img ) . '" ' . $caption . ' class="th" alt="' . esc_attr( $attachment->title ) . '"  srcset="' . esc_attr( $img_srcset ) . '" sizes="(max-width: 50em) 87vw, 680px" />'
			. '</a></div>';
	}

	$output .= '</div>';

	return $output;
}
add_filter( 'post_gallery', 'blockgrid_gallery', 10, 3 );

function blockgrid_gallery( $output, $atts, $instance ) {

$atts = shortcode_atts( array(

'order' => 'ASC',

'orderby' => 'menu_order ID',

'id' => get_the_ID(),

'columns' => 3,

'size' => 'thumbnail',

'include' => '',

'exclude' => '',

), $atts );

if ( ! empty( $atts['include'] ) ) {

$_attachments = get_posts( array( 'include' => $atts['include'], 'post_status' => 'inherit', 'post_type' => 'attachment', 'post_mime_type' => 'image', 'order' => $atts['order'], 'orderby' => $atts['orderby'] ) );

$attachments = array();

foreach ( $_attachments as $key => $val ) {

$attachments[$val->ID] = $_attachments[$key];

}

} elseif ( ! empty( $atts['exclude'] ) ) {

$attachments = get_children( array( 'post_parent' => intval( $atts[ 'id' ] ), 'exclude' => $atts['exclude'], 'post_status' => 'inherit', 'post_type' => 'attachment', 'post_mime_type' => 'image', 'order' => $atts['order'], 'orderby' => $atts['orderby'] ) );

} else {

$attachments = get_children( array( 'post_parent' => intval( $atts[ 'id' ] ), 'post_status' => 'inherit', 'post_type' => 'attachment', 'post_mime_type' => 'image', 'order' => $atts['order'], 'orderby' => $atts['orderby'] ) );

}

if ( empty( $attachments ) )

return '';

$output = '<div class="row small-up-2 medium-up-' . intval( $atts[ 'columns' ] ) . '" >';

foreach ( $attachments as $id => $attachment ) {

$img = wp_get_attachment_image_url( $id, $atts[ 'size' ] );

$img_srcset = wp_get_attachment_image_srcset( $id, $atts[ 'size' ] );

$img_full = wp_get_attachment_image_url( $id, 'full' );

$caption = ( ! $attachment->post_excerpt ) ? '' : ' data-caption="' . esc_attr( $attachment->post_excerpt ) . '" ';

$output .= '<div class="column">'

. '<a href="' . esc_url( $img_full ) . '">'

. '<img src="' . esc_url( $img ) . '" ' . $caption . ' class="th" alt="' . esc_attr( $attachment->title ) . '" srcset="' . esc_attr( $img_srcset ) . '" sizes="(max-width: 50em) 87vw, 680px" />'

. '</a></div>';

}

$output .= '</div>';

return $output;

}

add_filter( 'post_gallery', 'blockgrid_gallery', 10, 3 );

Killer steak sauce (pseudo chimichurri)

Every steak can use this killer recipe! which in turn, it is not a true recipe, but more of a combination of flavors that you can adjust to your own taste. It goes especially well with flank steak or skirt steak. Chicken, pork, and fish also love this sauce.

Parsley or Cilantro (aka Coriander) or both. Lots of it!
Garlic. 2 or 3 cloves.
Cumin powder (or seeds). About half a teaspoon.
Red Pepper flakes.
Olive oil. A lot (think pesto)
Salt and Pepper
Optional: white vinegar

Warm up your olive oil and put the pepper flakes and cumin. Just warm up, so the oil gets infused with the spiciness and flavor of the ingredients. DO NOT FRY THEM … just warm it up. Once happy with the flavor, just leave it to cool down on the side. ( Experiment: put garlic on the oil as well, until soft. Cooked garlic tastes sweet )

In the meantime, chop the parsley/cilantro and garlic real small. Mash them together. Add salt and pepper to taste. When the oil is cool (you don’t want to cook the parsley/cilantro) mix it all together. Whisk it. Eat it! It is going to be AWESOME! I promise!

Static classes on WordPress plugins

If you have a wordpress plugin, more than likely you are using add_action and/or add_filter. No problem, until you get this error:

Warning: call_user_func_array() expects parameter 1 to be a valid callback, cannot access self:: when no class scope is active in /home/wpcom/public_html/wp-includes/plugin.php on line .........

1	Warning: call_user_func_array() expects parameter 1 to be a valid callback, cannot access self:: when no class scope is active in /home/wpcom/public_html/wp-includes/plugin.php on line .........

One of the annoyances of wordpress is that tracking bugs when in actions or filters can be a bit of a hassle, but you don’t know where the error actually originated, but with a bit of grep-ing of searching you can find the issue. With the error above however, what’s going on is not so evident. Consider the following plugin that does nothing:

final class doNothing {
	static $emptyString = '';

	static function init() {
		add_action( 'wp_footer', array( self, 'output' ) );
	}

	static function output() {
		// Don't echo anything
		echo self::$emptyString;
	}
}
doNothing::init();

final class doNothing {

static $emptyString = '';

static function init() {

add_action( 'wp_footer', array( self, 'output' ) );

}

static function output() {

// Don't echo anything

echo self::$emptyString;

}

doNothing::init();

Nothing seems wrong here, however, it throws the warning above. The right way of doing this is:

final class doNothing {

	static $emptyString = '';

	static function init() {
		add_action( 'wp_footer', array( __CLASS__, 'output' ) );
	}

	static function output() {
		// Don't echo anything
		echo self::$emptyString;
	}
}
doNothing::init();

final class doNothing {

static $emptyString = '';

static function init() {

add_action( 'wp_footer', array( __CLASS__, 'output' ) );

}

static function output() {

// Don't echo anything

echo self::$emptyString;

}

doNothing::init();

The key being __CLASS__ instead of self on the add_action line. When using static classes add_action and add_filter don’t like self however, if your class is not static, therefore, instantiated you can use add_action( $this, 'function' ) no problem. Seems odd, but that’s how it is.

Layers on Canvas

TLDR;

Can’t be done natively, use this instead: layeredCanvas

HTML5 Canvas doesn’t implement a layers mechanism. In order to implement this you can do it in 2 different ways:

Multiple canvas elements approach

Think of a layer as an individual canvas and then absolute position one on top of the other. Then to lay it out just wrap on a div with position relative:

<div style="width: 300px; height: 300px; position: relative">
	<canvas id="layer1" width="300" height="300" style="position: absolute;"></canvas>
	<canvas id="layer2" width="300" height="300" style="position: absolute;"></canvas>
	<canvas id="layer3" width="300" height="300" style="position: absolute;"></canvas>
</div>
<script>
function layer1() {
	canvas = document.getElementById( "layer1" );
	ctx = canvas.getContext( '2d' );

	ctx.fillStyle = "#E5E059";
	ctx.fillRect( 50, 50, 150, 150 );
}
function layer2() {
	canvas = document.getElementById( "layer2" );
	ctx = canvas.getContext( '2d' );

	ctx.beginPath();
	ctx.fillStyle = "#88A09E";
	ctx.arc( 275, 275, 150, 0, 2 * Math.PI );
	ctx.fill();
}
function layer3() {
	canvas = document.getElementById( "layer3" );
	ctx = canvas.getContext( '2d' );

	ctx.fillStyle = "#C70039";
	ctx.beginPath();
	ctx.moveTo(100, 100);
	ctx.lineTo(100, 300);
	ctx.lineTo(300, 300);
	ctx.closePath();
	ctx.fill();
}

layer1();
layer2();
layer3();
</script>

</div>

function layer1() {

canvas = document.getElementById( "layer1" );

ctx = canvas.getContext( '2d' );

ctx.fillStyle = "#E5E059";

ctx.fillRect( 50, 50, 150, 150 );

}

function layer2() {

canvas = document.getElementById( "layer2" );

ctx = canvas.getContext( '2d' );

ctx.beginPath();

ctx.fillStyle = "#88A09E";

ctx.arc( 275, 275, 150, 0, 2 * Math.PI );

ctx.fill();

}

function layer3() {

canvas = document.getElementById( "layer3" );

ctx = canvas.getContext( '2d' );

ctx.fillStyle = "#C70039";

ctx.beginPath();

ctx.moveTo(100, 100);

ctx.lineTo(100, 300);

ctx.lineTo(300, 300);

ctx.closePath();

ctx.fill();

}

layer1();

layer2();

layer3();

</script>

What’s crappy about this is if you want to save the image you have to do a screenshot and then cut it, or you can only save one canvas element at a time.

Single canvas element approach

Natively, there is no way of doing this, but with a little bit of abstraction, it isn’t a problem. Think of a layer as a function, now you call the functions in order and you are mostly layered:

<canvas id="layeredCanvas" width="300" height="300"></canvas>
<script>
function layer1( ctx ) {
	ctx.fillStyle = "#E5E059";
	ctx.fillRect( 50, 50, 150, 150 );
}
function layer2( ctx ) {
	ctx.beginPath();
	ctx.fillStyle = "#88A09E";
	ctx.arc( 275, 275, 150, 0, 2 * Math.PI );
	ctx.fill();
}
function layer3( ctx ) {
	ctx.fillStyle = "#C70039";
	ctx.beginPath();
	ctx.moveTo(100, 100);
	ctx.lineTo(100, 300);
	ctx.lineTo(300, 300);
	ctx.closePath();
	ctx.fill();
}

canvas = document.getElementById( "layeredCanvas" );
ctx2d = canvas.getContext( '2d' );

layer1( ctx2d );
layer2( ctx2d );
layer3( ctx2d );

</script>

function layer1( ctx ) {

ctx.fillStyle = "#E5E059";

ctx.fillRect( 50, 50, 150, 150 );

}

function layer2( ctx ) {

ctx.beginPath();

ctx.fillStyle = "#88A09E";

ctx.arc( 275, 275, 150, 0, 2 * Math.PI );

ctx.fill();

}

function layer3( ctx ) {

ctx.fillStyle = "#C70039";

ctx.beginPath();

ctx.moveTo(100, 100);

ctx.lineTo(100, 300);

ctx.lineTo(300, 300);

ctx.closePath();

ctx.fill();

}

canvas = document.getElementById( "layeredCanvas" );

ctx2d = canvas.getContext( '2d' );

layer1( ctx2d );

layer2( ctx2d );

layer3( ctx2d );

</script>

This is still a bit crappy … lets make it slight more layer-like. We can make an array of functions and run them in sequence. This is much better because now we can remove (or change the index) an element from the array effectively replicating a layer feel:

<canvas id="layeredCanvas" width="300" height="300"></canvas>
<script>
render = function( layers ) {
	for ( var i = 0; i < layers.length; i++ ) {
		layers[ i ]();
	}
};

canvas = document.getElementById( "layeredCanvas" );
ctx = canvas.getContext( '2d' );

layers = [];
layers.push( function() {
	ctx.fillStyle = "#E5E059";
	ctx.fillRect( 50, 50, 150, 150 );
} );

layers.push( function() {
	ctx.beginPath();
	ctx.fillStyle = "#88A09E";
	ctx.arc( 275, 275, 150, 0, 2 * Math.PI );
	ctx.fill();
} );
layers.push( function() {
	ctx.fillStyle = "#C70039";
	ctx.beginPath();
	ctx.moveTo(100, 100);
	ctx.lineTo(100, 300);
	ctx.lineTo(300, 300);
	ctx.closePath();
	ctx.fill();
} );

render( layers );

</script>

render = function( layers ) {

for ( var i = 0; i < layers.length; i++ ) {

layers[ i ]();

}

};

canvas = document.getElementById( "layeredCanvas" );

ctx = canvas.getContext( '2d' );

layers = [];

layers.push( function() {

ctx.fillStyle = "#E5E059";

ctx.fillRect( 50, 50, 150, 150 );

} );

layers.push( function() {

ctx.beginPath();

ctx.fillStyle = "#88A09E";

ctx.arc( 275, 275, 150, 0, 2 * Math.PI );

ctx.fill();

} );

layers.push( function() {

ctx.fillStyle = "#C70039";

ctx.beginPath();

ctx.moveTo(100, 100);

ctx.lineTo(100, 300);

ctx.lineTo(300, 300);

ctx.closePath();

ctx.fill();

} );

render( layers );

</script>

DONE! Not too bad … using this principle I created a more elegant approach that allows you a couple more neat little things like show/hide … try it, fork it, use it: layeredCanvas

Quick and Dirty JS slider (qndslider)

We do not need more JS sliders, there is plenty of alternatives. But while looking at them, I realized they all force you into learning their small quirks. That is a total annoyance and waste of time, so I set myself to write a super simple, super easy and understandable slider: the qndslider, the Quick and Dirty Slider.

You can download and use at your leisure: https://github.com/federicojacobi/qndslider

The beauty of it, is that I coded the basics of any slider to save you time, but you are in control of the interaction. I.E. you can call mySlider.next() to move to the next slide, but have a callback on what happens after the slider changes. All the basic funcionality is in, next(), previous(), timers, start(), stop().

It is NOT a jQuery plugin, but it does use jQuery to find the elements.

The Basics
You don’t have to use Divs, it could be UL/LI or P/SPAN as long as the slides have the “slide” class and the wrapper the id you call in the JS, in this case “GreatSlider”.

<div id="GreatSlider">
	<div>First slide, do whatever you want here</div>
	<div>Second slide</div>
	<div>Third slide</div>
	<div>Fourth slide</div>
</div>
<script type="text/javascript">
$(document).ready( function () {
	var mySlider = new Slider( "GreatSlider" );
});
</script>

<div>First slide, do whatever you want here</div>

<div>Second slide</div>

<div>Third slide</div>

<div>Fourth slide</div>

</div>

$(document).ready( function () {

var mySlider = new Slider( "GreatSlider" );

});

</script>

No, it doesnt have NEXT or PREV arrows, that is up to you. How you place them, how you style them, etc. it is ALL up to you. That way, is a bit hard, but you understand exactly what’s going on. Same goes for current slide and stuff like that. See more detailes at Github.

Coder + Designer

Why?

How?

Simple Solution: Caching.

Complex Solution: Double Caching

“Double Buffer”

TLDR;

TLDR;

Multiple canvas elements approach

Single canvas element approach