The cool thing about being able to work at Massive is that you straddle the extreme technical end of making things scale, in the web 'C10k problem' sense, combined with the demands of the general public TV audience.

It combines both of my passions for the hard core Computer Science of making machines work at optimum capacity, providing developers with a simple and sensible API while also involving my eternal pathological psychological passion for the creation of an intuitive interface that combines the essential ingredients of a compelling first impression and the fugue that comes with immersion.

At Massive we are fortunate enough to get to combine web technology with the world of mass entertainment which puts us a little bit closer to Hollywood.

Or in this case Cannes.

Yes. We have been nominated for another Emmy, which makes that two Emmy nominations in a row.

http://www.iemmys.tv/awards_nominees.aspx

Check out the V8 Supercars Showreel if you want to get an feel for what the site is all about and what it delivers to viewers.

Anyone who knows me personally knows that the V8 project has been one of my focal projects for the last 3 years. Many a person has been denied my weekend company because I have been devoted to making such an awesome system and concept work. I've blogged about algorithmic success and the trepidation of designing a new version. Sometimes its all for Science!

The BigPond V8 broadband site combines live streaming, PVR time-shifting and the synchronisation of disparate data sources to bring together a coherent behind the scenes in the car narrative to the end consumer. I have loved working on this project so very much and I'm really chuffed to get this recognition.

Of course this was a team effort, with many other people involved in the project at Massive working in Design, Flash and Project management. Without many others at Massive and some of the brilliant people at BigPond and Chief Entertainment this project would not have been possible.

Check out the Massive Showreel as well if you want to get a feel for the kind of projects we work on at Massive.

Adobe is planning to release a security update for Flash Player 9 in April 2008 to strengthen the security of Adobe Flash Player.

This security update will make the optional socket policy file changes introduced in Flash Player 9,0,115,0 mandatory.

• A socket policy file will always be required for all socket connections
• A policy file will be required to send headers across domains.
• The allowScriptAccess default will always be "sameDomain"
• javascript:" URLs will be prohibited in networking APIs, except getURL(), navigateToURL(), and HTML-enabled text fields

This is probably a good thing, but I am expecting a lot innocent flash applications to get stuck in the crossfire if their developers are not prepared  or are not aware that their application will be nobbled by this update.

There was a bad cable when we moved the servers around. All is good now.

Thanks to the people who pointed this out, unfortunately I was was so busy I didn't get to attend to this for a week.

Now the bad news. Everything is going down again this weekend due to a major change to the power in the building - the good news is that this is the last of the major infrastructure changes and things should then settle back down again.

After that should have some really cool stuff to start demoing.

This solved the issue I was having with MSXML not parsing XHTML as XML without an xml-declaration - which is the only format that Microsoft Expression Web will auto-detect as XHTML without forcing it to fail over to it. ([menu] Tools > Page Editor Options > Authoring > Secondary Schema = XHTML 1.0 Strict).

I coded up a simple test case

Normally for all things XML in Javascript I have a handy lib that normally abstracts this away for me but for a test-case I'm staying close to the metal.

var l_xml_document = new ActiveXObject("Msxml2.DOMDocument.3.0");
l_xml_document.async = false;
l_xml_document.validateOnParse = false;
l_xml_document.resolveExternals = false;
l_xml_document.load(p_file);

I'll run through each line

var l_xml_document = new ActiveXObject("Msxml2.DOMDocument.3.0");

This creates an Object which is IE's version of the W3C standard DOM Document. I ask for the MSXML 3.0 DOM Document by name because its the default for "Msxml2.DOMDocument" . This means I'm not going to get any surprises if the default goes to v6.0 and it changes behavior. V3 seems to be installed on all Windows machines by default. From memory it came as part of IE5.5

l_xml_document.async = false;

This disables asynchronous mode - in this case I'm happy to wait for the file to arrive

l_xml_document.validateOnParse = false;

This was the clincher - without setting validateOnParse to false I was unable to parse XHTML in the following format (which is valid XML - the xml-declaration is optional according to the w3c spec)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en"><head></head><body></body></html>

I needed to add the xml-declaration at the start.

<?xml version="1.0" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en"><head></head><body></body></html>

