Eddie Hinkle

colophon

I'm pretty excited! Today I rolled out "Play posts" on my website. After watching traffic between the Nintendo Switch Parental App on iOS, I was able to utilize the API calls to write a script that runs periodically and creates Play posts on my website with the information about what I played and how long I played it.
45.2 ℉☀️Frederick, Marylandcolophon
posted using quill.p3k.io

IndieWebCamp Online 2019

So this past weekend, I helped host IndieWebCamp Online 2019. It was a really fun weekend, if a little unorthodox. I think the camp was successful and enjoyed and yet had learn-able take-aways for the next online camp as well as ideas for single topic sessions which is a bridge somewhere between an virtual IndieWeb Meetup (aka Homebrew Website Club) and a full IndieWebCamp. The benefit of single topic sessions is extremely low overhead while still moving discussions forward in various topical areas without having to wait for a full IndieWebCamp.

We had 11 sessions, each one happened in their own time slot. That's a bit unorthodox for an IndieWebCamp but it allowed some of the sessions to spread out and have completely different people at some than others based on interest and timezones (yes, timezones are hard). Interestingly the sessions ended up in three groups, 4 "Friday" sessions, 3 late-night Wordpress sessions and 4 "Saturday" sessions. Although due to timzones those days are a bit blurry.

I really enjoyed all the sessions. A couple that really stood out were the AutoAuth and Groups sessions. In fact, inspired by the AutoAuth session, that's what my Create Day project was on! For Day 2 of the camp, I worked on adding AutoAuth to my site. AutoAuth is a proposed extension to the IndieAuth specification that allows IndieAuth to happen between software without the active intervention of the site owners. The goal of AutoAuth is to allow access control to posts like how Facebook allows you to make a post with only specific users able to see it or how Twitter allows you to have a private account.

First I was able to add the right scopes to my authorization endpoint

which I defined as "Allow a third party application to request the ability to read other people's content". It can probably be improved but essentially it allows my Social Reader to grab private posts on my behalf so that I can read them in my app.

I also implemented protected posts on my website and did some testing. I added two people to the "access list" (which I call audience) of a private test post. I then tested visiting that page as an unidentified user, as me, as a person on the access list and as a person I know is NOT on the access list. It worked correctly, for an unidentified user, it presents the correct HTTP headers for AutoAuth so a reader knows there is content there if people are identified. However the page itself doesn't say anything about the existence of a post to an unidentified user or a user that is not on the access list.

It's kind of a strange error message from when I had a static site that had to rebuild. I need to adapt that, but the key is it works! Then when either I or a person on the access list visits the url, you get a different page completely!

Surprise! There is a post there! In the future, I could even do things like restrict the location of the post to people that I know or other similar things. AutoAuth opens up the doorway to a whole interesting world of semi-private information.

I am not actually finished with the project, I have some more stuff I need to finish as far as how my site communicates with other people's sites to verify the person is who they say they are, etc. But it's an exciting start and sometimes starting is the hardest part!

I'm hoping to get this work wrapped up in the next week so I can start testing it. Plus, if I get it working and start creating private posts for people on the IndieWeb, it might encourage them to start adding AutoAuth to their projects as well!

51.62 ℉☀️Frederick, Marylandindiewebindiewebcampcolophon
posted using quill.p3k.io
A preview of my new homepage!
17.21 ℉Frederick, Marylandtechcolophon
posted using indigenous.abode.pub
Yesterday and Today I took my homepage through a refresh. My goal was to make my website feel less stoic and plain and more fun! I haven't finished the colors but I'm pretty excited about the direction! Interestingly this time last year, I was also re-thinking my homepage! Must be the cold weather of winter!

https://eddiehinkle.com/2018/03/06/6/article/

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.

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 🤗

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