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)
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. The solution I went with was to use SVGs as a clip path to make the background shapes.
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.
