[Updated July 11, 2018]
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.
Xcode
Now that you've installed the Xcode Command Line Tools, make sure you install Xcode as well! You can download this from the App Store and it will take a bit of time, but we promise it's going to help you down the road!
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
[Updated July 11, 2018]
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 Node Version Manager (nvm) which allows us to have different versions of node (useful for developing on different projects). 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, paste this command:
export NVM_DIR="$HOME/.nvm" [ -s "$NVM_DIR/nvm.sh" ] && . "$NVM_DIR/nvm.sh" # This loads nvm
nvm should be fully installed after this!
Once you've got nvm installed, you can do nvm install node to install the latest version of node, then run nvm alias default node to ensure that you always use that version. If you're having an issue with nvm not being recognized, you can run source ~/.nvm/nvm.sh.
VS Code
[Updated July 11, 2018]
VS Code 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 VS Code to be very accessible to beginners, and there are a number of packages you can install for it to improve your workflow even more.
You can install VS Code here.
Setting up VS Code
Check out this blog post for instructions on how to get up and running with VS Code, as well as tips and tricks!
Also, here are our recommended VS Code settings, which you can paste into your User Settings at Command + Shift + ,:
{
"[html]": {
"editor.formatOnSave": false
},
"[python]": {
"editor.insertSpaces": true,
"editor.tabSize": 4
},
"editor.formatOnSave": true,
"editor.tabSize": 2,
"files.associations": {
"*.js": "javascriptreact"
},
"javascript.validate.enable": false,
"prettier.eslintIntegration": false,
"prettier.singleQuote": true,
"python.formatting.provider": "yapf",
"python.formatting.yapfPath": "/Library/Frameworks/Python.framework/Versions/3.6/bin/yapf",
"python.linting.flake8Args": [
"--ignore",
"E501 E402"
],
"python.linting.flake8Enabled": true,
"python.linting.flake8Path": "/Library/Frameworks/Python.framework/Versions/3.6/bin/flake8",
"python.linting.pylintEnabled": false,
"python.pythonPath": "python3",
"python.venvPath": "~/.virtualenvs",
"terminal.integrated.shell.osx": "/bin/zsh",
"terminal.integrated.shellArgs.osx": [],
"typescript.validate.enable": false
}
Note: some of the Python settings will not apply until a few weeks into the course when we install Python and associated packages.
Linting Tools
As you start writing JavaScript in VS Code, 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 ~/.eslintrc.json. 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 code command, in the terminal you can type code .eslintrc.json and paste in the following code
{
"env": {
"browser": true,
"es6": true,
"jest": true,
"jquery": true,
"node": true
},
"extends": [
"eslint:recommended"
],
"parserOptions": {
"ecmaFeatures": {
"jsx": true
},
"sourceType": "module",
"ecmaVersion": 2017
},
"rules": {
"no-unused-vars": "warn",
"no-console": "off",
"no-debugger": "off"
}
}
Now open up VS Code and press Command + Shift + X and type in the phrase "eslint". You can install the first package in the list (by Dirk Baeumer). Restart VS Code, and you will have ESLint enabled!
Prettier
[Added May 11, 2018]
Another package we highly suggest for VS Code is prettier, which automatically formats your JavaScript to be, well, prettier (according to the brilliant devs at Facebook who are behind React, anyway). Just like Eslint, you install it in the terminal first npm install --global prettier and then as a VS Code package: Command + Shift + X and type in the phrase "prettier". You can install the first package in the list by Esben Petersen.
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 is a reference to many of the most important keyboard 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 VS Code:
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:
