DEV Community

Salma Alam-Naylor
Salma Alam-Naylor

Posted on • Originally published at whitep4nth3r.com

Everything I install and set up on a new MacBook as a web developer

In 2023, I had to set up two fresh MacBook Pros (unexpectedly), and none of what I installed or how I set anything up was written down. And, oh boy, had I wished it was written down. So here’s me writing it down, for future me, and for you if you’re curious.

Here’s everything I install and set up on a new MacBook that I use as a web developer.

Developer tools

Terminal: iTerm2

I’ve tried other new and fancy terminals, but iTerm2 does the job. I use the Fira Code font (with ligatures enabled), and the Dracula colour palette.

I use the default zsh shell that ships with MacOS. I maintain a private version-controlled base .zshrc file on GitHub, which I copy to the ~ directory of a new machine. It includes some useful utility functions such as a command to delete all merged git branches, and this function that removes and reinstalls dependencies in a Node-based JavaScript project.



npmreset() {
  echo "🔥 rm -rf node_modules" &&
  rm -rf node_modules && 
  echo "🔥 rm package-lock.json" &&
  rm package-lock.json && 
  echo "⚡️ npm i" &&
  npm i
}


Enter fullscreen mode Exit fullscreen mode

My .zshrc file also includes some configuration to display the current branch of a git repository, styled with colours from the Dracula colour palette.



# Load version control information
autoload -Uz vcs_info
precmd() { vcs_info }

# Format the vcs_info_msg_0_ variable
zstyle ':vcs_info:git:*' formats '(%b)'

# Set up the prompt (with git branch name)
setopt PROMPT_SUBST
PROMPT='%F{magenta}==>%f %F{blue}${PWD/#$HOME/~}%f %F{cyan}${vcs_info_msg_0_}%f%F{green} ==> %f'


Enter fullscreen mode Exit fullscreen mode

Here’s how it looks in the terminal:

A pink ligature right facing arrow, pointing to the path of my blog repository in purple, showing the main branch name in brackets in blue, followed by a green ligature right facing arrow, pointing to a message in which that says kinda cute, right?

Software management: Homebrew

I try to install as much as possible using Homebrew. The first packages I install when setting up a new machine are node and nvm. I also brew install lolcat, which lets me do this:

A terminal window, showing the command ls -la piped through lolcat, which outputs the contents of my dev folder, text coloured in a rainbow gradient.

It’s not that useful, but it’s a fun talking point whilst I’m live streaming on Twitch.

Version control: SSH key

I follow this guide from GitHub to generate a new SSH key so that I can use ssh (rather than https) on the command line to interact with my repositories on GitHub.

Version control: .gitconfig

To configure Git version control ready for development, I run the following commands in my terminal:



# Configure my git user
git config --global user.name "My name"
git config --global user.email my@email.com

# By default, set new branches to be pushed to the default remote and set upstream tracking
git config --global push.autoSetupRemote true

# Set the default branch name for new repositories
git config --global init.defaultBranch main

# List all git settings in ~/.gitconfig
git config --list


Enter fullscreen mode Exit fullscreen mode

Full guidance on setting up Git for the first time can be found on the official documentation. Also worth noting is that the first time you do anything with Git on MacOS, you’ll be prompted to download and install XCode command line tools.

CLI tools

Two CLI tools I install right away are the GitHub CLI (via brew) and the Netlify CLI (via npm).



brew install gh
npm install netlify-cli -g

Enter fullscreen mode Exit fullscreen mode




IDE: VS Code

I use VS Code. It’s free and built on open source. I use the Settings Sync feature which means that all my themes and plugins are managed in the cloud, so I don’t need to maintain an up-to-date list.

I also make sure to run the Install 'code' command in PATH command in VS Code, so that I can open repositories in VS Code from the command line by typing code. To do this, open the command palette in VS Code with CMD + SHIFT + P and type shell command. Confirm by pressing enter or clicking on Install 'code' command in PATH. Read more about the code command on the official documentation.

Other developer tools

I need Docker for a couple of projects, so I install Docker Desktop.

Browsers and extensions

In 2023 I’ve been using Arc browser. It’s built on Chromium so it can use all the Chrome store extensions. Essential browser extensions for me are:

  • AdBlock
  • Dashlane password manager
  • EditThisCookie
  • Minimal theme for Twitter

I also install Firefox and use Safari for cross-browser testing in development.

Utility apps

I was a Spectacle user for years, but I recently switched to using Rectangle for window management. Rectangle has a few more options than Spectacle; I’m still getting used to it but I have no strong feelings either way.

I also install Raycast as a Spotlight replacement. I probably don’t use it to its full potential right now, but one of the most useful features is being able to view my clipboard history with this custom key command: ctrl+alt+cmd+/.

Audio and visual apps

I’m fully in the Elgato ecosystem, so I use Elgato Control Center (for my Keylight Airs), Elgato WaveLink (for my Wave 1 mic) and Elgato Camera Hub (for my Elgato Facecam — which I use for work meetings).

Useful things for content creation

If I’m recording a full screen capture for videos, I like to hide the app icons at the top of the screen. I use Vanilla for this.

For clearer screen recordings using a mouse pointer (and maybe because I’m getting old and my eyes are bad), I also increase the size of the mouse pointer in System Settings → Accessibility → Display → Pointer.

