You searched for: 'native'

Monday, January 26th, 2009

What is coming up with IE8 and 9?

Category: Browsers, IE

Michael Calore of Wired has a writeup of the IE team “Ask The Experts” web chat from this week.

Here is the meat:

  • The target for CSS support in IE8 is full and complete support for CSS2.1.
  • The only CSS3 module in IE8 is writing-mode (for vertical text support). IE has supported this since version 5.x, so it will continue to do so.
  • IE8 will not support CSS’ border-radius, which is often used to make rounded corners without images. Microsoft’s Chris Wilson confirms that border-radius support is “high on the wish list,” though, and should make its way into the next release after IE8.
  • There is no official roadmap for IE9, but native SVG support is likely.
  • A new JavaScript engine is likely down the road, too. A user asked: “Almost all others browsers are now considering JavaScript compilation. Safari introduced SquirrelFish and last week SquirrelFish extreme in reaction to V8. Mozilla has also started working on ScreamingMonkey. Will IE9 have a new JavaScript engine?” The response: “We’re certainly focusing heavily on improving Javascript, in IE8 and beyond. I’d expect to see great things here in the future.”

SVG support would be great, and please give us canvas. Please, Chris. What can I write on Ajaxian to help the case? ;)

Posted by Dion Almaer at 12:55 am

2.8 rating from 58 votes

Tuesday, January 20th, 2009

Seed the desktop world with lots of JavaScript

Category: JavaScript


  1. #!/usr/bin/env seed
  3. // Import libraries that are used by the program
  4. Seed.import_namespace("Gtk");
  6. // Initialize GTK+
  7. Gtk.init(null, null);
  9. // Create the main application window and set the title
  10. var window = new Gtk.Window({title: "Hello World"});
  11. // Make the program terminate when the window is closed
  12. window.signal.hide.connect(Gtk.main_quit);
  14. // Create a button with a label
  15. var button = new Gtk.Button({label: "Click Me!"});
  17. // Make the button display text when it is pressed
  18. // It passes an inline anonymous function to the signal handler
  19. button.signal.clicked.connect(function(w) {
  20.   Seed.print("Hello world!");
  21. });
  23. // Add the button to the window and display everything
  24. window.add(button);
  25. window.show_all();
  27. // Start the main GTK+ loop and initiate the program
  28. Gtk.main();

The revolution is happening. JavaScript continues to grow from onmouseover handler for cheesy scripts to powering the Web client, desktop, and server. Above is code for powering the Linux client.

Ryan Paul of Ars Technica has a great piece on building desktop Linux applications with JavaScript that delves into various JavaScript layers that you have available, including Seed the GObject JavaScriptCore bridge:

Developers who build GTK+ applications with Seed will have to use other GObject-based libraries from the GNOME stack in order to produce full applications. For example, native file access and basic remote data retrieval can be done with the Gio library.

By default, Seed has access to all of the libraries for which GIR data is available. The gobject-introspection-repository package in the PPA includes type metadata for a big chunk of the stack, including Cairo, Clutter, Avahi, GTK+, GConf, OpenGL, GooCanvas, WebKit, Poppler, Pango, libsoup, libnotify, and libxml2.

Seed exposes the APIs of those libraries in a JavaScript-friendly way with good support for type conversion. Object properties are accessible as regular JavaScript attributes, JavaScript functions can be connected to signals as callbacks, you can use JavaScript’s key/value associative arrays to pass named parameters into constructors, and you can subclass widgets and create new GObject types that implement their own signals. This means that using GObject libraries in JavaScript is very clean and seamless.

Individual scripts can be executed with the Seed runtime, just like Python and Ruby scripts. This makes it possible to build applications entirely with JavaScript. Seed provides several functions for importing modules and displaying information at the console. The following example will display a window with a single button. When the button is pressed, it will display some text at the console.

Posted by Dion Almaer at 6:12 am

3.9 rating from 18 votes

Friday, January 16th, 2009

Filament Group Goodness Using jQuery UI

Category: jQuery

We’ve featured the work of the Filament Group in the past and here they are again leveraging jQuery UI RC5 to really enhance some of their controls.

Date Range Picker

The Date Range Picker goes beyond the normal date picker control by

  • Allowing presets such ‘Specific Date’, ‘All Dates Before’, ‘All Dates After’, ‘Date Range’
  • Integration with the Date.js date library
  • Multiple inputs for the start and end dates
  • Enhanced formatting options

Slider Control

They’ve also updated their slider control to be compatible with the upcoming jQuery UI 1.6 release and new options have been added for choosing the label and tooltip text source, better integration with native UI Slider options, and dynamic width adjustments based on the parent container.

The purpose of this plugin is to allow for the jQuery UI Slider plugin to be generated using progressive enhancement. The plugin scrapes the data from a select element and generates a jQuery UI Slider in its place, acting as a proxy to the select element (regardless of whether it is still visible, or hidden from the user). This means you can use the jQuery Slider plugin alongside other input elements in a form and submit or serialize the form as if the slider is not even there. This also allows the slider to work with our without javascript since the select element can be used if the slider is unavailable.


