An insight into our use of GraphQL with React and Apollo at Ditto Music

GraphQL is a hot topic at the moment in the front end development community. This short post will hopefully give you insight into why we have used GraphQL at Ditto Music and also how I have queried our GraphQL API in the React layer. First let me start with a bit of background. Currently, once Ditto customers or artists login to their account area, they can view stats about how they are performing. »

Implementing a design system across a microservice architecture

I’m sure you’ve read lots of posts online about how to build design systems and discussions about front-end methodologies, I’ve even written one myself. However, my role as a software engineer is not only to build a well-structured design system and pattern library. It is also to ensure it’s implemented in the right way across all of our systems and products. I’ve built a few different design systems now, all on different scales and in this post I will share how I like to implement design systems across several different products in a microservice architecture. »

Unit Testing React with Jest

I’ve been writing React components and applications for a long time now and everytime I do, I always use the same unit testing setup and tools - Karma and Jasmine. There’s really nothing wrong with these tools, they’ve been around for a very long time, are well maintained and they provide everything you need to properly test your JavaScript. However, I wanted to see what all the fuss around Jest was. »

Atomic Design at Zuto

At Zuto we’ve recently redesigned our website and application form and are continuing to redesign most of the other customer facing services we have. Previously, we had a very disjointed UX across the site and this was simply because we didn’t have any real design standards or guidelines to follow. Starting again has provided us with the opportunity to put these standards and guidelines in place, so it’s clear to everyone in the business how we build our user interfaces and enable us to create a consistent UX across all of our services. »

Homeless Hack, Manchester

Homeless Hack Manchester was a 2-day event for anyone interested in helping tackle the problem of homelessness in Manchester and support those currently facing it. The aim was to engage the NorthWest digital community in helping to reduce the specific problems in Manchester. The hack gave designers and developers a chance to contribute to the important work that’s already happening in Manchester, through Manchester City Council’s Greater Manchester Homelessness Action Network and the Action Groups and programmes underway from organisations such as Street Support, Albert Kennedy Trust and Not Just Soup. »

Author image Tom Pennington

React at Zuto

At Zuto we’ve been using React for around six months now. The repository which contains all our React components was created back in October 2016. At the time of writing it has seen 700 commits by 5 main contributors. This post aims to summarise some technical decisions we have made along the way. When you start to learn React, you’ll quickly find like with most JavaScript frameworks or libraries, there are ten million different ways of writing it. »

Hack Manchester 2016

On 29th-30th October I took part in Hack Manchester at the Museum of Science and Industry as part of two teams from @zuto. Hack Manchester is a 24 hour coding competition where teams of up to four people turn up with an idea and have 24 hours to present a working product. Our chosen challenge was set by the CO-OP. “We’d like teams to make something that can help people who may be experiencing loneliness connect with each other/someone. »

Author image Tom Pennington

JavaScript Promises with Q

When I first started writing JavaScript in NodeJS and AngularJS, I struggled with the concept of promises. I’ve put together a simple project showing how promises in JavaScript work using the JavaScript promises library Q. The project is very simple but should give you a good understanding of how promises work on a basic level. »

ODC, A Ghost Theme

My site is built on Ghost, a blogging platform. The current template is one I’ve built myself based on Casper, the default theme. It’s called OCD and you can download and use as you wish for free. »

Author image Tom Pennington on #Ghost,

Gulp Stubby Server Contribution

This week I made my first contribution to an open source project on GitHub! Recently I’ve been running acceptance tests against mocks (mock responses as opposed to hitting an actual API). The tests are written in JavaScript and run via Gulp. To create mocks for the tests, I’ve been using npm gulp-stubby-server which is essentially a wrapper around Stubby. When running the tests in a CI environment I found that the stubby server wasn’t shutting down properly. »

Author image Tom Pennington