Activate your free membership today | Log-in

Monday, October 6th, 2008

js.io: client library for networking

Category: Comet, JavaScript, Library

Michael Carter et al have been working on js.io, a client library that gives you networking, including Comet like support, via JavaScript.

The low level work can sit upon Comet APIs, and in the future, Web Sockets, and you get high level APIs to protocols such as:

  • amqp
  • imap
  • irc
  • ldap
  • smtp
  • ssh
  • stomp
  • telnet
  • xmpp

There are some demos such as LiveHelp that uses Orbited as the backend.

Posted by Dion Almaer at 7:01 am
3 Comments

++++-
4.3 rating from 15 votes

Friday, October 3rd, 2008

Thinking about the difference between frameworks

Category: JavaScript, Library

I got to meet Aaron Newton at The Ajax Experience, and he is a thinker. He was really taking in the various talks, and interactions, and you could tell that he was trying to work out various angles on the frameworks. What makes them different? What makes them popular? Where are they going?

He wrote a really nice post on some of these thoughts that goes into detail on different patterns for JavaScript programing. The meme at the show was definitely “the frameworks all do the same thing, just with a different looking API” which makes it even harder to put your finger on differences sometimes. Aaron does a good job.

John Resig himself gave a talk comparing the frameworks. Considering that he is Mr. jQuery, I thought he was very unbiased and had some good thoughts:

Posted by Dion Almaer at 10:20 am
35 Comments

+++--
3.6 rating from 49 votes

Friday, September 26th, 2008

The cross browser addEvent resurfaces

Category: JavaScript, Library

Stephen Stchur has written great posts in the past about cross browser events, and has revisited the topic with The Ultimate addEvent function article.

You get to use the function a la:

JAVASCRIPT:
  1.  
  2. var myDiv = document.getElementById('myDiv');
  3. xb.addEvent(myDiv, 'click', function(e) {
  4.    alert('The this keywords works (even in IE!): ' + this.id);
  5. });
  6.  

and he has some nice commentary:

So some of you may be wondering: "Why another addEvent function. Haven't we been through this?" We have, but I think you'll find that this version does more than any other addEvent function you've seen. For example:

  • Works in all browsers that matter
  • Ensures one event wire up for any given element/event/handler combination (this is mostly for IE)
  • Forces IE to honor the this keyword from within event handler functions
  • Normalizes the wire up mechanism in all browsers (no need to include the "on" prefix for IE)
  • Forces IE to recognize the following properties/methods on event objects: .stopPropagation(), .preventDefault(), .target, .relatedTarget
  • Enhances Non-IE browsers to support mouseenter and mouseleave events
  • Provides an extension mechanism so developers can write their own custom events that plug right in ('mousewheel' or 'DOMContentReady' for example)

Posted by Dion Almaer at 8:24 am
7 Comments

+++--
3.2 rating from 27 votes

Thursday, September 25th, 2008

Pi.js: Simple JavaScript Library

Category: JavaScript, Library

Azer Koculu has released his Pi.js framework, which is a lightweight system that includes a minimal set of modules, and the ability to use and provide plugins.

By default you get:

  • pi.env: browser detection
  • pi.get: DOM access
  • pi.util: Extensions to JavaScript (e.g. support currying, includes, viewport config, and more)
  • pi.base: OO subsystem
  • pi.element: Create and modify the DOM
  • p.xhr: Remoting
  • Extensions to native objects such as Array, Function, Number, and String

There are then plugins to provide functionality such as Comet support, and a storage wrapper.

Pi has been used in the excellent Firebug Lite update that Azer worked on.

Posted by Dion Almaer at 6:04 am
6 Comments

++---
2.7 rating from 24 votes

Monday, September 15th, 2008

Patroon: Another JavaScript Templating Solution

Category: JavaScript, Library

