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