tallahassee dev diary
this will chronicle the restoration for the original promotional website for the mountain goats' tallahassee. you can check it out here!
#1 | 11/2/21
so... hello everyone! this is the first major project i've completed on this site. i'm very, very excited that i can share this with you all! it was tough and annoying at parts, but totally worth it. there are quite a few... early 2000s web development quirks 😅 but it was a wonderful, beautiful website, and i'm glad that i could bring it back.
i'm writing this from the safe, comfortable place of being around 5 days out from when i got started on this. i had an absolutely wild weekend, trust me, and this is the perfect capstone. doing the website backup was relatively simple, but tedious and time consuming, and i just thought of a MUCH easier way to do it but it's fine :) it's okay :)))) i promise :)))))))
essentially, i opened up the wayback machine and would go through the site. i'd hop into the source code, copy the html of the page, then paste it into my IDE. i'd also save as many images as i could by just right-clicking, then use the links in the source code to grab the rest. i'd redirect the links to the source folder, both for loading times and for folks who wanted an offline version. if a file was missing, i'd use the archive to ensure it really was; if it wasn't, then i'd do my best to reconstruct it with the available information i had.
for example, the mouseover image for the glass on the porch was broken. i started visual studio code and opened my version of the porch page with the live editor addon. that made it so that any changes i made to the files would automatically show up in my browser. then, in firealpaca, i opened the non-mouseover picture of the glass and the mouseover for another object on the page. i eyedropped the color i needed, then colored and fiddled with the picture of the glass until it looked right. (it's all done on multiply layers, btw.) i would export the completed image as the proper filetype into where it's supposed to be! i never did this with files that contained large amounts of text; it was all missing interactive elements.
i also had to find and re-embed the videos! this was one of the more annoying parts. thanks to some very kind souls on youtube, i was able to recover the 3 longer vids that used to be on the site, and i used a little bit of wayback machine trickery to get the video in the bedroom back. this is one place where the download i provide excels; i have tried to fix the size of now how much would you pay, but i couldn't get it to work with the embed. however, the downloaded file contains .mp4 conversions of the videos, and for some reason it works just fine there! so good luck figuring that one out.
i actually kept running into weird little problems or confusing design decisions. for example, the css styles are declared separately for every element on a page. there is a css file, but it only controls the font size and color. there also is not a margin set; spacing on the top and bottom is done with br elements. i'm not an expert by any means, but i'm pretty sure this was NOT standard and was NOT necessary for loading times by 2002. also, everything is in a table. EVERYTHING. ALL OF IT. video? table. block of text, with or without a border? table. solitary image? table. but only sometimes :). i understand why, but that did not make it any less frustrating-by-proxy.
i think the funniest out of all of these is the font used on the floorplan. it does not exist. taking a closer look, one can see that the letters are all in zapfino one. that is, except for the lowercase d, and the lowercase d only. i looked at some older versions of the typeface, including on contemporary versions of the linotype website, and i haven't found a version like it. i had to use lineart extraction on the text, then duplicate the layers until the opacity was right. this is so hilariously baffling to me, and i love it. there was no reason i can think of to do this. it's perfect.
there's a litany of reasons i'd like to update the site's code, but the biggest reason is that, well, it deserves it! it would help it run smoother, make it easier to navigate, and preserve it for the future. making it easier to look at the backend could make it a valuable learning tool, too. here are a couple of things i'd like to do:
- compress all the pages into one per room at least; instead of kitchen leading into kitchen2.html, kitchen3.html, and quiz.html, either 1. the whole site loads at once or 2. the content of kitchen2, kitchen3, and quiz are all on kitchen.html
- get everything that i can out of table elements and into css grids or standard formatting so that it's easier to read
- find lost images (obviously!)
- either remove the popup for the intro or make sure it doesn't need the 4ad file
- update contact information for folks involved where possible
- make it mobile-friendly
you can thank moral orel and i drive a toyota camry's no children animatic for introducing me to tallahassee, and then getting me into this project. although her video on it is now removed, hazel's channel introduced me and my friend to moral orel and i could not be more grateful. she makes awesome videos on anime, and if you liked this project, you'll definitely want to check out her video on old fansites.
well, that's all for now! i'd really, really appreciate it if you could share the site reconstruction with a friend who might be interested. a lot of hard work went into it, from the original creators and myself, and i'd like to see it shared. i think it's a really unique and fun piece of art, especially in conjuction with the album, and it deserves to be seen.
#2 | 11/5/21
got a bit lost in the sauce (and sleep deprivation...) last night, so i forgot to actually post an update. well, here i am! it's launch day, and while the update isn't ready yet, i know it'll be before the month is out. at least the actual archive is!
i spent about 10 hours over the past two days working on recoding the site. around half of that was rewriting the code that makes hover images change, because for whatever reason, js really, really, REALLY did not want to cooperate with me. i was fighting for my Fucking Life to get this God Damned Mouseover Function to just WORK. you see, my revamp places everything on one page, as is standard for stuff in this veing today. i'm using css spritesheets to give the loading times a helping hand, so i need to rewrite the script that handles image changes. i wrote in my normal, average solution that the internet suggested.
but for whatever reason, the js really did not want to change background images. believe me when i say, i was out in the ice cold alaskan wilderness in the middle of a blizzard, on bloody hands and knees, fighting for my Fucking Life to get it to switch an image. that's all. just switch 'em real quick. 5 hours. 5 hours of my life. gone forever.
the solution i landed upon is... less than elegant, and not that pretty to look at, but it gets the job done. each image has a css class, and the script listens for a mouseover. when you hover over something, it switches the classes of the image elements to change the css sprite location it's drawing from. when you mouse out, it switches them back. it results in a big blob of classes, but again, it works and it's fast.
last night, i was able to get the intro, the site map, the credits, and the floorplan nice and prepped. while i'm facing some weird problems with centering, it's something i can get fixed relatively easily. i need to figure out how to get it rolling on mobile, too, but that's an issue for future me. for now, i'm just focusing on getting the broad strokes down.
finally, happy birthday tallahassee! 🥳 she's in her sophomore year of college... they grow up so fast :')
#3 | 12/11/21
well, life really has a way of keepin' ya busy, huh? "the update isn't ready yet, but i know it will be by the time the month is out!" HAHAHAHAHAHAHA. good news, though, i found a transcript for peacocks.html! i'm so, so excited to finally get my hands on it, especially as i start work on the second part of my analysis. it's a shame that i can't reach out to annotatedtmg and let them know, but that's the way it goes, i guess...
i also did a transcription of now how much would you pay, which has been placed under a toggle on the page. a vicodin transcript is next, and then back to work on the update. the holiday season is looking to be pretty low-key this year, sans the whole-ass comic book i have to make for ap lit, so hopefully i'll have time to chip away at it. until next time, friends!
#4 | 2/18/21
damn, i wish i had the foresight to do this on valentine's day :/ it would've been so cool...
anyways, vicodin's transcript is up, i tweaked some stuff on the intro page so that it's more accurate, and the annotated tmg links are fixed. the holiday season was NOT low-key, and i had one hell of a new years, so this was kinda at the back of my mind. thanks for stickin' around! oh, and happy early birthday all hail west texas :)