Forem: ⚡ Nirazan Basnet ⚡

Must-Know Features in Next.js 14: Top 20 Highlights Cutting-Edge Concepts to Supercharge Your Code

⚡ Nirazan Basnet ⚡ — Tue, 08 Apr 2025 08:25:10 +0000

Next.js 14, released in October 2023, introduces many powerful features and improvements to the popular React framework. This version aims to enhance performance, developer experience, and application architecture. In this blog post, we'll explore the top 20 features that make Next.js 14 a game-changer for web development.

1. Turbopack (Beta): Lightning-Fast Development

Turbopack, now in beta, is a Rust-based bundler that greatly improves development speed. It provides updates up to 700 times faster than webpack, leading to almost instant hot module replacement (HMR).

// next.config.js
module.exports = {
  experimental: {
    turbo: {
      loaders: {
        // Add custom loaders here
      },
    },
  },
}

By enabling Turbopack, you'll enjoy faster build times and more responsive development servers.

2. Server Actions: Simplified Form Handling

Server Actions let you manage form submissions and data changes directly on the server, often removing the need for API routes.

// app/submit-form.js
'use server'

export async function submitForm(formData) {
  const name = formData.get('name')
  const email = formData.get('email')
  // Process the form data on the server
  // ...
}

// app/page.js
import { submitForm } from './submit-form'

export default function Form() {
  return (
    <form action={submitForm}>
      <input type="text" name="name" />
      <input type="email" name="email" />
      <button type="submit">Submit</button>
    </form>
  )
}

This feature simplifies form handling and reduces client-side JavaScript, improving performance and security.

3. Partial Pre-rendering (Preview)

Partial Pre-rendering lets you mix static and dynamic content on one page, optimizing both performance and data freshness.

import { unstable_noStore as noStore } from 'next/cache'

export default async function Page() {
  noStore()
  const data = await fetchData()
  return <div>{data}</div>
}

This feature is particularly useful for pages with a mix of static and dynamic content, allowing you to serve static content immediately while loading dynamic parts asynchronously.

4. Improved Image Component

The Next.js Image component now supports native lazy loading and automatic srcset generation, improving image loading and performance.

import Image from 'next/image'

export default function MyComponent() {
  return (
    <Image
      src="/my-image.jpg"
      width={500}
      height={300}
      alt="Description"
      sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
    />
  )
}

This improvement makes it easier to create responsive and high-performance image-heavy applications with minimal effort.

5. App Router: Enhanced Routing and Layouts

The App Router, introduced in version 13 and improved in version 14, offers a more intuitive way to organize your application with nested layouts and better routing.

app/
├─ layout.js
├─ page.js
├─ about/
│  ├─ layout.js
│  └─ page.js
└─ blog/
   ├─ layout.js
   └─ [slug]/
      └─ page.js

This structure allows for better code organization and easier management of shared layouts across different parts of your application.

6. Server Components: Improved Performance

Server Components, now a stable feature in Next.js 14, let you render complex, data-fetching components on the server, which reduces the amount of JavaScript sent to the client.

// app/ServerComponent.js
async function ServerComponent() {
  const data = await fetch('https://api.example.com/data')
  const result = await data.json()

  return <div>{result.map(item => <p key={item.id}>{item.name}</p>)}</div>
}

// app/page.js
import ServerComponent from './ServerComponent'

export default function Page() {
  return (
    <div>
      <h1>My Page</h1>
      <ServerComponent />
    </div>
  )
}

This approach significantly improves initial page load times and reduces the JavaScript bundle size.

7. Metadata API: Enhanced SEO

The Metadata API offers a powerful method to handle your application's SEO directly within your components.

// app/layout.js
export const metadata = {
  title: 'My Website',
  description: 'Welcome to my website',
  openGraph: {
    title: 'My Open Graph Title',
    description: 'My Open Graph Description',
    images: ['/og-image.jpg'],
  },
}

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  )
}

This API allows for dynamic metadata generation, improving your application's search engine optimization and social media sharing capabilities.

8. Improved Error Overlay

Next.js 14 features an improved error overlay that offers more detailed and helpful error messages during development.

// This will trigger the improved error overlay in development
export default function BrokenComponent() {
  throw new Error('This is a demonstration of the improved error overlay')
}

The new overlay offers better stack traces, more contextual information, and improved suggestions for fixing errors, enhancing the debugging experience.

9. Built-in Font Optimization

Next.js 14 includes built-in font optimization, which automatically inlines font CSS and preloads font files to enhance performance.

import { Inter } from 'next/font/google'

const inter = Inter({ subsets: ['latin'] })

export default function RootLayout({ children }) {
  return (
    <html lang="en" className={inter.className}>
      <body>{children}</body>
    </html>
  )
}

This feature removes the need for external font loading scripts and reduces layout shifts caused by font loading.

10. Enhanced Middleware

Middleware in Next.js 14 has been enhanced to support more use cases and offer better performance.

// middleware.js
import { NextResponse } from 'next/server'

export function middleware(request) {
  // Example: Redirect based on user's country
  const country = request.geo.country
  if (country === 'US') {
    return NextResponse.redirect(new URL('/us', request.url))
  }
  return NextResponse.next()
}

export const config = {
  matcher: '/:path*',
}

This allows for more complex routing logic, authentication checks, and request/response modifications at the edge.

11. Improved TypeScript Support

Next.js 14 improves TypeScript integration, offering better type inference and more accurate type checking throughout your application.

// app/page.tsx
import { Metadata } from 'next'

type Props = {
  params: { id: string }
}

export async function generateMetadata({ params }: Props): Promise<Metadata> {
  return { title: `Item ${params.id}` }
}

export default function Page({ params }: Props) {
  return <div>Item: {params.id}</div>
}

This improved TypeScript support helps catch errors earlier in the development process and provides better autocompletion in IDEs.

12. Automatic 404 Pages

Next.js 14 automatically generates 404 pages for non-existent routes, enhancing user experience and SEO.

// app/not-found.js
export default function NotFound() {
  return (
    <div>
      <h2>Not Found</h2>
      <p>Could not find requested resource</p>
    </div>
  )
}

You can customize this page to match your application's design and provide helpful navigation options for users.

13. Dynamic OG Image Generation

Next.js 14 supports dynamic Open Graph image generation, enabling the creation of custom social media preview images on-the-fly.

// app/opengraph-image.js
import { ImageResponse } from 'next/server'

export const runtime = 'edge'

export async function GET() {
  return new ImageResponse(
    (
      <div
        style={{
          fontSize: 128,
          background: 'white',
          width: '100%',
          height: '100%',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
        }}
      >
        Hello, World!
      </div>
    ),
    {
      width: 1200,
      height: 630,
    }
  )
}

This feature enables personalized and context-aware social media previews, which can increase engagement with shared links.

14. Incremental Static Regeneration (ISR) Improvements

Next.js 14 enhances Incremental Static Regeneration, providing finer control over content revalidation.

// app/page.js
export const revalidate = 60 // revalidate every 60 seconds

export default async function Page() {
  const res = await fetch('https://api.example.com/data', { next: { revalidate: 60 } })
  const data = await res.json()
  return <div>{data.content}</div>
}

This improvement helps balance between static generation performance and content freshness.

15. Enhanced API Routes

Next.js 14 introduces better typing and more flexible routing options for API routes.

// app/api/hello/route.js
import { NextResponse } from 'next/server'

export async function GET(request: Request) {
  const { searchParams } = new URL(request.url)
  const name = searchParams.get('name')
  return NextResponse.json({ message: `Hello, ${name}!` })
}

These enhancements make it easier to build robust, type-safe APIs within your Next.js application.

16. Improved CSS Support

Next.js 14 offers better CSS support, including enhanced CSS Modules and support for CSS-in-JS libraries.

// app/styles.module.css
.heading {
  color: blue;
  font-size: 24px;
}

// app/page.js
import styles from './styles.module.css'

export default function Page() {
  return <h1 className={styles.heading}>Welcome to Next.js 14</h1>
}

This feature allows for more flexible and maintainable styling solutions in your Next.js applications.

17. Enhanced Build Output

Next.js 14 provides more detailed and informative build output, helping developers understand their application's performance and structure.

$ next build
info  - Creating an optimized production build...
info  - Compiled successfully
info  - Collecting page data...
info  - Generating static pages (3/3)
info  - Finalizing page optimization...

Route (app)                              Size     First Load JS
┌ ○ /                                    5.3 kB        87.4 kB
├ ○ /about                               4.2 kB        86.3 kB
└ ○ /blog/[slug]                         5.1 kB        87.2 kB
+ First Load JS shared by all            82.1 kB
  ├ chunks/framework-8883d1e9be70c3da.js 45.1 kB
  ├ chunks/main-57bbc28a4b75d459.js      35.2 kB
  └ chunks/pages/_app-1534f180665c855f.js 1.8 kB

○  (Static)  automatically rendered as static HTML (uses no initial props)

This detailed output helps developers optimize their applications and understand the impact of their changes on build size and performance.

18. Improved Error Handling

Next.js 14 introduces better error handling mechanisms, including more informative error messages and improved error boundaries.

// app/error.js
'use client'

export default function Error({ error, reset }) {
  return (
    <div>
      <h2>Something went wrong!</h2>
      <button onClick={() => reset()}>Try again</button>
    </div>
  )
}

This feature helps create more resilient applications by gracefully handling and recovering from errors.

19. Enhanced Static Export

Next.js 14 improves the static export functionality, allowing for more complex static sites with dynamic routes.

// next.config.js
module.exports = {
  output: 'export',
  // Other config options...
}

This enhancement makes Next.js a powerful option for creating static sites with the benefits of a React-based framework.

20. Improved Documentation and Learning Resources

While not a code feature, Next.js 14 comes with significantly improved documentation and learning resources, making it easier for developers to leverage all these new features effectively.

Official Website: https://nextjs.org/

For more information visit https://nextjs.org/blog/next-14

Conclusion

Next.js 14 marks a big step forward for React-based web development frameworks. It focuses on performance optimization, better developer experience, and enhanced architectural capabilities, providing a robust toolkit for building modern, scalable web applications.

By adopting Next.js 14, developers can use these advanced features to create faster, more responsive, and easier-to-maintain web applications. Whether you're working on a small personal project or a large-scale enterprise application, Next.js 14 has the tools and capabilities to bring your vision to life.

Are you ready to elevate your web development with Next.js 14? Dive in, explore these features, and take your React applications to the next level!

