You searched for: 'native'

Saturday, November 12th, 2011

Adobe to forgo Flash plug-in for mobile devices

Category: Flash

Earlier this week, Adobe VP and General Manager Danny Winokur disclosed that the company has concluded that HTML5 is ”the best solution for creating and deploying content in the browser across mobile platforms.” The company said it would stop building Flash to run on mobile browsers. In a blog post on the new focus of Flash strategy, Winokur wrote:

Our future work with Flash on mobile devices will be focused on enabling Flash developers to package native apps with Adobe AIR for all the major app stores.  We will no longer continue to develop Flash Player in the browser to work with new mobile device configurations (chipset, browser, OS version, etc.) following the upcoming release of Flash Player 11.1 for Android and BlackBerry PlayBook.

While Flash 12 work is said to be underway, many observers have wondered if this potentially marks the beginning of the end for Flash, which has been reeling since Apple refused to support it on iPhone and similar of its mobile devices.

Adobe’s Michael Chambers, principal product manager for developer relations, has responded to the general concern with a clarifying blog post, that includes a discussions of reasons for the move to quit the Flash-on-mobile-browser tact. In a post yesterday Chambers writes:

… given the fragmentation of the mobile market, and the fact that one of the leading mobile platforms (Apple’s iOS) was not going to allow the Flash Player in the browser, the Flash Player was not on track to reach anywhere near the ubiquity of the Flash Player on desktops.

Also, it seems, the task of porting the plug in to innumerable mobile OSes and device types put a lot of pressure on Adobe development t efforts. ”For each new device, browser and operating system released, the resources required to develop, test and maintain the Flash Player also increases. This is something that we realized is simply not scalable or sustainable,” wrote Chambers.

Posted by jvaughan at 7:04 pm
1 Comment

3.1 rating from 161 votes

Thursday, June 9th, 2011

The State – Sort of – of HTML5 Audio

The State – Sort of – of HTML5 Audio

Scott Schiller discusses the high level of hype around HTML5 and CSS3. The two specs render ”many years of feature hacks redundant by replacing them with native features,” he writes in an insightful blog.

Blogging, he says:

CSS3’s border-radius, box-shadow, text-shadow and gradients, and HTML5’s <canvas>, <audio> and <video> are some of the most anticipated features we’ll see put to creative (ab)use as adoption of the ‘new shiny’ grows. Developers jumping on the cutting edge are using subsets of these features to little detriment, in most cases. The more popular CSS features are design flourishes that can degrade nicely, but the current audio and video implementations in particular suffer from a number of annoyances.

He begs the question: Are we going to see a common format across the major browsers for both audio and video?

Check it out!

Posted by jvaughan at 9:17 pm

5 rating from 119 votes

Sunday, December 5th, 2010

XML versus the Web again

Category: JSON

At least in terms of cool Web stuff, JSON replaced XML long ago. But the story keeps trickling down. Semi-pivotal events appear to be recent moves by Twitter and Foursquare to remove XML support from their Web APIs, settling solely on JSON. In the wake, no less than XML crew member James Clark has taken a slightly more appreciative stance on JSON. XML grew too complex, he admits. It doesn’t work well with programming language data structures, he concedes. Still, the occasion is also an occasion for some equivocating, or whimsy. He wonders if there is a place for XML in the brave new Web world of the future.
Buy Microsoft Windows 7 Ultimate OEM
Writes James Clark:

… I think the Web community has spoken, and it’s clear that what it wants is HTML5, JavaScript and JSON. XML isn’t going away but I see it being less and less a Web technology; it won’t be something that you send over the wire on the public Web, but just one of many technologies that are used on the server to manage and generate what you do send over the wire.

And he continues:

…In the short-term, I think the challenge is how to make HTML5 play more nicely with XML. In the longer term, I think the challenge is how to use our collective experience from building the XML stack to create technologies that work natively with HTML, JSON and JavaScript, and that bring to the broader Web developer community some of the good aspects of the modern XML development experience.

XML vs the Web – Clark’s Random Thoughts blog

Posted by jvaughan at 3:53 pm

3.3 rating from 8 votes

Friday, November 12th, 2010

HTML5 forms validation in Firefox 4

Category: Firefox, JavaScript

Mounir Lamouri looks at native browser-side form validation in Firefox4  – while re-iterating the need for re-validating on the server-side too. The objective of the browser-side form validation is to relieve JavaScript of the need to do a lot of basic form checking. Lanouri writes:

”All new input types introduced with HTML5 forms except search and tel benefit from internal validation.
Firefox 4 is going to support email and url and the validation will check if the value is a valid email or url respectively.”

Also discussed is added pattern matching support and a new pseudo-class that applies on submit controls when a form has an invalid element.

Posted by jvaughan at 3:20 pm

3.6 rating from 11 votes

Tuesday, October 26th, 2010

Adding fibers to your server side v8 diet offers efficiency and clarity

Category: JavaScript, Library

In computer science, a fiber is a particularly lightweight thread of execution.

