Web Info & Tutorials

Categories
Archives
Calendar
November 2007
M T W T F S S
« Oct   Dec »
 1234
567891011
12131415161718
19202122232425
2627282930  
Sponsors
Contributors
Search
Recent Posts
November 19th, 2007

SONGZA: WOULD YOU LIKE A HABITUATABLE PIE-MENUS WITH YOUR SOCIAL MUSIC?

By admin

Aza Raskin gave a thoughtful keynote at The Ajax Experience and at one point showed us a new site that he was working on, Songza, which has now launched:

I am proud to announce the release of Songza, a music search engine and Internet jukebox. Songza solves the related problems of “I want to hear a song” and “I want to share a song with a friend.” Released on November 8, its popularity is growing rapidly: We’re poised to reach one million songs played within just a week of launching Songza.

Songza is also an interface showcase. I’ve used the interface principles discussed here on the Humanized blog to design Songza to be humane, slick, and viral. Play with the interface for a bit, and you’ll find habituatable pie-menus instead of slow linear menus; an inviting design that uses only two icons, both of which act as illustrations for words; an incredibly high density of content and a correspondingly low amount of interaction; undo instead of warnings; and transparent messages that don’t break your train of thought.

Ironically, there’s a lot that went into making Songza so simply. Achieving such a high level of simplification required a lot of code, in part because we couldn’t just use standard widgets. It was worth it, though.

You can’t be better without being different — I think Songza is both.

It is really nice to see a simple UI that uses Ajax as a means to a end.

Songza

Posted in Ajax | Comments Off
November 19th, 2007

SQUIRREL IOC: DEPENDENCY INJECTION FOR JAVASCRIPT

By admin

Mark Forster is a fan of IoC from his days in Spring-land. He found that he was "writing endless amount of code to just instantiate objects and wiring up dependencies in these objects" and decided that what was in order was Squirrel IoC.

To see it in action, we can look at a simple example. There are three files at play here:

  • Application: Bootstrap and wire up
  • NameSpace: Define the objects and services
  • HTML: Bootstrap via HTML

Application

PLAIN TEXT
JAVASCRIPT:
  1.  
  2. $(function(){
  3.     var oContainerDefinition={
  4.         'model':{type:LabModel},
  5.         'dao':{type:LabDAO,args:[{ref:'model'}]},
  6.         'service':{type:LabService,props:[{name:'dao',ref:'dao'}]},
  7.         'application':{type:LabApplication,props:[{name:'containerContext',ref:'containerContext'},{ref:'service'}]}
  8.     };
  9.  
  10.    
  11.     var _oContainer = new IContainer();
  12.     _oContainer.load(oContainerDefinition);
  13. });
  14.  

NameSpace

PLAIN TEXT
JAVASCRIPT:
  1.  
  2. /**
  3. *   A Very basic Model class
  4. */
  5. function LabModel(property1){
  6.     this.property1=property1 || "Some initial property";
  7. }
  8.  
  9. /**
  10. *   A Very basic DAO class
  11. */
  12. function LabDAO(oModel){
  13.     var _oModel=oModel;
  14.  
  15.     //  DAO Get method
  16.     this.get=function(){alert("DAO LOAD");return _oModel}
  17.    
  18.     //  DAO Save method
  19.     this.save=function(){alert("DAO SAVE");}
  20.    
  21.     //  DAO Delete method
  22.     this.delete=function(){alert("DAO DELETE");}
  23. }
  24.  
  25. /**
  26. *   A Very basic JSON DAO class
  27. */
  28. function JSONDAO(oModel){
  29.     var _oModel=oModel || null;
  30.    
  31.     //  DAO Get method
  32.     this.get=function(){alert("JSON LOAD");return _oModel}
  33.    
  34.     //  DAO Save method
  35.     this.save=function(){alert("JSON SAVE");}
  36.    
  37.     //  DAO Delete method
  38.     this.delete=function(){alert("JSON DELETE");}
  39. }
  40.  
  41. /**
  42. *   A Very basic service class
  43. */
  44. function LabService(oLabDao){
  45.     var _oLabDao = oLabDao || null;
  46.    
  47.     //  Service Get method
  48.     this.get=function(){
  49.         alert("SERVICE GET");
  50.         return _oLabDao.get();
  51.     }
  52.    
  53.     //  Getter for DAO instance
  54.     this.getDao=function(){
  55.         return _oLabDao;
  56.     }
  57.    
  58.     //  Setter for DAO instance
  59.     this.setDao=function(oLabDao){
  60.         _oLabDao=oLabDao;
  61.     }
  62. }
  63.  
  64. /**
  65. *   A Very basic application class
  66. */
  67. function LabApplication(){
  68.     var _oService=null;                 //  Reference to the service instance
  69.     ContainerSupport.call(this);        //  Implement ContainerSupport interface
  70.    
  71.     //  Invoked by container when context support is provided
  72.     this.onContextSupport=function(oContainerContext){ 
  73.         var _oModel=_oService.get();
  74.         //alert("Property of model is "+_oModel.property1);
  75.         var _oSpan=$('span#iOutput')[0];
  76.         $(_oSpan).html(_oModel.property1);
  77.     }
  78.    
  79.     //  Setter for service instance
  80.     this.setService=function(oService){
  81.         _oService=oService;
  82.     }
  83. }
  84.  

