asemanfar - a blog about programming

As most of you have probably seen somewhere on the Internet, web sites have started showing e-mails with the period and at-sign replaced with "[dot] and [at]" or "(dot) and (at)" or some derivation of that.

Anyway, I recently came up with a compromise that both protects e-mails from bot scraping but still shows the e-mail normally to the user. Using the Behaviour javascript library and PrototypeJS, I simply replace any span marked with the email class with its appropriate human usable link.

Imagine we had this in our source:

   1  <span class="email">joesmith <em>[at]</em> gmail <em>[dot></em> com</span>

and we used this Javascript to change it to something more user-friendly:

   1  var email_rules = {
   2    'span.email': function(el) {
   3      var email = new String(el.innerHTML).stripTags().strip();
   4      var hasPeriod = false;
   5      if (email.endsWith(".")) { hasPeriod = true; }
   6      // change this expression to match your e-mail hiding scheme
   7      email = email.sub(" \\[at\\] ", "@").sub(" \\[dot\\] ", ".").sub("\\.$", "");
   8      el.innerHTML = '<a href="mailto:' + email + '">' + email + "</a>" + (hasPeriod ? ".":"");
   9    }
  10  };
  11  
  12  Behaviour.register(email_rules);

Which will change what the user sees to

   1  <a href="mailto:joesmith@gmail.com">joesmith@gmail.com</a>

And that's it! Bots see the original and users with javascript enabled see the real email as a link.

Update: Considering bots have added things like [at] and [dot] to their list of things to search for, this trick doesn't really work. But nonetheless, using the Behaviour library to add usability/functionality to your UI is a cool trick that comes up handy quite often.

So I've been on kind of a plugin creating binge in the past few weeks, but I promise this is the last one in this stretch. Basically, I took my blog and some other projects I've been working recently and extract the things that I felt were plugin worthy because either they are generic enough to be used on almost every site (this navigation helper and the javascript dependency helper) or it was not super specific and could be used by others the TextMate Syntax Highlighting plugin.

Anyway, this plugin is super simple to configure. It aims to centralize the navigation related logic such as which links a logged in/out user sees and when a certain link gets marked as "selected". It's broken down into 3 components for configuration:

1. The Links that your site has for navigation (all of them, regardless if they are going to show up on every request)
2. The order to display them for this request. This order can be any subset of the above list.
3. The process to select the tab that is currently marked with the "selected" css class. (this part is broken into a basic and advanced version)

There is extensive documentation to explain all of the configuration in the README and the nav_helper that you can generate using script/generate.

It's hosted on GitHub at http://github.com/arya/simple_nav. As always, contributions and suggestions are highly encouraged.

For the past several months, I've been using a helper I wrote to manage my javascript dependencies. All it really does is allow you to specify which javascript files/libraries depend on others (i.e. scriptaculous depends on prototype) and make it easy to include them when you need them.

I didn't like having to include prototype.js, effect.js, and sidebar.js on every page, and I didn't like specifying all 3 from my view each time I needed it. So I wrote a helper, which is now available in plugin-form on GitHub.

Here is how you use it:

   1  # app/views/posts/index.html.erb
   2  <% js(:posts) %>

   1  # app/helpers/application_helper.rb
   2  module ApplicationHelper
   3    include JavascriptHelper
   4    def js_dependencies
   5      { :posts => [:effects] }
   6    end
   7  end

   1  # app/views/layouts/default.html.eb
   2  <%= javascript_tags -%>

And that's it. It's a work-in-progress and any comments/suggestions/git-hub pull requests are encouraged.

Earlier today, my roommate and I were enjoying our afternoon watching the TextMate for Rails 2 Peepcode and I noticed that in the bash prompt, the current branch was shown in parenthesis. I thought this was a wonderful idea and thought I'd add it to my own bash prompt.

Update: Some much better alternative methods have been posted in the comments, please take a look below.

Here is the code to do it:

   1  export PS1="\[\033[38m\]\u@\h\[\033[01;34m\] \w \[\033[31m\]\`ruby -e \"print (%x{git branch 2> /dev/null}.grep(/^\*/).first || '').gsub(/^\* (.+)$/, '(\1) ')\"\`\[\033[37m\]$\[\033[00m\] "

This will make your bash prompt look like this:

   1  user@hostname currentDirectory (branch name) $

The important part of the PS1 in the first code snippet is this:

   1  # this goes somewhere in your PS1 (it'll make the branch name red)
   2  \[\033[31m\]\`ruby -e \"print (%x{git branch 2> /dev/null}.grep(/^\*/).first || '').gsub(/^\* (.+)$/, '(\1) ')\"\`\[\033[37m\]

I decided to try to do this with sed and not ruby. I came up with this:

   1  export PS1="...\`git branch 2> /dev/null | grep -e ^* | sed -E  s/^\\\\\\\\\*\ \(.+\)$/\(\\\\\\\\\1\)\ /\`\[\033[37m\]$\[\033[00m\] "
   2  # no, your browser is not having rendering issues
   3  # there seriously are that many backslashes

Other than the disgusting backslashes, it's pretty nice. If you use single quotes on the outside instead of double, you can lose a few backslashes:

   1  export PS1='...`git branch 2> /dev/null | grep -e ^* | sed -E  s/^\\\\\*\ \(.+\)$/\(\\\\\1\)\ /`\[\033[37m\]$\[\033[00m\] '