Like threads, fibers share address space. However, fibers use co-operative multitasking while threads use pre-emptive multitasking. Threads often depend on the kernel’s thread scheduler to preempt a busy thread and resume another thread; fibers yield themselves to run another fiber while executing. The article on threads contains more on the distinction between threads and fibers.

Fibers describe essentially the same concept as coroutines. The distinction, if there is any, is that coroutines are a language-level construct, a form of control flow, while fibers are a systems-level construct, viewed as threads that happen not to run concurrently. Priority is contentious; fibers may be viewed as an implementation of coroutines, or as a substrate on which to implement coroutines.

The above is taken from Wikipedia, which is discussing the computer science concepts behind fibers.

Why do we bring this up? The Asana team (who we featured when they came out with LunaScript) continue their quest to make an ergonomic, productive, and performant framework for the Web.

Today they are discussing their patch to v8cgi that adds in support for their own fiber implementation.

It all ends up with this:

Few languages support fibers natively (though support was recently added to Ruby). We write most of our server code in JavaScript and run it under Google’s v8 engine, the same JS runtime that Chrome uses. Fortunately the v8 codebase is excellently structured, so we were able to add fiber support in just a few days. Our changes take the form of a patch (currently pending review) to v8cgi, a library of server-oriented extensions to v8.

Here’s a sample of the API:


  1. // Make a new fiber. The fiber will run the provided function.
  2. var fiber = new Fiber('name', function() {
  4.   // ...
  6.   // Make another fiber runnable.
  7.   some_other_fiber.becomeRunnable();
  9.   // Suspend the current one.
  10.   Fiber.current.suspend();
  12.   // ...
  13. });
  15. // Make the new fiber runnable. It won't start until the current fiber suspends
  16. // or joins.
  17. fiber.becomeRunnable();
  19. // Wait for the fiber to finish.
  20. fiber.join();

That’s almost the entire API. We don’t need any synchronization primitives because only one fiber runs at a time and control only changes when suspend() or join() is called.

There is a tension between writing clear, well-abstracted code and writing code that makes efficient use of the database. Adding fibers to v8 allowed us to resolve this tension. In taking a small amount of time to solve this problem “right” up front, we’ve made our entire engineering team more efficient for the long run.

Read the post to get the background, and to see the refactoring that is done to get to this place.

Asana seems to be really enjoying rethinking the world of Web frameworks. I can’t wait to see their products!

Posted by Dion Almaer at 11:03 am

4.1 rating from 10 votes

Tuesday, October 19th, 2010

MooTools 1.3 Hits the Street

Category: MooTools

After almost a year in development, the MooTools team announced the release of version 1.3 with major notable enhancements.

Slick Selector Engine

The biggest update is the inclusion of the new Slick standalone selector engine. The engine was developed by Thomas Aylott, Fabio Costa and Valerio Proietti with accuracy and portability in mind, allowing the engine to not only provide MooTools developers with excellent selector support but also the ability for it to be included in other projects as well. The MooTools team created over 3,000 tests to ensure that even the most obscure scenarios were considered. The inclusion of Slick also allowed the team to extend the Element method to allow creation of DOM elements using complex CSS selector expressions. Very cool!


  1. var newElement = new Element('div#cow.moo.big[data-size=5]')

Core Updates

The MooTools team also focused on enhancing the core API in preparation for MooTools 2.0 by deprecated every $- prefixed function and nd moving those to the relevant natives namespaces:

We have revised the whole base of our library to speed up MooTools, to provide an even more beautiful API and to make our library future-proof. In order to reduce the amount of global variables we have moved all $-prefixed functions into their according namespace ($splat » Array.from, …). In short we think that with 1.3 you are getting the best MooTools experience ever.

New Build Manager

Building a new version of MooTools has always been easy using the builder and now it’s been improved via the new Packager preprocessor which allows you to create custom MooTools builds from Github repositories. It handles code dependencies and already provides support for several MooTools plugins. The new Packager is a PHP 5.2+ library but can also be found as a Python app thanks to Aaron Newton’s work.

MooTools Runner

To make sure that MooTools continues to adhere to the projects’s specifications, Christoph Pojer & Arian Stolwijk spent some time over the summer building a new spec testing engine called MooTools Runner which has been adopted by all major MooTools projects – Core, More and Slick. The engine is based on Jasmine and runs all specs within just 2 seconds. In addition, code coverage was increased to about 95%, ensuring excellent test coverage for Core.

Download it!

Once you’re ready, you can grab the latest version of MooTools or roll your own via the following links:

Posted by Rey Bango at 8:02 pm

2.3 rating from 6 votes

Friday, October 8th, 2010

A Call for “Pinning Menus” Sanity

Category: IE

One of the unique new features of Internet Explorer 9 is the ability to ‘pin’ web sites to the Windows task bar:

