Today is the day I stop using Git and start using Mercurial. Installation of hg was easy since I have Python and SetupTools installed on my Mac's OS X:

easy_install -U mercurial

Setting up the web UI was easy too (hgwebdir.cgi is located ...), I put hgwebdir.cgi in the default CGI folder on OS X for Apache:

mkdir /Library/WebServer/CGI-Executables/hg
cp hgwebdir.cgi /Library/WebServer/CGI-Executables/hg/.

Then create a config file for hgwebdir.cgi, 'vim hgweb.config':

[paths]
/virtual/path/displayed/by/UI = /real/path/to/hg/repos/**

...and stick it somewhere sensible (the ** means it'll recurse that directory *and* subdirectories, allowing you to display multiple repositories). You'll want to edit hgwebdir.cgi and change the path to the config file to wherever you put it, like this:

application = hgwebdir('/path/to/hgweb.config')

And that was it, worked for me, might not for you though. Oh yeah, converting my old Git repositories was easy too:

hg convert -s git path/to/git/repos

Then simply hg update the converted repos (which will be a new repos with -hg concatenated to the name).

And also, I made the urls neated by adding this into my httpd.conf

ScriptAliasMatch        ^/hg(.*)        /Library/WebServer/CGI-Executables/hg/hgwebdir.cgi$1

Which makes the UI available at http://localhost/hg/

I found that when I had mixed Git and hg repos' in the folder hgweb was looking at it in [paths] would take forever to load, so I just moved them into their own folder and it was all much quicker.

Alex Russell wrote an article on the asynchronously loading Google Analytics (ga.js) with Dojo, and why it's a good idea, you can do something similar in JQuery:

$(document).ready(function() {                                                                                          
    $.getScript("http://www.google-analytics.com/ga.js", function(){                                                    
        try {                                                                                                           
          var pageTracker = _gat._getTracker("XX-123456-12");                                                           
          pageTracker._trackPageview();                                                                                                                                                                  
          });                                                                                                   
        } catch(err) {}                                                                                                 
      });                                                                                                               
  });     

I've got a demo of it running here, watch HTTP traffic in Firebug or something to see what's happening.

If a designer hands you a layout with a lot of complex, repeated elements it can be a chore to work with, but with JavaScript you can make life a little easier for prototyping.

Say we have a table that needs to be mocked up with a *lot* of rows, the HTML for one design-element might look like the content of this tbody element:

    <table>
      <tbody>
        <tr>
          <td rowspan="2">foo</td>
          <td>bar</td>
          <td>baz</td>
          <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tincidunt varius ante.</td>
          <td>0</td>
        </tr>
        <tr>
          <td colspan="2">3 days ago</td>
          <td>http://url/path/to</td>
          <td>quux</td>
        </tr>
      </tbody>
    </table>        

You can use JavaScript, in this case using the JQuery library, to clone the tbody element and repeat it ad nauseum, making it much easier to edit and play with larger design-element sets:

for (var i=0;i<25;i++) {
  var tbody = $("table tbody:first").clone();
  tbody.appendTo("table");
}

This loop grabs the first tbody of the table and appends it to the table content 25 times, so you can have the simplicity of working with a single design-element and the function of seeing the project working as it should with multiple design-elements throughout the build process.

I wanted to use the full range of weights available in Myriad Pro in a web page, as noted elsewhere Font-weight is still broken in all but one browser so it requires some hacking, also since the full weight range of Myriad Pro is only available to a fraction of web users I wanted to use @font-face, which also requires some fiddling to make @font-face work in IE. So the resulting CSS to utilise Myriad Pro in all it's weights across the main browsers is:

<style type="text/css">
@font-face {font-family: Myriad Pro Light; font-weight: 200; src: url('/path/to/fonts/MyriadPro-Light.otf')}
@font-face {font-family: Myriad Pro; src: url('/path/to/fonts/MyriadPro-Regular.otf')}
@font-face {font-family: Myriad Pro Semibold; font-weight: 600; src: url('/path/to/fonts/MyriadPro-Semibold.otf')}
@font-face {font-family: Myriad Pro Bold; font-weight: 700; src: url('/path/to/fonts/MyriadPro-Bold.otf')}
@font-face {font-family: Myriad Pro Black; font-weight: 800; src: url('/path/to/fonts/MyriadPro-Black.otf')}

.mp-light {font-weight: 200; font-family: "MyriadPro-light", "Myriad Pro Bold", "Myriad Pro"}
.mp-regular {font-weight: normal; font-family: "Myriad Pro"}
.mp-semibold {font-weight: 600; font-family: "MyriadPro-Semibold", "Myriad Pro Semibold", "Myriad Pro"}
.mp-bold {font-weight: 700; font-family: "MyriadPro-Bold", "Myriad Pro Bold", "Myriad Pro"}
.mp-black {font-weight: 800; font-family: "MyriadPro-Black", "Myriad Pro Black", "Myriad Pro"}
</style>

<!--[if IE]>
<style type="text/css">
@font-face {font-family: Myriad Pro Light; font-weight: 200; src: url('/path/to/fonts/MyriadPro-Light.eot')}
@font-face {font-family: Myriad Pro; src: url('/path/to/fonts/MyriadPro-Regular.eot')}
@font-face {font-family: Myriad Pro Semibold; font-weight: 600; src: url('/path/to/fonts/MyriadPro-Semibold.eot')}
@font-face {font-family: Myriad Pro Bold; font-weight: 700; src: url('/path/to/fonts/MyriadPro-Bold.eot')}
@font-face {font-family: Myriad Pro Black; font-weight: 800; src: url('/path/to/fonts/MyriadPro-Black.eot')}
</style>
<![endif]-->

Myrad Pro's licence is restrictive though, so maybe try something from this list of fonts available for @font-face embedding.

I generally like to keep my declarations to one line, it makes it easier for me to read. I generally like to keep each line sorted alphabetically, it groups classes, IDs and most elements. In Vim this is done by calling !sort on a visual block. I generally like to keep the properties sorted alphabetically, it makes it easier to scan the line. In Vim this is done by calling !css_sort.pl, a Perl script of mine:

#!/usr/bin/perl -w
use strict;
while (defined(my $line = )) {
  $line      =~ m/^(.*)\{(.*)\}/;
  my $element = $1;
  my @list    = split /;/, $2;
  @list       = join ';', sort { $a cmp $b } @list;
  print STDOUT "$element" . "{@list}\n";
}

@rules need to stay at the top though, and any form of reset is kept to the top too.

What I'm saying here is that I write my CSS in a way that suits me, but when it comes to working with others I can easily reformat the file to match their writing style or vice versa. It really doesn't really matter how you write your CSS, just as long as it's consistent across the team.

Following on from this week's Road to HTML5 post, and the comment from Ben Millard, here is the part of the .htaccess for this site (hosted on Dreamhost) which sets the character encoding for HTML, JavaScript and CSS:

AddType "application/x-javascript; charset=utf-8" .js
AddType "text/css; charset=utf-8" .css
AddType "text/html; charset=utf-8" .html .htm

Something I've been thinking about for a while is a CPAN program like tool for UAs, allowing the user to, for example, install the latest JQuery locally on say Firefox, and thus for sites that use JQuery there is no need for Firefox to use the network to get that particular script. It turns out that the Google Ajax Libraries API is a step in this direction. From Dion Almaer:

If we see good usage, we can work with browser vendors to automatically ship these libraries. Then, if they see the URLs that we use, they could auto load the libraries, even special JIT'd ones, from their local system. Thus, no network hit at all!

And since Google own a UA in the form of Chrome (which feeds back into Webkit) that's pretty exciting, though I'm sure the road from here to there is full of all kinds of challenges.

This is a perl script I wrote (with some help from Stray Taoist) to spell check a website for Nelly, since Steve was asking to have a look at it for something in work I thought I would put it here.

#!/usr/bin/perl

use warnings;
use strict;

use WWW::Mechanize;
use Lingua::Ispell qw( :all );
$Lingua::Ispell::path = '/usr/bin/ispell';
Lingua::Ispell::allow_compounds(1);
Lingua::Ispell::use_dictionary('/path/to/ispell/lib/english.hash');
Lingua::Ispell::use_personal_dictionary('/path/to/.ispell_custom');
use HTML::Element;
no warnings 'redefine';

my $target = 'http://www.site.com/'; # the site you want to spellcheck

our $nillio = [];
local *HTML::Element::as_text = sub {
  my ($this,%options) = @_;
  my $skip_dels = $options{'skip_dels'} || 0;
  my(@pile) = ($this);
  my $tag;
  my $text = '';
  while (@pile) {
  if(!defined($pile[0])) { # undef!
      # no-op
   } elsif(!ref($pile[0])) { # text bit!  save it!
    $text .= shift(@pile) . ' ';
   } else { # it's a ref -- traverse under it
     unshift @pile, @{$this->{'_content'} || $nillio} unless
       ($tag = ($this = shift @pile)->{'_tag'}) eq 'style'
       or $tag eq 'script'
       or ($skip_dels and $tag eq 'del');
    }
  }
  return $text;
};

sub spellCheck {
  my ($s, $mech) = @_;
  $mech->get($s);
  my $text = $mech->content( format => 'text' );
  chomp($text);
  for my $r ( spellcheck( $text ) ) {
    print "$r->{'type'}\t$r->{'term'}\t$s\n";
  }
}

my $mech = WWW::Mechanize->new();

$mech->get( $target );

for my $url ($mech->links) {
 next if $url->url_abs !~ /$target/;
 spellCheck($url->url_abs, $mech);
 # sleep 10;
}

The script will crawl your entire site and spell check each page, outputting a tab separated list for you to use in Excel or whatever.

Sunset over County Down from Scrabo Hill, Newtownards

From Bobulate, Anatomy of a Salutation:

“Just as you wouldn't ignore body language that indicates whether someone is intending to shake your hand or high-five you, nor should you ignore email-greeting intentions—no matter how well you know someone.”

I am forever procrastinating over how to start an email to persons unknown to me, and even those known to me.

On firing a tin of ravioli at a star destroyer:

“At around .998 c, the impacting ravioli begins to behave less like ravioli and more like an extremely intense radiation beam. Protons in the water of the ravioli begin to successfully penetrate the nuclei of the hull metal. Thermonuclear interactions, such as hydrogen fusion, may take place in the tomato sauce. ”

I've just spent half an hour reducing a test case for a browser bug in Camino related to table layout, only to find it's not a bug at all but my own ignorance. Today's lesson for me is that a table is only a table when it is set to 'display:table'.

So, if you're styling a table in HTML be careful not to use tr {display:block} as the browser will no longer treat the table as a table (even though it's only on the tr). The consequences of this are subtle layout differences to what you'd expect of a table (test case here, view with Camino, the width of the last cell in the last row is so ... odd).

---

Riggins is a 3 month old Black Labrador pup, he moved in with us at the start of December and while he pays no rent he is probably the most popular guy in the house. He is pictured above having just destroyed a roll of kitchen towels he found on the sofa.

Two new elements to HTML have been defined in the draft HTML5 spec, they are section and article. I'll be honest and say that when I first sat down to use these in a document I wasn't entirely clear what the difference was. Lachlan Hunt's article 'Preview of HTML5' on A List Apart is useful in understanding the difference, an article is a specialised type of section, it's independent and self-contained.

From messing around I think that a clue to the difference between them is that an article will almost certainly have a byline whereas a section is less likely to.

For now I'm going to work on the rule of thumb that unless I can clearly identify something as an article I'll use a section in the first instance.

This is a very short HOWTO on installing Gitweb on Mac OS X. Gitweb is a functional web interface to Git, the version control system, which allows you to browse your Git repositories using a web browser.

In this HOWTO I've made some assumptions about your set-up: 1) Git is already installed on your machine, 2) apache is your webserver and 3) that you haven't altered the default apache vhost conf or host file entry for localhost.

---

In your home dir (or wherever you build stuff from) try the following ($PATH_TO_PROJECTROOT is where ever you keep your git repositories, it's OK if some repositories are actually a few directories beneath that root, Gitweb will find them.):

git clone git://git.kernel.org/pub/scm/git/git.git
cd git
make GITWEB_PROJECTROOT=$PATH_TO_PROJECTROOT \
  GITWEB_CSS="/gitweb/gitweb.css" \
  GITWEB_LOGO="/gitweb/git-logo.png"  \
  GITWEB_FAVICON="/gitweb/git-favicon.png"  \
  bindir=$PATH_TO_GIT_BINARY

sudo cp gitweb/gitweb.css gitweb/git-logo.png gitweb/git-favicon.png /Library/WebServer/Documents/gitweb/
mkdir -p /Library/WebServer/CGI-Executables/gitweb
sudo cp gitweb/gitweb.cgi /Library/WebServer/CGI-Executables/gitweb/

Visit http://localhost/cgi-bin/gitweb/gitweb.cgi and you should have a web interface to your git repositories.

This is a personal weblog type site written by Stephen, a Front-End/UI developer (that is, I write HTML, CSS & JavaScript and use crayons, PhotoShop and Illustrator) living and working in Belfast, Northern Ireland.

If you've something you want to talk to me about you could email me at carisenda+about@gmail.com or on Twitter @hitman2victor I dumped my Twitter account, Twitter is awful; my LinkedIn profile is here.