A guide to getting your Macbook ready for web development — tools, shortcuts, accessories, tips and tricks, and more
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.
Let’s start with a few changes you can make to macOS and the built-in apps.
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.
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.
Once you get used to it, it’s way faster to tap instead of click.
By enabling trackpad dragging, you’ll be able to drag files, select text, etc., by double tapping (and holding the second tap).
Show hidden filesType
defaults write com.apple.Finder AppleShowAllFiles true in terminal,or press ⇧⌘ .
Change where screenshots are savedOpen the Screenshot app via Spotlight search or by pressing ⇧⌘ 5, find the
Options menu at the bottom of the screen, then select a folder under
These are the mac shortcuts I use the most (I won’t list the very basic ones like ⌘ C, ⌘ V, ⌘ Tab, etc.). For a more comprehensive list, click here.
System wideSpotlight search: ⌘ Space Character Viewer: ⌃⌘ Space (Quickly find emojis and special characters)Force quit an app: ⌥⌘ EscLock screen: ⌃⌘ QShow or hide the Dock: ⌃ F3 or ⌥⌘ DShow all windows: ⌃ Arrow-UpShow all windows of the front app: ⌃ Arrow-DownForward delete: fn deletePaste without formatting: ⇧⌘ V
ScreenshotOpen Screenshot app: ⇧⌘ 5Save screenshot of the screen: ⇧⌘ 3Save screenshot of a portion of screen: ⇧⌘ 4Save screenshot of a window: ⇧⌘ 4 + SpaceCopy screenshot of the screen: ⇧⌃⌘ 3Copy screenshot of a portion of screen: ⇧⌃⌘ 4Copy screenshot of a window: ⇧⌃⌘ 4 + Space
FinderOpen the home folder: ⇧⌘ HOpen the desktop folder. ⇧⌘ DOpen the parent folder: ⌘ Arrow-UpGo to the previous folder: ⌘ [Go to the next folder: ⌘ ]Show or hide hidden files: ⇧⌘ .
Now the fun part! These are the command line–related tools I recommend for any web developer.
This is the package manager. It allows you to install, uninstall, and update command-line tools and Mac applications.
During the installation, you might be asked to install the Xcode Command Line Tools if you haven’t already — just follow the instructions on the screen.
To make sure your system is ready to brew, run
You can now search for packages with
brew search and install them with
brew install. You can also list installed packages with
To update the packages’ local registry you can run
brew update, and to upgrade the installed packages to their latest versions, type
I recommend running
brew doctor every now and then to make sure things are good and
brew cleanup to remove unused files.
This is an optional replacement for the terminal app. It offers a lot of really useful features. I’ll list my favorite ones below.
To install it, open the terminal (this is the last time you’ll need it), and run the following:
Now, feel free to replace terminal from the Dock (if you have it) with iTerm2. Or just open Spotlight (⌘ Space) and type iTerm2.
Hotkey windowYou can show or hide the iTerm2 window via a hotkey from anywhere very quickly.
Preferences > Keys > Hotkey > ☑️ Show/hide all windows with a system-wide hotkey
UnixynessCopy on selection, paste on middle click, and focus follow the mouse.
Preferences > General > Selection > ☑️ Copy to pasteboard on selection
Preferences > Pointer > General > ☑️ Three-finger tap emulates middle click
Preferences > General > Pointer > ☑️ Focus follows mouse
Disable native full screenBy disabling native full screen, you can quickly make iTerm2 take the whole screen without the usual full-screen animation.
Split panesYou can divide up your tabs into multiple panes with separate sessions and quickly switch between them. This works very nicely with focus-follow mouse.
I recommend creating new key bindings for those actions:
Preferences > Keys > Key Binding > +
Shell integrationYou can enable better integration between your shell and iTerm2.
Then, add the following to your
.zshrc (more details about Zsh can be found in the next sections):
Profile settingsFeel free to explore these settings and configure your profile to your liking. I recommend experimenting with background opacity and blur.
The most popular version-control system. You can install it with Homebrew:
This tool will make you 100% more productive when using Git via CLI. It makes rebasing, stashing, renaming and moving commits a breeze. Check out this video tutorial to see what you can do with it.
As macOS’s default shell since Catalina, Zsh is built on top of Bash and provides many cool features.
The first thing I recommend is having Homebrew manage its installation — open iTerm2, and run:
To update our default shell to be Homebrew’s Zsh, we need to edit the shell’s whitelist:
sudo vim /etc/shells. (If you’re not comfortable with Vim, you can use TextEdit instead by running
sudo open /etc/shells.)
Add a new line with
/usr/local/bin/zsh, save, and close.
To change the default shell, run:
chsh -s /usr/local/bin/zsh.
Restart the terminal, and confirm we’re on the correct Zsh by running:
echo $SHELL. You should see
Zsh will show you all the available commands you can use. If you press
TAB again, you’ll be able to navigate between the options by pressing
TAB or the
LEFT arrows. Confirm the command you want by pressing
And it’s smart enough if you type just a substring:
cd p/s expands to
Globbing (aka filename generation)List only files in the current directory:
List only folders in the current directory and its subdirectories:
.DS_Store files recursively:
rm -rf **/.DS_Store. (If you want to be sure which files will be deleted, you can press
TAB before running the command, and Zsh will expand the pattern)
There are lots of qualifiers you can use to target files with specific attributes. You can enable the more complex ones by running
Here’s one command to recursively match all normal files that have no uppercase characters or numbers in the name. They’re executable for the owner but not for the rest of the world. The owner must have the UID 1002, the file size must be above 30MB, and it must have been modified within the last month:
ls -l **/([^A-Z[:digit:]])##(#q.x^X^u1002Lm+30mM-1)
Boost Your Command Line Productivity With Keyboard Shortcuts
Level up your CLI skills with keyboard shortcuts
Oh My Zsh is a community-driven framework for managing your Zsh configuration. It provides hundreds of plugins and themes and makes configuring Zsh a breeze.
We can configure Zsh by running
vim ~/.zshrc or (
open ~/.zshrc if you prefer TextEdit over Vim). You’ll see a lot of configurations added by Oh My Zsh that you can play with. If you ever need to reset your
.zshrc, you can find the template here.
It has a really nice wizard that walks you through configuring it the first time that you run it:
And add the following line to your
Restart iTerm2, and you should see the configuration wizard. In the future, you can run it again with
zsh-syntax-highlighting: It enables highlighting of commands while they’re typed. This helps in reviewing commands before running them, particularly in catching syntax errors.
And add the following line to your
And add the following line to your
And add the following line to your
If you want to use zsh-syntax-highlighting along with this script, then make sure you load it before you load this script.
Also, you need to map your arrow keys. Add the following after the source command.
Oh My Zsh pluginsThe following plugins are made available by Oh My Zsh, like any other plugin found here. To install it, just add its name to the
plugins array in your
AliasesOften-used commands can be abbreviated with an alias.
alias tf=”tail -f” makes it so you can run
tf instead of typing
You can add as many aliases as you want to your
Plugins like Git and Common Alias add a lot of aliases that will make you type less, but it can be hard to learn them all. That’s what the
alias-finder plugin is for.
If you want to know what aliases exist for, it’s
You can also set
ZSH_ALIAS_FINDER_AUTOMATIC=”true” in your
.zshrc to have it run automatically before each command.
Command aliases can also access the original command’s arguments by using the array
This alias runs a given command x times. For example:
loop 10 echo ‘hello’ will print
hello 10 times.
If you need to manage multiple applications that need different versions of Node, I recommend nodenv.
Docker allows you to develop and deliver software in packages called containers. Containers are isolated from one another and bundle their own software, libraries and configuration files.
You should also check out lazydocker, a great CLI tool for docker and docker-compose.
It’s similar to top but allows you to scroll vertically and horizontally so you can see all the processes running on the system, along with their full command lines.
Boost Your Command-Line Productivity With Fuzzy Finder
Tips and tricks to level up your Command-line skills with Fuzzy Finder
A line-oriented search tool that recursively searches your current directory for a regex pattern. By default, ripgrep will respect your
.gitignore and automatically skip hidden files/directories and binary files.
Amphetamine is a macOS utility that can keep your Mac awake during times or situations you define. Amphetamine is highly customizable, allowing you to keep your Mac awake for a specified duration, or when conditions are met.
The best IDE/editor for web development at the moment (in my opinion, of course). It’s fast with tons of extensions, and it’s open-source.
You can find lots of great extensions for the most popular languages and frameworks in the Visual Studio Marketplace.
Move and resize windows in macOS using keyboard shortcuts or snap areas.
I use Rectangle a lot — you should master its shortcuts. The main ones I use are:
Left half: ⌥⌘ Arrow-LeftRight half: ⌥⌘ Arrow-RightTop half: ⌥⌘ Arrow-UpBottom half: ⌥⌘ Arrow-DownCenter window: ⌥⌘ CMaximize window: ⌥⌘ F
And if you have multiple displays, you’ll find these very handy:
Alfred is a productivity app that replaces Spotlight. There’s a free and a paid version.
This is more like a honorable mention because I don’t really use it anymore, as Spotlight is good enough for me. But if you are interested you can give it a try.
Turns your MacBook Pro’s two USB-C ports into 12 versatile ports, and then creates a truly productive workstation for you.
This docking station provides all the ports you might need, including an ethernet port if you like me prefer a wired internet connection. It also supports two external monitors and can charge your Macbook and your other wireless devices (hard drives, keyboard, mouse, phone, etc…).
This is a very sturdy, easy to adjust laptop stand, that also looks great!
Keyboard and Mouse
Tips and Tricks