My Mac OS setup and applications

My Mac OS setup and the best applications I use as a Web Developer

Table of content

• Disclaimer
• Usage
  • Where to find the right tool?
• My Hardware
• Setup shell
• Command Line Apps
• Applications
  • Bare minimum
  • Browsers
  • Utilities
  • Automation
  • Tasks & time management
  • Storage & backup management
  • Code
  • Reading & Writing
  • Communication
  • Social Media
  • Design & Web Design
  • Audio & Video production
  • Miscellaneous
• Mac preferences
  • Dock
• Web Applications
• Inspiration
• Icons and images
• Licence

Disclaimer

I have been always passionate about tools. I always loved experimenting until I can find the right tool for the right task. Being a Front-End Developer requires to know the tools that exist and choose the one that will perform the task faster and better.

Based on hours of research and testing, I'm sharing all the applications I believe suits the best my work and daily workflow. It's a living MacOS configuration that, I hope, will also save you time for you to enjoy life more!

Usage

• I tried to keep the right order you should also follow to install packages and applications on your Mac (particularly the setup shell part)
• Some tools are free and some are not. I'm lucky to have the ability to pay for licences and subscriptions. But if you are not in that situation, 1) You will find free alternatives in the "Alternatives" section of most of the tools, 2) you don't need a paid tool to do an amazing work. Just choose the best tool that suits you and your situation.

Where to find the right tool?

• Product Hunt - By far the best and well-know website where you can find almost everything you need. You will sometimes find a badge that redirects to the Product Hunt page. Show some ❤️ to the makers!
• AlternativeTo - I regularly use AlternativeTo but find it limited and not always accurate. The "ups" are most of the time not relevant or doesn't reflect what people prefer the most. It's a great place to start if you are looking for a list of alternatives though.
• Slant and stackshare - Slant and Stackshare are kind of similar but Stackshare is more developer tools focused. It's a nice source of information to compare apps / web apps.

My Hardware

• Personal Computer: 13" Late 2017 Macbook Pro with Touch bar.
• Personal Monitor: LG 34UM69G-B 34" 21:9 UltraWide

Personal Keyboards:

• At Home 1: Keychron K3 optical brown switch
• At Home 2: Ducky One 2 RGB TKL

Mouses:

• 2 Logitech MX Master 2S
• 1 Logitech MX Ergo

Accessories:

• Bose QuietComfort 35 II
• AirPods Pro
• Plugable Thunderbolt 3 Dock
• Elgato Stream Deck
• Elgato Green Screen
• Focusrite Scarlett-2i2 Gen2
• DBX 286s Microphone Pre-amp Processor
• Rode Procaster
• NETGEAR 8-Port Gigabit Ethernet Smart Managed Pro Switch (GS308T)

Setup shell

Xcode 11

• Xcode is required for some applications to run. So having Xcode updated just remove the issue of not being able to install some apps.

xcode-select --install

Homebrew - The Missing Package Manager for macOS

$ ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

With Homebrew comes brew-cask which will allow to install applications with the command line.

Useful commands for Homebrew

brew update                         # Fetch latest version of homebrew and formula.
brew search {app name}              # Searches all known Casks for a partial or exact match.
brew install {package name}         # Install a package
brew cask info {app name}           # Displays information about a given Cask
brew cask install {app name}        # Install the given cask.
brew cleanup

Cakebrew (optional) - A GUI for Cask

brew cask install cakebrew

ZSH - An alternative shell to Bash

brew install zsh

Add this to my ./zshrc

export HOMEBREW_CASK_OPTS="--appdir=/Applications"

Oh My Zsh - Framework for managing your Zsh configuration

Verify that ZSH is correctly installed

zsh --version

Additionally, Zsh should be set as the default shell. Run echo $SHELL from a new terminal to confirm. Expected result: /usr/bin/zsh or similar

sh -c "$(curl -fsSL https://raw.githubusercontent.com/robbyrussell/oh-my-zsh/master/tools/install.sh)"

Check if Oh My Zsh was correctly installed.

Command Line Apps

⚠️ Some of the following packages are not essential but highly recommended. Some applications may depend on the installation of these packages.

