OS X design & development setup

Setting up your mac is always a painful thing to do. It takes quite a few steps to get to a happy place. Here's a note-to-self kind of list of what needs to be done, with some bonus tips sprinkled in.

Also, I'm pretty damn sure the world needs one more "How I use my Mac" -post, so here goes. Hopefully, you'll find something new! Enjoy.

The article is being updated to reflect latest discoveries [LAST UPDATED: 28.6.2017].

First things first

After the Apple's setup wizard you should proceed to check app store for updates. It's likely that your "new" mac is a few updates behind and it's best to install those first. Who knows what kind of security holes those updates are patching.

Once the updates are in, proceed by heading to App Store and installing the latest Xcode. Then install the command line tools by copy pasting the following into your terminal:

xcode-select --install

After, run Xcode and agree to the license agreement to finish installing it.

Let's also create a profile file to save settings to:

touch ~/.profile

Setting up the development environment

Below you'll find instructions on how to get Node.js, MongoDB and Redis dependent projects running.

Install Node via NVM

NVM makes it possible to run multiple versions of Node without a huge headache. This is really handy when dealing with older projects that might not run happily with the latest versions of Node.

Get it at: https://github.com/creationix/nvm

And then run the following commands to setup latest stable Node.js as the default:

nvm install stable

Install Android Studio & Java

If you're looking to develop hybrid apps using Cordova you will need to install both the Android Studio & Java and also get all the path variables corretly.

Get Studio at: https://developer.android.com/studio/install.html

Also, you will likely want to activate debugging mode on your Android phone to enable running the app easily.

See instructions: https://developer.android.com/studio/run/device.html

Get Java at: http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html

Usually it seems that the Android SDK does not manage to add path variables properly so you should drop the following line to your .profile/.bash_rc/.zshrc.

export PATH=$PATH:/Users/[yourusername]/Library/Android/sdk/tools

Install Bower

You'll probably have projects that are still using bower for package management.

npm install bower -g

Install Nodemon

Use Nodemon to run your Node apps. It will reload the app on code changes. Pure developer bliss.

npm install nodemon -g

Install JSHint

JSHint is great for checking your JavaScript for problems. My VIM setup uses it.

npm install jshint -g

To use Nodemon, you run your app like this:

nodemon myapp.js

Install Homebrew

Homebrew is the go-to unix package manager for OS X. Needed to install lots of the following stuff.

Get it at: http://brew.sh/

Install MongoDB

brew install mongodb

Install Nginx

We'll need nginx to setup that complex development environment.

brew install nginx

Instal Redis

Who doesn't have a project that uses Redis for cache or something?

brew install redis

Install watchman

Watchman is a supposedly smart file change watcher written by the people over at Facebook used by live reload helpers.

brew install watchman

Install phantomjs

Phantomjs is a headless WebKit scriptable with a JavaScript API. Often used for running tests.

brew install phantomjs

Setup git committer info

Git requires your info, so it can add your info into the commits you create. Note that the commands below set a global identity on your mac. You can also configure it by the project by omitting the global switch.

git config --global user.email "jussi(at)wingmen.fi"
git config --global user.name "Jussi Kaijalainen"

Various unix libs & tools

To install some of the Unix libraries and tools often needed, copy & paste the following to your terminal if you're brave enough.

brew install wget libpng ffmpeg graphicsmagick imagemagick jpeg lame xz
brew install sox --with-lame

Oh My Zsh

Switching bash to zsh is great. Adding Oh My Zsh on top of zsh is super.

Get it at: http://ohmyz.sh/

Add git aliases

Open ~/.gitconfig and add the following lines. This adds some nice colors and two commands (git lol & git lola) to view the log in a nicer way.

[alias]
        lol = log --graph --decorate --pretty=oneline --abbrev-commit
        lola = log --graph --decorate --pretty=oneline --abbrev-commit --all
[color]
        branch = auto
        diff = auto
        interactive = auto
        status = auto
[push]
    default = simple

Install the apps

Alfred

One app to rule them all. Alfred is used for quickly launching shit and controlling your mac like a boss. I used to use Quicksilver, but Alfred is way better nowadays.

Get it at http://www.alfredapp.com/ and don't be afraid to put down some cash to get the power pack. Worth it.

ps. Remember to setup the clipboard history extension.

Great Alfred workflows

MacVim

Not for the faint of heart. If you don't know VIM, expect a steep learning curve before you become productive. I'm about five years in and still a total noob. But it will change your life for better, no doubt about that.

brew install macvim

