TODO plus plus

With VS Code, Mermaid gantt, and Apexcharts

18 Apr 2021

I like the idea of keeping a todo list as an aspect of my personal time management, a topic we all have varying methods of tackling. Keeping a todo list might seem a bit of a chore, but doing so puts tasks onto the list, rather than having them and their accompanying stress on my mind. And, getting in the habit of checking things off the list is quite enjoyable, especially when you take a moment to look back at all you’ve accomplished.

I’m always open to new ideas for this kind of thing, but I’ve realized that whatever I use, it’s gotta be quick and painless for data entry and have useful history and reporting features for later evaluation.

For a long time, I’d been using just a plain text file to track things, take notes, etc. A team lead turned me onto that idea back when we were using the XEDIT text editor on System/390 VM. What I like about a plain text file is that it’s easier to jot down a note than to use Microsoft Project or some other slow-loading app, where you’d perform four or five actions just to make a quick entry. One downside to a text file, however, is that it can get unwieldy if you don’t take the time to organize and prune the thing. Going back through your history can be a challenge, too.


I was so happy to discover the PlainTasks package for the SublimeText 3 editor. That’s what I had been using up until last year and I loved it. It’s just a text file, too, but by using just a few keystrokes and annotations it becomes a nifty time management app.

Ctrl+I to insert a new entry, with optional priority, scheduling, and custom @tags. When I complete a task, a Ctrl+D provides a sense of satisfaction with a checkmark and @done tag with a date. Because I can add custom tags, I could add a @woot tag to capture significant achievements and filter on that tag to later see just that list. And it definitely feels good at the end of the week to move those todos to a file that I can use when reporting status to management.

PlainTasks worked okay for me for quite a while, but there were a couple of drawbacks: visualizing the time it takes to complete tasks and capturing groupings of accomplishments in a more automated way. (It can archive automatically, but it ends up in one long list, which is why I hadn’t used it then.)

Time trackers and other methods

When working as a tech writer, I had many deadlines and relied on the Gantt chart view. I used Microsoft Project and later the wonderfully FOSS GanttProject. But you can’t make accurate time estimates in the Gantt chart without knowing how much time it takes you to do X, Y, and Z! I was happy when my friend Patrick introduced me to a program he wrote called WorkSpy that does just that. He used it for tracking his hours when he did contract work. It’s so easy to use. With one click it counts away and tracks the time for a task, and when you click to another project it tracks the time spent there. Simple.

I used his nifty tool for many years, and because I loved jotting down notes in text files, I extended it to associate notes with tasks, notes I could use for my status reports. But, even this kind of note taking became a bit cumbersome compared to quickly jotting a line or two in a text file, such as during a meeting when things come up. And, after a while as I developed a gut feeling about how long it takes me to do certain tasks, I rarely needed a time tracker. But, I’d still recommend Patrick’s tool when starting unfamiliar projects or tracking hours for accounting purposes.

My search continued for an easy method of personal time management:

  • I tried tracking todos with Github issues. But even with a script that uses the API from the command line, it was too much overhead compared with a plain text file.
  • I’ve recently learned about Emacs org-mode, which might be the inspiration of things like PlainTasks, and far more functional. But no way am I going down that road of relearning a ga-zillion Emacs keyboard shortcuts. 🤡
  • I looked at Obsidian, the Zettelkasten method, and a little app called jrnl, all nifty tools for working with text files. These are great for keeping and searching a journal or other notes, but aren’t quite task management.


For tasks/todos, I kept coming back to PlainTasks. Even when I started using VS Code as my primary editor, I’d keep Sublime Text around to view PlainTasks. That is, until I discovered the TODO Plus extension. It doesn’t have all the features of PlainTasks in SublimeText, but it has the ones I care about and a couple I didn’t know I needed.

As a plain text file, this method still suffers from the same two drawbacks as before. No visualization of the upcoming tasks or of the archive. So, because I wasn’t willing to give up the speed of a text file, I decided all it needed was a different view into it. This is when I chose to write hqtodo, a single-page web app that uses the TODO+ text file as its backend data source.

Mermaid and Apexcharts visualizations FTW!

The video and hqtodo README file describes how it works, but it essentially displays three things:

  • The in-progress and backlogged todos that remain. A Mermaid gantt chart is used for this.
  • The archived todos in two groupings: by week and by tag (project category).
  • A graph of the cumulative tally of the time spent on completed tasks (where a quick glance at the slope shows my velocity). An Apexcharts area chart is used for this.

The future

If my job were more mobile, less time spent at a single desktop, a simple text file might not be the best choice. Logging into a web app might be the way to go such as using a bot on Slack or setting up a Getting Things Done todo list on Notion because wherever I can log in, be it a phone or laptop, there it is. However, I did discover a decent file editor for Android from which I might be able to sync and edit the same TODO file as on my desktop. But, no phone app necessary for me, unless I start doing more DIY home projects, which just ain’t my thing.