Home

Articles & Guides

Bài viết & Hướng dẫn

Programming courses, tool guides, and tutorials on browser-based tools built with JavaScript.

Khóa học lập trình, hướng dẫn công cụ và bài viết về các ứng dụng chạy trên trình duyệt bằng JavaScript.

Programming Courses

Khóa học lập trình

AI

AI from Zero to Master — Neural Networks to LLMs — 19-Lesson Course

Trí Tuệ Nhân Tạo: Từ Neuron Đến LLM — Lộ Trình 19 Bài Học

Build AI from scratch in vanilla JavaScript — no API calls: linear regression, gradient descent, your own tensor engine + autograd, MLP/CNN, MNIST digit recognition, embeddings, Transformer, GAN/Diffusion, Q-learning, and a capstone Vietnamese GPT-mini trained live in your browser.

Tự xây AI từ số 0 bằng vanilla JavaScript — không gọi API: hồi quy tuyến tính, gradient descent, tự viết tensor engine + autograd, MLP/CNN, nhận dạng chữ số MNIST, embedding, Transformer, GAN/Diffusion, Q-learning, và capstone GPT-mini tiếng Việt train ngay trong trình duyệt.

19 Lessons Lộ trình 19 bài học
Start learning → Bắt đầu học →
Kỹ Sư AI Thực Chiến

AI Engineer Roadmap: Web Dev to Generative AI Specialist — 20-Lesson Course

Kỹ Sư AI Thực Chiến: Lộ Trình Web Dev Lên AI Specialist — 20 Bài Học

Transition your career from Web Development to AI. Learn Python, PyTorch, MLP/CNN training, Self-Attention & Transformers, LLM APIs, RAG, and stateful AI Agents offline.

Chuyển dịch sự nghiệp từ Web Dev sang AI. Làm quen Python, PyTorch, huấn luyện MLP/CNN, cơ chế Self-Attention & Transformer, API LLM, hệ thống RAG và AI Agent có trạng thái chạy offline.

20 Lessons Lộ trình 20 bài học
Start learning → Bắt đầu học →
Kỹ Thuật Hệ Thống AI

AI Systems Engineering: Pipelines to Multi-Agent Orchestration — 13-Lesson Course

Kỹ Thuật Hệ Thống AI: Từ Pipeline Đến Đội Ngũ Agent — Lộ Trình 13 Bài Học

Go beyond training a model: the real industrial lifecycle (data pipeline, distributed training, RLHF, red-teaming, rollout), then hand-write your own agent framework and orchestrate a multi-agent system with a blackboard and deadlock handling.

Vượt xa việc huấn luyện model: vòng đời công nghiệp thật (data pipeline, huấn luyện phân tán, RLHF, red-team, rollout), rồi tự tay viết framework agent và điều phối hệ multi-agent với blackboard, xử lý deadlock.

13 Lessons Lộ trình 13 bài học
Start learning → Bắt đầu học →
Cơ Sở Dữ Liệu Vector

Vector Databases from Scratch: Metrics, Indices, and RAG — 9-Lesson Course

Cơ Sở Dữ Liệu Vector từ Số 0: Thuật Toán, Chỉ Mục & RAG — Lộ Trình 9 Bài Học

Learn the inner workings of Vector Databases: embeddings pipelines, geometric similarity metrics, hybrid storage, IVF indexing, HNSW graph structures, Product Quantization, metadata filtering, and build a capstone local RAG search engine.

Lộ trình học Cơ sở dữ liệu Vector chuyên sâu từ số 0: pipeline nhúng dữ liệu, độ đo tương đồng hình học, lưu trữ hybrid, chỉ mục IVF, cấu trúc đồ thị HNSW, lượng tử hóa Product Quantization, bộ lọc metadata và capstone project RAG Search Engine chạy 100% trên browser.

9 Lessons Lộ trình 9 bài học
Start learning → Bắt đầu học →
Kiến Trúc Máy Tính

Computer Architecture: From Logic Gates to Quantum — 12-Lesson Course

Kiến Trúc Máy Tính: Từ Cổng Logic Đến Lượng Tử — Lộ Trình 12 Bài Học

Explore the hardware stack running directly in your browser: logic gates, ALU, RISC-V pipelining, speculative execution, cache architectures, Apple Silicon UMA, and quantum qubits.

