I enjoyed this very interesting post on ydn. The post is about the benefit of reducing the number of packets, not just the total file size. More interesting to me was this small note:
If your app sends largish amounts of data upstream (excluding images, which are already compressed), consider implementing client-side compression. It’s possible to get 1.5:1 compression with a simple LZW+Base64 function; if you’re willing to monkey with ActionScript you could probably do real gzip compression.
So to try this out I implemented LZW compression in javascript, except instead of using Base64, which adds more complexity to encoding and inflates the file size quite a bit, I used a trick I’ve seen elsewhere: use the unicode character equivalent to the decimal code output by the LZW algorithm. For the example I used the first 256 first characters in the unicode set as the allowed characters. This breaks any non-latin script for this example, but this proves the concept. I was able to get decent compression. Using the 800 byte example string I got the output down to 705 bytes. In firefox encoding took around 2.38ms, and decoding took a little less. In safari encoding only took .83 milliseconds.
Not sure if this is really worth it or not, but its a cool thing to try out. I think in general just reducing the size of upstream data when possible is probably worth it, but like everything only testing will really say for sure.
Checkout my example here. And get the code here.
I really like this widget for jquery. Its such a nice and clean way to pick dates. So I went ahead and created a YUI 3 widget that does roughly the same thing, but with way fewer features at the moment. Anyway, the basic are there. (its slightly wonky in ie6 right now…)
Check it out here, or download the code here
UPDATE
Thanks to @ls_n, now it handles 12 hour time properly, for some reason I put 0 and 12…d’oh.
So I am waiting around for jury duty. My brain has been turning, so here is a little dump of my thoughts:
Free your mind and your classes will follow
In a conversation with a coworker yesterday we were talking about why jQuery (and yui 3) are fundementally different beasts from other approaches like prototype. I think the beautiful thing about them both is that they don’t try to pretend that Javascript has classical inheritence. They embrace functional programing and prototypal inheritence. They work with the language instead of pretending its something its not. Which is wonderful. Of course, with jQuery you don’t actually have to know or understand any of this, but its there anyway.
Prototypes…
To follow up on my last post, I’m been playing with a project, so I have prototyped things mostly in plain php, but now I am using zend framework to try and assemble the little pieces in to a full scale example.
I have an idea for an app I would like to try out. So naturally I am going to put together a prototype. I started looking into Symphony or Rails as a way to get a prototype out, but I kind of find the whole code generation/ORM thing a bit hard to adapt to. It seems it will take me a week (spare time) at least to get the hang of it before I can even start on my prototype, where I feel like I could get something running with no framework (or even with something less RAD like zend framework or codeIgniter).
Am I being a baby here? How does everyone else prototype?
I just watched Back to the Future. Aside from the fact the movie is awesome one thing has always bugged me. So Marty goes back in time and meets his parents, and in so doing changes their lives for the better. When he comes back to the future his parents are changed but his own memories and past are not. Which makes no sense.
Or at least, it makes no sense unless time supports closures. When Marty was created his personal history was bound to him, or at least this instance of him. Then when he goes back to the future and comes back he brings his scope or history with him.
Explanation in javascript: (this will run in Rhino)
var dadWriter = false;
var marty = function(){
var dad = dadWriter;
function isDadWriter(){
return dad;
}
return {
isDadWriter: function(){
return isDadWriter();
}
};
}();
print(marty.isDadWriter()); //false
dadWriter = true;
print(marty.isDadWriter()); //false