I was curious about the shape of my blog over the years, excluding Emacs News and my link-heavy weekly/monthly reviews. It started off with lots of little posts like the way other weblogs were also quick links and notes. As weblogs morphed into blogs with more text, I also settled down into fewer, longer posts with lots of code (analyzed by looking for <pre> blocks). I wrote much less after A+ was born. Interestingly, I've been shifting towards longer posts with more images.

• Blog posts exclude permalinks that match emacs-news|review|week-ending, which casts a bit of a wide net but should give me the general shape of things.
• Total words per year and average words per post both exclude code snippets.

Here's how I got those numbers:

(append
 '(("Year" "Posts" "Total words" "Words per post" "Posts with pre" "Posts with images")
   hline)
 (cl-loop for i from 2001 to 2024
          collect
          (let* ((default-directory (expand-file-name (number-to-string i) "~/proj/static-blog/blog"))
                 (exclude (shell-quote-argument "emacs-news|review|week-ending"))
                 (files (format "find . -name '*.html' | grep -v -e '%s' | " exclude))
                 (posts (string-to-number
                         (string-trim
                          (shell-command-to-string (concat files "wc -l")))))
                 (words (string-to-number
                         (replace-regexp-in-string
                          "TOTAL: " ""
                          (shell-command-to-string
                           (concat files "xargs ~/bin/count-words | grep TOTAL")))))
                 (posts-with-images
                  (string-to-number
                   (string-trim
                    (shell-command-to-string (concat files "xargs grep -l '<img' | wc -l")))))
                 (posts-with-pre
                  (string-to-number
                   (string-trim
                    (shell-command-to-string (concat files "xargs grep -l '<pre' | wc -l"))))))
            (list i
                  posts
                  words
                  (/ words posts)
                  posts-with-images
                  posts-with-pre))))

And here's how I plotted the charts:

import pandas as pd
import matplotlib.pyplot as plt
df = pd.DataFrame(data[1:], columns=data[0])
# Create a figure with subplots
fig, (ax1, ax4, ax2, ax3) = plt.subplots(4, 1, figsize=(10, 12))
fig.suptitle('Blog Statistics by Year', fontsize=16)

# Plot Posts
ax1.bar(df['Year'], df['Posts'], color='lightblue', label='Other posts')
ax1.bar(df['Year'], df['Posts with pre'] , color='darkblue', label='With preformatted blocks')
ax1.set_title('Number of posts per year')
ax1.set_ylabel('Posts')
ax1.legend()

# Plot Posts
ax4.bar(df['Year'], df['Posts'], color='lightblue', label='Other posts')
ax4.bar(df['Year'], df['Posts with images'] , color='darkgreen', label='With images')
ax4.set_title('Number of posts per year')
ax4.set_ylabel('Posts')
ax4.legend()

# Plot Total Words
ax2.bar(df['Year'], df['Total words'], color='lightblue')
ax2.set_title('Total words per year')
ax2.set_ylabel('Total words')

# Plot Words per Post
ax3.bar(df['Year'], df['Words per post'], color='lightblue')
ax3.set_title('Average words per post')
ax3.set_ylabel('Words per post')
ax3.set_xlabel('Year')

# Adjust layout and display
plt.savefig(f)

I want to write more, and I want to enjoy going through my archive. Some posts are long, especially those that come from transcripts. If I sat with the ideas for longer, I might be able to make them more concise or break them up into more atomic notes; but I also want to get things out faster in order to learn from potential conversations. So I'm thinking about text structure and margins, since I want to re-read my blog more and I sometimes glaze over when there's lots of text.

More headings are a good start. Org Mode makes it easy enough to add them: M-RET calls org-insert-heading.

I'm experimenting with sticky tables of contents on large screens: one for "on this page" on the left, and one for long posts on the right.

On the individual post page, it'll just be the table of contents for the post, like this one.

It feels a little busy. If I write some Javascript, I might be able to use IntersectionObservers to highlight where we are. Maybe I can even squeeze the article's TOC into the "on this page" TOC if there is one, which means it can stay on one side.

