Blog Redesign and Resources – Code

I think it was about three months ago when I looked at my to-do list of things to fix for this blog, and I decided to hunker down and redo the whole thing in two weeks. Well, it took a bit longer and occupied a few Friday nights, but I’m happy with how this turned out, and subsequent iterations should be faster still.
My primary objective was to fix some of the design issues the old theme had, particularly the typography and readability aspects, but I took the opportunity to update some of the technology choices as well.
Here’s the source, but some additional coding credits and highlights:

• WordPress. I’m still building my blog off of the WP platform, and have been able to just copy + paste a lot of helper functions I wrote for my previous themes. WP is a solid if unexciting blog engine, with some pretty cruddy PHP code but a huge community of plugins.
• Compass. I migrated to SCSS/SASS a few years ago, and Compass adds a bunch of nice helper functions for CSS3 properties and color manipulation. I’ve also felt a lot more free to render UI with CSS as opposed to images; there are only two images on the entire site, but plenty of drawing code like this:
  [code lang=”css”]
  .spine-extrude {
  position: relative;
  &:after {
  width: 100%;
  height: 1px;
  @include background(linear-gradient(left, white(0.6) 0%, white(0.4) 60%, white(0.0) 100%));
  content: "";
  display: block;
  position: absolute;
  top: 65px + 1px;
  left: 0;
  }
  }
  [/code]
• Coffeescript. Both the Twitter footer and the 404 page use a tiny amount of Javascript, which I opted to just write in Coffeescript to condense the number of lines of code written. It might be progress that I no longer absolutely hate the language.
• Normalize.css. I tried to use normalize.css instead of ye old CSS reset on the premise that it doesn’t try to override as much as the standard ones, but I’m somewhat regretting that decision. In particular, the default margin and padding settings differ between browsers, and letting the defaults stand wrecks havoc on layout fidelity.
• Modernizr. This was of the few concessions I made to Internet Explorer and other legacy browsers, but of course, neglecting less savory browsers wouldn’t fly on a more commercial/professional project.
• Zocial. Using fonts as icons is a pretty neat trick that’s now viable with @font-face support becoming more common. In addition to not having to worry about cutting graphics to the right size (and recutting them when I make tweaks), they obey all the CSS directives that apply to fonts, which makes for effects like animating color pretty trivial.

Next post, I’ll go into some of the design considerations!