I use Org Mode's table of contents directive to include a table of contents in blog posts. I wrap it inside a sticky-toc block to indicate when I want it to be part of the sticky table of contents on my blog. In Org Mode, the syntax looks like this:

#+begin_sticky-toc
#+TOC: headlines 2 local
#+end_sticky-toc

I put it in a yasnippet so that I don't have to remember it. I just type tocs (for TOC, sticky) and then press TAB to complete it.

After exporting individual HTML files from Org Mode, I turn them into my blog using the 11ty static site generator. To simplify my archive pages, I have an onThisPage shortcode which lists the posts on that page. I changed it to include the sticky-toc contents from the items' templateContent attributes.

const { JSDOM } = require('jsdom');

module.exports = function (eleventyConfig) {
  function formatPostLine(item, index) {
    let subtoc = '';
    if (item.templateContent?.match(/sticky-toc/)) {
      const doc = new JSDOM(item.templateContent).window.document;
      const sub = doc.querySelector('.sticky-toc ul, .sticky-toc div, .sticky-toc-after-scrolling div');
      if (sub) {
        if (sub.querySelector('.panzoom')) {
          console.log('remove panzoom');
          sub.querySelector('.panzoom').classList.remove('panzoom');  // don't do panzoom for now
        }
        sub.classList.remove('panzoom');
        subtoc = sub.outerHTML;
      }
    }
    return `<li><a class="toc-link" data-index="index${index}" href="${item.url}">${item.data.title}</a>${subtoc}</li>`;
  }
  eleventyConfig.addShortcode('onThisPage', function (list) {
    return `<nav class="on-this-page">
On this page:
<ul>
${list.map(formatPostLine).join("\n")}
</ul>
</nav>`;
  });
};

And then there's a bunch of CSS in assets/css/style.css:

/* tables of contents */
.on-this-page > ul > li > ul, .on-this-page > ul > li > div { display: none }

@media only screen and (width >= 95em) {
    html, body { overflow-x: unset; }

    .sticky-toc, .sticky-left, .sticky-right {
        font-size: var(--fs-sm);
        width: calc((100vw - var(--body-max-width) - 5rem)/2);
        position: sticky;
        max-height: calc(100vh - 2rem);
        overflow-y: auto;
        scroll-behavior: smooth;
        background: var(--modus-bg-main);
        top: 0;
        padding: 1rem;
    }

    article .sticky-toc {
        display: none
    }

    .single-post article .sticky-toc {
        display: block;
    }

    .sticky-toc, .sticky-left, .single-post article .sticky-toc {
        margin-left: calc((-100vw + var(--body-max-width))/2);
        float: left;
    }

    .sticky-right {
        margin-right: calc((-100vw + var(--body-max-width))/2);
        float: right;
    }

    /* Hide the TOCs for non-active posts, but only if JS is enabled */
    .js .on-this-page > ul > li > ul, .js .on-this-page > ul > li > div { display: none }
    .on-this-page > ul > li.post-active > ul, .on-this-page > ul > li.post-active > div { display: block }

    .active { background-color: var(--modus-bg-tab-bar) }

    .sticky-toc svg .active rect {
        fill: var(--modus-bg-tab-bar) !important;
        fill-opacity: 1 !important;
        mix-blend-mode: darken;
        stroke-dash-array: unset !important;
        stroke-width: 4px;
    }

    .link-to-nonsticky-toc {
        display: none
    }
}

I also have some Javascript to highlight the active post and show the subheadings for it in assets/js/misc.js.

/* Table of contents */

function stickyTocAfterScrolling() {
  const elements = document.querySelectorAll('.single-post .sticky-toc-after-scrolling');
  let lastScroll = window.scrollY;

  elements.forEach(element => {
    const clone = element.cloneNode(true);
    clone.setAttribute('class', 'sticky-toc');
    clone.querySelector('.panzoom')?.classList.remove('panzoom');
    element.parentNode.insertBefore(clone, element.nextSibling);
  });

  const observer = new IntersectionObserver(
    (entries) => {
      const currentScroll = window.scrollY;
      const scrollingDown = currentScroll > lastScroll;
      lastScroll = currentScroll;

      entries.forEach(entry => {
        const element = entry.target;
        const clone = cloneMap.get(element);

        if (!entry.isIntersecting && scrollingDown) {
          clone.setAttribute('class', 'sticky-toc');
          clone.style.display = 'block';
        } else if (entry.isIntersecting && !scrollingDown) {
          element.style.visibility = 'visible';
          clone.style.display = 'none';
        }
      });
    },
    {
      root: null,
      threshold: 0,
      rootMargin: '-10px 0px 0px 0px'
    }
  );

  elements.forEach(element => {
    observer.observe(element);
  });

  window.addEventListener('resize', () => {
    elements.forEach(element => {
      const clone = cloneMap.get(element);
      if (clone.style.display != 'none') {
        // reset didn't seem to work
        svgPanZoom(clone.querySelector('svg')).destroy();
        addPanZoomToElement(clone.querySelector('svg'));
      }
    });
  }, { passive: true });
}

