Activate your free membership today | Log-in

Friday, August 29th, 2008

The Ajax Experience Framework Summit

Category: Dojo, Prototype, The Ajax Experience, jQuery

We talked a few months ago about something new we’re doing at the Ajax Experience this year: the “Framework Summit.” Basically, we’re providing space for Prototype, jQuery, and Dojo to hold their own half-day events on-site, and these events are free and open to the general public.

Since we announced the summit, the frameworks have created their agendas for their events for their events:

Dojo Developer Day:

- Welcome, Introductions (Alex Russell, Dylan Schiemann)
- Tutorial - Progressive Dojo (Peter Higgins)
- Presentation - DojoX GFX and FX (Matthew Russell)
- Presentation - Secrets of DojoX (Tom Trenka)
- Tutorial - Getting going … Zend + Dojo (Matthew O’Phinney)
- Tutorial - Dijit Layouts In and Out (Nikolai Onken)
- Tutorial - Reusable code, Widgeting (Peter Higgins)
- Community - Getting Involved (Peter Higgins, Nikolai Onken)
- Lightning Demos - What do you have? Show us.

Prototype Developer Day

- Welcome, Introductions (Prototype Core members)
- Contributing docs (Christophe Porteneuve)
- Contributing code (Andrew Dupont)
- Prototype & Performance
- Extended Q&A (Prototype Core members)

jQuery Developer Day

- State of jQuery (Rey Bango)
- Progressively Enhancing the User Experience Using jQuery (Karl Swedberg)
- An In-Depth Look at jQuery UI (Paul Bakaus)
- jQuery Team Code Review (jQuery Team)

Other Frameworks?

Some have asked why we didn’t also include Framework X, Y, and Z at the summit. We have a simple answer: we only had room for three frameworks so we choose the three most popular frameworks (according to every survey we’ve seen). If the concept is successful this time around, we hope to do it on a bigger scale next year.

Obviously we hope you can make it to the entire Ajax Experience event, but if you can’t do that, consider coming to one of the Framework Summit events. See you there!

Posted by Ben Galbraith at 7:00 am
7 Comments

+++--
3.4 rating from 7 votes

Wednesday, August 13th, 2008

Tripeedo: Command line for travel

Category: Prototype, Showcase

Tripeedo is a new little site that uses Prototype to power a command line for travel. You just type in where you want to go and when, and it will launch you into a search. I really enjoy the command line interfaces, and much prefer them to the long forms that travel sites put up for you. The calendar components normally always suck.

Tripeedo is a showcase of the wundrbar that has been customized for the world of travel.

Posted by Dion Almaer at 4:59 am
3 Comments

+++--
3.4 rating from 22 votes

Wednesday, July 30th, 2008

onJSReady Prototype Plug-in

Category: JavaScript, Prototype

In a follow-up to our post a few days ago on parallelizing JavaScript loading and firing an event when loading is done, Stefan Hayden wrote a Prototype extension (based on onDOMReady) that makes it easy for you to execute your code when all JavaScript is loaded:

JAVASCRIPT:
  1.  
  2. Event.onJSReady(function () { dependent_on_external_js(); });
  3.  

Posted by Ben Galbraith at 9:30 am
3 Comments

++++-
4 rating from 16 votes

Tuesday, July 29th, 2008

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
3 Comments

+++--
3.9 rating from 17 votes

Friday, July 18th, 2008

Gratuitous animation at the new Borders.com

Category: Prototype, Usability

Bill Scott took a peak at the new borders.com and quickly saw an instance of the anti-pattern: Animation Gone Wild.

Here it is in action:

And his analysis:

Instead of popping up the book, music, dvd information quickly we are required to watch the talent of the developer to sloooowly animate the box into place. Come on folks, we can do better than this!

There is no need to see utility objects like this animate into place.

Here is the general rule. Try your feature without animation. Is the meaning clear? If so then don't add ANY animation. If it is not, try adding a quick animation. Did that get it? Then stop there.

Save animation for when you need it. Animation is good for at least seven reasons:

  • Maintain context while changing views. Carousels are a good example of this. The scroll animation helps the user maintain context as they move through information.
  • Explain what just happened. The Apple store Customize your Mac uses this to highlight price changes while configuring a Mac for purchase.
  • Show relationships between objects. The Mac Genie effect when closing or opening windows. It is fast enough and it ties the iconified window to the dock.
  • Focus attention. Backpackit's Spotlight technique focuses attention on the change that happened.
  • Improve perceived performance. Progress Bars.
  • Create an illusion of virtual space. Yahoo! Home page's personal assistant (Tabs animate open).
  • Engagement. Mini-Cooper site, configure your car. The animation is fun.

