If you care at all about developing good websites, then you test on platforms other then the one you chose. These days, this includes mobile and tablet devices. I’m lucky with my latest projects, the target browsers are FF6+, Google Chrome, Safari 5 and iPad iOS5.

I usually host sites I’m developing locally, a simple LAMP setup. I then add a pseudo-domain to my hosts file /etc/hosts along these lines:

127.0.0.1       portfolio.dev
127.0.0.1       blog.dev

This is all well and good when I’m accessing the server from my own machine (which relies on this host file before DNS servers), but when inside a VM (Virtual Machine, I use VirtualBox running Win XP/7 and Ubuntu) testing, you have to mess about doing the same hacks to the windows/linux hosts file, and working out what the IP of the host OS is. I got sick of doing this.

And to top this off, when I got an iPad for testing, upon realising there is no hosts file, had to find another solution. This is where a local proxy server comes in. I’ve used Charles: Web Debugging Proxy for years. It’s perfect for inspecting requests and responses, can handles many types of data, AMF, JSON etc. Basically, it makes web application development a hell of a lot easier!

I then googled a bit, and found that if I set an HTTP proxy on the iPad, it would route DNS requests through there too. So the hosts file on my development machine, would work on the iPad!!! Simply start up Charles, then go to your WiFi settings on the iPad and configure the HTTP proxy. By default, Charles uses the port 8888.

You can also add these settings in any Virtual Machines you’re running on your machine. I’ve tested this in Windows XP and Windows 7 running on Virtual Box. If anyone tests this on Parallels, please let me know if it works.

Here’s some example configs on iPad and Windows 7 running in Virtual Box.

When the document is ‘ready’ call takeoverloader() on jQuery results (desired DOM elements). In my case I used $(document). It will then track all img elements in the children of your chosen element and report progress and completion of the loading process.

It will ignore img tags with an empty src attribute, or a class of .noloader

So you’re initial code would be something along these lines:

$(document).ready( function() 
{
	// hide content div (UI being loaded)
	$('#content').hide();
	// takeover the loading.
	$(document).takeoverloader( {
		progress: function( progressAmount ) // called each time an item is loaded
			{
				// do something with progressAmout (normalised)
				$('.loadprogress').text( Math.round( progressAmount * 100 )+'%' );
			},
		complete: function() // called when loading is finished
			{
				$('.loadprogress').hide();
				$('#content').fadeIn();
				// etc
			}
		}
	);
 
	// To forcibly remove events, call 'destroy'
	$(document).takeoverloader( 'destroy' );
});

It’s up on github, and there’s also a minified (google closure compiled) version in the repo too.

Links:
http://github.com/pixelbreaker/pixelbreaker_jquery/tree/master/takeoverloader

It not a ‘real’ compiler, it doesn’t produce machine code, but it not only shortens your code, such as variable names etc, it also optimises it, to make it more efficient.

1
2
3
4
5
6

//before closure compiler
var settings = { maxZoom: 6, gridSize: 65, styles: clusterStyles };
if( !!markerClusterer ) markerClusterer = null;
markerClusterer = new MarkerClusterer( map, markers, settings );
// after
j&&(j=null);j=new MarkerClusterer(map, markers, { maxZoom: 6, gridSize: 65, styles: clusterStyles } );

It also works out that the clusterStyles object is only ever used once (in the constructor of MarkerClusterer) so it moves the object itself to be inline in the constructor call. It’s all very clever, and hasn’t broken a single bit of .js (yet!).

my jscompile.sh looks like so:

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
72
73

#############################################################
# JAVSCRIPT COMPILE SHELL SCRIPT							#
# Written by Gabriel Bucknall (gabriel@pixelbreaker.com)	#
#############################################################
# optimisation="ADVANCED_OPTIMIZATIONS" # USE WITH CAUTION
# optimisation="SIMPLE_OPTIMIZATIONS"
 
compile_js_one()
{
	inputpath="../deploy/public/_includes/js/"
	outputfile="../deploy/public/_includes/js-compiled/all.js"
	files=( "constants.js" "sitemap.js" "sitedata.js" "siteintro.js" "siteform.js" "sitegallery.js" "deeplinking.js" "sidebar.js" "init.js" )
	filesin=""
 
	echo "--------------------------------------------------------------------------------------------"
	echo "compiling files in "$inputpath" to "$outputfile
	echo "--------------------------------------------------------------------------------------------"
	for i in "${files[@]}"
	do
		filesin=$filesin"--js="$inputpath$i" "
		echo "compiling "$i
	done
 
	java -jar compiler.jar $filesin--js_output_file=$outputfile --compilation_level SIMPLE_OPTIMIZATIONS #--externs ../deploy/public/_includes/js/externs/externs.js --externs ../deploy/public/_includes/js/externs/jquery-externs.js --externs ../deploy/public/_includes/js/externs/googlemaps.js
	echo "compiling complete."
}
 