When I did add the xml-declaration I had to force Microsoft Expression Web to fail-over this as XHTML, it would not detect it.

Using either the 'xml-declaration' or 'validateOnparse set to false' workarounds, DOMDocument was very slow to load the XML, which brings us to the next line

l_xml_document.resolveExternals = false;

This prevents Msxml2.DOMDocument from trying to load and DTD's and validate your code. This can take 5 seconds per request - so you really don't want this unless there is a real danger that the XML you get back will be not conform to XHTML.

l_xml_document.load(p_file);

Load it. Not explaining this.

Hope this helps someone. Special thanks to John-Daniel Trask and Chris Bentley who commented on my original post.

http://simonwillison.net/2006/Jun/26/libraries/

http://dean.edwards.name/weblog/2007/03/rules/

http://erik.eae.net/archives/2005/06/06/22.13.54/

http://bob.pythonmac.org/archives/2005/07/01/javascript-frameworks/

http://blog.metawrap.com/blog/WhyIDontUseThePrototypejsJavaScriptLibrary.aspx

If at the end of this you still want to use a library that adds slots to the built-in Objects please send me your name so I can avoid hiring you or using your library.

The BigPond V8 Supercars 2007 application that has kept me away from regular sleep/blogosphere/fun for the last few months is rapidly shedding its "Beta" status.

Here is a video WMV, QuickTime, QuickTime HUGE. The App runs at 25fps, so this 10fps screen capture does not really do it justice.

The application is written in JavaScript and uses Flash elements as a 'dumb' display terminal. This provides a simple and highly reactive coding environment coupled to lovely anti-aliasing and scaling via Flash. Each of the panels are detachable (and soon drag/swap-able) and can be made to detach, re-size and go full screen, so if you have multiple monitors, you can really have a good time :)

I've been waiting for Emerson Clarke to GPL this library since he started sending me code samples via IM a few years ago.

If you really want to squeeze every last nanoflop of performance out of your hardware then you need to turn to languages like C and C++, or if you have a lot of time on your hands, and a large beard, assembler.

There is a reason that these languages are the mainstay of the games development industry.

If you want to generate the fastest Ruby extension possible without having to worry about how you are going to install libraries for HTTP, XML, XPath, SQL, multithreading and file system access (to name a few) then I suggest you check this framework out.

If you want to take on Google and build the greatest number crunching data analysis farm in the world, then its perfect for that too.

Reason is a wonderfully easy to understand cross platform C++ framework. The code is very readable and amazingly well commented.  

Disclaimer: I used to work with Emerson at Massive before he joined Thoughtworks and then went on to storm the world developing industral scale C++ applications.

Great post on what a good JavaScript Library should have/not have.

"After spending about three weeks finishing a chapter of the upcoming book introducing JavaScript libraries to non-developers I was quite amazed how tough it is at times to use different libraries.

It was frustrating putting together a set of example scripts for several effects for the oddest reasons, which is why I am now publishing my wishlist for any JavaScript library developers or maintainers. Before you start a new library or expect people to be able to use yours immediately you might want to give these points some thought. For library users this list might be a good “heads up” to see how much work has to go into using a library or how to pick the right library for the job at hand.

Here’s what drove me nuts:"

http://www.wait-till-i.com/index.php?p=366

And here is an interesting referring post.

http://domscripting.com/blog/display/92

For those who have suffered through my detailed answer to the question "so what have you been working on lately?", here is a simple progress report in pictures. No doubt it makes as much sense as my addled answer, but I assure you its a Very Good Thing^TM.

There Is A New Version Available - Click Here

Update: I just fixed 2 bugs - one handle leak and a bug that could stop it from scanning serial ports. Seems I left in some debug code on both counts.  If you downloaded this in September, then download it again - its been updated.

Here (Download) is the latest version (Build 8) of the MetaWrap time converter which replaces the previous version (Build 7)

This build fixes some reported bugs in the timezone data and adds a major new feature - GPS integration and a GPS API accessible via AJAX, JSON, CSV and UDP.

