Forem: Doan Trong Nam

A Developer's Guide to Unit Testing Nuxt 3 Server Routes

Doan Trong Nam — Thu, 03 Jul 2025 07:46:04 +0000

Testing is a critical part of building robust and reliable applications. While Nuxt 3 makes creating server routes incredibly simple, setting up a proper testing environment for them can seem a bit daunting. Fear not! With the power of vitest and @nuxt/test-utils, you can create a clean, efficient, and powerful testing suite for your server-side logic.

This guide will walk you through setting up unit tests for your Nuxt 3 server routes, from initial configuration to mocking dependencies and writing comprehensive tests.

1. Configuring Vitest for Your Nuxt Environment

The first step is to ensure vitest knows how to run your tests within a Nuxt context. This is crucial for auto-imports and other Nuxt-specific features to work correctly in your test files.

The @nuxt/test-utils package provides a handy defineVitestConfig function that simplifies this process. Here’s what a typical vitest.config.ts looks like:

// vitest.config.ts
import { defineVitestConfig } from '@nuxt/test-utils/config'

export default defineVitestConfig({
  test: {
    // Enable the Nuxt environment.
    environment: 'nuxt',
    environmentOptions: {
      nuxt: {
        // You can specify a DOM environment for components testing if needed.
        domEnvironment: 'happy-dom',
      },
    },
  },
})

By setting environment: 'nuxt', you're telling Vitest to use a custom environment that boots up a Nuxt instance, making all its magic available to your tests.

2. Creating a Global Test Setup File

To avoid repetitive mocking in every test file, it's best to create a global setup file. Vitest can be configured to run this file before your test suite starts. A common location for this is test/setup.ts.

This file is the perfect place to mock global utilities, especially the h3 functions that power Nuxt's server routes (defineEventHandler, readBody, etc.).

Here’s how you can create a reusable utility to mock h3 functions:

// test/setup.ts
import type { H3Event, EventHandlerRequest } from 'h3'
import { vi } from 'vitest'

type Handler = (event: H3Event<EventHandlerRequest>) => Promise<unknown>

export function useH3TestUtils() {
  const h3 = vi.hoisted(() => ({
    defineEventHandler: vi.fn((handler: Handler) => handler),
    readBody: vi.fn(async (event: H3Event) => {
      if (event._requestBody && typeof event._requestBody === 'string') {
        return JSON.parse(event._requestBody)
      }
      return event._requestBody || {}
    }),
    getRouterParams: vi.fn((event: H3Event) => event.context?.params || {}),
    getQuery: vi.fn((event: H3Event) => event.context?.query || {}),
  }))

  // Stub the global functions to support auto-imports in your tests
  vi.stubGlobal('defineEventHandler', h3.defineEventHandler)
  vi.stubGlobal('readBody', h3.readBody)
  vi.stubGlobal('getRouterParams', h3.getRouterParams)
  vi.stubGlobal('getQuery', h3.getQuery)

  return h3
}

Key Concepts:

vi.hoisted(): This lifts the mock to the top of the module, ensuring that any subsequent imports of h3 receive our mocked version.
vi.stubGlobal(): Since Nuxt relies on auto-imports, these functions are effectively global. This function replaces the global instance with our mock, making it available seamlessly in our test files.

3. Mocking the H3Event Object

Your server handlers receive an event object that contains all the request details (body, params, query, headers). To test your handlers effectively, you need a way to create mock versions of this event.

Let's create a helper function for this in test/mocks/h3-event.ts.

// test/mocks/h3-event.ts
import type { H3Event } from 'h3'
import { merge } from 'lodash'

export const createMockH3Event = (
  partialEvent: Partial<H3Event> & {
    body?: Record<string, any>
    params?: Record<string, any>
    query?: Record<string, any>
  }
): H3Event => {
  const event = {
    node: {
      req: {
        headers: { 'content-type': 'application/json' },
        method: 'POST',
      },
    },
    context: {
      params: partialEvent.params || {},
      query: partialEvent.query || {},
    },
    // Our mock readBody function will look for this property
    _requestBody: partialEvent.body,
  } as unknown as H3Event

  // Deeply merge the partial event to allow for overrides
  return merge(event, partialEvent) as H3Event
}

This powerful helper lets you easily simulate any request scenario. Need to test a POST request with a specific body? Or a GET request with query parameters? This function has you covered.

4. Writing Your First Server Route Test

With the setup complete, you're ready to write a test. Let's use an example API route that calls an external service. We'll look at test/server/api/test.post.test.ts.

// test/server/api/test.post.test.ts
import { describe, expect, vi, it, beforeEach } from 'vitest'
import { mockNuxtImport } from '@nuxt/test-utils/runtime'

// Import our test utilities
import { useH3TestUtils } from '~/test/setup'
import { createMockH3Event } from '~/test/mocks/h3-event'

