The 2025 Libre Town Renewal

I took that vision and attempted to put it into practice. But after months of working on the project, I unfortunately had to concede that my limited HTML knowledge and the effort needed to develop such a virtual environment led to great amounts of both technical and creative debt.

For example, every single page used to contain its entire CSS information within itself, duplicating work exponentially and ending up with ridiculous redundancy throughout the project. Whenever I wanted to change even a single aspect of the site's design, such as the content width or the font size, I had to go through all files to change it one by one.

Creatively speaking, the kind of sprawling virtual environment I dreamt of was also simply not feasible for me to finish with my then-untreated ADHD. After months, I realised I had gotten lost writing flavourful NPC dialogue, creating alleyways and decorative buildings, but that the actual content of my website was still sorely missing. There was, for example, still no information about my hobby projects at all. Just window dressing.

To make matters worse, the more content I added, the more future work I signed myself up for. Every new alleyway or building would require me to add pathways to and from all adjacent pages. This is not even to mention destinations further along!

In 2022, I accepted that not only did my website already carry insane amounts of technical baggage that I could not easily fix, but that the idea of a virtual city as a whole was fundamentally not doable considering my levels of energy, time and attention span.

This section is a little technical, so feel free to skip to the next if this is not what you're looking to read.

XHTML (eXtensible HyperText Markup Language) was at one point a new standard of how to write websites. Its main feature: while regular HTML of the time was a markup language only inspired by the XML format, every single XHTML document would at the same time be fully valid XML in and of itself.

XML has at that point been – and still is – the standard format for structured data both in computing and the sciences as a whole. A wide variety of tools therefore already existed to extract and analyse XML-formatted information. The idea behind XHTML was that if eventually the entire web was XML-compatible, we could use all those existing XML tools to work with the plethora of information contained on websites, instead of having to develop specific tools just to work with HTML.

Machines would then be able to understand and work with all the information we put on the web; and perhaps even relate it to knowledge outside of the web, such as in library catalogues or your local computer files!

For many reasons, XHTML did not achieve any widespread adoption and was eventually replaced by other, newer HTML standards. Despite that, XHTML was appealing to me at the time of the Libre Town remake because I was frustrated with the state of the web.

I had noticed that most websites these days had deviated grotesquely from the original intention of the World Wide Web as a hypertext. When you look at what a simple HTML page in a beginners' tutorial looks like, you can somewhat intuitively understand what is going on just reading it. It has elements such as a header and a footer, headlines, paragraphs, sections, images, links and so on.

Websites like that are structured similarly to an essay; they are documents.

But when you look inside complex webpages like cloud applications, news sites or social media, which happen to be the only websites most people will ever interact with, it's an absolute mess! Instead of clearly named and structured elements chosen based on what they represent, they were an amalgamation of misused generic elements and disjointed snippets. Dozens of scripts might be re-writing the site as you scroll or interact. And it's not machine readable at all.

A social media site for instance doesn't define each of its posts as the 'article' element it should be tagged as. They do not feature a title with the actual headline element, quotes in posts enclosed in the actual HTML quote element, or their posting dates encoded as a machine-readable time.

Instead, it's a wild mix of raw text, mismatched elements and complex styling to force it to look exactly like their brand management and design people want it to.

It is not machine readable, not accessible, and it doesn't allow for any kind of customisation or interactivity beyond what they want your web browser to behave and look like. When on social media, your browser internally sees a disjunct mess of seemingly unrelated elements hacked together like a stew, and it's a miracle that it ends up looking like a structured website.

I wanted to write better websites than that. Ones that, as mentioned earlier, were structured more like an essay than a complex application – that made sense, that were logical, accessible and easily understandable. So when I found out that XHTML's goal was to enable clarity, structure and machine enhanced readability of website content, I decided to go with XHTML for Libre Town.

Back during the remake, I intended the new and improved Libre Town to fulfill three goals:

• XML compatibility via XHTML (to support machine readability of web information as an ideal)
• A well-organised document structure (for accessibility, maintainability and quality)
• Compatibility with ancient or minimal browsers and web standards (to support vintage computer enthusiasts)

The problem is that due to a lack of knowledge at the time, I did not realise that these goals would often end up clashing with each other. In my mind, there was the commercial, evil web of the modern day on one hand, and the democratic, decentralised, semantic, accessible, machine-readable idealistic simple HTML-only web of days yore on the other.

I was sympathetic to the idea of semantic HTML for example, but naively I assumed that since XHTML's goal was to facilitate machine readability, it was also necessarily the best standard for the semantic web.

Instead, it turns out that the new and flashy modern HTML5 standard that I looked at with distrust is actually way more clean and semantic than XHTML was. And not only that: I also wildly overestimated how much of the cosy 1990s 'old web' was actually simple, accessible and conforming to the web standards I liked.

A majority of the vintage websites I aspired to imitate were actually the first outgrowths of terribly written websites, abusing tables and frames to achieve flashy effects with no regard for accessibility, semantic markup or machine readability.

The so-called browser wars I was well aware of at the time, but I had no concept of how much they impacted the technology of the very vintage browsers I aimed to support. Turns out the browsers themselves were relying on nasty hacks to one-up each other, and standards committees tried to somehow please both the browser-making corporations and the ideals of the web.

If I wanted to write nice semantic and well-structured, valid HTML, I would need to use HTML5, compromising my other two goals. If I wanted to go full XHTML, my website would be neither well-organised and semantic, nor work well on old browsers that relied on strange HTML hacks and non-canon elements. And if I wanted to support old and minimal browsers perfectly, I would need to write messy HTML to account for all browsers' nonsense and compromise my XHTML validity.

