Building a Zero-Retention Developer Tools Ecosystem: From Microsoft Graph Mail to Async Network Engines

1. 🛡️ The Developer Privacy Crisis in Modern Web Tools

Every day, software engineers, DevOps practitioners, and security analysts paste sensitive artifacts into random online utilities: JWT tokens with authorization claims, cURL commands containing bearer secrets, proprietary API payloads, and webhook payloads.

Unfortunately, the vast majority of existing web utility tools suffer from severe architectural shortcomings:

Secret Harvesting & Server-Side Logging: Many conversion sites route raw payloads to remote backend servers where request logs, headers, and tokens are retained or indexed.
Ad-Heavy & Cluttered Interfaces: Bloated user interfaces filled with intrusive ads, trackers, and slow client render loops.
Inconsistent Developer Experience: Lack of unified keyboard shortcuts, broken dark mode support, and missing multi-language localization.

To solve this, I designed and deployed a comprehensive Online Developer Tools Hub at /tools—an open-access suite of high-utility tools built on a foundation of Strict Zero-Retention (Zero-Storage), Client-Side First Processing, and a Unified Monochromatic Design System.

flowchart TD
    subgraph Client ["Client Browser Sandbox (100% In-Memory)"]
        UI["🖥️ Developer UI (Astro + Tailwind CSS v4)"]
        Crypto["🔐 Web Crypto API (SHA-256 / SHA-512 / Hex)"]
        JWT["🎫 JWT Parser & Expiry Countdown"]
        Regex["🔍 Regex Visualizer & Group Matcher"]
        JSON["⚡ JSON Studio & Type Generator (TS / Go)"]
        Cron["⏱️ Cron Explainer (Bilingual Natural Language)"]
        cURL["📦 cURL Tokenizer & Code Generator"]
        AIToken["📊 AI Tokenizer & Cost Estimator"]
    end

    subgraph Stateless ["Stateless Edge / Serverless API"]
        GraphAPI["📧 Microsoft Graph API Proxy (OAuth / Memory OTP)"]
        ProxyCheck["🌐 Multi-Threaded TCP Socket Probe"]
    end

    subgraph Storage ["Persistent Storage"]
        DB[("❌ ZERO DATABASE / ZERO RETENTION")]
    end

    UI <--> Crypto & JWT & Regex & JSON & Cron & cURL & AIToken
    UI <-->|Stateless HTTP Request| GraphAPI & ProxyCheck
    GraphAPI -.->|No Storage Written| DB
    ProxyCheck -.->|No Storage Written| DB

    click Crypto href "/tools/crypto-converter" "Open Crypto Converter"
    click JWT href "/tools/jwt-inspector" "Open JWT Inspector"
    click Regex href "/tools/regex-tester" "Open Regex Tester"
    click JSON href "/tools/json-tool" "Open JSON Studio"
    click Cron href "/tools/cron-explainer" "Open Cron Explainer"
    click cURL href "/tools/curl-converter" "Open cURL Converter"
    click AIToken href "/tools/ai-tokenizer" "Open AI Tokenizer"
    click GraphAPI href "/tools/ms-mail" "Open MS Graph Mail Reader"
    click ProxyCheck href "/tools/proxy-checker" "Open Proxy Checker"
    click UI href "/tools" "Open Tools Hub"

2. ⚡ Architecture: The Zero-Retention & Edge Execution Model

The entire ecosystem is governed by three non-negotiable architectural principles:

Core Principle	Implementation Strategy	Developer Benefit
Client-Side Sandboxing	Executed entirely in the browser using the Web Crypto API, browser RegExp engines, and client-side AST parsers.	Tokens, secrets, and strings never traverse the network.
Stateless Serverless Pass-Through	For operations requiring outbound network connectivity (Microsoft Graph Mail reader, TCP Proxy checking), data is processed purely in ephemeral RAM and never persisted.	Zero database storage, zero token logs, zero tracking.
Zero-Flash Bilingual System	Instant language switching (English & Vietnamese) rendered concurrently via CSS data-attributes and custom event dispatching (`languagechange`).	0ms switching latency without requiring page reloads or layout shifts.

3. 🛠️ Comprehensive Breakdown of the 8 Developer Utilities

1. Microsoft Graph Mail & OTP Reader (`/tools/ms-mail`)

Designed for developers testing authentication flows, transactional emails, and automated OTP delivery on Microsoft 365 / Outlook / Hotmail accounts:

