sorted by: recent | see : popular

Content Tagged with yahoo! + showcase

Nick Bouton has released Protagonize, an
online writers' community dedicated to the (nearly) lost art of the adventure, a type of collaborative fiction. Once an author writes a story, others can post branches to that story in different directions.

We chatted with Nick about the new site:

What was your inspiration?

Early forms of this on the web date back over a decade, when Snoot.com popularized a site called "Choose Your Own Schizophrenia", an collaborative fiction site popular in the mid-to-late '90s. Of course, this all dates back to the old Choose Your Own Adventure™ series that started back in 1979 and ran until 1998, published by Bantam Books.

I developed Protagonize as an attempt to modernize the collaborative creative writing arena a bit and inject a little Web 2.0 love to produce a better interface. So far, so good.

How did you use Ajax?

The site uses the Yahoo! User Interface (YUI) library quite extensively.

Here's a brief overview of the features that use AJAX calls (thus far -- still adding more):

• Commenting (add/delete)
• Add & remove favourites & page markers (like a bookshelf)
• Story ratings
• Modal dialogs (login)
• Send to a friend
• Contact author
• Report an item

All of the AJAX calls I've written return JSON objects as results, so the transactions are quite lightweight. We also use JavaScript pretty heavily throughout the rest of the site -- for example, branch previewing is all JS, and the YUI TabView control is used for managing your favourites / page markers / top rated listings; the lists are each loaded once and reformatted into different sorted views via JS.

The site also uses FCKEditor for content editing, which is a pretty JS-heavy component on its own.

What features are you proud of?

The ease of use of the interface. The TabViews were a lot of work to get working nicely and I'm pretty happy with those, too. My AJAX calls are pretty snappy (particularly managing your favourites and page markers), and I really liked using the YUI Animation effects to do fade-ins and fade-outs when showing/hiding dialogs and deleting items. Makes the whole app feel nice and smooth.
The toughest parts were probably securing the AJAX/JSON calls and dealing with user input validation gracefully (I can still work on that a bit -- not very happy with the built-in ASP.NET client-side validation scripts). I've also had some minor layout problems with smaller-market
browsers (specifically Opera) that are a pain in butt to track down.

I'd also like to make user profiles feel a bit more personal; they're a little cold right now without any way to put in your own image, but I think the profile blurb and quote helps people customize it a bit so far.

Future plans?

Future plans - the main large feature I'm I'm going to be adding in the next month or two is user-created and controlled group functionality. Groups will be either be open or closed membership, where closed groups would require an invitation and optionally not be displayed on the front end of the site (i.e. public/private), and open groups would allow people to join in at will. That way we could cater to your usage, private & closed groups, and allow others to use the feature in a different way, maybe for close circles of friends who don't want other people participating in their stories.

Nick has some more cool projects coming over at Taunt Media too.

Flickr has released a new browser photo uploader that uses Flash and JavaScript to let users grab multiple files, and give them progress on the upload process.

The heavy lifting is done by the Flash FileReference & FileReferenceList classes, which give you the callbacks on progress.

Newsvine has relaunched itself. The "evergreen" release empowers the user to create a newspaper that fits their taste.

You will now see:

• That you can drag and drop content around the page
• You can add news sources
• You see how live the web stream is

The live piece is a little disorientating (but you can of course just click the X and be done).

The cool Ajax features are done using YUI, and there are age old hacks hidden in a view source, such as:

Just having an unbeforeunload event handler -- regardless of whether or not it actually does anything, regardless of whether or not you spawn a dialog box or not, even if the entire function declaration consists entirely of just { } -- just defining an event handler will prevent the page from being cached -- ever.

As a matter of fact, even if you allow page caching, the page will be not be cached. Having an onbeforeunload event means the page will be re-built every single time it is accessed. Javascripts will re-run, server-side scripts will be re-run, the page will be built as if the user was hitting it for the very first time, even if the user got to the page just by hitting the back or forward button.

I have always liked the look of Newvine. It is great to see the relaunch.

What Should I Say? is a new question and answers site that uses YUI, JSON, and other libraries to subtly use Ajax throughout.

An example check out the very visual sorting:

Erik Swenson of Open Reports has created an Ajax Report Viewer: OpenReports Report Viewer.

