Activate your free membership today | Log-in

Thursday, December 20th, 2007

Remember, the Milk has spilled on your Gmail

Category: Firefox, Google, Showcase

We blogged about the Gmail helper API in November, and the good folks at Remember The Milk have used the API to add tasks to the Gmail interface in a nice mashup:

Yup, that’s RTM in there! Remember The Milk for Gmail is a Firefox extension that lets you do all kinds of crazy cool things with your tasks (and interacts with your mail, contacts, and calendar too).

It goes beyond letting you manage your tasks, as you can connect tasks with your mail, google calendar, and contacts.

Watch the screencast to see it in action.

Posted by Dion Almaer at 7:46 am
4 Comments

++++-
4.2 rating from 17 votes

Thursday, December 6th, 2007

Applebox: iTunes in Serverless Ajax

Category: Showcase

Simon Gilligan has created Applebox, a consumer storefront that looks just like iTunes, but instead of Cocoa, it is a serverless Ajax application:

Ok, time to geek out and talk about the technology behind APPLEBOX. Whilst we think our model for the local DVD store is a winner (we’ve reduced store overheads, embraced the Internet and kept a strong sense of local community even from the web) we also completely love the technology! Forget Rails, we’ve got a J2EE web stack that we think is second to none. Check it out:

  • Our architecture is SOA (Service Oriented)
    All our application calls are SOAP, which from the ground up creates an API we will give public exposure to at a later date. For example this call returns a movie profile.
  • Our storefront is Serverless AJAX
    The Web 2.0 movement has swept AJAX into the mainstream. We take that one step further and deliver our complete application as Serverless AJAX that makes stateless SOAP calls to our backend.
  • Our development process is Model Driven (MDA)
    Rails gives the Ruby community productivity. For us, MDA gives J2EE a similar shot in the arm. Our complete stack with stubs for all business methods and web services, a default CRUD service layer, and all the J2EE XML config files are generated from a UML model. We can iterate from UML through to database and service layers in a matter of minutes. The MDA generator we we use is AndroMDA.
  • Our J2EE components are
    Axis (Web Services), Acegi (Security), Spring (Transactions), Hibernate (ORM), MySQL (Database) and JBoss (App Server).

Applebox

Posted by Dion Almaer at 8:21 am
6 Comments

+++--
3.8 rating from 13 votes

Saturday, December 1st, 2007

NASA Relaunches 5.0 with Prototype and Script.aculo.us

Category: Prototype, Scriptaculous, Showcase

NASA has relaunched their site tonight as NASA 5.0, in celebration of their 50th anniversary next year. It is the beginning of many web 2.0 features to come for NASA.

Sep Seyedi of Critical Mass told us that “of interest to you is the fact that the new interface fully uses the script.aculo.us and prototype Javascript frameworks for its implementation. It was a pretty challenging implementation but got through it.”

