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: 26.12.2018].

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, REMEMBER TO RUN Xcode and agree to the license agreement to finish installing it. XCode installs some pretty important extras on first run, so if you forget to run it you'll be left scratching your head why things do not work.

Setting up the development environment

Below you'll find instructions on how to configure ZSH and get some common stuff like Node, Python, MongoDB, Redis etc. easily running on your mac.

Switch to iTerm2

You won't look back at the default mac terminal.

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

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/

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

Then restart you terminal and run the following commands to setup latest stable Node as the default:

nvm install stable

Install Python using PYENV

Playing around with all those machine learning frameworks is a headache without PYENV, which enables you to switch your Python version painlessly.

curl -L https://github.com/pyenv/pyenv-installer/raw/master/bin/pyenv-installer | bash

Or check latest instructions at: https://github.com/pyenv/pyenv-installer

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

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

Run below to accept all licenses:

yes | sudo ~/Library/Android/sdk/tools/bin/sdkmanager --licenses

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

Install Gradle:

brew install gradle

Add Java to path in your .profile/.bash_rc/.zshrc:

export JAVA_HOME=$(/usr/libexec/java_home).

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

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

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

Install fzf for better command line history

This really improves your life when looking at the history of commands you've used by doing all sorts of magical fuzzy matching. Makes re-running common commands a joy.

https://github.com/junegunn/fzf

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"

Better default tools

Nowadays there are better alternative to many common unix commands that we use daily. Here are some of the best ones.

Replace cat with bat, to make your cats look prettier.

brew install bat

Replace ping with pretty ping - again looks prettier.

brew install prettyping

A nicer way to see disk usage by usingn ncdu.

brew install ncdu

A better help by using tldr.

brew install tldr

Then add the below to your .zshrc or similar to make it all work (NOTE: You should have fzf installed).

# improve common commands by using modern versions
alias cat='bat'
alias ping='prettyping --nolegend'
alias du="ncdu --color dark -rr -x --exclude .git --exclude node_modules"
alias help='tldr'

# add a nice way to preview files
alias preview="fzf --preview 'bat --color \"always\" {}'"

# add support for ctrl+o to open selected file in Oni
export FZF_DEFAULT_OPTS="--bind='ctrl-o:execute(oni {})+abort'"

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

Oni

An approachable way to start with VIM.

Get it at: https://www.onivim.io/

MacVim

Not for the faint of heart. If you don't know VIM, expect a steep learning curve before you become productive. But it will change your life for the better - I hope.

brew install macvim --with-cscope --with-lua --override-system-vim

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

pps. This is starting to be outdated - consider looking into Oni.

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/

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/

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/

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 our referral link: https://www.rescuetime.com/rp/wingmen

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.

Ublock Origin - Goodbye adds, trackers 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.

By default, you can't change the selected option on a dialog in, which sucks a lot. It makes no sense to reach for that mouse to just confirm or cancel some action. From the keyboard settings you can make all controls in dialogs navigable with tab and shift + tab. Here's how:

  1. Open System Preferences
  2. Open Keyboard settings
  3. Open Shortcuts -tab
  4. At the bottom of the dialog choose All controls as the selected option for Full Keyboard Access

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