Bookmarked Nightingale (WordPress.org)
Theme for NHS organisations based on the NHS Digital frontend framework. Highly customisable for all types of NHS organisations, from campaign sites to primary care providers to arms length bodies to community practices. This can also be used for non NHS organisations.
via Kevin Marks, who asks if we could add microformats to it, from 

Displaying Webmentions on TiddlyWiki

I’ve previously written about setting up receiving Webmention for TiddlyWiki by logging into webmention.io and creating an account to delegate the receipt of the notifications.
 
Naturally, these notifications can be more fun for cross-site conversations if one has the ability to display the webmentions on the posts to which they relate. There are probably a number of ways of doing this, but following the TiddlyWiki advice of keeping Tiddlers as small as possible, it seemed like creating a tiddler for the response and then transcluding or embedding it into the original would be the best course of action.
 
At the recent Gardens and Streams: Wikis, Blogs, and UI—a pop up IndieWebCamp session there was some discussion on internal bi-directional linking in wikis, but I thought it would also be fun to show off bi-directional linking between my wiki and other websites. To do that will require displaying at least some Webmentions.
My wiki currently doesn’t have very many webmentions or incoming links, but after writing about a Bookmarklet for pasting content into TiddlyWiki, I got an email from Anne-Laure Le Cunff that she’d used some of the code to write a bookmarklet for Roam Research. Since her article didn’t send a webmention, I used Telegraph to manually force her article to send my wiki a Webmention so my account would have a record of it for the future for potential exporting or other use.
Now I’d like to display this webmention on that tiddler. Doing it automatically would be great, but I thought, since I don’t expect to receive many on my wiki that I ought to try out a manual set up to see how things might work and how I might display them if they were automated.
Since I had created that bookmarklet, I used it to copy and paste the text from Anne-Laure Le Cunff‘s website into a new tiddler. I then massaged it a bit to format it to look like a response and I’ve transcluded it into the original post under a heading of Responses.
The side benefit of doing this is that the stand alone tiddler that has the link and the context from her post also sits in my wiki as a bookmark of her post as well. As a result, I get a two-for-one deal: I get the bookmark of her post with some context I’m interested in, but my original post can now also display it as a response! Now I can also use that bookmark in other places in my website as well. If only one could do this so easily in other CMSes?!
I’ve yet to hear of another example of this in the wild, so unless I’m missing something, this may be the first displayed Webmention on a TiddlyWiki in the wild.

Next steps

Data formats

TiddlyWiki has lots of ways to display data in Tiddlers, so perhaps one might use various fields in a bookmark tiddler to create the necessary comment display. This could give a more standardized method of displaying them as well. It could be particularly useful if someone was using a microformats parser to import the data of such mentions. If this were the case, then the tiddler that is being commented on could do a filter/search for all tiddlers in the wiki that mention it and transclude the appropriate pieces in a list format with the appropriate mark up as well as links back to the individual tiddlers and/or the links to the sending site.
I’m curious if others have ideas about how to best/easiest implement the display portion of webmentions on a public TiddlyWiki? Since I’m also hosting my entire TiddlyWiki on GitHub pages, there might be other potential considerations if I were to be hosting it statically instead. This may require some experimentation.
I’ve got a few mental models about how one might implement showing Webmentions in TiddlyWiki, but it may take some more thinking to figure out which way may be the best or most efficient.

Automation

I don’t anticipate a lot of incoming webmentions to my wiki at present, but if they become more prevalent, I’ll want to automate the display of these notifications somehow. This will take some thought and coding as well as more knowledge of the internals of TiddlyWiki than I’ve currently got. If someone with the coding chops is interested, I could probably brainstorm a set up fairly quickly.

Microformats

It would also be nice to be able to have full microformats support in TiddlyWiki so that the stand alone “bookmark” mention works properly, but also so that the transcluded version might have the correct mark up. This may rely on the two things to be properly nested to make them work in both contexts.

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?

Annotated edit (indieweb.org)
An edit (AKA diff, change) is a special type of reply that indicates a set of suggested changes to the post it is replying to. A collection of (presumably related) suggested edits in open source is often called a patch or pull request.
In part out of laziness and lack of an easy way to implement a workflow and mark up, I will post content (bookmarks or notes) to my website and (pseudo-)syndicate all or portions of it to the IndieWeb wiki as either edits or as links to See Also sections of pages. “Pseudo” because the content isn’t always a 1 to 1 match.

