Making a Countdown Widget with Übersicht and NodeJS
A friend of mine is struggling with her time in medical school. While the adage is true, that the days are long, but the years are short, it still looks and feels like it may never end, a constant stream of exams and all-nighters.
We discussed this over coffee, and I had an idea. A small countdown widget on her Desktop would do three things: show her how far she’d come, show her how little was left, and give her a reference as to how long this was.
The one, only, best, never leave home without it, solution for widgets on MacOS is Übersicht by Felix Hageloh. There are dozens of great widgets in the Gallery, but I wanted something different. Plus, it had to work in a number of environments: as a login item, whenever she opened her Terminal to run code for her thesis, on the desktop, and on the front page of her Intranet site.
I made her give me her laptop, installed Übersicht, and wrote a short JavaScript program. Übersicht can do its own programmatic work, but I didn’t want to repeat myself, so I made it an exec call. Here’s how it all came together:
Install Übersicht, then click Menu Bar item, “Show Widgets Folder”.
In that folder, create a new widget. I named mine “days_until.jsx”
import { css } from "uebersicht";
export const refreshFrequency = 5000000;
export const command = "node ~/until_done2.js"
export const className = {
bottom: 20,
right: 30,
color: '#fff',
backgroundColor: "rgba(200, 200, 200, 0.3)",
border: "2px solid #333",
borderRadius: "6px",
padding: "15px",
boxSizing: "border-box",
fontFamily: "sans-serif",
fontSize: '18px',
}I kept refreshFrequency as something I hoped would trigger about once a day. I am a doctor, Jim, not an engineer, I can’t Math. Adjust that to something that refreshes the widget once a day or so.
Next up, the actual code. Again, all this could have been done inside Übersicht, but our Intranet allows us to run some JavaScript to have personalized info boxes (the security implications are scary, but hey, we’re an NGO, we are supposed to be care- and reckless).
/* A simple JavaScript program to calculate days since and days until.
* The neat little addition here is to add a third variable: what date
* was it if you went back as many days as you'd have to go forward
* to the end date?
*
* We do this, so you have a visceral idea, how much longer away something
* is. "Oh, this was that day? Well, that's not that long ago, I guess it
* won't be long until I am done."
*/
/* important: January is 0, not 1 */
var futureDate = new Date(2025, 4, 15);
var currentDate = new Date();
var startDate = new Date(2019, 09, 3);
var daysUntilFutureDate = Math.ceil((futureDate - currentDate) / (1000 * 60 * 60 * 24));
var daysSinceStartDate = Math.ceil((currentDate-startDate) / (1000 * 60 * 60 * 24));
var weeksUntilFutureDate = Math.ceil(daysUntilFutureDate / 7);
var pastDate = new Date(currentDate - daysUntilFutureDate * 24 * 60 * 60 * 1000);
var thatDate = pastDate.toLocaleDateString(); // yes, I know, but I like to be contrarian.
console.log("This is day "+daysSinceStartDate+" in med school. There are " + daysUntilFutureDate + " days (" + weeksUntilFutureDate + " weeks) left. " + daysUntilFutureDate + " days ago was " + thatDate+".");I’ve changed the dates, but this is the simple approach I took over coffee. If I’d been on my own computer with something better than vanilla vi and RStudio at my disposition[1], I might have done it differently, but I don’t code so well when angry. Heck, I code like shit when I am not.
And that’s literally it. I didn’t write this to show off my non-existent l33t haxx0r skillz, but to point a finger at Übersicht. It’s so easy, even a medic can use it with a laptop balanced on his knees in a Turkish café, drinking coffee and listening to Madonna covers in Turkish. Go install it.