Tools I wish I knew from the start
Tags: beginners, tools, javascript, productivity
Published: 2019-02-04 07:28:47

---
title: Tools I wish I knew from the start
cover_image: https://thepracticaldev.s3.amazonaws.com/i/v2j25n4e18zoyewd0w6x.jpg
published: true
description: tips and tools to code and debug efficiently
tags: #beginners, #tools, #javascript, #productivity 
---

In the career of a software developer it happens many time that you have to **start from scratch in a new technology**, because the one you are expert in became obsolete, because you joined a new cool project or simply because in your company there is no one left to fix a bug on an old legacy project.
Whatever the reason, what I always found most challenging and time-consuming besides the language specific skills, syntax and stuff, was to **get to know the ecosystem** of a particular tech stack. Of course one can quickly jot down some lines of code on notepad and be able to compile/bundle and run them without too many troubles.  But when it comes to development speed and effective debugging then it is necessary to know and use lots of tools which make us productive and proficient.


I have always been obsessed in finding ways to **avoid tedious repetitive tasks** and when I ultimately I realize I cannot automate them, I try at least to make my life simpler and **become faster at it**.
One of the many reasons why I like pair programming or simply passing by to some colleague to discuss some implementation details is that inevitably I notice something and it´s  _"hey hey hey..  what was that shortcut, what is that tool that you just used?!"_ and that´s the epiphany of the day.

