Spam Prevention Using Hidden Field

Our site at work has gotten a few pretty intense moments of form spamming over the past few months. Granted a few here and there, we just deal with. However, the really aggressive moments can be quite a nuisance for those receiving all the email submissions.

The big question for us always has been how can we prevent this without being at the expense of the user. For instance, we don’t want a solution that adds more effort to the users and they end up not filling out the form. Not good.

So after some research on suggested approaches I decided to go with the hidden field approach.

This requires adding a field to the form in question, then using some CSS to hide it from view. You can give it a title of do not fill out for those who don’t have CSS enabled in their browser.

Since most spambots tend to fill out every field in a form, you just check if that form has a value when it’s sent. If the bot filled it out, then it’s probably not from a human. If it’s empty, then you’re probably good to send.

We just started testing this approach out, and thus far it’s been good without being too restrictive.

Damn you spammers!


visitavalonnj.comFinished up one of the cooler projects I’ve had the pleasure to work on a few weeks ago. The site is

I’ve worked with the client in the past and they were looking for a new site to help with the tourism of Avalon, NJ (a very nice place). Working with them is excellent and probably the best overall client relationship I’ve had to date. They know what that want, and present a professional design/concept and I build them a web solution to meet their needs.

In this case they really wanted a site that would be easy for them to maintain and add and edit content on a regular basis. Oh yeah, and they also needed it done before the start of their tourism season (middle of March ideally).

With only a few seconds into the conversation I knew that Drupal would be the perfect match for their needs.

Some modules featured in the creation of this project were:

  • Views – while I use it in every Drupal site I’ve ever worked on, it was heavily used in this project and really helped cut down on development time.
  • Calendar and Date – they needed an events calendar and the Calendar module was great to build upon. They also used dates with other content types and the Date module was a real life saver in these cases too.
  • Media – the client wanted the ability to add images inline view a wysiwyg editor. While still not a perfect solution, the Media module did help us give the client such a ability.
  • Facebook OAuth – they wanted users to have the option to login with their Facebook account instead of having to create a separate account for their site. This module was simple to set up and got the job done.
  • Google weather – this allowed us to easily bring in and display the latest weather in Avalon without too much hassle. Just some minor CSS tweaking was involved to get it done.
  • Social media – a very new module and it’s release was most timely. An excellent way to bring the now common social media button onto a website.
  • Webform – again a well known staple that just gets the job done.
  • Omega Theme – a real lifesaver for building a responsive web design. I highly recommend it as a starter theme for any new site.

The whole building block structure of Drupal really allowed us to deliver some cutting edge features without having to start from scratch. This really saved us a great deal in time and costs ($$$) and allowed me to concentrate more of the really unique aspects of the site.

Most impressive was how well the client has been able to use Drupal to manage the site. Our training simply consisted of a few minutes on a phone call. The admin interface was very intuitive to them and I did make sure to label all content types and fields so that each part was clear to them when it came time for them to manage the site.

Again, this was a pretty impressive project and and absolute treat to work with them again! I’m very impressed with it’s outcome and am very excited to check back with it’s performance in a few months.

Lots of fun.


Developing Hybrid Applications for the iPhone

Developing Hybrid Applications for the iPhonePicked up a copy of Developing Hybrid Applications for the IPhone by Lee S. Barney earlier this week. Had a 33% off coupon at Borders and was itching for something new to read.

Been messing with iPhone development for a bit and since I’m a web developer figured I’d take a hard look at writing web applications for the iPhone vs going the SDK Objective-C route.

I’m really glad I picked this book up. They do an excellent job of reminding me how cool Dashcode is for developing web applications for the iPhone. My only knock on Dashcode in the past was the lack of documentation, but this book does a decent job of covering it. Still wish there was more documentation on Dashcode if anyone is reading this.

The book covers both using the QuickConnect and PhoneGap frameworks for developing hybrid iPhone apps. It’s a fairly easy read and they do cover most of the iPhone functionality that would be used in the majority of projects. While the SDK and Objective-C are still the best way to go, sometimes web applications or hybrid applications do make sense, and that’s where this book was very handy. Just for me to rediscover Dashcode alone justified the purchase.


YUI 3 Gallery

I’ve really been meaning to make the switch over from YUI 2.x to 3.x, and I do believe the YUI 3 Gallery has made up my mind. The Gallery is a repository of YUI 3 modules that aren’t addressed by the core library. Also, all modules are released under the same BSD license as the YUI Library.

Even though the Gallery is fairly new, the amount of modules is already pretty impressive. Some that I’m very excited to play with are:

This looks very cool, and if you’re using YUI3 go now.


Incorporating Lightbox 2 effect with WordPress gallery

I wanted my client to be able to add pictures to a gallery using the build in WordPress gallery, but was hoping to customize the display of the gallery thumbs a bit. I was hoping to get it to display as the following:

      use the Lightbox 2 script
      able to override the CSS that is being written to the page

Since the default CSS that the gallery generates is written in the page, overriding the styles was kinda a pain to do in the site’s stylesheet I was using. However I did find that I could edit the default CSS that is being written to the page by the gallery by editing the following file:


Locate the following code and edit as necessary:

	$output = apply_filters('gallery_style', "
		<style type='text/css'>
			#{$selector} {
			#{$selector} .gallery-item {
				float: left;
				text-align: center;
			#{$selector} img {
			#{$selector} .gallery-caption {
				margin-left: 0;
		<!-- see gallery_shortcode() in wp-includes/media.php -->
		<div id='$selector' class='gallery galleryid-{$id}'>");

You can see I’ve removed some styles in this case.

Further edits can be made to the gallery from this file as well. I chose to use a little bit of javascript to attach the rel attribute to my anchors instead of editing the php file. Personally, I’d rather do that so in case a future version of WordPress altered the media.php file it’d be one less thing for me to worry about.

Very basic javascript to add the rel attribute that Lightbox 2 requires to the image anchors:

var galleryDivs = YAHOO.util.Dom.getElementsByClassName('gallery', 'div', 'bd');
for (var i = 0; i < galleryDivs.length; i++) {
    var imageAnchor = galleryDivs[i].getElementsByTagName('a');
    for (j = 0; j < imageAnchor.length; j++) {
        imageAnchor[j].setAttribute('rel', 'lightbox[gallery]');

I use the YUI Dom collection to help me gather nodes.

Then it’s just a matter of calling the relevant dependancy scripts and styles into your page and it should work for you.


YUI Treeview

The sitemap for has grown quite a bit over the years, and we were looking for a way to make it more manageable while still being accessible. The YUI Treeview version 2.6.0 supports progressive enhancement, focus and keyboard navigation. Which seemed a perfect fit for what was needed.

Implementing it couldn’t of been any easier too. Just include the necessary source files. Then just create and render the Treeview.

tree1 = new YAHOO.widget.TreeView("markup");