Activate your free membership today | Log-in

Tuesday, July 15th, 2008

RJK Showcase - Hong Kong Phooey

Category: Showcase

Hong Kong Phooey is a 16-episode (31 shorts) Hanna-Barbera animated series that first aired on ABC Saturday morning from September 7, 1974 to September 4, 1976. The star, Hong Kong Phooey, is the secret alter ego of Penrod Pooch, or Penry (sometimes mispronounced “Henry”), a “mild-mannered” police station janitor. Although Penry/Phooey appears to be the only anthropomorphic dog in the entire city where the series is set, no one ever connects his two identities.

Hong Kong Phooey is supposedly a master of kung fu and other martial arts. The stories begin at the police headquarters, where Hong Kong Phooey’s alter ego, Penry, works as a mild-mannered janitor. He works with Sergeant Flint (Sarge) and Rosemary, the telephone operator, who has a major crush on Hong Kong Phooey. After Rosemary gets a call and explains the criminals’ crime Penry would run into a filing cabinet to transform himself into Hong Kong Phooey. In each episode, he ends up needing help from his loyal (somewhat less anthropomorphic) striped cat and sidekick, Spot, to get him out. Hong Kong never quite notices Spot’s help, but instead is always proud of himself because he thinks he is the one who does everything.

Hong Kong Phooey

Phooey would get into his Phooeymobile and would use the “bong of the gong” to turn it into whatever sort of vehicle best suited the occasion. He would find the thieves committing their crime. Mostly, Spot was the one who found a way to capture the criminals and foil their crime, but on occasion Hong Kong Phooey captures the villain on his own through sheer dumb luck. But because Hong Kong was the reputed superhero, every time Spot would save the day, everyone else (including Phooey) credited Hong Kong Phooey with being the hero. Every episode would end with a return to police headquarters, where Penry would usually have some sort of accident that would cause Sarge to yell at him. Still, Penry was never hurt by Sarge’s yelling but would find a way to compliment himself on his incognito crime-fighting prowess as Spot sighed.

A running gag was that Hong Kong Phooey was such a respected hero that, when his incompetence caused him to crash into, harm, or otherwise inconvenience a civilian, the passerby would declare what an honor it was to have so interacted with “the great Hong Kong Phooey.” On one occasion, for example, he drove the Phooeymobile through some wet cement, splattering the workers, who said that it was an honor to have a whole day’s work ruined by “the great Hong Kong Phooey.”

Posted by dkennedy at 3:35 pm
Comment here

OOOOO
Rate the above post

Friday, July 11th, 2008

iPhone Web Goodies: Drag and Drop with Touch, Resize and Rotate with Gestures

Category: JavaScript, Showcase, iPhone

The video above shows a simple showcase application that Neil Roberts of SitePen created and wrote about.

He testing out the new APIs such as the touch API where he worked with drag and drop:

JAVASCRIPT:
  1.  
  2. node.ontouchmove = function(e){
  3.   if(e.touches.length == 1){ // Only deal with one finger
  4.     var touch = e.touches[0]; // Get the information for finger #1
  5.     var node = touch.target; // Find the node the drag started from
  6.     node.style.position = "absolute";
  7.     node.style.left = touch.pageX + "px";
  8.     node.style.top = touch.pageY + "px";
  9.   }
  10. }
  11.  

And resizing and rotation with the Gestures API:

JAVASCRIPT:
  1.  
  2. var width = 100, height = 200, rotation = ;
  3.  
  4. node.ongesturechange = function(e){
  5.   var node = e.target;
  6.   // scale and rotation are relative values,
  7.   // so we wait to change our variables until the gesture ends
  8.   node.style.width = (width * e.scale) + "px";
  9.   node.style.height = (height * e.scale) + "px";
  10.   node.style.webkitTransform = "rotate(" + ((rotation + e.rotation) % 360) + "deg)";
  11. }
  12.  
  13. node.ongestureend = function(e){
  14.   // Update the values for the next time a gesture happens
  15.   width *= e.scale;
  16.   height *= e.scale;
  17.   rotation = (rotation + e.rotation) % 360;
  18. }
  19.  

