👓 Toast | Adactio: Journal

Read a post by Jeremy KeithJeremy Keith (adactio.com)
Shockwaves rippled across the web standards community recently when it appeared that Google Chrome was unilaterally implementing a new element called toast. It turns out that’s not the case, but the confusion is understandable. First off, this all kicked off with the announcement of “intent to i...

<details> tags, Fragment URLs, and the HTML spec

A few weeks ago I read a post by Jamie Tanna on Using <details> tags for HTML-only UI toggles.

I thought it was a pretty slick use of HTML to create some really simple and broadly useful UI.

Then earlier today I noticed that Jeremy Keith has recently switched to using this on his personal site in the comments section to provide toggles for his various webmention types including shares, likes, bookmarks, etc. But this is where I’m noticing a quirky UI issue that isn’t as web friendly as it could be. Jeremy and others (including myself own my own site) will often provide ID tags so that one can give permalinks to the individual comments using fragments of the form:

https://adactio.com/journal/15050#comment70567 or
https://adactio.com/journal/15050#comment71896

But here’s where the UI problem lies. The first fragment URL only resolves to the page instead of the specific bookmark hiding behind a  <details> tag whereas the second fragment URL resolves to the page and automatically scrolls down to a comment by DominoPivot. It does this in both Chrome and FireFox and I would presume operates similarly in other browsers.

I suspect that most users would expect/prefer that the fragment URL should automatically expand the <details> tag and scroll down the page to that ID  or fragment as well.

Perhaps Jamie, Jeremy, Tantek, Kevin or others may have some trickery to make this happen? Otherwise, do we need to start digging into specs and browsers to get them to better support this sort of fragment related functionality?  Perhaps it’s this section of the HTML spec, the URL of which has such a fragment and therefor scrolls down properly if you click on it? (Meta pun intended.)

Watched For Patients, by Patients: Pioneering a New Approach in Med-Tech Design by  Innovate Pasadena: Friday Coffee Meetup Innovate Pasadena: Friday Coffee Meetup from YouTube

I was ten years into a career as a user experience designer making new digital products when diabetes blew my family's life apart. The complexity and relentlessness of the burden of care that came with my youngest daughter's diagnosis at 1.5 years old, were overwhelming. I learned that people with diabetes are always 10 minutes of inattention away from a coma. Run your blood sugar too low and risk brain injury or death. Run too high and you do cumulative damage to your organs, nerves and eyes. And as a designer and hardware hacker I couldn't accept the limitations and poor User Experience I was seeing in all the tools we were given to deal with it.

