How Do I Interact with the IndieWeb?

The IndieWeb is how I choose to approach the social Web. This site is meant to highlight which building blocks I use over at my personal site.

Marking Up My Site

A core tenant of the IndieWeb is the use of plain HTML, namely HTML classes, to semantically markup the content of my site. This is done using Microformats2. This lets me define notes, replies, and a lot of other things posts.

Examples

Below is how I'd present myself to others on the Web.

          <div class="h-card">
            <img class="u-photo" src="https://jacky.wtf/photo.jpg">
          </div>
        

That ends up looking like the following:

Jacky Alciné https://jacky.wtf

I'm a software developer that likes to work on tools that help people be people.

Microformats is excellent for this since it has no effect on presentation and is a lot more compact than other semantic markup options. You can see more about this particular markup on the IndieWeb wiki about h-card markup.

Capturing Responses

My site has all of the markup from Microformats2. Now, I can make replies from my site to other peoples' site very easily. Now I have to let people know that I'm talking to them (or about them — some people don't reply, they don't have to).

Webmentions are a thin way of telling a page that they've mentioned in. It doesn't require anything more than one sending a HTTP POST request to another location specified by the page receiving the webmention. That's it. It's up to the receiver to present things when (or if) they get that response.

Since this is something that happens over the Internet and relies on the other party to handle interactions; it makes a lot of sense to externalize this functionality from how your site runs. This is even more true if your site is statically generated. Check out sites like Telegraph by Aaron Parecki or webmention.app by Remy Sharp.

If you trust your site to not fall over if things go bad then building things to handle incoming Webmentions is something you look into.

This page does support receiving Webmentions. Try sending one using one of those tools mentioned and see it appear below.

Showing Responses

I like showing off what I get in response to what people say to me. Especially when I want to show off! This is done by parsing the page that's mentioned me and presenting it back to the user.

An example of a list of replies on a page could look something like this:

This feed is currently broken.

Nothing received over the last ten minutes. Try sending something now to https://my-indieweb-flow.jacky.wtf.

This page exposes a place to send Webmentions to. This way, it can capture your replies (in real time!) and present the last five responses here. You can try using a service like commentpara.de.

Socially Exploring

We can reply to people and get feedback from them. Now we'd need a way to follow, subscribe, discover and explore new content out there on the social Web. One of the perks of the corporate social Web is that they've made these actions extremely easy.