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

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