Screenshot-19

With help from @Frenzie and @paul_irish, the latest not-yet-versioned release of Weppy, my Javascript WebP to WebM conversion library, or something of a polyfill for a format that is yet to be part of any specification (HTML5 seems to specifically reference the image src attribute are examples such as PNG, GIF, JPEG, APNG, PDF, XML, SVG, SMIL, and MNG). The new release brings some awesome new features that really don’t change much and shouldn’t really be used in the real world because most browsers in the world still aren’t Firefox, Chrome or Opera - that is, a large portion of the browser market includes browsers like Safari and IE, either suffering from antiquity (IE6! aah!) or just liking h264 (IE9 + Safari).

The new release supports Opera. I never bothered debugging Opera, I figured it was another huge issue that would demand a rewrite (as supporting Firefox had needed, because the order of the object keys isn’t preserved and breaks the EBML result, or at least for Firefox’s parser which seems to be somewhat stricter than Chrome’s, is that ffmpeg?). And after premature optimization (stripping “unnecessary” EBML tags), my code didn’t work in chrome, so I had to revert to an earlier revision. All my testing code was based on file drag-drop stuff, and Opera doesn’t support that. Until I saw this mozillazine topic, I didn’t care, but it was a lot easier to fix than I feared.

Part of the solution was getting rid of the canvas stage. Admittedly, the canvas stage was pretty useless once the toDataURL() stage was removed before the first public release, but I didn’t feel like deleting code, so it stayed there. Also, I noticed that the global variable that gets introduced was accidentally named “WebM”, which is wrong, it should be “WebP”, but because of the uncreative format naming and similarities, I didn’t notice. Not sure, but it seems to be more stable now.

Chrome probably will add WebP soon, and it needs to be future proof, detecting whether or not a browser supports the WebP format. To do that, it creates an Image, sets the src to a data url of a 4x4 webp image and listens to the onload and onerror events, checking if the size is correct and there were no errors loading it. The routine is expected to error and totally untested as there aren’t any browsers that support the feature yet for me to try.

Another change, is that by default, it will automatically load all the same-origin (because of the limitations of XHR) webp images (from <img> tags), on the DOMContentLoaded event, so the library is practically drop-in now. In any web page, you can pretty much add <script src=”http://antimatter15.github.com/weppy/weppy.js“></script> and on the supported browsers, it should automatically load and replace all WebP images, though not something I would really recommended.

The demo is the same place it always was: http://antimatter15.github.com/weppy/demo.html

There is also this nifty hack that uses <canvas> to add an alpha channel to the WebP image (adapted from the original JPEG one): http://antimatter15.github.com/weppy/alpha/alpha.html

Also, please follow me on twitter.

Screenshot-14

WebP http://code.google.com/speed/webp/

Recently, Google announced a new lossy image compression codec, named WebP, intended to supersede JPEG. It is based on VP8’s intraframe compression algorithm. It’s not natively supported in any browsers yet. Weppy is a compatibility layer that changes WebP files into WebM files that can be loaded on several modern browsers.

How does it work?

WebP is actually a lightweight container for a single VP8 frame (whereas WebM is a container based off Matroska meant for video). WebM support exists already in Chrome, Firefox and Opera, so all that’s needed to render it is to do a little magic to convert the RIFF encoded WebP image into a EBML/Matroska encoded single frame WebM video, loading it in a , using drawImage() on a and replacing the .webp image with the data URL extracted from the using toDataURL().  Issues

• Chrome (on linux anyway) tends to crash a lot.
• Firefox throws a security exception when doing toDataURL() on a canvas after drawImage() of a video loaded from a data url. The hack being used it to replace the image node with the actual canvas instance.
• Opera doesn’t work. I don’t really have the time to investigate. What Browsers?

Chrome 7.0 and Firefox 4.0 were both tested. Opera doesn’t work for reasons that I’m not sure about. I would appreciate it if someone fixes it and submits a patch :)

Demo

http://antimatter15.github.com/weppy/demo.html

μwave June 2 Wave View

Microwave June 2 Search

