1<!doctype html><html lang=en><head><meta charset=utf-8><meta name=viewport content="width=device-width,initial-scale=1"><meta name=description content="With VS Code, Mermaid gantt, and Apexcharts"><title>arkadianriver</title><link rel="shortcut icon" href=/favicon.ico type=image/x-icon><link rel=icon href=/favicon.ico type=image/x-icon><meta property="og:title" content="TODO plus plus"><meta property="og:description" content="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."><meta property="og:type" content="article"><meta property="og:url" content="https://arkadianriver.com/posts/hqtodo/"><meta property="og:image" content="https://arkadianriver.com/images/flickr-howardignatius-14649925571.jpg"><meta property="article:section" content="posts"><meta property="article:published_time" content="2021-04-18T14:00:00-08:00"><meta property="article:modified_time" content="2021-04-18T14:00:00-08:00"><meta property="og:site_name" content="arkadianriver"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://arkadianriver.com/images/flickr-howardignatius-14649925571.jpg"><meta name=twitter:title content="TODO plus plus"><meta name=twitter:description content="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.">
vendor: 63 bytes, line 1
1<script async src="https://www.googletagmanager.com/gtag/js?id=
1G-0F5CGJQ8NF
vendor: 12 bytes, line 1
1"></script>
2<script>var doNotTrack=!1;if(!doNotTrack){window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments)}gtag("js",new Date),gtag("config","G-0F5CGJQ8NF",{anonymize_ip:!1})}</script>
2<link rel=stylesheet href=https://arkadianriver.com/css/colors/default.min.css><link rel=stylesheet href=https://arkadianriver.com/css/style.min.css><link rel=stylesheet href=https://arkadianriver.com/css/codecopy.min.css>
2<script src=https://arkadianriver.com/js/sunmoon.min.js></script>
vendor: 1 bytes, line 2
2
3<script src=https://arkadianriver.com/js/htmx.min.min.js></script>
vendor: 1 bytes, line 3
3
4<script src=https://arkadianriver.com/js/script.min.js defer></script>
vendor: 1 bytes, line 4
4
5<script src=/js/codecopy.min.js defer></script>
5</head><body hx-boost=true hx-select=#main hx-target=#main hx-swap="outerHTML show:top"><header><h1><a href=https://arkadianriver.com/>arkadianriver</a></h1><div class=sunmoon><span class=sun-btn onclick=setColorMode()>â</span> 6<span class=moon-btn onclick=setColorMode()>â¾</span></div><nav><a href=https://arkadianriver.com/posts/>Posts</a> / 7<a href=https://arkadianriver.com/works/>Works</a> / 8<a href=https://arkadianriver.com/contact/>Contact</a></nav></header><section class=bgimage style=background-image:url(/images/flickr-howardignatius-14649925571.jpg)></section><main id=main><section class="rounded-block top-block"><h1>TODO plus plus</h1><h2 class=page-subtitle>With VS Code, Mermaid gantt, and Apexcharts</h2><p class=page-date>18 Apr 2021</p><div class=page-content><p>I like the idea of keeping a todo list as an aspect of my personal time management, 9a topic we all have varying methods of tackling. 10Keeping a todo list might seem a bit of a chore, 11but doing so puts tasks onto the list, 12rather than having them and their accompanying stress on my mind. 13And, getting in the habit of checking things <em>off</em> the list 14is quite enjoyable, especially when you take a moment to look 15back at all you’ve accomplished.</p><p>I’m always open to new ideas for this kind of thing, but I’ve realized that whatever I use, 16<strong>it’s gotta be quick and painless for data entry</strong> 17and have useful history and reporting features for later evaluation.</p><p>For a long time, I’d been using just a plain text file to track things, take notes, etc. 18A team lead turned me onto that idea back when we were using 19the XEDIT text editor on System/390 VM. 20What I like about a plain text file is that it’s easier to jot down a note 21than to use Microsoft Project or some other slow-loading app, 22where you’d perform four or five actions just to make a quick entry. 23One downside to a text file, however, is that it can get unwieldy 24if you don’t take the time to organize and prune the thing. 25Going back through your history can be a challenge, too.</p><h2>PlainTasks</h2><p>I was so happy to discover the PlainTasks package for the SublimeText 3 editor. 26That’s what I had been using up until last year and I loved it. It’s just a text file, too, 27but by using just a few keystrokes and annotations 28it becomes a nifty time management app.</p><p><code>Ctrl+I</code> to insert a new entry, with optional priority, scheduling, and custom <code>@tags</code>. 29When I complete a task, a 30<code>Ctrl+D</code> provides a sense of satisfaction with a checkmark 31and <code>@done</code> tag with a date. 32Because I can add custom tags, I could add a <code>@woot</code> tag 33to capture significant achievements 34and filter on that tag to later see just that list. 35And it definitely feels good at the end of the week 36to move those todos to a file that I can use when reporting status to management.</p><p>PlainTasks worked okay for me for quite a while, but there were a couple of drawbacks: 37visualizing the time it takes to complete tasks 38and capturing groupings of accomplishments in a more automated way. 39(It can archive automatically, but it ends up in one long list, 40which is why I hadn’t used it then.)</p><h2>Time trackers and other methods</h2><p>When working as a tech writer, I had many deadlines 41and relied on the Gantt chart view. 42I used Microsoft Project and later the wonderfully FOSS GanttProject. 43But you can’t make accurate time estimates in the Gantt chart 44without knowing how much time it takes you to do X, Y, and Z! 45I was happy when my friend Patrick introduced me to a program he wrote called 46<a href=http://www.dantressangle.com/timetracker.html target=_blank rel="noopener noreferrer">WorkSpy</a> that does just that. 47He used it for tracking his hours when he did contract work. 48It’s so easy to use. 49With one click it counts away and tracks the time for a task, 50and when you click to another project it tracks the time spent there. 51Simple.</p><p>I used his nifty tool for many years, and because I loved jotting down notes in text files, 52I extended it to associate notes with tasks, notes I could use for my status reports. 53But, even this kind of note taking became a bit cumbersome compared to quickly jotting a line or tw
53o in a text file, 54such as during a meeting when things come up. 55And, after a while as I developed a gut feeling about how long it takes me to do certain tasks, 56I rarely needed a time tracker. 57But, I’d still recommend Patrick’s tool when starting unfamiliar projects 58or tracking hours for accounting purposes.</p><p>My search continued for an easy method of personal time management:</p><ul><li>I tried tracking todos with Github issues. 59But even with a script that uses the API 60from the command line, it was too much overhead compared with a plain text file.</li><li>I’ve recently learned about Emacs org-mode, which might 61be the inspiration of things like PlainTasks, and far more functional. 62But no way am I going down that road of relearning 63a ga-zillion Emacs keyboard shortcuts. ð¤¡</li><li>I looked at Obsidian, the Zettelkasten method, 64and a little app called <a href=https://jrnl.sh/ target=_blank rel="noopener noreferrer"><code>jrnl</code></a>, 65all nifty tools for working with text files. 66These are great for keeping and searching a journal or other notes, 67but aren’t quite task management.</li></ul><h2>TODO Plus</h2><p>For tasks/todos, I kept coming back to PlainTasks. 68Even when I started using VS Code as my primary editor, 69I’d keep Sublime Text around to view PlainTasks. 70That is, until I discovered 71<a href="https://marketplace.visualstudio.com/items?itemName=fabiospampinato.vscode-todo-plus" target=_blank rel="noopener noreferrer">the TODO Plus extension</a>. 72It doesn’t have all the features of PlainTasks in SublimeText, 73but it has the ones I care about and a couple I didn’t know I needed.</p><p>As a plain text file, this method still suffers from the same two drawbacks as before. 74No visualization of the upcoming tasks or of the archive. 75So, because I wasn’t willing to give up the speed of a text file, 76I decided all it needed was a different view into it. 77This is when I chose to write <a href=https://github.com/arkadianriver/hqtodo target=_blank rel="noopener noreferrer">hqtodo</a>, 78a single-page web app that uses the TODO+ text file as its backend data source.</p><div style=position:relative;padding-bottom:56.25%;height:0;overflow:hidden><iframe src=https://www.youtube.com/embed/YI_4OmQOqRY style=position:absolute;top:0;left:0;width:100%;height:100%;border:0 allowfullscreen title="YouTube Video"></iframe></div><h2>Mermaid and Apexcharts visualizations FTW!</h2><p>The video and hqtodo <code>README</code> file describes how it works, but it essentially displays three things:</p><ul><li>The in-progress and backlogged todos that remain. 79A <a href=https://mermaid-js.github.io/mermaid/#/gantt target=_blank rel="noopener noreferrer">Mermaid gantt chart</a> is used for this.</li><li>The archived todos in two groupings: by week and by tag (project category).</li><li>A graph of the cumulative tally of the time spent on completed tasks 80(where a quick glance at the slope shows my velocity). 81An <a href=https://apexcharts.com/docs/chart-types/area-chart/ target=_blank rel="noopener noreferrer">Apexcharts area chart</a> is used for this.</li></ul><h2>The future</h2><p>If my job were more mobile, less time spent at a single desktop, 82a simple text file might not be the best choice. 83Logging into a web app might be the way to go 84such as using a bot on Slack or setting up a 85<a href=https://www.samuelthomasdavies.com/how-to-set-up-gtd-in-notion/ target=_blank rel="noopener noreferrer"><em>Getting Things Done</em> todo list on Notion</a> 86because wherever I can log in, be it a phone or laptop, there it is. 87However, I did discover a decent file editor for Android 88from which I might be able to sync and edit the same TODO file as on my desktop. 89But, no phone app necessary for me, unless I start doing more DIY home projects, 90which just ain’t my thing.</p><p>Cheers!</p></div><nav class=page-sequence><a class="sequence-link prev-page" href=https://arkadianriver.com/posts/wtd2021/>< Write the Docs: Port ...</a> 91<a class="sequence-link next-page" href=https://arkadianriver.com/posts/adocintro/>AsciiDoc and Asciido ... ></a></nav><div class=byline>
91<div class=byline-avatar><img src=/images/20221212_203153-1_hua87f9ed06335c36a2fd58d57b658f824_782831_100x100_fill_q75_box_center.jpg alt="Author's avatar image"></div><div class=byline-author><b>Article by: 92Gary Faircloth 93</b><span class=byline-url><a href=https://arkadianriver.com>https://arkadianriver.com</a></span></div><div class=byline-bio>Opinions expressed are his own and don’t necessarily reflect 94the views of the company he works for or its members.<br><em>Interests:</em> tech, science, history, PC Gam … SQUIRREL!</div></div></section><section class=rounded-block><div id=disqus_thread></div>
94<script>var disqus_config=function(){this.page.url="https://arkadianriver.com/posts/hqtodo/"};(function(){if(window.location.hostname=="localhost")return;var e=document,t=e.createElement("script");t.src="https://arkadianriver.disqus.com/embed.js",t.setAttribute("data-timestamp",+new Date),(e.head||e.body).appendChild(t)})()</script>
94<noscript>To view the 95<a href=https://disqus.com/?ref_noscript rel=nofollow>comments powered by Disqus</a> 96enable JavaScript.</noscript></section></main><footer><ul class=social><li><a href=https://github.com/arkadianriver target=_blank rel="noopener noreferrer">GitHub</a> / </li><li><a href=https://linkedin.com/in/garyfaircloth target=_blank rel="noopener noreferrer">LinkedIn</a> / </li><li><a href=https://twitter.com/arkadianriver target=_blank rel="noopener noreferrer">X</a></li></ul><p class=copyright><small>â¸</small> Copyright Gary Faircloth 971996, 2026. 98<a href=https://arkadianriver.com/credits/>Credits</a></p></footer></body></html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.