The new site features:

  • Transitions: Lots of animations in drop downs and trees
  • Accordion: Rollover news items
  • New topic based navigation
  • Calendar component
  • Tag cloud (now that IS Web 2.0
  • Bookmarking: My NASA and support for Digg, Del.icio.us, and more
  • Comments and polls throughout
  • Polls
  • Image gallery

NASA 5.0

Posted by Dion Almaer at 2:00 am
13 Comments

++++-
4.2 rating from 39 votes

Friday, November 30th, 2007

Thomas Fuchs uses Script.aculo.us 2.0 on his own site

Category: JavaScript, Library, Scriptaculous, Showcase

Thomas Fuchs is back in the consulting game and his new site gives us another glimpse of Script.aculo.us 2.0 abilities.

The photo zooming?

JAVASCRIPT:
  1.  
  2. Effect.PhotoZoom = Class.create(Effect.Element, {
  3.   setup: function() {
  4.     var currentHeight = $('text').getHeight();     
  5.     var newHTML = this.element.next('div.text').innerHTML;
  6.    
  7.     var left =  Thomas.photos.indexOf(this.element)*120 + 90;
  8.     var color = $w('ffa ffa ffa ffa ffa')[Thomas.photos.indexOf(this.element)];
  9.      
  10.     $('text_contents').show().update(newHTML).setStyle({height:'auto'});
  11.     var newHeight = $('text_contents').getHeight()+22;
  12.    
  13.     Thomas.clearTextBox();
  14.     $('text').setStyle({height:currentHeight+'px'});
  15.    
  16.     $('text').morph('left:'+left+'px;height:'+newHeight+'px;background-color:#'+color,{
  17.       duration: 1.2,
  18.       transition: 'linear',
  19.       propertyTransitions: {
  20.         left: 'bouncePast',
  21.         height: 'bouncePast',
  22.         backgroundColor: 'sinusoidal'
  23.       },
  24.       after: function(){
  25.         $('text_contents').show();
  26.         Element.update.defer('text_contents', newHTML);     
  27.       }
  28.     });
  29.    
  30.     this.animate('zoom', this.element, {
  31.       propertyTransitions: this.options.propertyTransitions || { }
  32.     });
  33.   }
  34. });
  35.  

Thomas Fuchs

Posted by Dion Almaer at 10:13 am
15 Comments

+++--
3.6 rating from 43 votes

Placeshout: New Rails based Geo-cool site

Category: Mapping, Ruby, Showcase

Andre Lewis has a new site out there, Placeshout which offers a way to quickly call out your favourites place in various locations.

You could argue that we have other places for this... Yelp for example, or My Maps themselves. So, why Placeshout?

Sometimes, you just want a quick suggestion

When Andre and I are looking for a hole-in-the-wall Mexican restaurant or a park with a softball field, we usually just want a quick suggestion, not a lengthy review. We want to know if a place is worth visiting in 30 seconds.

Placeshout isn't about volume - it's about trying to express the positives and negatives of a destination in as few of words as possible. If people agree, that "shoutout" moves up...if they don't, the shoutout moves down and begins to disappear.

We hope Placeshout makes it easier for you to find local destinations.

There are some interesting features in this, very Web 2.0-looking, site. One that stands out is the enhanced mapping experience on top of Google Maps. As you move around, directional arrows tell you how far various other cities are away. It is kinda fun to watch:

Posted by Dion Almaer at 10:05 am
3 Comments

++---
2.9 rating from 17 votes

Thursday, November 29th, 2007

Nintendo relaunches with Dojo, Mootools, and more

Category: Dojo, MooTools, Showcase

Nintendo.com has relaunched, and a view source shows you that it now sports Dojo, Mootools, and much more script.

As you hunt around for where you will see fun stuff in action you will find the game guide:

Nintendo

Take a peak and you see how they use inline templating.

HTML:
  1.  
  2. <textarea id="box_template" name="box_template" style="display:none;">
  3. {for g in list}
  4.         {if g.renderOK == "yes"}
  5.     {if (g.system) == "Wii"}
  6.       <div class="gameHolder wii_back" id="_!{g.id}" onmouseout="clearTimeout(noa.command.games.calloutTimer);" onmouseover="noa.command.games.throttleCallout(this)" style="display:none;">
  7.                <a href="/games/detail/!{g.id}" onclick="try{mojo.Messaging.publish('/games/guide/gameChosen')}catch(e){}">
  8.               <img class="boxart_image_wii" id="_i_!{g.id}" onerror="this.src='/images/games/guide/wiibox.png';" src="!{g.small_box_art.url}" />
  9.            </a>
  10.                 <p class="boxText">
  11.               <a class="boxTitle" href="/games/detail/!{g.id}" onclick="try{mojo.Messaging.publish('/games/guide/gameChosen')}catch(e){}">!{g.short_title}</a>
  12.             </p>
  13.             <p class="boxText boxDate">!{g.release_date}</p>           
  14.       </div>
  15.     {/if}
  16.           {if (g.system) == "DS"}
  17.       <div class="gameHolder ds_back" id="_!{g.id}" onmouseover="noa.command.games.throttleCallout(this)" style="display:none;">
  18.                <a href="/games/detail/!{g.id}" onclick="try{mojo.Messaging.publish('/games/guide/gameChosen')}catch(e){}">
  19.                     <img class="boxart_image_ds" id="_i_!{g.id}" onerror="this.src='/images/games/guide/dsbox.png';" src="!{g.small_box_art.url}" />
  20.                </a>
  21.                     <p class="boxText">
  22.               <a class="boxTitle" href="/games/detail/!{g.id}" onclick="try{mojo.Messaging.publish('/games/guide/gameChosen')}catch(e){}">!{g.short_title}</a>
  23.             </p>
  24.             <p class="boxText boxDate">!{g.release_date}</p>           
  25.       </div>
  26.     {/if}   
  27.   {/if}
  28. {/for}
  29. </textarea>
  30.  

Posted by Dion Almaer at 6:42 am
13 Comments

+++--
3.1 rating from 31 votes

Wednesday, November 28th, 2007

TWikiStudio on Ext

Category: Ext, Showcase

Dov Katz ported the TWiki install for JSLoader to use Ext 2.0.

The end result is TWikiStudio, a nice looking tool for managing (view/edit/search) a TWiki (twiki.org) installation.

TWikiStudio

Posted by Dion Almaer at 8:20 am
2 Comments

+++--
3.2 rating from 23 votes

Monday, November 26th, 2007

Zoho Writer Offline with Editing

Category: Gears, Offline, Showcase

Zoho Writer was quick to release offline support using Gears, which allows you to carry read-only views of your data around when you were offline.

This was just the first step in their offline support, and now they have announced the next step. This new version allows you to edit on the road with a synchronization system that keeps you sane:

Zoho Writer Offline Editing

Posted by Dion Almaer at 8:00 am
3 Comments

+++--
3.4 rating from 18 votes

Wednesday, November 21st, 2007

Wikipedia Offline with GearsMonkey

Category: Articles, Gears, Google, Offline, Showcase

Working on the Gears team we also run across applications that we would love to take offline. A lot of these applications aren't Google's so we thought it would be nice to be able to take third party apps offline. This also makes sense since Aaron Boodman (Mr. Greasemonkey) is co-tech lead on Gears itself!

Ben Lisbakken has written up his work taking Gears and Greasemonkey to make this happen. He details the real example of taking Wikipedia offline which has once piece of narly code to do with iframe injection to be able to store data on third party sites (e.g. media site vs. wikipedia main site):

  1. Initialize Gears on page
    • Check if site has been allowed, if not, trigger allow dialog
  2. Insert iFrame
  3. Initialize Gears on iFrame
    • Check if site has been allowed, if not, trigger allow dialog
  4. If Gears is initialized on both, insert Cache Page link (unless page is cached)
  5. When user clicks Cache Page:
    • Capture the HTML and CSS of the Main Page
    • Store the URLs of all links to HTML, CSS, and media files in the Gears database (so we can remove them from the ResourceStore later, if needed)
    • Create an iFrame whose src is in the domain of upload.wikimedia.org. Pass all media file URLs to the iFrame in the src URL after the hash, e.g. src="http://upload.wikimedia.org/#thisimgloc.jpg||anotherimgloc.jpg||lastimgloc.jpg"
    • Initialize Gears in iFrame
    • Capture all URLs from the iFrame's href hash.
  6. When user clicks [x] to remove an article from cache:
    • Grab all URLs from the Gears database that correspond to that article
    • Remove all URLs from the ResourceStore of the Main Page that contain the string "en.wikipedia.org"
    • Remove all URLs from the Gears database that correspond to that article
    • Create an iFrame whose src is in the domain of upload.wikimedia.org. Pass all media file URLs to the iFrame in the src URL after the hash, e.g. src="http://upload.wikimedia.org/#thisimgloc.jpg||anotherimgloc.jpg||lastimgloc.jpg||remove||"
    • Initialize Gears in iFrame
    • Remove all URLs from the ResourceStore that are listed in the iFrame's href hash.

Here's the script in action as I save pages away. This is just the beginning. Ideally we would have the code automatically save content that you have been too, and do smart spidering to get more on the subject too. We will also work on making GearsMonkey scripts even easier to write.

Posted by Dion Almaer at 9:24 am
12 Comments

+++--
3.4 rating from 262 votes

Monday, November 19th, 2007

Songza: Would you like a habituatable pie-menus with your social music?

Category: Showcase

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 by Dion Almaer at 7:11 am
24 Comments

++++-
4.4 rating from 31 votes

Tuesday, November 13th, 2007

Eye-Fi: Do you want Web 2.0 with your 2GB?

Category: Dojo, JavaScript, Showcase

I can just picture Dylan and Alex in a meeting with someone pitching:

So, we want to have a flash memory card, and put an Ajax application on it.

Well, they did it. Eye-Fi has launched and it combines WiFi with a 2GB card.

With Eye-Fi, your photos can be automatically sent to any number of popular online photo services (Shutterfly, Flickr, Facebook, SmugMug, etc.) and to your computer all via wifi. No need to dock your camera, sync the photos to your computer and then upload your photos to the various photo services. Just configure the wifi and start taking pictures! It’s that easy!

SitePen helped develop the application, using their trusty Dojo. Worlds are colliding.

Posted by Dion Almaer at 12:47 pm
6 Comments

+++--
3.1 rating from 17 votes

Wednesday, November 7th, 2007

Mindmeister: Take your mind map offline

Category: Gears, Offline, Showcase

Mindmeister has taken their mind map tool and now allow you to map offline.

The tool itself is a nice Ruby on Rails application (includes pink fade effects! yellow is so 2006) that gives you a visual canvas to play with your mind.

Mindmeister Tool

Their approach to offline is similar to Google Reader in that the user has to say "hey, take me offline". The interface to that is a nice little slider widget. At the point your maps are sync'd down to the local store.

Mindmeister Sync

I would love to see it auto sync, and I noticed a couple of issues when I actually went offline but didn't tell the tool first (would be nice to have the tool grok that) but the mind map tool in general is a nice app to use. It feels like Geni.

Posted by Dion Almaer at 12:52 pm
5 Comments

++++-
4 rating from 21 votes

Tuesday, November 6th, 2007

MarkMail: Search and Analyze Email Traffic

Category: Showcase

Jason Hunter of MarkLogic has unveiled a new application that allows you to search and analyze email traffic. The service is called MarkMail, and you can check out the Apache instance to see it at work.

The application is written using MochiKit.

Jason gave us detailed information on the goals:

As you'll see with the chart on the home page, one of our goals with the site has been to focus heavily on analytics. We have lots of graphs and counts, and you're able to use them to watch Apache's historical growth and each individual project's growth. Every query you write gets its own histogram chart.

Another goal has been interactivity. Every search result screen gives you lots of ways to refine your search (by sender, list, attachment type, etc). Plus we did a lot with keyboard shortcuts. You can hit "n" and "p" to move to the next and previous result and "j" and "k" to move up and down the thread view. There's a lot of little things like this. Plus if your result message includes Office or PDF files they're in-line interactive too.

http://apache.markmail.org/search/ext:ppt+axis

Another goal has been to focus on community. We could have launched MarkMail with 50,000,000 emails from many sources but I think it's better to start with focus. In fact, I'll be at ApacheCon and the Hackathon next week, along with my co-developer Ryan Grimm, looking for people's suggestions and maybe on the spot adding in a few of them. There's also potential to explore some fun one-off analytics, too.

As part of the focus on communities, we setup MarkMail so it recognizes that Apache itself consists of many communities. If you go to http://apache.markmail.org you search all Apache emails, but if you go to http://struts.markmail.org then you're auto-limited to just Struts lists. Same for tomcat, spamassassin, httpd, and so on. You can always limit your search using "list:struts" in your query, but using the domain handles that a bit more elegantly.

Notes on using the site:

  • Search using keywords as well as from:, subject:, extension:, and list: constraints
  • The GUI doesn't yet expose it, but you can negate any search item, like -subject:jira.
  • You can sort results by date by adding order:date-forward or order:date-backward to your query
  • Remember to use "n" and "p" keyboard shortcuts to navigate the search results

MarkMail

Posted by Dion Almaer at 7:55 am
1 Comment

+++--
3.2 rating from 22 votes

Google Code Revamps with jQuery

Category: Google