You searched for: 'native'

Tuesday, November 18th, 2008

Fixing the Web, Part I

Category: Editorial

Over on my personal blog I’ve started a new semi-regular series called Fixing the Web. From Part I of the series:

We’ve made major progress on the web since 2005 and the rise of Ajax. JavaScript toolkits like JQuery, Dojo, and YUI have expanded what we can do with web browsers and increased our productivity, while dynamic high-profile web sites have legitimized using DHTML and Ajax. The rise of web browsers like Firefox, Safari, and Chrome have done a huge amount to help revive the web and web applications. Developers such as all of us in the Ajax community have shown that it’s possible to do things with the web cross-browser that no one expected, including Comet, cross-browser vector graphics, and more.

However, even with all of the amazing work the last few years, the web has some very serious foundational issues that we need to solve or else it’s game over. In the next year or two we will begin to hit the limit of what we can achieve with clever JavaScript tricks (I’ve literally made a career out of this browser black magic). As an industry we’ve put off having to solve some very serious issues. Unfortunately the bill is going to come due soon, and if we don’t take action, solve these issues, and push the web in a new direction some other possibly much less open technology will take over the bulk of new development.

We need to do something about this. This blog post is part of a new, semi-regular series called Fixing the Web. The goal is to highlight these issues, identify potential solutions, and have a dialogue. I don’t claim to have the answers for the situation we are in. However, I do know this — if there is any community that potentially has what it takes to solve these issues I believe it’s the Ajax and JavaScript communities, which is why this is a perfect place to have these discussions.

I propose some starting ways to address this and fix things:

To start, I see four areas that are broken that must be fixed:

1) Make developing for the web much easier and more powerful. There are gaping holes in the web that need to be fixed. Examples include:

* Layout – layout needs to be _much_ easier. We need real, kick-ass, drop dead simple layout. You shouldn’t have to be a CSS wizard to get multiple columns, for example.
* JavaScript++ – JavaScript needs to evolve for programming in the large and medium.
* Bling – Browser’s need much better native multimedia support, real vector graphics, and _fast_ (really fast) animation
* Tooling – We need much better open web tooling support, such as IDEs.

2) Solve the standards problem. The web standards process is broken. There is a real disconnect between developers needs and the W3C’s standard setting process, creating a dangerous power and leadership vacuum. We need to come up with better mechanisms for creating standards, as well as organizations that can help manage them.

3) Solve the distribution problem. Both Gears and Yahoo BrowserPlus are attempting to address this area. There is just a sheer mass of inertia on the web. It doesn’t matter if you have the most amazing standards, developer tools, etc. if they aren’t in enough places to do anything. This problem can also be re-framed as ‘Solve the Internet Explorer problem’, because the other browsers are pretty damned good at getting things out there — IE is the mass that blocks any positive forward web progress. IE 8 is a start, but at the end of the day it’s not doing enough. This is also linked to how hard it is to do web development, since you have to be a wizard to know the potholes or do crazy workarounds.

4) Solve the innovation problem — There is a saying in politics that you create ideas so that you can draw on them when there is a crises, such as we are seeing now. Much of the innovation on the web has surprisingly happened by Flash, with some by Silverlight lately — when we get excited about being able to do video on the web, which is great, that’s a pretty sad indictment of the open web ‘owning’ the future. We’ve got to have better mechanisms for stamping out potential futures and innovation that can then compete, the successful ones turning into standards. Mozilla has done a good job of this with the web “concept cars” type work they’ve been doing.

What do you see as the major areas we need to address? Expect to see the issues above, and others, discussed in future blog posts in this series.

Posted by Brad Neuberg at 8:30 am

3.2 rating from 28 votes

JS-909: Drum Machine, No Flash

Category: Showcase, Sound

Cameron Adams has another fun Javascript experiment in JS-909, a drum machine he built from scratch. It plays sound without Flash, along with a check that your browser is capable of playing sound this way, and also includes a little canvas-powered psychedelic graphics engine.

At the recent Web Directions JavaScript libraries panel, I was in charge of representing the hard-working non-library hacker. (Of which there exist approximately two in the wild.) And when it came to the final exercise – the one with the aim of blowing people’s minds – there was but one thing I could do: make a drum machine. Without libraries. Without Flash.

