About this Site

It's been a long time coming, but I've finally updated my homepage. This post is about some of the technologies I've used for the renovation.

Back to the Future

In the early days of the web, pretty much all the content was static pages. Someone wrote an HTML file and posted it on a server, and other people downloaded the file to read it. Simple.

Then came CGI, which let you write a Perl script that would respond to a request and return HTML generated on-the-fly. PHP made things dangerously easier, and pretty soon it was Web 2.0 and every two-page blog was backed by a database. Coincidentally, every two-page blog also ran dog-slow, and was vulnerable to SQL injection or remote file inclusion attacks.

The last few years have seen a yearning for the simpler times of old. But the web isn't just about HTML anymore. We have to deal with CSS, JavaScript, web fonts, competing desktop browsers, mobile browsers, web analytics, SEO, security, privacy, and more. No developer wants to renounce all the lovely modern web development tools. Can we have the best of both worlds?

Jekyll

This site is a collection of static pages generated by Jekyll. Jekyll takes a set of posts and a set of templates, does some magic, and spits out a pile of plain HTML files, ready to upload. And the wonderful part is that the posts and the templates can be written in the language of your choice.

The Right Tool for the Job

Like a lot of the best web tools, Jekyll is written in Ruby. Ruby's syntax is malleable, and Ruby programmers have taken to using a lot of domain specific langauges (DSLs) to make their lives easier. A domain specific language is either a special use of syntax within a general language like Ruby, or a small language of its own, that's designed to do one thing particularly well. The idea is best explained with some examples.

CSS

Cascading style sheets allows us to change the font, colour, position, and other styles of HTML elements. CSS is a domain specific language for declaring those styles, and it looks very different from HTML:

#content .post h1 {
  color: #ff0000;
  font-size: 14pt
}

Sass

Sass is another DSL that takes a step beyond CSS. With Sass you can use indentation rather than brackets, declare variables and mixins (like a function), and define your styles more efficiently:

$red: #ff1335
$large: 14pt
#content
  .post
    h1
      color: darken($red, 10%)
      font-size: $large

When you're done, a Ruby script converts you Sass code to CSS.

Slim

Slim is a lovely language for writing HTML templates. What I love about it is that there's nothing left to take away from the syntax:

doctype html
html
  head
    title = site.title
  body
    #content
      .post
        h1 Hello World!

I forked the Jekyll project and modified it to make it easy to use Slim templates. You can browse the code at https://github.com/jamesaoverton/jekyll.

Markdown

The content of this post is written in Markdown.

# Heading
A brief paragraph.
- List item one
- List item two

Again, there's just nothing left to take away.

Tools to Think With

Having the right tool for the job helps you get your work done faster. But I also believe that it helps you think more clearly about the task at hand. When the irrelevant details are pushed aside, you can approach the problem more directly.

Jekyll lets me use the latest DSLs to define write my posts and templates, and then generates a static site that does just what I want it to do. It's the best of the old and the new.