Dev Diary 008 - Week of November 20th

Whew... These last couple of months have been rough. This update is pretty short. I hosted Thanksgiving at my house this year so I wrapped up most dev related items by Wednesday.

Lillihub

I put out an update before signing off on Wednesday. It included some small fixes and photo swiping on a desktop screen as well. As I mentioned last week I used a web component library from shoelace.style to pull it off. One issue I ran into was that the component didn't render until the DOMContentLoaded event fired. As I mentioned before somewhere, I think, is that Lillihub doesn't actually fire that event until everything is streamed over from the server. Which takes ages 😆. This was a big tradeoff I took to make make everything work without JavaScript. So the images would display stacked and then snap into the carousel about 20 seconds later....

Anyway, the fix was actually pretty simple. I needed to run the shoelace component code first and since it was of type="module" you need to add the "async" to the script tag. By putting that in the head, Lillihub starts getting the script and executing is as soon as it can. So it actually renders the components as they are streamed. Pretty neat. 🦄 No JavaScript? No problem, the images just stayed stacked.  

<script async type="module" src="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.11.2/cdn/components/carousel/carousel.js"></script>

One of my next action steps on this project is to bundle up the three components I'm using into Lillihub and stop relying on the CDN. This is made much harder because of their use of import maps and my resistance to use a bundler. (Yes there are a lot of benefits... but I do miss the days of grabbing a single .js file, and license, and plopping it into a directory)

I also haven't really come across too many instances where pulling the images into a carousel breaks things. By break I mean that it doesn't look right, maybe extra white space or two image dots when there is only one image. Since micro.blog pulls in blog posts via RSS, there is no standard format that post + images come over. Even among blogs hosted at micro.blog since themes can be customized. So I made a best guess and added in my own markup to the incoming post.

The code itself is pretty straight forward and you can see it here. I find out if a post has images and then iterate through them creating the web component and then removing the original image from the DOM. For those I follow on Micro.blog this works out pretty well. There is one person who's content has malformed paragraph tags with images and those display with too much whitespace. Then the Micro.blog CDN occasionally returns blank 1x1 pixel images. But overall it works and looks great. Plus no one has emailed to complain.

Other Dev Adjacent Things - Tiddlywiki

So I did begin work on a little tiddlywiki clone. But then fell back in love with Tiddlywiki when I was exploring the UI and code. I may have grabbed a tiddlyhost.com site 😆

I did customize it a bit. I'm using these plugins:

and the theme, Krystal. The theme was a little broken for my version of Tiddlywiki so I added the following css and fix things up a bit.

Other Dev Adjacent Things - File Management

Another project I began tackling was my personal file management. Over the years I've tried various cloud services and some knowledge management systems. Which made everything a mess. So it's time to clean it all up before the new year. I was inspired by this post about Slaying the Obsidian Dragon and this one that is linked to about File System Infobase Manager and got started.

I'm migrating everything to my main Linux computer and I'm using the following naming convention for my files: "key1-20231127-descriptive-file-name". The "key1" is both the category and subcategory that the file belongs in. For example I have a category "kids". "kids2" is all public school related information. "kids3" is all summer camp related information. So the public school calendar for my daughter was renamed to "kids2-20230906-school-year-calendar-23-24.pdf". The second part of the file name is the file creation date. Then I'm just plopping all the files in one big directory.

I also have on master text file at the top that lists all the categories and subcategories. This is working really well for single files. I'm still figuring out how I want directories of files to be organized (or removed) and if I want to do something similar for my images/videos.

Other Dev Adjacent Things - Learning Rust

I made a little time at the end of the week to play around with Rust. I like it! I've done a few small examples in it and now I want to dig into it a bit more with a small project after I finish the Rust book. I think I'm going to combine it with my want to code my own web browser. So I spent time gathering up resources, checking out posts from other brave souls, and I'm ready to start thinking a bit more deeply on it.

I also came across this interesting video while hunting, great food for thought: Hammock Driven Development - Rich Hickey

I'm not interested in building the functionality around HTTP or parsing the DOM/CSS, so I'll probably just use premade libraries for that. I am interesting in (descending order of interest): Protecting the user (trackers, bad JS actors), making discovery easier/safer (it's a web after all, RSS?), helping the user keep track of things (bookmarks? tags?), user defined styles, math behind CSS box models. That's not to say this project will tackle all, or any, of those. I'm also not interested in just taking one of the standard browsers and trying to copy it. I want to make something a little different, even if I'm the only one who will use it 😁


Okay, one day when I say my update is short... I'll mean it. I just kinda zone out when writing these updates and the next thing I know they are super long. 🤷‍♀️

Anyway, until next week,
Loura