2017/Demos

From IndieWeb

Demos for IndieWeb Summit 2017 took place June 25, 2017.

Things discussed and shown off during the demo session of IndieWeb Summit 2017, in order of presentation.

Johannes Ernst

Johannes Ernst, Jack Jamieson and Mitch Kiah worked on indietech.rocks, a little project that aims to list products that are not “out to take advantage of you”. He would like a place where he can go to find products that do not spy on him, anything listed on the site is held up against specified values.

It features many open-source systems recognisable to the IndieWeb community, like Known and WordPress, but also Open Sprinkler, an open-source sprinkler controller.

The entire website is generated by Jekyll from a GitHub repository (indietechrocks/indietech.rocks). Only 1 Markdown file is used to hold all the different products, making it very easy for others to expand the list. He is currently looking for contributors and is willing to add them to the GitHub Organisation for the project.

Kartik Prabhu promised to make has created a logo for the website.

Scott Jenson

Scott says primary reason for taking the podium was to allow others to keep working on their demos just a little while longer. Although he did quite a bit of work himself.

He worked on prototyping a new design for IndieWeb.org, following from the Refresh IndieWeb.org session the day before, in Figma and linked to his work.

After that he worked on his own site and re-indie-webized it. He loved that this did not change anything visual in the website. A few extra icons were added to the sidebar for rel-me links, but the content of the homepage stayed exactly the same. This was especially important as his website focuses on slowly published (a few every year) long form articles.

To get to this he wanted to:

  1. make sure WordPress only showed his articles on the home page.
  2. have a separate stream for his photos, notes, bookmarks, and other IndieWeb content.

Marty McGuire

Marty McGuire hooked OwnYourSwarm into his website. He ran into a problem where Jekyll could not handle the amount of data that was sent by OYS, specifically the h-cards that were sent when you check into a place together with others. To solve this he now processes the data before handing it of to Jekyll for the site generation.

He has also been working on documenting the This Week in the IndieWeb podcast process. Every week he has to manually go through the wiki updates reflected in the newsletter and create a summary of each one to read out on the podcast. Through clearly documenting the process he hopes to be able to start automating some of it.

Throughout the day he was able to record 12 one-minute interviews with others, based on an idea by Chris Aldrich, and is planning to put 1 in each of the next 12 audio newsletters.

He was also able to help dougbeal in acquiring 🕸💍.ws for an upcoming IndieWeb webring. Later during the demos LetsEncrypt was set-up for this domain name as well.

Can only spiders join the webring or is it open to humans?

—gRegorLove

Don’t you test me, gRegor

—schmarty

Ward Cunningham

Ward wanted to bridge the gap between fedwiki and the IndieWeb. Together with Aaron Parecki he was able to add a Micropub endpoint to a fedwiki instance and post to it using Quill. The endpoint currently integrates with the RSS plugin, but can hopefully out grow that.

He also demoed the usual publish flow for fedwiki as a comparison to the new posting through a Micropub client.

That is a damn good drag-drop publish!

—KartikPrabhu

Grant Richmond

Grant Richmond worked on his Micropub client. His client uses the Microsoft Bot Framework which allows him to set-up a bot that can be accessed through Facebook Messenger, Skype, Slack, as well as through a browser interface.

The bot supports deleting and undeleting posts, which he demoed against micropub.rocks as his client has outgrown what his website’s endpoint supports. The bot passes the checks live on screen.

You authenticate the bot to the endpoint by following a link from the conversation and pasting back keys. After that you can give the bot a link to any article. The bot figures out if the link was an article on the user’s own site or not and offers function based on that: update and delete for articles on your own site; reply, like, repost, and other actions for articles on someone else’s site.

Jonathan LaCour

Jonathan LaCour did two things during this second day. One was an actual thing, one was thinking about doing a thing.

He started the demo by doing the first test of a Micropub Media endpoint for Known on micropub.rocks. The test successfully uploaded an image to his new Known installation.

