The latest articles on DEV Community by Shakeel Ahamed (@sakmbd). https://dev.to/sakmbd https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F4132999%2F0ee0121f-1920-4357-9e5c-36dab3605d52.png https://dev.to/sakmbd en Shakeel Ahamed Thu, 12 Nov 2026 10:20:15 +0000 https://dev.to/sakmbd/snapbit-24gj https://dev.to/sakmbd/snapbit-24gj <h1> I Built Snapbit: An All-in-One Productivity Toolkit for Chrome — Now Live! </h1> <p>Hey developers! 👋</p> <p>I'm excited to share a project I've been working on: <strong>Snapbit</strong>, a Chrome extension that combines several everyday browser productivity tools into one lightweight toolkit.</p> <p><strong>Snapbit is now officially available on the Chrome Web Store!</strong></p> <h2> 💡 The Idea Behind Snapbit </h2> <p>I wanted to bring frequently used browser utilities together instead of relying on multiple extensions for screenshots, image editing, screen recording, color picking and text conversion.</p> <p>That idea evolved into Snapbit.</p> <h2> ✨ Features </h2> <h3> 1. Screenshot Capture </h3> <ul> <li>Capture visible webpage content.</li> <li>Select a specific screen region.</li> <li>Capture full webpages.</li> </ul> <h3> 2. Built-in Image Editor </h3> <ul> <li>Crop and resize.</li> <li>Rotate and flip.</li> <li>Draw and add shapes.</li> <li>Add arrows and text.</li> <li>Highlight important areas.</li> <li>Blur and pixelate sensitive information.</li> </ul> <h3> 3. Screen Recorder </h3> <ul> <li>Record browser tabs.</li> <li>Record windows.</li> <li>Record the entire screen.</li> <li>Optional audio and microphone settings.</li> <li>WebM output.</li> </ul> <h3> 4. Color Picker </h3> <ul> <li>Pick colors directly from the screen using the EyeDropper API.</li> <li>Copy HEX, RGB and HSL values.</li> </ul> <h3> 5. Text Case Converter </h3> <p>Supports:</p> <ul> <li>camelCase</li> <li>PascalCase</li> <li>snake_case</li> <li>kebab-case</li> <li>CONSTANT_CASE</li> <li>Other useful text transformations.</li> </ul> <h2> 🛠️ Technology Stack </h2> <p>The extension is built using:</p> <ul> <li>Vue 3</li> <li>Quasar Framework</li> <li>TypeScript</li> <li>Chrome Extension Manifest V3</li> </ul> <h2> 🔐 Privacy First </h2> <p>Privacy was an important consideration during development.</p> <ul> <li>User content is processed locally in the browser.</li> <li>No external server uploads for user content.</li> <li>No analytics or tracking.</li> <li>No advertisements.</li> <li>No account required.</li> </ul> <p>Snapbit is completely free to use.</p> <h2> 🔗 Try It Out </h2> <p><strong>Chrome Web Store:</strong><br><br> <a href="https://chromewebstore.google.com/detail/jkehbmbghegdemomfhkcbdddpibnjppe" rel="noopener noreferrer">https://chromewebstore.google.com/detail/jkehbmbghegdemomfhkcbdddpibnjppe</a></p> <p><strong>Official Website:</strong><br><br> <a href="https://sakmbd.github.io/snapbit-site/" rel="noopener noreferrer">https://sakmbd.github.io/snapbit-site/</a><br> <a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Ftmk7ivh4dh8pgcihn1xk.png" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Ftmk7ivh4dh8pgcihn1xk.png" alt=" " width="800" height="500"></a></p> <h2> 💬 Feedback Is Welcome! </h2> <p>I'd love to hear from fellow developers and Chrome extension enthusiasts.</p> <ul> <li>What feature would you like to see next?</li> <li>What could be improved?</li> <li>Have you encountered any bugs or compatibility issues?</li> </ul> <p>Thanks for checking out Snapbit!</p> <h1> ChromeExtension #VueJS #TypeScript #Productivity #ShowAndTell </h1> snapbit chromeextension Shakeel Ahamed Thu, 12 Nov 2026 10:02:36 +0000 https://dev.to/sakmbd/vue-rating-kit-djn https://dev.to/sakmbd/vue-rating-kit-djn <p>🚀 My first Vue 3 npm package is live: <strong>vue-rating-kit</strong> ⭐</p> <p>A lightweight, TypeScript-first rating component with RTL, accessibility, custom icons, SSR &amp; Nuxt 3 support.</p> <p>📦 npm: <a href="https://www.npmjs.com/package/vue-rating-kit" rel="noopener noreferrer">https://www.npmjs.com/package/vue-rating-kit</a><br> 🎮 Playground: <a href="https://sakmbd.github.io/vue-rating-kit/guide/playground.html" rel="noopener noreferrer">https://sakmbd.github.io/vue-rating-kit/guide/playground.html</a></p> <h1> VueJS #Vue3 #TypeScript #OpenSource </h1> npm