Richard Kotze

Agile software engineering

Picture of Richard Kotze

Coding

Kick start your first VS Code extension

Published

I’ve built two VS Code extensions and thought it would be good to share my thoughts on the best way to kick start building your first extension. Key topics I will cover here are the basics about the build, unit testing and a publish/deployment pipeline.

Intro to React Suspense and concurrent mode

Published

There has been plenty of interest in React Suspense with many articles and experimental code snippets to test it out. I thought I would read more about it and give my understanding of why you might want to use it. Below is my summary after reading through the React docs about concurrent mode and Suspense.

Search for posts on Jekyll blog

Published

Now that I’ve written a lot of posts I thought it would be good to add search functionality. I have created the first iteration of my search, give it a try. You should be able to find it on the left hand side. For context my blog is statically generated using Jekyll meaning every possible page to render is compiled ready to be served as just client-side code HTML, CSS and JavaScript. Essentially no queries to a database are made on request for a page. How can I add dynamic search that content?

Why and how to use React context

Published

Now that React context has become more established in the community we are seeing a lot of great usages of it. Reflecting on a previous post about Higher-order components (HOC) vs Render props, I rarely use HOC and now generally choose between Context or Render props. With the introduction of hooks and in particular useContext hook, React context is more accessible and has become a go-to approach to solving complex state management. However, there are other options to handle these cross-cutting concerns and so we should be clear on why we are using context. Let’s explore why and how to use React context.

No app bundler needed for your next project?

Published

The browsers are rolling out updates to support more of the latest features of JavaScript defined by ECMAScript technical committee 39. Have you thought about how much can we write today without using an app bundler like Webpack, Rollup.js or Parcel? Below I will go through a few JavaScript features we can use in today’s modern web browser when building a new web app.

Unit test & mock VS Code extension API with Jest

Published

There is an issue with unit testing VS Code extensions. The vscode dependency - which is needed to utilise the editor’s features - will error when running unit tests. Essentially it is a third party dependency which is out of your control, so the best thing to do is to mock the API. I will be using Jest and will explain how to use its mocking features to handle the VS Code dependency.

Mocking React hooks when unit testing using Jest

Published

This won’t be a deep dive into unit testing React components but I will present some options for mocking external services. This is seen as good practice at the unit test level, as we don’t want these tests dependant on an external API which will slow the feedback down and make the test fragile. Mocking is typically used quite loosely and there are plenty of nuances when we throw spies and stubs in the mix. However, they do have a particular meaning and they are all placed under the generic term of Test Double as described by Martin Fowler.

Send JWT tokens from React app to GraphQL server

Published

This is the continuation of JWT for authentication using Apollo Graphql server and will show an example of how to send JWTs for each request from the client to the GraphQL server, and how to handle updated tokens when a user returns for a new session in the client.

This tutorial will focus on the key features needed to send and receive tokens, meaning there is no complete example output to try at the end. The aim is to help you integrate authentication into your own app.

JWT tokens for authentication using Apollo GraphQL server

Published

This will be part one of two posts looking at using JSON Web Tokens (JWT) for authentication and authorisation. I’ll be integrating tokens into NodeJS Express and Apollo GraphQL server.

It will help if you are familiar with Express and Apollo GraphQL to fully benefit from this post, but reading this will give you a good idea of how to use JWT for authentication in Node applications.

First, let’s cover the basic flow of JWT authentication when a request is made.

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?

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.

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.

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?

Using promises, async/await and testing

Published

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

Published

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

Published

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

Published

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

Published

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.

Understanding React Relay

Published

As with any new tech it can be overwhelming and confusing how all the parts work together. Especially with the combo of Relay and GraphQL. Hopefully this post will help demystify some things in Relay.

What is Relay: Data driven JavaScript framework used to efficiently handle data communication between a React and a GraphQL server.

Why use it: One typical issue found in an SPA are the number of network calls made to render a page. Quickly this starts to affect your server performance because the requests made can be high. Relay is focused around efficient network calls helping to mitigate this issue. Another good feature is the queries are close to the components making it obvious the data requirements.

Redux, keeping it immutable

Published

Redux has reducers tasked with transforming the state across the application. They are pure functions, which is a function that does not modify variables outside of its scope or depend on them. They are given the same parameters and the output should be the same every time.

A faster web Delay JavaScript loading to last

Published

The speed of a website is important to most users especially when they are looking for specific information. They won’t wait around long for your website to load for that information and will try find it somewhere else. One way to motivate the user to stay is to get some content showing that they can consume as soon as possible to give incentive that the rest will be arriving shortly. The common blockers that cause the long wait from a blank page to all of a sudden everything shows are CSS and JavaScript files.

Stored procedures and obscure errors messages

Published

Recently found a extremely simple way to fix a problem in one of our projects at work in MySQL stored procedures. Hopefully saving everyone else the massive amount of time spent adapting the program to work.

Regex link removal script

Published

Need to remove links from your content? This regex patten should do the trick.

Create your twitter feed using JSON

Published

This is carrying on from a previous post Twitter Feed using JQuery JSON. Originally, I just used JQuery JSON method to query the Twitter API which got essential bits of a user profile and their time line. It only returned the latest ten results which is sufficient enough with the nature of twitter, tweets get old quick but some are worth checking again. With the Twitter API there is no guarantee to get the exact amount of tweets you requested. What is new in this revised edition of the twitter feed is it will now take the tweets and save a local version of it. This has plenty of benefits like quicker response when querying, view older posts, improved usability and you can customise the output how ever you like. Here is a list of what is new:

Execute JavaScript after images have loaded in

Published

I found myself needing to run a script to make minor adjustments to the page based on the size of an image, to keep things tidy. The problem I was having was using JQuery’s $(document).ready the script was executing as soon as the DOM was ready which is too early. The other option is to use $(window).load which runs only when the whole page has loaded, guaranteeing that I will get the image width and I can make my adjustments. The script below is used to make the image caption the same width as the image.

Twitter Feed using JQuery JSON

Published

The Twitter API allows you to access tweets, profile information and more. It has a couple of return types of data, I will be using the JSON format. If you are accessing the tweets that belong to a profile you don’t need authentication unless they are protected. In the documentation it will tell you if authentication is required to access certain data.

Insert else update MySQL

Published

Here is something that I recently found very useful. If you have a table in your MySQL database which you want to insert a record if it does not exist but update the row if it does. MySQL 5.x has a very neat piece of script to handle this with out any conditional statements.

Hiding rows in a table using JQuery without breaking table

Published

I was writing a simple JQuery script which filters out table rows based on class name.  When I used visibility:hidden; I noticed that when it was made visible again, the table looked slightly broken. To fix this instead of using visibility:hidden use visibility:collapse; and this keeps the table format correct when it is made visible again.