After a long day chasing a nasty bug and finally finding it, yeah!!! I decided I wasn’t in the mood to continue to push my brain to do more Typescript. I switched over to something fun: redesign how image content looks in the timeline. The impetus for doing this is that sometimes the image content is quite large and when there are several images in a post it can dominate the timeline. I just want to try to limit their vertical dimension. My idea is to show all the images from each post in a horizontal strip, splitting the strip into equal sections for each image. The images should just fill the space they’re given - so a bit will be cropped off each one. The strip itself should be tall enough to get a good preview of the image without dominating the space too much. Following the idea of a wide/narrow two-mode UI, I’d like to make the height grow proportionally to the width of the timeline. So if you have the window expanded very wide the images will be quite large. But with the timeline narrow the images will be more of a thin strip.
This involves some interesting code
- Parse the HTML content retrieved from the Micro.blog API and extract the img tags. Up until this point I’m just rendering whatever HTML Micro.blog hands me. So this is the first step into a bit of content massaging to make it more palatable for a client app.
- Remove the image tags from the post cleanly. This is a bit interesting because there’s no standardized place/structure/classes or anything else to a Micro.blog image post.
- Add new views to the post list item that display the images. Create more standardized image tags with standardized classes.
I’m using a nice DOM parsing/manipulation library called Cheerio. Doing manual regex on the HTML might be faster in a few cases, but it’s also notoriously fraught with errors.
For the future
Someday I’ll also cache these images lazily and persist a bit of the cache locally. I can also generate thumbnail sized images and keep the memory requirements of the timeline view to a minimum. But that’s for another day.
You can see my first pass below
Update: I’ve just realized that the image display in Twitteriffic works nearly exactly like this. While trying to do something really specific to my app I think I just subconsciously duplicated something I knew really well. So… well… crap. I think I’ll just have to keep working on it some more to try to find a way to make it more my own thing. I definitely want it to have a more definite affordance to help the images look clickable, so let’s call this my rough draft. 🙃
What is this: these are random snippets from my dev journal working on a simple client app for fun. This is a non-serious side project, progresses very slowly, and will probably never see the light of day. The images may not perfectly correspond to the journal entry. In most cases I’ve added them later based on the relative time of git checkins.