Clever::Tagline::Pending

I was working on a website recently that needed to display Flash animation beneath normal HTML content as part of its visual treatment. In the course of developing this, I found out that embedded Flash objects inserted into a HTML document will be displayed above all other content.

The easiest way to get around this is to enclose the Flash object in a another element, for example a <div> . This enclosing element will then have a value for z-index that is lower than the content that should be displayed above the Flash object.

[html]

Flash object markup

Actual Page Content

[/html]

The next step is to position the content and Flash object, there are 2 ways to “layer” the 2 elements on top of each other. The first method is to use absolute positioning, the second is to take advantage of negative margins. In my case, I went with the latter.I will pull div#content up towards the Flash object by declaring a negative top margin for #content.

[html]

Flash object markup

Actual Page Content

[/html]

In the course of testing, the page is rendered as intended in Internet Explorer 6/7 and Firefox. However, the Flash object will be displayed above content in Safari when any text is selected or the page is scrolled by the user. To get around this issue, enable transparency for the Flash object. Just take care to position content away from the non-transparent parts of the Flash animation or it will be hidden from view in Safari.

I finally bit the bullet and got my own shiny new copy of Parallels for Mac. It helped that I got an email from the company containing a link to purchase the software at a discounted rate.

So I’ve been putting it through its paces for the past few weeks and its been great! No more having to do website compatibility checking for Internet Explorer 6 and 7 on different PCs. I just need to fire up Parallels and boot up the Windows XP images with the browser installed. You do need to have at least 2 GB ram in order to have both the VM and OSX running smoothly.

The next singapore.rb meeting will be held on the 19th of April 2007 in the Central Lending Library. The National Library Board of Singapore has kindly provided the use of one of their meeting rooms (complete with WIFI). The (tentative) agenda for the meeting is as follows:

7:00pm Rails Plugins Showcase: Dead simple AJAX and Form testing in Rails – Choon Keat
7:30pm FxRuby and ScreenSvr – Sausheong
8:00pm Q&A, discussions
8:30pm End of meeting

My thanks goes out to the NLB’s Ivan Chew for facilitating the use of NLB facilities for a trial session, as well as to Choon Keat and Sausheong for making the presentations.

I’ve started to read Donald A. Norman‘s The Design of Everyday Things. He uses the modern telephone as an example where the paradox of technology is readily apparent. The paradox of technology as defined by Norman is the fact that the technology used to make more functions available and usable by users end up making the product more complex and often more difficult to use.

The typical office telephone is difficult to use due to the lack of visibility for its functions and the arbitrary mapping of functionality to seemingly unrelated steps. This is interesting for me as I had the luck to have used different telephone systems in my previous and current companies. I will refer to my previous company as Synergy and the current one as Opportunity as it sounds better.

Both Synergy and Opportunity have main doors that were controlled electronically and connected to the telephone system. This meant that the door could be unlocked by using the telephones. For the system at Synergy, it was a challenge to perform the task of unlocking the door via the telephone to say the least. The steps to open the door is actually different depending on which telephone you were using as only some were directly connected to the unlocking functions. It was not possible to know which sequence of steps to use unless the user memorised which phones were directly connected (which no one did, save the manager).

Here are the steps as I remember them for using telephones that were not directly connected:

1. Phone emits intercom tone.
2. Pick up receiver
3. Dial 9 to connect tone to the telephone that’s directly connected.
4. Wait for connected tone
5. Dial 98 to unlock door (Door will unlock automatically in 2 seconds)

The list of steps are shorter for directly connected phones but there is no relationship between 98 and the action of unlocking the door. There was also no audible or visual cue that the unlocking action succeeded, the only obvious indicator of whether I succeeded was if someone walked in (success!) or if the same person uses the intercom again to ask why the door isn’t open (failure!).

All this conspired to make the action of opening the door via the telephone much more complicated than necessary. It turned out that after the telephone system was installed, most of us found it too confusing to use and simply walked from our desks to the door and unlocked it manually instead!

Doing this task is slightly easier in Opportunity. Thankfully, there’s only a single list of steps to follow in order to perform this action.

1. Phone emits intercom tone.
2. Pick up receiver
3. Press the “flash” button.
4. Door unlocks with audible beep

This time, there’s no need to remember which sequence of digits to enter. Granted there is still a conceptual disconnect between the action and the effect, it is easier for users to remember. There is no ambiguity over whether the unlocking of the door succeeded, the beeping sound will be heard by all staff (the office is enclosed and not very big, space wise).

The point that Norman tries to make in his analysis of the telephone is the fact that devices become increasingly difficult and frustrating to use when its available functions exceed the number of controls. In order to expose this additional functionality, the designers of the product often resort to using un-natural mappings such as the one in the example above. The difficulty in developing a good conceptual model that resonates with users increases exponentially with the product’s complexity.

Even so, there should be a concerted effort throughout the development lifecycle to think about how it will be used. It should be easy to perform a task correctly and difficult or impossible to do it wrongly.

I’ve never liked the default code editor that comes with the Flash IDE, so when the I discovered that I would need to develop actionscript code for a project, my first thought was to use Textmate instead. Incidentally, some people are already doing this.

I’ve used MTASC to compile Actionscript files before, the most important difference that surfaces when comparing it to Macromedia’s Actionscript compiler (MMC), which is the one that’s packaged in every installation of Flash, is that MTASC is much stricter on enforcing proper syntax. This is intended to reduce occurences of hard to find bugs that arise from improper scripting. The other feature that MTASC touts is its faster compile speed, however I’ve not experienced a visible variance between it and MMC. I would think that this speed improvement would be more apparent when compiling large projects consisting of more than 50 Actionscript files.

I’m using dirtystylus’ Textmate command for checking the syntax of my files, it took me a while to get it working as I organised the dependencies differently. Following my conventions in using MacPorts which is installed in /opt/local/, MTASC and XTrace were placed in /opt/local/managed/. The executable for MTASC was stored in /opt/local/managed/bin/ while XTrace.app was copied to the Applications folder. All supporting scripts were moved to /opt/local/managed/lib/.

This is the customised command that I’m using after trying for about 2 hours.

[code]
FLASHPLAYER=SAFlashPlayer
MTASC=/opt/local/managed/bin/mtasc
CLASSPATHS="-cp /opt/local/managed/lib/mtasc/std/ -cp /opt/local/managed/lib/mtasc/std8/ -cp /Users/douglas/Library/Application\ Support/Macromedia/Flash\ 8/en/Configuration/Classes/"
SOURCE="$TM_FILEPATH"
OUTPUT=test.swf
VERSION=8
TRACE="-trace com.mab.util.debug.trace"
TMPFILE=/tmp/as-compile.err
compileResult=`$MTASC -main "$SOURCE" -wimp -version $VERSION -strict $CLASSPATHS $TRACE 2>&1`
echo "

"
if test -n "$compileResult"
then
errorLine=`echo $compileResult | sed 's/.*:\([0-9]*\):.*/\1/'`
echo "$compileResult";
else
echo "
fi
[/code]

I discovered this method of clearing floated elements (this may be old news to some of you) in a layout using CSS while searching the web for alternatives to inserting extra markup just so the layout will look right (I’m looking at you, <div style="clear:both"></div>). This is just brilliant, a single style declaration, “overflow: auto;” to the element containing the floats and that’s it. It seems to work with all major browsers, which includes Firefox, Mozilla, Internet Explorer 6 & 7, Opera and Safari.

There is an extra step to make this work in Internet Explorer 6 though. A dimension needs to be applied to the element that the overflow:auto; declaration is being applied on in order to trigger the hasLayout property in the element.

I enjoyed the first Singapore Web Standards Group meetup held at Raffles Girls School. Saw a few familiar faces and several new ones as well. It’s good to know that web standards are alive and kicking in Singapore. I really appreciate the effort given by Lucian who organised the meetup, and for the entertaining and informative presentations given by Coleman and Nick.

Although I thought the meetup could have done with more publicity, I only got to know of it from Sip Khoon a week before. I suppose it’s something that we can do to make people aware of the options available

Update
Ivan Lian has pictures of the meetup on Flickr. Check it out!

The Rails Podcast has an excellent interview with Josh Shairbaum and Dan Manges from JP Morgan on using Rails in the enterprise. Do check it out if you’re at all interested in introducting Ruby/Rails to your particular company.

Listening to Josh and Dan made me realise that I’m quite fortunate to be working in a company where there are no corporate traditions to follow when it comes to technology. I’ve developed 2 applications for use by staff and clients alike so far and they’re both powered by Rails. Being the sole developer in my company, Rails is a perfect fit and this combination has shown its worth.

Josh mentioned that his development team of 3 got Rails in the door by using it to develop a reporting application, an app where the implementing technology was not a big issue with corporate managers. By having the reporting application running AND available to end users within 1.5 months demonstrated the productivity gains that can be achieved by Rails. A lot of evangelizing and demonstrations were done to help their cause too. I think that they benefited a fair bit from having key people in other functional units willing to give Rails a try, even though it required them to risk doing something that’s new and by corporate definition, risky.

It’s encouraging to listen to them and their passion for Rails was apparent in the way they talked about and how they dealt with people who did not understand what it was.

I’ve started using RSpec in my Rails projects. Besides serving the purposes of testing my application, it has also become an extremely useful design tool. Comparing the DSLs for Test::Unit and RSpec, the latter expresses the intention of the tests much more clearly and quickly. Luke Redpath does a great job of explaining the basics of Behaviour Driven Development using RSpec on Rails. Its a must read if you’re interested in exploring BDD for your Rails development.

Technorati Tags: Rails, Ruby, Testing

Rick Olsen, a member of the Rails core team has a good writeup on working with ActiveResource. It seems that Beast is taking advantage of ARes to provide a RESTful API while keeping all the heavy lifting transparent to the user of the resource.

The documentation on ActiveResource is really scarce at the moment and posts like Rick’s are hugely useful to Rails developers who are looking to leverage ARes in their applications. Speaking on which, I would be refactoring an internal app used within my agency for ARes soon. I just have to implement the remaining user stories and take it to 1.0 first.

More on that as I get deeper into development.