I've been tinkering around with an optimal work from home setup ever since I went fully remote in January 2020. Over time, I've managed to piece together what works well so that I can hit the ground running should I ever need to migrate to a new machine.
Installs
- Node
- XCode (which includes Git)
- NVM (node version manager)
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.37.2/install.sh | bash
- Homebrew (optional)
Note: Follow this guide instead for M1 Macs/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
- Yarn
If you're getting errors using brew to install yarn, you can do the following:npm install --global yarn
sudo chown -R $USER /usr/local/lib/node_modules npm install --global yarn
Storing your local repos
- Create a folder in your home directory called
~/dev
- Store your repos in there
Terminal
I highly recommend using iTerm and ZSH instead of the default terminal for more customization and an easier workflow. My friend @hipstersmoothie put together this nifty guide to get you started.
My own personal setup includes:
- Option 4 (pure theme)
- The branch is always magenta
typeset -g POWERLEVEL9K_VCS_FOREGROUND=$magenta
- For convenience, you can check out my zshrc and p10k gists
- Assigning a default directory
GitHub
Register an SSH key by following these directions.
To see if this works, try forking a repo and cloning it.
Note: You'll be asked to fill in your username and password. For your password, you need to enter your personal access token, which can be found under Developer Settings in your GitHub profile.
Need a visualization of your branches? Check out GitUp to help manage your workflow.
VS Code
I use Settings Sync, which exports all my settings into a gist that I can import on a new machine. This allows me to pull in all my extensions in one click, which is incredibly useful for myself as well as others who want to copy my config.
Hardware
I use my setup for work & gaming, which means my peripherals are plugged into a USB hub that connects to my monitor. This allows me to switch back and forth by changing the monitor input from HDMI and Thunderbolt.
- Chair: Secretlab TITAN Evo
- Monitor: LG 34" UltraWide
- Microphone: Blue Yeti USB
- Keyboard: Logitech MX Keys Wireless
- Mouse: Razer Basilisk X Hyperspeed Gaming Mouse
For gaming:
- Keyboard: Drop Ctrl Mechanical Keyboard
- Headset: Logitech G733 Lightspeed Gaming Headset
Software
I tinker with a lot of different apps, but here's a list of common ones I use:
- Terminal: iTerm2
- Design: Figma
- 3D: Blender
- Video clips: Loom
- Code: VS Code
- Component docs: Storybook
- Project planning: GitHub projects
Common Projects
Here are a few projects that I typically clone because I've either maintained, contributed towards, or been an advocate:
- Release management: Auto
- Design systems environments: Design Systems CLI
- PostCSS: PostCSS-Themed
- Storybook tests: Proof
- Design tokens: Style Dictionary
- Docs: Doc Blocks
- A11y: Accessibility Snippets
- ES Lint: No Explicit Type Exports