Get Eclipse to automatically compile your Sass

Using the Aptana plugin for Eclipse, I was able to get syntax highlighting working in Sass files (*.sass and now *.scss). It also allows you to compile a Sass file at the click of a button, which is great, but what we all really want is automatic compilation every time we make save a change.

Automatic compilation can be done using the sass --watch command, but this requires you to set it up every time you start working on a project. In Eclipse, I couldn't find an existing way to automate the compile process, so I wrote an ant build script to do it, and then set that as a Project Builder and set it to run on "Auto Build", meaning every time a change is saved.

1) The ant build script. Put this in a file called build.xml in the root of your project. It just says to run sass (/var/lib/gems/1.9.1/bin/sass) on the directory "scss" and output the result to the directory "css". Don't forget to update the path to your sass executable, as well as your css and scss directories.

    
        
            <srcfile/>
            <targetfile/>
            <fileset dir="scss" includes="*.scss"/>
            <mapper from="*.scss" to="*.css" type="glob"/>
        
    

Update: bare in mind you can add an <arg> element inside the element in order to send any additional arguments to Sass e.g. <arg value="--style=compressed"/> will output compressed CSS (useful for your production server).

2) Add it as a Project Builder: in the project properties, click Builders, then New, and select Ant Builder. Give it a name, and select the Buildfile (click Browse Workspace and navigate to your build.xml). Under Targets, click the Set Targets button next to Auto Build, and select sass and click OK. Finally, under Build Options, check "Specify working set of relevant resources" and click the button to specify only your scss directory - this ensures the build script will only be run when you change your Sass files.

Z-index doesn't work on empty element in IE9

The z-index property will not work on empty elements in IE8 and IE9 unless they have a background. The solution is to give them one, and then hide it using the opacity property.

background: white;
filter: alpha(opacity=1);

REFERENCES
http://stackoverflow.com/questions/6480774/z-index-problem-in-ie-with-transparent-div

Drupal: iterating array items that are not properties (hashes)

I recently needed to iterate over the elements of an array, ignoring any "properties" (signified in Drupal using hashes e.g. $form['items']['#value']). Originally I did this by iterating over all the elements, and then filtering out those that I didn't want. Turns out there is a neater way: element_children(). This does the filtering for you, and returns the keys of normal (non-property) elements. You can use it like this:

foreach (element_children($form["items"]) as $i) {
    // something with $form["items"][$i]
}

jQuery code assist in Eclipse 3.7

This is something I have wanted for ages. jQuery code assist AKA code completion AKA autocomplete AKA intellisense, in my favourite IDE Eclipse.

1. Install Aptana 3 plugin: go Help > Install New Software, and use this URL: http://download.aptana.com/studio3/plugin/install
2. Enable jQuery bundle: make sure you are using the Aptana ("Web") perspective and go Commands > Bundle Development > Install Bundle > jQuery
3. Use the Aptana JavaScript editor, rather than the default Eclipse / WTP one: go Window > Preferences > General > Editors > File Associations, and click *.js and then make the "JavaScript Source Editor" the default.

And that should be it - open a JavaScript file, and type $("input").cli and then hit Space and it should automatically add the code for a jQuery click() event handler.


ALTERNATIVE
You could also try jQueryWTP, or JSDT jQuery which is available in the Eclipse Marketplace, but I have no experience with these. Please add comments if you these plugins are actually any good.

REFERENCES
http://stackoverflow.com/questions/4721124/how-to-enable-jquery-support-in-aptana-studio-3

Google Analytics: track clicks on #hash anchor links

If on your website you want to treat different page anchors as different pages (e.g. if you load your pages using Ajax), then you need a way to tell GA (Google Analytics) about this. Unfortunately there's no simple settings change you can make in the GA tracking code snippet - you actually have to run some GA code yourself when the event occurs. It turns out this is quite simple:

_gaq.push(['_trackPageview', location.pathname + location.search + location.hash]);

But where do you use this? You could add it to the click event (either in your JavaScript, or in the markup, using the onClick attribute). But if you want a global solution, you need to fire it for all hashchanges. This can be done using the jQuery hashchange plugin:

$(window).hashchange(function() {
    // put any other hashchange magic you might want to do here
    _gaq.push(['_trackPageview', location.pathname + location.search + location.hash]);
});

REFERENCES
http://www.searchenginepeople.com/blog/how-to-track-clicks-on-anchors-in-google-analytics.html

Drupal 6: Enable/Disable the WYSIWYG Editor on Specific Forms

You will need your own custom module for this, in order to implement hook_form_FORM_ID_alter().

DISABLING
You can disable the WYSIWYG editor on any form by setting the FAPI (Forms API) setting #wysiwyg to FALSE e.g. for the Page node edit form, you can do this:

function MODULE_form_page_node_form_alter(&$form, &$form_state) {
    $form['body_field']['body']['#wysiwyg'] = FALSE;
}

ENABLING

1. Some contrib modules (e.g. Ubercart) have completely disabled WYSIWYG editors on some of their textareas, and I haven't found a way around this.
2. If you have checked the "Enable by default" option, the WYSIWYG editor should automatically be enabled for any form fields that have the "Input format" option below them.
3. For other forms (with simple textareas that dont have the "Input format" option) you must manually enable the "Input format" option yourself. This can be done by again altering the $form object in your hook_form_FORM_ID_alter() e.g. for the Description field on the form to edit a content type:

function MODULE_form_node_type_form_alter(&$form, &$form_state) {
    $form['identity']['format'] = filter_form();
}

Update: if you're more into GUIs than fiddling in the code, you could just install the Better Formats module, which gives you loads of control on which Input formats are used for which forms. Then by having one plain-text input format, and another one associated with a WYSIWYG editor, you can easily control which forms use which.

Drupal 6: hook_form_node_form_alter() not working

I've long known about the versatile hook_form_alter() function, which allows you to alter any form before it gets displayed on the page, using your own custom module. Recently I discovered the wonderful hook_form_FORM_ID_alter() function, which is only fired for a specific form id, making it a better solution when you want to target only 1 form.

I had used this successfully a few times, and then hit a wall when I tried using it for the main node edit form (the form's id is node-form, so I called the function hook_form_node_form_alter). Half an hour later, I stumbled upon the solution: it does not want the HTML ID attribute, it wants the internal Drupal ID for the form. So in my custom module, I used this code to get the ID:

function MODULE_form_alter(&$form, &$form_state, $form_id) {
 echo "formID=".$form_id;
}

Which turned out to be page_node_form, so the final function that worked was called MODULE_form_page_node_form_alter().

REFERENCES
http://www.hashbangcode.com/blog/drupal-hookformalter-node-form-501.html