Frontend Mac Setup 🖥

This document describes how I set up my development environment on a new MacBook.

Finder Preferences

• General > New Finder windows show > Downloads folder
• Sidebar > Show these items in the sidebar > Airdrop, Applications, Desktop, Downloads & home directory
• Advanced > Show all filename extensions
• Show View Options > Group By: Name & Sort By: Name

Chrome DevTools Preferences

• Settings > Preferences > Network > Disable cache (while DevTools is open)

Dotfiles

• ~/.zshrc
• ~/.gitconfig
• ~/.gitignore (ignore OS/IDE-specific files globally)

SSH Keys

Add your SSH private key to the ssh-agent and store your passphrase in the keychain:

ssh-add -K ~/.ssh/id_rsa

To have MacOS remember your passphrase, create a new file ~/.ssh/config and enable the UseKeychain option:

Host *
    UseKeychain yes

More info on both the Bitbucket and GitHub docs.

Browsers

• Chrome or Chrome Dev
• Firefox and/or Firefox Developer Edition
• Safari Technology Preview

Dev Tools

• iTerm2 with this colour preset
• Homebrew, which also installs Command Line Tools and Git
• pure and zsh-syntax-highlighting
• nvm (install using curl or wget, Brew is not supported)
• Yarn (install using npm: npm install --global yarn)
• Zed
• Sublime Text
• Sublime Merge (also configure its CLI)

Productivity Tools

• Freedom
• iA Writer
• Todoist
• Dato
• Alfred or Raycast
• Magnet or Rectangle
• Xnip or Shottr
• Pasta (or use Alfred/Raycast's built-in clipboard)
• PDF Combo to combine and Lightweight PDF to compress PDFs

Other

• Create workspace directory: mkdir ~/workspace
• Install the Fira Code font family
• Haskell for Mac
• Charles Proxy
• Postman
• bat
• diff-so-fancy
• trash-cli