👏👏 Congratulations on making it this far! I hope you can implement this awesome counter animated effect in your project. Give it a try and enjoy it!

Feel free to share your thoughts and opinions, and leave a comment if you have any problems or questions.

Until then, keep on hacking. Cheers!

Solving Memory Issues with Lottie SVG Animations

⚡ Nirazan Basnet ⚡ — Wed, 22 May 2024 09:07:35 +0000

Introduction

Integrating Lottie SVG animations can significantly enhance the visual appeal of a website. However, the process can sometimes introduce performance issues, particularly with excessive memory usage.

This post details my experience with integrating Lottie animations using the vue3-lottie package in a Vue 3 application and the subsequent challenges I faced. I will also outline the solution that resolved these issues, ensuring smoother performance and better resource management.

The Problem

While incorporating multiple SVG animations via the vue3-lottie package, I noticed a severe performance degradation. The system memory usage would spike dramatically, causing the site to slow down and become unresponsive.

Detailed Observations

Memory Spike - Enabling autoplay and infinite looping with the vue3-lottie component caused the browser's memory usage to spike between 700MB and 3000MB.
Memory Leak Suspicions - Even after attempting to manage the lifecycle of the components by destroying them appropriately, the memory usage remained excessively high, indicating a potential memory leak.
Inconsistent Memory Recycling - The browser's memory recycling mechanism failed to effectively manage the memory usage, maintaining it at a high level even after the animations stopped.

Investigative Findings

Upon thorough investigation, I discovered that the root cause lay within the vue3-lottie package itself. Specifically, using the package for SVG rendering with looping and autoplay enabled caused continuous memory consumption growth, eventually leading to a performance bottleneck.

Memory Usage Analysis

Initial Load - Memory usage starts at around 200MB.
After 10-30 Seconds - Memory usage increases to between 700MB and 1800MB.
Memory Recycling - Ineffective, maintaining around 600MB even after it triggers.

The Solution

The solution was to switch from using the vue3-lottie package to directly importing the Lottie player script. This approach dramatically reduced the memory footprint and stabilized performance.

Implementation Steps

Stop Using vue3-lottie: Discontinue the use of vue3-lottie and lottie-web due to their associated memory management issues.
Import Lottie Player Script: You can import online and download from Lottie player js and use the script tag to import lottie-player.js from LottieFiles.

Code Example
Below is the code implementation that resolved the memory issues:

Old Implementation with vue3-lottie package

<template>
  <vue3-lottie
    :options="defaultOptions"
    :height="400"
    :width="400"
    autoplay
    loop
  />
</template>

<script setup>
import { reactive } from 'vue';
import vue3Lottie from 'vue3-lottie';
import animationData from '@/assets/animation.json';

const defaultOptions = reactive({
  animationData,
});
</script>

New Implementation with importing lottie-player.js

You can maintain the file like below 👇

<template>
  <lottie-player
    ref="heroLottie"
    :src="lottieHeroSectionData"
    speed="1"
    direction="1"
    mode="normal"
    loop
    autoplay/>
</template>

<script setup>
    import {lottieHeroSectionData} from "@frontendApp/views/agent/landing/pages/homepage/lottie";
    import {onBeforeMount} from "vue";
    import "@frontendApp/views/agent/landing/assets/js/lottie-player.js"

    const heroLottie = ref(null);

    onBeforeMount(() => {
        if (heroLottie.value) {
            heroLottie.value.destroy()
        }
    })
</script>

Benefits Observed

Reduced Initial Memory Usage: Around 100MB after page load.
Effective Memory Recycling: Memory usage stabilized at approximately 200-400MB after recycling.
Elimination of Lag: The site became responsive and stable, eliminating the lag and crashes.

Conclusion

Incorporating Lottie SVG animations can significantly enhance user experience, but it's crucial to monitor and manage the performance implications. Switching from the vue3-lottie package to directly importing the Lottie player script proved to be an effective solution to address memory leaks and performance issues. This approach ensures smoother animations and a more responsive website, saving both time and resources. If you encounter similar issues, consider using the Lottie player script for a more efficient and reliable implementation.

Feel free to share your thoughts and opinions and leave me a comment if you have any problems or questions. 😎😎

Till then, Keep on Hacking, Cheers

Happy coding! 🚀👩‍💻👨‍💻

Building a simple language switcher in a vue.js: Step-by-step tutorial 🌐

⚡ Nirazan Basnet ⚡ — Fri, 26 Apr 2024 04:53:13 +0000

Creating a multilingual application can dramatically increase its accessibility and reach. This blog post guides you through creating a language switcher component in a Vue.js application using the vue-i18n plugin. This functionality allows users to switch between different languages, enhancing accessibility and reaching a broader audience.

Step 1: Setting up Your Project Structure 📁

Before diving into the code, let's ensure our project is properly structured. A dedicated lang folder is created within the src directory to store language files (e.g., en.json, ja.json) for better organization. This is where we'll hold our language files, as shown in the screenshot below:

Having a separate folder for each language keeps things organized, enabling easier management of translations.

Also, here is the sample json file of en and ja

en.json



{
  "welcome": "Welcome!"
}

ja.json



{
  "welcome": "ようこそ！"
}

Step 2: Configuring vue-i18n 🛠️

First, let's install the vue-i18n package by running the following command in your project:



npm install vue-i18n

Next, we need to configure the vue-i18n plugin. The main.js file is updated to import and use the i18n instance, making localization features accessible throughout the app.



import { createApp } from 'vue';
import App from './App.vue';
import i18n from './i18n';

const app = createApp(App);
app.use(i18n);
app.mount('#app');

Step 3: Creating the i18n.js File 📝

This file serves as the core for handling translations. It uses the createI18n function to initialize vue-i18n.
Language files (en.json and ja.json) are imported and assigned to the messages option.

A fallback mechanism is set using fallbackLocale to ensure a default language displays if the chosen language isn't available.
legacy is set to false for improved compatibility.



import { createI18n } from 'vue-i18n';
import en from './lang/en/en.json';
import ja from './lang/ja/ja.json';

const i18n = createI18n({
  legacy: false,
  locale: localStorage.getItem('lang') || 'en',
  fallbackLocale: 'en',
  messages: {
    en,
    ja,
  },
});

export default i18n;

Step 4: Crafting a LanguageSwitcher Component 🔄

A new Vue component named LanguageSwitcher.vue is created.



<template>
  <div>
    <button @click="setLanguage('en')" style="margin-right: 8px">English</button>
    <button @click="setLanguage('ja')">Japanese</button>
  </div>
</template>

<script setup>
import { useI18n } from 'vue-i18n';
import { watchEffect } from 'vue';

const { locale } = useI18n();

const setLanguage = (newLang) => {
  locale.value = newLang;
  localStorage.setItem('lang', newLang);
};

watchEffect(() => {
  const storedLang = localStorage.getItem('lang');
  if (storedLang) {
    locale.value = storedLang;
  }
});
</script>

Key Functionalities:

setLanguage Function:

This function takes a new language code (newLang) as input.
It updates the locale.value of the i18n instance with the new language.
The user's preference is saved to localStorage using localStorage.setItem('lang', newLang).

watchEffect:

This monitors changes in localStorage.
If a stored language preference (lang) exists in localStorage, it retrieves the value and updates the locale.value of the i18n instance accordingly. This ensures the app reflects the user's saved language preference upon loading.

In essence, this component provides a user interface to switch languages and persists the user's choice in localStorage.

Step 5: Updating the App.vue File 🌟

Now, let's use our LanguageSwitcher in the main App.vue:



<template>
  <div>
    <LanguageSwitcher />
    <p>{{ t('welcome') }}</p>
  </div>
</template>

<script setup>
import { useI18n } from 'vue-i18n';
import LanguageSwitcher from './components/LanguageSwitcher.vue';

const { t } = useI18n();
</script>

Here, the t function from useI18n is used to display the translated "welcome" message based on the current locale.

Step 6: Handling vue-i18n Legacy Console Error 🚫

If you encounter a legacy mode error related to vue-i18n, update your vite.config.js file as instructed.



import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
  plugins: [
    vue({
      reactivityTransform: true,
    }),
  ],
});

And remember to set the legacy: false option in the i18n.js file, as shown in Step 3.

Live Demo 🎮

To see this language switcher in action, visit the live demo

https://stackblitz.com/edit/vuejs-language-switcher-i18n?file=README.md

Conclusion 🎉

By following these steps, you can create a functional language switcher in your Vue.js application using vue-i18n. This enhances user experience by catering to a wider audience and providing language options. Remember to thoroughly test the switcher and translations for a seamless multilingual experience.

Feel free to share your thoughts and opinions and leave me a comment if you have any problems or questions. 😎😎

Till then, Keep on Hacking, Cheers

Happy coding! 🚀👩‍💻👨‍💻

Follow best rules while coding in Vue.js Projects

⚡ Nirazan Basnet ⚡ — Tue, 26 Mar 2024 08:34:40 +0000

After several years of working on Vue.js projects, I've honed my ability to incorporate top-notch coding principles and practices for crafting clean code. By leveraging these guidelines, we can steer clear of mistakes and embrace optimal coding patterns. It's worth noting that this perspective is founded on my personal experiences, and it may not universally apply to every team or project.

In this blog, I will enumerate a selection of best practices that can significantly enhance our code-writing endeavors.

1. Make sure to use "key" when you're using "v-for."

When you're using "v-for" with components, you should always include a "key." This helps to keep the component's internal information consistent. Even when you're working with regular elements, using "key" is a good idea. It helps ensure things behave predictably, especially when dealing with animations and making sure objects stay the same.

Bad Example

<ul>
  <li v-for="list in lists">
    {{ todo.text }}
  </li>
</ul>

Good Example

<ul>
  <li
    v-for="list in lists"
    :key="list.id"
  >
    {{ list.text }}
  </li>
</ul>

2. Don't mix v-if and v-for

It's not a good idea to use v-if and v-for on the same thing. There are two situations where you might think about doing this:

If you want to show only certain items in a list (like only active users), instead of using v-if, make a new list with just the items you want to show (like activeUsers).

If you want to hide a whole list (for example, if shouldShowUsers is false), put the v-if on a container like an ul or ol instead of using it directly on the v-for loop.

Bad Example

<ul>
  <li
    v-for="user in users"
    v-if="user.isActive"
    :key="user.id"
  >
    {{ user.name }}
  </li>
</ul>

Good Example

