• Stars
    star
    469
  • Rank 93,595 (Top 2 %)
  • Language
  • Created over 2 years ago
  • Updated 3 months ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

This repo contains info on all the apps / tools / settings I use on my Mac.

My Mac Setup

This repo contains info on all the apps / tools / settings I use on my Mac.

What Macbook do I have?

In the 2022 setup video I was using the 2015 Macbook Pro. You can read more about it here

I am now using the 2021 14" Macbook Pro. This setup works exactly the same on there.

These are the specs at a glance:

  • Apple M1 Pro
  • 16GB RAM
  • 500GB SSD

Read more about this Macbook here

Homebrew / Terminal / Shell

Homebrew

Homebrew allows us to install tools and apps from the command line.

To install it, open up the built in Terminal app and run this command:

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

This will also install the xcode build tools which is needed by many other developer tools.

After Homebrew is done installing, we will use it to install everything else we need.

Terminal

The first app I install is to replace the built in Terminal.

I prefer iTerm2 because:

  • Nice window chrome
  • Lots of customization options
  • Clickable links
  • Native OS notifications

Quick aside - "window chrome" is another term for the basic structural elements used in a graphical user interface, such as window frames and scroll bars, as opposed to the content. After having a few people review this, I realize not everyone knows / uses that term πŸ˜…

There are a lot of options for a terminal replacement, but I've been using iTerm2 for years and it works great for my needs.

Checkout their documentation for more info on what iTerm2 can do: https://iterm2.com/documentation.html

We install this using a Homebrew "cask". Casks are full applications, similar to what you would install from the App store.

brew install iterm2

Once installed, launch it and customize the settings / preferences to your liking. These are my preferred settings:

  • Appearance
    • Theme
      • Minimal
  • Profiles
    • Default
      • General -> Working Directory -> Reuse previous session's directory
      • Colors -> Basic Colors -> Foreground -> Lime Green
      • Text -> Font -> Anonymous Pro
        • You can download this font here.
        • I use this font in VS Code as well
      • Text -> Font Size -> 36
        • I use my Macbook to present / teach, so a big font size is important so everyone can see the commands I'm typing
      • Keys -> Key Mappings -> Presets -> Natural Text Editing

Shell

Mac now comes with zsh as the default shell. bash is my preferred shell.

I prefer bash because every remote linux machine I log into uses bash. Also, most shell scripts you come across (.sh files) are meant to be run on sh (Bourne shell) or bash (Bourne again shell). These files might run on zsh, but there might be some compatibility issues.

If you are a beginner, you probably don't need to replace your shell with bash. If you're going to stick with zsh, checkout Oh My Zsh which gives you a bunch of customizations out of the box.

Install Bash and set it as the default

To see what shell is currently your default, run:

echo $SHELL

To install the latest version of bash:

brew install bash

Then, determine where bash got installed:

which bash

This will likely print /usr/local/bin/bash.

We now need to add this to our /etc/shells file so we can set it as our default shell.

Open up the /etc/shells file in nano (a command line text editor) with super user privileges (you will need to type your password after running this command):

sudo nano /etc/shells

Command explained:

  • sudo is a way of running a command with super user privileges.
  • nano is an easy to use command line editor. As opposed to vi or vim.
  • /etc/shells is the file we need to edit / update.

This will launch a command line editor. Add /usr/local/bin/bash to the file above the other list of shells.

Press CTRL+X to close the file and then Y to confirm / save the changes.

Now that /usr/local/bin/bash is in our /etc/shells file, we can set it as our default shell (you will need to enter your password for this command as well):

chsh -s /usr/local/bin/bash

Now that you've changed your shell, if you open up a new iTerm2 tab or close / re-open iTerm2, you should be presented with a bash shell!

You can run the following to confirm you shell has changed:

echo $SHELL

Customizing Bash with .bash_profile

I have a custom .bash_profile with all of my custom settings including a customized prompt, aliases, PATH variables, colors and more.

If you do not want to go through the process of customizing your .bash_profile, you can install Oh My Bash to get a ton of customizations out of the box.

I store my .bash_profile on github here so I can copy it over to any machine I'm setting up.

Copy this file (or create your own) in your home directory:

cd ~
curl -O https://raw.githubusercontent.com/w3cj/dotfiles/master/.bash_profile

Commands used by my .bash_profile

  • vcprompt - list the current branch if in a folder that is a git repo
  • fortune - print a random quote / story / joke / poem.
  • cowsay - use a cowfile to say a random fortune
brew install vcprompt
brew install fortune
brew install cowsay

Install the latest version of git

My Mac came with git version 2.32.1, we can use brew to install the latest version of git:

git --version
brew install git

Open a new tab / window to start using the latest version:

git --version