![sudden realization](https://media.giphy.com/media/Lcn0yF1RcLANG/giphy.gif)

And this is why i never understood those colleagues that for days/months/years sticked to their known comfortable way of doing things, no matter how slow and tedious it was (like having to click with the mouse 10 times in Tortoise to commit a file, or dropping console.logs everywhere instead of configuring VisualStudio to run a proper debugger); and whenever I suggested a shortcut or a tool the answer was: _" oh but that´s too complicated, it takes too long to set up, I don´t have time to do it. I just need to quickly fix this thing."_ and there they are, over and over again manually doing things that take ages, are boring and seriously error-prone.

![Can´t afford to improve, we are too busy](https://thepracticaldev.s3.amazonaws.com/i/29ky6rmdlsj2lqockhj8.jpg)


In the beginning, it can be a simple shortcut like 'Ctrl + Shift + ↑/↓' to move 
a line of code, then it builds up and you find yourself proxying the traffic of the web application in production and using breakpoints to debug your lambda functions.
 
As my first post on DEV.TO, I want to share some tools I really hoped were shown to me when I started coding and some library and add-ons I started using almost on a daily basis since I switched to the **FullStack Javascript Serverless** world around 2 years and a half ago plus some other tools that really make the difference in terms of efficiency. 

---

##Node and Javascript 
[dev-hints](https://devhints.io/) and [dev-docs](https://devdocs.io/)
Because of course each Library, Language and Framework has its - good or lacking - documentation page, but having one place where to look is always better and faster.
[Husky](https://github.com/typicode/husky) Git hooks are scripts that run automatically every time a particular event occurs in a Git repository. Main drawback of git hooks is that they cannot be version controlled ( they reside in your local git folder), they are mostly shell or Perl and it´s not so easy to share them with your team or enforce their usage.  With Husky, you can write some js that is committed along with your project and will be executed as git hooks.  Husky will take care of binding your script to whatever git action you like.
[XO](https://github.com/xojs/xo) One of the many javascript linters. The main reason for choice is that output is beautiful, configuration very easy.  (Linters analyzes your code searching for potential programmatic and stylistic errors. Detecting ( and fixing ) issues that range from indentation to semicolon, unused imports or typos it helps prevent compile errors and bugs and enforcing strict and readable code it guarantees a uniform code style.
[AVA](https://github.com/avajs/ava)   One of the many testing frameworks, but minimal and fast. The main reason for choice is that it runs each test in a separate Node process, therefore tests can run concurrently and is able to run tests concurrently and with an isolated environment.
![AVA test framework](https://thepracticaldev.s3.amazonaws.com/i/nq4405821daur6sv7m5m.png)
[Standard Changelog](https://www.npmjs.com/package/standard-changelog) Prefix all your commits following the specification of Conventional commits and whenever you will publish your NPM package you will get a ChangeLog automatically generated. 
[env-cmd](https://www.npmjs.com/package/env-cmd) Handling environment variables and builds for different stages ( dev - QA - production etc) can be hard and gets messy quickly.  With this handy module, you can execute scripts in your package.json using an environment from an env file.
[React Dev Tools](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi) and [Redux Dev Tools](https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd?hl=it) If you are building React Apps you cannot not use these tools to inspect the components and the state changes. 

##Backend
[Postman](https://www.getpostman.com/) Postman IS THE APP if you are developing or testing a RESTful API. Over the years they added more and more features like mock servers and test collection and I probably use 20% of its feature. But it is super easy to configure your GET POST UPDATE requests - with templates for different environments and quickly check the response. Without having to use curl or filling manually the form of your web app.
![Postman](https://thepracticaldev.s3.amazonaws.com/i/72l7bjmdq04clf836u1e.png)
[Charles](https://www.charlesproxy.com/) Charles is a Web Proxy that will record and display all of the data that is sent and received. You can use it to view XML and JSON requests and responses, to throttle bandwidth and simulate slower Internet connections, to set breakpoints and intercept and edit request and responses.  ( this is one of the best features because it´s very handy to test fixes or reproduce bugs in the communication between server and client. just intercept the response that crashes the client, modify it and see your client work like a charm, then you are sure how you want your server to respond and can safely make your changes).
[Switcheroo](https://chrome.google.com/webstore/detail/switcheroo-redirector/cnmciclhnghalnpfhhleggldniplelbg) Charles could be overkill for most simple tasks, but it can happen often that you want to redirect an API call from your app in production to the API you are running locally so that you can debug it or you simply want to check a different image or CSS loaded by a web page.  In that case, this chrome extension does its job very well and really in a couple of clicks. 
[Serverless Framework](https://serverless.com/) Seriously, if you are starting with serverless architecture don´t even think of building your apps using the UI Console. Dive straight into **Infrastructure As Code**. Describe all the components of your serverless stack, version control it, and deploy without hassles. 
[Dbeaver](https://dbeaver.io/about/) Free and open source universal database tool.  I use it to check the schema and content of the tables and to test the SQL queries my Lambdas will execute. 
[Robo 3T formerly Robomongo](https://robomongo.org/) Since Dbeaver supports NOSQL only in the Enterprise Edition whenever I have to work with NoSQL and MongoDB I use Robomongo. Nice and intuitive.

##Productivity
[Trello](https://trello.com/guide) Stop using post it and to-do lists to organize your tasks.  Probably at work you are already using some Ticketing System and Collaboration Tool to deal with your feature and bugs development during the sprint. I personally use Trello at work and at home to remind myself of what I have to do in a Kanban style. 
![trello board of my last vacation](https://thepracticaldev.s3.amazonaws.com/i/ocy8l2c1yx51h5mpbnc8.png)
[Pomodoro](https://chrome.google.com/webstore/detail/marinara-pomodoro%C2%AE-assist/lojgmehidjdhhbmpjfamhpkpodfcodef)   There are plenty of chrome extensions for the Pomodoro Technique. Pick one,  Organize your time, define your tasks, focus for a short period of time and take a break. No email - phone - facebook checking until the timer runs out!
[Jumpcut](http://jumpcut.sourceforge.net/) **We all copypaste**. jumpcut allows you to keep a history of up to 99 clipboards.  
[Spectacle](https://www.spectacleapp.com/) Whether you have a small screen laptop or a 3 Monitor Workstation, being able to move and resize your windows easily and fast is paramount. 
[MacPass](https://macpassapp.org/) Having simple passwords is bad. Having the same password for many services and account is very bad. Having complex and different password everywhere is impossible. Use a tool like this to generate and store the password for all your accounts.
![mindmaps](https://static.makeuseof.com/wp-content/uploads/2013/07/Mindmup-mind-map.png)
[MindMup](https://www.mindmup.com/) Every time I am brainstorming, or I want to put order in my ideas I draw a mind map diagram. Be it on paper or on screen, it is a great way to follow your train of thought and then reorganize the concepts.
[Draw.io](https://www.draw.io/) Another tool for diagrams, but in this case it´s about UML, Flowcharts, Mockups and AWS architecture. 

## Miscellaneous
[oh my zsh] (https://ohmyz.sh/) autocompletion of git commands, easy navigation to folder and files, display of all the scripts in your package.json.  ohmyz.sh makes the terminal easier and fun.
[Source tree](https://www.sourcetreeapp.com/)  If you really can´t help but having a visual representation of your git repo, I find Source Tree very neat ( though I use it only when I wasn´t disciplined and I need to check the diffs among many files and reorganize my changes for atomic commits.
[Json Viewer](https://chrome.google.com/webstore/detail/json-viewer/gbmdgpbipfallnflgajpaliibnhdgobh) This plugin simply makes the JSON opened in your browser more readable.  
[jq](https://stedolan.github.io/jq/) JQ allows you to pretty print, filter, map your JSON files in a very easy fashion
```
curl 'https://api.github.com/repos/stedolan/jq/commits?per_page=5' | jq '.[0]'
```
for examples pipes the JSON returned by the API and returns the first element of the list.

---

It´s of course not an exhaustive list and it is to some extent opinionated, I have not researched and compared among alternatives and similar tools. (and I am ready - and glad - to switch to whatever I might find out and try out tomorrow)  
In the end, it does not really matter. What matters is being flexible and productive and whatever tool we decide to use it must allow us to boost our productivity, speed-up boring processes and let us **focus on what we like** and do best - **solve problems and implement solutions**.