{ The Rithm Blog. }

Essential Tools for Web Development October 21, 2016

Every developer's workflow is slightly different. And because people can have such strong opinions about the best text editor, web browser, and tooling, finding the workflow that works for you isn't always easy.

However, once you've found the tools that are right for you, and know how to use those tools successfully, the rate at which you can program can increase tremendously. And after working with a number of students, we've got our own opinions about tools a beginning developer should absolutely have. In this post, we'd like to offer up the technologies that we think are the most helpful, as well as instructions on how to install those tools (or access them, in the even that they're already installed). Please note: the installation process assumes that you are using a Mac with OSX.

Let's get started. In no particular order, here are a few tools that we encourage all students to have when the enter our classroom on day one. In no particular order:

Spotlight

Navigating your computer is a daily task, but sometimes it's difficult to find things. That's where Spotlight comes in. To launch Spotlight, simply type Command + spacebar and start searching. Anytime you need to open something, do it with Spotlight instead of using the mouse, you'll move around much faster!

Alternatively, if you'd like a tool that's a little more robust, Alfred is a popular choice.

Shiftit / Divvy

Unfortunately, Mac OSX does not have a great way to separate different windows into other locations on the screen. To solve this and improve your workflow you can either install ShiftIt or download a free trial of divvy.

Homebrew

Homebrew labels itself as "The missing package manager for OS X." Basically, homebrew is a one stop shop to install things that do not come built into OSX. You can use homebrew to install all kinds of other packages and tools for your computer.

Xcode Command Line Tools

Certain technologies you'll be using will require you compile code during installations. In order to do this, you'll probably need the Xcode Command Line Tools. To install these from the terminal, type xcode-select --install and follow the instructions when it prompts you to install. If you already have this installed, you will see a message saying xcode-select: error: command line tools are already installed, use "Software Update" to install updates.

Git

Git is a popular tool used for version control of your code; basically, it lets you take snapshots of your code whenever you want so that its easier to revert back to previous versions if you do something that breaks your application. (There are many other powerful features that make Git popular, but we'll save that discussion for another day.)

You may already have git installed - to find out, in the terminal you can type git --version. If you see something like command not found: git, then you'll need to install git. Once you have brew installed, this is straightforward: from the terminal, type brew install git.

Oh my ZSH

To make it easier to navigate the terminal (and for use with Git) you can also install a tool called oh-my-zsh. ZSH is an alternative to bash, a very common shell used in the terminal. If you want to read more about those terms you can find some good info here. Among other things, ZSH is nice because it has a number of enhancements for working with Git.

To install oh-my-zsh run this command anywhere in your terminal:

curl -L https://github.com/robbyrussell/oh-my-zsh/raw/master/tools/install.sh | sh

You may be prompted for your password. This is the same password you use when logging into your computer, but when you type characters you will not see them (this is for security). Once you have typed your entire password, press enter. If you have done this correctly, the installation should continue.

When you are done, run the following command:

chsh -s /bin/zsh

Now quit out of Terminal and open it up again. Anywhere in the terminal, type echo $0 and if you see -zsh you have installed this successfully!

MacDown

MacDown is an open source Markdown editor which we will be using for writing and opening README files. You can install it here

To learn more about markdown, head through the tutorial here. It is essential to have a basic understanding of Markdown, so spend 10 minutes and walk through the tutorial and practice a bit using MacDown.

Node

Node.js is a technology that lets you run JavaScript on the server, but it is essential for testing JavaScript and installing other tools such as our linter. To install node, we will be using a tool called nvm which allows us to have different versions of node (useful for developing/debugging). To install nvm, run the following command anywhere in the terminal

curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.31.0/install.sh | bash

Once this has finished, quit Terminal (command + q) and open it up again and type command -v nvm which should output nvm. Next, to install version 6 of Node, type nvm install 6.0.0.

If you are still having trouble, you can install node directly from https://nodejs.org/en/.

Sublime Text 3

Sublime Text 3 is a popular text editor. While there is plenty of debate as to which editor to use, the truth is that it does not matter too much. We've found Sublime Text to be very accessible to beginners, and there are a number of packages you can install for it to improve your workflow even more.

If you have Sublime Text 2 installed you will need to delete it, because many newer tools do not work with the older version. To check which version of Sublime you're using, open up the application. If you see Sublime Text 2 in the upper-left corner you are using 2 - if you just see Sublime Text then you are using Sublime Text 3.

You can install Sublime Text 3 here.

Setting the subl alias

In order to open up Sublime Text, we either have to click on the application icon or drag a file/folder to the icon, and this can be quite cumbersome. It would be quite nice if we could open up Sublime from the terminal. Thankfully, this there's a nice Stack Overflow question that addresses this very issue, and walks you through the process of creating an alias called subl. Try to follow along with the instructions below.

NOTE: If you installed oh-my-zsh, instead of your ~/.bash_profile you will be adding commands to ~/.zshrc.

http://stackoverflow.com/questions/16199581/opening-sublime-text-on-command-line-as-subl-on-mac-os

Package Control

In the same way that Homebrew is a package manager for OSX, Sublime Text 3 has a package manager of its own which it calls Package Control. This is what must be installed so that we can download lots of helpful tools and add-ons to Sublime Text. Follow the instructions here.

Linting Tools

As you start writing JavaScript code in Sublime Text, it's very useful to have a linter installed that can check your code as you type for syntax errors (missing commas, parentheses, curly braces, etc.). There are quite a few linting tools out there, but we will use .eslint. (There are linters for other programming languages as well! But for right now, we'll just focus on JavaScript.)

To get started, open up Terminal and type npm install -g eslint. If you see an error, type in sudo npm install -g eslint, then type in your password and press enter.

Now type touch /Users/$USER/.eslintrc. This creates a configuration file for eslint. Next, you’ll need to set up your configuration by opening this file in your text editor. If you successfully created the subl command, in the terminal you can type subl .eslintrc and paste in the following code

{
  "parser": "babel-eslint",
  "ecmaFeatures": {
    "modules": true,
    "experimentalObjectRestSpread": true
  },
  "env": {
    "amd": true,
    "browser": true,
    "es6": true,
    "mocha": true,
    "node": true
  },
  "globals": {
    "$": true
  }
}

Now open up Sublime Text and press Command + Shift + P and type in the phrase "install package" and press enter. After a second, a list of packages should come up, so type in "SublimeLinter-contrib-eslint" and press enter (you can press enter earlier if the autocomplete finds it).

Shortcuts

When learning how to code, one of the most valuable things you can do is learn how to move around your computer, terminal and text editor quickly. This just requires a bit of muscle memory and patience, but being able to move around quicker will tremendously help you as a developer. Here are some essential shortcuts; we cannot stress how important they are to learn and use. This list is intended primarily as a reference, don't try to memorize everything at once! In order to remember the many shortcuts available to you, one helpful trick is to try to master one new keyboard shortcut a day.

Want to learn more? Great! Here are a couple more articles on Sublime keyboard shortcuts:

http://www.wdtutorials.com/cheat-sheets/sublime-text-keyboard-shortcuts-cheat-sheet-win-os-x-and-linux

https://www.viget.com/articles/my-overused-sublime-text-keyboard-shortcuts

Typing speed

It may seem like this goes without saying, but if you can't be a developer if you can't type. If you feel like your typing skills are a little rusty, here are a few games that can help you improve:

https://typing.io/

http://play.typeracer.com/

Written by Elie Elie

Back to all posts

Apply Now