2016/Düsseldorf/Demos

Things discussed and shown off during the demo session of IndieWebCamp Düsseldorf 2016, in order of presentation.

Aaron Parecki

Aaron Parecki spent the weekend working on “photo things”. Photos that are currently displayed on his site are the same as those that go to his Instagram account. He describes these as “highlights” from among the greater amount of photographs he is taking.

• An example photo post from the IndieWebCamp weekend.

He describes the problem as his inability to post an album or a collection of photos when he does not want to upload tens of photographs as tens of separate posts. Full collections would end up on Flickr only.

The main problem for him was how he would display a bigger set of images. An album should be like any other post. The separate photos should still get their own permalinks but with something to show they are part of a big set, e.g. carousel at the bottom.

He started work on a front-end JavaScript library that would transform a set of photos into a justified grid, as seen on Flickr. The secret to scaling to full width is to make the rows have a variable height.

Here Joschi mentions that Flickr has open-sourced their Justified Layout code just days ago, announced on their blog and made available on GitHub. Kevin Marks on IRC mentions Masonry.

Google image search tries to do it, but does it wrong

• tantek

Aaron believes no existing libraries are fully built around the idea of progressive enhancement, which is something he would like to do right from the start. Images in HTML + his JavaScript should just work. This is not something Flickr’s library allows, as it needs “knowledge of all image height/width aspect ratios upfront” [1].

Jeremy Keith

Jeremy Keith spent the weekend working on plumbing. Fixing things and then never stopped implementing small fixes everywhere.

Stuff that was messed up is now less messed up

• adactio

Jeremy’s Webmention handling was build on top of the 15 year old database back-end for blog comments. Now he has custom tables set-up to store all forms of reactions (comments, likes, etc.) better. Parsing itself was also fixed, based on an error that showed up when Aaron reacted to a post on adactio.com during day 1’s introductions.

The photo demo from day 1’s introductions was also repeated, and correctly showed up on adactio.com. It also POSSE’d to Flickr and Twitter. The latter using the latest iteration of the Twitter API, where Jeremy had been using the deprecated version before IWC.

Shout-out to Bea for helping Jeremy update the Twitter API code.

Vladimir Andrijevikj

Vladimir showed off his travel pages during day 1’s introductions, presented some of the code during the Travel session, and then spent his time on day 2 cleaning it up and refactoring the code for the static file generation.

It now supports microformats parsers by offering events for stays (showing duration), but there is still some discussion about marking up flights as events as they do not have a fixed location (or even fixed timezone), but they do have a fixed duration. Jeremy points out that there is no rule for limiting h-event to a single location.

Frederic Marx

Frederic spent IWC getting canonical versions of his Medium articles up on his own domain, where his website is staticly generated by Metalsmith.

Example: Webfonts Last was first published on Medium, but now includes a link at the bottom to the canonical version on fmarx.com.

A lot of time was spent bringing Medium’s auto-embedding onto his own site. Medium has a feature where a link by itself in a paragraph might be replaced with an embed of e.g. a Tweet or a Vimeo video. Frederic is feeding Markdown into Metalsmith and did not want to put iframes or other code in there.

He ended up building his own implementation of the Medium feature, writing browser-side JavaScript that finds links where the link text is the actual URL and then swapping it. The Vimeo embed in Webfonts Last shows up in the HTML as:

<figure>

<a href="https://vimeo.com/157259335">https://vimeo.com/157259335</a>

<figcaption class="imageCaption">The <a href="http://viki-app.com/">Viki Wikipedia reader app</a> shines through its use of custom typography.</figcaption>

</figure>

As a quick aside, Freceric also mentions his website now supports Webmentions.

Emma Hodge

Emma had three objectives for the day: organisation, layout and fonts (CSS), and photos.

Emma is using GitHub Pages to deploy and host her website and there was a bit of a discussion about how to best resize a photo and get it on GitHub. This was quickly figured out through discussion in room 3, with loads of support from Andreas.

Andreas describes himself as a notorious team player and I endorse that description.

• Emma

After lunch, Martijn sat down with Emma to install GitHub’s Desktop client as well as Atom.io. Giving new tools for editing and uploading parts of the site without relying on GitHub’s online text-file editor.

At the end of the day, all objectives were hit and the website was given a great overhaul during IWC.

Matthias Ott

Matthias continued his work on a Webmention plugin for Craft CMS. Different forms of reactions (comments, likes, reposts) are now successfully received and handled.

He gave a full demo of the plugin back-end. There will be basic options for configuring your endpoint within the Craft CMS administration panel, including an option to receive webmentions from Bridgy. On the front-end, anyone can use a normal web form to send a webmention. This can be seen on Matthias’ website. This was described by Jeremy as a “human-friendly webmention endpoint”.

The next step would be to publish the plugin on GitHub, but it needs Webmention validation before it is really suited for wide adoption.

Keith Andrews

Keith shows of a presentational tool. While he was not sure if it was relevant for IWC, it is something he worked on that weekend and is hosting himself.

He shares the slideshows of talks on his own website and had been using HTML Slidy to do so. The big let down was that HTML Slidy did not work well on mobile or tablets, thus they have worked on a responsive version: rSlidy. Demoing live with a presentation on Data Visualisation.

This presentation now correctly handles touch events, including swiping. As an extra, tilting and shaking has been implemented using the DeviceOrientation API. By tilting your device it will navigate to next and previous slides, shaking the device will reset the slideshow to the beginning.

