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.
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.
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.
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?
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.
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.