Website Update Log

Here lies the update announcements, notes and occasional rants about random things — mostly behind-the-scenes stuff. They largely correlate to my commit messages.

Last updated: 2023-12-07



The headers now have the “correct” hirearchy according to the Web Accessibility Initiative. I’m using <h3>s after <h1>s the whole time I’ve been blogging, since it automatically gives me the right font size I want, but I guess adopting a canonical hirearchy while fixing the font size with CSS benefits more. That said, I wish browsers adopt an easy way for users to define font sizes, etc. for unstyled sites, and have a way to enforce them (i.e. not respect the remote CSS of the page).

Another update is the linking criteria: I came across an article named “Browsing the Eastern Side of the Personal Web” today, and there is this section about linking criteria that talks about having a disclaimer telling viewers to only link to their site only if their usage meets a certain criteria, such as:

The site is link-free only to creative personal sites. No need to worry about reporting!

This is a lovely idea that I’ve never thought of, so I’m adding my own variation to the footer. I hope that people only link here on their own personal site, or when they share my posts on federated social media such as ActivityPub-compatible instances, and outside of this, to contact me before they link here. So below is my take (subject to change):

Please only link to the site on your personal site, of when sharing on ActivityPub-compatible social media sites. When in doubt (or if you want to link from elsewhere), please contact me.



I checked with some good old find | grep commands to find all the internal links and missing resources, and fixed them by hand, so they sould (hopefully) all be working now.



If you’re a subscriber of my RSS feed, please re-subscribe — the breakage of links sould cause duplicates to show up in your RSS reader, and the fastest way to solve this is to re-add the feed.

Also all internal links are now broken, and I’m on my way to traverse them all and fix them one by one. Self-inflicted webadmin stuff.

I’m sorry. Won’t change the link schema ever again.



A heads-up for everyone reading this blog: the site had just been revamped to be even more minimal, and for proper tag support. What that means, is that the old post links would be broken — and I’m still thinking what to do for this, since there’s no server for static sites to redirect readers to the new locations. If you have any good idea, please contact me (info in the about page). Sorry for the inconvenience.

Also, all the pictures are broken as something happened when I was in the process of moving parts of the blog to new locations. I’ll fix them alond with some faulty Markdown when I have time.



Guess what, after 3 months of rocking the last CSS file, I got bored again and changed it to look more modern and miimalistic. And make use of a CSS hack to get responsive hamburger menus.



Once again, I altered the style of this blog, this time taking inspiration from the site and various GNU documentation sites.



A delve into the depths of Bilingual layouts led me to rewrite the <span> padding generation code. Now it should look a lot more graceful than before for Chinese readers.



After this update, the Chinese translations of the categories will show up beside their English counterparts. I am still thinking how to make Chinese and English coexist peacefully on the site (as I write in both), and hopefully this is a first step to a bi-lingual website.

In the future I may add ways to show translations of the same article, or even separate the site into a Chinese version and English version. Hard to say what would happen exactly.



I’ve finally added some lines to my update script to grab the last edited (updated) date and show them beside the article link. Also, the articles are now sorted based on it, instead of the last modified time as defined by the computer. Enjoy!



I finally bought the TLD! Now all content is served over this URL.

Favicons are officially removed. Before this, browsers make favicon requests to my server, which I don’t have, and complains with error code 404. Courtesy to this thread on StackOverflow, I added a line to every HTML file to work around this:

<link rel="icon" href="data:,">

This should prevent 404’s from happening.



Another long-awaited style overhaul. I increased the main font size and line height on the desktop, and added styles for headings.



This is the new warning style that will show on paragraphs marked with the class warning.

[Update] This has since been removed.



A previous bug in the update code makes every page lack <title> tags. (No wonder only one page was indexed by Google, and caches are not refreshed by DuckDuckGo!) This is now fixed, and every page has titles.

The desktop sidebar has always been an annoyance to me, as it shifts the content to the right with no benefit in looks or navigation. Now the sidebar on the desktop is moved up to the top right; I’m still not very satisfied by the result, but IMO it is a small improvement from the previous layout. What do you think? Please mail your opinions to the mailbox in my Contact info. All opinions appreciated :)



I refactored the website update code, so that index page generation is in a loop: for every folder, generate a page index. Making this part of the code modular has a side benefit: I don’t need separate code to generate the homepage anymore.

Another part of code updated is, every index page now shows the first 10 entries in every subfolder, and has a “More” or “Dedicated Page” link directing to the subfolder index.



I didn’t specify the order posts appear on the homepage, so they are sorted by whatever default find outputs its results. For some reason I decided to address this issue today, so I searched and found this answer. I modified it to output one result per line, so the final code is the following:

find . -type f <other arguments here> -exec ls -t1 {} +