I’m fully aware that there’s much better ways of working with sound on the Web, but I’m also fully aware that I like making useless toys. The result of these two realisations? JS-909.

Sound comes via the <embed> tag, relying on native browser functions:

for (var sound in sounds)
var embedContainer = document.createElement(“div”);
embedContainer.className = “embedContainer”;
embedContainer.innerHTML = soundElementString(sound, sounds[sound]);

I recently found it’s possible to combine this no-flash sound technique with data: URLs, so you can build audio web apps without Flash and offline, running from a single file. It’s all very experimental at this stage though.

Posted by Michael Mahemoff at 4:09 am

3.9 rating from 26 votes

Friday, November 14th, 2008

Using UIWebView (WebKit) in your iPhone App

Category: iPhone, Mobile

Dr Nic has shared his experiences using WebKit to implement part of your iPhone app (in his case SurfView):


  • - (void)webViewDidFinishLoad:(UIWebView *)webView is slow. “You’re running an interpreter (JavaScript runtime) on top of a device with a small CPU and small memory. Go figure.”
  • The JavaScript bridge does not appear to block the main thread. This is a good/bad thing. You can invoke JavaScript code within the WebKit via your native Objective-C code.
  • The JavaScript bridge is one directional. From Objective-C/UIKit you can invoke JavaScript upon the WebKit and henceforth do wonderful things
  • Multiple languages in one project. Whilst we mainly just wanted to take a static HTML file, and dynamically update various elements with application data (e.g. the surf and weather conditions in the example above), we needed to do that via JavaScript.

Why you may want to do it

WebKit for rapid prototyping: WebKit exists and it is awesome at rendering HTML and CSS, with access to the powerful CSS3 transformations and webkit-specific bonus features.

It is highly likely that your designer can make something beautiful looking in Photoshop and cut it up into HTML + CSS. Comparatively, its highly unlikely they can cut it up into native Objective-C code.

WebKit isn’t the holy grail for non-Objective-C developers, but if your grand-poobar level skills are in JavaScript and HTML, and your Objective-C/iPhone skills are still catching up, then its a wonderful prototyping platform. Especially for static, complicated displays of data. Especially if that data includes HTML content from an external feed which needs to be rendered.

For Oakley’s Surf Report app, Anthony is toying with replacing some of the WebKit usage with native UI elements (normal UITableView with custom UITableViewCells) so that we can get back those precious seconds and give them to the user as a Christmas present.

A very nice read.

Posted by Dion Almaer at 8:21 am

3.9 rating from 17 votes

New SVG Editor… written in Flash

Category: SVG, Utility

There is something ironic about an SVG editor written in Flash, but this preview by Tiago Cardoso, written using the inEvo SVG engine is fun to check out. It uses SVG natively and has some cool features like gesture recognition and shape recognition.

Posted by Dion Almaer at 7:00 am

3.9 rating from 18 votes

Thursday, November 13th, 2008

jsTree Nears 1.0; Solicits Feedback

Category: Component, jQuery

Several months ago, we covered jsTree, a promising new tree component built on top of jQuery. It’s since gained its own website and is nearing a 1.0 release. There have been a few changes since we last wrote about it:

* A lot of focus on the JSON data source

* Native async support (meaning correct data loading, event handling, etc).

* In the last public version there is a simple instance manager.

* The instance manager enabled full multitree support – node dragging between trees, with language cleanup (if languages differ), and also and most important – the receiving tree’s dragrules are respected.

* There have been a lot of bugfixes, optimizations, enhancements.

It’s coming along nicely since the initial story; give it another look and pass on bug reports and feedback to Ivan at his blog prior to the 1.0 release.

Posted by Ben Galbraith at 8:00 am

3.9 rating from 40 votes

reglib: Another CSS based, declarative library


  1."a.popup", function(e){
  3.     return false;
  4. });
  6. /*
  8. I declare, forthwith, that all clicks on <a> elements with
  9. class "popup" shall be handled thusly...
  10. */

This comes from a new library that Greg Reimer of Sun has open sourced called reglib.

He gives us the back story:

Almost a year ago I made all kinds of big talk about releasing a JavaScript lib I was developing for This library obviates (some of) the need for what I call the load-traverse-modify methodology of unobtrusive JavaScript:

  • Load: make it your business to know when the DOM has loaded.
  • Traverse: use a query to scan said DOM, returning a list of elements.
  • Modify: attach event handlers to, and otherwise manipulate, those elements.

