This is a personal blog, please observe Think Hour for ad hoc quasi-diary writings and Big Ideas for my ratified longform items. I will see you there.


Blog Refine 1.1: Tag Browse & Styles


First Refinement of Web Log: Part One

What changes have been made?

I’ve made most of the desired changes to the website, with exception of JS additions and other more advanced things. I’ve been hesitant to post while I was working on the blog, I am coping by blaming the fact I add posts by committing them as a change to the github repository, and if I did that I may as well be implementing site updates. The changes are, in brief, as follows:

I’ve yet to work on the scripts (for template generation, JS image captions, image compression), and the tag generation system that uses a python script is for the most part still as ugly as ever. In fact, I’m still trying to figure out what the most effective method would be for this. Rake tasks have been mentioned a few times in information I read, as an all in one solution for managing and updating things, so I might look at that.

Procedural Conclusions

In going through the code and getting better acquainted with HTML, CSS and Jekyll/Liquid/Ruby there are some important things that have made themselves apparent which I need to note to myself here.

The idea of implementing image captioning that specifically uses the already-there “alt-text” in order to be backwards compatible is not really feasible without some extra finagling. There are solutions that involve using Jekyll’s “includes” functionality that are honestly very clean, allowing you to insert a prefabricated bit of HTML code via Liquid, which you can configure whenever you like. I might just end up using something like this, but it is not backwards compatible. I won’t delude myself in thinking it would take all that long to go through and edit all my posts to support this, especially in comparison with doing an alternate solution, but that isn’t really the point. The method I’d like to implement first and foremost, just for the sake of doing it, would be to use Javascript to detect the image features in the right context of HTML and modify them from there. Writing this out, I remember that many of the “alt-text” already written isn’t exactly perfect for caption purposes anyway. We are going to look at this some more.

Another conclusion is rooted in similar code beguiling. It is the implementation of an “open in new tab” functionality, exclusive to external links. It sounds crazy as I type now, and maybe I’m wrong, but I am pretty sure there really is a small conundrum when it comes to incorporating this functionality when it comes to links inserted by way of markdown. It’s another situation in which the implementation would be utilizing a simple bit of extra code going forward (in-line a style), but would leave old content working the old way.

Tag System Notes

When first deciding to take a closer look at the way tags are generated and drawn, I must have spent hours reading through the “collecttags.html” include that is purportedly a fundamental step of having a tag system without a plug-in. After doing a bunch of local testing and then on github, it seems like (and God forbid I am not reaching a phony conclusion) the “site.tags” object/array is already automatically compiled by Jekyll, specifically by Jekyll in a way that is compatible with GH-Pages. I honestly could not figure out what was going on here, either what extant code exists or tag object has been generated beforehand that is fooling me or what dependency changed that makes this point of the guide now erratum.

Once I mentally tidied all of this up, I went ahead and tried to implement my targeted design for the tag page (going from the raw list I used previously, to a 3 column design with demarcation for each letter that has tags beginning with it). I used flex boxes and flex direction to go for a “big box > columns within box > boxes within columns” layout. Some Liquid is used within the loop that draws the tag index to move on to new “column” div boxes after each third of the letters has been drawn. It’s worth noting that this is layout of three adjacent columns is enabled by styles that are behind a “device-width” threshold, and the flex-direction is initially such that a single column is built if the “device-width” isn’t high enough (the viewer is browsing with a phone).