hazardous

thoughts, things, etc. from aka jerome scuggs

old news

recently:

07.28.20

I wish I could tell you that when I first saw those requirements they bothered me. I wish I could tell you that it felt wrong to code something that was basically designed to trick young girls. But the truth is, I didn’t think much of it at the time. I had a job to do, and I did it.

Nothing that we were doing was illegal. As the youngest developer on my team, I was making good money for my age. And in the end, I understood that the real purpose of the site was to push a particular drug. So, I chalked this tactic up to “marketing.”

The client was extremely pleased with the site. So much so that their rep invited me and the entire team out to a fancy steak dinner.

The day of the dinner, shortly before leaving the office, a colleague emailed me a link to a news report online. It was about a young girl who had taken the drug I’d built the website for.

She had killed herself.

i've always wanted to take this hobby here, my lifelong fascination with software, hardware, web development, etc - and maybe look at getting serious about doing it as a side project.

but man. it's nerve-wracking, y'know? everyone starts out wanting to change the world at best, and at worst... just have fun, get paid to code. i'd wager just about every person we collectively tend to blame for ruining the internet before ruining the world as well, at one point made decisions about their code - unable to consider the ramifications and alternate applications for them.

07.27.20

well!!! i can't find anything that seems to stick out when reviewing the website, as far as layout goes. to celebrate, i will officially consider this this complete version 1.0 layout.

the two outstanding issues that will require some real under-the-hood work are:

  • defining a minimum width for the body block, and updating the header/navigation to gracefully handle resizing
  • the plyr.js library used to embed youtube videos is throwing errors in the console when trying to relay a postMessage due to differing source and target url's. this stems mainly from Chrome browsers and does not seem to affect others - but if I can find a workaround, i'll try.

and the remaining cleanup:

  • firefox doesn't round off some borders, i.e. the text inputs

while i do not use firefox as my main browser, i noticed while doing compatibility tests that the scrolling is fantastic, compared to chromium: smoother, with an 'easing' feature as well.

a quick attempt to replicate this with javascript... did not go well. i'll stick a pin in it, given my recent flirtation with disaster.

07.26.20

hazardous was down for a day after spending an entire night wrestling with the CSS, trying to work some magic with positioning. i probably should have called it quits many times, but i kept digging until i wound up buried. luckily i backup the site after significant changes are done that don't break, so i've rolled back to the last commit.

i don't think i am alone in considering the art of arranging elements via CSS to be something of a dark magic. the proof of this is everywhere: browsing webdev-oriented blogs and sites rarely nets you breakdowns and primers on how to use tables, or different link src strategies. but once a week at minimum you will find some new post attempting to demystify flexbox, or a primer on using grids, et cetera.

in the end though, the only way to really end up with a CSS file in which re-arranging the position of elements is both simple and intuitive to the user is, for the user to build the website's layout themselves - which is not as common in a web full of prepackaged libraries, frameworks, engines and platforms.

currently, hazardous runs with a heavily modified layout that came standard with the Mecha backend, itself based on the Bootstrap HTML5 layout. so wrapping my head around it would require a pretty intense amount of study, and the easier option in the long run for effortless management will involve designing the layout from the ground up.

i did manage to claim one small victory though - one that has been long coming: a major cleanup of the actual CSS files themselves. a rough calculation shows something like ~60% of the code was unused - representing all the various Bootstrap elements that are not utilized on this site. alongside this was alot of commented-out code, which results from my cautious nature of not wanting to erase a change that may not wind up being successful. alongside the main CSS was also a variety of CSS files that are called to by various javascript libraries which power the site, and like Bootstrap these CSS files have a bunch of extra code which are not necessary for this particular site.

5 CSS files totalling some ~70kb have now been reduced to 2 files totalling in at just over ~10kb. you are unlikely to notice this difference, but in the long-run it will mean less money spent on server cost. that being said it also does mean the site now loads that much quicker, using that much less RAM - though we're talking milliseconds and kilobytes here.

07.24.20

It’s always better to own your platform

This advice is accurate for any form of content, be it blog posts or a video.

Until you host your content on your platform, they will always live at the mercy of the company hosting the platform.

07.19.20

front page sure was gettin' full! so i've now started culling old frontpage updates, with a link below. nothing particularly important there, but hey why not.

07.17.20

So, I know this might be the 4th time I've posted this - but I think I am finally satisfied with the typography. The most annoying part of my struggle is how insignificant this really is - I'm talking mere pixels of difference. But I had a goal in mind, and I knew it was possible, and it just bugged me that I couldn't get it all to come together in a way I knew it could.

The two final steps were fairly simple compared to the rest. One was just a dumb mistake: I forgot to specify the font-weight and so the browser was defaulting to a far heavier font style. Pretty embarassing because I put way too much effort into writing out CSS declarations for each and every font weight for over 20 different variations - and forgot to actually call the one I wanted.

The second was a bit less obvious, and more of a lucky 'what-if': what if the background color was muddying up the browser's attempts at rendering the font? Previously I was using a very light shade of gray, but I have now bumped it down as light as possible - literally one step above pure white. The only way it's even obvious that the new background isn't white is when certain things like the blockquote elements are on-screen and stand out against it.

07.12.20

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.

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?

07.11.20

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.

07.03.20

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:

2020-07-03 

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.

06.17.20

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.

06.07.20

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.

jackrip

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!