const { defineEventHandler } = useH3TestUtils()

describe('POST /api/test', async () => {
  // 3. Dynamically import the handler *after* mocks are set up
  const handler = await import('~/server/api/test.post')

  it('is registered as an event handler', () => expect(defineEventHandler).toHaveBeenCalled())

  it('return success response for valid request', async () => {
    const event = createMockH3Event({
      body: {
        // Simulate a valid request body
      },
    })

    const response = await handler.default(event)

    expect(response).toEqual({ data: 'mocked data' })
  })
})

5. Mocking Built-in Composables

In Nuxt 3, many server-side functionalities are encapsulated in composables. For example, useRuntimeConfig is commonly used to access environment variables or configuration settings.
To mock these composables, you can use mockNuxtImport from @nuxt/test-utils/runtime. This allows you to provide a mock implementation that your handler can use during tests.

// test/server/api/test.post.test.ts
import { vi } from 'vitest'
import { mockNuxtImport } from '@nuxt/test-utils/runtime'

const { useRuntimeConfigMock } = vi.hoisted(() => ({
  useRuntimeConfigMock: vi.fn(() => ({
    gemini: {
      apiKey: 'test-api-key',
    },
  })),
}))
mockNuxtImport('useRuntimeConfig', () => useRuntimeConfigMock)

6. Mocking Custom Functions

If your server route relies on custom functions (like fetching data from an external API), you can mock these as well. This allows you to control the responses and test how your handler behaves under different scenarios.

// test/server/api/test.post.test.ts
import { vi } from 'vitest'

// Mock custom functions
const { formatDate } = vi.hoisted(() => ({
  formatDate: vi.fn(),
}))

vi.mock('~/server/utils/datetime', () => ({
  formatDate,
}))

describe('POST /api/test', () => {
  it('formats date correctly', async () => {
    formatDate.mockReturnValue('2023-10-01')

    const event = createMockH3Event({
      body: { date: '2023-10-01T00:00:00Z' },
    })

    const response = await handler.default(event)

    expect(response).toEqual({ formattedDate: '2023-10-01' })
    expect(formatDate).toHaveBeenCalledWith('2023-10-01T00:00:00Z')
  })
})

Breakdown of the Test File:

Mock Composables: Use mockNuxtImport from @nuxt/test-utils/runtime to provide a mock implementation for server-side composables like useRuntimeConfig.
Initialize Utilities: Call the test utility functions (useH3TestUtils, etc.) at the top level to set up the global mocks.
Dynamic Import: Import your API handler inside the describe block. This is critical to ensure that all your mocks are in place before the handler module is loaded.
Simulate Requests: Use createMockH3Event to craft the specific request context for each test case.
Assert: Make assertions against the handler's return value and check if your mocked functions were called with the expected arguments.

Follow-up Steps

In next article, we will explore how to:

Mock third-party libraries and services.
Mock database connection

Conclusion

By combining a global setup file, a flexible event factory, and targeted mocking, you can build a comprehensive and maintainable test suite for your Nuxt 3 server routes. This setup not only isolates your handlers for true unit testing but also provides a clear and repeatable pattern for testing all your server-side logic.

Happy testing!

References

Demo

Github Repository

Wrapping PrimeVue Components: Tips for a Better Developer Experience

Doan Trong Nam — Mon, 24 Mar 2025 04:19:13 +0000

PrimeVue is a fantastic UI library for Vue.js developers, offering a rich set of components that are both customizable and easy to integrate. However, as your application grows, you might find yourself repeating the same configurations—like base styles, default props, or custom logic—across multiple instances of PrimeVue components. This is where wrapping PrimeVue components into your own custom components becomes a game-changer. In this blog post, I’ll walk you through why wrapping is beneficial, a common issue you might face with VSCode’s prop autocompletion, and how to fix it for a smoother development experience.

Why Wrap PrimeVue Components?

When you use PrimeVue components directly in your templates, they work great out of the box. But in a real-world application, you often need more control and consistency. Here are a few reasons why wrapping PrimeVue components into your own custom components makes sense:

Centralized Base Styles PrimeVue components come with their own default styles, but your app might require a consistent look and feel that aligns with your design system. By wrapping a component (e.g., p-button from PrimeVue), you can apply custom classes or styles globally without repeating them in every template.

<!-- Before wrapping -->
<p-button label="Click Me" class="my-custom-button" />

<!-- After wrapping -->
<app-button label="Click Me" />

<!-- ~/components/app/button.vue -->
<template>
  <p-button class="my-custom-button" />
</template>

Default Props for Consistency If your app uses a PrimeVue component with certain props repeatedly (e.g., size="small" or severity="success" for a p-button), you can set these as defaults in your wrapped component. This reduces boilerplate code and ensures consistency.

