An h-card for my TiddlyWiki

I’m still spending lots of time trying to figure out how TiddlyWiki works, so some of this may seem hack-y, but it seems to get the job done. I’d love it if others who are using their TiddlyWikis as their primary website (and who have more experience than I) weighed in with their expertise or experience.

One of the core IndieWeb building blocks is having an h-card on your website to establish one’s identity, either for others to read or for computers and parsers to know who you are.

A valiant first attempt

To start out, I created an About Tiddler with the appropriate h-card and other microformats mark up and then put it into a tab in my right sidebar to make it easy to find.

Naturally, I ran into a problem when trying to throw this into indiewebify.me. Since TiddlyWiki websites are generated primarily by JavaScript and thus suffer from the js;dr problem, figuring out where to put and display an h-card was going to be an issue. I even tried throwing it into the Site Title in the control panel and hoped for the best, but in the end, the site title is really the shadow Tiddler $:/SiteTitle and like all the rest of the page is generated by JavaScript.

I muddled around a bit and even tried to add an h-card using a <link> in the <head>, but nothing seemed to work.

A hackable solution?

Ultimately, in frustration, I simply threw a simple h-card into the <head> just to see what would happen. It wasn’t terrible—the parser found it and displayed it as a success. Unfortunately I discovered that TiddlyWiki displayed my photo and name at the bottom of my page in the browser. I didn’t expect this, but at least it was a start.

Since this method seemed to work, I thought I’d continue the cheat and just throw in some in-line CSS so that the muddled h-card wouldn’t actually show on my page. I’d use this coded h-card in my <head> for computers and keep the somewhat more elaborate one for people in my about page.

What I did

So, for those who’d like the entirety of the solution, here’s what I did:

  1. I created a plugin tiddler entitled $:/plugins/indieweb/core/rawMarkup and gave it the tag $:/tags/RawMarkup
  2. I added the following lines of code to it and saved the Tiddler
    1. <a style="display:none" class="h-card u-url" href="http://tw.boffosocko.com/">
      <img src="https://www.boffosocko.com/logo.jpg" alt="" style="display:none" />Chris Aldrich</a>
  3. Profit!

Again, this works, but seems very hack-y to me. If you’ve managed to get a h-card into your TiddlyWiki in a different or more elegant way, I’d love to hear your thoughts.

Thoughts on delegated h-cards

Given the difficulty and trouble of all this, I’m sort of left wondering why–particularly since I’m using this site as a secondary one to my primary site–I couldn’t just throw in a link to the h-card for my primary site and call it a day? Unless I’m missing something, for some reason the way that representative h-cards are defined, they expect the h-card to point to the site they’re actually on.

Why couldn’t/shouldn’t I delegate my h-card on subdomains or other personal sites to point to the representative h-card on my primary site? What if parsers could follow other rel=”me” links on my site to find/intuit a representative h-card from one of those? While I could have lots of domains to better differentiate my online identity, why couldn’t I do that, but still have the same primary identity?

Watched "Making the Cut" Streetwear from Amazon Prime
Directed by Ramy Romany. With Tim Gunn, Heidi Klum, Naomi Campbell, Joseph Altuzarra. The designers pack their bags and head to Tokyo. Once they arrive, their assignment is to create a two-look streetwear collection. As one designer struggles to step out of their comfort zone, another designer looks to the local workers for inspiration.
Bookmarked The-Tiddlywiki-Manual by Luis Javier González CaballeroLuis Javier González Caballero (GitHub)
I will write the manual in latex using the easy Lyx latex text processor. Is a free and open source so you can install it. The latex platform assures as the high cuality of the pdf. Till now I have the cover page and a previous index. I need people to write the articles of the index. People who want to collaborate please email me: kewapo@gmail.com
Took a drive down to San Marino and back primarily through more well-to-do neighborhoods, though it did include a commercial section of Colorado Boulevard. Most people were out on evening walks or with dogs, though there were some in the commercial district on their way home or doing shopping.

I counted the number of people wearing masks versus those who weren’t.

  • 76 were wearing masks
  • 145 were not wearing masks
  • approximately 25 people who were walking away or at angles such that I couldn’t discern whether they were wearing masks or not.
