Articles

Page 2



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

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

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

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

  • Getting user locale with JavaScript

    🕑1 minute read
    🧠Tip
    To get a user's prefered locale we can query the navigator.language. To change your language in Chrome go to chrome://settings/languages and add/edit the list of languages. To get the full list of user languages we can use navigator.languages. This retur...

  • Styling React apps - what are the options?

    🕑9 minute read
    When building a React app there are a number of ways you can styles your components and layout. These range from plain CSS classes on elements through to fully integrated style libraries that handle building the styles and creating class names for you. Th...

  • Getting to grips with CSS variables

    🕑3 minute read
    If you have ever used JavaScript variables then the concept of CSS variables should feel pretty familiar. You set a variable You use the variable CSS variables follows this same pattern, but the language is slightly different. What is happening here? F...

  • Running up the worlds (formerly) steepest street

    🕑2 minute read
    🏃Run
    On the 15th of July 2019, Ffordd Pen Llech became the Guinness world record holder for the steepest street in the world at 37.5%. The road is fairly infamous amongst cyclists as a hill climb (although it's actually a 1 way road - downhill). It starts behin...

  • React - Memo

    🕑6 minute read
    Memoization is used to speed up applications by remembering the results of "expensive" function calls and calculations, so that they don't need to be recalculated again when the inputs have not changed. For example, if I ask you to calculate the results o...

  • Hooking into Gatsby's navigation changes

    🕑1 minute read
    On my site there is a toggling navigation menu. But when I toggle it open and then click a link it stays open. This is not right - it should close when you change location. Let's fix it using some really simple hooks in a few minutes. First lets see what w...

  • Running WordPress on Docker

    🕑2 minute read
    WordPress runs on a variety of platforms, but last time I was developing I was using a MAMP stack - Mac Apache MySQL & PHP. It's been a while since I was working on WordPress sites and I no longer have MAMP installed on my machine, however I do have Docker...

  • Create Playwright tests in jest

    🕑2 minute read
    This is a brief guide into setting up Playwright so that it integrates with your existing Jest testing suite. The aim is to get you using Playwright quickly and easily so that you can test the frontend of your web applications. Playwright is an incredibly ...