The latest articles on Forem by joyme2020 (@joyme2020). https://forem.com/joyme2020 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%2F3924301%2F4943340f-c31d-4633-9847-c15b13c4157c.png https://forem.com/joyme2020 en joyme2020 Mon, 11 May 2026 06:57:43 +0000 https://forem.com/joyme2020/how-i-built-9-browser-side-developer-tools-as-single-html-files-col https://forem.com/joyme2020/how-i-built-9-browser-side-developer-tools-as-single-html-files-col <p>I wanted a set of developer tools that I could trust with sensitive data. No server logs. No tracking. No signup. So I built them myself — as single HTML files.</p> <h2> One HTML File Per Tool </h2> <p>Each tool is self-contained — HTML, CSS, and JavaScript all in one file. No npm. No webpack. No build step.</p> <p>This constraint forced me to keep things simple, stay fast, and make deployment a one-command affair.</p> <h2> The 9 Tools </h2> <div class="table-wrapper-paragraph"><table> <thead> <tr> <th>#</th> <th>Tool</th> <th>What it does</th> </tr> </thead> <tbody> <tr> <td>1</td> <td><strong>Timestamp Converter</strong></td> <td>Unix timestamps with natural language support</td> </tr> <tr> <td>2</td> <td><strong>JSON Formatter</strong></td> <td>Format, validate, minify with tree view</td> </tr> <tr> <td>3</td> <td><strong>Base64 Encoder</strong></td> <td>Full Unicode, file-to-dataURL, URL-safe decode</td> </tr> <tr> <td>4</td> <td><strong>URL Encoder</strong></td> <td>encodeURIComponent and encodeURI side by side</td> </tr> <tr> <td>5</td> <td><strong>UUID Generator</strong></td> <td>Bulk v4, crypto-secure, format options</td> </tr> <tr> <td>6</td> <td><strong>Color Converter</strong></td> <td>HEX, RGB, HSL plus named CSS colors</td> </tr> <tr> <td>7</td> <td><strong>Word Counter</strong></td> <td>Words, chars, sentences, keyword density</td> </tr> <tr> <td>8</td> <td><strong>Case Converter</strong></td> <td>All 7 transformations at once</td> </tr> <tr> <td>9</td> <td><strong>Table Generator</strong></td> <td>Visual grid to Markdown, HTML, or MediaWiki</td> </tr> </tbody> </table></div> <p><strong><a href="https://trytools.app" rel="noopener noreferrer">→ Try them all at trytools.app</a></strong></p> <h2> Why Browser-Side? </h2> <p>Every tool processes data using browser APIs — <code>TextEncoder</code>, <code>crypto.randomUUID()</code>, <code>Intl.DateTimeFormat</code>.</p> <p><strong>No data ever leaves your device.</strong> No server logs. No tracking pixels. No analytics scripts.</p> <h2> The Table Generator </h2> <p>The most complex tool. A visual grid editor with three output formats:</p> <ul> <li>Paste CSV from Excel — it auto-fills the grid</li> <li>Shift+click to select cells, right-click to merge</li> <li>Rich text: <strong>bold</strong>, <em>italic</em>, text color</li> <li>Built-in undo/redo, keyboard navigation, auto-save</li> <li>Parse existing Markdown, HTML, or MediaWiki tables</li> </ul> <p>Built because I couldn't find a single tool that handled all three formats well.</p> <h2> What I Learned </h2> <ul> <li>Browser APIs are powerful enough for most dev tools</li> <li>JSON-LD structured data makes tools discoverable by AI crawlers</li> <li>Single-file approach keeps things fast and trivial to deploy</li> </ul> <p><strong><a href="https://trytools.app" rel="noopener noreferrer">Live Site → trytools.app</a></strong><br><br> <strong><a href="https://github.com/joyme2020/trytools" rel="noopener noreferrer">Source Code → github.com/joyme2020/trytools</a></strong> (MIT)</p> <p>Feedback welcome — what tools should I build next?</p> webdev javascript showdev html