Configure git with your name / email and preferred editor:

git config --global user.name w3cj

git config --global user.email [email protected]

git config --global core.editor nano

Other command line tools I use

  • ffmpeg - edit videos from the command line
  • imagemagick - edit images from the command line
brew install ffmpeg
brew install imagemagick

OS Productivity

Window Management

I know this feature is built in to a lot of other operating systems, but it is not built in to a Mac, so we need an app for it.

I use rectangle to move and resize windows using keyboard shortcuts. I used to use spectacle, but rectangle is more regularly maintained and allows me to use all of the same keyboard shortcuts as spectacle.

I highly recommend installing this and memorizing the keyboard shortcuts. Fluid and seamless window management is key to being productive while coding.

brew install rectangle

App Switching

The built in App switcher only shows application icons, and only shows 1 icon per app regardless of how many windows you have open in that app.

I use an app switcher called AltTab. It shows full window previews, and has an option to show a preview for every open window in all applications (even minimized ones).

I replace the built-in CMD+TAB shortcut with AltTab.

brew install alt-tab

Quick Launching

The built in spotlight search is a bit slow for me and usually has web search results as the default instead of apps or folders on my machine.

I use Alfred to launch apps / folders. There are features locked behind the paid powerpack, but I purchased a lifetime license a few years ago, and Alfred keeps working great for me. There are a lot of other cool things you can do with Alfred (workflows, scripting, clipboard manager etc.), but I mainly use it for launching apps and folders.

brew install alfred

Other Apps I Use Daily

  • firefox-developer-edition - Preferred web browser
  • app-cleaner - When removing an app, will search your file system for related files / settings that should be removed as well
  • android-file-transfer - Transfer files to / from my android phone
  • android-platform-tools - Installs adb without the need for the full android studio.
  • keepingyouawake - Prevents my Mac from going to sleep when I'm presenting / live streaming
  • discord - Messaging / Community
  • vlc - I use VLC to watch videos instead of the built in QuickTime.
  • keka - Can extract 7z / rar and other types of archives
  • kap - Screen recorder / gif maker
  • time-out - Break timer
  • gimp - Image editor
  • inkscape - Vector editor
  • visual-studio-code - Code Editor
  • sublime-text - Note taking (I know there are better apps...)
  • insomnia - HTTP / REST / GraphQL tester / requester

You can install them in one go by placing them all into a text file and then running brew install:

firefox-developer-edition
app-cleaner
android-file-transfer
android-platform-tools
keepingyouawake
discord
slack
vlc
keka
kap
time-out
gimp
inkscape
visual-studio-code
sublime-text
insomnia
xargs brew install < apps.txt

OS Settings

These are my preferred settings for Finder and the Dock.

Finder

  • Finder -> Preferences
    • General -> Show these on the desktop -> Select None
      • I try to keep my desktop completely clean.
    • General -> New Finder windows show -> Home Folder
      • I prefer to see my home folder in each new finder window instead of recent documents
    • Advanced -> Show all filename extensions -> Yes
    • Advanced -> Show warning before changing an extension -> No
    • Advanced -> When performing a search -> Search the current folder
  • View
    • Show Status Bar
    • Show Path Bar
    • Show Tab Bar

Dock

I don't use the Dock at all. It takes up screen space, and I can use Alfred to launch apps and AltTab to switch between apps. I make the dock as small as possible and auto hide it.

  • System Preferences
    • Dock & Menu Bar
      • Size -> Small as possible
      • Position on screen -> Right
      • Automatically hide and show the Dock -> Yes

Menu Bar Customization

System Stats Widgets

I like to see my network traffic, CPU temp / usage and RAM usage at a glance.

I used to use iStat Menus, but a few people in my twitch chat pointed me to stats, a FOSS menu bar stats app. I tried it out, and I like it so far.

In each widget, a key setting to look for is under "widget settings", choose "merge widgets into one".

brew install stats

Menu Bar Calendar

I like to have a calendar in the menu bar that I can quickly look at. stats does not include one, so I found itsycal. It seems fine for my needs.

brew install itsycal

itsycal shows the date, so I hide the date in the system menu bar widget:

  • System Preferences
    • Dock & Menu Bar
      • Clock
        • Show Date -> Never
        • Show Day of Week -> No

Note Taking

There are likely a million other better options, but I have used Sublime Text as a note taking app for years now. I essentially use it as a staging area before moving my notes into a more permanent place (Google Docs, Google Keep, Trello, actual code project READMES etc.) or I delete the note (close the tab) after it has served its purpose.

I use sublime because it allows me to open new tabs / files without the need to save a given file. I can have several tabs / staging areas open and then completely close sublime. When I open it back up, all of my tabs are still there.

Web Browser