Khám phá thế giới phần cứng chạy trực tiếp trong trình duyệt: cổng logic, ALU, đường ống dẫn RISC-V Pipeline, thực thi suy đoán, kiến trúc Cache, Apple Silicon UMA và qubit lượng tử.

12 Lessons Lộ trình 12 bài học
Start learning → Bắt đầu học →
DSP

Digital Signal Processing: From Samples To Spectrum — 15-Lesson Course

Xử Lý Tín Hiệu Số: Từ Mẫu Đến Phổ — Lộ Trình 15 Bài Học

Every DSP algorithm hand-written in vanilla JS — no black-box AnalyserNode: sampling & aliasing, quantization, convolution, DFT/FFT, windowing, FIR/IIR filters, and a drag-to-hear pole-zero filter lab.

Mọi thuật toán DSP tự viết bằng JavaScript thuần — không dùng AnalyserNode hộp đen: lấy mẫu & aliasing, lượng tử hoá, tích chập, DFT/FFT, cửa sổ, filter FIR/IIR, và phòng thí nghiệm pole-zero kéo-thả-nghe.

15 Lessons Lộ trình 15 bài học
Start learning → Bắt đầu học →
Embedded

Embedded Systems: From Registers To RTOS — 16-Lesson Course

Hệ Thống Nhúng: Từ Thanh Ghi Đến RTOS — Lộ Trình 16 Bài Học

Bare-metal C on a self-built virtual MCU running in your browser: registers & memory-mapped I/O, GPIO, timers/PWM, interrupts & NVIC, UART, ADC, DMA, up to a preemptive RTOS with mutexes, semaphores, and a reenactment of the Mars Pathfinder priority-inversion incident.

C bare-metal trên một MCU ảo tự xây chạy ngay trong trình duyệt: thanh ghi & memory-mapped I/O, GPIO, timer/PWM, ngắt & NVIC, UART, ADC, DMA, đến RTOS preemptive với mutex, semaphore, và tái hiện sự cố priority inversion của Mars Pathfinder.

16 Lessons Lộ trình 16 bài học
Start learning → Bắt đầu học →
VLSI

VLSI & Digital IC Design — RTL to Silicon — 14-Lesson Course

Thiết Kế Vi Mạch Số & FPGA — RTL to Silicon — Lộ Trình 14 Bài Học

Master SystemVerilog RTL design: from 4-level abstraction (transistor → gate → RTL → behavioral) through complete design flow (synthesis, simulation, place & route, STA). Build circuits interactively with RTL Playground: write Verilog, visualize netlist, trace waveforms, explore FPGA/ASIC implementation.

Làm chủ thiết kế RTL với SystemVerilog: từ 4 mức trừu tượng (transistor → cổng → RTL → hành vi) đến quy trình thiết kế hoàn chỉnh (synthesis, mô phỏng, P&R, STA). Xây dựng mạch tương tác với RTL Playground: viết Verilog, trực quan hóa netlist, theo dõi waveform, khám phá FPGA/ASIC.

14 Lessons Lộ trình 14 bài học
Start learning → Bắt đầu học →
Electronics

Electronics & Circuit Simulation — In-Depth — 16-Lesson Course

Điện Tử & Mô Phỏng Vi Mạch — Chuyên Sâu — Lộ Trình 16 Bài Học

Learn basic components reading, multimeter (VOM) testing, Ohm/Kirchhoff laws, RC time constant, AC impedance, transformers, filters, antennas, logic gates, sequential memory cells (SRAM), and virtual MCU register programming — completely in-browser.

Học cách đọc trị số linh kiện, đo kiểm bằng vạn năng kế VOM, định luật Ohm/Kirchhoff, hằng số thời gian RC, trở kháng xoay chiều AC, máy biến áp, mạch lọc, ăng-ten, cổng logic, ô nhớ tuần tự (SRAM) và lập trình thanh ghi vi điều khiển ảo — hoàn toàn trên trình duyệt.

16 Lessons Lộ trình 16 bài học
Start learning → Bắt đầu học →
Circuit Repair Chẩn Đoán Mạch

