Design Eye for the Backend Guy

Stefano Mazzocchi has published an awesome summary of everything a clueless front-end guy should be looking at. Key features are modern CSS design, color pickers, JS-based ui correction, font stuff, the whole nine yards. Basically the entire article is essential.

If you are that stubborn programmer that doesn't know anything about front-end and needs a modern guide to getting it done, this is for you.

http://www.betaversion.org/~stefano/linotype/news/169/

Simple JQuery UID Plugin

UID's can be tricky to make, but here's a simple one for discussion.

I'm posting this to see if anyone can make it a little safer to prevent collisions and/or improve the algorithm. Any thoughts? The prefix allow you to create uids you can select with a prefix on. The random string will give you a fairly large but not unmanageable string. We'll also return the JQuery instance so we can continue our chain.

(function($){  
 $.fn.uid = function(prefix) {  
            if (!prefix) {
                prefix = "uid";
            }
     var generate = function() {
  var dt = new Date().getMilliseconds();
  var num = Math.random();
  var rnd = Math.round(num*100000);
  return prefix+dt+rnd;
     };
  return this.each(function() {  
          this.id = generate();
   return $;
  });  
 };  
})(jQuery);

Usage:
$().ready(function() {
  $('div').uid().css('background-color','blue');
});

Oui? Non?

How do the Javascript frameworks do it?

Let's take a second and appreciate just how much work must go into building a popular open source JS toolkit.

Even though the domain of the problem is only JS and HTML/CSS the picture isn't as clear as you may think! Besides the technology list you also have to take into account operating system and browsers because, yes, the same browser will behave differently on different operating systems.

In addition to that, we have to also consider doctypes as they change browser rendering, and the toolkit must behave as identical as possible despite different rendering schemes.

So, as an example of the total cost of a single change as of today, September of 2008, it looks like you will have to test (assuming only major browsers and os's):

Windows: IE6, IE7, IE8, FF2, FF3, Chrome 1, Safari 3, Opera 9
MacOSX: FF2, FF3, Opera 9, Safari 3
Linux: FF2, FF3, Opera 9, Konqueror

Sixteen major browser/operating system configurations.

Not done yet:
16 configurations * 6 or so major doctypes (html/xhtml+xhtmldtd with strict/transitional and frameset versions): you end up with

~100 major variations to test after a change.

Yikes you say. Instead of rolling my own components I think I'll just choose a major js toolkit, a widely supported doctype, and learn that!

Smart choice! :)

Netbeans, netbeans, netbeans.

Why is it that any time I get near some Sun-sponsored technology I end up on some crappy link marginally related to what want to check out I but mostly focused on Netbeans?.

Holy crap; move on people.

I'm not going to change editors on a dime because Sun is freaked out over SWT and wants people to be using Swing. This isn't a slam against Swing: I've seen some great interfaces built with it. It's just shameful that every new api or specification from them is presented through the Netbeans lens.

Netbeans might have come a long way since I tried it years ago and that's great, but these days I'm really more concerned with wiring things and getting stuff done rather than than choosing how I'm going to develop my code; I just don't care enough to review it, and I know Eclipse gives me the productivity I need to get the job done quickly and correctly. Moreover, I'm CERTAINLY not going to learn it for one quick start app deployment.

If Netbeans really was that great they would present the Netbeans option AND the Eclipse option just to show how much more productive you are with Netbeans.

You know, I'm posting this rant and I just remembered that Kirill (of Swing fame) just posted something similar a year or so ago. Funny how times don't change.

JQuery Time-Delay Event Binding Plugin

Just to get a sense of how hard it would be I decided to write a plugin for JQuery I didn't see in the core. Basically this is a the same thing as the .bind function for JQuery except that it takes a timing parameter. How is this useful? Say you want do something 'onclick' or 'onchange' except you want to wait X milliseconds first. Perfect for an autocomplete ('onkeyup' I guess you'd use).

I have to say, I really like the JQuery programming model, and I think the author has really hit on something special. The plugin structure lets me write something that encapsulates state, and at the same time gives me a way to use it as if it were a static function. Pow.

Without further ado:

Update [12/10/2008]: The original version of this script didn't pass in the event object like JQuery's event binding. This has now been corrected. Invocation of the plugin stays the same.

----
Javascript:

(function($){
    /**
     * jQuery delayed event execution.
     */
    $.fn.delay = function(options) {
        var timer;
        var delayImpl = function(eventObj) {
            if (timer != null) {
                clearTimeout(timer);
            }
            var newFn = function() {
                options.fn(eventObj);
            };
            timer = setTimeout(newFn, options.delay);
        }
       
        return this.each(function() {
            var obj = $(this);
            obj.bind(options.event, function(eventObj) {
                 delayImpl(eventObj);  
            });
        });
    };
})(jQuery);

----

Usage:

 $(document).ready(function() {
  $('#typeinme').delay({
   delay: 500,
   event: 'keyup',
   fn: function(){
    alert(this.value);
   })
  });
 }

----
Html:

<form action="#" method="get">
<input id="typeinme" name="station"></input>
</form>

Scriptella - Like a Bat Out of ETL!

The Scriptella project has been around a while now. If you haven't checked it out it's really something worth looking at.

Prerequisites:
1. You hate data crap and you always seem to be asked to do it.
2. Brainiac biz guy needs data imported from 3rd party losers: X.
3. You are out of time since you've been browsing articles on prostitution and Eliot Spitzer all week.
Well fret no more!

Scriptella may be a little lite on the examples, but an hour or so of coding leaves you pretty darn impressed.

You basically setup a few connections in a syntax somewhat related to properties and type only what's necessary to get the job done.

I estimate it takes about 5 minutes of work to have you downloading xml/csv files, parsing them, inserting into the database. Each input is configured in a few seconds and then the beauty of the technology is that it lets you reference variables created from other devices. Available datasources include csv, xml, various jdbc usuals, jexl, janino and a generic 'script' driver.

The script driver is great as it allows the .etl file to use a scripting language to to either invoke Java code or simply create data. By default this is the Javascript Rhino implementation. Badass! Now if I could only figure out how to use it to edit the data on the way in... That would be wicked cool.

Put this all together and this is what I churned out in about 5 minutes of work.

1. Downloaded an xml file
2. Parsed and had them inserted in prepared statements
3. output a simple log on every X records.

Brilliant!

Keep up the good work Scriptella team!

JQuery - It Doesn't Suck

So I hate coding; this is known. What I really like doing is watching libs grow though, so it was pretty cool to watch Ext go from being this tiny YUI helper to a juggernaught of JS. Somewhere along the way though, I think they lost the user friendliess, and now it just sorta feels like the Java API all over again. During that I time I wondered if maybe Scriptaculous/Prototype was where it was at, and over all of that I completely ignored JQuery while giving it props for the cool functional angle.

I am a changed man.

I had to put together a quick demo for some new server side code I was developing and I needed a lib to quick get my forms up and working properly. Speed/visuals, these are all important. What I love about JQuery is that it's really about staying out of your way *completely*. No registering this, embedding that. You include the lib, some plugins and add the css class to your forms and you're done.

I'm really impressed how completely focused on unobtrusive Javascript the JQuery community is. It really feels like they just understand the whole point of HTML more than the other guys. If you like building guis the "traditional way" then I'd definitely recommend Ext to you, but if you just need to layer in functionality to your web forms, JQuery is your tool.

A man needs tools.

and sex, but during the work day, tools.

Unless you have a really cool job.

Ok.

Signing off.