You can find out more about Eddie and Jonathan at their respective websites:
For past episodes or to subscribe to future episodes, visit us at twodads.fm.
This episode was originally posted at <a href="https://twodads.fm/2018/11/16/episode-the-kids.html" rel="canonical>twodads.fm.
I took a look at my IndieWeb goals and made a list of the things I want to have live on my website by January 1, 2019.
I used to display webmentions my posts received on the previous Jekyll incarnation of my website, but now that I've shifted my website to being dynamically rendered, I haven't rebuilt the webmention display code. I'd like to finish that.
I want to import all existing webmentions I've received to date and store them as JSON files in my post storage folders alongside my posts.
I also want to make sure that whenever my site receives a webmention that I immediately add that new webmention to the JSON files in my post storage folders.
Finally, I want to display webmentions on post pages. I'm not sure if I'll include them on feed pages or not.
h-card based nickname cache: Currently my nickname cache is some random storage code and has to be edited by hand. I want my nickname cache to be saved h-card files and to be able to save new people to nickname cache by sending an h-card via Micropub.
Subscribe page: Add a Subscribe page like Aaron Parecki so that people can more easily choose what feeds they want to follow from my website.
If I am able to actually complete all the above goals, I'm going to shift my focus to owning my reading and figuring out if i can leave Goodreads behind.
The first feature using this information are weather effects. Initially, I'm just starting by darkening the website background and adding snow falling if my current location's weather is said to be snowing. It looks like the image below!
I am able to do this because my iPhone logs it's current location to my own instance of a server running the Compass software. My website retrieves that location and uses it to query the Dark Sky API and save that information to my server.
I currently restrict the weather effects to the homepage, although since individual posts also contain weather data from when the post was made, it's not outside the realm of possibility that I could have posts that I make during snow could have this snow effect on the post's page. A fun little way to prepare my website for the winter!
It’s not much, but I like the addition.
Today, I ported my code that handles the highlighting and display of my code snippets to apply to code blocks within articles that I write on my site. What's the difference, you ask? Code Snippets are long segments of code that are either an entire code file or a large segment of a code file. Code Blocks are short pieces that are displayed inside of articles that are meant as tutorials or coding tips.
Regardless of if you are viewing a full code file or a short code block in a tutorial, you always want code to look the same. Syntax highlighting, monospaced and containing line numbers. I also tagged all the articles that had code blocks with a code-examples tag. This allows you to see a stream of all the articles that have code blocks.
I'm pretty excited to have rolled this out. The way it works is when I am writing a blog post in markdown, I can use the same syntax as GitHub supports (three backticks and the language name)
Here is an example:
- Then you can write code examples in here and they will get syntax highlighting... wait, is this code-block-inception?
It's nice to be able to write a regular article and then quickly and easily add code examples using a familiar markdown syntax.
The other thing I'm thinking about is about CodePen style code collections, where you can have multiple code files and also display what they look like. In the IndieWeb, we've already determined a collection is just a post that contains child posts. So I could have a post with the title of the "CodePen" and a description, then within the code collection, include child posts that are all Code Snippets.
That would be the first step, the second step would then be recognizing code collections and not only displaying the source code but allowing the person viewing it to "view it live". I read up today about how websites like CodePen do it and it seems pretty simple, mostly just involving injecting the source code into an iframe. But that's another adventure for another day.
This means I can post a code snippet, select some specific lines and then share the resulting url with fragment to someone and the code snippet will automatically highlight the specific lines to them. Also, the possibility exists that someone could include a code line fragment in the url when sending a webmention to my code snippet and like media fragment, I would then be able to consume the code line fragment and associate the webmention with the specific code snippet lines.
One more step towards owning my own data AND replacing GitHub functionality through distributed means.
They came to the conclusion that there are four groups of people that you want to treat their responses differently:
These are essentially your friends on Facebook or your follow list on Twitter. These are people that you have chosen to connect with in some way and this logical conclusions can be drawn around the level of interactions you're willing to have.
My plan is to display these responses completely (name, photo and content of response). This list will be generated for me by adding anyone I follow, as well as anyone I have sent a reply to. This will NOT add people to whom I have liked, emoji reacted, quoted, or bookmarked. Those are lower level responses that do not indicate a deeper level of a desire to connect with that person.
These are "friends of friends". You can assume they won't do anything TOO bad, but you might not want them posting all over your site. There is a deeper level of trust here because of mutual connection but still some care should be taken. This can be determined through different ways. One way that has been brainstormed in the IndieWeb is Vouch.
I don't currently track 2nd level connections but I liked how Tantek thought this through, so my plan is for replies to display their photo and name as "other people that have responded to this post", but not display the content of their reply. I also think if they send a like, emoji reaction or quote, I'll display it just like I would an Immediate Connection.
This is the World Wide Web, and anyone could send anything to my website via webmention. So this is a category you likely want to moderate.
My initial thought is I will accept likes, quotes and emoji reactions from them but I won't list attribution of who did it while moderated, just the reaction itself. For replies I am considering potentially listing the url of the author of the post under "other people who have replied" but no name, photo or content while moderated.
These are people who you do not trust for whatever reasons have happened for you. You don't want to associate with them in any way.
Responses are not displayed from these people and they are not listed in the moderation queue.
This means I'll need a moderation queue. Anything from a 2nd level connection or from the Everyone group will enter the moderation queue. Responses from 2nd level connections should appear higher in the queue than responses from the Everyone group. From there I can choose to:
All in all, it was a great session that I really enjoyed and I'm looking forward to actually working on implementing some of these features into my site.
The database as made a lot of things easier, one is that it is now quick and easy for me to create feeds of posts. Right now I have two types of feeds, tag feeds and channel feeds. Tag feeds show all the posts I have created with a given tag.
Channel feeds are a bit different, I have two types of Channels: static and dynamic.
A static channel isn't too much different than a tag, when I create a post I either manually add the channel to the post or I have a preset rule inside my server that attached the channel to the post. The key to a static channel is that it just shows all the posts that have been assigned to it.
The dynamic channels are really where its at. Dynamic channels allow me to provide an id (which becomes the url that you use to access it), a name (which displays at the top), a layout (currently I have 3 types of layouts: Cards, Gallery and Archives) and finally a "query". The query is where the magic is, this is essentially a set of properties that will be passed into the database query. That means I can dynamically, without writing any code (just a config file) create a new page providing it's url, name, layout and some requirements around what type of information I want to display.
One thing my new channels has allowed me to do is to create the Archives layout and set up a query that fetches all the articles I've written and display them in a list. It was super easy to set this up because of the way my database cache is working and the way I've configured my channels.
I group them by year, then by month and display each article on it's own line. I really like how it turned out. I was heavily influenced by Manu Moreale and the article archive they display on their site. I imagine mine will grow more into it's own design and style over time but everything starts somewhere and I like starting mine based on Manu's work (Thanks for the inspiration!).
You can check it out over here, or below is an example of the articles archive as of today
The other nice thing is that because my website already supports Dark Mode, on macOS Mojave with Dark Mode turned on, all the colors will automatically invert on this page with no extra work!