Manage complex state with React useReducer and useContext

Published

This post will cover managing complex state at a feature level rather than the entire site. React hooks have enabled developers to have cleaner functional components which help to rationalise our component logic with ease.

Take useState hook, it’s one line of code that can be used to manage the state of a component rather than having to create a class component with the addition of boiler code. This is great because we are keeping simple things clear!

However, there are features that are inherently complex as they could have many nested child components and need to alter the state.

What options are there to manage this complexity in React?

More haste, less speed

Published

Typically ‘speed of delivery’ is a key measure for an Agile software engineering team. However, sometimes you notice a pattern of weeks ending with high or low points, and this affects the predictability of your delivery. So how can you make delivery more consistent?

This post will focus more on pace of delivery and around team processes, rather than tooling to reduce overheads, like automation. The reason you want to achieve predictable delivery, is so that your team can confidently estimate what can be done in a sprint. This can also help product and business estimate how long a feature could take to deliver.

Install Bcrypt in Docker image and exclude host node_modules

Published

This post will be covering two topics, installing Bcrypt NodeJS as a dependency and prevent linking node_modules from host machine to your docker container.

Using Bcrypt package to encrypt passwords comes with a minor challenge: when installed it needs to be compiled to the operating system (OS) architecture using node-gyp, python 2.x. These prerequisite dependencies are needed to build the app on a dev machine, which needs to be documented. However, docker solves the need to communicate this in your “get started” documentation. Unfortunately this will create a problem of slow feedback loop during development.

Build a CD Azure pipeline for your VS Code extension

Published

For most of my published open source projects I’ve added a simple continuous integration (CI) pipeline using Travis CI. This time around I wanted a way to deploy a project after successful integration and try a new pipeline. Azure DevOps caught my attention. The goal here is to build, test and deploy my VS Code extension Git Mob to the marketplace.

I’ll provide bite size instructions to help you build a CI and continuous delivery (CD) pipeline for your VS Code extension on Azure DevOps platform. Following these steps I estimate it will take 15-25mins to get it all working.

Deploy VS code extension via Azure pipeline

Published

This post is to help developers who are new to Azure DevOps releases and deploying a VS Code extension. Azure pipelines come with lots of great options but it can be difficult to know what to do to achieve your goal. The goal in this case is to deploy my VS Code extension, Git Mob to the marketplace.

I’ll provide bite size instructions to help you build a release for your VS Code extension using Azure DevOps platform. This will take about 5-10mins.

Co-author commits with Git Mob

Published

As the co-creator of Git Mob, a console app to manage your co-authors you pair with, I thought a good addition would be to build a UI around it in Visual Studio Code. This makes it super simple to see who you are co-authoring with and change without needing to remember any commands. Most importantly it consistently generates the meta data for co-authoring commits to GitHub. See Git Mob for Visual Studio Code repository to get started.

Stub a React component using Sinon

Published

Stubbing a React component is easy with Sinon. You can replace a component with a Sinon stub which is rendered as a child in the component under tests.

Connecting to GitHub with OpenSSH on Windows

Published

Here are the steps to setup OpenSSH with Git to connect to a repository on GitHub.

I use Windows as my main OS and Cmder as my console emulator. Installing the full version you will get Git for Windows which has loads of Unix commands available in your PATH including OpenSSH. The version of Cmder I’m using is 1.3.0.

Async Iterators and Generators in JavaScript

Published

Async iterators will enable JavaScript engineers to read steams like lines of text from a web service or a file. It will be worth reading my previous post understanding sync iterators first before carrying on.

It may seem plausible for a for-of loop to iterate through lines in a file but ultimately it can’t execute until it has received the whole contents.

for (const line of fetchFile(fileName)) {
    console.log(line);
}

Iterators and Generators in ES6 JavaScript

Published

What is a generator in programming terms? It is a special function that can be used to control the iteration behaviour of a loop.

For an object to become an iterator it needs to know how to access values in a collection and to keep track of its position in the list. This is achieved by an object implementing a next method and returning the next value in the sequence. This method should return an object containing two properties: value and done. It must have the [Symbol.iterator] as well, as this is key to using the for..of loop.

Higher-order components vs Render Props

Published

Higher-order components (HOC) and render props are two ways to build cross cutting code in React JS. How do you decide to use one over the other?