Oct 12, 2018

Setting Up a New Macbook for Web Development

I’ve just started using a MacBook Pro as my main development machine at work. As this is the first time I’ve used a Mac for web development, I’m documenting all the settings, installs, tips and tricks on how to get up and running with an awesome development machine.

Homebrew

Before you install anything, it’s best to install all your apps through Homebrew which is a package manager for macOS. This makes updating much easier.

To install run the following in your terminal:

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

To update all your apps installed by Homebrew, run brew update followed by brew upgrade.

Now that we’ve got brew installed let’s start installing apps.

Terminal

First let’s replace the default terminal. ITerm2 is probably the most widely used and most recommended. I’ve also heard good things about Hyper but I’ve also heard it can be heavy on performance and it’s still missing a few features. It’s definitely one to look out for in the future though.

brew cask install iterm2

Now that we’ve got ITerm2 installed let’s set it up.

Install Oh My Zsh

sh -c "$(curl -fsSL https://raw.github.com/robbyrussell/oh-my-zsh/master/tools/install.sh)"

Install zsh autosuggestions

git clone https://github.com/zsh-users/zsh-autosuggestions ${ZSH_CUSTOM:-~/.oh-my-zsh/custom}/plugins/zsh-autosuggestions

Add to zshrc plugins - plugins=(zsh-autosuggestions)

Install zsh syntax highlighting

git clone https://github.com/zsh-users/zsh-syntax-highlighting.git ${ZSH_CUSTOM:-~/.oh-my-zsh/custom}/plugins/zsh-syntax-highlighting

Add to zshrc plugins - plugins=(zsh-syntax-highlighting)

Install Z

Here is my current .zshrc with aliases etc.

There is an enourmous amount of customising that you can do with ITerm2, here are a few links I’ve found useful.

Terminal Themes

I’m currently using Wes Bos’ Cobalt2 theme which is great.

If you’re keen to install it you’ll need to do these 2 steps first.

A few of my own tweaks that i prefer

Profile>text>cursor: Set to underline
I like to set up my view as 4 windows in a grid.
To make sure it stays this way when you open it each time, you need to save it as the Default workspace by going to Window>Save window arrangement and saving it as Default. Then in preferences: General>Startup: In the dropdown select Open Default Window Arrangement.

Visual Studio Code

Easily the best text editor right now. Updates every month. Heaps of great extensions. I have another blog post on how I’ve got it all set up.

brew cask install visual-studio-code

Git

brew install git

Here is my current .gitconfig with aliases etc.

Some resources around setting up your own .gitconfig:

Git Basics: Git Aliases

NodeJS

brew install node

NVM (Node version manager)

curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.11/install.sh | bash

After installing NVM, also run the following script. The script clones the nvm repository to ~/.nvm and adds the source line to your profile (~/.bash_profile, ~/.zshrc, ~/.profile, or ~/.bashrc).

export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # This loads nvm

Trash

Use the trash command instead of rm to send things to the trash.

npm install --global trash-cli

Tree

Tree allows you to pretty print a directory in the console.

npm install -g tree-cli

Use Wes Bos’ tree function in your .zshrc

AWS Command Line Interface

brew install awscli

Docker

brew cask install docker

Install instructions

.Net

Mac Utilities

Alfred

Productivity app for hotkeys, keywords, text expanding and more.

brew cask install alfred

brew cask install kap

YouTube-Dl

Download YouTube videos using the command line.

brew install youtube-dl

Cheatsheet

Shows you the shortcuts available for the current app you’re using just by holding down ⌘.

brew cask install cheatsheet

Notion

Note taking app that I’ve just started using, kind of like Trello and Evernote combined.

brew cask install notion

Boostnote

Great markdown editor, I mostly use this for draft blog posts. Offline only.

neofetch

Command-line system information tool.

brew install neofetchcreenfetch

Firefox Developer Edition

brew cask install firefox-developer-edition

Hugo

Static site generator. It’s what this blog is using.

brew install hugo

Git Kraken

git gui client.

brew cask install gitkraken

Aerial

Use the Apple tv screensaver on your mac.

brew cask install aerial

General Mac Settings

Enable tabbing through dialog windows - Source: Wes Bos

In Keyboard > Shortcuts: Select All controls under Full Keyboard Access.

Mission Control

Untick Automatically rearrange Spaces based on most recent use. This prevents your workspaces from jumping around. This really annoyed me until I realised it was doing this.

Hot corners

I’ve got this setup to show mission control on all my corners as most of the other options don’t really do it anything for me. This also makes it easy to access mission control when I’m using an external mouse.

Keyboard

Tick all the boxes here.
Move Key Repeat and Delay Until Repeat all the way to the right.
Touch Bar Show F1, F2 etc. Keys.
Press Fn key to Expand Control Strip.
In customise control strip replace Siri with Screen lock

Mouse & Trackpad

Tick all the things

Sound

Tick Show volume in menu bar

Finder

Open Finder, in the top bar go to Finder>Preferences.
Under General, New finder windows show: Home directory.
Under Sidebar, tick all folders you want to see by default.
Under Advanced, tick Show all filename extensions.
In the top bar go to View, and show all the things.

Show hidden files and folders:

defaults write com.apple.finder AppleShowAllFiles -bool true
killall Finder

To hide them again:

defaults write com.apple.finder AppleShowAllFiles -bool false
killall Finder