James McGrath

Since moving from Vue to Svelte one of the things I miss from Vue is when it would create an array of elements using a ref in a v-for loop.

Oct 02, 2023
1 minute

Recently I found a need to calculate vh and vw

Sep 25, 2023
1 minute

Recently while reading through the rendering section section of the HTML spec, I came across the hidden=“until-found” attribute. Being that it’s the first time I have ever seen this, I did a search and found [a page on the chrome developers website that explains it]((https://developer.chrome.com/articles/hidden-until-found)

Sep 13, 2023
2 minutes

I had to code a design that was like half a pie chart with text in the slices and the center of the chart was cut out in a circle like a donut. You can see it here on Squad by Mamamia. The solution I went with was to use SVGs as a clip path to make the background shapes.

Aug 28, 2023
2 minutes

Let’s make a fly in animation on scroll with css custom properties and the intersection observer.

Apr 24, 2022
6 minutes

Recently I was using swiper.js to make a slide show. One of the features that was requested was to have pagination with dots on the bottom and a fraction counter in the top right like Instagram. Unfortunately it turns out swiper can’t do multiple pagination. The good thing is that it’s api lets you make it possible.

Jul 24, 2021
4 minutes

One of the projects I have been working on lately uses Nuxt and Vuetify. Someone on the team decided that dark mode is the preferred color scheme for the website. Personally I’m not a fan of the dark mode because I find it more eye fatiguing. To solve my personal issue I decided to make Nuxt and Vuetify automatically switch the color scheme based off the users preferred preference in their device settings.

Jul 02, 2021
2 minutes

Here’s 2 ways to position the underline in text. The easiest way is to use text-underline-offset.

Mar 22, 2021
1 minute

Say you got this design and it’s exactly the same for different routes. A real world example of this is when we implemented AMP on mamamia.com.au. The only difference between the AMP and non-AMP pages was the amp-img component. It was decided that we were going to reuse the page in both routes and just conditionaly load the amp-img component depending on the route.

Mar 09, 2021
1 minute

This post is not a tutorial but just an account of what I did. For each website that was moved to a new webhost there is a high level list of things that were done.

Feb 08, 2021
5 minutes