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

Alex Paganelli

Developer

DeadHungry

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

Grabble

I lead the development of a bespoke CMS for apps and social channels with a focus on e-commerce. The team was faced with frequently changing goals as a result of being in a new market. This required a close collaboration between iOS, Android and design in order to react to these changes as efficiently as possible. I was also responsible for mentoring a junior developer.

Lead UI Engineer (contract)

Due to tight time constraints, the API was initially being developed simultaneously to the frontend. To make the transition to the real API easier, I agreed the architecture beforehand with the backend developer and created an API abstraction that allowed me to simply swap out the data source once the real API was ready.

Allowed simultaeneous development of back + frontend by creating an API abstraction for development.

API abstraction

One of my main aims was to simplify testing and encourage code reuse for the project, so I chose to start using a functional programming style. This helped with my decision to develop the project in feature buckets, which enabled us to get features out more quickly to test, such as the media library and user management, and then incrementally add more features.

Simplified testing and encouraged code reuse by using a functional programming style.

Functional programming

Enabled fast shipping of isolated features by developing project in feature buckets.

Feature buckets

I chose to manage the entire application state, both data and UI, using Redux. This made debugging any issues much easier as it was simple to see both how the state was updated and how the data then flowed through the application. It made it far easier to generate computed state.

Made debugging easier by using Redux to manage both data and UI state.

State management

Mobula

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.