Although LTM is quite common in JavaScript development, I believe it’s an antipattern. The reglib tries to get closer to the CSS way of doing things: declare what kinds of elements get what behavior, and have that declaration take immediate effect at a global level, regardless of subsequent mutations to the DOM.

If you look at the library information it looks a lot like jQuery and other access points in other languages.

reglib is so named because it lets you “register” an event handler against a CSS selector. Like CSS, once the above code is “declared”, the event handling behavior takes effect globally. This is true regardless of whether the onload event has fired, or whether the DOM has finished loading off the network, or whether arbitrary sections of DOM have been overwritten.

Besides event declaration, this lib contains a few other convenience and helper utilities. Specifically:

Whenever possible this lib takes advantage of native APIs, such as Node.getElementsByClassName() and Node.querySelector(), falling back on more laborious manual methods for doing the same things in older clients.

Posted by Dion Almaer at 4:50 am

3.5 rating from 25 votes

Tuesday, November 11th, 2008

JavaScript Object Observability in ASP.NET Ajax 4.0

Category: Atlas, Microsoft

Dave Reed wrote in to tell us about an article he’s written about Microsoft ASP.NET Ajax’s utility for adding observability to JavaScript objects. The idea is simple:

The Microsoft AJAX 4.0 preview includes this Sys.Observer class that allows you to be notified of updates to POJO’s, provided you use its APIs to modify them.

Sys.Observer provides a mechanism for registering (and de-registering) listeners to be notified when values change in the object:


  1. Sys.Observer.addPropertyChanged(objectToObserve, callbackFunction);

However, you must use Sys.Observer to make changes to the objects being observed:


  1. Sys.Observer.setValue(objectToServe, "property", "newValue");

Alternatively, you can have the framework add a setValue() function directly to the object being observed:


  1. Sys.Observer.observe(objectToObserve);

See the full article for more details.

Posted by Ben Galbraith at 7:00 am

2.7 rating from 32 votes

What’s not in HTML 5?

Category: HTML, Standards

In Mark’s latest installment of This Week in HTML 5 he delves into what ISN’T in the spec:

It has been suggested (1, 2, 3, &c.) that HTML 5 is trying to bite off more than it can metaphorically chew. It is true that it is a large specification, and it might benefit from being split into several pieces. But it is not true that it includes everything but the kitchen sink.

For example, HTML 5 will not

Posted by Dion Almaer at 4:22 am

4.2 rating from 22 votes

Friday, October 31st, 2008

Aptana Jaxer 1.0 released, brings together the Aptana trinity

Category: Aptana

Paul Colton of Aptana has announced the Jaxer 1.0 release. This comes on the heels of the general availability of Aptana Cloud, and of course their Studio product that ties things together.

First, Jaxer 1.0:

If you’ve already been using Jaxer you’re likely familiar with its database, file system and socket APIs and its ability to not only run JavaScript and process the HTML DOM at the server, but also to expose server-side functions to the Web such that a HTML page can call back to those functions directly from the Web page. Thus Ajax communications could not be any easier with Jaxer: You just write a server-side function, “proxy it” with one line of code, then call it from the Web browser as if that function were part of the web page. Jaxer handles the client/server communications, data transformations, and provides the client-side function with its return value (either synchronously or asynchronously).

Recently we’ve added even more capabilities based on community feedback. These including support for RESTful APIs as well as native support for JSON to supplement the E4X (XML for JavaScript) support that’s been there all along (thank you Mozilla!). The combination of these means you can easily create RESTful services that can be consumed by a wide array of Ajax applications, Web gadgets, Facebook or OpenSocial apps, and even Adobe Flash or Microsoft Silverlight based apps since those support JavaScript too. Plus mobile devices like the Apple iPhone and phones from other manufacturers are nearly all supporting JavaScript and Ajax. As you can imagine we’re excited to see JavaScript become more and more the lingua franca of Web applications. It’s already ubiquitous on the client side and now you can use it confidently on the server side.

We sat down with Paul, Uri Sarid (CTO), and Kevin Hakman (Director of Evangelism) to talk about this release in particular as well as the other recent news and the grand plan.

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

There are a series of nice new screencasts to give you a quick feel for it all. Learn more about Jaxer, Cloud, and Studio.

