Everything Old is New Again: Adventures in the IndieWeb

I’ve written about my forays into the IndieWeb movement before. I have even written about how I feel like I’m moving to a philosophy of sharing my work that is kind of old school. Last week, I had the occasion to see a perfect example of how the “new” ways that I’m working are actually the old ways.

A few people at Plymouth State University gave a presentation last week to a group that wanted to know more about what we’re doing with integrated clusters. I was there to share what we’re doing with the General Education program. After they left, the group wanted to see an example of our work. In particular, they wanted to see how our thoughts about First Year Seminar have been changing. Since I’ve taught multiple versions of the course, they asked if they could see my syllabi from the various versions. So the first thing I did was to go look for my syllabus for the previous version of FYS. I had forgotten that I shared all of my teaching materials online before the University moved to using a Learning Management System (LMS). I shared with them my syllabus from about 10 years ago which exists on the web site that I maintained at the time. Then when I wanted to share my syllabus from last year’s version of the FYS, I entered our LMS (which is Moodle) to download the Word document containing the syllabus and attached that standalone file to the email. You can see that syllabus here.

The two syllabi show that the content and pedagogy of the class have changed substantially over the last 10 years. But for this blog post, I’m more interested in how I shared the two syllabi with students. One (the old one) was always publicly available for anyone to look at. The other (the new one) was hidden behind the walls of the LMS. The LMS is easier for non-technical people to use because you mostly just drag and drop files into various sections of the class page. The web site, on the other hand, requires a bit of technical knowledge to set up.

With the IndieWeb, I’m moving back to making my content publicly available on my own site but there’s still a pretty steep learning curve. Fortunately, there is a group of developers who are trying to make the IndieWeb easier to use. I’m still wrapping my head around a bunch of the concepts but I made a big breakthrough today in working on my own site. In the spirit of number 5 of the IndieWeb principles, here’s my documentation of what I’ve done. Some of these steps require a bit of technical knowledge that I won’t explain but I was able to figure things out by using the WordPress knowledge base and by using Google.

The driving principle behind the IndieWeb is that you own your content. Our current Web infrastructure, however, doesn’t make it particularly easy to share content on our individual web sites in a way that allows others to find and understand that content. To begin to address this issue, a set of standard HTML tags has been developed. When you add these tags, your content becomes richer and more meaningful to both human and machine readers of the content. For example, the h-card tag can be used to identify yourself as the author of your web site. This is like giving the reader (whether human or machine) a business card with your contact information on it. So instead of just putting your name in text somewhere on your web page, as in Cathie LeBlanc, you may want to provide a link from your name to your biographical information, as in Cathie LeBlanc, which looks like this on my web page: <a href=”https://cathieleblanc.com/about/about-me/”>Cathie LeBlanc</a>. To make this even more useful, you can add the h-card tag which humans and machines read as your business card. The HTML for this is: <a class=”h-card” href=”https://cathieleblanc.com/about/about-me/”>Cathie LeBlanc</a>. The behavior of the link containing the h-card tag is no different than without the tag, but the tag lets everyone (humans and machines) know that this link contains business card like information about the person. These tags that provide this additional meaning are called microformats. There’s a whole web site devoted to microformats which provides a variety of definitions of what they are. My favorite definition of microformats is from Toby Inkster who says, “You know all that stuff you already have on your website? Microformats tell computers what that stuff is.”

The idea is that whenever you post something on your web site, you should include microformats that provide more information about what you’re posting. In particular, when you post a blog entry, there should be an h-entry tag associated with it. This kind of tag is relatively easy to put in if you are manually coding the HTML for every item on your web site. But if you’re like me and use some other tools, like WordPress, to maintain your web site, you probably don’t want to add the microformat tags manually. Instead, you’d like WordPress to handle adding those tags. The easiest way to do this is use a theme that supports microformats (version 2 since that’s the latest, easiest to use version of the tags). There are only a few themes that fully support microformats 2 although this list seems to be changing monthly. I actually don’t like any of the themes that currently support microformats 2 and since number 7 of the IndieWeb principles tells us that “UX and design is more important than protocols, formats, data models, schema etc.,” I had two choices. I could either modify the look and feel of one of the microformats 2 compatible themes so that I liked the look and feel or I could start with a theme whose look and feel I liked and modify it to incorporate microformats 2. I chose the latter because I thought it might be easier. I might next try the other option to see what I come up with.

