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

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.

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.

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

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.

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.

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

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

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.

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.