<!-- ~/components/app/button.vue with default props -->
<template>
  <p-button rounded size="large" />
</template>

Custom Logic or Behavior Wrapping allows you to add custom logic—like event handlers, computed properties, or validation—specific to your app’s needs, all while keeping the original PrimeVue component intact.

By wrapping PrimeVue components, you create reusable building blocks tailored to your project, making your codebase cleaner and more maintainable.

The Problem: VSCode Stops Suggesting Props

While wrapping is great, it introduces a small hiccup: VSCode’s autocompletion for props might stop working. When you use a PrimeVue component directly (e.g., <p-button>), tools like Vue - Official Extension (Vue’s language support extension for VSCode) recognize it and suggest all available props (label, icon, loading, etc.). But once you wrap it in <app-button>, VSCode no longer knows what props the underlying Button component accepts because app-button is just a custom component to the editor.

For example:

Typing label here won’t trigger prop suggestions, and you might need to manually refer to PrimeVue’s documentation. This slows down development and can be frustrating, especially for larger teams or complex components.

The Solution: Add Prop Definitions
To restore VSCode’s prop autocompletion, you need to tell Vue - Official Extension what props your wrapped component accepts. This can be done by defining the props in your custom component and leveraging TypeScript or Vue’s defineComponent for better tooling support. Here’s how:

Step 1: Define Props in Your Wrapped Component
Update app/button.vue to explicitly declare the props it accepts, matching the props of the underlying PrimeVue Button component.

<!-- ~/components/app/button.vue -->
<template>
  <p-button v-bind="props" />
</template>

<script lang="ts" setup>
import type { ButtonProps } from 'primevue'

interface AppButtonProps extends /* @vue-ignore */ ButtonProps {}

const props = defineProps<AppButtonProps>()
</script>

Step 2: Add slot if needed

<!-- ~/components/app/button.vue -->
<template>
  <p-button v-bind="props">
    <template #icon v-if="$slots.icon">
      <slot name="icon" />
    </template>
    <slot />
  </p-button>
</template>

<script lang="ts" setup>
import type { ButtonProps } from 'primevue'

interface AppButtonProps extends /* @vue-ignore */ ButtonProps {}

const props = defineProps<AppButtonProps>()
</script>

Step 3: Add default prop if needed by withDefaults()

<!-- ~/components/app/button.vue -->
<template>
  <p-button v-bind="props">
    <template #icon v-if="$slots.icon">
      <slot name="icon" />
    </template>
    <slot />
  </p-button>
</template>

<script lang="ts" setup>
import type { ButtonProps } from 'primevue'

interface AppButtonProps extends /* @vue-ignore */ ButtonProps {
  rounded?: boolean
}

const props = withDefaults(defineProps<AppButtonProps>(), {
  rounded: true
})
</script>

Step 4: Verify Autocompletion
With Vue - Official Extension installed in VSCode (ensure you have the Vue Official extension), try using in a template:

<app-button label="Click Me" />

Now, when you type <app-button , VSCode will suggest label, icon, loading, ... just like it would for the original <p-button> component.

Wrapping Up

Wrapping PrimeVue components is a powerful technique to enforce consistency, reduce repetition, and tailor components to your app’s needs. While it might break VSCode’s prop autocompletion initially, defining props explicitly (with or without TypeScript) brings it back and keeps your workflow smooth. Next time you’re building with PrimeVue, give wrapping a try—it’s a small investment that pays off in the long run!

What’s your favorite PrimeVue component to customize? Let me know in the comments!

This blog post is concise, practical, and follows your requested structure. You can tweak the examples or tone to match your style before posting it on Dev.to. Let me know if you’d like any adjustments!

Example source code: https://github.com/1337NamNori/primevue-wrap-tutorial

How to Create a Duration-Based Progress Bar with PrimeVue ProgressBar

Doan Trong Nam — Tue, 11 Feb 2025 07:11:29 +0000

I used to struggle with creating a progress bar using PrimeVue's ProgressBar component that smoothly runs from 0% to 100% over a specified duration. However, after reading the PrimeVue documentation, I couldn't find any built-in option to achieve this. So, a bit of trickery is needed here.

First, let's check out the documentation for this component: PrimeVue ProgressBar
We can see that we need to pass a prop called :value, which is a number between 0 and 100 representing the progress percentage.

Next, let's take a look at the Dynamnic
section of the documentation.

Here, we can see that whenever the value of the progress bar changes, it takes some time for the old value to transition to the new one. So, how long does this transition take?

Let's inspect this element:

Notice that there is a CSS property transition: width 1s ease-in-out;. This means it takes 1 second for the progress bar to update its value. In other words, when changing the value from 0% to 100%, it takes 1 second to complete. So, the default duration for this component is 1 second.

