The latest articles on Forem by Md Noor Alam Shuvo (@twentytwo). https://forem.com/twentytwo 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%2F849307%2F1267a6d6-0f2a-4de1-b55a-5430fff73eb3.png https://forem.com/twentytwo en Md Noor Alam Shuvo Mon, 14 Apr 2025 19:08:03 +0000 https://forem.com/twentytwo/i-made-a-vs-code-extension-to-track-coding-time-with-beautiful-charts-and-heatmaps-1a07 https://forem.com/twentytwo/i-made-a-vs-code-extension-to-track-coding-time-with-beautiful-charts-and-heatmaps-1a07 <p>Hey fellow developers! 👋</p> <p>I wanted to share a VS Code extension I've been working on that helps track your coding time with some nice visualizations. It's completely free and open source!</p> <p>What it does:</p> <ol> <li>Tracks your active coding time automatically</li> <li>Shows beautiful, interactive charts of your coding patterns</li> <li>Generates GitHub-style heatmaps of your activity</li> <li>Works seamlessly with both light and dark VS Code themes</li> <li>Zero configuration needed - just install and code!</li> </ol> <p>Key Features:</p> <p>📊 Project-wise Time Tracking<br> See exactly how much time you spend on each project<br> Break down time by day/week/month<br> Perfect for freelancers tracking billable hours</p> <p>🗺️ Activity Heatmap<br> Visual representation of your coding patterns<br> Quickly identify your most productive days<br> Similar to GitHub's contribution graph</p> <p>📈 Real-time Stats<br> Today's coding time<br> Weekly summary<br> Monthly overview<br> All-time statistics</p> <p>🎨 Theme Compatibility<br> Automatically matches your VS Code theme<br> Clean, modern UI<br> Non-intrusive design</p> <p>*<em>Why I made this: *</em><br> I needed a simple way to track my coding time across different projects without switching between apps or manually logging hours. I thought others might find it useful, too!</p> <p>Installation:</p> <ol> <li>Open VS Code</li> <li>Go to Extensions (Ctrl+Shift+X)</li> <li>Search for "Simple Coding Time Tracker"</li> <li>Click Install</li> </ol> <p>Links:</p> <p><a href="https://marketplace.visualstudio.com/items?itemName=noorashuvo.simple-coding-time-tracker#:~:text=Simple%20Coding%20Time%20Tracker%20is,and%20analyze%20your%20coding%20time" rel="noopener noreferrer">Visual Studio Extension</a></p> <p><a href="https://github.com/twentyTwo/vsc-ext-coding-time-tracker" rel="noopener noreferrer">Github</a></p> <p>Would love to hear your feedback and suggestions! Let me know if you run into any issues or have feature requests.</p> <p><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.amazonaws.com%2Fuploads%2Farticles%2F3wgv4beiov0889lom1re.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.amazonaws.com%2Fuploads%2Farticles%2F3wgv4beiov0889lom1re.png" alt="Image description" width="765" height="1299"></a></p> <p><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.amazonaws.com%2Fuploads%2Farticles%2Ftzdlalww6zkz3dqq63mk.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.amazonaws.com%2Fuploads%2Farticles%2Ftzdlalww6zkz3dqq63mk.png" alt="Image description" width="772" height="1293"></a></p> <p><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.amazonaws.com%2Fuploads%2Farticles%2Fhy0z7qkw4c6mc7jdk4p8.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.amazonaws.com%2Fuploads%2Farticles%2Fhy0z7qkw4c6mc7jdk4p8.png" alt="Image description" width="776" height="1016"></a></p> <p><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.amazonaws.com%2Fuploads%2Farticles%2Fxsxu80f72itv6kf7zb2a.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.amazonaws.com%2Fuploads%2Farticles%2Fxsxu80f72itv6kf7zb2a.png" alt="Image description" width="762" height="1020"></a></p> vscode coding productivitytools development Md Noor Alam Shuvo Wed, 08 Feb 2023 10:47:52 +0000 https://forem.com/twentytwo/test-post-5bjf https://forem.com/twentytwo/test-post-5bjf <p>Write a add function in JS</p> <div class="crayons-card c-embed text-styles text-styles--secondary"> <div class="c-embed__cover"> <a href="https://jsitor.com/NFP0KJa02J" class="c-link s:max-w-50 align-middle" rel="noopener noreferrer"> <img alt="" src="https://res.cloudinary.com/practicaldev/image/fetch/s--nbQ_-LEv--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://jsitor.com/api/v2/snapshot/NFP0KJa02J" height="523" class="m-0" width="880"> </a> </div> <div class="c-embed__body"> <h2 class="fs-xl lh-tight"> <a href="https://jsitor.com/NFP0KJa02J" rel="noopener noreferrer" class="c-link"> monaco-editor - JSitor </a> </h2> <p class="truncate-at-3"> &amp;lt;script src=\"https://cdn.jsdelivr.net/npm/monaco-editor@0.21.2/min/vs/loader.js\"&amp;gt;&amp;lt;/script&amp;gt; &amp;lt;div id=//'container//' style=\"width:800px;height:300px;border:1px solid grey\"&amp;gt;&amp;lt;/div&amp;gt; &amp;lt;button type=\"button\" id=\"getValueButton\"&amp;gt;Submit&amp;lt;/button&amp;gt; &amp;lt;script&amp;gt; require.config({ paths: { //'vs//': //'https://cdn </p> <div class="color-secondary fs-s flex items-center"> <img alt="favicon" class="c-embed__favicon m-0 mr-2 radius-0" src="https://res.cloudinary.com/practicaldev/image/fetch/s--IylhGLVa--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://jsitor.com/logo-jsitor.ico" width="256" height="256"> jsitor.com </div> </div> </div> webdev javascript beginners programming