stickyTocAfterScrolling();

function scrollToActiveTocLink() {
  const activeLink = document.querySelector('.sticky-toc .active');
  const tocContainer = document.querySelector('.sticky-toc');
  if (!activeLink || !tocContainer) return;
  const tocRect = tocContainer.getBoundingClientRect();
  const linkRect = activeLink.getBoundingClientRect();
  if (linkRect.top < tocRect.top || linkRect.bottom > tocRect.bottom) {
    const scrollPosition = linkRect.top + tocContainer.scrollTop -
                          (tocRect.height / 2) + (linkRect.height / 2);
    tocContainer.scrollTo({
      top: scrollPosition,
      behavior: 'smooth'
    });
  }
}
function getVisibleArticle() {
  const viewportHeight = window.innerHeight || document.documentElement.clientHeight;
  return [...document.querySelectorAll('article')].find((article) => {
    const rect = article.getBoundingClientRect();
    const visibleTop = Math.max(0, rect.top);
    const visibleBottom = Math.min(viewportHeight, rect.bottom);
    const visibleHeight = Math.max(0, visibleBottom - visibleTop);
    return visibleHeight > 0; // find the first visible one
  });
}

function handleActiveTOCLink() {
  const updateActive = function(links, active) {
    const activeFragment = active.includes('#') ?
          active.substring(active.indexOf('#')) : '';
    links.forEach(link => {
      const href = link.getAttribute('href');
      if (href.includes(window.location.origin)) {
        link.classList.toggle('active', href == active)
      } else if (href.startsWith('#')) {
        link.classList.toggle('active', href == activeFragment);
      }
    });
  };
  const posts = document.querySelectorAll('.post');
  const tocLinks = document.querySelectorAll('.on-this-page .toc-link');
  const options = {
    root: null,
    rootMargin: '-20% 0px -70% 0px',
    threshold: 0
  };
  const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        const id = entry.target.id;
        const link = document.querySelector(`.toc-link[data-index="${id}"]`);
        document.querySelectorAll('.sticky-toc .active').forEach((o) => o.classList.remove('active'));
        document.querySelectorAll('.post-active').forEach((o) => o.classList.remove('post-active'));
        if (link) {
          link.classList.add('active');
          const item = link.closest('li');
          item.classList.add('post-active');
        }
      }
    });
    scrollToActiveTocLink();
  }, options);
  posts.forEach((post) => { observer.observe(post); });

  const stickyTocLinks = document.querySelectorAll('article .sticky-toc a, .on-this-page a');
  const postTocObserver = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        const id = entry.target.id;
        const url = window.location.origin + window.location.pathname + '#' + id.replace(/^outline-container-/, '');
        updateActive(stickyTocLinks, url);
      }
    });
    scrollToActiveTocLink();
  }, options);

  document.querySelectorAll('article .sticky-toc, article .sticky-toc-after-scrolling').forEach((toc) => {
    const post = toc.closest('article');
    if (post) {
      post.querySelectorAll('.outline-2, .outline-3').forEach((section) => { postTocObserver.observe(section) });
    }
  });
  const visible = getVisibleArticle();
  const id = visible?.id;
  if (id) {
    const activeLink = document.querySelector(`.toc-link[data-index="${id}"]`);
    if (activeLink) {
      activeLink.classList.add('active');
      activeLink.closest('li').classList.add('post-active');
      scrollToActiveTocLink();
    }
  }
}
handleActiveTOCLink();

I sometimes want to use sketchnotes as overviews, especially if I've added hyperlinks to them. I used to make the images show up on the right side, but now I want them to show up in the left-side navigation instead. Also, I wanted any links to headings to automatically get recoloured as I scroll to that heading.

