Articles

Page 1



  • Run report: To the Top of Corfu

    🕑7 minute read
    🏃‍
    May 27, 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 estimated resulting in a bit of a hot and stressful finish!

    The route

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


  • Fixing issues with NextJS local file APIs and Netlify functions

    🕑2 minute read
    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 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 <Map /> component requests the geo json data it needs and the renders the routes and elevation profiles...


  • Type narrowing and discriminating unions in TypeScript

    🕑4 minute read
    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 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....


  • Putting the `S` in SOLID JavaScript

    🕑6 minute read
    February 16, 2021

    S - Single-Responsibility Principle (SRP) is the first design principal covered by SOLID principals.

    SOLID is an Object oriented design principal. It stands for:

    • S - Single-responsiblity Principle
    • O - Open-closed Principle
    • L - Liskov Substitution Principle
    • I - Interface Segregation Principle
    • D - Dependency Inversion Principle

    The principals were originally created and promoted by Robert Martin (aka Uncle Bob).

    SRP simply states that Classes and functions should only have a single responsibility. This sounds...


  • Getting started with Blender

    🕑4 minute read
    February 13, 2021

    I recently picked up 3d modelling after quite a few years away. I have not used Blender before so learning the basics involved many seaches and skimming videos to fine what I needed. This post is a quick guide to getting started with blender that I have created from my notes.

    Hopefully it will enable you to get started more quickly than I did!

    Navigation

    Firstly if you're on a (mac) laptop without a numpad then you will want to enable numpad emulation. This will allow you to use the normal numbers to navigate...


  • React and Material UI (MUI)

    🕑10 minute read
    January 8, 2021

    When I first used Material UI, I struggled with a few concepts. I've written this quick overview to help get my head around it, and hopefully guide others to a quicker start.

    I'm going to make a new project and then create some (horrible) styles!

    Create the project and add MUI

    Create a project and install the Material UI package

    npx create-react-app material-ui-playground 
    cd material-ui-playground 
    yarn add @material-ui/core 

    Clean up the initial templates

    Remove some unused contents (import of the styles)...


  • Formatting percentage values with JavaScript Intl

    🧠Quick tip
    January 5, 2021

    Javascript contains an Internationalization API that you can use to format numbers to a user's locale. Setting the style to percent is all that is needed.

    Intl.NumberFormat("en-GB", { style: "percent"}).format(1.2345); // => "123%" 

    Note: A value of 1 will return 100% because 1x anything is 100%!

    1 * 100 = 100; // 100%  1.5 * 100 = 150; // 150%  

    To specify the decimal places use minimumFractionDigits and maximumFractionDigits to give you more visual control.

    Intl.NumberFormat("en-GB", { style: "percent",...

  • Formatting currency with JavaScript Intl

    🧠Quick tip
    December 17, 2020

    Javascript's Internationalization API allows you to format currency. It takes the locale and options to configure the currency we're using. The options require the style to be set to currency and a currency option to specify the unit type, as this is returned as part of the result.

    Intl.NumberFormat("LOCALE", { style: "currency", currency: "CURRENCY UNIT"}).format(VALUE); // => "€1.23" 

    The following example formats a EUR (Euro) currency of the value 1.2345 into a en-GB (English - Great Britain) format.

    Intl...

  • Strava API activity sync with Axios, React, Redux & Saga - part 2

    🕑12 minute read
    December 16, 2020

    With the auth and state setup from part 1 of "Strava API activity sync with Axios, React, Redux & Saga" we can now progress to getting the activities and displaying them in a table.

    Overview

    Now we have tokens we can start to get the data from Strava. The steps we will take cover the following:

    • Adding moment to handle date based checks
    • Create constants for getting activities
    • Create the reducers to handle the results of getting the activities
    • Using Sagas to retrieve the activities from Strava's API, including...

  • Strava API activity sync with Axios, React, Redux & Saga - part 1

    🕑15 minute read
    December 13, 2020

    Why?

    I've been using Strava for over 5 years to track my activities, and more recently analyse them too. Towards the end of 2019 I realised that I was getting close to running 1,000km in a year, so I started a basic spreadsheet to track the data so that I could plan my runs accordingly and hit my goal. The spreadsheet was a basic setup that just plotted distance run vs distance I needed to run, but it got me to the end of the year, and I managed to pass my target. As 2020 began I started to update the spreadsheet...