To document the change, I’ll include a syndication link on my website to the permalink for the edit on the wiki. Having subscribed to feeds of wiki changes/edits before the user interfaces are far less than useful/ideal, so having a better contextual bookmark on my website makes more sense for readers while somewhat reformatting things for the readers of the wiki (a related but somewhat different context) works better for that, but still provides bi-directional links and references.

Perhaps I’ll create an edit post kind in the future? For the moment I’ll just post some (like this one) as an annotation? Small steps…

Example bookmark of a commonplace book: https://boffosocko.com/2020/03/14/neils-noodlemaps/
with a syndication link to the diff of the addition to the example on the IndieWeb wiki: https://indieweb.org/wiki/index.php?title=commonplace_book&oldid=69042

Next we’ll want an account on Brid.gy for Twitter. This will allow us to publish from our website to Twitter; it will also allow us to reverse syndicate reactions  from on Twitter back to our posts using Webmention.

(Publishing this way will require Microformats: Your theme will need the proper microformats support to use this method, but again other methods are available.)

Replied to One Avatar To Rule Them All by Terence EdenTerence Eden (shkspr.mobi)
Someone took a nice photo of me recently. I'd like to use it as my avatar photo everywhere to present a consistent image. This is not easy to do. I've had to manually change it on a dozen different Slacks, a bunch of social networks, a few forums, all my email accounts, and I'm still not done. I jus...
Gravatar has some not-so secure issues relating to privacy that allow reverse lookups which isn’t good and could potentially leak information people don’t necessarily want to release.

My favorite solution to this problem and a few related others (like updating my bio and where you can find me on social media) is the meta data route using something like Microformats. Since I provide an h-card on my website’s homepage, it should be relatively easy for any service to take my URL as my identity (rather than one of my thousands of email addresses) parse my page and find my name, photo, bio, etc. and display them.

Nearly every social silo on the planet wants all of these details, so why should I need to incessantly have to input them manually much less keep them up to date? And I’ve yet to see a social service in the wild that hasn’t asked for my URL, so it’s obviously pretty universal.

Jeremy Keith‘s Huffduffer is a great example of something that already uses this data nicely. It doesn’t pull in my photo (though I think at one time he did have a set up that would poll Flickr avatars?) or my bio, but the “Elsewhere” section of my Huffduffer account lists where you can find me on dozens of social media accounts as well as my own websites. Huffduffer can do this because I gave it my domain name and the service parses my page looking for the rel="me" tags on my homepage. It could easily pull in my other provided data.

Incidentally Kevin Marks has also proposed a distributed verification system (remember the problem that Twitter had of attempting this?) that uses the rel="me" idea.

I’ll note that my own website will parse yours to pull in the author name, URL, and avatar to display a reply context for this response on my website! So hooray for microformats! (Though I’ll note that I did modify them a tad for my own idiosyncrasies.) My site does this with David Shanske‘s excellent Post Kinds plugin uses Parse This, which parses for microformats, JSON-LD, and then, if nothing is found it falls back to Open Graph Protocol. He’s been extending it lately to cover a handful of the bigger snowflake services like YouTube, IMDb, etc. to cover some additional edge cases that don’t have good mark up. Incidentally Aaron Parecki has a version of something like this called X-ray, which he uses for various things including microsub readers, not to mention the variety of other parsers available.

I’m sure there may be other versions of this in the wild, but it would be cool to see more social services provide functionality like this.

Read Extending Microformats for Fun and Not Much Profit With Pokemon by Charlotte AllenCharlotte Allen (charlotteallen.info)
Hey.
Hey you.
Want a new Microformat type you never asked for? About Pokemon?
No?
Too bad.
Well, okay, I’ll make a deal. I get to ramble about my niche nerd hobby, and you get to see an example of how Microformats can be extended to do whatever you want! Enter Pokemon
awesomesauce…
Replied to Proposing a Microformats2 Markup for Licensing Information by Jamie TannaJamie Tanna (Jamie Tanna)
Some recommendations for how to mark up licensing information with Microformats, for making license information machine-discoverable and machine-readable.

Great write up Jamie. Some interesting things to think about and lots of useful examples.

I suspect that for most personal websites the idea of fair use will give people enough protection for reply contexts. Of course it will depend on their jurisdiction as fair use can vary by country or potentially even within countries in terms of how it is applied.

I would almost have to think that barring particular legislation and precedent that people/companies who are explicitly providing Open Graph Protocol or similar meta data on their websites are explicitly granting a license to use that content as the only use for that data on most systems is to provide it for creating contexts on services like Facebook, Twitter, etc. Facebook likely created OGP as a proprietary format to give itself broad legal protection for just such use cases, though I suspect they parse pages and take titles or other snippets when OGP doesn’t exist. Naturally some large systems like WordPress may push OGP into code without the site’s owners being aware of what they’re potentially giving away, so the area is really murky at best. It would be beneficial to consult an attorney to see what their best advice might be or if there are precedents with respect to these areas.

