A breakdown of our video background implementation on our events page which began as an experiment this campaign to provide something more dynamic.
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
Engineering
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.
Welcome!
Hello! We’re kickstarting a new blog at Comic Relief to showcase the way we use technology to support the core aims of our organisation. Comic Relief’s vision is of a just world, free from poverty. Our mission is to drive positive change through the power of entertainment. If you want to know more about Comic Relief you can watch this short film.
In its 30 year history Comic Relief has raised over £1 billion and has changed the lives of millions of people around the world. The money we have raised has been used to fund projects that have a lasting positive impact on people facing significant challenges both in the UK and abroad.
With the changes in user behaviour and the move to less linear and more digital forms of communication we are facing increasing challenges in continuing our good work. Technology is a key enabler for us to prosper in a rapidly changing world. If we want to continue to be successful we need to embrace new ways of working and thinking.
To achieve this we are trying to move towards a user-centric, product-focused way of working, utilising agile delivery practices to stay nimble and responsive to the changing landscape. Through the power of data and evidence-based decision making, metric-driven product development and a deep understanding of our users and their behaviour we hope to revolutionise the charity fundraising landscape and create digital experiences and products that delight and enthuse the public. Ultimately this will allow us to remain relevant and raise the next £1 billion to help fund the worthy projects we support all around the world. We will do all this while continuing to create award winning work such as our interactive story for schools.
We will be sharing our challenges, joy and learnings through this blog, while giving you an idea of what we are working on and how we are approaching it. We aren’t perfect and this will be a long journey, but we value your feedback so please, be free, kind and open!
Zenon Hannick, Chief Technology Officer
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.
Automating workflow with Grunt.js
Grunt is a Javascript task runner. It automates repetitive tasks and steamline workflow. It uses Node JS and can be installed via npm (Node Package Manager)
I have been using Grunt for couple of my projects since last year — to concatenate, minify css and JavaScript files as well as compile SASS, check syntax error and run unit test.
Organize your JavaScript: The Object Literal
JavaScript is all about objects.
When thinking about JavaScript objects, simply think about groups of key-values pairs (these are sometimes known as “associate arrays” “hash tables” or “hash maps” in other languages). An object literal is a list of zero or more pairs of property names and associated values of an object.