To customize this duration, we simply need to modify the transition-duration property of the progress-bar-value element inside the ProgressBar component. We can achieve this using PrimeVue's passthrough feature:

<template>
  <ProgressBar :value="value" :pt:value:style="{ 'transition-duration': '3s' }" />
</template>

Now, simply update the value to see the effect.

Final Result:

// ~/components/app/progress-bar.vue
<template>
  <p-progress-bar
    v-bind="props"
    :pt:value:style="{ 'transition-duration': props.duration }"
  />
</template>

<script setup lang="ts">
import type { ProgressBarProps } from 'primevue';

// define prop type to get suggestion in VSCode
interface AppProgressBarProps extends /* @vue-ignore */ ProgressBarProps {
  duration?: string;
}

const props = withDefaults(defineProps<AppProgressBarProps>(), {
  duration: '3s',
});
</script>

StackBlitz: https://stackblitz.com/edit/nuxt-starter-cdnmfmvv?file=components%2Fapp%2Fprogress-bar.vue

Is the ellipsis in your Japanese font centered in the line? Here is the solution.

Doan Trong Nam — Tue, 18 Jun 2024 03:17:32 +0000

Hey fellow software developers, have you ever worked with Japanese fonts (or other special fonts) and encountered the issue where the ellipsis in line breaks is centered? For example, as shown below:

Code
Here are 2 solutions for you:

1. Cut the string and add 3 dots.

The interesting thing is that only the browser's ellipsis has this issue, while typing three dots manually doesn't cause any problems. Therefore, we can cut the string at a fixed number of characters and then add three dots. However, I don't recommend this approach. Its advantage is that it will definitely work. But the disadvantage is that the length of each character varies, so if we cut at the same number of characters, the items will have different lengths. This makes our webpage look unattractive. Moreover, if the technical requirement is to cut at a certain number of lines, it is difficult to determine the number of characters to cut to fit the number of lines. Not to mention other issues such as different devices, different screen widths, etc.

2. Replace the font of the ellipsis.

Here is the solution

@font-face {
  // Font name, you can name it whatever you want
  font-family: 'ellipsis-font';

  // get the font locally, you can replace it with any font you want 
  src: local('Times New Roman');

  // only override the ellipsis, here is the unicode for the ellipsis
  unicode-range: U+2026;
}

.your-text-class {
  font-family: 'ellipsis-font', ... // insert your default font-family here
}

Result:

Code

The advantage of this method is that the length is cut very flexibly, and you can combine it with -webkit-line-clamp to customize the number of lines. The disadvantage is that if the user's local machine doesn't have the font you used, the ellipsis will still appear centered in the line.

As a Developer, Sometimes You Should Play the Role of a Tester

Doan Trong Nam — Wed, 10 Apr 2024 04:36:29 +0000

What is the equivalent of a Software Tester, Quality Analyst, or Quality Assurance Engineer, etc in your country? In Vietnam, we often shorten it to "tester".

Why do I say that developers should also play the role of a tester?

"Playing the role of a tester" here doesn't just mean testing. Because obviously, after coding, testing is a must. But "playing the role" here means you have to approach the problem with the mindset of a tester.

Recently, in the project team I am participating in, we have added a new step to the developer's workflow. We have to write test cases (which was already required before), record videos or take screenshots to prove that we have tested, and the tester will review the test cases before we submit pull requests for the leader to review. Some people may find it redundant and time-consuming, especially when coding is already tiring. However, I believe it is necessary.

Firstly, for the project, it helps to ensure better output quality.

Secondly, for individual developers, I find myself equipped with more skills and mindsets to develop myself.

That's when I realized the importance of playing the role of a tester. So how does a developer — someone always striving to build — embrace the mindset of a tester — someone always looking to break things?

1. Drop the mindset of "Users wouldn't do that bullsh*t anyway."

Most developers tend to have the mindset of "happy case first." This means that we always start by building from the successful scenarios of a feature, and only then consider exceptions such as validation, third-party errors, etc. Testers, on the other hand, always think from the perspective of error cases first. Whether it's entering negative numbers into a money input, entering 31/2 as a date, or even the most ridiculous scenarios that we might consider foolish.
Most testers in my country are women. And I often joke that because women can come up with anything, that's why they work as testers =)))

Due to this contrast, sometimes we overlook slightly daunting cases. Just imagine if you approached the problem like a tester, you could cover more edge cases and prevent them from turning into bigger issues. Moreover, it would also avoid unnecessary arguments between the two sides and preserve the harmony 😝

2. Test all related parts, even if you're 100% sure you haven't touched the previous code

Yeah, sometimes what you think is certain turns out to be uncertain. With the human factor involved, achieving 100% certainty becomes even more challenging. Who knows if you didn't accidentally modify a utility or export a function to be used elsewhere? Who knows if you checked which screens call the API you've modified?

