VFFA and FicFan Quote Randomizer Renovated

Throughout the years, I’ve started many projects at times when I didn’t really have time to do them well. Lately, I’ve been working on cleaning them up and this week, it was FicFan.org’s turn. The placeholder page is still up, but the Vanished FanFic Archive got a major renovation and some of it spilled over.

I’m not done, but this is a good place to stop for now and I can’t spare any more time,  so let’s focus on the good things rather than the remnants of the old look, like the ugly navigation box and the dated look for the randomizer’s tab box.

Here are the highlights of the new look:

• Both the randomizer and the VFFA look pretty good now. (I may still change the color scheme, but it’s acceptable now)
• Fluid layout tested all the way down to portrait-mode cellphones. (Developed on desktop development builds of Fennec and tested by a friend on his iPhone. One minor known bug still to be fixed.)
• Print stylesheets (especially useful for the quote randomizer but I’m surprised how many workarounds the VFFA needed for Chrome print renderer bugs)
• Tested with Fangs and tuned to work well with screen readers (I’m still a novice here, so I’m sure there’s more to be done)
• Information on how to help the site is now clearly marked and includes a “fics wanted” list (that I’m still disentangling from the other VFFA TODOs).
• Clear indicator icons for what will download rather than open in the browser.
• Lemons are clearly marked and will ask for confirmation before opening.
• Last updated dates for quotes and last checked dates for external links are now pretty-printed as relative intervals  if Javascript is enabled. (eg. 2 Months Ago)
• Fandom information has been moved out of the description into the story header.
• Stories without descriptions now automatically ask users to submit them.
• Supplementary text is more concise and to the point.
• Quote Randomizer’s tabs no longer trigger a full reload of the page if Javascript is enabled. (Known bug: The stats bar at the bottom stays on the category the page loaded on)

Of course, equally interesting (and time-consuming) is what’s going on under the hood. I’d have made these renovations months ago, but I was running in circles trying to “do the right thing” and reuse an existing static templating tool. I ended up deciding it was simpler and easier to just write my own.

It’s still got a lot of hard-coded stuff, but here are some of the things I’ve already got done:

• Exports over 21,000 quotes to gzipped bundles in 10 seconds. (8 seconds for Mako, 2 seconds for GZip)
• Validates HTML, CSS, and XML using OpenSP and µTidyLib, cssutils, and lxml, respectively. (JSHint and CoffeeScript support planned)
• Lets me define most of the site in a mixture of Mako templates and markdown. (Jinja2, Textile, reStructuredText, and asciidoc support planned)
• Minifies CSS using cssutils. (UglifyJS support and CSS/JS bundling planned)
• Is much easier for me to hack on than Blogofile since I wrote it and also try to keep the codebase lean and well-documented with EPyDoc. (With Blogofile, I couldn’t even figure out how I was supposed to hook in code that takes more than one file in the source tree and produces a single zip in the build directory)

Obviously there’s a ton of stuff I’m not talking about (like how it doesn’t yet rebuild only files that have changed) that makes this only useful to me right now, but once doing so won’t be a procrastination risk for my coursework, I will be putting it up on GitHub. (Probably under an MIT license)

tl;dr It’s pretty, it works nicely with cellphones and printers now, and it’s easier for me to maintain.

VFFA and FicFan Quote Randomizer Renovated by Stephan Sokolow is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.