Categories: sharing

RSS - Atom - Subscribe via email

Looking at my blog post stats by year

| blogging
blog-stats.svg
Figure 1: Blog statistics

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))))
Year Posts Total words Words per post Posts with pre Posts with images
2001 3 438 146 0 0
2002 31 4336 139 0 0
2003 863 64953 75 0 59
2004 967 125789 130 2 98
2005 679 135334 199 4 40
2006 869 171042 196 19 42
2007 489 107011 218 33 32
2008 380 121158 318 85 57
2009 400 175692 439 81 20
2010 335 160289 478 93 19
2011 324 163274 503 93 28
2012 286 124300 434 111 12
2013 273 173021 633 172 11
2014 272 186788 686 138 30
2015 173 133682 772 82 36
2016 25 11560 462 13 6
2017 37 24063 650 6 2
2018 66 46827 709 7 8
2019 18 13054 725 3 6
2020 13 6791 522 4 5
2021 31 17389 560 8 16
2022 21 11264 536 4 9
2023 68 47188 693 26 52
2024 74 58439 789 27 40

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)
View org source for this post

Thinking about webpage margins

| blogging, design

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.

2024-11-06_16-42-18.png
Figure 1: Screenshot of my blog with tables of content on both sides

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

2024-11-06_16-43-45.png
Figure 2: Screenshot of individual post

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.

2024-11-06_16-45-02.png
Figure 3: Screenshot of doodles in the margins

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.

2024-11-06_16-46-00.png
Figure 4: Screenshot from A Scripter's Notes

Karthinks uses a sticky TOC and sidenotes:

2024-11-06_16-51-50.png
Figure 5: Screenshot from karthinks.com showing table of contents and sidenotes

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

2024-11-06_17-07-37.png
Figure 6: Screenshot of sidenotes

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.

2024-11-06_16-47-44.png
Figure 7: Stacked items from Andy's working notes

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.

View org source for this post

How do I want to get better at learning out loud? Part 1 of 4: Starting

| sharing, blogging, writing

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.

Noticing

I think of this as seeing the opportunity for learning, which I sometimes miss out on because I take things for granted or I don't connect the dots. I can get better at this by slowing down and by borrowing other people's questions. I've been giving myself more time to write and draw these days. It feels a little weird ignoring the other tasks on my TODO lists that are more clearly defined or that are related to other people's requests, but I like the way this feels.

Imagining

It's easy for me to come up with all sorts of ideas for things I want to tweak about Emacs. I can get better at this by reading more about what other people are doing and what other capabilities are there.

I can also get better at exploring ideas for non-Emacs topics, like ways to respond to parenting situations and things I can do support the causes I care about. I can expand my toolbox by reading books and blog posts, and depending on the topic, I can also listen to podcasts and videos.

Bumping into things

It's useful to bump into things I might not think of looking for. One way to do that would be to save various manuals on my e-ink notebook and phone so that I can read them during quiet moments.

I've added some randomness to shuffle old blog posts and tasks, although browsing through this tends to be low-priority. (I never get to the bottom of my reading/thinking list!)

"On this day" might be interesting too. This is more for fun and serendipity. I used to have it on my blog, and it should be pretty easy to reimplement using 11ty.

Learning from others

I'd like to spend more time thinking about and building on other people's ideas, maybe starting with Emacs and then branching out to other topics.

I also want to get back to reading people's blogs through an RSS reader so that I can get a slightly wider view of people's interests and learn more about non-Emacs things. I've added Feeder to my phone.

Taking notes

I capture a lot of snippets in my Org Mode inbox. I'd like to get better at adding some more context and quick thoughts when I create a note so that it's easier to pick up the idea later on. I do most of this capturing on my phone, so I'm getting the hang of slowing down and adding some more notes.

I also want to get better at actually reviewing and refining those notes. My inbox tends to grow and grow, especially when I get interrupted by an interesting idea. I have some writing/editing time while I keep A+ company during virtual school, so it'll be fun revisiting the notes I stashed.

Collecting

This is about putting a bunch of related notes together, which I usually do by refiling them. It's probably also related to clustering, which I'll get to in the next post about thinking.

I do most of this collecting on my computer, so I can write a few Emacs functions to make it easier. For example, I have some code to do the opposite of refiling so that while I'm looking at a topic, I can pull in a subtree from somewhere else.

