Tag Archives: javascript

Chaining Asynchronous Methods in jQuery using the Queue

Someone recently asked me whether it would be possible to chain asynchronous events in JavaScript. After a little pondering, I figured out a way to do it with a simple queue. I thought this would be an awesome addition to chaining for a good few hours, until I remembered how jQuery did it, and that I’d recently used exactly that function. Continue reading Chaining Asynchronous Methods in jQuery using the Queue

JS Fireworks – in SVG

I’ve taken another look at last year’s Chrome Experiment, JS Fireworks.

This time I’ve rewritten it to use SVG, whose arrival in IE9 promises to make HTML more interesting. In fact, I’m far more excited about animated SVG than CSS transforms and the fabled HTML5.

I used Keith Wood’s jQuery SVG library, which seems quite helpful, and simply replaced the ‘draw line’ commands with their equivalents.

Canvas is the bitmap to SVG’s vector, so while I have to clear the screen and redraw each time in canvas, I merely need to move the lines in SVG. Presumably the number of shapes on screen affects performance, so that was a big difference.

Here’s the result: JS-Fireworks in SVG. I’ve reduced the number of items in each explosion from 30 down to 10. You’ll see why.

It runs very quickly in Chrome (Mac), slowly in FireFox, and smoothly, though not excessively quickly, in IE9, which I’m quite excited about. Where’s IE9 Experiments?

I haven’t tried IE678. But then I haven’t tried Mosaic either.

Building McLaren.com – Part 3: Reading Telemetry

I’ve just finished working on McLaren’s new F1 site, http://mclaren.com/home, for the 2010 season, at Pirata London, for Work Club.

I’ll be writing up what we’ve done here in several parts. Sign up for my RSS feed to keep updated.

Part three covers the JavaScript data for the telemetry panel, known as “The Race 1.0b”. Continue reading Building McLaren.com – Part 3: Reading Telemetry

Building McLaren.com – Part 1: HTML

I’ve just finished working on McLaren’s new F1 site, http://mclaren.com/home, for the 2010 season, at Pirata London, for Work Club.

I’ll be writing up what we’ve done here in several parts. Sign up for my RSS feed to keep updated.

First up, the HTML. The site design is brilliantly engineered for layout on the web. It’s clean, fresh and bold. No rounded corners or “web 2.0” gradients. Continue reading Building McLaren.com – Part 1: HTML

JS Fireworks

I’ve just submitted my Chrome Experiment – JavaScript Fireworks.
http://js-fireworks.appspot.com/

This amuses me because it’s such an old-fashioned idea. A bit like snow on your website, it’s a very nineties theme and I suspect I’ll have a lot of ex-Geocities users asking me how to include it on their pages.

I’m particularly pleased with the TinyURL inclusion, just for the hell of it 🙂 And I look forward to tracking the messages via Google Analytics.

It’s no revolution (some of those experiments are awesome), and it’s not very Chrome-specific. Firefox handles the canvas better now, and Safari is very fast. Should I use excanvas to support IE???
Anyways, I’m pleased with the effect.

Update (12 May 2009):
No response so far (snif). I saw some hits from California, and one message sent saying “Not Your Mother’s JavaScript” – which is the experiments’ tagline. Fingers still crossed.

Update (13 May 2009):
Some quick updates: IE support! Really shows off the awesome excanvas library. But it’s a bit slow. I’ve intentionally not reduced the activity in IE to show the performance difference. Also, changed the default message. 🙂
Also, allowed click events to bring up the window, so it’s a bit more useable.

Update (16 May 2009):

Added various controls to experiment with. Time and gravity controls are fun. Toyed with framerate and number of sparks sliders, but didn’t work out.

Update (21 May 2009):

Added credit for the font, which was a free font, BM Receipt, passed through Cufon Generator to get each point as a JavaScript array, then stripped back to remove the lines, leaving just the points.

JavaScript Mindmap

I’ve been writing a JavaScript Mindmap.
It’s got very few dependancies: Mootools is used for dragging and the $ and $$ shortcuts. Also, excanvas gives IE canvas support.
UPDATE: it now uses jQuery instead of Mootools.
I tried to make it use “good juju”, by using good semantics. Therefore, it just builds out HTML lists.

And it’s fairly easy to see how it works.

Not sure what to call it. Called it Mindmap, called it spidermap, called it js-mindmap again.
http://code.google.com/p/js-mindmap 

Demo:
http://kenneth.kufluk.com/google/js-mindmap/ 

The aim is to provide a nice example to play with, not for any commercial gain.

Check it out. Suggest improvements. Bleat about bugs. Put me down for my poor coding styles. Or otherwise ignore it 🙂

Cross-domain JavaScript to Flash

Ok, what we learnt last night:

If you move your SWF onto another server (eg, using a caching server, CDN or similar), and have JavaScript in the page calling the SWF, then it will fail.

First step, we added a crossdomain.xml to the CDN server.  It made no difference, and was not requested by the SWF anyway.
Useful fact:  you can see flash requesting crossdomain.xml in Firebug.

Second step, we added “System.security.allowDomain(“http://www.xyz.com”)” to the Flash.
Useful fact:  check the “content-length” in the response headers to see when the new file has been deployed – it took more effort to deploy than expected, and this was a lifesaver as we nearly dismissed this option.

The second step worked.

Useful fact:  even though the JS files were served from the CDN too, they were executed within the page, and so were executing on a different domain to the Flash.

Useful fact:  SWFLiveconnect was irrelevant.  We already had set allowScriptAccess to always in the params.  We used ExternalInterface to make the function calls available to the JS.

Useful fact:  The Adobe docs refer to the method as HTML->SWF, not JavaScript->SWF.

Useful fact:  we tracked the problem to a definite JS->SWF issue using breakpoints in the JS using Firebug.  Brilliant.  The JS call to the Flash returned nothing – it failed silently, but stopped the function.  Correct behaviours would have been to return “undefined” and continue to the next line.

Final note:  Someone who understands HTML, CSS, JS and Flash is not your weakest tech link.  They probably know the most about the many technologies on the Internet.  So, give them some days to test before you roll out something new like this.  The architects and Java guys won’t follow it – give the HTMLers the time, as they’re on the front line.