jqtouch

trying out jQTouch again. i remembered when i first got my iphone 3G, i tried to write a better webapp version of my favorite bus schedule app for iphone. i was torn between iUI and jQTouch. being a jQuery fanboy, choosing jQTouch was a no brainer. the animation wasn’t as smooth as a native app but it’s easier to work with. the project? like most of my toys, it’s in limbo.

giving YUI some love

working with YUI wasn’t as bad as i thought. managed to survived without the jQuery or prototype magic. somebody should write a book on it – or somebody already did. the sheer size of the docs and the API can overwhelm those trying to evaluate the framework.

ruby-like syntax for javascript array functions

At work, we recently decided to use YUI (Yahoo UI) to generate our user interface. YUI is great. It got almost all the widgets we need. Tabs, tree, carousel... As a result, we have consistent look all throughout. We dump the javascript framework that came with Ruby on Rails and use YUI instead.

Now, here's the problem. If you've use prototype or jQuery, you must be used to using the utility functions these frameworks provide. I go big on jQuery's each function for iterating through arrays and array-like object. Unfortunately, YUI - in version 2.x, at least - does not provide these array functions.

In a course of an hour, I wrote a handy set of functions to get me through. It could've been easier if I just include jQuery since the noConflict function makes it work with any js framework but then I got a mandate to focus on YUI.

JavaScript:
  1. Array.each = function(a, fn){
  2.     for(var i=0; i <a.length; i++){
  3.         fn(a[i]);
  4.     }
  5. };
  6.  
  7. Array.prototype.each = function(fn){
  8.     Array.each(this,fn);
  9. };
  10.  
  11. Array.collect = function(a, fn){
  12.     var new_array = new Array();
  13.     a.each(function(e){
  14.         new_array.push(fn(e));
  15.     });
  16.     return new_array;
  17. };
  18.  
  19. Array.prototype.collect = function(fn){
  20.     return Array.collect(this, fn);
  21. };
  22.  
  23. Array.inject = function(a, init, fn){
  24.     a.each(function(e){
  25.         init = fn(init, e)
  26.     });
  27.     return init;
  28. };
  29.  
  30. Array.prototype.inject = function(init, fn){
  31.     return Array.inject(this, init, fn);
  32. };
  33.  
  34. Array.detect = function(a, fn){
  35.     for(var i=0; i <a.length; i++){
  36.         if(fn(a[i])){
  37.             return a[i];
  38.         }
  39.     }
  40. };
  41.  
  42. Array.prototype.detect = function(fn){
  43.     return Array.detect(this, fn);
  44. };
  45.  
  46. Array.select = function(a, fn){
  47.     var new_array = new Array();
  48.     a.each(function(e){
  49.         if(fn(e)){
  50.             new_array.push(e);
  51.         }
  52.     });
  53.     return new_array;
  54. };
  55.  
  56. Array.prototype.select = function(fn){
  57.     return Array.select(this, fn);
  58. };
  59.  
  60. Array.reject = function(a, fn){
  61.     return a.select(function(e){
  62.         return (!fn(e));   
  63.     });
  64. };
  65.  
  66. Array.prototype.reject = function(fn){
  67.     return Array.reject(this,fn);
  68. };
  69.  
  70. Array.reduce = Array.inject;
  71. Array.prototype.reduce = Array.prototype.inject;
  72. Array.map = Array.collect;
  73. Array.prototype.map = Array.prototype.collect;

Use it like:

JavaScript:
  1. >>> var a = [1,2,3,4];
  2. >>> a.reduce(0, function(x,y){ return (x+y); });
  3. >>> 10

Basically, almost all functions are built on top of Array.each so I'm not sure how fast it'll go.

Happy hacking.

jQuery UI

jQuery released jQuery UI last week. Currently playing with the demos. They look promising.

Prototype Modal CSS Window

Just discovered this amazing javascript library for modal CSS window over at http://prototype-window.xilinus.com. Too bad, I've hacked Lightbox Gone Wild from Particletree to fit our current project.

What’s New in My Toolbox: Scriptaculous

Not very much a fan of javascript. At first I do everything. Then came moo.fx. It's great. Unfortunately, my current project needs more feature/functionality that moo.fx cannot offer. Actually, I can make moo.fx do them. I just don't have the time. I need a library that I can readily use.

No sweat. Scriptaculous has them. I know. Am a bit late on this AJAX/Javascript revolution of sort. I believe it's better late than never.

There are tons of effects scriptaculous have that I can only dream of. One nifty effect I'm stoked at is the inline/inplaceeditor. A div that automagically turns into a textbox and allows realtime editing is cool. Best of all, I don't have to write tons of code. It's done in a line or two.

Paired with CodeIgniter, I'm writing webapps faster that before. Yeah, I never enjoyed writing app from scratch until now. That explains the lack of post here for days.

Scriptaculous is going to be a mainstay in my toolbox. So what's in my toolbox at present?

  • Code Igniter - My PHP framework of choice. Lean and mean.
  • Scriptaculous - A very easy to work with Ajax/javascript effects library.
  • MySQL - Need to say more?
  • PostgreSQL - Rock solid open source RDBMS. Database driven app development is faster with it.
  • Kate Editor - My editor of choice in Linux. It's ability to open multiple remote files makes development faster.
  • VIM - For writing snippets of code before putting them in project codes. Oh, I write tests first.

There are others but those listed are what I use on a daily basis.

moo.fx

Lightweights are in. If functional javascript is what you want, moo.fx is all you need.