<ul>
  <li
    v-for="user in activeUsers"
    :key="user.id"
  >
    {{ user.name }}
  </li>
</ul>

<ul>
  <template v-for="user in users" :key="user.id">
    <li v-if="user.isActive">
      {{ user.name }}
    </li>
  </template>
</ul>

3. Choose component names with multiple words.

When naming your components, it's a good practice to have names with more than one word, except for the main App component. This helps avoid any clashes with existing or future HTML elements, as HTML elements are single words.

Bad Example

<!-- in pre-compiled templates -->
<Item />

<!-- in in-DOM templates -->
<item></item>

Good Example

<!-- in pre-compiled templates -->
<TodoItem />

<!-- in in-DOM templates -->
<todo-item></todo-item>

4. Naming Basics for Components

For components that handle the core design and styles unique to your app (sometimes called presentational, dumb, or pure components), it's a good practice to start their names with a particular prefix, like Base, App, or V.

Bad Example

components/
|- MyButton.vue
|- VueTable.vue
|- Icon.vue

Good Example

components/
|- BaseButton.vue
|- BaseTable.vue
|- BaseIcon.vue

components/
|- AppButton.vue
|- AppTable.vue
|- AppIcon.vue

components/
|- JButton.vue
|- JTable.vue
|- JIcon.vue

5. How to Write Component Names in Templates

In most projects, when you're working with Single-File Components and string templates, your component names should be written in PascalCase. However, when you're using in-DOM templates, you should use kebab-case.

Here's why PascalCase is preferred in most cases:

Editors can help you by suggesting component names because PascalCase is also used in JavaScript.

PascalCase component names, like, look more distinct from single-word HTML elements compared to because there are two noticeable differences (the two capital letters) instead of just one (a hyphen).

If you're using any non-Vue custom elements in your templates, like a web component, using PascalCase ensures that your Vue components stand out clearly.

Bad Example

<!-- In Single-File Components and string templates -->
<mycomponent/>

<!-- In Single-File Components and string templates -->
<myComponent/>

<!-- In in-DOM templates -->
<MyComponent></MyComponent>

Good Example

<!-- In Single-File Components and string templates -->
<MyComponent/>

<!-- In in-DOM templates -->
<my-component></my-component>

6. Prop name casing

When you declare props, always use camelCase. If you're using props in in-DOM templates, then they should be named with kebab-case. However, in Single-File Components templates and JSX, you have the flexibility to use either kebab-case or camelCase for props. It's essential to maintain consistency in your choice of casing throughout your application. In other words, if you opt for camelCase props, avoid using kebab-case ones elsewhere in your code.

Bad Example

const props = defineProps({
  'greeting-text': String
})

// for in-DOM templates
<welcome-message greetingText="hi"></welcome-message>

Good Example

const props = defineProps({
  greetingText: String
})

<WelcomeMessage greeting-text="hi"/>
// or
<WelcomeMessage greetingText="hi"/>

// for in-DOM templates
<welcome-message greeting-text="hi"></welcome-message>

7. Keep Component Templates Simple

When you're working on component templates, try to use simple expressions. If you find yourself using complicated expressions, it's better to move them to computed properties or methods. This keeps your templates clear and easy to understand. Instead of getting caught up in how things are calculated, you can focus on what should be shown on the screen.

Additionally, using computed properties and methods makes your code more reusable, which is a good thing for keeping your code organized and efficient.

Bad Example

{{
  fullName.split(' ').map((word) => {
    return word[0].toUpperCase() + word.slice(1)
  }).join(' ')
}}

Good Example

<!-- In a template -->
{{ normalizedFullName }}

// The complex expression has been moved to a computed property
const normalizedFullName = computed(() =>
  fullName.value
    .split(' ')
    .map((word) => word[0].toUpperCase() + word.slice(1))
    .join(' ')
)

8. Using Shortcut Notations for Directives

When you're working with directives, like v-bind, v-on, and v-slot, you can use shorthand notations like : for v-bind, @ for v-on, and # for v-slot. But here's the rule: always use them or never use them. It's about being consistent in your code. So, pick one approach and stick with it throughout your project.

Bad Example

<input
  v-bind:value="newTodoText"
  :placeholder="newTodoInstructions"
>

<input
  v-on:input="onInput"
  @focus="onFocus"
>

<template v-slot:header>
  <h1>Here might be a page title</h1>
</template>

<template #footer>
  <p>Here's some contact info</p>
</template>

Good Example

<input
  :value="newTodoText"
  :placeholder="newTodoInstructions"
>

<input
  v-bind:value="newTodoText"
  v-bind:placeholder="newTodoInstructions"
>

<input
  @input="onInput"
  @focus="onFocus"
>

<input
  v-on:input="onInput"
  v-on:focus="onFocus"
>

<template v-slot:header>
  <h1>Here might be a page title</h1>
</template>

<template v-slot:footer>
  <p>Here's some contact info</p>
</template>

<template #header>
  <h1>Here might be a page title</h1>
</template>

<template #footer>
  <p>Here's some contact info</p>
</template>

9. Use detailed prop definitions

When you're writing code that involves props (which are like special instructions you can give to a component), always be as clear as you can about what those props should be like. At the very least, make sure to say what type of data the props should be. This helps everyone understand how to use your code properly and avoids any confusion.

Bad Example

// This is only OK when prototyping
const props = defineProps(['status'])

Good Example

const props = defineProps({
  status: String
})

const props = defineProps({
  status: {
    type: String,
    required: true,

    validator: (value) => {
      return ['syncing', 'synced', 'version-conflict', 'error'].includes(
        value
      )
    }
  }
})

10. Connect Child Components to Parents

When you have child components that work closely with a specific parent component, it's a good idea to include the parent's name at the beginning of the child component's name. This naming strategy helps show the strong connection between them. Since files are often sorted alphabetically, it also keeps these related files grouped, making them easier to find and work with.

Bad Example

components/
|- TodoList.vue
|- TodoItem.vue
|- TodoButton.vue

components/
|- SearchSidebar.vue
|- NavigationForSearchSidebar.vue

Good Example

components/
|- TodoList.vue
|- TodoListItem.vue
|- TodoListItemButton.vue

components/
|- SearchSidebar.vue
|- SearchSidebarNavigation.vue

Conclusion 🎉🎭

👏👏 I hope that by reading this far, now you can maintain a well-organized and clear Vue.js codebase, and stick to consistent naming conventions and coding practices. Use PascalCase for component names, camelCase for prop declarations, and kebab-case for in-DOM template props. Keep templates simple with basic expressions and move complex logic into computed properties or methods for readability and reusability. Make parent-child component relationships evident in names when they're closely connected. Lastly, whether you opt for shorthand notations for directives or not, maintain consistency throughout your codebase for clarity. So, I encourage you to try it out and enjoy its benefits.

Please feel free to share your thoughts and opinions with me, and if you encounter any issues or have any questions, don't hesitate to leave a comment.

Keep on hacking! Happy coding! 🚀🌈

TailwindCSS Awesomeness 😎: My Personal Features Spotlight

⚡ Nirazan Basnet ⚡ — Wed, 22 Nov 2023 03:20:04 +0000

As a front-end developer, I'm always on the lookout for tools and frameworks that can make my life easier and my code more efficient. One such tool that has truly revolutionized my workflow is Tailwind CSS.

TailwindCSS is a utility-first CSS framework that has gained immense popularity in recent years for its simplicity and flexibility. In this blog, I'll be sharing my favorite TailwindCSS features that have made it an essential part of my front-end development toolkit.

1. Dark Mode 🌒

Dark mode has become a must-have feature for modern web applications, and TailwindCSS makes it incredibly easy to implement. You can toggle between light and dark modes with just a single class.

To make this as easy as possible, Tailwind includes a dark variant that lets you style your site differently when dark mode is enabled:

<div class="bg-white dark:bg-slate-800 rounded-lg px-6 py-8 ring-1 ring-slate-900/5 shadow-xl">
  <div>
    <span class="inline-flex items-center justify-center p-2 bg-indigo-500 rounded-md shadow-lg">
      <svg class="h-6 w-6 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"><!-- ... --></svg>
    </span>
  </div>
  <h3 class="text-slate-900 dark:text-white mt-5 text-base font-medium tracking-tight">Writes Upside-Down</h3>
  <p class="text-slate-500 dark:text-slate-400 mt-2 text-sm">
    The Zero Gravity Pen can be used to write in any orientation, including upside-down. It even works in outer space.
  </p>
</div>

Advantages:

Enhances user experience by providing a choice of interface color schemes.
Reduces the need for complex CSS or JavaScript to switch themes.

2. Line-clamp out of the box 🔍

Truncating long blocks of text is a common requirement in web design, and TailwindCSS simplifies this with the line-clamp class.

<article>
  <div>
    ...
    <p class="line-clamp-3 mt-4 text-sm/6 text-gray-600">
      Nulla dolor velit adipisicing duis excepteur esse in duis nostrud occaecat mollit incididunt deserunt sunt. Ut ut sunt laborum ex occaecat eu tempor labore enim adipisicing minim ad. Est in quis eu dolore occaecat excepteur fugiat dolore nisi aliqua fugiat enim ut cillum. Labore enim duis nostrud eu. Est ut eiusmod consequat irure quis deserunt ex. Enim laboris dolor magna pariatur. Dolor et ad sint voluptate sunt elit mollit officia ad enim sit consectetur enim.
    </p>
  </div>
  ...
</article>

Advantages:

No need to write custom CSS for text truncation.
Easily control the number of lines to display.

3. Group-hover and focus-within by default 🖱️

TailwindCSS applies group-hover and focus-within which is enabled by default and helps to style the elements within a parent container without the need for additional CSS classes.

<div class="group block max-w-xs mx-auto rounded-lg p-6 bg-white ring-1 ring-slate-900/5 shadow-lg space-y-3 hover:bg-sky-500 hover:ring-sky-500">
  <div class="flex items-center space-x-3">
    <svg class="h-6 w-6 stroke-sky-500 group-hover:stroke-white" fill="none" viewBox="0 0 24 24"><!-- ... --></svg>
    <h3 class="text-slate-900 group-hover:text-white text-sm font-semibold">New project</h3>
  </div>
  <p class="text-slate-500 group-hover:text-white text-sm">Create a new project from a variety of starting templates.</p>
</div>

Advantages:

Simplifies styling of interactive elements.
Keeps HTML clean and semantic.

4. Extended arbitrary value support 📏

