A+ Ajax

Over at the the YUI blog the team just announced the preview release of YUI 3.2.0. YUI3 now has some interesting new features that the team wants you to try and tell them if they work out for you. The changes to the already very powerful library are quite ambitious:

• Touch event support for mobile interfaces including flick and move gestures
• Browser capability loading – which means that every browser gets the least amount of code necessary to make it work
• Transition support for the animation module – meaning only browsers that don’t support CSS3 transitions get the JavaScript animation fallback
• An update to the CSS grids to allow for more flexible layouts
• A ScrollView widget similar to the one in Apple iOS
• The uploader has been transitioned over from YUI2 to YUI3

So check out what is on offer and give the YUI team feedback on what would be nice to have and what is broken. In their own words:

The goal of a preview release is to make it as easy as possible for all of us in the community to evaluate progress of the upcoming release and provide feedback. Please take some time to test 3.2.0pr1 and let us know what you find by filing tickets in the YUI 3 bug database marked as “Observed in version” 3.2.0pr1. We’ll do our best to address preview-release questions on the YUI 3 Forums, too.

There are three ways to get started with the preview release: YUI 3.2.0pr1 is available on the CDN via the 3.2.0pr1 version tag — so you can reference preview-release files like http://yui.yahooapis.com/combo?3.2.0pr1/build/yui/yui-min.js. If you switch to this seed file for the preview release, all subsequent use() statements will continue to load YUI 3.2.0pr1. Or You can download the full YUI 3.2.0pr1 from YUILibrary.com, including source code and examples for all components. Or you can simply explore the functioning examples roster.

Continue reading »

Continue reading »

Dmitry Baranovskiy has been hacking away on Raphael. It is almost like he has had a bunch more time for it recently! :)

Version 1.4 has a bunch of cool new features such as:

• Touch events support
• rgba support
• new method drag
• document.onmousemove = f ? Raphael.mousemove(f)
• resetScale method
• scaling text will change it position, but not size
• sets now have type “set”
• rect in VML doesn’t recreate itself on change of the R
• paths are not rounded to the nearby pixels anymore
• Various small bug fixes and improvements
• added preventDefault and stopPropagation to event object

Very nice.

Continue reading »

A few months back we announced an early build of Ares the full mobile development environment from Palm that runs entirely in the browser.

I was really excited to be at JSConf at the weekend where Matt McNulty announced Ares going 1.0 in our session. He promptly went on to do demos that show how easy it is to create mobile Web applications in the tool. You can follow one of these tutorials and Matt kindly put together a walkthrough of how easy it is to build a GPS enabled app in a few lines of code:

(Click here to see it larger).

If you tried Ares first time around, take another look. There are a lot of new features, and you can catch up all of what’s new. Really glad to see the flushing out of components and sensors, and after enjoying CSS layout for many years, I love what the Ares crew have done with layout.

Components:

• Ares now has Components, which are widgets that provide functionality, but without any user interface. The palette now contains the service calls, sensors, etc that are in the webOS SDK.
• Components can be drag-and-dropped onto the canvas, where they will show up as icons across the bottom of the screen. They can be selected and configured in the property inspector, and then called in a single line of code.
• Inline help – When a component is selected on the canvas or view tree, the last tab of the property inspector will show jsdoc-style inline help for that component, so you can see what you can call on each component.
• For example, you can drag out a camera component, and in the ontap handler of a button, type this.$.camera1.execute(); to launch the camera in your app!
• See the 1.0 tutorial to see how easy it is to create an app that connects to phone services using components.

Designer Ergonomics

• Undo and Redo in the interface builder!
• Cut, Copy, Paste in the interface builder!
• New shortcut buttons to swap between the designer and code assistant for a given scene
• Improved support for drag and drop between panels and at the top and bottom of the canvas

Find and Replace

• Find and replace within a file
• Find and replace within multiple projects, complete with filters for which projects

JSLint Integration

• JSLint feedback is now integrated into the code editor
• New JSLint "Monitor" feature will provide feedback on your code as you type continuously

And lots more…

• New FeedList widget for RSS feeds
• Google Maps v3 wrapper widget for including multi-touch enabled maps in your applications
• Left and right panels can be hidden/shown with a single click on their arrows
• Unified spot in the UI for Find and Replace, JSLint, Debugger, and Log Viewer
• Improved Debugger functionality, including viewing all variables in scope in a tree control, updated as you step through your code
• Code beautification in the code editor
• Lots of bug fixes

My favourite Tweet about Ares showed up yesterday:

What would you like to see in a tool that helps you build great mobile Web applications?

Continue reading »

Most of the thinking on iPad’s exclusion of Flash has been focused on battery life, performance, stability, or control of the application market, but here’s a Flash developer who’s thinking differently. Morgan Adams argues it’s all about the mouseover, and he raises a point that is just as relevant to rich Javascript apps.

Many (if not most) current Flash games, menus, and even video players require a visible mouse pointer. They are coded to rely on the difference between hovering over something (mouseover) vs. actually clicking. This distinction is not rare. It’s pervasive, fundamental to interactive design, and vital to the basic use of Flash content. New Flash content designed just for touchscreens can be done, but people want existing Flash sites to work. All of them—not just some here and there—and in a usable manner. That’s impossible no matter what.
….
Mouseover examples:

* Video players where the controls appear on mouseover and hide otherwise. (This seems to be the norm, in fact. Whereas a click on the same video does something different: usually Pause. Try Hulu for instance.)

* Games where you steer with the mouse without clicking (extremely common).

* Menus that popup up subpage links when you mouse over a main button, vs. going directly to a main category page when you click.
….

He claims all the alternatives are unsatisfactory, e.g. re-coding every application manually, introducing gestures, substituting double-clicking for clicking and clicking for mouseovers.

The issues are relevant to Javascript developers; for example, PPK has previously speculated on the demise of mouse* events, as well as hover in touch environments. How will that play out with a web app that relies on them?

It’s a bit like Dion’s recent tweet: “I find myself typing click^H^H^H^H^Htap 20 times a day at the moment. Is there a term that abstractly could mean both? :)”. We can get away with simple substitutions with straightforward web apps maybe, but it gets a lot more complicated with seriously rich interaction styles, the kind traditionally seen in some Flash games and now possible with Javascript. We tend to think of mobile device design as a matter of massaging the look with some CSS…the harder part to get right is often the “feel” in the look-and-feel equation. Platforms, like the web, which want to support multiple interaction styles, need to provide ways to ease the transition for developers, automating degradation and enhancement in the first instance, but allowing application designers to customise further for each device. Dan Saffer’s sideshow below makes the point well, regarding gesture design in touch devices:

Continue reading »