Ch-Ch-Changes
I’ve made some much-needed updates to the site over the last couple of weeks, and I’d like to summarize some of the changes and things I learned along the way.
Design
Unfortunately, I don’t have much formal training in design beyond art classes in middle school, but I like to think I at least have a sense of what looks good and what does not (though I probably couldn’t formulate a cogent explanation as to why something looks good). One facet I’ve been working to develop in is color theory. Ironically, I think the RGB color system may have deterred me from doing so for quite some time. As an implementation detail, RGB is great, and as a lifestlye, it can’t be beat! However, it is a terrible way to think about color. Need to find a tint or shade of grey? No problem! Just make sure all of the component values are equal? Need a tint or shade of a color? Good luck unless that color happens to be red, green, or blue. Enter: Hue, saturation, and lightness, or HSL. You know that weird circumscribed triangle you sometimes find in photo editors? Yeah, that’s HSL. It’s an incredibly powerful tool for describing color, as it expresses it in terms more analogous to how humans process color. Hue refers to the point around the color wheel where its pure color resides. Lightness is a spectrum from black to white and indicates how bright the color is. Saturation is a spectrum between the hue and lightness, and is orthogonal to it, defining how prevalent the pure color is. The pure color component is the key to HSL’s power, in my opinion. Want a tint or shade of purp—I mean violet? Dial in the hue and saturation you want and then slide along the lightness spectrum to your heart’s content. Try doing that in RGB!
HTML5 Semantic Elements
For the uninitiated, HTML is an initialism that stands for the Hypertext Markup Language. I’d like to direct your attention to the word “markup,” as it’s doing the real heavy lifting in describing what it does. HTML syntactically structures and encodes the semantics of the content of the document within the document itself. Generally, this additional information is used to determine how the document should be laid out visually, but that information can be expressed in different ways for different people. For example, italic tags exist because a visually-impaired individual might not be able to see the subtle change in font depending upon how the page is rendered, but a text-to-speech program would also be able to convey that emphasis audibly. With this in mind, I’ve been incorporating more HTML5 semantic elements where applicable, such as wrapping paginated entries in section tags to better delineate them, and adding the button tag to my theme toggle switch. They’re particularly great because there’s no need for to worry about graceful degradation, as even browsers as old as IE6 can be taught how to handle them (more on that later) with as little as a single CSS rule. The internet was invented as a means of sharing information, but that information is only useful to those who can access it. Increasing accessibility (and awareness of accessibility as a ideal) is only to the benefit of everyone.
Disregarding Deprecated Browsers
Time stops for no one, especially anything related to the web. Before I began this overhaul, I knew I wanted to fully-embrace technologies such as Flexbox, but I also wanted to make sure this site is accessible to as many people as possible. In order to maintain my sanity and minimize hacks, I drew a line in the sand; I won’t be supporting any browser that isn’t supported by their developer, which I believe to be a reasonable compromise. I was astounded to discover that meant I only had to support as far back as IE11. I should clarify that when I say support, I mean in terms of visual appearance and functionality. I’ll still worry about graceful degradation when appropriate, but nothing more. After all, I’m one guy, and this is a personal website. No one’s life depends on my site’s footer displaying correctly.
“Hello darkness, my old friend”
I meant to write a post about my dark theme implementation when I made it way back when, but I forgot to do so. C’est la vie. Let’s talk about JavaScript instead! Some people love it; some people hate it; I love to hate writing it. Personally, my take on it is it’s all good in moderation as long as it isn’t doing anything creepy. With that in mind, I principally use JavaScript to enhance the readability and aesthetics of the site. For example, JavaScript powers the collapsible header that you may or may not be able to see depending on your scroll state (Go ahead! Scroll around a bit if you’ve never noticed it before). Why bother with such a thing? Well, most laptop and desktop displays are wider than they are tall, just like human vision, so to afford as much vertical screen-real-estate as possible, the header collapses out of sight as you scroll down the page, and returns at the flick of a scroll control. This design lends itself to progressive disclosure, while being forgiving to users who may not understand why the header disappeared originally. Likewise, it also degrades gracefully, as the header’s initial state is open, and won’t collapse without JavaScript available. Another example on the aesthetic side of things is lazily-loading images (this is still a work in progress as of time of posting). Let’s be honest, we don’t all always have a 100 Gbps down connection available to use at all times. Images are some of the largest assets a page has to load, and god dammit it will do so when it gets around to them! This leads to an unfortunate state of those images materializing in a slow-motion vertical wipe long after the rest of the page has been rendered. Aesthetics aside, this can also needlessly burn CPU cycles if the page layout is altered by the absence of these assets. Both of these issues can be solved very elegantly by lazily-loading images. A lightweight placeholder (even an inline SVG, perhaps?) is displayed while the actual image is loaded; upon completion of which, a handler is called that swaps out the placeholder for the actual image in the img tag’s src attribute. For those of you who don’t believe in JavaScript, have no some fear, for the noscript tag is here! Unfortunately, there’s nothing I can do to prevent the slow-mo wipe effect of potential doom or possible page re-rendering as the layout updates, but I can make sure that the correct image is displayed without being downloaded twice by wrapping a fallback img in noscript tags. If JavaScript is enabled, the fallback image isn’t even loaded!
RSS, Weblinks, and You
I’m kicking myself for not taking note of where I first saw a weblinks page (although the idea is probably as old as the internet, because everything is a remix), but I love the idea! It’s basically your bookmarks bar (or at least the interesting links) publicly available for others to peruse. I’ve made my own (find it in your local browser window!), and hope that I can use it as an opportunity to not only share things that are new and interesting to me, but things that I’ve known about for awhile and still find interesting or noteworthy, because "every day somebody’s born who’s never seen The Flintstones"Copyright 2000-something Merlin MannCopyright 2011 John Siracusa (relavent xkcd). In a similar vein, I’ve also gotten into RSS like it’s 2009. My primary motivation was to limit my consumption of algorithmic content from platforms whose desires with respect to how I use the platform may not be (Read: aren’t) congruent with mine, which is totally fine, but recognizing that reality necessitates diversifying the channels through which I consume information. In the same spirit (and because it took basically no work on my part), I’ve also set up an RSS feed for this blog, so others can take a listen to what I have to say if they so desire, rather than if an algorithm is confident enough that they will. Oh, and I use and highly recommend FeedReader, as it’s built with Gtk, looks great, works great, and respects my window control preferences (@GNOME Feeds)!
Conclusion
I’m very satisfied with the updates I’ve made over the past couple of weeks, and there’s certainly still more to be done (apparently there’s some design paradigm known as “mobile first,” and I guess I’ll have to see what that’s about), and I’ll probably write some more about those in the future. I hope that others can take these ideas and lessons and apply them in their own endeavors of building a home for themselves on the web. As a wise man didn’t once say, “Be the change you want to see in the world.”