compile_libs_one()
{
	inputpath="../deploy/public/_includes/js/library/"
	outputfile="../deploy/public/_includes/js-compiled/libs.js"
	files=( "jquery.address-1.4.js" "jquery.easing.1.3.js" "jquery.jcarousel.min.js" "jquery.jscrollpane.min.js" "jquery.mousewheel.js" "jquery.simplemodal.js" "jquery.uploadify.v2.1.4.min.js" "markerclusterer.js" "modernizr-1.7.min.js" )
	filesin=""
 
	echo "--------------------------------------------------------------------------------------------"
	echo "compiling files in "$inputpath" to "$outputfile
	echo "--------------------------------------------------------------------------------------------"
	for i in "${files[@]}"
	do
		filesin=$filesin"--js="$inputpath$i" "
		echo "compiling "$i
	done
 
	java -jar compiler.jar $filesin--js_output_file=$outputfile --compilation_level SIMPLE_OPTIMIZATIONS
	echo "compiling complete."
}
 
case $1 in
	JS) 
		compile_js_one
		;;
 
	JS_LIBS) 
		compile_libs_one
		;;
 
	ALL)
		compile_libs_one
		compile_js_one
		;;
 
	--help)
		echo "Use one of the following options"
		echo "JS		Compile the JS group of files"
		echo "JS_LIBS		Compile the JS_LIBS group of files"
		echo "ALL		Compile all file groups"
		;;
 
	*)
		echo "add --help parameter for help."
		;;
esac
exit

This takes all the specified files and compresses the hell out of them, then outputs them to one file (for each group I’ve set up). Some libraries wont compile though, such as shadowbox, as it’s already been compiled via Yahoo’s YUI system, and seems to break after closure compiler has tried to rebuild it. I then serve them to the client via Minify to make sure they’re even smaller, and gzipped where applicable.

Please have a go and let me know if it works ok on Snow Leopard, and also older OSes, if there’s problems, comment here, and I’ll try and rectify any issues.

You can download it here.

They are re-writes of my current javascript extensions to SWFObject. One for full browser flash with a minimum width and height. And an updated version of the MouseWheel enabler for Macs.

I’ve gone for jQuery as I’ve been using it a fair bit recently with jQuery SWFObject, and it’s super easy to work with.

Here’s an example of a full browser flash object, with a minimum width/height. The best thing being that there is no requirement for fiddly CSS to make the full browser view work, the CSS is all implemented by jQuery!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

$(document).ready(function () 
{
	// add an extra class to the <body> element for JS-only styling
	$("body").addClass("js");
 
	$.flash.expressInstaller = '_includes/expressInstall.swf'; 
 
	if( $.flash.hasVersion(9.1) )
	{
		var mainFlash = $.flash.create(
			{   
				swf: 'FlashApplication.swf',
				width: '100%',
				height: '100%',
				id: 'FlashApplicationSwf',
				name: 'FlashApplicationSwf'
			}
		);
		SWFAddress.setId('FlashApplication');
		$('#flashContent').html( mainFlash );
		$('#flashContent').fullFlashMinSize( 800, 600 );
	}		
});

pic after the jump…

Ed Kauffmann over at RayFlex has been busy developing the iPhone release of the PolarClock. It’s now ready and released at version 1.0. If you buy this application you will get free upgrades to future versions. Money raised from the sales of the iPhone version will go towards further development of both the iPhone and Mac/PC versions of the PolarClock.

It has a few new features, my favourite being the moon phase at the centre of the concentric rings. Good work ed.

You can get a copy here:

Myself and the top notch team of internet professionals at Poke have just finished this monster project, check it out. It’s mental.

There’s now two examples in the zip, one for use with SWFObject 1.5, and a totally re-written version for use with SWFObject 2.0 (formerly SWFFix)

All you have to do in your main application class (or document class) is

1
2
3

import com.pixelbreaker.ui.osx.MacMouseWheel;
 
MacMouseWheel.setup( stage );

You can then add listeners to TextFields, Sprites etc etc as you normally would any other MouseEvent.

Example JavaScript to be used with the dynamic embed method

1
2
3
4
5
6

var vars = {};
var params = { scale:'noScale', salign:'lt', menu:'false' };
var attributes = { id:'testObject', name:'testObject' }; // give an id to the flash object
 
swfobject.embedSWF("test_as3.swf", "flashContent", "100%", "100%", "9.0.0", "js/expressInstall.swf", vars, params, attributes );
swfmacmousewheel.registerObject(attributes.id);

I have updated the SWFObject 2.0 version to be more compact, and it also falls inline with the code style of SWFObject2.0. see swfmacmousewheel_src.js for the uncompressed version, deploy swfmacmousewheel2.js on your site.

Download source and demo here or view the demo online

It returns the memory currently being used by the Flash Player. It’s in bytes so it pays to clean it up slightly.

[as]
var mem:String = Number( System.totalMemory / 1024 / 1024 ).toFixed( 2 ) + ‘Mb’;
trace( mem ); // eg traces “24.94Mb”
[/as]

It seems this takes account of all instances of the flash player. For example, I have a logger/debug panel running in the sidebar of firefox, built in flex. As soon as I open this and it’s initialised, it uses an extra 5 – 10mb of ram. So be warned, if you see a massive increase in memory usage, check you don’t have loads of sites open with ad banners or other flash based stuff.