I added a special case to the handleActiveTOCLink function to handle anchor hyperlinks (just #anchor) in the SVG. It probably makes sense to make those absolute URLs, which means slightly changing my workflows for hyperlinking SVGs and writing about sketches.

So on both the category page (ex: the Hyperlinking SVGs entry in category - drawing, which might have moved off the first page of results if you're reading this far in the future) and the single-post page (ex: Hyperlinking SVGs), there's a full-sized version of the image in the main blog post, and then a small copy of it in the margin on the left. The sidebar copy is probably too small to read, but it might be enough to get a sense of spatial relationships, and the links also have title attributes that are displayed as tooltips when you hover.

I use Javascript to duplicate the image and make a small, sticky version because I haven't quite figured out how to properly make it sticky when off-screen with just CSS. Even my JS feels a little tangled. Maybe this would be a good excuse to learn about web components; someone's probably figured out something polished.

I'm curious about using more drawings to anchor my thinking and structure my blog posts.

Some people read my blog using EWW (the Emacs Web Wowser, of course), so I want my blog to be reasonable even without CSS and JS.

A number of people read my blog without Javascript enabled. I installed the Firefox extension Script Switch so that I can test my blog with and without Javascript whenever I remember.

I sometimes look up my blog posts on my phone and there's no space for any of this fanciness there, so it'll only kick in on large screens. My CSS file is littered with various breakpoints I've cargo-culted over the years and I should simplify it at some point. At the moment, if it looks fine on my Lenovo P52, I'm happy.

Theoretically, the right margin is now available for sidenotes, so I might be able to look at ox-tufte and Eleventufte and get something going. Then I'll have a way to add small notes that are shorter than a paragraph. Longer tangents can go in a details/summary element instead, although I have it on good authority that one can write at length in footnotes. I love the footnotes in the Bartimaeus series, and apparently there are quite a few books where the footnotes are part of the storytelling.)

It might be nice to let tables extend into the right sidebar when I know I won't have a doodle nearby. Incidentally, Sidenotes In Web Design · Gwern.net uses breadcrumbs in the left sidebar instead of a table of contents, so there's more space for tables and sidenotes.

I thought about using CSS breakpoints so that on a medium-sized screen, we can have the left sidebar even if there's no space for something on the right. I haven't gotten around to experimenting with it yet, though. Besides, I don't know yet if I want to prioritize the stuff I want in the right sidebar (side notes, doodles) over fairly-static navigation.

As I mentioned, it might be handy to tweak my SVG linking workflow to use absolute URLs.

Sometimes I look up my notes within Emacs, but surprisingly often, I look them up on the Web. Navigation isn't just cosmetic. I want to get better at using my blog as a tool for thought, so tinkering with layout isn't just window dressing. It's (very slowly) experimenting with scaffolding for my brain. Little things can help!

One challenge: there are a lot of comments. How many? I got curious about analyzing the XML, and then of course I wanted to do that from Emacs. I used pipx install yq to install yq so that I could use the xq tool to query the XML, much like jq works.

My uncompressed Disqus XML export was 28MB. I spent some time deleting spam comments through the web interface, which helped with the filtering. I also deleted some more comments from the XML file as I noticed them. I needed to change /wp/ to /blog/, too.

This is how I analyzed the archive for non-deleted posts, uniquified based on message. I'll include the full Org source of that block (including the header lines) in my blog post so that you can see how I call it later.

#+NAME: analyze-disqus
#+begin_src shell :var rest="| length | \"\\(.) unique comments\"" :exports results
~/.local/bin/xq -r "[.disqus.post[] |
   select(.isDeleted != \"true\" and .message) |
   {key: .message, value: .}] |
  map(.value) |
  unique_by(.message) ${rest}" < disqus.xml
#+end_src

When I evaluate that with C-c C-c, I get:

8265 unique comments

I was curious about how it broke down by year. Because I named the source code block and used a variable to specify how to process the filtered results earlier, I can call that with a different value.

Here's the call in my Org Mode source:

#+CALL: analyze-disqus(rest="| map(.createdAt[0:4]) | group_by(.) | map([(.[0]), length]) | reverse | [\"Year\", \"Count\"], .[] | @csv") :results table output :wrap my_details Table of comment count by year

I tried fiddling around with Org's #+PLOT keyword, but I couldn't figure out how to get the bar graph the way I wanted it to be. Someday, if I ever figure that out, I'll definitely save the Gnuplot setup as a snippet. For now, I visualized it using seaborn instead.

import pandas as pd
import seaborn as sns
import matplotlib.pyplot as plt
import numpy as np

df = pd.DataFrame(data[1:], columns=data[0])
df['Count'] = df['Count'].astype(int)
df['Year'] = df['Year'].astype(int)
df = df.sort_values('Year')
plt.figure(figsize=(12, 6))
ax = sns.barplot(x='Year', y='Count', data=df)
plt.title('Comments by Year (2007-2025)', fontsize=16, fontweight='bold')
plt.xlabel('Year')
plt.ylabel('Comments')
plt.xticks(rotation=45)
plt.grid(axis='y')
for i, v in enumerate(df['Count']):
    ax.text(i, v + 20, str(v), ha='center', fontsize=9)
plt.tight_layout()
plt.savefig('year_count_plot.svg')
return 'year_count_plot.svg'

Ooooooh, I can probably cross-reference this with the number of posts from my /blog/all/index.json file. I used Claude AI's help to come up with the code below, since merging data and plotting them nicely is still challenging for me. Now that I have the example, though, maybe I can do other graphs more easily. (This looks like a related tutorial on combining barplots and lineplots.)

import pandas as pd
import seaborn as sns
import matplotlib.pyplot as plt
import numpy as np
import json
from matplotlib.ticker import FuncFormatter
from datetime import datetime

with open('/home/sacha/proj/static-blog/_site/blog/all/index.json', 'r') as f:
    posts_data = json.load(f)

# Process post data
posts_df = pd.DataFrame(posts_data)
posts_df['Year'] = pd.to_datetime(posts_df['date']).dt.year
post_counts = posts_df.groupby('Year').size().reset_index(name='post_count')

# Convert to DataFrame
comments_df = pd.DataFrame(comment_data[1:], columns=comment_data[0])
comments_df['Count'] = comments_df['Count'].astype(int)
comments_df['Year'] = comments_df['Year'].astype(int)

# Merge the two dataframes
merged_df = pd.merge(post_counts, comments_df, on='Year', how='outer').fillna(0)
merged_df = merged_df.sort_values('Year')

# Calculate comments per post ratio
merged_df['comments_per_post'] = merged_df['Count'] / merged_df['post_count']
merged_df['comments_per_post'] = merged_df['comments_per_post'].replace([np.inf, -np.inf], np.nan).fillna(0)

# Create a single figure instead of two subplots
fig, ax1 = plt.subplots(figsize=(15, 8))

# Custom colors
post_color = "#1f77b4"    # blue
comment_color = "#ff7f0e" # orange
ratio_color = "#2ca02c"   # green

# Setting up x-axis positions
x = np.arange(len(merged_df))
width = 0.35

# Bar charts on first y-axis
bars1 = ax1.bar(x - width/2, merged_df['post_count'], width, color=post_color, label='Posts')
bars2 = ax1.bar(x + width/2, merged_df['Count'], width, color=comment_color, label='Comments')
ax1.set_ylabel('Count (Posts & Comments)', fontsize=12)

# Add post count values above bars
for i, bar in enumerate(bars1):
    height = bar.get_height()
    if height > 0:
        ax1.text(bar.get_x() + bar.get_width()/2., height + 5,
                f'{int(height)}', ha='center', va='bottom', color=post_color, fontsize=9)

# Add comment count values above bars
for i, bar in enumerate(bars2):
    height = bar.get_height()
    if height > 20:  # Only show if there's enough space
        ax1.text(bar.get_x() + bar.get_width()/2., height + 5,
                f'{int(height)}', ha='center', va='bottom', color=comment_color, fontsize=9)

# Line graph on second y-axis
ax2 = ax1.twinx()
line = ax2.plot(x, merged_df['comments_per_post'], marker='o', color=ratio_color,
              linewidth=2, label='Comments per Post')
ax2.set_ylabel('Comments per Post', color=ratio_color, fontsize=12)
ax2.tick_params(axis='y', labelcolor=ratio_color)
ax2.set_ylim(bottom=0)

# Add ratio values near line points
for i, ratio in enumerate(merged_df['comments_per_post']):
    if ratio > 0:
        ax2.text(i, ratio + 0.2, f'{ratio:.1f}', ha='center', color=ratio_color, fontsize=9)

# Set x-axis labels
ax1.set_xticks(x)
ax1.set_xticklabels(merged_df['Year'], rotation=45)
ax1.set_title('Blog Posts, Comments, and Comments per Post by Year', fontsize=16, fontweight='bold')
ax1.grid(axis='y')

# Add combined legend
lines1, labels1 = ax1.get_legend_handles_labels()
lines2, labels2 = ax2.get_legend_handles_labels()
ax1.legend(lines1 + lines2, labels1 + labels2, loc='upper left')

# Layout and save
plt.tight_layout()
plt.savefig('posts_comments_analysis.svg')
return 'posts_comments_analysis.svg'

Timeline notes:

• In this graph, comments are reported by the timestamp of the comment, not the date of the post.
• In 2007 or so, I moved to Wordpress from planner-rss.el. I think I eventually imported those Wordpress comments into Disqus when I got annoyed with Wordpress comments (Akismet? notifications?).
• In 2008 and 2009, I was working on enterprise social computing at IBM. I made a few presentations that were popular. Also, mentors and colleagues posted lots of comments.
• In 2012, I started my 5-year experiment with semi-retirement.
• In 2016, A+ was born, so I wrote much fewer posts.
• In 2019/2020, I wrote a lot of blog posts documenting how I was running EmacsConf with Emacs, and other Emacs tweaks along the way. The code is probably very idiosyncratic (… unless you happen to know other conference organizers who like to do as much as possible within Emacs? Even then, there are lots of assumptions in the code), but maybe people picked up useful ideas anyway. =)

What were my top 20 most-commented posts?

(let* ((json-object-type 'alist)
       (json-array-type 'list)
       (comments-json (json-read-file "~/proj/static-blog/_data/commentsCounts.json"))
       (posts-json (json-read-file "~/proj/static-blog/_site/blog/all/index.json"))
       (post-map (make-hash-table :test 'equal)))
  ;; map permalink to title
  (dolist (post posts-json)
    (let ((permalink (cdr (assoc 'permalink post)))
          (title (cdr (assoc 'title post))))
      (puthash permalink title post-map)))
  ;; Sort comments by count (descending)
  (mapcar
   (lambda (row)
     (list
      (cdr row)
            (org-link-make-string
       (concat "https://sachachua.com" (symbol-name (car row)))
       (with-temp-buffer
         (insert (or (gethash (symbol-name (car row)) post-map) (symbol-name (car row))))
         (mm-url-decode-entities)
         (buffer-string)))))
   (seq-take
    (sort comments-json
          (lambda (a b) (> (cdr a) (cdr b))))
    n)))

Top 3 by year. Note that this goes by the timestamp of the post, not the comment, so even old posts are in here.

(let* ((json-object-type 'alist)
       (json-array-type 'list)
       (comments-json (json-read-file "~/proj/static-blog/_data/commentsCounts.json"))
       (posts-json (json-read-file "~/proj/static-blog/_site/blog/all/index.json"))
       by-year)
  (setq posts-json
        (mapcar
         (lambda (post)
           (let ((comments (alist-get (intern (alist-get 'permalink post)) comments-json)))
             (if comments
                 (cons (cons 'comments (alist-get (intern (alist-get 'permalink post)) comments-json 0))
                       post)
               post)))
         posts-json))
  (setq by-year
        (seq-group-by
         (lambda (o)
           (format-time-string "%Y"
                               (date-to-time
                                (alist-get 'date o))
                               "America/Toronto"))
         (seq-filter (lambda (o) (alist-get 'comments o)) posts-json)))
  (org-list-to-org
   (cons 'unordered
         (seq-keep
          (lambda (year)
            (list
             (org-link-make-string (concat "https://sachachua.com/blog/" (car year))
                                   (car year))
             (cons 'unordered
                   (mapcar
                    (lambda (entry)
                      (list (format "%s (%d)"
                                    (org-link-make-string
                                     (concat "https://sachachua.com" (alist-get 'permalink entry))
                                     (with-temp-buffer
                                       (insert (alist-get 'title entry))
                                       (mm-url-decode-entities)
                                       (buffer-string)))
                                    (alist-get 'comments entry))))
                    (seq-take
                     (sort
                      (cdr year)
                      (lambda (a b) (> (alist-get 'comments a)
                                       (alist-get 'comments b))))
                     n)))))
          (nreverse by-year)))))

• 2025
  • Using image-dired to browse the latest screenshots from multiple directories (2)
  • Changing planet.emacslife.com (2)
  • 2025-03-03 Emacs news (2)
• 2024
  • Using an Emacs Lisp macro to define quick custom Org Mode links to project files; plus URLs and search (6)
  • Excerpts from a conversation with John Wiegley (johnw) and Adam Porter (alphapapa) about personal information management (5)
  • Yay Emacs 1: EmacsConf 2023 report, SVG animation, Embark, Org Mode links (4)
• 2023
  • How I keep track of new Emacs packages (3)
  • Automatically refiling Org Mode headings based on tags (3)
  • Building up my tech notes (2)
• 2022
  • Recoloring my sketches with Python (5)
  • Late-night braindumps by talking to myself (3)
  • 2022-01-24 Emacs news (2)
• 2021
  • A list of sharks that are obligate ram ventilators (6)
  • Org Mode: Insert YouTube video with separate captions (6)
  • Thinking about Emacs community maintenance (6)
• 2020
  • Why I love free software (9)
  • Python+FontForge+Org: I made a font based on my handwriting! (7)
  • 2020-12-14 Emacs news (5)
• 2019
  • Turning an Org Mode outline into an HTML table with a column for more notes (10)
  • Tweaking Emacs on Android via Termux: xclip, xdg-open, syncthing conflicts (9)
  • Visual Book Notes: No-Drama Discipline (2014) (6)
• 2018
  • 2018-04-09 Emacs news (6)
  • A- and household life (5)
  • Using Org Mode, LaTeX, Beamer, and Medibang Paint to make a children's book (4)
• 2017
  • Quick notes on my current interface for time-tracking (9)
  • Working around my phone plan’s lack of roaming (8)
  • Emacs: Pasting with the mouse without moving the point – mouse-yank-at-point (5)
• 2016
  • Using categories to organize your Org agenda (16)
  • 2016-01-16 Emacs Hangout (9)
  • Microphthalmia: small eye (8)
• 2015
  • Let’s have a virtual Emacs conference in August – help me make it happen! (18)
  • Thinking about how to make better use of Yasnippet in my Emacs workflow (17)
  • July 2015 Emacs Hangout (13)
• 2014
  • Reinvesting time and money into Emacs (25)
  • Improving how I organize notes with Org Mode (19)
  • Emacs: M-y as helm-show-kill-ring (18)
• 2013
  • How to Learn Emacs: A Hand-drawn One-pager for Beginners / A visual tutorial (45)
  • Brainstorming ways to help build the Emacs community (19)
  • Emacs: How I organize my Org files (19)
• 2012
  • Org-mode and habits (30)
  • zomg, Evernote and Emacs (29)
  • Literate programming and my Emacs configuration file (25)
• 2011
  • Planning an Emacs-based personal wiki – Org? Muse? Hmm… (42)
  • Drupal: Overriding Drupal autocompletion to pass more parameters (22)
  • Rhetoric and the Manila Zoo; reflections on conversations and a request for insight (21)
• 2010
  • Even more awesome LotusScript mail merge for Lotus Notes + Microsoft Excel (88)
  • Married! (38)
  • Moving from testing to development (37)
• 2009
  • What can I help you learn? Looking for mentees (36)
  • Lotus Notes mail merge from a Microsoft Excel spreadsheet (33)
  • Nothing quite like Org for Emacs (30)
• 2008
  • The Gen Y Guide to Web 2.0 at Work (23)
  • Outlining Your Notes with Org (18)
  • Tagging in Org – plus bonus code for timeclocks and tags! (14)
• 2007
  • Clocking Time with Emacs Org (18)
  • Emacs: Choosing between Org and Planner (13)
  • Wicked Cool Emacs: get in on the action! (10)
• 2006
  • How to wear a malong (6)
  • What makes a good life? (6)
  • Emacs + LinkedIn: Another totally idiosyncratic bit of code (3)
• 2005
  • Emacs: It’s all about people (4)
  • Learning Bisaya (4)
  • Networking (3)
• 2004
  • nethack-el (4)
  • RMAIL labels (4)
  • Sketch website design (3)
• 2003
  • CookOrDie Day 2: Veal sausage and potatoes (4)
  • Look into literate programming (3)
  • Automatically detecting proxy settings (3)
• 2002
  • Hello world, school, teaching, games () (1)

As you can probably tell, I love writing about Emacs, especially when people drop by in the comments to:

• share that they'd just learned about some small thing I mentioned in passing and that it was really useful for this other part of their workflow that I totally wouldn't have guessed
• point out a simpler package or built-in Emacs function that also does whatever clever hack I wrote about, just in a more polished way
• link to a blog post or code snippet where they've borrowed the idea and added their own spin

I want to keep having those sorts of conversations.

8000+ comments are a lot to read, but it should be pretty straightforward to review the comments at least until 2016 or so, and then just clean out spam as I come across it after that. I used the Disqus web interface to delete spam comments since the isSpam attribute didn't seem to be reliable. The web interface pages through comments 25 items at a time and doesn't seem to let you select all of them, so I started tinkering around with using Spookfox to automate this. Spookfox lets me control Mozilla Firefox from Emacs Lisp.

(progn
  ;; select all
  (spookfox-eval-js-in-active-tab "document.querySelector('.mod-bar__check input').click()")
  (wait-for 1)
  ;; delete
  (spookfox-eval-js-in-active-tab "document.querySelectorAll('.mod-bar__button')[2].click()")
  (wait-for 2)
  ;; click OK, which should make the list refresh
  (spookfox-eval-js-in-active-tab "btn = document.querySelectorAll('.mod-bar__button')[1]; if (btn.textContent.match('OK')) btn.click();")
  (wait-for 4)
  ;; backup: (spookfox-eval-js-in-active-tab "window.location.href = 'https://sachac.disqus.com/admin/moderate/spam'")
  )

I got to the end of the spam comments after maybe 10 or 20 pages, though, so maybe Disqus had auto-deleted most of the spam comments.

It's almost amusing, paging through all these spammy attempts at link-building and product promotion. I didn't want to click on any of the links since there might be malware, so sometimes I used curl to check the site. Most of the old spam links I checked don't even have working domains any more. Anything that needed spam didn't really have lasting power. It was all very "My name is Ozymandias, king of kings: / Look on my works, ye Mighty, and despair!"… and then gone.

Back to eleventy-import-disqus. I followed the directions to make a contentMap.json and removed the trailing , from the last entry so that the JSON could be parsed.

Modifications to eleventy-import-disqus:

• The original code created all the files in the same directory, so I changed it to create the same kind of nested structure I use (generally ./blog/yyyy/mm/post-slug/index.html and ./blog/yyyy/mm/post-slug/index.11tydata.json). I decided to store the Disqus comments in index.json, which is lower-priority than .11tydata.json. fs-extra made this easier by creating all the parent directories.
• Ignored deleted messages
• Discarded avatars
• Did some reporting to help me review potential spam
• Reparented messages if I deleted their parent posts
• Indent the thread JSON nicely in case I want to add or remove comments by hand

With the thread JSON files, my blog takes 143 seconds to generate, versus 133 seconds without the comments. +10 seconds isn't too bad. I was worried that it would be longer, since I added 2,088 data JSON files to the build process, but I guess 11ty is pretty efficient.

It had been nice to have a comment form that people could fill in from anywhere and which shared their comments without needing my (often delayed) intervention. I learned lots of things from what people shared. Sometimes people even had discussions with each other, which was extra cool. Still, I think it might be a good time to experiment with alternatives. Plain e-mail for now, I guess, maybe with a nudge asking people if I could share their comments. Mastodon, too - could be fun to make it easy to add a toot to the static comments from mastodon.el or from my Org Mode inbox. (Update 2025-03-30: Adding Mastodon toots as comments in my 11ty static blog) Might be good to figure out Webmentions, too. (But then other people have been dealing with spam Webmentions, of course.)

Comment counts can be useful social signals for interesting posts. I haven't added comment counts to the lists of blog posts yet. eleventy-import-disqus created a commentsCounts.json, which I could use in my templates. However, I might change the comments in the per-post .json file if I figure out how to include Mastodon comments, so I may need to update that file or recalculate it from the posts.

Many of the blogs I read have shifted away from commenting systems, and the ones who still have comments on seem to be bracing for AI-generated comment spam. I'm not sure I like the way the Internet is moving, but maybe in this little corner, we can still have conversations across time. Comments are such a wonderful part of learning out loud. I wonder how we can keep learning together.

From How to Take Smart Notes (Sönke Ahrens):

If you want to learn something for the long run, you have to write it down. If you want to really understand something, you have to translate it into your own words.

Writing and sharing are part of how I learn. Taking notes helps me learn things that are bigger than my working memory or my uninterrupted time segments. Sharing my notes helps me find them again later on, since I can search the Internet from my phone. Also, if I share my notes, sometimes I get to learn from other people too, and sometimes my notes help people figure out stuff and then they can build on that.

It makes sense to me to share these notes on a blog on my own domain, with a chronological view and an RSS feed that makes it easier for other people to check for updates if they want. Well, some other people. I suppose RSS readers are still a fairly technical sort of thing, and I don't particularly like posting on platforms like Facebook or LinkedIn. Anyway, I'll just keep writing here, and maybe people will come across posts via search engines or figure out how to get updates however they want to.

(let* ((annotations '((2001 "university")
                      (2003 "graduated, teaching")
                      (2004 "internship in Japan")
                      (2005 "grad school")
                      (2007 "working at IBM")
                      (2008 "drawing")
                      (2012 "experiment with semi-retirement")
                      (2016 "A+ was born")
                      (2019 "EmacsConf, COVID-19")
                      (2022 "SuperNote A5X")
                      (2023 "even more EmacsConf automation")
                      (2024 "cargo bike")
                      (2025 "added iPad to the mix")))
       (json-array-type 'list)
       (json-object-type 'alist)
       (posts-by-year
        (mapcar
         (lambda (o) (cons (car o) (length (cdr o))))
         (seq-group-by
          (lambda (o) (substring (alist-get 'date o) 0 4))
          (json-read-file "~/proj/static-blog/_site/blog/all/index.json")))))
  (append
   '(("Year" "Posts" "Note") hline)
   (cl-loop
    for i from 2001 to 2025
    collect
    (list (format "[[https://sachachua.com/blog/%d][%d]]"
          i i)
          (alist-get (number-to-string i) posts-by-year nil nil #'string=)
          (or (car (alist-get i annotations)) "")))))

I don't see myself giving up these tools until I really can't use them any more. I'm keeping an eye out for assistive technology that might help me work around my limitations and the likely cognitive/physical decline I'll eventually run into. I'm encouraged by the fact that quite a few people manage to keep learning and writing even into their 80s and 90s.

Some weeks, Emacs News is all I can squeeze in: a long categorized list of links. When I have more time, I add little bits of code, drawings, reflections.

I love writing about little tweaks. Mostly that's about Emacs. I love the way I can shape it into something that fits me.

I like to summarize books and ideas as sketchnotes so that I have a chance of remembering what I want to learn from them. Also, the drawings are handy for sharing with others, and they're a way of giving back.

I'm slowly learning to write about life in a way that helps me learn more while respecting people's privacy. I like doing little experiments. Even tinier than the ones described in Tiny Experiments. Not "I will write 100 blog posts over the next 100 days," but rather, "What if I postpone fretting about A+'s homework until Saturday? What happens then?"

After I get the kiddo through the morning routine and ready for virtual school, I usually play piano for about an hour or so. Then it's recess and some more hugs, and then I settle down for some writing or drawing. The weather is getting better, so I'm looking forward to moving some of that outside. Maybe I'll dust off those baby monitor apps so I can hear if A+ needs any help.

I mostly write on my laptop using Org Mode in Emacs. Org Mode is great for literate programming. I can mix my notes and my code however I like.

I don't write in a straightforward way. I jump around. I go on tangents and down rabbit-holes. It helps a little if I've sketched my thoughts beforehand, like for this post, or if I've done some audio braindumping to help me figure out where the interesting thoughts are. Sometimes I capture little thoughts on my phone and then move them to the post I'm working on. I'm trying to figure out how to chunk my thoughts better.

I have a lot of Emacs tweaks to make it easier to link to blog posts, bookmarks, sketches, sites from search results. I like including the text of sketches, too.

I use the 11ty static site generator to make my blog. I switched to it a few years ago because I didn't want to worry about keeping Wordpress secure. I don't have room for many programming languages in my brain at the moment, so I like the fact that 11ty uses JavaScript. It takes me about five minutes to compile my blog.

From Dan Cullum: The more I read:

There is a strong correlation between the amount I’m reading, and the ideas I have for this blog. When I’m reading a lot, I feel like I have ideas coming out my eyes.

Reading makes me want to write, too.

I love the Toronto Public Library enough to transplant myself from the tropics and learn how to deal with winter. I've been reading more e-books lately. It's easier to highlight e-books compared to paper books. I can pick them up and put them down easily, and keep the pages open when I'm taking notes. I don't have to worry about misplacing them, either. I have some code to grab my highlights as a JSON, and then I can do things with them: include them in blog posts, add them to my personal notes, etc.

Not everything is available as an e-book, though, and sometimes the e-books have long hold times. Paper books are still handy enough.

I like reading blogs. They're much shorter than books are, and much less fluffy. Sometimes I feel like mainstream printed books have a lot of padding because of the considerations of the publishing industry: the book must be a certain size so it doesn't get lost on the bookstore shelf; the book must have a certain weight and thickness so people feel that it's worth $25. Blog posts can just get to the core of the idea instead of belabouring the point. I like the fractal density of hyperlinked text, too, and the conversational possibilities of it. It's a lot easier to bounce an idea back and forth to develop it when you can post in a day instead of waiting for a year for a book to be published.

I like reading on the new iPad. It's smaller than my laptop and bigger than my phone. It's easy to browse through blogs on it, unlike on my Supernote. I'm starting to develop a workflow for reading and writing smaller snippets: (toot)

1. Read in NetNewsWire.
2. Open interesting posts in Chrome on the iPad.
3. Highlight the text.
4. Use "Copy Link with Highlight".
5. Tap on the selection again. Use "Share" to send it to Ice Cubes, a Mastodon client that can post to my GoToSocial instance and let me use my full post limit (5,000 characters, mwahahahaha).
6. Paste the link into the toot, add my own thoughts, and post it.

I like linking to text fragments. Sharing from a webpage on my Android phone does this automatically. "Copy Highlight as Link" works from Chrome on the iPad. It saves people that little bit of scrolling or finding, although I suppose it would be helpful for people to go through the context before that selection. Alternatively, I could share directly from NetNewsWire and just link to the blog post instead of the text.

I like making visual book notes. They help me read a book well, and turning the sketch into a blog post gives me more opportunities to revisit it: when I write the post, and if someone comments or shares it.

Eventually I want to dust off my code for collecting Mastodon posts into a blog post, and maybe also re-establish a weekly review process.

Tangent: Check out Reading more blogs; Emacs Lisp: Listing blogs based on an OPML file for a table of the blogs I'm reading, along with the code I used to make a table of blogs, their latest post (as of the time I wrote my post, of course), and the post date.

As the kiddo becomes more independent ("Mom, I'm 9, you don't have to fret about my jacket"), I'll have more time for myself. This is a good time to go bike and walk and explore outside, and to go deep and wide into our interests as a family. I do about 2-4 hours of consulting a week, just the stuff I'm interested in. (TODO: There's a tangent I want to write about interest-based nervous systems, which I notice in both A+ and myself, and probably building on this 2014 reflection on having a buffet of goals.) The rest is life time, divided among the things we want to learn/do/share and the things we do to take care of ourselves.

Even though I have increasing autonomy when it comes to time, and an increasing amount of focused time, I still haven't gotten to the bottom of my idea list or my to-write list. I don't think I'll ever get to the bottom of those lists, actually. I come up with ideas faster than I can do them. That's a good problem to have.

It makes sense to prepare for a couple of changes that will likely come up:

• Age-related farsightedness: It'll probably get harder to read small text, and I might eventually need to juggle my regular glasses as well as reading glasses. (W- already does this occasionally. He prefers having different pairs of glasses instead of bifocals or progressives, and his reasons seem sound. I don't want to have to adopt different postures to see out of different zones of glasses.) Developing good workflows for reading will probably help here. Also, the cargo vests I wear will probably help me with the "Where are my glasses?" problem.
• Menopause will probably rewire my brain a lot. I hear brain fog and tip-of-the-tongue can be challenging (see also Brain fog in menopause).
• My mom is 79 and running into issues with cognitive and physical decline. She has a hard time typing, speaking, remembering, deciding, or feeling good. On the other hand, there are examples of people who have stayed sharp for decades. There are lots of factors that are beyond my control. Still, it would be nice to see if I can stack the deck a little. So yes to:
  • walks, bike rides, exercise, and maybe I can figure out a fun way to improve strength;
  • lots of learning and sharing and connecting
  • and experiments with technological and cognitive aids, like speech recognition to work around typing, text-to-speech interfaces to work around vision, notes to work around working memory, and maybe large language models to work around issues with recall.
  • … and I might as well learn Morse code or explore accessibility tools, just in case I'm limited to twitching cheek muscles or something like that.

The life expectancy at birth for the Philippines for women born in 1983 is ~65 years; in Canada, about ~80 years. I want to keep learning and writing and sharing for as many of those years as I can.

See discussion on Mastodon