With larger scale projects and applications, bug and issue tracking is an important and often essential part of the development process.
Without it, issues can be forgotten or smoothed over and the end product will suffer.
It also provides options for issue prioritisation and the ability to perform phased releases, which gives a instant and clear view of exactly what issues are fixed and what are not in any single release.
This can be invaluable when communicating with clients as it is easy to get an overview of progress (if development tasks are also itemised in the issue tracker) and whether any new features are feasible given the outstanding issues. It is also an absolute necessity when working alongside testers, who will need to know exactly what is fixed in the version they are testing..

This is all well and good as long as you know beyond a shadow of a doubt which version of the release you’re dealing with – the developer has built the correct code; the correct version is on the server; the tester/client/PM looking at the SWF has cleared their cache…

There are so many ways to fail here and the easiest way to avoid this is to add a build number to the right-click menu so that anyone can quickly see what version of the file they are looking at.

I’ve seen companies in the past that pass build version numbers into the flash via flashVars, but all this really does is provide the version of the HTML file – not the version of the SWF file. I’ve actually seen a day or two of testing work wasted because the build number in the HTML had been incremented, but the new SWF had failed to copy across. The testers were under the impression that they were looking at the latest build and ended up marking all the issues as “not fixed”.

You’ll notice right-click build info around the web. It’s on YouTube, iPlayer, Vimeo and other large scale applications and I can imagine that on those applications, having baked-in version info is paramount.

Adding a right-click menu item is the easy bit:

1
2
3
4
5
6
7
8

var version:String = "1.0.0";
var menu:ContextMenu = new ContextMenu();
menu.hideBuiltInItems();
 
var item:ContextMenuItem = new ContextMenuItem( "build: " + version );
menu.customItems.push( item );
 
root.contextMenu = menu;

The hard bit is actually getting a build number actually hard coded into the SWF and for this, the simplest method is to use an ANT build file. All the main flash IDEs support ANT and although sometimes you may need to download extra packages in order to enable certain features, everything you need should be there already. If you need help getting an ANT build setup, then check this good example here.

The idea is that you define a compiler option that will hold the build info and then use that in your code:

1
2
3
4

public static const BUILD_INFO:String = BUILD::INFO;
 
//using the previous menu code //
var item:ContextMenuItem = new ContextMenuItem( "build: " + BUILD_INFO );

…and inside your ANT build file’s MXMLC task:

1

<compiler.define name="BUILD::INFO" value="'1.0.0'" />

Note: the value must be quote delimited or it will fail..

The last part is to increment the build info automatically and the simplest way to do that is to hook into your source control system (SVN/GIT).
Getting the latest revision number from your source control is relatively easy and there is even a dedicated ANT package for working with SVN – SVNANT. The idea is to simply execute your source control executable and parse the info given.

Note: your executable must be available to run from your ANT file’s location.

I only have GIT installed on my machine at the moment, so will use that as an example. With GIT, the best practise is to tag releases as you go in order to update the build. You can then use describe to pull out the latest tag.

1
2
3
4
5
6
7
8
9
10
11

<target name="getGitRevision">
    <exec executable="git" outputproperty="buildInfo">
        <arg value="describe"/>
        <arg value="--tags"/>
        <arg value="--always"/>
        <arg value="HEAD"/>
    </exec>
</target>
 
/* ..and inside your mxmlc task.. */
<compiler.define name="BUILD::INFO" value="'${buildInfo}'" />

Make sure the target that contains your MXMLC task ‘depends‘ on the getGitRevision task as any targets defined in the ‘depends’ param will be executed before running the current target.

A recent flex project I have been working on requires users to log-in using a given username and password combination via a form in order to access a non-public CMS. When the app first loads, the user is presented with a flash login form, in which we have pre-focused the username field.
Natural user response when faced with a focused text field is to just start typing away and expect full keyboard control over the form.

This does not happen with flash

Usually if you want to give focus to an HTML element, you just call the focus() method directly on the object, but not all browsers support this – in fact Chrome and Safari will ignore focus requests. (more info here)

To solve this issue, I setup a keyboard proxy javascript class that acts as a fallback in case the auto focusing doesn’t operate correctly.
The logic flow is as follows:

• The first thing we do it set up a flag in the Flex App that is activated when the flash receives focus and the StageEnter event.
• When the Flex is loaded and ready, it attempts to draw focus to itself via ExternalInterface.
• The app then waits a tenth of a second and checks to see if the focus flag has been activated.
  If so, then flash has keyboard focus ok, so we should leave well alone!
• If not, then activate the KeyboardProxy so that all keyboard input is trapped by the browser and piped into the flash app.
• Finally, whenever the user clicks and focuses the app, our StageEnter event will fire and automatically disable the KeyboardProxy

Within the KeyboardProxy javascript class, we simply trap keyboard input and pipe it directly into the Flex. Using ExternalInterface, we can expose a method to javascript and use it to send key information into flash and reproduce native Keyboard Events.

Actionscript Class:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

package com.tripleaxis.util
{
  import flash.events.KeyboardEvent;
  import flash.external.ExternalInterface;
 
  public class BrowserKeyboardProxy
  {
    private var _enabled:Boolean;
 
    public function BrowserKeyboardProxy()
    {
      enabled = ExternalInterface.available;
      if( !enabled ) return;
 
      ExternalInterface.addCallback( "onKeyPress",onKeyPress );
    }
 
    private function onKeyPress( code:uint ):void
    {
      if( !_enabled ) return;
      dispatch( new KeyboardEvent( KeyboardEvent.KEY_UP,false,false,code,code ) );
    }
 
    public function set enabled( v:Boolean ):void
    {
      _enabled = v;
    }
    public function get enabled():Boolean
    {
      return _enabled;
    }
  }
}

Javascript Class:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71

KeyboardProxy = function()
{
  var validCharRegex	= /[\w@]/i;
  var validFunctionKeys = [ 8,9,13,37,39,46,190 ];
 
  // Setup keyboardProxy //
  var keyHandler = function( evt )
  {
    var code = evt.keyCode || evt.which;
 
    //console.log( evt.type + "," + evt.keyCode + "," + evt.which + ": " + String.fromCharCode( code ) );
 
    // Filter out any unwanted keypresses //
    switch( evt.type )
    {
	// Use keypress to capture word chars as it is case specific //
	case "keypress":
    	    if( !String.fromCharCode( code ).match( validCharRegex ) ) code = 0;
	    break;
 
	// Capture delete,tab,enter,left arrow,right arrow,tab keys and dot (.) key //
	case "keydown":
	    if( validFunctionKeys.indexOf( code ) == -1 ) code = 0;
	    break;
 
	// Ignore keyup //
	case "keyup": 
	    code = 0;
	    break;
    }
 
    // Pass key data to flash //
    if( code )
    {
	document.getElementById( 'flashContent' ).onKeyPress( code );
    }
 
    // Prevent event bubbling to browser of function keys //
    if( validFunctionKeys.indexOf( code ) != -1 )
    {
        evt.preventDefault();
	evt.stopPropagation();
    }
  }
 
  // Use closure to keep core methods and properties private //
  return {
 
    active: false,
 
    init: function()
    {
	//console.log( '_SM_KeyboardProxy::init' );
	$( document ).keyup( keyHandler );
	$( document ).keydown( keyHandler );
	$( document ).keypress( keyHandler );
	active = true;
    },
 
    destroy: function()
    {
	//console.log( '_SM_KeyboardProxy::destroy()' );
	$( document ).unbind( 'keyup' );
	$( document ).unbind( 'keydown' );
	$( document ).unbind( 'keypress' );
	active = false;
    }
 
  };
 
}();

..and that’s about it. All I needed to do from here is add instantiate the BrowserKeyboardProxy class and add a listener for KeyboardEvents coming from it. The event carried the KeyCode, which was translated into a character using String.fromCharCode() and then injected into the input text field.

One thing to watch is if the proxy isn’t disabled when the flash actually gains focus, you’ll get duplicated keyboard input and undesirable effects.

Add a little finesse when dealing with backspace, delete, arrow and tab keys and the user won’t ever notice the difference!

Adding effects and animations to HTML using jQuery can add a lot of class to a page. It can also help with functionality and UX.

Too many times, however, I see a site that has this on it..

… which is fine – until you repeat the action many times.
Try moving your mouse on and off the above box several times quickly. What you’ll notice is that the animations are trigged again and again and instead of overwriting the last one, they all end up getting queued, which leaves the page animating away on its own without any way of stopping it.

This is crap and is so easy to fix just by using the jQuery.stop() chained method.

Instead of using $( '.my_element' ).animate( {width:300} ); just add a stop() in there, so it reads:
$( '.my_element' ).stop().animate( {width:300} );

Just a quick note-to-self…

Find all non-commented trace statements:
^(?<!\/\/)[\s]*trace\(

Inject GET param onto end of a URL and preserve any existing params. (must have file extension):
myURL.replace( /(?<=\.\w{3})\??(.*)$/i, '?d=' + new Date().time + '&$1' );

Back from hols and with no work on hand, it takes a little over two days before the code gland starts twitching again and I launch into a personal or learning project.

This time it was Flex4. I’ve been meaning to get my head into the Flex framework for a while now, but working fulltime often drains much of your will to code outside the office and while following the industry is simple enough with Twitter and feeds, actually getting your hands dirty with new tech is more difficult.

Anyway – not long back from my travels, and having just uploaded a ton of photos up to Flickr, I thought I’d rewrite my Flickr Badge in Flex and add a few more features.. Pretty simple really – the only downside I really had was the filesize – which has always been my main contention with Flex.

As for feature upgrades, I added social network sharing links and a google map component so you can see the location where the photo was taken. The map feature relies on you having previously geo-tagged the item in flickr, but fails gracefully should there be no stored geo-data.
Also added a Ken Burns effect because EVERYONE LOVES THE KEN BURNS EFFECT!

..it also refreshes your photos and makes it easy to while away the time looking at pics you’ve seen a hundred times already

As my previous Flickr Badge was a WordPress widget, I did the same for mine, making it configurable via the WordPress admin area.

The plugin should be visible further down this page on the right side bar.

Had heard about this one from the flash community and admittedly only had had the slightest interest… that is until they announced that every developer who gets an app approved and in the Blackberry App Store before the release of the device (US release scheduled for 15th March) gets a free device.

As embarrassingly mercenary as it may sound, I suddenly felt the need to develop an app for the Playbook

It’s just a basic idea that I’ve been knocking around since I saw Ponyo, it’s just a Morse Code translator/practise app, allowing the user to either have typed text translated on-the-fly or just tap the screen in order to practise Morse Code input. For newcomers to Morse Code, I included a help screen, with a Morse Code dictionary to learn from.

Insanely simple for existing flash developers, the most difficult part of the process was the paperwork and signing the application. They’ve even provided an Eclipse plugin for developing and a device simulator for testing. Blackberry seem to have realised the cold hard fact that products like these rely heavily on the software available. Similar to the way game dictate (to a degree) which console is most popular, a touchscreen device is really only the transparent workings behind the software that the user interfaces with. All in all, they’ve put a lot of work into making it easy for the huge community of flash developers get building content for their device all ready for release. If it costs them a few hundred devices, then it’s probably a wise investment.

Well I’ve finally done it.. I’ve gone limited. Kinda threatened to go limited several times in the past, but never it always seemed to be risky as I never knew if I’d stay freelance for any decent length of time.

Now, with 2yrs freelance under my belt and starting to work on independent, mobile applications/games, there’s more call for me to have a business through which I work and release products. It just makes sense now.

The name came from the house my dad had build when he was living in Australia. My parents bought a plot of land (Lot62) in Darlington, Perth, WA and set about making a home there. Seems apt to have a name that represents building something and creating an entity with your own hands…

Well we’re back now, tans have faded and normal daily life has snuck back in.

We stayed on AoNang beach for the last week of our trip, spending our time just milling about in the shops and on the beach, eating, drinking coffee and singing along to the Snake Show truck as it passed again and again.

We took a couple of day trips that week too – one was an island hopper, visiting PhiPhi, Monkey Island, Viking Cave and Bamboo Island, with lots of snorkelling with fishes in the clear, shallow water. The other was elephant trekking, the Emerald pool and the natural hot springs, which was one of the highlights of the whole trip for me.

Emma got bitten by monstrous, beastly things – judging by the bite marks they left and I got sunburned again – this time twice across my chest over two days, one layer of burn over another… I ended up with a kind of prickly heat thing going on for our last night there, meaning I only managed to sleep in short bursts, draped in a cold, wet towel to stop the fiery pins and needles across my chest and shoulders.

Flying to KL straight from Krabi, we met up with Michal again at the gate for the London flight in KL airport and he told us about the Vietnamese girl he’d met, how he’d flown back out there and spent another week with her and how he was going to fly back out in a couple of weeks to see her again as she was definitely the girl he was going to marry…

None of us really wanted to go home. We were travel weary and missing the creature comforts and personal space of home, but also wanted this next flight to take us somewhere new and not be our last.

We got off the plane in London nearing 5 am and got the thankfully pre-rush hour tube back home, finishing the journey and our trip back home, feeling out of place and knowing the next trip probably won’t be too far away.

The ferry pier in Phuket was crowded when we got there – lots of twenty-somethings, waiting for the boat to Phi-Phi and two weeks of alcohol and sunburn punctuated hangovers. Our taxi driver, who had been worryingly following us through the crowds after having dropped us at the pier, now turned out to be a freelance tour operator and we managed to barter two tickets direct to Railay Bay for 300 baht under the going rate. He left and we immediately hot-footed it to the nearest ticket desk to check the authenticity of the tickets we’d just bought. They were fine and we grabbed a couple of chairs and laxed out for a couple of hours until our boat was ready.

Placid and sunny for our trip over – it took a couple of hours or so to make it to Krabi and we sat with our feet over the side of the boat, watching the occasional long-tail or island go slowly past and just loving the feel of the sun on us and the sense of space around us.

We transferred to a speed boat at Krabi as Railay was only just around the headland – a short trip, but when we got there, it was gorgeous. It was a great, sunny day, so everything looked even better, but as we hopped out into the shallows, there were shoals of tiny fish here and there in the crystal blue water. Groups of long-tail boats were lined up along the beach, coloured cloths and Thai writing on their bows and beyond them, the comparatively pale Europeans bobbing around in the water. The beach at Patong had been pretty nice – smooth sand and clear, warm water – a very welcoming first Thai beach experience for the trip, but in Patong, the beach was crowded to capacity – sun loungers and jet-ski touts, there was even a cordoned off area containing inflatables that you could muck about on for 200 baht. This, however was not oversaturated – there was a fair amount of people, but none of the claustrophobic, package holiday feel. This was a place to relax.

This wasn’t where our hotel was, though.. We transferred yet again to a long-tail, clambering in out of the water, flip-flops and backpacks in hand and headed back out across the bay to the other side.

Not quite a nice landing this time.. the majority of the beach was rocky and muddy, leaving us picking our way to dry land very carefully through sharp rocks and squelchy mud and feeling like when you board a plane and have to walk past all the premium seats before passing that curtain into cattle class and your own, constricting chair. Tired and (personally) with still a little left to recover from the craziness of Phuket, we just clambered into the nearest restaurant and grabbed some food and cold drinks.. The beach there was pure shipwreck style. There was only a handful of businesses along the beach – most featuring a dreadlocked white guy or girl, practising with poi. I took a wander up to find where we were staying and, having checked in ok, ended up on a benched sidecar contraption that was attached to a moped, being driven back towards Emma and our bags. The road back barely qualified as one – pot-holes and rain-worn trenches everywhere. It wove back away from the beach into thick jungle, passing hippie encampments on either side – the sounds of hair braiding, tie-dying and juggling filtering through the palms and ferns, causing shivers to run up and down my spine. Occasionally you could see a dream-catcher strung up through the trees and I could imagine the soap-dodging bastards, prancing like dicks round midnight fires, celebrating their sustained unemployment to a chorus of indian hand drums.

We dumped the bags on the moped-thingy and walked back up the beach.. I simply couldn’t face the return journey through the land that soap forgot, although we did get to ride the contraption again as we got ferried up to our villa on it.. I wouldn’t say the place was terrible, but I didn’t exactly get that reassured, luxury feeling as the guy unlocked the padlock on the sliding doors and led us in to show us the room whilst a large cockroach sat on the floor next to the bathroom door. After he’d gone, we ‘dealt’ with the cockroach, discovered and blocked the gaping hole in the shower room floor where the bugger’d crawled up from and found one of our towels had a huge rip in it. We were paying a fair whack for the room as when you get to the islands there’s limited space and the hotels tend to charge whatever they like, but this was pretty awful. Poor Emma, found a pretty chunky spider on an early morning toilet trip that I had to get up and eliminate – to be honest, I took a peek at the dirty hairy bugger the next day and it would’ve had me hopping around a bit had I come across it sleepily at 3am!

Still, we decided to just get on with it and that first night, we wandered down to the beach, grabbed a meal and then headed over to drink a couple of beers up on a platform in front of the sea. The whole place was lit up, with small paraffin burners on low tables and made for a nice, chilled end to a hectic day.

Tonsai coming up very short compared with Railay, we headed out to catch a long-tail over the other side of the bay – the nice side. Unfortunately, though, the long-tail pilots only wanted to go with a minimum number of passengers, so we had to wait until more people turned up, wanting to get to Railay. Seemingly, not a place many people wanted to get to, so after waiting for a while, we asked some people about the possibility of a path round the headland to Railay and set off down the beach toward it.

Turns out there was a bit of a climb involved and although our flip-flops weren’t exactly idea footwear, we clambered up and over the thing, sweating away and taking it step by step in parts, but finally making it and emerging onto the ‘nice’ beach feeling as though we’d snuck into a restricted area and were going to be found out at any minute.

The beach at Railay is thousands of times better than Tonsai. The people too – we sat for our hotel’s thrown together buffet breakfast on Tonsai and were galled to see two girls – well women really – at the table next to ours, industriously weaving friendship bracelets. This is the behaviour of eighteen-yr-olds, not grown adults! It was like a their own little Glastonbury in the middle of Thailand. Dirty hippie bastards…

We spent the day on Railay just wandering about and looking for better hotels than what we were suffering on Tonsai. The first place we walked into threw a £700 per night rate at us and we kinda just ran away, clutching our wallets. We ended up booking into a reasonably expensive place for a couple of nights, but by that time I think we just deserved a bit of comfort to even things out a little.
In the afternoon, we’d just about managed a quick swim when the heavens opened and the sky took an almighty piss on us, forcing us back to the hotel we’d made the booking in for shelter and honestly one of the best steak sandwiches I’ve ever eaten. We sat and dried out, waiting for the rain to stop before heading back to Tonsai. The tide was low this time, so we could avoid the hairy climbing route and instead picked our way across the sharp rocks, avoiding the scuttling crabs that zipped around between them.

Back in the room I wasn’t feeling right and ended up with a bit of a fever that night – yet another symptom of my hippie allergy most likely.. We checked ourselves out early and got ourselves over to Railey – this time making damned sure we waited for a long-tail as neither of us had the energy or enthusiasm for the previous day’s route. We got to our hotel and were shown to our room. This time we were welcomed with a nice glass of chilled juice and we noticed my name on the ‘welcome new guests’ board – what a difference! The room/villa was nice and cosy but spacious – a huge four poster ben and an outside shower. Thank fuck for that!

It rained once more in the afternoon of the next day – again interrupting our beach and swim time, but it was great to be able to duck back into the villa quickly instead of being marooned, sopping, away from a hot shower and dry clothes. Also, as we were in the nice resort for a bit, we took full advantage of the facilities and got massages and a steam sesson in the hotel’s spa – well worth it as my shoulder had been really playing up and giving me grief. A little pampering never hurt anyone..

Just to undo all the good work of the massage, I popped out in the morning to go investigate the lagoon climb. Emma had tried it a little on her last visit and not made it up the first bit as it was slippery and steep as hell and she’d been wearing flip-flops – not ideal for climbing really. We’d walked past it on our way to the beach and I couldn’t resist having a crack at it

It was muddy and everything was covered by this red, clay-type mud. There were tree roots and branches all over the place, so no real problems with hand and foot holds and they’d even attached a load of thick, knotted ropes around the place to make things even easier. The roots and ropes were also covered in the clay stuff, so as soon as you got a sweat up things started getting slippery in your hands as well as under your feet. Still – always easier going up than down and I nipped up the first section reasonably easily.
Once at the top, it turned into thick forest, with a couple of paths heading off. I chose one and ended up at the viewpoint. Now usually in Europe, when you get any where public that’s high and even remotely perilous, you’ll get cordoned off areas, barriers and sometimes even attendants. Not in fucking Thailand, believe me! The trail ended through a couple of bushes and plunged straight down the cliff face a good 200ft. No ropes, no barriers – not even a bloody sign to warn you. I’m honestly surprised there’s not a steady stream of lemming-style deaths up there.
After realising that I was pouring sweat in a thick foresty area with no deet on, I got moving again and headed towards the lagoon. There was another trail heading away from the viewpoint that I tried first, but it ended in a vertical climb up sharp rocks to God knows where, so I opted to leave that for the pros. The route to the lagoon wasn’t terribly different, though.. The sharp rocks were replaced with rounded, slippery ones, so it was all much of a muchness I suppose..
The way, a gentle but greased slope to start, degraded into vertical faces and free hanging ropes – all similarly slicked. Between the humidity and sweat there were a couple of times where I nearly lost grip and I got to a point where you had to climb through a hole in the rock and down another free hanging rope. At the bottom of that, there was another sheer drop and nothing but a sweaty, clay pasted rope that I could see to use to stop yourself falling. I could see the lagoon from where I was and, as lovely and cool and refreshing as it looked, I could also see a slip, a short drop and a broken bone in my future so I sacked it off in the name of good sense and headed back.

I’m sure that if I’d had Mike with me we’d have got the job done. A second pair of eyes and a little competitiveness were definitely the missing ingredients.

Weary from changing accommodation every second or third day, we booked a place just round the bay in AoNang that looked nice and wasn’t too expensive and we opted to dig in there for the remainder of our trip. Less than a week to go before we needed to be back in KL for the dreaded flight back to London and I really couldn’t decide whether I wanted to go back or not.. The promise of familiar personal space, the ability to make food or a cuppa whenever you like and the prospect of wearing a different fucking t-shirt was definitely something to look forward to, but we’d have to lose the warmth, the friendly service and the prices..

Australia is definitely on the cards…