How I setup a new Mac

When you get a new computer there are just so many things you have to do to get it ready for everyday use as a web developer. This is the list of things that I’ve found over the years work well for me, you can of course pick and choose which parts are right for you!

TerminalSection titled: Terminal

A complete terminal installation consists of:

• a terminal emulation application (what you type in) — Hyper
• a shell (the prompt you’re presented with) — zsh
• (optional) a custom shell framework (a bunch of prepackaged shell customizations) — oh-my-zsh
• (optional) additional shell plugins

Install each piece of the terminalSection titled: Install each piece of the terminal

1. Download & install your terminal emulation application Hyper. Then make a few tweaks to ~/.hyper.js:

   • Make it copy selected text by default by setting copyOnSelect: true
   • Prevent Hyper from making annoying sounds when less scrolls with bell: false

2. Install homebrew

   /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

3. Install zsh

   brew install zsh zsh-completions
   zsh --version

   • Make zsh your system’s default shell:

     chsh -s $(which zsh)
     echo $SHELL # /bin/zsh

4. Install oh-my-zsh

   sh -c "$(curl -fsSL https://raw.githubusercontent.com/ohmyzsh/ohmyzsh/master/tools/install.sh)"

Install zsh pluginsSection titled: Install zsh plugins

The two plugins we want are zsh-nvm and zsh-syntax-highlighting.

First, clone both the plugins from GitHub into ~/.oh-my-zsh/custom/plugins:

# zsh-nvm
git clone https://github.com/lukechilds/zsh-nvm ~/.oh-my-zsh/custom/plugins/zsh-nvm

#zsh-syntax-highlighting
git clone https://github.com/zsh-users/zsh-syntax-highlighting.git ~/.oh-my-zsh/custom/plugins/zsh-syntax-highlighting

Then tell oh-my-zsh how to find those plugins by adding them to the plugins declaration inside of ~/.zshrc.

# in ~/.zshrc
plugins=(git zsh-nvm zsh-syntax-highlighting)

Install Hyper ExtensionsSection titled: Install Hyper Extensions

To install Hyper extensions, literally all you have to do is add them to the plugins array in your ~/.hyper.js file!

We want to install two extensions:

1. hypercwd - This causes new terminal windows to be owned to the same directory as the previous window
2. hyperpower - Adds a fun confetti animation to each keystroke
   • Also, if you type wow (and press enter), it will become even more dramatic. Type wow again to disable.

// in ~/.hyper.js
plugins: ['hypercwd', 'hyperpower'],

You can find the full list of available Hyper extensions here.

Install other useful cli toolsSection titled: Install other useful cli tools

1. Use nvm to install the latest version of node

   nvm install node
   nvm use node
   node --version

2. Install yarn v1

   brew install yarn
   yarn --version # 1.22.19

3. Install pnpm

   npm i -g pnpm
   pnpm --version

4. Install (the latest version of) git

   brew install git
   git --version

   1. Copy the contents of my gist into ~/.gitconfig

   2. You might like to add these git(ish) aliases to .zshrc

      # in ~/.zshrc
      alias k=git
      alias a="git lsa"
      alias s="git status"
      alias sb="yarn storybook"
      alias good="git bisect good"
      alias bad="git bisect bad"
      alias add="git add ."
      alias p="pnpm"
      alias lc="git lm head | pbcopy"

   3. You might also want to add quick aliases to automatically cd to paths of important projects. For example:

      # in ~/.zshrc
      alias foo="cd ~/dev/foo"

5. Install the Delta diff tool

   • Delta makes the diffs in your terminal look almost as good as the diffs on GitHub.

   brew install git-delta

   1. Then tell git to use delta for diffs by adding it to your ~/.gitconfig:

      [pager]
        diff = delta
        log = delta
        reflog = delta
        show = delta

   2. Test it out with git show

   3. Sometimes terminal scrolling is broken after installing delta (see here), to fix it, install the latest version of less:

      brew install less
      brew link less