BTW, I go into detail on animation in my upcoming O'Reilly Book, Designing Web Interfaces.

Posted by Dion Almaer at 6:02 am
1 Comment

+++--
3 rating from 1 votes

Semantic Constructors

Category: Prototype, Tip

JAVASCRIPT:
  1.  
  2. Class.create = (function(original) {
  3.   var fn = function() {
  4.     var result = original.apply(null, arguments);
  5.     result.toString = function() { return result.prototype.initialize.toString() };
  6.     return result;
  7.   };
  8.   fn.toString = function(){ return original.toString() };
  9.   return fn;
  10. })(Class.create);
  11.  

This monkey patch by kangax allows you to get sense from inspecting a constructor setup via Prototype.

His code changes a simple person class from:

JAVASCRIPT:
  1.  
  2. Person + ''; // "function klass() { this.initialize.apply(this, arguments); }"
  3.  

too:

JAVASCRIPT:
  1.  
  2. Person + ''; // "function (name) { this.name = name; }"
  3.  

If you want more help with Prototype and Script.aculo.us you can check out their newly changed support list.

Posted by Dion Almaer at 5:37 am
Comment here

+++--
3.7 rating from 15 votes

Monday, July 14th, 2008

Creativescrape: Thomas and Amy team up again

Category: Prototype, Showcase

Creativescrape

Thomas Fuchs and Amy Hoy have teamed up again for a micro-app called Creativescrape "an inspration utility for those moments when you just seem to be braindead. It comes with a OS X screensaver for your enjoyment."

All via 188 lines of fun living on top of Prototype and Script.aculo.us.

Posted by Dion Almaer at 6:30 am
1 Comment

++---
2.5 rating from 15 votes

Wednesday, July 2nd, 2008

Starfield Sim Picasa Gallery with Prototype

Category: Prototype, UI

Asad Sheth has been playing with a Starfield Sim Picasa Gallery using Prototype. He said:

I think it's an interesting way to think about temporally organized data (I could see RSS feeds navigated through some similar mechanism, with the z-axis being time and the x- and y-axes being some kind of similarity measure), and further display that graphical presentation is not the sole domain of Flash.

PhOdyssey

Posted by Dion Almaer at 10:58 am
3 Comments

+++--
3.8 rating from 16 votes

Thursday, June 26th, 2008

Book Excerpt: Practical Prototype and Script.aculo.us, Advanced Ajax Chapter 4

Category: Books, Prototype

Andrew Dupont has written Practical Prototype and Script.aculo.us and has kindly given us a chapter excerpt to peruse.

You can download chapter 4 in PDF format here. The chapter covers "Ajax: Advanced Client/Server
Communication":

By now, you’re almost certainly familiar with Ajax as a buzzword. Technically, it’s an acronym—Asynchronous JavaScript and XML — and refers specifically to JavaScript’s XmlHttpRequestobject,which lets a browser initiate an HTTP request outside the confines of the traditional page request.

Yawn. The technology isn’t the exciting part. Ajax is huge because it pushes the boundaries of what you can do with a web UI: it lets you reload part of a page without reloading the entire page. For a page-based medium like the Web, this is a seismic leap forward.

The chapter delves into the world of Ajax.Request, Ajax.Updater, Ajax.PeriodicalUpdater, by showing subtle examples of how to deal with timers, errors, and a lot more.

Like the chapter? check out the book home page.

Posted by Dion Almaer at 7:16 am
1 Comment

++++-
4.4 rating from 29 votes

Thursday, June 19th, 2008

Audible Ajax Episode 27: SproutCore with Charles Jolley

Category: Podcasts, Prototype

SproutCore Photos

On the back of the iPhone 3G news at WWDC, the next biggest thing was the launch of Mobile Me, a compelling user experience to access Apple services using standard Open Web technology.

The application is written using the SproutCore framework, and I got to sit down with Charles Jolley, one of the founders.

We talked about the history of the project, how it differs from other frameworks that are out there, and where they are going. It is interesting that this podcast comes after the 280 North one, as they are both Cocoa inspired.

