LazyDev: First Page of Goolge in under 11 hours .. ?

Wrote up a posting today over at LazyDev about a page 1 ranking I got today .. just messing around ... in under 11 hours :-D

Top Vistits - By Browser - 1 mo on this site

1) Firefox
2) Chrome
3) IE
4) Safari
5) Opera


Curious about the IE numbers you say? IE 6 had 1 visit (shame on you really...) IE 5.02 had 2! (double shame). 62% of the IE users use IE 7. (Ouch I would hate to develop js in IE 7)

Firefox holds 55% of the traffic, with Chrome at 17%. Most Firefox users are using 3.5.7

This should be rather obvious why my numbers are skewed, but strangely enough, I am seeing the same trends on many of my other non-technical sites. (Hurray!)

How to separate logic using YUI 3

There are several things to consider when building up the javascript on a page. How the js files will be loaded, what io actions will take place, animations, form validation etc. Yahoo User Interface give you a nice set of options to put it all together, while minimizing the downloads to the client.

For our example, let's assume we have 2 separate Ajax calls we want to make, which then triggers an animation. In this case we want to break out each "part" into separate files, and only load the code the user needs. To begin we will have a "setup" .js file which will use Y.Get.script('', {onSuccess: ...}) to load the other files when needed, and will also setup some namespaces.

