Tools I used to build Virga

Yuya Saito 4th March 2020

Hardware: MacBook #

First off, I’m Apple guy so tools I’ll Introduce here are heavily leaning to that direction.

My current is MacBook (Retina, 12-inch, 2017).
I don’t own an external keyboard nor monitor.

Editor: IntellJ IDEA & iA Writer #

I used be a Vimmer, but I’ve been using IntellJ IDEA for 4 or 5 years now for coding.
And I use iA Writer for any other writing which is where Virga’s inspiration comes from by the way.
I love iA Writer. I’ve been using it since it’s released.

I’ve been looking for very lightweight editor for coding. IntellJ IDEA is too heavy for small changes.
Xi editor looks very promising, so I’m looking forward its progress.

Terminal: iTerm2 #

iTerm2 is my choice for a Terminal app. I’ve tried Hyper for while, but I went back to iTerm2.
My default shell is now fish which I’ve made the switch after I upgrade to Catalina.

I have so many command line tools with me, so I’m not going to share them all here, but I’ll list ones I use in developing websites.

direnv: Load/unload environment variables based on $PWD
jq: Lightweight and flexible command-line JSON processor
lynx: Text-based web browser
bat: Clone of cat(1) with syntax highlighting and Git integration
z: Tracks most-used directories to make cd smarter
gh: GitHub CLI
fnm: Fast and simple Node.js version manager
tidy-html5: Granddaddy of HTML tools, with support for modern standards
ripgrep: Search tool like grep and The Silver Searcher
imageoptim-cli: Automates ImageOptim, ImageAlpha, and JPEGmini for Mac to make
batch optimisation of images part of your automated build process
npm-check-updates: Find newer versions of dependencies than what your package.json or bower.json allows

Other apps #

I don’t do UI design but when I need to do some vector related stuff, I use Sketch.

I like color. So I have Sip and Spectrum. The former is a color picker app though I love its color contrast ability for it. The latter is a color scheme design app.

My default browser is Firefox Developer Edition.
I’ve made the switch from Chrome from this year, and I only go back to Chrome when I need to do some serious performance audit.

Web Tools #

ColorBox by Lyft Design: Color scheme for Virga is come from this tool
Whimsical: Flowcharts、wireframes, sticky notes and mind maps tool. I use this almost everyday

There are other tools I use at work regularly but for building Virga, I use those 2 tools.