Watched "Star Trek: Discovery" The War Without, the War Within from CBS All Access
Directed by David Solomon. With Sonequa Martin-Green, Doug Jones, Shazad Latif, Anthony Rapp. Burnham and the crew are faced with the harsh reality of the war during their absence. In order to move forward, Starfleet must use unconventional tactics and sources to take their next action against the Klingons.
Watched "Star Trek: Discovery" Will You Take My Hand? from CBS All Access
Directed by Akiva Goldsman. With Sonequa Martin-Green, Doug Jones, Shazad Latif, Anthony Rapp. With Georgiou at the helm of the plan to end the Klingon war once and for all, the USS Discovery crew struggles to fathom and tolerate her hostile tactics. Memories of past hardships are rekindled within Burnham.

Webmention for TiddlyWiki to enable website to website notifications and communication

What is a Webmention?

Webmention is a relatively recent web standard (or W3C recommendation) that allows notifications when one website mentions a URL on another website. Think of it like @mentions on social platforms, but instead of just working within a particular website from one account to another, they work across websites. Your website can now @mention my website!

For those who are interested in delving deeper into the idea and its implications, I’ve written a primer in the past : Webmentions: Enabling Better Communication on the Internet.

The goal is for other websites to be able to reference content in my TiddlyWiki website, and if those websites support sending the notifications as either webmentions (or the older pingbacks), I’ll get a notification that my content was referenced elsewhere on the web. This is just the beginning of allowing two way communication between websites.

My exploration today is how to quickly get these up and running on a public TiddlyWiki instance. The public part is important because webmentions won’t work for non-public URLs which includes private TiddlyWikis. If you’re wondering how to self-host a TiddlyWiki on your own domain, I’ve recently written up a tutorial for doing just that. At the end of this article, I’ll make a few notes about how one might use webmentions, particularly in a TiddlyWiki ecosystem.

I’ll start out by saying that writing a full JavaScript implementation of the Webmention spec is beyond my capabilities presently, but it could be something that TiddlyWiki core might implement in the future. (Maybe something like Lazymention which is written in node.js might be leveraged?)

Here I’m going to focus on using a third party service to do all of the heavy lifting and code our behalf. It’s relatively common, especially in the static website space, for websites to rely on third party or publisher services to either send or receive Webmentions on their behalf. Given my current knowledge of TiddlyWiki and how its internals work and my knowledge of Webmention services, I thought it would be quickest and easiest to look at using the Webmention.io service to handle receiving these @mentions from other sites on my behalf.

While this article may seem long, I’m hoping it’s detailed enough for those who are code averse to follow the recipe and do this themselves. If you can create a Tiddler, cut and paste some text, and follow the tutorial you won’t need to know anything about code. I did the entire thing myself in about five minutes from start to finish.

Receiving Webmention notifications for your TiddlyWiki

As a quick overview, we’re going to cut and paste a few lines of code into a special tiddler of our TiddlyWiki based website. This will allow us to do two things:

  1. Log into Webmention.io to create an account
  2. Allow other sites that send webmentions to us to find an endpoint on our TiddlyWiki website that accepts them on our behalf.

We’ll then rely on the Webmention.io dashboard to show us our notifications or received webmentions.

Logging into Webmention.io

Webmention.io requires you to log in with your domain name/URL and relies on you being able to authenticate yourself using it. Since I’m not aware of an IndieAuth or equivalent mechanism for using TiddlyWiki to log into Webmention.io, the quickest method to accomplish this is to rely on RelMeAuth using IndieAuth.com to log into Webmention.io using either a Twitter or GitHub account. From a non-technical perspective, we’ll be using either our Twitter or GitHub account and it’s OAuth2 security to log into the service.

First we want to put a link to our public TiddlyWiki website into the website field on either Twitter or GitHub using the profile settings of one of those services. Here’s what mine looks like on GitHub:

Screenshot of my GitHub accounts details featuring a link to my website

Next we want to place a corresponding link to the relevant service into the <head> of our TiddlyWiki site using one (it’s okay to use both) of the the following lines of code:

<link rel="me" href="https://twitter.com/username" />
<link rel="me" href="https://github.com/username" />

where you will replace the username in these links with the respective usernames of your accounts. (I’ll note that you don’t need to do this for both accounts, you can use either Twitter or GitHub.)

