My web development environment

Configuring your ideal web development environment is a never-ending task. Let me help you.

20 min readJun 16, 2014

From time to time you find a new tool and end up switching your workflow. Sometimes twice in a row.

Should I use Tower or SourceTree or just use git + vim on the terminal instead?

Most tools I talk about here are open source, but some are proprietary and may cost you some money.

If you work on Windows, I recommend you to migrate to Linux or OS X. It’s usually more appropriate that developers use UNIX-like platforms.

Ubuntu is a great Linux distribution you can choose. It’s somewhat easy to use and it has a large user base.

Learn the command-line interface (CLI) by reading Unix 101: Basic Unix, Using the Terminal, Command-Line How-To.

Hardware

I use a MacBook Pro Retina 15-inch. It has a powerful UNIX operating system (OS X), a hi-resolution display and plenty of processing power.

Choose your hardware wisely. If you develop for a living try to get the best you can afford. Don’t be cheap or you’ll end up spending more in the long run instead of saving money.

For a notebook, get a MacBook Pro Retina or a Thinkpad. Headphones? An award-winning Bose QuietComfort 25 will do it. A truck? Get a Volvo. Lenses? Get a Zeiss. A mouse? Get a Logitech Performance MX.

Better quality material and finishing, reliable support, and longer average duration pays off.

Some system tweakings

Create an admin user and remove administrator privileges from your regular user.
Use su <admin-login> to login as another user on the terminal.
Enable root (to avoid typing sudo all the time) and use it wisely.
Create a ~/Applications directory, change its icon to match the global Applications directory, and install packages only you intend to use locally.
Enable the guest account and create a second regular user account that you let your friends to use without messing your main account.
Turn on iCloud’s Find my Mac feature.
Encrypt your disk with FileVault and store your recovery keys somewhere reliable.
Maybe Set a Firmware Password, once aware of the risks of being locked out.
Disable auto-login.
Add the keychain lock icon on your menu bar.
Learn some Accessibility Keyboard Shortcuts.
Enable Full Keyboard access.
Enable remote access to your machine via SSH with public / private keys instead of passwords.
OS X Mountain Lion: Zoom content on the screen: enable zooming with control + fingers up / down.
Open System Preferences > Keyboard and set the Key Repeat to Fast and the Delay Until Repeat to Short.
Learn to use defaults to change configurations not found on the System Preferences without a tool like MacPilot.
Go to System Preferences > General and set show scroll bars to when scrolling.
Go to System Preferences > Mission Control and turn off the Dashboard.
Configure a encrypted connection virtual private network (VPN) on the Network Preferences to not expose yourself too much when using open Wi-Fi. One overseas / in another jurisdiction is greater. There’re a some great VPN providers if you don’t want to set up your own or want your traffic mixed with others’. It also helps when you have partial network connection problems and your connection to your VPN is working fine.
Turn the Firewall on System Preferences > Security & Privacy > Firewall. I don’t like its dumb UI, but it’s enough for me.
While you’re at Security & Privacy settings, go to the General tab and check the box to allow only apps downloaded from the Mac App Store and identified developers. You can always run any other app by using right-click + open and confirming you want to run it.
Protect your user account with a password screensaver.
Add Lost and Found Message to Login / Lock Screen.

Add Lost and Found Message to Login / Lock Screen

Logitech Performance MX

If you took my advise and got this mouse, install its driver and go to the control panel. There, find the Logitech Control Center, select your device, and click on Configure. Set the zoom key to be an option key and the mouse’s lower button to sleep instead of firing mission control. Now you’ll have smooth zooming experience using the mouse wheel once you activate the zooming using option + gesture (see tip below) and a fast way to lock your computer.

Deactivate untrustworthy Certificate Authorities root certificates

Open Keychain, click on the System Roots keychains and select the Certificates category. You’ll see lots of Certificate Authorities root certificates. Some of them are from government from around the world or some other questionable you can’t trust. Read Questioning the chain of trust: investigations into the root certificates on mobile devices and deactivate them. You don’t need to remove them. Open each certificate, expand the Trust section for each suspicious CA root certificate, and select never trust for when using this certificate (for each one).

Install iTerm 2