Posted by Dion Almaer at 1:14 pm

4.2 rating from 26 votes

Thursday, October 30th, 2008

The Ajax Revolution: From UI responsiveness to functionality and beyond

Category: Ajax, Editorial

This comes as part of the from my personal blog series…

In recent presentations, Ben and I have been taking a look back on the rise of Ajax (where Ajax == popularity of dhtml :). At its core, I think it all comes down to UI responsiveness.

When you look at the killer apps such as Google Suggest and Maps, they broke through a set of myths on the Web.

Latency is the killer issue on the Web

We are used to autocomplete in fields and forms these days. However, if you think back to when Google Suggest came out, if someone had asked you whether it was a good idea to do a background request on each key press you may think they were insane. The beauty of suggest is that it broke through and gave great performance. You could do this on the Web.

Rich interactions are not possible on the Web

Again, we are used to applications that allow us to interact with data in a better way. With Google Maps, you feel like you are moving around the map. You are interacting closely with the data. Before hand, we were used to a static view that had us clicking up/down/left/right or zooming around. Every click responds with a wait and a repaint of the entire screen.

This seems crazy. No application framework would ever do a refresh like this, and dhtml broke us out of that box.

This is all pretty obvious, especially when you take a look back at the HCI research on how anything that takes more than a second drives your users batty (and gets them out of the zone). Getting down to 0.1 seconds and your users will feel like they are at one with the app :)

The responsiveness that Ajax gave us opened up the Web for truly useful applications that users could live in without getting frustrated. This bridged us from pages to apps.

We continue to see movement here too. The reason that WorkerPool was added to Gears (Web Workers in the standard) was to give developers the ability to send “work” (run code) to a place that isn’t on the UI thread, which is a big no-no for building any kind of responsive application. As we write bigger and bigger Ajax applications, we end up running more code, which competes more with the browser. Having Web Workers in the browsers natively, and available to those that don’t via Gears, allows us to build compelling applications.

Add to this fast JavaScript (SquirrelFish Extreme, TraceMonkey, V8), and we can get to a happy place with respect to performance.

So, if the original Ajax revolution was about UI responsiveness, where do we go from here?

I think that we have a few directions that we need to go in:


We need to be more productive. We all feel a lot of pain with Web development, even as we get a lot of benefit from the reach and openness. This is pain is the reason that Ben and I are working under a developer tools umbrella at Mozilla. We want to work with the community to become more productive. It is extremely important to do so.

It shouldn’t be hard to put together the hundreds of applications that the Enterprise and beyond spend too much time and money on every day.

We shouldn’t have to fight the browsers to get things working as much as we do today.

Any ideas on what would help you? We are all ears.

Compelling applications

We have spent a lot of time in the weeds talking about the engine of the car. We jump on a point release of some framework, and argue about the minutia of framework differences.

Maybe it is time to pop our heads up a little and think about how we can build compelling, feature rich applications.

The browser is extending to the desktop more, to give you nice full experiences. The real-time Web is kicking off, and Comet will become a big part of how we develop many applications in the future. It needs to be as natural to us as the simple request/response world that we are used too.

UI latency is only one piece of user experience. There are many others. HTML 5 gives us richer components and semantics to work with. We have been working on different UI paradigms such as the Form History pattern that we have discussed before. Aza Raskin and others have been doing really good work on new paradigms too.

Personally, I think that new input devices are going to create a huge change for us, and the abilities of Web applications. We played with the WiiMote as an input device. We then have multi-touch, which is available on touch pad devices as well as touch screens. Finally! We are moving past the prehistoric inputs where we can point and say “Ug”.

I am incredibly excited about where we are, and where we are going. There is a ton of work to do, but people feel engaged. Let’s “get ‘er done”.

Where do you think we are going?

This presentation goes over some of these points, in more detail:

I also wrote about this weeks Microsoft PDC, and what it means for us all. What are your thoughts?

Posted by Dion Almaer at 9:59 am

4.3 rating from 27 votes

Monday, October 27th, 2008

Not Possible to Use IE’s Web Slice Icon In Other Browsers

Category: IE, Microsoft

Update: Jane Kim from Microsoft posted a message about this issue:

Hey folks, we created the guidelines with this scenario in mind – we definitely want to support applications using the icon to indicate Web Slice content.

