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.
LanceDarkly: manage feature toggles in VS Code
Published
I created 
LanceDarkly, a VS Code extension to help make it easy to manage LaunchDarkly toggles without leaving the editor. What are LaunchDarkly toggles? It’s a service which enables a way of remotely managing the visibility of app features. Toggles are especially handy for trunk-based development and continuous deployment practices by enabling engineers to build features without the end-user seeing it. When that feature is ready, the toggle can be switched on to make the feature visible for all. LaunchDarkly toggles have many other options including splitting traffic to provide a way to split test.
Why did I build LanceDarkly?
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.
Securely manage JWT tokens for React apps
Published
In the previous article I talked about security concerns around storing tokens in localStorage. I thought it would be worth exploring how to use HttpOnly cookies when making requests from a React client-side app. This will include making changes to the Apollo Graphql Server to manage cookies from the client. In this post I will go through the changes needed to enable storing JWTs in HttpOnly cookies from sending headers.
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?
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.
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.
react-testing-library & Jest
Published
How do you unit test your React components? There are plenty testing libraries to help support testing your React app. I’m going to look at using Jest and Kent C. Dodds @testing-library/react
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.
JavaScript Singleton pattern
Published
The Singleton pattern is to ensure there is only one instance of the class that exists. In the case it does exist it returns a reference to that object. This is normally achieved by a method belonging to the class to create an instance.
Stubbing Reflux and SuperAgent with Sinon
Published
To follow on from the testing post I wrote on Findmypast tech blog for stubbing dependances in commonJS using proxyquire.
Upload multiple images to web server
Published
This is a continuation from preview selected images tutorial, I will now explain how to take the multiple selected file data and upload it to the server
Preview selected images for uploading using JavaScript / jQuery
Published
This is the continuation of how to open a multi select file dialogue just using JavaScript. In this tutorial I will explain how to preview the selected files before upload.
How to open file dialogue just using JavaScript
Published
Say for instance that you want to open the file select dialogue for a user to select an file to upload. Like a photo, pdf or any other file type. However, you don’t want to use the standard file input HTML element, instead use a styled link or button to show the file window.