The Ample SDK, a unique GUI toolkit working to create a cross-browser abstraction backed by open standards, has gone open source! With the new 0.8.9 release the GUI framework is now an open-source project licensed under GPL/MIT and hosted on GitHub.
More about the Ample SDK:
The Ample SDK makes it easy to create interactive vector graphics in the browser, including on Internet Explorer, and create powerful web forms and GUIs. Even better, it supports all of this with a standard API that is the same across all browsers. You don’t even need to learn anything new; the API itself is simply web standards such as SVG, XUL, DOM, the Selectors API etc.
Sergey Ilinsky, one of the leaders of the project, reports that there is still a long way to 1.0, including polishing XUL components and implementing new visual themes and charts, but that he is targeting to have a 1.0 by the end of the year. Keep up the great work Sergey!
It’s always nice when a basic shared idea with a simple proof of concept becomes something concrete, usable, and well explained. This is the case with Shea Frederick’s post titled Forwarding Mouse Events Through Layers.
The aim of the technique is to provide an ExtJS plug-in that can capture dragged and dropped data from external sources, such as a spreadsheet, in order to easily import data inside a generic Ext.grid.GridPanel.
The textarea (my masking element) that is positioned over the grid receives mouseover, mousemove, mousedown , mouseup and other events.
The top masking layer is hidden for a moment, so we can figure out what element is below the mask at the event location.
Start the process again – ready for the next event.
The method used to understand which element is supposed to be the event target is document.elementFromPoint, also compatible with IE, Mozilla, WebKit, and Opera.
The technique does not necessarily need the ExtJS library but this demo shows a live Ext Grid example.
The Crap I missed it! crew took on the task of dealing with importing your iTunes XML file, and wanting to give you responsive feedback on the items as they come in. The usual tactic would be to suck in the entire file, and then process it.
Michael Baldwin did more, and here he tells us more:
We wanted to allow users to upload their iTunes library files, so that we could extract artist names (to let users sign up for new album and concert notifications). The problem was that these .xml library files can easily run up to 20MB in size.
Which means 1) long, boring downloads without feedback that it’s really working, 2) huge space requirements on our servers to support lots of concurrent uploads, and 3) big memory requirements to process the XML files.
What we did instead was to write a bare-bones custom web server just for this task in PHP (yes, PHP) which analyzes the file as it streams in (storing nothing on disk, and using negligible memory), gradually puts artist statistics into shared memory, and then responds to new AJAX requests every ten seconds which retrieve and remove the artist statistics from shared memory.
The end result for users: as users upload their library file over the course of several minutes, they get to watch their web page fill up with their list of artists at the same time, sorted and even animated. If the connection breaks, they can even choose to continue with just the artists that made it.
The end result for us: we can deal with gigabytes of uploads while using trivial computing resources — just a couple KB of incoming buffer space and a couple KB of outgoing buffer space.
You can check it out yourself, where it will look a bit like this (but constantly updating!)
SimpleGesture is a GWT (and IT Mill Toolkit) implementation of the mouse gesture recognition method described by Didier Brun at bytearray.org (as I understand it). It allows you to register easy to understand (human readable) gestures, and receive events when these occur. Additionally, SimpleGesture can record new gestures, so that you don’t have to write them by hand.
In this video demo, he’s using a Wii to show it off (this confused me at first, but he’s using the Wii as a mouse and isn’t doing anything with the Wii-specific inputs):
SimpleGesture relies on a bit of Flash to do its thing:
I have used the bytearray mouse gesture library for a Flash project before, and I love how simple the method is, and yet it works very well.
The method works by assigning a number depending on which direction the mouse moves in (moving right will produce “0″, moving down will produce “2″, and so on), and comparing the resulting string of numbers to the registered gestures. The gesture with the lowest Levenshtein distance (and below a set threshold), is considered a match.
It's a complete re-write of the old plug-in and works on Firefox, IE, and Safari. Here's the feature list:
* No dependencies
* Optional use of easing plugin (still some work needed)
* Close and open content one after the other
* Close and open at the same time
* Choose trigger (mouseover, click ...)
* Easily control through external calls
* Open content on load
* Open content through hash tags in the url (#tab1, #tab2...)
* Position of handle (left, right)
* Mixed handle positions - 2 left , 2 right ...
* Cycle through content by interval
* Events when animations starts and ends
* Hide content until all has been assembled
Joining the world's collection of Growl-related libraries is Notimoo, a beautiful Growl implementation for MooTools. It's a little more sophisticated than most of the Growl ports as it supports persistence messages (that require a user's click to clear and scroll into view) and allows you to configure where on the screen the messages appear:
Gauge.js 1.0 allows you to add programmable gauges (with shading and reflection) to your webpages.
It uses unobtrusive javascript to keep your code clean.
It works in all the major browsers - Mozilla Firefox 1.5+, Opera 9+, IE6+ and Safari.
On older browsers, it'll degrade and your visitors won't notice a thing.
Riccardo Degni has created GX, his latest animation framework. He actually created moo.rd in the past, and this time he is playing on top of jQuery:
I’ve developed GX keeping in mind mainly two Design Patterns:
the “Write Less, Do More” Pattern picked from the jQuery Library. With GX you’ll always write as less code as possible to get the best results.
the DRY (Don’t Repeat Yourself) Pattern. If a GX’s functionality is needed more than once, it will be internally reused with no duplicate.
GX respects the Strict Standards and doesn’t generate CSS/Javscript warnings. Moreover it prevents possible Memory Leaks because it will always use the same instance for a determinate element (say goodbye to “flickering”) to avoid either memory leaks and flickering issues. This technique allows you to always keep track of your animation’s state.
Although GX is completely cross-browser, it doesn’t contain any Browser sniffing: it’s 100% pure Javascript engine.
Guillermo Rauch, who has a really nice looking site at devthought has created APNG a class to bootstrap animating PNG images:
APNG provides simple frame-based animation functionality. It’s main goal is solve the problem of animating alpha-transparent images (PNG format).
Features
APNG is very flexible when it comes to the method of displaying the various animation frames.
The default behavior is taking the filename, for example spinner.png, and changing the src or background-image attribute to spinner-2.png, spinner-3.png and so on.
If the useNative functionality is in place, which is set to be on for Firefox 3 and Opera 9.5, the Javascript-based animation is not run. I encourage you to create an actual APNG for the default frame (spinner.png). If you do so, you’ll see increased performance for the browsers that support it -while also promoting the adoption of this new format-, and other browsers will just display the first frame and the animation will run via JavaScript.
You can also use background-position based animations to avoid making multiple requests, and avoid potential cache issues in old browsers.
The APNG class supports dynamic pausing, canceling, resetting and starting of animations. Frames can have a fixed interval or one can be assigned for each of them. Preloading is supported, which can prove useful for long animations or animations that are initialized and not run from the start.
So, you want to create a button that you have full control over, and you want it to work well cross browser. Shouldn't be hard right? Wrong.
Doug Bowmanepines about the job of doing just this, which is something he kicked off at Google, and we see the result in apps such as Sites and recently Gmail:
Doug does a really nice job at explaining the history of this work, and then detailing the issues at hand and various iterations of the work where he had some a-ha moments such as:
My 3.0 attempt relied on treating the buttons and everything inside them as inline elements. The top/bottom borders still needed to be rendered separately from the left/right borders to get 1px-notched corners. The left/right borders were rendered on the outer element. The top/bottom borders were rendered on the inner element. Because borders don’t compound and add to the width or height of an inline element, we get the 1px notches in each corner. I ran into a lot of frustration with this inline approach until I remembered display: inline-block. That seemed to solve everything at once.
And how he got rid of the gradient image and instead uses CSS:
A really nice read. It works pretty well for me. The only real issue that I saw was that the drop down in Gmail for "More Actions" can be greyed out when you don't have something selected. The type is subtle so at first I wondered why hover/click weren't doing anything.
Oh, hey, would be nice to open source this kind of stuff good Google UX guys ;)
Bill Scott presented Designing Web Interfaces, a slideshow based on core items from his book (co-authored by Theresa Neil).
There are some really interesting posts on the site, such as 30 Essential Controls. Theresa has been pinging the major frameworks and will be posting a matrix of coverage by the various frameworks. But more generally it is a nice checklist of controls that can liven up an interface.
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.
The video above by Ron Brinkmann is his mockup of a non-euclidean browser UI which looks a touch like the magnifying glass tool on the iPhone, and aims to give you your data in a readable way, while still showing the larger context:
The reason why I think an interface like this can be superior in many ways is that it allows you to specify an area of interest where you get full, detailed information yet you can still see the full document/page/object at the same time. Which means that one is able to avoid the zoom(in/out)-scroll-zoom(in/out)-scroll paradigm that you often get stuck in when using, for example, the iphone. In many ways it gives the user an analogue to the way peripheral vision works in the ‘real world’. You have an area of interest that you can focus on but then you’re also aware of the surroundings and glean information from that as well.
(The mockup I did above just shows a single point-of-interest but it’s certainly expandable to multiple points if you’ve got a touchscreen or other such device. And there’s all sort of little refinements you’d want to implement if you really wanted to make it swank - drag&drop from one place to another might want to keep the source area zoomed but also follow the dragged object with a zoom-region until you get to the appropriate destination. This all gets even sexier once eye-tracking becomes more available - the area you’re looking at would bubble up to full resolution but you’d still be able to quickly scan the entire page and re-target the area of interest. Somebody get busy on this, okay?)
In his post, Ron then shows other subtle examples, such as mapping this to peripheral vision.
Make sure to check out the Application Development Guide and Extension Development Guide tutorials which feature multiple aspects of client-side development. There is also a detailed reference API accompanying.
