Setup your Macbook for Front End Development

A guide to setting up your development environment.

3 min readAug 28, 2020

Iterm

It is a terminal emulator which has personally helped me a lot. It’s major feature that I like is the split window screen option.

Just press cmd+d and it will split the window vertically OR press cmd+d+shift and it will split the window horizontally.

Download it from here

Fish

This is a smart and user-friendly command line shell which I have been using in the recent times on top of zsh as zsh comes by default in new macOS.

I use this for one specific reason. It suggests commands as you type based on history and completions.

Generally while doing development on a daily basis, we tend to type the same set of commands all the time and this shell keeps suggesting you to complete the same command and saves a lot of time.

Homebrew

Homebrew is a package manager. It lets you easily install and update programs on your Mac. This comes in handy when you want to install other packages.

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

Node

Installing node should be one of the first steps before you start your project

Open the Terminal app and type brew install node.
To see if Node is installed, type node -v in Terminal. This should print the version number so you’ll see something like this v8.17.0
To update node, just enter this brew upgrade node

Git

The most popular version-control system.

brew install git

VScode

One of the most popular code editors. It is extremely light and fast in size compared to its competitors. Quickly gets you up and running. Not getting deep into which is better as every editor has its pros and cons.

Few of the extensions which would be of immense help while developing.

Go ahead and install this from here

Dimensions

If you are into front end development, you might have to spend a lot of time making your UI pixel perfect. This extension measures the dimensions from your mouse pointer up/down and left/right until it hits a border as illustrated below.

You can start and stop dimensions with the ALT + D shortcut.

It can be downloaded from here -> https://chrome.google.com/webstore/detail/dimensions

The Great Suspender

Sorry for diverting a bit but this extension has always been added on my chrome. If you generally have a lot of tabs open on chrome at the same time then this is definitely for you. (Assuming you have already downloaded chrome and you plan to use it as a default browser.)

Tabs that have not been viewed after a configurable length of time will be automatically suspended in the background, freeing up the memory and CPU being consumed by that tab.