(Old) Homepage Design

Fri 12 March 2010

I've decided my old homepage was bad enough to revisit now that I've got a bit more content hosted deep within it. I replaced my crappy hand written HTML with tools written this decade, and threw in some amateur visual design.

The software

Firstly, in order to keep the webpage fresh with little effort, I've chosen RSS aggregation as the method of content generation. Since I know Ubuntu and Debian both use Planet, that's where I first looked. But it seems Planet 2.0 is aging, and the fork Planet Venus brings some neat new options. It expands the selection of templates, adds a configurable RSS filter step, and makes the normalization step configurable.

It's also packaged in Ubuntu as planet-venus, making it fairly simple to set up. Deployment was a little tricky, as the package leaves most of the site configuration to the admin. You'll need a config.ini (I used /etc/planet/planet.ini), a template dir (/usr/local/share/planet-venus/theme), a cache dir (/var/cache/planet) and an output dir (somewhere in /var/www typically). Finally, you'll need to set up a cron job to run the static output generation script regularly. The script reads all the feeds and parameters in config.ini, caches the results to save bandwidth on subsequent runs, passes them to the template engine, and places the final product in the output dir.

When building a lifestream style site, you have to be picky about the kinds of feeds you put in or it gets Facebook / Twitter style spammy. This is where the RSS filter step can help; Planet Venus comes with a few filters like 'notweets', and a few stripAds filters to cleanse ads before republishing. It's the same design pattern I talked about before here with Liferea. In the future I could write one to add in comment feeds and then filter out everything that fails to meet some strong quality criteria.

Output templates

Planet Venus's real selling point to me is using Django templates. I've been meaning to learn Django for a while now, and this is a pretty good way to work with the templates portion of Django. And again, the filter pattern pops up. Here, filters take python variables as input; in Planet Venus's setup you have access to feed and item variables, as well as planetwide settings. One example filter might be to simply pluralize a word based on a variable (yes, you can even handle 'y' pluralization). Another example is the urlize filter that adds HTML anchor tags to likely URLs (not so great when you already have anchor tags in the filter's input).

I also use templates to generate an RSS feed. Nothing difficult about it, since the input to templates is basically an RSS feed to begin with. To reduce the probability of bugs, I translated a provided example htmptmpl RSS template into Django, and it's much smaller and clearer to me. Unfortunately, there's a bug in Planet Venus that prevents the use of multiple Django templates. I've reported it upstream, and I'm sure I can fix it or work around it.

Web Design

I also decided to take a look at CSS layout frameworks, to get up to speed on the subject quickly. 960.gs is popular, but it's 960 pixel width assumption works poorly with quirky resolutions found on massive monitors and smartphones. Luckily, I found found fluid960, which is very similar, but implements fluid layouts. It retains the CSS class names of 960.gs, so tutorials and documentation on one translate fairly well to the other. Which is good, because fluid960 pretty much relies on you already knowing regular 960 (I didn't). This presentation gives a good summary of things you might want a CSS framework for, and this 960 tutorial covers what I needed to know.

Color scheming is probably the hardest part for me. It's simple to pick a color pallate that goes together, but there is a higher level opportunity to communicate something through visual design. I could choose a purple scheme to reflect my collegiate experience, or an Ubuntu pallete, but it seems inappropriate for a personal site. I've got a bit of low level coding experience, so I could go with a green on black terminal theme, but it's been done to death ever since the Matrix, and it's basically impossible to beat jwz's version.

Since I'm not really looking to break into web design, I went with a relatively muted color scheme that organizes the content without distracting from it. Truthfully it doesn't matter all that much, as experience shows the majority of hits will come via RSS.

Well, that's basically all there is to my automated homepage system. On to more important things, like setting up a calDAV server or a feed processing tool.

Comments !