TailwindCSS allows you to use arbitrary values in your utility classes, making it flexible and adaptable to your design needs. It is possible to add arbitrary CSS that you can combine with modifiers like hover, lg, and whatever else:

<div class="p-[10px] m-[2.5rem] text-[18px] bg-[#bada55] before:content-['Tailwind']">
<!-- ... -->
</div>

Advantages:

Fine-grained control over design details.
Reduces the need for custom CSS.

5. Before and after pseudo-element variants 🧙‍♂️

Easily add ::before and ::after pseudo-elements to elements using TailwindCSS.

<div class="before:absolute before:content-[''] before:w-20 before:h-20 before:bg-blue-500">
<!-- ... -->
</div>

Advantages:

Quickly create decorative elements without writing extra CSS.
Keep HTML clean and maintainable.

6. Gap and Space Between 🕳️

I use space between features when the UI is in a list item format. This utility class space-x-{amount} aids in managing the spacing between child elements. It goes for horizontal and vertical space between children.

<div class="flex space-x-4 ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>

I utilize the gap utility class to regulate the spacing between grid and flexbox items, facilitating the management of gaps between elements within flex and grid layouts.

<div class="flex gap-4">
  <div>Item 1</div>
  <div>Item 2</div>
</div>

Advantages:

Easily create responsive layouts with consistent spacing.
No need to write custom CSS for spacing.

7. New line-height shorthand for font-size utilities 📝

Managing line heights is simplified with TailwindCSS's line-height shorthand text-lg/{{amount}}

<p class="text-sm font-medium text-lg/7 ...">
    <!-- ... -->
</p>

<p class="text-sm/[17px] ..."></p>

Advantages:

Improved readability and aesthetics of text.
Saves time when setting line heights.

8. Isolation 🧪

This feature helps for controlling whether an element should explicitly create a new stacking context. It prevents styles from leaking into or out of a component by using the isolation class.

<div class="isolate">
   <!-- ... -->
</div>

Advantages:

Isolate styles to prevent unintended side effects.
Better encapsulation of components.

9. Divide Width, Color, and Style 📏🎨🖌️

TailwindCSS makes it easy to add dividers between elements with custom width, color, and style. These utility classes divide-{{direction}},divide-{{color}}, divide-{{style}} helps in controlling the width, color and style of the border between the elements.

<div class="divide-x-2 divide-red-500 divide-dotted">
  <span>Item 1</span>
  <span>Item 2</span>
</div>

Advantages:

Customize dividers to match your design.
Reduce the need for additional CSS for dividers.

10. Accent Color 🎨

Easily create an accent color for your application and use it consistently. This utility class accent-{{color}} for controlling the accented color of a form control. This helps style elements like checkboxes and radio groups by overriding the browser’s default color.

<label>
  <input type="checkbox" checked> Browser default
</label>
<label>
  <input type="checkbox" class="accent-pink-500" checked> Customized
</label>

Advantages:

Control the checkbox and radio color without using any extra CSS.
Time-saving and consistent on the form elements

11. CSS variables without the var() 🔄

TailwindCSS allows you to define and use CSS variables without the var() syntax.

<div className="bg-[--brand-color] hover:bg-[--brand-hover-color]">
<!-- ... -->
</div>

Advantages:

Simplifies the use of CSS variables.
More readable and concise code.

12. Scroll Snap Align 🧭

Create scrollable sections with precise alignment using TailwindCSS. This utility class snap-{{alignment}} helps for controlling the scroll snap alignment of an element.

<div class="scroll-x">
  <div class="snap-start">Section 1</div>
  <div class="snap-center">Section 2</div>
  <div class="snap-end">Section 3</div>
</div>

Advantages:

Improve user experience in scrollable sections.
Create interactive and engaging web interfaces.

13. Simplified RTL support with logical properties 🌐

TailwindCSS supports Right-to-Left (RTL) languages effortlessly using logical properties. This uses logical properties which helps in styling more easily and automatically.

Using new utilities like ms-3 and me-3, you can style the start and end of an element so that your styles automatically adapt in RTL, instead of writing code like ltr:ml-3 rtl:mr-3

You can explore the newly added logical property utilities for inset, margin, padding, border-radius, scroll-margin, and scroll-padding.

<div class="group flex items-center">
  <img class="shrink-0 h-12 w-12 rounded-full" src="..." alt="" />
  <div class="ms-3">
    <p class="text-sm font-medium text-slate-300 group-hover:text-white">...</p>
    <p class="text-sm font-medium text-slate-500 group-hover:text-slate-300">...</p>
  </div>
</div>

Advantages:

Better internationalization and accessibility support.
Simplifies development for RTL languages.

14. Overscroll Behavior 🔄

This utility class overscroll-{{control}} helps for controlling how the browser behaves when reaching the boundary of a scrolling area. This usually prevents parents from over scrolling. This has three usages

Preventing parent overscrolling (using overscroll-contain)

Preventing overscroll bouncing (using overscroll-none)

Using the default overscroll behavior (using overscroll-auto)

<div class="overscroll-auto">
  <!-- ... -->
</div>

Advantages:

Improve the user experience by controlling scroll behavior.
No need for custom JavaScript to over-scroll.

15. Text overflow utility 📏

Use truncate to truncate overflowing text with an ellipsis (…) if needed.

<p class="truncate">
  <!-- Content -->
</p>

Use text-ellipsis to truncate overflowing text with an ellipsis (…) if needed.

<p class="text-ellipsis overflow-hidden"><!-- Content --></p>

Use text-clip to truncate the text at the limit of the content area.

<p class="text-clip overflow-hidden"><!-- Content --></p>

Advantages:

Saves Space
Text Overflow Handling
Improved Readability

Conclusion

👏👏 TailwindCSS is a game-changer for front-end developers, offering an extensive set of features that simplify the development process, enhance maintainability, and improve the user experience. These 15 features are just a glimpse of what TailwindCSS has to offer, and I can't wait to see how it continues to evolve and shape the future of web development.

The features mentioned above are really handy for improving the readability and efficiency of my code. While there are many other Tailwind utility classes we use daily, these are my personal favorites.

Note: For additional information, you can visit the official TailwindCSS website. All the screenshots provided are sourced from the TailwindCSS website.

Feel free to share your thoughts and opinions and leave me a comment if you have any problems or questions. 😎😎

Till then, Keep on Hacking, Cheers

Learn @click event handler for VueJs 👊💥

⚡ Nirazan Basnet ⚡ — Sun, 27 Aug 2023 04:40:41 +0000

We use @click event handler almost every time in our projects. This is one of the powerful tools that allows us to create interactive and dynamic user experiences within our VueJs applications. In this blog, we will cover all the essential properties of the @click event handler, accompanied by real examples and recommendations based on various use cases.

Understanding the Basics 🌟

VueJs's @click event handler is your gateway to capturing and responding to mouse clicks on various elements within your application. It forms the foundation for infusing interactivity and dynamism into your VueJs components.

Let's explore the Properties of @click event handler

1. Simple Click Handling 🖱️

The simplest application of @click involves binding a method to an element. When clicked, the associated method executes. This is ideal for basic actions like toggling a boolean or updating a counter.

Here's the basic example of the @click event handler:

<template>
  <button @click="toggleActive">Toggle Active</button>
</template>

<script setup>
import { ref } from 'vue';

const isActive = ref(false);

const toggleActive = () => {
  isActive.value = !isActive.value;
};
</script>

2. Passing Arguments ✨

Passing arguments to the @click handler shines when working with lists or dynamic components. It provides access to contextual data about the clicked element.

<template>
  <ul>
    <li v-for="item in items" :key="item.id">
      <span @click="selectItem(item)">{{ item.name }}</span>
    </li>
  </ul>
</template>

<script setup>
import { ref } from 'vue';

const items = ref([
  { id: 1, name: 'Item 1' },
  { id: 2, name: 'Item 2' }
]);

const selectItem = (item) => {
  console.log(`Selected: ${item.name}`);
};
</script>

3. Managing Event Behavior: Event Modifiers 🛠️

Event modifiers fine-tune the behavior of the @click event. Useful for controlling event propagation, preventing defaults, and targeting specific elements.

Types of Event Modifiers and Their Roles 🧩

VueJs offers several event modifiers that enable you to manage event behavior in different ways. Let's explore some of these and how they can enhance your application's interactivity:

.stop Modifier - Preventing Event Propagation 🛑

The .stop modifier halts event propagation, preventing it from bubbling up to parent elements. This can be particularly useful when you don't want a parent element's event listener to be triggered.

<template>
  <div @click="parentClick">
    <button @click.stop="childClick">Stop Click</button>
  </div>
</template>

<script setup>
const parentClick = () => {
  console.log('Parent clicked');
};

const childClick = () => {
  console.log('Child clicked');
};
</script>

.prevent Modifier - Preventing Default Behavior 🔒

The .prevent modifier stops the default behavior of an element's event, such as form submission on pressing Enter within an input field.

<template>
  <form>
    <input type="text" />
    <button @click.prevent="submitForm">Submit</button>
  </form>
</template>

<script setup>
const submitForm = () => {
  console.log('Form submitted');
};
</script>

.capture Modifier - Capturing Event on the Capture Phase 🎯

The .capture modifier triggers the event listener during the capture phase before it reaches the target element. This can be beneficial for global event listeners that need to intercept events early.

<template>
  <div @click.capture="captureClick">
    <button>Click Me</button>
  </div>
</template>

<script setup>
const captureClick = () => {
  console.log('Captured Click');
};
</script>

.self Modifier - Ignoring Clicks on Child Elements 🙅

The .self modifier restricts the event handler to the element itself, ignoring clicks on its child elements. This is helpful when you want to isolate interactions to the main element only.

<template>
  <div @click.self="elementClick">
    <button>Click Me</button>
  </div>
</template>

<script setup>
const elementClick = () => {
  console.log('Element Clicked');
};
</script>

.once Modifier - Triggering the Event Only Once 🎈

The .once modifier ensures that the event listener is executed only once. After the first event trigger, the listener is automatically removed.

<template>
  <button @click.once="singleClick">Click Once</button>
</template>

<script setup>
const singleClick = () => {
  console.log('Clicked Once');
};
</script>

4. Enhancing Keyboard Interaction: Key Modifiers ⌨️

Key modifiers enable click events triggered by specific keyboard keys, enhancing accessibility and user engagement.

<template>
  <input @keyup.enter="submitForm" />
  <button @click.ctrl="ctrlClick">Ctrl + Click</button>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';

