Daniel Friesen

(Dantman, Nadir Seen Fire)

Programmer, Web Developer, Animanga Fan

Posts in February 2010

While I was working on version 3 of Kommonwealth I got back to a part of our interface which makes use of live input events (ie: Events that fire as you type into the input) to offer a preview before the onchange event is used to actually change the data by sending an ajax post to the server.

For those who haven't heard of the oninput event, it's part of the html5 spec. You know those older ui parts such as autocomplete features and whatnot. The normal way of making these work is to manually subscribe to keydown and keyup events, and sometimes even use a timer for long inputs. Why? Because onchange only fires after you blur the input (that is what it is speced for and meant to do) and there was no event that would fire while typing was being done, so the only easy way to do it was to subscribe to keyboard events. Of course this method only applied to text inputs. The oninput event is basically an event in html5 which takes care of it. It works similarly to onchange, but instead of firing on blur it fires while you're typing into the input. This has an extra benefit in compliant browsers that like onchange it is only supposed to fire when the data has actually changed (ie: typing asdf then pasting asdf to replace it shouldn't fire).

Well of course this would be like all other html5 features incomplete browser support, the html5 spec doesn't list browser support in any browser. But that's where user code comes into play. We create code to support it manually in browsers that don't support it, and allow browsers that do support it to take over and handle it natively.

[Read more...]

RaphaëlJS is a JavaScript Vector Library. It uses SVG as a backend in browsers that support it (most modern browsers), and uses VML in IE. It provides a fairly easy to use API that allows you to programmably generate Vector graphics inline in a HTML document. The result is a vector canvas with dynamically generated content which can be made interactive using the mouse and keyboard handling built into the browser already for HTML, and includes animation functionality built into raphaël.

I've been using RaphaëlJS lately in various projects, mostly at work. RaphaëlJS powers two components inside of Kommonwealth v3 and plays a large role inside of one of our interface ideas for My Voice Site. I'm also thinking of rewriting the book reader we wrote in Canvas using Raphaël.

RaphaëlJS is fairly nice. It abstracts the vectors enough that not only do I not need to worry about IE, I also don't need to worry about unnecessary syntax, and as a bonus I get to animate things without any pain.

[Read more...]