Direct Token & OAuth 2.0 Support: Accepts refresh tokens, client secrets, or active access tokens.
Automated Regex OTP Extractor: Scans message headers, subject lines, and HTML/plain bodies to isolate 4-to-8 digit verification codes instantly.
Zero-Storage Promise: Credentials are used strictly for a single Graph API request and discarded immediately from memory.

2. Universal JWT & Token Inspector (`/tools/jwt-inspector`)

A secure alternative to third-party token decoders:

Decodes Base64URL header and payload claims entirely inside browser memory.
Dynamic color-coded JSON tree visualization.
Real-time Expiration Countdown Timer calculating remaining token validity in hours, minutes, and seconds.

3. AI Prompt Tokenizer & Cost Estimator (`/tools/ai-tokenizer`)

Optimized for AI engineers budgeting prompt tokens and context windows across major frontier models:

Instant token count, word count, character count, and whitespace analysis.
Live cost comparison matrix across DeepSeek V3/R1, Google Gemini 2.5, OpenAI GPT-4o, and Anthropic Claude 3.7 Sonnet.

[Prompt Input] -> [BPE Approximation Engine] -> [Real-time Token Matrix]
                                              ├─ DeepSeek V3: $0.14 / 1M
                                              ├─ Gemini 2.5:   $0.075 / 1M
                                              ├─ GPT-4o:       $2.50 / 1M
                                              └─ Claude 3.7:   $3.00 / 1M

4. JSON Studio & TypeScript / Go Type Generator (`/tools/json-tool`)

A complete JSON transformation pipeline:

Two-way formatting (2-space, 4-space, tab) and minification.
Deep syntax validation with exact line/column error pointers.
Instant automated type synthesis into TypeScript Interfaces and Golang Structs (with json:"..." struct tags).

5. Multi-Hash & Crypto Converter (`/tools/crypto-converter`)

A Swiss Army knife for cryptographic operations:

Native window.crypto.subtle hardware-accelerated SHA-256 and SHA-512 hashing.
Base64, Hexadecimal, and URL Encode/Decode modules.
Bi-directional Unix Timestamp converter (Epoch milliseconds to human local / UTC time).

6. Regex Live Tester & Visualizer (`/tools/regex-tester`)

A real-time Regular Expression playground:

Interactive flag toggles (g, i, m, s, u).
Highlighted match visualizer with capture group table ($1, $2…).
Real-time substitution engine supporting dynamic token placeholders.
Curated presets (Email, IPv4, URL, Phone numbers, UUIDs).

7. Cron Schedule Builder & Explainer (`/tools/cron-explainer`)

Bridging the gap between cryptic 5-part cron syntax and human understanding:

Dynamic bilingual natural language translation (English & Vietnamese).
Upcoming execution schedule calculator predicting the next 5 exact execution timestamps.
Individual input controls for Minute, Hour, Day of Month, Month, and Day of Week.

8. cURL to Multi-Code Converter (`/tools/curl-converter`)

Transforms terminal and DevTools cURL commands into production-grade snippets:

Robust tokenizer handling multiline breaks, headers (-H), methods (-X), and payloads (-d).
Generates clean code for JavaScript fetch, Python requests, Python httpx (async), Go net/http, and Node.js axios.

9. High-Speed Async Proxy Checker (`/tools/proxy-checker`)

A lightweight, multi-threaded proxy health inspector:

Verifies HTTP, HTTPS, and SOCKS5 proxies against latency benchmarks.
Asynchronous TCP socket probe measuring exact connection roundtrip time.
One-click copy for alive proxy endpoints.

4. 🎨 Design System & Monochromatic Craft

The tools suite adheres to the site-wide Monochromatic Minimalist Design System:

Contrast & Hierarchy: Neutral color palette (neutral-950 / neutral-50) paired with subtle border-neutral-200 / dark:border-neutral-800 card boundaries.
Status Badges: Subtly calibrated bg-emerald-500 indicators signaling live service availability without excessive visual noise.
Typography: Precision typography using JetBrains Mono for all tokens, hashes, and code outputs.
Grid Layout: Responsive 3-column layout on desktop (lg:grid-cols-3), 2-column on tablet (md:grid-cols-2), and single column on mobile.

5. 🚀 Conclusion & Open Access

The developer tools hub is completely free, accessible to all developers without registration or paywalls, and engineered with an uncompromising respect for user privacy.

Explore the tools hub today at nguywnben.dev/tools.

1. 🛡️ Thách Thức Về Bảo Mật Khi Dùng Công Cụ Trực Tuyến

