Erik Trautman logo crest shield seal

Erik Trautman

Technical entrepreneurship, business strategy and product development

Rebuilding Modern Wanderlust

The Old

Building modernwanderlust.com (my old blog site) was a fantastic starter project to break into web development. I basically followed a tutorial on Udemy that used an AMP (Apache/MySQL/PHP) stack and hacked, smashed and sweated my way to a working prototype over about a month during the summer of 2012.

And ever since it launched, I've been terrified to change anything. Think about the first thing you ever built... how robust and modular was your code? Yeah, this is probably worse. Couple that with the fact that all my focus has gone into learning Ruby and Rails (NOT PHP), and you can understand why I've had this thing in my sites for a major overhaul. Given my new Rails wizardry, it couldn't take more than 4 hours on a weekend, right?

Famous last words for a side project, of course... It's been several weekends spaced out over a couple months :)

The New

I decided to rebuild the site completely from the ground up on Rails as an exact replica of its PHP progenitor before going in and mucking around with things. I'm not exactly sure why I did this other than for some vague sense of closure, so I could actually say that I was iterating from the old design instead of just making up something totally out of the blue. In any case, I've finally managed to hit that specified level of sameness and functionality so it seems like a good time to end the writing embargo as well and explain how the rebuild took place.

Just like the first time, I didn't want to use any out-of-the-box CMS systems because A) I'm apparently still a control freak and, B) I really wanted a chance to play with the database schemas, image storage, and markdown rendering on my own.

Setting up the basic framework for the site went swimmingly. It's just a simple CRUD app at the core, after all. Plugging it into Bootstrap (which I already regret doing) and setting up the basic layout was straightforward as well.

Things got a bit more complicated for setting up all the ActiveRecord relationships to allow tagging/categories and a complex submission form but still familiar ground. Pagination, even with the will_paginate gem, was a bit confusing. Mostly this is Bootstrap's fault for moving to version 3 without backwards compatibility and not informing 90% of the gems and Stack Overflow posts out there first.

One new wrinkle for me was moving all my images (there are a LOT) up to Amazon S3. I initially tried to stuff the whole directory into my public folder and Heroku rightly rejected the whole slug as being way too big (they've got a 300mb limit apparently). So I got to learn a bit more about git as I backtracked and removed all the images from the commit history.

It turns out that setting up S3 is surprisingly easy -- I was actually able to preserve my original image directory structure perfectly (which was my biggest fear, since I didn't want to have to rewrite all the links manually). Blazing fast load times, here I come!

Migrating the Legacy Posts

I added devise for authentication and was pretty much good to move on to phase II: integrate the existing database. That's where things slowed way down. I don't even know what type of database is actually used by InMotion hosting but I do know that it wasn't nearly the schema that I wanted to use on my shiny new Postgres database on Heroku so I knew that I wouldn't be able to do a direct import.

After flailing around for a bit trying to come up with a clever way to map the old database smoothly into the new, I finally did the filthy dirty ugly thing I dreaded. I downloaded the posts into MS word (oddly the only program that reasonably displayed the text dump) and did a bunch of find/replace's where I had to. Then I manually re-inputted each post into the database, including its taggings and original creation date.

I want to take a shower every time I think about all that inelegant effort.

I'm sure there are still some strange artifacts hidden within the individual posts because I originally wrote many of them using MS Word and didn't realize all the "user friendly" things that Word does which essentially destroy the integrity of your file for any other purposes. Like the "smart quotes" and ellipses and other nonstandard characters which have no good mapping into the database I was using.

It's actually interesting how I've gone backwards in the sophistication of my word processing to using a relatively plain text editor and I absolutely love it. It provides such a wonderful focus on the content without any worries about formatting.

The next step in the rebuild was to maintain backwards compatibility with my old post links. I had been using a really ugly naked format for grabbing posts, something like http://www.modernwanderlust.com/show_post.php?id=100. I wanted to go with the much more RESTful and conventional /posts/post_title_slug format.

That meant I had to create a friendly slug for each post based on its title. This wasn't too hard once I eventually discovered the friendly_id gem. There were a few hiccups since I was doing migrations to add database columns to existing data and I certainly got a more intimate understanding of the rake db:migrate and rake db:rollback process.

I also had to provide a mapping from all the old post URLs to the sleek new ones so people who had linked to the old ones wouldn't get 404'd. At first, I figured I'd have some sort of master redirects database table which mapped each post to its new location. That felt pretty dirty since I certainly didn't want to have to hit a database just to redirect. Luckily there was enough linearity in the ids to do something simpler. I created a redirects controller which just had a simple method that remapped the id's from the old posts to the new ones with a manageable number of elsif statements. Imperfect but good enough.

All the old posts were written in bare-metal HTML but I wanted the new posts to render intelligently using markdown, so I found the redcarpet gem and used it to create a helper method to render those files which were specified as being markdown. Incredibly easy and also incredibly satisfying to see in action.

Once I had the markdown displaying properly, all that was left was to bolt on some Heroku add-ons and Google Analytics tracking. And here we are...

The Future

But the site you're looking at now will likely bear little resemblance to the one this post describes because I pretty much hate what I'm looking at now. It's amazing what a difference a year has made to my creative eye. I can't wait to actually apply some design and typographical best practices. I'm also looking forward to setting up a portfolio section for my photography and for my web projects, something I didn't really have the flexibility to do with the old design. Not to mention creating an image uploader directly to the proper folder of S3... mmmmmm....

Creativity paired with capability is addictive stuff.

This site is available open-source on Github HERE.

Tags:   The Blog Project