IntersectionObserver to lazy load images—very handy for webmention avatars.
Sunday, June 16th, 2019
Monday, June 10th, 2019
Sounds like Zach had a great time at Indie Web Camp Düsseldorf:
I can’t really express how meaningful this experience was to me. An antithesis to the rat race of social media, IndieWebCamp was a roomful of kindred spirits that care about the web and their own websites and hosting their own content. It felt like the Google Reader days again, when everyone was blogging and writing on their own sites. I dunno if you can tell but I loved it.
He also made a neat little plug-in that renders negative comments in Comic Sans with mixed cased writing:
This isn’t intended to be a hot-take on Comic Sans. Instead it’s meant to change the tone of the negativity to make it sound like a clown is yelling at a kid’s birthday party.
Wednesday, May 22nd, 2019
Last week was a bit of an event whirlwind. In the space of seven days I was at Indie Web Camp, Beyond Tellerrand, and Accessibility Club in Düsseldorf, followed by a train ride to Utrecht for Frontend United. Phew!
Indie Web Camp Düsseldorf was—as always—excellent. Once again, Sipgate generously gave us the use of their lovely, lovely space for the weekend. We had one day of really thought-provoking discussions, followed by a day of heads-down hacking and making.
I decided it was time for me to finally own my replies. For a while now, I’ve been posting notes on my own site and syndicating to Twitter. But whenever I replied to someone else’s tweet, I did from Twitter. I wanted to change that.
From a coding point of view, it wasn’t all that tricky. The real challenges were to do with the interface. I needed to add another field for the URL I’m replying to …but I didn’t want my nice and minimal posting interface to get too cluttered. I ended up putting the new form field inside a
details element with a
summary of “Reply to” so that the form field would be hidden by default, and toggled open by hitting that “Reply to” text:
<details> <summary> <label for="replyto">Reply to</label> </summary> <input type="url" id="replyto" name="replyto"> </details>
I spent most of the day getting that Twitter syndication to work. I had something to demo, but I foolishly decided to risk it all by attempting to create a bookmarklet so that I could post directly from a tweet page (instead of hopping back to my own site in a different tab). By canabalising the existing bookmarklet I use for posting links, I just about managed to get it working in time for the end of day demos.
So I’m owning my replies now. At the moment, they show up in my home page feed just like any other notes I post. I’m not sure if I’ll keep it that way. They don’t make much sense out of context.
Then again, I kind of like how wonderfully random and out-of-context they look. You can browse through all my replies so far.
I’m glad I got this set up. Now when Andy posts stuff on Twitter, I’m custodian of my responses:
@AndyBudd: Who are your current “Design Heroes”?
adactio.com: I would say Falcor from Neverending Story, the big flying dog.
Saturday, November 10th, 2018
Webmentions at Indie Web Camp Berlin
I was in Berlin for most of last week, and every day was packed with activity:
- Indie Web Camp on Saturday and Sunday,
- Accessibility Club on Monday,
- Beyond Tellerrand on Tuesday and Wednesday.
By the time I got back to Brighton, my brain was full …just in time for FF Conf.
All of the events were very different, but equally enjoyable. It was also quite nice to just attend events without speaking at them.
Indie Web Camp Berlin was terrific. There was an excellent turnout, and once again, I found that the format was just right: a day of discussions (BarCamp style) followed by a day of doing (coding, designing, hacking). I got very inspired on the first day, so I was raring to go on the second.
What I like to do on the second day is try to complete two tasks; one that’s fairly straightforward, and one that’s a bit tougher. That way, when it comes time to demo at the end of the day, even if I haven’t managed to complete the tougher one, I’ll still be able to demo the simpler one.
In this case, the tougher one was also tricky to demo. It involved a lot of invisible behind-the-scenes plumbing. I was tweaking my webmention endpoint (stop sniggering—tweaking your endpoint is no laughing matter).
Up until now, I could handle straightforward webmentions, and I could handle updates (if I receive more than one webmention from the same link, I check it each time). But I needed to also handle deletions.
The spec is quite clear on this. A 404 isn’t enough to trigger a deletion—that might be a temporary state. But a status of 410 Gone indicates that a resource was once here but has since been deliberately removed. In that situation, any stored webmentions for that link should also be removed.
Anyway, I think I got it working, but it’s tricky to test and even trickier to demo. “Not to worry”, I thought, “I’ve always got my simpler task.”
For that, I chose to add a little map to my homepage showing the last location I published something from. I’ve been geotagging all my content for years (journal entries, notes, links, articles), but not really doing anything with that data. This is a first step to doing something interesting with many years of location data.
I’ve got it working now, but the demo gods really weren’t with me at Indie Web Camp. Both of my demos failed. The webmention demo failed quite embarrassingly.
As well as handling deletions, I also wanted to handle updates where a URL that once linked to a post of mine no longer does. Just to be clear, the URL still exists—it’s not 404 or 410—but it has been updated to remove the original link back to one of my posts. I know this sounds like another very theoretical situation, but I’ve actually got an example of it on my very first webmention test post from five years ago. Believe it or not, there’s an escort agency in Nottingham that’s using webmention as a vector for spam. They post something that does link to my test post, send a webmention, and then remove the link to my test post. I almost admire their dedication.
Still, I wanted to foil this particular situation so I thought I had updated my code to handle it. Alas, when it came time to demo this, I was using someone else’s computer, and in my attempt to right-click and copy the URL of the spam link …I accidentally triggered it. In front of a room full of people. It was midly NSFW, but more worryingly, a potential Code Of Conduct violation. I’m very sorry about that.
Apart from the humiliating demo, I thoroughly enjoyed Indie Web Camp, and I’m going to keep adjusting my webmention endpoint. There was a terrific discussion around the ethical implications of storing webmentions, led by Sebastian, based on his epic post from earlier this year.
We established early in the discussion that we weren’t going to try to solve legal questions—like GDPR “compliance”, which varies depending on which lawyer you talk to—but rather try to figure out what the right thing to do is.
Earlier that day, during the introductions, I quite happily showed webmentions in action on my site. I pointed out that my last blog post had received a response from another site, and because that response was marked up as an h-entry, I displayed it in full on my site. I thought this was all hunky-dory, but now this discussion around privacy made me question some inferences I was making:
- By receiving a webention in the first place, I was inferring a willingness for the link to be made public. That’s not necessarily true, as someone pointed out: a CMS could be automatically sending webmentions, which the author might be unaware of.
- If the linking post is marked up in h-entry, I was inferring a willingness for the content to be republished. Again, not necessarily true.
That second inferrence of mine—that publishing in a particular format somehow grants permissions—actually has an interesting precedent: Google AMP. Simply by including the Google AMP script on a web page, you are implicitly giving Google permission to store a complete copy of that page and serve it from their servers instead of sending people to your site. No terms and conditions. No checkbox ticked. No “I agree” button pressed.
Anyway, when it comes to my own processing of webmentions, I’m going to take some of the suggestions from the discussion on board. There are certain signals I could be looking for in the linking post:
- Does it include a link to a licence?
- Is there a restrictive
- Are there
metadeclarations that say
Each one of these could help to infer whether or not I should be publishing a webmention or not. I quickly realised that what we’re talking about here is an algorithm.
Despite its current usage to mean “magic”, an algorithm is a recipe. It’s a series of steps that contribute to a decision point. The problem is that, in the case of silos like Facebook or Instagram, the algorithms are secret (which probably contributes to their aura of magical thinking). If I’m going to write an algorithm that handles other people’s information, I don’t want to make that mistake. Whatever steps I end up codifying in my webmention endpoint, I’ll be sure to document them publicly.
Saturday, November 3rd, 2018
Day one of Indie Web Camp Berlin is done, and it was great! Here’s Charlie’s recap of the sessions she attended.
Monday, August 20th, 2018
A good half-hour presentation by Stephen Rushe on the building blocks of the indie web. You can watch the video or look through the slides.
I’ve recently been exploring the world of the IndieWeb, and owning my own content rather than being reliant on the continued existence of “silos” to maintain it. This has led me to discover the varied eco-system of IndieWeb, such as IndieAuth, Microformats, Micropub, Webmentions, Microsub, POSSE, and PESOS.
Friday, July 20th, 2018
This is a great description by Chris of the problems that webmentions aim to solve.
If you use Twitter, your friend Alice only uses Facebook, your friend Bob only uses his blog on WordPress, and your pal Chuck is over on Medium, it’s impossible for any one of you to @mention another. You’re all on different and competing platforms, none of which interoperate to send these mentions or notifications of them. The only way to communicate in this way is if you all join the same social media platforms, resulting in the average person being signed up to multiple services just to stay in touch with all their friends and acquaintances.
Given the issues of privacy and identity protection, different use cases, the burden of additional usernames and passwords, and the time involved, many people don’t want to do this. Possibly worst of all, your personal identity on the internet can end up fragmented like a Horcrux across multiple websites over which you have little, if any, control.
Wednesday, July 26th, 2017
Posting to my site
I was idly thinking about the different ways I can post to adactio.com. I decided to count the ways.
This is the classic CMS approach. In my case the CMS is a crufty hand-rolled affair using PHP and MySQL that I wrote years ago. I log in to an admin interface and fill in a form, putting the text of my posts into a
textarea. In truth, I usually write in a desktop text editor first, and then paste that into the
textarea. That’s what I’m doing now—copying and pasting Markdown from the Typed app.
Directly from my site
If I’m logged in, I get a stripped down posting interface in the notes section of my site.
This is how I post links. When I’m at a URL I want to bookmark, I hit the “Bookmark it” bookmarklet in my browser’s bookmarks bar. That pops open a version of the admin interface tailored specifically for links. I really, really like bookmarklets. The one big downside is that they don’t work on mobile.
This is something I knocked together at Indie Web Camp Brighton 2015 using the Twilio API. It’s handy for posting notes if I’m travelling somewhere and data is at a premium. But I don’t use it that often.
Thanks to Aaron’s OwnYourGram service—and the fact that my site has a micropub endpoint—I can post images from Instagram to my site. This used to happen instantaneously but Instagram changed their API rules for the worse. Between that and their shitty “algorithmic” timeline, I find myself using the service less and less. At this point I’m only on their for the doggos.
OwnYourGram and OwnYourSwarm are very similar and could probably be abstracted into a generic service for posting from third-party apps to micropub endpoints. I’d quite like to post my check-ins on Untappd to my site.
Other people’s admin interfaces
rel="me" and IndieAuth, I can log into other people’s posting interfaces using my own website as the log-in, and post to my micropub endpoint, like this. Quill is a good example of this. I don’t use it that much, but I really should—the editor interface is quite Medium-like in its design.
Anyway, those are the different ways I can update my website that I can think of right now.
In terms of output, I’ve got a few different ways of syndicating what I post here:
- RSS feeds for my journal, links, articles, and notes.
- JSON feeds for my journal, links, articles, and notes.
- Twitter accounts for my journal, links, articles, and notes (that one is my main Twitter account).
- I syndicate most of my my photos to my Flickr account.
- I syndicate most of my journal posts and articles to my Medium account.
- I used to syndicate my links to my Delicious account but at some point that became fairly pointless.
- Whenever I post a link, The Internet Archive gets pinged and makes a copy for the wayback machine. Here’s an example of a recent link.
- I syndicate just about everything to my Facebook account using If This, Then That recipes (RSS to Facebook posts). Facebook is a roach motel. I never post any original content there—everything starts here on my site.
Just so you know, if you comment on one of my posts on Facebook, I probably won’t see it. But if you reply to a copy of one of posts on Twitter or Instagram, it will show up over here on adactio.com thanks to the magic of Brid.gy and webmention.
Tuesday, July 18th, 2017
Alex Kearney looks back on two years of owning her own data.
With a fully functional site up and running, I focused on my own needs and developed features to support how I wanted to use my site. In hind-sight, that’s probably the most indie thing I could’ve done, and how I should’ve started my indieweb adventure.
This really resonates with me.
One of the motivating features for joining the indieweb was the ability to keep and curate the content I create over time.
Here’s to two more years.
Monday, July 17th, 2017
Sunday, June 18th, 2017
Sunday, April 16th, 2017
Chris gives a step-by-step walkthrough of enabling webmentions on a Wordpress site.
Saturday, June 4th, 2016
A plug-in for Craft CMS for receiving webmentions. I’ll have to tell Charlotte about this (she’s using Craft for her site).
Sunday, January 10th, 2016
Wednesday, April 23rd, 2014
or: how I learnt to stop worrying and love the blog.
This is a really nice introduction to the basics of the Indie Web …with nice illustrations too.
Sunday, September 15th, 2013
Let me explain what web mentions are all about…
Basically, it’s an equivalent to pingback. Let’s say I write something here on adactio.com. Suppose that prompts you to write something in response on your own site. A web mention is a way for you to let me know that your response exists.
If you look in the
head of any of my journal posts, you’ll see this
<link rel="webmention" href="http://adactio.com/webmention.php" />
That’s my web mention endpoint: http://adactio.com/webmention.php …it’s kind of like a webhook: a URL that’s intended to be hit by machines rather than people. So when you publish your response to my post, you ping that URL with a POST request that sends two parameters:
target: the URL of my post and
source: the URL of your response.
Ideally your own CMS or blogging system would take care of doing the pinging, but until that’s more widely implemented, I’m providing this form at the end of each of my posts:
Either way, once you ping my web mention endpoint—discoverable through that
link rel="webmention"—with those two parameters, I just need to confirm that your post does indeed contain a link to my post—by making a cURL request and parsing your source—and then I return a server response of 202 (Accepted).
Here’s the code for a minimum viable web mention in PHP.
That’s as far as I got at Indie Web Camp but it was enough for me to start collecting responses to posts.
The next step is to do something with the responses. After all, I’ve already got the source of each response from those cURL requests.
Barnaby has a written a nice straightforward microformats parser in PHP. I’m using that to check the cURLed source for any responses that have been marked up using h-entry. That’s one of the microformats 2 vocabularies—a much simpler way of writing structured content with microformats.
So there you have it. Comments are now open on every journal post on adactio.com …the only catch is that you have to write the comment on your own site. And if you want the content of your post to appear here (instead of just a link) then update your blog post template to include a handful of h-entry classes.
Feel free to use this post as a test. Mark up your blog with h-entry, write a post that links to this URL, and enter the URL of your post in the form below.
Sunday, September 8th, 2013
I’m at Indie Web Camp and we’re onto the second day, which involves hacking on stuff (the first day involved discussing stuff).
I’ve had my head down attempting to implement webmentions on my site—basically a simpler form of pingback.
This probably won’t work, and this is the first basic step, but if you write a reply to this post on your own site, you should be able to ping me by entering your post’s URL into the form under this post.
Now, this is just a first run so all I’m doing is gathering the pings—I’m not actually going to fetch and parse your post; that step can come later. But if you want to help me kick the tires on this, write something on your site that links to this post and then enter your post’s URL below.