I want to do other things with the margins. Doodles for fun? My cargo bike post started with the doodles pulled all the way into the margins, and then I moved them back into the text so that I don't have to worry about bumping into the table of contents.

Sometimes I use a sketchnote to help me think through or summarize a topic. It might be fun to use the sketchnote as a table of contents or overview, maybe even highlighting different sections of it as I scroll. handwritten.blog uses mix-blend-mode for hyperlinks. If the SVG isn't too big, maybe I can use the same kind of technique I used in animating SVG topic maps with Inkscape. Alternatively, I could put extracted regions from the sketchnote in the margins for context and visual variety.

Sidenotes? I like how A Scripter's Notes has both an active, expanding TOC on the right as well as side notes on the left.

Karthinks uses a sticky TOC and sidenotes:

A Blog With Relevant Information uses just sidenotes, so the rest of the page feels pretty clear:

Maybe keywords, like the Cornell method of note-taking? Kind of like sidenotes, but more structural, for skimming. I'm having a hard time finding a blog example, though. If I figure out side nodes, I could probably just use a different style to indicate those Cornell-style cues.

But there's so much more I want to do with the space. I like the stacking of https://notes.andymatuschak.org , and I like that you can link to a particular stacked state.

Then every so often, I come across a blog that is just clean and refreshing and then I want to get rid of everything in the margins.

There are plenty of CSS and JS resources out there. Figuring out what I want is the tough part.

Nudged by Thierry Stoehr's toot about my 23rd blogiversary, I've been thinking about how much I've learned thanks to blogging, and how I can get even better at learning out loud. I'm curious about what this could become over the next twenty years, when I'm in my sixties.

The first part of the text from the sketch is duplicated and expanded in the list below. There are a lot of different aspects I want to get better at, so I'm not going to try to work on all of them in one go, but it's fun mapping out so much room for growth.

Besides, maybe one of these aspects will resonate with you as either something you're learning or something you've figured out something about, and then you'll get in touch, and then we'll both learn more. Wouldn't that be cool?

I'm experimenting with getting stuff out in smaller chunks, so this is part 1 of 4: Starting.

I want to start building up more thoughts as chunks and relating them more logically instead of just chronologically. I've been using categories to organize my posts into buckets, but within a category, it's still chronological. I also have a large outline that includes posts from 2017 to 2024. I'd like to break it up into smaller topic pages so that they're easier to link to, although it's a little more challenging to search.

Now that I have a nice gallery view for my visual book notes, I wanted to organize the book notes by topic. I made an async Eleventy paired shortcode called gallerylist that lets me turn a list of links into into thumbnails and links.

I also modified org-html-toc to not include the Table of Contents header and to tweak the HTML attributes assigned to it.

(defun my-org-html-toc (depth info &optional scope)
  "Build a table of contents.
DEPTH is an integer specifying the depth of the table.  INFO is
a plist used as a communication channel.  Optional argument SCOPE
is an element defining the scope of the table.  Return the table
of contents as a string, or nil if it is empty."
  (let ((toc-entries
   (mapcar (lambda (headline)
       (cons (org-html--format-toc-headline headline info)
       (org-export-get-relative-level headline info)))
     (org-export-collect-headlines info depth scope))))
    (when toc-entries
      (let* ((toc-id-counter (plist-get info :org-html--toc-counter))
             (toc (concat (format "<div class=\"text-table-of-contents toc-id%s\" role=\"doc-toc\">"
                                  (if toc-id-counter (format "-%d" toc-id-counter) ""))
        (org-html--toc-text toc-entries)
        "</div>\n")))
        (plist-put info :org-html--toc-counter (1+ (or toc-id-counter 0)))
  (if scope toc
    (let ((outer-tag (if (org-html--html5-fancy-p info)
             "nav"
           "div")))
      (concat (format "<%s class=\"table-of-contents toc-id%s\" role=\"doc-toc\">\n"
                            outer-tag
                            (if toc-id-counter (format "-%d" toc-id-counter) ""))
              ;; (let ((top-level (plist-get info :html-toplevel-hlevel)))
              ;; (format "<h%d>%s</h%d>\n"
              ;;   top-level
              ;;   (org-html--translate "Table of Contents" info)
              ;;   top-level))
        toc
        (format "</%s>\n" outer-tag))))))))

