Integrating Sentry.io with GatbsyJS

When a web application has a lot of incoming traffic we want to have some form of logging to monitor errors across the domain so our application is performing at its best. In this article I am going to show you how to implement Sentry with GatsbyJS.

Read moreabout Integrating Sentry.io with GatbsyJS

How to mock api calls in Storybook

The other day I was building a storybook page component and I was having issues where the page had a useEffect hook that hit an api from the dev environment to populate the state.

Read moreabout How to mock api calls in Storybook

Storing an array of elements using the useRef hook

React refs are useful for when we have to set focus to an element after the user has interacted with it. In my case, I needed to use refs for setting focus to the correct accordion item when I selected/used arrow keys.

Read moreabout Storing an array of elements using the useRef hook

Loading Fonts The FOUT Way

Fonts have the potential to be extremely slow. The more you include the more it can impact multiple metrics such as page weight, page load, first paint and first contentful paint.

Read moreabout Loading Fonts The FOUT Way

Responsive fonts using css clamp()

If you have wrote CSS for fonts before you have probably experienced having to introduce a lot of media queries for different breakpoints. I am about to show you how to remove all those media queries using css clamp instead.

Read moreabout Responsive fonts using css clamp()

How to reduce you html output in 11ty

Minifying html is a really useful feature that can improve TTFB on the page and with 11ty it is very simple to do. In the eleventy.js config file we need to add a transform to the config which will check if the output is a...

Read moreabout How to reduce you html output in 11ty

Lazy Loading Images 2020

Lazy loading is a concept where you only load the images within the viewport of the device the user is in. As the user navigates around the site, images will load in on demand. This makes a massive improvement on the page weight, which then has a...

Read moreabout Lazy Loading Images 2020

Demystifying React Context

Yesterday I spent some time learning about how to use the context and when I read the docs I thought, “this sounds extremely complex for something that does a simple thing”. I definitely felt like this at first:

Read moreabout Demystifying React Context