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.2: Animation & Gulp


First Refinement of Web Log: Part Two

What changes have been made?

Workshop

The web log site is now prettier and cooler thanks to changes recently made. While it is a decided departure from intentional low fidelity antique web feeling and construction, it is not extremely drastic and the web log retains minimal construction. There are now some much cooler CSS animation elements, mostly on the tag index page, and the animations/transitions that were already present are enhanced or refined. Along with this, the HTML and CSS has been revamped to try and make use of some modern standards in semantics.

This refinement has chipped away greatly at the planned changes I had entered into the github project managing tool, where now some quality of use, gulp-wrangling and unfortunate javascripting issues and wants remain. Overall the changes made in this seemingly penultimate subroutine of initial full-fledging blog-enhance routine are as follows:

While very nice looking and satisfying to implement, the changes are quite far from ideal. Foremost the SCSS file, that is even before processing, has grown to a whopping ~700 lines, which could probably be elegantly squashed down. There is some repeated use of keyframes to get similar effects working across different contexts, that might be better as a scalable base selector or something. This, coupled with the fact the animations are not perfect in execution despite a wealth of directions, is a bit frustrating.

Gulp Man

On top of that, the gulp script I created is lacking in some areas, for example it calls upon the python tag-generation script - which performs operations I am sure could be done internally if I rewrite it for javascript - and lots of lazily skipped configuration in the functions that compress images. With certain parts of the entire refinement endeavour being frustrating and taking a while to get working, I have some good notes to transcribe. They are from the hilariously frustrated version of myself inside of and enduring the process.

Air Crash Investigation / Animator Transcribed

Scale

I will escape some select notes from my scribblings now, and try to recollect and assemble some conclusions and gleanings from the work. There are less than ten words spent on notes for the first thing completed, which were the extra header links and semantics rewriting. There’s nothing to say there, this was basic. Animation is another ballgame however, and some advanced apologies for some randomness in link splicing here, imagine they indicate frantic googling.

MockUp

Quickly I ran into trouble when I began editing the tag index page animations. I even have a very quick and simple mock-up of how I wanted the hovering to shift the floating stack of boxes, I can put this above. In concept this kind of abstractly visualizes a digital filing cabinet, under each letter, which then shifts into stacked papers as the user inspects that letter (by hovering over a large invisible container covering that letter it’s list) - cool, right?.

“z-order, or z-index. stacking order as it pertains to pseudo-elements, a foolish decision to rely on. attempting to create a faux 3d style, while actively eschewing 3d transforms, and then finally coming to attempt to use a hacky fix that incorporates them (z-3d style, z transform 1px)”

Before even getting there, I was in trouble with trying to get a 3D-like effect of stacking the boxes - previously I’d had a simple configuration of a moving box-shadow that was only an indication of where I wanted to go. After some research on how I might achieve this without adding wonton DOM-bits, I discovered pseudo-elements and resolved to use them. I saw that decision through to implementation, but it is not without some weirdness.

“the performance aspect of layout>paint>composite— composite level harbouring fundamental animation selector transform and opacity”

This quote speaks to this weirdness. I’m not sure I could place it exactly, but the way the page is drawn - pseudo elements come before and after a parent they’re derived from - and the way “background-color” figures into things meant that the frontal box (the parent/main element) looked like, or at least it’s color fill looked like, it was behind the others. That’s not even getting to the issue of scale (related to content), which I rely on for the vanishing-point apparent depth.

“I give up. the animations I want to perform are too advanced to be accomplished in CSS. The reliance on robust start and end states, and my added pseudoelement f*ckery is proving to make things a little too hard to achieve smooth animation.”

Apparently I gave up at one point, and amongst some rambling cope about wanting the most compatibility possible, it looked like it was all over. I don’t remember anything but a broad swath of fugue state, but I am very familiar with obsessing over inconsequential things to the point of burning and seething angry. Very funny. I called this a “microscopic crossroads”, but evidently I continued on. With the complex road remaining the chosen route, things look and move very nicely but there’s still an absence of a reverse hover animation.

