Building on Drupal 8

As part of our objectives in 2016, we set out to solve a recurring problem at Comic Relief: how can we build an engaging, fast and secure fundraising campaign website – the likes of and – in a couple of months? How can we make sure that editors are able to create compelling landing pages that reach their different audiences?

The year that was, and hello 2016!

One of Comic Relief’s strategic vision is to make the organisation fully Digital and creating a permanent team to make that happen. Suffice to say there has been a lot of focus on the Technology department, and 2015 saw a lot of hiring activity in our department. Here’s a summary of how the teams have shaped up so far:

We hired:

  • A new WebOps team
  • Two developers for our Fundraising platform
  • A Technical Lead for our Drupal team
  • Stronger Drupal team and a new Senior front end developer
  • A permanent QA team lead
  • Two highly talented Scrum masters


The Engineering team collectively takes care of the development, maintenance, quality and performance of all of Comic Relief’s end-user facing digital properties. We are comprised of WebOps engineers, FROST & Digital Developers and QAs. We endeavour to use the best open source tools and processes appropriate to the teams and constantly evaluate the strength of our products.

We plan ahead to scale our infrastructure to handle exceptional amounts of load during media events and the Night of TV so that our sites stay up and gather maximum donations. We undertake adequate quality control measures with each piece of completed work and ensure it meets the standards of our users. We work closely with Designers and Product Managers who drive the shape of what we build.

Measure, Optimise & Automate Frontend Performance

Website speed matters. A lot.

Why? Because there’s no point building a beautiful, responsive, touch-friendly site if it can’t load a page before the user decides to leave. Researchshows: 47% of users expect a web page to load in 2 seconds or less, 40% of people abandon a website that takes more than 3 seconds to load and a 1 second delay in page response can result in a 7% reduction in conversions.

Website performance is user experience. As you design and develop a new site, you’ll consider many components of its user experience: layout, hierarchy, intuitiveness, ease of use, and more. Page load time and how fast your site feels is a large part of this user experience and should be weighed equally with the look and feel of it.

Headless Testing with PhantomJS and CasperJS

What does “headless” mean?

A headless browser is a web browser without a graphical user interface.

Headless browsers are executed via a command line interface. They use the same network connection and provide the same control of a web page as normal browsers. Because they render DOM elements and execute javascript in the same way, they can be extremely useful for testing web pages.

Why do it?

It’s really not a question of “why testing is important” but “how can we (developers and testers) do it in better way”. Front end testing doesn’t have to be a slow and painful experience if you utilise the right tool. Instead of going through each page or scenario manually you can write a UI test and integrate it into build process, then run it in the background. It will generate a fail report if something goes wrong. It’s that simple!

JavaScript templating with Mustache.js

Mustache is an open source logic-less template engine developed for languages such as JavaScript, Ruby, Python, PHP, Java and many more. It’s a very lightweight, readable syntax with a comprehensive specification. Mustache can be used for HTML, config files, and source code. It works by expanding tags in a template using values provided in a hash or object. You can use Mustache to render templates anywhere include client side and server side environments.