const submitForm = () => {
  console.log('Form submitted');
};

const ctrlClick = () => {
  console.log('Ctrl + Click');
};
</script>

5. Crafting Reusable Components: Dynamic Event Names 🔧

Dynamic event names let you bind click handlers based on data, fostering versatile and reusable components.

<template>
  <button v-for="action in actions" :key="action" @click="performAction(action)">
    {{ action }}
  </button>
</template>

<script setup>
import { ref } from 'vue';

const actions = ref(['Save', 'Delete', 'Edit']);

const performAction = (action) => {
  console.log(`Performed action: ${action}`);
};
</script>

Advantages of @click Event Handler 🌈

All the above examples are grouped depending on the situation and the use cases.

Simplicity: Effortlessly implement basic click actions.
Interactivity: Engage users with responsive elements.
Contextual Action: Pass arguments for contextual insights.
Event Modifiers: Fine-tune event behavior for a smoother interaction.
Keyboard Interaction: Enhance accessibility with key modifiers.
Reusability: Create versatile components using dynamic event names.

Disadvantages and Edge Cases ☀️🌦️

Complexity Overload
Overuse of @click with multiple modifiers can lead to complexity.

<!-- Example: -->
<button @click.prevent.stop.self="complexAction">Complex Action</button>

Callback Fatigue
Handling multiple click callbacks in one component might reduce readability.

<!-- Example: -->
<button @click="firstAction">{{ firstActionText }}</button>
<button @click="secondAction">{{ secondActionText }}</button>
<button @click="thirdAction">{{ thirdActionText }}</button>
<!-- and so on... -->

Performance Concerns
Excessive click handlers can impact performance.

<!-- Example: -->
<button v-for="item in items" :key="item.id" @click="handleItemClick(item)">
  {{ item.name }}
</button>

Accessibility
Relying solely on click events might exclude users with disabilities.

<!-- Example: -->
<div @click="openModal" tabindex="0">Open Modal</div>

Conclusion 🎉🎭

Depending on the complexity of interactivity or event management required, other tools such as VueJs's state management (such as Vuex or Pinia) or comprehensive event handling libraries could prove to be a better choice. By considering these aspects, you can effectively utilize the @click event handler and create well-informed and interactive Vue 3 applications.

Congratulations! You've now mastered VueJs's @click event handler. Remember to select the appropriate modifier based on your needs, and let your code come to life in perfect harmony. Happy coding! 🚀🌈

Keep on hacking!

Integrating Jest Testing into an Existing Vue 3 Project with ViteJs

⚡ Nirazan Basnet ⚡ — Fri, 07 Jul 2023 04:54:50 +0000

In my recent experience, I faced the challenge of integrating the Jest testing framework into an existing Vue3 js project that was built with Vite. I encountered difficulty finding helpful installation guides on various blogs. However, after multiple attempts and putting in a lot of effort, I eventually found a solution. In this blog post, I aim to provide a step-by-step installation guide that can assist others who may encounter the same challenge.

Jest Unit Testing 🧪
Jest, developed by Facebook, is a widely-used JavaScript testing framework. It is specifically designed for testing JavaScript applications, including frontend frameworks like React, Vue, and Angular, as well as backend Node.js applications. The core objective of Jest is to provide users with a user-friendly and comprehensive testing experience, achieved through its extensive feature set and inclusive built-in functionalities. You can find more information about Jest here.

Prerequisites 📋
Before proceeding, ensure that you have the following prerequisites in place:

Node.js (version 14 or above) and npm (Node Package Manager) installed on your machine.
Basic knowledge of Vue.js and the Vite build tool. If needed, you can refer to the documentation for Vue3js and Vite.

Step 1: Initialize Jest in Your Project 🚀

To begin, navigate to the root directory of your Vite + Vue 3 project using your preferred command-line interface. Execute the following command to install the necessary Jest packages:

Using yarn



yarn add jest jest-environment-jsdom babel-jest @babel/preset-env @vue/vue3-jest @vue/test-utils -D

Using npm



npm install --save-dev jest jest-environment-jsdom babel-jest @babel/preset-env @vue/vue3-jest @vue/test-utils

Step 2: Configure Jest ⚙️

Once the installation is complete, you need to configure Jest by creating a new file named jest.config.js in the root directory of your project. Include the following content in the file:



module.exports = {
    testEnvironment: "jsdom",
    transform: {
        "^.+\\.vue$": "@vue/vue3-jest",
        "^.+\\js$": "babel-jest",
    },
    testRegex: "(/__tests__/.*|(\\.|/)(test|spec))\\.(js|ts)$",
    moduleFileExtensions: ["vue", "js"],
    moduleNameMapper: {
        "^@/(.*)$": "<rootDir>/src/$1",
    },
    coveragePathIgnorePatterns: ["/node_modules/", "/tests/"],
    coverageReporters: ["text", "json-summary"],
    // Fix in order for vue-test-utils to work with Jest 29
    // https://test-utils.vuejs.org/migration/#test-runners-upgrade-notes
    testEnvironmentOptions: {
        customExportConditions: ["node", "node-addons"],
    },
}

Key findings from the above code,
The testEnvironment option is set to "jsdom", which specifies the test environment to be used. In this case, it utilizes JSDOM, a JavaScript implementation of the web standards that simulates a browser-like environment during testing.

The transform option defines how different file types are transformed during testing. Specifically, files ending with the .vue extension are transformed using @vue/vue3-jest, which is a Jest transformer designed for Vue 3 Single File Components (SFCs). JavaScript files (.js) are transformed using babel-jest.

The testRegex option sets a regular expression pattern to match test files. It searches for files located in the /tests/ directory or those with a .test.js or .spec.js extension. This pattern allows Jest to discover and run test files that match this criteria.

The moduleFileExtensions option specifies the file extensions that Jest should consider as module files. In this case, it includes .vue and .js extensions.

The moduleNameMapper option specifies how module imports should be resolved. It maps the commonly used @ alias in Vue projects to the src directory. For example, @/example will be resolved to /src/example.

The coveragePathIgnorePatterns option defines patterns of files or directories that should be ignored when calculating code coverage reports. In this case, it excludes files in the /node_modules/ and /tests/ directories.

The coverageReporters option specifies the reporters to be used for code coverage reporting. It uses the text reporter to display coverage information in the console and the json-summary reporter to generate a summary in JSON format.

The testEnvironmentOptions option provides additional options specific to the test environment. It sets the customExportConditions to ["node", "node-addons"], which is a workaround to make vue-test-utils work with Jest 29.

Step 3: Configure Babel Js 🔧

To configure Babel JS in your project, follow these steps:

Create a new file called babel.config.js in the root directory of your project.
Add the following code to the babel.config.js file:



module.exports = {
    env: {
        test: {
            presets: [
                [
                    "@babel/preset-env",
                    {
                        targets: {
                            node: "current",
                        },
                    },
                ],
            ],
        },
    },
}

The purpose of this code is to export a configuration object that specifies the Babel presets to be used when running tests in the test environment. The env property defines different environments and their corresponding configuration settings. In this case, the env.test.presets property specifies an array of Babel presets to be applied in the test environment.

These presets consist of a collection of Babel plugins and configurations bundled together for specific use cases. The @babel/preset-env preset is used to automatically determine the Babel transformations and polyfills required based on the target environment. In this example, the target environment is set to node: "current", which ensures that the code is transpiled to a version of JavaScript compatible with the current Node.js version used for testing.

Step 3: Update `package.json` file 📦

To update the package.json file, follow these steps:

Locate the "scripts" section in the package.json file.
Add the following line to the "scripts" section:



"scripts": {
        ...
        ...
        "test:unit": "jest"
},

In this case, the "test:unit" script is defined to run unit tests. The "jest" command is specified as the executable command or package to be executed when running the script. By setting it to "jest", the Jest testing framework will be used.

Step 4: Writing Your First Test ✍️

Now, it's time to write your first test case. I usually prefer to create a test file within the same component.

Create a new component called HelloWorld and also create a file called HelloWorld.spec.js.
Add the following code to the HelloWorld.spec.js file:

HelloWorld Component code



<template>
    <div>
        <div>
            <h1>
                {{ msg }}
            </h1>
            <p>...</p>
        </div>
    </div>
</template>

<script setup>
    defineProps({
        msg: {
            type: String,
            required: true,
        },
    });
</script>

HelloWorld Spec Test code



import HelloWorld from "./HelloWorld.vue"
import { mount } from "@vue/test-utils"

describe("HelloWorld", () => {
    it("renders properly", () => {
        const wrapper = mount(HelloWorld, { props: { msg: "Hello Jest" } })

        expect(wrapper.text()).toContain("Hello Jest")
    })
})

Step 5: Run the Tests 🏃‍♂️

To execute the tests, follow these steps:

Open your command-line interface.
Navigate to the root directory of your project.
Run the following command:



yarn unit:test

This command will initialize the Jest testing framework and run the tests.

🎉 🎉 Hooray and congratulations! 🥳 You've successfully installed Jest and set up unit testing for your Vite + Vue 3 project. 🚀 Now you can write and run tests to ensure the correctness and reliability of your Vue components. By embracing a test-driven development approach, you'll enhance the overall quality of your application and catch bugs early in the development cycle. 💪

Remember to craft comprehensive test cases that cover various scenarios and edge cases, extracting the maximum benefit from your unit testing efforts. Happy testing! 🎯 🧪

Keep on Hacking !!

Style Position Fixed in a better way

⚡ Nirazan Basnet ⚡ — Tue, 20 Jun 2023 04:28:43 +0000

The CSS property position: fixed has become widely popular due to its ability to provide developers with precise control over element positioning on web pages. This powerful attribute not only enhances user experiences but also opens up innovative design possibilities. In this blog post, we will dive into the concept of position: fixed in CSS and explore its various use cases in today's modern world.

Understanding

With the CSS property position: fixed, developers can position an element in relation to the browser window, irrespective of scrolling. Unlike other positioning methods like position: absolute or position: relative, which depend on the document flow, position: fixed ensures that the element remains fixed within the viewport.

We generally use position: fixed for creating sticky navigation bars, headers, and footers. It is also useful for floating elements like chat widgets or social media sharing bars that can be fixed to a specific corner of the screen.

Simple Usage

.fixed {
  position: fixed;
  left: 0;
  right: 0;
  background: #000;
  bottom: 0;
  z-index: 100;
}

