You searched for: 'native'

Saturday, December 10th, 2011

HipHop Virtual Machine for PHP

Category: PHP

Facebook Software Engineer and HipHop for PHP team member Jason Evans provides details on Facebook’s move to a new high-performance PHP virtual machine. Described by Evans is ”a new PHP execution engine based on the HipHop language runtime that we call the HipHop Virtual Machine (hhvm).” He sees it as replacement for the HipHop PHP interpreter (hphpi). He continues:

We have long been keenly aware of the limitations to static analysis imposed by such a dynamic language as PHP, not to mention the risks inherent in developing software with hphpi and deploying with hphpc. Our experiences with hphpc led us to start experimenting with dynamic translation to native machine code, also known as just-in-time (JIT) compilation … we developed a high-level stack-based virtual machine specifically tailored to PHP that executes HipHop bytecode (HHBC). hhvm uses hphpc’s PHP>AST implementation and extends the pipeline to PHP>AST>HHBC.

He estimates the hhvm bytecode interpreter is approximately 1.6X faster for certain Facebook-specific benchmarks, with still better performance in the offing. But, as described in his blog post on the PHP compilation innovations, there is still work ahead. You can view HipHop-related information at GitHub.

Related Content:

Posted by jvaughan at 9:15 pm
4 Comments

+++--
3.5 rating from 145 votes

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.

Related Content:

  • Mobile
    In the very near future many hand-held device users will use them as a means of conducting remote electronic transactions....
  • Adobe killing Flash for mobile
    Adobe will stop developing its Flash plug-in for smartphones and tablets, instead focusing on...
  • Adobe ships mobile Flash development options
    Adobe Systems is shipping Macromedia Flash Lite 2 and Macromedia Flash Player SDK 7 to support better interactive Flash applications on mobile...
  • Adobe releases security update for Flash Player
    Adobe has issued a security update for Adobe Flash Player 11.0.1.152 and earlier versions for Windows, Macintosh, Linux and Solaris, as well as Adobe...
  • Adobe brings Flash to iPhone
    Adobe Systems has given a sneak peak of Adobe Flash Professional CS5, which now supports the Apple iPhone and iPod...

Posted by jvaughan at 7:04 pm
1 Comment

+++--
3.3 rating from 49 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!

Related Content:

  • Understanding the HTML5 standard
    Vendors are implementing HTML5 to take advantage of improved compatibility despite the fact that the standard won't be final until late...
  • HTML5: The end of native apps?
    Will the platform-agnostic common language HTML5 force apps from the device to the...
  • A settlement of sorts
    It is 10 years since Tim Berners-Lee released the World-Wide Web to the public and hence inaugurated what might be called...
  • Pros and cons of HTML5 for business
    HTML5 brings business benefits but also challenges. How will the new HTML standard effect businesses, developers and...
  • Not software bugs ... audio bugs!
    Patrick Gray interviews Les Goldsmith to learn about the world of spying and surveillance, which Goldsmith says are surprisingly prevalent in...

Posted by jvaughan at 9:17 pm
7 Comments

+++++
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

Related Content:

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.

Related Content:

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:

javascript
< view plain text >
  1. // Make a new fiber. The fiber will run the provided function.
  2. var fiber = new Fiber('name', function() {
  3.  
  4.   // ...
  5.  
  6.   // Make another fiber runnable.
  7.   some_other_fiber.becomeRunnable();
  8.  
  9.   // Suspend the current one.
  10.   Fiber.current.suspend();
  11.  
  12.   // ...
  13. });
  14.  
  15. // Make the new fiber runnable. It won't start until the current fiber suspends
  16. // or joins.
  17. fiber.becomeRunnable();
  18.  
  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!

Related Content:

Posted by Dion Almaer at 11:03 am
4 Comments

++++-
4 rating from 9 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!

javascript
< view plain text >
  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:

Related Content:

Posted by Rey Bango at 8:02 pm
16 Comments

++---
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="http://arstechnica.com/"/>
  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=http://arstechnica.com/;icon-uri=http://arstechnica.com/favicon.ico"/>
  6. <meta name="msapplication-task" content="name=Features;action-uri=http://arstechnica.com/features/;icon-uri=http://static.arstechnica.net/ie-jump-menu/jump-features.ico"/>
  7. <meta name="msapplication-task" content="name=OpenForum;action-uri=http://arstechnica.com/civis/;icon-uri=http://static.arstechnica.net/ie-jump-menu/jump-forum.ico"/>
  8. <meta name="msapplication-task" content="name=One Microsoft Way;action-uri=http://arstechnica.com/microsoft/;icon-uri=http://static.arstechnica.net/ie-jump-menu/jump-omw.ico"/>
  9. <meta name="msapplication-task" content="name=Subscribe;action-uri=http://arstechnica.com/subscriptions/;icon-uri=http://static.arstechnica.net/ie-jump-menu/jump-subscribe.ico"/>

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="http://arstechnica.com/">
  15.             <img src="http://arstechnica.com/favicon.ico" /> News
  16.         </a></li>
  17.         <li><a href="http://arstechnica.com/features/">
  18.             <img src="http://static.arstechnica.net/ie-jump-menu/jump-features.ico" /> Features
  19.         </a></li>
  20.         <li><a href="http://arstechnica.com/civis/">
  21.             <img src="http://static.arstechnica.net/ie-jump-menu/jump-forum.ico" /> OpenForum
  22.         </a></li>
  23.         <li><a href="http://arstechnica.com/microsoft/">
  24.             <img src="http://static.arstechnica.net/ie-jump-menu/jump-omw.ico" /> One Microsoft Way
  25.         </a></li>
  26.         <li><a href="http://arstechnica.com/subscriptions/">
  27.             <img src="http://static.arstechnica.net/ie-jump-menu/jump-subscribe.ico" /> Subscribe
  28.         </a></li>
  29.     </menu>
  30. </body>