While this feature is cool, the way to do it is to use the META tag and drop in some fairly grotty markup into your page:

  1. <!-- C-razy IE9 stuff -->
  2. <meta name="application-name" content="Ars Technica"/>
  3. <meta name="msapplication-starturl" content=""/>
  4. <meta name="msapplication-tooltip" content="Ars Technica: Serving the technologist for 1.2 decades"/>
  5. <meta name="msapplication-task" content="name=News;action-uri=;icon-uri="/>
  6. <meta name="msapplication-task" content="name=Features;action-uri=;icon-uri="/>
  7. <meta name="msapplication-task" content="name=OpenForum;action-uri=;icon-uri="/>
  8. <meta name="msapplication-task" content="name=One Microsoft Way;action-uri=;icon-uri="/>
  9. <meta name="msapplication-task" content="name=Subscribe;action-uri=;icon-uri="/>

Via Kroc Camen comes a call for sanity. Kroc argues that the IE 9 team should just use the HTML5 <menu> element and get rid of all that META tag nonsense:

Microsoft, if you want a way to declare a context-menu in HTML in a browser-agnostic way that is both forward and backwards compatible use HTML5’s <menu> element! Even IE6 supports it without any hacks because it was part of HTML4 and thus, not an anonymous element.

As browser UI begins to converge and websites become more and more integrated into the OSes we use, the menu element is there to describe native toolbars, menus and context menus that the user-agent could expose. It would thus make sense to use this to specify the jump lists as it can easily expand in capabilities in the future and it’s way easier for other vendors to get on board with than the horrible hack that was favicon.ico.

Example proposed usage of the <menu> tag to achieve IE 9 pinning:

  1. < !doctype html>
  2. <head>
  3.     <title>Ars Technica</title>
  4.     <meta charset="utf-8" />
  5.     <meta name="ms-application-jumplist" content="jump" />
  6.     <style>
  7.         #jump   {display: none;}
  8.     </style>
  9. </head>
  10. <body>
  11.     <menu id="jump" type="context"
  12.           label="Ars Technica" title="Ars Technica: Serving the technologist for 1.2 decades"
  13.     >
  14.         <li><a href="">
  15.             <img src="" /> News
  16.         </a></li>
  17.         <li><a href="">
  18.             <img src="" /> Features
  19.         </a></li>
  20.         <li><a href="">
  21.             <img src="" /> OpenForum
  22.         </a></li>
  23.         <li><a href="">
  24.             <img src="" /> One Microsoft Way
  25.         </a></li>
  26.         <li><a href="">
  27.             <img src="" /> Subscribe
  28.         </a></li>
  29.     </menu>
  30. </body>

Looks nice to me.

Posted by Brad Neuberg at 6:00 am

3.3 rating from 4 votes

Thursday, October 7th, 2010

Passing Webcam Data into WebGL via Flash

Category: Flash, WebGL

File this one in the crazy cool hacks category. Peter Nitsch has been experimenting with using Flash to access a user’s webcam, and then feeding this data into WebGL:

I tend to stay away from the HTML5 vs Flash “debate”, principally because I think it’s inane. Both platforms offer certain advantages over the other and some interesting results can be achieved by utilizing their strengths. Case in point, Flash’s built-in webcam support and WebGL’s hardware-accelerated 3D graphics are features that only exist in their respective platforms (for now). Bridging the technologies produces something unattainable by only using one, as the following quick examples illustrate.

How does he integrate these two technologies?

Passing webcam data to Javascript involves a few steps. The BitmapData drawn from the Video object needs to be compressed to JPEG and encoded to Base64 for the data URI to read it. This can be a very taxing process in native ActionScript, but is nearly negligible when done in haXe orAlchemy. In this case, I’m using both. The JPEG compression is performed by metalbot’s Alchemy JPEG encoder, while the Base64 encoding is handled by Bloodhound’s haXe crypto library.

Peter then uses Flash’s ExternalInterface to pass the string back to JavaScript and turns the webcam JPEG output into a data URL that can be fed into an HTML Image tag and fed into WebGL. Craziness!


Posted by Brad Neuberg at 6:00 am
1 Comment

3.2 rating from 6 votes

Tuesday, October 5th, 2010

jQuery Data Binding, Templates, and Mobile: John Resig at FOWA

Category: JavaScript, jQuery

Here’s a live blog from jQuery creator John Resig’s talk at FOWA, where he’s giving us an update on the new toys from the jQuery team.

Data Link

jQuery already supports a data API:


  1. $("div").data("test", 5);
  2. $("div").data("test")===5;
  3. $("div").removeData();

This is better than attaching data directly to data nodes for various reasons, e.g. storing non-string data and improving performance. And it also avoids memory leaks – when you remove an element, jQuery removes everything. Looking towards jQuery 1.4.3, the project had to decide if they want to remove data events, and they decided to keep them and make them more useful.

The new data linking plugin, developed in conjunction with Microsoft and released yesterday, supports binding between DOM objects and elements. Binding from an object to a form element looks like this:


  1. var user = new User();
  2. $("form").link(user, {
  3.   firstName: "first-name",
  4.   lastName: "last-name",
  5. });

Whenever “first-name” or “last-name” elements are updated, the form element is updated. You can also bind in the opposite direction, so that a form element changes when you change an object.

More info on GitHub.


