- Read more about How to mock api calls in Storybook
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. There was a few issues with this because the data I was getting back needed an Id so it could a lookup in the database to find the record relating to the Id.
- Read more about Keeping your medium content fresh in your 11ty website using Github Actions and Netlify
Keeping your medium content fresh in your 11ty website using Github Actions and Netlify
On my personal website I use Medium as my content platform so I can channel my content via multiple channels. This is great because it allows me to take advantage of medium’s rich text editor and the implementation is really easy to do in 11ty.
- Read more about How to reduce you html output in 11ty
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 .html file and if it is we will use an npm plugin called html-minifier to compress our html code.
- Read more about Lazy Loading Images 2020
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 domino effect on the load time due to less requests coming in on initial load of the page.
- Read more about Loading Fonts The FOUT Way
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 more about My favourite talks at DotCSS Paris
My favourite talks at DotCSS Paris
Day one was focused around CSS and each talk was truly inspiring. Here are a couple of talks that really stood out for me.
- Read more about Adding React Refs to an array of items
Adding React Refs to an array of items
React refs are useful for when we have to amending elements when focus needs to be set on an element which was triggered from a state change or prop updates. In my case, I needed to use refs for setting focus to the correct button when I selected/used arrow keys on my tabs component.
- Read more about Demystifying React Context
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…
- Read more about The PWA game
The PWA game
Offline is becoming a standard thing to do in web applications because they allow your website to feel like an app. In the modern web most…
- Read more about Modern Mobile Google Hackathon ⚡️
Modern Mobile Google Hackathon ⚡️
On Tuesday the 11th September, me, my colleague and a client were invited down to London to attend the Modern Mobile Google Hackathon. We started site speed work with the client around a year ago where we implemented: