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

Angular 2 server side paging using ng2-pagination

31 March, 2016.

Angular 2 is not quite out of beta yet (Beta 12 at the time of writing) but I’m in the full flow of developing with it for production use. A common feature, for good or bad, is to have lists/tables of data that the user can navigate through page by page, or even filter, to help find something useful. Angular 2 doesn’t come with any out of the box functionality to support this, so we have to implement it ourselves. And of course what the means today is to use a third party package! To make this…

Continue reading