GNU Coreutils - An essential package with basic tools such as ls, rm...

brew install coreutils

Wget - To download data from the web and ftp, easier than curl

brew install wget

Tree - To create beautiful indented listing of files

brew install tree

tree -L 1 # to output only the root directories and files

Nmap - A powerful command line network discovery utility

brew install nmap

The Silver Searcher - Really fast code searching tool

brew install the_silver_searcher

jq - Lightweight and flexible command-line JSON processor

brew install jq

Youtube-dl - A command line alternative to Airy

brew install youtube-dl

youtube-dl -f best 'link-of-your-own-youtube-video'

FFMPEG - To convert videos in multiple formats

brew install tesseract-lang && brew install homebrew-ffmpeg/ffmpeg/ffmpeg --with-fdk-aac --with-librsvg --with-libsoxr --with-libssh --with-tesseract --with-libvidstab --with-opencore-amr --with-openh264 --with-openjpeg --with-openssl --with-rubberband --with-webp --with-zeromq --with-zimg --with-srt --with-libvmaf --with-libxml2 --with-game-music-emu --with-libbluray --with-libbs2b --with-libcaca --with-libgsm --with-libmodplug [email protected] --with-rtmpdump --with-speex --with-two-lame --with-wavpack --with-xvid

More details here

blueutil - CLI for bluetooth on OSX

brew install blueutil

Speedtest-cli - The command line version of Speedtest.net

brew install speedtest-cli

Imagemagick - You can do almost everything to edit/convert images and pdfs

brew install imagemagick

DisplayPlacer - Programmatically reorganize your screens layout

brew tap jakehilborn/jakehilborn && brew install displayplacer

Fonts - Installing some fonts

brew tap homebrew/cask-fonts

brew cask install \
    font-fira-code \
    font-source-code-pro font-source-code-pro-for-powerline \
    font-source-sans-pro

MAS - Install App Store apps from the command line

brew install mas

mas search {app name} # To search for an app

Ruby (rbenv) - To manage multiple versions of Ruby

brew install rbenv ruby-build rbenv-default-gems rbenv-gemset
echo 'eval "$(rbenv init -)"' >> ~/.zshrc
source ~/.zshrc # Apply changes
    
rbenv install {version}

nvm - Easily manage your node versions

⚠️ (never use brew to install nvm)

wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh | bash

Add these lines in the $HOME/.zshrc file:

export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && . "$NVM_DIR/nvm.sh" # This loads nvm

And these lines to automatically switch your node version based on the nvmrc file.

# place this after nvm initialization!
autoload -U add-zsh-hook
load-nvmrc() {
  local node_version="$(nvm version)"
  local nvmrc_path="$(nvm_find_nvmrc)"

  if [ -n "$nvmrc_path" ]; then
    local nvmrc_node_version=$(nvm version "$(cat "${nvmrc_path}")")

    if [ "$nvmrc_node_version" = "N/A" ]; then
      nvm install
    elif [ "$nvmrc_node_version" != "$node_version" ]; then
      nvm use
    fi
  elif [ "$node_version" != "$(nvm version default)" ]; then
    echo "Reverting to nvm default version"
    nvm use default
  fi
}
add-zsh-hook chpwd load-nvmrc
load-nvmrc

To default a specific node version: nvm alias default {version}

yarn - Fast, reliable, and secure dependency management.

brew install yarn

Act - Run Github Actions Locally

brew install nektos/tap/act

Git standup - Recall what you did on the last working day

brew install git-standup

Github CLI - Github on the command line

brew install github/gh/gh

Quick Look plugins

brew cask install \
	qlcolorcode qlmarkdown qlprettypatch qlstephen \
	qlimagesize \
	quicklook-csv quicklook-json epubquicklook 

Node packages to install globally

List all NPM package installed globally: npm list -g --depth 0

