Opera Dragonfly | Take a peek into the future

Opera Dragonfly | Take a peek into the future

Do developers now have a choice when debugging JavaScript? I think they do now.

Dragonfly is a cross device and platform debugging environment which is currently in alpha release. This means you will be able to debug pages running on devices such as a phone with Opera Mobile 9.5. I seems Dragonfly has most of the features of Firebug, and improvements are to come.

I will be very interested in testing this out as Firefox and Firebug have been a little flaky for me on Ubuntu lately with 3.5.

Blogged with the Flock Browser

Using YUI with Google Gears

I updated a post over on YUI Shed to illustrate how to use YUI and Google Gears databases. There's no prototype involved, but I thought it might be helpful to some to re-post a link here for that.

Using Prototype with YUI

I have been using prototype.js with YUI for quite some time now for one simple reason. I LOVE classes. Prototype makes it easy to declare javascript classes, and use them wisely with YUI.

1) You can make easy wrapper classes around YUI classes :

var MyDataTable = Class.create(YAHOO.widgts.DataTable, { ... });

In this case you could set some defaults up for creating a DataTable the same way across your site.



2) $() is always helpful, but be mindful of my previous posts about performance. I think this function is useful in conjunction with YUI and YAHOO.util.Get is less readable (although you could still set $ to this function)

Also, consider $A() and $H() when passing variables around YUI constructors, or using .each()

3) In reverse, you could setup YAHOO namespaces, and then setup a nice structure for your prototype built classes, then use YUI loader or get chains to load them into your pages dynamically.

Loader is very powerful in may ways, don't underestimate it!

Any specific questions, Please post a comment :)

3)

Easy Options

When creating reusable classes it it important that your object can be altered fairly easily. Today I'm going to discuss the Object.extend method, and how it is useful in creating reusable objects.

Let's take a simple class example of a custom input box and its label.

We want it to create something like

<label for="fname">First Name</label><input name="fname" type="text">

First Name


var CustomInput = Class.create({
initialize: function($options) {

// Default Options
this.options = {
name: 'textField',
type: 'text'
};

// Map $options over the top of this.options
// if $options is null use a blank object
Object.extend(this.options, $options || {} );
},

render: function(parent) {
this.label = new Element('label', {name: this.options.name});
this.input = new Element('input', {type: this.options.type, name: this.options.name});
parent.appendChild(this.label);
parent.appendChild(this.input);
}
});




This is the basic object. Later if we wanted to add validation to this object we would only have to pass in the validation parameters in the $options object. In this way, you are less likely to break things as your objects grow up over time.

Blogged with the Flock Browser

US Government against radio ?

Although this is totally unrelated to JavaScript, in any way, I think the community as a whole will understand how important this is.

A few months ago, I received several emails stating that the new internet regulations may bring down internet radio sites such as pandora and others.  Today, I received an email that really disturbed me. The government was going to cut funding on the SETI@Home project.  Is the US Government opposed to radio waves?

Seriously, I thought it funny for a second, but the seriousness of the matter is at hand.

Please take a moment to help us SAVE ARECIBO.

http://setiathome.berkeley.edu/arecibo_letter.php

and generate letters to submit to Congress.  I am urging all who read this take the time to print out the letters it generates and mail them through snail mail. Electronic mail too often gets discarded, and physical letters make a bolder statement.

Thank you for caring about such an important project to save the Arecibo Observatory, the world's largest radio telescope at the Berkeley.

Blogged with the Flock Browser

Google Gears, Prototype, and YUI

Recently I have had the chance to monkey around with Google Gears, Prototype, and YUI together. I created a nice data dashboard application which uses the local database in Gears to store data relevant to the user.

For example, when working within your corporate intranet, you can enable your users to enter in data chunks that pertain to the work they perform such as common account numbers, logins, or other information, perhaps a geo location.

The user can then associate this chunk to a location within the database. Specifying which fields and tables are associated with the chunk they wish to create a dashboard widget for. Using prototype you can build a data class that can access the local database or perform updates with Ajax. 

At this point I decided not to store the results back into the local database, but it could be possible to store that json and retrieve it if the user wanted to save off reports they have run.

A simplified/psuedocode version of the prototype class might look like:

var $args = {
   label: 'Label',
   db_table: 'myTable',
   db_col: 'myCol',
   fields: '*'
   assoc: 'myOtherTable.myOtherCol'
}

var DataChunk = Class.create({
   initialize: function($args){
      this.args = { .. deafults .. };
      Object.extend(this.args, $args || {});
   },
   get_params: function(){ .. return this.args  toQueryParams ... }
   // Other Methods
});

var DataManager = Class.create({
   initialize: function($local_db, $table){
      // Gears db init code here


      // Object properties
      this.ajax = '/url'
      this.db = $local_db;
      this.table = $table
   },

   get_chunk: function($label){
      return this.db.execute('select * from ' + this.table);
   },

   load_chunk_data: function($chunk){
      try {
         var load_chunk = new Ajax.Request(this.url, {
            method: 'get', 
            parameters: $chunk.get_params(), 
            onSuccess: this.got_chunk
                  .bindAsEventListener(this);
         });
      } catch ($err) { ... }
   },

   got_chunk: function($response) { ... }

});

Or, the coder could also strap the load_chunk_data to a YUI DataSource and DataTable, or Prototype Ajax.Updater for recurring updates.

Overall, as with most Google products, I am very impressed with the capabilities Gears gives me in creating exciting web applications.

Blogged with the Flock Browser

Google hosts prototype

Compressed versions of Prototype can now be served from Google

You can either link to the source code directly:

  <script type="text/javascript"
   src="http://ajax.googleapis.com/ajax/libs/prototype/1.6.0.2/prototype.js"></script>

Or you can use Google’s API:

  <script type="text/javascript" src="http://www.google.com/jsapi"></script>
 <script type="text/javascript">google.load("prototype", "1.6.0.2");</script>

The Expires is set for 1 year. Which means users on your site will only need to download one 30kb file, once. Or, if they have visited another site using this method, it will already be in the cache.

Kudos to the Google team!

Blogged with the Flock Browser