“after hours i am quite surprised at how well it turned out. enough that my gladness overrode my notice of a lack of mouse-leave reverse animation, which I am almost certain is not possible, at least without getting really messy or ditching the beautiful life-giving idle keyframe animation and switching purely to “transition” effects (the idle animation really is the source of any of my troubles here i think. i made my stubborn bed and chose to lie in it.)”

After that, I heaped some extra workload into the oven. I think this probably came as an artifact of my using one of the fundamental “header” selectors for writing the styles, but retroactively I prefer to see it as a way to get my money’s worth out of the work put in. I basically had the idle animation from the tag index page used elsewhere as decor for select headings. The header buttons were refined with ease, and I won’t cover that.

“use the letter boxes from the tag index/browse page across the site as a default h2. this naturally would hopefully include h2 incorporated via markdown. despite being able to initially get almost approximatey nearly there by reverting to useing just h2 + pseudo element without a parent div, thus allowing markdown to seamlessly utilize these styles, i am running into various problems with inheritance of size (which is naturally going to be variable based on content and frontmatter variables etc) due to the oddity of pseudoelements relationship with the element they are summoned out of”

Hopefully the inline hyperlinks to some of the topics I was reading about while doing this offer a more extensive narrative, because to replicate the ordeal in text here would mean pages and pages of writing, but I want to move on. The beauty of a completed task is that it is completed, it’s over and done with, and we can be at peace. Yes, I did it, it is done - feels good man. Let’s go ahead now.

Air Traffic Control / More 2 Gulp

Gulp Woman

After getting through with animations and more complex styling, I’d gone through header elements and how they manifest through markdown. This lead to inspecting markdown closely, and on top of more fruitless interest in image captioning, I culled some unnecessary code I was routinely using to make sure my images get centered in posts.

“i couldnt say why but i had manually been escaping some code to orient my images nicely - just centering them that is. i’m not sure if its just the nature of using sass and nesting selectors but I seemed to get everything working - even images with hyperlinks in/on them - so this is excellent. vs code offers a search and replace that allowed me to retroactively expunge all of these ugly refdef escapery.”

After this, and probably other un-noted things that are lost to time, I moved onto the biggest of tasks - making a master task to do several tasks for future master-master tasks (writing and syncing posts). This ended up being much less intensive than getting animations right. I had looked into this before, things like Rake were in my head, but I ended up going with gulp.js.

With gulp, you can design and put together a series (or multiple series’) of tasks to be run from the command line. The code itself is written in javascript, and thereby thanks to wide support you can utilize a vast array of plugins/libraries to construct the functions that your tasks will comprise of, with a very easy to use API/framework to manage and execute these in sequences of your own definition. For example you might do image compression, tag generation and then start the site building in a master task, but also make the image compression section available individually, which itself might be a series of sub-tasks using different plug-ins.

Node

Gulp could simply be described as node.js reformed for task operation, or at least leveraged. Relying on streams lets you find, manipulate, save or execute files efficiently, and can at the same time call on the many node packages that have been ported for use in gulp as plugins or are friendly with it from the jump - greatly (but specifically) extending functionality. It’s highly modular, and the exact mechanics of node that are behind it are above my pay grade to understand thoroughly. For example, to my untrained eye, the “pipe()” phrase in gulp-codes is reminiscent of “.then()” which I’ve used before - this keeps things moving in desired sync, where it may not otherwise, to avoid errors.

“some issues with using a not “digitally signed” file in appdata when trying to use vs code terminal. using a termminal outside of vs code works alright - maybe i should always do this anyway?”

I don’t know what I was referring to above, but it was one of the only issues that perverted my mission enough for me to write it down. I subsequently found a cool “sudo”-like windows parameter/command called “Runas”, but never used it - I am not even sure if I could or would need to, ever - but the word is pretty cool. It was also useful to look at various guides and other implementations of gulp with jekyll, which is about the only other thing I noted down that I can properly include.

Next?

Next

The remaining items I have planned are few now, from the github project page for first refinement. Mainly I am looking to make a cooler splash page and incorporate a dark mode. I can’t help but feel I’m not covering the Gulp usage enough in this post, but it was really quite simple, and I have ruined it for myself by not taking enough notes. The web log looks much better now, the difference is quite insane if you refer to the initial meddling with Jekyll.