Charles Peters UI Engineer

Current Tools & Toolchains

October 03, 2017

I always enjoy these types of posts where the author exhaustively documents the tools they use and why they enjoy it so much or whether they're on the fence about it. There are blogs dedicated to this whole concept, eg. the Sweet Setup or Tools and Toys. We get attached to our tools, more often than not we spend 6+ hours a day in front a glowing rectangle interacting with the tools we choose in exchange of our livelihoods.

Main Workflow

Caprine is a standalone Messenger.com wrapper with native macOS notification support. Switching to Android, there are dozens of Google-centric chat options, but Messenger has become my preferred communication platform. Plus there's a transparent dark mode for Caprine which is just 🔥🔥🔥.*

Hyper is a terminal built in React and Redux and is comparable to Atom Editor. I flit between this and iTerm 2 pretty frequently. I spend most of my time using a terminal, but Hyper is just special; it's so customizable and extensible with a language that I can write: JavaScript. Hyper sometimes freezes and chokes, but overall it's pretty stable. It's still awesome, maybe it's the novelty of an HTML/CSS/JavaScript terminal or the fact I started playing with it when it was still called Hyperterm. I'm hoping it will perform a little better in future and 2.0 will kick some serious ass ⚡️💕😀.*

Now is an instant deployment tool that rivals any I've ever used. Simply running the command now will set off a deploy that uses a project's package.json to build your application, and your app can be static or Node.js based or use Docker. It's incredibly fast and every deployment is immutable so if something is corrupt with your current deployment, going back is very simple. You can buy domains from now and manage your aliases for deployments. Plus with the desktop application you can drag and drop files and folders onto the menubar icon and get an instant deployment of them as well.👍*

Atom is a text editor / IDE. I have used Atom since its beginning in February 2014. Back then Atom was an alternative to Coda 2, and I wrote about customizing it. Since then, I jumped between Atom and Vim full time. One of the major advantages it has for me right now over Vim, is the Git integration, the Flow plugins and the Find in Project search. I work in a large monorepo at work and that feature alone is so useful. With vim-mode-plus working in Atom, all the muscle memory of Vim key-bindings haven't really gone to waste 💻⌨️🛠💎🌈.*

Sketch is a vector design tool. I like it and Figma is cool too, but I'm more of a creature of habit. I wrote a long time ago about how I use Sketch as a sideline to designing in the browser. Now that I've transitioned to more of a front-end role, I find Sketch really valuable for communicating initial intention with designers and having a point of reference ✒️📐💗.

Kaleidoscope is a really advanced file diffing/comparison tool, When I was at Black Pixel, I used this tool almost everyday. Lately, I've been finding it useful especially for negotiating between drafts or doing a comparison between two different repositories🔭🌈⚡️.

Tweetbot for Twitter because some habits are just hard to break. I have used some version of Tweetbot since 2011. Some habits just die hard. Tweetbot at the time of its initial release had lots of awesome extensions like Read Later support and inlined images from Instagram and drafted messages. I anxiously waited for their macOS application to be released and was an early beta tester. But as the years went on, it became a very aesthetic alternative to Twitter's main UI, with features that were marginal improvements over the feature set Twitter offered (kinda the best you can expect from a third-party tool). Lately, I still use Tweetbot for Mac, but in the mobile side of things I use Twitter Lite or Fenix for Android 🦅🐦📲.

Vim is my tool for writing code. Vim is more of an ethic than encapsulated application. Vim has a very ubiquitous feature set (modal text editing, registers, buffers) with specific key-bindings. I want to make the ergonomics of typing code its own post. Anyway, when I want a specific desktop application for Vim, I tend to reach for VimR.

iA Writer I really like writing on the train and on my phone. I've used iA Writer for 3 years now and its feature set is pretty solid. It has fantastic markdown support, has support for Google Drive and includes a Night Mode. The main reason I love working with it is that it has no toolbar or any distraction and it places a huge intention on flow.

Menubar Utilities

Lungo is a replacement for the long-lived Caffeine. It prevents your Mac from dimming or falling asleep. Lungo has a retina icon (Caffeine stopped getting updated in 2009, I think) and app icon is just nice ⏰☕️.

Battery Indicator is an alternative the native battery indicator on macOS. The one thing that it does is give you more feedback about your battery life at a glance 🔋🔌.

Spectacle is a window management tool. It lets you move around the windows that you have open to given presets and across different displays (that's the feature that sold me on this tool). I used to use Hammerspoon (and then Phoenix.js), which I liked a lot but required a lot of configuration and struggled to easily configure moving windows between different displays.

Kap for screen capturing and GIF creation. It's a great a menubar app from some of the folks who work on Hyper. It replaces liceCAP for me and exports to video file or GIF.*

Equipment

Services & Honorable Mentions

I tend to use Pocket Casts for podcasts and that's becoming a pretty infrequent occasion. I use GitHub of course. Slack is a regular application I use, I'm just pretty tired of it. I am really coming to enjoy Spectrum for online community forums. Talky.io is great for video calls. I use Instapaper for collecting posts I want to read but amass only to forget about for months at a time.

Online IDEs are always up in the air for me. Lately, I tend to use CodeSandbox for front-end demos and Glitch for Node.js demos. CodeSandbox has so much potential, it's essentially CodePen Projects hopped up on steroids with a magic amulet. The fact I can have an instance of create-react-app in my browser immediately and have that instance be sharable is a really powerful too.

Oh, my partner and I use Project Fi instead of AT&T. It's essentially the same quality at half the price. Referral code: https://g.co/fi/r/P34ACN.

About Me

Charles is a UI Engineer, living and working in the Seattle area.Find Out More