Mỗi ngày, các kỹ sư phần mềm, DevOps và chuyên gia an toàn thông tin thường xuyên phải dán các dữ liệu nhạy cảm vào các tiện ích trực tuyến trên mạng: token JWT chứa quyền truy cập, lệnh cURL chứa Authorization Bearer, payload API nội bộ hoặc email xác thực.

Tuy nhiên, phần lớn các công cụ trực tuyến trôi nổi hiện nay đều tồn tại các rủi ro bảo mật nghiêm trọng:

Thu thập dữ liệu ngầm (Secret Harvesting): Rất nhiều trang web chuyển toàn bộ chuỗi ký tự về máy chủ backend để xử lý, tiềm ẩn nguy cơ lưu log, rò rỉ token bí mật hoặc theo dõi người dùng.
Giao diện rườm rà, đầy quảng cáo: Chèn ép quảng cáo, mã theo dõi làm chậm trình duyệt và suy giảm trải nghiệm sử dụng.
Thiếu tính đồng bộ: Giao diện chắp vá, không hỗ trợ dark mode đồng nhất và thiếu vắng khả năng chuyển đổi ngôn ngữ chuẩn mực.

Xuất phát từ nhu cầu thực tế đó, tôi đã xây dựng và tích hợp Hệ Sinh Thái Công Cụ Lập Trình Trực Tuyến tại /tools—một bộ công cụ toàn diện hoạt động theo triết lý Zero-Retention (Không Lưu Trữ Dữ Liệu), Ưu Tiên Xử Lý Tại Trình Duyệt (Client-Side First) và Ngôn Ngữ Thiết Kế Đơn Sắc Đồng Bộ (Monochromatic Minimalist).

flowchart TD
    subgraph Client ["Bộ Nhớ Trình Duyệt Client (100% In-Memory)"]
        UI["🖥️ Giao Diện Người Dùng (Astro + Tailwind CSS v4)"]
        Crypto["🔐 Web Crypto API (SHA-256 / SHA-512 / Hex)"]
        JWT["🎫 Giải Mã JWT & Đếm Ngược Thời Gian"]
        Regex["🔍 Phân Tích & Highlight Khớp Regex"]
        JSON["⚡ Xử Lý JSON & Sinh Kiểu TypeScript / Go"]
        Cron["⏱️ Dịch Nghĩa & Dự Báo Lịch Chạy Cron (Song Ngữ)"]
        cURL["📦 Chuyển Đổi cURL Sang JavaScript / Python / Go"]
        AIToken["📊 Đo Lường Token AI & Chi Phí"]
    end

    subgraph Stateless ["Edge / Serverless API Không Lưu Trữ"]
        GraphAPI["📧 Đọc Mail Microsoft Graph & Bắt OTP"]
        ProxyCheck["🌐 Kiểm Tra Tình Trạng & Độ Trễ Proxy"]
    end

    subgraph Storage ["Cơ Sở Dữ Liệu"]
        DB[("❌ CAM KẾT KHÔNG GHI DATABASE / LOG")]
    end

    UI <--> Crypto & JWT & Regex & JSON & Cron & cURL & AIToken
    UI <-->|HTTP Request Tạm Thời| GraphAPI & ProxyCheck
    GraphAPI -.->|Không Ghi Dữ Liệu| DB
    ProxyCheck -.->|Không Ghi Dữ Liệu| DB

    click Crypto href "/tools/crypto-converter" "Mở công cụ Crypto Converter"
    click JWT href "/tools/jwt-inspector" "Mở công cụ JWT Inspector"
    click Regex href "/tools/regex-tester" "Mở công cụ Regex Tester"
    click JSON href "/tools/json-tool" "Mở công cụ JSON Studio"
    click Cron href "/tools/cron-explainer" "Mở công cụ Cron Explainer"
    click cURL href "/tools/curl-converter" "Mở công cụ cURL Converter"
    click AIToken href "/tools/ai-tokenizer" "Mở công cụ AI Tokenizer"
    click GraphAPI href "/tools/ms-mail" "Mở công cụ Đọc Mail MS Graph"
    click ProxyCheck href "/tools/proxy-checker" "Mở công cụ Proxy Checker"
    click UI href "/tools" "Mở Danh Mục Công Cụ"

2. ⚡ Kiến Trúc: Xử Lý Client-Side & Nguyên Tắc Không Lưu Giữ Dữ Liệu

Toàn bộ hệ thống công cụ được xây dựng dựa trên 3 nguyên tắc kỹ thuật cốt lõi:

