Jon's JavaScript Projects Page

This page is an overview of and index to my JavaScript work, and is meant as an adjunct to my resume.

Buttons • Bitmaps • Boilerplate • Frames • Popups • Decadence • Context • Quiz Maker

Jumpbar Buttons

I avoided JavaScript for some years because of the number of browsers that didn't support it. In the summer of 1999, I decided that this was no longer the case, and decided to experiment with changing the 'jumpbar' on my homeschool resource site from the current normal/bold links to something that looks more like a Windows application, with "stay down" buttons.

I think this worked rather well, and that the stay-down buttons showed context better than the bold link does - but decided not to deploy this, when I found that some 18% of the (click-weighted) population turns off JavaScript. After that, I pretty much stuck to little things that would add value to my pages for the JS-enabled majority, without crippling the JS-disabled minority.

Variable Depth Bitmaps

For example, for years I'd used bitmaps error-diffused down to 256-colors, because Paint Shop Pro did such a better job than the various browsers. But as more and more people got computers that could display 24-bit color even at high resolution, my 256-color logo bitmap started looking worse and worse. So, [at the time I originally wrote this] my site's main page and the About Midnight Beach page now have code to redirect JS-enabled browsers to a page that displays a 24-bit logo on machines that can handle it.

JS-generated Boilerplate

One of the things that I came to hate the most about maintaining a large site was the boilerplate. A consistent look meant lots of identical code all over the site, and changing the look meant changing all that code. Before I decided that I couldn't cripple 18% of my users, I experimented with JavaScript to generate all my standard design elements. This would let a change to a single file affect all files, and would eliminate a lot of visual noise from my HTML files. In the end, I decided to write a pre-processor in Perl, and the only place the JavaScript boilerplate functions ever got used is on my What's New page.

Here, however, I decided that the boilerplate burden of generating fussy table entries every time I changed a page was just too high. So, I 'froze' the non-JS page, and now write my change log in JavaScript. This has been a great time saver: I just write a line like

On("November 20, 1999", Updated(["Minnesota" ]) );

and the script generates a proper TR, handles all the list syntax (commas, ands, and pluralizing), and even updates the date at the bottom of the page. The What's_New.html contains a little JS-detect code, that directs JS-disabled users to the 'frozen' page, and everyone else to the active page.

Smart Frames

Like most large sites, I have a problem with 'deep linking' into my site. I don't care about loss of ad revenue; I do care that someone might get sent to a subpage and not realize how much more there was to my site. I think the frameset does a pretty good job of letting people know where they are and what else there is - but if they never see the frames, they might not ever explore the rest of the site.

So, I added a little more boilerplate to my site, so that most pages now know what frame they belong under. If you follow someone else's link to a bare subpage (like this example), a little JavaScript kicks in to invoke a 'universal jumpbar' with right section highlighted.

Popups

I measure the success of my front page by the amount of dumb mail I get. By this measure, the Quick Tips box at http://www.midnightbeach.com/hs was a huge success. So much so, that when a friend suggested that maybe it should be in a separate window, I decided to make it a popup. Now, the JS-disabled minority sees a two-section Quick Tips; the JS-enabled majority sees a third section which offers a Quick Tips popup window. This popup uses cookies to store the user's position preferences, though naturally this code works a lot better on Netscape.

Reversi

In what one might call the decadent phase of my JavaScript-ing, I decided to try to write a compute-intensive application entirely in JavaScript. So, I ported an old Reversi app to JavaScript. Lo! The UI was much easier to do than it was back in the old Turbo Pascal / DOS days, but the performance is pretty poor.

Back in October, I decided to revamp the page for my poker mailing list in the hopes of perhaps drawing in some more people by adding descriptions of the games we play. I wanted the TOC in the left frame to show which page (or subpage) you were on the right frame, whether you followed a link off the left or right frame.

The JavaScript for this was actually pretty easy to write - but, again, I didn't want to break things for the JS-disabled 18%. That meant every link had to be doubled, like this

<script language="JavaScript"><!--
document.write('<a href="javascript:Load(\'stud.html#Five_Card_Stud\')">Five Card Stud</a>');
// --></script><noscript><a href="stud.html#Five_Card_Stud">Five Card Stud</a></noscript>

which made for a maintenance nightmare that I didn't want to take on! So, instead I just wrote a Perl preprocessor so that I could write these doubled links as <x href=> tags.

Quiz Maker

QuizMaker is a Perl script that reads a relatively free-form text file, and builds a self-contained HTML/JavaScript multiple choice quiz of the type common in newspapers and magazines. Each response may have a score value (the default is 0) and a Score button pops up a score box scrolled to the appropriate range. The JavaScript includes code so that clicking on a radio buttons caption clicks on the radio box (just like Windows apps) and scrolls the next question into view.