🛠️ tools of the trade

or, the “it’s parentheses all the way down” part.

tl;dr

xkcd: Lisp Cyclesxkcd: Lisp Cycles

hardware

remember this guide is opinionated, right? ok so: Mac. look, you’re gonna need a Linux-like environment. MS-DOS ain’t gonna cut it. in theory, if you buy into Apple’s kool-aid, the thoughtful design of a Mac might even make you a better product developer, at least by osmosis. i don’t know about all that, but it is indeed a slick machine. the clincher for me is that you can use BootCamp to install Windows if you really need it (to test Microsoft Edge and such) and it’s difficult to install Mac on non-Mac hardware if you need to test Safari, which a bunch of users do indeed use in the wild.

all that being said, not everyone is privileged to shell out that kind of moola, so a Linux laptop is an absolutely fine choice as well!

security

internalize this now: every engineer is a security engineer. you need to know security just as much as security “specialist” does. you must adapt the mindset of the paranoid because the Internet is not a nice place and is constantly trying to kill you.

  • Gmail: I know you have email already. I’m listing this here as a PSA to turn on 2-factor authentication. Now.
  • encrypt your hard drive.  → System Preferences → Security & Privacy → FileVault → Turn on
  • 1Password: generates secure passwords for you. because you suck at it, trust me.
  • Signal: secure your mobile communications.
  • Arc. i’m on the verge of recommending this browser over others for just a better experience in general. (Brave was my previous alt. recommendation)
  • YubiKey. more secure option when setting up Two-Factor Authentication. not strictly necessary but as you progress in your career (and paranoia 🕵️‍♂️) definitely take a look.

software

  • browser: Chrome. quite simply, it has better tooling for debugging. believe me, i used to be a hardcore firefox guy (with my name on the monument to prove it). so it pains me to say it, but your life coding websites will be easier on Chrome these days.
    • chrome extensions: React DevTools
    • a word on Arc. i’m on the verge of recommending this browser over others for just a better experience in general. (Brave was my previous alt. recommendation)
  • a way to test Microsoft Edge: VirtualBox + free, legal VMs. alternatively, you can look at BootCamp for Mac to install Windows, or you could also use Parallels or VMWare but those aren’t free. my update in 2023 as i write this is, hesistantly and with humbleness, that browser skews have gotten so much better in the past decade that you might not need to check anymore. :ducks in fear of somebody throwing something at me:
  • terminal: iTerm2. killer feature, you can create a shortcut key to have a gamelike visor-like experience.
    • Preferences → Profiles → Window → Style → Full-Width Top of Screen
    • Preferences → Keys → Hotkey → Show/hide all windows with a system-wide hotkey.
    • also, turn on iTerm2 → Secure Keyboard Entry
    • quick note: god, terminals are so unintuitive. and nobody teaches you how to use them, at least nobody certainly taught me. they have hidden characters that you’re just supposed to know about, their manuals are hidden, and you have to just know ahead of time what you are looking for. i’ll discuss some useful commands in the next section.
    • watch this space: there are some even more modern contenders in this space: Fig, Warp
      • who would think command lines could get even better but they are!
  • package manager: Homebrew. let’s you install all the geeky things that you’re going to need later on. MacPorts used to be the recommendation here, but god, what a mess.
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
# install zsh
brew install zsh zsh-completions


# install oh-my-zsh which adds zsh nicities. (cheatsheet of shortcuts found here)
sh -c "$(curl -fsSL https://raw.github.com/robbyrussell/oh-my-zsh/master/tools/install.sh)"


# you can set a custom theme for your terminal or try out the random ones to get ideas
vim ~/.oh-my-zsh/themes/mycustomtheme.zsh-theme
# try out Powerline9k:
git clone https://github.com/bhilburn/powerlevel9k.git ~/.oh-my-zsh/custom/themes/powerlevel9k
# edit your ~/.zshrc file
vim ~/.zshrc


# a great theme to start with is Powerline9k:
ZSH_THEME="powerlevel9k/powerlevel9k"


# install necessary fonts for the theme:
brew tap caskroom/fonts
brew cask install font-hack-nerd-font
# you'll then need to set in iTerm2, Preferences->Profile->Text->Non-ASCII Font to Hack Nerd Font.