If you enable the GPS menu option the application will lock onto an authoritative GPS source. Either a standard serial port/USB style NMEA 0183 gadget attached to your computer or a device that broadcasts NMEA 0183 over UDP that is plugged into your local network. The application will auto hunt for the hardware, no configuration is required.

If it finds an authoritative GPS source it will rebroadcast it for other time-converters to receive. These other time-converters don't need to have GPS enabled - they will simply pick it up off the local Ethernet segment.  You will be UDB broadcasting your location and IP address if you enable GPS, for most cases this should not be a problem as it will only be broadcast to your local area network. If you are on a cable network that enables UDP broadcasts then you may want to firewall UDP port 7305.

Your location will be tracked on the time-converter world map (above) with a small dot. If its salmon colored then its receiving GPS data, but the GPS quality is 0. If its green it has a quality or 1 or higher.

Three APIs are provided.

1) A Windows COM service is provided, so once the time-converter is installed, if a web-page in IE tries to access the "MetaWrap.TimeConverter" Object, the executable will be automatically launched.

2) For web-browsers such as Firefox and Opera, an HTTP service is provided via localhost which can be accessed via AJAX or JSON. This is designed to be backwardly compatible with the MeHere API.

Comma Delimited- http://localhost:7305/csv

JavaScript - http://localhost:7305/js

XML - http://localhost:7305/netlink

Google Earth - http://localhost:7305/kml

I'll add more of these formats on request.

3) The third API isavailable on UDP port 7305 . The application will broadcast its current known GPS location as a string.

This test page will test the values being put out by the time-converter via the COM interface.

This test page will integrate with Google maps and track you as you move about.

Mike Cornelius was able to use a fast 3G data modem and this example code/testcase to track himself driving from Sydney to Wollongong.

Test pages for the AJAX and JSON code are under construction - but most JavaScript coders should be able to figure it out for themselves.

To upgrade you can either,

In short - externalInterface is the work of the devil.

There are others that have a low opinion of it.

• "In general, whoever coded ExternalInterface should be fired."
• "ExternalInterface bug (Firefox)"
• "ExternalInterface Bug in Flash Player 9"
• "The official Adobe Buglist"

So far the issue I have found seems to affect the interaction between Windows Media Center, FlashPlayer 9.16.0  (FlashPlayer 8 does not have the issue) and Flash SWFs that use externalInterface.

But there is a solution.

externalInterface is much nicer than fsCommand but suffers from some of the same problems when it comes to adding Flash to a page dynamically. In a previous post I have outlined a workaround.

The issue with externalInterface is very different which seems to center on that fact that it injects its own JavaScript code into window.parent

If you have seen the movie Terminator, there is a scene where Arnie walks up to biker and punches him in a chest and pulls out his still beating heart. Imagine that played back in reverse and you have a fair idea of what FlashPlayer 9 does to the browser.

eg

  // Look for the 'standard' functions that flash adds to window.parent
  if (window.parent.__flash__toXML != null)
  {
   alert("window.parent.__flash__toXML exists");
  }
  else
  {
   alert("window.parent.__flash__toXML not there");
  }

Windows Media Center runs HTML applications in a shell of IE.  It's IE plus a series of objects that you can script against to do MCE specific operations. It also behaves differently to IE in one critical aspect.

In WMC, when running an application, if you play a movie full screen or use one of the hot keys to browse forward, including the magic green button and then at a later time browse back to the application by hitting the "BACK" button, the BODY.onload event fires again.

In an application that has no embedded Flash SWFs this can be handled in JavaScript by setting a simple flag - but if your application embeds SWFs that use externalInterface and you have FlashPlayer 9 installed - your SWF dies. You get a white screen of "not really there". The SWF is still running. It's still able to call into JavaScript, but you can't call it and there is no way to make it start displaying again.

This does not happen with the FlashPlayer 8. Something has changed. Either the window.parent fisting is broken, or FlashPlayer 9 listens to BODY.onload and is doing something extra that is just not kosher for WMC.

I suspect that in WMC, window.parent may be something other than what FlashPlayer9 is expecting. I'm still exploring the specifics of this.

The solution is to give Arnie a cardboard cutout to insert its giblets into and that can be achieved by embedding your SWF or even your whole application in an IFRAME. This guarantees that window.parent, if called from within the IFRAME is the document that embedded the IFRAME.