To place these lines into the appropriate location on your TiddlyWiki, you’ll want to create a tiddler with a name like $:/plugins/indieweb/core/rawMarkup and the tag $:/tags/RawMarkup.

Then cut and paste one or both of these links as appropriate into this tiddler and save it (and your TiddlyWiki).

You should now be able to go to webmention.io and enter the URL for your TiddlyWiki into the web sign in box and click “sign in”. The service will parse your website’s page, find the link to either Twitter or GitHub and present you with the appropriate sign in button for one or both of those services. Click on the button for your chosen service. IndieAuth.com will then take you to that service to log into it, or, if you’re already logged in, it will take you back to webmention.io to your new account.

Creating your Webmention endpoint

Within webmention.io you can now go to the “settings” page which will give you two more links which are your webmention and pingback endpoints. They will look something like this:

<link rel="webmention" href="https://webmention.io/example.com/webmention" />
<link rel="pingback" href="https://webmention.io/example.com/xmlrpc" />

where example.com will be replaced with the URL for your website.

Now you should cut and paste these two <link>s into the same tiddler you created above: $:/plugins/indieweb/core/rawMarkup. Now save the Tiddler and your TiddlyWiki. (Be sure to leave the previous links in case you need to log back into webmention.io in the future.)

You’re done!

That hopefully wasn’t too hard.

But what does this do? When another website links to your website and sends you a notification, the code on your page will delegate the receipt of the webmention to webmention.io which will verify that the sending site has your URL on a publicly viewable page (this helps to cut down on spam problems that pingbacks used to have). It will then store the notification for you.

If you need a reminder to check them occasionally, maybe you could add a Tiddler with the link to your dashboard to appear on your wiki when you open it next.

Perhaps in a future tutorial I’ll delve into the specifics of actually showing these mentions directly within your TiddlyWiki on the Tiddlers to which they relate.

Optional Webmention badge

Some may notice that I’ve put a small Webmention badge into the footer of my TiddlyWiki site to visually indicate to human readers that the site accepts webmentions. You can optionally do this for fun if you’d like.

Sending Webmentions with TiddlyWiki

Sending Webmentions seems to be an issue as the fragment-based URLs that TiddlyWiki uses as permalinks using JavaScript seem to cause an issue with many receivers. They apparently have problems resolving and parsing pages due to js;dr related issues. I would send webmentions manually, but most receivers I’m aware of have this js;dr problem. I’m not sure if there is an easy way around this issue.

Hyperchats, Wikis, and Open Educational Resources

What’s interesting about supporting Webmention, particularly from a TiddlyWiki perspective, is that if my TiddlyWiki is notified of mentions of it from outside sources, I can quickly cut and paste those responses directly into my Wiki pages in a pseudo-comment section similar to the comments section on this post which could serve as a model. If those mentions of a particular Tiddler are from other TiddlyWikis, I could also choose to drag-and-drop (or import) them into my TiddlyWiki!

If I want to go a step further, I could transclude those imported Tiddlers into the Tiddler that they’re in reference to. Perhaps I might do this under a heading of “@mentions” or perhaps “Comments” and suddenly I’ve got a way of displaying two-way conversations on my own TiddlyWiki site.

As is mentioned in Kicks Condor’s post about Hyperchat Modality, one could potentially use custom theming information (cleverly named “whostyles” in that post) from imported Tiddlers (or themes from other platforms) to identify the web identities of the sites they’re received from. I’ll also mention Kicks’ post about Hypertexting which is related and forms an interesting melange of websites, blogs, wikis, and hypertext of all kinds to form a more interesting web medium.

For the broader information collecting and building or academic communities (and here I can’t help thinking about the Open Educational Resources space that uses Creative Commons licensing to build their teaching resources), one could use these webmentions as a means of notifying sites that their content has been used, changed, or updated (typically those using Creative Commons will credit their source using a link). Then the receiver of the notification could optionally add to or change their version or even just collect the changes. This becomes particularly useful when the Tiddlers can be easily dragged and dropped between TiddyWikis!

As an explicit example, imagine a professor who wanted to build a textbook anthology, but who could do so by dragging and dropping a variety of Tiddlers from one site to another to create a quick textbook or reader for their students. This idea is particularly exciting to me when combined with the idea behind TW5-powered ebooks!

