Useful Tools for Web Devs
Tags: webdev, vscode, javascript, productivity
Published: 2020-02-11 22:10:38


There are hundreds of tools for developers, both paid and free. It can be overwhelming to pick out which ones will actually benefit you. You also don’t want to clutter your workspace with every tool under the Sun. This is a list of the tools that have been helpful to me as I learned web development and in my job as a Software Engineer.

**Fullstack**

* VSCode Extensions
  * [Bracket Pair Colorizer 2](https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer-2) - colors matching brackets so they are easier to pair
  * [Auto Rename Tag](https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag) - whenever you change an HTML/XML tag, this extensions automatically renames its pair
  * [TODO Highlight](https://marketplace.visualstudio.com/items?itemName=wayou.vscode-todo-highlight) - leave yourself reminders throughout yoru code. Whenever you add TODO: it will highlight the phrase
  * [Gitlens](https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens) - this extension has a lot of great features but I mostly use it as a way to see who wrote what line of code and when (git blame). Let me know in the comments what else you use it for!
  * [Markdown Preview Github Styling](https://marketplace.visualstudio.com/items?itemName=bierner.markdown-preview-github-styles) VSCode's markdown preview is great but with this extension, your preview will resemble the Github styles more closely
* [Postico](https://eggerapps.at/postico/) - edit your database using a friendly UI instead of dry commands
* [Postman](https://www.postman.com/) - many uses for this app but I mostly use it to test APIs
* [Bundlephobia](https://bundlephobia.com/) - compute how much your app will grow in size when adding an npm package to it

**Design** 
* [Coolors](https://coolors.co/) - free color palette generator
* [Sketch](https://www.sketch.com/) - Sketch makes it super easy to create wireframes for your apps
* [Appicon](https://appicon.co/) - generates icons and images for mobile apps right from your browser

**Productivity Stuff**
* [Spectacle](https://www.spectacleapp.com/) – easily arrange windows with custom keyboard shortcuts. Unfortunately, it is no longer being maintained. There are other apps like this one but I haven't experimented with them yet since Spectacle has been working great in Catalina
* [Pomoday.app](https://pomoday.app) - keyboard-based task management app. It's very new but I already use it everyday. You can time how long a task takes and see a snapshot of your day 
* Notes - this is the native notes app from Apple. I used to use OneNote but Notes is much cleaner and faster. You can search easily through them so I make sure to include keywords in my notes
* [HabitBull](http://www.habitbull.com/) - Habitbull makes it easy to track my habits
* [Overcast](https://overcast.fm/) - this is my go-to app for podcasts. I am so sad that there isn't an Alexa skill that works with it but it's still better than Spotify or Apple Podcasts. My favorite feature is the ability to create playlists made up of episodes from different shows
* [Booksloth](https://www.booksloth.com/) - I am an avid reader and always keep my Goodreads up to date. However, Goodreads seems to be stuck in the past. Booksloth is beautifully designed and adds the ability to rate books based on badges such as "Story", "Worldbuilding", "Writing Style"

You’ll have to experiment with what’s out there and make sure to keep only those that benefit you and your work. If you use any of these, comment on your experience with them or recommend me tools to use, and I’ll check them out.