Tools of the trade for the modern Web Developer

2/11/2018

Having reliable and handy tools is essential for nearly every skilled trade. Whether physical or digital, such as a laptop that you can't go without, or a note-taking app that you use day in and day out, utilizing an excellent set of tools can boost your level of productivity and increase the efficiency of your output. Simply just using whatever is available can be sufficient enough, but like moving from a simple hammer to power tools, new ways of getting stuff done efficiently are (quite literally) at a developer's fingertips.

In this post I'll show you a handful of the tools I work with on a daily basis and how I use them to make the most of my coding experiences. If you find something that interests you, don't hesitate to give it a spin! I've found that trying new tools out for a bit and getting a feel for what it provides, can only serve to give you a deeper breadth of the ever changing tech landscape. Not only that, but by just using, sharing, and even contributing to great products out there, the folks behind the particular service often continue to support and improve the product. Win-win!

Visual Studio Code

The go-to code editor I use, and the one that seems to be widely used by most other web developers today, is Visual Studio Code (VS Code, for short). It's extremely stable, has loads of great extensions, and is updated monthly with major features, fixes, and tweaks. While VS Code itself is crafted by Microsoft, many of it's features have been community requested and tons of awesome extensions are published from third parties. The ability to work easily within the file tree, customize your workspace and user settings, and the deep support for many language and project types, VS Code is the way to go!

[caption id="attachment_603" align="aligncenter" width="540"] VS Code allows for a rather clean environment for hacking away on all sorts of projects.[/caption]

Having some awesome extensions is a key part of having an effective "workbench", so I'd be remiss to mention a few worthwhile extensions that I use that can easily be installed from the in-app marketplace:

Angular v5 Snippets from @John_Papa - Adds snippets for Angular 2+ for TypeScript and HTML. This extension really helps when implementing new services or directives. Thanks John!
Debugger for Chrome from Microsoft - Debugging, setting break points and working with the Developer Tools within Chrome is made much easier with this tool. This is one of those extensions that should probably be baked in to VS Code itself and I imagine the folks at MS are probably working on doing just that.
npm Intellisense from Christian Kohler - Managing and injecting the proper npm modules is an important part of any project that requires it. This plugin easily autocompletes npm modules and this extension is a must download when working with them.
Atom One Dark Theme from Mahmoud Ali - VS Code has a good amount of different themes to personalize the look of your workspace, but the one I like best is the Atom One Dark Theme that's based on Atom's default dark theme.

[caption id="attachment_604" align="aligncenter" width="259"] Extensions extend the possibilities![/caption]

Git Kraken

Having some sort of version control is essential for any developer so why not make it a tad more efficient and a bit more intuitive? I came across GitKraken while reading through a dev blog a few months back and so far the experience has been great! The GUI that GitKraken provides allows you to easily visualize your git history and have a more fluid workflow. It also integrates well with your github account, so connecting your projects is a breeze. Branching, merging, and looking up the commit history can become confusing and disorganized, so being able to visually see the flow of a project is quite helpful for keeping it on track throughout it's development.

[caption id="attachment_607" align="aligncenter" width="580"] Release the kraken![/caption]

Chrome Developer Tools

By having the Chrome browser installed, it's good to know that a set of solid tools come baked-in with it as well! The Chrome developer tools are indispensable when doing almost any sort of web development. From working with the console, editing elements within the DOM, to temporarily adjusting CSS properties and managing network resources, the chrome dev tools are usually the first thing to be opened when coding alongside VS Code in a separate window. Simply hitting Ctrl+Shift+I on Windows or Command+Option+I on Mac, will open the dev tools and the vast array of handy tools are at your disposal. This article on Medium by freecodecamp goes in depth with the dev tools and is definitely worth a read-through. Becoming familiar with and effectively using some of what the Chrome developer tools has to offer is a no-brainer!

[caption id="attachment_608" align="aligncenter" width="344"] The Chrome dev tools are like your own digital tool shed![/caption]

Augury Chrome Extension

While developing Angular based applications, one tool that I found to be extremely helpful when building and debugging is the Augury Chrome Extension. Much like Git Kraken that provides a GUI of sorts for git, Augury helps you visualize an Angular 2+ application through component trees. Seeing exactly how components and modules are connected is one of Augury's best features and getting a feel for a how an app is structured is really helpful. It also runs right inside the Chrome Dev Tools, so opening Augury is just a click away. Very cool!

[caption id="attachment_609" align="aligncenter" width="391"] Augury shows you what's what in the component tree.[/caption]

There are many great tools available that can really provide a web developer a fruitful and productive coding experience. While the digital toolbox for development can seem to overflow with a multitude of different "utilities" and "gadgets", the tools I listed above are my all-around, go-to's when coding web applications and getting the bulk of my work done. Just like a skilled craftsman carefully picks their set of tools and implements, so does the developer that needs the right piece of software to more effectively get the job done. Give these tools a spin, experiment beyond the norm, and git kraken!

Nathan Pickard