Looks nice to me.

Related Content:

Posted by Brad Neuberg at 6:00 am
26 Comments

+++--
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!

[Via http://www.eleqtriq.com/]

Related Content:

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:

javascript
< view plain text >
  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:

javascript
< view plain text >
  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

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.

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

Pre-compiling template strings is possible too:

javascript
< view plain text >
  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”?

javascript
< view plain text >
  1. var lastTemplateItem = $(".movieName:last").tmplItem();
  2. var movie = lastTemplateItem.data;
  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:

taphold
tap
swipeleft
swiperight
swipe

Web Roundup

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

Related Content:

Posted by Michael Mahemoff at 10:35 am
19 Comments

++++-
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 Comments

+++--
3 rating from 4 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">
  2.  
  3.    <figure tabindex="1">
  4.       <img src="images/img-1.jpg" alt="jump, matey" />
  5.       <figcaption ">Jump!</figcaption>
  6.    </figure>
  7.  
  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.

Related Content:

Posted by Brad Neuberg at 7:00 am
3 Comments

+++--
3.3 rating from 6 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 VisualMining.com; Ken Stacey from SVGMaker.com; and the always awesome (and project co-leader) Rick Masters. Thanks to the many people like Michael Neutze, Bruce Rindahl, and more for their bug testing and evangelism!

Everything fixed in this release:

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

Download the release now and get started!

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

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

Related Content:

Posted by Brad Neuberg at 6:05 pm
2 Comments

++---
2.8 rating from 4 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:

javascript
< view plain text >
  1. function createContentBall(className,size,color,html) {
  2.   var element = document.createElement( 'div' );
  3.   element.className = className;
  4.   element.width = element.height = size;
  5.   element.style.position = 'absolute';
  6.   element.style.left = -size + 'px';
  7.   element.style.top = -size + 'px';
  8.   element.style.cursor = "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.     content.style.width = (size - contentPadding*2) + 'px';
  30.     content.style.left = (((size - content.clientWidth) / 2)) +'px';
  31.     content.style.top = ((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:

javascript
< view plain text >
  1. var element = document.createElement( 'div' );
  2. element.className = className;
  3. element.width = element.height = size;
  4. element.style.position = 'absolute';
  5. element.style.left = -size + 'px';
  6. element.style.top = -size + 'px';
  7. element.style.cursor = "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):

javascript
< view plain text >
  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:

javascript
< view plain text >
  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.    content.style.width = (size - contentPadding*2) + 'px';
  8.    content.style.left = (((size - content.clientWidth) / 2)) +'px';
  9.    content.style.top = ((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:

javascript
< view plain text >
  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:

javascript
< view plain text >
  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.     element.style.left = (body.m_position0.x - (element.width >> 1)) + 'px';
  12.     element.style.top = (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.       element.style.WebkitTransform = rotationStyle;
  16.       element.style.MozTransform = rotationStyle;
  17.       element.style.OTransform = 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.

Related Content:

  • Video, HTML5 canvas and the codec cavalcade
    Browser support is again a new frontier. Video codec are a central issue. A variety of codecs are being offered for HTML5. Some codecs may be the...
  • Get ready for HTML5 and canvas elements
    The HTML5 canvas element is a new way to display active graphics and manipulate images with JavaScript. Find out what the new element will mean for...
  • Understanding the HTML5 standard
    Vendors are implementing HTML5 to take advantage of improved compatibility despite the fact that the standard won't be final until late...
  • The impact of HTML5 on Web applications
    HTML, the HyperText Markup Language, is an essential part of the Internet experience. HTML5 is one part of what WHATWG sees as essential to the...
  • HTML5 guide
    HTML5 guide: The advent of HTML5 signals a new wave of Web programming methods, and a new slate of standards for enterprise application...

Posted by Brad Neuberg at 5:00 am
5 Comments

++---
2.9 rating from 14 votes

Thursday, August 19th, 2010

Will Native Mobile Applications Wither Away?

Category: Mobile


James Pearce has started a fascinating series, called WhitherApps.com, trying to rewrite the BBC iPhone application and other native mobile apps using HTML5. From the kickoff blog post:

WhitherApps is a bandwagon-busting experiment. I believe there are far too many native client apps which could have been far better written as mobile web apps. What we’re going to try and do is take a few examples, apply a little reverse-engineering, and rewrite them, warts and all, with web technologies.

James has already produced three blog posts rewriting the BBC iPhone app but with HTML5 (Part I, Part II, Part III). I encourage you to read them. He’s already gotten impressively far; here is a screenshot of the HTML5 app so far:

[via kenguish]

Related Content:

Posted by Brad Neuberg at 5:00 am
17 Comments

+++--
3 rating from 3 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.

Related Content:

Posted by Dion Almaer at 9:12 pm
6 Comments

++---
2.9 rating from 7 votes