Friday 24 February 2012

Installing ANT on AWS EC2: Unable to locate tools.jar

When I try and use ANT, I get this message:
Unable to locate tools.jar. Expected to find it in /usr/lib/jvm/java-1.6.0-openjdk-1.6.0.0/lib/tools.jar
Most forum posts say to just install Sun Java. Loads of other ones said to check your JAVA_HOME variable and to ensure you had installed the JDK, and not just the JRE. Ultimately, the solution to this problem for me was installing the devel version of the JDK:
sudo yum install java-1.6.0-openjdk-devel

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.

Monday 13 February 2012

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

Thursday 2 February 2012

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]
}