Oliver Pattison opattison

Website Contract [month] [year]

Description of this Contract

This contract is not meant to trick or deceive you; the intention is purely to protect both parties. I have tried to keep the wording as plain as possible, but if anything is unclear, please let me know and I will be more than happy to clarify it with you. Also, until you sign it, please feel free to request to change bits of it to suit your requirements.

In short, [client name] is contracting me, [my name], to [description of my role] between [start date and finish date].

By signing this, you are confirming that you have the power and ability to enter into this contract on behalf of [client's company].

This is a non-technical reading list for technical people.

How to Program Independent Games
Kill Math (and Don't Kill Math)
Move Fast and Don't Break Things
Launch & The Web Is a Customer Service Medium by Paul Ford
_why at Art & Code
Repetitive Process

This is a list of software you should read like a novel.

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:

	<div class="byline author vcard">
	<a class="photo" href="{% render_author url %}">
	<img src="{% render_author avatar %}" alt="{{ page.author }}" title="{{ page.author }}">
	</a>
	<h2>{{ page.author }}</h2>
	<div class="author-bio">
	<p>{% render_author bio %}</p>
	</div>
	</div>

	---
	layout: invoice
	status: paid \| unpaid \| late
	deliverables:
	item:
	description: made site responsive
	price: $1,000
	item:
	description: changed logo color
	price: $300

	{
	"Version": "2008-10-17",
	"Statement": [
	{
	"Sid": "AddPermissions",
	"Effect": "Allow",
	"Principal": {
	"AWS": "*"
	},
	"Action": "s3:GetObject",

	(function() {
	var CSSCriticalPath = function(w, d, opts) {
	var opt = opts \|\| {};
	var css = {};
	var pushCSS = function(r) {
	if(!!css[r.selectorText] === false) css[r.selectorText] = {};
	var styles = r.style.cssText.split(/;(?![A-Za-z0-9])/);
	for(var i = 0; i < styles.length; i++) {
	if(!!styles[i] === false) continue;
	var pair = styles[i].split(": ");

	/* Solarized Dark

	For use with Jekyll and Pygments

	http://ethanschoonover.com/solarized

	SOLARIZED HEX ROLE
	--------- -------- ------------------------------------------
	base03 #002b36 background
	base01 #586e75 comments / secondary content

	/*
	Show a progress element for any form submission via POST.
	Prevent the form element from being submitted twice.
	*/
	(function (win, doc) {
	'use strict';
	if (!doc.querySelectorAll \|\| !win.addEventListener) {
	// doesn't cut the mustard.
	return;
	}

	<div>
	<label for="sort-by">Sort by</label>
	<select id="sort-by">
	<option value="manual">Featured</option>
	<option value="price-ascending">Price: Low to High</option>
	<option value="price-descending">Price: High to Low</option>
	<option value="title-ascending">A-Z</option>
	<option value="title-descending">Z-A</option>
	<option value="created-ascending">Oldest to Newest</option>
	<option value="created-descending">Newest to Oldest</option>