Matthias Georgi has posted the release of Patroon, his new templating system that uses JavaScript. It joins other solutions such as using Django via JavaScript (e.g. Dojo let's you do that), TrimPath, and more.

The way it works is simple. You setup the data that you will be able to access in the template:

JAVASCRIPT:
  1.  
  2. var data = {
  3.   comment: [{
  4.     date: "2008-09-07 12:28:33",
  5.     name: "David Beckham",
  6.     website: "beckham.com",
  7.     text: "I watched the euro finals on tv..."
  8.   }, {
  9.     date: "2008-09-07 14:28:33",
  10.     name: "Tuncay",
  11.     website: "",
  12.     text: "Me too"
  13.   }]
  14. };
  15.  

Then you create an HTML template with variables a la {variablename}:

HTML:
  1.  
  2.     <div class="comments"> 
  3.       <div id="comments-template">
  4.         <div class="comment">
  5.           <div class="_ top">
  6.             <a class="_" href="{website}">{name}</a> said
  7.             <a class="_" title="{time}"></a>:
  8.           </div>
  9.           <div class="text"></div>
  10.         </div>   
  11.       </div>
  12.     </div>
  13.  

Then you run the template and put the output back into the DOM:

JAVASCRIPT:
  1.  
  2. // The comments template will be removed from the DOM!
  3. var template = new Template('comments-template');
  4.  
  5. // not using a library
  6.  
  7. // template will result in a new DOM node
  8. var result = template.expand(data);
  9.  
  10. // insert the resulting node into the comments container
  11. var container = document.getElementsByClassName('comments')[0];
  12. container.appendChild(result);
  13.  
  14. // using jquery
  15. $('.comments').expand(template, data);
  16.  

Posted by Dion Almaer at 7:29 am
11 Comments

++---
2.4 rating from 16 votes

Friday, August 29th, 2008

GWT 1.5 final release is shipped and out the door

Category: GWT, Google, Java, Library

I have seen the GWT team working very hard indeed on GWT 1.5, and they must be very happy to see the final release shipped and complete:

GWT 1.5 delivers what we think are an impressive number of improvements, about four hundred issues if you're counting. We're also happy that one of those is issue 168, our most-requested feature, Support for Java 5.

The high level new feature sets are:

  • Java 5 language support and enhanced JRE emulation
  • Performance optimizations and easier JavaScript interop
  • Prettier widgets, better DOM, accessibility, and bi-di

You can see a lot of this at work in the showcase area. There you will see all of the widgets and examples that come out of the box, and the community has developed even more for you. In particular, Ray Cromwell has some great real world examples that he shares in his book and talk.

Download GWT and take a look.

Posted by Dion Almaer at 10:51 am
1 Comment

++++-
4 rating from 24 votes

qooxdoo 0.8: new GUI toolkit and tool chain

Category: JavaScript, Library

qooxdoo 0.8 has been released and it appears to have a lot of big changes. Andreas Ecker told us a little about it:

While at first qooxdoo 0.8 looks like a minor jump in version number
over the previous 0.7.3, the actual changes are huge. In particular the
UI capabilities as well as the developer tool chain were improved
substantially.

qooxdoo 0.8 features a complete rewrite of the GUI toolkit. It is state-of-the-art and supports all major browsers (IE, Firefox, Safari, Opera). The GUI toolkit has a layered architecture: on-top of a low-level DOM-oriented layer (that might be used as a separate library), it includes a large set of widgets and layout managers (perfect for building RIAs). Online demos are available.

Users can very easily implement additional custom widgets or layouts to fit their individual needs. Theming of widgets continues to be independent from the widget code itself, and now allows for virtually
unlimited styling possibilities, e.g. rounded borders, gradients, shadows. While qooxdoo comes with two new attractive themes, it is also easy to create custom themes, without any CSS knowledge required.

Besides the exciting changes in the GUI toolkit, the developer tool chain has also been improved to a large extend. It frees the developer from such tedious and complex tasks as compressing and optimizing the JS code, resolving dependencies between classes, using a JS linker to produce a custom build of the app ready for deployment. Some further highlights of the comprehensive, built-in tooling include: searchable API reference, internationalization, source code validation, unit testing, combined images, and much more. The entire tool chain is platform-independent: all that is needed is a working Python installation, which is trivial to setup on any operating system, including MS Windows.

While API documentation is quite complete already, wiki documentation is still being updated to account for all the changes and improvements. Download the qooxdoo 0.8 package, and see the
included index.html to get started quickly.

Posted by Dion Almaer at 10:40 am
6 Comments

++++-
4.6 rating from 38 votes

Wednesday, August 20th, 2008

Making creating DOM-based applications less of a hassle

Category: Framework, JavaScript, Library

Creating a lot of HTML using DOM methods can be a real pain. This is what students of the Juku training course that I held two weeks ago found out quite quickly and complained about the verbosity of it all. I listened to their concerns and came up with a framework for JavaScript applications called
ViewsHandler.

One of the tasks I had given the class is to create a thumbnail show with image information from a link pointing to Flickr using the JSON API. The following is a solution using and showing the options of ViewsHandler:

A flickr show created with ViewsHandler

A flickr show created with ViewsHandler

ViewsHandler is not another JavaScript templating solution but works on the assumption that in most cases you'll have to create a lot of HTML initially but you'll only have to change the content of some elements dynamically as new information gets loaded or users interact with the app. So instead of creating a lot of HTML over and over again all I wanted to provide is a way to create all the needed HTML upfront and then have easy access to the parts of the HTML that need updating.

The first thing you'll need to do to define your application is to create an object with the different views and pointers to the methods that populate the views:

JAVASCRIPT:
  1.  
  2. var views = {
  3.     index:{
  4.       create:createIndex
  5.     },
  6.     detail:{
  7.       create:createDetail
  8.     },
  9.    info:{
  10.     create:createInfo
  11.   }
  12. };
  13.  

ViewsHandler then creates DIV elements for each of these views and hides them for you. In your methods you create all the HTML the different views need to have and apply it with an add() method. You then define the parts of the HTML that should change later on as fields using the define() method and you can use the set() method to change the content of these fields and the view() method to change between views.

The benefit is that for setting the data you don't need to access the DOM any longer or use innerHTML or nodeValue. ViewsHandler created a pointer to the element all of this is cached. The set() method also allows you to either add a new node as the value or a string. In the latter case it'll create a text node for you.

One convenience method is linkto() which creates links pointing to the different views for you. None of this is rocket science, but it helped the class to create large applications with complex views without losing track of what they are doing. Maybe it can help you, too.

Posted by Chris Heilmann at 11:13 am
13 Comments

+++--
3.3 rating from 17 votes

Tuesday, August 19th, 2008

Reading ID3 tags with JavaScript

Category: Examples, JavaScript, Library

Jacob Seidelin is up to more tricks, this time playing with the binary side of life and writing a library that can reading ID3 tags from MP3 files and such.

JAVASCRIPT:
  1.  
  2. // URL of the mp3 file (must be on the same domain!)
  3. var file = "mymusicfile.mp3";
  4.  
  5. // define your own callback function
  6. function mycallback() {
  7.  // either call the ID3.getAllTags([file]) function which returns an object holding all the tags
  8.  alert(
  9.   "All tags in this file: " + ID3.getAllTags(file).toSource()
  10.  );
  11.  
  12.  // or call ID3.getTag([file], [tag]) to get a specific tag
  13.  alert(
  14.   "Title: " + ID3.getTag(file, "title") + " by artist: " + ID3.getTag(file, "artist")
  15.  );
  16. }
  17.  
  18. ID3.loadTags(file, mycallback);
  19.  

You can view a demo at work or download the code.

Of course, Jacob realises that this doesn't make sense for many use cases:

Of course, one big disadvantage of doing this on the client in JavaScript is that the you need to download the entire MP3 file before the tags are available, so it might be better to stick to server-side solutions in many cases if all you need is the tag info.

Posted by Dion Almaer at 10:27 am
10 Comments

+++--
3 rating from 20 votes

Tuesday, July 29th, 2008

Ajax-Alexa-Thumbnails: API to get site thumbnails

Category: Library, Yahoo!

Have you ever wanted to be able to easily grab a thumbnail image that represents a website?

Eric Ferraiuolo has created Ajax-Alexa-Thumbnails on Google Code, a library that builds on YUI to do just that.

The project consists of a server-side component written in PHP which makes the cross-domain request to Amazon's Alexa Site Thumbnail web service, and a JavaScript component which makes Ajax requests to configured server-side component and caches the results.

How do you call it?

JAVASCRIPT:
  1.  
  2. (function(){
  3.         YAHOO.util.Event.onDOMReady(function(){  
  4.                 var container = YAHOO.util.Dom.get("container");
  5.                
  6.                 YAHOO.EDF.Thumbnail.init({
  7.                         source: "alexa_service.php",
  8.                         size:   "large",
  9.                         anchor: true
  10.                 });
  11.                
  12.                 YAHOO.EDF.Thumbnail.getThumbnail("http://code.google.com/p/ajax-alexa-thumbnails/", function(thumbnail){
  13.                         container.appendChild(thumbnail);
  14.                 }).getThumbnail("http://developer.yahoo.com/yui/", function(thumbnail){
  15.                         container.appendChild(thumbnail);
  16.                 });          
  17.         });
  18. }());
  19.  

Since this uses Alexa, it can't give you a snapshot of any page out there.

Posted by Dion Almaer at 7:11 am
7 Comments

+++--
3.6 rating from 27 votes

ProtoChart: Using Canvas to give you good looking charts

Category: Canvas, Library, Prototype

ProtoChart is a new opensource library using Prototype and Canvas to create good looking charts.

Features

  • Line, bar, pie, curve, mix, and area charts available
  • Multiple data series on same graph
  • Legend support
  • Customizable grid, grid border, background
  • Customizable axis-tick values (both x and y)

Check out a live demo of ProtoChart at work.

Posted by Dion Almaer at 6:00 am
4 Comments

+++--
3.9 rating from 17 votes

Friday, July 11th, 2008

YPulse: Fades and Pulsations Library

Category: Component, JavaScript, Library, Yahoo!

Kent Johnson has released YPulse a simple open source wrapper for the YUI Animation library that makes creating highlight fades and pulsing button glows a bit easier.

You pulse away with something like:

JAVASCRIPT:
  1.  
  2. var pulser = new YAHOO.squarebits.YPulse(
  3.   ‘my-div’,
  4.   ‘backgroundColor’,
  5.   ‘#FFFFFF’, // starting
  6.   ‘#FFFF00′, // ending
  7.   0.75, // The number of seconds for the start-end transition
  8.   0.10, // The number of seconds to wait after completing the start-end transition
  9.   0.75, // The number of seconds for the end-start transition
  10.   0.75, // The number of seconds to wait after completing the end-start transition
  11.   YAHOO.util.Easing.easeBoth, // The YAHOO easing method to use for the start-end transition
  12.   YAHOO.util.Easing.easeBoth<