Uses
A somewhat comprehensive list of tools, apps, hardware, and more that I use on a daily basis to design and code things. And yeah, that is a Johnny Mnemonic GIF in the background.
Development
- I use Visual Studio Code as my text editor, with the Atom One Dark theme and Operator Mono as my typeface of choice.
- Google Chrome is my main browser for both development and general use.
- Angular and React are my front end Javascript library of choice. The component-centric mental model is the first thing that truly made sense to me as a designer.
- For CSS I’ve used a myriad pre-processors and css-in-js solutions like styled-components, but these days I’m using vanilla CSS with PostCSS to get upcoming CSS features today.
- For Javascript animations I use Popmotion Pure 8, it’s a great way to add spring animations to three.js. All other animations are CSS with React Transition Group for enter/exit transitions.
- For building and testing UI components in isolation I use Storybook. Check out the storybook for this website.
Design
- Figma is my primary tool for UI design these days. Made the switch from Sketch in 2020 and haven’t looked back.
- For image manipulation and processing I use Adobe Photoshop. When working with vectors, I use Adobe Illustrator.
- Any motion graphics I create are created in Adobe After Effects. So far I haven’t found a non-Adobe product that’s as good. If anyone has suggestions please message me.
Hardware
| Laptop | 2020 Macbook Pro M1 |
| CPU | M1 Chip |
| GPU | 8 Cores Apple M1 GPU |
| Memory | 16GB (M1 chip memory) |
| Monitor | LG 27" 4K UHD with HDR (27UK650-W) |
| Keyboard | Logitech MX Keys |
| Mouse | Logitech MX Master 3 |
| Headphones | Apple Airpods Pro |
| Meetings Headphones | Jabra Evolve2 65 |
| Meetings Webcam | Logitech C920s |