aaron@traas.org

It's been a long time coming, but as an activity related to my recent job hunt, I sought to redesign and rebuild this humble web site. The original design served me well, but it was the best design I was capable of in 2005, and my abilities have progressed. I hope my handful of readers find this format more pleasant.

Design

Since it's safe to rely on @font-face support in browsers today, I wanted to try a very modern, clean, type-driven design. I initially started with Helvetica Neue: a classic, attractive sans-serif font that still manages to look modern after all these years. However, particularly on Windows PC's, it doesn't render well. It's also so very common and recognizable, and it would cost me at least $10 a month for access to it as a web font. As I'm a fan of Google's Android OS, I decided to go with Roboto, a Grotesk font that certainly borrows a lot from Helvetica, but is distinctly different, and freely served from Google Font API. Plus, it's available in 6 different weights, including light weights which I wanted to use on my headlines.

This is the first site I've built with a mobile-first perspective, and it's responsive with 5 distinct breakpoints. The HTML and CSS code have been tuned for scrolling performance, small transfer size, and speed in general. It should behave very nicely on modern phones and tablets, and scale up well in a desktop browser. If you are using a fairly current version of Chrome or Firefox or Safari, feel free to resize the browser window. There's some fun stuff there. I've also added invisible skip links for accessibility purposes, though I'd still like to do more testing with a screen reader.

Along with this site, I've also built resume.traas.org, a responsive, HTML5 résumé that prints very nicely. It has a similar aesthetic to traas.org, and works nicely on all sorts of devices and sizes.

Framework

The back-end has also been completely rebuilt from scratch, and I'm happy to say that it's roughly 1/20th the number of lines of PHP code. This has been a strong trend from version 3, where I decided to stop maintaining my own blogging engine and outsource that to blogger. In fact, the only code from 3.0 that lives on is the piece that parses the XML from the RSS feed that Blogger publishes to present the content on the front page of the main site. The big reduction in version 4 is the removal of the database-driven CMS_—_no longer is the page content stored in a database. Instead, most of it (save the complicated bits) are stored in static Markdown files, which are checked into my Mercurial repository and deployed via my Ant/Python build scripts.

The build/deploy system is most exciting to me; it's removed the human factor from deploying to the staging and production servers, and allows me to iterate more quickly without the worry of breaking something.

In my quest for lightness, I ditched CodeIgniter for a super-lightweight custom framework that I've been using for a number of simple projects that I call Basic Site Template. I plan on open-sourcing it when it becomes a little more mature. It includes simple template parsing, JavaScript linting, on-demand CSS/JS minification, scriptable sprite building, resource cacheing, some ultra-basic unit tests, a deploy system, and a framework that provides a very loose MVC structure that just gets out of the way.

New Features

The most interesting new feature I added was the ability to call me with an online form using Google Voice. Google offers a widget to do this, but it's ugly and built in Flash. I did a little research, and found that there's an undocumented, unofficial API that a few people have tinkered with, and with about two days worth of trial and error, I was able to get it to work.

The Twitter widget in the contact page, on the other hand, was stupidly easy. And the email component I've done a thousand times.

The Future

Though I feel a great sense of accomplishment, there's still a lot I want to do:

• Modify the config system to use JSON rather than hard-coded PHP objects.
• Remove the dependency on Ant; use or make a full Python-based deploy system.
• Agressive use of sprites for the Portfolio page.
• Optimize the caching system_—_I think I'm stating files more often than is necessary.
• Clean up CSS, particularly the forms stuff. I think I have a bit more in there that's unused.
• Add more pre/post-deployment tests, so I can see if something went wrong during deployment.
• Automated PDF generation for my résumé.
• Build a subset of Font Awesome for the handful of icons I use on the page.
• Make use of a CDN for JavaScript, CSS, and images

Do you have any suggestions? I'd love to hear them.