# further great config options for Powerlevel9k found in this gist. (requires some finessing)
POWERLEVEL9K_MODE='nerdfont-complete'
POWERLEVEL9K_PROMPT_ON_NEWLINE=true
POWERLEVEL9K_PROMPT_ADD_NEWLINE=true
POWERLEVEL9K_RPROMPT_ON_NEWLINE=true
POWERLEVEL9K_SHORTEN_DIR_LENGTH=2
POWERLEVEL9K_SHORTEN_STRATEGY="truncate_beginning"
POWERLEVEL9K_VCS_CLEAN_FOREGROUND='black'
POWERLEVEL9K_VCS_CLEAN_BACKGROUND='green'
POWERLEVEL9K_VCS_UNTRACKED_FOREGROUND='black'
POWERLEVEL9K_VCS_UNTRACKED_BACKGROUND='yellow'
POWERLEVEL9K_VCS_MODIFIED_FOREGROUND='white'
POWERLEVEL9K_VCS_MODIFIED_BACKGROUND='black'
POWERLEVEL9K_VCS_UNTRACKED_ICON='\u25CF'
POWERLEVEL9K_VCS_UNSTAGED_ICON='\u00b1'
POWERLEVEL9K_VCS_INCOMING_CHANGES_ICON='\u2193'
POWERLEVEL9K_VCS_OUTGOING_CHANGES_ICON='\u2191'
POWERLEVEL9K_VCS_COMMIT_ICON="\uf417"
POWERLEVEL9K_MULTILINE_FIRST_PROMPT_PREFIX="%F{blue}\u256D\u2500%F{white}"
POWERLEVEL9K_MULTILINE_LAST_PROMPT_PREFIX="%F{blue}\u2570\uf460%F{white} "
POWERLEVEL9K_LEFT_PROMPT_ELEMENTS=(os_icon ssh root_indicator dir vcs)
POWERLEVEL9K_RIGHT_PROMPT_ELEMENTS=(command_execution_time status time)
POWERLEVEL9K_COMMAND_EXECUTION_TIME_THRESHOLD=1
HIST_STAMPS="mm/dd/yyyy"
# some other ideas for powerlevel9k configs are found here.


# some extra plugins for oh-my-zsh to add to the `plugins` property:
plugins=(compleat dircycle dirhistory git git-extras git-flow history history-substring-search last-working-dir sudo wd)
# - compleat: adds completion for commands. read more here.
# - dircycle: adds Ctrl+Shift+Left/Right to cycle through directory history.
# - dirhistory: adds Alt+Up/Down and Alt+Left/Right for going through directories.
# - git-extras: see list here.
# - git-flow: adds completion for `git flow`.
# - history: adds `h` for `history`; also adds `hsi [searchterm]` to search.
# - history-substring-search: fancier autocomplete when hitting up/down on command completion.
# - last-working-dir: saves last working directory for your shell.
# - sudo: hit Escape twice to add `sudo` to command.
# - wd: "warp directory" - creates common directory jump points.


# colorls is great. get that too. make sure ruby is installed first.
gem install colorls
source $(dirname $(gem which colorls))/tab_complete.sh
# add to your .zshrc file:
alias lc='colorls -lA --sd --gs'
alias lct='colorls --tree -A --sd --gs'
  • ergonomics:
    • for your eyes: Night Shift (macOS). you’re gonna be looking at your computer a lot.
    • for your hands: Dvorak + QWERTY ⌘.  → System Preferences → Input Sources → + → Dvorak + QWERTY ⌘
      • Ok, this one isn’t necessary obviously, but if you have the time and plan on typing for your lifetime, you can start thinking ahead to avoid carpal tunnel syndrome.
  • music: nothing in particular to recommend here. just to have some tunes handy for those long coding sessions to get you in the zone 🎶 (basically, i wish WinAmp worked on my Mac)
  • backup: Dropbox. i’m biased obviously since i used to work there. but backup your shit somehow.
  • database gui: Sequel Pro for mySQL and Postico for PostgreSQL.
  • gif/video recording: ⌘-Shift-5. new feature in macOS Mojave — makes it easy to show off your new feature or help show how to reproduce a bug with a video of what’s going on. if you need gif’s try out Kap.
  • screenshot: ⌘-Shift-3 for the whole screen. ⌘-Shift-4 for a partial section of the screen. hot tip! use dropbox to auto-save those screenshots to a special folder (Preferences→Import→Share screenshots using Dropbox).
  • ruler and screen zoom. stealth trick! you can use ⌘-Shift-4 to begin a screenshot but before letting go of your mouse you can hit escape to not finish the screenshot. it’s a super handy ruler on the fly! combine this with Mac’s Ctrl+Scroll to zoom for more accurate measurements. ( → System Preferences → Accessibility → Zoom → Use scroll gesture with modifier keys to zoom). all this is super useful in measuring the many pixels you’ll need to verify on your website. your designer will thank you.
  • et cetera:
    • color picker. Color Note. just something simple to grab colors from time to time.
    • office suite: LibreOffice. for those times you need a doc/presentation/spreadsheet.
    • disk usage: Disk Inventory X. to check your hard disk space visually.

editors

a.k.a. The Holiest of Wars
whereas the above choices might have some contention, i’m sure the Internet will have a conniption with anything i choose below. so…i won’t choose anything in particular 🙂

Options

  • VSCode: great type checking, refactoring. obviously, great TypeScript support.
    • be sure to read their docs on code navigation. super useful.
    • LiveShare is a really useful way to do pair programming.
    • FiraCode is a great coding font that has fancy programming ligatures.
    • you only need to know about the vscode-pets extension. 😸
  • Sublime: speedy and small. great packages.
  • vim: a necessary standby for command line. learning curve is steep. i’m a huge fan (i.e. masochist).
💪 you can do this.⌨️ how-to linux