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! :)

Matt Everson built a simple little micro app for project estimation: Web Development Project Estimator:

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.

You may remember Sanjiv Jivan as the GWT-Ext developer that changed over the debacle. He then went on to start work on a GWT version of SmartClient libraries and has now released SmartGWT 1.0.

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.

Damian Wielgosik has created Drawter, a web based tool to layout pages:

Drawter is a tool written in JavaScript and based on jQuery library. It provides you the possibility to literally draw your website’s code. It runs on every single web-browser which makes it really useful and helpful. Each tag is presented as a layer you have drawn.

Currently Drawter is available in Pro version, which means that it is intended for webmasters use only – knowledge of HTML and CSS is required.

Drawter is not a tool for laymen, for the time being, but the whole team behind the project is putting every effort to launch a new version called “Amateur”. Soon you will be able to draw your websites without any knowledge of HTML or CSS. Launching soon, really soon.

He has a detailed screencast of the tool in action where you see how you can flip between draw and edit modes to build up your page. Nicely done!

The most exciting part of Adobe MAX last week was a service that was announced by Paul Gubbay at the “Sneaks” session that shows cool tech that Adobe folk are working on. His (very early stage) service is called Meer Meer and it is genuinely useful.

You can plugin a URL and the system will render that page on a server farm (many browsers, cross OS) and show you the results. It can visually layer these results so you can see the differences. It was awesome.

I pinged Paul and had a nice conversation with him about the project:

Can you explain what Meer Meer is, and where you got the inspiration?

Meer Meer is the code name for a new hosted service that allows Web Pros to view their content on a variety of different browsers and operating systems without requiring them to install anything other than the standard Flash Player. The inspiration is easy. We spend a lot of time with our customers and cross-browser compatibility consistently comes up as the #1 issue unprompted. It’s a real pain and we wanted to help solve it.

What browsers and OSes are supported? This means I don’t have to kick up VMWare to test in IE 6 now right? ;)

IE6 is covered :) We haven’t finalized the complete set yet but we’re committed to supporting the top browsers for Windows and Mac. We expect that mix to change over time as new browsers/versions gain market share.

What are the various views and features?

We’ve really focused on how users tweak/debug their CSS today and engineered the service to fit into that workflow. One of the unique features for Meer Meer is that it can work directly with your local content if you are using Dreamweaver. This is a big benefit as users can tweak CSS and hit the refresh button to get an immediate representation of the page on their target browsers. No need to save, publish to a public location and then view. In addition, we’ve focused on several views (1-up, side by side and onion skin).

Onion skin is the most interesting as it overlays two browser shots over each other and provides the user with complete control over the transparency. This view typically gets the big oohs and aahs :)

Can you talk about the high level implementation? I assume you have a server farm on the back end and you are rendering and sending back images of the rendered image?

That’s correct. In addition we’re using a Flex application as the client. This makes the application feel very snappy and respond like a desktop application without the need to install anything. The team has also done some great work to establish a local connection with Dreamweaver to work with local content. When you make a change to your code and switch back to Meer Meer it knows you’ve made a change and prompts you to refresh. You can choose to refresh from within Dreamweaver and a panel will update and show you the status of the screenshot retrieval in real time.

In Dreamweaver CS4 you showed taking an Ajax app, clicking around to change state, freezing the page and then sending it to Meer Meer. Can you talk more about the freezing feature and other things that you can do?

I’m really proud to be associated with this release of DW CS4. We’ve definitely pushed the envelope. Our new Live View leverages the WebKit rendering engine to provide users with a true browser experience directly within the product. This means that you can see and interact with dynamic content such as Ajax UI widgets. Furthermore, we’ve included the ability to see the Live Code that the browser generates as you interact with the page. Users can freeze JavaScript to get the page into different states and then use the new Code Navigator to jump directly to the CSS that effects the element they select. This is an added bonus for Meer Meer because we can place the page into different states, such as selecting the second pane of an Accordion widget, and then view the page in that state within Meer Meer. Other browser compatibility services simply can’t do this.

Any final thoughts on Meer Meer or other Web Pro services coming from Adobe?

We’re really excited about the future of desktop + services at Adobe. Meer Meer is a great example of what we can accomplish when we take a holistic view to solving a user challenge. We’re also very interested in extending the capabilities of our users by providing them with turn-key hosted solutions that allow them to grow their business. Content maintenance follows very closely on the heels of browser compatibility as a top challenge that our users face today. Our new InContext Editing service that is now in free preview on Adobe labs allows Web Pros to provide content editing capabilities directly within the browser to their end user. No programming required.

We look forward to hearing feedback from the community on these services to help guide our future direction.

This is an exciting server from Adobe, and shows that focusing on the Flash issue isn’t the entire story. They have a lot to offer the Open Web if we look to the right places and we can continue to fight for more too :) If we support projects like Meer Meer we can make our voice heard.

Of course, this is just the beginning. I would love to see an API to the service which would allow any developer tools to mashup nicely with the service. You can also imagine actively analyzing the code to not only point out the diff in the image, but the issue in the code. When we get there, we will be in a very good place indeed :)

There were some other cool things from MAX that showed up in Labs:

• Alchemy: A research project that allows users to compile C and C++ code into ActionScript libraries (AVM2).
• Durango: Mashup tool for AIR

And for more in-browser tools, check out this nice roundup on
15 Helpful In-Browser Web Development Tools.

Our own Michael Mahemoff is at it again, creating a simple little GUID generator called Guid0:

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.