The interesting part of these two controls is that they’re now taking advantage of the new jQuery UI CSS Framework which makes them immediately ThemeRoller-ready. This allows for easy skinning of both controls via the ThemeRoller application.

Posted by Rey Bango at 12:39 pm

3.7 rating from 75 votes

MooTools Update: Milk, MooBugger, JavaScript techniques, and more

Category: MooTools

There has been a lot of interesting news in the MooTools community recently. Before it passes us by, I wanted to aggregate some of the goodies for your perusal:


Valerio and I spent a few weeks a while back putting together a bookmarklet that would give you a Firebug-style JavaScript console for browsers without Firebug (IE, Safari, etc).

It supports console.log statements in the various formats that Firebug supports (”console.log(’foo: %s, bar: %o’, foo, bar);”) and is really useful for debugging your code in non-Firebug browsers. I like to use it in conjunction with X-RAY to solve layout issues, too.

To use it, all you need to do is drag the link on the bookmarklet page into your bookmarks and then click it on any page to bring up the console (I.E. you have to right click and choose “Add to Favorites”).

You can see it in action on the test page.

5 Advanced Techniques for MooTools Development

The documentation for MooTools is robust and covers nearly everything in the library. There are a few items left out that are either not there on purpose (because they are not guaranteed to be supported in future releases) as well as several standard JavaScript techniques that can empower your development. Here are 5 things that you should know that aren’t obvious.

Extending Class Families

A common convention in MooTools is to have numerous classes that break out functionality. This allows you to build upon the functionality of classes through extension and also keep your code base small when you don’t need everything and the kitchen sink. Consequently we get Fx, Fx.Css, Fx.Tween, Fx.Morph, etc.

What happens when you want to extend numerous classes with the same functionality? For instance, I have a popup manager called StickyWin. One of my scripts is called StickyWin.Ajax.js, which adds Ajax functionality to all the popup classes, creating *.Ajax classes (so, for instance, StickyWin.Fx is extended to StickyWin.Fx.Ajax).

Milkbox: Lightbox for MooTools


  • SWF support
  • xml gallery definition (quite a unique feature in lightbox clones)
  • really improved autoPlay features
  • really improved JavaScript direct launch (total control over number of gallery and file to start with; override of any autoPlay option)
  • refined global options management ( see changeOptions() and restoreOptions() )
  • custom events ( onXmlGalleries and onClosed )

Posted by Dion Almaer at 7:38 am

4.2 rating from 33 votes

Thursday, January 15th, 2009

CSS Transitions Shim; Getting transition support into other browsers

Category: CSS

Weston Ruter has developed a very nice shim that allows you to get CSS Transitions support in browsers that do not have the WebKit renderer.

He has an innovative approach that uses XBL and HTC bindings to detect when a style rule changes and thus when the selected elements need to be animated/transitioned into the newly matched transition style rule:

Declarative animations in CSS are an attractive solution, and I wanted to use the technology today.
I therefore developed a prototype script which implements a subset of CSS Transitions via jQuery Animation (inspired by Chris Schneider’s CSS Effects powered by mootools).

This implementation requires a binding language such as Mozilla’s XBL or MSIE’s DHTML Behaviors. Because of this, the script works in Firefox 2, Firefox 3, and MSIE 7 (IE 6 is not supported, but it does have limited functionality); in WebKit-based browsers the script does nothing since CSS Transitions are supported natively. Opera is not supported because it has no binding language.

Why is a binding language required? The script parses the stylesheet rules looking for transition-* properties, and when it finds one, it adds a binding to that style rule so that when the rule gets applied, the binding’s code is executed on each of the newly selected elements.

This enables transitions to get triggered when a class name is changed. The binding code knows the transition style properties which were defined in its containing style rule, so when it gets executed it transitions the elements’ styles from the previously matched style rule to the styles defined in the newly matched style rule. Each of these style rules I’m calling transition states.

He then goes on to talk about the subtle issues. Very nice work indeed Weston!

Posted by Dion Almaer at 5:09 am

4.1 rating from 19 votes

Tuesday, January 13th, 2009

Nokia Web Runtime; Aptana plugin available

Category: Aptana, Mobile

The mobile Web is getting increasingly interesting. Nokia has put another hat in the ring with their new Nokia Web Runtime that embeds WebKit into S60 phones:

Widgets — you’re familiar with them from the desktop. Small, focused web applications that are easy to install and use. Perfect for the small screen. Nokia has extended the S60 browser engine to behave as a runtime platform in its own right.

Web Runtime (WRT) is available in devices based on S60 3rd Edition, Feature Pack 2 and later. It’s also available as a software update for selected S60 3rd Edition, Feature Pack 1 devices. WRT is a simple mobile web technology that can really work for you.

Kevin Hakman announced an Aptana plugin for this work:

Aptana is expanding its support for mobile web applications with today’s beta release of the Nokia WRT (Web Runtime) plug-in for Aptana Studio. The Aptana iPhone Web development plug-in has been one of the most popular for Aptana Studio – and now there’s support for Nokia phones too. What’s cool (other than all the great development tools in Aptana Studio now available) is that Nokia has embedded WebKit for NATIVE phone apps. That’s right — You use your Ajax, JavaScript, HTML and CSS skills to create NATIVE apps – and in so doing get better and more optimized performance along with more capabilities that come from running natively.

The Nokia WRT is based on WebKit. So there’s lots of sound, open web technology there as a foundation upon which to build. Despite the “duh factor” of this, it’s kind of revolutionary since mobile devices historically have required specialized runtimes, libraries and tools resulting in a highly fractious eco-system for mobile app development. WebKit’s adoption by many leading mobile device manufacturers, including Apple for its iPhone, lays a great foundation at last for a mobile standard: JavaScript, HTML, and CSS — Duh!

Posted by Dion Almaer at 6:28 am

3.6 rating from 22 votes

Friday, January 9th, 2009

Palm gets it’s Mojo back?

“The need is obvious for a cross-device mobile javascript library supporting iphone, palm, and android. blackberry browser still blows” — Joe Hewitt

Joe of course created the popular iUI framework that mimics the native iPhone look and feel and gives you nice simple iPhone features via JavaScript.

Palm is on his list, because it is back in the game with their CES announcement of the Palm Pre, an offering that has an SDK that makes me happy. No Objective-C, no Java, just a Web stack!

Announcing Palm WebOS, Palm Mojo Application Framework, and Palm Mojo SDK

Palm WebOS, Palm’s next generation operating system, integrates the power of a window-based operating system with the simplicity of a browser. The user experience is designed around multitasking, and makes it easy to run background applications, switch between applications in a single step, and handle interruptions and events without losing context. Using WebOS, you’ll be able to develop fast (and beautiful) applications.

The Palm Mojo Application Framework

Palm WebOS applications are easy to write using Mojo, a new application framework based on the HTML5, CSS, and JavaScript standards that web developers already know and love. WebOS applications are installed and run directly on the device at native speed and have access to a wide range of device services.

Mojo will enable you to:

  • Build applications with gesture-based navigation, transitions, and scrolling
  • Use the WebOS notification system to alert users without interrupting them
  • Leverage the local storage capabilities of HTML5 so that data is available even when users are offline
  • Use a JSON-based message bus to tap into a wide range of device services, including contacts, calendars, and location

And good news for Palm OS developers! There are a number of ways to migrate data from a an existing PDB file to your new WebOS app. Stay tuned for more information for developers with Palm OS applications who want to build WebOS applications.

The Palm Mojo SDK

Besides the Palm Mojo Application Framework, the SDK will include sample code, documentation, and development tools. An Eclipse-based IDE is included, and you will also be able to use your choice of tools to build WebOS applications. The Mojo SDK is currently in private prerelease, and will be available later this year as a free download from the Palm Developer Network.

The Palm App Catalog

Palm will provide an on-device application catalog to deliver your apps directly to users.

We are still some time out from the release, but very cool to see!

Clink Ecker of Ars has a nice piece where he talked to a developer familiar with the SDK. If anyone knows more, please let us know :)

Posted by Dion Almaer at 12:01 am

4 rating from 30 votes

Wednesday, January 7th, 2009

Technical Details Behind

Category: Apple, Canvas

As soon as I heard about the new site launched yesterday, I knew I wanted to know more about how it was made. is a web-based way to share and collaborate over your iWork documents. I searched around the blogosphere seeing if anyone knew any technical details, but didn’t find anything, so I had to crack open Firebug and see what was under the covers. I really wanted to know whether the apps were built with Flash or Ajax or something else.

I downloaded a trial version of iWork 2009 and published a Keynote presentation. The new Sharing function unfortunately requires you to configure and use the Apple Mail program, which I did before I could test out to see how the shared documents work.

Looking at the JavaScript files, I see SproutCore and Prototype being pulled in, so everything is built with Ajax and web technologies. It’s also using WebDAV to pull in the metadata about the document, which is interesting (though it’s piping the WebDAV over some kind of proxy):

That URL returns an XML WebDAV document with the document metadata properties:

  1. < ?xml version="1.0" encoding="utf-8" ?>
  2. <multistatus xmlns="DAV:">
  3. <d :response xmlns:D="DAV:">
  4.  </d><d :href>/iw/p159985190/.iWork/Share/Untitled.pages/Metadata/</d>
  5.  <d :propstat>
  6.   </d><d :prop>
  7.    </d><d :resourcetype>
  8.     <d :collection />
  9.    </d>
  10.    <d :getlastmodified>Wed, 07 Jan 2009 02:07:51 GMT</d>
  12.    <d :modificationdate>2009-01-07T02:07:51Z</d>
  13.    <d :comment>1231293220308</d>
  14.    <x :Heckler.pages xmlns:X="urn:iwork:property">[{"guid":1,"type":"Page","w":612,"h":792}
  15. ]
  16. </x>
  17.    <x :Heckler.downloads xmlns:X="urn:iwork:property">[{"size":198284,"path":"Untitled.pages","guid":1,"downloadType":"pages09","type":"Download"},{"size":73533,"path":"Untitled.pdf","guid":2,"downloadType":"pdf","type":"Download"},{"size":30720,"path":"Untitled.doc","guid":3,"downloadType":"word","type":"Download"}]</x>
  18.    <x :Heckler.document xmlns:X="urn:iwork:property">[{"publishName":"Untitled.pages","publishDate":1231293215,"title":"Untitled","appBuildDate":"Dec 21 2008, 01:44:15","type":"Document","size":604363,"viewers":0,"marketeerPublishName":"b4d96779c707ea0d05ba5d33989ba0e45f874d3b40204a46895cdac1bd2fafac","guid":"Untitled.pages","nativeDownload":"Untitled.pages","authorEmail":"","documentType":3,"pageCount":1,"documentVersion":92008102400,"passwordProtected":false}]</x>
  21.   <d :status>HTTP/1.1 200 OK</d>
  24. </multistatus>

Notice how some of the metadata payload is JSON as well.

The web-based iWork apps are themselves built above SproutCore, using that framework to organize and do things. For example, there appears to be something named CoreHeckler that has to do with the commenting system, all built using SproutCore.

Using the Firebug Inspector, I see that the slides are a combination of an image file, the Canvas tag, and transparent DIVs that overlay; if there are hyperlinks on the page they are overlaid on a separate DIV that lies over the canvas. Comments also float on top of the Canvas using another DIV. The Canvas appears to be used for comments somehow, but I’m not sure how. I see CoreHeckler.Graphics being bound to the Canvas element; I’m not super familiar with SproutCore however.

Looking through the CSS I see they are using a few -webkit- specific CSS style rules, mostly around rounded border corners and shadows. They are also using the Webkit CSS Gradients and Clipping.

I wanted to see how things were handled in Internet Explorer. When I look at a published document in Internet Explorer a very interesting dialog box first appears:

It was indeed slow; it took about 17 seconds to load the document in IE. Clicking on individual slides took about 4 to 5 seconds to show.

I used the Internet Explorer Developer Toolbar to get into the DOM and see how things run on IE. The first thing I see is that the Canvas tag is in the DOM:

However, notice a glitch that it has the <CANVAS> and </CANVAS> tags as separate elements, which can sometimes happen when IE is dealing with unknown tags. They are also definently using VML (Vector Markup Language) on IE, since I see them pulling in the VML behavior for IE on the main page. I wonder why they didn’t just use the Google-ExCanvas library that emulates Canvas for Internet Explorer (Disclosure: I work for a team at Google that promotes open web technologies like this).

One other thing I noticed is that if you are on the iPhone you get redirected to an iPhone version of the app. This just replaces the URL /document/ section with /iphone/. When you navigate to this you get a PDF version of the page — that must be the iPhone version, a PDF file!

I wanted to see how the Pages application does things as well, so I published a document there. The published text is selectable in the browser! The document itself appears to be an image file. To do selection, whenever I run over some text it appears that a Canvas element is created and a ‘highlighted’ type graphic is drawn over the correct characters. Internet Explorer also supports similar highlighting, though on there it appears to be using VML to do the highlighting.

All in all this is a very interesting web-based application built with Ajax and JavaScript!

Posted by Brad Neuberg at 6:30 am

4 rating from 23 votes

Tuesday, January 6th, 2009

QEvent: Small, Portable Event Library

Category: JavaScript, Library

Daniel Steigerwald told us about his labor of love: QEvent, a “powerful tiny extensible standalone event library”. He provides this laundry-list of features:

* lightweight footprint
* no namespace pollution – everything is wrapped in obj.$QEvent
* normalizes the DOM event model
* work also with Javascript objects
* fixes common IE bugs including: all common used event properties, IE 2px bug, fix many IE leaks, event handlers are FIFO executed
* prevents repeated registration of same type and listener
* ‘this’ in listeners references to object or element itself
* fixes window ‘beforeunload’ issue (doesn’t work in Opera)
* fixes window ‘unload’ (must be removed by itself)
* fixes focus and blur events
* DOM events are more extendable: event keys, event objects ( event.myCustomFn() ), custom events
* firing events works for elements
* toggled and flashed events (removed after first fire)
* tested on (IE6-7, Firefox2/3, Safari, Opera, Chrome)

Isn’t event sugar a solved problem? Daniel replies:

* Occasionally, I need a lightweight library that will work with other frameworks. Frameworks such as jQuery which don’t extend the native prototype and therefor have no compatibility issues are not modular enough to meet my needs.
* No event implementation is perfect. So I took my own approach to the issue and created my dream package.
* This implementation could serve as a model for others.

The syntax is straight-forward:


  1. QEvent.add(window, 'domready', function() { ... } );
  3. // custom event
  4. QEvent.add(kitty, 'purr', onKittyPurr);
  5., 'purr', 'Sandy');
  7. QEvent.remove(document.getElementById('testKeyEnter'), 'keyenter', keyenter);

Posted by Ben Galbraith at 10:45 am

3.4 rating from 19 votes

Monday, January 5th, 2009

Who needs Flash? Having fun with Canvas and SVG

Category: Canvas, SVG

Over in SproutCore land, they have been talking about Peter Bergstrom and his amazing work with Canvas and SVG:

Peter Bergstrom has been doing some amazing work with SVG and canvas tags in his SproutCore-based these project called PaperCube.  PaperCube visualizes citations their relationships between authors.  Watching the videos of his project, you’d swear he was using Flash or Silverlight, but its not.  He’s using only native web technologies powered by SproutCore and JavaScript.  It’s a great example of what’s possible using the browser’s capabilities today.

Checkout PaperCube’s Node Graph (SVG),  Per Year View (SVG), and Paper Tree (pure HTML).

Starting to get goose pimples about 2009 :)

Posted by Dion Almaer at 8:45 am

3.7 rating from 31 votes

Friday, December 12th, 2008

YQL – converting the web to JSON with mock SQL

Category: JavaScript, JSON

I like getting data from the web and I love JSON – as it is easy to use. The issue is that not many things on the web come as JSON from the get-go. Hence we need converters. You can use cURL and beautiful soup or roll your own hell of regular expressions. Alternatively you can use Yahoo Pipes to build your converter. Pipes is the bomb but a lot of people complained that there is no version control and that you need to use the very graphical interface to get to your data (which was the point of Pipes but let’s not go there).

AlasRejoice for there is a solution now available and it is called YQL. YQL is a SQL-style language to get information from all kind of web services, and – using oAuth – even Yahoo’s social graph. There is a test console available for you to get to grips with all the information it gives you access to (which is a lot!):

The YQL console

Here comes the kicker though: for all the open services that don’t need authentication you can use these YQL statements as a REST API with JSON output and an optional callback function for JSON-P by adding it to For example to get the latest three headlines from Ajaxian’s RSS feed as JSON and wrap it in a function called leechajaxian do the following: title from rss where url=”” limit 3

The result is:


  1. leechajaxian({
  2.  "query": {
  3.   "count": "3",
  4.   "created": "2008-12-12T09:01:13Z",
  5.   "lang": "en-US",
  6.   "updated": "2008-12-12T09:01:13Z",
  7.   "uri": "",
  8.   "diagnostics": {
  9.    "url": {
  10.     "execution-time": "17",
  11.     "content": ""
  12.    },
  13.    "user-time": "22",
  14.    "service-time": "17",
  15.    "build-version": "2008.12.03.14:01"
  16.   },
  17.   "results": {
  18.    "item": [
  19.     {
  20.      "title": "Travians: Sims meets Cultures, with Ajax"
  21.     },
  22.     {
  23.      "title": "Cappuccino 0.6 Released"
  24.     },
  25.     {
  26.      "title": "The fundamental problems with CSS3"
  27.     }
  28.    ]
  29.   }
  30.  }
  31. });

You can also search the web with YQL: title,abstract,url from search.web where query=”json” limit 3&format=json&callback=leechajaxian


  1. leechajaxian({
  2.  "query": {
  3.   "count": "3",
  4.   "created": "2008-12-12T09:06:41Z",
  5.   "lang": "en-US",
  6.   "updated": "2008-12-12T09:06:41Z",
  7.   "uri": "",
  8.   "diagnostics": {
  9.    "url": {
  10.     "execution-time": "43",
  11.     "content": ""
  12.    },
  13.    "user-time": "45",
  14.    "service-time": "43",
  15.    "build-version": "2008.12.03.14:01"
  16.   },
  17.   "results": {
  18.    "result": [
  19.     {
  20.      "abstract": "Introducing <b>JSON</b> <b>...</b> <b>JSON</b> (JavaScript Object Notation) is a lightweight data-interchange format. <b>...</b> <b>JSON</b> is a text format that is completely language <b>...</b>",
  21.      "title": "<b>JSON</b>",
  22.      "url": ""
  23.     },
  24.     {
  25.      "abstract": "The <b>JSON</b> format is specified in RFC 4627 by Douglas Crockford. <b>...</b> Although <b>JSON</b> was based on a subset of the JavaScript programming language <b>...</b>",
  26.      "title": "<b>JSON</b> - Wikipedia, the free encyclopedia",
  27.      "url": ""
  28.     },
  29.     {
  30.      "abstract": "Matthew Morley has posted his PHP library for <b>JSON</b>-RPC 2.0. <b>...</b> I am think it is great to see the expanding <b>JSON</b> toolset available in JavaScript libraries. <b>...</b>",
  31.      "title": "<b>JSON</b>",
  32.      "url": ""
  33.     }
  34.    ]
  35.   }
  36.  }
  37. });

What about screenscraping? You can get data from any valid HTML document using XPATH with select * from html. For example to get the first 3 tag links on my blog you can do the following: * from html where url=”” and xpath=’//a[@rel=”tag”]’ limit 3&format=json&callback=leechajaxian

The team is working on making this easier – while we run every page that is indexed through tidy there is still a lot of choking going on (if people wrote valid HTML that wouldn’t happen).

YQL is a pretty easy but also versatile language. You can even use complex aggregation and filtering by for example hosting a lot of URLs in a spreadsheet and loading them one by one before aggregating. The example given in the console is “select * from rss where url in (select title from atom where url=””) and description like “Wall Street” LIMIT 10 | unique(field=”title”)”

Happy converting!

Posted by Chris Heilmann at 4:20 pm

4.3 rating from 52 votes

Tuesday, December 9th, 2008

You Leaked on my JavaScript!

Category: JavaScript

As soon as I read John’s post on JavaScript Language Abstractions I knew that it would draw a lot of chatter and fuzz. John started with:

Pyjamas, GWT, and Objective-J all hinge around a central concept: Abstracting away the authoring of JavaScript-heavy web applications by allowing the developer to program entirely in their natively language (be it Python, Java, or an Objective-C-like-language accordingly).

This is a large abstraction – much more so than what is provided by most JavaScript libraries – you are programming in another language which is outputting JavaScript code. You are likely to never see a DOM object or any pieces of the native JavaScript language.

I worry about large abstractions like this for a number of reasons.

When you use a pure-JavaScript library (such as jQuery, Prototype, Dojo, Yahoo UI, etc.) you are still programming using the JavaScript language. In the case of jQuery a large number of users, who have either never programmed JavaScript before or never programmed before, acquire a good grasp of how to use JavaScript – accented by the use of the library. A pure JavaScript library makes annoying tasks simple, the largest of which being cross-browser support. It does nothing to dilute the quality of the JavaScript-authoring experience. In fact I would argue that JavaScript libraries do much to give JavaScript a particular style and feel. Code written with Prototype feels very different from code written with jQuery – and this is fine since it’s giving the user the option to develop in the JavaScript language how they best see fit.

Charles Jolley of SproutCore came out with support:

I’ve written about this myself on the SproutCore blog before, but I think it bears repeating: The native programming language of the web browser is JavaScript. To write the best software possible, you need to embrace the native tools of the platform you are working on.

Michealangelo said that to him a sculpture already existed within a piece of marble. His job was to simply remove the parts that didn’t belong.

Like any creative endeavor, writing great software is as much about embracing the material you are working with as it is about building something new.

Everybody is writing “abstractions” around JavaScript

That came from Francisco of 280 North / Objective-J in On Leaky Abstractions and Objective-J.

This is a great, very thoughful post that argues that even Ajax libraries are JS abstractions too. He doesn’t just talk about it, he shows jQuery, Prototype, and Dojo code, as well as his own Objective-J to get his point across. He then goes on to talk about why they took the JavaScript++ approach (adding actual syntax), concluding with:

To me what we’ve done with Objective-J and Cappuccino seems inevitable. Even the most conservative major JavaScript libraries can’t get away without adding features to the language, and we’ve simply taken the next logical step with Objective-J. Similarly, Cappuccino is a tool that allows you to stop thinking about web pages and browser incompatibilities, and instead focus on the complex problems presented by the challenge of creating full-on applications on the web. As we’ve said countless times, Cappuccino isn’t for everything. All of this abstraction isn’t necessary if you’re simply trying to add dynamic elements to a site like bankofamerica or digg. Cappuccino is for building rich applications in the browser, a small minority in the web world today. We believe that this is where things are headed, and we designed Cappuccino specifically to get us there.

JavaScript is a malleable language. One that lends itself to the creation of DSLs. This is why Dojo code can look so different to jQuery code. The lack of a class system and an import system means that a lot of libraries reinvent the wheel, in their own way.

Abstractions are an interesting beast. Go with what feels right to you. I personally like the “create a DSL in the language itself and allow me to sneak out” style versus a new language, but that is just me.

Posted by Dion Almaer at 7:26 am

4 rating from 27 votes

Appcelerator Titanium: Breathing AIR for the Open Web

Category: Appcelerator, Podcasts, Runtime

The Appcelerator folks have a big announcement today. They are announcing an early release of Appcelerator Titanium which is easiest if you think of it as an “Open Web version of Adobe AIR” in that it is a runtime that has extended APIs that allows developers to create applications using Web technology.

It is built glueing and moulding WebKit, Chromium, and Gears in very interesting ways indeed. A lot of tough work was done in getting the glue to bind to graphics toolkits on various platforms, and then the work to tear apart Gears and allow it to take in new modules which implement APIs such as:

  • Native windowing (transparent custom chrome)
  • Direct file system access
  • Database integration and storage
  • Desktop notifications
  • Application and system menu control
  • Geo-location

Examples that show off the ti APIs are available. You will note that some of these do not use the Appcelerator Ajax library. This shows that Titanium does not rely on the Appcelerator SDK itself (although you can of course do so!).

Listen to the podcast

We sat down with some of the Appcelerator team, Jeff Haynie and Nolan Wright, and had a detailed conversation with them about why they did this, how they did it, and what it means for developers.

We walk through the implementation, and how developers actually create applications.

We have the audio directly available, or you can subscribe to the podcast.

Some details

A good way to really delve into the details is looking at a sample application. There are some good demos as we mentioned, but the Web 2.0 hello world has to be Tweetanium a twitter client.

Download the source and let’s walk through it quick.

Firstly, you will notice the Rakefile, which gives away the Ruby side of the house here. In fact, the build system feels rails-like. If you open config/tiapp.xml you will see a file that is like the Adobe AIR manifest, describing the application. The windows for the app are defined here, for example:

  1. <window>
  2.    <id>main</id>
  3.    <title>Tweetanium</title>
  4.    <url>app://main.html</url>
  5.    <width>350</width>
  6.    <height>750</height>
  7.    <maximizable>false</maximizable>
  8.    <minimizable>false</minimizable>
  9.    <closeable>false</closeable>
  10.    <resizable>false</resizable>
  11.    <chrome scrollbars="false">true</chrome>
  12.    <transparency>1.0</transparency>
  13. </window>

Now, let’s open up public/javascripts/main.js to see the bulk of the application logic itself.

Here you will see usage of some of the APIs. Here is how it ties into the Growl (or equivilent) notification system:


  1. var notification = new ti.Notification;
  2. notification.setTitle('Favorite');
  3. notification.setMessage('Your favorite request was successful');                                                        notification.setIcon('app://images/notification.png');

The database API will look very similar to you (like Gears), but you access it via var db = new ti.Database;.

The app plays sounds when you get Tweets, all via var sound = ti.Media.createSound(path);.

Then you have the tray menu access via var menu = ti.Menu.createTrayMenu(trayIcon,null,function(sysmenu) { ... });.

And you can get access to the native windows, such as i.Window.currentWindow.isVisible()).

For fine control over dragging you simple tie into ti.Extras.setDraggableRegionHandler(..).

This is exciting stuff, and I know that the team is listening to hear your thoughts.

In a related note, I just posted on an App Discover add-on that shows how we could add discoverability of applications like Titanium apps (as well as Greasemonkey, add-ons, plugins, and more).

To link to a Titanium app such as Tweetanium you would simple add a link tag like this:

  1. <link rel="application" type="application/vnd.appcelerator-titanium-app-package+zip" title="Tweetanium Appcelerator Titanium Twitter App" href="" />

Posted by Dion Almaer at 7:00 am

3.6 rating from 70 votes

Wednesday, November 26th, 2008

Getting Semantic With Microformats Series by Emily Lewis

Category: Microformat

One of the best aspects of living in the Bay Area is bumping into all sorts of interesting computer folks. Today I’m working from a coffee shop and bumped into Tantek Çelik, CSS and Microformats man. He pointed me to a fabulous blog series introducing Microformats and all the major formats for a more lay-person audience, created by Emily Lewis:

Lots of great information and tutorials in that blog series.

Tantek also pointed me to an interesting wiki page laying out how browsers and web pages can integrate Microformats more deeply into their user-interfaces:

Recently there have been many really good user interface ideas and suggestions for working with microformats. This page serves to collect and document them so that we may be inspired by and iterate on each others’ works.

The Operator plugin for Firefox, which natively supports deep UI integration for Microformats and discussed on the wiki page as well:

Posted by Brad Neuberg at 7:00 am
1 Comment

3.9 rating from 12 votes

Thursday, November 20th, 2008

This Week in HTML 5: Video tag changes

Category: HTML

Mark Pilgrim is back telling us what is new in the world of HTML 5 and focuses on changes with the video tag and API:

The big news this week is a major revamping of how browsers should process multimedia in the <audio> and <video> elements.

r2404 makes a number of important changes. First, the canPlayType() method has moved from the navigator object to HTMLMediaElement (i.e. a specific <audio> or <video> element), and it now returns a string rather than an integer. [canPlayType() discussion]

The canPlayType(type) method must return the string “no” if type is a type that the user agent knows it cannot render; it must return “probably” if the user agent is confident that the type represents a media resource that it can render if used in with this audio or video element; and it must return “maybe” otherwise. Implementors are encouraged to return “maybe” unless the type can be confidently established as being supported or not. Generally, a user agent should never return “probably” if the type doesn’t have a codecs parameter.

Wait, what codecs parameter? That’s the second major change: the <source type> attribute (which previously could only contain a MIME type like “video/mp4”, which is insufficient to determine playability) can now contain a MIME type and a codecs parameter. As specified in RFC 4281, the codecs parameter specifies the specific codecs used by the individual streams within the audio/video container. The section on the type attribute contains several examples of using the codecs parameter.

Video and the Open Web is a huge issue. The idea of having video be a native object that other components can integrate with (e.g. rotate in canvas) is great. We need codecs implemented. We need penetration. We need more.

Posted by Dion Almaer at 6:58 am

3.2 rating from 14 votes

Tuesday, November 18th, 2008