iTerm is better than Apple’s Terminal.

Also download the Meslo for Powerline font, then go to iTerm’s Preferences > Profiles > Text and set the value for Non-ASCII Font to 10pt Meslo LG S Regular for Powerline to make vim’s Powerline plugin show some private code / special characters correctly (as below).

Do it even if you don’t have plans to use vim at all. It’s worth it.

iTerm divided with four screens (vim, git, gulp, and ngrok) and some open programs.

Then go to the Preferences > Profiles > Terminal tab and set the Report Terminal Type to xterm-256color, and set your scrollback lines buffer to unlimited (or a larger value, 100000 works for me). Tick the Silence bell and the show bell icons on tabs. Reopen your terminal to make the changes effective.

Now go to the Preferences > Profile > your profile > General > Working Directory and mark advanced settings and set "Home, reuse, and reuse" or whatever you prefer.

Bind control + a to beginning-of-line and control + e to end-of-line if you use an Apple keyboard. Use bindkey on the CLI to see what hotkeys you’ve enabled.

Tips:

option + arrows moves your cursor based on words.
to divide your screen horizontally: cmd + d.
to divide your screen vertically: cmd + shift + d.
to browse between them: cmd + [ and ˆ ].
to clear a screen use cmd + k or ctrl + l (different behaviors).
another way of saying cmd + key is ^key.
goto Profiles > Colors > change the normal blue color to blue ansii 157, 257, 242 and the foreground to white.
to save a window arrangement go to Windows > Save Window Arrangement. You can configure your default arrangement on the preference panel. Set whatever you prefer as the default.

Asciinema

Install it: a lightweight, purely text based approach to terminal recording.

Install developer tools

Open iTerm and type xcode-select —install to install some really important developer tools before continuing.

Use git and set up a GitHub account

git is a distributed version control system. Learn it. It’s really important.

Many operating systems already include it. If you don’t have it installed on the command line interface, proceed to the Install developer tools step above or use your operating system / distribution package manager / registry.

Create a GitHub account right now, if you still don’t have it (what a shame!).

If you’re a student, check this educational discount so you can get private repositories for free. Plus, the student package (ScreenHero seems amazing, but I haven’t had the chance to try it yet).

Set up your git and configure your .gitconfig the way you like it. Proceed reading the GitHub help pages.

Be social. Open source code you write under public domain using the MIT License on GitHub public repositories.

Tip: Prefer SSH over HTTPS whenever possible. Some tools, such as gh (which I’m gonna talk about later) work better with SSH. But a few academic / corporate networks block ports other than HTTP(S).

Already master the basics of git? Learn interactive rebasing.

Improving your shell with zsh + oh-my-zsh

Watch this short bash vs. zsh + oh-my-zsh text-only screencast.

A UI-improved shell, isn’t it? Keep in mind that bash is still the shell of choice for shell scripts, tough.

If you can’t find zsh, just install it. Once you’ve zsh, install oh-my-zsh.

Copy my zsh configuration file (~/.zshrc) and adapt it to your needs.

To try another theme change the ZSH_THEME variable and to add an available plugins add its name on the plugins array variable.

To apply a new config to an already started session type source ~/.zshrc (or use my alias f5).

Know your plugins. I highly recommend the z plugin for browsing the most accessed directories faster, like above.

Tip: if you copied my .zshrc, type fs to serve files from your current directory with a tiny Python embedded HTTP server.

Homebrew

brew is the missing package manager for OS X. It’s very useful.
Install it, then brew install <name> the following packages:

wget: non-interactive Internet downloader.
ccze: a robust log colorizer.
lynx: text-mode browser (just a curiosity).
ngrok: really useful introspected tunnels to localhost (really amazing).
srvdir: actually not yet published on brew, but you can install it manually on your ~/bin.
phantomjs: headless WebKit scriptable with a JavaScript API.
nmap: Network exploration tool and security / port scanner.
git-extras: Little git extras.

Vim + Vundle

Vim is a text editor you must read the manual before using. Good luck!

I use it a lot because it’s very hand for quick config files edits.

This is why I spent once an entire afternoon configuring it.