Arnie shoves his fist from the IFRAME into your parent document, and not somewhere unexpected.

I'm working on an addition to the MetaWrap JavaScript libraries that will include a lot of WMC support, in particular for remoting applications and dealing with flash. Will post and update when its released.

Topic says it all.

http://www.isoma.net/games/goggles.html

"Aptana is a robust, JavaScript-focused IDE for building dynamic web applications. Highlights include the following features:

• Code Assist on JavaScript, HTML, and CSS languages, including your own JavaScript functions
• Outliner that gives a snapshot view of your JavaScript, HTML, and CSS code structure
• Error and warning notification for your code
• Support for Aptana UI customization and extensions
• Cross-platform support
• Free and open source. (Source available soon)"

http://www.aptana.com/

 

"Timeline is a DHTML-based AJAXy widget for visualizing time-based events. It is like Google Maps for time-based information. Below is a live example that you can play with. Pan the timeline by dragging it horizontally."

http://simile.mit.edu/timeline/

"Slightly ThickerBox is a modification of Cody Lindley's Thickbox script. I modified it for use on my Jason's Toolbox Redesign. The modifications allow the script to generate "Previous Image" and "Next Image" links. The result is that you can use Slightly ThickerBox to create image galleries. In addition, you can create groups of galleries by setting a "rel" attribute on the links. (I also moved the Caption and Close link to the top and made the script case insensitive.)"

http://www.jasons-toolbox.com/SlightlyThickerBox/

Cool Google IG style JavaScript widget.

http://ajaxian.com/archives/echo2-widget-panel

"The World Wide Web consortium’s (W3C) CSS working group recently released a draft of a new multi column layout module--to be included (with possible modifications) into the CSS 3  specs.  For those web developers that have been lamenting the lack of adequate multi column support in current supported versions of the CSS specs, this is an exciting and welcome addition."

http://blogs.pathf.com/uxd/2006/07/multi_column_la_1.html

"Ever wanted to match the look of your HTML forms with the rest of your website? This article demonstrates how to apply customized backgrounds to HTML forms, while preserving stucturally clean markup and accesibility."

http://www.picment.com/articles/css/funwithforms/

"The use of embed has gone on too long. Wishing for it to become part of the official specs is like wishing your partner would start putting the cap on the toothpaste. It’s not going to happen. It’s time to move on. If you want to validate your website, you have to get rid of embed. In this article, I’ll show you how."

http://www.alistapart.com/articles/byebyeembed

'Every once in a long while, I read about an idea that is a stroke of brilliance, and I think to myself, "I wish I had thought of that, it's genius!" Microformats are just that kind of idea. You see, for a while now, people have tried to extract structured data from the unstructured Web. You hear glimmers of these when people talk about the "semantic Web," a Web in which data is separated from formatting. But for whatever reason, the semantic Web hasn't taken off, and the problem of finding structured data in an unstructured world remains.'

http://www-128.ibm.com/developerworks/library/x-microformats/?ca=dgr-lnxw01Microformats

"JavaScript is hip again; there’s no doubt about it. But if you’re starting to get down and dirty with it, there’s no excuse not to keep it clean."

http://www.thinkvitamin.com/features/dev/the-importance-of-maintainable-javascript

"A little bit JavaScript, a little bit CSS and a little bit clairvoyance, Link Thumbnail shows users that are about to leave your site exactly where they're going. When that curious mouse pointer hovers over a link pointing to somewhere outside of your site, the script displays a small image of the destination page. It's a nice visual cue that serves a very real purpose: providing a clearer picture (no pun intended) of what's ahead."

http://lab.arc90.com/2006/07/link_thumbnail.php

"The Javascript Sound Kit is a wrapper around the ActionScript Sound Object, it makes it possible to use the Sound Object in Javascript the same way you do it in ActionScript."

http://jssoundkit.sourceforge.net/

"Rails must be spoiling me. Every time I have to write ugly code, I wonder: could the language be different?

I wondered just that about CSS while making some Backpack Calendar styles work across browsers. Hacks are ugly. What if I could just type a special selector, based on the name of the current browser?"

