App navigation is crucial for users regardless of what device they are using. A straightforward example is navigating and interacting with a website’s content when your mouse runs out of battery. With focus indicator and keyboard navigation support, it will be easier to understand where you are within a website…

Image optimization has always been a hot topic for web performance, with different approaches and solutions such as lazy loading, responsive images, etc. One popular solution is to use a CDN to serve the optimized variants of an image depending on the application’s needs on run time. However, building a…

The previous post explored how to test React Hooks as a standalone unit with Vitest and React Testing Library. In this post, we will continue learning how to leverage to unit test React components in a maintainable and extendable way. Prerequisites You should have a React project set up and running…

This post explores how to use Vitest and React Testing Library to help unit test React hooks in a way that makes them easy to maintain and extend. Setting up Vitest and JSDOM Powered by Vite, Vitest claims to be the “blazing fast unit test framework” for Vite projects. Vitest offers similar functionalities and syntax…

Using breadcrumbs can be beneficial for a complex site since it provides users a clear visual understanding of the site hierarchy and a more straightforward approach for a user to retrace their steps, improving their experience and engagement while reducing the bouncing rates for our sites. In this post, we…

Working with a component library to build your custom UI can be complicated, especially when you want to integrate with other tools, such as TailwindCSS. …

In this post, we will see how to use CSS function `color-mix()` with CSS variables to generate a custom palette for our Nuxt application efficiently with TailwindCSS. Prerequisites It would be best if you had your Nuxt application set up by using the following command: npx nuxi init tailwindcss-color-mix Selecting TailwindCSS…

In this tutorial, we will learn how to position an element using the inset logical property. We will also learn how the inset logical property differs from the physical properties like top, bottom, left, and right. Understanding the position property The browser uses the position property to determine how to position an element in…

In this post, we will see how to use TailwindCSS with the Nuxt application efficiently with the help of the official Nuxt module for TailwindCSS. …