Over a few days, things can change fairly quickly. There have been several speed improvements, a new Forum-Style blip rendering option which arranges blip linearly by the time edited with each containing a formatted quote of the parent to establish context. Attachments are now fully supported, including thumbnails and download links. The operations engine was totally rewritten which uses asynchronous XMLHttpRequest, a new callback based system and support for a batch operations (which means fewer requests and faster responses). A wavelet header containing a list of all participants in the entire wave has been added, as well as an Add Participant button. A specialized, extremely fast gadget viewer was added, which allows for blazingly fast rendering of two popular gadgets (and more will come), it works by bypassing the entire gadget infrastructure and loading trusted code directly inline with the DOM. There is a “New Wave” button which allows people to create new waves directly from the client. The OAuth backend was authenticated with google, for more secure login transactions. Blips have a new context menu which allows for features such as Delete Blip, Edit Blip and Change Title. A full changelog can be found here.

Try it out.

vX is the world’s smallest Javascript library. It’s modular, powerful, unlikely to interfere with operations of other libraries, open source (MIT license), and cross-browser. It’s designed with size first and foremost and everything else secondary. The cross-browser GET/POST AJAX function with callbacks is only 200 bytes. The closest thing is over twice the size. This extreme density is present in every function of the library.

Currently, the whole framework, including Ajax, Events, URL Encoding, Animation (including Fading), Namespacing, JSON Serialization, JSON Parsing, Document onReady, HTML entities encode/decode, Array Index, Get Elements By Class Name, Object Extending, Templating, Queueing, Class Manipulation and more. is under 3KB total uncompressed.

All functions are aliased to full reader-friendly names as well as very consise abbreviations. For example, Ajax can be accessed by.ajax or .X.

So i had this little project involving a quote repository and due to some trouble installing the superior Chirpy system, I used RQMS and did a few changes to add features like ajax ranking so you don’t have to reload to rank something.

It only involved changing less than 10 lines and pasting a snippet of my vX Ajax library.

Replace lines 151, 152 and 153 with the following lines (respectively) in rash_output.php (the template).

<a href="?ratingplus<?=$GET_SEPARATOR_HTML?>id=<?=$row['id']?>" onclick="plus(<?=$row['id']?>);return false" class="quote_ratingplus">+</a>
(<span id="rating<?=$row['id']?>"><?=$row['rating']?></span>)
<a href="?ratingminus<?=$GET_SEPARATOR_HTML?>id=<?=$row['id']?>" onclick="minus(<?=$row['id']?>);return false" class="quote_ratingminus">-</a>

Then add the following somewhere arbitrary in the of rash_template.php

<script type="text/javascript">
var _=_?_:{}
_.ajax=_.X=function(u,f,d,x){x=window.ActiveXObject;x=new(x?x:XMLHttpRequest)('Microsoft.XMLHTTP');x.open(d?'POST':'GET',u,1);x.setRequestHeader('Content-type','application/x-www-form-urlencoded');x.onreadystatechange=function(){x.readyState>3&amp;&amp;f?f(x.responseText,x):0};x.send(d)}
_.id=_.G=function(e){return e.style?e:_.d.getElementById(e)}
_.d=document

function plus(ID){
    _.ajax("?ratingplus&amp;id="+ID, function(){
        _.G("rating"+ID).innerHTML = parseInt(_.G("rating"+ID).innerHTML)+1
    })
}
function minus(ID){
    _.ajax("?ratingminus&amp;id="+ID, function(){
        _.G("rating"+ID).innerHTML = parseInt(_.G("rating"+ID).innerHTML)-1
    })
}
</script>

I’ve packaged a sample rash template with the ajax functionality. You can get it here: http://drop.io/ajaxrash

And the purpose of this is of course for one of my new projects, BotBash a conversation repository between a little (really simple) bot i built and strangers on Omegle. You can see it in action on http://botbash.antimatter15.com

Okay, so 0 = false, so it makes sense that !0 = true. but also 1 = true, so that saved 1 byte.

Since there’s no .readyState attribute > 4, instead of .readyState == 4, you can do .readyState>3

the big one was ActiveX, which was originally

x=new(this.ActiveXObject?ActiveXObject:XMLHttpRequest)('Microsoft.XMLHTTP')