ps. For a quick start with lots of handy plugins and sane configuration look at http://vim.spf13.com/.

Evernote

Remember everything - it's all in the tag line. The app to go for writing anything down and finding it after wards. Bonus points being able to share that stuff with your friends and colleagues.

Get it at: https://evernote.com/

Spotify

I really can't function without some great tunes being injected into my brain. Get some Shure sound isolating earphones, unhear the world and focus on getting things done.

Get it at: https://spotify.com

Todoist

Ohh, these TODO apps. I've been trough Things, OmniFocus, Wunderlist and quite a few more that I've already forgotten.

My current favourite is Todoist. They keep improving stuff and reply to my tweets. Plus my Karma level is Grandmaster!

Get it at: https://todoist.com

Dropbox

Dropbox doesn't really need introductions, right? Backup your files and share them with your team and clients. Yay.

Get it at: https://dropbox.com

Fantastical

Fantastical lives in the menubar. It lets you take a quick peek at your calendar and whats next. It also boasts handy natural language processing capabilities for easy input of new calendar events. Also it looks pretty.

Get it at: https://flexibits.com/fantastical

LittleSnitch

Every self respecting nerd needs to be able to decide which apps can call home and which can not. It's interesting to see where all those apps are reporting your actions.

Get it at: http://www.obdev.at/products/littlesnitch

Sketch

The "photoshop killer". For quick user interface design you rarely need to open Photoshop these days. Sketch does the job faster.

Get it at: http://bohemiancoding.com/sketch/

Sketch toolbox

Sketch toolbox a super simple plugin manager for Sketch.

Get it at: http://sketchtoolbox.com

Transmit

Transmit is the (s)FTP app of choice. Favorites syncing via Dropbox is quite nifty.

Get it at: http://panic.com/transmit/

CreativeSuite

Love hate relationship here. Can't live without.

Get it at: http://www.adobe.com/creativecloud.html

UnrarX

Sometimes someone ends up sending you that rare .rar package and you really want to find out what's inside. UnrarX does this for you.

Get it at: http://www.unrarx.com/

Pocket

Pocket is a part of my staying up to date on new stuff flow. When you see something you wanna read up on, you just save it to pocket and check it out later in a better time and place.

Get it at: https://getpocket.com/

Iterm2

The best terminal for OS X. And get the nightly build. Using drag and drop on your terminal to upload files to a remote ssh host is next level stuff.

Get it at: https://www.iterm2.com/

f.lux

Adjust your monitor color temperature depending on the time of the day. Science thinks that decreasing the blue light that enters your retina in the evening makes it easier for you to get to sleep after that long late night session on your mac.

Get it at: https://justgetflux.com/

Sequel Pro

A nice GUI to peek around MySQL databases.

Get it at: http://www.sequelpro.com/

Dash

Most of the documentation you'll ever need accessible with a fast keyboard shortcut.

Get it at: https://kapeli.com/dash

Rescue time

It's great to track what you're spending your time on. Understanding how you use your time is a good step towards productivity.

Get it at: https://www.rescuetime.com/

Teleport

If you have more than one mac lying around, you can use Teleport to control any number of macs from your main mac. Just set it up on all macs and move the mouse from your screen corner to the next mac to get control of it. You can even drag files between macs this way. Pretty sweet.

Get it at: http://www.abyssoft.com/software/teleport/

Transmission

Some times you need to download those linux distros you know. That's where Transmission the torrent client comes in!

Get it at: http://www.transmissionbt.com/

1Password

Use safe password and don't need to remember them. They even came out with a nifty team feature, which makes it perfect for sharing passwords with your team.

Get it at: https://1password.com/

Quickres

A little tool to unlock more resolutions for your retina display. Really great when you need more screen space for your laptop.

Get it at: https://www.thnkdev.com/QuickRes/

VLC Player

Play all those pesky video files that Quicktime doesn't want to play. You know, the ones that came with the Linux distros.

Get it at: http://www.videolan.org/vlc/index.html

Chrome & Firefox

Let's face it, if you're developing stuff for the web, you need to have all the browser even if there are tools like Browserstack nowadays available. To get the animations smooth, you need to test on the real thing.

Get FF: https://www.mozilla.org/en-US/firefox/new/
Get Chrome: https://www.google.com.sg/chrome/browser/desktop/

Chrome extensions

No browser is perfect out of the box. Let's jazz up that browser a bit.

AdBlockPlus - Good bye adds and slow pages.

Ember Inspector - Inspect why your Ember app is grumpy.

React Devtools - See what's up with your react apps.

