Setting up web development environment on a Mac

Overview

Now that Yosemite and all the essentials are installed, next up is setting up my environment. When I first started out, the easiest way to get things set up was installing MAMP and calling it a day, but I've since decided to get my hands dirty and use nginx as my HTTP server, which will be covered in this guide. In addition, I'll be installing Node.js, Homebrew, MySQL, and a few other things that I use on occasion as part of my workflow.

Command Line Tools for Xcode

First up, I'll be installing Command Line Tools for Xcode to have access to common Linux-based utilities, tools, and compilers. This allows more awesome stuff to be installed (many of the Unix tools require GCC which Command Line Tools makes available). Mavericks and above allows you to install via the command line whereas older versions of OS X requires you to install Xcode.

$ xcode-select --install

The $ character shouldn't be typed, as it's just a cue to enter a shell command.

Once you agree to the license agreement it'll take a couple minutes to download and install (~130mb).

NVM + node

I want to avoid having to use sudo for installing NPM or packages so I'll be installing node version manager first, which can be done by running the following command:

$ curl https://raw.githubusercontent.com/creationix/nvm/v0.12.1/install.sh | bash

I actually ran into the following error message which was asking me to create a profile and add the NVM directory path:

$ => nvm is already installed in /Users/USERNAME/.nvm, trying to update
$ => HEAD is now at 68574cc... v0.12.1
$ error: branch 'master' not found.

It offers 2 options to fix this problem in the output – I opted for the first which asks you to create a bash profile and run the command again. To create the file, I ran $ touch ~/.bash_profile before running the curl command above again.

Nano is the command line editor, once you add the above lines you can save and exit by hitting ctrl + X, Y to save changes and 'enter' to confirm selection

After restarting terminal, running the $ nvm command confirmed it's been installed by it's output of usage instructions. I also ran into an issue where the nvm current version wouldn't stick on a new terminal window, so i had to set the default version by running $ nvm alias default 0.10.33.

Since node version manager is now working, I went ahead and installed the latest version of Node (v0.10.33 at time of writing) by running $ nvm install 0.10.33. The latest version number of Node can be found at nodejs.org. $ node -v should now return the current installed version of node, $ npm -v the version of node package manager, and '$ which node` the path node has been installed to (the home directory).

$ node -v
v0.10.33
$ npm -v
1.4.28
$ which node
/Users/USERNAME/.nvm/v0.10.33/bin/node 

With node and NPM installed, I can now install my essentials:

$ npm install -g bower #[Bower](http://bower.io/) - package manager for the web
$ npm install -g grunt #[Grunt](http://gruntjs.com/) - javascript task runner
$ npm install -g gulp #[Gulp](http://gulpjs.com/) - a streaming build system

# is a comment and can be ignored when entering commands

So fresh and so clean: Installing Yosemite + toolchain on a retina Macbook Pro

As part of preparing for the new year, I've set the goal of cleaning up my entire digital life by bringing order to what is currently a chaotic mashup of files and services floating around across the many devices I own. My library of photos are drifting around in various places, as are the fonts and resources I depend on daily to do my work. With the official release of Yosemite, it seemed like the perfect opportunity to do a clean install and document the setup of my toolchain as the first step towards a better organized, and hopefully more productive life. Once complete, I'll be moving onto cleaning up all my files and setting up a centralized structure on my NAS with portions of it replicated on Dropbox, but I may be getting ahead of myself.

Installing Yosemite

Wiping my rMBP and getting a clean install of Yosemite was a breeze, thanks to the Mavericks installer I had ready on a USB key. I'd recommend creating your own bootable Installer with Yosemite rather than doing a 2-step upgrade like I've done.

Sublime Text 3

ST probably requires no introduction, if you don't currently use it then do yourself a favor and try it out. I've experimented with a few different editors and never looked back since making the switch.

Enabling Package Control

Open the ST console with ctrl + ' and paste in the following command:

import urllib.request,os,hashlib; h = '7183a2d3e96f11eeadd761d777e62404' + 'e330c659d4bb41d3bdf022e94cab3cd0'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = urllib.request.urlopen( 'http://packagecontrol.io/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); print('Error validating download (got %s instead of %s), please try manual install' % (dh, h)) if dh != h else open(os.path.join( ipp, pf), 'wb' ).write(by)

Essential Packages

Once Package Control is installed, you can easily install packages by launching the command palette cmd + shift + P and typing install to auto complete Package Control: Install Package

  • SFTP - Manage file transfers from within ST, I've used it to map my server locally and it makes syncing and publishing remotely stupid simple.

  • Emmet - Supercharge your HTML and CSS workflow. More information

  • ColorHighlighter - Preview color values from within ST.

  • ColorPicker - Update color values with the native color picker with cmd + shift + C (best used with Skala Color as the native OSX color picker is a bit clunky)

  • AlignTab - Align lines of code by character (highlighting lines to align then right-click context menu) or by regex (via the command palette)

  • Gist - Pull the content of a gist into your file, useful if you store boilerplate code as gists that you can then use as a starting point for new files

  • HTMLPrettify - Cleans up HTML/CSS/JS/JSON using Einar Lielmanis' beautifier scripts.

User Preferences

I use the following values for my preferences which you can access through the command palette and typing in user.

{
"theme": "Spacegray Eighties.sublime-theme",
"color_scheme": "Packages/Theme - Spacegray/base16-eighties.dark.tmTheme",
"ignored_packages":
    [
        "Vintage"
    ],
"font_size": 12,
"font_face": "Ubuntu Mono",
"highlight_line": true,
"highlight_modified_tabs": true,
"line_padding_bottom": 1,
"line_padding_top": 1,
"scroll_past_end": true,
"tab_size": 4,
"translate_tabs_to_spaces": true,
"trim_trailing_white_space_on_save": true,
"word_wrap": true,
"rulers":
    [
        80
    ]
}

Launching Sublime from the Command Line

Sublime comes with a CLI to launch the editor from the command line. In order to get this to work, you first need to set up a symbolic link to it. Before we do that, we should first check if Sublime is in the place we expect it to be by running $ open /Applications/Sublime\ Text.app/Contents/SharedSupport/bin/subl. That should open up Sublime 3, meaning we can run the following to set up the symlink: $ ln -s "/Applications/Sublime Text.app/Contents/SharedSupport/bin/subl" /usr/local/bin/sublime.

We then need to make sure the system profile is looking for things in the proper place. first run $ open ~/.bash_profile which will open up a text editor. Add export PATH=/usr/local/bin:$PATH and save and exit. Finally, run $ source ~/.bash_profile which reloads your profile with the newly added PATH. Try running $ sublime . and it should open up the current terminal path in Sublime!

Themes

I've also grown fond of the Spacegray theme in the Eighties flavor, which I highly recommend.

Sublime Text - Space Gray Eighties Theme

Alfred 2

Alfred's workflows make finding and launching things only a few keystrokes away, and will do wonders in raising productivity. I'm currently using the following workflows:

  • Can I Use - Easily check on browser compatibility using the caniuse + property trigger

  • Encode/Decode - Encode/decode strings (URL/HTML/Base64/etc) using encode or decode + string

  • Network Info - Grab your internal/external IP address and Mac addresses using mac or ip

  • Open with ST - Open files and folders in ST3 using subl

Essential Apps

The following are a bunch of additional apps and tools that I've come to love and rely on.

  • FileShuttle Basically a self-hosted Droplr or CloudApp. Great for automating the process of capturing and sharing screenshots.

  • Skala Color Being used to the Adobe color pickers, I've always found the native Mac ones annoying and clunky to use. Bjango's take on the color picker is a lot more useful for day-to-day design & development work and will save you a lot of hassle.

  • Sip I'm a huge fan of the color picker shortcut key for Sketch, and Sip does the same but brings it to the OS level. You can set your hotkey and tweak the settings to grab color values in the format preferred, and it even keeps a history of the colors you've "sipped".

  • QuickCast Allows you to quickly create screencasts that are up to 3 minutes long, that can be published online for sharing or stored locally. Requires you to register for an account but it's the most efficient app for this purpose that I've found and well worth the minor hassle of signing up.

  • Wallpaper by Behance A convenient little way to set your wallpaper from a collection of Behance submissions. You can set it to shuffle automatically or manually select and change it yourself. Minor quibble is that the collections don't seem to be updated often enough and there is no sync between devices, but a great way to keep your desktop looking fresh, nonetheless.

  • Imageoptim Crunch your images to make them as lean as possible. I mainly use this on JPG and GIFs, because TinyPNG is ridiculously amazing with PNGs and nothing comes close.

  • Caffeine This nifty little app overrides your energy settings when you activate it via the menubar icon and keeps your mac from going to sleep.