We will update the documentation to make this clearer. Thanks!
– Jane Kim [MSFT]

Thanks for clarifying things Jane!

Original post:
Web Slices are a cool new feature coming in Internet Explorer 8, where you can subscribe to portions of a web page and see updates to them in the Favorites toolbar. There is even an open specification for Web Slices (partially based on hAtom) so that others can implement it. Daniel Glazman has been working on a Firefox extension to implement the spec.

Just as RSS has a standard icon where a site can indicate it can be subscribed to:

Web Slices have a similar icon to indicate you can subscribe to a portion of a page when the standard is being used:

Unfortunately, the terms of service for this icon got switched around and Daniel noticed that it looks like other browsers therefore can’t use it. From the terms of service for the icon:

DO NOT use the icon:

  • As a logo or favicon for a Web site or online content, whether Web Slice enabled or not. The icon represents the Web Slice technology, and not the Web site or content itself
  • As an application icon
  • As an icon or logo for any product or service, or as a feature or design element of another icon, logo, trademark or service mark
  • In any manner that expresses or implies an affiliation with, sponsorship, or endorsement by Microsoft or any third party

I’m sure this was unintentional, as often happens with licenses, since Microsoft has provided a simple standard in good faith. Microsoft should just open source the icon, just like the RSS icon was, so that there can be a standard UI mechanism to indicate to users that a Web Slice is available. As an alternative, if they want to retain control to ensure the icon is used properly, they should update the terms of service so that other browsers to use the icon to indicate a portion of the page can be subscribed to.

Posted by Brad Neuberg at 9:00 am

2.8 rating from 48 votes

OpenAjax Alliance Announcements

Category: OpenAjax

The OpenAjax Alliance, an organization that has been working to promote more standardization among JavaScript toolkits and IDEs, held an InteropFest last week at the AJAXWorld conference.

The OpenAjax Alliance has been focusing on two things:

  • Ajax Developer Tools – The group has been working on creating a standard XML file format called OpenAjax Metadata. The goal of this is to have a file format that can describe all of the JavaScript APIs and widgets in an Ajax toolkit, making it easier for IDEs to just read this file in to do nifty things like autocompletion and code hinting.
  • Ajax Mashups – The group has been working on producing two technologies to make Ajax mashups easier. The first is called OpenAjax Hub, and provides a secure message ‘bus’ on which different widgets on a page can communicate with each other without having to know about specific JavaScript libraries; internally iframes are used to isolate the widgets and toolkits from each other. The second technology for mashups is again the OpenAjax Metadata format, which describes a “mashable widget” standard to provide extra information needed by mashup tools.

The big news from last week for the OpenAjax Alliance was getting these pieces interoperating with each other across a range of products and projects:

With today’s announcement, multiple vendors have implemented key parts of OpenAjax Metadata. Developer tools from Adobe, Aptana, Eclipse Foundation, and IBM’s Rational software division consume OpenAjax Metadata and various popular Ajax libraries and widgets have been made available in the OpenAjax formats.

Vendors participating in mashup-related interoperability include Google, IBM, Nexaweb, SAP and TIBCO. The members of OpenAjax Alliance have completed a reference implementation for both OpenAjax Hub 1.1 and OpenAjax Metadata.

One of the highlights of AJAXWorld today was when Adobe’s CTO, Kevin Lynch, began his keynote at AJAXWorld today by talking about how Dreamweaver CS4 was using the widget format from OpenAjax Metadata as the product’s native widget format, with demos of drag&drop of widgets from some popular toolkits onto the Dreamweaver canvas (e.g., I am pretty sure I saw Dojo and YUI widgets showing up in Dreamweaver, but the screen was a bit blurry).

Learn more about:

Have you worked with one of these technologies? What’s your experience and thoughts on them?

Posted by Brad Neuberg at 8:00 am

3.6 rating from 17 votes

Thursday, October 23rd, 2008

Microsoft Live Labs Web Sandbox

Category: Security

The Microsoft Live Labs team has announced a new project: Web Sandbox. The team is lead by Scott Isaacs, someone who we owe thanks to, since he played a large part in the birth of dhtml (and thus, Ajax).

The sandbox takes HTML, CSS, and JavaScript, and puts it in an isolated box. The goal is a little like Caja, AdSafe, FBJS, and other solutions that try to make JavaScript execution more secure in some way.

