disjoint thoughts

Anyone who wants to post their email address on the Internet should be wary of spiders picking up their address and filling their inbox with spam. Here’s a little trick that hopefully keeps your email address hidden from spiders, but allows normal users view it easily.

This will actually work anywhere you can get JavaScript to run. In the case of WordPress, there’s issues getting JavaScript to run directly in a post. So what I did was created a contact page. Within the contact page I put:

If you'd like to contact me about anything at all, feel free to email
me at <span id="foo">test</span> or send me an IM on google talk.

<script language="javascript">
    //<code>

    a = ["mai", "lto", "benjamin", "lee", "smith", "gm", "ail", "com"];//
    b = a[0]+a[1]+":"+a[2]+"."+a[3]+"."+a[4]+"@"+a[5]+a[6]+"."+a[7];//
    c = a[2]+"."+a[3]+"."+a[4]+"@"+a[5]+a[6]+"."+a[7];//
    document.getElementById("foo").innerHTML = "<a href=""+b+"">"+c+"";//
    //</code>
</script>

When the page loads, the contents of the span will be replaced with my email address. My email address is pieced together from the contents of an array, which I think obfuscates my email enough such that spiders (unless they’ve started executing JavaScript) won’t be able to understand.

There are also a couple of other hacks going on here to get it to work in Wordpress. The code tags only exist to keep wordpress from touching the JavaScript syntax and escaping things like the greater than and less than characters. The code tags themselves are commented out, so that the JavaScript won’t worry about them being inside of the script tags. And at the end of every line of JavaScript there is an empty line comment, to escape anything that WordPress puts at the end of a line. If you’re not dealing with Wordpress, these things can be omitted.

I’ve added a pictures page to my blog. It’s just a slide show of my most recent flickr photos, but makes for a nice way of checking out my latest shenanigans.

Google has announced a new way to embed google maps by providing a snippet of html that can be copy/pasted anywhere. No API key or HTML munging necessary. Just click on the “Link to this page” link, and grab the html for the map you’re viewing. Here’s an example showing the rock gym I climb at:

View Larger Map

Pretty slick!

Until recently, I always had trouble figuring out the best way to format code snippets I wanted to post on my blog. I had trouble with losing the whitespace, lines of code being too long for the page, or the formatting would just plain suck. I’ve found the best solution is to place code within the following:

<pre style=”width:500px;height:400px;border:solid 1px #ccc;overflow:scroll;”>
paste code here
</pre>

This will create a nice little border around your code, along with scroll bars, AND preserve the whitespace. This solution brought to you by the wordpress forums.