Templating has become a big deal in Javascript, and there’s now an official jQuery templating plugin, also released yesterday, which John tells me has a good chance of being integrated into the core at some point. John told me his original Micro-Templating library was considered at one point, but the new templating is more refined.


  1. $("#test").append("<li><em>${name}</em></li>", "john");

Pre-compiling template strings is possible too:


  1. var data = { firstName: "John" };
  2. $("#item").tmp(data).appendTo("ul");
  3. <script id="item" type="text/html">
  4.   <li>$(firstName}</li>
  5. </script>

The most interesting feature is that elements retain the data that made them – you can ask an element “what data did you come from”?


  1. var lastTemplateItem = $(".movieName:last").tmplItem();
  2. var movie =;
  3. var htmlNodes = lastTemplateItem.nodes;

John argues that developers try to create too much abstraction between HTML and the data model. At least in the client, the DOM “is everywhere” and you should be okay with storing your data against it.

More info on GitHub.

jQuery Mobile

jQuery Mobile, under development, aims for broad mobile browser support, which also means a high regard for progressive enhancement. John explains the need to target multiple mobile browsers by focusing on BlackBerry. Why support BlackBerry? Among other things, BlackBerry mobile traffic is rising (he shows this stat of 10% growth in the past 12 months), your boss probably views your apps in it, and targeting one mobile browser is like targeting one desktop browser. (i.e. wrong.)

With most mobile browsers, there’s a big problem: You can’t do fixed positioning – John says it’s just been added in Android 2.2, but not there in earlier Android, iPhone, etc. Some frameworks have done the complete simulation of scrolling to get around this, but it leads to massive amounts of code and doesn’t work right – the subtle UI issues it causes are very noticeable.

Considering it unacceptable to simulate scrolling, jQuery Mboile always uses native scrolling. e.g. to show a select menu, it simply hides the rest of the page and makes the select list occupy the entire page.

There are toolbars available – user clicks to show and hide them, and it works nicely because it supports native scrolling. While you’re scrolling, the toolbars are hidden, and they show again when the scroll action is complete (if they were cvisible before the scroll action began).

Developers can detect the various touch events:


Web Roundup

John finishes off with some highlights on the web in general:

Posted by Michael Mahemoff at 10:35 am

4.4 rating from 16 votes

Friday, September 17th, 2010

Web Ninja Interview: Mr. Doob

Category: Web Ninja Interview

As part of our Doob-a-thon today, we have a Web Ninja Interview with Mr. Doob. The Web Ninja Interview series focuses on people doing amazing and interesting work using JavaScript, CSS, HTML, SVG, WebGL, and more.

Mr. Doob has delighted us with many awesome visualization and demos, including the recent Wilderness Downtown project. He is one of a crop of JS wizards that are taking advantage of new tools like Canvas, CSS3, SVG, and WebGL. Let’s get started.

Brad Neuberg: First things first, the most important question is where the name Mr. Doob comes from?

Mr. Doob: I’ve always been very dependent on wearing headphones in order to get some level of concentration. Because of that I started using combinations like do_ob, dõ_õb, dò_ób, dê_êb, d=_=b, … as IM nicknames. One day a friend greeted me as Mr.doob and the name somehow stuck. It was also easier for my coworkers to pronounce than my real name.

Brad Neuberg: Now that we have that out of the way, tell us a bit about yourself, where you’re from, your background, interests, and some projects you have worked on (don’t be humble!)

Mr. Doob: I’m originally from Barcelona (Spain). After primary school I studied Electronics and later Arts. From the early days I was very involved in this thing called Demoscene. Always attracted to anything computer graphics but, although I tried to learn code my mind wasn’t ready yet and focused on design and editing. Because I felt I was learning way more from doing demos than attending college I stopped my education and looked for a job where I could develop my interests and ended up working as a HTML developer. Since then I’ve been alternating the coder and designer roles in every company.

Most of the projects I’ve worked on have been about creating the ID or online presence for small companies. It wasn’t until I joined Hi-ReS! that I worked for bigger brands such as Sony, Nokia, Sprint, Jägermeister, Chanel, Dolce&Gabanna, …

By that time I started experimenting with Actionscript and uploading the results to my site. Unexpectedly the site started to attract production companies and studios that were looking for some experimental effects and/or interactions.

Brad Neuberg: You recently worked with Google on The Wilderness Downtown. Tell us a bit about the project and what you did, including some technical details on how you built things.

Mr. Doob: Probably the project in which I’ve been able to apply most of what I’ve learned until now. There are some pieces of code reused in the project like three.js, the Sequencer code or the Harmony base code but my main tasks were working in the Street View shots and the birds. The Street View being by far the most challenging for performance reasons. We intended to directly use the Google StreetView Javascript Embed but it performed very slowly. A custom Street View Data viewer had to be done by drawing sinusoidally distorted columns of crops from the panorama texture. The effect isn’t 100% how it should be but it’s very similar and fast. After that there was the challenge of finding out where in the panorama was the user’s home so we could use the right point of view for some shots. I couldn’t find much documentation about that, but just when I had a desperate email ready for the Google Maps guys I came up with idea of getting the vector from the lat/lng of the house and the lat/lng of the panorama data. It’s now obvious but there was so much data around to assimilate and the deadline was approaching fast.

