Activate your free membership today | Log-in

Friday, November 30th, 2007

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 261 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, JavaScript, Showcase, jQuery

We have revamped Google Code, the site which is the home to developers, and open source hosting. A ton of work went into cleaning up the UI integrating and unifying content, and simplifying.

The site uses jQuery for a lot of its work, and also eats a lot of dogfood. The video below goes through some of the high lights, but DeWitt Clinton said it well:

One of the most exciting things about the redesign is that everything you see here was built using technology and APIs that are available to everyone. The pages we're serving don't rely on any secret back-end tricks; the site is built on plain HTML, JavaScript and CSS, each using our public APIs. In fact, all of the techniques used on Google Code can be duplicated on your own site.

For example, the search results pages use a combination of the AJAX Search API and Custom Search Engines. The homepage gadgets use the AJAX Feed API and Google Reader feeds. The videos are powered by the YouTube API, the blogs by the Blogger API, the events powered by the Google Calendar API, the metrics by Google Analytics, the forums by Google Groups, etc., etc..

Stay tuned -- over the upcoming weeks we'll offer detailed articles and tutorials about how we built the various parts of Google Code using open technologies.

This is just the beginning of a slew of updates that we are making to the site. I can't wait to roll out some of the items that really match our vision of what a developer community can really be!

Posted by Dion Almaer at 6:33 am
11 Comments

+++--
3.9 rating from 65 votes

Friday, November 2nd, 2007

New Ajax for Old Iron

Category: Ext, Flash, JSON, Showcase

In the rush to develop entirely new Web 2.0 systems based on Ajax, it is often easy to lose sight of how it can be used to improve the so-called "legacy" enterprise systems. Over at the Ext JS blog, there's a post about German developer who put together a reporting/BI application to front-end RPG code running on an AS400.


The backend serves up JSON data (together with this old article about reskinning a Spring MVC application with Tibco GI, it makes for a solid approach for refactoring existing webapps) to the Ext JS/Flash front-end. Slick. You can view a demo (unfortunately in German for you non-German speakers) here.

Posted by Dietrich Kappe at 11:44 am
8 Comments

++++-
4.2 rating from 63 votes

Wednesday, October 31st, 2007

Gmail gets a JavaScript facelift

Category: Google, Showcase

Dan Pupius is a stellar JavaScript developer at Google, and he has been knees deep in producing a new front end framework for Gmail which is now launching into the wild, and it is all about speed:

We have also been fanatical about speed. Even on a fast Internet connection, it can take a second to request and render a new web page, and when you read a lot of mail, these seconds can accumulate to hours waiting for email to load. We've spent a lot of time profiling all parts of the application, shaving milliseconds off wherever we can, and figuring out workarounds for some pretty deep-rooted issues with the current browser implementations. Some of the most common actions should be faster now. For instance, we prefetch messages in the current view, so when you open an email your browser doesn't have to talk to Google's server; it just displays the message. These techniques really shine on newer browsers and computers. Using an alpha version of Safari 3 on a MacBook, we're seeing sub-200ms times when opening messages—pretty quick.

Aaron Boodman of Greasemonkey and Gears fame also weighed in:

At Google, we dogfood all our products. That means, among other things, that we use Gmail all day for all our internal mail. I don't know of any other company producing web mail that can claim that. It also means that we have really high standards for these products. 500ms latency is usually considered great for a web application, but for something you use all day, it just won't cut it. Because of this, the Gmail team has been to hell and back several times over the course of this project, trying to shave milliseconds off frequent operations.

As one small example, one team member reverse-engineered jscript.dll to figure out how its GC algorithm worked, and was horrified to find that it had hard-coded, arbitrary limits on how many objects could be allocated before a GC would occur. This led to an insane amount of effort optimizing the code to reduce the number of allocations in core code paths.

I will try to pin Dan down on some of the practical details on how you can make your apps run fast too. It is great to see a new rev of one of the early Ajax pioneers.

Posted by Dion Almaer at 1:05 am
11 Comments

++++-
4.2 rating from 43 votes

Tuesday, October 30th, 2007

Xythos On Demand Ajax Revamp

Category: Screencast, Showcase

Xythos On Demand is a software as a service application that lets you share files. They have released a new version that uses YUI and various commercial components to create a desktop-like application.

Eric Preston is the team lead, and I got a chance to visit him in the Xythos San Francisco office to chat about the new launch. Eric chats with us about the new Ajax features, and then gives a full screencast of the application itself.

Posted by Dion Almaer at 8:26 am
1 Comment

+++--
3.9 rating from 31 votes

Wednesday, October 24th, 2007

SomeTests: Take an Ajax quiz with an Ajax app

Category: GWT, Showcase

SomeTests is a new GWT application written by Mike D'Amour that lets you create tests and quiz your friends.

Will Gorman sent us his Ajax libraries quiz, and Mike's own GWT test.

Sometests

Posted by Dion Almaer at 6:44 am
9 Comments

++++-
4.3 rating from 34 votes

Tuesday, October 23rd, 2007

JDA Mashup Editor

Category: JavaScript, Showcase, Utility

Peter Svensson has written a Web-based mashup editor JDA Composer.

The Composer uses JDA itself, and lets you build blocks using Blueprints. You can take it for a drive, or watch the screencast.

Features

  • Visual design of page/gadget UI
  • Basic styling in place (colors, fonts, background images)
  • Using openJacobs draw2d graph library for UI creation and drawing component relations)
  • Using Dojo 4.3 for menus, windowing and basic magic. Gotta *love* dojo :)
  • JavaScript IDE for creation of JDA (Javascript Dataflow Acrchitecture) blueprint components, editable in Christofe Dolivet's EditArea javascript-based code editor.
  • "Live" components, usable on the fly when created and connected
  • Exportable pages/gadgets to basic HTML+PHP backend, Joomla module and remote Google gadgets
  • Basic developer key management implemented.
  • All components and pages can be stored and used by all.
  • Community features coming... "soon" :)

JDA Mashup Editor

Posted by Dion Almaer at 7:09 am
25 Comments

+----
1.5 rating from 80 votes

Friday, October 19th, 2007

Blog.gears: An offline Blogger client using the new GData Blogger JavaScript Client

Category: Examples, Gears, Google, JavaScript, Screencast, Showcase