Dev Diary 0011 - December 11th - 30th

This month has been rough. It started with an unusual diagnosis for my daughters injured knee, the stress of the holidays, and my mother-in-law going from a routine procedure to a transfer to a larger city hospital to a surgery that ended precariously with complications. She’s still with us but the future is unclear.

I guess all of that is to say I wasn’t on the ball the last three weeks, but since coding is one way I handle stress I did managed to get a few things accomplished.

Lillihub

Timeline Marker

I think the biggest thing I started was a timeline marker. It was both easier than I expected and harder. It is up in production, but not in its final form. I still have tweaks to do. Like most of what I do with Lillihub, progressive enhancement is the name of the game. I try to build every feature first without JavaScript and only when I need to do I sprinkle a little in.

Step One: What was last seen?

I needed to keep track of the last thing a user saw was but since I wasn’t using JavaScript I decided to calculate it off of a page load. Right now at least 10 posts are loaded per page (and could be up to 30 depending). If it was the first page of the timeline or conversation view I record the timestamp of now and I grab the time that the user last visited (see the next section on saving).

Then I take a look at every post and see what timestamp it has. All new? Don’t show the marker and check the next page if the user navigates to it. All with an earlier timestamp? Display “All caught up”. Otherwise just after the first of the earlier timestamp show the marker.

Step Two: Save it.

But how do I save it? My first instinct was a cookie. But that might be confusing if a user jumps from device to device since the data wouldn’t carry over. So then I need a backend of some sort.

Luckily Deno recently released their key-value store and it was so simple to get it up and running. I do need to keep an eye on how often I’m reading and writing to it since there is a usage charge. Which is another bonus in the no JavaScript solution, the calls to the KV store only happen when the page is being streamed and not whenever the user interacts.

It ends up looking something like this:

Step Three: Name it.

So in order to figure out what to name the marker I asked on the blog. I got some great feedback -> December 21, 2023 at 4:39 PM

Step Four: Fix it?

But does this method always work? Turns out… no. Because not everything is processed right away^* by Micro.blog. Let’s say I visit my timeline at 10am and I see all the posts Micro.blog has added to the timeline at the point. Let’s say someone I’m following made a post at 9:59am but it hadn’t finished being processed by Micro.blog at 10am. So when I go back at 11am I have a marker at the 10am mark, but that 9:59am now appears below it and I haven’t seen it before.

I still debating if I want to fix this. In order to do so I would need to sort what Micro.blog returns by post id… and therefore break the strictly chronological order it returns. And I’m making an assumption that the ids are sequential (they look it at quick glance)

^* : This is my own best guess as to what’s happening. I could very well be mistaken.

Enhancements I’m considering

1. Using JavaScript figure out the post that was just scrolled past and save that as the last seen.
2. Fold in “Jump to last seen” functionality

December 18th Updates

As I mentioned in this post: December 18, 2023 at 4:45 PM

• Conversations don’t repeat as you page
• Comments from people you follow are highlighted
• Photo page for a user now has a grid view
• Comment threads now have a collapse at the bottom

The conversations piece, not repeating as you page, was similar to the timeline marker. I keep track of the root ids encountered while paging and now exclude them until the first page is revisted (which resets the array)

The comment collaspe is all CSS. The nice fade and scroll up is done with JavaScript.

Other odds and ends

• The media page now lists the URL of the media item
• You can go back from a “view post” to the timeline/conversations page you came from. The link is at the bottom of the comment thread.
• Bug fix: Crossposting and having everything unchecked. Turns out I should have paid attention to this last line in the documentation: Micropub cross-posting and syndicate-to

Favorite Lillihub thing?

The timeline marker works across devices. This opens up interesting possibilities.