Brad Neuberg: Tell us about a hobby, interest, or something in your background that most people wouldn’t expect or know about.

Mr. Doob: Hmm… not that it’s too interesting but… I used to be fairly good at football. At some point I had to decide whether to join a football team or joining a comic school. Some times I regret I didn’t do the former. Something tells me I’ll go back to that eventually…

Brad Neuberg: What is a clever hack, trick, or elegant turn of code you’ve discovered or created while working with JavaScript, HTML, CSS, etc. Give good details, and don’t be afraid to be technical :)

Mr. Doob: It’s not much of a trick or a hack, but I’ve always found very beneficial to avoid using libraries such as jQuery. I guess such libraries are helpful for cases where IE6+ support is required, but otherwise I think that, ironically, it over complicates things. The more control you have over your code the better.

Also, I’m still learning JavaScript and I don’t know the reason behind some objects. As an example, I recently stopped using new Image() and started using document.createElement( ‘img’ ) for consistency reasons.

Brad Neuberg: Where do you see HTML5, CSS3, SVG, (i.e. the new stuff on the web) going in the next year? How about the next 3 years?

Mr. Doob: They’ll continue evolving at a nice pace. And browsers will have to keep up to date or they’ll lose their user base.

In 3 years I think it’s all going to be WebGL though. I think it’s easy to imagine videogames moving from native applications to web applications. Windows/MacOS/Linux compatibility comes for free, the downloading/installing process won’t be needed and, if done right, the experience starts instantly. At this point Windows/MacOS/Linux as OS becomes irrelevant for most of the people.

It scares me that people browse the internet more and more from devices that can’t be used for authoring but, on the bright side, I like the fact that with Javascript nothing gets compiled and kids will be able to right click any page and see directly the code.

Brad Neuberg: What excites you the most about what is happening on the web today? What still frustrates you?

Mr. Doob: The competition between browser vendors. That competition is making the platform improve at a rate I wish the Flash platform would have been while I was into that.

This new trend of serving results in realtime and realtime interactions is also exciting. The internet is evolving very quickly.

What still frustrates me are usually stupid politics-based decisions like Safari and Internet Explorer not supporting Vorbis in <audio>, Safari only playing iTunes rendered h264 .mp4, … And other than that I just can’t understand why ‘darker’ is being removed from context.globalCompositeOperation in the WHATWG specs.

Brad Neuberg: For folks that want to do the kinds of cutting edge things you’ve been doing, what advice or resources would you give or point them to?

Mr. Doob: Just look at the past. I’m not doing much else than combining old Amiga/DOS techniques with what the web has to offer. Thanks to the recent JS1k contest we now have lots of code to learn from and experiment.

Thanks Mr. Doob! What questions do you have for Mr. Doob? Ask them below!

We end with a presentation Mr. Doob gave recently at ARTtech 2010 on Laziness, Creativity, and Code:

ARTtech 2010: Laziness, Creativity and Code from AssemblyTV on Vimeo.

Posted by Brad Neuberg at 6:15 am

3.4 rating from 5 votes

Thursday, September 16th, 2010

Simulating :hover and Double Clicks With Pure CSS on Mobile Devices

Category: CSS

When creating mobile web apps on devices like the iPhone, iPad, and Android you lose the beloved CSS :hover property which can make things so much easier to create. Chris Coyier has been exploring how to respond to single and double clicks still using pure CSS even when we don’t have :hover.

For single clicks, Chris has found that you can use tabindex as a trick to simulate :hover.

Chris creates a sample where he has an image expand when ‘hovered’ over:

Chris has the following HTML markup using HTML5 (notice the tabindex property):

  1. <section class="image-gallery">
  3.    <figure tabindex="1">
  4.       <img src="images/img-1.jpg" alt="jump, matey" />
  5.       <figcaption ">Jump!</figcaption>
  6.    </figure>
  8. </section>

Each image/figure is given a tabindex one higher than the last one.

The image/figure can then be hooked onto using the :focus property, which will work on mobile devices when a user presses their finger onto the element. When this fires some CSS will cause the outline to disappear; the image to rotate and scale larger; and a box shadow to appear:

  1. figure:focus {
  2.   outline: none;
  3.   -webkit-transform: rotate(-3deg) scale(2.5);
  4.   -moz-transform: rotate(-3deg) scale(2.5);
  5.   -webkit-box-shadow: 0 3px 10px #666;
  6.   -moz-box-shadow: 0 3px 10px #666;
  7.   z-index: 9999;
  8. }

Once he had single-click under his belt, Chris moves on to trying to get a CSS solution for double-click for mobile devices. He mentions that for this its a bit more CSS nerdery since JavaScript is pretty straightforward in this case:

For anyone interested, “dblclick” is a native JavaScript event. If you wanted to, for example, force links to be double clicked instead of single clicked, you could bind a simple { return false; } function to the click event. Then also bind a function to dblclick that would change the window.location to the links href attribute.

