Last month I released tools.pixiaoli.cn — a collection of 33+ developer utilities that run entirely in your browser. No servers, no accounts, no data leaving your machine.nnHere’s what I learned building it.nn## The Core Principle: Zero Network Requests for User DatannEvery tool on the site follows one rule: your data never touches a server.nnThis sounds simple, but it changes everything about how you architect the tools:nn
nTraditional approach:nBrowser -> Send data to server -> Server processes -> Return resultnnClient-side approach:nBrowser -> Process in browser -> Display result (data never leaves)n
nnThe second approach means:n- No backend costs — zero server billsn- No privacy concerns — data stays localn- Instant results — no network latencyn- Works offline — once loaded, no internet needednn## The Tool List (Yes, All 33+)nnHere’s what’s included:nn### Formatters and Convertersn- JSON Formatter/Validator — with syntax highlighting and error pinpointingn- CSV to JSON Converter — handles quoted fields, escaped commasn- JSON to CSV Converter — flatten nested objects automaticallyn- XML to JSON Converter — bidirectional conversionn- YAML to JSON Converter — with error line highlightingnn### Text and Writingn- WeChat Markdown Editor — the most popular tool, converts Markdown to WeChat-compatible rich text with one clickn- Text Difference Checker — side-by-side diff with highlighted changesn- Word/Character Counter — with reading time estimaten- Case Converter — camelCase, snake_case, PascalCase, kebab-casenn### Image Toolsn- Image Format Converter — PNG, JPG, WebP, BMPn- Image Compressor — quality slider with previewn- Image to Base64 — for embedding in CSS/HTMLn- QR Code Generator — customizable colors and stylenn### Encoding and Securityn- Base64 Encoder/Decoder — text and filen- URL Encoder/Decoder — with component encoding optionsn- HTML Entity Encoder/Decoder — for safe HTML outputn- Hash Generator — MD5, SHA-1, SHA-256, SHA-512nn### Developer Utilitiesn- Regex Tester — with match highlighting and group capturen- Cron Expression Parser — shows next 5 execution timesn- UUID Generator — v1, v4, and custom formatn- Color Picker — HEX, RGB, HSL with palette generationn- Timestamp Converter — Unix to human-readable, any timezonenn## Architecture: How to Build This Without a Servernn### The Simple PatternnnEach tool is a self-contained HTML file with embedded CSS and JavaScript:nn
htmln<!DOCTYPE html>n<html>n<head><title>JSON Formatter</title></head>n<body>n <textarea id="input"></textarea>n <button id="format">Format</button>n <pre id="output"></pre>n <script>n document.getElementById('format').addEventListener('click', () => {n const input = document.getElementById('input').value;n const output = JSON.stringify(JSON.parse(input), null, 2);n document.getElementById('output').textContent = output;n });n </script>n</body>n</html>n
nnNo build tools. No npm. No webpack. Just HTML, CSS, and vanilla JavaScript.nn### The Hard Part: Edge CasesnnThe actual challenge is not architecture — it is handling every edge case your users will hit:nn1. JSON Formatter: Handle trailing commas, single quotes, comments in “JSON-like” inputn2. CSV Converter: Deal with newlines inside quoted fields, different delimiters (comma, tab, semicolon)n3. Image Converter: Browser limitations on format support, memory limits for large imagesn4. Markdown Editor: WeChat’s rich text has specific restrictions (no style tags, limited HTML)nn### Performance at ScalennWith 33+ tools on one site, performance matters:nn- Lazy loading: Tools load only when clicked, not on page loadn- No frameworks: React/Vue add 40KB+ for a simple formatter — unnecessaryn- Minimal DOM manipulation: Direct textContent and classList instead of innerHTMLn- Web Workers for heavy computation: Hash generation and image processing run off the main threadnn## What Users Actually Care AboutnnAfter launching, I tracked which tools got the most use:nn1. WeChat Markdown Editor (40% of traffic) — Chinese developers writing WeChat articlesn2. JSON Formatter (25%) — the universal developer needn3. Image Format Converter (15%) — designers and developers converting assetsn4. CSV/JSON Converters (10%) — data processing workflowsn5. Everything else (10%) — the long tailnnThe surprise? The WeChat Markdown Editor dominates. It solves a very specific pain point: WeChat’s article editor does not support Markdown, but everyone writes in Markdown. Our tool converts Markdown to WeChat-compatible HTML with one click.nn## Privacy as a Feature, Not a BuzzwordnnMost “online formatters” send your code/data to their servers. You can verify this yourself:nn1. Open any online JSON formattern2. Open browser DevTools, Network tabn3. Paste some JSON and click Formatn4. Watch the POST request fly off to their servernnWith tools.pixiaoli.cn, there are zero XHR/fetch requests when you use a tool. Everything happens in the browser’s JavaScript engine.nnThis matters most for:n- API keys in config filesn- Personal data in CSV filesn- Proprietary code being formattedn- Sensitive text being encodednn## Try ItnnThe site is at tools.pixiaoli.cn. No signup, no ads, no tracking. Just tools.nnIf you are a developer who has ever hesitated before pasting code into a random online formatter — this is for you.nn—nn*Built with vanilla HTML/CSS/JS. No frameworks, no servers, no data collection. Open source contributions welcome.*
답글 남기기