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.3: Going Dark


First Refinement of Web Log: Part Three

What changes have been made?

Here now the first projected refinement is closed. While there’s polishing to be done and a new frontier to be envisioned, I’ve gone ahead and added a dark mode switch, in the process destroying the non-JS sanctity of the site (of course JS is already used locally for tasking) and undertaking a significant revamping of the way colours are managed via variables in the sass/scss/css. The dark-mode isn’t working perfectly, broken on the splash page by my decision to add JS that does an ultra-speed rotation through various welcome images.

Lightbulb

While this paragraph alone pretty much covers everything, there’s some depth to go into here and I have once again recorded some thoughts to take a look at. The changes are as follows:

While I didn’t make many notes around housekeeping beyond mentioning that housekeeping was done, there’s some good notes on the subject of dark mode and color variables in sass. Let’s now proceed now.

We See Better in the Dark

Here’s a quote from my notes taken during the previous refinement, where I had initially planned on performing dark-mode making, but did not - predicting javascript usage:

“i think I will penetrate the javascript hymen but proceed with no further strokes. I will do a dark-mode toggle, to change colours. There seem to be a variety of ways to accomplish such a feature without JS, but at least for now they blast past the functional lines i’m trying to walk in a simple github pages hosted setup, so i am going to comprise on my ethics. link

I often use dark modes on websites and apps, even opting to sometimes use 3rd party plug-ins to similar effect, when my goal in using them is to process text with my eyes and mind. I figured that I would implement a similar feature into my blog, since in production it provides a bunch of interconnected texts for a viewer to read… and not much else. The dark-mode feature has become very popular lately in general, even becoming incorporated into desktop and mobile operating systems rather than being harboured in the web or web browser - it feels like an assimilation, while more complex and weighty, analogous to the incorporation of flux as practically a default accessibility/display setting in most devices and operating system. It seems to coalesce with the great replacement of traditional code/programs with web-focused technologies.

First thing to note is that, at least in my context (jekyll + github pages), the most straightforward and only way within reason of doing this is with Javascript. The Javascript virginity of the website is now lost, I have put this off for a short while now, and the consequences could be catastrophic down the line. At least now there’s a dark mode. At a basic level I have simply socked in a new body class at the end of my SCSS, which re-specifies the body’s and it’s children’s colour’s. With a small JS script, which listens for a click on a specific element and then toggles the body class, hoisted into the head of the default page template, we are ready to rock now. It’s quite bad really, having to resort to this.

This isn’t a very exact outlining of my method. On top of the fact I ended up using the root to refer my dark and light colourings, I actually am using variables for all my colours. That way the dark mode switch will simply change the very root to a dark class, rewriting the colour variables, and everything trickles down from there.

Colour

As mentioned earlier there is a rising tide of dark-mode support across computer interfaces, and web browsers, for example, can now specify whether they would prefer to draw a dark theme or not. Supporting this is recommended on the great CSS tricks website, along with some further advisory on the caveats of using javascript to inject/support a dark theme in general. With all of this functionality in place, the final step is to consider the most efficient way of defining this so-called “dark theme” in the CSS. I could race forward and simply expand my body.dark appendage with many children’s and overwrite colouring where necessary, or I can work-smarter-not-harder and examine some philosophizing on the matter. I had imagined utilizing the already-present SASS part of the workflow to figure this, but in fact that seems to be yet another in a long line of foolish thoughts since these are means to a more discrete prior and post processing end.

Using VS Code very nice search feature, I can filter out and check through all the “color” containing properties and see that, while there isn’t much diversity, I have a lot of these defined. I transmute these various unsaturated values and mild variations of teal into the HSLa variable format indicated in the above linked set-up. We’re done - it is that easy. Again, I am basically following this set-up inline linked nearly exactly. It is very excellent and elegant, and my hat is off to Mr. Liu for his walkthrough.

Making a Splash

Welcome Example

I will eventually get around to making a very cool and complicated animated vector splash image, but for now I instead built off of what I already had. A bunch of thrown together raster images in slightly dim sepia and bluish tones, looks nice. Looks like it could be seen on the installer of some old mysterious educational CD-ROM package or something. My favourite.

Welcome Example

Unfortunately my poor JS skills and laziness mean this is continuously animated, and the process will not stop or pause to perform any other functions. Hence why dark/light mode cannot be toggled on this page, instead will remain set to whatever it was last toggled to - if you wanted to see it in the opposite mode you will have to move to another page to change, then return. The animation simply uses a loop that replaces the appended number on the image filename with a setInterval, and I will have to come up with a more elegant solution at some point - or at least read about JS some more to know what is even going on.

Fission Mailed

Game Over

Done, then. There are now interesting modifications and additions that I chose to defer to a future refinement, not least because I need to work on my master website and make a more concerted effort to learn more about being a web-beast, and the end result after this refinement is a web log with much extra functionality and elegance on the surface. Under the hood is messy, and this has to change at some point, please.

What comes to my mind immediately, if it’s bothering me so much? First off the styling isn’t quite right, I want to have more stylized and cool indentation/horizontal displacements going on in the long-narrows of most of the pages. The animations and a lot of things done with cascading style’s sheets are a bit messy and bloated, and I need to quell fears of poor compatibility with old browsers somehow. The gulp script is missing a lot of specifics and is overall a bit clunky in how it shifts images around - in fact I am having a repeated problem where Jekyll, set to build from the gulp task, will not clean up after itself when I stop serving the test site.

Dilbert Comic

I can go on. There’s the splash page, which features rasterized images rather than a cool vector animation. I haven’t attempted to embed or try reaching for a creative code library like p5js or other to have fun with during think hours - there isn’t even a single instance of a canvas element on the site. I have also failed to reform the tagging system, as well as the images folder within the assets folder which is just a big trash mountain with no subdirectory right now. What else? I can go all day. I won’t though, but I will return to blog-enhancement soon.

First I need to blast out my web logs more routinely and prolifically, as I did before I was waylaid with trying to enhance the site rather than its content, after I first put it online in August of the year 2020.

Okay