Take a look at an example, such as the script error sample, which shows how errors are handled and don’t blow up the entire page.

The sandbox converts code like this:

  1. <html>
  2.     <head>
  3.         <title>Script Error Sample</title>
  4.         <style>
  5.             .sampleTitle
  6.             {
  7.                 font-family: Segoe UI, Tahoma;
  8.                 font-size: 11pt;
  9.                 font-weight: bold;
  10.                 color: #07519A;
  11.             }
  12.             .scriptErrorSample
  13.             {
  14.                 height: 130px;
  15.                 border: solid 1px lightgrey;
  16.                 background: white;
  17.                 background-repeat: repeat-x;
  18.                 background-position: left top;
  19.                 padding: 10px;
  20.                 overflow-y: auto;
  21.             }
  22.         </style>
  23.     </head>
  24.     <body>
  25.         <div id="sample" class="scriptErrorSample">
  26.             <script type="text/javascript">
  27.                 window.clockelement = "currentTime";
  28.                 function onClick() {
  29.                     // Try to access an inexistent element
  30.                     window.clockelement = "currentTime2";
  31.                 }
  32.             </script>
  34.                         <p>Clicking the button will cause a scripting error. When running outside the sandbox this error effectively crashes the application stopping the clock. Within the Sandbox, the error stops only that instance.</p>
  35.                         <p>After the error is generated, you can reload this gadget by clicking the [reload] button in the Gadget toolbar.  <input type="button" onclick="onClick()" value="Generate Error!"/></p>
  36.             <div id="currentTime" style="font-size: 8pt; font-weight: normal; color: Gray">
  37.             </div>
  39.             <script type="text/javascript">
  40.                 window.setInterval(function() {
  41.                     document.getElementById(window.clockelement).innerText = new Date();
  42.                 }, 999)
  43.             </script>
  44.         </div>
  45.     </body>
  46. </html>

and converts it (via server side, or client side with Silverlight-only):

  1. var settings = { css : { ".sampleTitle":{"font-family":"Segoe UI, Tahoma","font-size":"11pt","font-weight":"bold","color":"#07519A"},
  2.  ".scriptErrorSample":{"border-left-width":"1px","border-right-width":"1px","border-top-width":"1px","border-bottom-width":"1px","border-left-style":"solid","border-right-style":"solid","border-top-style":"solid","border-bottom-style":"solid","padding-left":"10px","padding-right":"10px","padding-top":"10px","padding-bottom":"10px","height":"130px","background":"white","background-repeat":"repeat-x","background-position":"left top","overflow-y":"auto"} } };
  4. var headerJavaScript =
  5. function(a)
  6. {
  7.     var b =,
  8.         c = a.g,
  9.         d = a.i,
  10.         e = a.f,
  11.         f = c(b,"document");
  12.     d(f,"initializeHTML",[[{"body":{"c":[" ",{"div":{"a":{"id":"sample","class":"scriptErrorSample"},"c":[" ",{"script":"code1"}," ",{"p":{"c":["Clicking the button will cause a scripting error. When running outside the sandbox this error effectively crashes the application stopping the clock. Within the Sandbox, the error stops only that instance."]}}," ",{"p":{"c":["After the error is generated, you can reload this gadget by clicking the [reload] button in the Gadget toolbar. ",{"input":{"a":{"type":"button","onclick":e(function()
  13.     {
  14.         d(b,"onClick")
  15.     }),"value":"Generate Error!"}}}]}}," ",{"div":{"a":{"id":"currentTime","style":{"font-size":"8pt","font-weight":"normal","color":"Gray"}},"c":[" "]}}," ",{"script":"code2"}," "]}}," "]}}]])
  16. };
  18. var metadata = {"author":"","description":"","imagepath":"","title":"Script Error Sample","preferredheight":0,"preferredwidth":0,"location":"","base":{"href":"","target":""},"scripts" : {"code1" :
  19. function(a)
  20. {
  21.     var b =,
  22.         c = a.g,
  23.         d = a.s,
  24.         e = a.f,
  25.         f = a.v;
  26.     f.onClick = e(function()
  27.     {
  28.         d(b,"clockelement","currentTime2")
  29.     });
  30.     d(b,"clockelement","currentTime")
  31. },"code2" :
  32. function(a)
  33. {
  34.     var b =,
  35.         c = a.g,
  36.         d = a.s,
  37.         e = a.i,
  38.         f = a.n,
  39.         g = a.f,
  40.         h = c(b,"document");
  41.     e(b,"setInterval",[g(function()
  42.     {
  43.         d(e(h,"getElementById",[c(b,"clockelement")]),"innerText",f(c(b,"Date"),[]))
  44.     }),999])
  45. }}};
  47. $Sandbox.registerCode(headerJavaScript, "0", settings, metadata);
  49. var SandboxInstance = new $Sandbox(document.getElementById('g_0_0_inst'), $Policy.Gadget, "0");
  51. SandboxInstance.initialize();