The entire tool was written in TypeScript and has zero external dependencies. A truly drop-in library.

Glenn Jones

Glenn has been looking into OwnTracks. As you need to run a native application on your phone to get access to geo tracking this OwnTracks sparked his interest because of its possibility to post data to any server.

The iPhone application can be configured to post to any URL. He built a server application to listen for these posts and demoed correctly receiving the data (JSON with location lat/lon and some battery data). The whole process is protected with HTTP Basic security.

The Android application proofed to be more difficult as it uses the MQTT connectivity protocol. Sort of a message queue. For this he created a separate server instance that receives the messages on this protocol and then transforms it into a HTTP POST request to the first implementation.

Through geo fencing he hopes to built on this in the future to trigger certain events, check-ins, and possibly even Chrome Notificications to prompt him to take action.

Bastian Allgeier

Bastian starts by prefacing that he is a big fan of Airtable, a Google Spreadsheet alternative that produces an API for all its data. GET and POST APIs are ready out of the box with support for all sorts of data types. He would like to move away from this hosted service to something he controls himself. But it is not about replicating Airtable itself, just the data management ideas.

A flat YAML structure can be used to define a database schema, but with column types that you would not usually find in a database. For these special column types there should be special parsers offering validation, retrieving, and writing, the data. E.g. “email” could be a data type that only excepts email addresses, instead of using a global text type.

All the data will also end up in YAML files which are easier to back-up than full databases. Backing up is so important that he might even consider adding a native method to the implementation so users will have an extendable standard way of triggering backups.

Joschi Kuphal

Joschi did a lot of housecleaning and helped Juliane setting up her first website.

Juliane Schütz

Juliane “gave in to peer pressure” and registered a domain name at a bar. She wondered why she would need a website when she already had a Tumblr, Flickr, Instagram, etc. Now all of those are linked as rel-me from her personal domain.

Andreas Nebiker

Andreas has been “catching up a bit”. His website was resurrected before IWC and has been given a big front-end overhaul.

He has implemented with h-card and a service worker for offline availability. The idea with the server worker was not only to serve his contact information even when offline, but even to show two different versions of the site depending on connection state.

You would get his face and contact information ven when offline, but get live updates when online.

Steffen Rademacker

Steffen demoed his work on service workers. It can bring in info from elsewhere and has special caching (with hashes) built in for refreshing of the worker.

He has also been working on implementing Micropub.

Jochen Wersdörfer

Jochen shows the work that has been done on his and Claudio’s collaborative bookmarking service Konektom.org. They are exciting to implement IndieWeb systems and have spent time building an IndieAuth service, although the token endpoint is not yet fully functional.

Martijn van der Ven

Martijn van der Ven updated his h-card implementation. He found out that the page he had been using for years was never marked up as a representative h-card. A Facebook Messenger barcode was added as a means of contact and other information was updated.

Phone numbers were updated to display in a nicer format, and to help parsers they have been switched from p-tel to u-tel. Martijn asks people who parse phone numbers to check if that is supported at all.

He also created an endpoint to retrieve recommended bookmarking tags for any URL from Pinboard. Pinboard’s API usually requires authentication for that to work. The endpoint will be made available to other soon.

Jan Sauer

Jan looked into supporting Micropub and wants to build an intelligent endpoint.

Another function he would like to have for his website is a natural language date parser, inspired by Fantastical’s handling of dates.

Sven Knebel

Sven also mostly did behind the scenes plumbing.

A new future he worked on were scheduled posts to go up at a future time. And with that also make the post hold off on sending Webmentions until it is actually published.

He is using flat TXT files for his back-end storage, and demoes how these are available to everyone to look at. An in-progress post-processor is supposed to make writing the HTML easier, by automatically adding classes/wrapping divs/...

• Post: http://www.svenknebel.de/posts/2016/4/22/
• Text: http://www.svenknebel.de/posts/2016/4/22/a.txt

Sebastian Lasse

Sebastian demoed web+action protocol handlers. Showing web-action:auth specifically. There was a little scuffle about how to de-register a protocol handler that was resolved on IRC.

Note that not all browsers (including modern Safari) support registering protocol handlers to web URLs, so it is recommended to have some JavaScript for graceful degradation or progressive enhancement.

Multiple shout-outs to Pelle Wessman for these systems.

Tantek Çelik

Tantek Çelik starts his demo saying he got things “half working”.

He prefaces his demo by displaying XKCD #386, Duty Calls, about arguing with someone who is “wrong on the internet”. Unlike how the comic seems to suggest that this should not be done, he advocates for us to do exactly so. Because sometimes you just need to lose an argument.

Then the new Deleted-flow of tantek.com is shown. For his tombstone posts a special META tag was added to display the actual HTTP status, as all pages are still send to the browser as available:

<meta http-equiv="Status" content="410 Gone"/>

Scheduled removal of posts is also demoed. At the start of the demo there was a note calling itself ephemeral available on tantek.com, but during the demo it disappeared. This works by setting the dt-deleted meta-data to a future timestamp.

Posts stay around in the feed for readers to update when they encounter a deletion timestamp. How POSSE copies of posts will be deleted is still an open question.

Kevin Marks

Kevin Marks has been attending remotely and his Joy of Sparks gets an extra shout-out for being created during this IWC. The big spike at the beginning of the graphic marks the ongoing IWC.

On IRC, he shares another sparks graphic of a different chat.