TL;DR – You can customize the Touch Bar with custom actions, including per app buttons, button groups, icons and even emojis, and it’s awesome. Actual examples and config file below.
I consider myself an early adopter.
Early adopters, if you haven’t met any, are these weird people, who are willing to Beta test software, who are willing to overlook bugs and inconsistencies, are willing to try our a technology in its first iteration.
And this is what the Touch Bar currently is, a first iteration, of what I consider might be a great feature some day.
A lot of apple enthusiasts consider themselves early adopters, as long as they just pre-order a new iPhone, a new mac, or the air pods. But to be an early adopter also means you try to see the benefits of a new technology, it’s potential benefits, not just the ones Apple publishes in their marketing.
To that extent, I believe the new Touch Bar has a LOT of potentials. Unfortunately, it takes a while to get there. So let’s try to imagine how it might be useful even now, shall we?
Current touch bar has integrations in most MacOS native apps. As I write this post in Notes, my Touch Bar looks like this:
Virtually every other native app has an integration, including some hidden ones like the screenshot one:
But it’s not enough! (also it’s all gray and boring and looks the same). Fortunately for us, one of the best “Tinkerer” apps for the mac has an integration for Better Touch Tool, and this integration is the focus of this blog post.
I have immense respect for Andreas Hegenberg the developer behind BTT (better touch tool) and when I saw that he announced an Alpha version of BTT that allows me to customize Touch Bar to use all the crazy options BTT allows, I immediately wanted to play around with it!
Setting it up:
First, you’ll need to download the Alpha version of BTT.
Second, I must warn you, it is an Alpha version, it’s going to have bugs, be ready for them. If you do encounter a bug, please report it here https://github.com/fifafu/BetterTouchTool
Widgets
BTT has the concept of widgets, with currently 2 available. Battery and Time. Widgets for the Touch Bar are pretty cool, but according to Apple Design guidelines (https://developer.apple.com/library/content/documentation/UserExperience/Conceptual/OSXHIGuidelines/AbouttheTouchBar.html) for the Touch Bar it shouldn’t be an extension of the screen, and fortunately, when you add a widget, BTT allows you to enable an action as well.
I’ve decided to add the Calendar widget, and have it open my Fantastical app on tap (with a custom shortcut I’ve previously set up for Fantastical)
I’ve also added a custom button for Screenshots, with BTTs custom screenshot feature, which allows me to both save a file to the file system AND have it in my clipboard! In addition, it immediately shows the “selected portion” option of the screenshot tool, which is let’s admit, a pretty convoluted shortcut (CMD+CTRL+shift+4)
The way to add the screenshot was fairly simple. I’ve found an awesome screenshot icon in the Noun project, hit the “+ TouchBar button” option in BTT, named it screenshot, and selected the custom screenshot action from the action dropdown.
This is nice… but… what else can we do, something that might actually be useful?
I wanted to add some window management tools to the TouchBar. Since I rarely work in fullscreen (it barely makes sense on a 27″ screen), window management (moving, resizing, snapping to edges) is quite common during my workflow. BTT has always been awesome at all of this already, but with TouchBar we can take it to the next level as they say.
I wanted the window management buttons to be easily accessible but hidden, so I won’t hit them by mistake, and there’s an option to show different buttons based on different meta keys hit which is pretty cool.
Create a new button
Give it a name and choose an Icon (pro-tip: find icons in the Noun project and drag them onto the “Add Icon” graphic, the provided icons are so-so)
If you want to customize the appearance of your button, hit Advanced Button Configuration
And you’ll be able to edit the button color, give it some extra padding, and make it show up only when certain meta keys are pressed, CTRL in my case. After you hit save, choose a predefined action, for instance, Maximize window left. (or any other window management feature)
After a meddling with it some more, choosing different options, this is what I ended up with, and it all just appears when I hold the ctrl key
I can now move a window to the left half, right half, center the window (I chose “center window on next monitor” for this), maximize, and most importantly, restore the window to its original size.
Uh Oh!
You might have already tried this, and notice that your custom Touch Bar doesn’t look like screenshots, but looks something like this:
Your control strip on the right might look different, but you’ll probably also have a BTT icon there (BTT injects it)
On the left, though, you can see that the ESC is now not the leftmost icon! Which will drive you insane (trust me) if you have any muscle memory associated with the ESC button (you probably do).
According to Andreas, that’s a system limitation. So let’s try to see what we can do about that. Obviously, we want the ESC key in the leftmost position.
Hit the somewhat hidden “General Touch Bar Settings” button on the top right
And edit the settings like so:
The most important part is to disable the “Show MacOS Control Strip”, which might seem counterintuitive, but it allows BTT to take over, and place the ESC in its rightful left-most place!
Worry not! You can still access the Control Strip by holding the FN key if you set the following setting up in Apple Keyboard settings:
Now you can expand the control strip while holding the FN key, but what about specific App Controls (Safari, Notes etc’)?
Currently, you wouldn’t see them at all, you will only see are your custom buttons from BTT
The easiest way to fix that I’ve found so far is to add a custom shortcut in the “keyboard” section of BTT (basically allows you to map every key to almost every other key, action etc’)
And have the FN key toggle the App Controls and the BTT custom buttons bar.
To set it up, I went to the Keyboard tab, and added a new key sequence for the FN key, and mapped it to the custom “Toggle BetterTouchTool Touch Bar” 
Thus, holding the FN key shows me the expanded control strip (Brightness, volume, all that jazz)
Releasing it will show me App controls if those are available (Notes, Safari etc’)
If I want to see my trusty custom BTT TouchBar actions, I can hit FN again and viola! They appear (with the ESC button in its correct place)
Now the real fun begins!
Two of my most used apps at work are Slack and Pycharm ❤️
Slack
By far the most used shortcut I use in Slack is the Quick Switcher. If you’ve never used it, you’re about to be delighted. Quick switcher is like spotlight for Slack, enabling you to type any name, channel, DM, or group, and immediately switch to it. Its shortcut is CMD+K which is not that hard to remember, but we’re in the realm of context with the Touch Bar, so let’s try to add it to Slack shall we?
First, I added Slack in the “Select Application” part of BTTm on the left side (hit the + sign at the bottom)
Every TouchBar button you add when this App is selected will be shown in the context of Slack only, and will not appear anywhere else (I call it the contextual hide and seek!)
Next, I hit the +TouchButton button and chose the following settings. which is just a mapping to a shortcut.
To make it look nicer, I went into the Advanced settings, chose a color, and chose to give it some more padding. I’ve also found an icon in the Noun project that looks fairly similar to that of Slack and dragged that sucker on the Add Icon graphic you see above. (the icon set I found is by Gregor Črešnar HERE)
Another feature of Slack I use a lot is the “All Unreads”, which lets me check out all unread messages across channels and DMs and sort through ’em quickly, and I thought I’d add that one as well. To make thing slightly easier, you can select an action in BTT, and then hit cmd+C to copy and cmd+P to paste it. And then all that’s left is to edit its icon and shortcut and color and description.
And now we’ve made a love child of Slack and Touch Bar and it’s glorious!
Editors, IDEs etc’
The moment I saw the Touch Bar during the apple event, I’ve sent this tweet asking JetBrains to implement TouchBar support in their IDEs!
Now we don’t have to wait for them, we can do this ourselves with BTT.
I use Pycharm pretty heavily, so I’ve selected its Application in BTT, and now it’s time to add some buttons. Since TouchBar real-estate is not that huge, and PyCharm has thousands of features, shortcuts, and buttons, I’ll just add the ones that I use quite often and are annoying to use. What do I mean by annoying? Well, the debug steps are mapped to the F buttons. Those precious little F buttons that so many Pro users cried about when Apple announced the TouchBar.
Let’s see how TouchBar can improve upon the very old concept of the F buttons? (As I’m actually doing the setup while writing this article, I’ve left it at this point, and came back after a couple of hours of setting it up, the biggest chunk of time was actually digging through icons.jar inside the Pycharm.app, trying to find the exact icons I want to use)
For Pycharm, the main interesting thing to me was obviously the GIT commands, update, commit etc’ and especially the branches command, which doesn’t have a native shortcut. With BTT, you can set up a sequence of commands, so that’s exactly what I did for branches.
In addition, you can add folders of buttons, that’s what I did for the debugger actions, seeing as I’m not always debugging, and those shortcuts mean something else outside of the debug context in Pycharm, so I’ve added a folder of actions, called it debugger, and put it on the right side of the TouchBar.
This is how the final setup looks like in BTT:
The TouchBar now looks like this when I switch to PyCharm:
And the expanded debugger folder:
And voilà, everything is contextual, with icons, works great!
If you made it this far, I have a treat for you. As a prize for reading/ skimming / scrolling through, you can now download my settings from BTT and enjoy the above buttons with your own TouchBar. (including icons)
DOWNLOAD BTT custom Touch Bar icons for Slack and Pycharm and Window management
I assume before you load this, you’ll need to add PyCharm and Slack to the Application sidebar, since it doesn’t look like that setting is exported.
Please let me know on twitter if you found this interesting, helpful or a total bag of uselessness!
If you enjoyed this article, please go buy BTT and donate some money towards its development.
Disclaimers :
I am not affiliated with BTT, I just love it very much!
The icons were taken from the community edition of PyCharm which is distributed freely.