http://37signals.com/svn/archives2/browser_selectors_in_css.php

"One drawback of working with AJAX is that an AJAX-based client cannot make calls to URLs outside of its domain, which means that it cannot access services located on another server. A technique such as JSONP can help in this regard, but it has some limitations.  One limitation is that including third-party JavaScript inside script elements exposes your application to potential security risks because you are allowing external parties to interact with your client.

To overcome these problems, you need a generic proxy that can communicate with external services on your client's behalf. The proxy passes a call from your client application to the service, receives the content in response from the service, and returns the content to your client. You can then use this content in your AJAX-based application."

http://weblogs.java.net/blog/gmurray71/archive/2006/07/the_xmlhttpprox_1.html

"Which New Browser Is Best: Firefox 2, Internet Explorer 7, or Opera 9? "

http://www.extremetech.com/article2/0,1558,1990850,00.asp

"Web applications are becoming more and more like “normal” desktop applications. Of course, they are more and more functional, but smooth user interface acts the primary role. So we have drag and drop, autocompletition, and much more. Many of those nice features got possible only with help of AJAX.

This page, however, is not about AJAX (or any other buzzword). It is about rather simple user input method -- mouse wheel. I believe it would now be difficult to find a mouse without wheel. Vast majority of users are used to the wheel as a control for scrolling in lists, zooming etc. Rather few web applications, however, make smart use of mouse wheel. This page is to provide you with general information about handling mouse wheel-generated events in JavaScript programming language"

http://adomas.org/javascript-mouse-wheel/

"JavaScript malware is opening the door for hackers to attack internal networks."

http://it.slashdot.org/article.pl?sid=06/07/30/0547227&from=rss

ClickTale shows you the full story: every mouse movement, every click and every scrolling action. By using ClickTale you will gain insights that will improve your website's usability, enhance navigation, and increase effectiveness.

http://www.clicktale.com/

Something that looks scarily like my Open Source JavaScript Macro Recorder but with a snazzy front and back end.

Something like this would probably make a good proof of concept application for my XML Storage server so I may build a white screen version of this in the near future as a test application.

I was in the middle of building something like this as a demo for my XML storage server, looks like several people beat me to it. Looks like they applied for a patent only to find that there is lots of prior-art.

"A little while back I had an idea about how it might be possible to build a massive grid computer harnessing the power of the transient Internet user population. In essence the idea was to use the almost universally deployed JavaScript runtime embedded in modern web-browsers to perform small processing tasks which are part of a larger distributed processing algorithm (I can just hear those bozo bits flipping)."

http://www.gridenvy.com/

"Apollo is the code name for a cross-operating system runtime being developed by Adobe that allows developers to leverage their existing web development skills (Flash, Flex, HTML, JavaScript, Ajax) to build and deploy Rich Internet Applications (RIAs) to the desktop.

While a number of more traditional desktop applications can be built and targeted at the Apollo runtime, Apollo is targeted at making it easy to develop and deploy Rich Internet Applications to the desktop.

It is this use case, deploying RIAs to the desktop, which is driving the feature set for Apollo 1.0. "

http://labs.adobe.com/wiki/index.php/Apollo:developerfaq

AJAX done well can reduce server load and bandwidth, but I've seen a lot of people jumping on the AJAX bandwagon who don't really consider what the impact is on the back-end.

Done badly, AJAX can bring a server to its knees.

If you are writing an AJAX application and you have never heard of  "/dev/poll" or the "thundering herd problem" then you really ought to smarten yourself up by reading this, and if you don't understand that post then read the rest of this one..

The issue in a nutshell relates to one of the great dirty secrets of the Internet and the operating system wars.

When the Internet burst forward, every man and his operating system provider built a web-server on top of the file IO handling of their current OS kernels. These kernels having being optimised generally for word-processing, volume, speed, but not lots of tiny little requests in parallel.

"Lots of tiny little requests in parallel" - sound like anything you know?

Only one company got it right the first time, and that was Sun, because Solaris 2.7+ had poll() and /dev/poll. This is one of the reasons people used to rave about the performance of Sun and Solaris.

Windows let you handle a whole maximum of 64 connections in one go, to do anything better, you had to perform your own magic.

