h a z a r d o u s

thoughts and things from andrew snow



I spent over 5 hours working on the site today, and it now has less than when I started.

That's good and bad - I simplified the header after getting stuck on a small detail I couldn't get to straighten out. So there is a feeling of annoyance there, that ultimately I didn't accomplish what I set out to do.

But! Learned a bit more about how to work with javascript. Let me specify: I think I learned enough to realize I'll want to avoid it as much as I can from now on. It's somehow even more finicky than everything else I've worked with when it comes to order of execution, where in the code you call a script - and I briefly encountered something called ES6 modules, I think? Not sure why this is the case, but to call some code I can't simply use script - I have to give it a class, ie <script type="module" src="foo.js">.

For all that effort, the average size of my site skyrocketed, some Lighthouse metrics plummeted, all in all I'm trying to tell myself it was worth the effort, but honestly I'm hoping to maybe hop over to HTML5 and CSS3 which may promise the same functionality at a significantly smaller cost.

In other news, this is kind of a bummer:

We know that the current cadence is 2 years from release for bug fixes, and 1 year after that for security fixes. This means that PHP 7.2 will be going out of support in November. PHP 7.3 will be going into security fix mode only in November. PHP 7.4 will continue to have another year of bug fix and then one year of security fixes. We are committed to maintaining development and building of PHP on Windows for 7.2, 7.3 and 7.4 as long as they are officially supported. We are not, however, going to be supporting PHP for Windows in any capacity for version 8.0 and beyond.

...upon first glance, anyways. But then it occurred to me - why continue supporting a windows build of PHP, when most folks will likely be migrating to running a PHP server inside WSL?


hell yeah, i've been trying to get quotebacks.js working, for some reason it would only render one blockquote and exit the script loop, leaving the rest unformatted.

on a whim i decided to update the local copy of the script - voila! i am not near well versed enough to have combed through the code for bugs, so big ups to the maintainers for continuing to improve on an already great idea.

in other news, you might have noticed the new header. hopefully soon i will figure out the best way to work it into the rest of the site - something about the order in which the javascript functions are executed is causing something to calculate the actual, viewable size of the website incorrectly.

that being said it just dawned on me while writing this that i should give it a shot now that the quoteback script is working. sonofabitch!! that was exactly the hangup. of course there's now a new issue, which is on this page, the 'main content' border is drawn first, and instantly. on every other page so far it seems like everything is executing in order, with the proper timeframe. but hey, if fixing something ever just fixed something without creating new issues, the very laws of physics would shatter and our universe would collapse into itself. so i guess i am relieved that i now have a new problem to tackle.

besides that i've been slowly chipping away at a few new pieces. i'm starting to regret the current way in which i have organized the website, because some of the new content is more political and personal in nature than the current stuff i have in the notes section. i thought about just throwing in a new section explicitly labelled as the blog, but then it's like, well what would i call this, the front page? i didn't plan on it being full of lengthy posts, and it's kind of taking on a life of its own.

decisions, decisions.


success! as i predicted, mecha is very flexible and provided multiple solutions for tagging articles with a particular date.

via YAML, you can define the time in the header - the simple solution for me was realizing i had to use time instead of date.

title: foobar
description: a simple way to include time metadata
time: 2020-07-03 18:01:01

alternatively, mecha will also look for data in a subfolder with the same name as a page's filename. so if you wanted to define a date for a file called foobar.page, you could create a folder called foobar and, in a file called time.data, simply add the information:


the first method is simple and how i will be doing it, the second method is useful for any page that will be including alot of extra data that will be stored in the page's data subfolder.

07.02.20 updated the audio section. wound up being a bigger deal than expected, because the web is slowly ratcheting down on insecure methods and practices. the consequence which might have the biggest impact is that we're on the cusp of getting rid of iframe embedding entirely - at least for anyone like me who maintains a small web presence and doesn't have a team of developers to dig into the server guts and get all of the content security headers straightened out.

i noticed that my embedded videos were broken and so i had to finally commit to integrating a library that properly handles the youtube API to allow videos to display without being blocked as violating the cross-scripting standards most modern browsers are moving towards. there might be an article on the full process here soon, mainly for my own notes, but for now i should definitely give a shout-out to the plyr.js library that made this a fairly painless process.

minor housekeeping note: i finally discovered how to actually arrange the indexes for the audio, notes, and projects frontpages. i can't complain about a lack of docmentation for mecha, because it's being maintained by one dude and i could always jump in to help.

unfortunately the method involves defining how to sort the subpages by defining it in the section's YAML header, and it seems to use the 'last modified' metadata of each posts' actual file. this means editing anything old will cause it to bump up to being considered a recent post, and a larger issue that will eventually happen is if i ever have to move the server, all of the content will reset date-wise to the time that it is all uploaded to the new server.

so on the horizon i will either have to pore over the code to see if i can in fact define a publish date with YAML (which is how most platforms like hugo etc do it) - i'd be surprised if this wasn't the case, because so far mecha has been deceptively flexible and able to adapt to anything that has come up.

but for now i'm off to the lake. july 4th has always been a holiday for me, but not because of any particular jingoistic concern - growing up with a group of friends who were all pyromaniacs led to july 4th being the day we still all get together, as we get older and life takes us in all directions.


06.19.20 still trying to strike a good balance as far as my content-security headers go. i definitely should not have thrown my website into a utility that analyzes the overall security of this site - because the second a web page calls data from anywhere, you've already failed in the eyes of the CSP judge.

currently working on an update to the site header - it's an image that has been crammed through a program that rendered it... in html! as with the last header, my goal is to avoid relying on an actual image, and instead use the web itself and the army of web languages avaliable to render art in a way that fits the platform.

