Skip to content


2.3KB JS Library with ajax, animation, dom manipulation, json encoding

vX was an old project which aimed to do lots of nifty things in the least code possible (3KB without gzip!), but among its goals, developer friendliness wasn’t present. So now, I made a new library, this one is 5KB before gzip, and supports most of what vX does, but with DOM manipulation as well, in a jquery-like manner, and animations with queuing and easing. The new library (which doesn’t yet have a name) aims to be really lightweight (which really doesn’t matter much), while being more developer friendly.

For example, I can select all elements with the class “test” using _.cls(“test”), and make them purple by doing _.cls(“test”).css(“color”,”purple”) similar to jQuery. I can do _.id(“yay”).load(“lib.js”) to load something using ajax. Creating elements is pretty easy too, say I want to load a random script, I can do _.create(“script”).attr(“src”,”url”).appendTo(_.tag(“body”)) and I can add events to something using _.tag(“button”).index(0).on(“click”,function(e){alert(“yay”)}).

Here’s a nice little demo of what it can do http://jsbin.com/owuge/31

I intended to post this back in March 7th, but I was working on a rewrite of the library, which would be a tiny bit larger but implement CSS-selectors and be easier to maintain.

Posted in vX JS.

Tagged with , , .


Onion Skinning in Ajax Animator

The Ajax Animator (Wave/Mini interface version) now has support for basic Onion skinning, where the last keyframe is semitransparently placed in the background to aid in the positioning of the next keyframe. It’s now enabled by default at 20% opacity but can be disabled.

To disable it, click the advanced button on the right side of the toolbar and find the entry labeled Onion Skinning, there you can set the onion skinning opacity or disable it with 0% opacity.

Posted in Ajax Animator, Google Wave.

Tagged with , , , , , .


Stick Figures!

Ubuntu’s weird and adding a bar on top of all my screenshots

http://antimatter15.com/ajaxanimator/VectorEditor/stickfigure.html

I like stick figures, and browsing YouTube, I found some things on Pivot and Pencil (really awesome free desktop animation apps), and that made me think, Stick figures are awesome. So I’m going to add some better Stick Figure features into Ajax Animator and possibly upstream to VectorEditor eventually.

Posted in Ajax Animator, Stick Figures, VectorEditor.

Tagged with , , , , .


Experiment: JS Getters/Setters in IE7, IE6, etc.

Getters and Setters in JS have been plagued with a few issues. Firstly, IE didn’t support it until IE8 and IE8′s implementation follows the Ecmascript Object.defineProperty spec rather than the de-facto standard of __defineGetter__/__defineSetter__. It’s pretty much trivial to make a Object.defineProperty function which writes to __defineGetter__/__defineSetter__. Here is something quite a bit more interesting: Adding getters and setters support to (theoretically) any browser, and I don’t see why versions of Netscape and IE5.5 and all the other ancient browsers couldn’t be made to work. All without following the hideous java-esq getBlah() and setBlah() paradigm.

Instead, my solution is pretty simple.

getset(function (){
var cheesecake = {}
Object.defineProperty(cheesecake, "description", {
get : function () {
return this.desc + " and stuff added because of the awesome getter";
},
set : function (val) {
this.desc = val + " stuff added for setter ";
}
});
cheesecake.description = "Absolutely delicious";
alert(cheesecake.description);
})

The awesomeness is pretty intense, you might have to look at a while for the awesomeness to sink in. And if you still don’t get awe-strucked by the amazingness, think again getters and setters consistently in all browers, even the ancient ones. The code is using getters and setters, no syntactic hacks are apparent. The only deviation is a little getset(function(){}) which wraps around the code.

First thing the library does, is it defines Object.defineProperty if its not already defined. It checks for __defineGetter__ support and uses that if possible. If it’s not defined (this is the routine for ancient browsers like IE7 and below) it declares obj['__get_'+prop] = getter, etc. Still nothing special. If it stopped here, then you would access a getter by obj.__get_description() or obj.__set_description(text), even more hideous than Java.

The brilliance is in the getset function. Basically, it does the checks for __defineGetter__ and native defineProperty again, if its there, then it just executes the argument.

This time, if something is not defined, the function is decompiled. Basically fn.toString(). Yay, now is the code that is inside, now what? A hacked together super duper slow crappy and mostly non-functional regex based parser crawls through it and generates some hideous new markup:
function (){
__getsethandler(cheesecake,'description',"Absolutely delicious")
;
alert(
__getsethandler(cheesecake,'description'/*__ID1__*/)
)
};

And now __getsethandler goes on and does the obvious. And hopefully someone who knows how to fix the parser will and people will start using getters and setters.

For anyone willing to try it in a browser (I’ve only tested it under Chromium Nightly, Opera 10, Firefox 3.5 and IE 7 under Wine). Even better would be if someone is willing to fix up the parser thing. http://jsbin.com/oriqo/15

Please comment if you find a browser which it doesn’t work on of you fix the parser. It may be possible to hook it onto Narcissus (though ironically, I think Narcissus uses getters and setters…) or JSReg instead of writing a parser from scratch.

Posted in Uncategorized.


Moving an element to a new window

Web interfaces right now are either multi-window by design (and only multi-windowed), which aren’t that common and are pretty annoying some times. Most of the time, it’s single windowed, and all the document elements are constrained to a single web page. The problem with this, is that it’s a lot less flexible, I can’t have, for instance, for the ajax animator, I wouldn’t be able to have the tools on the very left side, the timeline on the bottom, a web browser pointing at my RSS in between and the canvas on my second monitor (Not really a functional arrangement, but multiple monitors is a biggie). Even cooler, would be to have it all synchronized using Comet or WebSocket and having part of the interface on a separate device. For devices with smaller displays, like netbooks, I would imagine having a web application to seamlessly move the tools and preference panes to a, for instance, iPhone screen, would be awesome.