Sometimes, you don't even trust yourself, so don't wonder why testers don't trust you =)) I've witnessed a colleague arguing with a tester for half an hour just because he was asked to test related parts. He insisted that he didn't change anything in that logic, so there was no need to test it. And he said if there was a bug in that part, it was because of the previous coder, not him. He was also right. But if he had known from the beginning that he needed to test related parts, it would have saved a lot of time arguing. And even if he found out that the bug wasn't caused by him, what's the harm in that??? It still improves the project.

3. If possible, write test cases.

If you have time, write test cases in Google Sheets or Excel like testers usually do. Self-testing is an indispensable process in software development. Imagine every time you fix a bug reported by the testing team, you need to self-test a complete business flow corresponding to the scope of your task. If you have written careful test cases beforehand, self-testing after each fix will be faster.
A good test case file should include:

ID or sequence number
Description
Pre-condition
Procedure
Expected outcome
Test result

4. Take some time to learn about security.

As a developer, you don't need to have all the skills of a security expert. However, you need to grasp some basic techniques to protect your website.

Sometimes testers are just doing their job. Just like us, they also contribute to making the final product as perfect as possible. But sometimes we think they are finding faults in us. No no, there's no personal attack here. The conflict between developers and testers is a perennial topic. If each side knows how to put themselves in the other's shoes and set aside their egos, then unnecessary conflicts can be avoided. Peace, I'm out.

Forget the default Terminal! Warp is here now.

Doan Trong Nam — Fri, 22 Mar 2024 09:29:41 +0000

If you're tired of customizing your terminal, then Warp is here to save you. It's a terminal with integrated utilities, themes, and especially AI. Yes, an AI-integrated terminal has emerged.
Debuting in 2023, Warp impressed with its default interface being so beautiful without any customization needed. If you've ever had to install a theme for zsh by editing text files, you'll understand how annoying it can be. Warp allows you to change themes via the UI seamlessly.

Furthermore, have you ever had to Google how to install auto-complete and auto-suggest plugins for zsh? I know because I've been there too. But now, everything is available immediately when you install Warp. NO-ADDITIONAL-STEPS-REQUIRED. You can use the shortcut Ctrl + R to open the command search popup.

Furthermore, as I mentioned earlier, Warp integrates AI. You just need to type # into the terminal, and Warp will activate AI. The Free package of Warp allows you to send 20 AI requests per day.

Personally, I find this to be a useful feature for me. Having to open Google or ChatGPT while working in the Terminal to find commands is quite an unpleasant developer experience and disrupts my flow.

Warp is currently available only for MacOS and Linux. The developer has not announced when it will be released for Windows. Stay tuned to read the article about Warp on Windows as soon as it's released.

Do you know that 0.1 + 0.2 is not equal to 0.3?

Doan Trong Nam — Wed, 20 Mar 2024 02:28:05 +0000

Yes, this is a well-known issue in JavaScript (and many other programming languages) that use binary floating-point numbers. The problem arises from the fact that some numbers cannot be represented exactly in binary floating point, which leads to small rounding errors.
Here's an example:

console.log(0.1 + 0.2);  // Outputs: 0.30000000000000004

Floating-point numbers are a way of representing real numbers in computer systems. They are used to approximate real numbers, but they can't always do it perfectly due to the way they are stored in memory.

In many programming languages, including JavaScript, floating-point numbers are represented according to the IEEE 754 standard. This standard represents numbers in binary, which means they are expressed as a sum of powers of 2.

While some numbers can be represented exactly in this system (like 0.5, which is 2^-1), others cannot. For example, the decimal number 0.1 cannot be represented exactly as a finite binary fraction. In binary, 1/10 is an infinitely repeating fraction.

When you perform arithmetic operations with these approximated numbers, the small errors can accumulate, leading to unexpected results. For example, in JavaScript, the expression 0.1 + 0.2 doesn't exactly equal 0.3.

This is not a flaw in the programming languages themselves, but a consequence of using binary floating-point numbers. To deal with this, programmers often use special libraries for high-precision arithmetic, or use techniques to compare floating-point numbers with a certain tolerance, rather than expecting them to be exactly equal.

Yes, there are libraries in JavaScript that can help with precision issues related to floating point arithmetic. One of them is decimal.js.

Here's an example of how you can use it:

First, install the library:

npm install decimal.js

Then, use it in your code:

const Decimal = require('decimal.js');

let result = new Decimal(0.1).plus(new Decimal(0.2));

console.log(result.toString());  // Outputs: 0.3

This library allows for much more precise arithmetic than JavaScript's native Number type. Try Playground

Powerful Date tricks in JavaScript that don't require any external libraries

