So you’ve finished some tutorials, browsed some documentation, and decided to get your feet wet in web development. Before you get started on your projects, here are some tools that will simplify your workflow and hopefully save you from headache down the line.
Postman is a Chrome app that allows you to test your API calls or remotely hosted apps without having to write code. All the standard operations such GET, POST, and DEL and available for use as well as many less frequently used operations like PATCH, PURGE, and LOCK. Authentication tokens, headers, query strings, body text/objects, and more are easily added to your requests via the builder GUI. Once you’ve built your request with all the necessary parameters, you can run it with the click of a button and view the formatted response. This will allow you to create the correct calls without going through the cycle of guessing and checking your code and/or rifling through the Network tab in Chrome. Another feature of Postman is the ability to create and share collections of requests. This is handy so that you do not have to keep typing out the same requests over and over again as you develop and test your project. Additionally, you can share these collections with other developers if you are handing off the project or working in a collaborative environment. Whether you’re working alone or with a team, Postman is an invaluable tool for any developer whose web apps make API calls.
CORS, cross origin resource sharing, happens when you make an AJAX call to obtain resources (images, JSON data, etc.) for your web app from another domain. By default, Chrome disallows this behavior, but it is very common to need to test pages that pull resources from a CMS or CDN while running a project in your local environment. To address this problem, you can open Chrome using command flags —disable-web-security and —allow-file-access-from-files, but it can be frustrating to have to quit and re-open Chrome in this manner every time you need to test. Luckily, there is now a plugin that we can use to easily toggle between allowing and disallowing CORS in Chrome. Once the plugin linked above is installed, simply toggle the CORS extension on (green) to test your local apps. Fair warning, if you leave it toggled on, some popular websites such as Facebook and Hulu will not work as usual.
Deciding on a text editor is an important step for firming up your workflow; editors will allow you to take advantage of autocomplete, shortcuts, workspace configuration, and many other helpful tools. There are many options out there for text editors, but if you want a 100% free editor, Atom is a great choice. Out of the box, Atom is a solid, basic text editing program, but the power of Atom is its extensibility through packages and configurations. You can download packages for anything from color palettes to an “Ask Stackoverflow” bar for the editor (if Stackoverflow doesn’t mean anything to you yet, trust me, it will soon). One of the most helpful tools in Atom is the color coding of file names based on their Git status: green is a newly added file, orange is a modified file, grey is in unchanged file. Give Atom a try and don’t be afraid to play around with packages and configurations to make the editor your own.
There are developers out there who are hardcore command line users and scoff at GUIs for version control. If you prefer the command line, more power to you, but when you find yourself in a project that has numerous branches or in a hairy merging situation, a GUI tool could save you a lot of grief. SourceTree shows you a timeline of each of your project’s branches and displays changes to the file in each commit so you can look through the history and easily find where changes were made and who made them. Additionally, you can switch branches or checkout a specific commit with a simple double click. Whether or not you opt to use it for everyday version control operations, SourceTree is a valuable tool to have in your pocket for handling convoluted situations.