Circuit Troubleshooting & Repair Course: From Block Diagrams to Hands-on Fixing — 8-Lesson Course

Chẩn Đoán & Sửa Chữa Mạch Điện Tử Thực Chiến — Lộ Trình 8 Bài Học

Master hardware troubleshooting from block diagrams to circuit schematic tracing. Learn how to use a virtual multimeter for live DC voltage and cold resistance/diode measurements, test passive/active components, and repair linear & switched-mode power supplies.

Làm chủ quy trình chẩn đoán mạch điện tử: Đọc sơ đồ nguyên lý/sơ đồ khối, sử dụng đồng hồ vạn năng ảo đo nóng điện áp tĩnh VDC/VAC và đo nguội trở kháng/tiếp giáp diode, kiểm tra linh kiện hỏng hóc và sửa nguồn tuyến tính/nguồn xung.

8 Lessons Lộ trình 8 bài học
Start learning → Bắt đầu học →
SQL In The Browser

SQL In The Browser — SQLite-WASM In-Depth — 17-Lesson Course

SQL trong Trình duyệt — SQLite-WASM Chuyên Sâu — Lộ Trình 17 Bài Học

Real SQLite compiled to WebAssembly, running 100% client-side: relational model & SELECT, JOIN, recursive CTEs/graph queries, window functions, query optimizer, SQLite internals (B-Tree/file format), transactions/ACID, JSON, FTS5, performance engineering, and WAL — with optional Docker PostgreSQL labs for what a browser can't demo.

SQLite thật biên dịch sang WebAssembly, chạy 100% phía client: mô hình quan hệ & SELECT, JOIN, CTE đệ quy/graph query, window function, query optimizer, nội tại SQLite (B-Tree/file format), transaction/ACID, JSON, FTS5, performance engineering, và WAL — kèm lab Docker PostgreSQL cho những gì browser không demo nổi.

17 Lessons Lộ trình 17 bài học
Start learning → Bắt đầu học →
Web Audio API

Web Audio API — Sound & Real-Time Visualization — 8-Lesson Course

Web Audio API — Âm Thanh & Trực Quan Hoá Thời Gian Thực — Lộ Trình 8 Bài Học

Hear the audio graph run, not just call play(): AudioContext lifecycle, oscillators & synthesis, gain/filter effects, AnalyserNode & FFT, file/mic input, spatial audio, and AudioWorklet — building up to a reactive Music Visualizer project.

Nghe đồ thị âm thanh chạy, không chỉ gọi play(): vòng đời AudioContext, oscillator & synthesis, hiệu ứng gain/filter, AnalyserNode & FFT, đầu vào file/mic, âm thanh không gian, và AudioWorklet — tiến tới dự án Music Visualizer phản ứng theo nhạc.

8 Lessons Lộ trình 8 bài học
Start learning → Bắt đầu học →
Git Internals

Git Internals Visualized — 13-Lesson Course

Git — Mô Hình Dữ Liệu & Quy Trình Làm Việc Trực Quan — Lộ Trình 13 Bài Học

See the commit DAG move, not just memorize commands: object model (blob/tree/commit), branches as pointers, three-way merge, rebase, cherry-pick, reflog recovery, bisect, remote collaboration, submodules/subtree, hooks/worktree, and tags — with an interactive Git graph simulator.

Nhìn thấy đồ thị commit di chuyển, không chỉ học thuộc lệnh: mô hình đối tượng (blob/tree/commit), branch là con trỏ, three-way merge, rebase, cherry-pick, phục hồi bằng reflog, bisect, hợp tác qua remote, submodule/subtree, hooks/worktree, và tags — với bộ mô phỏng đồ thị Git tương tác.

13 Lessons Lộ trình 13 bài học
Start learning → Bắt đầu học →
Data Structures & Algorithms

Visualized Data Structures & Algorithms — 12-Lesson Course

Cấu Trúc Dữ Liệu & Giải Thuật Trực Quan — Lộ Trình 12 Bài Học

See the algorithm think, not just read the code: AVL/Red-Black rotations, Dijkstra & A* pathfinding, sorting, tries, union-find, segment trees, dynamic programming, B-Tree indexes, memory allocators, hash collisions, and Huffman compression — all with hand-built Canvas visualizers.

