A+ Ajax

The SVG Web team has announced a new release. SVG Web is a drop in JavaScript library that makes it easy to display SVG graphics on Internet Explorer 6, 7, and 8 using Flash.

The new SVG Web release, like all of their releases, is named after especially silly D&D monsters. The new release is code named Owlephant:

You’ve heard of Elephants, you’ve heard of Owls… put them together and you get the fearsome Owlephant. If you encounter one, be sure it will be the last thing you ever, um, encounter. Hoot…. stomp!

With this release SVG Web now scores 55.45% on the SVG compatibility charts, almost at the same level as IE 9 (58%).

Major aspects of this new release includes overhauls and fixes for gradients, clipping, events, text placement, and more. It also includes a huge step forward in SMIL animation support, including being able to animate path segments and interpolate their values, scripting SMIL with JavaScript, and more.

This release has been built by the community, with major contributions from Bruce Duncan from VisualMining.com; Ken Stacey from SVGMaker.com; and the always awesome (and project co-leader) Rick Masters. Thanks to the many people like Michael Neutze, Bruce Rindahl, and more for their bug testing and evangelism!

Everything fixed in this release:

• Issue 471 : Radial gradient different between Flash and Native renders
• Issue 349 : gradients with bounding box cooordinates are positioned wrongly on circles
• Issue 475 : ‘this’ not getting set correctly in SVG element event callback
• Issue 477 : The change in the size of the ClipPath area is not reflected by Flash Renderer.
• Issue 483 : Changing gradient stop does not trigger redraw of referencing elements
• Issue 484 : Dynamic clip-path attribute changes are not reflected.
• Issue 476 : set Element Problems and numerous SMIL issues
• Issue 489 : Support beginElement() for animation elements
• Issue 494 : SVGTextNode.onDrawGlyph not removing glyph clones
• Issue 495 : Support units-per-em on SVG fonts
• Issue 492 : ‘button’ property missing in mouse event object
• Issue 472 : get svg.js even more compressed with Google’s closure compiler (30K reduction)
• Issue 499 : Object loaded svg with scripts not firing window load or SVGLoad event
• Issue 488 : Updating styles via Javascript does not visibly update child nodes in IE/Flash
• Issue 496 : Support exponents in path values
• Issue 502 : Radial Gradient userSpaceOnUse Matrix calculated incorrectly
• Issue 503 : Radial Gradient focalLen not used for stroke
• Issue 504 : Radial Gradient userSpaceOnUse Matrix calculated incorrectly for SVGCircle and SVGEllipse nodes
• Issue 497 : bad ‘target’ when click on text node
• Issue 342 : Event handler fires only after second mouse click.
• Issue 507 : Namespaced elements not allowed until svg element added to page
• Issue 158: Rotated text not rendering for native fonts (Mostly Fixed)
• Issue 467 : Namespace exception loading video example in IE8
• Issue 510 : Font Family not used when surrounded by single quotes in Flash 10.1
• Issue 57 : SVG default fill-rule ‘nonzero’ not supported by flash 9
• Issue 123 : Nested svg elements don’t show up in the DOM correctly
• Issue 145: dynamically creating SMIL elements and attributes
• Issue 356 : Show SVG Web Release Name and Revision in Right Click Menu
• Issue 513 : getElementsByTagNameNS returning text nodes
• Issue 515 : Call handleEvent on EventListener objects passed to addEventListener
• Issue 517 : Elements with fill set to ‘none’ should produce mouse events but do not
• Issue 518 : Avoid redraw on change to pointer-events attribute
• Issue 523 : Event listener from object element may be applied to svg element erroneously
• Issue 522 : Need way to create element with self declared namespace
• Issue 525 : Image element not respecting display=’none’
• Issue 524 : Jquery $(window).scroll event will not fire
• Issue 527 : Excessive messages for detached event listeners
• Issue 528 : Exception if remove event listener from detached element, then add to document
• Issue 321 : Support for animating path ‘d’ attribute (and interpolate between values)
• Issue 514 : clip-path not used when part of style attribute value
• Issue 526 : Object using clip path cannot have its opacity animated
• Issue 535 : Nested svg disappears when animated
• Issue 536 : Problems tracking whether elements attached to document or not
• Issue 537 : Animation added in onload listener does not initialize
• Issue 538 : Node removed while invalid causes endless frame listening
• Issue 539 : Animation with invalid or forward href causes exception
• Issue 540 : script stack space quota is exhausted by large svg file
• Issue 511 : Keyboard events are not supported properly

Download the release now and get started!

Please note that there are some breaking changes in this release that will affect code that uses older versions of SVG Web; more details here. Also note that SVG Web does not yet support the native SVG functionality in IE 9 preview releases.

[Disclosure: I'm a member of the SVG Web team]

Continue reading »

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 »

The first beta of MooTools 1.3 has become available. The biggest feature is their new CSS selector engine. They aren’t using Sizzle like some of the other boys, but instead have become Slick:

Slick is our new, shiny, super fast, exhaustively tested, pure-javascript selector engine. There will probably be a dedicated Slick post in the following days (or months, given our relaxed release cycles), but here’s a few Slick-facts for those who haven’t checked it out already:

• Slick is a MooTools-family project by MooTools developers Thomas Aylott, Fabio Costa and yours truly. It can be forked from github, free of charge!
• Slick is an incredibly advanced evolution of our previous selector engine.
• Slick is written using only pure-javascript, none of the MooTools apis are required. It can be used in any project or framework, and it does not require MooTools to function (though the MooTools DOM components do require Slick).
• Slick is speedy, blows away the 1.2 selector engine by 50%, at least. We will give you detailed data in the post dedicated to Slick.
• Slick supports every selector you can think of. Seriously, every one of them. I promise you.
• Slick is customizable, you can make your own pseudo-selectors, your own attribute-selectors, and many more your-own kinds of things.
• Slick supports reversed combinators. You might not know what they are, but they are pretty darn cool.
• Slick has a detached parser. You can parse a css-style-selector string and get back a property-filled object.
• Slick perfectly supports XML documents.
• Slick is slick!

This bleeds into some new APIs too.

For example, what you may have done like this:

you can now do using selectors:

There are other features too:

Globals

MooTools 1.3 moves away from the $name functions. Most of the useless ones, such as $chk (god knows why I thought it was a good idea to have $chk), were completely nixed. Some of them moved to the proper object’s namespace ($merge » Object.merge, $pick » Array.prototype.pick). Some others were renamed without the stupid $ in front ($type » typeOf, $defined » nil). In the end, there are a lot less global variables now. You can refer to the 1.3 documentation to have a proper list of what’s changed. Keep in mind that the old version of the methods will still work, by default. There will be a way in the future to “compile” MooTools without the compatibility stuff, but the feature is not ready yet.

From types with love

Every native type has now a from method that will try to convert every object passed to that type. Array.from, for instance, replaces both $A and $splat. Function.from will return a function that returns the passed in value, if it wasn’t a function itself. String.from… well you know that at this point, don’t you? We also changed how we internally handle Native types, but that should be none of your concerns, since they were handled with private apis anyways.

Generating your own MooTools, from your own computer

It is now possible, easy, and even perhaps recommended to generate MooTools (and its plugins) yourself. Last few months I’ve been working, on and off, on a pretty advanced projects-builder. It’s called Packager, it supports multiple project dependancies and has a very similar syntax of what’s used in the Forge right now. It’s written in php and you can use it from your php webpages to dynamically include JavaScripts for development, or you can build a single .js for production from the command line.

Continue reading »