(with-eval-after-load 'org
  (defalias 'org-html-toc #'my-org-html-toc))

This is what my visual book notes topic page looks like now:

I can improve on this by using the topic maps to determine next/previous links for the posts. Someday!

I customized my visual book notes - all view to show the thumbnails of the images, and I added You can get to it by going to the visual-book-notes category from a post and then choosing "All". I like the new "View slideshow" and "Shuffle slideshow" buttons I added.

I also fixed some of the broken images in older posts, so there should be 43 posts with images now.

Someday I want to add a way to go from the sketch in the slideshow to the post, but it might require upgrading the version of Photoswipe I have. I'm currently on 4.x, which hasn't been updated in years.

Inspired by the styling on Susam's blog feed, I followed this tutorial on using XML stylesheets and added XSL stylesheets for my RSS and Atom feeds. I have RSS and Atom feeds for all my posts as well as for each category or tag (ex: emacs).

To make that happen, I added a line like this to my RSS template:

<?xml-stylesheet href="/assets/rss.xsl" type="text/xsl"?>

and for my Atom template:

<?xml-stylesheet href="/assets/atom.xsl" type="text/xsl"?>

and those refer to:

<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet version="3.0"
                xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
                xmlns:dc="http://purl.org/dc/elements/1.1/"        xmlns:atom="http://www.w3.org/2005/Atom">
  <xsl:output method="html" version="1.0" encoding="UTF-8" indent="yes"/>
  <xsl:template match="/">
  <html xmlns="http://www.w3.org/1999/xhtml" lang="en">
    <head>
      <title>
        RSS Feed | <xsl:value-of select="/rss/channel/title"/>
      </title>
      <link rel="stylesheet" href="/assets/style.css"/>
    </head>
    <body>
      <h1 style="margin-bottom:0">Recent posts: <xsl:value-of select="/rss/channel/title"/></h1>
      <p>
        This is an RSS feed. You can subscribe to <a href=" {/rss/channel/link}"><xsl:value-of select="/rss/channel/link"/></a> in a feed reader such as <a href="https://github.com/skeeto/elfeed">Elfeed</a> for Emacs, <a href="https://www.inoreader.com/">Inoreader</a>, or <a href="https://newsblur.com/">NewsBlur</a>, or you can use tools like <a href="https://github.com/rss2email/rss2email">rss2email</a>. The feed includes the full blog posts.
You can also view the posts on the website at
<a href="{/rss/channel/atom:link[contains(@rel,'alternate')]/@href}"><xsl:value-of select="/rss/channel/atom:link[contains(@rel,'alternate')]/@href" /></a> .
      </p>
      <xsl:for-each select="/rss/channel/item">
        <div style="margin-bottom:20px">
        <div>
          <xsl:value-of select="pubDate" />
        </div>
        <div>
          <a>
            <xsl:attribute name="href">
              <xsl:value-of select="link/@href"/>
            </xsl:attribute>
            <xsl:value-of select="title"/>
          </a></div></div>
      </xsl:for-each>
    </body>
    </html>
  </xsl:template>
</xsl:stylesheet>

