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:

Pick somewhere that is a large open space. Parks and fields work really well. Make sure there is enough space. Too small means minor navigation errors will quite visible and "break" the doodle. Too big and it's hard to use the surroundings for reference points. 

A community football field works well for me. It's got clear space to move about.

An important part of the planning is having reference points. If you can find somewhere with a good set of reference points then that is ideal. While you move about you need to be able to know where you are in relation to your doodle! Anything like trees, bins, goal / telephone posts and lines are great. 

The football pitch has some nice reference points (goal posts and pitch markings)

Don't rely on patches of grass or mud. They blend in to the surroundings as soon as you move away. I am considering buying some 

Draw it out on a piece of paper, or using a route planning feature (Strava or Garmin have them). When you're drawing on paper, the key thing to remember is that you only have a single line to work with. You'll have to get creative on how you join features together.

When planning the pumpkin I drew the pitch for scale, then planned the eyes by drawing a single line from the stalk to the nose and from their to the eyes and mouth. I also planned to retrace my steps to reduce any unnecessary lines.

The key thing you need is to have a device that can record your route using GPS. I normally use a Garmin for my regular runs, but it is hard to navigate in any detail with it, so I chose to use the Strava app on my iPhone - I can't zoom in as much as I'd like, but it works well enough!

You don't need to run to draw a doodle, you can walk it too! 

Once in place start the app/phone tracking and switch it to a map view. Try to visualise the route as you move and use the references around you to keep on track so that you don't need to check the app too often. 

I used the goal posts, centre circle and penalty area as key features to line up the features. The mouth was more difficult as there were less features close by to use for the teeth details.

Tip: It's worth noting that most GPS devices have a tiny bit of lag, so as you get near to a edge or corner it's worth slowing down. For smaller features, like the pumpkin's "teeth" count the steps out and back so you arrive at roughly the same location.

It doesn't really matter if you aren't super accurate. The wonky-ness is a feature! The point is to have fun!

GPX doodling - a guide

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.

Truncating the field could be done using a JavaScript function after the query, but this would require the entire field to be returned, which is not ideal.

This bit of a hack and not the most efficient query, but essentially:

Get the string of the body as above using the text feature of the portable text functions.

Split the string into an array of every character.

