Joel Sutherland

Top Reads: October 6, 2010


An incomplete, unordered list of the best things online, pulled from my instapaper history:

Roald Dahl's darkest hour

This is an amazing story from Roald Dahl's life. He was the other of many famous children's books: The BFG, Matilda, Charlie and the Chocolate Factory, etc. It turns out that he led a super fascinating life. He was a WWII fighter pilot, British Spy, married an Oscar winning actress, invented a medical valve and was an art dealer. This story was taken from one of the worst periods his life and convinced me to buy the book it is from.

Who Can Name the Bigger Number?

What is the biggest specific number you can name? It turns out this is a very complicated question whose answer lies at the heart of computer science. This article does a great job explaining this complex subject in a very simple way. I enjoyed how it connected many of the ideas I learned in school.

The DirectDraw Hack

This is a writeup of a development project that allows an older computer game to run on modern versions of Windows. It gives a high level history of some of the changes that games have undergone and also explains how some cool hacks work.

Humans are not automatically strategic

Why will a randomly chosen eight-year-old fail a calculus test? Because most possible answers are wrong, and there is no force to guide him to the correct answers. (There is no need to postulate a “fear of success”; most ways writing or not writing on a calculus test constitute failure, and so people, and rocks, fail calculus tests by default.)

Why do most of us, most of the time, choose to "pursue our goals" through routes that are far less effective than the routes we could find if we tried?[1] My guess is that here, as with the calculus test, the main problem is that most courses of action are extremely ineffective, and that there has been no strong evolutionary or cultural force sufficient to focus us on the very narrow behavior patterns that would actually be effective.

Top Reads: September, 24 2010


An incomplete, unordered list of the best things I read this week pulled from my instapaper history:

Beware of Greeks Bearing Bonds