After that he showed a slideshow of the thing he had been thinking about. He had spent most of the afternoon thinking about the reading experiment on the IndieWeb. Because there is no reason to reinvent everything the keyword was “together”.

Our puzzle is incomplete

  • The IndieWeb has several nice standards and CMS.
  • These cover creating, publishing, and interacting amongst each other.
  • But consumption and discovery has fallen behind, such as reading.

Bring your IndieWeb experience together

Create a reader that shows channels, where each is a stream you create and want to follow. Then link off of there to an editor like Quill to handle interactions, this could always be integrated into the reader at a later point.

This does not exist yet, it is only a picture in a slideshow. But he created a repository with a README and the presentation, to encourage both himself and others to develop on this further.

gRegor Morrill

This project later became a separate Micropub client, indiebookclub

gRegor Morrill worked on a custom version of Quill that allows him to make citation / read posts. This will allow Quill to create posts based on any URL, whether it is a blog post or identified a book or academic work.

It also allows to differentiate between works you want to read, are current reading, or have read.

A test post was successfully made to his personal website during the demo.

In the future he hopes to be able to extend the client to keep track of books you are reading, and then allowing users to quickly post notes about those without reentering all the information info about the work.

Jack Jamieson

Jack worked on “the other side of gRegor Morrill’s project,” displaying book information on his website. He modified his theme to use the meta data that gets sent along with a work to display information like a work’s author.

A test post was shown.

Lillian Karabaic

Lillian Karabaic spent the entire day Tom Sawyering Ryan Barrett, David Shanske, and Aaron Parecki. She attributed most of the work that got done to complaining.

Her goal for the day was to fix a Google Maps issue that caused maps not to get displayed on her checkins. The solution ended up being to get Ryan Barrett to push a new release of the Micropub WordPress plugin with OwnYourSwarm support.

She now has beautiful maps and the gets Webmentions explaining how she collects points on Swarm. Oddly enough Google Maps started behaving again after this had started working.

She was still working on a current location popup on for the front page of her website, but did not finish this. Her current location can still be found in the footer.

Ryan Barrett

Ryan Barrett started selfdogfooding his newly launched Indie Map. He added a page to his personal website where he uses kumo to draw a map of the IndieWeb with himself at the centre. During the demo he went and found Kevin Marks and showed the connection that has built up between them.

Anyone can check how they are linked to other websites by navigating to http://www.indiemap.org/[yourdomain].json.

Something that might be more interested to look at than a map are the possibilities to use the data to automatically generate webrings and blogrolls based on where people link to.

Before ending the demo he remarks that he also did some “small” things during the day, like enabling OwnYourSwarm in the WordPress Micropub plugin.

He still wants to work on bridging OStatus things with the IndieWeb and spent some time with others finding out about little things like making mentioning others easier.

Jim Pick

Jim Pick worked on two separate projects:

  1. He hooked an Amazon IoT button with Firebase, which he was able to show live. This would allow him to chain the button to other things.
  2. Further experiments with the Dat project and Beaker Browser for a distributed web.

    This combination allows for websites to run off of many different servers, but leads to long hashes as URLs. It is possible to get link friendly URLs through SSL certifications for the resources.

    He looked at it for distributed storage of Podcasts, but could work equally well for static websites as used on the IndieWeb.

    He demoed the distributed nature by mirroring websites between different systems. A file containing resource hashes is made available and is being watched by several servers. Simply adding a hash to the list can have a dozen mirrors instantly grab the new resource.

    This could also lead to a cheap (“basically free”) hosting for IndieWeb-type things.

    • https://dat.jimpick.com/ — through a normal browser
    • dat://dat.jimpick.com/ — easy link for Dat browsers
    • dat://b61c1b001bb2bc37ceda060895b5023b631dff09ce3486400fbcc2e8f4621951 — true hash link for Dat browsers

Doug Beal

dougbeal spent a couple of hours thinking about POSSE and PESOS for reading, inspired by silos like LibraryThing and Goodreads. This was left in the thinking phase. He did accomplish getting checkins onto his blog via OwnYourSwarm.

