Shauna Gordon

Code Is My Art

Project - Raze West Virginia

| Comments

The Client, and a Little History

While working at Fahlgren Mortine, I had the opportunity to work with the West Virginia Department of Health and Human Resources (DHHR) on the new website for their teen anti-tobacco campaign, Raze West Virgina.

I’m already familiar with teen anti-tobacco campaigns, having been involved in Pennsylvania’s for a time when I was a teen, myself, but I found out that what makes West Virginia’s somewhat unique – and very important – is that West Virginia ranks as the highest, or second highest (in some subcategories), of tobacco users nearly across the board, from adults, to pregnant women, to teens. When nearly a third of everyone around you, no matter the demographic, uses tobacco, that’s a lot of peer pressure.

Enter Raze

Raze is one of several youth anti-tobacco campaigns in West Virginia. It’s a little different from many others, because it’s not just conferences. Rather, it’s groups of teens at the school and community levels (“crews”), sponsored by an adult, that help create a grassroots anti-tobacco movement. They do this by organizing what they call “commotions,” or micro-events to help raise awareness and “tear down tobacco lies.” These commotions can be as simple as handing out fliers, or as large as holding an assembly.

As an added incentive, organizing commotions earns the crew a certain number of points. At various thresholds, the crew then earns gear, ranging from pens to backpacks, emblazoned with the Raze logo.

Our Role

As West Virginia DHHR’s advertising campaign provider, Fahlgren Mortine was provided a number of tasks in an effort to rebrand the Raze campaign. Among them, was redoing the website and crew management system.

The Challenge

Raze had an existing crew management system and public-facing website, but it was getting old, and had become unweildly to maintain and use. They needed something more modern, more robust, and easier to use and manage. They needed something tailored to their needs, instead of an off-the-shelf solution that needed to be hacked around and have dozens of add-ons tacked on.

The Solution

Instead of going with another off-the-shelf solution, we decided to build a custom system from the ground up. This would allow us to provide them with only what they need, and provide it when they need it.

The Tech

In order to keep the codebase maintainable, we used the MVC framework, Laravel, as the backbone of the application. Combined with the PHP package management system, Composer, this allows us to swap out certain parts (particularly third-party libraries) nearly at will, without much consequence to the application as a whole.

Stylized tooltips to add that application feel

To make development of the interface faster and easier, the dashboard interface was built with the help of Bootstrap. This allowed us to spend less time on building interface components and making them look good, and more time putting them together into a user-friendly interface. It also allowed us to add small garnishes, such as stylized tooltips, for browsers that support the extra features.

Even with the help of Bootstrap and Laravel, we still found ourselves using quite a bit of JavaScript, as well as a fair amount of CSS customization. To help keep these maintainable, and to allow us to generate minimized JavaScript and CSS files, we used the CSS preprocessor, Sass, and the Node.js-based task runner, Grunt.

The Logic

