Building the Design Details CMS

February 29th 2016

Note: this post is mostly for my own records. It’s not super interesting, but feel free to read. That being said: if you’re an iOS dev and want to collaborate on something fun and simple, scroll to the bottom.

Two years ago I started writing a series of blog posts called Design Details. In 2014 these posts were viewed a bunch and ended up inspiring the Design Details Podcast which I co-host with Bryn Jackson.

Problems

The posts were all written on WordPress, which is great and all, but as anyone who has ever worked on WordPress themes knows, there are a few key problems:

  • Generating structured data out of a post is kind of a nightmare
  • WP wasn’t designed to have a seamless, version-controlled deployment flow
  • WordPress, as a rule of thumb, is slow

Those are my thoughts at this point in time, anyways. So I wanted to see if I could build my own CMS for Design Details while solving each of the aforementioned problems:

  • Create structured data that is accessible via private API endpoints
  • Version controlled, hosted on GitHub, deployed on Heroku — reliable, cheap, fast
  • Minimal dependencies, fast page loads

1. Design

The visual design here wasn’t a long process; I’m not reinventing the wheel. Posts with titles, subtitles, content, permalinks, etc., add in some colors, shadows and small animations and call it good.

The harder design challenge was creating a data structure that would be flexible enough for my current needs and hopefully support future ideas for the posts. I’m not an engineer by trade so a lot of this stuff is pretty abstract to me. But I hacked on a data model for a few hours and came up with something that makes sense in my head and will hopefully work going into the future.

2. Build

I used this boilerplate for a Node + Mongoose + Express setup. It’s fairly straightforward, although I probably lost a good 3 hours trying to figure out session handling and it took me another hour or two to wrap my head around the way Node handles async requests.

Anyways…

In the spirit of transparency, this app is a total hack: yeah, I have simple CRUD functionality, but my deployed app has those routes commented out of the production build because I couldn’t-for-the-life-of-me figure out session handling for user authentication. Next weekend’s project, for sure.

I also don’t really know how to handle complex forms with Node: for example, I have an array of “detail” objects within a post. How do I edit multiple details and save them in-order? No idea. So for now I have to write/save/delete each detail individually. Not too concerned about this, because hooray, I’m the only user!

Oh, I also haven’t really figured out how to handle media uploading. Which I should probably do but honestly sounds like a giant pain in the ass; so for now I’m doing manual uploads to another CDN and just copy/pasta-ing the urls.

Also, I wanted the post data to be available at private API endpoints. So I did that; it’s actually really easy to setup, but now the hard part will be managing access to those endpoints. This will be another weekend’s project, too.

The front-end is all Jade + Sass. I started out hating Jade. I still kind of hate Jade. But just not as much as before. I guess this is a common feeling; next time I’ll use EJS or Swig or something a bit more…normal.

3. Launch

The only reason launching took minimal effort was because I have the good fortune of having spent countless hours debugging Heroku apps in the past. So getting the app online was relatively straightforward; I’d never used MongoLab before, which added a few extra steps to navigate, but overall it was quite seamless. Then I tweeted the thing and called it done. It’s better to ship early than to ship perfect, right?

Next: iOS Devs Wanted

Want to work together on a sweet iOS app to showcase Design Details? Want me to design the thing and you build it? Want to call this a passion project where neither of us get paid? Want to talk on the phone and tell jokes and get to know each other and stuff?

Tweet @ me.

More Posts

Copyright © 2016
TwitterDribbbleInstagram