Doan Trong Nam — Tue, 19 Mar 2024 08:02:22 +0000

Imagine you have a pet project, and its feature requires a few date-time calculation functions. However, it's too small, and you don't want to install additional dependencies. Or maybe your client doesn't want to use libraries due to security concerns or performance optimization. Or simply, you don't want to decide between moment.js, dayjs, or date-fns. Then this article is for you. Why not try plain JavaScript?

1. Get the First and Last Day of the Month:

You can get the first and last day of the month using Date methods.


const getFirstDayOfMonth = (
  date = new Date()
) => new Date(date.getFullYear(), date.getMonth(), 1);
const getLastDayOfMonth = (
  date = new Date()
) => new Date(date.getFullYear(), date.getMonth() + 1, 0);

2. Calculate the Difference Between Two Dates:

You can calculate the difference between two dates using subtraction. This will give you the difference in milliseconds, which you can convert to other units as needed.

const date1 = new Date('2024-03-11');
const date2 = new Date('2024-01-01');
const differenceInMilliseconds = date1 - date2;

3. Formatting Dates:

You can format dates in various ways using Date methods.

const date = new Date();
const formattedDate = `${date.getDate()}-${date.getMonth() + 1}-${date.getFullYear()}`;

4. Add/Subtract Days from a Date:

You can add or subtract days from a date by manipulating the milliseconds.

const date = new Date();
const numberOfDaysToAdd = 7;
date.setDate(date.getDate() + numberOfDaysToAdd);

5. Check if a Year is a Leap Year:

You can check if a year is a leap year by checking if it's divisible by 4, unless it's divisible by 100 but not 400.

function isLeapYear(year) {
    return (year % 4 === 0 && year % 100 !== 0) || (year % 400 === 0);
}

6. Get Current Unix Timestamp:

You can get the current Unix timestamp by using Date.now().

const timestamp = Date.now();

These are just a few examples of what you can do with dates in JavaScript without any external libraries. JavaScript's built-in Date object provides a lot of functionality for handling dates and times.

What I've Learned About Git from Senior Colleagues (Part 2 - thoughful commit)

Doan Trong Nam — Fri, 15 Mar 2024 09:34:21 +0000

Welcome back to part 2 of the series 'What I've Learned About Git from Senior Colleagues.' In this installment, I want to discuss the importance of writing good commit messages. 'But can't I just write anything?' Well, technically, you can commit with any message :) . But have you ever seen a commit history that looks like this?

72ae8b3 Fixed bug
7f48a12 Refactor code
35b9f78 Update file
a9c0e17 Implement new feature
de97c5f Fixed a minor typo in the README.md file, added descriptive comments to improve code readability in main.py, and optimized database query performance by implementing caching
b3fd247 Completed task #123
8a71e6f Fixed bug reported by QA team
f2a6b41 Merge branch 'feature-branch' into 'main'

OK, 'fix bug' fixes which bug exactly? 'Refactor code' refactors which specific code section? 'Update file' updates which file? 'Implement new feature' is about what feature exactly? And do I really need to know every detail when you write 2983982374234 characters in a commit message?
If it's a feature you developed, you might still remember it when you look back a few weeks later. But a few months later? Who knows. Not to mention, others might need to find your commit too. That's why writing meaningful commits is essential. I was fortunate that the first project I joined enforced strict rules for all commits. However, the purpose of this article is not to force you to follow my rules. Because each project may have different commit guidelines. But even in projects with no specific rules, you still need to write meaningful commit messages.
At the end of this article, I'll share some rules from the projects I've been involved in. But for now, I'll highlight the core principles of writing meaningful commit messages.

1. The rules of a great Git commit message

1.1. Don't make the subject too long

Each project will have a specific limit for the commit subject, which could be 50, 70 characters, ... But even if the project doesn't specify, I think you should limit your commit subject to under 70 characters.
Look at this. Do you want your project to look like this?

The GitHub UI will truncate your message at 72 characters. Therefore, you need to summarize your code changes as briefly as possible. If your commit handles many changes and you cannot summarize them, you can try splitting that one commit into many smaller commits.

1.2. Capitalize the first letter of the subject.

Try:

Update: logic authorize at post page

Instead of:

~~update: logic authorize at post page~~

1.3. Don't end your commit subject with a period.

The subject is just a title, and titles don't need periods.
Try:

Update: logic authorize at post page

Instead of:

~~Update: logic authorize at post page.~~

These are the core principles to write good commit messages. Some places recommend writing a commit body as well, but for me, that's optional. You can include it in the description of the pull request.

2. Some rules from the projects I've been involved in.

I was fortunate that the first time I joined a real project, it enforced strict rules for commit messages. These could be suggestions for you on how to set rules for your own project.

2.1. [Action]: [FE/BE] / [Subject]

