Co-author commits with Git Mob


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


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


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


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)) {

Iterators and Generators in ES6 JavaScript


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


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?

Using promises, async/await and testing


This post has lots of code examples showing promises, async/await and unit testing async functions. There is a coding challenge at the end to test your learning.

What do promises solve in our code?

Whenever you wanted to resolve some data asynchronously it had to be done via a callback. In complex applications this led to “callback hell”, when the first data fetch was resolved another data fetch needs to happen afterwards. This would repeat a few times, creating a “nice” sideways pyramid in your code.

Promises mostly solved that problem by chaining. Each step resolved data and passed it along to the next then function.

Understanding React JS Render Props


In this post, I will discuss the why and how to use React JS Render Props.

Why use Render Props: Promote reuse of behaviour across React components.

If you have read my post on higher-order components this may seem similar. The React community has been working hard on solving reuse across components, and one common theme is passing data to children. However, we will focus here on how to use Render Props - and discuss the differences between HOC and Render Props in another post.

Composition in JavaScript


Let’s look at using composition instead of classical inheritance in JavaScript.

JavaScript is an expressive language and is one reason I enjoy using it. An interesting feature is the ability to compose objects from simple objects without inheritance.

Recycle tests in TDD and code kata


Have you ever written a unit test and it seems to take a long time to make green?

What is a long time, you might ask? In my opinion if you spend more than 5 minutes solving the test you wrote then you are in the amber zone that you made it too complex. If greater than 10 minutes then you need to simplify the test. Which might not seem like an obvious thing to do.

This exercise is to help unblock the solving of complex tests consistently and quicker.

Understanding React JS higher-order components


In this post I will discuss why and how to use higher-order components (HOC) with React JS.

Why use HOC: Promote reuse of logic across React components.

Components are the typical element for reuse in React but sometimes features don’t fit into this standard. There might be similar methods used to fetch data but maybe the display is different. An example of this is shown later.