Used i❤️domains to search for emoji .ws-domains. Discovered 🕸💍.ws for use as a webring.

Sebastian Kippe

Sebastian began by stating he never got to the “IndieWeb part” of what he was planning to do.

He looked into Huginn, an open-source alternative to IFTTT, for getting his Strava rides into his own control. For this he wanted to set up two “agents”:

  1. An agent that retrieves trip information from Strava.
  2. An agent that is able to send information to a Micropub endpoint when it is triggered.

He was able to get a Strava agent running that retrieves activities. It is able to use OAuth to communicate between Huginn and Strava. He demoed how Huginn was able to get activity data out of his account.

He is now looking for help to convert this Strava data into a data set that can be sent through Micropub. The challenge is to convert the activity into tags/microformats, especially because the data is not just a trip from A to B but also contains data like elevation and track segments.

Tom Brown

Tom learned about Pelle Wessman’s Micropub to GitHub service that helped him to set up Micropub for the first time, and use Quill.

He labeled this as “beginner stuff” but was still happy to show that he got that working.

Josh Juran

Josh started work to resend his RSVP to the IndieWeb Summit with a photo in his h-card. This ended up failing. But he was able to demo other code that creates HTML out of a vobject, enabling him to generate webpages in a completely different way.

Tantek Çelik

Tantek Çelik worked on his CMS, Falcon. A system he would describe more like a mark-up management system than a content management system.

During the day he worked on event posts and has a minimum viable version on his site right now. His first event post is for Homebrew Website Club, June 28th. Although he ran out of time to get creative with the CSS, the post does not break anything and looks “somewhat” normal.

One thing to note is that the permalink matches the start date of the event, not the day the post is published. Even though the date at the bottom still shows the publishing date. He is not sure if he wants the event to show up in his feed at publishing time or keep it hidden.

Using Pin13 the microformats behind the event were demoed as well. This was easy to do because Firefox now includes a viewer for JSON files that allowed for quick navigation through the parsed output.

He uses the h-event as a top element, not nested within h-entry, and has copied over some properties from h-entry like published and updated. Being a top element makes his h-feed a composite feed containing both h-entry and h-event. The hardest part was to have it show up this way in the feed.

Extra: the audience testing his new mark-up found an issue with mf2py, a microformats parser in Python.

Next he wants to implement the showing of RSVPs, and wondered if any of the JS libraries out there can already embed RSVPs.

I bet Pelle Wessman’s JS shows RSVPs

—snarfed

Anton Podviaznikov

Anton continued on building his own personal CMS / wiki software. He added JSON Feed, and demoed creating a new item that will show up in the side file instantly. One small feature for the day.

David Shanske

David Shanske introduced himself as an “unapologetic WordPress user”. He did several things over the course of the last day, including being the Huckleberry Finn to Lillian Karabaic’s Tom Sawyer.

He’d be Ben Rogers, not Huckleberry Finn

— KevinMarks

After the WordPress session he changed his plans and started working on the WordPress Bridgy plugin. There is now a flow within the plugin that will walk the user through registering it with the different silos. This flow had also been brought up in the this was talked about in the IndieWeb.org refresh session as a user hurdle. It does not “look pretty” yet, but it makes the setup much easier.

The Bridgy creator ( Ryan Barrett) officially endorses the updates to the plugin.

He continued doing UX work on plugins and made it easier for people to use his Simple Locations plugin. The new interface will give the user access to the information that will be stored with a post. The new interface was demoed with the address of the Mozilla building.

He showed a bookmark post which now included a map and location beneath it. Any post in WordPress can now have a location attached to it.

There were several bug fixes to things too. The audience applauded for the bug fixes!

Michelle JL

Michelle demoed a new version of her website that she had running locally. Much of the content was hardcoded for this version. She started applying the new microformats she learned about during the weekend.

The old website was completely JavaScript-based, including the navigation. This meant that any pages outside of the homepage could not be refreshed or be navigated to from elsewhere. This is fixed in the new version.

