DEV Community: Nelson Li

🚀 iForgeAI — Build Software with an AI Digital Team

Nelson Li — Fri, 27 Mar 2026 09:12:09 +0000

iForgeAI is an AI-driven digital team designed to help you build software end-to-end through structured workflows.

Unlike traditional AI tools that act as isolated assistants, iForgeAI organizes AI agents into specialized roles — working together like a real software team. From requirement analysis and planning to development and execution, every step is connected through a clear workflow system.

This means you’re not just prompting a model — you’re orchestrating a team.

iForgeAI is built with a human-first philosophy:
AI doesn’t replace developers, it augments them. It helps you think better, plan clearer, and execute faster — while keeping you fully in control.

🧠 What makes iForgeAI different?

AI Agents as a Team — Not standalone copilots, but role-based collaborators
Workflow-driven execution — From idea → plan → build → deliver
Structured software process — Inspired by real-world engineering teams
Extensible architecture — Ready to integrate with your own tools and systems

🔗 GitHub

👉 https://github.com/nelson820125/iforgeai

From Task-Centric to Resource-Aware: Rebuilding a Gantt Chart for Real Projects

Nelson Li — Tue, 10 Feb 2026 03:13:23 +0000

Most Gantt charts look correct.

Tasks are scheduled.
Dependencies are respected.
Timelines appear clean.

And yet, projects still slip and teams still burn out.

After building and integrating scheduling tools in real-world systems, I kept seeing the same pattern:

Gantt charts are very good at modeling tasks —

but surprisingly bad at modeling people.

This post shares why that happens, and how I approached rebuilding a Gantt chart to be resource-aware in version 1.9.0.

The real problem: tasks don’t consume time, people do

Traditional Gantt charts answer one question extremely well:

When does this task happen?

But they struggle with a more important one:

Who is being used, how much, and at the same time?

In reality:

A single person often works on multiple tasks concurrently
Each task consumes only part of their capacity
Overload accumulates gradually, not discretely

When this information is hidden, schedules look correct right up until they fail.

Shifting perspective: introducing Resource View

In v1.9.0, the chart supports two explicit modes:

Task View — rows represent tasks (classic Gantt)
Resource View — rows represent resources (people, machines, workstations)

viewMode: 'task' | 'resource'

In Resource View:

Each row corresponds to a resource
Multiple task bars may overlap in the same time window
Layout is calculated dynamically rather than blindly stacked

This shift doesn’t just change the UI — it changes how scheduling problems are understood.

Making resource allocation explicit

To support resource-first planning, the Task model was extended with allocation data:

resources: [
  { resourceId: 'devA', percent: 50 },
  { resourceId: 'devB', percent: 30 }
]

Design decisions behind this model:

Allocation is explicit (10–100%)
Multiple resources per task are supported
Backward compatibility is preserved (defaults to 100%)

Once allocation is first-class data, the system can reason about capacity instead of assumptions.

Visualizing load instead of hiding it

Numbers alone don’t help if they’re buried in dialogs.

So allocation is visualized directly on the timeline:

Task bar height scales with allocation percentage
Percent labels are visible inline
Tooltips expose detailed allocation context

This makes resource pressure visible without any clicks.

Detecting overload when it actually happens

The most important feature added in v1.9.0 is overload detection.

Within the same time window:

Same resource
Multiple tasks
Accumulated allocation exceeds 100%

The chart highlights overload visually at the exact point it occurs.

This is where a Gantt chart stops being a passive timeline and starts acting as a decision-support tool.

Interaction parity across views

Resource View is not a read-only visualization.

All core interactions remain available:

Dragging tasks
Resizing timelines
Time-based adjustments

If a view affects planning decisions, it should support planning actions.

Architecture and performance considerations

To keep this scalable and maintainable:

Resource layout logic was extracted into independent composables
Rendering optimizations were expanded using memoization
Scroll debouncing was reintroduced to balance responsiveness and performance
Theme scoping was fixed at the component level to avoid global side effects

The goal was to add capability without adding architectural debt.

Closing thoughts

Good scheduling tools shouldn’t just tell us when work happens.

They should help answer a harder question:

Is this plan actually feasible for the people involved?

Making resource usage visible changes how teams reason about schedules.
v1.9.0 is a step toward more honest planning tools.

If you’re building planning, scheduling, or resource-heavy systems,
I’d love to hear how you approach resource modeling in practice.

Demo Video

Jordium GanttChart v1.8.0

Nelson Li — Sat, 17 Jan 2026 13:34:22 +0000