Modify MacOS DefaultsSection titled: Modify MacOS Defaults

1. Make MacOS always show scrollbars

   • Useful for web development. This is to ensure that your Mac scrollbar experience matches the Windows experience that most of your users will have.
   • Set System Settings → Appearance → Show scroll bars to Always

2. Correct how the tab key navigates in Firefox and Safari

   • By default, MacOS only allows the keyboard tab key to focus certain elements. Those elements appear to include inputs and buttons, but explicitly does not include links, and potentially other elements. This completely breaks keyboard accessibility testing.
   • To correct this you need to change an OS setting and a Safari setting
     1. Toggle on System Settings → Keyboard → Keyboard navigation
     2. Open Safari, then check Safari Settings → Advanced → Press Tab to highlight each item on a webpage

3. Configure which system settings you would like to show in the Menu bar

   • Open System Settings → Control Center
   • You might like to set:
     • Wi-Fi
     • Bluetooth
     • Sound
     • Battery (with percent?)

4. Make the menu back clock show the date & time

   • Open System Settings → Control Center → Menu Bar Only → Clock → Clock Options…
   • Show date: Always
   • Show the date of the week: On

5. Show hidden files in Finder

   • Open any Finder window and press ⌘⇧. (CMD+shift+period) to display hidden files
   • I also like to add the user ~ and ~/dev (where I put all my code) folders to my Favorites in Finder

6. Edit the default delays before the screen turns off

   • System Settings → Displays → Advanced
   • TODO: More specifics here

7. Make calendar app correctly show Monday as the first day of the week

   • SystemSettings → Language & Region → First day of week: Monday

8. Add keyboard shortcuts for deleting and archiving emails in the Mail app

   • System Settings → Keyboard → Keyboard Shortcuts → App Shortcuts
   • Click +, Choose Mail as the application, and then enter these two shortcuts:
   

Install Mac AppsSection titled: Install Mac Apps

Assuming this isn’t your first Mac setup, start by looking through your previously downloaded apps in App Store → Account (Your Name).

With that out of the way, here is an incomplete list of wonderful Mac apps that you might consider adding to your collection:

1. VS Code

   • In order to run code in the terminal, open VS Code, press ⌘⇧P to open the Command Palette, type shell command, and choose the Install option.
   • Also, assuming you’ve had a previous VS Code installation and enabled the settings sync feature, press ⌘⇧P to open the Command Palette, type sync now, and hit enter to auto-download all your previous VS Code Extensions and re-apply your old settings (such a time saver!).

2. Cleanshot X

   • A much improved version of the default Mac screenshot tool.
     • It has so many features this app is worth 2-3x the $30 they’re currently charging for it. This tool literally has a whole photo editor built into it that has become my go to for shitty meme editing. You don’t know how much you need this until you try it. For real, take advantage of the 30-day money back trial and see what you’re missing. It’s under so much active development that after a year I paid the $19 to extend my updates for another year.
     • For the record, this post is in no way sponsored by Cleanshot, I just love this tool (but I’ll gladly take a sponsorship! haha)
   • If you’ve already download Cleanshot on a different computer and want to move it to a new one, go to their License Manager.
   • I would recommend tweaking a couple of the default settings:
   • Cleanshot Settings → Shortcuts → General → All-in-One: ⌘⇧5
     • Clear out the rest of the General shortcuts
   • Cleanshot Settings → Shortcuts → Screenshots → Capture Area: ⌘⇧4
     • Clear out the rest of the Screenshots shortcuts
   • Cleanshot Settings → Screenshots → Freeze screen: On
   • Cleanshot Settings → Screenshots → Crosshair mode: Always enabled
   • Cleanshot Settings → Screenshots → Crosshair mode → Show magnifier: On
   • Cleanshot Settings → Advanced → File name: Screenshot ,%y,-,%m,-,%d, at ,%H,.,%M,.,%S
   • Cleanshot Settings → Advanced → File name → Add “@2x suffix”: Off

   Show more