• Netlify CLI - npm install netlify-cli -g
• Gatsby CLI - npm install -g gatsby-cli
• NPM-check - npm install -g npm-check
• Yarn-check - npm install -g yarn-check
• AWS Amplify CLI - npm install -g @aws-amplify/cli
• Vercel CLI - npm i -g vercel
• Create React App - npx create-react-app my-app
• dotenv-cli - npm install -g dotenv-cli
• Gitmoji - npm i -g gitmoji-cli
• Release-it - npm install --global release-it
• Plop - npm i -g plop

Applications

This is a complete list of all the applications I have on my personal and professional Mac (some apps are only on my personal computer).

🎁 Some applications can be bought individually or you can subscribe Setapp for a 7-day free trial to test multiple applications and decide the one you want to use!

Bare minimum

This is the list of the most essentials apps I would install if I was limited in the number of apps to have.

Little Snitch - Control incoming/outgoing network traffic

CLI installation

brew cask install little-snitch

1Password - Password manager

Extensions / plugins

• Chrome extension - Update settings and set the shortcut to ⌃⇧P
• Setting 1Password 1Click Bookmarks in Alfred

CLI installation

brew cask install 1password

mas install 1333542190

Alfred 4 - Application Launcher, the best alternative for Spolight

List of workflows I use

This is the list of the workflows I used the most (files saved in Dropbox):

• caniuse
• DEVONThink Search - To search on my DEVONThink databases
• F.lux - Change the settings of F.lux
• Lorem Ipsum - To generate random Lorem Ipsum text
• MDN Search - One of the best documentation
• Snippets Lab - Search code snippets
• Spotify Mini Player - Play, Pause, Next, the missing remote for Spotify
• Things - Access my tasks from Alfred
• Alfred Maestro - Search on Keyboard Maestro using Alfred
• Terminal Finder - Type a command in Alfred and append it directly in the terminal
• Copy URL - Copy the current browser tab URL and deliver it in the markdown format

CLI installation

brew cask install alfred

iTerm2 - The replacement for terminal

CLI installation

brew cask install iterm2

Browsers

Google Chrome

Multiple profiles

• Professional user
• Personal user
• Accessibility user

Chrome extensions

• Feedly Mini - Easily save the RSS feed of the current website
• Adblock Plus - Because I prefer to limit ads
• 1Password - 1Password companion
• Tabs Mania - Extension I built to manage tabs
• Toolbar Spacer 1 - I prefer to separate my extensions visually
• Clip to DEVONthink - Clip the URL, text or screenshot the page and save it in DEVONthink
• Save to Notion - Save a page, text or anything else to Notion
• Add to Things 3 - Add the current URL to Things
• Eagle - Save images to Eagle (love the drag and drop functionality that works with any image)
• What Runs - Discover what runs a website
• React Developer Tools - The required tool that help to inspect any React component
• Grammarly - The life saving tool that help to fix writing errors
• CSS Scan
• Session Budy -
• Keepa - Amazon price tracker: know when to buy and when to wait
• VisBug - Open source web design debug tool for designers (and developers)
• JSONView - To view JSON documents in your browser
• Momentum - The classic and beautiful tab replacement

CLI installation

brew cask install google-chrome

Google Chrome Canary

CLI installation

brew cask install google-chrome-canary

Firefox

CLI installation

brew cask install firefox

Firefox Nightly

CLI installation

brew cask install firefox-nightly

Microsoft Edge - The browser from Microsoft

CLI installation

brew cask install microsoft-edge

Utilities

Bartender 3 - Organize menu bar icons

Screenshots

• Pro

  • Show view

  • Hide view

• Personal

  • Show view

  

  (Trailer, Mouseless, SnippetsLabs, PopClip, Magnet, Timing)

  • Hide view

  

  (f.lux, Hammerspoon, Dropbox, Google Backup, Airplay, Wifi)

CLI installation

brew cask install bartender

f.lux - Reduce eyes fatigue

CLI installation

brew cask install flux

PopClip - Giving more power to my mouse

• List of the extensions I use (files saved on Dropbox)

  • Past and Match Style
  • Alfred
  • Things 3
  • DEVONthink 3
  • Highlight
  • SnippetLab
  • Slack
  • Bitly
  • Terminal
  • Fantastical 3

• Excluded apps

CLI installation

brew cask install popclip

Contexts - Window switcher

