Creating a rapid prototyping environment for React applications

Photo by Sigmund on Unsplash

First up, a confession of sorts. I’m a backend developer. There, I’ve admitted it.

The last time I did any serious frontend work we were using properties on tags, CSS was this mysterious new thing, and layout meant lots (and lots and lots) of nested tables.

Since then I’ve worked on teams with frontend developers, and I’ve been aware of things changing, but I’ve never really needed to do any work in that area. …

All of the code related to the post can be found in my GitHub as a starting point for your projects.

The what and the why

I’ve been a back end developer for most of my twenty five year plus career, working away behind the scenes and generally avoiding having much at all to do with anything front end. Recently, on a side project I wanted to put together something modern, responsive, and reasonably professional looking. …

Building UI components the with utility-first CSS and visual development and testing

Photo by Tirza van Dijk on Unsplash

In a previous article which you can read here I demonstrated how we can build a highly visual design experience for a React application by integrating Storybook, and how we can use TailwindCSS’ utility-first approach as the basis for styling our components. In this article we’ll take that project, and add a realistic component to it, with some stories for Storybook so we can see it in action and learn a bit about both tools at the same time.

We’re going to build a simple, but reasonably stylish, card with an SVG image, some descriptive text and an action button…

Not technology

Music to code to…

Photo by C D-X on Unsplash

I write code a lot, and when I do I enevitably have music on. I’ve written a lot of code this year, and listened to lot of music — being stuck at home in a pandemic has certainly seen to that! Music has also been a way of staying sane in a crazy, crazy time; there’s no doubt of that.

But the pandemic did put paid to live music for me this year, which is normally a big part of my life. Taking my daughter to see the Killers (her first ‘big’ gig) didn’t happen, and neither did a double…

From manually deployed monoliths to containers and GitOps with Weaveworks Flux

A delivery driver carrying parcels
A delivery driver carrying parcels
Photo by Maarten van den Heuvel on Unsplash

Over the last couple of years we’ve been running a number of projects creating new services, and migrating existing services to a new platform we’re building. We’ve been working very heavily with containers as our packaging and deployment mechanism, and using Kubernetes as our orchestrator. During this time we’ve been beefing up our Continuous Integration processes, and looking at how automation can help with deployment.

Historically we’ve had a lot of software that’s been deployed manually, and this has lead to many common issues — it takes time and resource we’d rather be using for other things; it can be…

Blast Radius

Timeouts, retry, circuit-breakers, and more…

We all want to work with and create resilient systems. When things go wrong, our users tend to notice pretty quickly, and things get… exciting. No one wants that 3AM adrenaline rush from a phone call to say production is down, but almost everyone has been there at some point in their career.

Reliability is often seen as one of the facets of judging the quality of a software system, the ultimate goal to strive for. Interestingly it’s also one of the easiest to measure, track, and report on. Well managed systems should have records of down time, and KPI’s…

Understanding the Context object in Apollo Server

All of the patterns and ideas presented in this article are shown in the demo code at

Resolvers are a key element to creating your GraphQL based services; it’s within the resolvers that you’ll fetch and shape your data, whether directly from databases in simple cases, or more likely from other backend services and API’s in your micro-service based systems. …

Samples and ideas to get started with GCP and Infrastructure as Code

Recently I’ve been working a lot with the Google Cloud Platform, which I love. I’ve been building (and destroying!) large amounts of cloud infrastructure working on both fun and serious projects, and I’ve been using Hashicorp’s Terraform to help me do this. I’m a big fan of Terraform, and I’ve written about how I’ve used it before with CircleCI to automate my infrastructure management using GitOps — you can read that piece here.

In this article I’m going to look at a few common tasks that you’re likely to come across, and provide some example code and ideas for my…

Working effectively with Docker

Techniques for tagging Docker images as part of an automated build process

Once you start working with Docker and creating images for internal and public consumption, deciding how to tag those images becomes incredibly important. Tags are how we, and consumers of our images, identify different versions of a container image. As with most things in software, accurately applying versions is incredibly important.

Below are a list of practices that I’ve been using for tagging images over the last several years, and what I’ve found has worked well for me. …

Develop with Node, GitHub, CircleCI and NPM

An example workflow using GitHub and CircleCI

Photo by Markus Spiske on Unsplash

If you’re working on a Node module, chances are that you’re going to want to publish it to NPM, so that other developers have easy access to it. Of course, you can manually run your build process and publish directly from your development box, the simplest option. Unfortunately this process is fraught with pitfalls such as the code is your VCS falling out of sync with what’s published, NPM versions differing from VCS releases etc. Plus, it’s all very manual and tedious… and no one enjoys that!

In this article we’ll look at how we can use a CircleCI, a…

John Clarke

Director of Software Development; Agile and DevOps evangelist. Currently building great software with my awesome team!

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store