javascript

Somehow this slipped under my radar. Apparently both Mozilla and Webkit have gained experimental support for WebGL. WebGL is going to expose OpenGL ES 2.0 (the same version of OpenGL you find in an iPhone) in JavaScript to be rendered inside a canvas tag. This is without a doubt, the most exciting thing to happen for web-based games ever. It ends up being a standards based, platform agnostic, hardware accelerated rendering method bundled as an extension to JavaScript, using a tag that is already part of the HTML 5 standard.

This is a huge piece of the puzzle that is going to allow the creation of web-based 3D games that can take advantage of hardware acceleration. So which pieces are missing? Not too many as it turns out. New implementations of JavaScript in both Firefox and Safari are very fast, making render loops and input capture entirely possible within the browser window. Video and audio have both got standards support in HTML 5. The only thing I can think of that’s missing is server initiated communication and peer to peer networking that would be necessary for real-time multiplayer games. Yeah you can poll a server making it possible to have multiplayer turn-based games or even real-time games where latency isn’t an issue. For 3D shooters and MMOs however, I would wager the networking piece is still mighty important.

Can’t wait to get my hands dirty with this stuff.

It turns out that my favorite JavaScript library has a rather weird chink in its otherwise impregnable armor. The Form.Serialize method makes a complete hash (no not an object hash, a right royal mess kind of hash) of serializing radio buttons. Google of course came to the rescue with this very excellent fix from Rex Chung.

This works great if you’ve got one set of radio buttons, I had an unknown number to deal with. So here is a slightly modified version that uses Prototype’s findAll:

Form.getInputs('formName','radio').findAll(function(rad){ return rad.checked; }).each(function(rad) {
     //Deal with each radio button here by referencing the method argument "rad"
     alert(rad.value);
});

Works like a charm.

IE7 has shipped and its probably (by and large) a decent browser now. But of course it wouldn’t be Microsoft if they didn’t mess up something. First in what will probably be a long line of security related “features”, Microsoft have decided to modify the way that the good old JavaScript prompt works.

The reason? Phishing sites impersonating or even superimposing themselves on real web sites were using the prompt to lure gullible users into providing credit card numbers, passwords and all sorts of powerful data. So now whenever a web page wants to use a prompt you have to click on the unnoticeable security bar at the top of the browser and “allow” temporary access. To make matters worse the prompt presented is ugly and out of place.

I’m not saying that a prompt is the best way to ask the user for data, but given the whole Web 2.0 movement there are numerous occasions where the prompt is a useful and elegant solution to on-the-fly input. The worst part is that the unscrupulous underbelly of the internet will end up using a modal window or a clever floating div about 15 seconds after they realize their old technique doesn’t work and then who loses? Why, the web 2.0 programmer that thought a JavaScript prompt was a no-brainer in terms of cross-browser support.

Phishing works because people are stupid, making your browser idiot-proof is a surefire way to drive yourself crazy.

Score one for stupidity.

Started messing with the most excellent Scriptaculous JavaScript library yesterday and almost immediately ran into a very frustrating problem. The Draggable Class exposed by the library has some annoying behavior built in by default. When you set revert to true it has this animation where it moves back to its original location.

I was trying to build a drag and drop toolbox and the effect I was looking for was along the lines of dragging it and dropping it into a particular location and then it reappearing back at the original location. So the toolbox lets you drag individual items over to the main area and then the item reappears where it was taken from.

Well after several hours of digging around in the internals of the Scriptaclous JavaScript files I have the solution, so here it is for the rest of humanity to enjoy:

new Draggable(element,{revert:true, reverteffect: function(element, top_offset, left_offset) {
  toff = top_offset;
  loff = left_offset;
  new Effect.Fade(element, {duration: 0.75, afterFinishInternal: function (effect) {
    new Effect.Move(effect.element, {x: -loff, y: -toff, duration: 0.0, afterFinishInternal: function(effect) {
      new Effect.Appear(effect.element, {duration: 0.75})
}}) }}) }});

The Fade and Appear durations can be tweaked but I found 0.75 to be perfect for what I was trying to achieve. I’ll probably post a link to the finished app when I’m done.