The majority of the operating systems were awful at handling the one thing that web-servers need to perform well, and that is reading and writing data from a lot of simultaneous connections, or more specifically, knowing when to read and write.

Every time you use a XMLHttpRequest object in your AJAX code, you can, if you don't know what you are doing, create a new TCP/IP connection on the remote server.

The remote server may still have the previous connections in a wait state of some kind. These can build up over time and all of a sudden your server gets sluggish or starts rejecting connections. This can be less of a /dev/poll issue and more of a lack of system resources - but the cause is the same.

Oh The Humanity!

As a general rule, naively configured servers start to have a hard time at a few hundred connections - after that you start to degrade rapidly, the scalability curve can be brutal.

Here We Go Again!

If the above makes no sense to you because all you do is front-end and want to AJAXify a site - then here are some general rules.

#1) Don't try heavy AJAX on a server that does not support HTTP1.1.

The killer feature of HTTP1.1 is that it implicitly uses one socket connection for multiple http requests. So your entire impact on a server can be one connection per user. This behavior is explicit in HTTP1.0 via specifying the KeepAlive header.

Almost all modern servers use HTTP1.1, but its nice to make sure.

#2) request.setRequestHeader("Connection", "close");

Don't use it unless you know what you are doing. This will force a close of the connection. This is fine if you just make one request. But if you have a large number of requests per user session (auto completion for example) then your service can fall over after a few minutes of just one user typing away.

On modern browsers, XMLHttpRequest  is clever and even if you create and destroy your XMLHttpRequest connection object, it will still keep and reuse your current connection to the server.

#3) Hire someone who knows what they are doing

Humans suffer permanent damage when accelerated above 20G... stay with me on this one..

If you want to stick the AJAX rocket onto your server, maybe you need a rocket scientist?

Get someone who knows how to make a server sing, especially if you are about to increase the number of requests its going to get. If you can find someone who installed the /dev/epoll linux kernel patch when it first came out, then you may be onto a winner.

If you don't know what you are really doing, at least use an AJAX library that is written by someone who does.

"I decided to make a list of the top libraries that I have come across or that I personally use. Libraries can be a web developers best friend. They are great resources to learn from and can save hours and hours of time. These libraries include JavaScript, Ajax, Colors, PHP, and CSS. These should be in any web developers bookmarks, so go ahead and look through these libraries and bookmark your favorite ones. The list is in no particular order."

http://www.cameronolthuis.com/2006/06/top-10-web-developer-libraries/

"The major web browsers are getting facelifts as they increasingly become the focal point for handling business transactions and running programs over the internet rather than simply displaying websites."

http://www.wired.com/news/technology/0,71204-0.html?tw=rss.index

Cross browser "window.onload" solution - now supports Safari.

http://dean.edwards.name/weblog/2006/06/again/

"iBox is a lightweight script that lets you overlay images, divs, and HTML on your current page. It is damn easy to install and setup."

http://www.ibegin.com/blog/p_ibox.html

http://www.subdevide.com/portfolio/drop-shadows-with-css/

http://www.designdetector.com/link/to/ten-common-css-mistakes/

Sudden publicity for using flash as an XML data-source connector to replace XMLHttpRequest. Should I mention that the MetaWrap project introduced this into its Xml action library over a month ago? :) (testcase)

http://www.fjax.net/

http://incito.lt/index.php#/gateways/go.php?to=products/swfjax

Google AJAX API for search

http://code.google.com/apis/ajaxsearch/

"JavaScript Libraries: Friend or Foe?"

http://simon.incutio.com/archive/2006/06/26/libraries

Safari JavaScript Debugger

http://webkit.opendarwin.org/blog/?p=61

"AJAX is a great tool for creating rich internet applications, however, when improperly implemented it can cause huge accessibility issues. The good news is that most of these issues can be fixed so your websites are viewable by a much wider audience. "

http://www.maxkiesler.com/index.php/weblog/comments/how_to_make_your_ajax_applications_accessible/

An oldie but a goodie - CSS text size zooming with working example.

http://www.deltatangobravo.com/archives/2004/september/zoomzoomzoom