Currently there’s no dates beside the post list however; I may address it some day…



The updater script sees an overhaul that makes part of the code more modular. For example, the “simple subpage layout” generation code is now a function, so that we can generate multiple subpages with the same code. This future-proofs possible updates to move tutorials, documentation, etc. into subfolders.

There’s a new footer to state copyright: Everyone are welcome to copy stuff from my site or archive them as a whole, but they should release the content in compliance of the Creative Commons BY-SA 4.0 license. Other terms of copying are on the About page.

Another thing to cover is that subfolder pages now have their own index.html page, instead of the all-<subfolder name>.html format. This makes navigation cleaner, as we only need to key in instead of



The dark theme is now powered by the all-hailed Nord colorscheme! Since the more I look at the original dark palette, the more it looks like it’s drowned in molasses (or whisky if you’re in the mood), I went in search for a cleaner palette. After trying some other color palettes, I found Nord, highly praised by critics as a serene dark theme with suitable contrast. I tried it on Vim for a week and loved it, so I thought it’s time to apply it on the website.

However, I also chose some undocumented colors that Nord uses on their website, including:

Overall, this change gives us a cleaner dark theme experience. The about page is updated as well to reflect the change.



This time there is no detailed explanation, as life keeps getting in the way these days.



I finally found a way to target Android fonts without it defaulting to Roboto. Turns out we shouldn’t target the font name like in other OSes, instead target the generic name defined by /etc/fonts.xml on Android. Fortunately, there’s a copy of fonts.xml available online, so we can use it as a reference. In the end, I chose “source-sans-pro” (which is identical to Noto Sans) as the default display and text font on Android.

Android font support, at this point, still leaves a lot to be desired. In the “embedded device” mindset of early Android, storage is scarce and left for other applications, therefore most fonts are only aliases in a “font definition” file, and there are only a handful of fonts available on the device.

However currently, where mobile storage easily surpasses desktop ones, Google (or the Open Handset Alliance, whatever) still didn’t put better fonts on Android devices, and only added Noto fonts for language support. Come on, it’s 2022! Why cripple a key point in good UI for reasons that isn’t a concern anymore?

Another change is the ability to subscribe to the site by simply clicking the RSS button in the URL bar. It once was a Firefox feature, but Firefox phased it out in favor of their “Pocket” service. What a shame! Luckily, the feature lives on in some Firefox derivatives like Pale Moon.

IE also supported RSS subscriptions, but sadly the browser’s obsolete at this point. Chrome didn’t support such stuff from the beginning, but the functionality can be added with an official Google extension.

To make the RSS icon show, I added an RSS feed link to every <head>:

<link rel="alternate" type="application/rss+xml" title="All Pages on the Website" href="">

Then, ta-da! The rss icon shows in the address bar:

RSS icon in the address bar



There’s a new sitemap for the website! Generated by a bash script based on mcmilk’s script, hopefully it would bring a bit of SEO benefit to this blog. Also, I implemented a RSS feed, generated by a heavily modified version of maxhebditch’s rss-roller . Both are bash scripts, which is easier for me to modify and maintain.

Originally there are no <title> attributes in all my webpages, since I used a shared header template to generate them. Today I added some sed trickery to extract titles from original markdown files, and add them as <title> elements. This should also have a positive effect in SEO.



So I eventually put out a dark theme, and minified the css a bit. Not in the sense of emitting all newlines, as I absolutely despise that; more like sharing some style blocks and removing newlines for elements with only one style.

The dark theme is inspired by vim’s “Slate” theme, which is the only theme in vim with a softer color palette; others are razor-sharp and often an eyesore. However, the colorscheme features a lot of colors, and when I tried them on different elements, I found out that I can’t harmonize them perfectly. So I retreated to one main color, and other auxillary colors referring to it.

Currently, the text color of the dark theme is kind of a washed-out orange, malt-like color. I’m thinking whether to make it plain white — just like how the original Slate theme treats text. I think I’m going to keep it until people complain.

The website generation script also had a small change: due to my abuse of code-style arrows (->), I infused a sed expression to convert it to an arrow (→). However, currently it converts code representations to arrows too, but I haven’t found an easy fix to it.

I might as well type a proper arrow with the help of the compose key (which is as easy as Compose + hyphen + greater-than), but in Noto Sans, the default arrow looks like this:


Which, for some reason, looks bad in desktop Firefox. So I decided to use Unicode codepoints FFE9 to FFEC (←↑↓→), which has a more consistent look across devices.

Another change is that links now have non-intrustive hover highlights, which used some CSS trickery to make the highlighted link stay in place. The technique is copied from a reply on CSS Tricks website. The answer was missing a margin-right but that’s an easy fix.

Tags: others