In this post, I’ll give you a quick rundown of how to create a Menu Bar Extra for your macOS app. The Apple Dev Center docs explain all of this, but it took me a little while to piece it all together, so here’s a single document with the whole process in one place. I saw a simple application for the menubar was to open links using your browser, I want to create something similar to that. BitBar is an application on GitHub that can 'Put anything in your Mac OS X menu bar'. It runs shell or other executable scripts. Simple Mac OS development app.
- How To Create A Simple Mac Menu Bar Applications Change Icon
- How To Create A Simple Mac Menu Bar Apps
In case you don’t already know, I like Netlify. And I build on itquitea lot.
A while back, I was scrolling through my twitter feed and saw this project tweeted about by Phil Hawksworth:
- List of menu bar apps that make your life easier ☰ menubar. About For Members. Best Mac Menu Bar Apps. List of menu bar apps that make your life easier. Prevents your Mac from sleeping. Beepify is simple to install and really handy to use. In coffee shops, school library, airport and even in the office when you.
- Some apps give the option to remove icons from the top bar on Mac in their settings: chosen app Preferences. However, a lot of apps won’t. However, a lot of apps won’t. To fully customize which icons appear in the menu bar, you should use a third-party app like Bartender.
I really like this. I've been meaning to make my own dashboard showing the status any of my sites that I care about by just including a list of @Netlify deploy badges.
But @lekoarts_de beat me to it with this nice example.
Similar to Phil, a tool of some sort showing the build status of all my sites on Netlify was a fun project idea I’d had in the back of my mind for a couple months. It was cool to see somebody else execute on it so beautifully.
Not only can you checkout a live demo of the project, but you can also read/view/fork the code behind it to get your own dashboard! So why try and make anything better than that? Beat maker free mac download. Can i safely download ableton instruments.
![How To Create A Simple Mac Menu Bar App How To Create A Simple Mac Menu Bar App](/uploads/1/3/4/0/134068140/408715054.jpg)
Well I tried to make something a little different. If you’re a Mac user, what if you had a menu bar app that could show you similar information? Namely, what’s the status of the latest build for my sites on Netlify?
That’s what I set out to do.
A Netlify Menu Bar App for Mac
First of all, it’s worth noting that I built this on top of BitBar. So what does it look like?
How To Create A Simple Mac Menu Bar Applications Change Icon
By default you get a nice little Netlify logo in your menu bar.
What’s neat is BitBar has instructions on how to build your menu bar app so it accommodates things like retina screens and dark mode.
BitBar also has a very simple API for indicating how often your script should run: via the file name! I set mine to run every minute (but I could make it every 30, 15, or 5 seconds if I wanted). Each time it runs, it asks Netlify for all my sites and the latest build status of each. If there’s a build in progress (or one failed), I get a number next to the menu bar icon, a kind of notification if you will.
When I click on the menu bar app, I get a native dropdown which displays all my sites (I decided to group them by domain) along with a little status light indicator to show the build status:
- Green: latest build was successful
- Yellow: latest build is in progress
- Red: latest build failed
- Gray: no build pipeline applicable (for me, these were static sites I dragged and dropped for deployment through Netlify’s UI)
Clicking on any of the sites listed in the dropdown will take you to that particular site in Netlify.
So putting it all together, you get something like this:
What’s really neat about is how flexible BitBar actually is. If you wanted, you have each site be its own flyout menu in the menu bar and have it display all kinds of meta info—build status, build time, site url, netlify site admin url, etc—you could! The sky’s the limit.
Under the Hood
So how does all of this work exactly? Good question.
Because I wanted a native menu bar app for my Netlify sites, I thought for a second about jumping into Xcode. But I just didn’t have the time for that.
“There’s got to be a way to write JavaScript for OS X” I thought, “like an Electron app but for the Mac’s menubar.” Then I found BitBar: an app that let’s you “put the output from any script or program in your Mac OS X Menu Bar”. Boom! Program to analyze mp3 bpm. Precisely what I was looking for. “Netlify has an API” I thought, “I bet I could write a node script that talked to Netlify and translated the response to something BitBar expects in order to render a menu bar app!” A little while later and I had exactly what I wanted. Here’s how it works.
First you have to install BitBar on your Mac. Once installed, you’ll get a directory where you can put individual scripts (of all kinds might I add, like PHP, JavaScript, Ruby, Go, etc). Those scripts get turned into individual menu bar apps.
In my case, I have a
netlify.1m.js
file in my BitBar scripts folder (the 1m
in the filename tells bitbar how often to refresh my script, in this case every 1 minute). In addition, since my script is JavaScript (node) I have to put a shebang at the front of my file denoting where my node executable is.So, to get started, you have a file like
myFile.5m.js
which looks like this:BitBar has an API you can work with to
console.log()
a string of text which will render your menu bar app. There’s also a bitbar module that allows to construct your bitbar app with a nice API vs. concatenating a big string. While it’s a cool idea, I wanted to write my BitBar script such that it had zero dependencies. So I didn’t use that module (or any npm modules for that matter).So what does my script look like? Well my script is pretty custom to my setup in Netlify. I grouped my Netlify sites in the menu bar based on their individual characteristics and what made sense to me, which may not make sense to you.
So, instead of just giving you my script, I put together this simple script to get you started. It has zero dependencies and just calls the Netlify API to pull all your sites and the latest build for each of those sites.
Note: this script accesses the Netlify API and therefore requires an access token. You’ll have to follow their instructions to get one and put in the script below where it says
YOUR_TOKEN_HERE
.Second Note: this script probably has issues. I am imperfect and so is my code. I may not even be using the Netlify API correctly. If for any reason you find an issue with this script and want to notify me of it, feel free to reach out. This is not meant to be a product. It’s meant to be a hacky starting point for your use in building things that are much better.
Update 2019-10-16
The friendly @kitopastorino from Netlify reached out to me on twitter with a few suggestions for my script:
![Change Change](/uploads/1/3/4/0/134068140/133352282.jpg)
How To Create A Simple Mac Menu Bar Apps
Hey Jim! I'm Kito from Netlify! Saw your post about a macOs Menu app..and loved it!
I was looking at the code and noticed some quick improvements can be done to improve the performance of the app (mostly using pagination in the builds endpoint..to only get one build per site)
He then sent me a gist with his suggested changes which I’ve incorporated into the script in this blog post. The thrust of the changes, as Kito mentioned, dealt with how to talk to the Netlify API. No one better than a Netlify developer to suggest those kinds of changes!