Nothing could stop me from putting this off a moment longer.

Here is a screen recording of my JavaScript Macro Recorder in action.

Here is a test URL for a page that has the JavaScript code embedded. Works under IE and Firefox. Safari "Real Soon Now" :)

Add these two lines of code into your pages <HEAD> element and your page will be recordable.

<script src="http://js.metawrap.com/mw_lib.js"></script>
<script src="http://js.metawrap.com/mw_pkg_macrorecorder.js"></script>

Post a comment and tell me how long it takes to load please :)

Latest thing to hold me back from recording this was of all things a broken finger and on top of that two days ago I got the flu.

5 days after my sons birthday party which was jam chocked with rug-rats, I come down with something. Why am I amazed?

Next year every adult gets a complimentary hazmat suit.

Every time I bump into Rachel I seem to have the flu. So far this has been a good year. I've gone so well and been lucky enough to only have a few days off work. I would like to be at home in bed at the moment but work is too busy.

I've not really had a chance to do any fun coding in the last month in the volume I would like, but I have this Monday off to relax and noodle away. I have some fun wireless gear to play with :)

I want my children to grow up in a world when coding in JavaScript does not result in a fistfight.

Brendan Eich may have intended Arrays to be only numeric, but the reality is they do more, and people have explored and used them to the fullest extent.

It is arguable that people pushing the JavaScript envelope in this way have made Web 2.0 viable.

I won't blame people for being creative.

But now we have libraries that can't co-exist, libraries that come embedded with insoluble philosophies. 134 Ajax libraries and counting. Oh the huge manatee!

We have to lay down some ground rules or JavaScript is going bring some serious issues to the next generation of 'Internet Applications'.

Its a little like driving and everyone agreeing on the rules of the road. If we all do this, things will get easier. Its a form of best practice. Its not arbitrary. Its a realpolitik compromise that allows everyone to get most of what they want. Some people want to extend objects for reasons of syntax and performance, others want to keep them pristine to allow libraries to inter-operate.

I propose the following rules to allow us to move forward.

#1 - Don't use Object.prototype to extend the base 'Object'.

Feel free to play with any other builtin type. 'Array', 'Number', 'Boolean', 'Date', 'Regex',....  but leave 'Object' alone.

Dean Edwards sums it up best.

"Extending native objects is a good way to provide backward compatibility for older browsers (e.g. providing push/pop for IE5.0). If we can’t do this then we are stuck with only the basic features of the language.

Extending Object.prototype is another matter as then we are left with no object that we can use as a hash."

#2 - Don't use 'Array' for an Associative Array

Use 'Object' or people will come and take your Arrays away from you.

Anything that extends Array via Array.prototype will break for(in) loops. Because we are leaving 'Object' alone, we can use it as an Associative Object.

var x = new Object(); // var x = {}; will work too
x["a"] = "A";
x["b"] = "B";
x["c"] = "C";

It works. Try it. Now.

Now, I have seen lots of code in the wild that does use for(in) to iterate an 'Array'. It does seem to be a natural and forgivable thing for a programmer to do seeing the term is normally taught is "Associative Array", not "Associative Object".

Good reference sites give examples that use 'Array'.

We are choosing to stop this practice.

#3 - There are two types of Library 'Primary' or 'Secondary'

We are still going to have issues if two libraries choose to extend Array and add the same named method (eg. Array.prototype.sortbyname). The more likely pattern is that you are going to use a 'primary library' (prototype, dojo, yahoo etc...) with a group of other smaller scripts. (secondary libraries) that just do one thing well.

If you are developing a secondary library, avoid extending the base types. The primary library will enforce its philosophy via its extensions to the base types. A 'secondary library' should just do one thing well without having to change the fundamentals.

With the above guidelines we should be able to mix as main secondary libraries together as we want with at most one primary library.

Mixing primary libraries together is going to be hit and miss.

#4 - Port code that uses 'Array' for Associative Arrays

Port it to use 'Object', Send it back to the author with a link to this blog post.

Try using the new iterators that are built into JS1.5 and above.

The sooner that we fix these libraries, the better.

#5 - Write JavaScript Tools That Warn Of Rule Violations

