How to Make Touch Bar Actually Useful for Web Developers

Written by: Michał Matyas
4 min read

This article was originally published on Nerdblog by Michal Matyas, and with his permission, we are sharing it here for Codeship readers.

When the new Macbooks with Touch Bar were released in 2016, I was struggling. The new Touch Bar was pretty useless in my workflow. I kept accidentally touching action keys and missed good ol’ ESC. It’s been over half a year now and barely anything changed in this area - most of the applications I use daily either don’t support Touch Bar or just add a few gimmicky buttons to cross out a TODO task called “support latest MBP”. This situation sucked and I wanted to do something about it and I finally found a way how.

Everything in this blog post is possible because of a great tool called BetterTouchTool. It’s an amazing piece of software and the author is a decent human being so spare those extra few bucks and buy it, even if it's just to support fellow developers (I have no connection to this person and this is not a paid advertisement).

There are two things that I’ve done to make my Touch Bar a bit better but the idea is generic enough that anyone can modify it to suit their needs: I’ve added Webpack and Codeship buttons that show me the status of both my development build and CI tests.\_src=twsrc%5Etfw&ref\

We are going to begin with configuring BTT, to make it take over our Touch Bar and replace it with its own menu. After installing BTT, open it and go to Gestures > Touch Bar. Click “General Touch Bar Settings” and configure it like this:

This will completely replace the Touch Bar and make BTT control it system-wide. You might be tempted to leave Show MacOS Control Strip checked but this will cause an ugly close button to show up on the left side of Esc, moving the key to the right and screwing with your muscle memory. If that’s OK with you then sure, go ahead but it was personally driving me crazy ;).

We are now ready to create our first Widget. Unfortunately, since the Touch Bar support is new, our selection of widgets is really limited. I wish there was a more universal and nice looking way of adding custom hacks but since there is not, we’re going to use Run Apple Script and Show Return Value to do our bidding.

For starters, we are going to need a simple script that will ping Codeship and return status. Since I don’t really enjoy writing AppleScript, I’ve decided to side-step the problem by writing a Ruby script instead. The script is available as gist, and it was written in a way that will work with system Ruby. It should also be pretty straightforward to set up. Just copy everything to a file on your hard drive and insert your API key in the 6th line. It does very simple caching to make sure we are not hitting Codeship servers any more than we need to.

After you’ve configured and dropped the script somewhere in your home directory, we need to configure it properly in BTT. Go back to Touch Bar section of Gestures, click + Widget, select previously mentioned Run Apple Script and Show Return Value and click Advanced Configuration. In Name type anything (might be Codeship), copy script as return do shell script "/usr/bin/ruby /Users/me/codeship.rb" (or wherever you’ve put the script) and set the script to execute every 1s. You can also add the Codeship logo and set Alternate color - on the right, under Result just type ‘failed’ as the regex and set the icon and color as you wish.

And that’s it!

Like I mentioned, the general idea is very simple. I’ve used the same technique to add webpack status as well: first I installed bitbar-webpack-status-plugin (I could’ve written my own but judging by the amount of code, I’d just double someone’s work), then I wrote a tiny script that translates -1/0/1 to human readable messages and voila!

Let me know if you find any other good tips and hacks that could be applied with this in comments.

Stay up to date

We'll never share your email address and you can opt out at any time, we promise.