This article isn’t about that, it’s about hardcore CSS nerdery and seeing if we can also do it without using JavaScript.

See Chris’ demo and blog post for more details on the double-click CSS solution.

Posted by Brad Neuberg at 7:00 am

3.9 rating from 9 votes

Monday, August 30th, 2010

New SVG Web Release: Owlephant

Category: SVG

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

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

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

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

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

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

Everything fixed in this release:

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

Download the release now and get started!

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

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

Posted by Brad Neuberg at 6:05 pm

2.4 rating from 5 votes

View Source Tutorial: Content Site Using HTML5 Canvas + CSS3

Category: Canvas, Tutorial, View Source

Via Phil Franks comes an interesting HTML5/CSS3 site for There Studio, which is a kind of coworking space in London:

The site itself has a number of circles with information bouncing on the screen that respond to mouse clicks and moves.

Let’s crack the site open using View Source and see how they are doing things. First, they have a repeated background with a little plus symbol with the following style rule on the <body> tag:

  1. background: #ddd url('../images/bg.gif') 50% 0 repeat fixed;

The textual content in each of the circles is clean semantic HTML that is search engine friendly:

  1. <div class="section who first">
  2.   <h3>Who</h3>
  3.   <p>Creatives, makers, thinkers <span class="ampersand">&amp;</span> doers</p>
  4. </div>

To turn that into this:

The <h3> is first transformed into having an underline with the padding and margin being on the bottom:

  1. h3 {
  2.     border-bottom: 1px solid #ccc;
  3.     display: block;
  4.     font-size: 25px;
  5.     font-weight: normal;
  6.     padding: 0 0 10px;
  7.     margin: 0 0 8px;
  8. }

JavaScript creates the circle. The script tags themselves are at the end of the HTML page at the bottom of the <body> tag, a good performance practice in general.

The heart of drawing each circle is in the createBall and createContentBall methods. If a ball will have HTML content, then the createContentBall method is used, otherwise the createBall method is used. Let’s look at the createContentBall method; we’ll break it down:


  1. function createContentBall(className,size,color,html) {
  2.   var element = document.createElement( 'div' );
  3.   element.className = className;
  4.   element.width = element.height = size;
  5. = 'absolute';
  6. = -size + 'px';
  7. = -size + 'px';
  8. = "default";
  9.   canvas.appendChild(element);
  10.   elements.push( element );
  11.   var circle = document.createElement( 'canvas' );
  12.   circle.width = size;
  13.   circle.height = size;
  14.   if (className !=='image' && className !=='image first') {
  15.     var graphics = circle.getContext( '2d' );
  16.     graphics.fillStyle = color;
  17.     graphics.beginPath();
  18.     graphics.arc( size * .5, size * .5, size * .5, 0, PI2, true );
  19.     graphics.closePath();
  20.     graphics.fill();
  21.   }
  22.   element.appendChild( circle );
  23.   content = document.createElement( 'div' );
  24.   content.className = "content";
  25.   content.onSelectStart = null;
  26.   content.innerHTML = html;
  27.   element.appendChild(content);
  28.   if (className !=='image' && className !=='image first' ) {
  29. = (size - contentPadding*2) + 'px';
  30. = (((size - content.clientWidth) / 2)) +'px';
  31. = ((size - content.clientHeight) / 2) +'px';
  32.   }
  33.   var b2body = new b2BodyDef();
  34.   var circle = new b2CircleDef();
  35.   circle.radius = size / 2;
  36.   circle.density = ballDensity;
  37.   circle.friction = ballFriction;
  38.   circle.restitution = ballRestitution;
  39.   b2body.AddShape(circle);
  40.   b2body.userData = {element: element};
  41.   b2body.position.Set( Math.random() * stage[2], Math.random() * (stage[3]-size) + size/2);
  42.   b2body.linearVelocity.Set( Math.random() * 200, Math.random() * 200 );
  43.   bodies.push( world.CreateBody(b2body) );
  44. }

First, we create an absolutely positioned DIV that will house our Canvas tag:


  1. var element = document.createElement( 'div' );
  2. element.className = className;
  3. element.width = element.height = size;
  4. = 'absolute';
  5. = -size + 'px';
  6. = -size + 'px';
  7. = "default";
  8. canvas.appendChild(element);
  9. elements.push( element );

Then we draw the actual circle itself using the Canvas tag and append it to our container DIV (Note that an SVG circle created programmatically could have also been used here):


  1. var circle = document.createElement( 'canvas' );
  2. circle.width = size;
  3. circle.height = size;
  4. if (className !=='image' && className !=='image first') {
  5.    var graphics = circle.getContext( '2d' );
  6.    graphics.fillStyle = color;
  7.    graphics.beginPath();
  8.    graphics.arc( size * .5, size * .5, size * .5, 0, PI2, true );
  9.    graphics.closePath();
  10.    graphics.fill();
  11. }
  12. element.appendChild( circle );

