PinnedAdding React Refs to an array of itemsReact 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…Aug 10, 201911Aug 10, 201911
React Design Patterns Part Three: Render Props PatternComplexity level: IntermediateSep 9, 2024Sep 9, 2024
React Design Patterns Part Two: Props CombinationProps are used to pass data from one component to another. The prop combination pattern groups related props into a single object.Aug 27, 2024Aug 27, 2024
React Design Patterns Part One: Conditional RenderingLearn the basics of Conditional Rendering in React with this easy-to-follow guide. Part 1 of our React Design Patterns series, featuring…Aug 16, 2024Aug 16, 2024
5 reasons why data handling is easier with Redux Toolkit & RTK QueryHave you ever come onto a project and you notice there are multiple ways to call apis and you just get confused to which to use? Some ways…Dec 8, 2023Dec 8, 2023
Published inUX Collective“If only you knew the power of dark mode”Dark mode has been around for quite a long time now and you see a lot of websites embracing the power of what it can do by applying themes…Jul 28, 2021Jul 28, 2021
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.Nov 30, 2020Nov 30, 2020
How to mock api calls in StorybookThe 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…Sep 21, 2020Sep 21, 2020
Keeping your medium content fresh in your 11ty website using Github Actions and NetlifyOn my personal website I use Medium as my content platform so I can channel my content via multiple channels. This is great because it…Jul 26, 2020Jul 26, 2020
How to reduce you html output in 11tyMinifying 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…Apr 25, 20202Apr 25, 20202
Lazy Loading Images 2020Lazy 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…Apr 25, 2020Apr 25, 2020
My favourite talks at DotCSS ParisDay one was focused around CSS and each talk was truly inspiring. Here are a couple of talks that really stood out for me.Dec 23, 2019Dec 23, 2019
Published inITNEXTDemystifying React ContextYesterday I spent some time learning about how to use the context and when I read the docs I thought, “this sounds extremely complex for…Aug 1, 20192Aug 1, 20192
The PWA gameOffline 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…Jul 21, 2019Jul 21, 2019
Published inComputerloversModern 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…Sep 14, 2018Sep 14, 2018