This is it, then. A total redesign—that thing I had insisted I would never do.

My motivation? Basically, I’ve spent about nine months trying to get justified text to look good on the Web (mainly by adjusting the word-spacing, line-height and sometimes letter-spacing properties) and I have totally failed. As the old layout was basically designed around the single column of justified text, my only real option was a total redesign—the old site looked completely wrong with left-aligned type.

The other motivation was this new Internet thing called HTML5. While the old design had already been updated to use the new semantic elements, the HTML5 Outliner may as well have looked at me and said, “David, you are a complete idiot for even taking such a stupidly simplistic view of semantication. Go and sit in a hole.” Needless to say I took far too simple a view of how HTML5’s semantic elements work: they are incredibly complex but make a fantastic way for machines to determine the structure of a webpage. Finally, I think I’m almost there with a fully-semantic website—though there are clearly still areas where I am bound to my old XHTML1/Transitional ways of working.

The change to Helvetica was a no-brainer. It’s one of my favourite all-time fonts, obviously, (as is Gill Sans) but I was dissatisfied with Gill Sans because the bold weight included with OS X is way, way too heavy for my tastes. Gill Sans MT included with Windows doesn’t seem to have this problem, which is weird. No doubt I’ll one day load up this site on a Windows box, retch at Arial and decide to switch to something else.

The other interesting font choice is the new monospaced font, Inconsolata, recommended to me by Dan Benjamin. I wanted to roughly match the x-height of my body font with the monospaced font. My favourite programming font is Monaco, [I use Monaco 10 to write almost everything. ] which only really works well without anti-aliasing. Taking Monaco past 10pt to achieve a matching x-height ruined its look altogether. Inconsolata is designed for this sort of thing, so I linked it with an @font-face declaration and was done with it.

Things I Like

• Paragraphs. The new CSS3 x + y selector lets me properly indent paragraphs automatically, without applying indentation to the first paragraphs immediately following headers.
• Link Posts. Setting their headers inline reduces their prominence and calls them out as something completely different from the main articles.
• The headers of articles. Again, they are totally different from links. Setting them centered was inspired when a saw a copy of the Inverness Press and Journal whose practice is to set all headlines centered.
• The overall width of the page. The old design had a 550-pixel–wide text column but because of the sidenotes, navigation and timestamps, the viewport had to be about 800 pixels wide to avoid horizontal scrolling.

Things I Don’t Like and/or Aren’t Done Yet

• Timestamps. Coming soon.
• The overall page header. Spacing is all wrong. Soon to be rectified.
• Marginal notes. I wanted to set them at 8pt but I couldn’t get the baselines to line up with the main body text. In the end I set them at 10pt Light weight and was done with it. I’ll sort them out some day.
• Basically, everything still needs a little polish to get it shiny.
• Someday I’ll get round to implementing syntax highlighting in my code blocks. (probably with JavaScript)
• Not all lines seem to have the same leading, depending on what’s on them. This is one of those annoying things about CSS which never fails to get me worked up, but I’ll sort it on a case-by-case basis over time.

HTML5 provides a new input type for selecting colour values, which, as yet, is unimplemented by any browser. The specification says that colours must be provided in the standard HTML hex-triplet format of a hash followed by six hexadecimal characters. Due to the obvious usability problem associated with asking people to input a cryptic sequence of characters representing a colour, not many people have yet started to use the type="color" attribute, unlike input-types such as search which can apply to all search fields on a site, and make hardly any difference at all.

However, a little back-end chicanery allows us to implement a user-friendly version of the color selector right away, which both allows users to type in the names of colours such as ‘light eggplant,’ ‘tea,’ and ‘booger,’ while also accepting hex-triplet (as required by the spec) and RGB(A) triplet/quadruplet format (for smart-arsed users).

Using a table of colours called rgb.txt (I recommend this one by Randall Munroe, as the colours were chosen by mass consensus rather than arbitrarily) which converts names to hex-triplets, and a smart piece of regular expression magic to liberally match triplets and quadruplets, I came out with this code, which returns an array(int red, int green, int blue, int alpha)—you can convert it back to a hex triplet easily enough with the built-in dechex function.

Here’s the code:

function colormatch($color) {
  $rgbtxt = explode("\n", file_get_contents('rgb.txt'));
  $colornames = array();
  foreach ($rgbtxt as $pair) {
    $pair = explode("\t", $pair);
    $colornames[$pair[0]] = $pair[1];
  }

  if (isset($colornames[strtolower($color)])) {
    $color = $colornames[strtolower($color)]; // the hex triplet will be converted to RGB dec values later.
  }

  if (preg_match("/^(rgb(a)?)?\(?([0-9]{1,3}), ?([0-9]{1,3}), ?([0-9]{1,3})(, ?[0-9]{1,3})?\)?$/i", $color, $matches)) {
    $red = ($matches[3] > 255 ? 255 : $matches[3]);
    $green = ($matches[4] > 255 ? 255 : $matches[4]);
    $blue = ($matches[5] > 255 ? 255 : $matches[5]);
    $alpha = ($matches[7] ? ($matches[7] > 255 ? 255 : $matches[7]) : 0 ); // alpha is optional

    return array($red, $green, $blue, $alpha);

  } elseif (preg_match("/^#?(([0-9a-f])([0-9a-f])([0-9a-f]))(([0-9a-f])([0-9a-f])([0-9a-f]))?$/i", $color, $matches)) { // colors from rgb.txt are converted to (r, g, b) here.
    if ($matches[5]) { // not the short form
      $red = $matches[2].$matches[3];
      $green = $matches[4].$matches[6];
      $blue =  $matches[7].$matches[8];
    } else { // short form triplet
      $red = $matches[2].$matches[2];
      $green = $matches[3].$matches[3];
      $blue =  $matches[4].$matches[4];
    }

    return array(hexdec($red), hexdec($green), hexdec($blue), 0); // 0 for alpha--not set by hex triplet
  } else {
    return 0; // 0 == error, unmatchable. try and avoid this.
  }
}

This code, as far as I can tell, will match every single one of the following values correctly (with the rgb.txt I linked to above):

red
green
indigo
dark red
Red
Green
Indigo
Dark Red
78, 92, 156
78, 92, 156, 0
(67, 154, 243)
(67, 154, 243, 127)
rgb(67, 154, 243)
rgba(67, 154, 243, 127)
78,92,156
78,92,156,0
(67,154,243)
(67,154,243,127)
rgb(67,154,243)
rgba(67,154,243,127)
#f8ed56
#23f
f8ed56
23f
#F8ED56
#23F
F8ED56
23F

I’ve made a small demo and a test script that takes a file with each line populated by a possible colour match.

Sadly, WebKit’s color input-type doesn’t seem to be able to handle spaces in an input right now, which is likely intentional given the spec’s requirement for a hex triplet. I’d advise sticking with text if you’re going to use this script to allow users to specify colours.

• Finder renamed to ‘iFinder.’
• Safari renamed to ‘iSafari.’
• Mail renamed to ‘iMail.’
• etc. All apps not beginning with ‘i’ will now begin with ‘i.’
• iTunes, as the most well-known iApp, will have the honour of becoming the first i-iApp. Now known as ‘i-iTunes.’ Sailors around the world are delighted.
• The AppleScript utilities are moved from /Applications/Utilities/ to /usr/bin/share/applescript/edit/user/gui/utils/.
• Apple announces that Cocoa is switching from Objective-C to INTERCAL, or rather an object-oriented version of it called Objective-INTERCAL.
• Carbon support is dropped totally. Adobe are outraged.
• Flash is removed from the default installation. Angry Internet people make jokes about how Macs are rubbish because they don’t play Flash (ignoring that it isn’t default on Windows either), in a manner analagous to those who argued for years that Macs were equivalently crap because they lacked a second mouse button, neatly ignoring the fact that after Mac OS X arrived, you could plug in any two-button mouse and it would work fine, and that even with a one-button mouse and on MacOS 9, it was possible to perform an equivalent command by holding down the control key and clicking. In this case, a simple visit to Adobe’s website allows users to install Flash for themselves.
• Macintosh users stop posting stupid joke prediction lists to their blogs as a new iWebKit feature called iNoJoke prevents them from doing so.