Action could be:

Add:
Update:
Delete:
Fix:

Some examples:

Add: BE / Add API to get post
Update: FE / Modify button's style on login form

2.2. [emoji] [Subject]

You can see emoji list here
Some examples:

:+1: Update API to get notifications -> GitHub UI will show 👍 Update API to get notifications
:up: Upgrade version DB -> GitHub UI will show 🆙 Upgrade version DB

3. Using AI to generate commit messages.

VS Code has integrated the feature of using AI to generate commit messages based on your code changes. For example, if you have GitHub Copilot, you can go to the Version Control tab, click on the Copilot icon to see the result.

Additionally, you can use other AI services such as ChatGPT 3.5, ChatGPT 4.0, etc., via the GitLens extension. I will have another article that provides more detailed instructions. Stay tuned for more updates and follow along for the latest insights.

In summary, writing meaningful commit messages is essential for effective version control. By following key principles like keeping messages concise and capitalizing the first letter, developers can enhance collaboration and project comprehension. Mastering this skill leads to clearer histories, smoother workflows, and improved professionalism. Happy coding!

Reference:

What I've Learned About Git from Senior Colleagues (Part 1 - git stash)

Doan Trong Nam — Tue, 12 Mar 2024 06:40:38 +0000

Welcome to the Git Essentials Series!

If you're an intern or fresher eager to bridge the gap between Git theory and real-world application, you're in the right place. In this series, I'll be sharing firsthand stories and insights gleaned from my journey, learning from seasoned colleagues since the beginning of my career. From navigating complex merge conflicts to mastering the art of efficient collaboration, each post will offer practical wisdom and valuable lessons learned along the way. Get ready to embark on this Git adventure with me, as we explore the depths of version control and unlock the secrets to seamless project management. Stay tuned for the first installment, where we'll get acquainted with git stash.

1. My Story

When I first started learning Git, I found it easy to apply basic commands like git add, git commit, git pull, git push, and so on. Perhaps you did too. I thought that knowing just these commands would be enough for working professionally, but reality proved to be more challenging. Once, my mentor wanted me to fix some comments on my pull request for feature A that I had submitted earlier. However, I was working on the branch for feature B. I couldn't commit these messy code changes. That's when he enlightened me about git stash.
Let's get started! Remember that the examples in this blog use git version 2.39.3

2. What is git stash? And how to use?

When you run the command git stash --help, the git documentation says:

Use git stash when you want to record the current state of the working directory and the index, but want to go back to a clean working directory. The command saves your local modifications away and reverts the working directory to match the HEAD commit.

Still a bit hard to understand, huh? Uh huh? So, imagine your code changes are looking like this.

And after running git stash in the terminal, it looks like this.

WTF??? Did your code just disappear??? No! It's been saved in the stash, and your code has reverted to a clean state as if you haven't made any changes. So now, where can you find that piece of code you just had? Try running git stash list in the terminal.

# output
stash@{0}: WIP on main: 8a278dc :+1: Refactor, add shortcut, README.md

In the above output, stash@{0}, where 0 is the index of the stash. The closer the stash's time to the current time, the smaller the index. WIP on main: 8a278dc :+1: Refactor, add shortcut, README.md is the message of the stash created by default, following the branch name and the message of the most recent commit.

You can customize the stash message using the following syntax:

git stash save {custom message}
# Example
git stash save 'Stash with message'
# Then the stash list will look like...
stash@{0}: On main: Stash with message
stash@{1}: WIP on main: 8a278dc :+1: Refactor, add shortcut, README.md

Yeah, now I can stash my messy code changes on the feature B branch, then switch back to fixing feature A, and later return to feature B. Now, if I want to retrieve the stashed code changes, what should I do?

git stash apply

Now your code has been restored

You can pass the parameter as the index of the stash to specify the stashed code portion you want to restore.

git stash apply 1
# or
git stash apply 0

There's a note when you save a stash that untracked files won't be stashed. To stash them, you have two options: one is to add them to staged changes before stashing, and the other is to run git stash save --include-untracked.

By now, you've acquired a comprehensive understanding of the basic concepts and functionalities of git stash, equipping you to tackle a wide array of practical scenarios with confidence. As we transition to Chapter 3: "Some Other Useful Commands" rest assured that you've solidified your foundation in utilizing git stash effectively.

3. Some Other Useful Commands

git stash pop: This command is similar to git stash apply but also removes the most recent stash from the stash list after applying it.
git stash drop: Use this command to remove a specific stash from the stash list.
git stash clear: This command removes all stashes from the stash list, providing a clean slate.

If you want to learn more, use the git stash --help command to see additional information. Always remember that help is the sacred command that helps you learn everything.

