Setup your Macbook for Front End Development
A guide to setting up your development environment.
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.
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 thisv8.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.
That’s all for now! I hope you will find this list useful.
Cheers!