Harmony is a new drawing tool, a HTML5/Canvas experiment with great potential. It provides some unique brush styles, and can produce some great-looking charcoal pencil style sketches, among other things. Better to try it out than explain it in words.

Creator Mr. Doob (Richard Cabello) explains how he used Canvas to make it darker the more you draw over it:

The whole thing is quite modular so I can keep adding more brush styles whenever I get inspired. During the process I found out that, for some reason (apparently lack of hardware acceleration), Firefox and Opera do not support context.globalCompositeOperation = ‘darker’. This was on the HTML5 spec before but got removed. Just so you know what I’m talking about, this is like the “multiply” blending in Photoshop. Webkit does support it tho. I hope they put it back on the specs and all browsers support it.

You can also save images using data URI encoding.

As it works on webkit, he made sure it worked on the mobile Android and iPhone browsers. No multi-touch as yet, but the touch UI still makes a nice input mechanism.

(Thanks FND)

John Allsop has created a very cool CSS gradient exploration tool that lets you get the gradient you need, with the resulting sample and code right there.

You could use it to do what he did, and recreate the Apple navigation bar in pure CSS instead of using images.

John didn’t stop there, and has already created tools for Box Shadows Shadows and Radial Gradients.

I have been very impressed with Andrew Sutherland of the Mozilla Messaging team (which is one reason that I have faith that I will dump Gmail for something he and the Messaging team come up with one day ;) and the visualizations that he is playing with are quite cool indeed. Seeing your email in different ways (not just in a table) can open the eyes.

Andrew is using Protovis “a visualization toolkit for JavaScript using the canvas element. It takes a graphical approach to data visualization, composing custom views of data with simple graphical primitives like bars and dots. These primitives are called marks, and each mark encodes data visually through dynamic properties such as color and position.”

There are some cool examples such as:

which produces .

Very cool indeed!

Allan Jardine has updated his popular DataTables rich data grid control. Allan told us what his aims were for this 1.4.1 release:

Being fairly happy with the options that DataTables presents to the end user, I’ve focused this release on providing tools for the developer. A plug-in API, non-destructive DOM manipulation (the biggest weak point of the old versions) and documentation are the major new features.

If you take a look at the new rich API you will see that can manipulate the data in the table, build filters, fetch remote data, and more.

What does DataTables feature again?

• Variable length pagination
• On-the-fly filtering
• Multi-coloum sorting with data type detection
• Smart handling of column widths
• Fully internationalisable
  UK, French, German, Spanish, Russian, Norwegian, Portuguese Brazilian (and more) translations provided
• State saving
• Hidden columns
• Dynamic creation of tables
• Ajax auto loading of data
• Custom DOM positioning
• Single column filtering
• Alternative pagination types
• Non-destructive DOM interaction
• Sorting column(s) highlighting
• Extensive plug-in support
  Sorting, type detection, API functions and pagination
• Fully themeable by CSS
• Solid documentation

I enjoy the US show Chuck (maybe because a geeky guy gets to hang with a beautiful woman? :) and there is a 3D episode to launch their new season. Our 2009 Ajax season relaunches an old favourite meme, the Ajax loaders (e.g. ajaxload.info) with a new 3D special.

Timur Gafforov has given us Preloaders which allows you to select size, speed, and from a set of 3D spinners. Make your users wait in style! :)

Back on January 14, 2006, a brash, young and talented developer named John Resig put out a personal project to the OSS world and hoped it could benefit *someone*. Little did he know that 3 years later, his side project would become one of the most influential frameworks for developing JavaScript-based applications. Today, the jQuery project turns 3 years old which, considering the churn rate for open source projects, is a monumental achievement. So it makes sense that on the project’s 3rd birthday, the team has announced the release of jQuery v1.3, the latest and greatest release of jQuery which includes the new Sizzle selector engine.

Along with the inclusion of Sizzle, jQuery v1.3 includes a bevvy of new features:

• Live Events: Event delegation with a jQuery twist
• jQuery Event Overhaul: Completely rewired to simplify event handling.
• HTML Injection Rewrite: Lightning-fast HTML appending.
• Offset Rewrite: Super-quick position calculation.
• No More Browser Sniffing: Using feature detection to help jQuery last for many more years to come.

The details of the release can be found via the release notes.

In addition to that, Remy Sharp donated a new dynamic API browser to the jQuery project which makes searching the jQuery API extremely easy:

The API browser includes:

• All the latest jQuery and jQuery UI documentation.
• The ability to mark pages as favorites for those pages you keep wanting to return to.
• Syntax highlighting in the code examples
• Live running of examples within the browser
• Links to edit and experiment with the code examples

In addition, Tane Piper & Remy worked together to provide an AIR app version of the browser so you can view the API locally.

The biggest update though is that the jQuery projects (i.e. jQuery & jQuery UI) will be part of the Software Freedom Conservancy thus making the projects true non-profit endeavor and providing a number of benefits to both the project and the jQuery community including:

1. It allows the current project members to continue to manage the projects and maintain ultimate responsibility for the direction of current and future efforts.
2. It allows the projects to be considered a true non-profit efforts allowing us to be able to accept donations and contributions without incurring tremendous personal financial liability.
3. The copyright of the code will be assigned to the conservancy thus ensuring that no single person will own contributions or assets of the project.
4. It may allow corporations to write off time when an employee contributes to a project.
5. Most importantly, it ensures that the jQuery projects will always be open and free software

With so many new individuals & corporations contributing to the project, doing this became a big priority to protect the investments made by the jQuery community.

This is a lot of great news for jQuery developers and here’s wishing jQuery a happy 3rd birthday.