👉 YouTube

Jordium GanttChart v1.7.1: Making a Gantt Component Truly Controllable in Vue 3

Nelson Li — Tue, 13 Jan 2026 03:40:22 +0000

Jordium GanttChart is a Vue 3–based Gantt chart component designed for project management, APS scheduling, and complex admin systems.

With v1.7.1, the focus shifts from “feature completeness” to something more important in real systems:

How do you design a complex UI component that is fully controllable by the host application?

What Changed in v1.7.1

Core Gantt behaviors are now externally controllable
Clear separation between state (Props) and actions (Expose API)
Context menus refactored into declarative Vue components
Internal structure simplified for long-term maintainability
Dependency upgrades and security fixes

1. State-Driven Control via Props

The GanttChart component now supports the following props:

locale
theme
timeScale
fullscreen
expandAll

This allows the host application to manage:

Global language switching
Light / dark theme control
Time scale changes (hour / day / month / year)
Fullscreen toggling
Expand / collapse of task hierarchies

👉 The Gantt chart no longer owns these states internally—it reacts to the system state instead.

2. Action-Driven Control via defineExpose

For interaction-heavy scenarios, v1.7.1 exposes an imperative API using defineExpose.

Internationalization

setLocale()
currentLocale

Theme & Time Scale

setTheme()
currentTheme

setTimeScale()
zoomIn()
zoomOut()
currentScale

Fullscreen Control

toggleFullscreen()
enterFullscreen()
exitFullscreen()
isFullscreen

Expand / Collapse Tasks

toggleExpandAll()
expandAll()
collapseAll()
isExpandAll

Scroll & Focus Helpers

scrollToToday()
scrollToTask(taskId)
scrollToDate(date)

Design principle:

Props control state.
Exposed methods control behavior.

This keeps APIs predictable and composable.

3. Declarative Context Menus

Task list and task bar context menus are now implemented as Vue components instead of configuration objects:

TaskListContextMenu
TaskBarContextMenu

Features include:

Full slot support for menu customization
Simple enable / disable flags:
- enable-task-list-context-menu
- enable-task-bar-context-menu

This improves:

Readability
Reusability
Integration with business logic

4. Internal Refactoring for Maintainability

The TaskList module was split into smaller subcomponents:

Reduced file size
Clearer responsibilities
Better foundation for future features like virtual scrolling

These changes don’t alter behavior, but they matter for long-term evolution.

5. Dependency & Security Updates

Upgraded and patched:

happy-dom
jspdf
vitest

Why This Release Matters

In real-world enterprise systems:

UI state is often managed globally
Complex components must be orchestrated, not isolated
Declarative + imperative APIs need a clear boundary

Jordium GanttChart v1.7.1 formalizes that boundary.

Project Links

🔗 GitHub:
https://github.com/nelson820125/jordium-gantt-vue3

🔗 Demo:
https://nelson820125.github.io/jordium-gantt-vue3/

Video

👉 YouTube

Final Thoughts

This release marks a transition from a “feature-rich widget” to a system-ready component.

If you’re building:

Project management tools
Manufacturing or APS scheduling systems
Complex Vue 3 dashboards

I’d love to hear how you’re designing controllable UI components in your own projects.

Jordium GanttChart Vue3 v1.6.0: Declarative Task Table, Slots, and Better Interactions

Nelson Li — Mon, 15 Dec 2025 11:29:33 +0000

When building real-world scheduling or project management systems, the hardest part of a Gantt chart is often not the timeline—but the task table and interactions around it.

Jordium GanttChart Vue3 v1.6.0 focuses on improving extensibility, customization, and usability, while keeping backward compatibility for existing projects.

🔑 Key Highlight: Declarative Task Table Columns

Version 1.6.0 introduces declarative Task Table column definitions via the new TaskListColumn component.

Why this matters:

Clearer and more readable column structure
Aligns with Vue’s component-based mental model
Better support for complex columns and business logic
Easier long-term maintenance and extension

The Task Table is no longer just configuration-driven—it becomes composable UI.

🧩 Task Table with Full Slot Support

To complement declarative columns, the Task Table now supports:

#header slot for custom headers
#default slot for custom cell rendering

This allows you to embed:

Status indicators and icons
Progress bars and warnings
Action buttons and menus
Any custom business component

🖱️ Improved Task Interactions

Drag & Drop in the Task List

Reorder tasks directly in the list
Adjust hierarchy and sequence
Ideal for frequently changing schedules

