The latest articles on DEV Community by Abinav Seelan (@abinavseelan). https://dev.to/abinavseelan 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%2F54396%2F441f4ada-017f-4c73-84ae-74d551283768.png https://dev.to/abinavseelan en Abinav Seelan Mon, 16 Nov 2020 13:54:56 +0000 https://dev.to/abinavseelan/use-your-favorite-vscode-theme-on-iterm2-58gc https://dev.to/abinavseelan/use-your-favorite-vscode-theme-on-iterm2-58gc <p>Ever had to scour the web to find an iTerm2 theme to match your VSCode theme, to keep your development environment in the same palette?</p> <p>Introducing "ditto", a small CLI to convert any installed <br> VSCode theme(s) to importable iTerm2 Color Scheme(s). 🎨😌</p> <p>The CLI is open-sourced on Github!</p> <div class="ltag-github-readme-tag"> <div class="readme-overview"> <h2> <img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev.to%2Fassets%2Fgithub-logo-5a155e1f9a670af7944dd5e12375bc76ed542ea80224905ecaf878b9157cdefc.svg" alt="GitHub logo"> <a href="https://github.com/campvanilla" rel="noopener noreferrer"> campvanilla </a> / <a href="https://github.com/campvanilla/ditto" rel="noopener noreferrer"> ditto </a> </h2> <h3> A CLI tool to convert your VSCode theme to an iTerm2 theme. 🎨 </h3> </div> <div class="ltag-github-body"> <div id="readme" class="md"> <div> <a rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/6417910/99180829-a8a1ae80-274f-11eb-9b19-ef8ed796bc83.png"><img width="570" alt="Banner" src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fuser-images.githubusercontent.com%2F6417910%2F99180829-a8a1ae80-274f-11eb-9b19-ef8ed796bc83.png"></a> </div> <p><a rel="noopener noreferrer" href="https://github.com/campvanilla/ditto/workflows/Unit%20Tests%20CI/badge.svg?branch=main&amp;event=push"><img src="https://github.com/campvanilla/ditto/workflows/Unit%20Tests%20CI/badge.svg?branch=main&amp;event=push" alt="CI"></a> <a rel="noopener noreferrer nofollow" href="https://camo.githubusercontent.com/350148e784dc41ff34c065964bb43a8a377c55a757ec0b2b37c95f9b85ca3799/68747470733a2f2f696d672e736869656c64732e696f2f6e706d2f762f4063616d7076616e696c6c612f646974746f2d636c693f7374796c653d666c6174"><img src="https://camo.githubusercontent.com/350148e784dc41ff34c065964bb43a8a377c55a757ec0b2b37c95f9b85ca3799/68747470733a2f2f696d672e736869656c64732e696f2f6e706d2f762f4063616d7076616e696c6c612f646974746f2d636c693f7374796c653d666c6174" alt="npm (scoped)"></a> <a rel="noopener noreferrer nofollow" href="https://camo.githubusercontent.com/365bd581112ad105ccc86a7014d2e2414f5d433742477e37fda440ef331c3eea/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f6c6963656e73652f63616d7076616e696c6c612f646974746f3f636f6c6f723d79656c6c6f77267374796c653d666c6174"><img src="https://camo.githubusercontent.com/365bd581112ad105ccc86a7014d2e2414f5d433742477e37fda440ef331c3eea/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f6c6963656e73652f63616d7076616e696c6c612f646974746f3f636f6c6f723d79656c6c6f77267374796c653d666c6174" alt="GitHub"></a> <a href="https://github.com/campvanilla/ditto#contributors-" rel="noopener noreferrer"><img src="https://camo.githubusercontent.com/c35c12a99e3c8a3dc127e8bf5258b3872cd7e3ea06354a4404cea09f66517b9f/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f616c6c5f636f6e7472696275746f72732d322d6f72616e67652e7376673f7374796c653d666c6174" alt="All Contributors"></a></p> <div class="markdown-heading"> <h2 class="heading-element">ditto</h2> </div> <blockquote> <p>A CLI tool to convert your VSCode theme to an iTerm2 theme. 🎨</p> </blockquote> <p><a rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/6417910/99155780-1662c180-26e1-11eb-92b8-7ae6c2fb22a2.gif"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fuser-images.githubusercontent.com%2F6417910%2F99155780-1662c180-26e1-11eb-92b8-7ae6c2fb22a2.gif" alt="BannerGif"></a></p> <div class="markdown-heading"> <h2 class="heading-element">Usage</h2> </div> <div class="markdown-heading"> <h3 class="heading-element">System requirements</h3> </div> <ul> <li>NodeJS 10+. The tool does work with NodeJS 8.x, but we do not officially support it.</li> </ul> <p>Tested on macOS, Linux and Windows (via <a href="https://www.microsoft.com/en-us/p/windows-terminal/9n0dx20hk701?activetab=pivot:overviewtab" rel="nofollow noopener noreferrer">Windows Terminal</a>)</p> <div class="markdown-heading"> <h3 class="heading-element">Running / Installation</h3> </div> <p>We recommend using <code>npx</code> to run the CLI:-</p> <div class="highlight highlight-source-shell notranslate position-relative overflow-auto js-code-highlight"> <pre>npx @campvanilla/ditto-cli</pre> </div> <p>Or, alternatively, install it globally via npm and then run:-</p> <div class="highlight highlight-source-shell notranslate position-relative overflow-auto js-code-highlight"> <pre>$ npm install -g @campvanilla/ditto-cli $ ditto-cli</pre> </div> <div class="markdown-heading"> <h3 class="heading-element">Setting in iTerm2</h3> </div> <p>Once an iterm color scheme file is generated, <code>Cmd + Click</code> on the <em>file name</em> (with extension as <code>*.itermcolors</code>) in <code>iTerm2</code> to automatically import the preset into iTerm &amp; then select the theme from preferences (<code>Cmd + i</code> → <code>Colors</code> tab → <code>Color Presets</code> → Select the generated color preset).</p> <div class="markdown-heading"> <h3 class="heading-element">Custom Options</h3> </div> <div class="table-wrapper-paragraph"><table> <thead> <tr> <th width="20%"> CLI Argument </th> <th width="10%"> Optional </th> <th width="45%"> Description </th> <th width="25%"> Default Value </th> </tr> </thead> <tbody> <tr> <td>--extensions-dir</td> <td>yes</td> <td>To specify the folder containing your VSCode extensions you've configured VSCode to</td> </tr> </tbody> </table></div>…</div> </div> <div class="gh-btn-container"><a class="gh-btn" href="https://github.com/campvanilla/ditto" rel="noopener noreferrer">View on GitHub</a></div> </div> <p>Here's a quick preview on how this works,</p> <p><a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fuser-images.githubusercontent.com%2F6417910%2F99155780-1662c180-26e1-11eb-92b8-7ae6c2fb22a2.gif" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fuser-images.githubusercontent.com%2F6417910%2F99155780-1662c180-26e1-11eb-92b8-7ae6c2fb22a2.gif"></a></p> <p>Would love to hear feedback on this. 🙂</p> vscode showdev themes productivity Abinav Seelan Mon, 18 May 2020 15:23:27 +0000 https://dev.to/abinavseelan/supercharge-whatsapp-web-with-hotkeys-and-a-dark-theme-4hjk https://dev.to/abinavseelan/supercharge-whatsapp-web-with-hotkeys-and-a-dark-theme-4hjk <p>When switching between slack and Whatsapp, <a class="comment-mentioned-user" href="https://dev.to/rheaditi">@rheaditi</a> and I have found ourselves trying to use slack hotkeys to do things on Whatsapp Web way too often.</p> <p>Introducing <a href="https://chrome.google.com/webstore/detail/refined-whatsapp/alkoadailhkkeiaadmlkbhbegegjhiok">refined-whatsapp</a>, a chrome extension that we built for ourselves and others like us. This extension adds:</p> <ul> <li>⚡️ Hotkeys: <ul> <li>Start a new chat with: "Cmd/Ctrl + K"</li> <li>Temporarily hide current chat with: "Cmd/Ctrl + L"</li> <li>Show/hide the Chats Sidebar with: "Cmd/Ctrl + \"</li> <li>Search through messages with: "Ctrl + Space"</li> <li>View chat info with: "Cmd/Ctrl + I"</li> </ul> </li> <li>🌚 Dark mode for Whatsapp™ Web!</li> </ul> <p>The extension is <a href="https://chrome.google.com/webstore/detail/refined-whatsapp/alkoadailhkkeiaadmlkbhbegegjhiok">available to download on the Chrome Web Store</a>.</p> <p>Check out our twitter post, which has a video 🎬 to see these hotkeys in action! </p> <blockquote class="ltag__twitter-tweet"> <div class="ltag__twitter-tweet__media ltag__twitter-tweet__media__video-wrapper"> <div class="ltag__twitter-tweet__media--video-preview"> <img src="https://res.cloudinary.com/practicaldev/image/fetch/s--6dRyf2nA--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://pbs.twimg.com/ext_tw_video_thumb/1261988186349133824/pu/img/uTfFCC72vz_GN_59.jpg" alt="unknown tweet media content"> <img src="/assets/play-butt.svg" class="ltag__twitter-tweet__play-butt" alt="Play butt"> </div> <div class="ltag__twitter-tweet__video"> </div> </div> <div class="ltag__twitter-tweet__main"> <div class="ltag__twitter-tweet__header"> <img class="ltag__twitter-tweet__profile-image" src="https://res.cloudinary.com/practicaldev/image/fetch/s--nQH7OqbV--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://pbs.twimg.com/profile_images/1251922693357617152/Zxslubfh_normal.jpg" alt="Abinav Seelan profile image"> <div class="ltag__twitter-tweet__full-name"> Abinav Seelan </div> <div class="ltag__twitter-tweet__username"> <a class="comment-mentioned-user" href="https://dev.to/abinavseelan">@abinavseelan</a> </div> <div class="ltag__twitter-tweet__twitter-logo"> <img src="https://res.cloudinary.com/practicaldev/image/fetch/s--52oNvK_0--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://practicaldev-herokuapp-com.freetls.fastly.net/assets/twitter-ff4bdab814039c4cb172a35ea369e0ea9c6a4b59b631a293896ae195fa26a99d.svg" alt="twitter logo"> </div> </div> <div class="ltag__twitter-tweet__body"> 📣 Introducing refined-whatsapp 🚀<br><br>A chrome extension that adds:<br><br>‣ Dark mode for Whatsapp Web!<br>‣ Slack-esque hotkeys such as:<br> - Start a new chat: "Cmd/Ctrl + K"<br> - Temporarily hide current chat "Cmd/Ctrl + L"<br> - ...and more!<br><br>Download it here: <a href="https://t.co/2xmpUbNHB9">bit.ly/2Zf9YUr</a> </div> <div class="ltag__twitter-tweet__date"> 11:55 AM - 17 May 2020 </div> <div class="ltag__twitter-tweet__actions"> <a href="https://twitter.com/intent/tweet?in_reply_to=1261988831441510401" class="ltag__twitter-tweet__actions__button"> <img src="/assets/twitter-reply-action.svg" alt="Twitter reply action"> </a> <a href="https://twitter.com/intent/retweet?tweet_id=1261988831441510401" class="ltag__twitter-tweet__actions__button"> <img src="/assets/twitter-retweet-action.svg" alt="Twitter retweet action"> </a> 5 <a href="https://twitter.com/intent/like?tweet_id=1261988831441510401" class="ltag__twitter-tweet__actions__button"> <img src="/assets/twitter-like-action.svg" alt="Twitter like action"> </a> 58 </div> </div> </blockquote> <p>The code is open source! If you find any issues / have ideas, do feel free to report them on Github or raise a PR if you wish to contribute!</p> <div class="ltag-github-readme-tag"> <div class="readme-overview"> <h2> <img src="https://res.cloudinary.com/practicaldev/image/fetch/s--vWogaON8--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://practicaldev-herokuapp-com.freetls.fastly.net/assets/github-logo-28d89282e0daa1e2496205e2f218a44c755b0dd6536bbadf5ed5a44a7ca54716.svg" alt="GitHub logo"> <a href="https://github.com/campvanilla"> campvanilla </a> / <a href="https://github.com/campvanilla/refined-whatsapp"> refined-whatsapp </a> </h2> <h3> Supercharge Whatsapp Web with hotkeys and custom themes! 🚀 </h3> </div> <div class="ltag-github-body"> <div id="readme" class="md"> <h1> refined-whatsapp</h1> <blockquote> <p>Supercharge Whatsapp™ Web with hotkeys and a dark theme 🚀</p> </blockquote> <p><a rel="noopener noreferrer" href="https://user-images.githubusercontent.com/6417910/82126610-6d87e800-97cb-11ea-8201-50ced4a2de0b.png"><img width="1400" alt="GithubBanner" src="https://res.cloudinary.com/practicaldev/image/fetch/s--0_iuyxgy--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://user-images.githubusercontent.com/6417910/82126610-6d87e800-97cb-11ea-8201-50ced4a2de0b.png"></a></p> <a href="https://chrome.google.com/webstore/detail/refined-whatsapp/alkoadailhkkeiaadmlkbhbegegjhiok" title="refined whatsapp on Chrome Web Store" rel="nofollow"> <img src="https://camo.githubusercontent.com/40c63d69a2a1898d71bd6a43855f6328570da3eb/68747470733a2f2f646576656c6f7065722e6368726f6d652e636f6d2f77656273746f72652f696d616765732f4368726f6d6557656253746f72655f426164676557426f726465725f76325f3230367835382e706e67"> </a> <h2> Keyboard Shortcuts</h2> <div class="table-wrapper-paragraph"><table> <thead> <tr> <th>Action</th> <th>Hotkey</th> </tr> </thead> <tbody> <tr> <td>Start a new chat / Quick search</td> <td> <code>⌘ Command + K</code> or <code>Ctrl + K</code> </td> </tr> <tr> <td>Show/hide current chats</td> <td> <code>⌘ Command + L</code> or <code>Ctrl + L</code> </td> </tr> <tr> <td>Show/hide chat sidebar</td> <td> <code>⌘ Command + \</code> or <code>Ctrl + \</code> </td> </tr> <tr> <td>Show/hide chat info</td> <td> <code>⌘ Command + I</code> or <code>Ctrl + I</code> </td> </tr> <tr> <td>Search messages in chat</td> <td><code>⌃ Ctrl + Space</code></td> </tr> </tbody> </table></div> <h2> Dark Mode</h2> <p><a rel="noopener noreferrer" href="https://user-images.githubusercontent.com/6426069/82143287-59da9100-9860-11ea-92bc-5a0674c3e920.jpg"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--Hf5UemKm--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://user-images.githubusercontent.com/6426069/82143287-59da9100-9860-11ea-92bc-5a0674c3e920.jpg" alt="dark-mode"></a></p> <h2> local setup</h2> <p>If you'd like to try this extension out before a stable release:-</p> <ol> <li>Setup the repo:</li> </ol> <div class="highlight highlight-source-shell"><pre><span class="pl-c"><span class="pl-c">#</span> clone the repo</span> $ git clone git@github.com:campvanilla/refined-whatsapp.git $ <span class="pl-c1">cd</span> refined-whatsapp <span class="pl-c"><span class="pl-c">#</span> install &amp;&amp; build</span> $ npm install <span class="pl-k">&amp;&amp;</span> npm run build <span class="pl-c"><span class="pl-c">#</span> take note of the output directory, it'll be /path/to/refined-whatsapp/dist</span></pre></div> <ol start="2"> <li>Head over to <code>chrome://extensions/</code> </li> <li>Select "load unpacked" &amp; load the "dist" directory from above.</li> <li>Head over to <code>https://web.whatsapp.com/</code> &amp; check out the features! 💰 </li> </ol> <p>If you want to…</p> </div> </div> <div class="gh-btn-container"><a class="gh-btn" href="https://github.com/campvanilla/refined-whatsapp">View on GitHub</a></div> </div> showdev opensource webdev productivity