Nhìn thấy giải thuật "suy nghĩ", không chỉ đọc code: xoay cây AVL/Red-Black, tìm đường Dijkstra & A*, sắp xếp, Trie, Union-Find, Segment Tree, quy hoạch động, chỉ mục B-Tree, bộ cấp phát bộ nhớ, va chạm hash, và nén Huffman — tất cả có visualizer Canvas tương tác riêng.

12 Lessons Lộ trình 12 bài học
Start learning → Bắt đầu học →
WebGPU & 3D Graphics

WebGPU & Shaders: Next-Generation Real-Time Web Graphics — 10-Lesson Course

Lập Trình WebGPU & Compute Shaders: Đồ Họa 3D Thế Hệ Mới — Lộ Trình 10 Bài Học

Master modern WebGPU from scratch: GPU device setup, WGSL shaders with live editor, Uniform/Storage buffers & alignment rules, Phong lighting, instanced rendering, Compute Shaders, fluid physics SPH, and interactive 3D demos.

Làm chủ WebGPU từ con số 0: thiết lập GPU device, lập trình Shader WGSL với trình soạn thảo trực tiếp, căn chỉnh bộ đệm Uniform/Storage, chiếu sáng Phong, vẽ instanced, Compute Shaders song song, mô phỏng chất lỏng SPH và demo 3D tương tác.

10 Lessons Lộ trình 10 bài học
Start learning → Bắt đầu học →
CSS & Animation

Modern CSS & Advanced Animation: From Zero to Easing Master — 10-Lesson Course

CSS Hiện Đại & Animation Chuyên Sâu: Từ Cơ Bản Đến Nâng Cao — Lộ Trình 10 Bài Học

Master modern CSS layouts and animation techniques: Box Model, Flexbox, CSS Grid, custom cubic-bezier transitions, keyframe animation, 3D transforms, Scroll-Driven Animations, View Transitions, Container Queries, and render performance.

Làm chủ bố cục CSS hiện đại và kỹ thuật hoạt ảnh nâng cao: Box Model, Flexbox, CSS Grid, chuyển tiếp cubic-bezier, keyframes, biến đổi 3D, Scroll-Driven Animations, View Transitions, Container Queries, và tối ưu hóa hiệu năng render.

10 Lessons Lộ trình 10 bài học
Start learning → Bắt đầu học →
WebGL & 3D

Core WebGL & 3D Graphics: Math, Shaders & Rendering — 18-Lesson In-Depth Course

WebGL & Đồ Họa 3D Cốt Lõi: Toán Học, Shaders & Rendering — Lộ Trình 18 Bài Học

Master WebGL & 3D Graphics from the ground up: graphics pipeline, GLSL shaders, MVP matrices, lighting, textures, normal/shadow mapping, model loading (glTF), transparency, PBR, environment mapping, skeletal animation, SDF/Raymarching, GPU optimization — and an intro to WebGPU. Every lesson has a live demo.

Lập trình đồ họa 3D & WebGL từ con số 0 đến chuyên sâu: Graphics Pipeline, Shader GLSL, ma trận MVP, chiếu sáng, textures, normal/shadow mapping, nạp model glTF, độ trong suốt, PBR, environment mapping, skeletal animation, SDF/Raymarching, tối ưu GPU — và giới thiệu WebGPU. Mỗi bài đều có demo trực tiếp.

18 Lessons Lộ trình 18 bài học
Start learning → Bắt đầu học →
C Programming

Learn C Programming from Scratch: 12-Part Comprehensive Course

Tự học lập trình C từ số 0: Lộ trình toàn diện 12 bài học

A comprehensive 12-part C course: environment setup, variables, operators, bitwise, control flow, functions, arrays/strings, structs, pointers, memory management with Valgrind/ASan, data structures, and preprocessor mastery.

Lộ trình học C toàn diện 12 bài: cài đặt môi trường & Makefile, biến & kiểu dữ liệu, toán tử & bitwise, rẽ nhánh & vòng lặp, hàm & đệ quy, mảng & chuỗi, struct, con trỏ, quản lý bộ nhớ & Valgrind, cấu trúc dữ liệu & Big O, preprocessor và trực quan hóa.

12 Lessons Lộ trình 12 bài học
Start learning → Bắt đầu học →
C++ Programming

