Boiler Life

the campaign featuring Boilermakers that move the world forward

Overview

Tech

Task Runner: Gulp.js
CSS: combination of Bootstrap and custom SCSS
JS: custom script written using jQuery
CMS: UI built & data stored in Cascade Server and compiled via Apache Velocity

Responsibilities

review design for accessibility issues
use Git and GitHub for version control and tracking progress
develop the site based on a given Photoshop document
test for browser inconsistencies
implement the site within the CMS
setup the CMS to output site content as XML to be used in digital signs across campus
train individuals in uploading content for weekly updating

the landing page of the site displaying the currently featured Boilers

Development Notes

Developing this site included attempts to modernize my workflow by adding new tools:

Git + GitHub — for version control and code backup
Gulp.js — a task runner I used template HTML and compile SASS

Git + GitHub

For the duration of this project I was the only developer on our small team. While this did create a bottleneck, it also gave me quite a bit of freedom to work and experiment with different tools. The first tools I felt were absolutely necessary to add to the development workflow were Git and GitHub.

an example of a page telling the story of the featured Boiler

It's probably uneccessary to argue about the importance of version control here, but I'll say that Git was certainly a large step-up from our previous method, e.g., myFilev1.js, myFilev2-validation.js, etc. The biggest advantage I found was the ability to easily create a branch to experiment with a new feature, while being able to continue work on the items that would definitely be implemented.

I was also able to get my feet wet with GitHub as well but I can't but feel that I only scratched the surface of its capabilities. Being a developer of one, GitHub acted more as a place to backup my work rather than as a collaboration tool.

Gulp.js

The addition of Gulp.js to my workflow was definitely the most exciting development. After using it for a few hours, I wondered how I survived without a task runner for so long.

For setting up HTML templates locally, I had been writing full HTML pages; however, adding gulp-file-include gave me the ability to easily create HTML components and automatically compile them into one page.

For compiling my SCSS, I no longer had to rely on using Koala, a SASS-compiling GUI application. Now, I could add even more CSS tools, such as autoprefixer, with little difficulty.

The icing on the cake was setting up a local server via gulp-connect and setting up gulp-watch, a file watcher. I truly didn't realize how the amount of time you save from automatic refreshes really builds up.