Visual Dependency Lines on the Timeline

Add and remove task dependencies visually
Two-way sync between UI and data
More intuitive than configuration-only approaches

🌐 uni-app Compatibility

v1.6.0 improves compatibility with uni-app, making it easier to reuse the same Gantt chart across:

Web / H5
Mini Programs
App environments

🎨 Display & Styling Enhancements

Toggle task icon visibility via TaskListConfig
Row-level styling support:
- task-list-row-class-name
- task-list-row-style
Useful for highlighting critical or delayed tasks

🔁 Backward Compatibility

To ensure smooth upgrades:

task-list-column-render-mode allows switching between
- legacy config-based columns
- new declarative columns

No forced migration required.

🎥 Video Demo

A short demo video showing declarative columns, slots, drag & drop, and dependency lines:

👉 YouTube

🔗 Links

GitHub:
https://github.com/nelson820125/jordium-gantt-vue3

Docs & Live Demo:
https://nelson820125.github.io/jordium-gantt-vue3

📝 Final Thoughts

Jordium GanttChart Vue3 is designed not just to display timelines, but to serve as a foundation for real-world planning and scheduling systems.

If you’re building project management tools, APS systems, or multi-platform scheduling apps with Vue 3, v1.6.0 brings a more scalable and customizable approach.

Feedback and contributions are welcome 🚀

🚀 Jordium Gantt Vue3 v1.4.3 — High-Performance Gantt Charts for Large Datasets

Nelson Li — Sun, 30 Nov 2025 09:00:36 +0000

I just released Jordium Gantt Vue3 v1.4.3, focusing on one key thing: performance at scale.

Gantt charts are widely used in project management and production scheduling, but most libraries struggle once you reach thousands of tasks. This release addresses those bottlenecks with virtualized scrolling and virtualized rendering, making even 10,000+ tasks scroll and render smoothly.

Video

YouTube

🔹 Key Highlights in v1.4.3

Virtualized Scrolling: Only visible tasks are rendered in TaskList & Timeline, dramatically improving scroll performance.
Virtualized Rendering: Reduces DOM overhead by rendering elements on demand.
Optimized Large-Data Rendering: Handles industrial-scale datasets in APS/MES, project planning, and resource management systems.
New Large-Data Demo: Test and see performance improvements in real-world scenarios.
Security Updates: jsPDF vulnerabilities fixed.

💡 Why this matters

If you’ve ever tried building a Gantt chart in the browser and watched it choke on large datasets, this release is a game-changer.

It’s open-source, lightweight, and designed for developers who need scalable, high-performance Gantt charts in Vue.js projects.

Check it out, test with your datasets, and feedback is always welcome!

Repo

Github: github
Demo: demo

Jordium.Snowflake.NET — A Fast and Lightweight Distributed ID Generator for .NET

Nelson Li — Sun, 16 Nov 2025 07:24:10 +0000

If you're building distributed systems in .NET, generating unique IDs efficiently can become a real challenge. GUIDs are too long and not index-friendly, database auto-increments don’t scale, and external ID services add extra overhead.

So I built Jordium.Snowflake.NET — a fast, configurable, and dependency-free ID generator based on the Snowflake algorithm, designed specifically for .NET developers.

🚀 Why Use It?

High throughput — capable of generating millions of IDs per second

Configurable — customize data center ID, worker ID, and sequence bits

Zero dependencies — no Redis, no DB, no external service needed

Production-ready — ideal for microservices and distributed systems

MIT licensed — open, simple, easy to adopt

🧩 Use Cases

Primary keys in distributed databases

Order numbers and payment transaction IDs

Logging, tracing, and event correlation

Any system requiring high-volume unique identifiers

🛠️ Quick Start
using Jordium.Snowflake;

var generator = new SnowflakeIdGenerator(1, 1);
long id = generator.NextId();

Console.WriteLine(id);

That’s it — globally unique, sortable 64-bit IDs with almost zero overhead.

🔗 GitHub

Source code, documentation, and examples:
https://github.com/nelson820125/Jordium.Snowflake.NET

🎥 Video Demo

To help you quickly understand how Jordium.Snowflake.NET works in real-world usage, here’s a short demonstration video.

In this demo, you’ll see:

How to initialize the ID generator
How IDs are created in real time
How the library behaves under high-concurrency load
Example usage inside a .NET service

If you're viewing this on a platform that supports embedded video, the player will appear below. Otherwise, you can open the link manually.

👉 Video Link: （https://youtu.be/KaXEnIPiuXk）

