The latest articles on DEV Community by jh cao (@jh_cao_df1a004b950b8e6e2b). https://dev.to/jh_cao_df1a004b950b8e6e2b https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3797552%2F36b1f337-1c46-4ba1-8780-8f9dfef7e7f8.png https://dev.to/jh_cao_df1a004b950b8e6e2b en jh cao Sat, 28 Feb 2026 04:44:28 +0000 https://dev.to/jh_cao_df1a004b950b8e6e2b/i-built-87-free-browser-based-tools-heres-what-i-learned-3hpi https://dev.to/jh_cao_df1a004b950b8e6e2b/i-built-87-free-browser-based-tools-heres-what-i-learned-3hpi <h2> Why I Built This </h2> <p>As developers, we constantly reach for small online tools — format some JSON, test a regex, generate a UUID, compress an image. But each tool is on a different website, many with ads, popups, and dark patterns.</p> <p>I decided to build <strong>one site with all of them</strong>: <a href="https://gotoolpilot.com" rel="noopener noreferrer">ToolPilot</a>.</p> <h2> The Rules I Set </h2> <ol> <li> <strong>Everything runs in the browser</strong> — no server processing, no data uploads</li> <li> <strong>No signup</strong> — just open and use</li> <li> <strong>No frameworks</strong> — pure HTML, CSS, and JavaScript</li> <li> <strong>Fast</strong> — every tool loads instantly</li> </ol> <h2> What's Inside (87 tools) </h2> <h3> Developer Tools </h3> <ul> <li> <a href="https://gotoolpilot.com/tools/json-formatter" rel="noopener noreferrer">JSON Formatter</a> — format, validate, minify</li> <li> <a href="https://gotoolpilot.com/tools/regex-tester" rel="noopener noreferrer">Regex Tester</a> — real-time matching with explanation</li> <li> <a href="https://gotoolpilot.com/tools/jwt-decoder" rel="noopener noreferrer">JWT Decoder</a> — decode without sending tokens to a server</li> <li> <a href="https://gotoolpilot.com/tools/css-flexbox-generator" rel="noopener noreferrer">CSS Flexbox Generator</a> — visual flexbox builder</li> <li> <a href="https://gotoolpilot.com/tools/css-grid-generator" rel="noopener noreferrer">CSS Grid Generator</a> — visual grid layout builder</li> <li> <a href="https://gotoolpilot.com/tools/diff-checker" rel="noopener noreferrer">Diff Checker</a> — compare text side by side</li> </ul> <h3> Image Tools </h3> <ul> <li> <a href="https://gotoolpilot.com/tools/image-compressor" rel="noopener noreferrer">Image Compressor</a> — compress without uploading</li> <li> <a href="https://gotoolpilot.com/tools/image-resizer" rel="noopener noreferrer">Image Resizer</a> — resize with presets for social media</li> <li> <a href="https://gotoolpilot.com/tools/svg-to-png" rel="noopener noreferrer">SVG to PNG</a> — convert with custom dimensions</li> </ul> <h3> Security Tools </h3> <ul> <li> <a href="https://gotoolpilot.com/tools/password-generator" rel="noopener noreferrer">Password Generator</a> — cryptographically secure</li> <li> <a href="https://gotoolpilot.com/tools/hash-generator" rel="noopener noreferrer">Hash Generator</a> — MD5, SHA-1, SHA-256, SHA-512</li> <li> <a href="https://gotoolpilot.com/tools/text-encryptor" rel="noopener noreferrer">Text Encryptor</a> — AES-256-GCM encryption</li> </ul> <h3> And 70+ more... </h3> <p>Check out the full list at <a href="https://gotoolpilot.com" rel="noopener noreferrer">gotoolpilot.com</a>.</p> <h2> Tech Decisions </h2> <p><strong>Why no framework?</strong> Each tool is a standalone HTML page. No shared state, no routing needed. A framework would add complexity without benefit. Load time is near-zero.</p> <p><strong>Why client-side only?</strong> Privacy. When you compress an image or decode a JWT, that data should stay on YOUR machine. There's no technical reason to send it to a server.</p> <p><strong>Why Cloudflare Pages?</strong> Free hosting with global CDN and automatic HTTPS.</p> <h2> What I Learned </h2> <ol> <li> <strong>Simple tech scales</strong> — Pure HTML/CSS/JS serves millions of page views without infrastructure costs</li> <li> <strong>Privacy is a feature</strong> — Users appreciate knowing their data stays local</li> <li> <strong>One tool at a time</strong> — Building 87 tools sounds overwhelming, but doing 5 per week makes it manageable</li> <li> <strong>SEO takes patience</strong> — Organic traffic grows slowly, but each tool is a new landing page</li> </ol> <h2> What's Next </h2> <ul> <li>More tools based on user requests</li> <li>Blog content for SEO</li> <li>Possibly premium features for power users</li> </ul> <p><strong>Try it out</strong>: <a href="https://gotoolpilot.com" rel="noopener noreferrer">gotoolpilot.com</a></p> <p>I'd love to hear which tools you use most and what's missing!</p> webdev javascript showdev productivity