In conclusion, mastering git stash is crucial for efficient version control management. With the basics covered, stay tuned for upcoming series where we'll delve into topics like git rebase, git merge, writing effective commit messages, and resolving conflicts seamlessly. These skills will further enhance your Git proficiency and streamline your development workflow. Keep exploring and happy coding!

Reference: Git Documentation

How I create my first Chrome extension with Github Copilot

Doan Trong Nam — Wed, 06 Mar 2024 09:33:08 +0000

My story is that I'm learning Japanese on a website called Dungmori.com, and I study new vocabulary on the Quizlet website. I encountered difficulties in copying vocabulary from Dungmori to Quizlet because I had to copy each word one by one. Previously, I used to copy sets of vocabulary created by other Quizlet users, then manually checked for any missing words compared to Dungmori and added them myself. This method consumed a lot of my time. Later, I discovered that Quizlet allows importing multiple words with various formatting options. For example, two words separated by a comma, tab, space, or two cards separated by line breaks \n, \r\n, ...

Meanwhile, on Dungmori, they present new words using a standard <table> tag, which allows me to easily use JavaScript to transform the text within this table into a text string for importing into Quizlet.

But do I have to search for the code, open DevTools, and paste the code into the console tab every time I want to fetch vocabulary from this table? This question led me to consider creating an extension to install on the browser. However, I've never written an extension before, I only know HTML, CSS, and JavaScript. Perhaps GitHub Copilot can help me with that, right?

So, I began asking Copilot how to create an extension from scratch. The answer was that I needed to create a file called manifest.json to store the important configurations of the extension, a file named popup.html to design the interface for the extension, another file called popup.js to write the logic, and a file named content.js to interact with the DOM elements of the website. Copilot also guided me on how to import a code folder into the browser by enabling Developer mode in the extension settings, then selecting the code folder and reloading the browser.

// manifest.json
{
  "manifest_version": 2,
  "name": "My First Chrome Extension",
  "version": "1.0",
  "description": "A simple Chrome extension",
  "browser_action": {
    "default_icon": "icon.png",
    "default_popup": "popup.html"
  },
  "permissions": ["activeTab"],
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["content.js"]
    }
  ]
}

<!-- popup.html -->
<!DOCTYPE html>
<html>
  <body>
    <h1>Hello, this is my first Chrome extension!</h1>
    <script src="popup.js"></script>
  </body>
</html>

I started writing the logic into the content.js file to convert the text in the table into a string that can be imported into Quizlet and then copied to the clipboard. I won't delve much into this part because it involves basic DOM operations. Afterward, I ran a test, and voila, the logic ran as soon as the web page loaded. However, I wanted to trigger it by clicking a button in the extension popup. That way, it would require more steps to use, but it would be cooler ¯_(ツ)_/¯. Why not?
Then, I turned to Copilot again and received the answer that this configuration is in the manifest.json file.

"content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["content.js"]
    }
  ]

The solution? Delete that section of the config, and manually trigger it using the chrome.scripting.executeScript() method

chrome.tabs.query({active: true, currentWindow: true}, 
    function(tabs) {
        chrome.scripting.executeScript({
            target: {tabId: tabs[0].id},
            files: ['content.js']
        }).then(() => {
            console.log('Injected the content script.');
        }).catch(err => console.error(err));
    });

Yeah, and now the content.js file can be triggered when I click the button in the extension popup, but the copy to clipboard function isn't working as before. Once again, the almighty Copilot came to my rescue, providing the answer that:

The error "Document is not focused" occurs because the document of the background page or popup loses focus when you switch to the content page, and the Clipboard API requires the document to be focused to write to the clipboard.

And the solution is that I need to send the text that needs to be copied from the content.js file to the popup.js file using a method that I'm not sure about, but the idea seems similar to a pub/sub mechanism.

// content.js
chrome.runtime.sendMessage({type: "copy", text: normalizedRows.join("\r\n")});

// background.js or popup.js
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
    if (request.type === "copy") {
        navigator.clipboard.writeText(request.text).then(function() {
            console.log('Text copied to clipboard');
        }).catch(function(err) {
            console.error('Could not copy text: ', err);
        });
    }
});

BOOOOM! THE RESULT IS HERE!

Now, I can copy vocabulary from Dungmori into the clipboard with just one click. Thanks to Copilot, it took me less than an hour to create this extension. Imagine if I had to search Google to do this; I would have to open a billion tabs every time an issue arises. But with Copilot, I just stay put in my VS Code window. Previously, I tried with ChatGPT and Gemini, but the output didn't come close to this.

Above is not some high-tech tech sharing article; it's just my simple story and fun experience with Copilot. Also, thanks to Dall-E for helping me create illustrations, and ChatGPT for making my English translations sound less like a robot. Peace, I'm out.

GitLab Repository: https://gitlab.com/1337NamNori/copy-vocab-extension