Of Libraries and $tuff
At some point during an online conversation, I had allowed myself to be volunteered to convert our JavaScript to use the jQuery library instead of the Protoculous library that most of it relied on. Both of them extend JavaScript functionality to make it easier to do things you often need to do on a web site. Protoculous does this in a way that is generally consistent with the conventions and mechanisms used by native JavaScript, making it appear that JavaScript is more powerful and versatile than usual. This means that unless you know exactly and exhaustively what functions and objects are supported by native JavaScript it is not always obvious that the code you are reading is reliant on an external library. It also means that it inherits some of the clumsiness built into JavaScript. jQuery is clearly visible in the code that uses it, easier to use, better documented, and better maintained. From my point of view its only drawback was that I knew next to nothing about it except that I liked the look of the documentation. One shared feature of both is the use of a function called $, whose name requires very little typing.
Towards jQuery and an e2 library
When an Everything2 page has been loaded from the server, it is but an inert pile of bytes. Letters on your screen, lifeless as the clay from which which we were formed. But then, by the power of JavaScript it comes alive: text boxes expand as you type into them! Widgets open and close at your behest! Your vote is packed into an empty rum bottle and cast into the heaving wild seas of the Internet! These functions had been added one by one, and the code that made them work and kept them working when the page was updated by AJAX was getting rather messy and strange, so I set up a generalised framework in default javascript to add JavaScript functions to an E2 page when it is loaded, and to any new page components added or updated later. This could be seen as a move towards a small JavaScript library for E2-specific functions.
Everything2 Ajax and Zen Nodelet Collapser needed updating to use the new mechanism. So since I was updating all three of our core JavaScript modules at once, I took the opportunity to start expanding my practical knowledge of jQuery by starting to replace Protoculous calls with jQuery, the initial target as far as that was concerned being replacement of the '$()' function provided by the one with the '$()' function provided by the other. Because there can be only one. Once that was done, a patch to Javascript Compiler reassigned '$' to jQuery from Protoculous for the three core scripts only, and things actually worked. So now we had both Protoculous and jQuery running in parallel.
Tweak and twiddle, seek out and destroy
A few things were broken as a result of the addition of jQuery, and to complete the move and drop Protoculous entirely it was necessary to find all the places it was being used. This was difficult for two reasons: firstly, as I mentioned, it doesn't advertise its presence, and secondly, it was present in a fair amount of obsolete and/or experimental code that wasn't actually in use. But the Revolution marched on inexorably, fixing:
- e2getFocus(): used to find where the focus was before replacing page elements and put it back inside them if it was in the replaced element.
- ColorClass.js, which is used in the E2 Color Toy, and which suffered from a strange incompatibility with jQuery.
and removing reliance on Protoculous from the core scripts and from:
- zensearchform: this is the search form at the top of the page. The full text search needs JavaScript. While I was at it, I fixed it so that it doesn't appear if JavaScript is switched off.
- The Notifications nodelet.
- Chatterbox. Also moved the in-line JS into a separate script.
- Chatterbox script: Moved the separate script into Everything2 Ajax and default javascript because it was getting loaded every time the chatterbox was refreshed, leading to large numbers of notifications in chatterlight that the chatterbox had stopped updating.
- script_tinyMCE, which sets up WYSIWYG text editing for the various text areas it's available for.
- classic user edit page: where you edit your profile. Or 'homenode', in our quaint jargon.
- Nodelet Section Collapser: a small javascript to make the non-collapsible nodelet sections (without [ - ] links) collapsible.
while also:
- Improving the consistency of the placing of widgets and making them respect the edges of the window.
- No longer setting the font size of expandable text input fields to 179px in Internet Explorer.
- Cleaning up and reorganising displaydebatecomment and showdebate for better-structured markup of usergroup debates, removing the tables used for formatting and using the show content htmlcode for consistency with markup elsewhere in the site. One day this code should be used for discussions of writeups.
- Adjusting pageheader to make it possible for pages to inject html into it. (It appears above the output of the page code, but is processed after it.)
- Putting the links from one settings page to the others in the page header.
- Making it possible for Guest User to try out different stylesheets using '?displaytype=choosetheme', so we can see what they would look like for Guest User.
- Adjusting registry display page to better control the length of registry entries using the general expandable text box code in default javascript.
- Making it possible to replace text in expandable text boxes that have reached their maximum permitted length by selecting existing text and typing over it.
... and writing replacements for a few functions present in Protoculous with no equivalent in jQuery:
- e2.periodical() to replace PeriodicUpdater()
- e2(<function>).defer() and e2(<function>).delay() to replace <function>.defer() and <function>.delay().
Guinea pigs required
I was fairly sure that no active code was left was left that needed Protoculous, and had already stopped serving it to Guest User, who gets a clearly-defined and relatively small amount of JavaScript, but to make sure, I stopped it being served to edev members and asked them to report any failure of function. That was on October 27th. Would the site collapse for the most tech-savvy portion of its users? Would DonJaime be accursèd among the noders for his unpardonable recklessness, or celebrated from the rooftops for his vision and for the swiftness of his pageloads? Find out in next month's even more exciting episode, coming soon to a root log near you!