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:
- Tag System: The index page (“tag browse”) for tags has been retooled and boosted.
- Style Tweaks: The stylesheet has been polished and improved, with enhancement to the cleanliness of posts and there’s even some added animation in parts of the site when viewed on desktop.
- Responsive: In going for mobile parity I went through and fixed up the way elements of the page are sized, making them dynamic/percentage based and inserting breakpoints in device width to draw the page in an ideal format if viewer is on desktop.
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.
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.
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).