In a never-ending quest for near-radical simplicity, I've once again taken to fiddling with the structure and style of this site. The only things left to change are all pretty minor.
I got to reading some of the documentation on MDN for Hypertext
Markup Language
and realized that I was being a poor website author by simply wrapping
all of the content within increasingly nested <div> elements. While
the layout was acceptable (to my eye), the document structure suffered
in order to make styling the page easier. As a result I read up on
using the <article>
tag,
which is an obvious one in retrospect for the body of each "post" to
the weblog. Slightly less obvious is the <section>
tag
which represents a "standalone section". The examples provided made me
realize it was a natural fit for the main page which collects post
"leaders" and links to the full article.
Amidst this work I realized I was using classes on the HTML attributes
purely to identify specific elements for styling with CSS (as I've
written about before) when I should be
able to ditch classes entirely. The only real piece of unique styling
that stuck out was the almost wholely decorative header and footer
(where the real give-away was the class name "silly", so named for the
goofy quasi-shell prompt style I've given them). These could both
become <header> and <footer> tags, respectively.
The result is a nice, concise page with almost nothing left that isn't necessary for rendering the page. I think this should aid in accessibility and it didn't cost me anything in terms of layout or content. I think this is most apparent if you right-click and "view source" of any page, the HTML at this point is clear enough to read directly, which feels like a good sign.
Since I was already in the thick of it with amending page templates I decided to take a harder look at the CSS styles as well. With the change to a more semantic page structure the element class attributes started to chafe so I set about removing them in favor of a simpler stylesheet. I've written before about "periodic assessments" of my website's styling, but the truth is I tend to leave things unchanged (this was a big part of why I wrote my own static site generator). With a little over four years using nearly the same styles I've finally managed to trim things down a bit further to my liking.
Where previously I had a whopping 19 different CSS rules based on a number of different class selectors I've brought it down to just 11 rules for the common stylesheet and inline rules for those pages requiring additional styling. Since I didn't actually include what the stylesheet was the last time I wrote about it I'll include the current one here, given that it is so short:
body {margin: auto; max-width: 45em; font-family: serif; line-height: 1.5; padding: 0 1em}
h1,h2,h3,h4,h5,h6 {font-weight: normal; font-family: sans-serif}
blockquote {padding: 5px 10px; border-left: 3px solid #CCC; background-color: #EEE; margin: 0}
pre {background-color: #FAFAF9; padding: 1em; overflow: auto;}
li>code,p>code {background-color: #F5F5F5; padding: 2px 4px 2px 4px; border-radius: 2px}
th,td {border: 1px solid #DBDBDB; padding: 0.2em 0.8em}
th {background-color: #F8F8F8}
table {margin: auto; min-width: 50%; border-collapse: collapse; overflow-x: auto; font-family: sans-serif}
img {max-width: 100%}
header,footer {font-family: monospace}
li {padding-left: 0.5em}
The most obvious change has to be the move back to browser-default styling on links, where previously I had entirely black underlines on all links. I've come around to thinking that plain black underlines are not distinguishable from other non-interactive textual styling. Secondly, I've finally fixed the layout of the archive page so that the post titles aren't ragged-left, which was minor but annoying to look at. The trick was in the use of flexbox:
li {display: flex;}
li>span:first-child {min-width: 6em;}
With a display type of flex the span tag that contains the post date
has a flexible width. The minimum width prevents the sibling span tag
(the title link) from aligning along the edge of the text, which is
variable in width based on the characters making up the date.
One final change that will probably not be noticeable is the move to only calling out fonts by type, rather than name. Whereas before I specified a serif font that I thought looked good on my computer (Georgia), I've realized I should specify only "serif" and configure my preferred font within my own browser. If you don't like the look of things, it is within your reach to change it!
Since I shaved my CSS down to around 900 bytes I got to thinking about one annoying detail that is only apparent if you bother looking at the network tab within the developer tools. For every single page the browser would make a request for a favicon and then receive an HTTP 404 response. While this is automatic between the webserver and the browser, it is annoying. It manages to fill the server logs with spurious 404s and simply doesn't need to happen. Rather than making an icon I resolved to figuring out how to disable the request. It turns out that by including another HTML tag within the page you can circumvent the browser's attempts at getting an icon from somewhere.
<link rel="icon" href="data:,">
While normally this tag directs the browser to a static asset, or provides a base64 encoded image directly, there is nothing stopping me from doing the above and continuing to not have an icon and short-circuiting the browser from checking further.
At this point any given page should take 2 requests, one for the HTML
one for the CSS and for me that means about ~100ms from an empty cache
to DOMContentLoaded (images or scripts will obviously bump this
number up).