Throughout life, one never stops learning. Compared to the old pre-remake virtual text adventure era of Libre Town, I had already learned quite a lot about how to write and maintain websites: how to use external style sheets and thereby avoid redundancy, for example.

Similarly, I have learned a lot since the remake three years ago that resulted in today's Libre Town codebase.

There was a lot of conflicting information around how to properly structure an HTML file, for instance, and much more so concerning XHTML. Do I declare the XML version or not? Do I link to the DTD (Document Type Definition)? What about that whole Quirks Mode thing; do I need that? Libre Town as it is right now is inconsistent and often plain wrong.

I also found that my self-inflicted restriction to only use documents strictly validating as XHTML 1.1 conflicted with quite a lot of social experiences I intended to have on the web. The most popular webring scripts for example were written in a way that the buttons I would put on my website would not validate as XHTML; the same issue arose with various other projects, community projects and web cliques. I had to choose between XHTML and participating in parts of the web revival.

Writing valid XHTML also prevented me from using all the snazzy HTML5 features I really wanted to use. The marquee and the clock script on my main page still break validity, for example.

Another issue was that in pursuit of compatibility with ancient computers, I refused to use CSS variables, meaning that every colourful element on my page had to specifically be, say, of the 'red' or 'yellow' class. I couldn't simply change the colour scheme of a whole page without going through each occurence manually; and all the colour classes bloated my CSS file a lot, once again leading to redundant style information.

Yet another issue that slowly built up was the lacklustre directory and content structure of the site. For example, a lot of the animations and images throughout the site ended up in a folder called 'gifs', even though they often weren't even gifs. Main pages for categories like 'shrines' or 'thoughts' were called 'main.xhtml', instead of 'index.html'; the latter would have allowed cleaner links and better consistency. In the very beginning, I used graphics from resources like GifCities; graphics I did not have the rights to. While they are now long removed from the site and replaced with graphics I made myself, they were still polluting my personal file organisation. I couldn't just reorder the directories – because that would break all the links!

Lastly, I just really had no idea about some HTML features and standards I needed to be aware of in order to write good and semantic websites. I overused the <div> element instead of its more specific cousins, I lacked a proper footer and header, and generally accidentally misused some elements.

Specifically, I am using this rework to make all the following changes at once:

Bilingual Split

I will split the entire site into separate English and German versions in accordance with my recently-formed opinion on de-gentrifying our subcultures. They will not mirror one another and merely be translations of the same page; instead, the German and English Libre Town each are their own thing. Some pages will exist on both sides and link to their respective translated equivalent, but most will be unique to their respective language and culture.

Switch to HTML5

Due to the many reasons detailed earlier, I will give up the ideal of using XHTML exclusively. Instead, I will move the entire project to HTML5. That is, by the way, the main cause for all the broken links. Right now, all my pages carry the file extension '.xhtml', whereas the new versions will carry '.html'. I know, I know, file extensions are made up and don't actually matter, but most browsers and text editors do actually use the file extension as an indicator and end up expecting XHTML where none is. I will still close all my tags by the way, simply because there is no reason not to and it looks and feels cleaner to me.

Semantic Hypertext Maximalism

Somewhat as an extension of my essay The Hypertext Maximalist, I aim to rework all the pages on Libre Town to mark up as much information as possible. To that end, I am aiming to correctly use all the elements in HTML5, consulting the MDN Mozilla documentation as a reference. This includes not only proper content sectioning, headers and footers everywhere, but also elements such as times and dates, abbreviations and jargon, figures, proper lists, quotes, citations, metadata and many more. I even aim to utilise the microformats2 standard to mark up even more semantic information on Libre Town such as recipes, contact data and post update dates.

Complete Content Overhaul

Since this entire renewal project already requires me to go through each page invidually and get it up to speed, I decided to take a look at and improve each page's content at the same time. I am removing dead links, rewording or rewriting passages or even entire pages if I deem them not good enough anymore. I am making sure that the 'new' Libre Town is a faithful representation of what I want it to be in 2025, without any baggage such as wildly outdated opinions or old, abandoned content hidden deep inside the site.

Directory Reorganisation

This is something you might not notice, as it takes place mainly under the hood. Since all links to Libre Town break anyway due to this full renewal, I have taken that opportunity to decide on a resilient and more logical file-and-folder structure. The German and English sections are now in fundamentally different folders from one another, graphics and images are organised in smaller, more meaningful folders, and finally I did away with all the 'main.xhtml' files, instead relying on a directory's 'index.html' functionality.

Saner CSS

As I mentioned before, I reworked the site's style sheet to require significantly less micromanagement. I am now using CSS variables to be able to change the colour scheme of entire pages at once instead of having to define the colour of every single link, frame and headline whereever it appears. It also allows future me to make sweeping, site-wide changes to individual colours by changing only one line in the CSS.

Accessibility

Using proper semantic HTML already goes a long way to improve the accessibility of Libre Town: if for example the navigation links are actually contained within a 'nav' element, people using screen-readers can skip being read all the sidebar links every time they open a page. I want to improve in other areas too, though. I am using all kinds of resources to learn about and improve web accessibility throughout the page. This includes writing proper alt-text for all visual content, but also avoiding keysmashes, not abusing fancy-looking Unicode characters, flashy animated backgrounds and other inaccessible design choices. I also changed the design of the page to provide less harsh colour schemes.

404 Page

So far, Libre Town never had a dedicated error page for when you would encounter a 404 error, appearing if you attempted to open a page that couldn't be found. Since the big renewal will break nearly all links to the website, I decided to finally create an informative 404 page, to make sure people linked to my website from a dead link at least have a chance to find the content they were looking for.