HTML5 Rocks

HTML5 Rocks

Chrome for Android: Accelerating the Mobile Web

By Boris Smus at

You've probably already heard that Chrome for Android Beta launched today. This new browser is based on the Chromium open source project, and brings with it many of the latest HTML5 features that Chrome developers have come to know and love. For an overview of the new hotness, see the launch announcement on blog.chromium.org and a more detailed overview on code.google.com. I'll quickly go through the stuff I personally find most interesting:

UI Improvements

Chrome for Android makes it easy for developers to create modern mobile web user interfaces using fixed positioning, and overflow: scroll for individually scrollable elements. In addition, native-like scroll behavior is enabled by default. Chrome for Android supports the old flexbox model, though be aware that the original flexbox model is deprecated in favor of a new one. Also supported are DateTime pickers, and early support for <input type="range">.

Fast graphics

Chrome for Android also supports hardware accelerated canvas, and performs quite well. There's also support for requestAnimationFrame, which is important for mobile, letting the browser decide when to render, giving it a chance to manage battery life more efficiently in GPU intensive applications. Chrome for Android introduces a slew of other notable HTML5 features including File System API, IndexedDB, Web Workers and Web Sockets.

Remote debugging

Hands down, my personal favorite feature of Chrome for Android is remote debugging through the Chrome Developer Tools. Remote debugging makes it very easy for web developers to debug their application as it's running live on their mobile device, without having to resort to clever hacks such as Weinre. Here's a quick screencast showing this feature in action:

For more information about remote debugging, see this remote debugging article.

Try Chrome for Android Beta for yourself by downloading it from the Android Market. If you've written a mobile web app to use a feature, but Chrome for Android doesn't support it, keep in mind that this is a beta release, and see if this is already a known issue, and star it if it is. Otherwise, please log a bug via new.mcrbug.com.

I'm stoked about the positive impact Chrome for Android will make on the mobile web developer community, and looking forward to see the great things we can build together! If you have additional questions, see if they are already answered in this FAQ. Otherwise, if you have a Chrome-specific mobile web development question, please post it on Stack Overflow, tagged with the google-chrome and android tags.

Defining Scope In IndexedDB Transactions

By Ido Green at

What is IndexedDB? IndexedDB is an evolving web standard for storage of significant amounts of structured data in the browser and for high performance searches on this data using indexes. In other words, IndexedDB is an object store. It is not the same as a relational database, which has tables with collections rows and columns. It is an important and fundamental difference that affects the way that you design and build your applications (more on the - basic concepts).

So what is new? Changes my friends... we have some changes that are going to throw some errors if we don't handle them with simple syntax change.

From version 17 onwards, Chrome will now throw an error if an IndexedDB transaction is not scoped to an object store. Since all reading and writing of data are done within transactions, we need to create a transaction on a database, specify the scope (such as which object stores you want to access) and determine the kind of access (read only or write).

What does it means in code? Well, instead of passing an empty array to our database.transaction:

var transaction = db.transaction([], IDBTransaction.READ_ONLY);

You should scope to a particular object store, or list of object stores:

// all stores (equivalent to what use to be marked as empty array. )
var transaction = db.transaction(db.objectStoreNames, IDBTransaction.READ_ONLY);

// multiple stores:
var transaction = db.transaction(['ObjectStoreName1', 'ObjectStoreName2'],
    IDBTransaction.READ_ONLY);

// single store - these are equivalent
var transaction = db.transaction(['ObjectStoreName'], IDBTransaction.READ_ONLY);
var transaction = db.transaction('ObjectStoreName', IDBTransaction.READ_ONLY);

You can speed up data access by using the right scope and mode in the transaction. Here's a couple of tips: When defining the scope, specify only the object stores you need. This way, you can run multiple transactions with non-overlapping scopes concurrently. Only specify a READ_WRITE transaction mode when necessary. You can concurrently run multiple READ_ONLY transactions with overlapping scopes, but you can have only one READ_WRITE transaction for an object store.

Other sources:

So until next time... keep pushing the web to near territories.

7 minute videos: Javascript Console Protips & newish DOM APIs

By Paul Irish at

I recently recorded some videos from the comfy red chair in our office. Probably some useful things here to learn.

Level up on the Javascript console in the Chrome DevTools. Look at XHR requests, learn console helper functions to monitor events or explore objects better. We dive into all sorts of goodies in the command lines API: console.time, $0, inspect(), $$, monitorEvents(), keys(), values(), and copy().


In this one, I give you a heads up on recent DOM APIs with good browser support that were designed to make things easier for you. HTML5 classList, dataset, matchMedia(), textContent, and matchesSelector() are explained and demonstrated.