The One Imperfect Side of You
- Posted by mariteaux on July 7th, 2020 filed in Technologizing
- Comment now »
I sit down to write this blog post, and one question immediately scrapes my brain.
“How many posts have I tagged ‘web design’? Don’t you ever get tired of working on these things?”
The answer, by the way, is 30, not counting this one. The next two runner up tags, “Gopher” and “My Music Collection“, have 8.
And the other answer is…kinda! I’d really like to keep hammering away at writing my fantasy furry lads, and I guess given that I just streamed it (that was a lot of fun btw), it’s no secret that I’m working on another Quake map. Yet here I am, still pushing around HTML. I can’t just leave stuff unfinished in my head, I guess, and after I converted my site to a table and got back my independence from best practices, I decided to do the same with the top-level Somnolescent site. (Group blog overhaul too, coming soon:tm:.)
Now, the table layout itself wasn’t much of an issue. I got most of it on the first shot, frankly. In fact, here’s a screenshot of that first shot!
The issue here is that both actually use JavaScript. I barely know new JavaScript, let alone classic Netscape Javascript 1.2. This meant digging up an old reference from…somewhere and trying to translate modern APIs into something much better supported. I’m telling you, we take a lot of very simple things for granted, stuff like writing text to the page. Did you know JavaScript 1.2 didn’t even have that? It had document.write(), which is basically as good as AIDS these days, and even at the time, it kinda sucked shit.
The one saving grace here is that a new browser will support what an old browser does without question, as long as it’s not such egregiously bad practice that some technorati eventually rallies for everyone leaving it behind. Thankfully, the same JavaScript will work about everywhere. I have no clue how I’d keep the two scripts from conflicting otherwise. Found my old reference, let’s get going.
Now, there’s three core hotspots of scripting on somnolescent.net, the page banners, the ads, and the “meet the Somnolians” page. The first two work on the same core principle, an array features a list of choices, and a variable is set to one of these choices by multiplying the length of the array by math.floor. Most of the core of the script worked the exact same, I just had to convert the “old” QuerySelector()-based method to document.images[].src, which is the way you manipulate and preload images in Netscape JavaScript. If you use the name attribute, it works about as efficiently as QuerySelector too, which is nice, though it requires you giving up validating as HTML5 since name is obsolete now. Tragic.
The harder part was the “meet the Somnolians” page. Listeners in Netscape JavaScript are actually set up as HTML attributes, hence the OnClick and OnMouseOver stuff, while good practice now is using an inline EventListener in your code. Here came the nasty part. While I could get hovering over each head to work just fine, and I could get clicking to reveal the bios just fine, I couldn’t get both to work! Once OnMouseOut fired, it would always close that head’s eyes, even if that was the actively-selected Somnolian.
This has to do with the way the original page was set up. In the original setup, the heads weren’t separate images, but rather, a spritesheet. This meant hovering was handled totally separately from the script; mouse away from the head, and the stylesheet appended by the script to open the eyes is unaffected. Here, each head is a different image altogether, so mousing over the active head overwrites which image is being currently shown, no matter what. I tried to make it check for which head was active in the code before it overwrote it, I tried only overwriting the heads at times when I knew they’d all be closed, but it just didn’t come to pass. I had to either scrap the hover or the eyes staying open.
On the new version of the page, there is no hovering. Clicking on the heads now shows you the old hover image instead. Not quite as animated, but it still works alright. (Not that the old “active” heads went to waste; they’re now used on the static bio page for even older browsers and people with JavaScript disabled.) There’s also a few new pages, one for our new public IRC channel, one for a few of our non-Somnolian friends (check em out), and the aforementioned static bio page. Not a bad update, all in all.
At the moment, I’m having trouble getting the site to not force HTTPS, despite it working hours ago and despite there quite literally being no .htaccess at the moment to even rewrite URLs, but eh. You know how this stuff works. I’ll see how it’s working tomorrow and contact support or something if not.
My dream is to have the Writing category as big as the Technologizing category, I promise.
