The latest articles on DEV Community by Hamaad Butt (@hammadbutt). https://dev.to/hammadbutt 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%2F3856852%2F18680208-139c-4072-8e3d-00a817fe009c.jpg https://dev.to/hammadbutt en Hamaad Butt Thu, 02 Apr 2026 05:35:20 +0000 https://dev.to/hammadbutt/i-built-2-free-web-tools-to-solve-problems-that-annoyed-me-heres-what-i-learned-h53 https://dev.to/hammadbutt/i-built-2-free-web-tools-to-solve-problems-that-annoyed-me-heres-what-i-learned-h53 <p>As a full-stack developer, I have a habit of building tools to scratch my own itch. Here are two I recently shipped — both free, no ads, no signup required.</p> <h2> Tool 1: Thumb Extract — YouTube Thumbnail Downloader </h2> <p>🔗 <a href="https://thumbextract.com" rel="noopener noreferrer">https://thumbextract.com</a></p> <p>Every time I needed a YouTube thumbnail for a project or reference, I'd end up on some spammy site with 10 popups before I could download anything. So I built a clean version.</p> <h3> What it does: </h3> <ul> <li>Paste any YouTube URL → get the thumbnail instantly</li> <li>All resolutions: HD (1280×720), SD (640×480), and default</li> <li>Also downloads channel profile pictures in full resolution</li> <li>Downloads channel banner/cover art at full size (2560×1440)</li> <li>Zero ads, zero signup, zero watermarks</li> <li>Works on videos, Shorts, live streams, and old videos</li> </ul> <h3> Tech approach: </h3> <p>The key insight was using YouTube's image CDN directly rather than scraping the page. This makes it near-instant and works for any public video.</p> <h2> Tool 2: Quick CPS Test — 0-Latency Click Speed Tester </h2> <p>🔗 <a href="https://quickcpstest.com" rel="noopener noreferrer">https://quickcpstest.com</a></p> <p>Every CPS (clicks per second) test site I tried had noticeable input lag caused by event debouncing or heavy DOM manipulation. The results were inaccurate by design.</p> <h3> What it does: </h3> <ul> <li>Measures your CPS with 0-latency click detection</li> <li>Test modes: 1s, 5s, 10s, 60s, 100 clicks</li> <li>Tracks personal best and average CPS</li> <li>Clean UI with zero ads or distractions</li> <li>Works perfectly on mobile (touch events)</li> </ul> <h3> Tech approach: </h3> <p>Used raw <code>mousedown</code> events instead of <code>click</code> events to eliminate the browser's built-in click delay. Removed all unnecessary DOM reflows during the test interval.</p> <h2> What I learned building these </h2> <ol> <li> <strong>Simple tools get used.</strong> Both tools do one thing extremely well. No feature creep.</li> <li> <strong>Performance is a feature.</strong> Users immediately notice when something feels instant vs. sluggish.</li> <li> <strong>SEO from day one matters.</strong> Even small tools benefit from clean URLs, fast load times, and descriptive meta tags.</li> </ol> <p>If you try either tool, let me know what you think — especially if you find any edge cases or bugs. Always looking to improve.</p> webdev javascript productivity showdev