Some buckets collect thoughts for blog posts, some for projects, some just for areas I'm interested in. I feel like I tend to lose track of the buckets that I'm collecting thoughts into–the list of slightly-less-active thoughts, as the active thoughts are easily findable. Maybe this is okay.

Expanding

I want to get better at going from a microblog post/toot or a quick index-card-type sketch to a longer blog post or sketchnote.

Actually, since my current workflow focuses mostly on blog posts, I think this part is more about contracting: picking out a small thought that I can share right now instead of waiting until I write the rest of it. This idea might also include picking a medium-sized chunk and making it the first post in a series, and the current post is an experiment in doing so. I'm a little hesitant to do so because my brain tends to wander off towards the end of a series, but it might be worth an experiment.

I'll also need some code to make it easier to add links between things in a series, which could be manual (handy for other non-series links too) or possibly something handled on the 11ty side (like How to build a blog series with 11ty/Eleventy).

I can also experiment with spreading posts out by scheduling them as Org tasks. I've theoretically added support for holding back future-dated posts in my 11ty config, but I think managing that on the Org side might be easier for now.

Boosting

This is linked to learning from others. Boosting what other people have said or thought can be a quick and easy way of learning out loud and enlarging the conversation. I can do more of that through Mastodon toots, rolling them up into my blog. I often add snippets to my config based on the things I come across in Emacs News.

I also like the commentary on blogs like Irreal and would like to grow into things like that.

Next up: thinking, making, and sharing

Over the next little while, I'm looking forward to fleshing out the next sections. Let's see if breaking things up into posts works…

  • Thinking: trying; reflecting; developing thoughts; shifting; reviewing; clustering; building on; searching (local, web, exact, approximate); questioning; reframing
  • Making: organizing; writing; editing; drawing (sketchnotes, doodles); diagramming; plotting; charts; coding; showing
  • Sharing: designing; linking; mapping thoughts; joining the conversation
View org source for this post

How to Take Smart Notes - Sonke Ahrens (2017)

| visual-book-notes, writing, pkm, productivity, learning

I want to get better at making sense of things and sharing what I'm learning. Nudged by Chris Maiorana's post on Second Brain, Second Nature, I borrowed How to Take Smart Notes by Sönke Ahrens (2017). Here are my notes.

Text from sketch

How to Take Smart Notes - Sönke Ahrens. 2017 - sketched by Sacha Chua 2024-10-26-01

  • Niklas Luhmann: everything - writing; slipbox, Zettelkasten
  • Instead of: brainstorm (blank paper), then research (wrong topic? wrong understanding?), then write
  • Try a loop of:
    • Read with a pen in hand: short notes, your own understanding
    • Refine and connect your notes: elaborate.
    • Notice clusters
    • Develop into topics, write about them
    • reading ⇒ thinking ⇒writing
  • Types of notes
    • Fleeting: try to review within a day
    • Permanent: complete sentences, makes sense at a glance
    • Literature: short; use own words
    • Project: can be archived after
  • Work on multiple projects so you can switch between them and they can feed each other.
  • Things to think about.
    • Why is this interesting?
    • Why is this relevant?
    • How does this relate to other things?
    • What's not mentioned?
  • Numbering, physical references: let ideas mingle
    • 22, 22a, 22a1, 22b, 23, …
  • Retrieval cues
  • Saving cut pieces = easier editing
  • Verbund: by-products = resources
  • Writing → break it up!
    • reading, understanding, reflecting, getting ideas, connecting, distinguishing, rewording, structuring, organizing, editing, rewriting
  • Positive feedback loop: reading with pen, writing permanent notes, writing arguments…

The book goes into detail about Niklas Luhmann's Zettelkasten or slipbox system. Lots of people have written about Zettelkasten and various implementations. There's even a whole micro-industry around Notion templates. So I won't spend a lot of time right now describing what it is or what the key aspects are. I can focus instead on what that means to me and what I want to do with it.

Writing

By doing everything with the clear purpose of writing about it, you will do what you do deliberately.

I like chapter 5's focus on keeping writing in mind. I want to push most things towards writing and drawing (posts, code, whatever; public as much as possible) because it's a good way for me to remember and to learn from others. It's a reminder to not try speeding through my to-do list; it's good to slow down and write about stuff.

Following the work

I only do what is easy. I only write when I immediately know how to do it. If I falter for a moment, I put the matter aside and do something else.

