Inside red-badger.com

Here at our (currently) sunny workshop in Clerkenwell, myself and the fellow badgers have being busy carefully crafting this, the new red-badger.com website and blog.
Internal projects here are run with an ethos of allowing software engineers to learn, trial and sometimes fail (but that’s ok!) with new technologies and methodologies.  To give you some insight, my background is heavily based on developing all things on the Microsoft technology stack.  It was a welcoming surprise that we were going to be getting ourselves knee deep into a complete opposite of what many of us were used to.  From hosting environments and development tools it was a journey of discovery that ended with a great product at the end of it (of course I am biased).  As with any product built here we like to share our experiences and give an insight on how we do it, so lets begin….

Amazon EC2

Previously the Red Badger website was hosted on Rack Space but we thought we would try out Amazon EC2.  The first thing we noticed is that the speed to setup instances from start to finish was incredibly easy and quick.  A massive plus is that EC2 has a layered approach to its infrastructure setup.  Elastic IPs gave us a great benefit and flexibility when we were releasing some of the bigger changes initially.  It allowed us to efficiently spin up a clone of the production instance then release to it and switch the Elastic IP association from staging to the new clone.  Straight away Samera could test the effects of the new release, giving the green light to release to production.

Ubuntu

Ubuntu gave us a lean, fast operating system and being open source no license fees.  It has a great community and documentation for many of the tasks we required to setup.  I would say that Haro, Can and Stu had a much easier time setting up their local development environments being on Apple Macs.  It did take me a little while (running Windows 7)  to setup a Virtual Box with Ubuntu to get it up and running for development.  I used Samba to enable my Windows 7 based laptop to network share the files.  Additional to this, I setup port forwarding within Virtual Box to divert port 80 host traffic to the Ubuntu guest machine.  This meant I could work locally within my Windows 7 environment.  I would say though it took me a bit longer to get up and running because of the fact it was the first time I had ever used the Ubuntu operating system via command line.

Nginx

Initially for the project we started using Apache but the team having done some research moved on to the decision to use the lightweight webserver Nginx which is pretty much built for speed.  The main difference is the fact that Apache’s model is process and thread based where-as Nginx is event based.  This means that rather than waiting around for a response to happen before continuing and blocking a thread, callbacks in an event driven architecture allow the thread to continue executing other jobs whilst still waiting for a response to respond to.  The configuration was simple and allowed us to very easily configure reverse proxying to Node.js along with caching of pages.

Node.js

Apart from the blog section of the site the pages are rendered using Node.js.  The framework used was Express, it provides a quick and easy setup for the building blocks when building a website via Node.js web development.  The template engine is Jade which I found to be incredibly easy to use and takes a lot of the bolierplate code / html tags when writing templates for content managed websites.  The way in which we do this is to tell Nginx to reverse proxy requests and serve up the response from node.  This allows us to use WordPress as our content management system yet keeping the awesome capabilities of the blog features.

WordPress

For the management of site content and general blogging (which is very much encouraged here at Red Badger) we chose the ever so popular WordPress.  We coupled the default install with a custom theme as well as installing a couple of extra magical plugins.  These plugins are Advanced Custom Fields, JSON API and Disqus to name a few.  Advanced Custom Fields is a great plugin that allows you to specify many new custom fields for certain pages turning your WordPress blog into an easy to use content management system.  These custom fields ranged from relationships, images, WYSIWG editors and more.  The JSON API plugin allowed Node.js to get relevant content as a JSON response and simply render out our Jade templates against the data.

Twitter Bootstrap

To give us superb results viewing across all devices we went for a responsive design and layout.  To do this we implemented the Twitter Bootstrap framework giving us a grid based layout / framework along with jump starting support across browsers.  You can see what I mean if you head to http://responsive.is/red-badger.com which provides a great site to roughly test what your responsive layout looks like on different mobile devices.  Another interesting aspect when building the site with Twitter Bootstrap was that we followed the route of using LESS for CSS for stylesheets on the site.  On Windows machines I would recommend Crunch to compile them all.  LESS for CSS provided some nice features for setting global colour variables amongst other elements to allow reuse and maintainability of our styles.

So all in all that about sums up the technologies and infrastructure which powers the new red-badger.com website.  Feel free to comment with any thoughts about the site or even the technology stack we decided upon.