John Resig linked to an interesting new time picker UI that Maxime Haineault implemented as a jQuery plugin:

He made a “two click” time picker. The first click is within the time field. This activates the display and allows the user to choose the time – all of which is done by moving the mouse over the times that you desire. The final click is anywhere – filling in the time that was chosen. It’s hard to explain, you simply have to try it.

One thing that you’ll notice using it is that it’s fast. Very fast. I’d argue much faster than clicking into the input area, moving to the keyboard for entering the time, typing the time, then moving back to mouse.

I would be remiss not to mention John’s other post of the day, where he goes into detail on CSS Animations and CSS Animations.

Alex Moore wrote in to highlight a couple of developments in the Ext JS community. First, the Ext JS roadmap has been updated with goals for the 2009-targetted 3.0 release:

# All new lightweight, high-speed core base library
# Flash Charting API
# Ext.Direct – Remoting and data streaming/comet support
# Integrated client-server data binding/marshaling of updates
# ListView component
# Enhanced Button and Toolbar components
# ARIA/Section 508 accessibility improvements
# CSS updates for reset style scoping and easier custom theming
# Update the Ext event registration model
# Ext.Ajax enhancements

Second, Alex provided a link to a preview screencast of a new Ext JS visual developer tool, currently in early development:

SproutCore drove onto the scene when MobileMe launched using it.

Since that blast, the team has been diligently working on getting a 1.0 release, and Charles Jolley has
posted on the future of SproutCore:

It’s been nearly four months since SproutCore launched to the public at WWDC and we couldn’t be happier with the results.  18,000 developers have installed SproutCore (sudo gem install sproutcore ftw), nearly 1,000 developers have joined the mailing list, and dozens of projects are underway at companies around the world.  One additional one has already gone public (OtherInbox).

During this time the developers working on SproutCore haven’t stood still either.  150 tickets closed, some major new features, and enhancements for Windows, IE7, Chrome, and others.  Many of the changes we’ve applied have come from you, the community.  In fact, over 20 people have contributed code to SproutCore now, which is outstanding for such a young project.

Now that I’m back from my trip, though, I thought we should spend a little time talking about where we are headed next.

Put simply, our next major milestone is SproutCore 1.0.  When I started planning SproutCore 1.0, here were the criteria I laid out for it:

• Make the common easy and the uncommon possible. Typical behavior for an application should be nearly automatic without limiting a developer’s ability to hack something cool.
• Support the whole application. SproutCore must support the whole application development process, including the model, view, and controller layers as well as design, testing, documentation, and deployment concerns.
• A small consistent API. Favor configuration over class-bloat.  Use consistent “guessable” design patterns.  The API should be vetted well enough that it will not need to change dramatically once released.
• Offer broad platform support. Perform well on all modern browsers.  Perform adequately on IE7 and earlier.

Charles then goes into detail on some of the bigger changes:

Faster Observers and Bindings

Property observing and bindings underpin almost everything you do in the SproutCore framework.  Because of that it is really important to make this feature small and fast.  We have currently rewritten this code to make it almost 2x faster on its own, and to use significantly less memory.  More on this in the coming days.

DOM Library Independence

Currently, SproutCore depends on Prototype for a few cross-platform functions.  This really doesn’t make much sense.  In particular we think of Prototype, jQuery, and others as “DOM manipulation libraries”; somewhat like low-level drawing APIs.  SproutCore should live above this layer, allowing you to choose whichever drawing library you like to create custom views.  Additionally, removing this dependence will allow those who do not want to use Prototype to eliminate that page weight from their apps.

New Model Layer

The current implementation for SC.Store, SC.Collection, SC.Record and the servers have not been revisited since they were written almost two years ago. When these were first deployed, they worked fairly well for the small apps that used them.  Since then we’ve seen applications loading 40,000+ records into memory in a regular basis and a move towards investigating use of the coming local storage facilities on modern browsers.  This code is going to see a wholesale rewrite as we update the API to accommodate this new, larger scale world.

There has been other SproutCore related news recently:

• Having SproutCore working with an Erlang backend
• How fast can a SproutCore app load? shows off a simple todo list application running on App Engine
• SproutCore 1.0: New Bindings and Observers
• Caching Computed Properties
• Using Computed Properties To Lazily Load Data

