an email being all like "heyoooooo" to ZSA and Shopify

large_zsa-email-shopify.png

medium_zsa-email-shopify.png

small_zsa-email-shopify.png

thumbnail_zsa-email-shopify.png

zsa-email-shopify.png

Case Study: Responsive email templates at zsa.io

ReactJS

Responsive Emails

NodeJS

Emails are hard, but they don't have to be...

<a href="//zsa.io" target="_blank" rel="noreferrer">ZSA.io</a> is a maker of ergonomic mechanical keyboards.
Many of us spend our days typing, but do we really pause to consider what that feels like in our body?
This experience is an opportunity to do just that.
I was hired by ZSA.io to help build out a small, fun marketing site. The app was built on top of React, with WebGL visual elements using a custom shader written in GLSL. The app also relies heavily on WebVTT for cueing subtitles and orchestrating the experience.

<a href="//keyboardyoga.space" target="_blank" rel="noreferrer">Visit the site to chill out and mindfully-type</a>

large_keyboard-yoga.png

medium_keyboard-yoga.png

small_keyboard-yoga.png

thumbnail_keyboard-yoga.png

keyboard-yoga.png

Keyboard Yoga

WebGL

The hat of communication.

Web VTT

Many of us spend our days typing, but do we really pause to consider what that feels like in our body?

large_keyboard-yoga-thumb.png

medium_keyboard-yoga-thumb.png

small_keyboard-yoga-thumb.png

thumbnail_keyboard-yoga-thumb.png

keyboard-yoga-thumb.png

<h2>Overview</h2>

Scottish Television (STV) is Scotland’s largest commercial broadcaster, with a flagship streaming service that serves over 10 million streams per month. This web product is a key aspect of STV’s digital presence, allowing them to reach a vast audience with on-demand television and live broadcasts.

Despite its success, the app had grown into a significant monolithic, making development and deployment increasingly difficult for the team. The team wanted to transition towards an architecture that would allow for more granular and flexible deployments. The codebase itself was diverse and somewhat fragmented, with parts built at different times using a variety of technologies. large parts of the codebase were rendered in PHP whilst other parts used React on the front-end

Due to the release of STV’s Android and iOS apps, a JSON data API had already been developed to serve as a backend for these applications. This set up meant that getting the Front-end team to assume responsibility for rendering of all view code seemed like a no-brainer, enabling the back-end team to concentrate on data management and infrastructure.

My initial role at STV was part of the news team, where I had been exploring ways to convert the web news app into a Progressive Web App (PWA). This exploration included a POC around using Next.js and a new Node.js infrastructure. With this foundation, I was moved over to help implement the migration of the main app to Next.js.

<h2>Problem</h2>

The existing app was extensive, incorporating many sub-applications that each addressed different functionalities of the platform. Fortunately, these sub-apps were organized under distinct top-level paths, which provided a degree of separation helpful for modular migration. However, Next.js was relatively new at the time and largely untested in a production environment, so the switch involved a degree of uncertainty and significant planning.

Transitioning to Next.js required infrastructure changes, including STV’s first deployment of a production Node.js application. This brought new considerations and the need for additional planning regarding the server architecture. The player code itself was sizable and complex, involving various elements like ad tech and analytics integrations, which had to be addressed carefully during migration.

Management was interested in understanding the direct benefits of such an involved development project from a consumer perspective, as the migration would require considerable development resources and commitment.

<h2>Solution</h2>

To address these challenges, we started with a simple proof of concept. First, we deployed a basic app in the real production infrastructure, running load tests using AWS’s “Bees with Machine Guns” tool to validate the app’s performance under expected traffic loads. This provided reassurance to management regarding scalability and helped demonstrate the infrastructure's reliability.

We adopted a design-first approach, as the app was in the midst of a design refresh. This allowed us to align the migration with the new design standards, ensuring a cohesive look and feel upon the app's launch and cut out any cruft that the stakeholders felt was no longer necessary.

Thanks to the well considered routing of the initial app, we could intercept requests at the infrastructure level, migrating the application incrementally, path by path. <pre>/player</pre> could still navigate to the legacy app, but <pre>/summary/:programID</pre> could be directed to the new Next.js app. We began by migrating simpler pages—such as the landing and listings pages, which primarily displayed static content like images—to help identify and resolve any early technical challenges (mostly around authentication, advertising integrations, and CORS)

The main video player application was relatively self-contained, making it feasible to migrate this section as an independent module. By deploying the video player as a standalone module that communicated with the top-level app via a message bus, we gained the ability to update this component incrementally without disrupting other parts of the service.

Given that some parts of the app were already written in React, this also made it easier to integrate these components into the new app structure.

<h2>Results & Impact</h2>

The migration provided an opportunity to streamline and modernize the codebase. Rewriting portions of the app allowed us to reconsider priorities, eliminate outdated code and unused utilities, and leverage new tools to build a leaner, more efficient codebase.

The adoption of styled React components fostered greater code reuse across the app. This made it easier to develop new parts of the application, not only for the main player but also for additional sub-apps, all while maintaining a consistent brand experience.

Building the app with modern React also enabled us to establish better test coverage, both at the unit and integration levels. This contributed to a more stable application with enhanced reliability over time.

The migration also brought significant performance improvements, reflected in a higher Lighthouse score across key metrics like Time to First Paint (TTFP), Time to First Interactive (TTFI), load times, bundle sizes, and accessibility (a11y). These performance gains translated into a smoother user experience, directly benefiting STV’s viewers. Improved page speed, which impacts revenue, was also tracked across deployments, enabling long-term performance monitoring.