Then we create another DIV to house the HTML content itself:


  1. content = document.createElement( 'div' );
  2. content.className = "content";
  3. content.onSelectStart = null;
  4. content.innerHTML = html;
  5. element.appendChild(content);
  6. if (className !=='image' && className !=='image first' ) {
  7. = (size - contentPadding*2) + 'px';
  8. = (((size - content.clientWidth) / 2)) +'px';
  9. = ((size - content.clientHeight) / 2) +'px';
  10. }

Notice that we are setting content.onSelectStart to null above; this is so that when you run the mouse button over the text it doesn’t select (An alternative way to do this is to use the HTML pointer-events CSS property).

Next comes code to deal with the physics of the circles, which uses Box2D.js, a JavaScript physics engine ported from Flash:


  1. var b2body = new b2BodyDef();
  2. var circle = new b2CircleDef();
  3. circle.radius = size / 2;
  4. circle.density = ballDensity;
  5. circle.friction = ballFriction;
  6. circle.restitution = ballRestitution;
  7. b2body.AddShape(circle);
  8. b2body.userData = {element: element};
  9. b2body.position.Set( Math.random() * stage[2], Math.random() * (stage[3]-size) + size/2);
  10. b2body.linearVelocity.Set( Math.random() * 200, Math.random() * 200 );
  11. bodies.push( world.CreateBody(b2body) );

Basically, we define a circle, give it a radius, density, friction, and restitution, and then add it to our collection of shapes with a position and linear velocity. Box2D will then handle the physics and we can just take the values back out to draw things on the screen with a setInterval, which happens in the loop method:


  1. function loop() {
  2.   delta[0] += (0 - delta[0]) * .5;
  3.   delta[1] += (0 - delta[1]) * .5;
  4.   world.m_gravity.x = 0 // -(0 + delta[0]);
  5.   world.m_gravity.y = -(100 + delta[1]);
  6.   mouseDrag();
  7.   world.Step(timeStep, iterations);
  8.   for (i = 0; i < bodies.length; i++) {
  9.     var body = bodies[i];
  10.     var element = elements[i];
  11. = (body.m_position0.x - (element.width >> 1)) + 'px';
  12. = (body.m_position0.y - (element.height >> 1)) + 'px';
  13.     if (ballRotation && element.tagName == 'DIV') {
  14.       var rotationStyle = 'rotate(' + (body.m_rotation0 * 57.2957795) + 'deg)';
  15. = rotationStyle;
  16. = rotationStyle;
  17. = rotationStyle;
  18.     }
  19.   }
  20. }

This method gets called with a setInterval periodically. Basically, we apply a delta and a gravity at each time step; see if the mouse is being pressed down (with hooks for touch devices like the iPhone to see if a finger is being pressed down); tell the Box2D World about our gravity and delta and to make an iteration step; and finally use the computed physics values from Box2D to apply CSS3 rotation transforms on our parent DIV and move the element’s CSS top and left values around the screen.

Posted by Brad Neuberg at 5:00 am

3 rating from 16 votes

Friday, August 13th, 2010

jQuery Mobile Announced; Touch-Optimized Web Framework for Smartphones & Tablets

Category: jQuery, Mobile

I have had the pleasure to start working with the awesome jQuery team on a new mobile development. Today, John announced jQuery Mobile, “a unified user interface system across all popular mobile device platforms, built on the rock-solid jQuery and jQuery UI foundation.”

Palm has sponsored the effort with other great folks, and I wrote about it over here:

When we heard that the jQuery team was putting a lot of effort towards supporting their great library on devices, we wanted to help. At first we started with devices for John to test on as he explored compatibility, but with the newly announced jQuery Mobile initiative, we wanted to do more.

What are we doing? We are going to sponsor some of the great work that will go into jQuery Mobile from jQuery team members such as the Filament Group who are well known for their work on jQuery UI and ThemeRoller. First and foremost, we want to allow the team to focus on making a great jQuery experience across the mobile Web.

Secondly, we will be working hard to make sure that webOS itself is a fantastic host for the product. This will mean testing help, and also some jQuery plugins that show off some of the great abilities of webOS (e.g. the notifications system) in a progressive way.

We are really excited to be working with the team as their launch into jQuery Mobile en force.

Here are some more details on the goals of jQuery Mobile from Mr. John Resig himself:

“The jQuery project is really excited to announce the work that we’ve been doing to bring jQuery to mobile devices. Not only is the core jQuery library being improved to work across all of the major mobile platforms, but we’re also working to release a complete, unified, mobile UI framework.

Absolutely critical to us is that jQuery and the mobile UI framework that we’re developing work across all major international mobile platforms (not just a few of the most popular platforms in North America). We’ve published a complete strategy overview detailing the work that we’re doing and a chart showing all the browsers that we’re going to support.

Right now we’re working hard, planning out the features that we want to land and doing testing against the devices that we want to support — and hoping for a release later this year.

If you wish to help, please join the discussion in the jQuery Mobile Community.

Our aim is to provide tools to build dynamic touch interfaces that will adapt gracefully to a range of device form factors. The system will include both layouts (lists, detail panes, overlays) and a rich set of form controls and UI widgets (toggles, sliders, tabs).”

It has been enjoyable to see the great touch and mobile support that YUI 3.2 is adding, and we look forward to hosting the Dojo team at Palm for one of their events. Sencha Touch and SproutCore are showing us that Web applications can feel like “native” apps on other platforms. All in all, the future for a cross platform Web application world is bright. We look forward to working with the entire community to make it happen.

Posted by Dion Almaer at 9:12 pm

2.9 rating from 8 votes

Monday, July 12th, 2010

Strobe; A hot new HTML5-touch startup founded by Charles Jolley

Category: HTML

Charles Jolley: “I started working in SproutCore almost 5 years ago because I believe the future of software development lies in native-style apps in the web browser. It is the platform of the future and when that shift change happens, I want to be there with the technology. Now, I believe that time is almost finally upon us. It’s time to double down, and that is why I am leaving Apple.”

Congrats to Charles as he starts a new adventure. At Apple, he lead the charge on the open source SproutCore framework which powers Mobile Me and a bunch more.

He recently showed off SproutCore Touch and with it a killer demo. Instead of just saying “the Web can do as good a job as ‘native’ apps for some purposes” he showed it. He and SproutCore folk were there with two iPads. One had the native iPad NPR app, and the other had a *week long* port to SproutCore Touch. The funny thing…. the touch version performed better and even had a nice hidden feature. If you are listening to NPR and go to another app, it kept playing! Who knew!

For anyone wondering what the new company means for SproutCore, Charles makes it clear:

First, SproutCore is now and will always be totally free and open source. I think this business of charging for a commercial license is not an effective way to grow a project. Sure you make a little cash, but at what expense to the community? My goal is to make SproutCore and all of the developer tools that surround it totally free to everyone. All I ask is that you participate in the community somehow to make things a little better for those who come after you.

Second, now that I am no longer held back by big-company legal restrictions, I am going to be much more involved with the platform. Very soon I will post some new example code. Some others are working on new documentation and build tools to ease that pain as well. Starting this fall, my new company will also start to offer online and in person training and mentoring courses to your team get up to speed quickly. We can also finally get started in that book.

My goal is that by the end of the year, any average developer can pick up SproutCore, build, and deploy a basic app without feeling lost. This is open source and I can’t usually guarantee timelines but at least now we can do what we need to make it happen.

With Strobe he wants to revolutionize “digital publishing”. Put your thinking hats on to noodle on that one. One thing is for clear… it isn’t just about making SproutCore Inc (as he discusses above).

Congrats Charles!

Posted by Dion Almaer at 7:03 am

3 rating from 2 votes

Wednesday, June 30th, 2010

The death of the pixel as we know it; The new DPI web

Category: Browsers

The Web used to be so simple. Browser request goes to server, where you do some work, and return some HTML. Then we got Ajax and finally web apps could have some semblance of UI responsiveness. Now we have richer HTML5 technologies to change expectations of our users once again.

The Web is getting some new DPI love, and the new iPhone 4 display personifies this fact. The new display is fantastic for the consumer, and an opportunity for the design enlightened to build truly beautiful web sites. There is a big difference:

However, how do we as developers deal with this new world?

Aral Balkan has a nice post that goes into detail on the new opportunity and shares samples and ideas.

As with so many things on the Web, some of this has been thought of a loooong time ago. Dave Hyatt wrote about this back in 2006.

Walt Dickinson put together a guide to the retina display and using CSS3 media queries:

  1. <link rel="stylesheet"
  2.     type="text/css"
  3.     href="/css/retina.css"
  4.     media="only screen and (-webkit-min-device-pixel-ratio: 2)"
  5. />

Aral explains that “in the Retina-specific CSS, he loads in 32×32 icons as background images and specifies their dimensions in CSS pixels as 16×16 using the background-size CSS property.”

It is interesting to see a device pixel ratio used rather than specifying a DPI itself.

What else can be done to help folks in this new world?

Aral talks about how the browser could natively help via convention:

I’d like to suggest that browsers adopt the same naming convention that Cocoa Touch uses to find and load high-DPI versions of image and video assets. That is, if I embed an image using the following code…

  1. <img src="flower.jpg" alt="A beautiful rose"/>

… it should load in flower.jpg when the device-pixel-ratio is 1 but it should attempt to find an image called flower@2x.jpg at the same relative path if device-pixel-ratio is 2 (and so on, for higher pixel-ratios), falling back to the original graphic if it can’t find a high-resolution version.

(And the same convention could be used to load video assets.)

Maybe there are server side techniques that could be put in place to automatically serve up the most optimized image for a given DPI. This would stop a bunch of 404s, but requires more work on the part of the server monkey.

This is good news for SVG and libraries like Raphael, who are well suited for scaling. When playing with an iPhone 4 it was amazing how quickly you noticed the bitmaps that were too low res… they stick out like a sore thumb. Expectations have changed.

What else can we do?

Posted by Dion Almaer at 11:17 am

4.3 rating from 3 votes