Dev Diary 0013 - End of January through February

Life has been hectic. Like I mentioned back in December, I’m juggling two close family members with health issues. My mother-in-law survived the surgery, has gone through rehab, and is now back at her house (edit: and since I started writing this draft, back to the hospital). She requires a lot of help and lives over two hours away from any family. It’s a hard position to be in.

Plus my daughter received a rare, potentially chronic, diagnosis. The knee injury was the catalyst to something bigger, which even though the knee has now healed, she still cannot walk unaided. It will be a long road to recovery.

All that to say, besides work, coding and side projects have taken a bit of a back seat for now.

Job Related

I fixed the issue with Azure Dev Ops and got everything running again. Which was a relief. Then I spent a week or so going over my goals for this next year and making a roadmap. At the end of the year I want this redesign project ready for launch and there are so many things to do to make that happen. Turns out there was a little money left in the budget to hire a contractor for some help so I don’t need to do everything solo.

I split up the year into seven six-week cycles to leave room for vacations, holidays, and business travel. The last week in each cycle is focused exclusively on bug fixes and making sure there are tests for all major functionality introduced. Then I took stock of all the features that need work done to get launch ready and set an appetite for each of them. Most of them I can only allocate two/three weeks on and then I will need to move on to keep up the pace. Luckily at this point most of the features have already been implemented in a rough fashion, so I’m only refining them. Still, this will be hard to pull off.

Side Project - Lillihub 🐸

I tried an update and broke everything. (It’s fun when things work locally but fail when deployed🙃). So I rolled all my changes back out. Since then I’ve been fiddling with the ui design and the overall architecture and fixed the issue I ran into, which was a dependency mismatch.

Highlights

I’m working on adding in support for the micro.blog premium feature, highlights. In the micro.blog website, you add a bookmark you can access a special reader page that lets you mark up highlights. Which you can then search or start blog posts from. I really like this feature and I wanted to bring it into my app.

There is an endpoint that returns a web page that has this functionality baked in. You can access it with a GET request to https://micro.blog/hybrid/bookmarks/123 (where 123 is the id and passing along with a valid access token). I ran into a couple of issues with this. Nothing big. Just a couple of hard-coded micro.blog links and differences in UI since it doesn’t have my stylesheet.

So my approach: Right now I’m using a DOM parser to parse the returned web page, grabbing the content, which helpfully has an id of content and the contents of the base tag in the html head. This allows me to rewrite any image tags in the reader to reference the right source.

Then I grab the text of any existing highlights and do a .replaceAll('text','<mark>text</mark>'). Which I do instead of using positions like the current web-reader uses. I just couldn’t get the position portion to work and I tried a couple of different ways. The highlights were always a couple of characters off.

Next I wrote a bit of JavaScript to capture new highlights, and I think I found a way to capture the underlying HTML tags with it. You basically create an empty fake container and clone the selection contents into it and then return the innerHTML. I haven’t fully tested the code below, but what I did test worked.

function getSelectionHtml() {
	var html = "";
	if (typeof window.getSelection != "undefined") {
		var sel = window.getSelection();
		if (sel.rangeCount) {
			var container = document.createElement("div");
			for (var i = 0, len = sel.rangeCount; i < len; ++i) {
				container.appendChild(sel.getRangeAt(i).cloneContents());
			}
			html = container.innerHTML;
		}
	} else if (typeof document.selection != "undefined") {
		if (document.selection.type == "Text") {
			html = document.selection.createRange().htmlText;
		}
	}
	return html;
}

document.addEventListener("selectionchange", function(event) {
	const selection = window.getSelection();
	
	if (selection.rangeCount === 0) {
		return;
	}

	document.getElementById('selectionInput').value = getSelectionHtml();
});

This should make it easier to set highlights over links or images.

The last thing I need to do is get the highlights to save. Still figuring that part out.

UI Updates

I made a quick post about some UI changes here. Feedback was positive 😊

Here was the update I shared

and here is a new one showing the timeline in the dark theme

I do think that the updated version, on the left, is the direction I’m heading towards.

Combined Posts + Conversations

One big change I’m contemplating is combining posts and conversations into one area, instead of having them as two separate tabs. The image above, left, shows this in action. It will still gather up all the conversations and show them under the original post, it just won’t break them into two piles like it currently does. I’ll probably have a toggle to switch it back to the separated view for those who prefer it. But overall I find having it in one place simplifies things.

Notes

Micro.blog released a notes feature 🥳

It’s simple and I’m really loving it. So I’m moving over my notes to it. Plus they released an API… so I just had to play around with it.

Still need to make the create/edit/update screens. But I think it’s looking good 😎