While we also redid the public facing site (, the dashboard interface at is where the bulk of the work, and the heavy lifting, are done.

The Raze Dashboard

At its core, it’s a user and event management system. Adults and students sign up and join their crews. Adult advisors and crew leaders can schedule commotions based on pretermined choices, and can register for region and organization-wide events (such as Regional Raze Kickoff Events). When the commotions are completed and logged, the system tallies up the crew’s total points, and standing compared to other crews, based on the point values of the commotions they performed.

Site Administrators can also generate reports for various statistics, in addition to taking suggestions for, and adding, new commotions, scheduling events, and sending announcements.

Final Thoughts

This was one of our first built-from-scratch content management systems, so one of the biggest lessons was that such systems are quite a bit larger than they appear.

It was a fun project, though, and really allowed us to stretch our legs when it came to Laravel. It also allowed us to start incorporating some of the automation capabilities of Grunt, which will prove to be invaluable in future projects.

Vagrant - Initial Thoughts

| Comments

So, I finally did it. I finally started playing with Vagrant. I have to say, I quite like it.

At the moment, I just have a generic Ubuntu box that I downloaded from Vagrentboxes and then used a script to download the dependencies needed to run Octopress and my blog. Add a little port-forwarding magic, and I no longer have to deal with RVM, Ruby versions, and what-have-you on my MacBook Pro (this is a very good thing, as I’ve found OSX to be surprisingly hostile to developers in its attempt to be “helpful”). This is great, but quite cumbersome, because it involves updating apt-get, installing a bunch of things that have a laundry list of dependencies out of apt-get, then installing the Ruby gems needed, then, finally, running rake preview. Once it’s up and running, it’s great, but that process takes somewhere between 5 and 10 minutes.

Come on now, we can do better than that.

So, now, my next project with Vagrant will be to create a box that already has the necessary prerequisites for Octopress. Then, at some point, I think I’ll make one for other development projects, too. I suspect it will save me – and some of my coworkers – quite a bit of headache when it comes to dealing with different development environments (I know at least one coworker who has to support legacy 5.3 applications, and help with our new Laravel apps that require 5.4+ due to our heavy usage of array literal notation).

Box-sizing: Border-box and Changes in How We Use the Box Model

| Comments

Back in the days when Internet Explorer 6 reigned supreme, when Firefox was just getting its foothold and taking shares from IE, and Chrome was barely a Googler’s pet project, the browsers followed different box models.

Firefox (as well as the then little-known browsers Opera and Safari) followed the W3C standard box model, what is now known as “content-box”. Internet Explorer, on the other hand, followed its own box model, what we now call “border-box”. As Firefox began to rise and threatened IE’s market share, Web developers were singing the praises of the content-box style box model (which was one of the many W3C standards that IE ignored, and Firefox implemented), to the point that when Microsoft finally released Internet Explorer 7, it implemented the standard box model.

Project: Octopress Theme Toytown

| Comments

As part of yet another redesign and blog migration, I needed to create a theme that wasn’t so stock. I migrated my site to Octopress, a blogging platform that runs on GitHub’s Jekyll static site generator. It’s a great platform, as anyone who follows my Twitter or Google+ accounts is aware, but the vast majority of sites that run on Octopress use the default theme, or some slight variation thereof. As good and nice as the default theme is, it’s become very generic. I needed something different.

Anatomy of an Octopress Theme

| Comments

As you can probably see, I’ve updated my theme to something a little less Octopress. I still have a few changes to make, such as getting a background image that fits a larger viewport. It probably also needs some polishing for things that I haven’t run across yet, and deal with IE8 and below’s lack of support for RGBA and media queries, and I might toy around with how it responds to different sizes (oh yeah, and tweak how lists in the content are laid out), but other than that, it’s pretty much done.

I’m by no means a designer, so I doubt anyone but me will really like it, and if my history has anything to say, I probably won’t like it myself in six months, but for the time being, at least, it’s not the very generic, default theme. It also adds a base theme to the (currently insanely small) pool of Octopress themes.

Yes, Yes, I Know

| Comments

I know, I need to put a new theme on this thing. It’s funny how you start seeing something everywhere once you find out about it for the first time.

I’m not totally sure when, but I fully plan on building a new theme. I’d like to play around with responsive design, so this should be interesting.

I’ll also be looking into a sort of “tag cloud” for the sidebar, and a way to list the “tags” (or, as Octopress calls them, “categories”). I find it hard to believe that you can put categories into your posts and not be able to make use of them.

Oh, and your tip for the day – I never remember to use “rake” for doing Octopress tasks. I always want to run “octopress [task]”, so I added to my ~/.bashrc the line:

alias octopress="rake"

To use it right away, just run source ~/.bashrc. :)

Yet Another New Home for the Blog!

| Comments

Yes, I know. It seems like I’ve changed blog platforms on an annual basis. With a little luck, this will be the last time.

What Happened?

In short, I became disillusioned with Blogger. It seemed like a nice platform, at first, but I soon came to find the cracks in the foundation. So, after some thought about what I really want/need in a blog platform, I decided to go a different direction.

Use Pidgin and Google Apps to Chat

| Comments

Who doesn’t use instant messenger of some form these days? Those of us from the days when there were as many chat programs as people probably have half a dozen accounts or more, or at least did at one point (who didn’t have ICQ, MSN, AIM, and Yahoo?). Thank goodness for unifying applications like Pidgin/Adium, Trillian, and others.

Now that some of us old chatters have grown up and created businesses (or at least business names) of our own, we may need to add our Google Apps accounts to the mix. This is a little trickier than just adding a Gmail, or other established provider, account, but thankfully, it’s not that difficult. I found, though, that start-to-finish instructions for getting set up on Pidgin were lacking, so we’ll cover them here. These instructions will work for Pidgin, and should work for Adium (the Mac port of Pidgin), though one may find the settings in slightly different places, due to convention differences across the platforms. The basic information should also work for other clients, such as Tillian, though, obviously, you’re on your own for finding were to enter everything.

Fun With Python!

I’m terrible about coming up with projects to do to learn a new language. As such, I generally pick them up as jobs require them. This makes it difficult to find a good reason to pick up a new language for me. So, when I made the decision earlier this week to learn Python, I decided to go a slightly different route - Gedit plugin development!

Making a Difference, Even as a Peon

We’ve all been there – the peon, low-level, replaceable employee at the bottom of the corporate food chain. Unfortunately, since we can’t all be wildly successful business owners, or get promoted to management almost immediately, we sometimes have to do what we can in our little peon positions. It’s heartening, then, to find James Shore’s Change Diary, via Jeff Atwood’s blog, from when James was working as a developer shortly after the DotCom bust.

It’s a long read, and I haven’t quite gotten all the way through it, but even what I’ve read so far has made it well worth the read. There’s success, there’s failure, but most of all, there’s proof that even one peon can make a difference in a company. It’s a lesson that employees and managers alike would do well to learn, I think.