Xuất phát từ ý tưởng, tôi luôn muốn có một nơi để test nhanh ý tưởng HTML/CSS/JS mà không cần mở VS Code, không cần tạo file, không cần setup server. Dùng Codepen hay JSFiddle rất tuyệt, nhưng chúng quá nặng nề cho nhu cầu "mì ăn liền". Và quan trọng hơn: Tôi muốn sở hữu nó, tôi muốn có 1 cách riêng mới lại để share short demo ấn tượng mang đầy dấu ấn cá nhân.

Thách thức 1: Editor xịn trên Web

Dùng textarea thì quá "phèn". Tôi cần syntax highlighting, auto-complete. Giải pháp là Monaco Editor - trái tim của VS Code. Tuy nhiên, việc tích hợp Monaco vào môi trường SSG (Static Site Generator) là một cơn ác mộng nhỏ với việc load cái file Worker. Tôi đã phải dùng mánh load qua CDN và cấu hình require.config thủ công.

Thách thức 2: Chạy code an toàn

Cho user chạy code JS ngay trên browser của mình là rủi ro bảo mật lớn. Giải pháp? Iframe Sandbox. Chúng ta tạo một iframe, ném code vào srcdoc, và cô lập nó bằng thuộc tính sandbox="allow-scripts". Nó giống như nhốt con hổ vào lồng kính vậy.

Thách thức 3: Chia sẻ không cần Database (Đây là phần tôi tâm đắc nhất) 😎

Làm sao để bạn code xong, bấm Share, gửi link cho bạn bè mà server của tôi không tốn 1 byte lưu trữ?

Câu trả lời là: URL Hash & LZ-String.

B1: Lấy toàn bộ code HTML/CSS/JS.
B2: Gom thành 1 object JSON.
B3: Nén chuỗi JSON đó bằng thuật toán LZW (thư viện lz-string).
B4: Gắn chuỗi nén vào sau dấu # của URL.

// Demo Logic
const data = JSON.stringify({ html, css, js });
const compressed = LZString.compressToEncodedURIComponent(data);
window.location.hash = 'code=' + compressed;

Kết quả là một cái link trông hơi dài một chút, nhưng nó chứa đựng toàn bộ source code của bạn. Server không biết gì cả. Privacy tuyệt đối. Free tuyệt đối.

Kết luận & Trải nghiệm

Đôi khi, giải pháp tốt nhất không phải là công nghệ phức tạp nhất (như Docker, Microservices), mà là giải pháp thông minh nhất. zTool Playground là minh chứng cho việc bạn có thể làm được những tool cực mạnh chỉ với Static Web.

✨ Examples Nổi bật

Tôi đã dựng sẵn vài demo để bạn thấy sức mạnh của nó:

👉 Advanced Todo App: CRUD, Filter, Stats (như ảnh demo).
🌳 B-Tree Visualizer: Trực quan hóa cấu trúc dữ liệu.

Hãy thử ngay: 🚀 Mở zTool Playground IDE

Hậu trường: Xây dựng zTool Playground không cần Database