3. MeetingBar

   • This app solves a problem I had experienced for years. Finally a way to not be late to virtual meetings.

   • Ever since I started working remotely I had the constant issue of:

     • You can’t control the meeting default reminder notifications (30m, 15m, 5m, etc.) on other people’s meetings

       • You can change them on a per-meeting basis, but that gets annoying real fast. And if they update the meting for any reason, your changes go out the window.

     • The notification present most meetings is going to be either 10 or 15 minutes. Both of those are more than enough time for me to continue working and completely forget about the meeting.

     • In comes MeetingBar. You can set MeetingBar to notify you of all meetings exactly 1 minute before the meeting. Then just click the MeetingBar notification and boom, you’re in the meeting, EARLY even!

4. Flycut

   • A simple, developer oriented clipboard manager.
   • Being able to copy multiple things to my clipboard at a time, and not having to worry about them accidentally disappearing has had a really positive impact on my efficiency.
     • Know you’re going to need two separate bits of info from this page? Just copy them both and then you don’t have to come back after you paste to copy the second one!

5. Bartender

   • On newer macs with the notch, if your menu bar items don’t fit on the available space to the right of the notch, they will just be hidden and there’s not much you can do about it.
   • Besides reordering, MacOS gives you no control over which items show or do not show in the menu bar
   • Bartender gives you complete control over your menu bar items!
     • Choose which apps show by default
     • Swipe to show the “rest” of the apps
     • Hide some apps completely
     • Save profiles to switch between different icon layouts
     • Show time items only when certain conditions are met (e.g. show battery when < 50%)

6. Magnet

   • Quickly snap windows to different portions of the screen
   • This functionality should already be built into Mac OS, but is not unfortunately

7. PixelSnap

   • This app (made by the wonderful folks at Cleanshot) makes it really easy to measure the pixel size of any element on your screen. It’s like what you already use the screenshot tool for, but better.
   • If you do frontend web development this tool is for you. Go watch the 1m intro video.

8. Loom

   • There are an endless number of ways to record your screen these days, but how many of them:
     • Upload while you record for instant sharing
     • Can be shared with a link
     • Allow easy in-app editing to fix errors
     • Automatically clips out filler words
     • Can easily stitch multiple recordings together
     • Sends you a notification of who watched your recording
     • Gives you a “home base” that displays all your recordings in one place
   • Well loom does! (again not sponsored but accepting lol)

9. Scroll Reverser

   • I like to scroll “naturally” with a trackpad (fingers bottom to top to scroll down) and “traditionally” (wheel top to bottom to scroll down) with a mouse.
   • MacOS unfortunately doesn’t allow distinguishing between mouse and trackpad when choosing to enable “natural” scrolling, but Scroll Reverser does!

10. Logitech Options

    • I exclusively use Logitech Mice, and this piece of software allows me to configure the mouse buttons to my liking.
    • Options solves the “Scroll Reverser Problem” as well, but sometimes doesn’t load right way so I still keep Scroll Reverser on hand as well.

11. Todoist

    • The best simple-ish TODO app that I’ve found.
    • It has:
      • Distinct categories
      • Due dates
      • Easy to use
      • Also has an iOS app and syncs content between the two

12. Zoom

    • Just putting this here just as a reminder to set the following settings:
      • General → Copy invite link when starting a meeting: On
      • General → Ask me to confirm when I leave a meeting: Off
      • General → Add Zoom to macOS menu bar: Off
      • Video → Stop my video when joining: On
      • Audio → Mute my mic when joining: On

13. Google Chrome

    • Just putting this here as a reminder to disable the “let chrome track the shit out of you” settings.
    • Navigate to Chrome Settings → Privacy and security → Ad privacy and set:
      • Ad topics: Off
      • Site-suggested ads: Off
      • Ad measurement: Off