Firefox

I use Firefox because it is open source and comes from the Mozilla Foundation, a non profit company that respects my privacy.

I use the following extensions to protect my privacy while browsing the web:

  • Adblocker - uBlock Origin
  • Tracker Blocker - Privacy Badger
    • Firefox now includes tracker blocking, but I leave Privacy Badger enabled.
  • Cookie Autodelete
    • Removes cookies from websites that are not in my whitelist whenever a tab is closed. An additional precaution to tracker blocking.
  • Decentraleyes
    • Caches CDN links locally and intercepts requests to serve from the cache. Prevents CDNs from tracking you across websites.

Node.js

I use nvm to manage the installed versions of Node.js on my machine. This allows me to easily switch between Node.js versions depending on the project I'm working in.

See installation instructions here.

OR run this command (make sure v0.39.1 is still the latest)

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash

After installation you'll want to add the following to your .bash_profile / .zshrc etc.

export NVM_DIR="$([ -z "${XDG_CONFIG_HOME-}" ] && printf %s "${HOME}/.nvm" || printf %s "${XDG_CONFIG_HOME}/nvm")"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" ## This loads nvm

Now that nvm is installed, you can install a specific version of node.js and use it:

nvm install 18
nvm use 18
node --version

Global Modules

There are a few global node modules I use a lot:

  • lite-server
    • Auto refreshing static file server. Great for working on static apps with no build tools.
  • license
    • Auto generate open source license files
  • gitignore
    • Auto generate .gitignore files base on the current project type
npm install -g lite-server license gitignore

VS Code

VS Code is my preferred code editor.

You can view all of my VS Code settings / extensions here.

2 of the most notable settings are:

{
  "editor.linkedEditing": true,
  "editor.snippetSuggestions": "top",
}
  • editor.linkedEditing
    • Automatically edit a closing tag when editing an opening tag
  • editor.snippetSuggestions
    • Puts the most relevant auto complete options at the top

Break Timer

I use an app called Time Out.

I have it setup to show:

  • 10 second micro break every 15 minutes
  • 5 minute long break every 60 minutes

There is also a cross platform break timer call Stretchly. I have not used it but a lot of people have recommended it.

More Repositories

1

meower

A basic twitter clone built to demonstrate the full stack.
JavaScript
222
star
2

react-ts-starter

A bare-bones vite + react + typescript starter template with eslint + prettier, vitest + @testing-library and react-router
TypeScript
208
star
3

travel-log

A full stack application to store / list places you have traveled.
JavaScript
198
star
4

listd

listd is a Full Stack App that will allow users to create, share and watch lists of YouTube channels. This app is being built LIVE on Twitch https://twitch.tv/codinggarden
TypeScript
190
star
5

intro-to-typescript

TypeScript
142
star
6

faqs

Welcome to the Coding Garden Frequently Asked Questions! If you are new here and you have a general question, it's very likely I've answered it already.
142
star
7

miniature-umbrella

A url shortener created live on stream in 3133.7 seconds.
JavaScript
139
star
8

inventory-app

JavaScript
115
star
9

seedling-school-01-frontend-project

For your first project, you will build a frontend website with HTML, CSS and JavaScript. The website will communicate and integrate with a 3rd party Web API.
106
star
10

entropychat.app

A discord clone made by the Coding Garden Community.
JavaScript
103
star
11

trello-clone

JavaScript
97
star
12

learn-to-code-resources

82
star
13

fresh-spots

A Deno Fresh Full Stack App for sharing lists of places to visit
TypeScript
80
star
14

guest-map

A map application where users can leave messages with their location.
JavaScript
54
star
15

troll-garden

JavaScript
54
star
16

vue-firestore-reddit-clone

Vue
47
star
17

mars-weather-api

JavaScript
41
star
18

coding-improv

JavaScript
39
star
19

vue-3-appstravaganza

Vue
38
star
20

live-chat-manager

A dashboard that allows me to manage incoming chat messages from YouTube and Twitch.
JavaScript
35
star
21

sproutkit

Apps and Components for Twitch Overlays
Vue
34
star
22

frontend-framework-showdown-2020

Build the same Image Search App with Vanilla JS, React.js, Vue.js, Svelte and more!
TypeScript
34
star
23

auth-for-newbs

Vue
34
star
24

twitch-bot

A general purpose twitch bot that will work with multiple channels. (Work in Progress...)
JavaScript
32
star
25

next-travel-log

TypeScript
27
star
26

now-config

JavaScript
26
star
27

react-typescript-guestbook

A guestbook application built with React + TypeScript + React Router + ESLint + Prettier + Material UI + React Hook Form + Easy Peasy
TypeScript
26
star
28

intro-discord-bot

JavaScript
24
star
29