Anyone writing JavaScript debuggers or JavaScript/HTML editors should add functionality to warn users if they see Arrays being used as Associative Arrays, or Object.prototype being used to extend Object.

Can anyone think of anything else or improve on the above please?

Thanks to Damian for pointing out this site.

Now that Google maps works properly in Australia, someone has built http://www.bikely.com/ a very nice Google Maps mashup that allows you to share your favorite bike route. 

The behind the scenes story is that it was the result of a 4 day marathon coding effort that started right after Google switched on street maps for Australia.

I love it. Simple, sweet, Does one thing very well.

Here is a screen recording of my JavaScript Macro Recorder in action.

Here is a test URL for a page that has the JavaScript code embedded. Works under IE and Firefox. Safari "Real Soon Now" :)

Add these two lines of code into your pages <HEAD> element and your page will be recordable.

<script src="http://js.metawrap.com/mw_lib.js"></script>
<script src="http://js.metawrap.com/mw_pkg_macrorecorder.js"></script>

Post a comment and tell me how long it takes to load please :)

I started writing this last year, finished it a few months ago and have spent the last few months tweaking and testing.

It is entirely written in JavaScript and does not need a proxy server of any kind.

You simply need to add a few lines of JavaScript to your page and a small text control panel is added to the page.

• [record] will start recording.
• [stop] will stop recording or playback
• [play] will playback the current macro.
• [fast] will play the macro back at faster than recorded speed
• [loop] will loop the macro
• [hide] will hide the control panel during playback

The control panel and the macro recorder itself is based around a simple plugin architecture. I have plugins close to completion that will load and save macros and record a suite of testcases of multiple macros across a whole site. 

I've also started on plugins that will transcode a recorded macro into Watir and Selenium formats.

Does not work under Safari, but there is no reason why it can't. Any Safari guns willing to help? More on that in the screen recording tonight.

Enjoy!

Simple and effective comic sketch (video) in which your browser plays a role.

http://www.circoripopolo.be/comicduo/

I wrote about this a while ago, but.. long story short... I'm getting ready to record an epic screen-recording of my Macro-Recorder developed in JavaScript.

It was clear that I needed the practice after the first test run.

So here is a screen recording of me demonstrating the MetaWrap logging class.

Short and sweet.

It was a long time coming, but on Feb 28 2006, Microsoft released a patch (KB912945) for the Eolas patent dispute that "breaks" Active X in Internet Explorer, which includes Flash on Windows XP and Windows Server 2003.

This only affects IE.

Firefox, Mozilla, Opera and the rest are not affected.

[Update 28/7/2006] - The new Opera 9 IS affected by this.

Opera Asking for Activation

Windows 2000 derivatives are not affected (yet) as a final decision on browser revisions for Windows 2000 is still pending. Luckily there is a simple JavaScript workaround for this patch. See my previous posting and workaround.

Because this first patch "broke" so many websites, Microsoft have also issued a "Compatibility Patch" (KB917425) that negates the Eolas patch until some time in June. "This Compatibility Patch will function until an Internet Explorer update is released as part of the June update cycle, at which time the changes to the way Internet Explorer handles Active X controls will be permanent."

This compatibility patch can prevent you from seeing the full effect of the Eolas patch. So, if you are a web developer and you want to know what the effect the Eolas Patch is going to have on the behavior of your site in IE, Make sure you don't have the Compatibility Patch installed!

It seems that it is possible to install the Eolas Update via an Automatic Update (KB912812) in such a way that the 'workaround' that Microsoft and Macromedia suggests does not function. I have encountered a small but worrying (given the sample size) number of machines with this issue.

I was able to install and then un-install the compatibility patch and all problems (see "The Whole Story" below) were resolved, for no apparent reason. See "Conclusions" at the end of this document.

How To Tell If You Have The Eolas Patch Installed

If you are running Windows XP, Open the "Control Panel" and then click on "Add Or Remove Programs" and make sure 'Show Updates' is ticked.

If you have the Eolas Patch, One of the following will be installed.

The KB912812 Security Update which contains the Eolas patch (KB912945)

Just The KB912945 Eolas Patch

The Whole Story

Now I previously blogged about the