Derek Johnson derekjohnson

Setup

Download https://gist.github.com/jsocol/1089733 and unpack
Rename data-uri.py to data-uri and copy to /usr/local/bin/
Open Terminal, cd /usr/local/bin/ and and then chmod +x data-uri (enter password when prompted)
Open Automator, choose New > Service.
Set up the service as follows:
Service receives selected files or folders in Finder.app
which is connected to a Run Shell Script action, with the following settings:

I wanted to figure out the fastest way to load non-critical CSS so that the impact on initial page drawing is minimal.

TL;DR: Here's the solution I ended up with: https://github.com/filamentgroup/loadCSS/

For async JavaScript file requests, we have the async attribute to make this easy, but CSS file requests have no similar standard mechanism (at least, none that will still apply the CSS after loading - here are some async CSS loading conditions that do apply when CSS is inapplicable to media: https://gist.github.com/igrigorik/2935269#file-notes-md ).

Seems there are a couple ways to load and apply a CSS file in a non-blocking manner:

CSS Layout Debugger

A tweet-sized debugger for visualizing your CSS layouts. Outlines every DOM element on your page a random (valid) CSS hex color.

One-line version to paste in your DevTools

Use $$ if your browser aliases it:

~ 108 byte version

	<head>
	....
	</head>
	<script>
	(function( w ){
	var doc = w.document,
	// quick async script inject
	ref = doc.getElementsByTagName( "script" )[0],
	loadJS = function( src ){
	var elem = doc.createElement( "script" );

	/*
	Older email clients and (some) webmail clients (Gmail!) will apply
	this rule. Some clients (like older Lotus Notes) don't
	support background-color on links, so I didn't want white
	links on a white background.
	*/
	a.button {
	background-color: #FFFFFF;
	color: #d9286b;
	}

	/* Lets not rely on paths in the database, they can be very wrong when moving between dev/stage/live environments */
	/* The following two variables are backward to my thinking, but hey, what ya gonna do? */
	define('WP_HOME', 'http://' . $_SERVER['HTTP_HOST'] . ''); // This is NOT the 'wordpress admin area' home, but the site's home
	define('WP_SITEURL', 'http://' . $_SERVER['HTTP_HOST'] . '/SECRETDIRECTORY'); // This isn't the site's URL but the WordPress admin area URL

	/* MySQL settings */
	switch($_SERVER['SERVER_NAME']){
	// Your local machine's settings
	case 'mysite.local':
	define('DB_NAME', 'dev_mysite');

	...
	// test for font-face version to load via Data URI'd CSS
	// Basically, load WOFF unless it's android's default browser, which needs TTF, or ie8-, which needs eot
	var fonts = ns.files.css.fontsWOFF,
	ua = win.navigator.userAgent;

	// android webkit browser, non-chrome
	if( ua.indexOf( "Android" ) > -1 && ua.indexOf( "like Gecko" ) > -1 && ua.indexOf( "Chrome" ) === -1 ){
	fonts = ns.files.css.fontsTTF;
	}

	// DISCLAIMER: This is not necessarily good code. It’s just code that I wrote
	// as quickly as possible to do each task.

	// 1

	return 2*i;

	// 2

	return !(i%2);

	.module {
	some: stuff;
	&__child {
	blah: blah;
	}
	&--modifier {
	modify: me;
	}
	}