HTML

PLAIN TEXT
HTML:
  1.  
  3.     <title>Lab Projects : squirrel-IOC : Phase 1 : Demonstraton : Simple layer example</title>
  4.     <script src="script/jquery-1.2.1.pack.js" type="text/javascript"></script>
  5.     <script src="script/com.hedgehoglab.squirrel.core.js" type="text/javascript"></script>
  6.     <script src="script/com.hedgehoglab.example.layer.NameSpace.js" type="text/javascript"></script>
  7.     <script src="script/com.hedgehoglab.example.layer.Application.js" type="text/javascript"></script>
  8.    
  9.     <link type="text/css" rel="stylesheet" href="css/style.css" />
  10. </head>
  12.     <h1>squirrel IOC demonstraton</h1>
  13.     <p>Output of layer propogation for property 1 is <span id="iOutput"></span></p>
  14. </body>
  15.  
Posted in Ajax | Comments Off
November 19th, 2007

JAVASCRIPT BEAUTIFY

By admin

We ofttimes speech most the stylish plot for pressure and minimizing our JavaScript. The JavaScript Beautify playscript aims to do the opposite.

Often, you encounter a place that is doing something engrossing and you poverty to see how it works. You analyse discover the maker and it is inscrutable gibberish. This is where the beautifier comes in to attain it a contact more readable.

For example, it crapper take:

PLAIN TEXT
JAVASCRIPT:

  1.  
  2. /*   paste in your possess cipher and advise Beautify button   */var latest_changes=new Object({‘2007-10-17′:‘Many, some fixes and improvements. Processing pace is also back.’,‘… who cares …’,‘2007-02-08′:‘Initial release’});var a=b?(c%d):e[f];
  3.  

and gives you:

PLAIN TEXT
JAVASCRIPT:

  1.  
  2. /*   paste in your possess cipher and advise Beautify button   */
  3. var latest_changes = new Object({
  4.     ‘2007-10-17′: ‘Many, some fixes and improvements. Processing pace is also back.’,
  5.     ‘… who cares …’,
  6.     ‘2007-02-08′: ‘Initial release’
  7. });
  8. var a = b ? (c % d) : e[f];
  9.  
Posted in Ajax | Comments Off
November 19th, 2007

HIGH PERFORMANCE WEB SITES AND YSLOW

By admin

I had the pleasure of hosting Steve Souders at Google, as he gave a talk on the great performance work that he has done as Chief Performance Yahoo!. We have seen some of the fruits of his labour via his book and, of course, YSlow itself.

In this talk, Steve goes through core performance issues and gives developers tools to make sure that their sites run well.


There are also past talks out there, and a fun Nokia Web 2.0 video.

Posted in Ajax | Comments Off

Web Info & Tutorials is Hosted by Chaaban