An IndieWeb Podcast: Episode 0 “Considering the User”

An IndieWeb Podcast: Episode 0 "Considering the User"

This is a test or alpha episode of An Indieweb Podcast (working title).

In it, David Shanske and and I talk about a variety of Indieweb topics, with the theme of “Considering the User”, inspired by an article we were reading this week. Other topics include: home automation, generations, itches, Webmention, and some examples of the Post Kinds Plugin in practice (exercise, issues, chickens).

In the future we hope to have additional broad ranging conversations and perhaps interviews with others about various IndieWeb related topics.

Part of this is also an opportunity to improve audio post presentations on our websites over time. While David posted the “original” of this post on his site, I had to debate whether or not I would technically repost it or make an original of my own. Ultimately I opted for the latter.

David, by far the more veteran podcaster, deserves the lion’s share of the credit for his audio set up and recording facilities.

You can subscribe to future episodes here:

If you need more IndieWeb content, guidance, or even help, an embarrassment of riches can be found on the wiki, including the following resources:

Syndicated copies to:

Fragmentions for Better Highlighting and Direct References on the Web


Ages ago I added support on my website for fragmentions.

Wait… What is that?

Fragmention is a portmanteau word made up of fragment and mention (or even Webmention), but in more technical terms, it’s a simple way of creating a URL that not only targets a particular page on the internet, but allows you to target a specific sub-section of that page whether it’s a photo, paragraph, a few words, or even specific HTML elements like <div> or <span> on such a page. In short, it’s like a permalink to content within a web page instead of just the page itself.

A Fragmention Example

Picture of a hipster-esque looking Lego toy superimposed with the words: I'm not looking for a "hipster-web", but a new and demonstrably better web.
29/1.2014 – Larry the Barista by julochka is licensed under CC BY-NC
Feature image for the post “Co-claiming and Gathering Together – Developing Read Write Collect” by Aaron Davis. Photo also available on Flickr.

Back in December Aaron Davis had made a quote card for one of his posts that included a quote from one of my posts. While I don’t think he pinged (or webmentioned) it within his own post, I ran across it in his Twitter feed and he cross-posted it to his Flickr account where he credited where the underlying photo and quote came from along with their relevant URLs.

Fragmentions could have not only let him link to the source page of the quote, it would have let him directly target the section or the paragraph where the quote originated or–even more directly–the actual line of the quote.

Here’s the fragmention URL that would have allowed him to do that:

Go ahead and click on it (or the photo) to see the fragmention in action.

What’s happening?

Let’s compare the two URLs:

They both obviously point to the same specific page, and their beginnings are identical. The second one has a # followed by the words “I’m not looking” with some code for blank spaces and an apostrophe. Clicking on the fragmention URL will take you to the root page which then triggers a snippet of JavaScript on my site that causes the closest container with the text following the hash to be highlighted in a bright yellow color. The browser also automatically scrolls down to the location of the highlight.

Note: rather than the numbers and percent symbols, one could also frequently use the “+” to stand in for white spaces like so: This makes the URL a bit more human readable. You’ll also notice I took out the code for the apostrophe by omitting the word “I’m” and adding another word or two, but I still get the same highlight result.

This can be a very useful thing, particularly on pages with huge amounts of text. I use it quite often in my own posts to direct people to particular sub-parts of my website to better highlight the pieces I think they’ll find useful.

It can be even more useful for academics and researchers who want to highlight or even bookmark specific passages of text online. Those with experience on the platform will also notice how useful highlighting can be, but having a specific permalink structure for it goes a step further.

I will note however, that it’s been rare, if ever, that anyone besides myself has used this functionality on my site. Why? We’ll look at that in just a moment.

Extending fragmentions for easier usability.

Recently as a result of multiple conversations with Aaron Davis (on and between our websites via webmention with syndication to Twitter), I’ve been thinking more about notes, highlights, and annotations on the web. He wrote a post which discusses “Page Bookmarks” which are an interesting way of manually adding anchors on web pages to allow for targeting specific portions of web pages. This can make it easy for the user to click on links on a page to let them scroll up and down specific pages.  Sadly, these are very painful to create and use both for a site owner and even more so for the outside public which has absolutely no control over them whatsoever.