Deployment times saw a considerable reduction, thanks to the more modular structure of the new architecture. Additionally, infrastructure usage was optimized; by caching pages on the front-end infrastructure, we reduced the load on the backend, further enhancing the app’s efficiency.

large_Screenshot from 2022-02-18 11-35-38.png

medium_Screenshot from 2022-02-18 11-35-38.png

small_Screenshot from 2022-02-18 11-35-38.png

thumbnail_Screenshot from 2022-02-18 11-35-38.png

Screenshot from 2022-02-18 11-35-38.png

Case Study: Migrating a legacy PHP app to Next.js at STV

The hat of team playing.

The hat of Agile Methodology.

HTML5

JestJS

ExpressJS

Redux

Next.js

CSS / SASS

Scotland's largest commercial croadcaster

small_Screenshot from 2022-02-18 11-39-28.png

thumbnail_Screenshot from 2022-02-18 11-39-28.png

Screenshot from 2022-02-18 11-39-28.png

FlightRadar24 is the world’s most popular flight tracking app with roughly 1.5m daily active users.

As part of the Map Kanban Team, I was responsible for maintaining the web map / associated UI with migrating the significant legacy codebase. Tech included, but was not limited to, VueJS, SASS, ES3 (for legacy code), TypeScript, GoogleMaps API and GoogleAds amongst others. Due to the high amount of traffic, UI performance was an integral part in architectural decision making. Given the nature of the legacy code we also implemented e2e testing with Cypress.

large_Screenshot from 2022-02-18 11-37-51.png

medium_Screenshot from 2022-02-18 11-37-51.png

small_Screenshot from 2022-02-18 11-37-51.png

thumbnail_Screenshot from 2022-02-18 11-37-51.png

Screenshot from 2022-02-18 11-37-51.png

FlightRadar24

VueJS

The Hat of Problem Solving.

Gulp

jQuery

Webpack

JavaScript

The World's most popular flight tracker

thumbnail_Screenshot from 2022-02-18 11-38-09.png

Screenshot from 2022-02-18 11-38-09.png

As Freelancer working with creative agencies, I was lucky enough to work on an AR Experience for Johnnie Walker as part of their launch. The project was an AR web experience using an animated dire wolf or dragon (depending on which bottle you had) that interacted with the scene. I was responsible for UI development and some webgl bits and pieces.

large_Screenshot from 2022-02-18 11-43-57.png

medium_Screenshot from 2022-02-18 11-43-57.png

small_Screenshot from 2022-02-18 11-43-57.png

thumbnail_Screenshot from 2022-02-18 11-43-57.png

Screenshot from 2022-02-18 11-43-57.png

HBO / Johnnie Walker Dragon Glass

Web Platform

Whisky is coming...

small_Screenshot from 2022-02-18 11-39-50.png

thumbnail_Screenshot from 2022-02-18 11-39-50.png

Screenshot from 2022-02-18 11-39-50.png

As part of my foray into autonomous agents (thank you <a href="https://natureofcode.com/" target="_blank">Daniel Shiffman</a>), I built a generative tree grower.
 
The code starts with a single agent and then iterates with this agent. Each iteration the agent can split into one or more child agents, die, change direction, grow a leaf, the positions are then merged into a buffer geometry, creating a 3D tree.
 
Each initial agent has a set of parameters that will define the subsequent behaviour of the tree's growth, it's leaves and it's overall shapes.
 
The "growing" is animated by moving the gl drawRange on each frame, giving the impression of the tree growing.
 
Hopefully I don't need to tell you that these trees don't really exist in the real world?
 
You can view the full version <a href="https://www.lesmoffat.co.uk/sketches/trees" target="_blank">here</a>.

large_a-random-tree.png

medium_a-random-tree.png

small_a-random-tree.png

thumbnail_a-random-tree.png

a-random-tree.png

Generative Trees

collaborate on a coding / art project.

Growing things with autonomous agents

large_a-random-tree-thumb.png

medium_a-random-tree-thumb.png

small_a-random-tree-thumb.png

thumbnail_a-random-tree-thumb.png

a-random-tree-thumb.png

More art than utility: a whimsical WebGL clock that playfully pushes the boundaries of usability. This unique timepiece revels in the irony of making you waste time trying to read the time. Crafted with WebGL, it transforms the simple act of checking the hour into an engaging and perplexing experience.

<a href="//www.lesmoffat.co.uk/sketches/weird-clock-1" target="_blank" rel="noreferrer">Check the time here.</a>

large_a-weird-clock.png

medium_a-weird-clock.png

small_a-weird-clock.png

thumbnail_a-weird-clock.png

a-weird-clock.png

A Strange Clock

Time's up

small_a-weird-clock-thumb.png

thumbnail_a-weird-clock-thumb.png

a-weird-clock-thumb.png

Whilst working on STV's news app, my colleagues and I were constantly presented with depressing stories, it can affect your mental health.

So I built a chrome plugin that makes the world seem just a little bit nicer. The plugin hits up an API to get a list of words to pull the 'ol switcheroo on and subsequently swaps out any images for that of a baby animal. So for example "man murdered by drug dealer" becomes "man hugged by small child". The project is discontinued now but a former colleague and I are looking to resurrect the plugin and get it on the chrome store.

Work.