For the third time in about six months, a new site design! Hopefully I will stick with this one for a while. A bunch of very boring words about my design and development choices follow.

Blogging

Since I started the long, painful transition into web development roughly one year ago, I have been an avid reader of programming blogs. I have little in the way of formal CS education, so blog posts are often my first exposure to interesting and useful data structures, algorithms, and design patterns. Many of my favorite programming blogs are aggregated over at sn.printf.net.

Although I know I cannot provide the same level of technical insight as my favorite bloggers, I figure writing more about my own work and the associated challenges can only help me to grow as a developer. The goal is to write at least a post a week, but hopefully I will update the blog more frequently than that!

Doctor Jekyll & Mister Hub

When I picked up my first client as a web developer, I revamped my website to be clearer and more concise. I shrunk four pages of content into one and created a sort of visual branding for myself with a bold blue and yellow color scheme. But after just a few weeks, the design wore on me and I knew I had to redesign it (again!).

The previous incarnations of this site (there have been far too many) used, variously, static HTML, Rails, and Sinatra. Static HTML was too difficult to maintain — if I wanted to make a layout change, it was a pain to change the like, four pages that made up the site. Rails was hilariously overkill (my site lacked a blog then). Sinatra was more appropriate, but again, I hardly needed a gosh-darned web application to serve my site's relatively static content. Moreover, Rails and Sinatra both needed to be hosted somewhere Ruby-friendly, like Heroku.

What I really wanted was to combine the speed and simplicity of a static HTML site with the flexibility and DRYness of a Ruby web application, while integrating frequently updating blog content. My first attempt was to write a blog engine for Sinatra, in the spirit of Marley, which used flat Markdown files for blog posts, but this never really got off the ground for various reasons.

Enter Jekyll, a self-described "blog aware, static site generator." Whoa! Sounds like exactly what I was looking for! And so far, it has worked very well. The site is now hosted on GitHub Pages rather than Heroku (I will continue to host my Rails and Sinatra apps on their amazing platform). The one disappointment in all of this is that GitHub Pages doesn't support any Jekyll plugins, so if I ever want to go down that route I will have to push my generated site to GitHub rather than let them generate it on their own.

Responsive design

I'm a huge fan of CSS grids and CSS frameworks in general, a topic which I may discuss in a future post. You may have already seen yumMetro, my very unpolished and unfinished toy app for business searches localized to the Los Angeles Metro rail, which makes very heavy use of Twitter Bootstrap. I considered using Bootstrap for this site's new design, but decided against it because:

1. Why master one CSS grid when I can be a mediocre Jack of 'em all? :)
2. Bootstrap is a bit overkill for this site's needs. The suite of widgets Twitter Bootstrap provides are great for full-featured web applications, but this site is little more than a glorified blog.
3. I really wanted to play around with responsive design, whereas Bootstrap only provides a static, fixed-width grid. When designing my previous sites, I hadn't ever given any thought to with very mixed results.

And so after much research into fluid grids (Google "fluid mobile grid", click first result), I settled on 1140px. Because 1140px is purely a grid system, I was forced to build my own styles from the ground up, which was simultaneously intimidating and liberating. I will admit with only a bit of shame that I ended up "borrowing" several typography styles from Twitter Bootstrap, but everything else I've done on my own. Go ahead, resize the site to your heart's content and see if you can break it. You can't! I hope.