The design has “all of the responsivy things”, and this too was shown. She was also especially happy not to have used PHP for the contact form, instead depending on a node.js mailer.

Her new website contains not just her portfolio, but also a record of all the events and hackathons she has ever been to.

Jean MacDonald

Jean worked on the opposite of what she said she would be doing the day before. Instead of working on her micro.blog CSS, she got fascinated with WordPress. Where she had nothing the day before, she now has a site and is happy to be using things she never knew existed.

One of her goals was to be able to login to the IndieWeb wiki, and she is now able to do so.

While she will continue to post to her micro.blog, she will also try to cross post those posts to her new website]. Where the micro.blog will keep being limited to 280 character, a separate macroblog category on her site can be used for “standard-length” posts.

Ben Werdmüller

Ben Werdmüller did not have a lot to demo because his fixes to Known were mostly invisible: JavaScript updates, the ordering of displayed Webmentions, better support for incoming RSVPs, and more “dull” things. The audience is mostly distracted by him having 1572 unread notifications from his website back-end.

To get away from the dull back-end work he also built a new theme (called Romana) for his site. It had used the same theme for a long time, and he often hears about how there are so few themes available for Known.

He enabled the new theme during the demo and some features were highlighted:

  • The background was a hard yellow.
  • Several design elements were given hot pink backgrounds.
  • The boxes (such as his header) displayed askew.
  • Even the posting UI has been skewed.
  • All links were given squiggly red underlines through a special bit of CSS:
text-decoration: underline;
text-decoration-style: wavy;
text-decoration-color: red;

The theme did not break any important plugins and was meant to not look like any social network site.

The audience made two remarks worth highlighting:

  1. The hot pink hides the red notification counter, and
  2. it does like like a social network: old MySpace!

Aaron Parecki

Aaron Parecki started by showing his micro.blog. It wasn’t being updated with posts from his website, but that turned out to by a micro.blog bug. Manton was able to fix that over the weekend so Aaron’s blog was getting filled again. It does not show any photos yet, which he does suspect to be a bug on his part.

He had grand plans for the weekend, worked in several things, but very few things got completely done.

One thing he started on was a better way to interact with posts from within Quill. In the current set-up he has separate bookmarklets for separate interactions. He would like to replace those with a single bookmarklet to open Quill and have Quill show the post he wants to interact with right in the editor interface. That way he can have buttons for interactions right below the post he is interacting with.

He shows that he has gotten as far as having a bookmarklet and having Quill fetch (and parse) a post. Right after the parser output the page shows an error.

As a separate feature he has been working on the ability to post photos directly to an album on his website (instead of on Flickr). He has album support but the flow is best described as “awkward”.

When he posts a photo it is always added to his photos feed. But in the case of photos meant for an album he would not want this to happen. Most of the work is done and he was able to show an example album post (that was kept out of the single photos feed) on a locally running version of his website.

Like others he got a lot of small bug fixes to tools like Quill and Telegraph done as well, but no visible things. These bug fixes hopefully propagate to other products and sites as well.

Martijn van der Ven

Martijn van der Ven called in from Sweden to demo his personal website. It was completely redone to replace the old version that was based on a concept by Tantek. Where the old version focused on being mobile accessible and giving the visitor quick ways to contact him, the new design allowed for information that was previously only accessible on silos to also be on his own site.

For this the information was spread over 3 columns: Getting in touch, Too much information, and Other identities. He demo’d the fact that (almost) every piece of information was marked-up with microformats by parsing it with php.microformats.io. Some examples of data:

  • 2 h-adr embedded on the page,
  • his current timezone,
  • personal information like nickname, gender-identity, relationship status, interested-in, pronouns,
  • his birthday exact to the minute.

The birthday is displayed to the visitor as a countdown in days. This seemed to be received positively, although some wanted to see a countdown that was exact to the minute as well.

The only thing not marked up in any way currently are his spoken languages. There is no microformat for this yet, and he might have to invent one.

See Also