The example mentioned is useful when we need fixed content that is independent of the app. However, challenges arise when we require fixed content that depends on its parent section.

As a frontend developer, designing advanced layouts with scrolling and fixed content functionality can be very complex. This complexity increases when the fixed content is dependent on the parent sections, making it difficult to achieve the desired results. This can be particularly challenging for dynamic layouts and responsive designs.

Ninja Trick for such situations

<section class="parent">
    <div class="fixed-child-content">
        <div class="inner">
            This is position fixed content.
        </div>
    </div>
</section>

.parent {
  max-width: 768px;
  width: 100%;
  ...
}

.fixed-child-content {
  position: fixed;
  bottom: 0;
  max-width: inherit;
  width: 100%;
  ...
}

In the provided code, we have defined a parent container with the class name "parent". The maximum width of this container has been set to 768 pixels, while its width has been set to 100%, allowing it to take up the entire available width.

For the child element with the class name "fixed-child-content", we have set the position to "fixed". This means that the element will be removed from the normal document flow and remain fixed within the viewport.

The key aspect of this code is setting the maximum width to "inherit" for the child element. This ensures that it will inherit the maximum width specified by its parent element, in this case, the "parent" class. Additionally, we have set the width to 100%, allowing the fixed element to take up the entire width of its container.

Overall, this approach allows the fixed content to match the maximum width of its parent container, providing flexibility in controlling the position of the fixed content.

Check out the DEMO

Please note that the fixed content should be a direct child of its parent section.

Difficulties and Challenges

In addition, there are several challenges and issues that can arise when using position: fixed.

Overlapping Content

One of the primary concerns with fixed positioning is the potential for overlapping content. If fixed elements are not positioned with consideration for the surrounding content, they can obstruct important information or render parts of the page inaccessible.

Responsive Design Limitations

Fixed elements may not behave as expected on smaller screens, leading to inconsistencies in visual design or functionality.

Scrollable Areas

Using position: fixed within scrollable areas, such as divs with overflow properties, can result in conflicts. The fixed element may not scroll with the rest of the content within the scrollable area, leading to a disjointed user experience.

Performance Impact

Rendering fixed elements can impact page performance, particularly on lower-end devices or when working with complex layouts. Browsers need to continuously re-render fixed elements as users scroll, which can reduce performance and increase CPU usage.

Limited Placement Flexibility

While position: fixed allows for precise element placement, it can also limit positioning flexibility. Fixed elements are restricted to the viewport and cannot be positioned outside of it. This limitation can restrict creative possibilities for design concepts or interactions that require elements to be positioned in non-standard locations.

Conclusion

👏👏 By coming this far I hope you can use this awesome trick to style your position fixed divs and sections. This method really helps you to understand more about CSS Position Fixed property. So, I suggest you give it a try on your project and enjoy it!

Feel free to share your thoughts and opinions and leave me a comment if you have any problems or questions.

Till then,
Keep on Hacking, Cheers

Easy way to build Outside Click Popup Component in Vue.js

⚡ Nirazan Basnet ⚡ — Fri, 26 May 2023 10:18:37 +0000

When developing a large application with multiple components, it is important to prioritize creating components that are customizable, scalable, and reusable. However, it is common to overlook implementing certain functionalities like outside click functionality for components such as popovers or popups. This can result in bugs that need to be fixed later on.

In this blog post, we will discuss how to create an outside click wrapper component in Vue.js. This component will enable users to open a popover by clicking on a specific element and close it by clicking anywhere outside the popover. We will analyze the provided code step by step to understand how it works and achieves the desired behavior.

Code Explanation

We begin by creating the PopupWrapper.vue component and utilizing the Composition API to build it. The Composition API is a feature that offers an alternative approach to organizing and reusing logic within Vue components. It works alongside the Options API, which was the primary API in Vue.js 2.

Step 1

<template>
  <div ref="customDiv">
    <div @click="toggle">
      <slot name="header"/>
    </div>

    <div v-if="showPopup" @click.stop>
      <slot name="content"/>
    </div>  
  </div>
</template>

To create an outside click popup component, we first assign a reference to a <div> element using ref="customDiv". This reference allows us to access the element in the component's JavaScript code. We utilize Slots to insert dynamic content into components from the parent component. In this scenario, the header and content slots will be provided by the parent component when using this popup component.

We also use the @click.stop directive to prevent the click event from propagating to parent elements. This ensures that clicking inside the popup content does not trigger the outside click behavior.

Overall, this template forms the foundation for an outside click popup component.

Step 2

<script setup>
  import { onMounted, onUnmounted, ref } from 'vue'

  const showPopup = ref(false)
  const customDiv = ref(null)

  const toggle = () => {
    showPopup.value = !showPopup.value
  }

  const handleClickOutside = (event) => {
    if (customDiv.value && !customDiv.value.contains(event.target)) {
      showPopup.value = false
    }
  }

  onMounted(() => {
    document.addEventListener("click", handleClickOutside)
  })

  onUnmounted(() => {
    document.removeEventListener("click", handleClickOutside)
  })
</script>

The provided code showcases the usage of the setup syntax of the Composition API, creating a more declarative approach to defining component logic. It utilizes the ref function to create reactive variables like showPopup and customDiv. The toggle function toggles the visibility of the popup by negating showPopup.value. The handleClickOutside function is crucial as it checks if a click occurred outside the component and hides the popup accordingly. The onMounted hook adds a "click" event listener to the document, triggering handleClickOutside, while the onUnmounted hook removes the event listener to prevent memory leaks. This code provides a comprehensive implementation of the outside click popup functionality in Vue.js.

How to use

Code Example

<template>
  <div id="app">
    <PopupWrapper>
      <template #header>
        <div class="popover">Open Popover</div>
      </template>
      <template #content>
        <div class="popover-content">This is a Popup Content</div>
      </template>
    </PopupWrapper>
  </div>
</template>

<script setup>
import PopupWrapper from './components/PopupWrapper.vue';
</script>

Overall, we have the template that consists of a root <div> element with the ID "app" serving as the Vue application's root. Inside this <div>, there is a PopupWrapper component that provides the outside click popup functionality. The PopupWrapper component contains two <template> elements: one for the header slot (#header) and one for the content slot (#content). The header slot includes a

element with the class "popover" and the text "Open Popover", which will be inserted into the header slot. Similarly, the content slot contains a element with the class "popover-content" and the text "This is a Popup Content", which will be inserted into the content slot.

Note: CSS Styling in this component is optional. You can style the code with your own preference.

DEMO

You can access the code here.

Additionally, you may refer to the following blog post here that provides detailed information about Vue custom directives and how you can utilize them to implement similar outside click functionality in your applications.

Conclusion

👏👏 In conclusion, the "Outside Click Popup Component Functionality on Vue.js" tutorial demonstrates how to create an interactive and reusable popup component with outside click detection using Vue.js and the Composition API. By following this tutorial, you can enhance your Vue.js applications with a convenient and user-friendly popup feature. I suggest you give a try on your project and enjoy it!

Feel free to share your thoughts and opinions and leave me a comment if you have any problems or questions.

Till then, Keep on Hacking, Cheers

Unleashing the Power of ReactJS for Chrome Extension Development

⚡ Nirazan Basnet ⚡ — Thu, 26 Jan 2023 10:10:22 +0000

Building a chrome extension may seem like a daunting task, but it is quite easy to implement. By following a guide, you will be able to create your extension in no time.

This tutorial will provide you with information on how to create a popup, use a content script, and work with chrome local storage, among other things.

Why Chrome extension?

Google Chrome extension is like a special tool that you can add to your Google Chrome web browser to make it do extra things! Just like how you can add different tools to a toolbox, you can add different extensions to your web browser.

For example, you might have an extension that blocks ads or an extension that helps you save pictures you find on the internet.

It's just like having a magic wand, you can add different spells to it and use it whenever you want.

Chrome Extension Setup with ReactJs

1. Create Manifest Json

First, we need to create manifest.json with version 3 which is the latest

{
    "name": "Chrome Extension With ReactJs",
    "description": "This is the boilerplate for the chrome extension with React",
    "version": "1.0.0",
    "manifest_version": 3,
    "icons": {
        "16": "logo.png",
        "48": "logo.png",
        "128": "logo.png"
    },
    "action": {
        "default_title": "Chrome Extension With React",
        "default_popup": "popup.html"
    },
    "options_page": "options.html",
    "content_scripts": [
        {
            "matches": ["https://www.google.com/"],
            "js": ["contentScript.js"]
        }
    ],
    "permissions": ["storage"]
}

Main metadata fields that need to understand

manifest_version: This field specifies which version of the manifest file format is being used.

permissions: This field lists the specific permissions that the extension requires in order to function, such as access to a user's browsing history or the ability to modify web pages.

content_scripts: This field lists the JavaScript files that should be injected into web pages to add functionality to the extension.

background: This field describes the background script that runs in the background when the extension is active.

browser_action or page_action: This field describes the icon that appears in the browser toolbar when the extension is active, and what happens when the user clicks on it.

options_page: This field describes the URL of the options page that appears when the user clicks on the extension's settings.

icons: This field contains the path to the icons that are used to represent the extension in the browser's UI.

web_accessible_resources: This field lists the resources that should be made available to web pages.

2. Install Webpack, Webpack CLI

yarn add webpack webpack-cli -D

Here is an example of a webpack configuration file, "webpack.config.js", that can be used to bundle your extension's code:

const path = require("path");
const CopyPlugin = require("copy-webpack-plugin");
const HtmlPlugin = require("html-webpack-plugin");
const tailwindcss = require("tailwindcss");
const autoprefixer = require("autoprefixer");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const Dotenv = require('dotenv-webpack');

