DEV Community: hudy9x

Why I built my own PlantUML Generator (and why you might need it too)

hudy9x — Sun, 08 Mar 2026 15:43:44 +0000

If you're a developer, chances are you've used PlantUML or Mermaid to visualize logic. While Mermaid is great for quick charts, many enterprise projects still require PlantUML.

However, the developer experience (DX) with PlantUML isn't always smooth. After struggling with slow rendering and clunky previews, I decided to build a web-based, offline-capable PlantUML generator.

The Motivation

The biggest "pain point" for me was the setup. Most solutions require a portable PlantUML server or a heavy VS Code extension. I wanted something fast, lightweight, and accessible directly in the browser—even without an internet connection.

Solving the "Pain Points"

I built Beautiful PlantUML to solve 5 specific issues I faced daily:

Sticky Participants: In large diagrams, scrolling down means losing track of which line belongs to which participant. I made them "sticky" so you always have context.
Flexible Zooming: Instead of fighting with VS Code’s scroll-zoom, I implemented a more fluid navigation system.
Direct Message Editing: You can now edit messages directly on the diagram without hunting through lines of code.
Performance: I optimized the rendering engine to be significantly faster than traditional server-side generation.
Code Mapping (Experimental): Clicking a message on the diagram should jump you straight to that line in the editor. Note: Still in the lab, but getting there!

Check it out

The tool is live and free for everyone to use:
👉 https://beautiful-plantuml.vercel.app/

I’d love to hear your feedback or any features you'd like to see added. Let’s make documentation a little less painful!

I Built 3 Work-Saving Desktop Apps in 3 Days Using Google Antigravity – Here’s How

hudy9x — Wed, 25 Feb 2026 15:24:12 +0000

Hey dev community 👋

I'm hudy9x, a web app developer in Hanoi, and for the past few years I've been grinding on enterprise projects — the kind where budgets are tight, licenses are forbidden, and "just use VS Code preview" is the default answer to everything.

But in February 2026, I decided to stop complaining and start building. Using Google Antigravity (the new agentic AI IDE powered by Gemini 3), I shipped three custom desktop tools in just three days that actually make my daily work better.

No massive codebases. No weeks of setup. Just prompts, a bit of polish, and publish.

Here's exactly what I built — and why this changes everything for solo devs and teams on a budget.

Quick context: My day job pain points

I work on a big web app project. Every sprint includes:

Writing PlantUML and Mermaid diagrams for basic + detailed design docs
Managing Docker containers (but company banned licensed Docker Desktop)
Letting testers browse S3 buckets without giving them full AWS console access

Paid tools? Nope. VS Code extensions? They suck for real-time preview/editing. So I took matters into my own hands.

App 1: PlantUML + Mermaid Viewer/Editor (Day 1)

Why I needed it:

Our team draws sequence/component diagrams daily. VS Code's PlantUML preview is laggy, no drag/drop, no easy zoom, and editing feels clunky. No budget for paid diagramming software like Lucidchart or Draw.io desktop.

What I did:

I opened Antigravity, described the app in one prompt:

"Build a lightweight desktop app using Tauri + React that renders PlantUML and Mermaid diagrams from local .puml / .md files. Support live preview, drag-and-drop to rearrange elements, zoom in/out, pan, and inline editing of diagram text with instant re-render. Offline-first, no cloud."

The agent planned the stack, generated boilerplate, wired up rendering libs (like @mermaid-js/mermaid + plantuml-encoder), and even added nice-to-haves like theme toggle and export to PNG.

Because I already have solid experience with Monaco Editor (for the inline editing), implementing search, and integrating those main packages, the initial running version came together surprisingly fast.

It took me 12 hours to complete a functional first version on Day 1 — but that version only included:

Monaco Editor for text editing
Basic tab manager
Simple PlantUML preview

The fancy stuff (Mermaid support, drag-and-drop rearranging, zoom/pan, inline editing with instant re-render, export, etc.) came later — I kept iterating and adding features over the next 30+ days.

Still, having that usable core in just 12 hours felt like magic. My PM now asks me to share the evolving version with the team 😂. Here it is https://depdok.com

App 2: Custom Docker UI (Day 2)

The problem:

Company policy bans any licensed software — including Docker Desktop. We all use Docker in WSL2 on Windows, but no nice GUI = constant terminal pain.

Prompt to Antigravity:

"Create a desktop Docker management UI that connects to a local Docker daemon (via exposed socket or TCP). Show running containers, images, volumes. Buttons to start/stop/restart, view logs, exec into shell. Handle WSL2 setup where daemon is inside WSL."

It built a Tauri frontend + Rust backend to talk to Docker API. Generated nice tables, real-time stats, dark mode...

