mari's Scratchpad

Function Calls and Fallbacks

• Posted by mariteaux on April 6th, 2020 filed in Technologizing
• 1 Comment »

The “about the Somnolians” page is built, and it’s the most intensive page I’ve ever built:

I’m convinced this is my crowning achievement as a web developer–period! Being so simple on the surface, you might think that’s kinda silly, but this page is far more complicated than I was expecting, and it works fantastic. I have no intentions of going yet, but if I were to ascend right now (after a quick detour through Cardiff to fit a certain girl for a matching gown >w>), I’d be happy getting judged on this.

This is the first page I’ve ever built to totally require JavaScript, and I knew that going into it. It’d have to listen for clicks, grab bios and links from an array, and display them. Reality was of course far more complicated, but for the first time in a long time, I’ve actually had to think like a programmer, on my own, for myself, with only Mozilla’s reference docs to keep me company. And it’s fun! Fun and satisfying, man.

The basic functionality of the script worked first time, but there was a bit of housekeeping I needed to add in to keep things tidy. For one, the script appends an internal stylesheet to the page every time you click a headshot (to open the eyes of the Somnolian you clicked on), and it’d make these ad infinitum. At the start of the function that returns the bios, I made it check for this extra stylesheet and kill it if present, which has the added benefit of closing the eyes of the previous Somnolian:

// Reset all heads to sleepy, removing any earlier dynamic styling for cleanliness
if (document.getElementsByTagName('style')[1]) {
var dynamicHeadRemove = document.getElementsByTagName('style')[1];
dynamicHeadRemove.remove(); }

Another bit of housekeeping came when I realized that I needed to make the page work on mobile as well. Aside from the media query that sets the page container back up, I had to have an additional query inline with the JavaScript that prevents the busts from showing up if the viewport is under 960px.

case 1:
bioBG.innerHTML = "@media (min-width: 960px) { main { background: url('../images/busts/caby.png'); background-position: bottom right; background-repeat: no-repeat; } } .caby { background: url('../images/headshots.png'); background-position: -150px -300px; }";
break;

The third and final bit of housekeeping came when I realized that, if someone has JavaScript totally disabled, the page would still look functional, but obviously wouldn’t be. Knowing that, I quickly built a second layout with <noscript> and made the first, proper layout load in through, what else, yet more JavaScript, right after the page finishes loading. This is messy as sin, but:

document.addEventListener("DOMContentLoaded", function() {
// Load in the container's children
// These have to be loaded in after the fact because without JavaScript, they're useless
// noscript takes up the container instead in that case
const contentContainer = document.querySelector('.container');
contentContainer.innerHTML = '<section class="headshots"><h2>Choose Your Somnolian</h2><div class="somnolian borb"></div><div class="somnolian caby"></div><br><div class="somnolian cammy"></div><div class="somnolian dcb"></div><br><div class="somnolian mon"></div></section><main class="bio"><h2 class="bioTitle"></h2><p class="bioText"></p><ul class="bioLinks"></ul></main>';

This is roughly what I’m trying to do across the entire site, really. If you have JavaScript, you get the full experience. If you don’t, you’ll actually be getting some exclusive content (namely the banner you see in that screenshot whoops spoiled it). dcb likened it to a site with both a Flash and an HTML version, and that’s pretty apt. Similar content, but very different presentations.

Either way, this is the last real bit of heavy lifting on my part. All that’s left is a lot more site text. This’ll be done within the week, and I am hype. Also, I’m sore from typing so much, so I’m gonna stop.