Install Vundle, a package manager for Vim.
Copy my ~/.vimrc to your ~/.vimrc.
Type vim +PluginInstall +qall and wait it to install my plugins.
Open Vim. To close it without saving modifications press esc, then :!q.

Sublime Text beta 3

https://vimeo.com/98309741

Make sure to get the version 3 (beta)! It’s not as stable as… stable, but it’s stable enough and the benefits make it worth it. Just know that sometimes things break.

I hesitated a lot in giving Sublime Text a chance to be my editor of choice. Before that I used to use WebStorm and PhpStorm and failed ugly when trying to use Vim for everything.

But I was starting on my new job and every JS developer there I know uses it, so I decided it was about time to try it. Two days later I was in love with it.

One caveat: I didn’t start from scratch. I copied the configuration directory of a coworker. It made me end up with a somewhat bugged Sublime Text, but I think it was more worth than if I had just started with a bare install.

Feel free to copy my Sublime’s Preference.sublime-settings, then go to Preferences > Settings — User and copy / paste. You should expect to find other plugins configurations there, after you install them.

Sublime’s configs are JSON-based (and oh, it support comments).

Install the Package Manager now. Once it is installed, install other plugins using the Install Package command on its prompt.

To open Sublime’s command prompt use cmd + shift + p. Learn other keyboard shortcuts.

Here’s a list of plugins I’ve installed and you may find useful:

Better JavaScript
Clickable URLs
ColorPicker
EsFormatter
Soy
SCSS
DocBlockr
Emmet
Gutter Color
JsFormat
Path Tools
Pretty JSON
SublimeGit
Sublimerge
Keymaps
SublimeREPL
ToggleExclude
TernJS
TrailingSpaces
Autoprefixer
LaTeXTools
SublimeLinter (with JSLint and JSHint)
JavaScript Patterns
JavaScript & Node snippets
SidebarEnhancements
Dracula Color Scheme
BracketHighlighter
Markdown Extended
EditorConfig
SublimeJSCoverage

SublimeGit is really useful. Open the command prompt and try commands like diff, blame, and etc.

I created the ToggleExclude extension to help you browse code faster in Sublime Text (depending on if you want to search on just your project code or also on its dependencies’).

Know issue: if you set Sublime Text as your default editor on git, when you’re on the middle of writing a commit message or doing an interactive rebase or something like it doesn’t close the editing file with cmd + s. Use cmd + w and then confirm, otherwise Sublime Text will hang and stop responding.

Intellij IDEA, WebStorm…

JetBrains is the creator of Intellij IDEA and several others powerful IDEs (Integrated Development Environments) built on top of its base. Uncle Bob approves it.

Their flagship product is Intellij IDEA Ultimate which can be configured to do everything their others IDEs such as WebStorm does.

Oh, you may need to install Java 6 or do something (and install Java anyways). If you’ve been using Eclipse, do yourself a favor and give JetBrain IDEs a try.

Get the JetBrains IntellijIDEA Comunity Edition if allyou need is to write simple programs in Java for Programming 101, Algorithms, and the like.

Eclipse

You may need to configure your line-endings to UNIX-style and your file encoding to UTF-8 on your Preferences tab.

NodeJS and some npm packages

Install the last stable version of NodeJS. Always make sure about what version you’ve installed because it’s a pretty new tool and things are still changing very fast and some Linux distributions are not delivering new major release as fast as they’re out.

Either download it from its official site, or read Installing Node.js via package manager to know how to get the latest version.

With NodeJS you either install packages locally or globally. Install globally for applications, locally for libraries you use in what you develop.

You can install a Node package with npm, its package manager.

To install the following global packages use npm install -g <name>.

amazing app for learning to program in JavaScript

learnyounode is an amazing intro to Node.js via a set of self-guided workshops, by nodeschool.io.
yo (yeoman) is the web’s scaffolding tool for modern web apps.
bower is a package manager for the web.
david is a Node.JS dependency watcher.
gulp is a streaming building system.
jslint is my option of choice JavaScript linter.
jshint is a more popular linter.
node-inspector Node.js debugger based on Blink Developer Tools.
nodeunit is an easy unit testing in node.js and the browser.
recess is Twitter’s CSS linter.
coveralls lcov posting to coveralls.io
require-analyzer Determine dependencies in code or on the command line.
keybase is a public directory of publicly auditable public keys. All paired, for convenience, with unique usernames. I’m there.
cordova is a platform for building native mobile applications using HTML, CSS and JavaScript.
karma is a simple tool that allows you to execute JavaScript code in multiple real browsers.
istanbul is a JS code coverage tool written in JS.
gh is an amazing GitHub command line tool we created at Liferay☺