His post reminded me immediately of fragmentions. It also reminded me that there was a second bit of user interface related to fragmentions that I’d always meant to also add to my site, but somehow never got around to connecting: a “fragmentioner” to make it more obvious that you could use fragmentions on my site.

In short, how could a user know that my website even supports fragmentions? How could I make it easier for them to create a fragmention from my site to share out with others? Fortunately for me, our IndieWeb friend Kartik Prabhu had already wired up the details for his own personal website and released the code and some pointers for others who were interested in setting it up themselves. It’s freely available on Github and includes some reasonable details for installation.

So with a small bit of tweaking and one or two refinements, I got the code up and running and voilà! I now have a natural UI for highlighting things.


When a user naturally selects a portion of my page with their mouse–the way they might if they were going to cut and paste the text, a simple interface pops up with instructions to click it for a link. Kartik’s JavaScript automatically converts the highlight into the proper format and changes the page’s URL to include the appropriate fragmention URL for that snippet of the page. A cut and paste allows the reader to put that highlighted piece’s URL anywhere she likes. It

text highlighted in a browser with a small chain icon and text which says "Click for link to text"
Highlighting text pulls up some simple user interface for creating a fragmention to the highlighted text.

The future

What else would be nice?

I can’t help but think that it would be fantastic if the WordPress Fragmention plugin added the UI piece for highlight and sharing text via an automatically generated link.

Perhaps in the future one could allow a highlight and click interaction not only get the link, but to get a copy of both the highlighted text and the link to the URL. I’ve seen this behavior on some very socially savvy news websites. This would certainly make a common practice of cutting and pasting content much easier to do while also cleverly including a reference link.

The tough part of this functionality is that it’s only available on websites that specifically enable it. While not too difficult, it would be far nicer to have native browser support for both fragmention creation and use.  This would mean that I don’t need to include the JavaScript on my website to do the scrolling or highlighting and I wouldn’t need any JavaScript on my site to enable the highlighting to provide the specific code for the custom URL. How nice would it be if this were an open web standard and supported by major browsers without the need for work at the website level?

Medium-like highlighting and comments suddenly become a little easier for websites to support. With some additional code, it’s only a hop, skip, and a jump to dovetail this fragmention functionality with the W3C Webmentions spec to allow inline marginalia on posts. One can create a fragmention targeting text on a website and write a reply to it. With some UI built out,  by sending a webmention to the site, it could pick up the comment and display it as a marginal note at that particular spot instead of as a traditional comment below the post where it might otherwise loose the context of being associated at the related point in the main text. In fact our friend Kartik Prabhu has done just this on his website. Here’s an example of it in his post announcing the feature.

Example of inline marginalia on Kartik Prabhu’s website “Parallel Transport”.

You’ll notice that small quotation bubbles appear at various points in the text indicating marginalia. By clicking on them, the bubble turns green and the page expands to show the comment at that location. One could easily imagine CSS that allows the marginalia to actually display in the margin of the page for wider screens.

How could you imagine using fragmentions? What would you do with them? Feel free to add your thoughts below or own your site and send me a webmention.

Syndicated copies to:

👓 Learn Archives – Pods Framework |