Back in May, we posted a story about “the other JIT”, the JavaScript Information Visualization Toolkit. Its creator, Nicolas Garcia Belmonte, has recently implemented a number of new features and has created a tutorial, some examples, and some documentation to describe them.

The JavaScript Infovis Toolkit is a JS Information Visualization library that includes radial layout of trees with animations, Treemaps, Hyperbolic Trees and Spacetrees…

One of the most challenging features I wanted to add to these visualizations was the possibility of dealing with mutable data. This way visualizations would also be useful to show how data changes over time, and updates to this data would be translated into smooth animations from one state of the graph to another.

The user could also interact at a deeper level with the visualizations, not only exploring the data, but also altering it, making updates to the information and seeing the results in real time.

Nicolas has created two “real-world” examples to show off this new ability to mutate the graph live:

Example One: Linux Module Dependency Visualizer

It uses the RGraph visualization with the morphing operation to show dependencies between different modules you might find with the apt-get tool. When clicking on a node you’ll set this node as root. Then the graph will perform a second animation, updating the dependencies for the new centered module. Many details about the package are also provided under the Details toggler. You can also go to previous visited modules by using the History toggler.

The accompanying blog entry to this example shows how both the client- and server-side code was implemented, making it interesting indeed.

Example Two: Visualizing relations between artists and bands dynamically

Building on a previous example, this new revision adds a “second animation [that] will take place [when clicking on a node], morphing the tree into the new node’s perspective.”

It’s still an alpha release, but it’s already in the wild.

Noupe keeps the roundups going with Most Wanted Ajax Techniques: 50+ Examples and Tutorials that consists of a lot of projects we have covered over time, but some new ones, and the added touch of putting it together in one place.

Ajax Forms

• Server side jQuery with Jaxer
• Ajax login form (PHP & Javascript)
• Form Plugin

ShoutBox

• wTag (Ajax shoutbox)
• Shoutbox Ajax

Validate a Username AJAX

• Validate a username using Javascript and PHP ( AJAX )

Ajax Instant Messenger

• Ajax Instant Messenger
• Ajax and XML: Ajax for chat

Ajax Tabs Content

• Ajax Tabs Content
• AjaxControlToolkit TabContainer

Ajax Shopping Carts

• Drag and drop shopping cart

Ajax Star Ratings

• Starbox
• Unobtrusive Ajax Star Rating Bar
• CSS: Star Rater Ajax Version

Ajax Inline Edit

• Easy AJAX inline text edit 2.0
• Ajax.InPlaceEditor
• Edit In Place with AJAX Using jQuery

Ajax Progress Bar

• jsProgressBarHandler
• A YUI Loading Panel Widget

Ajax Pagination

• Ajax Pagination Script
• Preloading Data with Ajax and JSON

Ajax File Browser & Manager

• jQuery File Tree
• jQuery File Tree

Ajax Calendar

• Vista-like Ajax Calendar version 2
• Quick Calendar Using AJAX and PHP

Ajax Photo Manipulation

• Phototype
• mooImageCrop

Ajax Dynamic Image Gallery and Slideshows

• Dynamic Image Gallery and Slideshow

Ajax File Upload

• Max’s Ajax file uploader
• Ajax Multi Image File Upload
• jQuery Multiple File Upload Plugin

Ajax AutoCompleter

• Autocomplete Control Version Released
• FaceBook Like – jQuery and autosuggest Search Engine

CMS

• NicEdit
• FCKEditor

Polls

• Ajax Poller
• Creating a Dynamic Poll with jQuery and PHP

Tabular data manipulations

• Sorttable
• Flexigrid
• DDDrasticGrid
• Improving Extra wide Grid View

Miscellaneous

• Ajax Scrolling pages
• jTip – A jQuery Tool Tip
• Ajax Broken Link Checker
• Facebox
• Drop Down Panel script

Noupe is doing a good job cataloging content, such as their post on great JavaScript CSS menu libraries which features:

• Sexy Sliding Menu – Andrew Sellick decided to use mootools due to the smoothness of their effects, however, he developed a sliding menu using script.aculo.us
• FastFind Menu Script – This script allows for nested menus, based on dynamic “AJAX” responses. The menu can also be dragged/dropped thanks to the jQuery Interface Library.
• Webber 2.0 Dock Menu – Great example of a dock type navigation.
• Phatfusion- Image Menu – Image menu using javascript, onClick event keeps selected item open and to close it again.
• Drag and Drop ordering in a TreePanel – This example shows basic drag and drop node moving in a tree. In this implementation there are no restrictions and anything can be dropped anywhere except appending to nodes marked “leaf” (the files).
• Custom Menu Events This is a combination of animation and custom events where Think Vitamin team show us how menu items sliding into view and firing off subscribable events using Yahoo! UI
• Context Menu Functionality This is a combination of animation and custom events where Think Vitamin team show us how menu items sliding into view and firing off subscribable events using Yahoo! UI.
• LavaLamp jQuery Sliding Menu It is a jQuery sliding nifty effect menu with light weight code and extra two more interface styles.
• Slashdot Menu- Dynamic DriveThis is a stylish collapsible menu modelled after the navigational menu found on Slashdot.
• Mootools menu with Accordeon and EffectsThis cool menu has a neat effect by hovering over the links, and opens a 2 level submenu with an accordeon.
• CSS Dock Menu If you are a big Mac fan, you will love this CSS dock menu that Nick La designed. It is using Jquery Javascript library and Fisheye component from Interface and some of their icons.
• jQuery Plugin: Sliding Menu A very simple sliding menu using the effects provided by the Interface plugin.
• Accessible expanding and collapsing menu

An interesting top 12 list has been published, on using Javascript to fix 12 common browser headaches:

1. Setting Equal Heights (jQuery example: $("#col1, #col2").equalizeCols();)
2. IE6 PNG Alpha Transperancy support
3. Changing CSS Classes in JavaScript
4. Browser selectors in CSS ($('html').addClass($.browser);)
5. min-/max- height & width support
6. Center Elements Vertically / Horizontally
7. Display Q tags in Internet Explorer
8. Increase the size of click targets and get more call-to-action conversions
9. Lazy loader
10. bgiframe: Helps ease the pain when having to deal with IE z-index issues.
11. ieFixButtons: fixes the buggy behavior of the element in Internet Explorer 6 and 7
12. Fix Overflow

As you will see, most of the solutions are jQuery plugins, but you could roll your own.

Steve Souders posted on Runtime Page Optimizer a tool that you can think of as a performance proxy. It sits on the server side, and cleans up content before it is sent back to the browser.

What can it do? Steve let us know:

RPO automatically implements many of the best practices from my book and YSlow, so the guys from Aptimize contacted me and showed me an early version. Here are the performance improvements RPO delivers:

• minifies, combines and compresses JavaScript files
• minifies, combines and compresses stylesheets
• combines images into CSS sprites
• inlines images inside the stylesheet
• turns on gzip compression
• sets far future Expires headers
• loads scripts asynchronously

RPO reduces the number of HTTP requests as well as reducing the amount of data that is transmitted, resulting in a page that loads faster. In doing this the big question is, how much overhead does this add at runtime? RPO caches the resources it generates (combined scripts, combined stylesheets, sprites). The primary realtime cost is changing the HTML markup. Static pages, after they are massaged, are also cached. Dynamic HTML can be optimized without a significant slowdown, much less than what’s gained by adding these performance benefits.

Steve had another couple of interesting posts recently:

• Say no to IE6 discusses how we need to do something to help upgrade IE6 users (to IE7 is fine!)
• Raising the bar talks about results from Steve’s UA Profiler tests and how new browsers are pushing forward

The Jaxer team has released a release candidate for Jaxer 1.0.

Here a synopsis of all the new features and improvements that have gone into this latest release candidate:

• Jaxer.Sandbox: HTTP-level control; support readyState, toHTML, waitForCompletion
• Built-in, extensible dispatching for RESTful and RPC service requests
• Fast, native JSON support
• Improved APIs for HTTP Request and Response
• More flexible handling of application configuration
• Many bug fixes, smaller improvements, and cleanups

They are moving pretty fast, so are looking for feedback before they wrap up a final 1.0 release.

Oliver Steele gave a great talk at The Ajax Experience this week on Practical Functional JavaScript.

For his talk, he ended up creating a samples application where you can run the code directly, very similar to what John Resig did in Learn JavaScript.

The samples take you through JavaScript world, stopping for:

• Callbacks
• Functions
• Closures
• Idioms
• Throttling
• Caching
• Retry