But... it was buggy on Windows at first (connection refused because WSL port wasn't exposed). After a few hours of debugging and prompting fixes ("add port forwarding from WSL to host via netsh interface portproxy"), it worked perfectly.

Now I have my own "Docker Desktop" that's 100% allowed and super lightweight.

App 3: Simple AWS S3 Viewer (Day 3)

Super simple need:

Testers need to check uploaded files in S3 without logging into AWS console (security reasons + they don't have creds).

I just cloned a sleek file-browser UI I saw on Instagram, took a screenshot + quick description, and told Antigravity to start building the app for me with that exact look and feel.

One prompt:

"Build a desktop app that lets users input AWS credentials (access key + secret) and browse S3 buckets/files. List objects, preview images/text, download files. Securely store creds in OS keychain. No upload/delete for safety."

Antigravity handled AWS SDK integration, file listing, presigned URLs for preview/download, and even added a clean file tree view.

Polished in under an hour. Shared with QA team — instant productivity boost.

The real magic: Prompt → Polish → Publish

This whole process feels like cheating in 2026:

Prompt — Describe what you want in natural language (be specific about stack, features, constraints)
Polish — Review code, fix bugs, tweak UI/UX (agents help here too)
Publish — Build binaries with Tauri, share via GitHub / itch.io / your site

No more "I don't have time to build a tool." If it takes 3 days max for a working version, why not build exactly what your workflow needs?

How the last 2 years flipped my career thinking

I used to think indie/dev tools were for "full-time makers" with endless time.

Then AI coding tools exploded: Cursor, Windsurf, now Antigravity...

Suddenly, a solo dev in Vietnam can prototype production-grade desktop apps faster than waiting for company approval or budget.

It shifted my mindset from "I'm just a web dev" to "I can build whatever tool solves my pain — and maybe others' too."

(This same energy helped me ship DepDok, my offline-first Markdown editor with Mermaid/Kanban support. If you're into lightweight notes tools, check it out!)

What about you?

What small (or big) desktop/web/tool have you been wishing for at work?

If it only took 3 days with Antigravity, would you build it?

Drop a comment — I'd love to hear your ideas. Maybe I'll prompt one next weekend 😄

Follow me on X @hudy09 for more build-in-public chaos.

Happy building!

hudy9x 🚀

My 1-Day Prototype, 2-Week Launch: Building a Cross-Platform UML Editor with Tauri and Cursor

hudy9x — Sat, 12 Jul 2025 08:06:07 +0000

Hi, I'm Hudy - a half Indie maker based in Hanoi, Vietnam. Today, I'm thrilled to share the story of how I spent one day building a functional cross-platform desktop UML editor prototype. And then the next 10+ days refining it based on valuable feedback from my colleagues.

Here is the Github repo and a quick look about the app:

It includes some features such as:

Uml text editor with syntax highlighted and suggestions
Preview panel with zoom in/out and dragging around features
Enable export uml as file .pu and .png
Copy as an image and paste to chatbox
Create multiple and update uml's title
Realtime diagram preview
Soft and permanent delete feature
Restore deleted uml diagram
Pop out the preview window
Autoupdate using Github action pipeline

See other open-sources that I built: hudy9x.com

Why build my own UML tool ?

Three weeks ago, my boss tell me that we've started the next phase of the project. And this phase requires us to implement the detailed design which include some detailed sequence diagram in UML format.

So I've just googling a few days to find the best match for us. Found a lot of tools but with locked essential features behind a paywall. (Actually, I'm not familiar with DD and hate to draw, so I refused to learn how to use the tool LOL)

I just need a simple tool which allows me to visualize and edit the diagram quickly without dragging, aligning, but just type and see the result.

At that moment, an idea flashed in my mind: "Why don't I built my own UML tool"

Found the uml syntax but how to preview it

Next 2 hours, I've kept googling "how to preview uml syntax in javascript, npm". And "wa lah" I figured out a package that called plantuml-encoder which accept an encoded uml syntax and calling the uml link to response an image/svg/text format.

Boom, let's build it right away.

Choose Tauri for building cross-platform desktop app

Immediately, I opened tauri.app and install required dependencies and start building the project. Here is what I chosen:

Tauri
Pnpm
Reactjs - frontend
Sqlite - database
Zustand - state management
Shadcn UI

Crafting the UML editor prototype

Now that is the important part, I had to isolate the scope of development, otherwise the app would never been released LOL. In order to increase the development process I just need to simplify features. So after 15 minutes of brainstorming with my ego, here are the features:

The app only have 2 part: the left and the right.
Left is a text editor
Right is the preview panel

Let's breaking down these two features. Regarding the left side, what requirements it should cover:

Text editor must have syntax highlighted
It must have embed theme and allow to customize the theme
It must have completions and search or replace

With these requirements, I found @uiw/react-codemirror - a wrapper of code-mirror for React.js

Regarding the right side - the preview panel. It's more simpler, cause we just need to:

Preview the uml syntax
It must allow to dragging around
It must allow to zoom in/out

For dragging and zooming, I found react-zoom-pan-pinch package. However, the preview got an issue was that the image became too blurry when zoomed in. Therefore, I used svg instead of image as follow

// just change the /img to /svg in the url
var url = 'http://www.plantuml.com/plantuml/svg/' + encoded

That's it. Now I just need to open cursor and tell it to start building. After 30 minutes doing questions and answers with it, the output is something like below:

Apply the build pipeline automatically for Windows and Macos

Since I built this app on Mac, I had to create a Github pipeline to generate the Windows version.

While this step might seem daunting, it's surprisingly simple. Tauri provides a comprehensive solution for this process that you can just copy and paste: Tauri Github Pipeline

Release a beta version and get feedbacks in next 10+ days

Next days, I just sent the app to my colleagues and eager for their feedbacks. And to my pleasant surprise, the suggestions poured in! This "collect comments and review" phase lasted over 10+ days and was invaluable. Here's a snapshot of suggestions that helped shape the app:

"I think you should create a tab on the left or the top, something like notepad++ to show what files you're editting and help me easy to switch between them"
"The preview panel should able to pop out the main window. Cuz the window's size kinda too small, I'd like to split it out to the other screen to edit"
"Can I copy it as an image and paste it to Teams chatbox ?"
"What if I delete the app, where is my diagram? Could you allow to save it or something"
"The theme is too light, could you provide the dark mode"
"Well, the diagram list is too long and hard to find. Can you allow to delete it and provide a search box ? "
"For now, I have 3 running projects, each of them have 4-5 diagram. Can you provide something like folder, project or category to manage them easier?"
"Do you have sort feature, it's kinda drag the diagram to sort them"
....

Lession learned and road ahead

That's the story! The app officially launched within two weeks: one intense day of prototyping, and over 10 days dedicated to iterating and improving based on real user feedback. It was an incredible learning experience. I gained a deeper understanding of efficient development, the power of rapid prototyping, and the immense value of user-centric design.

Building this app with Cursor by my side, which streamlined many coding tasks, combined with my prior Tauri knowledge, made this rapid development cycle possible. It truly shows what you can achieve when you focus on user needs and leverage powerful tools.

P/s: I've been learning to write English. So the post is mixed with Gemeni and me :D

3 FOSS Project Manager that JS devs want to contribute

hudy9x — Tue, 30 Jul 2024 14:18:57 +0000

Hi everyone, It's Hudy again

In this post, I'm gonna share with you 3 open source project management application you may not know about them.

Plane.so

🔥 🔥 🔥 Open Source JIRA, Linear and Asana Alternative. Plane helps you track your issues, epics, and product roadmaps in the simplest way possible.

Website: https://plane.so
Github: https://github.com/makeplane/plane
Star: +26k

Huly.io

Huly, an open-source platform, serves as an all-in-one replacement of Linear, Jira, Slack, and Notion.

Website: https://huly.io/
Github: https://github.com/hcengineering/platform
Star: +5.4k

Namviek.com

Namviek is an open-source project manager for small teams with low budget. It includes essential features for running your team.

Website: https://namviek.com
Github: https://github.com/hudy9x/namviek
Star: +1.8k

Conclusion

So, if you've been running a small team with a low budget, they would be the best choice. Additionally, it could be a good project to contribute to, which would help you improve your skills or even your reputation.

Deploy your own project management app on Vercel and Render without coding skills and especially, it's free.

hudy9x — Sat, 06 Jul 2024 14:49:26 +0000

Hi everyone, It's Hudy again

Today, I just released the deployment guide for Namviek on youtube. So, if someone who need to deploy my app to run their team please check out the link below

For those who would like to scroll for fast, use this post intead.

Preparation

In order to deploy namviek to Vercel and Render we need to prepare accounts on the following services

Redis - for caching
Mongodb Atlas - for database
Github Account - store the codebase
Firestore - for Gmail authentication
Vercel - for frontend
Render - for backend

Deployment process

The deployment progress will implemented in 5 steps. That's a lot of steps for a deployment tasks I know. However, you need no coding skills for these step. Just copy and paste some configurations and follows exactly what I do.

1. Create Redis database

So, the first thing we need to do is that create Redis database. Please go to use Redis cloud section and follow my instruction. The result of this step is you must to get the redis connection string as follow

REDIS_HOST=redis://default:ck7VLUkNQ*************GWeD@redis-18732.a293.ap-southeast-1-1.ec2.redns.redis-cloud.com:11077

2. Create database on Mongodb Atlas

Next, navigate to Mongodb Atlas and create your own database as the following instruction. After completing this process you will obtain the mongodb connection string in the following format.

MONGODB_URL=mongodb+srv://{user}:{pwd}@cluster0.weszq.mongodb.net/{dbName}?retryWrites=true&w=majority

If you want to secure your connection by restricting a specified Ip address, please visit MongoDb Network Access

3. Deploy backend to Render

Now, it's time to deploy backend to Render. Open a new tab and visit Render.com. Sign up a new account and just leave it. Go to my repo and click on the Deploy to Render button.

You will be redirect to the deployment page as following. Fill your Blueprint Name and environment variables.

The env values should be like the below example.

JWT_REFRESH_KEY=287kjshkjshdf
JWT_SECRET_KEY=12981KJ1H23KJH

JWT_REFRESH_EXPIRED=4h
JWT_TOKEN_EXPIRED=30m
JWT_VERIFY_USER_LINK_TOKEN_EXPIRED=1h

NEXT_PUBLIC_FE_GATEWAY=https://test/v2/234234/clusters

MONGODB_URL=mongodb+srv://<user>:<pass>@cluster0.bswhjt.mongodb.net/demodb?retryWrites=true&w=majority
REDIS_HOST=redis://<user>:<pass>@redis-48362.c345.ap-southeast-1-1.ec2.redns.redis-cloud.com:19729

MONGODB_URL and REDIS_HOST are important variables. So please input them exactly. The others are up to you.

Click on the Apply button to start deploying.
Wait for Render deploy the app. If nothing wrong the output should look like below. Don't worry about the red line through

Verify Render deployment process

Right after Render finishs the deployment process we have to verify it whether success or not. Head to Mongodb Atlas > Database > Cluster > Collections. And find your database that you've created earlier. If you see a list of collections as the image below then congrats you succeeded.

4. Deploy frontend to Vercel

Well, the last thing to run namviek is to deploy the frontend to Vercel. This will be quick i promise :D.

Open your browser and go to my repo and click on the Vercel deploy button. It will navigate you to the deploy page. Give it a name and press Create button. Then fill environment variables and press Deploy button.

If you don't find the NEXT_PUBLIC_BE_GATEWAY please go to Render.com and navigate to service's setting. You'll see the domain

At last, if you're lucky the below screen will be displayed that means the deployment is success. LOL

5. Integrate Gmail authentication

Follow my instruction here to integrate Gmail authentication

Conclusion

Hope you found something helpful in this post. If you got any issues, please create an PR or go to my Discord server for help. Thank for reading.

Deploy your own project management app on Vercel and Render for free

hudy9x — Sat, 06 Jul 2024 09:14:00 +0000

Hi everyone, It's Hudy again

Today, I just released the deployment guide for Namviek on youtube. So, if someone who need to deploy my app to run their team please check out the link below

For those who would like to scroll for fast, use this post intead.

Preparation

In order to deploy namviek to Vercel and Render we need to prepare accounts on the following services

Redis - for caching
Mongodb Atlas - for database
Github Account - store the codebase
Firestore - for Gmail authentication
Vercel - for frontend
Render - for backend

Deployment process

1. Create Redis database



REDIS_HOST=redis://default:ck7VLUkNQ*************GWeD@redis-18732.a293.ap-southeast-1-1.ec2.redns.redis-cloud.com:11077

2. Create database on Mongodb Atlas

Next, navigate to Mongodb Atlas and create your own database as the following instruction. After completing this process you will obtain the mongodb connection string in the following format.



MONGODB_URL=mongodb+srv://{user}:{pwd}@cluster0.weszq.mongodb.net/{dbName}?retryWrites=true&w=majority

If you want to secure your connection by restricting a specified Ip address, please visit MongoDb Network Access

3. Deploy backend to Render

Now, it's time to deploy backend to Render. Open a new tab and visit Render.com. Sign up a new account and just leave it. Go to my repo and click on the Deploy to Render button.

You will be redirect to the deployment page as following. Fill your Blueprint Name and environment variables.

The env values should be like the below example.



JWT_REFRESH_KEY=287kjshkjshdf
JWT_SECRET_KEY=12981KJ1H23KJH

JWT_REFRESH_EXPIRED=4h
JWT_TOKEN_EXPIRED=30m
JWT_VERIFY_USER_LINK_TOKEN_EXPIRED=1h

NEXT_PUBLIC_FE_GATEWAY=https://test/v2/234234/clusters

MONGODB_URL=mongodb+srv://<user>:<pass>@cluster0.bswhjt.mongodb.net/demodb?retryWrites=true&w=majority
REDIS_HOST=redis://<user>:<pass>@redis-48362.c345.ap-southeast-1-1.ec2.redns.redis-cloud.com:19729

MONGODB_URL and REDIS_HOST are important variables. So please input them exactly. The others are up to you.

Click on the Apply button to start deploying.
Wait for Render deploy the app. If nothing wrong the output should look like below. Don't worry about the red line through

Verify Render deployment process

4. Deploy frontend to Vercel

Well, the last thing to run namviek is to deploy the frontend to Vercel. This will be quick i promise :D.

If you don't find the NEXT_PUBLIC_BE_GATEWAY please go to Render.com and navigate to service's setting. You'll see the domain

At last, if you're lucky the below screen will be displayed that means the deployment is success. LOL

5. Integrate Gmail authentication

Follow my instruction here to integrate Gmail authentication

Conclusion

Hope you found something helpful in this post. If you got any issues, please create an PR or go to my Discord server for help. Thank for reading.

8 Date Functions You Can Absolutely Write Without a Library

hudy9x — Mon, 24 Jun 2024 03:04:16 +0000

Hi everyone, It's Hudy again

Date is one of the most popular object in Javascript that you're supposed to work with in at least one of your projects. And I'm sure that you also implement these function using the Date object for some cases:

compare two dates
get the last date of month
convert date to readable version
... many more

So in this post, I'd like to share with you 8 date utilities function that I often use to manipulate the Date object in javascript.

1. Convert date to a readable version

If you have a list of activities and you'd like to display a readable version of date (ex: 2 min ago, 10 hours ago, 2 days ago) for straightforward and understandable when an activity happens.

Then you could try this.

function toReadableDate(date) {
  const AMIN = 60
  const ADAY = AMIN * 24;

  const minutes = calculateMinuteFromNow(date)
  const isFuture = minutes < 0;
  const absMinutes = Math.abs(minutes)
  const r = n => Math.round(n)

  const addAffix = minStr => {
    if (isFuture) return `in ${minStr}`;
    return `${minStr} ago`;
  }

  if (absMinutes < AMIN) {
    return addAffix(`${minutes} minutes`)
  }

  if (absMinutes < ADAY){
    return addAffix(`${r(absMinutes/AMIN)} hours`)
  }

  if (absMinutes === ADAY && !isFuture) {
    return `yesterday`
  }

  if (absMinutes === ADAY && isFuture) {
    return `tomorrow`
  }

  return addAffix(`${r(absMinutes/ADAY)} days`);
}

function calculateMinuteFromNow(date) {
  const d1 = new Date(date);
  const d2 = new Date();
  const diff = d2.getTime() - d1.getTime();

  return Math.round(diff / (1000 * 60)); // minutes
}

// Test
toReadableDate(new Date(2024, 5, 12)) // '11 days ago'
toReadableDate(new Date(2024, 5, 28)) // 'in 5 days'

2. Get the first/last date of month

The second function that I often used for getting first/last date in month. You can write it easily as follow.

function getFirstDateOfMonth(date) {
  const d = new Date(date)
  d.setDate(1)
  return d
}

function getLastDateOfMonth(date){
  const d1 = new Date(date)

  d1.setMonth(d1.getMonth() + 1)
  d1.setDate(1)
  d1.setHours(-1)

  return d1.getDate()
}

// Test
getFirstDateOfMonth(new Date())
getLastDateOfMonth(new Date())

3. Compare two dates

There are two case occur in this function. First, you'd like to compare date and the second is you'd like to compare exact date and time.

function compareDate(dateLeft, dateRight) {
  const d1 = new Date(dateLeft)
  const d2 = new Date(dateRight)

  const d1Str = `${d1.getFullYear()}-${d1.getMonth()}-${d1.getDate()}`
  const d2Str = `${d2.getFullYear()}-${d2.getMonth()}-${d2.getDate()}`

  return d1Str === d2Str
}

The above version compares dates only by year, month and day. It doesn't consider hours, minutes and seconds. The following will handle comparisions based on the exact date and time.

function compareExactDate(dateLeft, dateRight){
  return new Date(dateLeft).getTime() === new Date(dateRight).getTime()
}

4. Calculate the duration between two dates

The fourth function will helps you calculate the number of days/hours/minutes between two dates.


function getDuration(dateLeft, dateRight){
  const DAY = 24
  const HOUR = 60
  const MIN = 60
  const d1 = new Date(dateLeft);
  const d2 = new Date(dateRight);
  const diff = d2.getTime() - d1.getTime();

  return Math.round(diff / (1000 * MIN * HOUR * DAY));
}

// Test
getDuration(new Date(2024, 5, 11) , new Date(2024, 5, 13))

The earlier function only returns the number of days. You can custom the formula to return value in hour, minute as you wish.

5. Get list of month/day in alphabet or number

Sometimes, you want to get the list of month or day in alphabet for displaying on a select box or calendar.

function getMonthList(){
  const months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']

  return months
}

function getDayList() {
  const days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'] 
  return days
}

function getCompactDayList() {
  return getDayList().map(d => d.slice(0,3))
}

function getCompactMonthList() {
  return getMonthList().map(m => m.slice(0,3))
}

function getMonthOptions(compact) {
  const options = compact ? getCompactMonthList() : getMonthList()
  return options.map((v, i) => ({title: v, id: i}))
}

function getDayOptions(compact) {
  const options = compact ? getCompactDayList() : getDayList()
  return options.map((v, i) => ({title: v, id: i}))
}

6. Get the first (monday) and last day (saturday) of week

For those unfamiliar with the Date object, keep in mind that Sunday is assigned 0 and Saturday is assigned 6.

function getFirstDayOfWeek(date) {
  const d = new Date(date)
  const day = d.getDay()
  const currentDate = d.getDate()

  d.setDate(currentDate - (day - 1))
  return d;
}

// Test
getFirstDayOfWeek(new Date(2024, 5, 22))

function getLastDayOfWeek(date) {
  const d = new Date(date)
  const day = d.getDay()
  const currentDate = d.getDate()

  d.setDate(currentDate + (6 - day))
  return d;
}

// Test
getLastDayOfWeek(new Date(2024, 5, 16))

7. Get the list of week by a specified date

I often use this function to generate labels for a week's worth of data, which I then use on the x-axis of my visualizations.

function getListOfWeekByDate(date) {
  const day = date.getDay()
  const week = []
  const weekLen = 7

  let i = 0

  while (i < weekLen) {
    const d = new Date(date.getTime())
    const distance = day - i

    d.setDate(d.getDate() - distance)
    week.push(d)
    i++
  }

  return week
}

// Test
getListOfWeekByDate(new Date(2024, 5, 18))

8. Get all week of month

The last function will return all weeks of month. I ultilize getLastDateOfMonth, getFirstDateOfMonth and getListOfWeekByDate from the above functions to create this function.

// 1. we generate the first week of month 
// by using `getFirstDateOfMonth` and `getListOfWeekByDate`
function getFirstWeekOfMonth(d) {
  const firstDateOfMonth = getFirstDateOfMonth(d)
  return getListOfWeekByDate(firstDateOfMonth)
}


function getFullWeekOfMonth(d) {
  const weeks = []
  const month = d.getMonth()
  const lastDateInThisMonth = getLastDateOfMonth(d)

  // 1. get the first week
  const firstWeek = getFirstWeekOfMonth(d)

  weeks[0] = firstWeek

  let going = true

  while (going) {
    const lastWeek = weeks[weeks.length - 1]
    // 5.1 until no week found
    if (!lastWeek) {
      going = false
      break
    }

    // 2. get the last date of the last week
    const lastDate = lastWeek[lastWeek.length - 1]
    const ldate = lastDate.getDate()
    const lmonth = lastDate.getMonth()

    // 5.2 or that last date belongs to next month
    if (lmonth > month || ldate === lastDateInThisMonth) {
      going = false
      break
    }

    // 3. increase the last date to 1
    const nextDate = new Date(lastDate.getTime())
    nextDate.setDate(nextDate.getDate() + 1)

    // 4. generate the week by a new date
    // then keep going
    const week = getListOfWeekByDate(nextDate)
    weeks.push(week)
  }

  return weeks
}

Conclusion

So, I hope this post provided you some useful things. If you have a better version of the above functions or want to share yours, go ahead, I'd love to learn from you guys.

Thanks for reading, see you in the next post.

2 re-rendering pitfalls I learned about while building my React app

hudy9x — Sat, 15 Jun 2024 14:45:31 +0000

Hi It's Hudy here.

In this blog post, I'd like to share two re-rendering pitfalls I encountered while developing Namviek, my open-source project management app, and how I addressed them.

These pitfalls highlight common mistakes that can lead to performance issues in React applications. By understanding and avoiding these issues, you can ensure that your React apps run smoothly and efficiently.

1. Put states, Context.Provider and child component within the same place.

I usually use React Context for building my own components (Ex: Calendar, ProjectMemberSelect) and containers. However, by habit, I tend to put states, Context.Provider and all child components within the same place.

Look at the below example: I put the counter state and <Report.Provider/> inside <Report/>. No problems, I thought initially.

 export default function Report() {

   const [counter, setCounter] = useState(1)  // state
   return (
     <Report.Provider value={{
       counter,
       setCounter
     }}>
        <ReportContent /> // child
        <ReportSidebar /> // child
     </Report.Provider>
   )
 }

The issue just appeared when I increased counter value. Both <ReportContent /> and <ReportSidebar/> re-rendered, even though they didn't rely on the counter state.

This might seem like a minor oversight, but it's a common pitfalls for developers who frequently use React Context like me, I guess.

// Fixed version

export default function Report() {
  // moved state to another place
  return (
    <ReportProvider>
      <ReportContent />
      <ReportSidebar />
    </ReportProvider>
  )
}

function ReportProvider({children}) {
  const [counter, setCounter] = useState(1) 
  return <Report.Provider value={{
     counter,
     setCounter
   }}>{children}</Report.Provider>
}

So the solution is straightforward: move the counter state logic into the <ReportProvider/> component. By doing this, only the components that truly depend on the context will re-render when the state changes.

This fix works because the counter state becomes encapsulated within the <ReportProvider/> component. Since child components only receive the context value at the time of render, changes to the state within the provider won't trigger re-renders in <ReportContent/> and <ReportSidebar/> unless they explicitly rely on the context.

Crucially, the children prop, which passes down the component tree, only updates when the <Report /> component itself re-renders.

2. Misconception: Custom hooks do not cause component re-renders.

Look the following example. I created a custom hook called useUpdate to encapsulate the fetch logic with the goal of minimizing unnecessary re-renders.

// custom hook
function useUpdate() {
  const [counter, setCounter] = useState(0)

  useEffect(() => {
    // assume that this is a fetch call
    setTimeout(() => {
      setCounter(c => c + 1)
    }, 1000)
  }, [])
}

// component
export default function Report() {
  useUpdate()

  console.log('render Report'). // run twice

  return (
    <ReportProvider>
      <ReportContent />
      <ReportSidebar />
    </ReportProvider>
  )
}

And I realized the <Report/> component was still re-rendering as expected. While I thought custom hooks might prevent re-renders.

After a few hours of researching I found that.

A custom can be treated as a function simply which is executed from within the functional component and effectively the hooks that are present in the custom hook are transferred on to the component. So any change that would normally cause the component to re-render if the code within the custom hook was directly written within functional component will cause a re-render even if the hook is a custom hook. Refer

So to fix this, I moved the useUpdate hook to a separate component like <PrefetchData/>.

// fixed version

function PrefetchData() {
  useUpdate()
  return null
}

// component
export default function Report() {

  console.log('render Report'). // run once

  return (
    <ReportProvider>
      <PrefetchData />
      <ReportContent />
      <ReportSidebar />
    </ReportProvider>
  )
}

Now, the <PrefetchData/> component will be responsible for retrieving the data and managing it's state. As a result, the re-render process will be isolated to the <PrefetchData/> component, preventing unintended re-renders in unrelated components outside its scope.

This approach ensures that updates to the report's state only trigger re-renders in components that rely on the fetched data, promoting a more efficient rendering cycle.

Conclusion

I hope my experience can help others prevent performance issues caused by unintentional misuse of React.Context. If you have any insights into better solutions or have spotted any mistakes in my explanation, I'd be eager to learn from them.

I built an open-source multi-platforms Note-taking app using Reactjs and Tauri

hudy9x — Mon, 03 Jun 2024 17:40:55 +0000

Hi everyone, It's Hudy again.

Almost a month ago, I shared my open-source project manager with you guys. And it got a lot of attention from community. Besides, I received valuable comments from you all which helped me improve the app significantly.

So, today I'd love to share another open-source project with you: my Note-taking app that I built 2 years ago.

It's a simple note-taking app designed for personal use. You can find it's features here kompad.vercel.app. And here's the Github repository

Note: This app is open-source and free to use. However, it hasn't received updates in the past few months.

What frameworks did i use

Reactjs was still my favorite frontend framework that time. Additionally I discovered Tauri - an app construction toolkit that lets you build software for all major desktop operating system. This combination was fantastic for building multi-platform applications using Web technologies.

Tauri
Reactjs
Tiptap - a toolkit for building rich text WYSIWYG editors
Firebase (Authentication + Firestore + Storage)
Algolia - Full text search

Why Tauri, but Electronjs ?

Before I discovered Tauri, I tried Electron.js, which was incredibly easy to use and develop with. However, the resulting app file size was massive, exceeding 500mb. This significant size prompted me to explore alternatives, ultimately leading me to Tauri.

Tauri not only produces significantly smaller applications files compared to Electron.js (which relies on Node.js)but, it also leverages Rust for it's core functionality. After testing out, I was convinced it was the perfect choice for building this app.

What features did it have

I initially thought I only needed a few basic features, but that turned out I was wrong. As development progressed, I kept coming up with new features I wanted to add. Let's take a look at what I ended up building.

Markdown support and Search

As a developer, markdown was a must-have feature for the app. Next is the search function. Since Firestore doesn't support full-text search, I utilized Algolia for this functionality.

Code highlight

The second must-have feature was code highlighting. Because I take a lot of notes on code snippets, tutorials, and tech articles.

Shortcuts

Being a Neovim user, I dislike using the mouse while writing or coding. Therefore, shortcuts were the third essential feature.

Folder, Tags and Favorites

This feature allows users to create folders, tags, and add notes to favorites for easy organization by category.

Word counting

Sometimes I want to know how many words I've written and how long it would take to read the note.

Theme collection

A beautiful app motivates me to write. So, dark/light mode wasn't enough. It needed the ability to create and customize new themes.

Synced to Other devices

Of course, it also syncs updates to other devices. Updating a note on the Windows app will immediately sync it to the Web app, thanks to Firebase Firestore.

If it didn't sync, that would be a bug, not a feature! LOL

Support Windows, Linux, Macos, Web, PWA

I use Windows and macOS at the office and Linux at home. So, the app had to be multi-platform. It might sound strange, but in the office, I use macOS for coding and Windows for a local server. Sometimes I use it for coding, sometimes not.

Auto updates

Whenever the app has new updates, a small circle icon appears on the bottom left sidebar. You can then choose to update or not.

Basic Content Encryption

This feature encrypts your notes before saving them to the database. This makes your content difficult to read without your decryption code.

How to install

To run the app on your specific operating system, you'll need to install Tauri and build the app yourself. My friend has written a detailed installation guide here. Please let me know if you encounter any issues with the guide or if it seems outdated.

Important Note: Configuring authentication and rules for Firebase requires some prior experience with the platform.

Conclusion

Building open-source projects hones my coding and writing. I'm excited to share this app! Feedback on the app or installation guide is highly appreciated. Stay tuned for more projects coming soon!

I built a free, open-source project manager that helps teams keep costs under $15/month.

hudy9x — Sun, 19 May 2024 13:04:41 +0000

Hi everyone, Hudy here!

Today, I'm excited to share my open-source project manager with you all. I built this from the ground up with the goal of keeping operational costs under $15 per month.

Before I deciding to build it, I tried Trello, Jira and Clickup. All of them are fantastic tools, but the cost was a major barrier for us. As a small team of 7 - 10 members at a Vietnamese startup, we simply didn't have the budget for these paid platforms.

You might be wondering why we didn't just use the free tier. Here's the thing: I believed I could build a project manager that offered the specified features we needed, like Reports, Exporting capabilities, Boards, Calendars and more.

Additionally, I had a significant amount of free time at that point, which made it a good opportunity to take on this project.

I open-source this app on github: https://github.com/hudy9x/namviek or you can check out the website namviek.com

Who is this for ?

This project is a great fit for people with developer skills who are running a small team on a limited budget, similar to me.

It might seen daunting at first, but see the cost report below. I was able to significantly reduce the operational cost from $49 per month ($7 x 7 member) to less than $10 per month.

How did I keep the cost low ?

I leveraged a variety of free platforms to minimize operational costs. Here's a breakdown:

Vercel: for the frontend (Free)
Aws Lightsail: for the backend (Paid)
Aws S3: for file storage (Paid)
Resend: sending email (Free)
Cloudflare: to manage my domain (Free)
Github Action: CD automation (Free)

My Tech Stack

To ensure fast building and deployment, I opted for Next.js on the frontend as it seamlessly integrates with Vercel. For the backend, I currently use Node.js, but I have plans to migrate some funtionalities to Golang in the comming future.

What features are packed in ?

As mentioned before, this app includes some essential features for a small team such as:

List view

See it all at once. Prioritize and manage your tasks in a simple list.

Board view

Visualize your workflow. Move tasks between stages for clear progress tracking.

Goal view

Stay on target. See your progress at a glance and celebrate milestones.

Calendar view

Plan your days. Never miss a deadline with tasks scheduled on your calendar.

Custom view

Work your way. Design the perfect view to fit your specific needs.

How to use it.

Check out the setup guide. If you encounter any errors during the setup process, you can refer to the full guide here.

Maybe you prefer a step by step video guide? Check out this video below:

Contribute your features or bug fixes

This app is still under development, and I welcome your contributions to improve it! Feel free to submit feature requests and bug fixes.

Want to suggest a better solution or a code base refactoring? Just create a pull request and I'd be happy to discuss it.

Conclusion

Finally, I hope this open-source helps you and your team reduce operational costs while offering the opportunity to learn new skills by fixing bugs and building features. It will always be free to use.

See you in the next open-source app :D

I built a simple keystroke application for Windows

hudy9x — Sun, 30 Apr 2023 01:50:55 +0000

Introduction

Hi friends, it's hudy here. In this tutorial, I'm so excited to show you how I built a keystroke application for Windows that inspired by KeyCastr. You guys maybe wondering why do I have to build a keystroke when there are numerous similar applications for Windows ? That's simply because I personally find their UI/UX to be too unappealing

In this tutorial I just made a simplest version of it. So if you want to get full source code and guide, please visit the homepage below to download and access to my repo.

Source code

Here is the homepage and github repo: https://hudy9x.github.io/keyreader/

Feel free to download, fork or contribute it

Video version

I made a video version as well, you guys can watch it here
https://www.youtube.com/watch?v=hhwjGIICLuA&t=10s

Prerequisite

Well, I've used some tech for building this app

Yarn or Npm - I use yarn
Tauri - a toolkit for building desktop application
Reactjs
Tailwindcss
rdev - a rust crate for listening keystroke event
Typescript basic

Make sure that you have yarn and tauri installed. Now, let's get started

Implementation

Open your terminal and create new Tauri project called keyreader. The project use react-ts - means Reactjs with typescript and yarn as a package manager



$ yarn create tauri-app keyreader --template react-ts --manager yarn
$ cd keyreader
$ yarn
$ yarn tauri dev

After running above commands (It'll take a few minutes). The following UI shown means we created Tauri app successfully

Remove redundant files in source base

Just keep main files and remove redundant files. I just removed files inside public and src folder

Install tailwindcss (optional)

I'd love to use tailwindcss for styling cuz it's so useful. But you guys don't need to. Please take a look at the installation instruction here or follow the guide below



$ yarn add --dev tailwindcss postcss autoprefixer
$ yarn tailwindcss init -p

Add the paths to all of your template files in your tailwind.config.js file.



/** @type {import('tailwindcss').Config} */
export default {
  content: ["./src/**/*.{js,ts,jsx,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

Now, add the @tailwind directives for each of Tailwind’s layers to your ./src/styles.css file.



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

Open src/App.tsx and add some class



function App() {
  return <div className="text-red-400">Hello world</div>;
}

export default App;

Then run the app again, if text turn to red that means it works



$ yarn tauri dev

Keystroke listener

This is the core of our app. I'll create a keyboard_listener.rs file for watching keystrokes that users typed. To do that, we use rdev crate.

Install crate by opening src-tauri/Cargo.toml and add rdev to [dependencies] section



[build-dependencies]
tauri-build = { version = "1.2", features = [] }

[dependencies]
# ...
rdev = "0.5.2"

Time to create the listener



// ./src-tauri/src/keyboard_listener.rs
use rdev::{listen, Event, EventType};

pub fn run_listener<F>(emit: F)
where
    F: Fn(&str, &str) + 'static,
{
    if let Err(error) = listen(move |event| callback(event, &emit)) {
        println!("Error: {:?}", error)
    }
}

fn callback<F: Fn(&str, &str)>(event: Event, emit: &F) {
    match event.name {
        Some(string) => {
            println!("Some: {}", string);
            emit("Some", &string);
        }
        None => {
            match event.event_type {
                EventType::KeyPress(key) => {
                    println!("KeyPress: {:?}", key);
                    let key_str = format!("{:?}", key);
                    emit("KeyPress", &key_str);
                }
                EventType::KeyRelease(key) => {
                    let key_str = format!("{:?}", key);
                    emit("KeyRelease", &key_str);
                }
                EventType::MouseMove { .. } => {
                    // Ignore MouseMove event type
                }
                _ => {
                    // println!("None: {:?}", event.event_type);
                    // let event_type_str = format!("{:?}", event.event_type);
                    // emit(&event_type_str);
                }
            }
        }
    }
}

The above script's simply using listen method from rdev to watch keystrokes. All aphabet characteres return in Some event and the others like Ctrl, Alt, Caplocks, ... return in None. So we've to read it by comparing event.event_type with EventType type.

One more thing, open src-tauri/src/main.rs and use the listener



// ./src-tauri/src/main.rs

// Prevents additional console window on Windows in release, DO NOT REMOVE!!
#![cfg_attr(not(debug_assertions), windows_subsystem = "windows")]

mod keyboard_listener;
use std::thread;
use tauri::Manager;

#[derive(Clone, serde::Serialize)]
struct Payload {
    mode: String,
    message: String,
}

// Learn more about Tauri commands at https://tauri.app/v1/guides/features/command
#[tauri::command]
fn greet(name: &str) -> String {
    format!("Hello, {}! You've been greeted from Rust!", name)
}

fn main() {
    tauri::Builder::default()
        .invoke_handler(tauri::generate_handler![greet])
        .setup(move |app| {
            let wv = app.get_window("main").unwrap();

            thread::spawn(move || {
                keyboard_listener::run_listener(move |s: &str, s1: &str| {
                    if let Err(err) = wv.emit(
                        "keypress",
                        Payload {
                            mode: String::from(s),
                            message: String::from(s1),
                        },
                    ) {
                        eprintln!("Error while emitting event: {:?}", err);
                    }
                })
            });

            Ok(())
        })
        .run(tauri::generate_context!())
        .expect("error while running tauri application");
}

Run the app again and try to type something. If you got logs shown in terminal that means rdev works.

Display keystroke on Reactjs

For now, register a event listener on the view. Open src/App.tsx and register a keypress event as follow



import { useEffect, useState } from "react";
import { listen } from "@tauri-apps/api/event";

export default function App() {
  const [alphabeticKeys, setAlphabeticKeys] = useState<string[]>(["NONE"]);
  useEffect(() => {
    listen("keypress", ({ payload }) => {
      let { message, mode } = payload as { message: string; mode: string };
      if (mode === "Some") {
        setAlphabeticKeys((prevTickers) => {
          let max = 15;
          let newTickers = [];
          const charCode = message.charCodeAt(0);

          if (charCode === 32) {
            message = "␣";
          }

          newTickers = [...prevTickers, ...[message]];

          const currLen = newTickers.length;
          newTickers = currLen > max ? newTickers.slice(1) : newTickers;

          return newTickers;
        });
        console.log(message);
      }
    });
  }, []);
  return (
    <div data-tauri-drag-region className="bg-black">
      <div className=" px-4 py-3 text-3xl text-white flex items-center gap-1 pointer-events-none">
        {alphabeticKeys.map((key, index) => {
          return <div key={index}>{key}</div>;
        })}
      </div>
    </div>
  );
}

I use Inter font for fixing UX bug that make Esc character shorter than the others



/*.........*/

@font-face {
  font-family: "Inter";
  src: url("/fonts/Inter-Regular.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "Inter";
  src: url("/fonts/Inter-Bold.ttf") format("truetype");
  font-weight: bold;
  font-style: normal;
}

:root {
  font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;

  color: #0f0f0f;
  background-color: transparent;

  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
}

body {
  @apply flex items-center justify-center h-screen overflow-hidden;
}

Re-run the app one more time. It's testing time guys

Make background transparent and hide titlebar

Last thing to do for better UI is hiding titlebar and make the background transparent. It's so simple, just open src-tauri/tauri.conf.json and add some config fields



{
  // ...
  "tauri": {
    "allowlist": {
      // .... For custom titlebar to drag, close, ... window
      "window": {
        "all": false,
        "close": true,
        "hide": true,
        "show": true,
        "maximize": true,
        "minimize": true,
        "unmaximize": true,
        "unminimize": true,
        "startDragging": true
      }
    },
    "bundle": {
      // ..... Rename to build app
      "identifier": "com.keyreader.app",
    },
    // ....
    "windows": [
      {
        "fullscreen": false,
        "resizable": true,
        "title": "KeyReader",
        "width": 400,
        "height": 200,
        "decorations": false,  // turn of titlebar
        "transparent": true // make background transparency
      }
    ]
  }
}

Wait for a few minutes to rebuild the app. And here is our result

Modifier keys

Just now, I show you how to display alphabet keys. So what if modifier keys like Ctrl, Enter, Space, Alt, etc... ?

You guys just use mode variable for checking these keys. For examples.



listen("keypress", ({ payload }) => {
  let { message, mode } = payload as { message: string; mode: string };
  let charCode = message.charCodeAt(0)

  if (mode === "Some") {/*...*/}
  if (mode === "KeyPress") {
    if (message=== "ControlRight") {
      message = "⌃"
    }

    // update state
  }
}

Still don't get it? Scroll to top and refer to my video or repo

Conclution

So far, I just show you how to listen keystrokes event from keyboard using rdev. And send it to Tauri view by registering an event. Hope you guys learn something news about building desktop application using Reacjts and Tauri.

How i setup my development env on Windows 11 for Web deverloper in 2023

hudy9x — Sat, 31 Dec 2022 10:52:13 +0000

⚒ Install 📺 Windows Terminal and Powershell from Microsoft Store

Go to Microsoft Store, find “Windows Terminal“ and install it. Keep searching “Powershell“ in Microsoft Store and install it as well. Now, open the Windows Terminal and select default shell as Powershell that just installed.

If Powershell not displayed in Window Terminal, please add new Profile and reload the terminal

🧩 Install choco

Go to https://chocolatey.org/install and find the following installation command. Run it in Powershell



$ Set-ExecutionPolicy Bypass -Scope Process -Force; [System.Net.ServicePointManager]::SecurityProtocol = [System.Net.ServicePointManager]::SecurityProtocol -bor 3072; iex ((New-Object System.Net.WebClient).DownloadString('https://community.chocolatey.org/install.ps1'))

🏀 Install Oh-my-posh, a prompt theme engine

Open terminal and run the following command to install oh-my-posh



$ winget install JanDeDobbeleer.OhMyPosh -s winget

After installation success, open Powershell profile by typing notepad $profile and paste below config inside it



clear
oh-my-posh init pwsh --config "$env:POSH_THEMES_PATH/takuya.omp.json" | Invoke-Expression

However, it’s not the end, in order to display oh-my-posh themes, we’ve got to install at least a Nerd Font. Go to https://www.nerdfonts.com/font-downloads and download one. For me, i chosen Caskaydia Cove Nerd Font.

Extract font .zip file and select Caskaydia Cove Nerd Font Complete Mono Regular

Now, restart powershell and enjoy the new terminal interface 😁

⚽ Install neovim

For now, we only install it for editting purpose. I'll install packages at the last



$ winget install Neovim.Neovim

Configure alias for starting neovim quickly



$ nvim $profile

// now, input the following command
Set-Alias -Name vim -Value nvim

🥎 Install scoop - package management for Windows

I use scoop for package management on windows. Because packages that installed by it does not require any system permission. So just type your package, and install it.



$ irm get.scoop.sh | iex

🎲 Install git

It's important tool for a developer 😁



$ scoop install git

Now, we need to configure git alias for better performance



$ git config --global alias.co checkout
$ git config --global alias.br branch
$ git config --global alias.ci commit
$ git config --global alias.st status

Adding an alias for git command. This step is optional



$ nvim $profile

// now, input the following command
Set-Alias -Name g -Value git

Configure git ssh - go to another document



$ ssh-keygen -t ed25519 -C "your@email.here"

Testing with git clone command



$ git clone git@github.com:hudy9x/kompad-homepage.git

🎯 Install nvm vs nodejs



$ scoop install nvm
$ nvm install lts
$ nvm use lts

💊 Install yarn and python

I personally love to use yarn for nodejs package management



$ scoop install yarn
$ scoop install python // optional

🎹 Install ripgrep for searching tool

This package only used for searching text, file.



$ scoop install ripgrep

Install Neovim plugins

One thing to keep in mind that, this step does not walk you throught from the beginning of setting up a neovim workspace. I just install my Neovim plugins. So if you looking for a fully setup guide, maybe it's not for you.

First, install llvm that requires for nvim-treesitter on Windows



$ choco install llvm // run this in Admin mode

I user Packer for package management, install it



$ git clone https://github.com/wbthomason/packer.nvim "$env:LOCALAPPDATA\nvim-data\site\pack\packer\start\packer.nvim"

Alright, now clone my dotfiles that contains all my setup: https://github.com/hudy9x/dotfiles.



$ git clone https://github.com/hudy9x/dotfiles.git

And then, copy all files and folders inside .config/nvim to your neovim's config folder. If you don't know where it is, open neovim and type the command



$ nvim
// Neovim opened, then pressing ESC and type
:echo stdpath('config')

The path outputed below is your neovim's config folder. Now, copy all config to there.

Ok, open neovim and run the command



:PackerInstall

Wait for minutes, after the installation finished then we done

However, if you got some errors about :TSUpdate in the installation process. Just don't worry, close neovim and reopen it again. Neovim will re-run :TSUpdate automatically, wait to this process done and check again.

Notice that, you should run :TSUpdate with no file opened. Otherwise it might be cause some error as below

If you still got another error, like me, it's about tree-sitter/highlighter.

Then close neovim, reopen it and run the command :TSUpdate vim. It might be fix that issue.

Conclusion

Hope this guide helps you to setup the workspace quickly. Thanks guys for taking your time to read this. See you in another post