http://jsbin.com/orida/30 is a tiny prototype where a new window can be created, and an element, along with event handlers (though only for a root node) gets moved into the new window with a reference to the first window.

Posted in Uncategorized.

Tagged with .


Cross Domain AJAX with Bookmarklets

Posted in Uncategorized.


Wave Reader 5.7

Posted in Google Wave, Wave Reader.

Tagged with , , , .


Wave Reader 4.6 – Insanely Fast Edition

Loading a 500 blip wave in Google’s GWT Client takes 3:34 to get to a usable state (Where the scroll bar works) on a 3ghz Core2 Duo (whose extra core admittedly won’t do much). It also uses 972 MB of RAM.

Loading the same wave in my Wave Reader, takes 678 milliseconds. A 315x speed-up. Also, my client is totally unoptimized, pure 30KB of javascript. On top of those features, anyone can view waves, without a google account, individual blips can be linked to, it supports rendering almost everything Wave can, that is gadgets, inline replies, nesting, font color/size, italics, bold, everything you could probably expect. Interestingly, when you add an attachment to Wave, and delete the parent blip, it still stores the attachment on the current wave state, and this client can display/link to them without using Playback. There is an option to generate plain simple HTML for turning a Wave into a standalone page or Website. Private waves can be exposed read-only as a website simply by adding the gwavereader@googlewave.com username.

Using it is simple, take  a Wave https://wave.google.com/wave/#restored:wave:googlewave.com!w%252Br5lewFqCA and then put it after the Wave Reader URL http://antimatter15.com/misc/wave/read.html?googlewave.com!w%252Br5lewFqCA
And magically you have a super awesome URL to link to.

You can learn some tricks on how to use it to do some more awesome things http://antimatter15.com/misc/wave/read.html?googlewave.com!w%252BrnG0vaFXA such as the before mentioned HTML generation.

Samples (Some random waves):
http://antimatter15.com/misc/wave/read.html?googlewave.com!w%252Br5lewFqCA (New for 4.6 Inline reply support)
http://antimatter15.com/misc/wave/read.html?Ze3l0mj0A
http://antimatter15.com/misc/wave/read.html?oPg9HfEXE&beta
http://antimatter15.com/misc/wave/read.html?Mu9eK7j2H
http://antimatter15.com/misc/wave/read.html?AhbL5fooD&beta
http://antimatter15.com/misc/wave/read.html?googlewave.com!w+UDMZOGpSG

Posted in Google Wave, Wave Reader.

Tagged with , , , , , .


LED Inverse Shutter Glasses

On New Years Eve, I saw the awesome movie Avatar in IMAX 3D. I noticed how there were 2 projectors (which I knew before, but seeing it is different). I started thinking about how to make 3D work better, and one of the first ideas I had was to use a polarized wheel, sort of like the fast-moving color wheels that are used in single-DMD DLP technology, but with only two states of two different polarizations. Put that over a single projector, and use the normal relatively cheap polarized glasses! After looking into it, I learned that RealD uses basically the same technology (except they have a solid state switcher thingy rather than a color wheel, which I would assume is some superior technology). So I started thinking again, and came up with “LED Inverse Shutter Glasses”, which I’m nowhere near as certain about working.

LCD Shutter Glasses work by “blindfolding” one eye at a time, allowing a frame from the monitor/tv to be visible by that one eye, and alternating. This allows a different image to be sent to each eye, which our brains can assemble into a 3d image.

The shutter glasses are pretty expensive though (well, in *my* eyes (pun not intended) its insanely expensive), ranging from $100 to $200 or more.

How about inverse shutter glasses (which is a term I made up)? What if instead of darkening one eye, you add light through a side-mounted white LED? Radioshack sells White LEDs for $3 each (and probably you can get it cheaper elsewhere). OLEDs are apparently awesome because of their insanely low response times which are as low as 0.01ms compared to the 2ms LCDs (according to Wikipedia), and I would assume that LEDs are similar (Anything under 8ms, or 120fps should work).

I have no idea if it would work, and obviously it won’t work nearly as well as the LCD ones. Surely it would probably be pretty annoying to have light shine in your eyes, though I would hope its not that annoying. I’m not sure how it would work either, would it make your pupils shrink, and would your eye detect the un-brightened frame as dark? Or would the LED make everything white and everything hard to see, and be the equivalent of darkening everything away? Would this vary from person to person and setup-to-setup?

Posted in 3D, Additive 3D Glasses.

Tagged with , , , , , .


Javascript SHA1 and SHA256 in <1 KB

Not sure why I made this, but here’s some super tiny implementation of some cryptographic functions. There are some optimizations made for size rather than speed (especially with SHA256), for instance, there are some 71 constants which are used in SHA256 which in most implementations are stored precomputed (they take up around 1KB in hexadecimal), but with mine, they are computed at runtime, which adds a significant runtime penalty, taking twice as long as comparable implementations. It should also be noted that it doesn’t do any UTF8 encoding that some other implementations do, but it can be added by UTF8 encoding the text before running it through the functions.

SHA1

SHA256

MIT licensed, but please post a comment if you plan on using it.

Posted in Hash Functions, Javascript Distributed Computing, Security.

Tagged with , , , , , , .