Carl Topham - React.js & JavaScript developer
Home

Articles

Page 2



  • Running up the worlds (formerly) steepest street

    🕑2 minute read
    September 15, 2020

    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 behind the train station in the beautiful Welsh coastal town of Harlech, rises steeply up around the cliff the castle perches upon, along a narrow twisting road, until you arrive at a gift shop behind the castle! - Photos do it no justice.

    Sadly, it lost the accolade...


  • React - Memo

    🕑6 minute read
    July 24, 2020

    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 of a multiplication on paper or in your head, say 23 x 27, then I would expect that it would take you a little time to work out. Then, if I ask you to calculate it again with the same values (23 x 27) would you calculate it again, or would you remember the previous...


  • Hooking into Gatsby's navigation changes

    🕑3 minute read
    July 19, 2020

    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 we have to start with.

    // Original basic version of my Nav component import React, { useState } from "react"; const Nav = ({ nav }) => { const [open, setOpen] = useState(false); return ( <div> <button type="button" onClick={() => { setOpen(!open);...

  • Running WordPress on Docker

    🕑3 minute read
    July 14, 2020

    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 running. Since I can create a LAMP stack (Linux... AMP) running on my Mac. This is a bit closer to what the site would be running on in the real world, plus I can deploy the Docker app to something like a DigitalOcean Droplet quickly.

    Let's start by ...


  • Create Playwright tests in jest

    🕑4 minute read
    July 2, 2020

    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 versatile testing tool and is incredibly easy to set up as a standalone testing tool, but it can be even more useful once it's integrated with Jest.

    This guide assumes that you already have Jest setup and working.

    Setup Playwright

    We begin by adding Playwright...


  • What are JavaScript closures?

    🕑4 minute read
    May 28, 2020

    Closures are a way to retain a local variable's privacy, but allow it to be accessible in a global scope.

    JavaScript has global variables and local variables. Global variables are accessible to everything in your application. Local variables are only accessible within the local scope. For example:

    let runs = 1; function doSomething() { console.log(runs) // => 1 let cycles = 2; console.log(cycles) // => 2 } doSomething(); console.log(runs) // => 1 console.log(cycles) // => ReferenceError: cycles is not defined...

  • Understanding JavaScript scope

    🕑4 minute read
    May 18, 2020

    Scope refers to which functions, variables and objects other functions, variables and objects are able to access when an application is run. It can seem confusing at first, but with a slightly strange example I will try and explain the basics unsing castles and emojis 🤔...

    Global and local scope

    Imagine a castle. There is the land outside the castle which is global, and there is the land inside the castle which is local. People in the castle can see out into the countryside and see what exists outside in global...


  • Working remotely (from home) - COVID enforced

    🕑4 minute read
    May 1, 2020

    COVID-19 has changed things completely. In a matter of days I have switched from being in an office every day to being at home 24/7. It's not typical WFH, but it does contain a large proportion of the WFH experience. I want to breakdown and understand the pros/cons and highs and lows of the whole experience as it progresses.

    So far the 2 biggest factors to me have been the change to routine and the change to interactions throughout the day.

    Routine

    BC (Before COVID) I had a fairly consistent routine built around...


  • Designing a running training plan

    🕑4 minute read
    November 7, 2019

    I like to run. I run a lot, and I've found myself running every day of the week with little focus on what I want to achieve. Every day is the same 4-8km with a longer run on a Sunday. It's quite hard to progress myself, and measure my progress when I've been doing this because it all stays the same.

    • Monday - Run 4km because my legs are tired
    • Tuesday - Run 6-8km
    • Wednesday - Run 6-8km
    • Thursday - Run 6-8km
    • Friday - Run 6-8km
    • Saturday - Run 5km - Probably a Parkrun
    • Sunday - Run 25km maybe on a hill and tire out...

  • Theming Slack using a message

    🕑1 minute read
    February 15, 2019

    The Slack (desktop) client allows you to create your own themes. But did you know that you can also set the theme via a message. Simply send a message with the contents being 8 comma separated hex codes. You don't have to send the message to anybody either - Just send it to yourself!

    #DCDCDC,#ED6970,#ED6970,#FFFFFF,#FFFFFF,#291d1f,#1c7c5a,#3a4a8ff 

    These stand for the following elements:

    • Sidebar & top bar background
    • ????
    • Highlighted channel background
    • Highlighted channel text
    • Highlighted channel background...