Site is finally back up after hiatus and hosting issues! Unfortunately there are still some lingering missing links and broken images, so please bear with me while I sort everything.

Thanks for visiting!

Articles

Handlebars.js Conditional Trick

15 March 2015

The other day I was working on generating a handlebars template from an object of objects and came across a small but annoying issue. I needed to create a list of items, and each item template needed to be slightly different. Since handlebars conditionals only check a variable for being true, we can't use operators to divide the items into little "subtemplates".

For instance, let's say we have an object of menu items divided up into three types that each need a slightly different handlebars template.

Ideally, I would pass that object into a template like this:

    {{#if foodType == entree}}
        <span class="meal entree">{{ name }}</span>
    {{else if foodType == drink}}
        <span class="meal drink">{{ name }}</span>
    {{else if foodType == dessert}}
        <span class="meal dessert">{{ name }}</span>
    {{/if}}

Unfortunately this isn't an option with vanilla handlebars, instead you can only test a property's truthfulness, like:

    {{#if entree}}

    {{else if drink}}

    {{else if dessert}}

    {{/if}}

As an example, let's use this JSON response as the data we want to use for our template.

    var Obj = {
        mealItem {
            foodType: "entree",
            name: "steak",
            price: "30.00",
        },
        mealItem {
            foodType: "dessert",
            name: "cake",
            price: "4.00",
        },
        mealItem {
            foodType: "entree",
            name: "chicken",
            price: "10.00",
        }
        mealItem {
            foodType: "drink",
            name: "orange juice",
            price: "2.00"
        }
    }

If we want our menu item template to be populated by these mealItems in our object then appended to a div, we can send them through like this:

    for (var i = 0; i < Obj.length; i++) {
        Obj[i][foodtype] = true; // creates a new property named what the foodType property contains

        // Send updated item object through handlebars template
        var template = Handlebars.templates.foodItems(Obj[i]);
        $("container").append(template);
    }

Now each mealItem will be passed to the template with it's food type as a property, so we now use it in our handlebars conditionals without forcing handlebars to fit our data.

    {{#if entree}}

    {{else if drink}}

    {{else if dessert}}

    {{/if}}

Excerpts from recent posts

Move to Jekyll 24 February 2014

A few days ago my ExpressionEngine install went haywire and I needed to get a quick blog up to avoid having a site full of broken links. I've used plenty of heavy CMS's for my blog before, and instead of a system to do the work for me I wanted something open that I could use as my "breakable toy". It didn't take me long to settle on Jekyll, the static-site generator created by Github founder Tom Preston-Werner.

Michigan State Wins The Rose Bowl 1 January 2014

I Wrote About Three.js For Smashing Magazine 17 September 2013

I was happy to write an article for Smashing Magazine that describes basics of polygonal modeling as well as modeling on the web with ThreeJS.

A Flimsy Wall 2 July 2013

Esquire recently released an article detailing the author of Proof of Heaven and his questionable claims and background. To supplement this type of story, they have implemented a per-article paywall. Unfortunately, it is not well implemented, easily passed, and ends up only charging the misinformed.

Flexbox Taking Advantage Of Flexible Boxes 3 June 2013

The Flexible Boxes (or Flexbox) specification in CSS3 is one of the newest solutions for making the development of responsive layouts easier and much more sane. The goal of the specification is to accomodate websites on a variety of screen sizes and resolutions, and be able to maintain structural integrity through switching between portrait and landscape modes, or other changes that may be out of the developer's control.

Blog Posts

Sitemaps for Jekyll sites

21 April 2015

Great straightforward way to get a sitemap in your Jekyll without plugins.

Code Quality 21 April 2015

I've been this person...

Getting Started With Gulp 25 March 2014

After finally transitioning away from using Codekit for my workflow and deciding on Gulp over Grunt for my task running due to its modularity and easy of use. I really love it so far, but as with any change in workflow there's always bound to be some kinks.

Float Labels with CSS 24 February 2014

Here's a great article by Brad Frost about the new float label trend for forms. Unfortunately it seems it isn't so well supported in browsers yet and the possible accessibility issues make it a no-go for my current projects, but this is the kind of thing that can create some really clever UI for sites that only target those with the newest tech or if you're just looking to make some fun proof of concept demos.

Live Editing Sass and Less in the Firefox Developer Tools 18 February 2014

In Firefox 29 you now have the ability to live edit your preprocessed styling much like normal CSS. The developer tools use source maps to show the line numbers of the original source.

Shop Talk Show with John Resig 10 February 2014

jQuery creator and Khan Academy dean John Resig recently did a spot on my favorite front-end dev podcast, Shop Talk Show. This is a great one to listen to even if you aren't normally an avid podcast listener, Resig does a great job speaking and has a lot of great points.

Introduction To Polygonal Modeling And Three.js 17 September 2013

I was happy to write an article for the fantastic Smashing Magazine that delves into the basics of polygonal modeling and bridging into modeling on the web with ThreeJS.

Link Archive

+ !