2024/Düsseldorf/Demos

This article is a stub. You can help the IndieWeb wiki by expanding it.

2024 Düsseldorf Demos was the final session of IndieWebCamp Düsseldorf 2024 where participants of the Create Day showed and demonstrated what they made during the day.

▶️ Demos session (43:57s Internet Archive)

Dave Letorey

I have loads and loads of posts, but no way of finding those posts without the URL

Went from an under-construction home page, to a list of posts which I've made into cards, and I made a post about what I did today!

What I did:

list of posts on the home page
header with a title, and a date
footer with a list of tags of post

What I didn't get done

sort posts by date
add missing dates
make the tags into links to show a list of posts with that tag

Tantek

Tantek Çelik: Inspired by the last session of the day yesterday led by Paul, I did some brainstorming on additions and improvements to the Principles which we can iterate on.

My contribution is three things:

1. I took a bunch of input about "owning your identity" on the IndieWeb, and Jeremy Keith has talked about this as the number thing, so I wrote up a proposal for an "Own Your Identity" principle. There's a section below if people like it they can add a +1 or -1 if they don't, and comments. I want to use the ✊🏻 emoji for own your identity and maybe switch to the 🗄 file cabinet emoji for own your data.

2. Second one, is Methodology. Any discussion about evolving the principles and how the principles came to be, I realized there's a bunch of implicit stuff about that so I documented a few of these. Like why are the principles ordered the way they are, or how should they be ordered. We have focused on principles that are actionable, that actually encourage you to do something rather than principles that just make you feel good. We have principles that encourage you to do something in a positive direction rather than just being an avoid type thing. It's ok to say avoid something if you say what to do instead. It's not ok to just avoid something because that just makes you not do anything and what's the point of that? We also talked about making the principles more user-friendly to be more applicable to a broader community. That itself is a methodology that we want to adopt, making things more broadly applicable, user-friendly, accessible, developer-specific is ok but not ideal. I realized we need short, catchy, and memorable phrases like make what you need, use what you make, short, brief, memorable. Lastly, the list as a whole should be skimmable, you don't have to scroll through pages and pages of something like a manifest or something, or a whole book's worth to get to the points.

3. Third thing I did was, copy paste and start to trim-back the existing principles to a developer-principles stub page with a nice warning at the top. If we're going to improve the principles to be more user-facing, we should hold onto the developer-facing principles for developers that are more specific, like hey if you're a developer, here's how this principles applies to you, and your code, and your creations and such.

That's what I started. I'd like to see us update the principles to be more user-facing, more user-centric too. This is a continuation of an organizers summit project from 2018, so hopefully six years later we'll pick this project back up and maybe we can push it to completion.

Paul Robert Lloyd

Paul Robert Lloyd: Following on from that, one of my project was also on the principles. I sort of did these separately, perhaps thinking from a little bit more of a content perspective and organizational perspective and quite high level perspective. This is a draft of what it could potentially look like, hopefully some of these changes follow on from those ideas and principles about principles you have Tantek.

User:Paulrobertlloyd.com/principles

Adding Identity as the first one, I pulled in the suggested text you had there for that.

For each of these principles I had a statement, these would be linked, and some real examples of how we practice what we preach.

Keeping own what you make.

Collaborate with others, this is something that tries to pull in suggestions like "show not tell", and we have a community and do discuss things, all those things that don't feel like they're captured in the existing principles, so this is sort of a new one or make explicit existing behavior.

Pluralistic, might be similar to that one, but this is about not being a monoculture, and having different approaches.

With each of these by the way, these are less developer-centric, more community, and more general, like I'm trying to point to how these would be applicable if you're not developing software, if you just have a website.

So like being pluralistic, you could have a blog, you could have a digital garden, you could have an about page, could be a CV, that's an example of plurality, it's not really about development per se. Not saying that everyone should blog, which sometimes can get misconstrued about IndieWeb being about blogging, it's about having a website, and that can be whatever you want it to be.

Build for the long web, that one is currently, longevity, trying to make sure these all have titles that are action based. Sort of short, pithy titles, followed by a paragraph to be consistent.

Last one, keeping the web weird, sort of the same one as above all have fun. I like this is about enhancing the creativity.

I also pulled out and repurposed the existing principles into development principles:

User:Paulrobertlloyd.com/principles#Developer_Principles

Again with these trying to think of how these can all work consistently, so we've got make or made in the title. Underlines the making and doing aspects of these.

