Kick start your first VS Code extension


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


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


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


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


I created LanceDarkly logo 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?


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


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


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


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


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.