Then I discovered Nightscout (a way to monitor my daughter's blood sugar in real time from anywhere in the world) and Loop (a DIY open sourced, artificial pancreas system that checks blood sugar and adjusts insulin dosing every five minutes 24/7) and the community that produced them. For the first time I saw the kinds of tools I needed and true power of solutions that come from the people living with the problem. When I learned about the Tidepool's project to take Loop through FDA approval and bring it to anyone who wants to use it to give the same freedom and relief that we've experienced from it, I had to get involved. Now we are taking an open source software through regulatory approval and using real-life user data from the DIY community for our clinical trial in a process that is turning heads in the industry. We'll get into the many ways this story demonstrates ways that user driven design, open source models and a counterculturally collaborative approach with regulators are shifting the incentives and changing the landscape toward one more favorable to innovation.

Here’s the video I mentioned yesterday. Those deeply enmeshed in the IndieWeb movement and many of its subtleties will get a ringing sense of déjà vu as they watch it and realize there’s a lot of overlap with how (and why) Matt Lumpkin is working to help those with type 1 diabetes and the IndieWeb. Perhaps there are some lessons to be learned here?

There was an eerie and surprisingly large overlap of a lot of what Matt Lumpkin said in his talk this morning and the IndieWeb movement. If you just change the disease from Type 1 Diabetes to Social Media, there are a tremendous number of similarities between the two approaches of problems to be solved in terms of giving people agency, ownership of their data, the silo nature of the big corporations in the space, and the lack of solid inter-operability and standards.

I can’t wait for Chuck Chugumulung and the gang to get the video for this week up on YouTube so I can share it with colleagues.

Based on what I’ve heard, it might not be a completely terrible thing to class what the IndieWeb is working on fixing as a broad public health issue–but in its case a mental health one instead of a pancreas and diet related one.

Matt Lumpkin on stage pointing at a slide on the screen stating "Restoring one's own agency is the most critical task for people working to negotiate a healthy relationship with a chronic disease."
Matt Lumpkin during his talk “For Patients, by Patients: Pioneering a New Approach in Med-Tech Design“.
Matt Lumpkin on stage with a slide displaying the text "Do the people who use the things you make feel their power returned to them?"
Another IndieWeb sentiment in a presentation on UX/UI for improving health of people dealing with type 1 diabetes.

📺 Taking Back The Web | Jeremy Keith | Webstock ’18

Watched Webstock '18: Taking Back The Web by Jeremy Keith from Vimeo

In these times of centralised services like Facebook, Twitter, and Medium, having your own website is downright disruptive. If you care about the longevity of your online presence, independent publishing is the way to go. But how can you get all the benefits of those third-party services while still owning your own data? By using the building blocks of the Indie Web, that’s how!

Presentation slide-deck: speakerdeck.com/adactio/taking-back-the-web

Managed to get a talk proposal together for WordCamp Santa Clarita on the topic of IndieWeb and WordPress (geared toward a general audience). I also submitted an idea for a lightning talk on the relatively new Micropub spec from the W3C and how it can be used in conjunction with WordPress to quickly and easily post a variety of different content types to the platform.

I can’t wait to attend this new camp just North of Los Angeles!

#WCSCV

👓 4 Reasons @GetClassicPress Should Add Native Microformats Support | Greg McVerry

Read 4 Reasons @GetClassicPress Should Add Native Microformats Support by Greg McVerryGreg McVerry (quickthoughts.jgregorymcverry.com)
Now that phase one of Gutenberg has dropped the interest in grows by the day. So many WordPress developers fear the loss of control they will face under the new regime of 5.0. Many just don't want to do the work of all that refactoring. and should join forces. w...

📺 cite and blockquote – reloaded | HTML5 Doctor

Read cite and blockquote – reloaded by Steve Faulkner (html5 Doctor)
The definitions of the blockquote and cite elements in the HTML specification have recently been updated. This article explains what the changes mean for developers.

Yes, <cite> and <blockquote> ought to be much easier and more standardized. I’ve got some crazy and extreme examples myself I’m sure. The bigger lurking trap is that cite is really a semantic thing, but the way I see it done more often implemented with CSS is as a typographic element indicating italics.

hat tip: Michael Bishop

Reply to Blog Engines and Indieweb Controlling Upstream by Brad Enslen

Replied to Blog Engines and Indieweb Controlling Upstream by Brad EnslenBrad Enslen (Brad Enslen)
All this WordPress 5.0 Gutenberg stuff got me thinking.  With WordPress it seems like the Indieweb starts making serious and cool progress and the WordPress people come along and knock the game board and pieces off the table.  And it sounds like the disruption from WordPress is going to continue f...

Brad, I like and agree with your general thoughts, but I think that looking at the long term broader picture, most of what you’re describing is covered under the umbrella principle of plurality. For things to grow and thrive, we all need plurality to flourish. As a result there are several hundred projects within the broader IndieWeb which are growing and thriving. It seems far slower because a large number of the projects are single-maintainer single-user ones which are being built for personal use.

It’s nice that there are mass-scale projects like WordPress, WithKnown, Get Perch, Grav, Drupal, and a few others which have one or more “IndieWeb-centric” developers working on them that allow those without the coding skills to jump in and enjoy the additional freedom and functionality. The occasional drawback is that those big-hearted developers also fit into the broader fabric of those massively distributed projects and sometimes their voices aren’t as well heard, if at all.

I’m aware of the disruption of the Gutenberg Editor within WordPress v5.0 and how it applies to those using IndieWeb technology on WordPress. I’m sure it will eventually get sorted out in a reasonable fashion. Sadly, throwing out the baby out with the bathwater as it comes to WordPress and IndieWeb may not be the best solution for many people and may actually be a painful detriment to several hundreds.

While it would be interesting to see a larger group of developers converge on building an open and broadly used IndieWeb system as you suggest, it takes a massive amount of work and community collaboration to get such a thing moving. I think this bears out if you look at the lay of the land as it already exists. Just think of the time effort and energy that the core IndieWeb community puts into the tremendous amount of resources that exist today.

Looking back on the past 4+ years of IndieWeb within the WordPress community, I’m really amazed to see exactly how far things have come and where things currently stand. There used to be a dozen or more pieces that required custom code, duct tape, and baling wire to get things working. Now it’s a handful of relatively stable and well set up pieces that—particularly for me—really makes WordPress deliver as an open source content management system and next generation social medial platform that aims to democratize publishing. In terms of building for the future, I suspect that helping to bring new people into the fold (users, developers, designers, etc.) will increase and improve the experience overall. To some degree, I feel like we’re just getting started on what is possible and recruiting new users and help will be the best thing for improving things moving forward. IndieWeb integration into large-scale projects like WordPress, Drupal, etc. are very likely to be the place that these ideas are likely to gain a foothold in the mainstream and change the tide of how the internet works.

While it may seem daunting at times, in addition to the heroic (part-time, it needs to be noted) developers like Mathias Pfefferle, David Shanske, Micah Cambre, Michael Bishop, Ashton McAllan, Jack Jamieson,  Ryan Barrett, Peter MolnarAmanda Rush; enthusiastic supporters like you, Greg McVerry, Aaron Davis, Manton Reece; and literally hundreds of others (apologies to those I’ve missed by name) who are using and living with these tools on a daily basis, there are also quieter allies like Brandon Kraft, Ryan Boren, Jeremy Herve and even Matt himself, even if he’s not directly aware of it, who are contributing in their own ways as well. Given the immense value of what IndieWeb brings to the web, I can’t imagine that they won’t ultimately win out.

If it helps, some of the current IndieWeb issues pale in comparison to some of the accessibility problems that Gutenberg has neglected within the WordPress community. Fortunately those a11ys are sticking with the greater fight to make things better not only for themselves, but for the broader community and the world. I suggest that, like them, we all suit up and continue the good fight.

Of course part of the genius of how IndieWeb is structured: anyone is free to start writing code, make better UI, and create something of their own. Even then they benefit from a huge amount of shared work, resources, and simple standards that are already out there. 

A reply to David Shanske regarding implementation of the DiSo Project

Replied to a post by David ShanskeDavid Shanske (David Shanske)

People continued working on it. Everything you need using W3C standards like Webmention, Microformats2…give it a try? https://IndieWeb.org/WordPress/Plugins

I suspect that @chrismessina could do it quickly, but for those who’d like to leave Twitter for with similar functionality (but greater flexibility and independence), I recorded a 2 hour video for an set up/walk through with some high level discussion a few months back. If you can do the 5 minute install, hopefully most of the rest is downhill with some basic plugin installation and minor configuration. The end of the walk through includes a live demonstration of a conversation between a WordPress site on one domain and a WithKnown site running on another domain.

tl;dr for the video:

Additional pieces are discussed on my IndieWeb Research Page (focusing mostly on WordPress), in addition to IWC getting started on WordPress wiki page. If you need help, hop into the IndieWeb WordPress chat.

For those watching this carefully, you’ll notice that I’ve replied to David Shanske’s post on his website using my own website and sent him a webmention which will allow him to display my reply (if he chooses). I’ve also automatically syndicated my response to the copy of his reply on Twitter which includes others who are following the conversation there. Both he and I have full copies of the conversation on our own site and originated our responses from our own websites. If you like, retweet, or comment on the copy of this post on Twitter, through the magic of Brid.gy and the Webmention spec, it will come back to the comment section on my original post (after moderation).

Hooray for web standards! And hooray for everyone in the IndieWeb who are helping to make this type of social interaction easier and simpler with every passing day.

👓 Facebook, Twitter and Google Plus shun HTML, causing the infographic plague. | Kevin Marks

Read Facebook, Twitter and Google Plus shun HTML, causing the infographic plague. by Kevin Marks (epeus.blogspot.com)
By choosing images over links, and by restricting markup, Facebook, Twitter and Google+ are hostile to HTML. This is leading to the plague of infographics crowding out text, and of video used to convey minimal information. The rise of so-called infographics has been out of control this year, though the term was unknown a couple of years ago. I attribute this to the favourable presentation that image links get within Facebook, followed by Twitter and Google plus, and of course though other referral sites like Reddit. By showing a preview of the image, the item is given extra weight over a textual link; indeed even for a url link, Facebook and G+ will show an image preview by default.

👓 The Infographic Plague is actually a plague of lazy journalists and bloggers | The Next Web

Read The Infographic Plague is Just Laziness by Martin Bryant (The Next Web)
I breathed a sigh of relief when I read Megan McCardle's Ending the Infographic Plague on The Atlantic a few days ago. Someone had said it at last! As useful as a really well-produced infographic can be, there's some real dross out there and it's time we talked about the problem.

👓 Remember WordPress’ Pingbacks? The W3C wants us to use them across the whole web | The Register

Read Remember WordPress' Pingbacks? The W3C wants us to use them across the whole web by Scott Gilbertson (The Register)
'Webmentions' spec promises future linkspam outbreak

Something called Webmentions – which looks remarkably like the old WordPress pingbacks, once popular in the late 2000s – is grinding through the machinery of the mighty, and slow-moving, World Wide Web Consortium (W3C).

But don’t be deceived. Lurking behind that unassuming name lies something that might eventually offer users a way of ditching not just Facebook and Twitter but also those other massive corporations straddling the web.

An awfully inflamatory headline and opening, but the rest was not so up-in-arms and seemed relatively measured. Was it intended to try to be link bait?

Webmentions: Enabling Better Communication on the Internet

Editor’s note: This is a copy of an article that was originally published on A List Apart.

Over 1 million Webmentions will have been sent across the internet since the specification was made a full Recommendation by the W3C—the standards body that guides the direction of the web—in early January 2017. That number is rising rapidly, and in the last few weeks I’ve seen a growing volume of chatter on social media and the blogosphere about these new “mentions” and the people implementing them.

So what are Webmentions and why should we care?

While the technical specification published by the W3C may seem incomprehensible to most, it’s actually a straightforward and extremely useful concept with a relatively simple implementation. Webmentions help to break down some of the artificial walls being built within the internet and so help create a more open and decentralized web. There is also an expanding list of major web platforms already supporting Webmentions either natively or with easy-to-use plugins (more on this later).

Put simply, Webmention is a (now) standardized protocol that enables one website address (URL) to notify another website address that the former contains a reference to the latter. It also allows the latter to verify the authenticity of the reference and include its own corresponding reference in a reciprocal way. In order to understand what a big step forward this is, a little history is needed.

The rise of @mentions

By now most people are familiar with the ubiquitous use of the “@” symbol in front of a username, which originated on Twitter and became known as @mentions and @replies (read “at mentions” and “at replies”). For the vast majority, this is the way that one user communicates with other users on the platform, and over the past decade these @mentions, with their corresponding notification to the receiver, have become a relatively standard way of communicating on the internet.

Many other services also use this type of internal notification to indicate to other users that they have been referenced directly or tagged in a post or photograph. Facebook allows it, so does Instagram. Google+ has a variant that uses + instead of @, and even the long-form article platform Medium, whose founder Ev Williams also co-founded Twitter, quickly joined the @mentions party.

The biggest communications problem on the internet

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.

Imagine if AT&T customers could only speak to other AT&T customers and needed a separate phone, account, and phone number to speak to friends and family on Verizon. And still another to talk to friends on Sprint or T-Mobile. The massive benefit of the telephone system is that if you have a telephone and service (from any one of hundreds or even thousands of providers worldwide), you can potentially reach anyone else using the network. Surely, with a basic architecture based on simple standards, links, and interconnections, the same should apply to the internet?

The solution? Enter Webmentions!

As mentioned earlier, Webmentions allow notifications between web addresses. If both sites are set up to send and receive them, the system works like this:

  1. Alice has a website where she writes an article about her rocket engine hobby.
  2. Bob has his own website where he writes a reply to Alice’s article. Within his reply, Bob includes the permalink URL of Alice’s article.
  3. When Bob publishes his reply, his publishing software automatically notifies Alice’s server that her post has been linked to by the URL of Bob’s reply.
  4. Alice’s publishing software verifies that Bob’s post actually contains a link to her post and then (optionally) includes information about Bob’s post on her site; for example, displaying it as a comment.

A Webmention is simply an @mention that works from one website to another!

If she chooses, Alice can include the full text of Bob’s reply—along with his name, photo, and his article’s URL (presuming he’s made these available)—as a comment on her original post. Any new readers of Alice’s article can then see Bob’s reply underneath it. Each can carry on a full conversation from their own websites and in both cases display (if they wish) the full context and content.

Diagram showing comments sections on two different websites, carrying on a single conversation
Using Webmentions, both sides can carry on a conversation where each is able to own a copy of the content and provide richer context.

User behaviors with Webmentions are a little different than they are with @mentions on Twitter and the like in that they work between websites in addition to within a particular website. They enable authors (of both the original content and the responses) to own the content, allowing them to keep a record on the web page where it originated, whether that’s a website they own or the third-party platform from which they chose to send it.

Interaction examples with Webmention

Webmentions certainly aren’t limited to creating or displaying “traditional” comments or replies. With the use of simple semantic microformats classes and a variety of parsers written in numerous languages, one can explicitly post bookmarks, likes, favorites, RSVPs, check-ins, listens, follows, reads, reviews, issues, edits, and even purchases. The result? Richer connections and interactions with other content on the web and a genuine two-way conversation instead of a mass of unidirectional links. We’ll take a look at some examples, but you can find more on the IndieWeb wiki page for Webmention alongside some other useful resources.

Marginalia

With Webmention support, one could architect a site to allow inline marginalia and highlighting similar to Medium.com’s relatively well-known functionality. With the clever use of URL fragments, which are well supported in major browsers, there are already examples of people who use Webmentions to display word-, sentence-, or paragraph-level marginalia on their sites. After all, aren’t inline annotations just a more targeted version of comments?

Screencapture from Medium.com with an example of an inline response.
An inline annotation on the text “Hey Ev, what about mentions?” in which Medium began to roll out their @mention functionality.

Reads

As another example, and something that could profoundly impact the online news business, I might post a link on my website indicating I’ve read a particular article on, say, The New York Times. My site sends a “read” Webmention to the article, where a facepile or counter showing the number of read Webmentions received could be implemented. Because of the simplified two-way link between the two web pages, there is now auditable proof of interaction with the content. This could similarly work with microinteractions such as likes, favorites, bookmarks, and reposts, resulting in a clearer representation of the particular types of interaction a piece of content has received. Compared to an array of nebulous social media mini-badges that provide only basic counters, this is a potentially more valuable indicator of a post’s popularity, reach, and ultimate impact.

Listens

Building on the idea of using reads, one could extend Webmentions to the podcasting or online music sectors. Many platforms are reasonably good at providing download numbers for podcasts, but it is far more difficult to track the number of actual listens. This can have a profound effect on the advertising market that supports many podcasts. People can post about what they’re actively listening to (either on their personal websites or via podcast apps that could report the percentage of the episode listened to) and send “listen” Webmentions to pages for podcasts or other audio content. These could then be aggregated for demographics on the back end or even shown on the particular episode’s page as social proof of the podcast’s popularity.

For additional fun, podcasters or musicians might use Webmentions in conjunction with media fragments and audio or video content to add timecode-specific, inline comments to audio/video players to create an open standards version of SoundCloud-like annotations and commenting.

Example of SoundCloud user interface in which users can add comments to match to the location of the audio currently playing.
SoundCloud allows users to insert inline comments that dovetail with specific portions of audio.

Reviews

Websites selling products or services could also accept review-based Webmentions that include star-based ratings scales as well as written comments with photos, audio, or even video. Because Webmentions are a two-way protocol, the reverse link to the original provides an auditable path to the reviewer and the opportunity to assess how trustworthy their review may be. Of course, third-party trusted sites might also accept these reviews, so that the receiving sites can’t easily cherry-pick only positive reviews for display. And because the Webmention specification includes the functionality for editing or deletion, the original author has the option to update or remove their reviews at any time.

Getting started with Webmentions

Extant platforms with support

While the specification has only recently become a broad recommendation for use on the internet, there are already an actively growing number of content management systems (CMSs) and platforms that support Webmentions, either natively or with plugins. The simplest option, requiring almost no work, is a relatively new and excellent social media service called Micro.blog, which handles Webmentions out of the box. CMSs like Known and Perch also have Webmention functionality built in. Download and set up the open source software and you’re ready to go.

If you’re working with WordPress, there’s a simple Webmention plugin that will allow you to begin using Webmentions—just download and activate it. (For additional functionality when displaying Webmentions, there’s also the recommended Semantic Linkbacks plugin.) Other CMSs like Drupal, ProcessWire, Elgg, Nucleus CMS, Craft, Django, and Kirby also have plugins that support the standard. A wide variety of static site generators, like Hugo and Jekyll, have solutions for Webmention technology as well. More are certainly coming.

If you can compose basic HTML on your website, Aaron Parecki has written an excellent primer on “Sending Your First Webmention from Scratch.”

A weak form of Webmention support can be bootstrapped for Tumblr, WordPress.com, Blogger, and Medium with help from the free Bridgy service, but the user interface and display would obviously be better if they were supported fully and natively.

As a last resort, if you’re using Tumblr, WordPress.com, Wix, Squarespace, Ghost, Joomla, Magento, or any of the other systems without Webmention, file tickets asking them to support the standard. It only takes a few days of work for a reasonably experienced developer to build support, and it substantially improves the value of the platform for its users. It also makes them first-class decentralized internet citizens.

Webmentions for developers

If you’re a developer or a company able to hire a developer, it is relatively straightforward to build Webmentions into your CMS or project, even potentially open-sourcing the solution as a plugin for others. For anyone familiar with the old specifications for pingback or trackback, you can think of Webmentions as a major iteration of those systems, but with easier implementation and testing, improved performance and display capabilities, and decreased spam vulnerabilities. Because the specification supports editing and deleting Webmentions, it provides individuals with more direct control of their data, which is important in light of new laws like GDPR.

In addition to reading the specification, as mentioned previously, there are multiple open source implementations already written in a variety of languages that you can use directly, or as examples. There are also a test suite and pre-built services like Webmention.io, Telegraph, mention-tech, and webmention.herokuapp.com that can be quickly leveraged.

Maybe your company allows employees to spend 20% of their time on non-specific projects, as Google does. If so, I’d encourage you to take the opportunity to fbuild Webmentions support for one or more platforms—let’s spread the love and democratize communication on the web as fast as we can!

And if you already have a major social platform but don’t want to completely open up to sending and receiving Webmentions, consider using Webmention functionality as a simple post API. I could easily see services like Twitter, Mastodon, or Google+ supporting the receiving of Webmentions, combined with a simple parsing mechanism to allow Webmention senders to publish syndicated content on their platform. There are already several services like IndieNews, with Hacker News-like functionality, that allow posting to them via Webmention.

If you have problems or questions, I’d recommend joining the IndieWeb chat room online via IRC, web interface, Slack, or Matrix to gain access to further hints, pointers, and resources for implementing a particular Webmention solution.

The expansion of Webmentions

The big question many will now have is Will the traditional social media walled gardens like Facebook, Twitter, Instagram, and the like support the Webmention specification?

At present, they don’t, and many may never do so. After all, locking you into their services is enabling them to leverage your content and your interactions to generate income. However, I suspect that if one of the major social platforms enabled sending/receiving Webmentions, it would dramatically disrupt the entire social space.

In the meantime, if your site already has Webmentions enabled, then congratulations on joining the next revolution in web communication! Just make sure you advertise the fact by using a button or badge. You can download a copy here.

About the Author

 

Source: Webmentions: Enabling Better Communication on the Internet · An A List Apart Article