types-of-websites

JavaScript
23
star
30

community-forum

JavaScript
23
star
31

css-challenges

HTML
23
star
32

amazon-price-scraper

JavaScript
22
star
33

higher-order-functions

These are the materials/exercises for the live stream.
JavaScript
22
star
34

intro-dot-net-core-web-api

C#
22
star
35

api

An API for the Coding Garden YouTube / Twitch channel.
JavaScript
22
star
36

news

21
star
37

intro-react-hooks-todo

JavaScript
20
star
38

intro-react-todo

JavaScript
20
star
39

discord-manager

JavaScript
20
star
40

snap-garden

Realtime ephemeral image sharing + maps.
JavaScript
19
star
41

morning-tea

Links to news I discuss on my morning tea stream.
JavaScript
19
star
42

learn-deno-v1.0.0

TypeScript
18
star
43

live-chat-window

JavaScript
17
star
44

101ways-to-deploy-react

JavaScript
16
star
45

react-pixel-art-maker

A simple 8x5 pixel art maker grid. Built with React.
JavaScript
14
star
46

gme-stonks

JavaScript
14
star
47

auth-for-newbs-v2

JavaScript
14
star
48

feathers-chat-svelte

FeathersJS Chat Client built with Svelte
HTML
14
star
49

frontend-framework-showdown

All the code for my frontend framework showdown stream.
TypeScript
13
star
50

deploy-with-now-v2

JavaScript
13
star
51

chess-board

JavaScript
13
star
52

type-one-in-chat

JavaScript
13
star
53

ez-pizza-api

A simple library for interacting with the Dominos Pizza API.
JavaScript
12
star
54

build-simple-jquery

JavaScript
12
star
55

puny.li-url-shortener

A simple Full Stack URL Shortener
HTML
12
star
56

message-board-server

JavaScript
12
star
57

vue-3-hacker-news-client

Vue
12
star
58

SeedlingDrop

JavaScript
12
star
59

tryday-friday

PHP
12
star
60

stonk-ticker

JavaScript
12
star
61

choosing-a-full-stack-framework

TypeScript
11
star
62

message-board-client

Vue
11
star
63

landscaping

This repo is used to track suggestions and ideas from the community for coding garden streams.
11
star
64

dramatic-sound-board

A sound board with dramatic hits, swells, rises, loops and songs.
HTML
11
star
65

twitch-team-shoutout-bot

A bot that detects when a team member has entered the twitch chat and sends a shout out message.
JavaScript
10
star
66

colorado-covid-vaccine-map

JavaScript
10
star
67

coding.garden

The Coding Garden website.
Svelte
10
star
68

things-you-should-learn-before-learning-react

CSS
10
star
69

is-it-new-years-day

A site that tells you if it is new years day or not.
JavaScript
9
star
70

thankfulfor

JavaScript
9
star
71

community-forum-db

JavaScript
9
star
72

vox

JavaScript
9
star
73

AMA

JavaScript
9
star
74

yt-caption-downloader

Download all captions (subtitles) for all videos on a given youtube channel.
TypeScript
9
star
75

vue-vs-react

JavaScript
8
star
76

variety-show

JavaScript
8
star
77

twitch-map-check-in

JavaScript
8
star
78

rgb-led-matrix

Control an Arduino + RGB LED Matrix with Twitch Chat!
JavaScript
8
star
79

vue-todo

Intro to Vue.js: Build a Todo App
HTML
8
star
80

twitch-vote-overlay

JavaScript
8
star
81

stream-overlay-alerts

JavaScript
7
star
82

svelte-appstravaganza

Several small apps built with svelte.
JavaScript
7
star
83

happiness-is

JavaScript
7
star
84

twitter-ml

JavaScript
7
star
85

devpardy

A local 3 player jeopardy app. Based on Vue.js and Electron.
Vue
7
star
86

cj-eye

https://cj-eye.now.sh/
JavaScript
7
star
87

embtr

A simple website / scraper to get embeddable website preview cards.
JavaScript
7
star
88

SeedlingDropV2-RevengeOfTheNewts

JavaScript
7
star
89

youtube-live-chat-api

JavaScript
7
star
90

autocomplete-ui-showdown

TypeScript
7
star
91

learning-to-hack

TypeScript
7
star
92

yt-auto-chapters

JavaScript
7
star
93

pkmn-codes

JavaScript
6
star
94

tdd-game-of-life

JavaScript
6
star
95

video-filter

JavaScript
6
star
96

hit-counter

JavaScript
6
star
97

nature-image-api

JavaScript
6
star
98

vue-state-components-props

This is the code for my live stream.
Vue
6
star
99

down-the-rabbit-hole

6
star
100

front-end-opoly

JavaScript
6
star