<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet version="3.0"
                xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
                xmlns:atom="http://www.w3.org/2005/Atom">
  <xsl:output method="html" version="1.0" encoding="UTF-8" indent="yes"/>
  <xsl:template match="/">
  <html xmlns="http://www.w3.org/1999/xhtml" lang="en">
    <head>
      <title>
        Atom Feed | <xsl:value-of select="/atom:feed/atom:title"/>
      </title>
      <link rel="stylesheet" href="/assets/style.css"/>
    </head>
    <body>
      <h1 style="margin-bottom:0">Recent posts: <xsl:value-of select="/atom:feed/atom:title"/></h1>
      <p>
        This is an Atom feed. You can subscribe to <a href=" {/atom:feed/atom:link/@href}"><xsl:value-of select="/atom:feed/atom:link/@href"/></a> in a feed reader such as <a href="https://github.com/skeeto/elfeed">Elfeed</a> for Emacs, <a href="https://www.inoreader.com/">Inoreader</a>, or <a href="https://newsblur.com/">NewsBlur</a>, or you can use tools like <a href="https://github.com/rss2email/rss2email">rss2email</a>. The feed includes the full blog posts.
You can also view the posts on the website at
<a href="{/atom:feed/atom:link[contains(@rel,'alternate')]/@href}"><xsl:value-of select="/atom:feed/atom:link[contains(@rel,'alternate')]/@href" /></a> .
      </p>
      <xsl:for-each select="/atom:feed/atom:entry">
        <div style="margin-bottom:20px">
          <div>
          <xsl:value-of select="substring(atom:updated, 0, 11)" /></div>
          <div><a>
            <xsl:attribute name="href">
              <xsl:value-of select="atom:link/@href"/>
            </xsl:attribute>
            <xsl:value-of select="atom:title"/>
          </a></div></div>
      </xsl:for-each>
    </body>
    </html>
  </xsl:template>
</xsl:stylesheet>

I come up with way more ideas than I can work on, and that's okay. That's good. It means I can always skim the top for interesting things, and it's fine if things overflow as long as the important stuff stays in the funnel. I'm experimenting with more ways to keep things flowing.

I usually come up with lots of ideas and then revisit my priorities to see if I can figure out 1-3 things I'd like to work on for my next focused time sessions. These priorities are actually pretty stable for the most part, but sometimes an idea jumps the queue and that's okay.

There's a loose net of projects/tasks that I'm currently working on and things I'm currently interested in, so I want to connect ideas and resources to those if I can. If they aren't connected, or if they're low-priority and I probably won't get to them any time soon, it can make a lot of sense to add quick notes and pass it along.

For things I want to think about some more, my audio braindumping workflow seems to be working out as a way to capture lots of text even when I'm away from my computer. I also have a bit more time to sketch while waiting for the kiddo to get ready for bed. I can use the sketchnotes as outlines to talk through while I braindump, and I can take my braindumps and distill them into sketches. Then I can take those and put them into blog posts. Instead of getting tempted to add more and more to a blog post (just one more idea, really!), I can try wrapping up earlier since I can always add a follow-up post. For some things, making a video might be worthwhile, so smoothing out my workflow for creating a video could be useful. I don't want to spend a lot of time filing but I still want to be able to find related notes, so automatically refiling based on tags (or possibly suggesting refile targets based on vector similarity?) might help me shift things out of my inbox.

I'm generally not bothered by the waste of coming up with ideas that I don't get around to, since it's more like daydreaming or fun. I sometimes get a little frustrated when I want to find an interesting resource I remember coming across some time ago and I can't find it with the words I'm looking for. Building more of a habit of capturing interesting resources in my Org files and using my own words in the notes will help while I wait for personal search engines to get better. I'm a little slow when it comes to e-mails because I tend to wait until I'm at my computer–and then when I'm at my computer, I prefer to tinker or write. I occasionally redo things because I didn't have notes from the previous solution or I couldn't find my notes. That's fine too. I can get better at taking notes and finding them.

So I think some next steps for me are:

• Post more toots on @sachac@emacs.ch; might be useful as a firehose for ideas. Share them back to my Org file so I have a link to the discussion (if any). Could be a quick way to see if anyone already knows of related packages/code or if anyone might have the same itch.
• See if I can improve my braindumping/sketch workflow so that I can flesh out more ideas
• Tweak my video process gradually so that I can include more screenshots and maybe eventually longer explanations