Articles

February 16, 2021

Putting the `S` in SOLID JavaScript

🕑 2 minute read

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…

Keep Reading →

February 13, 2021

Getting started with Blender

🕑 2 minute read

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…

Keep Reading →

January 08, 2021

React and Material UI (MUI)

🕑 4 minute read

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 Clean up the initial templates Remove some unused contents (import of…

Keep Reading →

January 05, 2021

Formatting percentage values with JavaScript Intl

🧠 Quick tip

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. Note: A value of 1 will return 100% because 1x anything is 100%! To specify the decimal places use minimumFractionDigits and maximumFractionDigits to give you more visual control. This can all be wrapped in a function to save…

Keep Reading →

December 17, 2020

Formatting currency with JavaScript Intl

🧠 Quick tip

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. The following example formats a EUR (Euro) currency of the value 1.2345 into a en-GB (English - Great Britain…

Keep Reading →

December 16, 2020

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

🕑 4 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. The steps we will take cover the following: Adding moment to handle date based checks Create constants for getting activities Create the…

Keep Reading →

December 13, 2020

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

🕑 6 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 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…

Keep Reading →

November 24, 2020

Getting user locale with JavaScript

🧠 Quick 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 returns an array of locales in order of preference. Note: The locale value from navigator.language is just the first item from the array of…

Keep Reading →

November 01, 2020

Styling React apps - what are the options?

🕑 5 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. 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…

Keep Reading →

October 21, 2020

Getting to grips with CSS variables

🕑 2 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? 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…

Keep Reading →

September 15, 2020

Running up the worlds (formerly) steepest street

🕑 1 minute read

On the 15th of July 2019, Ffordd Pen Llech became the Guiness world record holder for the steepest steet 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…

Keep Reading →

July 24, 2020

React - Memo

🕑 3 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 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…

Keep Reading →