I noticed how this.activeXObject was repeated unnecessarily. So i added a new variable y

y=this.ActiveXObject

then I did:

y=this.ActiveXObject;x=new(y?y:XMLHttpRequest)('Microsoft.XMLHTTP')

thanks to dynamic languages, I could use x, and just reset it to something else (saving a variable declaration!)

x=this.ActiveXObject;x=new(x?x:XMLHttpRequest)('Microsoft.XMLHTTP')

Now I just need to find a way to shrink

x.setRequestHeader('Content-type','application/x-www-form-urlencoded')

Um… I got vX Ajax 1 byte smaller.

*I think you can’t get any smaller than this… For real…

The original vX function was 337b. Now, it’s been reduced down to 293 bytes, while adding a new feature (callback is now optional).

Apparently, the above stuff doesn’t work (Wordpress?)

It’s really quite amazing. The big things that reduced size were using lots of condititional things, really obfuscated unreadable stuff, and using !0 instead of true, and !1 instead of false.

If you want to use it, try building your own copy from.

http://vxjs.googlecode.com/svn/trunk/build.htm

The usage has signifigantly changed though, there, everything’s namespaced under an underscore, so it’s _.X(“url”)

Built on top of the vX Ajax Function, is the vX JS Library. It’s probably the world’s smallest JS Library, in total, about 1.45kb, with things like Animations, Ajax, JSON Serialization, URL Encoding, Cloning, Event Handling, Fade Effects, and more. It’s signifigantly less elegant than jQuery and others, but it is extremely lightweight and quite cross-platform. The code has been optimized down to each individual byte.

http://code.google.com/p/vxjs/

It’s not too useful. It may be useful for some tiny things, but it’s not really that useful.

It’s not good enough to make things really high-quality, or complex such as the Ajax Animator. It’s good only if your making like something small, where you might want some ajax, but still want it to load fast.

Also, another thing, not exactly part of the library is vXg, a Get-Only version of vX that’s only 221 bytes. http://vxjs.googlecode.com/svn-history/r26/trunk/ajaxget.js

vXg(URL, CALLBACK)

For one of my projects, I needed a really simple, lightweight one. It’s super lightweight. I mean really. really lightweight. Only 337 bytes (though 1 kilobyte of random crap in front of it would make it 1337 bytes). Most libraries are over 60kb! If you’re using it only for ajax. You’re using 180 TIMES what you really need.

This one can do GET/POST requests with a callback

/*vX Ajax Function. (C) Antimatter15 2008*/
function vX(u,f,p){var x=(window.ActiveXObject)?new ActiveXObject("Microsoft.XMLHTTP"):new XMLHttpRequest();
x.open(p?"POST":"GET",u,true);if(p) x.setRequestHeader("Content-type","application/x-www-form-urlencoded");
x.onreadystatechange=function(){if(x.readyState==4&&x.status==200) f(x.responseText)};x.send(p)}

It takes 3 parameters. the URL, the Callback function, and the post parameters (optional).

vX(AJAX URL, CALLBACK FUNCTION[, POST PARAMETERS]);

Note that here the callback is required, not optional, though it could probably be made to do that by changing f?f(x.responseText):x.

To Use:

GET:

vX("ajax.php?you=suck&howmuch=alot", function(responsetext){alert(responsetext)})

POST:

vX("ajax.php", function(responsetext){alert(responsetext)}, "you=suck&howmuch=alot")

That’s it. In case your wondering what the name is, I wanted somethign that was short so it was lightweight. I didnt want it to be single letter because single-letter names are likely to collide with other libraries. Also because “V” and “X” are two widely overused characters anyway. Another reason might be that you dont know what version it is :P

Well, I worked on a sort of VNC-like solution to controlling native desktop applications from a remote PC. It’s an interesting concept, I settled with something less than easy to use, and less than really feasable. It’s a Proof of concept, and it’s likely I won’t work on it again (Like ForkSwif).