For future reference, here is the relevant section for Fair Use from Title 17 of the Copyright Law of the United States:

107. Limitations on exclusive rights: Fair use40

Notwithstanding the provisions of sections 106 and 106A, the fair use of a copyrighted work, including such use by reproduction in copies or phonorecords or by any other means specified by that section, for purposes such as criticism, comment, news reporting, teaching (including multiple copies for classroom use), scholarship, or research, is not an infringement of copyright. In determining whether the use made of a work in any particular case is a fair use the factors to be considered shall include—

(1) the purpose and character of the use, including whether such use is of a commercial nature or is for nonprofit educational purposes;

(2) the nature of the copyrighted work;

(3) the amount and substantiality of the portion used in relation to the copyrighted work as a whole; and

(4) the effect of the use upon the potential market for or value of the copyrighted work.

The fact that a work is unpublished shall not itself bar a finding of fair use if such finding is made upon consideration of all the above factors.

Exploring Pine.blog

I’d noticed Pine.blog before at a previous IndieWebCamp, but not had time to delve into it very deeply. Seeing some of what Brian Schrader has been working on while following IndieWebCamp Austin remotely this weekend has reminded about the project. As a result, I’ve been spending some time tonight to check out some of the functionality that it’s offering. In part, I’m curious how similar, or not, it is to what Micro.blog is offering specifically with respect to the idea of IndieWeb as a Service which I’ve recently begun documenting. It’s always great to see the growing diversity and plurality of solutions in the space.

My brief prior experience with the platform was simply adding my website to their discovery service. Tonight I’ve found that Pine.blog has got a very pretty little feed reader experience with some fun discovery functionality. You can apparently create multiple timelines to follow content, but one needs a paid account for more than one timeline. It allows both following sites as well as recommending them to others. It also appears that Brian is supporting the rel=”payment” microformat as I see at least one feed that has a “$ Support” button in the Pine.blog interface to allow me to go to the site’s payment page to support it. I think this may be one of the first times I’ve seen this functionality in an app in the wild outside of the Overcast podcast app which added it a couple of years ago.

It has webmention support, so I can “like” things within the reader and notify others. Without a paid account I don’t see the ability to reply to or mention other sites though. It also looks like it allows for import/export of OPML too, though I haven’t tried it out yet–I can only test drive so many feed readers at a time and Indigenous is taking up all of my bandwidth at present.

I do wonder a bit about potentially importing/exporting my content if I were to go all-in on Pine.blog. I’d bet the idea is on the product map, but that’s a huge bit of work to build without a paid user base to support it. I’d personally want at least an export function if I were to change over, though I’m more likely to want to dovetail my own site with it much the way I’m currently doing with Micro.blog.

It looks like it should be able to post to my website, but I’m finding the “publish” and “preview” buttons don’t work–perhaps I need a paid account for this functionality? Of course, I only see UI to provide pine.blog with my URL and my account name, but it hasn’t authenticated using a password or other method, so perhaps that portion isn’t finished? I’ll circle back around to it later when I do a free trial. I do notice that Brian, the developer of the project, has an account on pine.blog which is mirrored on one of his subdomains running WordPress. Quirkily I’ve noticed that the header on his main website changes to alternately serve the pine.blog version and the WordPress version!

More to come as I continue exploring… Later on I’ll take a look at some of their paid functionality, but for now, it’s a pretty compelling set of features and some well-laid out user interface to start. I look forward to seeing how it continues to evolve.

Watched IndieTrustWeb from IndieWebCamp Austin 2020 | Internet Archive

Some interesting ideas here, but I don’t feel like there are any that I could run with and want to build some concrete functionality out of. I suppose that more of my interest in this area relates to ideas about aggregation and discovery.
Read 2020/Austin/mfmicro by IndieWeb (indieweb.org)
Learn microformats by fixing micro.blog was a session at IndieWebCamp Austin 2020.
I really want to see the video from this session once it gets posted. Building out and testing themes for various systems in the IndieWeb space is something we need to do some additional significant work on improving.

This is definitely an area I’m actively hacking in lately.

Bookmarked a tweet by Dave Rupert (Twitter)
A curious example of what can happen with misplaced microformats. The clown yelling portion is still one of my favorites.