James McGrath

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

Let’s look at how to find an item in an array of objects if we know one of the object’s properties.

May 17, 2020
1 minute

Today let’s see how we can refactor an accessible hamburger button using Vue.

Apr 18, 2020
2 minutes

In the thing I’m currently working on at Mamamia, the content for the page is coming from a WYSIWYG editor. The section of the page where it appears has a title that is planned to be hardcoded in to the markup. I didn’t want to add an extra div just to display the content of the v-html. It occured to me that I could easily append or prepend additional markup to it in the Vue template. However it appears that this can’t be done with v-text. The codepen below also uses this technique.

Feb 09, 2020
1 minute

As far as I know, there wasn’t any way to dynamically change the CSS properties of pseudo-elements. Now that CSS custom properties are supported in the latest browsers, there are two ways in which this can be done. The following codepen demonstrates it.

Feb 02, 2020
1 minute