• Shortcut used: ctrl + space

CLI installation

brew cask install contexts

CleanShot X - Capture your Mac’s screen like a pro.

CLI installation

brew cask install cleanshot

Alternatives

• Mac (free): Kap
• Windows (paid): Snagit

TextSniper - Extract text from images and videos

MeetingBar - Never miss a meeting again

Moom - Move and zoom windows

CleanMyMac X - To maintain my Mac as he was new

CLI installation

brew cask install cleanmymac

Muzzle - Silence embarrassing notifications

Lungo - Prevent your Mac from going to sleep

Stream Deck - Defining actions on buttons

• I have few profiles

CLI installation

brew cask install elgato-stream-deck

Noizio - I love birds

• I use to play different ambients when coding or working in general.
• I also use Portal and Thunderspace on my iPhone.

CLI installation

brew cask install noizio

mas install 928871589

Mouseless - Practice and learn new keyboard's shortcuts

TeamViewer - Remote control

I only use TeamViewer when I need to debug my Mom's computer (which is located in France).

Cardhop - Contacts lists management

• I use Cardhop occasionally to ensure my contact list is up to date or to easily add missing information or missing birthday dates.
• I synchronise my list of Contacts on iCloud and Gmail Contacts to avoid duplicates.

Automation

Keyboard Maestro - The most powerful option to automate EVERYTHING on Mac

Extensions

• Alfred Maestro - Search on Keyboard Maestro using Alfred

CLI installation

brew cask install keyboard-maestro

Hazel - Automate repetitive tasks in a few clicks

CLI installation

brew cask install hazel

Raycast - Control tools with few keystrokes

CLI installation

brew cask install raycast

Karabiner - Remapping my keyboards

BetterTouch Tool - Customize multiple devices on the Mac

CLI installation

brew cask install bettertouchtool

Hammerspoon - OSX automation using Lua

CLI installation

brew cask install hammerspoon

Tasks & time management

Fantastical - Calendar management

• I use Fantastical to manage personal and professional events.
• I always view my events from Week view. And shows 5 days with 16h shown for all days. This lets me have a perspective over what I have to do now.

CLI installation

brew cask install fantastical

Things - Task manager

• I used Todoist for few years but decided to try Things, and even I miss some options from Todoist, I'm loving using Things.

CLI installation

brew cask install things

mas install 904280696

Timing - To record everything I do without manual action

CLI installation

brew cask install timing

Storage & backup management

I've used Google One many years, but decide to use Dropbox instead. The two main reasons are: integration with most of the apps I used and the offline mode out of the box.

Dropbox - Online Cloud Backup

I've used Google Drive storage few years but use now mainly Dropbox because of the integration with a lot of Mac OS, iOs and iPad OS apps.

To DO after install

• Select Apps and Screenshots folders to sync

CLI installation

brew cask install dropbox

Google Backup Up & Sync

To DO after install

• Choose folders to sync

ForkLift - Dual pane file manager and file transfer client for macOS

To DO after install

• Sync favorites with Dropbox

CLI installation

brew cask install forklift

mas install 412448059

The Unarchiver - The missing RAR and Zip unarchiver

CLI installation

brew cask install the-unarchiver

mas install 425424353

Hard Disk Manager - Maintain and manage my external hard drives

Sometimes, some external hard drives can gave me tough times. Hard Disk Manager saved me multiple times and it's always good to check the health of your hard drives time to time.

GoodSync - Backup/sync and file organization

Visual Studio Code - My preferred code editor

The best code editor (for my usage)

CLI installation

brew cask install visual-studio-code

Tower - GUI Git client

CLI installation

brew cask install tower

Diffmerge - Compare and merge files

CLI installation

brew cask install diffmerge

SnippetsLabs - Code snippets manager

• I store all my code snippets

Other options

• Alfred
• VSCode

Extensions / plugins

• Alfred extension
• PopClip extension

Possible alternatives (to be tested)

• Snipper

CLI installation

mas install 1006087419

Trailer - Github Notifications

Proxyman - Best Web Debugging Proxy for MacOS

I found Proxyman when struggling making Charles working on my Mac. Proxyman make it really easy to replace any file by a local version. Useful sometimes to debug production.

Paw - Beautiful HTTP client for Mac

https://paw.cloud/extensions/

CLI installation

brew cask install paw

TablePlus - The best GUI for relational databases

CLI installation

brew cask install tableplus

Postman - A free alternative to Paw

Mockoon - Has never been so easy to create a mock server

CLI installation

brew cask install mockoon

Docker - Containerize everything!

CLI installation

brew install docker

brew cask install docker-toolbox

Altair GraphQL Client - Beautiful GraphQL Client

CLI installation

brew cask install altair-graphql-client

Screaming Frog SEO Spider - Website crawler to test SEO issues

Poedit - Translations made easy

CLI installation

brew cask install poedit

SwitchHosts! - Hosts management & switching

CLI installation

brew cask install switchhosts

Core Shell - Full featured terminal with OpenSSH support

VirtualBox - In case I need to debug on Windows

Smart JSON Editor - JSON data manipulation for Mac

Free alternative Jayson

CLI installation

mas install 1268962404

Carbonize - Generate beautiful code snippets

CodeKit - Gulp, Grunt, Pug are on a boat

• CodeKit was one of the best and first software that would convert Sass to CSS. A lot of improvements were made since then. I use it when I'm lazy and don't want to configure Gulp, ParcelJS or Webpack.

Haskell - Haskell for Mac IDE

CLI installation

mas install Haskell

Reading & Writing

Reeder - To stay informed

• I use Feedly to store all my RSS feeds and synchronize with Reeder.
• I like to activate the Bionic Reading setting, which speed up my reading.
• DEVONthink 3 and Things are activated in the "Actions and Sharing" settings.

CLI installation

mas install 880001334

Scapple - Brain, ideas and connections

• When I want to brainstorm without any structure, Scapple is the first tool I use in my workflow.
• It allows me to put all words / ideas I can think of and then start establishing relationships.
• When I have a better vision or want to be more organize, I usually switch in using MindNode.

CLI installation

brew cask install scapple

mas install 568020055

MindNode - Interactive Mind Mapping

What for?

• To help organization thoughts and ideas

What I ❤️

• Easy to use
• Nice UI and integration with MacOS / iOS

What I 👎

• The mobile application cost
• No enough inovations

CLI installation

brew cask install mindnode-pro

mas install 1289197285

Notion - Notes, docs, knowledge base and more, in one place

CLI installation

brew cask install notion

DEVONthink - To collect, organize and edit all my documents and articles

• I used Evernote for years, but the lack of new features I decided to use DEVONthink and have no regrets.

Extensions / plugins

• Chrome extension
• Alfred extension
• PopClip extension
• Airmail services activation

CLI installation

brew cask install devonthink

DEVONagent Pro - Search the web and filter the results

• I use DEVONagent Pro every-time I need to do research to prepare a presentation, write an article or produce some sort of content.

MWeb - A powerful Markdown Editor

• I've used Marked 2, Ulysses and Boostnode but MWeb is the one app I've enjoy the most using.

Possible alternatives

• Mou
• MacDown
• Quiver

CLI installation

mas install 1403919533

Scrivener - One day I want to be a writer

• Scrivener is the perfect tool to write any book.
• I've used Scrivener in the past to work on the outline for a video course.
• I'm planning in using it more and maybe start writing small non-fictional ebooks soon.

CLI installation

brew cask install scrivener

mas install 1310686187

Apple Keynote - A better alternative to Powerpoint

Communication

Slack - Work chat and more

Workspaces

• Dias testing (my own Slack workspace to test apps and webhooks)
• Contentful Community
• A11y
• TorontoJS
• FEDs
• Civic Tech Toronto

brew install cask slack

mas install 803453959

Airmail - My favorite email client

• I've been using Airmail since I fully work on MacOS.
• I tried Spark for few days but I didn't feel it was a big win in comparison to Airmail.
• Like many people, I approach my emails tasks in GTD style, trying to always be close to zero emails in my inbox.

Filters and triage

