Behind the Scenes of Opus’ 5th Phase

By my count, Opus has gone through five major phases in its 15+ years. Phase one was a humble static website that was eventually powered by some truly rudimentary PHP. Phase two was a humble dynamic website powered by some slightly less rudimentary PHP and MySQL.

Phase three was the migration to ExpressionEngine, which was my first experience with the content management system that has since become the cornerstone for my freelancing endeavors. Phase four involved splitting Opus into two sites: the old site became “Opus v1” and the new site was built on ExpressionEngine 2. Content was then (slowly) migrated from the former to the latter.

So now we’re at phase five, and at the risk of sounding pretentious, it represents the biggest Opus transition since phase three, for several reasons.

1) A Clean Slate

Opus acquired a lot of content in the 15+ years of its existence: over 5,000 articles and reviews, in fact. And put simply, a lot of this content had become irrelevant, outdated, and uninteresting. Nobody, not even me (the original author), really cares about an announcement for a concert that happened ten years ago, or about a random post concerning my girl problems. Old content like this simply increased the amount of “noise” on the site and obscured the good, valuable, and still-relevant content.

So for Opus’ fifth phase, I cleaned house.

First, I wrote a couple of export scripts and archived all of Opus’ articles as YAML files. I did this rather than a database dump mainly because 1) I wasn’t sure what tool I’d be using to manage the new Opus, and 2) I like working with text files. I can keep each article in its own file, which is how my brain works, and it’s easy to make bulk edits (e.g., cleaning up the HTML, deconverting HTML entities) to multiple files in one fell swoop.

Once the content was exported, I needed to determine what content would be added to the new site for launch, and what content could be imported at a later date (or ignored altogether). Running a Google Analytics report to find the most popular entries over the last few months gave me a good idea of what’s actually being read on the site. That report, combined with a list of articles that I wanted to spotlight simply because I’m particularly proud of them, gave me the initial “salvage” list.

Which brings us to where all of this content would exist and how it’d be managed.

2) Craft

Opus had been running on ExpressionEngine for nearly a decade, and honestly, I was getting a bit restless. In addition to being a blog, Opus was always intended to be a sandbox where I can try new things — including new content management systems. Also, I was starting to feel constrained by ExpressionEngine — which is ironic because one of the things I’ve always liked about ExpressionEngine is its incredible flexibility. However, it’s also complex and comes with a host of features that are simply unnecessary and add overhead to a relatively simple site like Opus.

For the last year or so, I’d been researching and testing different systems as a potential replacement. Although it’s made tremendous strides in recent years, and its popularity is not unfounded, WordPress was out because of its inherently unstructured approach to content. Ghost looked interesting due to its stripped down, blog-centric focus, but it was too stripped down and because it’s still in beta, it’s missing some interesting features.

Which left two primary possibilities: Statamic and Craft, both relatively new systems developed by ExpressionEngine add-on developers.

I was initially intrigued by Statamic because it’s a flat-file CMS. This means your content is stored in specially formatted text files rather than a database. This has the advantage of greatly simplifying your website and increasing its performance (databases can be resource hogs), while also making version control and backups a snap. While working with a test site and going through the documentation, it became readily apparent that Statamic is a very well-designed tool, with some features that seem impossible for a text-based CMS.

But like Ryan Masuga, I came to the conclusion that I’m a “database guy”: working with flat files comes with some trade-offs that I didn’t want to make. Which left Craft, a decision that seems rather obvious in hindsight.

Craft is built by Pixel & Tonic, who’ve developed some of the most highly rated ExpressionEngine add-ons around (e.g., Matrix, Wygwam). One of the reasons for their add-ons’ success is that Matrix et al are exceptionally well-designed, both aesthetically and functionally. That attention to detail is equally present in Craft, and then some. It’s clean and streamlined, and full of little “moments of delight” (e.g., the animations that occur when you manage your posts’ tags and images). But beneath the streamlining exists a very robust model for managing your content, files, tags, etc.

One of the best examples of this is Craft’s “Matrix” field, which lets you organize your content into multiple customizable blocks. You define each post’s content structure on an individual basis, which gives you tremendous control when displaying that content. While there’s something appealing about having one field in which to manage a post’s content (à la WordPress or Ghost), or Medium’s lightweight approach to content management, or even Squarespace’s awesome new inline editing model, Craft works much closer to how my brain works. I tend to break down a post into its individual blocks — an image, followed by some text, then a video, following by more text, more images, etc. — and that’s precisely how Craft’s Matrix lets me work.

That’s not to say there haven’t been hurdles. After working with ExpressionEngine’s templating language for so long, I’m still wrapping my brain around Craft’s implementation of the Twig templating language. There are some surface-level similarities but Twig still feels fundamentally different to me; as a result, there’s been a definite learning curve once I got beyond the initial development. Thankfully, Craft has in-depth documentation, a pretty robust user community, and several helpful sites with Craft tutorials and developer resources.

3) Flexbox

As mentioned before, I’ve always viewed Opus as a sandbox where I can hone my developer skills as well as write about music, movies, anime, etc. However, it’s been a long time since I tried something truly new from a developer perspective. So, for phase five, I took the gloves off, threw caution to the wind, etc., and built everything around CSS’ flexible box model, or “flexbox.”

I won’t go into all of the technical details concerning flexbox, but suffice to say, it’s a very powerful way for laying out webpages, and it’s basically the future. It addresses many of the frustrations that web developers have had over the years, allowing us to accomplish layouts that should be simple but have always been complicated for one reason or another.

One concern with flexbox is browser support, since it isn’t supported by IE9 or older. Thankfully, a look at Opus’ analytics revealed that was no longer a concern. IE8 has accounted for less than 2% of Opus’ browser traffic over the last few months and its share is steadily decreasing; the same is true of IE9.

Even without the overhead of old IE, there were still some browser issues to work through (e.g., IE10 supports an older version of flexbox). But once that got worked out, working with flexbox was such a relief. Indeed, it almost felt like magic at times how the layout behaved and came together.

I’m still in the process of importing content into the new Craft-powered Opus, which I’m doing manually (so please be patient). I can already hear some devs groaning at the thought of all of that work. True, I could’ve used one of the import plugins that exists for Craft, but I’m a bit obsessive-compulsive. I want to ensure that I’m only importing those pieces that make sense for this new phase of Opus, and that when they’re imported, they’ve been updated, cleaned up, and polished as necessary.

When combined, all of these things — my new approach to Opus’ archives, Craft, and flexbox — give me a level of freedom and control that I’ve never had before with Opus, and I intend to make the most of it in the coming months and years.