If you are using a static site generator you might want to have some static content that periodically updates, such as a year, let’s see how you can automate it! — Every year you probably want to ensure your copyright header on your site(s) is up to date, if you manage lots of sites you will want to automate this! To solve this you might want to periodically build your website on Netlify (or similar), the answer isn’t that straight forward and some tools (Github Actions) have gotchas.

In this article we’ll explore how you could build a drag and drop sortable table using @dnd-kit and react-table. Drag and drop table using react-table and dnd-kit. When looking for drag and drop libraries in React there are a lot of options, some of the popular ones are: Many of…

This is my first blog post I’ve written about React, despite reluctantly using it every day due to the UK frontend job market. I’ll probably regret talking about such a popular Framework, oh and it is a Framework 😉. Recently, I was writing an animated slide-in sidebar component, which could…

I recently had to implement an indicator of progress onto a card component, I challenged myself to see if this could be done with a single css property, here’s how. — Here is a full demo of the css which I’ll show you how to build, by learning the structure of the css background shorthand property. Before today I’ve always shied away from full understanding all of the shorthand property capability that is baked into the background attribute but today…

You may not need client side JavaScript to add dynamic content from an API. In this article I will show the approach I recently took to embed YouTube playlists into an website created by a static site generator (Elventy), and how this approach lends itself to less JavaScript and progressive enhancement. — I recently launched a re-write of my brothers Guitar teaching business website: cgguitar.co.uk, during this rewrite I had some guiding principles which I believe are best practices when building any website:

I’ve been learning TensorflowJS and Machine Learning, as an experiment, I thought I would implement a search across my current blog posts using sentence similarity on natural language, running in the browser. — In this post i’ll go into how you can get started using pre-trained Tensorflow models to do Machine learning in the browser, examine some of the potential gotchas, such as not blocking the main thread with custom logic and consider the impact of the size of models on UX.

Sometimes when you’re prototyping and learning a new library you want a quick way to get type-checking/intellisense/auto-complete to assist with your learning. Here is a quick way to enable type checking without fully opting into TypeScript. — I’ve been learning a little bit of artificial intelligence/machine learning in my spare time and I recently started learning a little TensorflowJS. The quickest and simplest way of getting TensorflowJS is a good old script tag. …

That feeling when you see some awful code, and then realise you wrote it. Here’s a story of how some bad code I wrote in a unit test, made it into production and caused a memory leak in a NodeJS application. — A project that I work on started showing crashed Pods in our Kubernetes (K8s) cluster, which runs a NodeJS server in a container, it was failing with a dreaded “OOMKilled” (Out of memory killed) error, which sent me down the path of learning about profiling NodeJS applications for memory leaks.

Masonry layouts, think bricks, think Pinterest, have had many solutions in the web over the years. Many use too much JavaScript, but there is some exciting new things coming to CSS grid to enable Masonry layouts. But you don’t have to wait, you could implement today, using progressive enhancement. Progressive enhancement is like technical debt that fixes itself. — A few days ago I found that I had talked myself into re-designing a website. The website is for my brothers’ guitar teaching business which I had previously worked a few years ago, when I was a student. …