Modern C++ Programming: 14-Part In-Depth Course

Tự học lập trình C++ từ số 0: Lộ trình chi tiết 14 bài học

A complete roadmap to Modern C++, covering standard containers, OOP, memory management with smart pointers, generic programming (templates), and real-time interactive BST visualizers.

Lộ trình tự học lập trình ngôn ngữ C++ từ cơ bản đến nâng cao: Lập trình hướng đối tượng OOP, quản lý bộ nhớ thông minh (Smart Pointers), Templates, các tính năng mới hiện đại và mô phỏng cấu trúc cây BST trực quan.

14 Lessons Lộ trình 14 bài học
Start learning → Bắt đầu học →
Canvas & Graphics

JavaScript Canvas: From Drawing to Games, Data Viz & Creative Coding

JavaScript Canvas: Từ vẽ cơ bản đến Game, Data Viz & Creative Coding

A comprehensive 17-lesson course with live interactive demos covering Canvas 2D API, compositing, math, animation, sprites, physics, game dev, audio, data viz, and generative art.

Lộ trình 17 bài học toàn diện kèm demo tương tác trực tiếp: Canvas 2D API, compositing, toán nền tảng, animation, sprite, vật lý, game dev, web audio, data viz và generative art.

17 Lessons Lộ trình 17 bài học
Start learning → Bắt đầu học →
Bash & Shell

Bash & Shell Scripting: From Terminal Basics to DevOps Automation

Tự học Bash & Shell Scripting: Từ cơ bản đến DevOps

A complete guide from terminal basics, variables, control flow, text processing with grep/sed/awk, to real-world scripts, CI/CD automation, and Docker.

Lộ trình toàn diện từ cơ bản terminal, biến, luồng điều khiển, xử lý text với grep/sed/awk, đến script thực chiến, CI/CD automation và Docker.

8 Lessons Lộ trình 8 bài học
Start learning → Bắt đầu học →
JavaScript Cốt Lõi

Core JavaScript: Types, Engine, OOP, Async & Reactive — 12-Lesson Deep Dive

Tự học lập trình JavaScript cốt lõi: Lộ trình 12 bài học chuyên sâu

A complete 12-lesson roadmap from JS type system & modern syntax, through V8 engine internals, OOP, functional programming, error handling, Regex, async/await, Proxy metaprogramming, ES Modules, and reactive state stores — with interactive playgrounds throughout.

Lộ trình 12 bài học từ hệ thống kiểu dữ liệu & cú pháp hiện đại, cơ chế V8 Engine, OOP, lập trình hàm, xử lý lỗi, Regex, bất đồng bộ, Proxy metaprogramming, ES Modules đến Reactive Store — kèm playground tương tác mỗi bài.

12 Lessons Lộ trình 12 bài học
Start learning → Bắt đầu học →

Tool Guides

Hướng dẫn công cụ

Employee Face AI

Employee Face AI: 100% Offline HR Kiosk & Emotion Analytics

Employee Face AI: Kiosk Chấm Công Nhận Diện Khuôn Mặt 100% Offline

A 100% offline biometric check-in kiosk and HR analytics system built with Angular 21, Python, DeepFace, and PostgreSQL.

Hệ thống Kiosk chấm công sinh trắc học và quản lý HR 100% Offline tự khởi chạy với Angular 21, Python, DeepFace và PostgreSQL.

7 min read 7 phút đọc
Read article → Đọc bài viết →
SnapCast

How to Set Up a Live Photo Slideshow for Your Wedding

Hướng dẫn cài đặt trình chiếu ảnh trực tiếp cho đám cưới

A step-by-step guide to creating a real-time guest photo wall at your wedding reception — from setup to post-event gallery.

Hướng dẫn từng bước để tạo bức tường ảnh khách mời theo thời gian thực tại tiệc cưới — từ cài đặt đến thư viện ảnh sau sự kiện.

6 min read 6 phút đọc
Read article → Đọc bài viết →
SnapCast

5 Creative Ways to Use a Live Photo Wall at Corporate Events

5 cách sáng tạo để dùng bức tường ảnh trực tiếp tại sự kiện doanh nghiệp

From product launches to team-building days — how a real-time photo slideshow transforms audience engagement at any corporate gathering.

