Carl Topham

React.js & JavaScript developer

Recent articles

GPX doodling - a guide

November 2, 2022
Recently I drew a Halloween doodle while I was out for a run. A few people asked me how I did it, so I thought that a guide would be helpful! There are a few steps to getting a good result: Picking the location Planning the doodle Creating the doodle ...

Using GROQ to create an excerpt for a Sanity block

October 22, 2022
This is a quick tip on how to truncate a Sanity block field to create an excerpt using GROQ. When querying the field using a Sanity Client and GROQ, there is no inbuilt excerpt function, or even a truncate function, so we need to do the steps ourselves. ...

Run report: To the Top of Corfu

May 26, 2022
A 33 km off-road trail run from the Corfiot sea side town of Roda, to the highest point on the island, Mount Pantokrator at (911 metres (2,989 ft)). A beautiful route, through olive groves, tiny villages, with views to die for, but took longer than estimat...

Fixing issues with NextJS local file APIs and Netlify functions

May 17, 2022
Recently I migrated my personal website to Next.js and thought I had everything working well with Netlify, however on deployment I noticed an issue with the API data... Background As part of my migration from Gatsby to Next.js I moved the .gpx data to a ...

Type narrowing and discriminating unions in TypeScript

May 10, 2022
Type narrowing is the process of moving from a less precise set of types to a more precise type or set of types. The aim of type narrowing is to reduce the types down to only the ones where the following methods or properties can be correctly accessed or c...

Recent projects

Migrate from Gatsby to Next.js

Rebuild my portfolio site ( in Next.js, migrating from Gatsby

Running kit bag

Interactive kit bag checklist app to ensure that I always have the right running kit for training, races and all weather!

SmartSave & LiveLend WebApps

React.js Redux WebApps using REST APIs with Auth.

Chord generator script

Generates note combinations for different keys & chords

Advanced Strava Stats

Sync your Strava data and analyse it in extra ways than the official app. React, Redux, Saga, Axios & D3