You may want to note a few things, such as how you can use CSS such as “body { color: red; }” and it only effects that one area, and how you can access the DOM and the same isolation happens.

Although the project talks a lot about security and gadgets/mashups, there are other interesting side benefits.

For example, the team has implemented functionality such as the W3C event model, which means that addEventListener say, works in IE (via this process). If people start to use this, maybe the labs team can get the IE team to implement their work natively!

Finally, Scott kindly gave us a few words on the project:

We focused on going beyond security by exploring a more holistic solution for site extensibility. We are also providing cross-browser support built around existing web standards. The default (and extensible) Gadget policy is modeled after standard HTML pages and the IFrame model. Together, this allows developers to leverage their existing skills, knowledge, and tools.

A robust virtualized environment for Web 2.0 applications is more than just about security. It is important to also protect the site’s integrity by providing QoS monitoring and controls over code execution (the ability freeze and unfreeze code to better manage browser performance and user experience). For host sites, it is necessary to have easy integration and multi-instancing support.

We know performance is a concern. We are still early in the project and have not yet finished optimizing the code and we are still expanding the DOM API support. However, our initial work is showing promise. As one benchmark, consider Google Caja. Not only are we focusing on a complete solution with broad support for DOM APIs, HTML, and CSS, we are also showing better performance at this early stage. Attached a simple script that focuses on measuring the overhead introduced by the sandbox (you can also find it at the bottom). This script is executable in both our Sandbox and the Caja test environment.

Posted by Dion Almaer at 10:00 am

3.7 rating from 39 votes

Tuesday, October 21st, 2008

CSS Expressions are no more in IE 8 standards mode

Category: Browsers, IE

  1. div.title { background-color: expression( (new Date()).getHours()%2 ? "#B8D4FF" : "#F08A00" ); }

The CSS expressions of old will no longer work in IE 8. Whenever a feature goes away in IE, Ajax hackers get worried, as many hacks rely on quirks or proprietary features of the browser.

Why did Microsoft choose this course?

  • To comply with standards

    • Expressions are proprietary to Internet Explorer and as such not interoperable.
    • A common use-case for expressions was to fix IE bugs or to emulate those CSS 2.1 features not yet supported by the browser, for example, min-width and max-width. We have not only worked hard to fix these bugs in IE8 but our new layout engine supports the missing features natively.
  • To improve performance
  • To reduce the browser attack surface
    • Because they expose a script execution context, CSS expressions constitute a possible script injection attack vector.

The feature will still exist in IE 7 and quirks modes, but consider yourself warned and that it is time to use the new CSS 2.1 support and the like to get around the issues that CSS expressions (or Dynamic Properties) came about to solve.

Do you ever use this feature? Run into any issues where the new support doesn’t give you everything you need? Now is the time to let Microsoft know.

Posted by Dion Almaer at 6:32 am

4 rating from 26 votes

Monday, October 20th, 2008

Fennec (Mobile Firefox) Alpha 1 Released

Category: Browsers, Mobile

Mark Finkle has announced the first alpha release of Mozilla’s mobile web browser, Fennec. While there was some discussion in recent days of progress on a Windows Mobile version, this release runs on the Nokia N800 and N810 only.

However, Mozilla has also provided an emulator for folks to run Fennec on their desktop machine and are soliciting feedback from the community especially on the browser UI but also on other aspects of the browser as well.

Fennec (Mobile Firefox) has reached milestone 9, which is also our first alpha! We’re calling this release the User Experience alpha.