Nguyên Tắc Cốt Lõi	Chiến Lược Triển Khai	Lợi Ích Cho Lập Trình Viên
Xử lý 100% tại Client	Tận dụng Web Crypto API, bộ máy RegExp nguyên bản của trình duyệt và thuật toán phân tích cú pháp AST chạy trực tiếp trong JavaScript client.	Mã token, chuỗi bí mật không bao giờ bị truyền qua Internet.
Serverless Pass-Through Không Lưu Trữ	Với các tác vụ bắt buộc phải gọi mạng bên ngoài (Đọc mail Microsoft Graph, Đo độ trễ Proxy), dữ liệu chỉ luân chuyển trong RAM tạm thời của Serverless function và hủy ngay sau khi trả kết quả.	Không có cơ sở dữ liệu lưu log, không theo dõi, an toàn tuyệt đối.
Song Ngữ Tức Thì (Zero-Flash)	Hệ thống chuyển đổi song ngữ (Anh - Việt) được render đồng thời thông qua bộ lọc CSS toàn cục và sự kiện tùy biến `languagechange`.	Chuyển đổi ngôn ngữ với độ trễ 0ms mà không cần tải lại trang.

3. 🛠️ Tổng Quan Chi Tiết Về 8 Công Cụ Đã Triển Khai

1. Đọc Mail & Bắt OTP Microsoft Graph (`/tools/ms-mail`)

Dành cho các lập trình viên cần kiểm thử luồng đăng ký tài khoản, nhận mã xác thực OTP từ Outlook / Hotmail qua Microsoft Graph API:

Hỗ trợ Refresh Token & OAuth 2.0: Tự động lấy Access Token mới hoặc đăng nhập trực tiếp.
Tự động bóc tách mã OTP: Thuật toán Regex thông minh tự động quét tiêu đề và nội dung thư để trích xuất mã số xác thực (4 - 8 chữ số) trong 1 cú click.
Cam kết bảo mật: Tuyệt đối không lưu giữ mật khẩu, token hay email người dùng.

2. Giải Mã & Kiểm Tra Token JWT (`/tools/jwt-inspector`)

Công cụ phân tích JSON Web Token an toàn tuyệt đối:

Giải mã Header và Payload Base64URL ngay tại trình duyệt mà không gửi token qua mạng.
Cây cấu trúc JSON trực quan, làm nổi bật các trường dữ liệu quan trọng (sub, exp, iat, roles).
Đồng hồ đếm ngược thời gian hết hạn theo giờ, phút, giây thời gian thực.

3. Đo Lường Token AI & Ước Tính Chi Phí (`/tools/ai-tokenizer`)

Hỗ trợ các kỹ sư AI tính toán số lượng token và chi phí API khi xây dựng ứng dụng LLM:

Đếm số lượng token, từ, ký tự và khoảng trắng theo thời gian thực.
Bảng đối chuẩn chi phí API trực quan giữa DeepSeek V3/R1, Google Gemini 2.5, OpenAI GPT-4o và Anthropic Claude 3.7 Sonnet.

[Nhập Văn Bản Prompt] -> [Bộ Đếm Token BPE] -> [Bảng Đối Chuẩn Chi Phí]
                                               ├─ DeepSeek V3: $0.14 / 1M
                                               ├─ Gemini 2.5:   $0.075 / 1M
                                               ├─ GPT-4o:       $2.50 / 1M
                                               └─ Claude 3.7:   $3.00 / 1M

4. JSON Studio & Sinh Kiểu TypeScript / Go (`/tools/json-tool`)

Công cụ xử lý chuỗi JSON toàn diện:

Định dạng JSON (2 khoảng trắng, 4 khoảng trắng, tab), nén dữ liệu (minify) và kiểm tra lỗi cú pháp chi tiết đến từng số dòng/cột.
Tự động chuyển đổi cấu trúc JSON thành TypeScript Interface và Golang Struct (kèm tag json:"...") chuẩn xác.

5. Chuyển Đổi Mã Hóa & Băm Dữ Liệu (`/tools/crypto-converter`)

Hộp công cụ mã hóa và mật mã học trực tiếp:

Tạo mã băm SHA-256, SHA-512 siêu tốc bằng phần cứng thông qua window.crypto.subtle.
Bộ chuyển đổi Base64, Hexadecimal, URL Encode/Decode.
Tiện ích Unix Timestamp hai chiều (từ mili-giây sang ngày giờ địa phương và ngược lại).

