Discovering Meteor


I had first come across Meteor a little more than a year ago – and for someone who looks for the quickest and most efficient way to build something from soup to nuts, sounded like the perfect solution. Like many things I've wanted to explore, it had been put off for some time due to day-to-day distractions, but recently resurfaced as it reached v1 release. Given that it's had time to mature and for community and resources to properly have taken shape, I've decided to dive in and see exactly how interesting and useful it's been made out to be.

I've spent my 45min commute playing around and trying to grasp the fundamentals for the past week, and I must admit, so far I'm extremely impressed with the ease and approachability Meteor brings to use javascript to build both client and server ends of the experience, primarily for a novice wannabe developer.

Diving In


Deployment using MUP (Meteor Up)

MUP seemed to be the ideal tool for deploying to a Digital Ocean droplet based on the articles I came across.

The first step was to install MUP using npm install -g mup. Next up, you need to create a folder to hold the configuration files (ideally adjacent to your project folder to prevent it from being pushed up and exposing things). Specifically in my case, I had a folder microscope and microscope-deploy sitting in the same parent folder. Next up is to run the command mup init which will then create two files: mup.json (Meteor configuration file) and settings.json (settings for Meteor's settings API). We'll then need to edit mup.json and follow the comments to populate it with the correct server information and preferences.

After that's done, running mup setup will install everything needed which will take a few minutes. The final step to push up your Meteor project to your server is to run mup deploy and voilà, it should now be live!

In reality I hit a few errors that took me about 4 hours to get to the bottom of, but mostly consisted of misconfigured paths and issues with the version of node installed on my server (which I had to step down to 0.10.36 to get things to work). However, once MUP was setup, deploying updates to my server became as easy as running mup deploy which to be honest still feels like magic :)

Setting up web development environment on a Mac


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).

A few things I've found useful:

  • Copy large sets of data with rsync: When moving thousands of files from one location to another, I've found this to be a godsend and crushes cp or finder drag-dropping in terms of transfer speed. I've been using rsync -vaP Volumes/Source Volumes/Target wherev increases verbosity, a for archive mode which mirrors symlinks and permissions, P for partial transfer resume and progress. I've also seen suggestions for rsync --ignore-existing -raz Volumes/Source Volumes/Target.

  • Search your command line history by using `history | grep 'string to search for' to get a list of matches.

  • 'ls -lrt Directory >> filetosaveresults.log' will list the contents of Directory into a text file named filetosaveresults.log

  • Get the total file size of a directory by using du -hs FOLDER/PATH where h outputs human-readable numbers and s summarizes only the size of the folder rather than all of its contents.

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 | 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 $ 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
$ npm -v
$ which node

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

$ npm install -g bower #[Bower]( - package manager for the web
$ npm install -g grunt #[Grunt]( - javascript task runner
$ npm install -g gulp #[Gulp]( - 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.

--edit It looks like since OS X Lion there's been a recovery feature that has a partition with all necessary tools to repair or reinstall OS X without requiring bootable media. More info here

Terminal / Command Line

iTerm 2

I've recently switched over to iTerm 2 from Terminal after hearing that it adds a few conveniences. The main ones I appreciate are the shortcut cmd+; for autocompletion, paste history which stores all copy or pasted text which can also be stored on disk, as well as it's super robust preferences panel which has a million and one ways to customize your experience.

One thing I found to be strange was the shortcut key to skip words (alt+← or alt+→) no longer worked in iTerm. This got that fixed up in no time.

Zsh + oh-my-zsh

Using Zsh adds many conveniences if you find yourself dabbling in the command line often. A quick example is the shared history across your tabs – the normal bash behavior is to keep the history contained within each tab which I've found to be frustrating at times. Depending on the theme you're using (which there are plenty of), you can also get extremely verbose in what you show in the prompt: such as current user, directory, branch, repo, and more.

You can install oh-my-zsh by running the following command in the command line: sh -c "$(curl -fsSL"

Git Aliases

Setting up a few choice aliases for git saves strain on your precious fingers by reducing the amount of characters you need to repeatedly type throughout the day. Here's what I'm currently using:

$ git config --global checkout
$ git config --global branch
$ git config --global alias.cb 'checkout -b' #create and checkout to branch (needs branch name)
$ git config --global '!git add . && git commit -am' #adds all untracked files and commits (needs commit message)
$ git config --global status
$ git config --global alias.a 'add .' #adds all untracked files
$ git config --global alias.last 'log -l HEAD' #display last commit
$ git config --global alias.unstage 'reset HEAD --' #unstage a file 

If you want to list out all your aliases, you can do so with $ git config --get-regexp alias

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 = '2915d1851351e5ee549c20394736b442' + '8bc59f460fa1548d1514676163dafc88'; 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( '' + 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.

    "caret_extra_width": 1,
    "caret_style": "phase",
    "close_windows_when_empty": false,
    "color_scheme": "Packages/Theme - Spacegray/base16-ocean.dark.tmTheme",
    "drag_text": false,
    "draw_minimap_border": true,
    "enable_tab_scrolling": false,
    "font_face": "Source Code Pro",
    "font_options": ["no_round"],
    "font_size": 13,
    "highlight_line": true,
    "highlight_modified_tabs": true,
    "ignored_packages": ["Vintage"],
    "line_padding_bottom": 4,
    "line_padding_top": 4,
    "open_files_in_new_window": false,
    "overlay_scroll_bars": "enabled",
    "preview_on_click": false,
    "draw_indent_guides": true,
    "rulers": [80],
    "scroll_past_end": true,
    "scroll_speed": 5.0,
    "show_full_path": false,
    "tab_size": 2,
    "theme": "Spacegray Eighties.sublime-theme",
    "translate_tabs_to_spaces": true,
    "trim_trailing_white_space_on_save": true,
    "word_wrap": true

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\ That should open up Sublime 3, meaning we can run the following to set up the symlink: $ sudo ln -s "/Applications/Sublime" /usr/local/bin/subl. If you get an error about a non-existing directory you can first create the set of folders using sudo mkdir -p /usr/local/bin/, then running the command to create the symlink. Once that's done, try running $ subl . and it should open up the current command line directory in Sublime!


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.