Some readers might have noticed that a gesture is just a prettier way of looking at touch events. It’s completely true, and if you don’t handle things properly, you can end up with some odd behavior. Remember to keep track of what’s currently happening in a page, as you’ll probably want to let one of these two operations “win” when they come in conflict.

Posted by Dion Almaer at 10:16 am
Comment here

OOOOO
Rate the above post

Domize: Visualize your domains

Category: Showcase

Domize

Anson Parker has created Domize another in the line of Ajax domain utilities. Here is what Anson had to say about it:

It is the fastest as-you-type
domain name look-up tool for web and iPhone users. Queries are
encrypted over SSL for security and privacy. Domize is really head and
shoulders above its peers in allowing you to quickly scout out an
available name.

It also has some cool innovations. The entire site is delivered in one
request for non-IE visitors ("data:" urls for images) and additional
functionality is only brought in after the page load (e.g. Google
Analytics). I used a cool technique to modify the stylesheet at the
bottom of the page through JavaScript and keep the whole thing valid
strict xhtml.

Domize also offers preview thumbnails of unavailable domains, which is
a great help in seeing "neighbors" of the domain you're interested in
as well as letting you quickly see whether a domain is owned by a
squatter or legitimate site.

Posted by Dion Almaer at 5:35 am
Comment here

OOOOO
Rate the above post

Tuesday, July 8th, 2008

The Pencil Project

Category: Firefox, Showcase

Pencil Project

José Jeria pointed us to a great looking XUL application that allows you to sketch GUI's and then export them to PNG:

With the power of the underlying Mozilla Gecko engine, Pencil turns your excellent Firefox 3 browser into a sketching tool with just a 400-kilobyte installation package.

Pencil will always be free and can run on virtually all platforms that Firefox 3 supports.

Always good to see people using the power of XUL that still has features that I hope to see HTML get.

Posted by Dion Almaer at 5:40 am
6 Comments

++++-
4.8 rating from 28 votes

Wednesday, June 18th, 2008

Our Signal: Page Cloud Visualization of Digg, Reddit, Delicious, Hacker news

Category: Showcase, jQuery

Our Signal

Our Signal takes Digg, Reddit, Delicious, and Hacker News and creates a full page cloud visualization using jQuery.

The size of the box reflects the popularity, and the color lets you know the acceleration of that popularity. If the color is warm, it is on the rise, and vice versa for cool colors.

I like seeing alternative visualizations, but I have to admit I am not a huge fan of tag cloud style views. You?

Posted by Dion Almaer at 10:00 am
8 Comments

+----
1.7 rating from 32 votes

Thursday, June 5th, 2008

Implementing infinite scrolling with jQuery

Category: Showcase, jQuery

Umut Muhaddisoglu has implemented the infinite scrolling pattern that Wikia Search has in place this week.

There have been other implementations, but this is a clean one using jQuery, and works by:

  • When user scrolls down and hits the bottom a function is called
  • This function gets the last DIV ID of the datagrid
  • Send a query with this DIV ID
  • Return the results and add them to the end of the datagrid.

You can check out the demo on Umut's DNS Pinger service by scrolling down. The parts of this demo are:

The HTML structure to build on:

HTML:
  1.  
  2. <div class="wrdLatest" id=9>content</div>
  3. <div class="wrdLatest" id=8>content</div>
  4.  

The function to put a loading icon in, and then fill it out with new content:

