This article aims to be a list of many of the tools I use for various areas of my software development workflow, in the hope that they help others. I'll try and keep it updated when I find new stuff worth sharing.
<h2>Hardware</h2>
<p>I’m a bit of a stationary and HID geek. I’ve used a variety of pens, notebooks and keyboards over the years, and have currently settled on these for my everyday needs.</p>
<ul>
<li><a href="https://amzn.to/2Ibz3rM"><strong>Uni-ball PIN 0.3mm, 0.5mm and 0.8mm fine liners</strong></a>. These use pigment ink, which means they are long-lasting ‘archival’ inks (they don’t fade), and are also resistant to bleeding when using water-based pens to colour over top. The variety of line widths allows for creating a more detailed sketchnote or diagram without having to go over lines multiple times to make them stand out.</li>
<li><a href="https://amzn.to/2Kr38FN"><strong>Tombow dual brush pens</strong></a> <strong>(pastel colours)</strong>. These are great, coupled with pigment fine liners to highlight parts of a diagram or sketchnote.</li>
<li><a href="https://amzn.to/2uUK4F8"><strong>Rhodia A5 Wirebound Dot Notepad</strong></a>. I came across Rhodia notepads after listening to <a href="https://www.relay.fm/penaddict">The Pen Addict</a> podcast. The paper is smooth, works well with fountain pens, fine liners and felt tip pens, and the added dot-grid allows for writing straight as if on lined paper, as well as allowing diagrams to be drawn with straight lines as if on squared paper. The wire binding gives an easy tearaway option for disposing of temporary sketches, so it works well with my visual way of discussing architectures.</li>
<li><a href="https://ergodox-ez.com"><strong>ErgoDox EZ keyboard</strong></a>. Any mechanical keyboard which is compatible with the <a href="https://qmk.fm/">QMK firmware</a> will give you the opportunity to add layers, macros, and shortcut keys to your keyboard, which can make you more productive and remove the need to constantly switch from keyboard to mouse. I’ve used a Microsoft Ergonomic Keyboard for decades, so didn’t want a non-split keyboard, and when I saw the ErgoDox, I was hooked. I can’t say the quirkiness didn’t add to the the appeal of it, but the comfort it gives is great. I now own two (one DIY, one prebuilt).</li>
</ul>
<h2>Software</h2>
<p>Most of my development is done on a MacBook Pro (2015 edition), so I’ll focus OS X. Many of the tools I use, however, are cross-platform, so will work on Linux, and possibly Windows.</p>
<ul>
<li><a href="https://www.iterm2.com/"><strong>iTerm 2</strong></a>. A powerful replacement for the OS X Terminal which supports split-panes and tabs.</li>
<li><strong>ZSH with</strong> <a href="https://ohmyz.sh/"><strong>Oh My ZSH</strong></a>. If you use the terminal a lot, Oh My ZSH will likely improve your productivity. You can customise the appearance of the prompt, as well as enable plugins which auto-complete options within apps such as Git, Docker, Helm, and Node. I use the theme <code>kafeitu</code>.</li>
<li><a href="https://code.visualstudio.com/"><strong>Visual Studio Code</strong></a>. Over the years I’ve gone from using TextMate, to Sublime Text, to Atom, and now VSCode. It’s a fork of Atom, but although I install a ridiculous number of extensions on both Atom and VSCode, Atom slowed down significantly for me, so I lean towards VSCode now. The added abilities of VSCode for debugging JavaScript code make it great for my work. I’ll cover list some of the extension below.</li>
<li><a href="https://www.vim.org/"><strong>Vim</strong></a>, a terminal-based editor. I don’t do the majority of my coding in it anymore, but I do still use it for a significant part of my workflow, for quick scripts, remove administration, debugging, etc.</li>
<li><a href="https://mizage.com/divvy/"><strong>Divvy</strong></a>. A screen divider. There is an Open Source alternative called <a href="https://www.spectacleapp.com/">Spectacle</a>, but it doesn’t have quite the same UX for setting up new shortcuts.</li>
</ul>
<h3>Visual Studio Code extensions</h3>
<p>Along with the built-in capabilities of VSCode, I’ve found a bunch of extensions help me be more productive.</p>
<ul>
<li><a href="https://marketplace.visualstudio.com/itemdetails?itemName=PeterJausovec.vscode-docker"><strong>Docker</strong></a> provides intelligence for Dockerfiles as well as some useful shortcuts accessible from the command Palette.</li>
<li><a href="https://marketplace.visualstudio.com/itemdetails?itemName=EditorConfig.EditorConfig"><strong>EditorConfig</strong></a>, along with the accompanying <code>.editorconfig</code> file within a repository/directory, will ensure that basic formatting is kept consistent. (My current base file can be found <a href="https://gist.github.com/dsample/8518280e8f2e28af09e4df8908122b40#file-editorconfig">here</a>, along with some other useful files for setting up a repo for consistency).</li>
<li><a href="https://marketplace.visualstudio.com/itemdetails?itemName=dbaeumer.vscode-eslint"><strong>ESLint</strong></a> will highlight code lint issues, and if you set the <code>"eslint.autoFixOnSave": true</code> setting, it will correct the trivial issues whenever you save the file, without the need for Prettier.</li>
<li><a href="https://marketplace.visualstudio.com/itemdetails?itemName=letrieu.expand-region"><strong>Expand Region</strong></a>, If you’re used to control+W in Visual Studio for selecting the current word, line, function, etc. with increasing scope each time you press it, this adds the same functionality to VSCode.</li>
<li><a href="https://marketplace.visualstudio.com/itemdetails?itemName=file-icons.file-icons"><strong>File Icons</strong></a> has some nice icons for lots of file extensions.</li>
<li><a href="https://marketplace.visualstudio.com/itemdetails?itemName=GitHub.vscode-pull-request-github"><strong>GitHub Pull Requests</strong></a> provides a way to view GitHub Pull Requests within VSCode, which is handy for Inner Sourcing/Open Sourcing.</li>
<li><a href="https://marketplace.visualstudio.com/itemdetails?itemName=eamodio.gitlens"><strong>GitLens</strong></a> gives even more access to Git metadata and shortcuts.</li>
<li><a href="https://marketplace.visualstudio.com/itemdetails?itemName=oderwat.indent-rainbow"><strong>Indent Rainbow</strong></a> shows a pleasant colour for each level of indent</li>
<li><a href="https://marketplace.visualstudio.com/itemdetails?itemName=yzhang.markdown-all-in-one"><strong>Markdown All in One</strong></a> provides a wealth of tools for editing Markdown files</li>
<li><a href="https://marketplace.visualstudio.com/itemdetails?itemName=DavidAnson.vscode-markdownlint"><strong>Markdownlint</strong></a> highlights issues you have with your Markdown files</li>
<li><a href="https://marketplace.visualstudio.com/itemdetails?itemName=christian-kohler.path-intellisense"><strong>Path Intellisense</strong></a> helps auto-complete relational paths to files</li>
<li><a href="https://marketplace.visualstudio.com/itemdetails?itemName=mechatroner.rainbow-csv"><strong>Rainbow CSV</strong></a> colour-codes columns of CSV files to help visual scanning of CSV data.</li>
<li><a href="https://marketplace.visualstudio.com/itemdetails?itemName=redhat.vscode-yaml"><strong>YAML</strong></a> provides helpful support for YAML file editing, including linting.</li>
</ul>
<h4>JavaScript-specific extensions</h4>
<ul>
<li><a href="https://marketplace.visualstudio.com/itemdetails?itemName=kisstkondoros.vscode-codemetrics"><strong>CodeMetrics</strong></a> helps by letting you know when your functions are getting a bit long-winded and are in need of refactoring.</li>
<li><a href="https://marketplace.visualstudio.com/itemdetails?itemName=wix.glean"><strong>Glean</strong></a> helps with refactoring React code</li>
<li><a href="https://marketplace.visualstudio.com/itemdetails?itemName=cmstead.jsrefactor"><strong>JS Refactor</strong></a> helps with refactoring JavaScript code</li>
<li><a href="https://marketplace.visualstudio.com/itemdetails?itemName=eg2.vscode-npm-script"><strong>NPM</strong></a> highlights issues with packages you depend on</li>
<li><a href="https://marketplace.visualstudio.com/itemdetails?itemName=christian-kohler.npm-intellisense"><strong>NPM Intellisense</strong></a> helps import libraries by auto-completing package names</li>
<li><a href="https://marketplace.visualstudio.com/itemdetails?itemName=pflannery.vscode-versionlens"><strong>Version Lens</strong></a> shows the version of your package dependencies and helps update your references to newer versions</li>
<li><a href="https://marketplace.visualstudio.com/itemdetails?itemName=MaxvanderSchee.web-accessibility"><strong>Web Accessibility</strong></a> highlights where you might have accessibility issues in your HTML/React markup</li>
</ul>