This is a Michel Lewis ( you know it's good ) piece on the collapse of the Greek Economy. It turns out that the Greek culture is systematically. Nobody pays taxes and everybody takes handouts.  The Greeks cooked their books in order to move to the Euro.  Now they are screwed and there is no clear solution.  Worth reading.

The Face of Facebook

This is the first profile of Mark Zuckerberg worth reading.  In spite of what the subhead says, he doesn't open up. I think there is enough however to figure out what he is all about.  Unlike Bill Gates he doesn't lead from the authority of his technical knowledge.  Unlike Jobs, he isn't wildly charismatic or necessarily innovative.  Instead it mostly seems like he is willing to see things through and doesn't get too caught up on failures along the way.

America is a Joke

A New York Magazine profile of Jon Stewart.  If you've read about him before there isn't much new, if you haven't read it for sure I found the most interesting part was the extent to which he still runs just about everything on The Daily Show.

Inside the Secret World of Trader Joes

A good profile of a fairly secretive company.  The post interesting part was how they make substantially more money per square foot than every other grocier. It's nice to see a company grow responsibly.


Colin Powell on Muslims, Politics and America


This was said in his endorsement of Obama in 2008:

I'm also troubled by, not what Senator McCain says, but what members of the party say. And it is permitted to be said such things as, "Well, you know that Mr. Obama is a Muslim." Well, the correct answer is, he is not a Muslim, he's a Christian. He's always been a Christian. But the really right answer is, what if he is? Is there something wrong with being a Muslim in this country? The answer's no, that's not America. Is there something wrong with some seven-year-old Muslim-American kid believing that he or she could be president? Yet, I have heard senior members of my own party drop the suggestion, "He's a Muslim and he might be associated terrorists." This is not the way we should be doing it in America.

I feel strongly about this particular point because of a picture I saw in a magazine. It was a photo essay about troops who are serving in Iraq and Afghanistan. And one picture at the tail end of this photo essay was of a mother in Arlington Cemetery, and she had her head on the headstone of her son's grave. And as the picture focused in, you could see the writing on the headstone. And it gave his awards--Purple Heart, Bronze Star--showed that he died in Iraq, gave his date of birth, date of death. He was 20 years old. And then, at the very top of the headstone, it didn't have a Christian cross, it didn't have the Star of David, it had crescent and a star of the Islamic faith. And his name was Kareem Rashad Sultan Khan, and he was an American. He was born in New Jersey. He was 14 years old at the time of 9/11, and he waited until he can go serve his country, and he gave his life. Now, we have got to stop polarizing ourself in this way. And John McCain is as nondiscriminatory as anyone I know. But I'm troubled about the fact that, within the party, we have these kinds of expressions.

He was referring to this image:

Creating a Minimal Blog Design Using HTML5, CSS3 and jQuery

in and

html5 blog design

A zip of this project is at the end of the post.

Redesigning this blog was a long time coming. I had started blogging on my personal site in late 2008 on Posterous, but quickly slowed and then stopped posting when my focus turned to my company blogs (New Media Campaigns, GetHiFi).

In restarting my personal blog, I had some goals that I wanted to achieve with the design:

  • Minimal in appearance and code
  • Uses modern web development techniques
  • Takes advantage of HiFi, our new CMS

The net result is something I am fairly proud of.  This site certainly isn't complicated, but it features a number of fun technologies:

  • HTML5
  • @font-face
  • CSS3
  • jQuery
  • HiFi

This post is meant to be both a tour of the site and a how-to.  So without rambling on too much further, lets begin:

The Design

I initially put together the design in photoshop.  The bars at the top are a reference to the New Media Campaigns logo.  The font I am using for the headlines is Bergamo. For body copy, I am using a Helvetica/Arial stack.

The page width is 600 pixels, which is my preference for content, especially blogs.  This is a super handy size because it is an appealing width to read and it fits nicely into most grids.  Should I ever redesign again, or migrate my content, I won't need to worry quite as much about sizing issues.

Finally, I kept the navigation really simple.  I hid nearly all of the blog gorp in an expanding menu that appears when you click the 'blog' link. This was probably the design's most opinionated decision. While this certainly hurts the discoverability of content, I'm not out to make a web portal.  It's a blog.  Generally visitors will either be following via RSS or arriving via Google/Twitter/Whatever to view a particular article.  The 99% case is to make the site as readable as possible. This is also why I used a vertical typographic grid, which I will describe later.

The Markup

Minimalism was a goal for the design; extreme minimalism was a goal for the markup.  Below is the markup for a post.  The listing page is the same, but there aren't comments and the articles are stacked.  Notice how I've tried to eliminate as much non-semantic stuff as possible. My only "sin" is a container div.  The bars at the top and other embellishments were loaded via JS.

<!DOCTYPE html> 
<html lang="en"> 
	<meta charset="utf-8" /> 
	<!-- styles -->
<div id="container"> 
	<header role="banner"> 
		<h1><a href="/">joel sutherland</a></h1> 
			<!-- nav items -->
 	<div id="blog" class="hidden"> 
		<-- blog dropdown -->
	</div><!-- blog --> 
			<h1><a href="">Post Title</a></h1> 
			<div class="postmeta"> 
				<time datetime="">December 31st, 1969</time> 
				<a href="y#comments" class="comments">0 Comments</a> 
		<!-- content -->    
		<aside class="comments" id="comments"> 
			<!-- comments -->
		</aside><!-- comments --> 
</div><!-- container --> 
<!-- scripts --> 

I really like the way this came out.  It made me realize the potential that HTML5 has with its new elements.  Markup is becoming much more terse and readable these days.

The CSS: Layout

Again, when it came to the CSS I was also trying to consider minimalism.  To me, this generally means avoiding images when possible and also making sure that you don't end up repeating yourself too much.  CSS that is copied and pasted is bound to give you problems later.

This site came out very well when it came to my goals with CSS.  By using cross-browser compatible gradients, box-shadows and rgba, I was able to escape with just a single image!  Here are some of the interesting highlights:

Site Background

For the background of the site, I layered my only image, a 24-bit png filled with noise over a gradient:

html {
	background: #d0cec9;
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#dedcd9', endColorstr='#f7f7f6');
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgb(222,220,217)),
 color-stop(0.1, rgb(247,247,246)), color-stop(1.0, rgb(247,247,246)));
	background: -moz-linear-gradient(top,  #dedcd9 0px,  #f7f7f6 400px, #f7f7f6 100%);

body {
	background: url(../images/noise.png);

It felt a bit dirty to use the gradient-stops to get the background to look how I wanted.  It isn't quite perfect, but that is the price I had to pay to avoid more wrapper divs.

Blog Dropdown and Blockquotes

By layering rgba backgrounds, I was able to keep both the gradients and the texture going:

blockquote {
	margin: 0 0 22px 0;
	background: rgba(0,0,0,.05);
	border-left: 4px solid rgba(0,0,0,.1);
	padding: 22px;
	font-style: italic;

Top-Shadow and Bars

You can barely tell, but there is a JS-generated div that is sitting just above the browser viewport.  I am applying a box-shadow to it so that the top of the page has a subtle shadow.  I am also drawing the bars entirely with JS-generated markup and CSS:

#shadow {
	position: fixed;
	top: -10px;
	left: 0;
	width: 100%;
	height: 10px;
	box-shadow: 0px 0px 7px rgba(0,0,0,.2);
	-moz-box-shadow: 0px 0px 7px rgba(0,0,0,.4);
	-webkit-box-shadow: 0px 0px 7px rgba(0,0,0,.2);
	z-index: 2;
#bars {
	width: 100%;
	height: 42px;
	margin-top: -20px;
	#bars div {
		position: relative;
		float: left;
		width: 54px;
		height: 100%;
		margin-right: 55px;
		box-shadow: 0px 2px 5px rgba(0,0,0,.35);
		-moz-box-shadow: 0px 2px 5px rgba(0,0,0,.35);
		-webkit-box-shadow: 0px 2px 5px rgba(0,0,0,.35);
	#bars div.n { background: #2e78bc; }
	#bars div.m { background: #a3be48; }
	#bars div.c { background: #9a9a9a; margin: 0; }

Those are the layout highlights.  The rest is fairly run-of-the-mill.

The CSS: Type

Writing the CSS type stylesheet was a bit more fun for me since I am fairly new to vertical-grids.  I settled on a 22px vertical grid and then made sure to apply the correct styling to EVERYTHING to make it fit.  At first this sounds like a lot of work.  I was surprised at both how easy it was, and how quickly it went.  It turns out that by working within the constraint of a vertical grid, a lot of little spacing decisions end up being a lot easier.

When you're setting up your grid, a great trick is to use a background image as a guide.  Simply make an image that is 1px wide and as tall as your grid.  Leave it transparent except for the bottom pixel.  Boom, simple guideline.  As an Easter Egg, you can enable the baseline grid lines of this site by mousing over each of the bars at the top of the site.  It is best to do it on the style guide page so that you can see how it works without a random image knocking it off course.  I took the time to apply the grid to everying: from the blog drop-down, to the comments, even to the syntax highlighter.

Questionable Voodoo

So after doing quite a bit of reading, there were three tricks that people seemed to recommend adding to your stylesheet to improve legibility:

html,body { 
  text-rendering: optimizeLegibility;
  text-shadow: 0px 0px 1px rgba(255,255,255,.1);
-webkit-font-smoothing: antialiased;

The first line is supposed to improve kerning in Firefox. The second line adds an essentially non-visible text-shadow that triggers better anti-aliasing in Chrome/Safari on Windows.  The last one works in older versions of webkit.

I call these voodoo because I don't anticipate them having much longevity.  They don't do anything on IE -- and the other browsers will surely end up with sensible defaults that will get pushed out through auto-updates.


This is a technique that allows you to embed and use essentially any font you want.  It is different from cufon and sIFR in that you're not faking anything.  You are using real browser text.  It works essentially all browsers, IE6 included. Paul Irish has developed the ideal syntax to use.

If you have a font that you want to use on a site, first make sure that its licensing permits it.  Unless you're super-careful you're probably making your font-files publicly available when you use this technique.  Adobe would not be pleased.  The next step is to go ahead and use the Font Squirrel @font-face generator.  This takes a font file, and outputs the different formats as well as CSS needed to use the font on your site. I recommend checking the 'expert' box and then requesting a Base64 encoded CSS file.  This embeds the font into the CSS file directly and saves a few HTTP requests.

Once you've gotten your @font-face CSS in place, you can use the font just like you would any other.  In my case, I'm using Bergamo for the headlines:

h1,h2,h3,h4,h5,h6 { 
	font-family: 'BergamoProRegular',georgia,serif;
	line-height: 22px;
	margin-bottom: 22px;

This little bit of CSS also shows the main trick to making a grid work. Give everything the same line-height and margin-bottom. When deviating, make sure it is in multiples of the grid:

h1, h1 a{
	font-size: 33px;
	color: #333230;
	line-height: 44px;

That's it!  If you want to see how I do the whole thing, here is a link to a non-minified version of my type CSS.

The jQuery & HiFi

Javascript was used pretty minimally on this site.  I'm a huge fan of jQuery so I was willing to spare a few KB to include the library.  I made sure to pull it from Google with the hope that visitors would already have it cached.

Bars and Shadow

The first thing I did was add in the markup I would need for the shadow and bars at the top.  Notice that I killed the padding when I added the bars.  I did this so that there would not be a weird page jump during the time between the css loading and the javascript executing:

var bars = '<div id="bars"><div class="n"></div><div class="n"></div><div class="m"></div><div class="m"></div><div class="m"></div><div class="c"></div></div>'
	$('#container').prepend(bars).css({paddingTop: 0});
	$('body').prepend('<div id="shadow" />');

Blog Dropdown

For the blog dropdown, I used some simple custom event binding.  While not strictly necessary, should I ever need to toggle the visibility of the blog panel from elsewhere, I can.

$('#blog').bind('toggle', function(){
		var $blog = $(this);
		if($':visible')) $blog.trigger('hide');
		else $blog.trigger('show')
	.bind('show', function(){
	.bind('hide', function(){

AJAX Search Using the HiFi API

So I won't get into the full details of this, but I will try to cover the interesting bits.  This site runs on a new CMS called HiFi. It has a unique, super-cool JSON based API built right in to it.  I used it to put the search together.  Here is the HiFi query I used.

{'type': 'page', 'content': {'like': searchphrase }}

Translated to English, this means: "Get  all pages with content containing the search phrase". HiFi has a javascript library that works with jQuery that makes it easy to use on sites.  Here is how searched and displayed the results:

var searchphrase = $('#searchbox').val();
hifi({'type': 'page', 'content': {'like': searchphrase }}).each(function(page){
	$('ul#results').append('<li>' + page.title + '</li>');

As soon as I get around to it, I'm going to use the API to search for all posts I have done across the three blogs I've written for.  It really is a lot of fun to work with.


This ended up being a bit longer than I wanted.  I think there are more lines in this post that there are lines of code running the site!  I hope it was helpful to get a look into my thoughts and the process behind the site.  If there are any questions or comments, please leave them below.

You can download a zip of the HiFi theme here.  It has all of the HTML/CSS/JS for this site.  Feel free to do anything you want with it!

HiFi is Making Crazy Progress

in and

hifi custom fields

There has been some great work done lately by Josh Lockhart (@codeguy), Eli Van Zoeren (@elivz)  and Kris Jordan (@KrisJordan) on HiFi.  Among 81 minor improvements launched tonight, we now have custom fields live and operational!

This won't mean much to the non-nerds out there, but it is a great achievement.  It is now possible to define a set of fields that will show up in HiFi for site editors to use.  So if you're making a Portfolio section, you can add fields for URL, Project Type, and even Images that are fully integrated with the rest of the HiFi media system.

Perhaps coolest of all, you then assign the custom fieldset to a place in your site tree.  It then will apply to that area of the site only.  Since the HiFi API is so clean, this also means that custom fields stack.

Ultimately, this is a super-flexible framework for creating a site structure that makes the most sense to end users and makes the data available to developers through a simple JSON API.  We're excited to start using this in practice!

The New Has Launched


The site you are seeing has been upgraded from its old existence on posterous with a default theme.  It was a lot of fun to design this and play around with some cool HTML5/JS/CSS tricks.

To check out the text styling I used, go to the Greeked Text page.  To see the typographic baseline, mouse over each of the colored bars at the top of the screen.

My goal with the design was to make something simple that looked nice.  When coding it, I also wanted to stick with minimalism.  The template only uses one image, a 24-bit noise tile for the background.  Everything else was done in CSS.  I also tried to keep the HTML minimal by using Javascript to inject non-essential elements.

I hope you like the site -- let me know if there are complains.  Expect a full-on nerdy writeup at some point in the future.

Blue Cross Blue Shield of NC Lies in its Commercial

Blue Cross Numbers Lie

The existence of misleading advertising is pretty much a given -- we're all desensitized by it to the point that it is hardly noticeable. The other night however, something different caught my ear, an advertisement by Blue Cross Blue Shield of North Carolina. It goes beyond misleading and tells an outright lie.

Before I get ahead of myself, here is a transcript of the commercial.  The image above is of the number in question. The bolded text is the sentence in question.

Think you can't afford health insurance? Let's run the numbers.

[Screen shows $7,026]

Woah! That's how much each American is likely to spend on health care this year. So how can you afford not to have reliable health coverage.

Blue Cross and Blue Shield of North Carolina offers a full range of plans for as little as $113 per month. You get coverage for all this and more. Plus a large provider network. Log on and let us run the numbers for you.

For a free rate quote, log on today.

At first this might seem a bit like a classic misleading technique where a mean value is used with weasel words like "typical" or "average", when it would probably be more appropriate to use a median instead. In this case, because of the wording in the commercial, it's much worse. It's an outright lie. Let's break it down:

The Number: $7,026

The number they are quoting in the commercial is from the CDC as they cite. It is the per-capita health care spending in 2006. It's a bit odd that they would use a number that is so old when newer ones would be potentially more convincing, but my problem doesn't lie with the number itself.

Per-Capita Spending

The key issue is that they are presenting an average, per-capita health care spending, as likely. At best, this is sometimes the case. In the case of health care, it is NOT the case. The average amount of health care spending is HIGHER than the median amount of health care spending. To put this differently, UNC's Geography Department graduates earn more than any other department because Michael Jordan was a Geography major. Healthcare is similar: large outliers pull up the average.

The Lie

According to government statistics this is true:

$7,026. Each American is likely to spend less than this on health care this year.

According to Blue Cross and Blue Shield of North Carolina, this is true:

$7,026. That's how much each American is likely to spend on health care this year.

Can these both be true!? I certainly don't think so. Portraying an average as typical is one thing, but this is an outright lie. Why is this ok?

Greeked Style Guide


Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis.

Header Level 2

  1. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  2. Aliquam tincidunt mauris eu risus.

Blockquote p.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.

Header Level 3

  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  • Aliquam tincidunt mauris eu risus.

Header Level 4

		 * Actual syntax highlighter colors.
		#header h1 a { 
			display: block; 
			width: 300px; 
			height: 80px; 
Header Level 5

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.