dotfiles

dotfiles.github.io : Your unofficial guide to dotfiles on GitHub.

I really recommend you to install this one by my co-worker Eduardo Lundgren, even though I’m not using it (as I had already configured my machine before he published it).

Be safe, though: a “dotfiles” is a very personal thing, a question of taste. It’s wise to look the source code first before you try one.

More CLI programs

compass If Twitter’s recess is useful for you, try scss with compass (which I prefer).

Nice things

Foundation is way better than the already-great Bootstrap, in my point-of-view.
node-webkit is the way to go to build desktop applications with HTML, CSS, JS.

Some GUI programs

Popcorn Time

A great example of a powerful Torrent-based Netflix-like app which is open source & developed using node-webkit.

SourceTree

A free and powerful Git client by Atlassian. If it asks if you want to install Mercurial (hg) you can safely ignore if you just use git. I love to do interactive staging using it.

Go to Preferences and:
1. Copy of your ~/.gitconfig and check Allow SourceTree to modify your global Mercury and Git configuration files. I couldn’t use Kaleidoscope as my diff tool before doing that, even though it was configured on ~/.gitconfig. After you allow it, use diff to verify if you’re ok or not with any unexpected changes SourceTree did to your configs, then you can discard this copy. See Diff dropdown in prefs greyed out?

2. set the Terminal App to iTerm2.

3. Go to the Diff tab and set your Visual Diff Tool and Merge Tool to Kaleidoscope.

When you need it, go to View > Show Command Output to see the log of git operations.

To sign your commits with your SSH key, click on the settings icon, then security, and check Enable GPG key signing for commits.

LICEcap

Because sometimes you need to record the GUI with a GIF, not an asciinema. Need something more powerful and/or with sound? Maybe QuickTime, Screeny, and ScreenFlow.

Sequel Pro

An easy-to-use MySQL database client.

Kaleidoscope

An expensive, and powerful, diff tool. Not one of my most used tools, but maybe very useful depending on your workflow. Once it’s installed, open its main menu > Integration, then install the command-line tool from there and set up your Git command-line integration so git uses Kaleidoscope as your diff tool.

Caffeine

A tiny program that you use during your talks to prevent your Mac from sleeping.

DiskWave

A disk usage utility to find out how your storage space is being consumed.

Markdown Pro

A beautiful and easy to use Markdown markup language editor. The Mou editor is pretty similar, and free.

CloudApp

Drag & drop, take a screen shot, and share the link immediately.

Transmit

A good SFTP, Amazon S3, and WebDAV client by Panic. The same creators of the Unison usenet browser. Alternative: Cyberduck.

Oh, if you still use FTP, stop. Use git, torrent, or anything else to share files and deploy apps.

Timing

Automatically tracks what programs you use on your computer and how you do it to make you more aware of how you’re using your time.

IRCCloud

An amazing IRC bouncer / client / service I use to access freenode, the de facto official open source projects & development chatting network. It has a web app, plus a Android / iOS open source apps. You can turn everything off and when you’re back you’re still connected. I also enjoy the following clients: LimeChat, Colloquy, Konversation, and mIRC (unfortunately Windows-only).

Dash

API Documentation Browser Manager that uses a preemptive local cache policy and, thanks to that, feels instantaneous.

Two alternatives: DevDocs (web-based), Zealdocs.

CCMenu

It displays the build status of projects on a continuous integration server, such as Travis CI (see how). Well done, ThoughtWorks.

It pools from the CI service. The default pooling interval is just 1min. I increased it to 5min as I use a 3G connection many times and don’t want the radio being turned on all the time.

Sim Daltonism

Sim Daltonism is a color blindness simulator for Mac OS X. Also available at the App Store. Another great app for Color Oracle, which serves as a full screen filter.