under the hood, zardo.us is getting pretty gnarly. i have a bad habit of merely commenting out code when i think it is no longer needed, on the offchance i wind up needing it down the road.

therefore, my to-do list for the end of june will likely involve spending some time cleaning up the codebase - already an easier prospect now that i am securing weekly backups of the website data.

the second goal will be to hack away at fittext.js and see if i can't get that banner up top to dynamically resize based on a few factors. besides the novelty of its implementation, in removing the fittext javascript i discovered i somehow broke my css layout, and the website no longer has a minimum width in which the main content is shown. for the most part this is not an issue. but that's the thing about web development, most anyone can write good, passable code. but the real great stuff is the code that will run the same everywhere, regardless of platform or device.


All of which is to say: Right-wing populism seems like a terrible ideology that needs to be rejected. I disagree with nearly everything these people believe in. The kind of world they believe in is not one I wish to inhabit. They are in favor of reactionary cultural traditions, militarized borders, bigotry, and rabid nationalism. I am a leftist, meaning that I favor free movement of people and multiculturalism. I am anti-nationalist and anti-militarist. Donald Trump’s ideology seems to me to be monstrous.

while it may ultimately be nothing more than a few words floating through the cyber, i would like to go ahead and make it clear that hazardous is a project built on ideas, those ideas built on principles, and those principles are strongly rooted in opposing arbitrary authority and all the forms of oppression stemming from it.

black lives matter, this is not an opinion nor should it be - it is simply a fact insofar as one accepts morality itself as a fact. police departments shouldn't be using surplus military equipment and do not need the funding to do so. ICE is the modern american gestapo.

"an injury to one is an injury to all." solidarity with those fighting to make this world a better place in spite of everything thrown at them on a daily basis.


i stumbled across a neat little utility, quotebacks.js. it is both a chrome extension as well as a javascript library, which i integrated into this website so i don't have to depend on CDN from outside servers.

Quotebacks are like a quote retweet, but for any piece of content on the web. They work on any webpage, and gracefully fall back to a standard blockquote.

Thus, "Quotebacks" is three things:

  1. A web-native citation standard and quoting UX pattern
  2. A tiny library, quoteback.js, that converts HTML <blockquote> tags into elegant interactive webcomponents
  3. A browser extension to create quoteback components and store any quotes you save to publish later.

i'll likely be fiddling around with the styling to make it a bit more je ne sais ha.zardo.us, which is another benefit to hosting the js natively, although a uniform blockquote style is sorta one of the main points of this library.

i've got cross-site loaded scripts on the brain because in trying to get the above to render correctly, i traced some errors back to my content security policy headers. wound up just importing the script to my server, which i prefer anyways. i try not to take the 'cloud' mindset for granted - hell, i still maintain my decades-old mp3 library despite relying on spotify for my daily tune selections. a lot of modern developers have a lot of faith in the assumption that the source you're designing something around will always be there for you to use, which is something i'll never really be able to commit to personally. i'm not a cloud luddite per se... i just always make sure that anything i need or rely on isn't only stored in the cloud.

05.09.20 making the site faster,better,stronger. attained a perfect score with lighthouse audits for the briefest moment, but my mindset has changed in recent years: i guess sacrificing audit points to include some javascripting etc. is worth the tradeoff. websitewise, i rewrote the authentication page that guards my contact info from the robots - it is now wrapped in the general site theme code, and looks more seamless with the rest of the layouts. i also added a new note which details how to build openSSH 8.2 with a added u2f/fido2 features, which allows a user to use a security device like yubikey or solokey for unlocking an ssh key. a chief feature i use a bit in this piece is the revamped code display blocks, which now render clearly, integrate highlight.js for syntax coloring, and have a nice blinking cursor to really spice up the feeling of looking at a terminal screen. it was very much inspired by the terminal.css framework.

pre code::after {
    content: " ";
    -webkit-animation: cursor 1.3s infinite;
    animation: cursor 1.3s infinite;
    background: #999;
    width: 5px;
    line-height: 14px;
    bottom: -1px;
  position: relative;

05.07.20 i know this is likely something few if any folks noticed, but i have been playing with the font rendering, and it looks like i managed to get everything rendering correctly - nice crisp fonts and font edges. it was a nice issue to tackle because like most selectors i was familiar with when younger, the font properties have dramatically grown in scope, and at first i was somewhat thrown off by that. at the end of the day the added complexity is more than worth the control one can have over how text is displayed. naturally i seem to have become familiar with this right as variable fonts are beginning to take off! dang.


04.00.20 music server in a box: nanopi NEO, Nanohat PCM5102, ubuntu, mpd+ncmpcpp&mopidy. external NAS was used to host music files. login shell was replaced with script that spawned an instance of CAVA.

04.21.20 the hardest part of having a website to play with is resisting the urge to go and implement+integrate every cool little trick you learn or read about. that being said, i recently learned that the text-shadow property was far more flexible than i previously thought, and i had some fun playing around with the different options until i wound up with a sort of 'theme' or 'style' which is currently up in mockup form over at fadestate. i'd like to add elements of the sort of distorted 3d effect to hazardous, but i'm afraid i won't be happy until i either redesign everything, or scrap the effects altogether.

side note: i think the trick to appreciating hugo is to not use hugo. my current static gen workflow is beginning to reveal limits to its adaptibility. in particular the folder structure required to build everything is lacking in a sane way to resolve internal links, and it's a drag trying to figure out if i should tinker on the engine or just hardcode url's. probably bits of both until it is hacked into a complete feature.

04.13.20 @TODO: document shvldb, cargo-bay. carve out unused style definitions. get more familiar with the variable font settings.

04.12.20 - subtle site tweaks, including a fun little trick with the site header: resize the window to play with it!