module.exports = {
    mode: "development",
    devtool: "cheap-module-source-map",
    entry: {
        popup: path.resolve("src/popup/index.tsx"),
        options: path.resolve("src/options/index.tsx"),
        contentScript: path.resolve("src/contentScript/index.tsx"),
    },
    module: {
        rules: [
            {
                use: "ts-loader",
                test: /\.(tsx|ts)$/,
                exclude: /node_modules/,
            },
            {
                test: /\.css$/i,
                use: [
                    "style-loader",
                    {
                        loader: "css-loader",
                        options: {
                            importLoaders: 1,
                        },
                    },
                    {
                        loader: "postcss-loader", // postcss loader needed for tailwindcss
                        options: {
                            postcssOptions: {
                                ident: "postcss",
                                plugins: [tailwindcss, autoprefixer],
                            },
                        },
                    },
                ],
            },
            {
                type: "assets/resource",
                test: /\.(png|jpg|jpeg|gif|woff|woff2|tff|eot|svg)$/,
            },
        ],
    },
    plugins: [
        new Dotenv(),
        new CleanWebpackPlugin({
            cleanStaleWebpackAssets: false,
        }),
        new CopyPlugin({
            patterns: [
                {
                    from: path.resolve("src/static"),
                    to: path.resolve("dist"),
                },
            ],
        }),
        ...getHtmlPlugins(["popup", "options", "contentScript"]),
    ],
    resolve: {
        extensions: [".tsx", ".ts", ".js"],
    },
    output: {
        filename: "[name].js",
        path: path.join(__dirname, "dist"),
    },
    optimization: {
        splitChunks: {
            chunks(chunk) {
                return chunk.name !== "contentScript";
            },
        },
    },
};

function getHtmlPlugins(chunks) {
    return chunks.map(
        (chunk) =>
            new HtmlPlugin({
                title: "Chrome Extension with ReactJs",
                filename: `${chunk}.html`,
                chunks: [chunk],
            })
    );
}

Core functionality about webpack

entry: The entry point is the starting point for webpack to begin building the dependency graph for the application. It tells webpack where to start looking for code to bundle.
It can be a single file or an object of multiple files.

rules: The "rules" field is used to specify loaders that should be used to process certain types of files. These rules are used to transform different types of files, such as TypeScript, JSX, and CSS, into a format that the browser can understand.
Each rule has a "test" property that is used to match the files that should be processed by the loader and a "use" property that defines the loader that should be used.

plugins: Plugins are used to perform a wider range of tasks than loaders, such as bundle optimization, asset management, and injection of environment variables.
They are added to the config using the "plugins" field and they can be used to perform a wide range of tasks, like bundle optimization, asset management, and injection of environment variables.
Some examples of plugins are HtmlWebpackPlugin, CleanWebpackPlugin, and UglifyJsPlugin.

Reference: Visit Webpack

3. Install ReactJs and Typescript

For ReactJs

Run yarn add react react-dom

For Typescript

Run yarn add typescript ts-loader -D

ts-loader is the TypeScript loader for webpack.

Create a simple tsconfig.json file in the root directory

{
    "compilerOptions": {
        "experimentalDecorators": true,
        "jsx": "react",
        "module": "es6",
        "target": "es6",
        "moduleResolution": "node",
        "esModuleInterop": true,
        "incremental": true,
        "downlevelIteration": true
    },
    "include": ["src/**/*.ts", "src/**/*.tsx"],
    "exclude": ["node_modules"]
}

4. Setup the project folder

5. Create Popup Component

First, let's create an index.tsx file in the popup folder

import React from "react";
import { createRoot } from "react-dom/client";
import "../assets/css/tailwind.css";
import Popup from "./Popup";

function init() {
    const appContainer = document.createElement("div");
    document.body.appendChild(appContainer);

    if (!appContainer) {
        throw new Error("Cannot find appContainer");
    }

    const root = createRoot(appContainer);
    root.render(<Popup />);
}

init()

Popup.tsx

import React from 'react'

function Popup() {
    return (
        <div className='w-52 h-20'>
            <div>
                <h1 className='text-center p-5 text-xl'>This is a popup section</h1>
            </div>
        </div>
    )
}

export default Popup

To include the filename "popup" in the webpack configuration, we need to make the following changes in the webpack.config.js file:

entry
getHtmlPlugins()

6. Content Script

You can create a contentscript component that works similarly to a popup component by adding the corresponding file in the webpack.config.js file.

This will allow webpack to bundle and process the content script in the same way as it would the popup component, making it ready for use in the extension.

But here is the twist. You need to add the contentscript.js file in the manifest.json

"content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["contentScript.js"] //Path to contentScript.js
    }
  ],

In the above code, the field is defined as an array with a single object, which has the following properties:

matches: This property specifies the URLs that the content script should be injected into. The value of "" means that the script will be injected into all URLs, regardless of the domain.

js: This property specifies the JavaScript files that should be injected into the web pages. The value ["contentScript.js"] means that the file located at "contentScript.js" will be injected.

This configuration tells the browser to inject the content script into all URLs and the script will be the one located at "contentScript.js".

This allows the extension to run the JavaScript code on any webpage the user visits and make modifications to the web page and interact with the web page.

Reference: Content Script with Manifest v3

7. Chrome Storage

Chrome storage is a way to store data in the browser, which can be used to persist data across browser sessions. Chrome provides two types of storage options: "local" and "sync".

"local" storage: Data stored in local storage will only be available on the device where it was stored, and will not be synced across devices.

"sync" storage: Data stored in sync storage will be synced across all devices where the user is signed in to Chrome with the same account.

First, we need to add certain information in manifest.json

{
  "name": "Chrome Extension With ReactJs",
  ...
  "permissions": [
    "storage"
  ],
  ...
}

Below is the code example using chrome.storage API to store and retrieve data in local storage in the Popup React Component

function Popup() {
    const [value, setValue] = useState<string>('');

    const handleSave = () => {
        chrome.storage.local.set({ key: value }, () => {
            console.log('Value is set to ' + value);
        });
    }

    const handleLoad = () => {
        chrome.storage.local.get(['key'], (result) => {
            console.log('Value currently is ' + result.key);
            setValue(result.key);
        });
    }

    return (
        <div className='w-72'>
            <div className='p-4'>
                <h1 className='text-base mb-4 font-medium'>Chrome Extension with ReactJs</h1>

                <div className='mb-10'>
                    <input
                        value={value}
                        onChange={e => setValue(e.target.value)}
                        className="bg-gray-50 border border-gray-200 w-full rounded-lg px-4 py-2 text-black focus:outline-none mb-5" />

                    <div className='flex items-center justify-end'>
                        <button onClick={handleSave} className="bg-green-500 hover:bg-green-400 transition duration-300 px-6 py-2 rounded-md text-white text-center">
                            <span>Save</span>
                        </button>
                    </div>
                </div>

                <div className=''>
                    <p className='text-sm mb-2'>Local Storage value</p>
                    <div className='flex items-center space-x-2'>
                        <button onClick={handleLoad} className="bg-orange-500 hover:bg-orange-400 transition duration-300 px-6 py-2 rounded-md text-white text-center">Load</button>
                        <span className='text-lg font-semibold'>{value}</span>
                    </div>
                </div>
            </div>
        </div>
    )
}

Reference: Chrome Storage

8. Tailwind CSS

Run yarn add tailwindcss postcss autoprefixer -D

For webpack, we also need to install

yarn add postcss-loader style-loader css-loader -D

Create postcss.config.js file in the root directory

module.exports = {
    plugins: {
        tailwindcss: {},
        autoprefixer: {},
    },
};

Also, create tailwind.css file inside the src/assets/css folder and add

@tailwind base;
@tailwind components;
@tailwind utilities;

9. Build the file and Load it into `chrome://extensions/` in the Chrome browser

Run yarn build to bundle your code. It creates a "dist" folder, which will contain all the final files needed for your extension.

Go to "chrome://extensions" page from the URL.
Load your build file from the "dist" folder
Enable the developer mode.
Test your extension and make any necessary changes. Once you are satisfied, submit it to the Chrome Web Store for others to use.

10. Get the final code

You can find the final code for this project in a GitHub repository

Conclusion

Coming this far, creating a chrome extension with ReactJS can be a great way to add functionality to the browser and enhance the user experience. With the use of React, you can build a robust, maintainable, and scalable extension. It is important to understand the chrome extension API and how it works, as well as be familiar with webpack and manifest.json file

It is also important to note that Google has announced the Manifest V3 for chrome extension which will impact the way extensions work and change the way they interact with web pages. So, it's important to keep yourself updated with the latest changes and best practices.

👏👏 👏👏

I encourage you to try building your own chrome extension using ReactJS and see how it goes.

If you have any issues or questions, please don't hesitate to reach out and leave a comment. Additionally, I'd love to hear your thoughts and feedback on the project.

Till then,
Keep on Hacking, Cheers

Building a CRUD App with Next.js, React Query, React Hook Form, and Yup

⚡ Nirazan Basnet ⚡ — Wed, 04 Jan 2023 05:56:00 +0000

In this tutorial, you will learn how to build a CRUD (create, read, update, delete) app using Next.js, React Query, React Hook Form, and Yup.

You will learn how to use these tools to build a CRUD app that allows users to create, read, update, and delete items stored on a server. You will also learn how to use React Query to fetch and cache data, React Hook Form to manage forms, and Yup to validate form data.

Next.js

Next.js is a framework for building server-rendered React applications. It provides features such as automatic code splitting, optimized performance, and simple client-side routing.
For more information visit NextJs

ReactQuery

React Query is a library for fetching, caching, and updating asynchronous data in React apps. It is designed to be easy to use, lightweight, and intuitive, and it can help improve the performance and user experience of your app by reducing the number of network requests and optimizing the caching of data.
For more information visit React Query

React Hook Form

React Hook Form is a library for managing forms in React apps. It provides a simple and flexible API for handling form validation, submission, and other common form tasks, and it is designed to be easy to use with React functional components and the React Hooks API.
For more information visit https://react-hook-form.com/

Yup

Yup is a JavaScript object schema validator and object parser. It provides an easy-to-use, expressive, and powerful way to validate and transform data.

You can use Yup with React Hook Form to provide more advanced validation for your forms. To use Yup with React Hook Form, you can pass a Yup validation schema to the validationSchema option of the useForm hook.
For more information visit Yup Validator

Tutorial

First, let's set up our component for creating a new item. We'll use React Hook Form and Yup to handle form validation and submission:

import { useForm } from 'react-hook-form'
import * as Yup from 'yup'

const validationSchema = Yup.object().shape({
  name: Yup.string().required('Name is required'),
})

/* Create Item Form */
function CreateItemForm() {

  /* Hooks */
  const { handleSubmit, register, errors } = useForm({
    validationSchema,
  })

  /* HandleOnSubmit */
  const onSubmit = async (data) => {
    try {
      const res = await fetch('/api/items', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(data),
      })
      const newItem = await res.json()
      console.log(newItem) 
      // log the newly created item to the console
    } catch (error) {
      console.error(error)
    }
  }

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <label htmlFor="name">Name:</label>
      <input
        name="name"
        ref={register}
      />
      {errors.name && <span>{errors.name.message}</span>}
      <br />
      <button type="submit">Create Item</button>
    </form>
  )
}

