My little journey on the way to bringing more images to this blog

11 Mar 2018

A few weeks ago I got around to add the capability for LSBEngine to host images. I was really pleased with myself but still felt like something was missing: I couldn't add thumbnails to a post! Looking into my Feedly feed I realised that my own feed (yes I subscribe to myself, that's not a crime!) was one of those ones which didn't use catchy thumbnails.

Adding thumbnails to a post is not that hard per se, I have a collection of images that are indexed in my database and it was easy to add a thumbnail attribute to my posts. I then added a simple selector to the post creation form allowing to choose among all your uploaded images and I was pretty much set. I improved the image deletion process a bit to disallow deleting an image which is used a thumbnail. I was really pleased that my architecture allowed to really simply add such a feature.

Then I realised that if I intend to add a lot of posts I will probably need a lot of thumbnails and that having a simple selector will quickly become unmanageable. I wanted to use a simple selector with filter, a bit like the one presented here. I was surprised how much code was needed to produce the desired result. I managed to find a lot of examples using different techniques involving more or less code and maybe some libraries such as the JQuery UI extension for JQuery.

I had resigned myself to code it by hand following one of the examples I found. Trying to understand how some parts of that code I found myself on the MDN Web Docs on the page about the datalist tag. There it was, the example there was exactly what I needed to build. I had finally found what I was looking for, completely by accident.

In the end, I could complete my task rather easily. But the way I found my solution is the interesting part: it took me randomly browsing the documentation to find this. The more seasoned frontend afficionados have probably already understood the problem: the HTML features used there are not available in Safari and probably for that reason nobody really uses it. In my case I just decided that I am not supporting Safari and that I am happy with it. What I find interesting here is how websites have such a strong need for compatibility that they will not even consider a feature that might alienate even any part of their readership. Even more: it is even hard to find references to this feature. The latter is probably also explained by years and years of development without this part of the HTML API being available and implemented by browsers, forcing people to find their way around for a really long time and therefore flooding the tutorials and discussion boards with code examples not containing this gem. The availability of frameworks taking care of such details for you might also explain the lack of literature about the subject.

I will conclude by saying that I enjoyed this journey quite a lot because I could, through the implementation of a rather simple feature, get some insight into the world of frontend development I might not have had otherwise. I understand more and more the struggles of building a fully responsive and widely compatible application.