02.20.08

Prototype API Documentation Search Bar Add-On

Posted in Web Dev, AJAX, JavaScript at 10:51 pm by Spencer

The Prototype JavaScript framework is a fine thing, and the Prototype API Documentation online reference is obviously indispensible. The only problem is that currently the Prototype site has no site search, except for the API Search Bookmarklet which will only retrieve for specific method names (which is certainly useful but somewhat limiting, since it assumes you already know what you’re looking for and is not a free-text search).

So, after one too many searches on Google using site:www.prototypejs.org/api/, I wrote a couple search bar add-ons that simply uses the same Google trick to perform full-text searches of the API docs on the Prototype site.

There are two different versions — one for Firefox and one for IE7 (which has a slightly crippled implementation of the OpenSearch protocol…go figure).

Install the Prototype API Documentation search bar add-on here. (Sorry: Firefox and IE7 only.)

06.01.06

Securing Your JavaScript Against Evildoers

Posted in Web Dev, AJAX, What I'm Reading, JavaScript at 9:10 pm by Spencer

What with the Ajax invasion and all, JavaScript is once again all over the damn place.  The big difference now vs. the ’90s is JavaScript is doing a lot more heavy lifting and — more importantly — interacting with both host server and browser client (i.e. user’s machine) in ways heretofore (mostly) not seen.  And that means along with all the cool stuff and wond’rous toys and tools comes a whole new avenue for mayhem by lowlifes, script kiddies, and really gnarly folks like the Russian mafia.

Server-side programmers — at least the good ones — are already atuned the potentially cataclysmic horrors that can be wrought via insertion attack methods, but in javaScript circles — even the upper aeries of guru-dom — awareness of such dangers is not as pronounced.  This is bad.

Fortunately, A List Apart is doing its part for responsible web development (as usual) and has posted a good 2-part primer on writing secure JS code by Niklas Bivald:

Community Creators, Secure Your Code!

Community Creators, Secure Your Code! Part II

Let’s hope this is the start of a trend of articles and discussion along these lines.

02.19.06

Variably-Sized Pop-Ups with No onclick

Posted in Web Dev, JavaScript at 3:36 pm by Spencer

This is a variation on Jeremy Keith’s script in DOM Scripting (Friends of Ed / Apress, 2005), pp. 86-88. (The same chapter is available on the official book site.)

While Keith’s original was intended as an example of other concepts and not a be-all-end-all pop-up script, it has some noteworthy limitations.

  1. The dimensions of the pop-up are hard-set in the JavaScript, thus making all pop-ups the same size. Also, modifying the sizing requires delving into the script’s innards.
  2. You cannot concatenate CSS classes — you can only style based on the one class name (”popup” in the example) or globally for all A tags, thus limiting your ability to custom style any given link. Also, attempting to add additional class(es) breaks the pop-up functionality.
  3. The pop-up’s window name is also hard-set in the innards of the script — all secondary pop-ups can only target the original pop-up.

My variation addresses these limitations while retaining all of the original functionality and adding only 7 new lines of code, plus 4 global variables for easily setting key default values (class name to trigger on, width, height, and window name).

I also threw in a couple lines in the generic popper-upper script itself to center new pop-ups — a personal preference that can be removed or modified as is your want. (Fwiw, the same approach I use for applying custom sizing could also be applied for custom positioning.)

Caveat: At this writing, I’ve not just yet tested this in Safari or IE7 (or IE5/Win), but it’s working well in FF and IE6.

Update:  Yep, works in everything — even (gasp!) IE5/Mac.  Meanwhile, watch this space for an updated and more flexible version.

For full details and sample markup, visit the examples page. (Unfortunately TinyMCE — the otherwise excellent HTML editor used in WordPress — is either too stupid or too smart for its own good to allow me to post valid HTML samples here.)

Or — download script file with inline code notes, and/or download the optimized script file (with usage notes).