Live Blogging the Yahoo BrowserPlus Release Party

Category: Browsers, Plugins, Yahoo!

Austin Chau and I are here on the Yahoo campus for the Yahoo BrowserPlus release party. I’m going to blog the event as it happens here (Disclosure: I work for Google with the Open Web Advocacy and Gears teams).

First, Ernest Delgado, Canvas whiz here at Yahoo, sent me a cool demo showing a prototype he and Michael Johnston made of Yahoo Maps and Flickr integrating with Yahoo BrowserPlus using the native gyroscope on Macs. You just hit the side of the laptop, for example, in order to jump to the next Flickr picture, or tip your laptop to zoom around a Yahoo Map:

Eric Miraglia is opening the release party up with a nice Introduction to YUI:

* Starts with some really nice demos of things you can create in the browser using YUI.
* Underlying technologies driving browsers are very complicated.
* About 7 knowledge areas needed for web development — each is different than the standard, with bugs and specialized expert knowledge. You get about 672 different permutations of things needed for you to know and test on.
* YUI focused on “A-grade browser support”.
* Good to target toolkits like YUI, since it helps you be future-compatible when new browsers appear like iPhone and Google Chrome
* Goal of YUI: Have a sophisticated widget like a rich text editor work cross-browser using just a snippet small snippet of code.
* Also want things to be automatically accessible.
* Progressive enhancement should be easy and possible, showing a cool demo of hierarchical menus still being readable on Lynx, a version of Firefox with no JavaScript, and then a full IE with CSS and JavaScript on.
* YUI is ala carte, file sizes are small, between 15 and 30K for any given component (including gziped)
* Deployed at Yahoo for three years, on every major property, 400 million users/browsers consuming YUI every month. In properties like Flickr and on the front page, well tested.
* YUI in lots of places: iGoogle, Wall Street Journal, Mozilla, LinkedIn,, Obama website, more
* ~1,000,000 external downloads

Now Lloyd Hilaiel is getting up to present on Yahoo BrowserPlus, the focus of today’s event:

* The teams motivations: people get browsers — browsers could be so much more — plugins aren’t working! Takes too long for new innovations to propagate (5-7 years)!
* Non-goals: no fixing web UI, no web outside the web (like AIR or Mozilla Prism), no improving JavaScript (that’s the domain of YUI, JQuery, Dojo, etc.)
* YES to new web features with low overhead. Low overhead: low intellectual overhead, low overhead to implement and get it into widespread production
* Plugins have strengths (scriptable, cross-browser), but they have problems… installing them sucks, writing them is hard, sharing doesn’t happen, updating is clumsy, securing them is hard
* BrowserPlus enables in-browser desktop applications
* Abstraction layer over web plugins. Implements all the stuff common to web plugs, decreasing cost of development and helping end users with management and installation
* User install core platform just once
* Page requests distinct services it wants to use, if not installed user is prompted to accept services and they are installed on the fly
* Demo of Flickr uploader working in browser using Yahoo BrowserPlus – drag and drop into browser of images, even folders for recursive uploading, 100% leveraging client-side functionality, multiple file selection.
* Demo of a BrowserPlus marble maze game using the Mac’s motion sensor that exposes a single function that gives the laptop’s x and y position and acceleration. Idea is that you can expose simple functions for custom hardware — rest of app can just use web technologies.
* Demo where you can drop a file into a page and then work with the files contents, service coming out soon. Took just one day for them to create. Imagine dragging and dropping vCards or iCal files for example for a web-based calendering system.
* Demo showing desktop notifications
* Services installed on demand, no more monolithic plugins — instead smaller services, installation seemless, no browser restarts
* Authoring of new services currently restricted to Yahoo and partners
* BrowserPlus will be Open Source! Goal is to have Service API and services open source by end of year, everything else by mid next year.
* Need to figure out how to protect end-users while removing Yahoo from the loop of handling serving up the services
* Yahoo roles: consumer of the platform and the project maintainer (bug fixes, feature requested, service adoption)

After a short break the team (Lloyd Hilaiel, Steve Spencer, David Grigsby, and Gordon Durand) did a deep dive on the Yahoo BrowserPlus architecture, security model, user-facing interaction, how web developers interact with it, and how to create your own services. There is some really impressive engineering in here; they’ve tackled some hard problems. There’s lots of great material they went over, too much to summarize here. You can download the presentations from here in Keynote format.

Here’s a snippet of using BrowserPlus from some JavaScript:

Desktop notifications:


  1. BPTool.Notify.create().show("My Title", "My Message");

Drop-in uploading widget:


  1. BPTool.Uploader.create("uploader", {uploadUrl: "up.php"}).render();

Check out the full developer docs that went live for more details.

Services are either binary shared libraries (.so or .dll) or Ruby script! The Ruby interpreter itself is a Yahoo BrowserPlus service that other services can use (services can be composed together and can work with each other, similar to how Unix utilities work with piping).

Posted by Brad Neuberg at 7:36 pm
1 Comment

3.5 rating from 24 votes