Operation Branta Claus: A Website in One Week
Using New Tools to Create a Website in One Week
Our typical development process utilizes the LAMP stack (Linux, Apache, MySQL, and PHP), which has served us well across a variety of projects both large and small. But every once in a while, we get a chance to step outside of our normal process and try something different. These projects are especially exciting, because they give us an opportunity to stretch ourselves, experiment with new tools and techniques, and refine our process.
Last December, our Manager of Web Strategy Angie approached a few of us with a secret holiday project, which turned out to be a great opportunity to try some new things. Introducing: Operation Branta Claus.
The Project
As part of our company’s annual holiday card, our marketing and design teams (possibly with some help from a magical elf or two) partnered to transform our founder Brian Forth into Branta Claus:
In addition to sending the card out to our clients and partners, we wanted a companion Branta Claus website where we could share industry tips and tricks as the holidays approached and track appearances of Branta on social media. At this point, we were a little over a week away for the cards going out, so our team had a short amount of time to take this from concept to completion.
Behind the Magic
Our team quickly pulled together content and design, and by the end of the week our Front End Manager Reena and I had built out a fully-functioning website, which is exciting on its own. But, we also took the opportunity to try out a number of tools and platforms that aren’t a part of our normal development process. In no particular order:
Out with the Old Stack, in with the New
As I mentioned above, we typically develop on the LAMP stack. The first major change we made for this project was to look for a different platform to build on. Normally a major decision like this would be driven purely by the needs of the project and our client, but in this case it was motivated by curiosity (after all, one of our core values is “Stay Curious”). While several of our developers have some experience with Node.js, we never had the opportunity to build a public-facing application on the platform. Paired with Express, JugglingDB, and NGINX, we had a brand new stack up and running in relatively short order.
Socket to Me
One of the features of the site is a grid of Instagram posts, which use the hashtag #whereisbranta. These posts were pulled from Instagram periodically and cached within the application. As a little added flair, we implemented websockets using Socket.io to push any new posts out to users on the site in real time.
Promises, Promises
Since I knew my contribution for the “12 Tips of Christmas” (another feature of the site) was going to be related to asynchronous JavaScript, I wanted to make heavy use of Promises. We ended up using the RSVP.js library and were very pleased with the results. Our asynchronous code was cleaner, easier to understand, and easier to debug. See the example code below, where we load Instagram posts and any published tips asynchronously before rendering the homepage. Without Promises, this code probably would have been a mess of nested callbacks, which nobody wants.
/* GET home page */
router.get('/', function(req, res, next) {
// Get instagram posts and tips, and wait for
// each promise to be resolved before rendering
var instagramPosts = instagramHelper.getStoredPosts(12);
var publishedTips = tips.published();
RSVP.hashSettled({
posts: instagramPosts,
tips: publishedTips
}).then(function(results){
res.render('index', {
tips: results.tips.state === 'fulfilled'
? results.tips.value
: [],
posts: results.posts.state === 'fulfilled'
? results.posts.value
: []
});
})
});
Needless to say, this project was a lot of fun to work on. What started as an elaborate and silly idea became an actual working site within one week, thanks to our awesome team. We’re always on the lookout for fun projects like this one where we can stretch ourselves and try new things, so keep an eye out for more!
