About the author
I am Jon Preece, an experienced full stack website and software developer from Warrington (UK) currently working in and around Manchester (UK).
Throughout my 10+ year professional career I have worked in many sectors, including; e-commerce, financial services, marketing, healthcare, travel and accountancy.
I love to teach, I love to learn and share my knowledge with others, I love to speak at public events.
How you set up your development environment can be a very contentious topic, a religious argument in which there may not be one single unified answer, but rather many correct answers. In this post I will discuss exactly how I configure my coding environment. Throughout this post I dicuss tools like ESLint and Prettier several times. Should you like to learn about these tools in more detail, I have written a separate, more detailed, blog post on the topic. How I use ESLint and Prettier for a…Continue reading
I work independently, as part of small teams, and as part of teams that consist of hundreds of individuals. Many developers will have a different idea of how they want to format their code, and what standards they would like to adhere to. Some teams might not have any guidelines in place at all, which will often lead to preventable problems further down the road. Tooling today exists that can make enforcing coding style and standards a breeze. I just used the word enforcing , but tools like…Continue reading
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
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…Continue reading
Before we can add Hot Module Reloading to our React project, we need some React code! Let’s do that first. Create a simple React application We are not trying to win any awards here, we only need to get React rendering out something so we can move on. This is not a tutorial about how to build a useful React website, after all. Start by installing React, and ReactDOM. Both are required to render a React browser-based web application. Note : These are runtime dependencies, so we use instead…Continue reading
Your website will look pretty plain without some styles. SCSS is a popular choice for styling and is fairly straightforward to configure. We will focus on SCSS modules and global SCSS, so let’s get started. Run the following command in your terminal to install Sass and related tooling; What are these packages for? provides binding for Node.js to LibSass, a Sass compiler. is a loader for Webpack for compiling SCSS/Sass files. injects our styles into our DOM. interprets and and resolves…Continue reading
We have seen the basics of a Webpack config, but let’s take a few steps to make the config more production ready and useful for development. First, we need to set a Webpack . We have touched on this a couple of times so far as part of this tutorial. 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. Set the wrong , and you will not be able to debug your code in the browser, or worse…Continue reading