The example uses YUI and YUI-EXT. Click to see the flash demo.

iFilm has just relaunched with a nice rich redesign.

Mark Kawakami is one of their developers, and he told us:

We've integrated Ajax and DOM scripting all over the place, like our sexy new carousels, dynamic video resizing, emailing, commenting and even login. We're using tight, lean, semantic and validating XHTML (or at least very close to validating) which powers a clean new interface. On the back end, we've made a lot of use of the Yahoo! YUI toolkit (which I find I have grown to damn near love).

Dustin Diaz is a UI engineer at Yahoo! that worked on two new setup wizards to help design your store and add items into your product database.

My specific area of development was channeled into the Design Wizard which allows a merchant to choose between various custom designed templates or pick a generic design with modified colors and/or layouts. My utilities of choice were heavily influenced by the tasks that needed to get done, and with that said, here is a brief overview of how I included each one into our application.

His work includes:

• Using the DOM Collection util to essentially manage styles in the DOM by getting and setting the various colors of the template when choosing a particular color palette (theme)
• The second (and perhaps obvious) utility of choice is the Event manager which almost always seems to go hand-in-hand with the DOM utility. This made for simple event attachment by allowing me to batch events to several elements at once
• Animation: Let me be the 1,000th person to say this; Not all animation is tasteful animation. This is perhaps why we went through several iterations of what constitutes a helpful animation. Often times when modifying the DOM when a user least expects to see a change, that may very well be the best time to add a bit of animation or a doohicky of some sort to let the user know that something is happening.
• Connection Manager: Load in content via Ajax and the connection manager.

Jack Slocum of Yahoo! has created an Ajax front end to phpBB that looks a lot like Yahoo! Mail, and applications in general.

(via Alexander Kirk)

Back in June we talked about how Yahoo! Photos: will be relaunching and it has happened.

What are the most interesting features?

• Slick new interface with drag-and-drop, tagging and search features to really help simplify organization
• The ability to download high-resolution photos and order prints online for pick-up at local Target stores
• Great sharing capabilities through integration with Yahoo! Mail, Messenger, Mobile and 360
• The ability to comment, rate and tag photos really helps foster interaction

10 Cool Things about it:

1. Drag And Drop/Selection Model
2. Keyboard Shortcuts
3. Inline Editing
4. New User Tips
5. Animation and Eye Candy
6. Progressive Loading
7. Upload Tools
8. Messenger Integration
9. Target Store Locator
10. YUI Connection Manager Usage

People talk of the Yahoo! Flickr acquisition, butYahoo! Photos has many, many more users. So, it is about time to see it get a face lift, which Yahoo! has done, and is rolling out a limited beta release.

Product highlights include:

• Drag-and-drop functionality for easy organization and photo sharing
• Photo tagging—or labeling—for easy viewing and searching
• Enhanced interaction with friends and family with ability to share comments and provide instantaneous access to photos
• Point-and-click tag and caption editing
• Smart Albums that detect newly tagged photos and automatically add tagged photos to albums
• Open APIs to encourage third-party use and collaboration
• Integration with leading Yahoo! services, including Yahoo! Mail, Messenger, Mobile and 360
• Downloadable high-resolution photos

Max Kiesler has just gotten back from the launch event and seems impressed:

Two features of note were the infinite scroll and the drag and drop functionality. I know what you're saying, "not another web app with slow unusable drag and drop". This drag and drop was very smooth and had some unique functionality. The ability to multiple select images by clicking your mouse and dragging your highlight (just like on your desktop) was one of my favorite features. You can also multiple select by control clicking as many photos as you like. From a design standpoint what happens to the photos during the drag process was rather cool. After you multiple select photos they shrink to tiny thumbnails and cluster around the mouse, then you can drag them into a well at the top of the page. As you start the drag process the well appears at the top of the page no matter how far down the page you are then it disappears. This is a very nice answer to the drag and drop well issue that many of us have had to design for recently.

The other item of note was the infinite scroll. While this is not an entirely new concept it is a great feature for a photo site. For those of you who have not seen this yet, it basically lets you add data, in this case photos to the page asynchronously as you scroll down the page. So even if you have 10,000 photos they can all be reached from one page very quickly.