CharlesProxy

Easy-to-use, very useful, and powerful web debugging proxy application.

This fancy modal (yeah, modal) appear all the time during the trial period.

Wireshark

Powerful and hard-to-use network protocol analyzer for Unix and Windows.

A Pomodoro Counter

The Pomodoro Technique is great to help you managing the time you spend accomplishing tasks. Try Activity Timer and PomodoroApp and good luck.

Shortcat

Well, well, well… What about using the keyboard for everything?

Keep your hands on the keyboard and boost your productivity! Shortcat is a keyboard tool for Mac OS X that lets you “click” buttons and control your apps with a few keystrokes. Think of it as Spotlight for the user interface.

1Password

Nice app to categorize your personal data, manage passwords, credit cards, and so on.

TotalSpaces 2

An easy to use 2D grid of desktops. And the only way to disable the fullscreen transition animations when you use cmd + tab on newer versions of OS X. I don’t use it anymore, but enjoyed it during the trial. But not enough to buy it just for skipping this transition (what I actually used it for).

iStatMenus

Beautiful Mac system monitor for your menubar. I use Network, sensor, disks, memory, CPU, and calendar. After adding the calendar, remove the native date from the menubar on System Preferences > Date & Time and untick show date and time in menu bar.

your menubar will never be the same again.

Chrome

My main browser. I’m not a big fan of extensions, but I have these:

Clear Cache
Google Keep
Hangouts
JSONView
Postman — REST Client (Packaged app)
YSlow
Accessibility Developer Tools
Start — A Better New Tab (like on the screen capture above, configured to show many features and use photo of the day from Webshots)

I tend to keep what I’m not using at the moment disabled.

By the way… Learn the Developer Toolbar or Die!

Live Free or Die is the motto of New Hampshire

Firefox, emulators, and, others
Testing is an important task, right? For the work I do on AlloyUI for automate tests I use yeti, yogi, and the Sauce Labs Selenium testing provider. XCode’s (iPhone / iPad) and Android Studio’s emulators might be useful also.

Tor Browser Bundle

Privacy safeguard agains’t the governments out there. Have it just in case of necessity someday and educate yourself about what is it and how it works.

Alfred

Apple’s Spotlight is great. Yosemite’s will be even greater. But Alfred with Powerpack is powerful.

Tip: Configure it with Spotlight default’s hotkey (cmd + space).

Go to Preferences > Appearence > Options > Hide menu bar icon, and then, set to show Alfred to active screen.

I’ve many workflows installed. You can find most at Zeno’s alfred-workflows list. Below are the ones that aren’t there:

Caffeine Toggle
Find Folder
Google Hangout
ipinfo
iTunes AirPlay Control for Alfred
say
Should I watch this movie with Google suggest
Toggle Bluetooth (the notification is boring)
Toggle WiFi (the notification is boring)
Tower Repositories
Travis CI for Alfred
VMWare Control
Wolfram|Alpha (kind boring to setup, but nice)
Youtube Control for Chrome

Dash has an Alfred workflow that can be installed from its Dash’s panel as well. Find themes and more workflows on the Packal package manager.

Virtual machines

VMware Fusion is a hypervisor you can use to run virtual machines (i.e., Linux, Windows). Very handy when you, like me, want to have a locally-available Linux server to try things.

Tip: you can access your Linux virtual machine (vm) over SSH.

Or for the awkward moment you need to test things on Internet Explorer.

Another option is VirtualBox. Both work great with Vagrant, which lets you create and configure lightweight, reproducible, and portable development environments.

Fusion is proprietary / expensive and has the best metrics. VirtualBox is open source.

I’ve found both to be battery-hungry when running my Ubuntu virtual machine on the go (but Fusion was noticeable better).

Maybe out of shame Microsoft has made freely available Windows virtual machines so people can hack their way to make their great web sites work on the less modern browser Internet Explorer. They’ve even created a great website devoted to show the public how they’re working on making IE suck less.

Tip: writing good code with tests and using services such as BrowserStack working along a continuous-integration like Travis or AppVeyor (if you really need to test on Windows) makes things easier.

