Carl Topham
React.js & JavaScript developer
Recent articles
Putting the `S` in SOLID JavaScript
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 PrincipleO
- Open-closed PrincipleL
- Liskov Substitution PrincipleI
- Interface Segregation PrincipleD
- 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
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)
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
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
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...
Recent projects
Migrate carl-topham.com from Gatsby to Next.js
Rebuild my portfolio site (carl-topham.com) in Next.js, migrating from Gatsby
Running kit bag
Interactive kit bag checklist app to ensure that I always have the right running kit for training, races and all weather!
SmartSave & LiveLend WebApps
React.js Redux WebApps using REST APIs with Auth.
Advanced Strava Stats
Sync your Strava data and analyse it in extra ways than the official app. React, Redux, Saga, Axios & D3.
SmartSave Public Website
Wagtail/Django/Python backend with WebPack, React & Bootstrap frontend