I always work on different manuscripts at the same time. With this method, to work on different things simultaneously, I never encounter any mental blockages.

During my discretionary time, I usually follow the butterflies of my interest: working on what I feel like working on, moving on to something else when I get stuck. Sometimes I will work on something I have to do because it's got to be done, but those moments are rarer. Amidst all those productivity books that exhort you to focus on a limited number of things, it was nice to know that Luhmann also jumped from interest to interest, that the process of accumulating these notes builds things up into clusters with critical mass, and that these good habits build themselves up through positive feedback loops.

Different types of notes

I do all right capturing fleeting notes on my phone, but I want to get better at turning my fleeting notes into literature notes and permanent notes. I'd like to review them more frequently and spend some more time fleshing them out, with the goal of eventually turning more of those things into blog posts and code that I can share as I learn out loud.

I also don't really have a good way of putting topics "near" other topics yet. Categories are a little coarse, but maybe topic maps are a good starting point. It would be nice to have a quick way to put something before/after something else, though.

Different types of tasks

Writing a paper involves much more than just typing on the keyboard. It also means reading, understanding, reflecting, getting ideas, making connections, distinguishing terms, finding the right words, structuring, organizing, editing, correcting and rewriting.

I wonder if making these distinctions between the subtasks of writing will make it easier for me to break writing down into tiny tasks that can be completed and gotten out of my brain.

Thinking about connections, thinking about what's missing

I want to get better at connecting ideas to other things I've thought about by linking to blog posts or notes. That might also help me build up thoughts out of smaller chunks, which would be helpful when it comes to working with fragmented thoughts.

Thinking about what's not in the picture is hard, and that kind of critical thinking is something I want to practise more. I can pay attention to the follow-up questions I have so that I can get a sense of where to look for more insights or what to experiment with. Questioning the way something is framed is also good and something I don't do often enough.

For example, I wanted to dig into this quote:

Luhmann’s only real help was a housekeeper who cooked for him and his children during the week, not that extraordinary considering he had to raise three children on his own after his wife died early.

I ended up doing a tiny bit of research on my phone and putting it into Niklas Luhmann's Zettelkasten and life with kids (the kids were in their teens at the time, so they were probably a lot more independent than A+ is at the moment).

Related

View org source for this post

Organizing my visual book notes by topic

| blogging, 11ty

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.

New table of contents code
(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:

2024-10-25_09-23-26.png
Figure 1: Screenshot of visual book notes

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

View org source for this post

Added a gallery and slideshow view for my visual book notes

| 11ty, blogging

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.

2024-10-23_14-09-26.png
Figure 1: Screenshot of my visual book notes gallery

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.

View org source for this post

How sketchnotes fit into my personal knowledge management

| pkm, drawing

Text from sketch
  • worth doing even if you don't feel like you can draw well
    • really, I just draw stick figures
  • good for your own thoughts and other people's
  • own thoughts:
    • non-linear
    • visual metaphors & organizers can be helpful
    • can be a launchpad for more details
  • other people's thoughts: distill key points from a talk, book, etc. using my understanding
  • visual cues make it easy to see important things first
  • doodling is fun
  • IDs help with linking (ex: 2024-10-17-02)
  • How I use sketchnotes:
    • Flesh out an idea, especially during non-computer time
    • Sketch talks or books to make them easier to review
    • Optical character recognition (Google Cloud Vision API, etc.) to blog text: I edit this to provide a good text alternative in blog posts
  • My evil plan
    • Sketchnotes are very shareable
      • People are always looking for visuals to add.
    • When people share them, they usually tell me about it
    • I get to find out what else people are thinking about & learning from.
    • More learning! More fun!
    • It's also a nice way to give back to people who've shared what they learned
      • Then they might share more!

I've been enjoying using sketchnotes as an idea launchpad for audio braindumps or blog posts, as a quick way to review the key points of a book or talk, and as a way to participate in the larger conversation. It's easy for me to link to sketches and extract the text within them.

Someday I'll probably improve my ability to search for the text within sketches. Right now, I just go by filenames and the text in my blog posts. I can probably make something that goes through the text annotations in the JSON files from Google Cloud Vision, or maybe I can turn them into a text file that can be updated when I write a blog post. Hmm, that actually sounds pretty straightforward, I should go do that…

Examples of my evil plan working:

Mwahaha!

View org source for this post