What could you imagine doing with webmention notifications on your TiddlyWiki site?

Replied to IndieWeb and TW by Tristan (TiddlyWiki Google Group)
Hey guys,
I read about IndieWeb some time ago and managed to dive into it a little the last days. As far as I can tell TW would be a perfect fit for this and since we are moving to federation it should be quite easy to integrate - at least that is what I thought... I found Hangout #52 when Jeremy mentioned IndieWeb - but unfortunately these 5 seconds is all there is about this matter.
First of I thought adding the "rel-me" to the single page version was all one had to do, but I think that was naive ;)
My next idea was that maybe I could tweak the static page generation template but that again would destroy dynamic syndication...
So my question is (please bare with me if I missed some source) does anybody has something running or some pre-release stuff in this direction?
And if not (most probably) do you have any idea/advice/hint...?
Cheers
Tristan
TiddlyWiki is a very solid looking platform for IndieWeb use (essentially using TW as a personal website). I am having some issues with the js;dr (cURL-ability) issue, but there are some methods for using it to create a static website.

To help others out and provide some examples, I’ve started a stub page for TiddlyWiki on the IndieWeb wiki, which uses MediaWiki. (If you have the rel=”me” stuff set up in the second article about h-card linked below, you should be able to use your TiddlyWiki URL to log into the IndieWeb wiki and document yourself, changes, and ideas.) 
 
I’ve been writing up some of my explorations using TiddlyWiki for IndieWeb on my primary website (with copies on my TiddlyWiki) for those who are interested in taking a look or experimenting for themselves.
For those interested in following my particular progress, you can find all of my related content on my site with this tag: https://boffosocko.com/tag/tiddlywiki/ or follow via RSS at https://boffosocko.com/tag/tiddlywiki/feed/.
 
For those who are interested in delving in further, I might suggest looking at my IndieWeb/TiddlyWiki To Do List for things that could potentially be worth working on next:
  • adding proper h-entry and h-feed microformats markup 
  • adding microformats markup and/or customizing tiddlers as articles, notes, bookmarks, and other types of posts
  • backfeed of comments from Twitter, Flickr, Instagram, GitHub, Mastodon using Brid.gy
  • adding a full implementation of webmentions for core
    • figuring out the js;dr problem for sending webmentions
  • Adding set up to potentially allow posting to TiddlyWiki using Micropub (may run into js;dr problems?)
  • Look into using TiddlyWiki as a Micropub server
  • Adding header information for using TiddlyWiki with Microsub readers (this should be fairly easy)
There is a lot of open source code in a variety of languages that does a lot of this stuff already in addition to lots of examples, so do search the IndieWeb wiki or ask in the IndieWeb chat for help or pointers so that you won’t necessarily need to reinvent the wheel. 
Bookmarked At the Interface of Algebra and Statistics by Tai-Danae Bradley (arXiv.org)
This thesis takes inspiration from quantum physics to investigate mathematical structure that lies at the interface of algebra and statistics. The starting point is a passage from classical probability theory to quantum probability theory. The quantum version of a probability distribution is a density operator, the quantum version of marginalizing is an operation called the partial trace, and the quantum version of a marginal probability distribution is a reduced density operator. Every joint probability distribution on a finite set can be modeled as a rank one density operator. By applying the partial trace, we obtain reduced density operators whose diagonals recover classical marginal probabilities. In general, these reduced densities will have rank higher than one, and their eigenvalues and eigenvectors will contain extra information that encodes subsystem interactions governed by statistics. We decode this information, and show it is akin to conditional probability, and then investigate the extent to which the eigenvectors capture "concepts" inherent in the original joint distribution. The theory is then illustrated with an experiment that exploits these ideas. Turning to a more theoretical application, we also discuss a preliminary framework for modeling entailment and concept hierarchy in natural language, namely, by representing expressions in the language as densities. Finally, initial inspiration for this thesis comes from formal concept analysis, which finds many striking parallels with the linear algebra. The parallels are not coincidental, and a common blueprint is found in category theory. We close with an exposition on free (co)completions and how the free-forgetful adjunctions in which they arise strongly suggest that in certain categorical contexts, the "fixed points" of a morphism with its adjoint encode interesting information.