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.
HipHop Virtual Machine for 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...
IBM, Oracle look to integrate PHP into SOA Executives from IBM and Oracle are trying to leverage PHP for Web services and SOA, bringing newer technologies like SDO and SCA to...
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.
… 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:
Adobe killing Flash for mobile Adobe will stop developing its Flash plug-in for smartphones and tablets, instead focusing on...
Adobe Flash Player Adobe Flash Player is software used to stream and view video, audio and multimedia and Rich Internet Applications (RIA) on a computer or supported...
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...
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?
W3C publishes HTML 5 draft A draft of HTML 5, "a major revision of the markup language for the Web," is now available from W3C. New features include APIs for drawing...
Pros and cons of HTML5 for business HTML5 brings business benefits but also challenges. How will the new HTML standard effect businesses, developers and...
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...
HTML 5 HTML 5 is the next revision of the Hypertext Markup Language (HTML), the standard programming language for describing the contents and appearance of...
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 Tutorial This tutorial contains XML articles, tutorials, examples, tips, tools, white papers, expert advice and more to pump up your XML know-how...
Document type definitions strike back! Ed Tittel explains why SGML-based Document Type Definitions still have a role to play in defining XML markup and documents....
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:
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...
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.
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.
// Make a new fiber. The fiber will run the provided function.
var fiber = new Fiber('name', function(){
// ...
// Make another fiber runnable.
some_other_fiber.becomeRunnable();
// Suspend the current one.
Fiber.current.suspend();
// ...
});
// Make the new fiber runnable. It won't start until the current fiber suspends
// or joins.
fiber.becomeRunnable();
// Wait for the fiber to finish.
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!
Diet Ajax, 100% JavaScript free The open source Ajax framework ZK 1.0 has been released with its own markup language along with XUL and XHTML components to get around programming in...
From here to there: Fiber optics over Wi-Fi In this tip you will read various opinions on how to set up networking between the 5th and 7th floors of a building. See why IT professionals say...
Bridging the gap Many disaster recovery and remote backup programs rely on an efficient, cost-effective WAN. Fiber-optic network technology is often required for...
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!
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:
<metaname="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"/>
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:
Smoke and sanity testing Smoke and sanity tests are often confused with one another, but they are different. Expert Scott Barber explains what these tests...
How to conduct smoke and sanity tests Regression testing is enhanced, not replaced, by smoke and sanity testing. Expert John Overbaugh explains what these tests are and how to effectively...
Ready or Not, Here Comes the Cloud Clouds do many things well, but fixing performance problems isn't one of them. For that you need a world-class application server. Learn how...
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!
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:
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.
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.
var lastTemplateItem = $(".movieName:last").tmplItem();
var movie = lastTemplateItem.data;
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.
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:
Ajax work can be fun, jQuery creator says Writing JavaScript for Ajax should be fun, says John Resig, the creator of jQuery, a tool he designed to ease developers pain working with the...
Creating an ordinal binding converter When creating an ordinal binding converter the possibilities are endless, as you can write code to covert from any .NET type to an alternate .NET...
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:
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):
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:
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.
Content Scrambling System (CSS) Content Scrambling System (CSS) is a data encryption and authentication method used to protect digital versatile disk (DVD) movies from being...
CSS Content Scrambling System (CSS) is a data encryption and authentication method used to protect digital versatile disk (DVD) movies from being...
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
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:
View SVG in XML docs Ways that you can interact with scaled vector graphic images in XML...
Flaws found in IE and Adobe browser utility Three new vulnerabilities have been found in a popular browser plug-in from Adobe. Additionally, Internet Explorer 6 contains a flaw that is not...
The value of SVG What it is, what the buzz is, and how to learn...
Java toolkit out for beta testing A Java toolkit that allows developers to build Web- based applications that can handle Scalable Vector Graphics (SVG),...
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:
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:
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):
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:
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:
var rotationStyle = 'rotate(' + (body.m_rotation0 * 57.2957795) + 'deg)';
element.style.WebkitTransform = rotationStyle;
element.style.MozTransform = rotationStyle;
element.style.OTransform = rotationStyle;
}
}
}
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:
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...
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:
Inside the native app vs. Web app debate Native apps vs. Web apps is one of the hottest debates in tech. Native mobile apps have more functionality, but Web apps work on more...
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.
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.
Caching and dynamic views My client does not want to change his cache settings on IE and I'm trying to figure out a way to dynamically update a view each time it is visited. I...
I'm trying to set a php session variable from a radio button. The idea is that a jquery function is called which...
IE 8 Crashing Problem Hello Everyone,
Here\'s the situation:
two iSeries boxes - Dev and Prod both V5R4M0
We\'re using AJAX to dynamically load content using a tabbed...
