Mac setup for web development 2023

Background

I recently landed a new job 🥳 which, as expected in the tech industry, came with a brand-new MacBook.

The first task on my to-do list for this new job was to set up my MacBook in a way that would allow me to efficiently write code and tackle everyday problems. Instead of transferring all of my data and tools from my old machine, I decided to take this opportunity to search for new tools. It's been an enjoyable process thus far, and it's also been a great moment to verify whether the tools I'm used to are still the best ones for the current moment.

I understand that each developer has different habits and faces unique challenges, and therefore this setup may only be the best option for me. However, I hope that someone out there can find this article helpful, even if only a part of it.

MacOS customization

Dock

After getting my new MacBook set up with the necessary hardware and software updates, I dove into the task of customizing my dock for optimal efficiency.

The first thing I did was remove all unnecessary apps from the dock, ensuring that only the most frequently used applications were present.

Next, I changed the size of the dock and turned off the magnification feature, as I find it most useful when the dock automatically hides and doesn't show recent applications. This helps me focus on my work without unnecessary distractions and clutter.

Customizing the dock may seem like a small task, but it can make a significant impact on your productivity. With a streamlined and organized dock, you can quickly access the tools you need to write code and solve problems efficiently.

I encourage all developers to take a few minutes to personalize their workspace and find what works best for them.

Keyboard

In the world of programming, working with text is a crucial part of the job.

When it comes to the keyboard, there are two things I do to optimize my workflow. Firstly, I set the key repeat rate to the fastest setting and minimize the delay until repeat, ensuring that my typing speed is not hindered by a slow repeat rate.

Secondly, I discovered a game-changing shortcut that has made my life so much easier. As someone who takes a lot of screenshots, my desktop used to be cluttered with them. However, most of the time, I didn't need to keep these screenshots because I either sent them to someone else or pasted them into another app. Fortunately, MacOS allows you to save recent screenshots directly to your clipboard without cluttering up your desktop or any other directory.

To make use of this feature, I added a shortcut that works wonders for me - Shift + Command + 2. This shortcut saves me time and effort, allowing me to take and use screenshots without any unnecessary hassle.

Trackpad

I prefer my trackpad to have a similar feel and responsiveness to my keyboard. That's why I always set the tracking speed to almost the fastest possible setting and enable the Tap to click option.

To any fellow developers out there, I highly recommend taking the time to learn and utilize the most commonly used trackpad gestures. By familiarizing yourself with these gestures, you can significantly improve your productivity and efficiency when working on your projects.

System preferences

You can set these from the terminal:

# show hidden files
defaults write com.apple.finder AppleShowAllFiles YES

# show path bar
defaults write com.apple.finder ShowPathbar -bool true

# show status bar
defaults write com.apple.finder ShowStatusBar -bool true

killall Finder;

Development setup

Git

Update your git settings:

git config --global user.name "John Doe"
git config --global user.email "you@domain.com"

and change globally default branch name from master to main:

git config --global init.defaultBranch main

Homebrew

Install Homebrew as your package manager:

# Paste into your terminal and follow the instructions
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

While being in the terminal and having Homebrew installed add those tools:

brew install \\
  nvm \\ - Node version manager
  pnpm \\ - Node package manager
  gh \\ - Github CLI
  wget \\ - cURL alternative

Last step here is to install Oh My Zsh which helps you manage your Zsh configuation

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

Here is my plugins list for zsh:

plugins=(

  git

  macos

  zsh-autosuggestions

  zsh-syntax-highlighting

)

SSH key setup

I use Github only so I followed this instruction from the GitHub Docs.

Productivity improvements

Raycast

As a developer, there are countless tools and extensions that can be incredibly useful for optimizing your workflow. While I've tested several options, I've found that one tool stands out above the rest - Raycast.

Not only is Raycast an excellent tool in its own right, but it also boasts an impressive library of extensions that can help streamline your everyday tasks. These extensions are created by both the Raycast team and the community, meaning there's a good chance you'll find an extension for whatever app you use on a daily basis.

To get started with Raycast, simply head to their website and download the tool. Once installed, complete the tutorial and replace MacOS Spotlight with Raycast using the Command + Space shortcut. From there, you can start exploring the various extensions and finding ones that work best for you.

As for my personal favorites, I highly recommend the following extensions:

• TickTick, which serves as my go-to to-do app for both personal and work-related tasks.
• Github, which makes it easy to navigate and access my repositories.
• Jira, which allows me to quickly access and manage my project tasks.
• Spotify Player, which enables me to like and interact with my current Spotify song without ever leaving my IDE or using my mouse.

In conclusion, Raycast and its extensions are incredibly powerful tools that can significantly improve your productivity and workflow as a developer. With a little bit of exploration and experimentation, you're sure to find extensions that work best for you and your unique needs.

Rectangle

One of the most common complaints from MacOS users, especially those who switched from Windows, is the lack of window management options. Unlike Windows, MacOS native features don't offer much flexibility when it comes to arranging multiple windows on the screen. This can be a real problem for productivity, especially when working with multiple applications at the same time.

Fortunately, there is a solution to this problem - an app called Rectangle.

This app allows users to easily arrange their windows using just a few keyboard shortcuts. It starts automatically at login and works seamlessly with MacOS, making it an essential tool for anyone who wants to organize their workspace efficiently. Once you start using Rectangle, you won't be able to imagine working without it.

IDE

Switching from Visual Studio Code to Webstorm by Jetbrains over a year ago made my workflow more efficient. Unlike with VS Code where I had to search and install plugins individually and set them up, Webstorm was ready to use straight away with minimal customization needed.

After logging into my Github account, I could easily manage remote repositories.

Despite knowing that Webstorm has numerous features, I only use a fraction of them. To make the most of the IDE, I printed out all keyboard shortcuts and tried to use them as much as possible to minimize my dependence on the mouse or trackpad.

Summary

Each of the paragraphs above can be expanded into its own article. However, I have provided a brief overview of my setup so that others can try out some of these methods on their own systems.

Feel free to leave comments and share what has worked for you and why!