What we do next, I needed to get something up and manipulate and play with it and try to understand it a little bit more, based on discussions earlier.

Finally, I've just done some new banners and icons and made pull requests for all the IndieWeb WordPress Plugins, so when the pages finally update, they'll all have a consistent look and feel.

Sonja Weckenmann

I started with an update of my account(?) and I added these two links. https://sonja-weckenmann.de/

And then I wanted to add a like button and I hope it works because I didn't quite finish. Joschi helped me a lot. Let's try it. It went up by two! (someone else: I clicked it also). But I have to change the styling.

Stefan

I managed to hook up Webmentions using webmention.io, I started with Micropub, I also managed to blow everything up right before the demo.

Joschi Kuphal

Joschi Kuphal: Back in IndieWebCamp Brighton, I was planning about how to move on with my website https://jkphl.is/ I was thinking about how to create a new website.

And in Brighton I decided I wanted to use AsciiDoc to write my website, it's like Markdown with more features.

Today I spent my time on a pipeline for rendering AsciiDoc documents to my website. I have quite some history with AsciiDoc so I put together a set of tools based on Nodejs to render AsciiDoc documents to my website.

I set up a test document with all the types of content I need, what I found out is that there is kind of templating process I can plug into and write little pieces of templates for all kinds of notes(?modes) and now I am at the point where there is something on the web and it looks like this at the moment.

Nice thing about AsciiDoc is that GitHub or GitLab is also able to display AsciiDoc documents. On GitLab is where I'm maintaining the code.

Next thing I will work on is improving that template so the website actually looks like what I would like it to look like. After that I will migrate all my blog posts.

Daniel Pietzsch

I'm Daniel, that's my website here https://danielpietzsch.com/

What I want to do is show upcoming events that I am going to attend on my website, there on the right side of my website. I can add a new one in Calendar application, "Hello IndieWeb", add this.

The other things I did was create a shortcut here to build my website "Build dp.com", I can trigger a build via GitLab which hosts my code. You can see there's a pipeline running there now. While that takes maybe a minute.

The calendar is public, so I have a https URL, and I just query that every time I build the site, and then I parse the data, put it into data in my Jekyll project, and use Jekyll stuff to update my site.

Now it's done. Refresh. There are two events now, refresh and it should show the third one, it says Beyond Tellerand number three (with Hello IndieWeb)!

Matthias Pfefferle

Matthias Pfefferle: I worked on a reply-context in the new Gutenberg blog editor in WordPress. To add a reply or like you have to go into the HTML source code and add that. I started with a Reply block, and then you get a little thing on top of your blog post, and if you put that in a microformats parser it should show the in-reply-to.

I experimented with having an inline thing for like and replies so you can markup text and links as reply and used new HTML elements reply and like and I can make links out of that. Sadly this overlay is not extensible so I can't include it there.

That's what I did.

I approved some pull requests and also the image and logo pull requests (from Paul).

James

capjamesg: my demo is quite sensitive to speed so we'll see how it works.

This weekend I wanted to make it easier to click images like this one. This image you can click on the books, the vinyl record, the laptop and it takes you to different parts of my website. It takes a while for me to put together and copy and paste things.

I built a new tool which lets me do that a lot easier. It only runs on my machine, takes a bit of setup. Allows me to click on parts of an image, and it highlights blue, I get the polygon coordinates formatted as a image map and I can choose a URL for this, and then that sticky note will have a link at the end which means it's now clickable.

I can go ahead and do that for every single sticky note. Highlight two sticky notes at the same time. It could be any image I could be clicking on, a vinyl record, sticker, whatever.

This is an image map I made earlier. I'm hoping to do some work on helping other people make image maps too, it's a bit difficult but also a lot of fun.

The final thing, I made a list of the image maps on my website:

https://jamesg.blog/image-maps/

Maps for Düsseldorf, the schedule I just showed you, they're all on my website. That's what I did.

Dominik

https://lostfocus.de/author/dominik : What I did is I have a blog post that I wrote about it.

I have the ActivityPub plugin by Matthias running on my blog. It used to use my Gravatar as an avatar, which prompted some people to give me the feedback that they can't see in a Mastodon client if the post is by me or my Mastodon account or my blog. I decided to go the simplest route, so that my blog has an icon that says "BLOG" on it. That is the main thing that I did. The picture is just created, I had to hook into the WordPress editor function to know at what point it is an ActivityPub request because I didn't want to exchange the icon for all the other stuff like if I sent a Webmention.