Momentum - Don't get distracted by tempting sites on your new page tab.

Personal Blocklist - No more results from w3schools, ha!

Finder & Spotlight

Next, let's configure the finder and spotlight to behave in a saner manner.

Hide and show menu bar & dock automatically

This is a life changer for laptop work as it gives you more screen estate to work with. It also gives you superior focus, when all the distractions (red dots on app icons) aren't visible until you actually want to see them.

To hide the menu bar, go to System Preferences -> General and check "Automatically hide and show the menu bar". For added hacker points you can also tick "User dark menu bar and Dock".

To hide the Dock, head to System Preferences -> Dock and check "Automatically hide and show the Dock".

And don't forget to make the hiding and showing nice and snappy by running the following command in terminal:
defaults write com.apple.Dock autohide-delay -float 0; killall Dock

Reduce transparency & motion

Don't like things being that transparent & flying around? Me neither. Also, this might save your processing power for more important tasks.

Go to System Preferences -> Accessibility -> Display and check "Reduce Motion" and "Reduce Transparency".

Show path for spotlight search files

Somewhere in Lion or Mavericks they decided you don't need to know where the files you search for reside and stopped showing file paths for search results. That sucks. Lucky you can get a peek at the path by holding down CMD while looking at the results.

Show library folder

Again they hide things from you. Steps to get your precious library folder back:

  1. Open your home folder in Finder
  2. Press CMD + J
  3. Tick "Show Library Folder" in the popup

Show filename extensions

Again hiding stuff. And if you didn't notice, I hate when they hide things. To make filename extensions visible:

  1. Open Finder
  2. Press CMD + ,
  3. Tick "Show all filename extensions" in the popup

Kill Smart Quotes

If you're a programmer and copy-paste snippets of code around, the smart quotes feature is bound to screw you. For example, I store code snippets in Evernote. Whenever pasting in code with quotes, OS X "fixes" them up for me - usually breaking the code.

Luckily it's easy to disable:

  1. System Preferences
  2. Language and Region
  3. Keyboard preferences
  4. Text
  5. Uncheck "use smart quotes"
  6. PEACE

Cycle open windows with ALT + TAB

By default it's hard to jump between the different windows of an app. At least on Finnish keyboard as CMD + ` is not easy to reach. Setting ALT + TAB to cycle windows is way more intuitive.

  1. Open Preferences
  2. Open Keyboard preferences and the Shortcuts tab inside
  3. Under Keyboard section on the left change the shortcut for "Move focus to next window" into ALT + TAB

Random tips & tricks

Open iTerm2 in current finder folder

Create a service using the guide located here and then add a keyboard shortcut like CMD + Shift + I to launch the service. That's a really fast way to get into the terminal in the current folder.

Open Finder from terminal in the working directory

Type in open . and hit ENTER. This opens the current directory in finder - super handy. You can also open files like this.

Actually use Caps Lock

When have you last used Caps Lock key? Yep, I know. Lets put it to use and remap it to something useful like ESC. Think about the hundreds of kilometers of pinky movement saved when using Vim.
1. Get Karabiner-Elements and install it
2. In the app Change Caps Lock keycode to 53
3. Now your Caps Lock acts as ESC

Android USB tethering for your Mac

I don't really understand how can you need a separate driver for this, but you can get it here.

Fix AirPlay connectivity issues

Often AirPlay just stops connecting to the speakers. I've had this happen with pretty much all of my Macs - gone are the days when Apple stuff just worked. But lucky for us, as the same little trick still seems to work and get it fixed.

Open your terminal and type in the following command to reboot the coreaudio service and get things running again:

sudo kill -9 `ps ax|grep 'coreaudio[a-z]' |awk '{print $1}'`

More fine grained volume control

You can have a more fine grained control over the volume if you hold down ALT and SHIFT when adjusting the volume up or down with the quick keys.

Quickly access program preferences

Just hitting CMD + , opens the preferences in most OSX apps.

Paste rich text as plain

Often you copy text from a web page and drop it to Evernote or Pages and the styles from the web page are preserved. Annoying! But use CMD + SHIFT + v to paste your text. Et voilĂ , plain text!

Take screenshots like a boss

Hit Command + Shift + 4 to paint an area which you want for a screenshot. Paint, click and your screenshot will be saved on the desktop.

Terminal to clipboard

In the terminal you can use two commands pbcopy and pbpaste to interact with the system clipboard. They work as you would expect unix programs to work. For example copying website source to the clipboard is as simple as:

curl "http://stackoverflow.com/" | pbcopy