6. Kiểm Tra & Phân Tích Biểu Thức Regex (`/tools/regex-tester`)

Môi trường thử nghiệm và gỡ lỗi Regular Expression trực quan:

Hỗ trợ đầy đủ các cờ (g, i, m, s, u).
Làm nổi bật các đoạn văn bản khớp, phân tách chi tiết các nhóm bắt giữ (Capture Groups $1, $2…).
Chế độ thay thế chuỗi tức thì với biến giữ chỗ động.
Tích hợp sẵn các mẫu Regex phổ biến (Email, IPv4, URL, Số điện thoại Việt Nam, UUID).

7. Tạo & Giải Thích Cú Pháp Cron (`/tools/cron-explainer`)

Biến các biểu thức Cron 5 trường phức tạp thành câu văn dễ hiểu:

Tự động dịch nghĩa cú pháp Cron sang tiếng Việt và tiếng Anh tự nhiên.
Tính toán và hiển thị chính xác 5 lần thực thi tiếp theo dựa trên múi giờ thực tế của thiết bị.
Các ô nhập trực quan cho từng trường: Phút, Giờ, Ngày trong tháng, Tháng, Thứ trong tuần.

8. Chuyển Đổi cURL Sang Đa Ngôn Ngữ (`/tools/curl-converter`)

Chuyển đổi lệnh cURL từ terminal hoặc DevTools sang mã nguồn lập trình:

Phân tích cú pháp cURL thông minh, xử lý headers (-H), phương thức HTTP (-X), dữ liệu payload (-d) và xác thực (-u).
Tự động sinh mã nguồn sẵn sàng dùng cho JavaScript fetch, Python requests, Python httpx (async), Go net/http và Node.js axios.

9. Kiểm Tra Proxy Bất Đồng Bộ (`/tools/proxy-checker`)

Công cụ kiểm tra tình trạng proxy đa luồng tốc độ cao:

Kiểm tra proxy HTTP, HTTPS, SOCKS5 với khả năng đo độ trễ kết nối (ms).
Thống kê tỷ lệ Alive/Dead và hỗ trợ sao chép danh sách proxy hoạt động trong 1 click.

4. 🎨 Chuẩn Mực Thiết Kế Đơn Sắc Đồng Nhất

Hệ sinh thái công cụ tuân thủ chặt chẽ Hệ Thống Thiết Kế Tối Giản Đơn Sắc (Monochromatic Design) của toàn bộ website:

Tương phản & Cấu trúc thẻ: Bảng màu trung tính (neutral-950 / neutral-50), bo góc lớn rounded-2xl, đường viền tinh tế border-neutral-200 / dark:border-neutral-800.
Huy hiệu trạng thái: Sử dụng chấm xanh bg-emerald-500 nổi bật vừa phải, báo hiệu công cụ đang hoạt động ổn định.
Font chữ kỹ thuật: Font chữ monospace JetBrains Mono được áp dụng cho toàn bộ mã token, mã băm và kết quả code.
Lưới hiển thị cân đối: Bố cục 3 công cụ 1 dòng trên màn hình máy tính (lg:grid-cols-3), mang lại trải nghiệm duyệt trực quan và liền mạch.

5. 🚀 Trải Nghiệm Thực Tế

Toàn bộ hệ sinh thái công cụ hiện đã mở hoàn toàn miễn phí cho cộng đồng lập trình viên, không cần đăng ký tài khoản và cam kết bảo mật tuyệt đối cho mọi dữ liệu của bạn.

👉 Trải nghiệm ngay tại: nguywnben.dev/tools.

1. 🛡️ The Developer Privacy Crisis in Modern Web Tools

2. ⚡ Architecture: The Zero-Retention & Edge Execution Model

3. 🛠️ Comprehensive Breakdown of the 8 Developer Utilities

1. Microsoft Graph Mail & OTP Reader (/tools/ms-mail)

2. Universal JWT & Token Inspector (/tools/jwt-inspector)

3. AI Prompt Tokenizer & Cost Estimator (/tools/ai-tokenizer)

4. JSON Studio & TypeScript / Go Type Generator (/tools/json-tool)

5. Multi-Hash & Crypto Converter (/tools/crypto-converter)

6. Regex Live Tester & Visualizer (/tools/regex-tester)

7. Cron Schedule Builder & Explainer (/tools/cron-explainer)

8. cURL to Multi-Code Converter (/tools/curl-converter)

9. High-Speed Async Proxy Checker (/tools/proxy-checker)