David Shanske

David Shanske: this is a random webpage on my website, December 14th, 2023: https://david.shanske.com/2023/12/14/

And the feature I quickly added is I wrote the code to have these links the previous and next days, so if I click it, it goes there, so that's December 13th 2023: https://david.shanske.com/2023/12/13

It doesn't just work for dates, it also work for years, and I can travel back in time and forward in time, but I cannot travel into the future.

I can go back to 1981.

If you go to a year that doesn't exist, it no longer displays the default 404, it instead says There were no posts made during this period.

I also did some other random things, WordPress things, Micropub plugin, finally fixed all the tests. A lot of little things, but this is one of the things I wanted to do for a while.

Pierre Carrier

pcarrier.com: I made new websites zero password and one password.

https://0pw.me/

The idea behind zero password is that you can store a small bit of data, identified by your signature key, so if you can generate any key or identify it by password you can use that, and then store up to 64kb for that key. I only check the signature, no encryption, so if you want to you should encrypt things yourself. That's the gist of that.

https://1pw.me/

And then I built something that does exactly that. Pick a password like hello, and then I have my note here. I can say Hello Dusseldorf. If you know to type Hello, you can find that again. If you don't know what to type you can try the empty password. I use that to store my secret key for one password because I want it to work even if I don't have any of my devices.

So yeah that's the things I built.

I iterated a bit on the signaling protocol I want to build: https://signali.ng/ to make it easier to establish WebRTC connections without infrastructure of your own. So if anybody has interest in WebRTC, please review this and let me know if I have the right stuff to solve your needs. For now it's only a doc but I've thought a lot about it.

Aaron Parecki

Aaron Parecki: My project is all about logging in using IndieAuth, I'm trying to get IndieAuth to be better. One of the things there's a real opportunity for is a new API, experimental API, currently in Chrome Canary and Firefox has some support as well. It's called Federated Credential Manager which is fancy sounding. The relevant part is this part that is very experimental, it's called Allow IDP registration: https://github.com/fedidcg/FedCM/issues/240

It lets any website say that you can use it to sign into things. There is a very long GitHub thread explaining it and instructions for turning it on. You go into Chrome Feature flags and turn on IDP registration, this is for now, once it ships it would happen automatically.

The point is one you are logged into your IdP, in this case I'm using this test domain, this could be my website, or it could be a service that is running this. Kind of like you might setup your website with IndieAuth.com right now. That website can tell the browser that it is a website that can be used to log into other websites.

If I click this button (Register IdP) we should get a prompt from the browser which says this website wants to use account on other website, so I click Allow, and now this website is registered as your identity provider.

If I go to an application to sign-in and I click login, it could be called "login with your website" or whatever. I'm on this website and I click sign-in. Instead of asking me for my domain name like I normally would do on like Quill, what I'm trying to do is trying to get rid of this step of I don't want people to have to type in their domains. Instead of that, click this button. The browser already knows my website, and it knows my authorization server, so this popped up by the browser since it's already registered. Now I just click (Continue as Aaron) and it's doing stuff behind the scenes to exchange credentials and now the website knows my domain. It knows I'm aaronpk.com. I never had to type anything. All I did was login to my identity provider here to tell the browser it's my identity provider.

That's my little prototype. I'm really excited that this is possible. I'm going to share this feedback back to Google. Their most important question is are there any websites that want to accept this kind of login with arbitrary websites. Now at least I have it working.

Q: Tantek Çelik: How long until IndieWeb.org accepts this kind of login?

A: Aaron Parecki: IndieWeb.org certainly can, however I might first ship it on webmention.io because I actually have a couple hundred users a month, which is enough to get their attention.

If I'm on my website and I want to login to my website, it doesn't really make sense to use my website to log into my website, because how do I login? I could use this API to login to my website with a different identity provider, like a Google Account, or a GitHub account, but that's not really the point.

Q: Tantek Çelik: more like the IndieAuth use-case, where I could use my website to log into your website, and then maybe there's posts that you only want me to see?

A: Aaron Parecki: right, you could log into my website with this. I just need to be able to log into my website some other way in order to kick off this entire process.

I should also mention this is live on a lot of websites using Google as an IdP now, they're actively using this now to replace their widget that pops up into the corner.

It's the IdP registration feature that's interesting to me that enables this for IndieAuth.