truncate it to 255 characters by taking a subset of characters (assuming it's actually longer than 255 characters).

Join every remaining character back together.

Get the string of the portable text block field using 

 is used, it will return the text of the field, but not the formatting. This means that if you have a block field with a heading, it will return the heading text, but not the heading formatting.

Split the string into an array of every character using the 

Truncate the characters to 255 characters by taking a subset of characters (assuming it's actually longer than 255 characters):

Join an array of characters back together using the 

We are also concatenating the ellipsis to the end of the truncated string:

Because GROQ queries can be piped together, we can do all of this in separate queries.

In the following example I will use a field called 

 which is a Sanity block field. Replace that as needed. 

Joined together it can either be a set of queries piped together:

This is a hack, and does have some downsides for example:

 then there are 4 characters in the ellipsis: 

The string is split by character, so if a word is split in half, it will be split in half.

 to do this by word, but this doesn't account for other punctuation, and there's no easy way to truncate to a specific number of character.

If the string is less than 255 characters, it will still return the entire string.

 the returned value is just a string with no markup such as paragraphs or titles.

Using GROQ to create an excerpt for a Sanity block

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 estimated resulting in a bit of a hot and stressful finish!

Because I was unsure of the route and wanted to make sure I was going a sensible path I ended up plotted this using Strava, and then again in Komoot. I also imported it into Garmin Connect (to sync with my watch). All of these estimated between 3 - 4 hours. The route I planned was pretty simple in principle.

Starting off in Roda, head a few km in land by road until I hit the trails and start climbing into the hills

Head east towards Episkepsi then continue climbing trails further into the mountains

Traverse the plateau road meeting the Corfu trail at the bottom of Mount PantoKrator

Head up the summit to the top of Corfu ⭐️

Continue on the Corfu Trail through Old Perithia (the oldest village in Corfu)

Follow the trail back towards the sea before splitting away in the lower hills towards Acharavi

Loaded up with 4½ litres of water (some with electrolytes), snacks and sunscreen, I set off just after 7 AM, to avoid the heat later in the day as temperatures were expected to reach up to 29℃. As luck would have it, most of the initial climb was on the shaded side of the mountains so I avoided a lot of heat during the initial climb.

I was about 10km in when I reached the plateau and full sun, which meant a further 6km to the top. "Just a ParkRun and a bit" I joked to myself, but there was still at least 300m of altitude gains I needed to make too. However, the roads here were nice smooth and quiet, so I just plugged along stopping every once in a while to take in the view, grab a quick photo and have a good sip of water.

The kilometres slipped by. Spurring me on now was the view of the final destination, Mount PantoKrator, and it's crown of radio masts nestled in a 17th century monastery! As I reached the base to the summit I knew I would be mostly walking up the final stages. Not only was it steep, but the temperatures has climbed alarmingly quickly, and I was starting to feel it! 15 minutes later I was at the top.

The radio mast inside the monastery was almost as striking as the view and it was nice just to take 5 minutes to stroll around in the semi shade and breeze while taking in the sights. I was going to stop for a drink at the cafe and fill up my water, but the cafe wasn't open for another 20 minutes or so, and I needed to get back so I decided to get head on my way again. This is where I arguably made the major mistake of my run, but I didn't realise this just yet.

I joined the Corfu Trail and followed it down through the valleys and woods passing through the tiny village of Old Perithia. Continuing on along the trail northwards into more woodland and olive groves my mistake started to become readily apparent. My Camelbak ran dry. This was my major source of water and now left me with a single small 500ml bottle of water, and at least another hour or two in the full sun and heat of the day.

As I had initially planned it, my route took me past a number of cafés, restaurants and tavernas. Ideal places to stop, cool down, have a drink and fill up on some extra water. But time had not been on my side. Ironically, by setting off early I had unbeknownst to me set myself up with a future problem. Each of the places I went past was not yet open. In choosing not to linger at the top, I had left the final place with hydration behind and committed myself to a race against the heat. The return loop of the route had no cafés, no restaurants, or anywhere I could fill up with water. I had made an assumption that the downward leg or the journey wouldn't be anywhere near as hard even in the full heat, and I could "just roll down to the sea" and back to the start.

The trails were uneven at times, meaning slowing to a walking pace. In the woods, the leaves on the floor were dry and almost as slippery as ice and in the dappled light, the roots were just waiting to trip up an unsuspecting runner.

Finally, rejoining the road, I could up my pace as fast as I could manage, trying to find any shade I could at the sides of the road, while rationing my water to a sip or 2 per kilometre. To add to my frustration, some roads I was following on the map, and that according to the contours, should be heading downhill, were in-fact heading up hill. My quick "roll" down to the sea and shops with water was being tested and in the heat, with the lack of water this really started to play with my mind.

As I got hotter and more desperate, I did start to consider my options. "Can you drink sunscreen?", "What about that puddle of water leaking from the side of the road?", "Maybe I should just knock on somebody's door?". These questions popped into my head every few kilometres, then every few hundred meters before running on repeat in my head.

I carried slowly running on, until, gradually getting nearer to Acharavi until, finally, around one last bend I could see the main road, and... A small shop! And it was open. And that was glorious. The shopkeepers seemingly looked at me bemused as I grabbed some cans of Coke and Iced tea and fumbled with my money, mumbled "efkaristo" (thank you) in a terrible greek accent, and then stood outside rubbing a can across my face. After joyfully sipping the ice-cold Coke, I filled up my bottle with the Iced tea and then set off to the sea front and my final 3 km.

Success! About 20 minutes later I staggered back to the hotel complex, went straight to the bar for another iced tea and a Mythos (beer) as a reward. I had made it from the shore of Corfu, up to the highest point, gaining 1300m of altitude and covering 33.5 km in the process.

In the end it took closer to 5 hours, but it was thoroughly enjoyable experience. Despite the setbacks later in my run, I really enjoyed the scenery, especially the initial climbs up through the groves and hill sides and the initial descent in to Old Perithia.

As with most of my longer runs, I learnt something useful to take with me on future runs:

You can never have enough water. If you have an opportunity to top up your water, then take it!

Don't trust the Strava/Garmin/Komoot route time estimates for non-standard routes (odd terrain, large elevation changes etc.). Add on 25% just in case!

Don't always trust maps to give you an accurate lay of the land!

Iced tea is a very nice drink when running (maybe not so much if it gets warm)

Run report: To the Top of Corfu

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...

As part of my migration from Gatsby to Next.js I moved the 

 data to a Next.js API end point so that I can easily access the data in multiple places. I'm currently using the data in a custom Leaflet map component on posts. Each 

 component requests the geo json data it needs and the renders the routes and elevation profiles.

 files on the file system and then parsed into geo-json and served via the API.

When testing this in dev and on a local build/serve this all works well, and I can see a nice map and graph. However, in production the map doesn't show and the network displays a 500 error. Looking at the Netlify logs I see:

From this it's clear that the Netlify functions can't find the 

The file names are case-sensitive on Linux, but not Mac (or Windows). My files are in the correct case!

Since I'm using functions, that is the likely cause.

As part of a function build, netlify bundles up all needed modules and files before deploying them, but looking at the logs, it's clear that the files are not there. So how does Netlify know what to bundle? 

 we can include any files we need manually:

Now when Netlify builds the function it will automatically include the 

After redeploying with this extra config, the API endpoint works successfully, and we can see the maps on the articles with a 

Fixing issues with NextJS local file APIs and Netlify functions

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 called without throwing errors.

It's a bit like playing a game of "Twenty questions".

In the traditional game, one player is chosen to be the answerer. That person chooses a subject but does not reveal this to the others. All other players are questioners. They each take turns asking a question which can be answered with a simple "yes" or "no". - 

https://en.wikipedia.org/wiki/Twenty_questions

Consider a variable that can be a string, number or Date.

If we want to format that variable, then we need to know what it is in order to do so. We need to apply some narrowing inside the function so that we can handle the different types which the variable can be.

This also works with properties of types. Take the following function, which allows you to add a flavor to your snack.

Because we can pass a Sandwich or a Pizza to the addFlavor function, TypeScript throws an error when we try to access the 

 property because we could be trying to access a topping on a 

 which is not possible. In order to prevent this from happening we need to narrow the type down to just Pizza (or Snacks which can have a topping).

By using the values and properties of variables and objects we can narrow down the type until we get to one or more that we are targetting.

We can ask the question... Do you have a property of 

? And if the answer is "yes" then we perform our actions.

Now if we add a new type of snack then the same logic can apply

We can also use combinations of properties to discriminate between types, or use discrimination unions.

One way to narrow down the type on which TypeScript is working with is to add a literal field to all relevant types and use it to narrow down to a single type.

Because types are removed during the build step of TypeScript we can't use the type names directly, instead we have to add another property to use in order to distinguish between them at run time

By using a discriminating union pattern we have a good way to narrow our types easily, especially where there are many other common overlapping properties.

Type narrowing and discriminating unions in TypeScript

Migrate carl-topham.com from Gatsby to Next.js

Rebuild my portfolio site (carl-topham.com) 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

Carl Topham

React.js & JavaScript developer

Recent articles

GPX doodling - a guide

November 2, 2022

Using GROQ to create an excerpt for a Sanity block

October 22, 2022

Run report: To the Top of Corfu

May 26, 2022