The Sweet Mac Setup for Javascript Development

Written by Mike Costanzo

When I get a fresh Macbook and plug it in for the first time there are some essential apps that I install straight away. I've compiled a list of free tools we recommend to increase productivity for Mac users at rangle.io. Many of these apps are general enough that they would benefit a Designer, Front End Developer or Back End Developer. Obviously the more Developer centric tools are focused on Javascript development since thats what we do. We'd love to hear from you if there are any apps you can't live without that we should add to our toolkit.

Password Box Any password manager will do. 1Password is another well respected paid app. Don’t waste your time having to remember weak passwords and writing them down on paper. The only password you will need to remember is the one to log in to your password manager. Password Box has a Chrome extension that will log you in automatically to all saved sites/apps once you are logged in.

Xtra Finder Makes the finder more usable on Mac and allows for customization. Not a crucial install but highly recommended.

Spectacle Move and resize windows with ease. Window control with simple, customizable keyboard shortcuts. This app is a must have for managing windows.

Alfred Alfred saves you time when you search for files online or on your Mac. Be more productive with hotkeys, keywords and file actions at your fingertips. Also functions a quick app launcher you no longer need to use your Dock to hold your most used apps. Can also perform mathematic calculations, check spelling or definition of words ect…

LICEcap LICEcap can capture an area of your desktop and save it directly to an animated GIF for a quick screencast or app animation demo.

Sublime Text 3 or Webstorm Most people at rangle.io use one or the other with Sublime being the more favoured editor. Webstorm is a Javascript specific IDE. Some devs are also switching over to ATOM

iTerm 2 + Oh My Zsh Would everyone recommend this setup? I know people can get pretty anal about terminal preferences but I’m directing this at someone new who has limited experience with command line stuff. I know the setup helped me out greatly.

Homebrew The missing package manager for OS X. Makes installing node, and other applications easy.

NodeJS The back-end server side technology written in our favourite programming launguage Javascript. It's a fantastic way to make fast, scalable web applications.

NPM Node Package Manager. Get access to community based Node modules.

Gulp Automated task runner. This is a nice little primer explaining how it works and how it is different from Grunt http://www.sitepoint.com/introduction-gulp-js/

Rangle-Gulp Gulp helper functions for Rangle.io default project structure.

$ npm install rangle-gulp

Grunt JavaScript Task Runner. We use Gulp for all future projects but some legacy projects require Grunt.

ngrok Share your localhost dev environment with anyone, anywhere. It's cool as hell. Install it using homebrew with:

$ brew install ngrok