Show TickTick countdowns above your todo list

I’ve been using TickTick as my todo list and it’s been working nicely. Recently, they added the countdown feature, which is great but it’s also off in its own tab so hidden away. I personally find the presence of the numbers to be a great motivator so I wanted to place them above my todo list so it could help me focus and prioritise what needed to be worked on before the milestone dates come to pass.

To achieve this, I’m running a TamperMonkey script which allows me to run additional Javascript on the page. It inserts an iFrame with a second instance of TickTick above the task list. It’s a janky solution but I didn’t feel the need to refine it any further, especially as I hope that TickTick will continue to add enhancements to the countdowns themselves so that the script is not necessary. I have made feature requests to them to make these changes and suggest that if you also think

Instructions

Install TamperMonkey:
https://www.tampermonkey.net/

Add a new script to TamperMonkey:

From the TamperMonkey extension menu choose “Create a new script…”

Paste the below code into the editor


// ==UserScript==
// @name         TickTick Countdown View
// @namespace    http://tampermonkey.net/
// @version      2025-05-12
// @description  Display countdowns above the task list
// @author       You
// @match        https://ticktick.com/webapp
// @icon         https://www.google.com/s2/favicons?sz=64&domain=ticktick.com
// @grant        window.onurlchange
// @noframes
// @run-at       document-idle
// ==/UserScript==

// Add an iframe to the page to open the TickTick countdown page
const countdownFrame = document.createElement("iframe");
countdownFrame.id = "countdown-frame";
// Appearance settings
countdownFrame.style.zoom = "0.5";
countdownFrame.style.height = "280px";

(function () {
  "use strict";

  addCountdownFrame();

  // Listen for navigation and add the countdown frame when navigation occurs.
  if (window.onurlchange === null) {
    window.addEventListener("urlchange", (info) => {
      addCountdownFrame();
    });
  }
})();

function addCountdownFrame() {
  if (countdownFrame?.src !== 'https://ticktick.com/webapp#countdown') {
    countdownFrame.src = "https://ticktick.com/webapp#countdown";
  }
  // Only add the countdown frame to the tasks page, above the task list view
  if (window.location.hash.endsWith("/tasks")) {
    // wait for the task-list-view to be available
    const interval = setInterval(() => {
      const taskListView = document.querySelector("#task-list-view");
      if (taskListView) {
        clearInterval(interval);
        const firstChild = taskListView.firstChild;

        // add countdownFrame as first child of task-list-view
        if (firstChild?.tagName !== "IFRAME") {
          // add countdownFrame as first child of task-list-view
          taskListView.insertBefore(countdownFrame, firstChild);
        }
      }
    }, 1000);
  }
}

Lion

Just something to prove I’m not completely out of the blogging game yet.

I’ve been working on a program to generate knot work. The idea initially was as a helper for human-generated knots but could also eventually extend into automation of patterns.

These knots are made using a font that contains characters that resemble common intersections and crossing overs. The font is quite cleverly designed and allows for a lot of different ideas to be expressed and also has all the rotations worked out in such a way that the generated knotwork tends to have the right crossing over and under effect appear.

This method of generation works very different from the traditional knotting which usually requires a lot of forethought and preparation. With this font a more stream-of-thought way of creating knotwork is enabled. It’s definitely quite fun and exciting to see a knot come to life in unexpected ways!