I used "filters" on Gmail to organize most of my emails (especially newsletters, bills, recurring emails...). I wish Gmail would have an easiest way to create these filters.

CLI installation

brew cask install airmail

mas install 918858936

Social Media

I have a strict rule in regards to social apps on my professional Mac. I usually don't have any social / communication app that is not directly related to work (only Slack). These apps are mostly on my personal MacBook.

Signal - Signal on Mac

Messenger - Facebook Messenger but on Mac

WhatsApp - WhatsApp on Mac

Discord - Popular chat platform amount developers and companies

I use mostly Discord to talk with HTMLHint contributors and other platforms.

Skype

• Skype was my to-go chat app for years, but since Google Meet, Facebook Messenger and WhatsApp, I only use with 2-3 people that are not on these platforms.

CLI installation

brew cask install skype

Design & Web Design

I'm not a Web Designer / Designer, but I love studying Photography, UI and UX. I try to practice as much as I can using the following applications.

Eagle - Organize my design library

Extensions / plugins

• Eagle Chrome extension

Rightfont 5 - The best font manager for Mac

• By far, the best font manager that supports my library of more than 80 000 font files.

IconJar - Best icon manager

• All my icons are stored on IconJar
• I could also used Eagle to store these, but I prefer to have a dedicated software to manage all icon's formats.

Adobe Creative Cloud

• List of Adobe Softwares I most often use
  • Adobe Photoshop
  • Adobe Illustrator
  • Adobe Premiere Rush
  • Adobe Premiere Pro
  • Adobe Audition
  • Adobe Lightroom Classic
  • Adobe Acrobat
  • ...

CLI installation

brew cask install adobe-creative-cloud

Figma

I'm planning in using more Figma as I don't want to renew Sketch in regards to my real usage.

CLI installation

brew cask install figma

Sketch

Still a reference (vs Adobe XD and Figma) but I didn't renew my licence in 2019. Planning in using Figma instead when needed.

CLI installation

brew cask install sketch

Sketchpacks

To manage plugins for Sketch

Zeplin

Used Zeplin mostly at work. I remember when it first came out. A lot of updates and improvements since.

ColorSnapper2 - Collect, organize and share colors

My go-to color-picker.

CLI installation

brew cask install colorsnapper

Alternatives

• I've used Sip in the past but recently switched to ColorSnapper2 because no subscription.

CLI installation

brew cask install sip

ImageOptim - Optimize images

CLI installation

brew cask install imageoptim

Audio & Video production

VLC - A Media player built by my compatriots

It's not because it was build by French people that I love this app!

Loopback - Cable-free audio routing for Mac

Audio Hijack - Record any audio

Ecamm Live - The simplest tool for doing live streaming on Facebook / Youtube

Streamlabs OBS - The best (and free) streaming app

Screenflow 9 - Screen recording and editing like a pro

• Screenflow doesn't recommend to store files on Dropbox, so I usually store the files on Dropbox but move them to my local hard drive if I want to edit these. No problem until today.

Power Prompter -

Twitch - The well-known streaming platform

Miscellaneous

KeyKey - A minimalist touch typing tutor for Mac

Type Fu - Typing training

The only typing program that has a "Code" practice section

Typesy - When I want to compete with my wife

GPG Suite - Encrypt, decrypt, sign and verify files or messages.

• I use this also for signing my commits.

Hue Sync - Sync my lights with audio / video files

CLI installation

brew cask install

Mac preferences

Dock

Add spaces to my dock

defaults write com.apple.dock persistent-apps -array-add '{"tile-type"="spacer-tile";}'; killall Dock

• Dock screenshot

Web Applications

• Invision
• Namecheap - The best domain registrar
• StatusCake - To keep an eye on your website uptime
• Themer.dev - To generate themes (editors, terminals, wallpapers, and more) with ease
• Netlify
• codeimg - To easily create social media banners
• Gradient Magic - Free gallery of CSS Gradients

Inspiration

Heavily inspired by the works from:

• https://github.com/nikitavoloboev/my-mac-os
• https://github.com/donnemartin/dev-setup

Icons and images

All logos and brand/applications names are registered and below to their owners.

Licence

MIT