Guidelines to improve your React folder structure
People often say to 'move files around until it feels right', but what does 'right' even mean? Let's learn in this article.
What it means to not test implementation details in React
Most guides to testing React these days preach: 'Test functionality, not implementation details'. This article explains what that means, and how to do it.
Examples of large production-grade, open-source React apps
All of the to-do apps are great for starting to learn React, but what about real-life? Let's see what real production React apps are like.
What's the deal with useState's initial value?
If you're used to class components and setState, the useState Hook might be confusing at first. Let's learn more about it in this article.
A Guide to Styling your React App
It can be pretty confusing to pick how to style your React app. This guide attempts to simplify your choice.
A Guide to Commonly Used React Component Libraries
There are a *lot* of React Component libraries to choose from. This guide attempts to put them all on one page.
How to use SVGs in your React App
Using SVG icons instead of PNG or JPG has a few performance benefits, but they're not always straightforward to use. Here's how you do it.
React: Should you use functional components + Hooks over class components?
There's a lot of outdated information out there, let's settle this once and for all: should you use functional components with Hooks or class components?
It's not always greener on the other side
Why I left a prestigious consulting job to start from scratch as a React developer
Keeping your sites fast with regular performance tests
You pride yourself on delivering fast websites to your clients, but do the websites stay fast as the months go by?
How to prevent infinite re-renders when using useEffect
React's useEffect hook is an incredibly useful tool for fetching data, but if you're not careful, can cause infinite re-renders.
How to choose a median result when running Google Lighthouse multiple times
Running Google Lighthouse five times will half the variability of your test results. So how do you figure out which run is the median?
Frustrated by Formik? Here's a simpler way to do forms in React
Do you find yourself struggling for hours to solve problems with Formik? I've started using a different library that's much simpler.
Apollo vs Relay Modern: An unbiased look at which GraphQL client to use
If you're building an app using GraphQL, picking a client to use can be hard. Apollo? Relay? Urql? Let's look into some options.
Books every developer should read
Whether you want to start a career as a developer, or have been a developer for 20 years, you should check out these books.
Automatically testing for accessibility (a11y) issues with jest-axe
Automatically test your code for accessibility issues in the same way you catch bugs with jest-axe.
Introducing PerfBeacon - Continuously Measure Site Speed via API or Schedule
PerfBeacon is a wrapper around Google Lighthouse that lets you continuously measure your site's performance via API, or a schedule
Blogging lessons from working for a large blogging company
For a short period, I was employed by a company that drove most of its revenue from blogging. Here's what I learned while I was there.
How to implement a Higher-order component in React with TypeScript
You probably know how to implement a HoC, but do you know how to write types for one?
How code splitting can make your React app load significantly faster
Chances are, your React app's bundle is much, much larger than it needs to be.
2019: Further reflections on trying to start an internet business
A review of what I said I would do in 2019, and what I actually did.
Why early stage startups are the worst for junior developers
Startups can be the best or worst thing for your career as a junior developer. Let's discuss why.
What is the difference between style-loader and mini-css-extract-plugin?
Looking to optimise your webpack config? Understanding the difference between style-loader and mini-css-extract-plugin can help you speed up your page loads.
How do you use resolve.alias in webpack?
Want to stop webpack from including multiple versions of the same package in your bundle? It only takes a couple of lines of code.
How do you make relay-compiler run automatically?
Getting tired of running the relay-compiler every time you change your GraphQL schema/resolvers? There's a plugin in webpack for that!
How do you use variables in the HTML webpack outputs?
Looking to inject variables from CI into the HTML your webpack build outputs? It's relatively simple to do.
Understanding your webpack config
webpack is a complicated beast. The more you get to know it though, the better it can serve you.
Prefetch your Google Fonts for Performance Gains in Gatsby
Self-hosting your Google Fonts can save your customers around 3-400ms per page load. There's a Gatsby plugin that makes it super easy.
How to write semantic HTML
Writing semantic HTML markup is one of the first steps to writing accessible websites. Let's learn how to get started!
2018: Reflections on trying to start an internet business
A review post on what I've done this year in terms of trying to start an Internet business
How to handle server-side rendering in React
Getting server-side rendering to work in React is quite a hassle if you don't know what you're doing. Let's make it easier.
How to resolve 'X defined in resolvers, but not in schema' with babel-plugin-inline-import
Showing how to resolve the dreaded 'Query.X defined in resolvers, but not in schema' issue when your X is **definitely** defined in both