The perfect terminal, OS settings to build better apps, best Mac productivity apps, & more!
When you get a new computer there are just so many things you have to do to get it ready for everyday use as a web developer. This is the list of things that I've found over the years work well for me, you can of course pick and choose which parts are right for you!
Terminal
A complete terminal installation consists of:
a terminal emulation application (what you type in) -- Hyper
a shell (the prompt you're presented with) -- zsh
(optional) a custom shell framework (a bunch of prepackaged shell customizations) -- oh-my-zsh
(optional) additional shell plugins
Install each piece of the terminal
Download & install your terminal emulation application Hyper. Then make a few tweaks to ~/.hyper.js:
Make it copy selected text by default by setting copyOnSelect: true
Prevent Hyper from making annoying sounds when less scrolls with bell: false
You might like to add these git(ish) aliases to .zshrc
1
2
3
4
5
6
7
8
9
10
# in ~/.zshrc
alias k=git
alias a="git lsa"
alias s="git status"
alias sb="yarn storybook"
alias good="git bisect good"
alias bad="git bisect bad"
alias add="git add ."
alias p="pnpm"
alias lc="git lm head | pbcopy"
You might also want to add quick aliases to automatically cd to paths of important projects. For example:
Sometimes terminal scrolling is broken after installing delta (see here), to fix it, install the latest version of less:
brew install less
brew link less
Modify MacOS Defaults
Make MacOS always show scrollbars
Useful for web development. This is to ensure that your Mac scrollbar experience matches the Windows experience that most of your users will have.
Set System Settings → Appearance → Show scroll bars to Always
Correct how the tab key navigates in Firefox and Safari
By default, MacOS only allows the keyboard tab key to focus certain elements. Those elements appear to include inputs and buttons, but explicitly does not include links, and potentially other elements. This completely breaks keyboard accessibility testing.
To correct this you need to change an OS setting and a Safari setting
Toggle on System Settings → Keyboard → Keyboard navigation
Open Safari, then check Safari Settings → Advanced → Press Tab to highlight each item on a webpage
Configure which system settings you would like to show in the Menu bar
Open System Settings → Control Center
You might like to set:
Wi-Fi
Bluetooth
Sound
Battery (with percent?)
Show hidden files in Finder
Open any Finder window and press ⌘⇧. (CMD+shift+period) to display hidden files
I also like to add the user ~ and ~/dev (where I put all my code) folders to my Favorites in Finder
Edit the default delays before the screen turns off
System Settings → Displays → Advanced
TODO: More specifics here
Make calendar app correctly show Monday as the first day of the week
SystemSettings → Language & Region → First day of week: Monday
Add keyboard shortcuts for deleting and archiving emails in the Mail app
System Settings → Keyboard → Keyboard Shortcuts → App Shortcuts
Click +, Choose Mail as the application, and then enter these two shortcuts:
Install Mac Apps
Assuming this isn't your first Mac setup, start by looking through your previously downloaded apps in App Store → Account (Your Name).
With that out of the way, here is an incomplete list of wonderful Mac apps that you might consider adding to your collection:
In order to run code in the terminal, open VS Code, press ⌘⇧P to open the Command Palette, type shell command, and choose the Install option.
Also, assuming you've had a previous VS Code installation and enabled the settings sync feature, press ⌘⇧P to open the Command Palette, type sync now, and hit enter to auto-download all your previous VS Code Extensions and re-apply your old settings (such a time saver!).
A much improved version of the default Mac screenshot tool.
It has so many features this app is worth 2-3x the $30 they're currently charging for it. This tool literally has a whole photo editor built into it that has become my go to for shitty meme editing. You don't know how much you need this until you try it. For real, take advantage of the 30-day money back trial and see what you're missing. It's under so much active development that after a year I paid the $19 to extend my updates for another year.
For the record, this post is in no way sponsored by Cleanshot, I just love this tool (but I'll gladly take a sponsorship! haha)
If you've already download Cleanshot on a different computer and want to move it to a new one, go to their License Manager.
This app solves a problem I had experienced for years. Finally a way to not be late to virtual meetings.
Ever since I started working remotely I had the constant issue of:
You can't control the meeting default reminder notifications (30m, 15m, 5m, etc.) on other people's meetings
You can change them on a per-meeting basis, but that gets annoying real fast. And if they update the meting for any reason, your changes go out the window.
The notification present most meetings is going to be either 10 or 15 minutes. Both of those are more than enough time for me to continue working and completely forget about the meeting.
In comes MeetingBar. You can set MeetingBar to notify you of all meetings exactly 1 minute before the meeting. Then just click the MeetingBar notification and boom, you're in the meeting, EARLY even!
💡 Pro Tip: You can even program MeetingBar to automatically pause Spotify when you join a meeting.
Meeting Bar Preferences > Advanced > Run AppleScript when joining a meeting
# write your script here
tell application "Music" to pause
Being able to copy multiple things to my clipboard at a time, and not having to worry about them accidentally disappearing has had a really positive impact on my efficiency.
Know you're going to need two separate bits of info from this page? Just copy them both and then you don't have to come back after you paste to copy the second one!
Unfortunately Mac OS doesn't provide an easy way to see a quick little calendar month view like Windows does. That's exactly what Itsycal is for. I don't use the calendar app integration, I just want to see the days of the month.
Make sure to correctly set Monday as the first day of the week in the settings
In order to not waste Menu Bar space, I like to set up Itsycal to show the date, and the Mac OS clock to only show the time
This app (made by the wonderful folks at Cleanshot) makes it really easy to measure the pixel size of any element on your screen. It's like what you already use the screenshot tool for, but better.
If you do frontend web development this tool is for you. Go watch the 1m intro video.
I like to scroll "naturally" with a trackpad (fingers bottom to top to scroll down) and "traditionally" (wheel top to bottom to scroll down) with a mouse.
MacOS unfortunately doesn't allow distinguishing between mouse and trackpad when choosing to enable "natural" scrolling, but Scroll Reverser does!