Although most web designers have an idea of how long a project will take based on their past experience, far too often this guess becomes a final estimate. If you’ve ever been 300+ hours into a project that’s paying you for 100, I’m sure you know first hand why this can be a serious problem for a business. Up until now, I’ve used an excel spreadsheet to help me estimate accurately. About a month ago though, it occurred to me that I could make this calculator into a sweet little online tool. I figured it can only lead to more accurate estimates, stronger web businesses, and a better valuation of what we do as designers.

Of course, the fun is tracking how close you come to the estimator :)

Noupe has another nice roundup, this time they are showing 10 Smart JavaScript Techniques For Manipulating Content.

They share nice content views with demos and how to content. Included in the list is:

1. jQuery pageSlide: jQuery pageSlide is a plugin for jQuery that slides the viewable webpage off-screen, revealing and populating a secondary interaction pane. It may be used in a similar manner to Lightbox, where screen real estate and centralization of the user experience are a concern.
2. Create a simple ul list with a nice slide-out effect for li elements: We want to obtain this effect: when an user clicks on a link (”Hide”), the related
3. element disappear with a nice animated slide out effect. A simple way to implement an animated “disappear” effect using MooTools slideOut()
4. Portfolio Layout Idea Using jQuery: Benjamin Sterling created an interesting portfolio layout and added a nice easing method to the main content panel using easeOutQuad and easeInQuad using jQuery easing plugin.
5. Creating a Slick Auto-Playing Featured Content Slider: Niall Doherty’s Coda Slider inspired lot of designers and got them started quickly designing around it. Chris Coyier created a Slick Auto-Playing Featured Content Slider using Coda Slider plugin pretty much “out of the box” and added to it.
6. Easy Image or Content Slider: Easy Slider enables images or any content to slide horizontally or vertically on click. It is configurable with css alone.
7. mooSlide: mooSlide is nice replacement of the common “lightbox” module. It has some interesting options to influence the look and behaviour of the sliding box.
8. jQuery.SerialScroll: jQuery.SerialScroll allows you to easily animate any series of elements, by sequentially scrolling them.
9. Agile Carousel: Agile Carousel allows you to easily create a custom carousel.
10. Animated JavaScript Slideshow: This extremely lightweight JavaScript animated slideshow script includes a number of cool features to to style your content: description support, link support, no naming restrictions, portrait image support, graceful degradation and active thumbnail status.
11. Sexy Lightbox 2: Sexy Lightbox 2 is a sexier and lighter clone of the classic Lightbox. Supports displaying images and HTML elements.
12. UI.Layout: Was was inspired by the extJS border-layout. The UI.Layout plug-in can create any UI look you want – from simple headers or sidebars, to a complex application with toolbars, menus, help-panels, status bars, sub-forms, etc.

It is a tour de force of not only a huge widget library, but he explains how it is much more:

So what’s so smart about SmartGWT? Let me try to explain. SmartGWT is not just another Widget library. While most Ajax frameworks focus primarily on presentation and displaying mostly read-only data, either local or via XML / JSON, SmartClient was built with server side integration in mind. Most enterprise applications are not just about about data presentation, but about being able to propagate data changes made by the user to the backend. So while its tempting to use library X that has a cool tree widget, it’s not until you actually try to use it your application that you encounter the real world hard problems. For example, how do you take data from your business objects on the server to not only display in a tree widget, but also be able to update your data model when, say, the user reorders the tree nodes or make edits / deletes in the UI. How do you display hierarchical data where nodes may have hundreds of children? And so on..

Most Ajax frameworks stop short and leave it up to the user to manage state on the client side and propagating the changes to the server. This is not a trivial problem! Over the past few years UI widget libraries have improved significantly and there are now various options available to users. Simply put, having good looking widgets is not the hard problem today. In addition to having good looking widgets, having end-to-end integration of the UI components with the backend is the hard problem. It’s this 20% of the functionality that takes 80% of the time in building most enterprise applications.

The showcase will give you a good feel for what is out there, and it contains some interesting items including:

• Miller Columns: The ColumnTree provides an alternate navigation paradigm for Tree data, sometimes called “Miller Columns” and seen in iTunes
• Nested Grid: A convenient way to display 1-n relationships
• Printable Views: SmartGWT supports printable views of its components.
• Advanced Filter Builder: a databound filter builder.
• Tile View: Representation of data as “tiles”. Again, TileGrid supports data binding so sort / filter and edits can be easily performed.
• Calendars : A Google Calendar like widget that supports databinding so edits and drag drop changes can easily be propgated to the server for persisting.
• TreeGrid : Supports multiple columns, editing, column locking, lazy loading and more.
• Live Grid / Tree: Grid / Tree virtual scrolling or live grid

Really amazing work. Sanjiv recently had a Q&A session with InfoQ where he talks about the approach taken in developing SmartGWT and the his thoughts on the differences between SmartClient and Ext.

Guid0 is a GUID library for Javascript. Okay, it doesn’t yet do official, bona fide, 128-bit, GUIDs yet, mainly for API design reasons. But this is a library you might find useful if you want to generate a unique ID in your Ajax app.

PLAIN TEXT

JAVASCRIPT:

1.  
2. // simple
3. guid = new Guid();
4. var newguid = guid.generate();
5.  
6. // options
7. guid = new Guid(
8.   {
9.         chars: Guid.constants.base85,  // or you could say "abc" if you only wanted those chars to appear
10.         epoch: “June 1, 2003″,
11.         counterSequenceLength: 2, // a counter field appended to the end
12.         randomSequenceLength: 2 // a random field appended to the end
13.   }
14. );
15.  

He is working on 128-bit support.