Từ ra mắt sản phẩm đến ngày team building — cách trình chiếu ảnh thời gian thực biến đổi mức độ tương tác tại bất kỳ cuộc tụ họp doanh nghiệp nào.

5 min read 5 phút đọc
Read article → Đọc bài viết →
SnapCast

How Real-Time Photo Sharing Works: The Tech Behind SnapCast

Chia sẻ ảnh thời gian thực hoạt động như thế nào: Công nghệ đằng sau SnapCast

A plain-language explanation of WebSockets, Firestore sync, QR codes, and the browser APIs that make instant photo walls possible.

Giải thích dễ hiểu về WebSockets, Firestore sync, mã QR và các API trình duyệt giúp bức tường ảnh tức thì trở nên khả thi.

7 min read 7 phút đọc
Read article → Đọc bài viết →
ColorQuarium

ColorQuarium: Turn Any Screen Into a Living Aquarium You Control From Your Phone

ColorQuarium: Biến mọi màn hình thành bể cá sống động, điều khiển ngay từ điện thoại

What ColorQuarium is, how its live ambient display and phone remote work together, and how to use it for parties, streams, or a calming desk screensaver.

ColorQuarium là gì, màn hình hiển thị và remote điện thoại hoạt động cùng nhau ra sao, và cách dùng cho tiệc, stream hay màn hình thư giãn.

5 min read 5 phút đọc
Read article → Đọc bài viết →
Remove BG

Meet RemoveBG: The Free, Private AI Background Remover

Giới thiệu RemoveBG: Công cụ tách nền ảnh AI miễn phí & bảo mật

A tour of RemoveBG by js-tools — its standout features, real-world use cases (e-commerce, ID photos, design, stickers), how it beats paid tools, and a 3-step quick start.

Khám phá công cụ tách nền RemoveBG của js-tools — tính năng nổi bật, ứng dụng thực tế (bán hàng, ảnh thẻ, thiết kế, sticker), so với công cụ trả phí, và hướng dẫn nhanh 3 bước.

6 min read 6 phút đọc
Read article → Đọc bài viết →
Remove BG

How to Remove Image Backgrounds Entirely in Your Browser

Cách xóa nền ảnh tự động hoàn toàn trên trình duyệt

Discover how client-side AI neural networks execute locally in your browser sandbox to cut out backgrounds privately, with zero uploads, no credits, and free high-res downloads.

Khám phá cách mô hình mạng nơ-ron AI chạy cục bộ trong môi trường trình duyệt để tách nền phông ảnh bảo mật tuyệt đối, không cần tải lên server, không phí bản quyền.

5 min read 5 phút đọc
Read article → Đọc bài viết →
QR Generator

How to Create and Customize QR Codes Entirely in Your Browser

Cách tạo và tùy chỉnh mã QR hoàn toàn trên trình duyệt

Discover the privacy advantages of local, client-side QR generation and learn how to style gradient colors, add logos, and export vector graphics.

Khám phá lợi ích bảo mật của việc tạo mã QR cục bộ phía client và hướng dẫn phối màu gradient, chèn logo thương hiệu và xuất ảnh vector.

5 min read 5 phút đọc
Read article → Đọc bài viết →
Image Optimizer

How to Compress Images Without Losing Quality

Cách nén ảnh mà không mất chất lượng

Understand lossy vs lossless compression, when each matters, and how to get smaller files while keeping your images sharp.

Hiểu rõ nén có mất dữ liệu và không mất dữ liệu, khi nào mỗi loại quan trọng, và cách giảm kích thước file trong khi giữ ảnh sắc nét.

6 min read 6 phút đọc
Read article → Đọc bài viết →
Image Optimizer

WebP vs JPEG vs PNG: Which Format Should You Use in 2026?

WebP vs JPEG vs PNG: Định dạng nào bạn nên dùng năm 2026?

A practical comparison of the three most common web image formats — with clear recommendations for photos, graphics, and everything in between.

So sánh thực tế ba định dạng ảnh web phổ biến nhất — với các khuyến nghị rõ ràng cho ảnh chụp, đồ họa và mọi thứ ở giữa.

5 min read 5 phút đọc
Read article → Đọc bài viết →