Please note: This site is in an active redesign. Some things might be a little off 🧐

EH

colophon

Added Locally Stored Webmentions

The main part of my newwwyear 2019 goal is storing webmentions locally and displaying them on my website again, as well as adding moderation support.

It's coming along nicely. So far, I've imported all existing webmentions from webmention.io and stored them locally alongside my post storage. So if my post is stored in /2018/11/15/5/post.md then my webmentions would be stored in /2018/11/15/5/mentions/ each webmention is stored as a .json file with the source url being the filename. This allows for one webmention per file and if I want to load all the webmentions for a specific post, I just open up all the files in the mentions directory. So far, I'm really liking this and how well it's working.

If it's a homepage mention, it will save the webmention in /mentions/homepage/ and if it's not a known post, right now it will collect the webmention in /mentions/unknown. Again, all of these webmentions are stored as individual files. If I recieve an updated webmention, it overwrites the file, so I get the updated information.

Besides just downloading all existing webmentions, I have also added support so that when webmention.io receives a new webmention, it pings my server and my server will go ahead and download that webmention and save it locally. This means that I am now only relying on webmention.io to deliver my webmentions, not for any long-term storage.

Finally, I've added support for displaying webmentions on post pages. I used to have this when my website was powered by Jekyll, but when I moved to a dynamic website, I didn't bother adding that functionality back until I could do it the way I wanted it. Now that I have my local storage I was able to go back to displaying them. Below is a screenshot of the webmention displays on one of my posts:

I'm still trying to tweak exactly how I want things, but I am pretty happy with things for a first pass. I am avoiding "metrics numbers" so instead of display any totals, I am trying to just display the content. Instead of showing 5 "likes" I would just display 5 πŸ‘ and of course each reacji will display on it's own as well.

Displaying Responses on Feeds

I am not currently displaying mentions for posts when they display on feed pages. I am thinking I might just display a row of emoji representing that last 10 responses. If they are reacji, it would display the reacji, for the rest I would translate the response types to the following emojis: likes πŸ‘, replies πŸ’¬, repost ♻️, bookmark πŸ”– , listen 🎧, mentions πŸ’­. It would show a recent snapshot of activity on a post without giving in to numbers.

Moderating Webmentions

I also am not doing any moderation of posts currently, every webmention automatically gets added and displayed. I can delete a webmention, of course, but there are protections against spam appearing until I delete it. I outlined how I want to deal with moderation, the 2nd level connections are going to be a bit tricky so my goal is to first just start with immediate connections as always accepted, others unlisted until I moderate. Then I'll need to create a mute/block list and have incoming webmentions check that list and respond appropriately.

Receiving Webmention Deletes

Finally, if someone sends a webmention delete (a HTTP 410 Gone response from a webmention source url) right now I don't think my website will do anything, in fact, I don't even know if webmention.io supports them. I would like to be able to accept and process webmention deletes. My plan is not to actually erase a webmention that is "deleted" but instead, to set the visibility to private. I can of course, manually delete any private webmentions that I don't want any more.

I just added the ability to add audience to my posts. For public posts It adds a small description at the top of the post defining who the audience of the post is. For example, I have a reply I wrote for an online class. In the future, it will control who can see a private post.
I just added support for the Micropub Category List query to my website. Looking forward to adding support to Indigenous for iOS in the near future as well. This is the first of many goals completed for #newwwyear 2019.

Adding weather effects

It's only November and Maryland already has snow in the forecast for the next 24 hours! The last couple of weeks I worked on a new feature that has been enabled on my website today. Every 20 minutes my location and the weather at my current location is saved locally on my server. My website is then able to utilize my location and weather information throughout my website.

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!

Added updated date

So far my website has only ever had published dates, however today that changes. I don’t often update posts so it hasn’t been a high priority for me. However, I do have several pages where I maintain content (My about, now, using and indieweb pages). Until now I’ve just manually typed in the month year that I last updated those pages. Today I added support for having an updated date within the actual post object where it can sit beside the published date and be picked up using microformats.

It’s not much, but I like the addition.

39.3 β„‰β˜οΈcolophontech
posted using quill.p3k.io

Owning my code blocks

A week ago, I wrote about how I added the ability to post code snippets to my site instead of GitHub Gists. This was the first part of a couple of things I wanted to improve about how my site handles the display of code.

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:

  1. ```javascript
  2. Then you can write code examples in here and they will get syntax highlighting... wait, is this code-block-inception?
  3. ```

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.

Owning my code snippets

In the software world, it is very common to take snippets of code that you want to show or discuss with people and post it on GitHub as a Gist, which is a public link that shows code with line numbers and syntax highlighting for the language used.

Back in January 2018, Aaron Parecki added the ability to post Code Snippets over Micropub to his Micropub client Quill. He also fixed up a nice display on his website.

Today, I am excited to add the same functionality to my own site. Using the Code Snippet interface of Quill, I am able to create a snippet on my own website, that gets line numbers and syntax highlighting. You can see the first, test snippet in JavaScript here. I also wanted to get more functionality like GitHub, so I added the ability to highlight lines on the page to help with conversational context. If you click on the line while looking at a code snippet, it will automatically highlight the line and add a code line fragment to the url hash (for example: #L3 or #L1,L4 or #L3-L5). You'll notice the example includes both a single line, multiple non-contiguous lines or a line range. In fact, it will even support multiple non-contiguous ranges. What is better is that when the page loads, it will read the url fragment and auto-highlight the respective lines.

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.

My New Articles Archive

So as I mentioned earlier today, I've added a database that keeps a searchable cache of my posts in my website so I don't have to open hundreds of files in order to build the various pages of my website. It's allowed me to move almost all of my pages off of Jekyll and later this month I'll be removing Jekyll from even being on my server.

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.

Channels

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.

Articles Archives

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!

Added Micropub Media Endpoint

Last night I went to the June meet up for the Baltimore Homebrew Website Club. There, we work on our personal websites, talk about what we've been working on recently and talk about the latest IndieWeb technologies available.

Last night I started working on my Media Endpoint for Micropub. It's basically a segment of my site that takes care of accepting photos and other media so that I don't have to upload it at the same time as I post actual information to my website. I left without getting it all done, but I'm excited to announce that it is officially finished!

To prove it, here are my green checkmarks from micropub.rocks a website test suite for micropub related technology tests.

Screenshot of micropub.rocks verification

Another step in my website's growth πŸ€—