If this is your first time visiting the blog (or you use an RSS reader), this post won't really make a ton of sense. But the veteran Box Truck Buffs might notice that the site looks quite a bit different today. For reference, the old site:

With the truck getting a makeover, I figured it was just about time the blog did the same. Over the past few months, I've been working on the redesign haphazardly and in random bursts whenever the mood strikes me, and I think it's ready (or close enough) for prime time. But why even redesign the blog in the first place?

In the Beginning

When I first "designed" the blog, I had just moved out to California and was juggling buying the truck, getting all my paperwork in order, starting a new job, and a bunch of other random things. With all that on my plate, I didn't have a ton of time to spend on building the blog. And since I hate CSS with a fiery, burning passion, I spent the vast majority of my time working on the backend. What all of this meant is that I basically slapped some Bootstrap on the frontend and stole utilized the Bootstrap blog template, more or less unaltered. Aside from a few minor tweaks and additions over the past two years, the layout of the blog hadn't changed all that much.

But it always kind of bothered me just how bland and uninteresting the blog looked. And at the risk of sounding like a self-involved faux-philosophical starving artist-type, I wanted the blog to look more like a reflection of my own ideals, mainly simplicity and minimalism. Not that the previous design was particularly ornate, but it didn't look anything like it would have if I'd made it from scratch.

Making it from Scratch

The first thing I did was delete the Bootstrap CSS and JavaScript, which are over-engineered for my needs anyway. Then I spent a few months attempting to do and redo the site in a variety of CSS frameworks. It turns out there are quite a few to choose from, each with their own set of features, benefits, and drawbacks. Personally, I just wanted something basic: a CSS Reset, a grid, and maybe some consistent form and button stylings. Eventually, I settled on Skeleton, which was pretty simple and straight-forward. I didn't realize that it hadn't been updated since 2014 until I was already in too deep. Oh well. The world of frontend development moves nauseatingly fast.

What Actually Changed?

Death of the Savings Clock

The Savings Clock was one of the first things I added to the site. It served as a symbol for my progress, and gave me some fun milestones to watch for. It did a good job of showcasing how ridiculous rent prices in the Bay can be — for example, I had saved more than the total cost of my student loans after only a year.

But it had some problems too. For one, it wasn't accurate, and it never could be. There are just too many dynamic factors to consider (rent price, insurance costs, depreciation, etc), so the numbers mean less and less over time. On top of that, having a savings clock doesn't send the message I'm trying to get across. An always-ticking money counter on the side of the blog says, "Hey, I'm forcing myself to live in a truck because I'm some sort of Mega Scrooge™, look at the fruits of my unrivaled cheapness and mental instability." As I've surely beat to death in other posts, that's not what this is about.

Anyway, as a part of the redesign, the savings clock has kicked the ^(Bit)bucket. It served its purpose admirably, but its days of countin' are done.

"About Me" Page

As it turns out, I'd never actually explained anything about who I am, except in little random tidbits disbursed across a hundred or so posts. Not very accessible. I figured a brief intro wouldn't hurt, so, it's hiding under the "About" section at the top.

"Ask A Question" Page

I've long had a place for people to ask questions, which is great. But I get the same set of ~10 or so questions over and over again, which is less great. So I added a short FAQ with answers to a few of those common questions, and strategically moved the question box over there. If I'm lucky, maybe people will stop asking "Where do you go to the bathroom?" with the same frequency I actually go to the bathroom.

The Little Things

While Bootstrap is built to be responsive, I hadn't done anything special for the mobile-version of the site before. This time around, I made sure I was paying attention to all of the little stuff that gets annoying on mobile. Hopefully this new site makes good use of screen real estate on mobile, without being too crowded.

A small feature people had asked for was the ability to view higher-resolution versions of inline images in posts. Now, you can click on images to "zoom" in, though I make no guarantees on how well this actually works.

What's Next

Webpack

Webpack is a technology I'd like to add to the mix at some point. Basically, it takes all of the assets in a site (JS, CSS, Images) and smooshes them into one file for each type, nicely minified and stuff. Removing Bootstrap was a good start, loading the post index now requires 11 requests and 81 KB, where it used to take 16 requests and 184 KB. Webpack and gzip can likely shrink that way further.

Comments

I've mentioned this before, but I'd really like to add comments to the site and allow for some discussion. I have a working integration with Disqus, but I'm considering rolling my own solution, for maximum flexibility and minimal external dependencies.

RSS/SEO Improvements

While the RSS feed works, it's not as fully-featured as it could be, particularly around things like images. Similarly, there are some <meta> tags I could add to posts to make it clearer for search engines and screen readers what's going on in a given page.

Build Your Own Savings Clock

When one savings clock dies, another is born. I've been working on a new page for the site that allows people to track progress on something they care about, whether it's dollars saved, calories burned, tacos eaten, you name it. It's not quite ready for prime time yet, but I'll definitely post when it is.

---

Brief aside: Like all projects I work on in my spare time, I expect there to be a few hiccups and bumps with the updated site. As always, send me an email or a question to let me know about any problems with the site.