I never bothered to document how I do sidenotes because they’re basically a simplified version of other implementations. But several people have asked about them, so in the spirit of sharing, here are my Super Simple Sidenotes. No javascript, just html and css.
Tag: wordpress
(Heads up: this post is only of interest to IndieWeb folks / WordPress users!)
For the past few years, I’ve used self-webmentions as an “off-label” way to use my WordPress.org website as a digital garden, rather than using special software like Obsidian. Since I’m using my site as a digital garden, I extensively backlink everything I write — most posts have at least three, but often more, links to other posts on my website.
A few weeks ago, I decided to switch from self-webmention to self-pingback because I like what pingbacks display better. However, I’ve since discovered that there’s a long-known problem when there are too many self-pingbacks in a post, so that only a single self-pingback is sent each time the post is either published or updated.
Republishing a post ten times to get ten pingbacks to send seems unreasonable — so either I need to fix that behavior so all pingbacks send, or switch back to self-webmentions. Option B sounds easier since I don’t know how to code!
So I asked David, one of the Webmention plugin contributors, whether there might be a way to style self-webmentions differently. He set up a Github issue and asked me to document my use case:
The Open Heart Protocol is a simple way to add anonymous reactions to your blog, developed by Mu-An Chiou. (I’ll say simple, with the help of Benji — my eyes glossed over at the actual protocol page, short though it may be.) I added it to my site this week, so anyone can “heart” a post. Benji set up some other emoji options but I’m going to keep it simple for now and start with only a heart.
This came out of the conversation the IndieWeb’s been having about casual interactions. The Open Heart Protocol adds an easy option for readers to react to a post without having to comment or send a Webmention*. I like when other people’s websites have similar functionality — sometimes I don’t have a response so it’s nice when there’s another means to show appreciation.
On social media, likes and reactions can influence people to post differently, seeking reactions. I doubt that adding this heart feature will make me feel any pressure since I don’t get a notification — I’ll just notice it the next time I go back to that post, which could be the next day or months later. I write often enough and about such a broad range of topics, I’d naturally expect some to be more interesting to other people, and not getting anonymous likes on a post I wrote for myself isn’t going to deter me from writing more things for myself. The indie web is also small enough that I’ve been trained not to expect a ton of feedback on anything I publish here.
Since leaving a heart is anonymous, there’s no social pressure for any reader to “be seen” liking something. In that sense it’s not a two-way “relationship building” feature, but not everything needs to be. We can be friendly strangers — driving, we’ve got the courtesy wave, online, we have reacjis 😄
A bad look for Automattic
More info, added March 1 2024
I’ve been depressed and worried by other Automattic moves lately. This one makes me wonder whether it’s coming time to leave the WordPress ecosystem. I self-host a WordPress.org install and don’t have Jetpack installed, but between these philosophical differences and my hatred of the block editor, I grow less certain in WordPress as a product and increasingly disappointed towards Automattic as a company.
(And seriously, do they have any idea who uses Tumblr? Artists, creative folks, fandoms, queer folk, etc. — who either already hate AI and/or stand to be most harmed by it. They must have made a bankload in exchange for destroying their brand trust.)
Related reading: Software Has Eaten The Media by Ed Zitron
While there’s no single definitive answer, they all share the same theme: the pursuit of growth and executive greed.
I saw Nick Simson and Jan Boddez share their current WordPress plugins and thought I’d share too 😊 I have more than I realized, but also am thinking about adding more 😁
Last updated: August 8, 2025
The source of online social norms
Where our expectations for online interactions come from
Recently Sara and I have been lobbing ideas around about social norms for communication within the indie web*. I think Sara is onto something about our individual contexts for perceiving Internet social norms. Each online community operates a bit differently, developing a unique culture of interaction and expectation. (I also wonder if age is a factor — whether the mores of the time people first interacted with the Internet influence their expectations for online exchanges?)
* In this article, I use IndieWeb to refer to the set of protocols enabling personal websites to interact, especially Webmentions, as well as the community of people active in working on and using them. When I use lowercase “indie web,” I’m referring more broadly to the entire realm of independently operated, largely personal websites beyond corporate silos. This post focuses chiefly on the impacts of IndieWeb tools, though social norms are relevant across the whole indie web.
Sara’s latest article makes clear that social norms are different between online communities, so I’m making the assumption that blogging needs a different set of social norms than are in play on social media sites like Twitter or Tumblr. While blogging has been around for twenty-odd years, I still think the social norms around blogs and personal websites are as yet unfixed. Simply writing and publishing in public faces emotional obstacles, never mind sending mentions from your website to another person’s — who you may or may not know. Communication between websites faces many of the same social challenges as social media silos do, but adds additional impediments with technical hurdles and design differences.
ADDED 4 October 2023:
Google has announced a new token you can block to exclude your website from training Bard and Vertex AI: Google-Extended. To block your site from being used to train Google’s AI products, you should include this code in your robots.txt file:
# Google AI User-agent: Google-Extended Disallow: /
As a standalone token, that means that we don’t need to block Google from indexing our websites to block them from using our content to train their AI products.
⭐ ADDED 11 December 2023:
Except!!!! Google-Extended applies to their products but not their generative search results. So if you don’t want your content to appear in generative search results, you still need to de-index your site.
⭐ ADDED 19 December 2024:
Turns out that even if you have noindex on your page, if you have *also* blocked the Googlebot crawler in your robots.txt file, then it won’t see the noindex instruction. That means if someone else’s page that is crawled/indexed (?) gets linked to yours, Google will know the page exists but not that they aren’t supposed to index it. (If I am parsing correctly.) So, I have unblocked the Googlebot crawler in my robots.txt file 🙄
ORIGINAL ARTICLE (published 11 July 2023):
After thinking about it for a couple days, I’ve decided to de-index my website from Google. It’s reversible — I’m sure Google will happily reindex it if I let them — so I’m just going ahead and doing it for now. I’m not down with Google swallowing everything posted on the internet to train their generative AI models. I was pushed over the edge by posts from Jeremy Keith and Vasilis van Gemert, thanks y’all.
I don’t have Google Search Console set up for this website so I don’t know how much search traffic I get. My other blog, Cascadia Inspired, got about 200 hits in the past three months. I’m not going to cry over that — they’re mostly going to one 2015 article anyway (and probably not that helpful of a post, to my eye. Around New Year’s every year I usually get an influx of people to my ten-year-old guide to doing a creative annual review. Sorry folks, I’m sure someone else has written something better by now.) 😉
I’m going to start by pulling my websites out of Google search, then work on adding my sites to directories. Maybe I’ll even join a webring 💍✨
The Best Email Plugin for WordPress More than 500,000 websites are using MailPoet to keep in touch with their subscribers. Enjoy everything in one place. MailPoet works seamlessly with your favorite CMS so you can start sending emails right now. Quickly add content and images directly from your media library. No need to upload files […]
I created a list of my annual birthday playlists since 2002.
For this process, I used a third party program to extract the data, Excel to format it, and CSS to style it. I’m assuming you’ve used formulas in Excel before so you can plug in the appropriate cells, and have written simple HTML and CSS.
Getting the data
- I used Exportify to download a .csv file of all my Spotify playlists.
- Columns included that I used in this process:
- Track Name,
- Artist Name,
- Album Release Date,
- Album Name,
- Album Image URL
Track list
I used the CONCATENATE function in Excel to compile the HTML list to paste into WordPress. You could do this all in one step; I did it in multiple steps so I could experiment with showing different things, and so the cell didn’t get crazy long.
- I created a column with the link to the track:
=CONCATENATE("<span class=",CHAR(34),"h-cite track",CHAR(34),"><span class=",CHAR(34),"p-name tracktitle",CHAR(34),">",[CELL WITH SONG TITLE],"</span> by <span class=",CHAR(34),"p-author artist bandname",CHAR(34),">",[CELL WITH ARTIST NAME],"</span></span>") - I created another column that created the list item that I could paste into WordPress:
=CONCATENATE("<li>",B2,"</li>")
To keep the page from being super long, I added the track list to the page using the <details> property, which allows it to be clicked on and expanded. Then I used CSS to style “details > summary” to look like a link so people know to expand it.
Adding Microformats
I also included (experimental) microformats based on what I use for my books. Microformats allow other programs to correctly interpret specific types of data, such as a book or (in this case) song citation. No program currently reads microformatted playlists, but I figured better to do it now than wish I had done it later 😉 Once it’s done, the odds I’d go back and update it are low. I picked my own microformats because there is no accepted standard.
The microformats I used were:
- For the whole listing: “h-cite track”
- For the track name: “p-name tracktitle”
- For the artist name: “p-author artist bandname”
Apparently only the h- and p- values will actually be parsed so you could omit the other values.
Because microformats are added as classes, it also gives you an opportunity to style specific parts of the text. I chose to style the track title.
Year data
- I extracted the year data from their format by adding a column with this formula:
=TEXT(I2,"YYYY") - I calculated the number of songs per year by using COUNTIF:
=COUNTIF(J$2:J$23,I25)
where J2 through J23 contains the year data (created in step one), and I25 is a cell with the year in plain text. Adding the $ signs in the source data range is important so you can drag the formula down without it also shifting the source cells.
Graph by year
I followed this tutorial to create a stacked bar graph. Because I wanted multiple graphs on a page, I substituted class instead of id. I also used inline CSS for the grid display properties so I could define a different fractional breakdown for each graph.
Album art
The data included a link to the album art hosted by Spotify’s CDN. I created a column that created the image link with alt text:
=CONCATENATE("<img src="proxy.php?url=,CHAR(34),[CELL WITH ALBUM ART URL],CHAR(34)," width=",CHAR(34),"50px",CHAR(34)," alt=",CHAR(34),[CELL WITH ALBUM NAME]," by ",[CELL WITH ARTIST NAME],CHAR(34)," />")
Classify WordPress tags with term meta data
WordPress 4.4 introduced **term meta data** which allows you to save meta values for terms in a similar way to post meta data. This is a highly anticipated and logical addition to the WordPress system.
So far, the post and comment meta systems allowed us to add arbitrary data to posts and comments. This can be used to add ratings to comments, indicate your mood while you were writing a post, attach prices to product posts, and various other information you think is relevant to your content. As of the newest version of WordPress, **meta data can now be added to terms** which allows us to create features like default category thumbnails in a standardized way. This tutorial will show you how you can edit, update and retrieve these meta data for terms.
I add author as a tag to all my book reviews, and would like a way to see all the author tags in one spot. Adding term meta data to the tags sounds like a way to do that.
Added 12/8: David clarified that what I really need is a new taxonomy, so that author name would have its own field instead of being a tag. Then I could add term meta data to that taxonomy if I wanted to track, say, BIPOC or queer authors. Thanks David!