In the middle of 2013, I decided that is was time to redesign the code of this web site to HTML5.
Why? Two reasons came to my mind.
First, the web site looked dated. As odd as it sounds, by mid-2013 web sites tended to orient themselves towards certain standards regarding font sizes and spacing, standards that may be too subtle for me to mimic beyond outright copying the code. Also, the site looked horrible on small-screened devices, which were now the majority of web browsers.
Second, using XML and XSLT within the browsers was already ironic enough back when I first built the web site. Now it is a mostly forgotten feature of web browsers, which isn't something to brag about.
When I built the XSLT-based version of this web site, HTML 4 was in the middle of a decade-long stretch of stability and support, even if I include CSS. Yet in that same period of time developers were begging for new features and tighter integration with client-side logic, so various browsers started developing their own extensions to HTML and CSS, bringing back web development to the chaos that preceded HTML 4.
With HTML5, we are going back to possibly another stretch of stability and support. Market share of Internet Explorer 7 or lower is becoming so small that I don't even need to consider them anymore. Also, because I want to use only a small subset of HTML5 for my web site, it is far more likely to work well everywhere and be standards-compliant.
As I mentioned before, the web site was built using the Blueprint CSS framework. What I attempted to do is to align vertically both the section titles on the left and the sidebar on the right with the placement of paragraphs. This was futile, and looking back I'm surprised it even half-worked with Blueprint. The reason is that font rendering across browsers, when using the built-in fonts, is still a mess and never exactly the same.
If I wanted to fix vertical alignment perfectly (by fixing Blueprint itself), I would have needed to do either of two things: Use images or SVG content everywhere, or use embedded fonts. Clearly I won't use images, and while I'm still investigating embedded fonts, this should be considered a side issue, since after all vertical alignment is not strictly required.
So, it was due time to move to a new template. Since everybody was using Bootstrap from Twitter, I started looking into it.
My decision to use it still rested on my ability to make my web site look essentially the same as before, plus being able to adapt through CSS to smaller screens. That means that I expected to have to overwrite its CSS to match my design. Still, I couldn't use it directly, since Bootstrap is mostly a CSS template, and doesn't have much about how to write properly HTML5 pages...
This is why I ended up using the "hipster-named" Initializr, a template generator that includes Bootstrap, HTML5 page templates, and a few other things that I don't understand but does magic on older web browsers.
The transition to the new template wasn't too difficult. I used espresso to thoroughly tweak and test both the HTML and CSS, then I moved everything into the XSLT until its output matched exactly my test pages. I finally modified the server settings (.htaccess) the permanently redirect all XML URLs of my site to the HTML pages. That way, the XSLT is used only offline.
So, what happens next? Hopefully, not much. HTML5 should be stable for years, old obsolete browsers will not be used anymore (I'm looking at you, Internet Explorer 6), and all is well. I may revisit the question of typography with embedded fonts later this year, though things can remain like this if finding the right fonts require too much effort.
Instead, I may spend more effort into simplifying the process of writing new articles. I'm now used to Markdown syntax with my blog, and there is an opportunity to write tools to automate posting Markdown-formatted documents as articles. I already have some Perl script that supports a subset of Markdown to convert it in my XML format, but what remains is making "deploying" new pages as effortless as possible.