MacOS accessibility settings showing my pointer size is around 33 perfect larger than normal.

Useful things for work

I keep three calendars: a work calendar, a personal calendar, and a side project calendar. It’s useful to see a combined schedule at a glance, and for this I use MeetingBar.

Did I miss anything?

Probably. I’ll keep adding to this post when more software and tools make it into my regular rotation.

Top comments (30)

Collapse
 
ratiu5 profile image
RATIU5

Great read! I like to clean install my MacBook every 6 months to a year and found it a pain to get back up and running. I recently discovered Ansible, an automation software, that allows me to configure my system with all the apps and settings I want all with a single command. It's saved me lots of time and is the only thing I need to install when setting up a new machine.

Collapse
 
whitep4nth3r profile image
Salma Alam-Naylor

I remember using Ansible in like... 2015 for automating and provisioning servers!

Collapse
 
ebcefeti profile image
E. B. Cefeti

I've been tempted to consolidate both general system policy/setup and secure key management under Ansible (& Ansible Vault, respectively). Have probably been doing too much startup IT lately to figure out if this is a reasonable option for a developer MacBook. But it's working great for my Mac Mini cluster! :D

Collapse
 
whitep4nth3r profile image
Salma Alam-Naylor

I mean… :D

If anything it sounds like a great learning opportunity! But I’m really hoping I don’t need to set up another machine for a least a couple of years :D

Collapse
 
citronbrick profile image
CitronBrick

As soon as I start using a new Windows PC, the 1st thing I do is to enable the "option" to view file extensions & hidden folders. I feel that it's quite bad, to hide extensions by default. I wonder how is it in Mac.

Collapse
 
whitep4nth3r profile image
Salma Alam-Naylor

I believe with Mac you can see file extensions by default but I can’t remember…! But yes I also prefer to turn this on for both my PC and Mac.

Collapse
 
mandybee profile image
Mandy Bee

I need to teach all of my newbie html students this every semester. Used to only be a Mac thing, now it’s everywhere. 🫠

Collapse
 
santisbon profile image
santisbon

Some good tips here! I've also gone further and automated my setup. Getting everything just the way I like it after a clean install of the OS is super quick. Installing everything:
santisbon.github.io/reference/auto...
Customizing macOS automatically:
dev.to/santisbon/finding-the-right...

Collapse
 
peterwitham profile image
Peter Witham • Edited

A very nice write-up and good suggestions, thanks. Another that I'd like to recommend that I use is rubyonmac.dev for maintaining a lot of useful things like the Ruby version and other tools often used by developers on a Mac.

My setup process always starts with, Xcode > Brew > iTerm > Rubyonmac.dev

Collapse
 
bam92 profile image
Abel Lifaefi Mbula • Edited

Hi!
Thank you for the post. I'm compiling some great posts to prepare my post on OS setup, I've added this to the list, too. I did not know about Meetingbar, I've just tried it, and it's awesome.

I'll consider Arc in 2024 as I'll mostly update my workflow.

Collapse
 
gruitt profile image
Daniel Gruitt

This is really useful! My mac died recently (at the start of a coding bootcamp) and I went into panic mode (mainly due to my terminal not being pretty anymore) and so this was fun to read to get some new ideas!

Collapse
 
whitep4nth3r profile image
Salma Alam-Naylor

Everyone needs a pretty terminal!

Collapse
 
tobinguyen profile image
Tobi

Cute terminal color :D

Collapse
 
roitr profile image
Roi Trigerman

Do you work with multiple screens? I am using the laptop screen + 2 external ones, and I must say Mac OS does a very poor job handling multiple displays.. Windows does it much better.

For example - the Dock is only on the main displays.. is there a solution for that?
And maybe some other tricks you can recommend?

Collapse
 
whitep4nth3r profile image
Salma Alam-Naylor

Yes I use two external monitors. I don’t generally use the dock, so I hide it by default and use Raycast to launch apps, so I prefer it being out of the way.

I guess my trick to recommend here is to not rely on the dock and launch apps using the keyboard! 🙃

Collapse
 
roitr profile image
Roi Trigerman

That's interesting, thanks. I will surely try Raycast

Collapse
 
srbhr profile image
Saurabh Rai

Hey @whitep4nth3r! What monitors are you using? I'm planning on getting one. And is Multi-monitor setup better than getting a single monitor?

Thread Thread
 
whitep4nth3r profile image
Salma Alam-Naylor

I have two BenQ 27 inch monitors. This setup is mainly because I stream on Twitch, and need one screen to monitor my streaming software, one screen to code on, and another (laptop screen) to monitor my Twitch dashboard. Generally speaking one extra monitor is enough, but it all depends, as usual!

Collapse
 
mandybee profile image
Mandy Bee

If you have the dock set to the bottom of the screen, you can move your mouse to the bottom of any connected screen to show the dock there. I sometimes have to wiggle my cursor around at the bottom of the screen, but it’ll show. :)

Collapse
 
graemeq profile image
Graeme Q

Yes, but it's not obvious.

– System Preferences
– Mission Control
– check ON “Display have separate spaces”

Collapse
 
srbhr profile image
Saurabh Rai

This is nice, and I just learned a new feature. Shake to locate your mouse pointer. 😂 (I'm new to Mac ^^)

Collapse
 
whitep4nth3r profile image
Salma Alam-Naylor

It's a great feature!