Self-Taught Developer’s Survival Guide: The Tools of the Trade

Welcome back! Today, I’ll be talking about all the tools you’ll want prepared that will enable you to hit the ground running on your first day, and beyond. You’ll definitely need the first three items on this list squared away ASAP, and you don’t need to worry about Node/npm until you start serving pages for development and learning more about JavaScript and frameworks, or compiling Sass. So without further ado, let’s dive in!

Picture of a Laptop

A Good Laptop

For a smooth development experience, you’ll want a decent laptop. You don’t need to drop $2000+ on a machine, but I urge you to get a laptop with a solid-state hard-drive(SSD). The speed difference between a machine with an SSD and one without one is dramatic as far as boot time, processing and compiling speed. Whether or not you pick an Apple or Windows machine (or install some kind of Linux distribution) isn’t terribly vital (I myself use Windows), but there are some caveats that can come with Windows development. Certain frameworks (most notably Ruby on Rails) are prohibitively difficult to install on Windows, so if you happen to know for certain that you’re going to be working with Rails, think carefully before you go with Windows. You can get around that by installing a virtual machine, but even that is a bit of a hassle. So don’t feel compelled to break the bank, but make sure you have an SSD, and a healthy amount of both storage space and processing speed.

Picture of Visual Studio Code application

A Text Editor

A text editor is a software program that is optimized for writing, editing, and organizing code. There are several good choices including Atom, Sublime, Notepad++,  though I personally recommend Microsoft’s Visual Studio Code. There are many features that text editors make use of that would easily fill another blog entry (or two), but you’ll want to start using one as soon as possible for two main benefits:

  • Color-Coding: Code is colored in editors according to what it dies, and that color-coding will help you find mistakes a lot faster when certain elements don’t look the way you would expect them to.
  • Syntax highlighting: When you make mistakes, which you will do quite often, the editor will point out many of the worst of these mistakes.

For almost the first year I was learning to code, I used an editor that did NOT have a robust syntax-highlighting, and it cost me a lot of debugging time that I really shouldn’t have had to spend in the first place. A text-editor that fits you comfortably and enhances your workflow is arguably the most important tool in your developer’s toolbox.

Picture of Chrome Dev Tools

Chrome Dev Tools

Chrome Dev Tools is a suite of tools built into the Google Chrome Browser. You access them with the Ctrl + Shift + I (replace Ctrl with Command on Mac). Dev Tools lets you inspect certain elements, displays messages logged to the console,  is capable of monitoring performance and loading times for sites, etc. This is another tool that warrants a longer discussion than I have space here for, but you’ll find it a big help early on for error messages and the ability to confirm how the browser applies CSS to pages.

npm logo

Node/npm or Yarn

Node.js is a JavaScript runtime built to run in the command line, primarily designed for back-end work. There’s a lot to learn about Node, but we are only concerned about it here for its role as a dependency for npm. npm is a package manager used to install dependencies from frameworks, libraries, and other add-ons for projects. An alternative to npm is Yarn, which is a package manager developed as Facebook. Yarn is supposedly faster, though I’ve used both and didn’t notice any significant speed difference. Either one is fine; check them both out and use whichever one suits you best.

I hope this installment was helpful, and don’t hesitate to reach out to me with any questions or comments. Next time on Self-Taught Developer’s Guide: an overview of online learning resources for self-taught devs!

Leave a Reply

Please log in using one of these methods to post your comment: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s