YUI().use("node-base", function(Y){
    UI = {
      filesLoaded: false,
      setup: function(){
          // Setup Event  - event, fnc, context, [args]
          Y.on('click', this.fireAjax1, 'btnFireAjax', this) 

      },
      fireAjax1: function(){
        if(!this.filesLoaded){
           // Load the Script 
           Y.Get.script('js/PageAjax1.js', {onSuccess: this.ajaxLoaded1);
        } else {
          this.ajaxLoaded1();
        }
      },

      ajaxLoaded1: function(){
          // Fire from namespace
          YUI.Ajax1.fire();
          this.filesLoaded = true;
      },

       fireAjax2 [...] ajaxLoaded2 [...]
    };

    // Put this object in scope
    YUI.UI = UI;

});

When using the Y.io, you want to break out each separate call into different YUI().use() blocks as you want to set a separate callback for each event. It just makes it easier to deal with instead of making a single "dispatch" function.

In the PageAjaxX.js files we can load the io and animation libraries/files as needed. This ensures that the js is only loaded when it's needed which cuts down on initial page load times and improves user experience. Your objects can then be put in a namespace and work with each other nicely.

YUI PHP Loader

YUI PHP Loader Home

I have made several PHP loaders for YUI over the years, and it's nice to see this library come about. Taking a look at the examples, I can see that I had the right idea. The PHP Loader is more robust and cleaner than my implementations however.

So, the problem this PHP code solves is loading your scripts or YUI scripts dynamically on page load without having to write any of the YUI loader script.

In my implementations, I setup arrays in php that would be converted to json with json_encode. The constructor would setup all the arguments, and delay the .insert() method so that it can be placed near the bottom of the page. The constructor would then generate the required JavaScript code to be output with a PHP call. This would in turn dynamically load all my scripts in a non-blocking manner. I would also setup my global namespace before the loader call and add any required variables I needed for that page in that namespace. So, and example in the PHP "view" of the constructor may look like

< ? php
$load_these = array('calendar', 'datatable', 'myCustomLib');
$loader = new YUILoader($load_these, array('config' => 'someConfigValue'));
? >


    ...
    < div id="footer">
    
    < script type="text/javascript">
        // Insert the scripts
       yuiloader.insert('js');
    
   ...

  

Your PHP source could pull from a config file to populate the $load_these array, and in that manner you can dynamically set the JavaScript that was loaded on the page.

In the YUI PHP Loader, they have somewhat simplified the insert() calls in providing $loader->css() and $loader->script() methods to print the script I have above.

In the backend libraries that I have created, I have also added my own scripts that I wanted the YUILoader to know about. I accomplished this by setting up arrays in php to hold the information about the scripts the YUILoader expects (name, fullpath, requires array etc). The script then adds the addModule JavaScript code to the loading.

Something that the PHP Loader does that I have not added to my own modules is the combination handler. This is where the backend gathers up all the scripts that you want, and combines them into a single download. This dramtically improves page load performance, and saves bandwidth.

Other advantages to this is that the files are server locally, so your site does not have to rely on a 3rd party domain to serve the files. This is especially usefuly where SSL is required or where you can not use a remote server. This includes combining your own files along side YUI modules. To add your own modules, simply add them to the configuration files in lib/meta

You can also change the default skin in the configs. This comes in handy when your testing things and want to setup an override.

I really have been waiting for something like this, and I am glad it has come into being.

YUI Sparkline Widget « Chicken of the Web

YUI Sparkline Widget « Chicken of the Web

If your into cutting edge, this is a nice example of subclassing YUI 2.7 charts to create sparklines in <canvas> and javascript.

Blogged with the Flock Browser

YUI 3: Design Goals and Architecture -Satyen Desai » Garuna Web Designer

YUI 3: Design Goals and Architecture -Satyen Desai » Garuna Web Designer

Satyen Desai goes over lessones learned from YUI 2.7, and the design goals for YUI3. YUI 2 users have expressed the need for more from YUI3

1. Lighter
1. Finer Granularity
2. Code reuse, common base class, easier to create plugins and extensions
2. Easier
1. Conistant API
   
1. Selector, Widget class, Base
2. Convenience - each, bind, chaining, syntax sugar
3. Faster
1. Opportunity to re-factor performance (drag and drop etc)

These are all valid points. In YUI 2, if I want to use a specific util or widget, I would get alot of code that I really didn't need all the time. In YUI 3 you get the option to only include parts of the components you need. This makes sense when building plugins, and widgets of your own, as well as how the core objects relate. A Tooltip widget for instance does not need all the code for an Overlay or dialog box even though they may use some of the same code for making shims or floating elements.

Satyen also goes over application instances with YUI().use() and how it is protected, and self populating. For exmaple YUI().use("anim") will attach optimal dependencies for the anim library, and attach anim to Y. var $anim = new Y.Anim(). This version of anim is garunteed to be the version of the library you are working with, and will never conflict with other widgets on the page.

The custom event handling in YUI 3 has grown quite mature with Event Facades for Dom events and Custom events. 

Custom Events:

slider.on('valueChange', function(e){
  if(e.newVal < 200) {
     alert("New Value " + e.newVal + " is less than 200");
  } 
});

Over all this is a wonderful introduction in getting developers up to speed with the changes from YUI 2 to YUI 3.

Blogged with the Flock Browser

Using Prototype and YUI

Using prototype and YUI

There are many reasons why you might use prototype.js with yui. You may be moving to Yahoo User Interface, or vice versa, or you may just prefer some flexibility. Whatever the reason, there are some good points to using the two together. I have pointed out several times on this blog and Practical Prototype that I personally prefer this method. I use YUI for the widgets, and use prototype for setting up classes, events, and other low level organization. Let's see a quick example:

MySimpleDialog = Class.create({
  initialize: function($div_id, $options){
    this.defaults = {
      width: "20em",
      fixedcenter: true,
      visible: false,
      draggable: true
    };
    Object.extend(this.defaults, $options || {});
    this.dialog = new YAHOO.widget.SimpleDialog($div_id, this.defaults);
   
  },
 
  render: this.dialog.render,
  show: this.dialog.show,

  setTitle: function($title){ this.dialog.setHeader($title);}
  setBody: function($body){ this.dialog.setBody($body); }
});

To initialize a new MySimpleDialog all we have to do now is:

var $mydialog = new MySimpleDailog('my div id');

Notice we do not have to send any options to the SimpleDialog constructor, and if we had, they would override the defaults. To get Fancy, we could create a Template class to be used by our "overridden" setBody method. Keeping things generic helps you to reuse scripts.