Web apps should provide a visual indicator when content is being loaded. But sometimes this content is loaded very quickly, causing loading spinners to flash in and out. Which isn’t very useful or visually appealing. We could improve the user experience by not displaying the spinner at all in these cases. This also improves the perceived performance of the application. A simple way to achieve this is to introduce a...

Most React apps will use some type of bundler, such as Webpack, to combine their source files into a bundle. As your application grows so does your bundle. Code-splitting is a technique used to reduce your bundle size. A good place to split your bundle is based on routes. So that users only download files when they’re needed. Rather than downloading the whole application upfront. Code-splitting in React is relatively...

We have seen the rapid growth and evolution of CSS in JS libraries in the past few years. It’s an area that’s both mature enough for large scale applications, and young enough to not have any flavour that’s a clear favorite. Theme UI is a new library built on top of the Emotion CSS in JS library. It helps you build consistent, themeable React apps based on a style...

These books have helped me not only become a better software engineer, but also a better person in general. Because life isn’t always about work. Before I dive in to the list, I just wanted to quickly point out that these titles are all available as audiobooks as well. Which is how I usually read non-technical books. It’s a great way to make use of the dead time during your...

In this tutorial we’re going to create an eCommerce web app that accepts payments without the need for a traditional server. We’ll use React (with hooks!) to build a simple UI for demo purposes. We’ll integrate Stripe for payment processing. Stripe requires a server to process a payment, so we’ll create a Lambda function to handle that. Netlify lets you deploy Lambda functions without an AWS account, with function management...

I got my first taste of functional programming when getting started with React, since then I’ve gradually been learning more FP concepts and applying them to my code. It’s definitely become a popular topic in JavaScript as of late. In this post I’d like to go through some practical examples that can help make Redux reducers more declarative, often requiring less code. I’ll be using the functional library Ramda....

A while ago I decided that my next side-project would be to build a native app with React Native. After spending over six months developing a native app, I want to help spread the word about all of the similarities it shares with building web applications. I’d never built a native app but it had always interested me. There have been ways to build apps with web technologies for a...

We’re going to create a multiple choice quiz with React - without setting up any build configuration. This is now possible thanks to the Create React App project, which was created by the team at Facebook. Check out the demo here to see the quiz in action. Starting a new React project usually involves a lot of overhead that can be time consuming for anyone and straight up...

There are new techniques and technologies being created for web developers everyday. That’s what makes working in this industry exciting, but also a bit daunting at times. No matter how you look at it, it’s important that we continue to grow and better our skills and products. Adjusting to new technologies is something that we developers have to do, but in general people don’t like change. So it’s important to...

I recently tackled the task of converting our traditional multi-page web app’s JavaScript over to ES6 format modules. After initially being overwhelmed with the amount of options out there, I did a bit of research and landed on a solution that worked well for our project. This setup consists of Browserify, Babel and Grunt. Along with a couple of Browserify plugins to generate multiple bundles ready for production. And as...

The concept of designing in browser has been around for a little while now - forget pixel perfect mockups and save time by jumping straight into the browser. Now that we are designing for a multitude of screen sizes, it’s becoming more common to skip creating mock-ups in design tools such as Photoshop altogether. Dave Rupert’s article on responsive deliverables describes how the old PSD-to-HTML workflow that served us...

LibSass is a C/C++ port of the Sass engine that is much faster than the original version written in Ruby. LibSass has always been a bit behind in terms of features that it supports. But with the recent releases it has caught up significantly and supports more than enough for most use cases. And with the announcement that there will be no more updates to the Ruby version until...

With Microsoft’s new browser ‘Edge’ about to be released, it’s an exciting time for web developers. Millions of users are going to update to Windows 10, where Edge will be the default browser. That’s great news for everybody, but in most cases our job will still require us to support older browsers for the time being. I recently came across some limitations with Internet Explorer 9 that don’t seem to...

Naming conventions are just as important in CSS as they are in JavaScript or any other language. The Block, Element, Modifier methodology (BEM) is a naming convention for classes in HTML and CSS. Its goal is to help developer’s write more predictable and maintainable code. It has become very popular as of late, with its value becoming evident to anyone that has implemented it in a large project. BEM is...

Welcome to my new website! I’ve finally managed to get my own blog up and running. Because seriously, what kind of person who creates for the web doesn’t have one? Anyway, I hope the content on here helps other developers/designers in some way or another.

I guess I’ll introduce myself a little; I’m currently working as a front-end developer at the Fernwood Fitness head office in Melbourne. We have a...