It is an application (module) on a hacked Ext 2.0 Desktop example that uses Ajax (Polling) to query a local PHP proxy to query a remote desktop. The remote desktop is running some software (powered by .NET sadly…) that captures the window’s contents, does a diff to see if there are modifications and where (only sends updates to changed parts of the screen, sorta like VNC). It base64 encodes it and sends it along HTTP to the proxy, which sends it to the javascript client.

The client can send events to be repeated on the remote desktop, currently only left mousedown and mouseup (so, basically only clicking), but using the Keyboard should be easy enough.

I imagine that a more feasable option is to create a javascript X11 client, taking proxied connections to a X session under SSH so it is better with window-specificness, and an overall more stable platform, so you could also run multiple applications simultaneously on the desktop.

here’s an early screenshot:

Controlling A native desktop app from a javascript desktop

Files here:

http://antimatter15.110mb.com/misc/coolstuff.zip

Extract desktop2 to your Apache server, start Windows Calculator (or another app of your choosing). Run Screen.exe, type the app title, press “Get Handle” and check the “Run Server” box. Navigate to the desktop.html (on your PHP-enabled apache), and start the “NV Window” app.

To be able to control the app, you have to set it to your network ip (not localhost) on a VM or a different computer. and configure sample.js at line 191.

proxy: "gdat.php?url=",
updateurl : "[http://localhost:12345](http://localhost:12345/)",
baseurl : "[http://localhost:12345/base](http://localhost:12345/base)",
showimg : false,
uinterval: 1000,
updater: null,
xoffset: -8,
yoffset: -28,

change localhost to the server’s IP. And tick “Control Desktop”

Note that you need firebug.

If i can think of a name for the app, i’ll be sure to creakte a google code project for it. so if anyone want’s the source, think of a name for it.

I just noticed something. JavaFX has all the letters in Ajax. so you just switch around the J and the A (ajvafx) take out the V and the F (ajax). freaky huh? I wonder if that was intended…

Note: This is likely the first AND last release Ever. I’m gonna go on working on Ax v0.2 after this is finished (tomorrow)

I think its finally ready for showing people (still proprietary though :P). It is coded using Ajax/Long-Polling Comet, which as far as I’m concerned, is the first of it’s kind. It uses ExtJS for its user interface. it’s page load is ~2mb in size, and there is a huge amount of static data handled. Its following how most my apps are made: using the most client side code possible. I donno why, but it just is.

Since it uses Comet technology (specifically, long-polling), the requests made are minimized, and supposedly much more scalable. Requests are only made when necessary, and due to Comet technology, it only updates when there is something to update.

Since most of the processing is done on the client side, the server only has to handle the static content.

An interesting, albeit geeky feature, is a sort of command-line functionality. I attempted to build the entire system (somewhat like a Unix system) where most if not everything graphical is backed by a set of commands. Well, the real-time chatbox (which again, uses comet to reduce load on servers) detects if the input starts with the > character. if it does, then it parses it as a set of commands. Its relatively smart, so if you type in a global variable name, i’ll give you a JSON dump of the contents, and if its a function, i’ll call it, and if it is an expression then it’ll eval it.

There is no such plotline yet. Just random stuff that pops in my head (read: iWorld) and etc. there is also no title yet. (named: “Untitled”). Part of the game itself, is to build the game, using its built-in pixel-sprite-graphics editor.

Currently, it is restricted to modern browsers only. Firefox being my development platform (duh. what kind of js developer doesn’t use firefox/firebug? but i heard the IE8 dev toolbar is good cause its a clone of firebug..) will obviously work best. IE may or may not work. though platform agnosticism was one of the design goals. Opera/Safari is likely, but i’m not certain. most mobile browsers will fail (i tried apple iphone safari support, but it is weird around ExtJS)

It has some features, such as a relatively nice UI (well… nice compared to the others). Session saving, worlds, sprite/npc authoring, Character IDE, npc battles, pvp, store, panning, prelimary quests, items, friends, magic/abilities, a CLI, some crappy code, moderation, adminstration, etc.

Oh, and the password is “password” in case you wanna make new sprites. The URL is http://cometrpg.110mb.com/

Well, i’m adding lot’s of new stuff (as always)

New things: Improved UI (no seriously) Now supports tweening of lines (should have been there since the start) All code is loaded on init (no ajax unless needed)