Skip to content

Tools I used to build Virga

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.