Darren's Personal Web Portfolio – Parksville, Qualicum Beach Ruby on Rails Web Developer and Designer

Webaim has posted a very interesting and very full of information article with results on how disabled people with screen readers view web pages. I was shocked at alot of the results and will be bookmarking the page for future reference forsure.

I’ve updated the previous patch of ElevatedFormBuilder to a Ruby on Rails plugin. You can now install it as a plugin from my github:

script/plugin install git://github.com/darrenterhune/elevated_form_builder.git

If anyone has any problems just add comments below.

Formtastic is far superior than this plugin so you should check that out instead.

Update: This patch can now be installed as a rails plugin from my github.

I recently committed a patch for the “Keeping Forms Dry and Flexible” recipe found in Advanced Rails Recipes Book. The original recipe was written by Mike Mangino of Elevated Rails. The first time I used the recipe found in the book, I was pretty impressed… almost. Being a usability and accessibility freak that I am I saw that if you passed in the custom :label option (This is to print a custom label instead of the default table column name, which would be in this case… “Title”):

<%= f.text_field :title, :label => "custom label here" %>

This would print:

<label for="controller_title">Custom label here</label><input id="controller_title" type="text" value="some value here" size="30" name="controller[title]" label="custom label here"/>

Wha? There’s a label param in the input element? That’s not allowed!.  So I went off to Mike’s website and contacted him asking him if he had any updates to this recipe. He gladly created a new repository on github for me to pull from. I grabbed his new version of the error_handling_form_builder. Wow it’s different! Wow it’s got 2 form builders! One that lets you use templates like in the book and a more customizable one, that just uses content_tag methods to build a form. Both are pretty sweet and both use the same helper method. However when I tested, it still printed the label in the input. So I did a patch and Mike did a patch and now we have a dry, flexible, accessible, usable and badass form builder with 2 options for building forms! Or of course from Mike’s github.

I recently had a coverstation with my teacher from last year Jim Rutherford from Digital Media Minute about securing web forms that have email fields where the email address ends up going to an mail script. I’ve always busted my brain on how to do this. I’ve used math equations, but a bot could just loop through numbers easy, I’ve used captcha, but it’s kinda annoying, I’ve seen scripts that check if the refering page was from the same domain, but you could use curl to get around that, I’ve used flash to create the form then pass the variables to a script to do the handling, but that takes time and isn’t accessible (yet), and the list goes on. When talking with Jim, he said one of his previous employers used css. I was shocked at how easy it was. Although it doesn’t stop all spam, it can stop most of it. I’ve also done some stuff with php’s Ming. Ming is a library for creating flash. Here are 2 tutorials, one using Jim’s simple css, and two using Ming and php.

Using CSS/Simple Trickery (AkA Bastard Bots Blocker):

< input name="city" type="text">
< input name="email" class="hidden" type="text">

How it works:
Users don’t see the hidden name=”email” field, but bots do and they insert email addresses into it. Bots would insert a string like Vancouver into the name=”city”, (which is actually set up to be the email field for users) field and well obviously there’s not going to be any emails getting sent. This is really a simple way of stopping them bots to a point.

Using PHP and Ming (AkA Bastard Bots Blocker that’s a bastard to set up but easier than doing your own captcha):
First you will have to have Ming installed. I believe as of php5 ming is packaged in. Not too sure though. I know that if you install php5 using Marc Liyanage’s package it comes with it. Note: This is similar to captcha but easier.

<?php
 $font = new SWFFont("Bitstream Vera Serif.fdb");
 $text = new SWFText();
 $text->setFont($font);
 $text->moveTo(200, 400);
 $text->setColor(0, 0xff, 0);
 $text->setHeight(200);
 $random_string = (you'll have to create a random string, there are many ways);
 $text->addString($random_string);
 $movie = new SWFMovie();
 $movie->setDimension(6400, 4800);
 $movie->add($text);
 header('Content-type: application/x-shockwave-flash');
 $movie->output();
?>

How it works:
Basically this is php creating a flash file with a text string in it. The random string part isn’t part of this tutorial, but it’s not hard to do. Then once that small flash output has been created you can have a field that a user would have to input the random string into, then in your testing scripts just check that the string matches your $random_string variable. I haven’t done this but I have used Ming to create flash and this works. Also note that you will have to get your hands on a fdb font file and upload it to your server. Also another note: Not accessible = booo.

Here’s a great Ming resource

RELATED:

Jonathan Snook has a sweet write up on developing his own spam blocking system that was interesting to read.

Also Defensio has a really cool application that you can sign up for and include in your own sites. Oh and their Canadian too!

Here’s a cool script for using with your applications if you would like to limit the number of characters in a textarea as well as show a user how many characters they have left.

I wrote this using Mootools event and domready Event classes. For this to work you’ll need to have Mootools Event and DomReady classes. Then embed that file in the top of your document.

Feel free to use it, but if you think it’s sweet links here wouldn’t hurt… but that’s up to you! Have fun!

<script type="text/javascript">
/*Created by Darren Terhune January 16th 2008 http://headfirstproductions.ca*/
window.addEvent('domready', function() {
 //check length function
 function check_length(form) {
  max_length = 255; //set the max length of the form
  if (form.testimonial.value.length >= max_length) {
   form.testimonial.value = form.testimonial.value.substring(0, max_length);
  } else {
   form.num_left.value = max_length - form.testimonial.value.length;
  }
 }
 var testimonial = $('testimonial');
 testimonial.onkeydown = function(event) {
  check_length(this);
 };
});
</script>

Here’s my html form

<form id="testimonial" method="post" enctype="multipart/form-data" action="<?php echo $_SERVER['PHP_SELF']; ?>">
<p>Name (Person who gave the testimonial)</p>
<input name="name" type="text" tabindex="1" size="40" value="<?php if (isset($_POST['name'])) { echo $_POST['name']; } ?>">
<textarea tabindex="2" name="testimonial" cols="50" rows="10"><?php if (isset($_POST['testimonial'])) { echo $_POST['testimonial']; } else { echo 'Please enter the testimonial here... (max 255 characters)'; } ?></textarea><br />
<p>Characters Left</p>
<input size="3" value="255" name="num_left" id="num_left">
<input type="submit" tabindex="3" value="Submit">
<input type="hidden" name="submitted" value="TRUE">
</form>