Learn Archives - Pods Framework (
WordPress Content Types and Fields WordPress is all about creating content. It comes bundled with Posts and Pages, which you can organise using the Categories and Tags taxonomies. It’s also got post meta fields which you can use to append data to your content – author, date, and custom fields, for example.
Syndicated copies to:

🔖 Pods Framework

Pods Framework (Pods Framework)
The Pods Framework is an open-source, GPLv2+ licensed PHP project released on October 8th, 2008. The goal was to create an interface and PHP codebase to easily create, extend, and manage content types within WordPress. While the normal WordPress content architecture is limited to the built-in tables, a primary feature of Pods allows you to base content types off of their own custom tables designed around each content types’ needs. The Pods Framework allows an ordinary user or developer to easily create and extend custom post types, content types, taxonomies, users, media, or comments — helping you keep your content organized and speed up the development of your project. Pods starts as a blank slate, as most frameworks do. The control is put into the hands of the developer to mould it into what is needed, without the fluff. Much of Pods’ functionality is coupled with a UI for easy administration, however, there are large portions of the codebase that can be optionally used for advanced implementations or specific project needs. You control everything while Pods Framework does the behind-the-scenes heavy lifting.
Syndicated copies to:

👓 Petition to Re-License React has been Escalated to Facebook’s Engineering Directors | WP Tavern

Petition to Re-License React has been Escalated to Facebook’s Engineering Directors by Sarah Gooding (WP Tavern)
React users are petitioning Facebook to re-license React.js after the Apache Software Foundation announced its decision to ban Apache PMC members from using any technology licensed with Facebook’s BSD+Patents License. So far the GitHub issue has received 627 “thumbs up” emoji and 66 comments from concerned React users who are hoping for a change in licensing. Many respondents on the thread said that ASF’s decision affects their organizations’ ability to continue using React in projects. “Apache CouchDB and others will switch away from React if we have to,” CouchDB committer Robert Newson said. “We’d rather not, it’s a lot of work for no real gain, but we don’t have a choice. Changing license can be simple (RocksDB completed that change in a day).”
Syndicated copies to:

Free Web Development & Performance Ebooks

Free Web Development & Performance Ebooks (
The Web grows every day. Tools, approaches, and styles change constantly, and keeping up is a challenge. We've compiled the best insights from subject matter experts for you in one place, so you can dive deep into the latest of what's happening in web development.

👓 Chris Aldrich is reading “The Wix Mobile App, a WordPress Joint | Matt Mullenweg”

The Wix Mobile App, a WordPress Joint by Matt Mullenweg (Matt Mullenweg)(2016 years 9 months 30 days 11 hours 30 minutes 53 seconds)
Anyone who knows me knows that I like to try new things — phones, gadgets, apps. Last week I downloaded the new Wix (closed, proprietary, non-open-sourced, non-GPL) mobile app. I’m always int…
Syndicated copies to:

👓 Chris Aldrich is reading “Progressive Web AMPs”

Progressive Web AMPs (Smashing Magazine)(2016 years 11 months 7 days 8 hours 1 minute 22 seconds)
PWA or AMP? Both! Let's combine progressive web apps and AMP to provide fast experiences on the web, with all the whistles and bells of native apps.
Syndicated copies to:

Weekly Recap: Interesting Articles 7/24-7/31 2016

Some of the interesting things I saw and read this week

Went on vacation or fell asleep at the internet wheel this week? Here’s some of the interesting stuff you missed.

Science & Math


Indieweb, Internet, Identity, Blogging, Social Media


Syndicated copies to:

WordCamp Orange County 2016

Some thoughts and commentary on the camp this past weekend

As a pseudo-birthday present this weekend I attended both days of WordCamp Orange County 2016 at UC Irvine Applied Innovation.

The camp sold out in just hours a month and change ago, in part because it was limited to about 200 people given the fantastic space provided by UC Irvine’s Advanced Innovation. There aren’t many spaces one could go with such spectacular amenities and support in addition to a huge plethora of screens, recording equipment, and audio/visual supplements. Thanks for hosting us Applied Innovation!

Sadly the limited space meant that some people missed out, and the most unrepresented group was likely new users who may not have heard about it in time to get tickets. However, this didn’t mean that anyone else was underrepresented: there were attendees of every ability, age (10 months to over 90), race, sex and creed. I was honestly astounded by the diversity of people in attendance.

One of the multiple food truck options over the weekend
One of the multiple food truck options over the weekend

One of the best programming decisions was having food trucks show up to cater lunch, which kept everyone close and socially engaged rather than dispersing everyone to the wind by means of forcing outside food options.

Sadly, even knowing that Sundays are always slower than Saturdays, there were 2-3 empty rooms with no sessions at all on Sunday afternoon. I wish there had been some type of offering to  assist in putting together impromptu sessions or BoF sessions in these empty rooms. Alternately doing a beginner build track on Sunday and releasing “Sunday only” tickets might have been interesting and also better utilized the space.

Below are some thoughts on the individual sessions I attended. Most should be on WordPress.TV shortly and nearly everyone was posting slides.



Development Workshop: Intro to Core Concepts by Erick Hitter

This was a great quick introduction to most of the basics of WP Core and at just about the right time as I’ve been wanting to delve more directly into portions for a few projects. I’d definitely recommend the slide deck once it’s posted. This was one of my favorite sessions of the weekend.

Content Development by Greg Taylor

This was one of the more entertaining sessions and had more conversation back and forth than any camp session I’ve ever attended. Sadly it stayed to the basics and in a room which seemed to have some more advanced participants, I wish it had gone further.

What is oEmbed and why you should use it by Jason Tucker

This was mostly what I expected, but included some additional tips that I didn’t know existed. In particular, knowing that I can provide formatting for others when they oEmbed my site is something I’ll have to look into.

Getting Started With SVGs For WordPress Theme Building by Jacob Arriola

I’ve played a bit with SVG’s but hadn’t delved into them very significantly. This was a good overview/crash course on some of the particulars.

Curating a Pattern Library by Brianna Privett

This was a nice start to some intro information on talking about design patterns, but I would have preferred something at the intermediate or advanced level. In particular, it made me consider some quirky potential new visual grammars for mobile use (particularly in advertising). It also inspired me to think about creating a disorenting experience built on the visual/time grammar of the movie Inception.

Development Discussion: Improving WordPress Search by Aaron Holbrook

Aaron was a fun and very dynamic speaker who obviously truly loves his topic. This was by far the best session I attended over the weekend. I want to try to get Elastic Search and ElasticPress set up on my site soon as it looks like what modern search should be on a website.


Using WordPress as an App Framework by Nathan Tyler

I’m somewhat shocked I’d never thought of doing this myself before, but just knowing the concept exists is more than half the battle. The sad part is that it sounds like for half the stuff you get for free, one needs to rebuild or re-engineer something else to get it working.

Contributing to Open Source by Andy Fragen

Andy is a practicing physician and a great WordPress “hobby-ist” who drove in from Palm Springs to give a great overview of the philosophy of Open Source and a broad range of tools used to help further that goal. One can’t help but be affected by his enthusiasm.


For a session meant to be primarily entertainment, I was actually surprised to learn about coding/development by hearing a panel of others critique four plugins. Condensed down, this could have been a session on the intangible things one would want to think about before building a plugin.

A Developer’s Guide to Support by Thomas Patrick Levy

Everyone can be put into a better mindset to help others. This was a great presentation for just that.

WCLA16 logo

WordCamp Los Angeles 2016

Because one just can’t get enough, I can’t wait to attend WordCamp LA on September 10th & 11th at Cal State University Los Angeles.

IndieWeb and WordPress

Since they’ve already made a Call for Speakers for the LA camp, I’ve already submitted the following talk application which focuses on the IndieWeb:

The IndieWeb is a people-focused alternative to the “corporate web” which has recently been covered in Wired, Fast Company, The Atlantic, The New Republic, Newsweek, and Slate. It encourages everyone to own their own data/content, be better connected to engage with everyone, and provide users with more control of their content and identity online. With the rise of social media silos everyone is seemingly incentivized to split up their online identity to participate in multiple various communities and a variety of platforms which are often bought out, shut down, or simply disappear, very often taking users’ data with them.

Why not allow your own WordPress site to truly be your primary hub online? Post your content on your own site/server so that you not only own it, but then, if you choose, syndicate it out to social media networks in a native and simpler fashion to take advantage of their network effects and engagement. Even better, new web specs like WebMention from the W3C (essentially a universal/internet-wide method of @mention) allow you to easily bring back comments, likes, and similar data back to your original post as native comments. You can now truly own all of the data and subsequent related data (comments) you place on most major social networks.

In this session we’ll briefly cover the basic history and philosophy of the IndieWeb movement before moving into more advanced topics like microformats, WebMention, IndieAuth, micropub, and a growing wealth of related tools which will be of interest to developers and designers alike. While primarily geared at individual users, these philosophies and techniques can be of huge value to writers/authors, bloggers, podcasters, and even businesses for drastically improving their reach and marketing efforts online while simultaneously saving them time and effort.

I spoke to a number of people over the weekend about some IndieWeb concepts and basics, but for those who can’t wait for more details, I’m happy to discuss more of the specifics at anyone’s leisure. If you’re really chomping at the bit, I’ll be at the WordPress Pasadena Meetup tonight and hopefully be setting up a Homebrew Website Club meeting in the LA area sometime in the next few weeks in anticipation of IndieWeb Camp Los Angeles in November.

Syndicated copies to:

Webmentions for Improving Annotation and Preventing Bullying on the Web

Preventing abuse – Hypothesis by Dan Whaley (

There are potential solutions to the recent News Genius-gate incident, and simple notifications can go a long way toward helping prevent online bullying behavior.

There has been a recent brouhaha on the Internet (see related stories below) because of bad actors using News Genius (and potentially other web-based annotation tools like to comment on websites without their owner’s knowledge, consent, or permission. It’s essentially the internet version of talking behind someone’s back, but doing it while standing on their head and shouting with your fingers in their ears. Because of platform and network effects, such rude and potentially inappropriate commentary can have much greater reach than even the initial website could give it. Naturally in polite society, such bullying behavior should be curtailed.

This type of behavior is also not too different from more subtle concepts like subtweets or the broader issues platforms like Twitter are facing in which they don’t have proper tools to prevent abuse and bullying online.

A creator receives no notification if someone has annotated their content.–Ella Dawson

On March 25th, Ella Dawson wrote a blog post in which she requested that Genius disable its Web Annotator for her site.

Towards a Solution: Basic Awareness

I think that a major part of improving the issue of abuse and providing consent is building in notifications so that website owners will at least be aware that their site is being marked up, highlighted, annotated, and commented on in other locations or by other platforms. Then the site owner at least has the knowledge of what’s happening and can then be potentially provided with information and tools to allow/disallow such interactions, particularly if they can block individual bad actors, but still support positive additions, thought, and communication. Ideally this blocking wouldn’t occur site-wide, which many may be tempted to do now as a knee-jerk reaction to recent events, but would be fine grained enough to filter out the worst offenders.

Toward the end of notifications to site owners, it would be great if any annotating activity would trigger trackbacks, pingbacks, or the relatively newer and better webmention protocol of the W3C which comes out of the IndieWeb movement. Then site owners would at least have notifications about what is happening on their site that might otherwise be invisible to them. (And for the record, how awesome would it be if social media silos like Facebook, Twitter, Instagram, Google+, Medium, Tumblr, et al would support webmentions too!?!)

Perhaps there’s a way to further implement filters or tools (a la Akismet on platforms like WordPress) that allow site users to mark materials as spam, abusive, or “other” so that they are then potentially moved from “public” facing to “private” so that the original highlighter can still see their notes, but that the platform isn’t allowing the person’s own website to act as a platform to give safe harbor (or reach) to bad actors.

Further some site owners might appreciate gradable filters (G, PG, PG-13, R, X) so that either they or their users (or even parents of younger children) can filter what they’re willing to show on their site (or that their users can choose to see).

Consider also annotations on narrative forms that might be posted as spoilers–how can these be guarded against? For what happens when a even a well-meaning actor posts an annotation on page two which foreshadows that the butler did it thereby ruining the surprise on the last page? Certainly there’s some value in having such a comment from an academic/literary perspective, but it doesn’t mean that future readers will necessarily appreciate the spoiler. (Some CSS and a spoiler tag might easily and unobtrusively remedy the situation here?)

Certainly options can be built into the annotating platform itself as well as allowing server-side options for personal websites attempting to deal with flagrant violators and truly hard-to-eradicate cases.

Note: You’re welcome to highlight and annotate this post using (see upper right corner of page) or on News Genius.

Do you have a solution for helping to harden the Internet against bullies? Share it in the comments below.
Related stories:
Syndicated copies to: Now Supports Fragmentions!

A fragmention is an extension to URL syntax that links and cites a phrase within a document by using a URL fragment consisting of the phrase itself, including whitespace.

I’ve been meaning to do it for ages, but now supports fragmentions.

“A fragmention is an extension to URL syntax that links and cites a phrase within a document by using a URL fragment consisting of the phrase itself, including whitespace.”


Proposed Fragmention Icon
Proposed Fragmention Icon

To take advantage of the functionality, append a # and the text you’d like to highlight on the particular page after the address of the particular web page. Add a + to indicate whitespaces if necessary, though typically including a single, unique keyword is typically sufficient to highlight the appropriate section.


Syndicated copies to: