You searched for: 'native'

Tuesday, June 2nd, 2009

AppJet users look to migrate apps

Category: Announcements

The team behind AppJet and the successful EtherPad have announced that they are discontinuing the hosting of AppJet applications. This is a shame, as the server side JavaScript programming module makes writing certain back ends a breeze, as they showed with EtherPad itself!

I hope that it will rise again, just as I hope that Concorde will fly again some day. In the letter to the community, Aaron Iba discusses why this decision was made, and options that you have to migrate. The timing is good in that AppJet runs on Rhino which runs on App Engine, so there is hope to port over there in short order. Here is Aarons letter:

Dear AppJet Community,

This is a notice that we are discontinuing the free hosting service on July
2009, so that we can focus on EtherPad. We are
sorry that we have to do this, but we believe it is the best thing to do for both our
EtherPad users and our appjet hosting users.

We initially developed EtherPad as a technology demo of the next generation of
the AppJet platform, AppJet 2.0. Historically, many of the best developer tools
have emerged symbiotically from applications that used them. This was our
strategy with EtherPad and AppJet 2.0.

We expected EtherPad to be an impressive showcase of our technology, but we did not
expect hundreds of businesses to write us asking to pay for a pro version. It turns
out that EtherPad has some killer use cases for businesses and professional software
developers: getting everyone (literally) on the same page, whether it’s meeting notes
or API definitions.

As EtherPad usage grows, we are continuing to develop the new AppJet platform alongside it.
Since much of the core technology and new architecture of EtherPad revolves around
making it really realtime, the AppJet platform has evolved into what can best be described
as a new javascript platform for realtime web apps. But this new AppJet platform has
diverged significantly from the original appjet 1.0 for which we provide free hosting.
Eventually, we may release the new AppJet platform as a standalone product, but until then,
we do not have the resources to support the legacy version of the platform.

If you are interested in keeping your app online in some form, you have some options. The
simplest way to keep your app running with minimal work is to download AppJet in a Jar and find another place to host
your app using that. The downside of AppJet in a Jar is that it requires a dedicated machine
or VPS with root access. Another alternative is Google App Engine, which has recently
released support for Java. You can run JavaScript on top of App Engine using Rhino (See here and here for more info).

We have started a new forum for discussing migration options, and we encourage
you to share your thoughts and ideas here.

From the whole AppJet Team, we wish you you the best with all your future
programming endeavors.


Aaron Iba
CEO, AppJet Inc.

I know it was a tough decision for them, and we thank them for their innovation in this area. We look forward to seeing more via EtherPad and other things they cook up.

Posted by Dion Almaer at 3:32 am

2.9 rating from 12 votes

Wednesday, May 20th, 2009

EcmaScript 5: Changes to JavaScript

Category: JavaScript

Three Googlers, Mark Miller, Waldemar Horwat, and Mike Samuel gave the talk above to discuss how JavaScript is changing, and gets into detail on EcmaScript 5.

The slides that go along with the talk are available in good ole simple HTML prezo form and show that the talk discusses topics such as:

  • Accessor support:

    1. var domoid = {
    2.   foo: 'bar',
    3.   get innerHTML() { return ...; },
    4.   set innerHTML(newHTML) { ... }
    5. };
  • Property attribute control:

    1. Object.create(p, {...}).defineProperty(o, n, attrs)...
  • Strict mode: (I laugh at ‘use strict’; everytime. I can’t help it.)
  • Tamper proof objects (.freeze(o) and the like!)
  • Keyword collision: foo.class would be OK now (DOM not changed of course)
  • Higher order array methods: forEach(), map(), every(), some(), filter(), reduce(), reduceRight()
  • JSON now native
  • Function.prototype.bind. Hurrah!

Posted by Dion Almaer at 8:14 am

4.2 rating from 37 votes

Monday, April 27th, 2009

MooTools 1.2.2 and the new MooTools More Plugin Library

Category: MooTools

The MooTools team has been busy over the last week. Last Thursday they released MooTools 1.2.2:

MooTools 1.2.2 is a mainly a bug fix release but it also includes an almost entirely new Class.js. The reasoning behind this is that the old Class.js didn’t play nicely with some advanced usages of this.parent() present in the new MooTools-More. We already had the script ready and tested in the MooTools 2.0 branch so we simply “backported” it to 1.2.2. Other than providing the parent fixes, the new Class also features a much more robust inheritance model, especially when dealing with objects.

For example, the objects you implement now in a class are merged if an object with the same name is found in the class prototype:

  1. var Animal = new Class({
  2.     options: {
  3.         color: 'brown',
  4.         says: 'hissss'
  5.     }
  6. });
  8. Animal.implement('options', {says: 'meow'});
  10. // Animal.prototype.options is now {says: 'meow', color: 'brown'};

This is especially useful when overriding default options in classes, such as Request.

Upgrading to this version of MooTools only requires that you drop in the new version. There aren’t any changes that require changes to sites that implement these features.

MooTools More

Also with this release comes a large update to the MooTools plugin library, MooTools More. Previously this portion of the project featured about a dozen add-ons. The new release features 48 plugins, adding things like FormValidators, new effects, JSONP support, numerous enhancements to native objects like String and Element as well as robust URI and Date classes. They plan on adding new plugins regularly as this portion of the library grows over the next several months.


Relatedly, MooTools contributor Aaron Newton has released an updated version of the Clientcide MooTools Plugins to support these new plugins. Many of the plugins that are now officially part of the MooTools project came from Clientcide’s collection of plugins. For anyone using the Clientcide plugins you can find compatibility scripts on the download page there. He notes that there are one or two breaking changes for users who were using some of the plugins that moved over to MooTools More.

Posted by Rey Bango at 9:34 pm

3.6 rating from 69 votes

Tuesday, April 21st, 2009

Persevere’s JavaScriptDB: Impressive JSON Performance

Category: Database, JavaScript, JSON

Kris Zyp recently posted about an intriguing new chapter in the application persistence space:

The latest beta of Persevere features a new native object storage engine called JavaScriptDB that provides high-end scalability and performance. Persevere now outperforms the common PHP and MySQL combination for accessing data via HTTP by about 40% and outperforms CouchDB by 249%. The new storage engine is designed and optimized specifically for persisting JavaScript and JSON data with dynamic object structures. It is also built for extreme scalability, with support for up to 9,000 petabytes of JSON/JS data in addition to any binary data.

This comparison isn’t exactly apples-to-apples as it turns out–for the web app use case, Perservere has a bunch of value-adds on top of data storage:

Persevere/JavaScriptDB goes further [than relational DBs] with the flexibility to evolve schemas and handle partial schemas. Persevere also provides integrated server side JavaScript (SSJS) with persistence, Comet-driven data change notifications, JSONQuery, standards based HTTP interface with content negotiation, JSON-RPC interface to SSJS, cross-domain handling, CSRF protection, and more. All of these things are additional features that one would have to add to the stack for other storage systems, making them even slower. Persevere includes this functionality out of the box, while still maintaining extremely fast performance.

Kris spends a bit of time in his post explaining his test setup, but then gets to the good stuff:

So how does Persevere achieve this level of performance with the JavaScriptDB storage? The dynamic object-oriented nature of the data that is stored in JavaScriptDB is much different than that of a traditional relational database, so a number of innovative approaches were employed.

He goes into quite a bit of detail explaining the implementation details behind JavaScriptDB. The summary (with lightly edited quotes) is:

  • Direct Data-Bound Object Representation: “In a traditional application stack, a record must have separate in-memory representations for [the database] and [the application] result set which then might be mapped to an object representation. With JavaScriptDB, the single in-memory object is reused for all result sets and data caching.”
  • Shared Cache of Objects with Copy-on-Write
  • Append-based Database Storage: “Many traditional database commit data to a transaction log before committing data to the table, requiring multiple writes. JavaScriptDB appends transactional data directly to the main storage file; writes can be committed with a single IO operation.”
  • Adaptive On-Demand Concurrent Indexing
  • Batched writes in integrity mode
  • Pluggable Storage

Check out the full post all the details.

Posted by Ben Galbraith at 1:00 pm

4.6 rating from 51 votes

Friday, April 17th, 2009

SVG Open 2009: “SVG coming of age”

Category: Announcements, Conferences, SVG

Cool things are finally happening with SVG these days. It’s showing up natively in browsers (including Firefox, Safari, Opera, Chrome and more). It’s natively supported on the iPhone, and work is happening in various open source communities to create options for Internet Explorer. Google uses it under the covers in Google Maps (to create vector line drawings showing where to go); Google Docs (for drawing into presentations); and more. Wikipedia, one of the top web sites on the Internet, has a huge repository of SVG images, while many tools such as Inkscape, Illustrator, and Visio can either export to SVG or work with it natively. Vector graphics support through SVG and Canvas is consistently one of the top voted requests by developers.

Since more and more is happening with SVG these days, we thought it would be great to host the SVG Open 2009 conference this fall in Mountain View at the Google campus from October 2-4, 2009. The theme this year is “SVG coming of age”.

We are looking for contributors to present papers or teach courses. Presenters are asked to submit an extended abstract in English with an approximate length of 400 to 800 words by May 15 to The abstracts are reviewed by a reviewing committee and presenters will be informed about acceptance on or before June 26. If your abstract is accepted, you will be asked to submit your full paper by August 31, according to instructions that will be sent to you.

I’d love to see presentations from the Ajax community combining SVG with JavaScript in various creative ways. Come and join us in the fall at SVG Open!

Posted by Brad Neuberg at 5:00 am

4.5 rating from 21 votes

Monday, April 13th, 2009

EcmaScript Edition 5, formerly known as 3.1: Getting a new JavaScript

Category: JavaScript

You probably remember the history. JavaScript 2, the reckoning, was going to come from EcmaScript Edition 4. That never happened, and instead the 3.1 group moved on with their agenda for “baby step” changes to the language.

Now we have a final release of that work, with a new name, EcmaScript Edition 5 which is an interesting change :)

Erik Arvidsson tells us his thoughts:

The most exciting thing in ES5 is that it finally standardize getters and setters. It also allows us to control the enumerability as well as whether properties should be read only etc. ES5 also adds a few other things like the array extras from Mozilla.

Yes indeed. We now have things like Function.bind. Well, by “now” we mean “when browsers support this.”

Many of the browsers have moved ahead with JavaScript, but IE has held back. Fortunately, that is hopefully in the past since Microsoft was a key player in this spec and has posted on the news itself on the JScript blog:

For the average web developer the release of a candidate specification has little immediate impact because you have to create content that works with the browser versions that are actually in use today. However, we expect that once it is finally approved, the revised ECMAScript standard to be widely and fairly rapidly adopted by browsers. In the meantime, this new specification is already having an impact. For example, in IE8 both the native JSON and the DOM Prototypes features are based upon APIs defined in the ECMAScript Fifth Edition Specification.

An interesting glimpse into the Microsoft developer world can also be found by checking out the comments to that entry:

I think it makes immense sense to hold off a final release of Managed JScript until the fifth spec is finalized, but the complete lack of transparency in the Managed JScript process has been a little disconcerting. When Managed JScript was announced it was promising, but IronPython and IronRuby have completely eclipsed it. Whether in the DLR for Silverlight or ASP.Net futures, Managed JSCript has been intentionally hidden, which is a shame.

As Web developers, if we actually see implementations of this on the shelves ACROSS browsers soon, that will be fantastic. I hope the new VM teams move fast to make this happen. Having some of the core changes available will be great for us. It is bloody frustrating to be able to use really great features in a Firefox add-on, or a server-side JavaScript application and then have to go back to the real world on a “normal” app.

On the other hand, this is hardly enough change. Getting a couple of the useful Prototype methods like bind, and some nice Array helpers and the like…. good to get us all on the same page, but come on guys, it’s time to step it up a notch! Harmony here we come :)

Posted by Dion Almaer at 8:01 am

4 rating from 25 votes

Thursday, April 2nd, 2009

Palm Pre at Web 2.0 Expo

Category: JavaScript, Mobile

Close to 5pm, and you started to see a huge snaky line making its way to the keynote area where Palm was about to have a reception and short announcement. People were jazzed to hear more about the Pre, and Michael Abbott was there to open up access to developers:

Today, Palm expanded the Mojo SDK program for webOS, announcing that a broad group of developers will be provided with the software development kit to create applications for the Palm Pre phone (as well as other future devices running webOS).

Speaking at the Web 2.0 Expo, Palm’s senior vice president of Applications Software and Services Michael Abbott also highlighted some of the most exciting aspects of webOS — including a new branded service that lets developers create apps that push live content across the Internet — and invited the audience to apply for the early access program at the Palm Developer Network website.

The power of webOS lets developers rethink how they develop for mobile devices — and creates opportunities for new kinds of apps. Abbott highlighted several key features of webOS that open up new avenues for the creative ingenuity of the developer community:

  • a cards metaphor that simplifies multi-tasking
  • Palm Synergy to unify information from sources like Google, Facebook, and Exchange
  • a user-friendly approach to notifications that ensures the user is up to date without distracting them from the task at hand. 

An often-overlooked aspect of webOS is that Web applications run natively on the phone. They don’t depend on access to a server, and can run even when there is no access to the Internet. But the full power of webOS is unleashed when the device works together with “the cloud” – the combination of all of the Web sites and services that a user interacts with.

We also got to see a new walk through of the Pre:

Come on HTML5 Phone :)

Posted by Dion Almaer at 12:30 am
1 Comment

3.9 rating from 24 votes

Friday, March 27th, 2009

JSTalk: AppleScript without the weird language

Category: Apple, JavaScript

Gus Mueller has announced JSTalk, an alternative to AppleScript that uses JavaScript and the JSCocoa bridge, and an Objective-J-like language alternative to hide the ugly_methods_when_needed.

Here is Gus:

JSTalk’s goal can described like this: JSTalk is to AppleScript, what Cocoa is to Carbon.

I know, I know. It’s a lofty, crazy goal. But someone has do try and it doesn’t look like the solution is coming from Apple anytime soon. So I’m keeping it very simple, and very easy.

JSTalk isn’t anything new. You write your scripts in JavaScript, and application communication is handled via Cocoa’s distributed objects. Like PyObjc and RubyCocoa, JSTalk uses a bridge to talk to Cocoa (JSCocoa + WebKit’s JavaScriptCore), so you get all the power and speed that comes with it. JSTalk comes with a little editor, a command line tool, and an automator action. If an application you want to script isn’t exposed via JSTalk, you can still tell it what to do via the Cocoa Script Bridge (which is new to 10.5). Here’s an example which sets your iChat status using this technique:


  1. SBApplication.application("iChat").setStatusMessage("Happy (funball)");

Here’s a JSTalk script which works on a build of Apple’s Sketch sample code, with native JSTalk support added:


  1. var sketch = JSTalk.application("Sketch");
  2. var doc = sketch.orderedDocuments()[0];
  3. var rectangle = doc.makeNewBox();
  4. rectangle.setWidth(100);
  5. rectangle.setHeight(100);

Read more and fork the code on GitHub!

Posted by Dion Almaer at 1:16 am
Comment here

4.2 rating from 33 votes

Thursday, March 26th, 2009

jQTouch: a mobile WebKit JavaScript framework

Category: iPhone, JavaScript, Library, Mobile

David Kaneda has created jQTouch a “jQuery plugin with native animations, auto list navigation, and default application styles for Mobile WebKit browsers like iPhone, G1, and Pre.”



jQTouch can now be initialized with one function:


  1. $(document).jQTouch({
  2.    icon: 'jqtouch.png',
  3.    statusBar: 'black-translucent'
  4. });

This function writes all of the meta tags needed for an iPhone web app. Here are the default settings:


  1. fullScreen: true,
  2.  slideInSelector: 'ul li a',
  3.  backSelector: '.back',
  4.  flipSelector: '.flip',
  5.  slideUpSelector: '.slideup',
  6.  statusBar: 'default', // options: black-translucent, black
  7.  icon: null,
  8.  iconIsGlossy: false,
  9.  fixedViewport: true


There are now functions for sliding a page up, and “flipping” to a page, using WebKit’s built-in 3D capabilities. Both can be seen in the new preview

These new animations are integrated into the page history, and can be navigated by using the back button.

Image Preloading

I’ve added a quick-and-dirty function for preloading images, which you just send as an array. For example:


  1. $.preloadImages([
  2.      'themes/jqt/img/chevron_white.png',
  3.      'themes/jqt/img/bg_row_select.gif',
  4.      'themes/jqt/img/back_button.png'
  5.      ]);
  6.  });

Minor Improvements

  • New HTML structure to ease toolbar button variations and improve animations.
  • Various performance improvements
  • Added minified code
  • Started a custom theme, which will be offered alongside the standard Apple theme
  • Created a new Home Screen icon
  • Removed some iPhone-dependent code

David also answered some questions for us:

How does it compare to iUI?

It is similar in the way it can load views via built-in HTML or dynamic GET/POST requests, but it uses hardware-accelerated animations, and also includes transitions like slide up and 3D page flip. It also includes code for image preloading, a custom theme, and a much easier setup function which eliminates the need to write META tags for the app icon, viewport settings, etc.

What kind of extended functionality are you looking into

Ultimately, I plan on testing extensively on the G1 and, eventually, the Palm Pre. Other plans include a more robust theming system, and various callback methods to make extending jQTouch even easier.

With PhoneGap, would it just be a script that you can get built in?

I am currently in talks with the PhoneGap crew, and we are planning on including it stock with the kit. We’re currently unsure if the script should be ported to XUI or remain based on jQuery.

Posted by Dion Almaer at 4:02 am

3.5 rating from 54 votes

Wednesday, March 25th, 2009

Fuzzy CSS Grammar

Category: CSS, Security

Jesse Ruderman, security extraordinaire, has created many fuzzers in his time including a JavaScript one, and this time he has created a CSS gramar fuzzer:

I wrote a CSS grammar fuzzer to test Gecko’s CSS parser. This fuzzer’s tricks:

Declarative context-free grammar. This makes it easy to add new CSS features to the fuzzer, or even use it to test grammars other than CSS. Each symbol can be a star, concatenation, or list of alternatives. Unlike a parser, a fuzzer has to make decisions about what to create, so alternatives can be given weights and stars have a suggested number of repetitions. This alone was enough to find at least one bug in Gecko.

Breaking rules. Like any good fuzzer, it doesn’t always follow the given context-free grammar. Sometimes it does weird stuff, such as inserting a random symbol, to throw the parser off. I was surprised that this only found one additional bug in Gecko. Perhaps this reflects the comprehensive error handling requirements of the CSS specifications and the corresponding test suites.

Grammatical recursion. When the fuzzer notices that a symbol is the same as an ancestor, it can repeat the parts of the final string between the two symbols. This is effective at finding bugs where large input can cause a recursive algorithm to run out of stack space and crash. This found four grammar-recursion crashes in Gecko.

CSS serialization. The fuzzer makes sure that any text that comes out of the browser’s stylesheet serializer survives another trip through the parser and serializer. This is the same trick jsfunfuzz uses to test the JavaScript engine decompiler. This helped fine four incorrect-serialization bugs in Gecko.

None of these Gecko bugs seem to be security holes. I shared the fuzzer with other browser vendors privately for over a month, and nobody asked me to delay the release, so I believe it didn’t find security holes in other browsers either. But I think this has more to do with CSS parsing being fairly simple and self-contained than any weakness in the fuzzer.

Posted by Dion Almaer at 6:39 am
Comment here

3.9 rating from 14 votes

Monday, March 23rd, 2009

Richard Stallman: Free the Javascript

Category: Web20

Richard Stallman, founder of the GNU project and the Free Software Foundation, warns against the “trap” of running web apps whose Javascript is not licensed.

Most web apps have source code that is “open” as far as being available in source code form (unless it’s obfuscated/compressed/generated). Indeed, this openness is a major factor in the rapid growth in our understanding of Ajax; formerly obscure tricks and techniques could be studied in their full visible source code glory, and patterns could be systematically mined from the huge corpus of real-world Javascript code out there. However, most of the Javascript code in web apps assumes a conventional copyright license, and Stallman’s complaint is that it should instead be issued under free software licenses.

Stallman suggests that free Javascript licenses should be one of the features of open web standards:

A strong movement has developed that calls for web sites to communicate only through formats and protocols that are free (some say “open”); that is to say, whose documentation is published and which anyone is free to implement. With the presence of programs in web pages, that criterion is necessary, but not sufficient. Javascript itself, as a format, is free, and use of Javascript in a web site is not necessarily bad. However, as we’ve seen above, it also isn’t necessarily ok. When the site transmits a program to the user, it is not enough for the program to be written in a documented and unencumbered language; that program must be free, too. “Only free programs transmitted to the user” must become part of the criterion for proper behavior by web sites.

Silently loading and running non-free programs is one among several issues raised by “web applications”. The term “web application” was designed to disregard the fundamental distinction between software delivered to users and software running on the server. It can refer to a specialized client program running in a browser; it can refer to specialized server software; it can refer to a specialized client program that works hand in hand with specialized server software. The client and server sides raise different ethical issues, even if they are so closely integrated that they arguably form parts of a single program. This article addresses only the issue of the client-side software. We are addressing the server issue separately.

The last comment is a reminder of the Affero GPL, which (among other things) obligates web developers to publish their server-side code if it uses AGPL software. Thus, the Free Software Foundation is targeting the full web app stack – server-side code and Javascript client code.

The article goes on to propose a Greasemonkey-related means of substituting in free code for Javascript web apps; as well as suggesting developers should open source their web apps, Stallman is proposing a world in which free software projects would arise to act as alternative web clients to those apps that don’t open source.

(Thanks to FND for the pointer.)

Posted by Michael Mahemoff at 8:32 am

2.5 rating from 69 votes

Friday, March 20th, 2009

HTML 5 section is not just a “semantic div”

Category: Standards

James Graham of Opera has a post about how section is not just a semantic div that argues against the folks that think that we can get by with just div class="section" for example:

HTML 5 introduces new elements like <section>, <article> and <footer> for structuring the content in your webpages. They can be employed in many situations where <div> is used today and should help you make more readable, maintainable, HTML source. But if you just go through your document and blindly replace all the <div>s with <section>s you are doing it wrong.

This is not just semantic nit-picking, there is a practical reason to use these elements correctly.

In HTML 5, there is an algorithm for constructing an outline view of documents. This can be used, for example by AT, to help a user navigate through a document. And <section> and friends are an important part of this algorithm. Each time you nest a <section>, you increase the outline depth by 1 (in case you are wondering what the advantages of this model are compared to the traditional <h1>-<h6> model, consider a web based feedreader that wants to integrate the document structure of the syndicated content with that of the surrounding site. In HTML 4 this means parsing all the content and renumbering all the headings. In HTML5 the headings end up at the right depth for free).

You can also talk about other items such as the new menu tag that the browser can render with an interesting native menu item.

Posted by Dion Almaer at 5:48 am

4 rating from 21 votes

Wednesday, March 18th, 2009

Super fast client side searches – the Flickr way

Category: Examples, JSON, Performance, XmlHttpRequest, Yahoo!

Over at the Flickr development blog, Ross Harmes, one of those lesser sung JavaScript heroes explains in detail how Flickr creates really fast client side searches and one of the implementations of these findings is the newly released find people faster feature:

find people faster feature on flickr

The main findings of the team were that eval() is not only evil but also very slow whereas dynamic script nodes are fast but insecure. The solution was to do a custom evaluation of string data rather than using JSON:

Having set the performance bar pretty high with the last approach, we dove into custom data formats. The challenge would be to create a format that we could parse ourselves, using JavaScript’s String and RegExp methods, that would also match the speed of JSON executed natively. This would allow us to use Ajax again, but keep the data restricted to our domain.

Since we had already discovered that some methods of string manipulation didn’t perform well on large strings, we restricted ourselves to a method that we knew to be fast: split(). We used control characters to delimit each contact, and a different control character to delimit the fields within each contact. This allowed us to parse the string into contact objects with one split, then loop through that array and split again on each string.


  1. that.contacts = o.responseText.split("\\c");
  3. for (var n = 0, len = that.contacts.length, contactSplit; n &lt; len; n++) {
  5.     contactSplit = that.contacts[n].split("\\a");
  7.     that.contacts[n] = {};
  8.     that.contacts[n].n = contactSplit[0];
  9.     that.contacts[n].e = contactSplit[1];
  10.     that.contacts[n].u = contactSplit[2];
  11.     that.contacts[n].r = contactSplit[3];
  12.     that.contacts[n].s = contactSplit[4];
  13.     that.contacts[n].f = contactSplit[5];
  14.     that.contacts[n].a = contactSplit[6];
  15.     that.contacts[n].d = contactSplit[7];
  16.     that.contacts[n].y = contactSplit[8];
  17. }

Once this had been speeded up, all they needed to use was the YUI AutoComplete control and voilà – fast client side searches even with massive datasets.

Posted by Chris Heilmann at 2:38 pm

3.6 rating from 23 votes

Thursday, March 12th, 2009

APNG Class: Get APNG going on all browsers

Category: JavaScript, Library, MooTools, UI, Utility

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).

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.

Check out the demo page and see how to use it:


  1. // new image
  2. img = new Element('img', { src: 'images/zoom-spin.png' }).inject(document.body);
  3. new APNG(img, { useNative: false, frames: 12, endless: false });
  5. // existing images
  6. new APNG('imganimated', { useNative: false, frames: 12, endless: true });
  8. // existing div
  9. new APNG('divspinner', { useNative: false, frames: 12, endless: true, property: 'background-image' });
  11. // existing div, single image
  12. new APNG('divspinner2', { useNative: false, frames: 12, endless: true, property: 'background-position', axis: 'x', interval: [100, 90, 80, 70, 60, 50, 40, 30, 20, 10] } );

Posted by Dion Almaer at 4:29 am

3.3 rating from 17 votes

Tuesday, March 10th, 2009

More MooTools in MooTools More

Category: MooTools

MooTools Core developer Aaron Newton recently took on the task of coming up with a complementary library to the MooTools framework that would provide enhanced capabilities beyond what the standard JS MooTools core lib could, or should, provide. The results is a new project called MooTools More which aims to provide Moo developers with a set of official plugins which are well documented and supported by the team. Yesterday, the More team released their first beta which currently includes:

  • Class extensions including a Binds mutator, easier refactoring, chain pausing and more.
  • New Native extensions including more love for String and Array, plus a fully featured Date Native and a URI extension to make managing links downright fun.
  • More Element love with help for managing text selection and relative positioning (put this box’s lower right corner next to the upper right corner of that other box…)
  • Form love including a robust and extensible form validator and a class for displaying hint text over an input.
  • Extended Request functionality including JSONP support and Queuing.
  • Support for language localization for classes that output text (days of the month, months of the year, form validation errors, etc)

You can download the files here:

If you’d like to get involved in the project, the team has created an official wiki which outlines how to help and submit code changes.

Posted by Rey Bango at 11:59 am

4 rating from 42 votes

DataTables: Major update to the highly flexible data table component

Category: JavaScript, jQuery

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

Posted by Dion Almaer at 6:46 am

3.7 rating from 40 votes