JAVASCRIPT:
  1.  
  2. function lastPostFunc()
  3. {
  4.     $(’div#lastPostsLoader’).html(’<img src="bigLoader.gif"/>’);
  5.     $.post("scroll.asp?action=getLastPosts&lastID=" + $(".wrdLatest:last").attr("id"),   
  6.  
  7.     function(data){
  8.         if (data != "") {
  9.         $(".wrdLatest:last").after(data);           
  10.         }
  11.         $(’div#lastPostsLoader’).empty();
  12.     });
  13. };
  14.  

The scroll detection:

JAVASCRIPT:
  1.  
  2. $(window).scroll(function(){
  3.         if  ($(window).scrollTop() == $(document).height() - $(window).height()){
  4.            lastPostFunc();
  5.         }
  6. });
  7.  

Posted by Dion Almaer at 10:21 am
19 Comments

+++--
3.2 rating from 22 votes

Sunday, June 1st, 2008

Acrobat.com: PDF and Flash sitting in a tree

Category: Flash, Showcase

Acrobat.com

Ever since Macromedia and Adobe merged, we have been waiting for a day where PDF and Flash played really nice together, and today is the day. Very symbolic for the folks from the companies before the merge.

As TechCrunch says:

At the same time Adobe is launching Acrobat.com, it is releasing Acrobat 9—a major upgrade to one of its anchor desktop apps. the big news here is that for the first time, Adobe’s PDF-creating desktop software will supports Flash. So people can now create documents with embedded Flash movies from YouTube, or developers can design entire new skins for electronic documents using Adobe’s Flex framework—the same programming tool they use to create Web applications.

PDF documents made with Acrobat 9 also support collaboration among multiple authors and reviewers over the Internet, making them connected documents. Best of all, they no longer take forever to load. The next step is for Adobe to make it easy to turn any PDF into a Web page, and vice versa.

Acrobat.com Services

This is the biggest news for me. Acrobat.com itself is a very nice integration of Buzzword, ConnectNow, PDF, and Share. It feels quite snappy (despite the "loading..."), and there are a lot of nice animations of course. A good showcase for Flex.

Posted by Dion Almaer at 11:46 pm
2 Comments

+++--
3.9 rating from 22 votes

Wednesday, May 28th, 2008

Addressbook: An example of the Form History Pattern

Category: Gears, Showcase, UI, Usability

One of the examples that Ben and I give in our State of Ajax talk at Google I/O today revolves around form history.

We were thinking about the case for Undo on the Web that Aza Raskin is proposing and it got us thinking about the usage patterns of form data.

An example that got me was the Address Book application on the Mac. I find myself storing past addresses in the general "Notes" section at the bottom, but what if history was built into the system so I could go back in time? This could be a nice metaphor in general that goes beyond undo.

I took this use case and put together a working example that uses Gears to store the history locally so it can be speedy through the history.

The slider component comes from Script.aculo.us, and you can check out all of the code.

In the video below I show the application in action and then do a quick code walk through:

This is just the beginning of course. A slider if fun, but it would probably be more usable if it was simply left and right arrows that click through the versions, or at least putting tacks onto the slider.

Posted by Dion Almaer at 11:34 am
9 Comments

++++-
4 rating from 15 votes

Tuesday, May 27th, 2008

dojo.workers: a showcase

Category: Dojo, Showcase

dojo.workers

Pete Higgins of Dojo has created a nice example, dojo.workers, that puts together coverflow with Dijit and some dojo.query animations.

He even takes out his frustrations with IE 6 as he creates a branch that looks like this ;)

JAVASCRIPT:
  1.  
  2. var newp = function(){
  3.  // IE6 branch of this demo
  4.  window.location.href = "http://" +
  5.   (confirm("Is it 2008?") ?
  6.    "webkit.org" : "mozilla.org") +
  7.   "/";
  8. }
  9.  
  10. // setup our branch launch:
  11. dojo.addOnLoad((dojo.isIE && dojo.isIE <7 ? newp : init));
  12.  

Posted by Dion Almaer at 5:38 am
1 Comment

++++-
4.1 rating from 34 votes

Tuesday, May 13th, 2008

inputEx: JSON form builder

Category: JSON, Showcase

inputEx is "a javascript framework to build fields and forms" created by Eric Abouaf. The framework uses a JSON format to describe a form, such as:

JAVASCRIPT:
  1.  
  2. {
  3.         "fields" : [
  4.                 {
  5.                         "type" : "group",
  6.                         "inputParams" : {
  7.                                 "fields" : [
  8.  
  9.                                 ],
  10.                                 "name" : "",
  11.                                 "tooltipIcon" : false,
  12.                                 "value" : {
  13.  
  14.                                 },
  15.                                 "optionsLabel" : "Options"
  16.                         }
  17.                 }
  18.         ],
  19.         "optionsLabel" : "Options"
  20. }
  21.  

which you can build with the help of the builder application.

Check out the getting started guide and if you like to build an application that looks like:

JAVASCRIPT:
  1.  
  2.    init: function() {
  3.       this.buildTree();
  4.       this.initContextMenu();
  5.       this.buildForm();
  6.       this.initEvents();
  7.       this.queryData();
  8.    }
  9.  

rather than HTML, then this could be the tool for you!

inputEx

Posted by Dion Almaer at 7:35 am
6 Comments

+++--
3.1 rating from 18 votes

Persevere: JSON Storage / Application Server

Category: Dojo, JSON, Showcase

Kris Zyp of Sitepen has released Persevere:

An open source set of tools for persistence and distributed computing using intuitive standards-based JSON interfaces of HTTP REST, JSON-RPC, JSONPath, and HTTP Channels. The core of the Persevere project is the Persevere Server. The Persevere server includes a Persevere JavaScript client, but the standards-based interface is intended to be used with any framework or client.

The Persevere Server is an object storage engine and application server
(running on Java/Rhino) that provides persistent data storage of dynamic
JSON data in an interactive server side JavaScript environment. It is
currently in beta, and boasts a very solid feature set that should
interest JavaScript, Dojo and Ajax developers:

  • Create, read, update, and delete access to persistent data through
    a standard JSON HTTP/REST web interface
  • Dynamic object persistence - expando objects, arrays, and
    JavaScript functions can be stored, for extensive JavaScript persistence
    support
  • Remote execution of JavaScript methods on the server through
    JSON-RPC for a consistent client/server language platform
  • Flexible and fast indexed query capability through JSONPath
  • Comet-based data monitoring capabilities through HTTP Channels
    with Bayeux transport plugin/negotiation support
  • Data-centric capability-based object level security with user
    management, Persevere is designed to be accessed securely through Ajax
    with public-facing sites
  • Comprehensive referencing capabilities using JSON referencing,
    including circular, multiple, lazy, non-lazy, cross-data source, and
    cross-site referencing for a wide variety of object structures
  • Data integrity and validation through JSON Schema
  • Class-based data hierarchy - typed objects can have methods,
    inheritance, class-based querying
  • Pluggable data source architectures - SQL tables, XML files,
    remote web services can be used as data stores
  • Service discovery through Service Mapping Description

You can check out a live Persevere data grid demo that auto-syncs the grid using JS such as this:

JAVASCRIPT:
  1.  
  2. var persevereStores = dojox.data.PersevereStore.getStores(); // persevere stores are auto-generated
  3. customerStore = persevereStores.Customer; // and get the Customer store
  4. dataModel = new dojox.grid._data.DojoData(null,null,{/*rowsPerPage:12,*/store:customerStore,query:"",clientSort:true});
  5.  
  6. addItem = function() {
  7.         // need to specify the parent because the customerStore is hierarchical and the grid model will
  8.         // call newItem without any info who the parent
  9.         //customerStore.parentId="0.examples.customers";
  10.         grid.addRow({firstName: "firstName", lastName: "lastName",created:dojo.date.stamp.toISOString(new Date,{zulu:true})});
  11. }
  12.  

Posted by Dion Almaer at 3:46 am
4 Comments

++++