Web development

Using the Bourbon Family Part 4 - Refills 2014-12-07

We now come to the fourth and final member of the Bourbon Family - Refills.

What it is

Unlike its family members, Refills is not a SASS library, but simply a website containing a gallery of components you can build using Bourbon, Neat and Bitters. These components include headers, footers, splash pages and tabbed navigation, and all of them are mobile friendly. Essentially, Refills contains most of the features featured in Bootstrap but left out of Bitters.

Using the Bourbon Family Part 2 - Neat 2014-11-30

In Part 1 of our series, we looked at how to use Bourbon to simplify web development. Now we will turn our attention to Neat, the most useful member of the Bourbon Family.

What it is

Neat is a “semantic grid framework”. It provides the same kind of responsive grid layout provided by Bootstrap, Foundation, and others, but allows you to generate it using semantic markup.

Using the Bourbon Family Part 1 - Bourbon 2014-11-24

This month, I performed a major overhaul to this blog’s presentation layer, ripping out Twitter Bootstrap and replacing it with Bourbon, Neat, Bitters and Refills, aka the “Bourbon Family”. They are a collection of SASS libraries produced by the folks at thoughtbot, and together they can give your site a slick, responsive design without cluttering up your HTML. Unfortunately, figuring out how to use them properly is easier said than done. The Internet is surprisingly lacking in Bourbon related articles and tutorials, and thoughtbot’s official documentation is written by and for seasoned web developers (which I am certainly not one of).

In other words, getting as far as I have (which is isn’t very far at all) took me more time than I’d care to admit. But maybe, just maybe, I can prevent others from wasting some of their own time. Thus I present my best effort at a beginner’s guide on how to use the Bourbon family. We’ll start with Bourbon itself, as it is both the family’s namesake and its foundation.

Deployment Issues 2013-12-30

So the site was dead for a little over two weeks. I added support for comments, and after deploying the update to Heroku, the site crashed hard, showing “page not found” errors.

Usually, such failures are the result of my own mistakes, but this time all signs point to a change on Heroku’s end. As proof, I submit the fact that I tried deploying a fresh instance of the middleman-heroku-static-app buildpack and found that it failed in exactly the same way. Then, two days ago, the buildpack was updated in order to close out an issue titled “Get deploy running on Heroku”.

In the end, I used a different configuration to solve the problem, but the end result is the same. Hopefully the site stays stable for the forseeable future.

Site Comments Enabled 2013-12-10

With any luck, Disqus-powered comments should be showing up for each post. Setup was (much) easier than I thought, and I think I finally understand the purpose of services like Disqus:

You don’t have to write you own comment engine. This is a bigger task than it sounds, at least if you want to have decent features such as comment moderation.
I am intrigued by the social aspect of Disqus. Create a profile, and your username and avatar will appear on any site which uses it. It gives you a lightweight identity across a large chunk of the ‘net without the weight of a full Google/Facebook profile.
For pages generated by a static site generator (such as this one), it allows one to drop in a comment system without having to depend on a database (and thus defeat the purpose of using a static site generator…)

With comments in place, I think it might be a good idea to start posting some actual content.

TODO 2013-11-18

Now that the site is up and running, here is a short list of updates and improvements I want to make:

Mobile View: Thanks to Bootstrap, the site looks pretty good on a smartphone screen. Trouble is, the navigation doesn’t work. Hopefully it is just a matter of rearranging some divs and styles.
Improve Summaries: Right now, every post gets a “Read More” link, even if they’re so short they fit within the summary cutoff. I’d like to make this feature smarter about when it gets enabled.
Comments: I’ll look into using Disqus for this. That way, if I find I don’t want (or need) comments down the line, it’ll be easy enough to remove them.
Investigate Alternate Fonts : I like Google’s Roboto theme (currently in use), but it looks too much like an Android Developer documentation page. I might look into using something else; it’ll be a good excuse to educate myself on typesetting and fonts.

More ideas as they come. For now, I’m just happy that nothing is broken.