Wisdom is the prime thing

The goal was simple. I needed a way to obfuscate links in web pages to prevent spammers from harvesting email addresses from pages and flooding me with advertisements for products and services I’m embarrassed to even read about. There are some pretty high-tech solutions out there, but I just wanted a simple solution to start with: easy to use, easy to maintain.

Set up your links

Any links that are going to be a “mailto:” email address you set up like this:

<p>Why don't you write me at <a class='email' priv='grfg@grfg.pbz'></a>?</p>

Note that we used the class email and set up a priv tag with the rot-encoded email address. I used test@test.com for the above example. If you are using vi, type the real email address, and then use the g? command and a motion to rot13 the text.

In the example above, since there is no text in the a element, the email address is used as the anchor text. The output on the screen looks as if this were the HTML:

<p>Why don't you write me at <a class='email' href='test@test.com'>test@test.com</a>?</p>

If you already have text specified for the a element, it will stay.

Next, set up the javascript

Here is the code you’ll put on your page. These functions can be stored in a .js file if you wish. Just make sure you call the decodeLinks function on page load.

<script type='text/javascript' language='javascript'>
/* rot functions from http://4umi.com/web/javascript/rot13.php */
function rot( t, u, v ) {  return String.fromCharCode( ( ( t - u + v ) % ( v * 2 ) ) + u ); }  
function rot13( s ) {  var b = [], c, i = s.length,   a = 'a'.charCodeAt(), z = a + 26,   A = 'A'.charCodeAt(), Z = A + 26;  while(i--) {   c = s.charCodeAt( i );   if( c>=a && c<z ) { b[i] = rot( c, a, 13 ); }   else if( c>=A && c<Z ) { b[i] = rot( c, A, 13 ); }   else { b[i] = s.charAt( i ); }  }  return b.join( '' ); }  
function rot5( s ) {  var b = [], c, i = s.length,   a = '0'.charCodeAt(), z = a + 10;  while(i--) {   c = s.charCodeAt( i );   if( c>=a && c<z ) { b[i] = rot( c, a, 5 ); }   else { b[i] = s.charAt( i ); }  }  return b.join( '' ); }  
function rot135( s ) {  return rot13( rot5( s ) ); }

/* one day when IE is up to speed, use getElementsByClassName instead... */
function decodeLinks() {
    var links = document.getElementsByTagName('a');
    var re = /\S/i;
    for (var i = 0; i < links.length; i++) {
        var link = links[i];
        if (link.className != 'email') continue;
        var pl = link.getAttribute('priv');
        var email = rot13(pl);
        link.href = 'mailto:' + email;
        if (link.innerHTML.match(re) == null) {
            link.innerHTML = email;
        }
    }
}

/* call on page load */
decodeLinks();
</script>

That’s it!

That’s all it takes to set up a simple Javascript email obfuscation system site-wide. It works on IE and Firefox seamlessly. If your needs get more complex, it’s simple enough to modify and use different decoding schemes.

Thoughts? Ideas for improvement? Please let me know!

I’m constantly finding myself in need of small, quick, personal database programs. Something light and flexible. Quick to mock up, quick to write, easy to use, painless to dump. And I find myself wanting and writing the same kinds of applications again and again.

Sometimes a text file just isn’t enough. And writing redundant SQL queries can get tiresome. Perhaps I need to print nicely-formatted reports. Perhaps I need some web connectivity for retrieving remote information. Or, what if I want to give this program to someone else to run? How many people know how to do database administration? The data needs to be conveniently stored in one place for the easiest possible backups.

What I really need is a framework. A cross-platform framework that will allow me to create these types of applications in a heartbeat. I should even be looking forward to the two minutes it would take to copy a template project and build a whole new application and have it up and running in minutes. Any changes I want to make to the data model should be immediately reflected everywhere with no extra work. But if I want something powerful, I want the framework to be flexible enough to let me get in and make it so.

Interested? Here’s my solution… » Read the rest of this entry

How do you make a textarea element dynamically resizable? Or for that matter, any other html element? Is there a simple Javascript solution that doesn’t require me to change my markup, but just add an include or two, and set a class name of “resizable” on all elements that should be dynamically resizable?

Here is my solution. » Read the rest of this entry