Articles

Page 2



  • Getting user locale with JavaScript

    🧠Quick tip
    November 24, 2020

    To get a user's prefered locale we can query the navigator.language.

    const locale = navigator.language; console.log(locale); // => "fr" 

    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 returns an array of locales in order of preference.

    console.log(navigator.languages); // => ["fr", "en", "en-US"] 

    Note: The locale value from navigator.language is just the first item from the...


  • Styling React apps - what are the options?

    🕑9 minute read
    November 1, 2020

    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.

    This is by no means an exhaustive list, but the key areas are:

    • Inline styles
    • CSS
    • Sass build and imported as CSS
    • Sass classes imported as a module
    • Libraries such as Tailwind which are entirely utility class based systems
    • Libraries such as Bootstrap where utility...

  • Getting to grips with CSS variables

    🕑4 minute read
    October 21, 2020

    If you have ever used JavaScript variables then the concept of CSS variables should feel pretty familiar.

    1. You set a variable
    2. You use the variable

    CSS variables follows this same pattern, but the language is slightly different.

    body { --my-variable: red; } h1 { color: var(--my-variable); } 

    What is happening here? Firstly we set the variables - essentially they are custom properties. We use -- before the variable name to make it a variable. Then we use the variable by using var(--variable-name).

    <body...

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