Introducing JSAmp – An unobtrusive Javascript solution for sexy ampersands +

The idea for this little script was born while chatting with Medo, a year or two back in London. The bunch of us were in London for that year’s FOWA event. Anyways, the code has been lying around for way too long — I finally found the time to finish it up and release it.

What does it do?

Well, not much. It’s an unobtrusive Javascript implementation of search & replace basically. It replaces ampersands (in their various possible forms) inside certain (configurable) html elements with something along the lines of <span class="amp">&amp;</span> (also configurable).

This replacement, however, enables you to do some sexy styling of ampersands inside your headings for example. It can get really freaky, and really, really, really nice visually.

People usually do this on the server-side (and there are many, many server-side flavored plugins/functions/solutions out there), but my take on this is client-side. Anyone should be able to use it. (well, almost anyone).

Check out the demos and the configurator.

The code is very simple, documented, MIT licensed and comes in two flavors:

  • The full source (5KB)
  • Packed version (820 bytes)
    [don’t get this one. modify the full source and pack it yourself with your modifications. This is used just as an example of the file size reduction gained with packing]

Have fun, and drop me a line if you have something to add.

P.S.
The lack of updates on the blog is noticeable. Sorry about that, it’s been hectic around here. Hoping it would normalize soon, so I can put the finishing touches on the rest of my drafts…

5 Responses to “Introducing JSAmp – An unobtrusive Javascript solution for sexy ampersands”

  1. Sexy &s bro! You are one crazy mofo!

  2. That’s great, zyt, thanx! Exactly what I need and what I would’ve done if only I was that good with JS :)

  3. Aha, its finally seen daylight :) As always neat work zyt!

  4. somethin’ related
    http://www.adobe.com/type/topics/theampersand.html

  5. @davor: thx for the link!