How to Set Up Your Mac for Web Development

A guide to getting your Macbook ready for web development — tools, shortcuts, accessories, tips and tricks, and more

Photo by Ben Kolde on Unsplash

Every now and then, I look for guides like this one to see what other people are using — I almost always learn something new that makes my life as a developer easier.

In this post I go over tools, shortcuts, tips and tricks that I deem essential for a productive setup, in the hopes that it will be useful to other developers.

Table of Contents

· macOS Settings
  ∘ System preferences
  ∘ Finder
  ∘ Screenshot
· macOS Shortcuts
· Command-line Tools
  ∘ Homebrew
  ∘ iTerm2
  ∘ Git
  ∘ Lazygit
  ∘ Delta
  ∘ Zsh
  ∘ Oh My Zsh
  ∘ Node.js
  ∘ Docker
  ∘ tldr
  ∘ htop
  ∘ fzf
  ∘ ripgrep
  ∘ lnav
· MacOS Applications
  ∘ Amphetamine
  ∘ Maccy
  ∘ Visual Studio Code
  ∘ Rectangle
  ∘ GIMP
  ∘ Alfred
  ∘ Numi
· Web Tools
  ∘ gifcap
  ∘ Clippy
  ∘ Graphviz Online
  ∘ dbdiagram.io
  ∘ uiGradients
  ∘ Get Waves
  ∘ Create App
  ∘ keycode.info
  ∘ Boxy
  ∘ Mastershot
· Accessories
  ∘ iVANKY Dual USB-C Docking Station
  ∘ Boyata Laptop Stand
  ∘ Keyboard and Mouse
· Tips and Tricks

macOS Settings

Let’s start with a few changes you can make to macOS and the built-in apps.

System preferences

Keyboard
Keyboard > T️️ouch Bar Shows: F1, F2, etc. Keys
Keyboard> Press Fn key to: Show Control Strip

These two settings are about the touch bar. As a developer, I find myself using the F keys more often (a lot of shortcuts rely on them) than the other options — so I prefer to have them be the default.

Dock
️️☑️ Automatically hide and show the Dock

More often than not, I use Spotlight (⌘ Space) or the terminal to launch applications instead of the dock — it’s hard to justify dedicating such display real estate to it. Besides, you can easily access it by moving your mouse to the bottom of the screen or by pressing ⌃ F3.

Trackpad
Point & Click > ️️☑️ Tap to click