We’re big on mockery at Comic Relief. Usually it’s celebrities poking fun at themselves. Sometimes it’s for unit testing.
PHP in Comic Relief
I’m a little late in writing down some thoughts from my Friday at PHP Conference 2016. Fortunately the delay has given me even more to tell you about, as our progress with PHP marches on!
This post is a lightning overview of a couple of conference highlights we’ll be learning from, and our wider progress with PHP & related technology.
Crafting content for impactful campaigns
As a self-confessed content fiend, even just seeing the word content in the title of this meetup got my creative brain cells suiting up and in the mood for a night out.
Not long after arriving at Manifesto’s office in Farringdon, my fellow digital-charity nerds and I were introduced to three speakers who went on to share the secrets of some of their most prized content possessions with the group. As I found their words of wisdom so useful I thought I’d pay them forward; I hope you’ll find them as helpful as I did.
Video backgrounds
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.