SproutCore is much more JavaScript focused though, and gives you MVC in the client in a simple and intuitive way. I found it interesting to see how the framework has developed, from its Rails plugin roots, to now (dispel myth: it has no dependency on Rails, just some build files are Ruby).

Charles talks about techniques that they use to give you fast applications (common global event dispatch seems key, and Prototype 2.0 is adding this) and how he feels that compelling rich browser applications will keep pushing the browser vendors to speed up, and shape up!

We have the audio directly available, or you can subscribe to the podcast.

Posted by Dion Almaer at 4:39 pm
6 Comments

+++--
3.5 rating from 74 votes

Wednesday, June 18th, 2008

72photos: Proto/Scripty Photo Sharing Site

Category: Examples, Prototype, Scriptaculous

XMG Networks has thrown their hat into the on-line photo sharing ring with the launch of 72photos, an Ajax-heavy site which looks at least partially inspired by Apple's iPhoto '08-generated web galleries.

We asked 72photos to tell us a bit about how they went about building the site and how it compares to competitors like Flickr and Smugmug; "Eric A" kindly replied with some details:

Building the Site

We do indeed use Prototype / Scriptaculous for our main Javascript frameworks and it's been that combination from the very beginning. There's always been a way to accomplish want we've needed PT and is due to the fact we tend to use more of the basic PT functions (selectors, event handers) and build our own "sub-frameworks" as we go along. Our functionality is fairly unique to the web and hasn't been done in any sort of pre-packaged framework yet (as I know of). Thus, we found ourselves building a good portion of things in-house.

Features

We don't do anything extremely new or groundbreaking in terms of features at the moment, somewhat of a reason for that is the fact our site appeals to a large percentage of novice users and we wanted to tune our functions to resemble something such as a desktop application which seems to be the familiar place for all users. However, as development continues, we're constantly finding the balance between integrating professional features as well as fine-tuning the basic features that everyone is familiar with. There are a myriad of experimental features we have planned and developed, but opted to build a solid foundation incorporating those familiarities before implementing our more eccentric features which we'll be looking to integrate over the next few months.

Compared to Other Photo Sharing Sites

1. Fully customizable photo galleries - Our gallery interface features drag & drop functionality to add and arrange photos in a gallery. Real time customization options let users customize the colors and fonts for the gallery and preview the changes real-time. Several preset gallery themes are also available. Here's a sample screen:

2. Profile pages - All users get a full profile page displaying all their photos, tags and galleries elegantly:

3. Community Features - Our community features are also superior to that of other sites, such as the ability to track friends activity by seeing recent uploads or galleries by them and having the ability specify the type of friend they are (friend / family) then modify your photo/gallery/profile permissions accordingly.

4. Editing - Our editing features are all done in Ajax / Javascript which covers the basic cropping, effects, enhancing, constraining and will soon feature much more robust functions including step-by-step versioning (compared to our basic versioning features) and a greater array of editing effects and manipulation functions (batch editing, watermarking, etc).

5. Webspace - We always save users fullsize photos, no size caps on individual photos or monthly limits. Only an overall size limit per account type (free or pro).

6. Usability - All the backend functions are done "real-time" in lightbox windows, so there is minimal page reloading which is offers a considerable increase in efficiency when working with photos and galleries.

Eric also shared some of their plans for the future:

Currently, 72photos is just an evolved version of sites such as Smugmug, Flickr, and Zenfolio. Offering features to professionals and novice users in a carefully thought out and intuitive interface. In the near future we'll be greatly expanding our community features to cover areas of what you do after the point of uploading and editing your photos. Such as offering areas for photographers and artists to sell their art and other areas such as a place allowing models to find photographers in their area, vice versa, and more.

I just wish the iPhone would follow other handset manufacturer's lead and put a really nice camera in the phone. I know I'd pay extra money to have a 4 MP camera with a nice lens and a flash...

Posted by Ben Galbraith at 5:00 am
5 Comments

+++--
3.9 rating from 29 votes

Wednesday, May 7th, 2008

Lazily load functionality via Unobtrusive Scripts

Category: JavaScript, Prototype

David Kees has written about Using Prototype to Load Javascript Files, which is an implementation of the general technique of loading functionality via scripts based on the availability of DOM elements.

He started using the technique to scratch an itch:

The calendar on this site only appears on pages that show blog-related information. That calendar is enhanced with Javascript allowing you to change the month displayed by the calendar without reloading the rest of the page. So, in order to ensure that these enhancements would be available everywhere the calendar is, I figured I had two options:

  1. Code the inclusion of the Javascript file into every page which requires it. While a good solution, and one that has worked well in the past, sometimes it can be difficult to remember or realize that you've forgotten to include the file when you add new pages that require it.
  2. Find a way to automatically include the file when it's needed. This would avoid the need to remember the need to include it when adding new pages that require it, but would result in a little more Javascript going on when the page loads.

Here is an example implementation:

JAVASCRIPT:
  1.  
  2. document.observe("dom:loaded", function() {
  3.         var calendar = $("calendar");
  4.         if(calendar) {
  5.                 var script = new Element("script", { type: "text/javascript", src: "/path/to/calendar.js" });
  6.                 document.observe("calendar:loaded", function() { new Calendar(calendar); });
  7.                 $$("head")[0].insert(script);
  8.         }
  9. });
  10.  

Posted by Dion Almaer at 1:02 pm
16 Comments

++++-
4.3 rating from 27 votes

Monday, May 5th, 2008

Ajax Pioneer Week: Sam Stephenson of Prototype

Category: Interview, Podcasts, Prototype

We are having a special week at Ajaxian. Ben and I are giving an Ajax talk at JavaOne this week, and decided to put a little video from Ajax pioneers. As we worked out what we wanted to do, we asked the pioneers for a little time to do an interview. Although only a piece of the interview will be used in the live presentation, we wanted to get the full interviews for the community here.

During the week you will hear from:

  • Sam Stephenson of Prototype
  • Bruce Johnson of GWT
  • Alex Russell of Dojo
  • John Resig of jQuery

On Wednesday, we will have a special video that features Ben and I having some fun with a new type of Ajax application.

Let's cut to the chase, and listen in to Sam Stephenson. Although we couldn't get to him in person, he kindly recorded himself via his laptop. My voice quality is poor, but we are all hear to listen to his thoughts on:

  • The future of Prototype
  • What excites him about new versions of Prototype, and what problems are they trying to solve
  • Thoughts on the current crop of browsers, and what he wants to see

In the interview he discusses pdoc, a new inline documentation tool, Sprockets, a tool to help package Prototype, and new event delegation techniques.

Posted by Dion Almaer at 11:16 am
16 Comments

++++-
4.4 rating from 38 votes

Tuesday, April 29th, 2008

Twistori: Telling a story with Tweets and Script.aculo.us

Category: Prototype, Scriptaculous, Showcase

Twistori

Twistori is a fun little site created by Amy Hoy and Thomas Fuchs. As you would expect, design is a key part of the application, and the Prototype / Script.aculo.us combo pull off the work.

The site pulls in live data on various topics (love, hate, think, believe, feel, wish) via the real-time twitter search tool summize.

In related Twitter news, I created a Greasemonkey script Twitter Translate that auto-translates foreign text to your language inside Twitter.

For more Ajax news, you can follow me @dalmaer or our new @ajaxian account.

Posted by Dion Almaer at 7:08 am
4 Comments

++++-
4.2 rating from 43 votes

Wednesday, April 23rd, 2008

Timeframe: Prototype date range component

Category: Component, JavaScript, Library, Prototype

Stephen Celis got tired of wiring together two date pickers for the common use case of grabbing a date range, so he created timeframe, which is "Click-draggable. Range-makeable. A better calendar."

Based on Prototype, you can whip up some code such as:

JAVASCRIPT:
  1.  
  2. new Timeframe('calendars', {
  3.             startfield: 'start',
  4.             endfield: 'end',
  5.             previousbutton: 'previous',
  6.             todaybutton: 'today',
  7.             nextbutton: 'next',
  8.             resetbutton: 'reset' });
  9.  

And then you get:

timeframe

Check out the live example to really see it at work.

Posted by Dion Almaer at 6:25 am
10 Comments

++++-
4.3 rating from 30 votes

Monday, April 21st, 2008

ProtoRPG: Role Playing with Prototype

Category: Games, JavaScript, Prototype, Scriptaculous

Sometimes you want Monday to be a Friday, so we have ProtoRPG, a role playing game written by Pierre Chassaing in JavaScript using Prototype and Script.aculo.us.

Walk around, add to your inventory, and feel like you are playing your first RPG many moons ago, on a Friday.

Proto RPG

Posted by Dion Almaer at 7:32 am
1 Comment

++