SuperHi

Senior Software Engineer

Bulb

Senior Software Engineer (Contract)

I was hired by YLD to work at Conde Nast International on the redevelopment of their entire catalogue of brands –  Vogue, GQ, Wired, etc – bringing them onto a single platform. The project had previously suffered due to some poor technical decisions. As a result, part of my role was to mentor the junior developers (through pair programming and code reviews) and help steer the technical decisions.

Senior Software Engineer (contract)

I encouraged the use of design patterns and SOLID principles in order to make the code more flexible and maintainable. Adopting these also helped streamline the on-boarding of new members of the team.

Made the code more flexible and maintainable by encouraging use of design patterns and SOLID principles.

Clean code

I added <a href="https://github.com/facebook/flow">Flow</a> so that we could begin using static typing. I made the decision to use Flow over TypeScript as it can be incrementally adopted a lot easier. I felt that this really benefited the team as it reduced errors, greatly aided refactoring and improved domain modelling - especially for large configuration files.

Reduced errors, made refactoring easier and improved domain modelling by using <a href="https://www.typescriptlang.org/">TypeScript</a>.

Static typing

I proposed that we start colocating tests. Previous to this, the tests were scattered across an extremely deep `test` folder. Colocating tests with the code they were testing made it a lot easier to find untested code, and make sure it was kept up to date.

Made tests easier to write, find and update by colocating them.

Colocated tests

The codebase already had linting set up, but there were a lot of disagreements over which rules should be used. I introduced <a href="https://github.com/prettier/prettier">Prettier</a> to eliminate the need for debates over this while also helping developers to learn to naturally write their code in a more readable way.

Eliminated debates over linting rules by integrating <a href="https://github.com/prettier/prettier">Prettier</a>. Added benefit of helping developers learn to naturally write their code in a more readable way.

Code formatting

One of the technical decisions that needed rethinking was theming. The project had been set up to use CSS modules with CSS variables. However, this was not flexible enough for the various constraints. As a solution I introduced <a href="https://github.com/styled-components/styled-components">styled-components</a> to the team. This instantly removed several blocking issues and allowed the components to be developed in isolation far more easily.

Removed blocking issues around theming and allowed components to be developed in isolation by introducing <a href="https://github.com/styled-components/styled-components">styled-components</a>.

Theming

Condé Nast

DeadHungry

Developer

The Trainline

Dubsmash

I was hired as the lead front-end developer to bring some of Dubsmash’s most popular features from their mobile app to the web. Part of my job was to set up the project tooling and architecture while keeping in mind the on-boarding of more developers in the future.

Senior ReactJS Developer (contract)

I created a scalable structure for the project in order to accommodate the inclusion of various legacy features with new features under one codebase. The site was split in to 4 main apps, and I created a set of shared utilities to make bootstrapping and maintaining common functionality easier.

Made bootstrapping and maintaining common functionality of seperate apps easier by creating shared utilities.

Scalable structure

One of the focuses of the project was to have an incredibly small bundle size. I set up tree-shaking using Webpack, moved rarely-updated vendor files in to a separate, more aggressively cached bundle, and separated each individual part of the site into separate bundles based on the most typical user flows.

Improved loading time by setting up tree-shaking, moving vendor files into an aggressively cached bundle and separating parts of the site into separate bundles based on typical user flows.

Bundle size

This was very important for the project as the majority of traffic came from countries with slow internet connections. To achieve a quick render time I wrote a utility to only load the custom fonts after the rest of the scripts had finished executing and cached parts of the state in LocalStorage.

Improved render time by delaying loading of custom fonts and caching parts of state in LocalStorage.

Render time

The project required a lot of UI interactions and data manipulation so I chose to implement most of the code using <a href="https://github.com/ReactiveX/rxjs">RxJs</a> in order to make dealing with asynchronous events simpler.

Made dealing with asynchronous events simpler through use of <a href="https://github.com/ReactiveX/rxjs">RxJs</a> observables.

Observables

Vvatch.tv

I lead the redevelopment of a social platform for creating and watching video channels from a prototype to a full product. My job was to analyse the existing prototype and collaborate on redefining and redeveloping a new MVP including an accompanying Chrome extension.

Lead Developer

To get the best compromise of time and effort vs output, I chose to use Meteor as the development framework. It allowed us to quickly develop features on the both the back and frontend using isomorphic code, provided realtime updates through an abstraction using websockets and had an ease-to-use API for communication with a database.

Developed features quickly on back and frontend using isomorphic code with Meteor.

Time vs effort

The project lent itself to a microservice architecture. I encouraged creating everything in well-defined packages of code that could, in the future, be extracted and deployed to separately managed services. I was not able to achieve a full microservice architecture before I left the project, but I feel that I laid the foundations for this to be easily expanded upon in the future.

Encouraged microservice-like structure through grouping of code into well-defined packages that could be extracted and deployed to separately managed services.