Adding Drupal CAPTCHAs in code

The Drupal CAPTCHA module provides a great configuration page for adding captchas to webforms and forms created with the Drupal form API (created in code).  I recently encountered a situation with a custom, multi-page form that needed a CAPTCHA.  The problem was that the CAPTCHA was showing up on the first page of the form, which seemed like a strange user experience.  Fortunately, it is possible to insert a CAPTCHA into a FAPI form in code as well.

The #captcha_type will define which style of CAPTCHA will be displayed. ( Image and reCAPTCHA require that those modules are enabled in addition to the regular CAPTCHA module )

  $form['captcha_fieldset'] = array(   // wrapping in a fieldset so it looks better
    '#type'           => 'fieldset',
    '#title'          => 'CAPTCHA',
    '#collapsible'    => FALSE,
    '#collapsed'      => FALSE,

    'my_form_captcha' => array(
      '#type' => 'captcha',
      '#captcha_type' => 'captcha/Math'  // displays the default math captcha
      // '#captcha_type' => 'recaptcha/reCAPTCHA'  // requires the reCAPTCHA module
      // '#captcha_type' => 'image_captcha/Image',  // requires image_captcha module (distributed with the captcha module)
    )
  );

PHP error reporting

Great for development:
<?php
error_reporting(E_ALL);
ini_set('display_errors', '1');
// probably more error reporting than you'll want
?>

Finally, a unicode lookup tool!

For whatever reason I always have trouble finding a resource this good for converting special symbols
http://unicodelookup.com

Online formatters & pretty printers

A few online resources that I use on a daily basis for formatting / pretty printing:

JSON Viewer:
Simple, straighforward, and FULL SCREEN!  ( I hate JSONLint because its window is so small )
There is also a 'View' mode that displays your JSON as an interactive (collapse/expand) list.
jsonviewer.stack.hu

PrettyPrinter:
Excellent for PHP arrays. The list of options for fomatting can be a little overwhelming but very powerful. I generally click the first two boxes for "Add new lines after "{" and before "}" " and "Add new lines before "{" "
prettyprinter.de

Phillihp's PHP Pretty Printer:
Admittedly, this tool is down every once in awhile. It's a bummer because I haven't found a better one. This handles PHP Objects beautifully, and color codes them too.
http://phillihp.com/toolz/php-array-beautifier/

It is also worth noting that the Javascript method JSON.stringify() is capable of pretty-printing JSON objects.   JSON.stringify(JSON_object, null, 2);    ( I don't remember what the null is for but the 2 is the amount of indentation I believe )

Firebug and the Chrome Developers Console also have good methods for formatting debugging output:
https://getfirebug.com/wiki/index.php/Console_API
https://developers.google.com/chrome-developer-tools/docs/console

If you have a favorite, please leave a comment.

Formatting dynamically generated content in JQuery Mobile

I'm learning the basics of JQuery Mobile and so far have found it to have distinct advantages and disadvantages.

The most major roadblock I encountered ( and also had trouble finding a solution to ) was that when I added HTML markup to the page dynamically it wasn't being automatically themed in the JQM 'style'.  ( JQM adds a series of CSS classes that control the display of page elements )

Finally I found this blog entry which nicely describes the issues I needed solved:
http://www.gajotres.net/jquery-mobile-and-how-to-enhance-the-markup-of-dynamically-added-content/

Unfortunately there doesn't seem to be a single solution to this problem, almost every HTML element type has a different means of being 'reformatted'.   For example I added a SELECT menu dynamically. To have it appear styled with JQM styles I had to first append the menu to the DOM:

$("#select_container").html(select_markup);  // append the select_markup
$("select").select();  // call select() on all select menus to force / reset styling

Text inputs, checkboxes, tables, buttons and navigation all have their own methods...

More on JQM to follow...

onmousemove event handling in Internet Explorer

IE was giving me trouble when assigning event handlers in my usual syntax:
document.getElementById("myDiv").onmousemove = function (e) {
    // code to execute
}

The general consensus around the internet is that IE doesn't bind onmousemove events to elements other than the 'document' element. Or something like that. We all know that IE sucks, so lets cut straight the workaround.

It seems it works much better when using addEventListener():
document.getElementById("myDiv").addEventListener("mousemove", function (e) {
    // code to execute
}

Note that in that syntax the event goes by the name 'mousemove' and not 'ONmousemove'

CSS ellipsis

I always have trouble remembering what CSS properties need to be set to get text-overflow: ellipsis to work.  These three seem to do the job:

text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;