Code Buckets

Buckets of code

Better Async Calls in the useEffect Hook

The useEffect hook allows you to perform side effects on your React page. A common use case would be to perform an API call to populate the page when the page has mounted i.e. The Problem The callApi method is…

Working with Dynamic Images in React Native

I’ve been recently developing mobile apps using React Native and TypeScript and here’s an odd thing – it’s not actually possible to use dynamic images within React Native. The Problem with Dynamic Images I’ve coded an Android app that displays…

Amazing Markdown Diagrams with Mermaid

Unusually for a software developer, I quite like writing documentation. What I’ve never liked is drawing diagrams. I’ve never found a drawing package that I like, and I find dragging round shapes and linking them with fiddly little arrows a…

Npm link set up advice and troubleshooting

I’ve been fighting against npm link recently and I’ve a funny feeling I’m not the only one. I don’t find the documentation particularly useful, the way it works seems opaque bordering on mystical and the cli output is in cryptic…

Invalid hook call error in Next.js

A quick one. I keep getting this intermittent error when developing React applications using Next.JS – particularly when changing branches but it happens at other times too. Unhandled Runtime ErrorError: Invalid hook call. Hooks can only be called inside of…

Npm Package for Realistic Random Letter Generation

Moving on from my recent post about a realistic way to generate random letters – I’ve now published the work as an npm package. It’s largely an exercise in publishing npm packages but it I still like the utility and…

Farewell to Microsoft

Happy new year! It looks like 2022 will be the year that I say a fond farewell to .Net and Microsoft technologies generally.  It’s been a 20-year relationship with Microsoft and we’ve both seen changes in each other but our…

Fading text in and out with React

The Task I want to fade text in and out of a React app. I’m populating a series of quotes from an API and I want them to change gracefully. The Demo App The demo is a React application showing…

Helpful Starter Projects for React and Node

Here are some simple starter projects for Node and React I’m using. I’ve got a bit sick of using create-react-app and seeing a mountain of security vulnerabilities before I even start. The number of errors seems to range from 5…

Windows Subsystem for Linux Blue Screen of Death

Quick word of warning. A few days ago, I installed Windows Subsystem for Linux on my Windows 10 box. I was working on a React application that was written originally on a non-windows environment. The plan was to run the…