mattc.

✍🏻 My Blog

I blog on Medium about all the things I learn and I feel that it is so important to share the knowlegde with the world about the things I am passionate about.

  1. Read more about How to mock api calls in Storybook
    Thumbnail image for NaN blog post

    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.

  2. Read more about Keeping your medium content fresh in your 11ty website using Github Actions and Netlify
    Thumbnail image for NaN blog post

    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.

  3. Read more about How to reduce you html output in 11ty
    Thumbnail image for NaN blog post

    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.

  4. Read more about Lazy Loading Images 2020
    Thumbnail image for NaN blog post

    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.

  5. Read more about Loading Fonts The FOUT Way
    Thumbnail image for NaN blog post

    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.

  6. Read more about My favourite talks at DotCSS Paris
    Thumbnail image for NaN blog post

    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.

  7. Read more about Adding React Refs to an array of items
    Thumbnail image for NaN blog post

    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.

  8. Read more about Demystifying React Context
    Thumbnail image for NaN blog post

    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…

  9. Read more about The PWA game
    Thumbnail image for NaN blog post

    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…

  10. Read more about Modern Mobile Google Hackathon ⚡️
    Thumbnail image for NaN blog post

    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: