How to set-up Next.js and Material UI

13 October, 2019.

We love Next.js, and we love Material UI. In fact, we blog about it quite a bit around here. Using it a lot, however, we have noticed that we have started repeating ourselves when it comes to getting the two to play nicely, so we figured we would put the set-up for Next.js and Material UI right here, and refer back to it instead. We will keep this post up to date as the set-up changes over time. Set-up your project quickly with Next.js The fastest and easiest (and in my opinion, the best) way to…

Continue reading

How to use the AWS Rekognition JavaScript API

12 October, 2019.

AWS Rekognition is a powerful, easy to use image and video recognition service that can be used for face detection. AWS can use an image (for example, a picture of you) to search through an existing collection of images, and return a list of said images in which you appear. AWS Rekognition can also we used to find celebrities, text, scenes, activities, and even identify inappropriate content. The purpose of this post is to discuss how to use AWS Rekognition (referred to herein as Rekognition) to…

Continue reading

How to restrict access using Passport.js role-based authorisation

08 October, 2019.

Welcome to our mini-series on Authentication using Node.js, Express, and Passport.js. This comprehensive series is designed to teach you everything you need to know, as well as give you all the code required, to add authentication and authorisation to your existing website, or for a new-build from-scratch project. So far in this series, we have discussed at length Passport.js and JWT. We created our project using Next.js, we wrote a login page and registration page using Material UI for the…

Continue reading

How to add Passport.js Facebook Strategy to your website

07 October, 2019.

Welcome to our mini-series on Authentication using Node.js, Express, and Passport.js. This comprehensive series is designed to teach you everything you need to know, as well as give you all the code required, to add authentication and authorisation to your existing website, or for a new-build from-scratch project. So far in this series, we have discussed at length Passport.js and JWT. We created our project using Next.js, we wrote a login page and registration page using Material UI for the…

Continue reading

How to add Passport.js Google OAuth Strategy to your website

06 October, 2019.

Welcome to our mini-series on Authentication using Node.js, Express, and Passport.js. This comprehensive series is designed to teach you everything you need to know, as well as give you all the code required, to add authentication and authorisation to your existing website, or for a new-build from-scratch project. So far in this series, we have discussed at length Passport.js and JWT. We created our project using Next.js, we wrote a login page and registration page using Material UI for the…

Continue reading

How to protect your website using Passport.js and JWT

05 October, 2019.

In the previous post in this mini-series, we started our conversation about building an authentication system using Node.js, Express and Passport.js. This tutorial assumes that you already have a starting point (a login/registration form, and access to an Express back-end), if you do not, please check out the aforementioned blog post. If you already have these pieces in place, then you’re ready to get started. The purpose of this post is to go in to the specifics of wiring up Passport.js JWT…

Continue reading

Build an authentication system using Node.js, Express, and Passport.js

04 October, 2019.

Welcome to our mini-series on Authentication using Node.js, Express, and Passport.js. This comprehensive series is designed to teach you everything you need to know, as well as give you all the code required, to add authentication and authorisation to your existing website, or for a new-build from-scratch project. You will learn; How to set-up Next.js (React.js), with a custom Express.js back-end How to build a login and registration page, using Material UI How to set-up Passport.js with JSON…

Continue reading

Test Driven Development (TDD) with React, React Testing Library, and Jest

26 September, 2019.

