Katemonkey (In Most Places)

Revisiting Old Friends (And Old Fandoms)

I regularly talk about how I started building websites to just have my own little place on the Internet, and, for a while, that was all I did. I had links to things, things were good.

But then I got more into online fandom. And when you're in online fandom, and you have a tendency to write things, eventually you turn to fanfiction. It happens, and there's been some great studies into it. I mean, hell, just look at all the awesome stuff Sacha Judd talks about (have you subscribed to her newsletter? You really should. You really really should).

And, for a huge chunk of the late 1990s and 2000s, that was my thing. I could make websites. I liked fanfiction. So I built archives.

Lots of archives.

Woo boy, the archives. There wasn't just my fanfiction, there were mailing lists, there were specific pairings, there were challenges, there was so much potential, and I had SimpleText, a lot of time on my hands, and a need to make websites.

So I did.

You too can host 7,000 pieces of fanfiction in 180MB of space

I'm not a programmer (said ironically while wearing my ridiculously comfy HTML Programmer hoodie), so it wasn't like I was coding up database-driven automatic-uploading masterpieces of technology all designed to answer the question "what if these two (or more) characters kissed".

Naw, it was all regular old HTML. And then eventually CSS. And my biggest archive? The indices are HTML, but the actual stories? Text files.

Plain text. With hard line breaks.

Which is fantastic for saving space and making it easy to put stuff up, but, yeah, it's not great for viewing on your phone.

And most of the archives I made, I haven't updated in, like, 20 years. So, actually, the pages themselves aren't great for viewing on your phone either.

But I kept them up, because I figured, y'know, someone had to, right?

Multiple archives of your own

Why am I thinking about all this now?

Well, obviously, Archive of Our Own being down was a major part.

And we've been spending our weekday evenings watching reruns of Babylon 5 on Legend, so I'm spending a lot of time in a late 90s' frame of mind.

And I still like making websites.

So I thought, hmm. I like making websites. I've picked up a bit more modern web design tactics over the year, maybe during the big AO3 outage, I could kinda sorta update some of my archives to be a little more...friendly. Available. Giving people something to look at.

So that's what I did.

"Either I'm borrowing all your albums or I'm moving in"

I honestly thought about taking my biggest archive and making it mobile-friendly, but that was the one with all the text files, and, no. No. I'm not converting over 7,000 plain text files into HTML. Not this time.

(Which is a shame, because the actual archive pages? The ones that link to the text files? Would work so well with a bit of modern CSS to replace the 2002 HTML that currently runs it. I mean, shoot, I'm still using <table> on there.)

So instead I looked at some of my smaller ones. And I wanted to make sure it was also something that would be fairly easy to change up, because I wouldn't just be changing the CSS, I'd be redoing a good chunk of the HTML too.

I decided on Loaded. Because the design was easy, there weren't that many stories, and, well, sometimes you have a one-true-pairing that's like wrapping up in your cosiest blanket, with a hot drink next to you, and you just spend a few hours basking in the comfort.

That was Giles and Oz for me. Which, okay, now I kind of cringe, because I'm Giles's age, and no, not even the coolest of teenagers is remotely appealing, but, I don't know, there was something there, okay? It was what I needed.

And, like I said, the design? Simple. Mellow. Just needed a tiny bit of swapping around to make it make sense.

20 years on

I last updated the site in 2006. And it looks like I last updated the site design in 2004. So while it was fairly modern, it wasn't that modern.

Like, look at this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" 
lang="en">
<head>
<title>loaded: giles + oz</title>
<meta http-equiv="Content-Type" content="text/html; 
charset=utf-8" />
<meta name="robots" content="noindex, nofollow, noarchive" />
<meta name="googlebot" content="nosnippet" />
<link rel="stylesheet" href="mainstyle.css" type="text/css" 
media="all" />
<link rel="stylesheet" href="plainstyle.css" type="text/css" 
media="screen" />
<link rel="stylesheet" href="printstyle.css" type="text/css" 
media="print" />
<link rel="icon" href="favicon.gif" type="image/gif" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
</head>

It's not bad, but I can do better. And then there's class="menu" and class="title" and my authors' list is in a <dl> which I guess works, but it's kinda painful. And this was back when it was a real pain in the ass to have a different font for the title of the site, so it's a PNG. And, yeah, I can do better.

I mean, I can still do a lot better. Right now I'm using Google Fonts to make the title, but, aside from that....

<!DOCTYPE html>
<html lang="en">
<head>
<title>loaded : the giles + oz site</title>
<meta http-equiv="Content-Type" content="text/html; 
charset=iso-8859-1">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, 
initial-scale=1">
<meta name="robots" content="noindex">
<link rel="stylesheet" href="style.css" type="text/css">
<link rel="stylesheet" href="printstyle.css" 
type="text/css" media="print">
<link rel="icon" href="favicon.gif" type="image/gif">
<link rel="shortcut icon" href="favicon.ico" 
type="image/x-icon">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" 
crossorigin>
<link href="https://fonts.googleapis.com/css2?
family=Bevan:ital@0;1&display=swap" rel="stylesheet">
<meta property="og:title" content="Loaded: The Giles 
+ Oz Site">
<meta property="og:url" 
content="https://www.dymphna.net/loaded">
<meta property="og:description" content="The Buffy the 
Vampire Slayer fanfiction archive for Giles/Oz stories.">
<meta property="og:image" 
content="https://www.dymphna.net/loaded/ogimage.png">
</head>

That's better, I think. Sure, it's a little longer, but I think it works.

And switching to CSS grid had helped immensely. Not only is everything in the right section (no more <ul class="menu"> and <div class="meat"> and <p class="bigger">), but it's a lot smaller as well. There were old bits of previous designs and awkward odds and ends and somehow the whole thing was 9.9MB. And now it's down to 2.7MB.

Not bad for over 100 stories.

So now what?

I might do more archives on my site. Heck, I do have plenty of them. And there's one very big multifandom archive that it might be nice to update. Give people a place to find something when they can't access the smooth, beautifully tagged, beautifully organised AO3.

But that's over 4,000 stories and at least 50 additional pages that all need redoing. By the time I got that done, it's highly likely that AO3 would be back up and this would just...sit quietly again. Forgotten. Ignored.

But, at the same time, it'd be a lot of fun. So who knows?

Today's sticker

A linocut of a woman about to kiss the devil's backside

One more fantastic Lino Folk sticker, because if you understood anything that I wrote above, well, what were YOU doing at the devil's sacrament?

#fandom #the devil's sacrament #web design