If you find it useful, a ⭐️ would mean a lot!

Jordium Gantt Vue3 Update — Canvas Optimized, Dragging Reimagined

Nelson Li — Thu, 13 Nov 2025 07:38:31 +0000

Thanks for checking out Jordium Gantt Vue3 v1.4.2-patch.3!
This update focuses on major performance optimizations and smoother interactions, especially for large-scale canvas rendering.

✨ Highlights:

Added vertical & horizontal view dragging

Improved canvas rendering performance

Prevented redraw during drag

Replaced DOM/SVG implementations with pure canvas

Added path caching + debounce + shallowRef optimization

🎥 Demo: YouTube Video

Feedback and suggestions are always welcome! 🚀

🌐 Project Links

GitHub: https://github.com/nelson820125/jordium-gantt-vue3

NPM: https://www.npmjs.com/package/jordium-gantt-vue3

Coming Soon: Jordium Gantt Vue3 v1.4.2 – Modern Gantt Chart Component for Vue 3

Nelson Li — Fri, 07 Nov 2025 01:23:33 +0000

I’ve been working on Jordium Gantt for Vue 3, a high-performance Gantt chart component for project management and task scheduling.

v1.4.2 focuses on:

Smarter timeline range optimization
Draggable & resizable TaskBars that auto-expand the timeline
TaskBar avatars & focus highlight for better task visibility

Built with Vue 3 + TypeScript, it’s lightweight, customizable, and perfect for modern project planning apps.

Stay tuned — the Product Hunt launch is happening soon!

Demo: https://nelson820125.github.io/jordium-gantt-vue3/

🚀 Built a Customizable Gantt Chart Component for Vue 3 — Introducing Jordium GanttChart v1.4.2

Nelson Li — Mon, 03 Nov 2025 06:27:13 +0000

Hey everyone 👋

I’m excited to share something I’ve been building over the past few months — a modern and customizable Gantt Chart component for Vue 3, called Jordium GanttChart
.

This project started from a simple need:

I couldn’t find a Vue 3 Gantt component that’s lightweight, visually modern, and fully customizable for project management use cases.

So, I decided to build one myself.

🎯 What is Jordium GanttChart?

Jordium GanttChart is a Vue 3 component library designed for project scheduling, task management, and visual planning — similar to tools like ClickUp, Clockify, or MS Project, but fully open-source and easy to integrate into your own app.

👉 Demo: Live Example

👉 GitHub: jordium-gantt-vue3

👉 NPM: npm install jordium-gantt-vue3

✨ Key Features (v1.4.2)

🧩 Vue 3 + Composition API support

🎨 Flexible layout (pixel or percentage width)

🖱️ Drag, resize, and adjust TaskBars & Milestones

🌈 Configurable TaskBar focus effect — long-press to highlight and focus specific tasks

⚙️ Customizable timeline range and auto-fit

🧠 Fully typed with TypeScript

📦 Easy integration with Element Plus

💡 Why I Built It

When working on internal project scheduling tools, I realized:

Most open-source Gantt libraries are outdated or based on Vue 2

Many are too heavy, with limited custom styling or API flexibility

I wanted something modular, intuitive, and developer-friendly

So I decided to make one that developers could actually enjoy using — and extend it freely for different kinds of project planning systems.

🛠️ Quick Start

Install via npm:

npm install jordium-gantt-vue3


Import it in your Vue 3 project:

import { JordiumGantt } from 'jordium-gantt-vue3';
import 'jordium-gantt-vue3/style.css';


Then use it directly in your template:

<template>
  <JordiumGantt :tasks="tasks" />
</template>

🌞 New in v1.4.2

This release adds several improvements to usability and flexibility:

Added TaskBar focus highlight (long-press to focus)

Configurable TaskBar info display

Smarter timeline range auto-calculation

Improved drag/resize precision

🧭 Roadmap

✅ Milestone management

✅ Drag & resize

🔜 Dependency lines (Task relations)

🔜 Export & snapshot support

🔜 Performance optimization for large data sets

❤️ Join the Project

If you like this idea or find it useful:

⭐ Star the repo on GitHub

🧩 Try it in your own Vue 3 project

💬 Share feedback or ideas — contributions are always welcome!

📍 GitHub: https://github.com/nelson820125/jordium-gantt-vue3
📍 Live Demo: https://nelson820125.github.io/jordium-gantt-vue3

Thanks for reading! I hope this project helps others building modern project management or scheduling tools with Vue 3.
If you build something cool with it — I’d love to see it!