Fri, Nov 21, 2008, 9:00pm
Touching up the History Pages
Computers » Web Serving
I
moved my E&M History page from a very old single-table html page to a nice database-driven, PHP/HTML/CSS combo that uses this site's template engine. Originally I just sat down to see if I could quickly fold in the images into the table to make the text flow elegantly around them. Then I thought I should just move off tables. Then get the info in a database. And so on it went.
You can see the original page here. It went from a hard-to-maintain 1072 lines of HTML to 203 lines of PHP, 61 lines of HTML, 9 lines of CSS, and 244 entries into a database.
Most of the code was taken up in little tasks like making the lived dates ("b ca 300 BC," etc) nicely readable. But it's not just about lines of code. It's so much easier to use and modify in all regards. Sure, it's not a sophisticated page, web-app-wise, but it's part of the ongoing chores of maintaining old websites: upkeep. The web page in question was first done up in 1996, and once in a blue moon I see if I can't update it a bit.
In the database table for the timeline entries I added a measure of the uncertainty about dates, and added some uncertainty flags in the life, death and "flourished" dates of authors. The code then unrolls the info into standard ways of presenting the info. The first time the code runs across a given person it presents their whole name and when they lived, but from then on uses their short name. If they have a relevant photo image, it'll present that when they first appear. Because some parts of the timeline got crowded with images, I added a short image queue that makes sure they get no closer than a set number of events from each other. I also added a very easy caching mechanism to make page drawing as fast as possible when the data itself hasn't changed.
The conversion of the other two timelines should be very quick. I'll have all inherit from the same page-drawing object and just change a few tiny things between them.
Update : Sorry, the page looked terrible for the last day or so because I was experimenting and forgot to reset the changes. My good friend Doug is also helping me rethinking the DOM/CSS that is most appropriate for timelines before changing all 3 of them over. Suggestions from the peanut gallery?
You can see the original page here. It went from a hard-to-maintain 1072 lines of HTML to 203 lines of PHP, 61 lines of HTML, 9 lines of CSS, and 244 entries into a database.
Most of the code was taken up in little tasks like making the lived dates ("b ca 300 BC," etc) nicely readable. But it's not just about lines of code. It's so much easier to use and modify in all regards. Sure, it's not a sophisticated page, web-app-wise, but it's part of the ongoing chores of maintaining old websites: upkeep. The web page in question was first done up in 1996, and once in a blue moon I see if I can't update it a bit.
In the database table for the timeline entries I added a measure of the uncertainty about dates, and added some uncertainty flags in the life, death and "flourished" dates of authors. The code then unrolls the info into standard ways of presenting the info. The first time the code runs across a given person it presents their whole name and when they lived, but from then on uses their short name. If they have a relevant photo image, it'll present that when they first appear. Because some parts of the timeline got crowded with images, I added a short image queue that makes sure they get no closer than a set number of events from each other. I also added a very easy caching mechanism to make page drawing as fast as possible when the data itself hasn't changed.
The conversion of the other two timelines should be very quick. I'll have all inherit from the same page-drawing object and just change a few tiny things between them.
Update : Sorry, the page looked terrible for the last day or so because I was experimenting and forgot to reset the changes. My good friend Doug is also helping me rethinking the DOM/CSS that is most appropriate for timelines before changing all 3 of them over. Suggestions from the peanut gallery?