h a z a r d o u s

thoughts and things from andrew snow · v1.2

welcome to hazardous, a website maintained by yours truly. have a look around! you might find some interesting things if you're an aspiring computer geek, especially if you enjoy the command-line as your primary method to interact with a computer. this is still a very young website, and while there's not much here yet, i don't plan on it going away any time soon.



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.


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.


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.


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.


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.


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.


for older updates: archived frontpage