As with the previous milestones, M9 is targeted at the Nokia N800/N810 (Maemo) Internet tablet. Yes, we have made great progress on Windows Mobile, but no milestone releases yet. However, in addition to the native Maemo release, we are also releasing desktop versions of Fennec. That’s right, you can install Fennec on your Windows, OS X or Linux desktop too! We want you to be able to experiment, provide feedback, write add-ons and generally get involved with the Mozilla Mobile project, even if you don’t have a device.

There’s also a video walkthrough:

Posted by Ben Galbraith at 9:46 am

4 rating from 23 votes

Wednesday, October 15th, 2008

FancyUpload for Flash 10 to fix your uploader

Category: Adobe

This is the week of the plugin. First we had the launch of Silverlight 2, and then, quickly on the back of that we get Adobe Flash 10 at the same time as the entire Creative Suite 4 (which has great Flash authoring tools of course).

One of the security features in Flash 10 is the requirement for the user to act on a Flash movie to be able to access certain APIs. This has caused some Flash upload components to break (ones that use a hidden Flash movie, such as SWFUpload Flickrs FancyUpoad). The solution is quite simple, you need to make the button that launches the upload a Flash control itself (versus an HTML button for example).

Harald Kirschner has jumped on it and created a FancyUpload for Flash 10.

You can check out the showcase and do a view source to see that the link is not a link :)

What else is in Flash 10? Here are the top features that Adobe mentions:

3D effects

Create more intuitive, engaging interfaces using built-in support for 3D effects. Get started quickly without being a 3D master by designing in 2D and easily transforming and animating in 3D. Fast, extremely lightweight, and simple-to-use APIs, along with 3D tools in Adobe® Flash® CS4 Professional software, make motion that was previously accessible only to expert users via ActionScript® language or custom third-party libraries available to everyone.

Custom filters and effects

Create high-performance, real-time effects for cinematic experiences that quickly engage users. With new Adobe Pixel Bender™, the same technology behind many filters and effects in Adobe After Effects® software, these dynamic and interactive effects can be used both in production with After Effects CS4 and live with Flash Player 10. The Pixel Bender just-in- time (JIT) compiler can also be used to process other types of data, such as sound or mathematical functions, asynchronously in a separate thread.

Advanced text support

Take advantage of a new, flexible text layout engine that brings print-quality publishing to the web, building on more than 25 years of Adobe expertise in typography. Gain more control over text layout using an extensible library of ActionScript 3.0 text components to flow text and sophisticated typographic elements such as ligatures across multiple columns, around inline images, bidirectionally, vertically, or chained together. Create multilingual rich Internet applications (RIAs) using device fonts that can now be anti-aliased, rotated, and styled, or build your own unique text components.

Dynamic sound generation

Use enhanced sound APIs to dynamically generate audio and create new types of audio applications such as music mixers and sequencers, real-time audio for games, and even audio visualizers. Work with loaded MP3 audio at a lower level by extracting audio data and supplying it to the sound buffer. Process, filter, and mix audio in real time through the Pixel Bender JIT compiler to extend creative freedom beyond the visual experience.

Drawing API

Perform runtime drawing more easily with restyleable properties, 3D APIs, and a new way of drawing sophisticated shapes without having to code them line by line. Developers can tweak parts of curves, change styling, replace parts, and use custom filters and effects, delivering improved throughput, creative control, and greater productivity. Enhancements to the Drawing API add the z dimension, real perspective, textured meshes in 3D space, a retained graphics model, read/write rendering, and triangle drawing with UV coordinates, while adding memory and improving performance.

Hardware acceleration

Use the hardware processing power of the graphics card to paint SWF files into the browser and accelerate compositing calculations of bitmaps, filters, blend modes, and video overlays faster than would be performed in software.

Vector data type

Use the new typed array class for better performance, efficiency, and error checking of data.

Dynamic Streaming

Show exceptional video with streams that automatically adjust to changing network conditions. Leverage new quality-of-service metrics to provide a better streaming experience.

Speex audio codec

Take advantage of the new, high-fidelity and open source Speex voice codec, which offers a low-latency alternative for voice encoding. Flash Player also supports ADPCM, HE-AAC, MP3, and Nellymoser audio.

File upload and download APIs

Bring users into the experience by letting them load and save files from your web application. New file reference runtime access allows local processing of data without roundtripping to the server.

Posted by Dion Almaer at 4:06 pm

3.9 rating from 24 votes