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
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
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
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
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
10 April, 2019.
Interviewing for a developer role does not have to be a stressful experience. Interviewing can be fun. Interviewing can be an opportunity to geek out about the tools and technologies you use every day. More often than not, when you interview for a company you will be asked a broad range of questions about various aspects of software engineering, including, but not limited to, the following; Problem solving Algorithms and data structures Agile, Scrum, Kanban and other working practices Specific…Continue reading
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
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
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
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
25 January, 2019.
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
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
21 January, 2019.
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
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
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
16 October, 2018.
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