YUI Slideshow is a YUI3 module which enables us to convert any HTML element’s children into animated slideshows.

It comes with a bunch of configuration options to customize the slider like:

• animations used (for both incoming & outgoing slides)
• intervals between each image
• duration of them
• autoplay
• & more..

The module has play/pause/previous/next controls for easily creating a player interface.

10+ different animation types can be choosen from various fade & swipe effects.

It is also possible to create advanced & custom animations where an example is already provided.

Picok (personal information cockpit) is an open source, multi-user script where users can create their own iGoogle-like start pages.

It is ideal for intranets as an admin account can pre-define the available components like feed addresses & users can select items from that list.

Similar to iGoogle, the items can be:

• drag’n dropped
• minimized
• configured

The script has integration support for Lotus Notes, Doodle, Wikipedia, Google Maps & more. Also, users can create post-it notes.

Picok offers a multi-language interface & can be extended by writing custom portlets.

It is built with PHP (Zend Framework), YUI & supports MySQL, Microsoft SQL Server, IBM Lotus Notes.

Most of us are familiar with the beautiful interface of Yahoo Pipes, how objects are wired to each other.

There is an open source JavaScript library, which enables you to create a such visuality, named WireIt.

The library is very suitable for creating dataflow applications (like a family tree) or visual programming languages.

WireIt is very well-documented & has some attractive examples.

It uses the YUI library for DOM and events manipulation, and excanvas for IE support of the canvas tag.

JavaScript, with the rise of Ajax, is definitely a must-know-well for every web designer/developer.

Besides form controls, alerts & similar simple JavaScript usage, you can almost do anything with the help of JavaScript (& Canvas). Some samples are:

• Drag’n drops
• Animations
• CSS manipulations, Ajax & more.

And there are JavaScript libraries which make them easier like jQuery, MooTools, Prototype, etc.

For any developer looking for advanced JS techniques, games are a real treasure.
 

You can easily see examples of animations, interactivity, smart solutions for browser related math functions & so.. And they are definitely a source of inspiration as you sometimes face with a feature that you never thought could be existed.

Also, this is the last month of a busy year & every web designer/developer deserves some fun : ).

So, here are 25 amazing (sometimes not the game itself but how beautifully it’s done) JavaScript games that you’ll love.

Bunny Hunt

A classic hunting game with an easy to play interface.

Make sure you check the source of the website to see how simply it is built with the power of XHTML, CSS & JavaScript.

JavaScript Library: none.

Travians

A character game (like Sims) where you’re a villager.

It is a multiplayer game & totally Ajaxed. You can move your character, communicate with other user & more.

JavaScript Library: xajax.

Digg Attack

This is certainly a Web 2.0 game. It is a JavaScript / Canvas 2D Shooter using live data via the Digg API to spawn enemies.

All the images are rendered with Canvas in real-time.

JavaScript Library: none.

Read the rest of this entry »

Flickr’s Flash file uploader is one of the most functional uploaders a developer can think of.

It supports:

• Multiple file selection in a single "Open File" dialog.
• File extension filters for easier selection.
• Upload progress tracking.
• Filename, size, date created, date modified, and author can easily be extrated.

This flash file uploader is avaliable as the YUI Uploader component.

You can also include additional data in the upload POST request.

And, upload component provides faster file upload on broadband connections due to the modified SEND buffer size.

Bubbling Library is an easy to adopt Yahoo! User Interface (YUI) Library extension for event-driven applications.

It consists of a set of plugins, behaviors and widgets.

This YUI extension has the following features:

• Plugins
  • Dispatcher
  • Lighter
  • Form Manager
  • Sound Manager
  • Translator
• Widgets
  • Accordion Manager
  • Loading Mask
  • Tooltip Manager
• Behaviors
  • Bookmark Links
  • RSS Feed Links

Bubbling Library is well-documented and has lots of examples of every feature.

inputEx is a javascript framework, built on the top of YUI, for creating forms and form objects.

It uses no html (opposite of unobtrusive libraries): all the fields and forms are configured using JSON. It provides a very efficient abstraction for building interactive web applications.

inputEx features:

• json configuration for each field
• complex data structures (list/objects/tree/list of urls/objects of objects etc…)
• composition between the fields (for “meta”-fields such as InPlaceEdit,List,Tree,Pair,…)
• javascript object mapping for greater interactivity
• a common “updated” event to handle different browsers and different field interactions

For JavaScript and AJAX applications, Taffy DB is a beautiful tool.

Taffy DB is an open source JavaScript library that acts as a data layer inside the applications. Just think of it as a SQL database in your web browser.

Let’s say you have a collection of products and you want to find every product that costs less than $10 and is not a book. Simple, just write some JavaScript:
products.find({price:{lessthan:10},
type:{not:"Book"}});

Major features:

• Under 10K!
• Simple, JavaScript Centric Syntax
• Fast
• Easy to include in any web application
• Compatible with major Ajax libraries: YUI, JQuery, Dojo, Prototype, EXT, etc
• CRUD Interface (Create, Read, Update, Delete)
• Sorting
• Looping
• Advanced Queries

Check out the Getting Started Guide for Taffy DB‘s capabilities.

CSS Grid Builder is a web tool which can create standards-compliant grid layouts with a few clicks.

Outputs are generated with the powerful Yahoo! UI Library: Grids CSS which offers pre-built templates & page layout combinations.

YUI Grids CSS:

• Supports fluid-width (100%) layouts as well as preset fixed-width layouts at 750px, 950px, and 974px, and the ability to easily customize to any number.
• Supports easy customization of the width for fixed-width layouts.
• Flexible in response to user initiated font-size adjustments.
• Template columns are source-order independent, so you can put your most important content first in the markup layer for improved accessibility and search engine optimization (SEO).
• Self-clearing footer. No matter which column is longer, the footer stays at the bottom.
• Layouts less than 100% are automatically centered.
• Accommodates IAB’s Ad Unit Guidelines for common ad dimensions.
• Offers full A-grade browser support.

CSS Grid Builder is a quick solution specially for Yahoo! UI Library users or web developers who are better in coding rather than design.