In the above CreateItemForm component, we define a Yup validation schema that requires the name field to be filled out. We pass this validation schema to the useForm hook, and then use the errors object that is returned by the hook to display error messages to the user if the form is invalid.

Next, let's set up a component for reading a list of items. We'll use React Query to fetch the list of items from the server and cache the result:

import { useQuery } from 'react-query'

/* Fetch List of Items */
function ItemList() {
  const { data, error } = useQuery('items', () => 
    fetch('/api/items').then((res) => res.json())
  )

  if (error) return <div>Error: {error.message}</div>
  if (!data) return <div>Loading...</div>

  return (
    <ul>
      {data.map((item) => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  )
}

Now let's set up a component for updating an item. We'll again use React Hook Form and Yup to handle form validation and submission, and React Query to fetch the item data and update the cache when the item is successfully updated:

import { useForm } from 'react-hook-form'
import { useQuery, useMutation } from 'react-query'
import * as Yup from 'yup'

const validationSchema = Yup.object().shape({
  name: Yup.string().required('Name is required'),
})

/* Update Item Form */
function UpdateItemForm({ itemId }) {

  const { data: item, isLoading, error } = useQuery(
    ['item', itemId],
    () => fetch(`/api/items/${itemId}`).then((res) => res.json())
  )

  const [updateItem, { isUpdating }] = useMutation(async (data) => {
    const res = await fetch(`/api/items/${itemId}`, {
      method: 'PUT',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(data),
    })
    return res.json()
  })

  const { handleSubmit, register, errors } = useForm({
    defaultValues: { name: item.name },
    validationSchema,
  })

  const onSubmit = async (data) => {
    try {
      const updatedItem = await updateItem(data)
      console.log(updatedItem) // log the updated item to the console
    } catch (error) {
      console.error(error)
    }
  }

  if (error) return <div>Error: {error.message}</div>
  if (isLoading) return <div>Loading...</div>

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <label htmlFor="name">Name:</label>
      <input
        name="name"
        ref={register}
      />
      {errors.name && <span>{errors.name.message}</span>}
      <br />
      <button type="submit" disabled={isUpdating}>
        Update Item
      </button>
    </form>
  )
}

In the UpdateItemForm component, we define a **Yup validation schema **that requires the name field to be filled out. We pass this validation schema to the useForm hook, and then use the errors object that is returned by the hook to display error messages to the user if the form is invalid.

Finally, let's set up a component for deleting an item. We'll use React Query's useMutation hook to send a DELETE request to the server and update the cache when the item is successfully deleted:

import { useMutation } from 'react-query'

function DeleteItemButton({ itemId }) {
  const [deleteItem, { isDeleting }] = useMutation(async () => {
    const res = await fetch(`/api/items/${itemId}`, {
      method: 'DELETE',
    })
    return res.json()
  }, {
    onSuccess: () => {
      console.log('Item deleted!') 
      // log a success message to the console
    },
  })

  return (
    <button onClick={deleteItem} disabled={isDeleting}>
      Delete Item
    </button>
  )
}

useMutation (React Query)

useMutation is a hook provided by the react-query library that allows you to execute mutations (such as creating, updating, or deleting data) in your application. It returns an array with two elements: the mutation function, and an object containing the status of the mutation (e.g. loading, error, or success).

A simple example of how you might use useMutation:

import { useMutation } from 'react-query';

const [createUser, { status: createStatus }] = useMutation(
  async (formData) => {
    const response = await fetch('/api/users', {
      method: 'POST',
      body: JSON.stringify(formData),
    });
    return response.json();
  },
  {
    onSuccess: () => {
      console.log('User created successfully');
      refetch();
    },
  }
);

In this example, the createUser function is used to execute the mutation by sending a POST request to the /api/users endpoint. The createStatus variable contains the status of the mutation (e.g. loading, error, or success). The onSuccess option is used to specify a callback function that will be executed when the mutation is successful.

useQuery (React Query)

useQuery is another hook provided by the react-query library that allows you to fetch data in your application. It returns an object containing the data, a flag indicating whether the data is currently being fetched, an error object if an error occurred, and a function for refetching the data.

Example of how you might use useQuery:

import { useQuery } from 'react-query';

const { data: users, isLoading, error, refetch } = useQuery('users', async () => {
  const response = await fetch('/api/users');
  return response.json();
});

if (isLoading) return 'Loading...';
if (error) return 'An error occurred';

Here, the useQuery hook is used to fetch a list of users from the /api/users endpoint. The data property of the returned object contains the fetched data, the isLoading flag is true while the data is being fetched, and the error object contains any error that occurred. The refetch function can be called to manually refetch the data.

Conclusion

I hope that this tutorial has helped you understand how to build a CRUD app with Next.js, React Query, React Hook Form, and Yup. These tools are powerful and can help you create user-friendly, high-performance apps with minimal effort.

Remember to use Next.js to build server-rendered React apps, React Query to fetch and cache asynchronous data, React Hook Form to manage forms, and Yup to validate form data. With these tools in your toolbelt, you should have everything you need to build a CRUD app that meets the needs of your users.

If you have any questions or need further assistance, don't hesitate to ask!

Don't use 100vh for mobile responsive

⚡ Nirazan Basnet ⚡ — Wed, 04 May 2022 04:05:37 +0000

Generally, we use height:100vh for fullscreen layout which is easy hack and convenient way to get better design.

Example



.content {
   height: 100vh;
}

But when we test our design on actual device, we encounter several issues:

Mostly Chrome and Firefox browsers on mobile have got a UI (address bar etc) at the top.
On Safari it get's more tricky address bar is at the bottom.
Different browsers have different sized viewports
Mobile devices calc browser viewport as (top bar + document + bottom bar) = 100vh
Whole document is filled to the page using 100vh

Problems

On Chrome

Scrollbar issues has been detected. Bad user flow and difficult to navigate the content.

Note: I have also tested this issues on safari which makes more bad user flow

Solutions

Detect the height of the app by using JS

Setting the height of the page (using javascript) with the window.innerheight property.



const documentHeight = () => {
 const doc = document.documentElement
 doc.style.setProperty('--doc-height', `${window.innerHeight}px`)
}
window.addEventListener(‘resize’, documentHeight)
documentHeight()

Using, CSS Variable



:root {
 --doc-height: 100%;
}

html,
body {
 padding: 0;
 margin: 0;
 height: 100vh; /* fallback for Js load */
 height: var(--doc-height);
}

Here, documentHeight function sets new style property var('--doc-height') and includes current window height.

Final Results

Chrome Browser

Note: There is no any vertical extra scrollbar is appearing now also no issues on Safari too. The bottom address bar of safari is always on the bottom which makes good user flow to the website

Conclusion
👏👏 By coming this far I hope you can solve the mobile devices viewport issues. So, I suggest you give it a try on your project and enjoy it!

Feel free to share your thoughts and opinions and leave me a comment if you have any problems or questions.

Till then,
Keep on Hacking, Cheers

Forem: ⚡ Nirazan Basnet ⚡

Must-Know Features in Next.js 14: Top 20 Highlights Cutting-Edge Concepts to Supercharge Your Code

1. Turbopack (Beta): Lightning-Fast Development

2. Server Actions: Simplified Form Handling

3. Partial Pre-rendering (Preview)

4. Improved Image Component

5. App Router: Enhanced Routing and Layouts

6. Server Components: Improved Performance

7. Metadata API: Enhanced SEO

8. Improved Error Overlay

9. Built-in Font Optimization

10. Enhanced Middleware

11. Improved TypeScript Support

12. Automatic 404 Pages

13. Dynamic OG Image Generation

14. Incremental Static Regeneration (ISR) Improvements

15. Enhanced API Routes

16. Improved CSS Support

17. Enhanced Build Output

18. Improved Error Handling

19. Enhanced Static Export

20. Improved Documentation and Learning Resources

Conclusion

Solving Memory Issues with Lottie SVG Animations

Introduction

The Problem

Detailed Observations

Investigative Findings

Memory Usage Analysis

The Solution

Implementation Steps

Benefits Observed

Conclusion

Building a simple language switcher in a vue.js: Step-by-step tutorial 🌐

Step 1: Setting up Your Project Structure 📁

Step 2: Configuring vue-i18n 🛠️

Step 3: Creating the i18n.js File 📝

Step 4: Crafting a LanguageSwitcher Component 🔄

Key Functionalities:

Step 5: Updating the App.vue File 🌟

Step 6: Handling vue-i18n Legacy Console Error 🚫

Live Demo 🎮

Conclusion 🎉

Follow best rules while coding in Vue.js Projects

1. Make sure to use "key" when you're using "v-for."

2. Don't mix v-if and v-for

3. Choose component names with multiple words.

4. Naming Basics for Components​

5. How to Write Component Names in Templates​

6. Prop name casing​

7. Keep Component Templates Simple​

8. Using Shortcut Notations for Directives​

9. Use detailed prop definitions​

10. Connect Child Components to Parents

Conclusion 🎉🎭

TailwindCSS Awesomeness 😎: My Personal Features Spotlight

1. Dark Mode 🌒

2. Line-clamp out of the box 🔍

3. Group-hover and focus-within by default 🖱️

4. Extended arbitrary value support 📏

5. Before and after pseudo-element variants 🧙‍♂️

6. Gap and Space Between 🕳️

7. New line-height shorthand for font-size utilities 📝

8. Isolation 🧪

9. Divide Width, Color, and Style 📏🎨🖌️

10. Accent Color 🎨

11. CSS variables without the var() 🔄

12. Scroll Snap Align 🧭

13. Simplified RTL support with logical properties 🌐

14. Overscroll Behavior 🔄

15. Text overflow utility 📏

Conclusion

Learn @click event handler for VueJs 👊💥

Understanding the Basics 🌟

1. Simple Click Handling 🖱️

2. Passing Arguments ✨

3. Managing Event Behavior: Event Modifiers 🛠️

.stop Modifier - Preventing Event Propagation 🛑

.prevent Modifier - Preventing Default Behavior 🔒

.capture Modifier - Capturing Event on the Capture Phase 🎯

4. Naming Basics for Components

5. How to Write Component Names in Templates

6. Prop name casing

7. Keep Component Templates Simple

8. Using Shortcut Notations for Directives

9. Use detailed prop definitions

Step 3: Update `package.json` file 📦

9. Build the file and Load it into `chrome://extensions/` in the Chrome browser