Set Up a JavaScript Development Environment on Mac OSX

This is all the software I need to develop JavaScript on my MacBook. This blog post is aimed at beginner developers, starting FreeCodeCamp or another coding bootcamp. (And I recommend starting with FreeCodeCamp before you pay for coding bootcamp, but that’ll be another blog post.)

Which computer to buy?

At any co-working space you can look across at dozens of developers working on MacBooks. You won’t see more than one or two people on a PC. Another way to say this is, all modern computers run either Windows and UNIX. UNIX includes Apple devices, Android phones, LINUX computers, PlayStations, etc. I’ve liked every version of UNIX I’ve used. I’ve hated Windows every time I’ve had to use it. You can buy a PC and run LINUX, but that requires more skills. If you’re a beginner developer, start with a Macintosh.

Which Macintosh?

You don’t need the newest Macintosh. I have two Macs, a ten-year-old Mac Pro desktop computer, and a five-year old MacBook Pro laptop. Both are fine for writing code. Buy a used Macintosh. When you get a coding job your employer will give you a new computer.

Most beginners buy a new 13" MacBook Air, Apple’s cheapest model. You’re better off buying a used MacBook Pro.

Get a MacBook (laptop), not a desktop Mac. You’ll be carrying your computer to meetings, co-working spaces, etc. Almost every developer buys a 13" MacBook because they’re easy to carry in a backpack, but I bought a 15" MacBook with the Retina (high resolution) display. I strongly recommend pair programming, especially if you’re a beginner, but pair programming is all but impossible on a 13" MacBook.

Do you want to sit on my lap or should I sit on your lap?

You can plug in an external monitor, but the 13" MacBook Air can only mirror one external monitor, showing the same thing that’s on the laptop’s screen. My 15" MacBook Pro can run multiple monitors, with different screens on each monitor and the laptop’s screen. Or you might have to pair program somewhere without an external monitor, which is do-able (barely) with the 15" screen.

The best computer for coding might be the Late 2011 MacBook Pro, Apple’s last 17" laptop. These sell for around $600 on eBay. Or maybe a 17" PC running LINUX. Yes, you’ll need a bigger backpack, but you’ll be happier when you’re coding.

A 15" screen is 1/3 bigger than a 13" screen. A 17" screen is 2/3 bigger than a 13" screen.

If you insist on getting a 13" laptop, get the MacBook Pro with the high-resolution Retina display. You’re going to be staring at that computer a lot of hours, so get a sharp, clear screen.

Get a solid state drive (SSD), not a hard disk drive (HDD). SSDs are much faster. You can easily replace a HDD with a SSD, for about $50. You’ll need a minimum of 128GB for coding. 256GB will be plenty, if you keep your music, photos, videos, etc. on an external drive.

Both of my computers have 16GB RAM.

And now install the software…

All of the software that I will recommend is free and open-source, except one package.

First, update the operating system.

Next, install an anti-virus package. I use Intego, which costs about $70 per year. This is the one software package that I recommend paying for.

At the command line

Open the Terminal. It’s in your Applications folder, in the Utilities subfolder. This is UNIX. It’s also called the command line or command line interface (CLI).

First, install Homebrew. This is a package manager that handles installing other software.

Next, check if the Z Shell is installed:

brew info zsh

If not, install the Z Shell, or update to the latest version.

Next, install Oh My ZSH. This will display the current directory, the git branch you’re on, and other information, in bright colors.

Do you know Node?

No, I know no Node.

Can you program in C, and speak Spanish?

Sí, se C.

Node.js is what runs JavaScript on your computer (as opposed to running JavaScript in your browser). Check if it’s installed with

node -v

Again, install it or update to the latest version.

npm

Now check that npm, the Node package manager, installed with Node:

npm -v

If not, install it.

Now install Node modules. You can install Node modules locally, in a project folder:

npm install MyModule

or globally:

npm install -g MyModule

The choice depends on the modules. Some Node modules have to be installed locally. Others work best when installed globally.

I recommend installing npm-check globally:

npm install -g npm-check

npm-check updates your Node modules. To run npm-check to upgrade your global modules:

npm-check -u -g

To upload local modules:

npm-check -u

ESLint

I also recommend installing ESLint globally. ESLint is like a spelling and grammar checker for JavaScript. When I have a bug in my code, I’ll run ESLint on the file and often it’ll find the bug. It also enforces consistant coding style, e.g., reminding you to use semi-colons.

npm install -g eslint

Then run:

eslint --init

Then you can lint any file with:

eslint yourfile.js

Uninstalling Node modules

The other Node modules I use are specific to my projects. I also have a zillion Node modules that I no longer use, from old projects. I recommend uninstalling unused Node modules, or at least don’t update them. At the least, updating Node modules that you don’t need is a waste of time. At worst, an update could include malicious code. Most Node modules are dependent on other Node modules, which are dependent on other Node modules. The developers are often volunteers, who don’t check the dependencies as carefully as they should. This happened with ESLint a few months ago.

npm uninstall eslint
npm uninstall -g eslint

Uninstalling Node modules is harder than it sounds, because you might have multiple local and global copies of the module in different projects. Also, if you installed a Node module with the dependencies options

--save
--save-dev

you’ll need to use those flags to uninstall modules.

After uninstalling a Node module, check if it’s really gone by calling the module and checking it’s version:

eslint -v

I’ve also had my code refuse to run because of old Node modules that wouldn’t die, after updating to newer versions or uninstalling a module. I had to run find:

find . -name ‘eslint’

to clear out old versions of ESLint, for example. There were dozens of files all over my hard drive.

nvm

Many developers will tell you to install nvm. nvm makes it easy to switch between old and new versions of Node. This is something I’ve never had to do. nvm always points to the version you told it to point to, e.g., the version that was current the day you installed nvm. As Node updates you’ll forever be stuck using the old version, unless you tell nvm to point to the new version, which is one more thing to remember to do, i.e., you’re likely to forget.

nvm can also mess up your globally installed npm modules, pointing to old versions and blocking access to updates. I’ve had this happen and it can be extremely frustrating. When your code won’t run and your dependencies have dependencies it ca be hard to figure out what’s causing the problem. This is why developers use Docker, but that’s beyond this blog post.

Just don’t install nvm unless your employer tells you to.

Git, GitHub, and Backups

Buy a portable external hard drive and set it up as your Time Machine backup drive. When you start your computer, plug in the backup drive. This will automatically save your work, and getting an old version is easy.

You also need to install Git. Git is a free, open-source version control system. i.e., a backup system for teams of developers. Git is much harder to use than Time Machine but you’ll need to learn at least the basics.

GitHub is a cloud repository platform for using Git. It’s free if your repositories is public, and you pay to make your repos private. Git and GitHub can be run from the CLI or a desktop app.

Code Editors

You also need a code editor. There are many, with holy wars. Here’s a good review of code editors.

I like Atom, a free, open source editor. Atom allows pair programmers to work on the same file at the same time, from separate computers. This enables two coders who each have a 13" laptop to pair program, without sitting in each others’ laps.

Regardless of your editor, enable the feature that saves your code on focus lost, i.e., when you switch to the terminal or browser to run your code. If you don’t do this you’ll forget to save your code, run old code, and wonder why the bug you just fixed isn’t fixed. In Atom:

Atom > Preferences > Packages > Autosave > check Enabled

The other Atom packages I use are:

auto-indent. This makes my code look nice with one click.

atom-beautify

atom-typescript
bracket-matcher. In JavaScript you spend a lot of time checking that every ( has a ), etc.
github. Do many Git commands from Atom.

linter-eslint
markdown-preview. This makes .md files look nice.
snippets. I saved code templates for creating an HTML5 page, an if conditional, etc. Now I just type a few characters and TAB, and lots of code appears.
split-diff. Compares two files and shows you the differences.

If Atom didn’t install these for you then go to

Atom > Preferences > Install

Chrome and Postman

Chrome is the best browser for developers. You’ll need Firebase, Safari, etc. to see what your HTML looks like in the other browsers, but Chrome is the browser you’ll use for writing code. There are two other versions of Chrome. Chrome Canary is the latest build, which might contain bugs. I found a bug once and stopped using it.

The other version is Chromium. Chromium doesn’t allow Google to track what you do online. I noticed that an MIT computer science major doing an internship at Google used Chromium. I tried it but it’s hard to update. Now I use the regular Chrome.

Postman is a Chrome extension for sending HTTP requests and testing APIs. I use it frequently.

FTP

You’ll need an FTP client. I bought Captain FTP years ago and have been happy with it, but there are free FTP clients too.

Update Checklist

Update your software once a week. Monday morning is good time, helping you settle into coding after a weekend off.

Mojave updates itself and your desktop apps automatically. If you have an older Macintosh that can’t run Mojave, you’ll have to go to the App Store and click the Updates button.

Don’t accept a job at a network security company if the manager’s laptop has the OSX Mavericks desktop screen.

Update Homebrew with two commands:

brew update

then

brew upgrade

It’s unbelievable to me how many modules it updates every week. You can run this every day and it will update a dozen or more modules.

To update your global Node modules, including Node, you installed npm-check:

npm-check -u -g

You also have to update locally installed Node modules from the directory they’re in:

npm-check -u

Check your installed version of Node or any module:

node -v
npm-check -v

Atom has a menu item for updates:

Atom > Check for Update

Then update your Atom packages:

Atom > Preferences > Updates

Oh-my-zsh will automatically check for updates, every two weeks unless you change its defaults.

Chrome updates by opening

Chrome > About Google Chrome

Intego updates itself automatically, but just to be paranoid about viruses click NetUpdate.

Then update any other software you use.