Making your keyboard better

Latin language speaker? Try the U.S. International — PC keyboard layout instead of the horrible ABNT layout or other similarly weird layout people with no decency invented. You may find it helpful to use a keyboard layout selector on the menu bar (not me, I just stick with this layout).

If you feel comfortable with the idea, try DVORAK. I’ve tried it once, and got tired of it after a few minutes and decided I was a fast enough typist already on QWERTY and trying a radically new layout wasn’t for in my priorities.

Karabiner

You can remap your keyboard and control other things like speed. After installing this software my Key Repeat, Delay Until Repeat on the Basic Configurations > Key Repeat and on the Advanced Configurations > Functional Key Repeat were reset to OS X’s default.

I decided not to only fix it inside the app itself, but to tweak it a little by making the configuration of both for the Basic Configuration faster with the value of 15ms and to set to 150ms the Delay Until Repeat and to 50ms the Key Repeat of the functional keys.

Seil (not using it anymore)

Some remapping can’t be changed on Karabiner, and for them I use this other app developed by the same developers.

I used it for remapping the caps lock key to the escape (esc) key. You need to install it, open it, and tick the Changes Caps Lock to the value of the key code of the escape key: 53. Maybe useful if you use vim. It didn’t work out for me. I never remembered to use the caps lock key as an esc key, so I stopped using this app.

Backup

You’re a great developer, so you do version your code using the best available versioning tool available, git on the best social coding plataform, GitHub.

But do you backup your whole system? It’s nice to do so to avoid headache in case things get really nasty (try to imagine the worse possible scenario besides death).

I use and recommend using TimeMachine for cold storage, plus a hot remote backup solution in a second jurisdiction. Both encrypted.

I’ve considered some options (including Arq + Glacier / S3), but then decided nothing beats Backblaze for this. At just $5 USD or less per month per machine, it’s a steal.

By the way, do yourself a favor and use a pass-phrase for your Backblaze private key. And if you refer me, we both get 1 month of free storage.

Explaining: Cold storage means I use a removable disk which I sync from time to time (every few days), instead of a hot backup scheme like when using Airport Time Capsule to backup every few minutes.

Humor / Bonus

Uncle Bob’s Learn Clean Code (Clean Coders video store)
Front End Dev Reactions
DevOps Reactions
xkcd
Evil Mad Scientist Laboratories
Watch the sitcom Silicon Valley
Linus Torvalds’ quotes
Thesaurus.com is always handy in finding synonyms and antonyms to help you name your future open source projects ☺

Contributions welcome

This guide might be more generic to help more people. Help me improve it.

Author

Henrique Vicente is a Software Engineer for Liferay Inc. He works with JavaScript / front-end development on the AlloyUI framework and the Liferay Portal and lives in Recife, Brazil.

Changelog

These are the changes I made to this document. If you have never read it this article before, jump this section. And if you enjoy this document, return to this section later to verify if I’ve made any new relevant changes to it!☺

Monday, 16 June 2014
Add Mou as an alternative to Markdown Pro.
Tuesday, 17 June 2014
Add the Sim Daltonism, Transmit, and Color Oracle section.
Friday, 4 July 2014
Improve SourceTree details, explain that I prefer to use root rather than sudo, add Firefox, Chrome extensions, CCMenu, and info on tweaking allowed apps and firewall. Add To Do list.
Monday, 21 July 2014
Update renamed apps KeyRemap4MacBook to Karabiner and PCKeyboardHack to Seil sections with their new names / links.
Saturday, 1 November 2014
Update iTerm, GitHub (edu), and iStatMenu. Remove plugins of SublimeText. Remove Tower from the list, since I started using SourceTree 100% of the time.
Tuesday, 2 March 2015
Not using anymore the esc / caps lock hack.
Adding GPG signing for commits tip on Sourcetree.
Fixed several typos.
Adding more info on Kaleidoscope.
Adding info on general scrolling settings and modifier keys for Logitech Performance MX.
Improving 1password section.
Adding Sublimerge, ToggleExclude, and others changes on the Sublime section.

Roadmap

Consider adding info about Netflix, VLC, games (even though I seldom play), and other stuff people might find interesting.