Test Driven Development (TDD) is a reversal in traditional thinking and coding processes. Rather than writing code, and then writing tests to verify that code, the process is reversed. Tests are written first and then the code. The result of TDD is improved code quality, higher test coverage, and confidence within the team and the business that changes made to the system will not negatively impact it in ways that were unexpected. TDD opens the door to more regular automated releases (continuous…

Continue reading

How to set up Visual Studio Code (VSCode) for next level productivity

23 September, 2019.

On a day-to-day basis, both inside and outside of work, I spend most of my time writing front-end code (specifically, React.js) using VS Code. Productivity is very important, as I am usually under pressure to get work done quickly and to the highest standards. Having the right editor set-up goes a long way to ensuring that I am not wasting time on menial tasks like code formatting and instead spend that time focusing on the problem at hand. My editor and project should be correctly configured…

Continue reading

Getting started with Next.js

22 September, 2019.

Next.js is an all-powerful, React based development platform, with everything you need to build a blazing fast, production ready, scalable, enterprise level web application. Next.js (from now on referred to simply as Next) is zero config out of the box, meaning that all the hard work of configuring tooling has been abstracted away into a couple of simple commands, meaning that you can simply get on with coding. Next gets out of your way, so you can focus your time and energy on what really…

Continue reading

Webpack 4 and TypeScript from scratch

15 September, 2019.

Webpack is a fast, efficient, very powerful code bundler. TypeScript is a compiler (or transpiler if you prefer) which adds support for type checking to your project. Support for type checking is useful and powerful for enabling better development time tooling (such as improved auto-complete) and reduced runtime bugs. As your team scales to include more people, types help with the maintainability and structure of your codebase. You may not need to write your own Webpack configuration files…

Continue reading

A reference guide of basics of Regular Expressions (Regex) in JavaScript

16 July, 2019.

Welcome back, future Jon. Congratulations, you have successfully forgotten how to regex again. As a reminder to yourself, you have attempted to learn regex many times over the years, and at times you have gotten pretty good at it. Unfortunately, however, it has probably been a while since you last wrote a regex, and you have completely forgotten how to do ANYTHING and EVERYTHING, even the absolute fundamentals. Fear not, I have you covered. Once you read the following guide it will all start…

Continue reading

How to configure Webpack Hot Module Reloading (HMR) using Node.js API

04 April, 2019.

You recently had some reason, probably work related, to configure Webpack from scratch using the Node API. This is because of reasons (for example, you are moving your Webpack configuration into an NPM package), and you found the documentation somewhat lacking!! You quickly became frustrated and decided to search for a tutorial, and now, you are here. Welcome friend!! I too have felt your pain. The Webpack documentation is lacking at best so it is up to community members like myself to fill in…

Continue reading

How to connect to MongoDB Atlas using Mongoose and Node

24 February, 2019.

MongoDB Atlas is a fully managed service that has a fantastic free tier available for developers learning how to build document databases. MongoDB has a long-established history, is battle hardened, and is often used as part of the M.E.A.N (Mongo, Express, Angular, Node) stack (as well as other variants). There is no better time than now to learn and start using MongoDB in production environments to improve the performance of your web applications. TL;DR All source code is available on GitHub…

Continue reading

The Practical React Developer: Learn By Doing Not-So-Mini-Series

28 January, 2019.

The best way to learn is hands on. This not-so-mini-series will teach you all the basics of building a React Web application through hands-on practical exposure. Introducing ‘Property Finder’, a property listings website This tutorial will teach you, hands-on, all the best and most commonly used features of React and the tooling around it. See a preview of the finished website; What is included in this mini series? What is React, and why use it? How to set up your development environment for…

Continue reading

Add advanced filtering to a React app using React Context API

27 January, 2019.

In the previous tutorial, we started building out our home page. We looked at React Context API, where we added some code to fetch data from our static web server, and then we used that data to build (and display) a list of properties that are currently available for sale. Next, we need to ensure that we are in-line with the specification set out by the CTO. The end-user must be able to filter the property listings by ‘price’, ‘postcode’ and ‘sort order’. The page must not reload, the changes…

Continue reading

Adding the finishing touches to 'Property Finder'

27 January, 2019.

At the beginning of this project, we created two components. Those components were designed to display key information about a single property and its location. These components were and . Currently, these components are hard coded and not very useful. In fact, they show the exact same information for every property. Not useful at all! Let’s rectify that. The single best way to learn anything is repeated exposure. For this post we will not be learning anything new, but instead utilising the…

Continue reading

Build a complete property listings page with React.js

26 January, 2019.

As promised, we will now get down to business and really start fleshing out our home page. This post is all about getting our hands dirty by spending time building components, getting our business logic in place, and generally getting some hands-on experience. The approach taken to building out a React application is the same approach you may take when building a real-world production ready application. Take your time, get a good cup of Earl Grey tea, this is going to be a long one. Note for…

Continue reading

How to add routing to a React app using @reach/router

25 January, 2019.

We are building a property listings website, called Premium Property Finder, using React. Our website is a Single Page Application (SPA), designed to load fast and dynamically update based on user interaction or network changes. Traditionally, a user navigates a website by clicking a link (or some other form of interaction) which redirects them to the next page. This process of navigating causes the entire next web-page (including all of its CSS, JavaScript etc) to be (re-)requested and (re…

Continue reading

How to export your React project from CodeSandbox to your desktop with Parcel.js

24 January, 2019.

CodeSandbox is great for getting up and running quickly with no setup. However, CodeSandbox is not usually how I choose to bootstrap my projects and typically the companies I work for do not use an approach like this either (maybe they should, but that is a different post!). You will find that a high percentage of companies today are using Webpack as their preferred front-end build tool. If you would like to learn more about Webpack, I have a comprehensive mini-series, starting with Webpack…

Continue reading

Get started quickly with React using CodeSandbox

23 January, 2019.

To get up and running quickly developing a React web application, you can use CodeSandbox, a fantastic browser-based development environment. Head over to CodeSandbox and if you do not already have an account, I highly recommend creating one so that you can easily save your work and refer back to it later. We will create a couple of components and then migrate our code from CodeSandbox to our local machine in the next post in this series. Note for clarification as this is also a standalone post…

Continue reading

What is React.js, and why use it?

21 January, 2019.

React is a tool for building dynamic and interactive user interfaces. React promotes building small pieces, called components, (which are often JavaScript functions or classes), that are assembled to form a UI. Notice that we have not used the word “web” or “page” here, because React itself is view-layer agnostic, meaning a separate view renderer is used to create a UI for the user to consume. React is not a framework, like Angular. React is an unopinionated library that, when combined with a…

Continue reading

How to get started quickly with React

02 January, 2019.

This post explores 3 separate ways to get a React application up and running quickly. TL;DR To get start quickly with React, you have three choices; CodeSandbox Create React App Parcel.js How to get started with React using CodeSandbox CodeSandbox is one of the most useful tools on the web today. CodeSandbox enables you to forget all about the complexities of setting up a development environment and enables you to just start coding. CodeSandbox is truly a breath of fresh air and a pleasure to…

Continue reading

Build a React web app with Parcel.js lightning fast

01 January, 2019.

I have been using Webpack for quite some time now, and I have found it to be slow, frustrating to configure and debug, tedious to change and upgrade (and do not even get me started on the documentation!). I have had the exact opposite experience with Parcel.js. I have found Parcel.js to be fast, easy to configure and the documentation has been excellent so far. Build a React app with Parcel.js from scratch We can create a React app from scratch with Parcel with minimal effort. To get started…

Continue reading

Webpack 4 from absolute scratch

31 December, 2018.

Writing your own Webpack 4 configuration from absolute scratch is not strictly necessary. You could go online, find a basic Webpack configuration file and fork it/copy it to your project and use that as your starting point. Whilst using a starter project is good for getting started quickly, it can be better to have a more indepth understanding of the process, which can help with adding/removing functionality (and debugging) later. We will configure Webpack to do the following; Build our…

Continue reading

How to process images with Webpack

31 December, 2018.

With a couple of small Webpack plugins we can add the ability to be able to import images directly in our JavaScript files, and also process those images (compress them). Run the following command in your terminal to install the required plugins; What are these packages for? resolves your s and copies the file to the output directory (usually with a randomly generated name, for cache busting) processes the images using another package called Note that takes many options. For a more…

Continue reading

How to create a production ready Webpack config

31 December, 2018.

You have a Webpack configuration file that you have been using for a while whilst developing your website, and now your ready to deploy your website to production. First, we need to set a Webpack . The will determine if Webpack minifies/compresses our code, or not. This is important to get right because it makes a huge difference to the resulting bundle. The best place to set the mode is part of the your NPM script. We will use environment variables to make this work correctly. Note: There is a…

Continue reading

How to configure SCSS modules for Webpack

31 December, 2018.

SCSS is a popular choice for styling websites, thanks to features such as; mixins, variables and functions, which CSS historically never had native support for. One of the most challenging aspects of styling using CSS is the Cascade, meaning that elements can inherit style properties from many other CSS selectors. This can be problematic, and SCSS can be a solution to make this problem more managable. SCSS modules are usually directly tied to one specific component/element, and are not typically…

Continue reading

How to add Hot Module Reloading (HMR) to a React app

31 December, 2018.

Hot Module Reloading (HMR) is an essential tool in every front-end developers tool chest. When using Webpack along with Webpack Dev Server, with a little extra configuration you can easily enable HMR, which will get your changes in screen quicker and often whilst maintaining the state of your application. Before we can add Hot Module Reloading to our React project, we need some React code! Let’s do that first. How to create a simple React application We are not trying to win any awards here, we…

Continue reading

Getting started with Webpack Dev Server

31 December, 2018.

Webpack Dev Server is a development time HTTP web server with built in support for Hot Module Reloading (HMR), which can help you rapidly build websites. HMR enables you to see your changes on screen much faster by enabling more incremental builds. How to set up Webpack Dev Server To use Webpack Dev Server, start as follows. Create a new file called in your directory and add the following code; Now we need to configure Webpack to inject script tags for our JavaScript bundle. We need to do this…

Continue reading

How to use AWS Cognito with .NET Core

09 December, 2018.

I never would have believed just a couple of years ago that I would be typing these words. With just a few lines of code you can add authentication and authorisation to your cross platform .NET web application in a secure way using Amazon Web Services (AWS) Cognito API. You can either call the API directly with requests, or take advantage of the built in user interface. As an added bonus, Cognito supports federated identities, allowing you to use external identity providers such as Google and…

Continue reading

Microservices on the front-end - Building front-end apps that scale

21 November, 2018.

Overview This post details a presentation I gave at my local Manchester Web Meetup on 21st November 2018 at The Hut Group in Media City, Salford, UK. Below are the accompanying notes I wrote that acted as a rough speaking guide, and may or may not have been spoken during the event itself. Who am I? Developer at RC, this is where I have learnt about frontend microservice architecture I like to experiment with new ideas, and I make available what I can through my public GitHub repo I have decided…

Continue reading

Managing state in modern React web applications

16 October, 2018.

Overview This post details a presentation I gave at my local JavaScript North-West Meetup on 16th October 2018 at Dept Digital Agency in Manchester, UK. Below are the accompanying notes I wrote that acted as a rough speaking guide, and may or may not have been spoken during the event itself. Assumptions Throughout this talk I will assume that you have at least a working to intermediate knowledge of JavaScript and React concepts, and that you have at least worked with React in some capacity in…

Continue reading

A bare bones React boilerplate, featuring Webpack 4, React, Redux, Jest, and Babel 7

22 September, 2018.

I love template projects. In fact, I use them all the time. Template projects, seed projects, starter projects, whatever you want to call them, they are fantastic. Starter templates help you get up and running very quickly and can be very useful and powerful when learning something new. Many template projects I see around the web are bloated with every feature under the sun. Having a long list of features can be amazing, however, some projects have grown significantly… which can increase…

Continue reading

A high level look at Angular 2

03 September, 2016.

Developed by Google, Angular 2 is the newest version of the popular Single Page Application (SPA) framework. Angular 2 is a step in a new direction compared to previous versions, but has keep all the best characteristics and “lessons learnt” to deliver a fast, fully featured and rich ecosystem. About Angular 2 Angular 2 impacts your whole application, or at the least, a section of it, rather than specific pages. Angular 2 is best suited to new (“greenfield”) development, as it can be relatively…

Continue reading

Create a RESTful API with authentication using Web API and Jwt

15 March, 2016.

Web API is a feature of the ASP .NET framework that dramatically simplifies building RESTful (REST like) HTTP services that are cross platform and device and browser agnostic. With Web API, you can create endpoints that can be accessed using a combination of descriptive URLs and HTTP verbs. Those endpoints can serve data back to the caller as either JSON or XML that is standards compliant. With JSON Web Tokens (Jwt), which are typically stateless, you can add an authentication and authorization…

Continue reading

How to debug websites on your mobile device using Google Chrome

31 January, 2016.

I can’t believe I have survived this long as a web developer without knowing you can debug websites (JavaScript, CSS, HTML, TypeScript etc.) directly on your mobile device using Google Chrome developer tools. If you are currently using emulators/simulators or testing solutions such as Browser Stack, you will love this easy and free solution. Be warned, however, you will be expected to download 6+ gigabytes of stuff before the magic begins. I’ve only tested this on my Samsung Galaxy S6 Edge…

Continue reading

TypeScript beginners guide

02 October, 2015.

TypeScript is a tool that enables you to write better JavaScript. You may have heard that TypeScript is a superset of JavaScript, but what does that mean? TypeScript is JavaScript. If you know JavaScript already, then you already know JavaScript. You can convert an existing JavaScript file to TypeScript simply by changing the file extension. TypeScript has a very low barrier to entry (you can easily write it using Notepad) and has a small learning curve. TypeScript has a transpiler, called tsc…

Continue reading

Writing AngularJS 1.x with TypeScript

24 September, 2015.

AngularJS 1.x is a front end JavaScript framework that has gained huge traction and popularity in the development community. AngularJS greatly simplifies previously hard tasks like two-way data binding, templating, the MVC design pattern, despendency injection and more. Using TypeScript, we can create more robust and scalable AngularJS code to deliver the ultimate user experience whilst avoiding the traditional spaghetti code nightmare that JavaScript applications can often descend into…

Continue reading

Using ES6 features with TypeScript

18 September, 2015.

TypeScript is a transpiler The TypeScript compiler converts your code from TypeScript, which is a subset of JavaScript, to TypeScript. Compiler vs. Transpiler There is some confusion about the difference between a compiler and a transpiler. A compiler takes your code and turns it into something very different, a whole new language. A good example is with a high level language such as C# or Visual Basic. When you write code and build it, the compiler (either csc.exe C# compiler or vbc.exe Visual…

Continue reading

Getting started with TypeScript

11 September, 2015.

This is the 101 tutorial which describes getting started with TypeScript using either the TypeScript Playground, Node.js or VS Code. At its simplest, TypeScript is a programming language that provides optional static typing for JavaScript. TypeScript is JavaScript. Any valid JavaScript is valid TypeScript. The beauty of TypeScript is that you can define types for your JavaScript variables and functions, and get compile time error checking and error reporting. This tutorial focuses on getting…

Continue reading

TypeScript Tips and Tricks

28 August, 2015.

Automatically compile TypeScript files when using VS Code If you’re writing TypeScript using Visual Studio, your files are automatically compiled when you save (assuming you haven’t turned this off…the feature is found in the Project Properties > TypeScript Build screen). If you don’t use Visual Studio, and instead are using a lightweight IDE such as VS Code or Sublime Text, you don’t get this feature. Manual compilation First things first, how would you normally compile a TypeScript file to…

Continue reading

Why Visual Studio 2015 has changed my life

24 July, 2015.

I’ve been using Visual Studio on an almost daily basis since 2002. Before that, my development tool of choice was Visual Basic 6 (Visual Studio 6). The shift between those two versions felt like using a whole new product at the time. Since then, changes to Visual Studio have been incremental. Microsoft have released a new version every 2-3 years. Visual Studio 2015, however, feels like another significant paradigm shift. The point of this post is not to outline all the shiny new features, there…

Continue reading

What I learnt from using TypeScript "for real"

25 May, 2015.

I completed my first commercial Greenfield project using TypeScript over plain old JavaScript throughout, and there were some frustrations along the way. TL;DR TypeScript is awesome, for sure, but there needs to be improvements to tooling to streamline the experience. TypeScript is strongly typed of course, but it doesn’t force you to code in this manner, which can result in shoddy code. Tweaking is required to make bundling work properly. Tooling Frustrations When I started the project, I was…

Continue reading

Quick look - Add indexes to tables with Entity Framework 6.1 Beta 1

26 February, 2014.

At the time of writing, beta 1 of Entity Framework 6.1 has recently been released. This is mostly a maintenance release, however, there are several new feature of note, including the ability to add indexes using a new data annotation when developing using the code first approach. Add indexes using the Index attribute To add an index, simply add the Index attribute as required; A quick look in SQL Server Management studio reveals that the index has been added for us. The key created was non…

Continue reading

Use T4 Templates to create enumerations from your database lookup tables

15 February, 2014.

T4 (Text Template Transformation Toolkit) has been around for a while now… its been a part of Visual Studio since the 2005 release. In case you don’t know, T4 can be used to automatically generate files based on templates. You create a text template, which is then transformed (interpreted) by Visual Studio into a working file. T4 can be used to create C# code files, and indeed it forms the basis of the current scaffolding templates you have probably used when creating ASP .NET web applications…

Continue reading

How to create a new Outlook 2013 Email using C# in 3 simple steps

14 December, 2013.

It has traditionally been quite painful to interact with any part of the Microsoft Office product family from a C# application, but thanks to the introduction of dynamics and optional parameters over recent years, the process has dramatically improved. Step 1 - Prerequisites and Assembly References Before doing anything, it is important to note that you must have Microsoft Office 2013 installed for this to work. Seems obvious, but, its still worth mentioning. You also need two references; The…

Continue reading

In the spotlight - Demystifying IQueryable (Entity Framework 6)

24 November, 2013.

I’m not afraid to admit it. I can’t be the only one who has been confused by IQueryable when working with Entity Framework or LINQ to SQL. When using the web to research the topic, I have seen many conflicting blog posts and contradicting answers on StackOverflow. I have read various posts on MSDN about the subject, and I find them difficult to understand and incomplete. I seek to at least attempt to clarify the subject a little with this post. Entity Framework has become such a powerful object…

Continue reading

How to fix 'Project failed to build' error when adding an Entity Framework migration (add-migration)

06 September, 2013.

I recently spent several hours tearing my hair out try to figure out why Entity Framework was preventing me from adding a migration to my project. I made some very simple changes to my existing model (I’m developing using the Entity Framework Code First approach) and when trying to add a migration, I was presented with the following error message; But how can this be? For you see, my project does build… My project not only builds, but it runs and works just fine … (up until the point where…

Continue reading

C# Writing unit tests with NUnit and Moq

30 August, 2013.

I’m assuming that you have seen the light, and that you are sold on the benefits (and indeed the drawbacks) of unit testing. I have read literally dozens of blog posts, watched many videos, and read several books about unit testing and the various approaches and frameworks. I have worked with several of these frameworks in both small and enterprise level applications, and I have found that (in my opinion at least) NUnit and Moq are great for helping to get simple tests written quickly and to a…

Continue reading

Using StructureMap setter injection to inject repositories into your View Model

09 August, 2013.

This short post is a follow on from an earlier series of posts that discussed how to achieve MVVM purity in WPF using Structure Map. You may want to check out those posts first before reading this post. However, if you just generally want to know how to do setter injection using Structure Map, you are in the right place! A Scenario It is very common in modern applications to have a repository that does the job of retrieving and saving data from/to your database. Your repository may look like…

Continue reading