First, I found a theme (wpex-mesa) that I like, and downloaded and installed it. Then, I installed and activated the IndieWeb plugin. This plugin “helps you establish your IndieWeb identity by extending the user profile to provide rel-me and h-card fields and optionally adding widgets to display this.” We have already talked about the h-card tag. The rel-me tag allows you to establish continuity in your identity across the various platforms you interact with. For example, once you add the IndieWeb plugin to your WordPress site, you can enter your Twitter handle. Your web site will then contain an HTML statement that looks like: <link rel=”me” href=”https://twitter.com/cathieleblanc” />. If you then put your web site in your Twitter profile, you will have established a consistent identity between the two sites which will later allow you to post things on one site and create a link to the other site. To get the h-card on my web site, I added a Custom HTML widget to my site with the following HTML: <div id=”hcard-Cathie-LeBlanc” class=”h-card hcard vcard”><a rel=”me” class=”p-name u-url u-uid” href=”https://cathieleblanc.com/”><font size=”5″>Cathie LeBlanc</font></a><br/>
<img rel=”me” class=”u-photo” height=”150″ width=”150″ src=”http://cathieleblanc.com/wp-content/uploads/2018/06/profile.jpg” alt=”Photo of Cathie” />
</div>

If you look at the right sidebar of this post, you’ll see my picture with my name above it. That is created by the HTML above.

The easiest way to add the other microformats 2 is to install and activate a plug-in called Microformats 2. It tries to implement microformats using actions and filters. Unfortunately, it doesn’t work for every theme and it didn’t work for mine. How did I know whether it worked? There is a helpful tool called Indiewebify.me that tests whether your site and posts have the microformats implemented. This tool was hugely helpful to me. I was able to test whether my h-card was properly implemented.

Since the plug-in didn’t work for me, I created a child theme for wpex-mesa which I called mesaLe. I created a style.css file within the folder for the child theme that contained the following:

/*

Theme Name: mesaLe Child Theme

Theme URI: https://www.cathieleblanc.com/

Description: A wpex-mesa child theme

Author: Cathie LeBlanc

Author URI: https://www.cathieleblanc.com

Template: wpex-mesa

Version: 1.0.0

License: Custom license
License URI: http://themeforest.net/licenses/terms/regular
*/

I then created a functions.php file for the child theme that contained the following:

<?php

add_action( ‘wp_enqueue_scripts’, ‘enqueue_parent_styles’ );

function enqueue_parent_styles() {

wp_enqueue_style( ‘parent-style’, get_template_directory_uri().’/style.css’ );

}

function mesaLe_setup() {

add_theme_support( ‘microformats2’ );

add_theme_support( ‘microformats’ );

add_theme_support( ‘microdata’ );

}

The first <?php code tells WordPress to use the style.css file of the parent theme. The setup function adds theme support for the microformats. I’m actually not sure whether this setup function is required or not but since it works, I’m not going to mess with it. [Edit: Thanks to Chris Aldrich and his explanation, I now know that my understanding of this function is incorrect. I will write about the correction in the future and post the link to the correction here.]

The last thing I needed to do was to add the h-entry tag to individual posts on my web site. The wpex-mesa theme is broken up pretty nicely into pieces so that you can modify a particular piece without messing with things you don’t want to change. The theme contains a folder called “partials.” That folder has a subfolder called “posts” which has a filed called header.php which will contain the header for various types of posts you might make. So I created a folder called partials within my child theme folder and subfolder called posts within the partials folder. I then copied the header.php file from the parent theme to the child theme. [Edit: I now know that my implementation of h-entry is incorrect. Thanks to Chris Aldrich for his explanation. I will write my own correction and link it here when it’s complete.]

The parent header.php file contained:

<header class=”wpex-post-header wpex-clr”>

<h1 class=”wpex-post-title”><?php the_title(); ?></h1>

</header><!– .wpex-post-header –>

I changed this to the following in the child header.php file:

<header class=”wpex-post-header wpex-clr”>

<div class=”h-entry”>

<h1 class=”p-name”><?php the_title(); ?> </h1>

</div>

</header><!– .wpex-post-header –>

These steps have allowed me to automatically create blog posts that support what I want to do with the IndieWeb. Creating the proper HTML is a bit more complicated than the days when I was handcoding my entire web site. But the results are now are prettier and more flexible, It still isn’t as easy for the average user to participate in the IndieWeb unless you want to use the WordPress themes that natively support microformats. I know that as we move forward, there will be more themes with more flexible layouts that will support the IndieWeb principles and I find that exciting.

I am still working on Webmentions, IndieAuth, Micropub, and Microsub and wil write about those topics as I deal with them.