Udacity HTML5 Game Development course now live

By Peter Lubbers, Program Manager, Google Chrome Developer Relations

We just launched our new Udacity HTML5 Game Development course (CS255). This course focuses on building a game in JavaScript and is taught by Colt McAnlis (Developer Advocate, Chrome Developer Relations), Peter Lubbers (Program Manager, Chrome Developer Relations), and Sean Bennett (Architect, Udacity). Yep, these guys:

This Thursday, February 14th at 10:30 a.m. PST we are hosting an introductory Google Developers Live session with special guest Sebastian Thrun (Udacity's CEO). In this session we will tell you all about the content of the course and and we will answer your questions live. Make sure you add this live event to your calendar and tune in on Thursday: http://goo.gl/ffs8s (you can ask and vote for your questions there, too).

We have a series of exciting initiatives that we are organizing in parallel. First, we’ll be running a study group for the first several weeks of the course. The study group will be hosted at Google’s San Francisco office, and Colt, Peter, and Sean will be there to answer any questions you might have and to help you out with the course material. If you don’t live around San Francisco, or can’t make it for whatever reason, don’t worry, because we’ll be livestreaming and recording these study groups.

In addition to the study group, Udacity is also organizing an exciting contest focused around the course. The goal of this contest is to build your own game using the knowledge and skills you've gained from the course. You can sign up for the course here and tune into GDL on Thursday to find out more about it.


Peter Lubbers is a Program Manager on the Chrome Developer Relations Team, spreading HTML5 and Open Web goodness. He is the founder of the San Francisco HTML5 User Group--the world's first and largest HTML5 meetup with over 6,000 members. Peter is the author of "Pro HTML5 Programming" (Apress) and, yes, his car's license plate is HTML5!

Posted by Scott Knaster, Editor

Introducing "Find Your Way to Oz", a new Chrome Experiment

By Max Heinritz, Associate Product Magician (Manager)

Cross-posted with the Chromium Blog

Today we unveiled "Find Your Way To Oz", a new Chrome Experiment inspired by the upcoming feature film Oz The Great and Powerful. Developed by UNIT9, this experiment brings together Disney’s unique storytelling tradition and the power of the web platform, allowing users to interact with the web in a completely new way.



The desktop version of "Find Your Way To Oz" uses many of the open web’s more advanced features:

• Immersive Graphics: The experiment uses WebGL for the main 3D environment, CSS3 features such as CSS Transitions for various visual embellishments, and GLSL shaders for the tornado’s ominous look and feel.


• Rich Audio: As the user explores the experiment, the 3D sound dynamically adapts thanks to the Web Audio API. The same API powers the experiment’s music composing section.


• Camera-based interactions: Through WebRTC’s getUserMedia API, users can become circus characters or record their own mini-movies.

The experiment’s mobile web version also uses cutting-edge web technologies. These include graphics features such as accelerated 3D transforms and sprite sheets as well as mobile hardware features like camera, multi-touch, gyroscope and accelerometer. Together they create an experience that can normally only be found in native apps.

To learn more about how this experiment was built, read our technical case study and join us for a Google Developers Live event on February 11th at 11 a.m. GMT where we’ll be talking to the team behind the project. Alternatively, use Chrome’s developer tools to see how the experiment works on your own, perhaps finding in the process your own path to the yellow brick road.


Max Heinritz is an Associate Product Manager on the Chrome Web Platform team. He's helping the web reach its potential to become the universal application platform. On the weekends you can find him exploring the Northern California wilderness.

Posted by Scott Knaster, Editor

Google HackFair in South Korea

By Soonson Kwon, Developer Relations Program Manager

For developers and engineers, the best way to learn something is to get your hands dirty and try making something. That is why Google hosts many hackathons around the world. Last November 17 and 18, we had a bigger experiment at Gangnam (yes, this is the very Gangnam in Gangnam Style!) in Seoul, South Korea which expanded a 1-2 day hackathon into a much longer one which we called Google HackFair.



The idea was to give developers enough time (2 months) to develop something bigger and provide a nice chance to showcase their projects. 153 developers submitted 92 projects, and 40 projects were chosen from among them and displayed. Developers used many different technologies, including Android, Chrome, App Engine, and HTML5, and they completed creative and interesting projects: a remote controlled car guided by Android, a serial terminal for Chrome, a braille printer using Go, and many more!

Besides the exhibition, we also prepared a mini-conference and GDG (Google Developers Group) booth where Googlers and community developers gave 27 sessions in total.

More than 1000 people attended and enjoyed the Google HackFair. Although the event is finished, developers continue updating and polishing their projects. It was a great time indeed.

If you are interested in details for the projects including full demos or source code, please check here.


Soonson Kwon is Developer Relations Program Manager and Country Lead for South Korea. His mission is to help Korean developers make better use of Google’s developer products. He is also passionate about Open Source.

Posted by Scott Knaster, Editor

Fridaygram: Chrome Jams, distant stars, building footprints

By Scott Knaster, Google Developers Blog Editor

Hey, wanna start a band? A new Chrome Experiment, JAM with Chrome, lets you play music in a web app and jam with others online in real time. You get to pick from 19 different instruments, including drums, guitars, and keyboards. Once you get really good, you can use shortcuts on your (computer) keyboard to play your instrument.



When you’ve had enough fun making music with your friends, you can explore how JAM with Chrome works. Take a look at the tools and technologies that were used to make this app, and for details, read the case study. Then you can decide whether you want to build the next great web app or become a rock star instead.

Speaking of stars, scientists have astonishingly figured out how to learn about light from every star that ever existed. Researchers used the orbiting Fermi Large Area Telescope to look at distant galaxies and measure photons from various places around the universe. This data goes back to the formation of the first stars more than 13 billion years ago.

Finally, back on our own planet, you might have noticed that Google Maps recently added more building footprints to map displays. In case you didn’t count them, over 25 million new building footprints have been added to both desktop and mobile versions of Google Maps. Maybe you’ll see the new footprints while exploring your favorite city this weekend.


On Fridays we detour slightly from our usual posts and publish a Fridaygram, a fun compilation of nerdy stuff to amuse you (and us). And how cool is it that we have orbiting telescopes?

Celebrating Dart’s birthday with the first release of the Dart SDK

By Lars Bak, Software Engineer

A year ago we released a technology preview of Dart, a project that includes a modern language, libraries and tools for building complex web applications. Today, after plowing through thousands of bug reports and feature requests from the web community, a new, more stable and comprehensive version of Dart is now available and ready to use.



With this version of the Dart SDK, we’ve made several improvements and added many features:

• A faster Dart Virtual Machine that on some Octane tests outperforms even V8.
• A new Dart to JavaScript translator that generates fast and compact output.
• An HTML library that works transparently on modern browsers.
• A library to interoperate with JavaScript code.
• An easy to use editor.
• Pub, a new package manager
• Dartium, a Chromium build with native Dart support.
• A server-side I/O library.
• A language specification describing the Dart semantics, including new features.

Over the following months, we will continue to work hard to evolve the SDK, improve Dart’s robustness and performance, and fine-tune the language while maintaining backwards compatibility.

You can download the Dart Editor from dartlang.org. It comes with a copy of the open-source SDK and Dartium. Thanks again for all your feedback – keep it coming.


Lars Bak is a veteran virtual machinist, leaving marks on several software systems: Beta, Self, Strongtalk, Sun's HotSpot and CLDC HI, OOVM Smalltalk, and V8.

Posted by Scott Knaster, Editor

Teaming up on Web Platform Docs

By Alex Komoroske, Product Manager

Cross-posted with the Chromium Blog

When you want to build something for the web, it's surprisingly difficult to find out how you can implement your vision across all browsers and operating systems. You often need to search across various websites and blogs to learn how certain technologies can be used. It's kind of like a scavenger hunt, except it's not any fun.

This scavenger hunt is soon coming to an end. Google along with the W3C and several leading internet and technology companies just announced the alpha release of Web Platform Docs. Web Platform Docs is a community-driven site that aims to become the comprehensive and authoritative source for web developer documentation.



The founding members of Web Platforms Docs have all already provided a lot of content for the site to help get this effort off to a strong start. However, collectively, we’ve barely scratched the surface. We decided that it would be better to open up Web Platform Docs to the community as early as possible, so that everyone – including you – can help expand and refine the documentation, and ultimately define the direction of the site.

If you have more questions about Web Platform Docs, you can find us on Twitter.


Alex Komoroske is a Product Manager on Chrome's Open Web Platform team. Before he was a product manager he was a web developer, and even today he loves building web apps in his spare time.

Posted by Scott Knaster, Editor

Announcing Movi.Kanti.Revo, a new Chrome Experiment

By Pete LePage, Developer Advocate

Cross-posted with the Chromium Blog

Earlier this year at Google I/O, we gave developers a sneak peek at Movi.Kanti.Revo, a new sensory Chrome experiment crafted by Cirque du Soleil and developed by Subatomic Systems that brings the magic of Cirque du Soleil to the web through modern web technologies. The full experiment, which allows users to follow a mysterious character through a beautiful world of Cirque du Soleil performances, was launched today at the Big Tent event in New York City.



The experiment was created using just HTML5, and the environment is built entirely with markup and CSS. Like set pieces on stage, divs, images and other elements are positioned in a 3D space using CSS. To create movement, CSS animations and 3D transforms were applied making the elements appear closer and further away. Everything is positioned and scaled individually to create a highly realistic interactive environment. In addition, the experiment uses HTML5 <audio> to play music and sounds.

Movi.Kanti.Revo breaks with the tradition of keyboard or mouse navigation; instead users navigate through an interactive Cirque du Soleil world with their gestures. To accomplish this, the experiment asks users for permission to access their web cam using the new getUserMedia API. With this new API, the experiment renders the camera output to a small <video> element on the page. A facial detection JavaScript library then looks for movement and applies a CSS 3D transform to the elements on the page, making environment move with the user.

Because this experience was built using just markup, it works in the browser across all devices. The experiment takes advantage of the rich capabilities possible on mobile devices, like the accelerometer to navigate through the world.

To learn more about how this experiment was built, check out the new technical case study or join us for a special Google Developers Live Behind The Divs event on September 20th at 8:30am PDT /15:30 UTC where we’ll be talking to the engineers behind the project.

Head over to Movi.Kanti.Revo at www.movikantirevo.com to check things out, and be sure to open Chrome’s developer tools to see what’s going on behind the <div>s!


Pete LePage is a Developer Advocate on the Google Chrome team and works with developers to create great web applications for the Chrome Web Store. He recently helped launch the +Chrome Developers page on Google+.

Posted by Scott Knaster, Editor

Six strategies for building a great Chrome extension

This guest post was written by Tal Raviv, CTO of Ecquire

Even though the words "browser extension" connote a one-trick feature, today’s browser extensions allow developers to accomplish some pretty amazing things. Entire companies are being funded and sold as extensions and providing serious value to users.

Here’s how you can make your browser extension a formidable product.

1. Use Your Superpowers

Developing an extension gives you advantages you may not have been aware of. Think of your extension as an abnormally powerful front end. I'll name a few features we've especially enjoyed:

• Let your users install very slickly directly from your home website to increase conversions.
• List on the Chrome Web Store for tens of thousands of free impressions. (Tip: For maximum exposure and traffic, invest time in beautiful graphic assets.)
• Use localStorage as a super-easy store. Unlike in regular web applications, localStorage for extensions remains untouched even if users clear their cookies. (For more structured, asynchronous, client-side storage of large amounts of objects, take a look at IndexedDB.)
• Let Chrome sync your extension across devices, including data you store in chrome.storage.sync.

Extensions are your chance to hack with any site you've wanted to improve beyond the limits of their API. There are many more very powerful advantages browser extensions have - these are just the lesser known ones.

Check out examples and look at what other apps (even silly ones) have done. If you find yourself asking “how did they do that?”, check out the source code.

2. Know What's Going On Inside Your App

source: AntFarmsForKids.com

Because extensions are front ends on steroids, you have your pick of almost any web analytics software you choose. We recommend choosing an event-based, not a page view-based model because the definition of a page view is hard to interpret in most extensions. Instead, track specific interactions.

We chose Mixpanel, but there's an official Chrome tutorial on using Google Analytics in an extension. The principles of implementation are the same no matter what you choose.

Solid analytics help you answer questions about what's going on inside your app using hard data instead of intuition and opinions. It will also undoubtedly reveal a few unexpected surprises about user behavior.

3. Connect to Third-Party APIs

Good apps avoid reinventing the wheel, and great apps connect users to the services they already like using. Extensions can request permission to connect with any domain. Just because you're an extension doesn't mean you can't use OAuth to authorize those requests.

If your extension has a server backend, then fantastic, you have plenty of resources to help you. If you want to directly make requests from the user's computer, that is completely possible. The initial handshake and exchange of access token is done from a light server, but after that you can save the tokens locally. This allows your extension to run all of its interactions client-side if you'd like to keep things simple.

4. Make Money

Accepting credit cards and making financial transactions via an extension can be just as ironclad and secure as anywhere else. There's no shortage of billing management services that provide hosted payment pages and APIs.

Simply direct users to secure hosted payment pages to accept credit card information, letting the billing service deal with compliance. We use Recurly, which conveniently allows our users to use coupon codes, receive invoices by email, and manage their billing info directly, saving us even more development time and headache.

Hosted payment pages may be simple to implement, but they are pretty powerful (see also Chargify and CheddarGetter). They allow very specific management of your paying customers. Hosted payment pages can make your extension aware of the user's subscription status, to deactivate or activate as appropriate. Your customers’ payment statuses can be accessed with APIs behind the scenes throughout the lifetime of your extensions.

If you prefer a super-streamlined flow for your customers - one where they potentially do not need to enter their credit card information - using a hosted payment page from Paypal or the recently announced Google Wallet for digital goods are your best bets for maximum coverage and quickest checkout.

Using hosted payment systems affords maximum functionality with the least amount of coding and testing - or any server-side billing logic. Most importantly, you have peace of mind that your customer's financial information is secure and compliant. No compromises.

5. Use Frontend Frameworks

Anywhere there's JavaScript, you can use JQuery, BackboneJS and CoffeeScript: any JS library or plugin you love. This applies across the extension architecture, from injected UI in content scripts to any background code. The entire platform is web frontend - you can run anything you would use in a web application.

6. Test All the Freaking Time

Okay, I admit it's a more fun motto to say than to do, but if you're a TATFTer, I have good news for you. Adrian Unger provides a how-to on using Jasmine BDD in browser extensions even in the sub-cockles of your content scripts, even in the context of a live, logged-in webpage.

Peace of mind about your code is important, but it's even more crucial in extensions where you don't control the webpages you may be injecting into. You can use Jasmine to assert that the DOM of your target web sites hasn't changed too much and that your code is still valid out in the wild web.

In summary, just when you thought you knew everything you could do on the web, new doors open up. This is just a small taste of our lessons learned about what puts browser extensions in the league of extraordinary platforms. Like any new platform, I can’t even imagine the innovation that has yet to launch.


Tal Raviv is the CTO of Ecquire, a maker of CRM workflow automation software. Capture contacts from anywhere and Ecquire puts it in the right account for you. Read Tal’s guides on Chrome development and startup experiences on the Ecquire blog.

Posted by Scott Knaster, Editor

Behind the scenes: visualizing the evolution of the web

Deroy

Sergio

This guest post is by Sergio Alvarez, Vizzuality, and Deroy Peraza, Hyperakt, in collaboration with Min Li Chan, Chrome Team

At Google I/O this year, we launched a new version of The Evolution of the Web, a project visualizing the history and pace of innovation in web technologies and browsers. The Evolution of the Web traces how web technologies have evolved in the last two decades and highlights the web community’s continuous efforts to improve the web platform and enable developers to create new generations of immersive web experiences. In collaboration with the Google Chrome team, the team at Hyperakt designed the interactive visualization while Vizzuality built it using HTML5, SVG, and CSS3.

The visualization included 43 web technology "strands" across 7 browser timelines to represent major developments on the web platform. On hover or tap, each strand is highlighted to reveal intersections that tell the story of when browser support was implemented for each new web technology. To provide additional context, we developed a secondary visualization to illustrate the growth of Internet users and traffic.

In addition, this year's design includes the option for viewing the visualization in both day and night mode, making it ideal for large-screen projection.

For the teams working on this site, it was interesting to note that we used roughly 60% of the technologies highlighted in the timeline to build this visualization:

• We used HTML5, SVG, and canvas to draw the visualization, alongside CSS3 transforms, rotation, and perspective for immersive animation and data interaction.
• We used CSS3 to kick off the timeline with a 3D-like animation, as well as the panning and zooming functions, toggling between day and night modes.
• Additionally, we took advantage of the D3 JavaScript library’s interaction and visual frameworks.

In working closely with the Chrome team, we tested multiple approaches to find the best way to bring to life initial design concepts and build a sleek, responsive visualization. In fact, during the project's development, the Vizzuality team came across an SVG rendering issue that prevented the animation from running smoothly. The Chrome team looked into this bug immediately and promptly enabled a fix the following day – a glimpse at the web evolving in real-time, if you will!

We're amazed at how much the web has advanced over the last several years, and the pace of development is only accelerating. Never in the web's history has it been as exciting to be a designer or web developer, and we hope that this visualization captures some of that spirit.


Deroy Peraza is a founding partner and creative director at Hyperakt, a New York City design firm that helps change-makers tell their stories. He was born in Havana, Cuba, and lives in Brooklyn with his wife Jenna and his son Luco.

Sergio Alvarez is co-founder and lead designer at Vizzuality and CartoDB, a NYC-based company working on data analysis and visualization on stories that matter, such as climate change or biodiversity loss. He is a good runner and loves to ride his long board.

Posted by Scott Knaster, Editor

Fridaygram: Chrome tools, Goldberg machines, Lehrer songs

By Scott Knaster, Google Developers Blog Editor

If you use Google Chrome and you like to live on the edge, you might want to try Google Chrome Canary. There's a new version of Chrome Canary pretty much every day, and it gets the latest features. Of course, because it's built every day, sometimes it’s not very stable and it falls right off the leading edge it's balanced on. That’s why, for safety, you can install and run the stable version of Chrome alongside the Canary version.

Recent Canary builds have added cool new features to the developer tools section of Chrome. Specifically, you can now test mobile environments by simulating different screen sizes and by emulating touch events using the mouse. These features are on the Settings page of developer tools.

If you haven’t visited Chrome's developer tools before, you might be pleasantly surprised at all the nifty things available there. To get to developer tools, click the Wrench in Chrome, then choose Tools > Developer Tools. Have a look around – if you need a guide, see the documentation.

Some developers make hardware too, and a bunch of them competed in this year’s Rube Goldberg Machine Contest at Purdue University. The winning team broke a record – their own record – by building a machine that takes 300 steps to inflate and pop a balloon. When you consider that 14 people spent 5000 hours on this project, you realize the power of creativity mixed with craziness.

Finally, take a moment to celebrate Tom Lehrer's birthday week by listening to some of his classic tunes. As a math professor / musician / parodist, nobody expresses the spirit of Fridaygrams better than Tom Lehrer.


Fridaygram posts are just for fun. They're designed for your Friday and weekend enjoyment. Each Fridaygram item must pass only one test: it has to be interesting to us nerds. Disclaimer: we do not advocating poisoning pigeons, whether in the park or elsewhere.

Meet the web platform again for the first time

By Alex Komoroske, Product Manager

Cross-posted with the Chromium Blog

A few weeks ago one of my developer friends was gushing about the capabilities of his favorite native platform. After every point I felt obliged to point out that the web platform either already had or was actively developing precisely the same capabilities—and then some. He was incredulous. "Prove it," he said.

So I pulled together a few of my favorite examples from the cutting edge of the web platform and recorded three screencasts to help my friend—and others—meet the web platform again for the first time.

The first video, Building on Foundations, goes over how the web platform has been fixing various historical shortcomings and building upon its core strengths, like complicated graphical effects, composability, and advanced text layout.



The next video, Learning from Other Platforms, reviews how the web platform offers new capabilities inspired by successes on other platforms with things like push notifications, payment APIs, and web intents.



The last video, On the Cutting Edge, demonstrates some of the new tricks the web platform is learning, like webcam access, powerful audio APIs, and complicated 3D graphics.



If you're interested in learning more about the technology behind any of the demos, check out the Meet the Web Platform companion guide.

I hope these videos capture your imagination and begin to show what is possible on the web platform. The web platform is evolving at an enormous pace, and I just can't wait to see where it goes next!


Posted by Scott Knaster, Editor

1-up for web games

By David Glazer, Engineering Director, Google+

Hundreds of millions of users are already having fun playing games on the web. With GDC going on this week (#googlegdc), we wanted to give you an update on our efforts to improve the web ecosystem for game developers.

New technology capabilities

With HTML5, WebGL, and WebRTC, the browser has evolved into a feature-rich gaming platform. We are working closely with all browser vendors to further improve the web’s capabilities with new HTML5 APIs such as Gamepad, Mouse Lock, and Fullscreen.

Native Client (NaCl), a technology that enables console quality games in the browser, is also gaining traction. Starting today, the BlitzTech Gaming engine and the Havok Physics Engine have announced NaCl support, complementing a rich ecosystem of game middleware. Some of the latest games that take advantage of NaCl’s capabilities are Zombie Track Meat, Eets Munchies, Go Home Dinosaurs, Dark Legends, Air Mech, and Ubisoft’s From Dust. You can see an early preview of them at our GDC booth.

Improved distribution and monetization

Using social information in game play allows users to connect in more meaningful ways and developers to build even more compelling games. Google+ games continues to grow and attract exciting new games, including the exclusive launch of the epic fantasy title Kingdom Age last week. To help social game developers reach more users globally, all Google+ games will soon be available in the Chrome Web Store, providing an audience of hundreds of millions of users.

In addition, our In-App Payments solution recently added support for more currencies and optimized the payment flow to enable higher conversions.

Visit us at GDC and on the web

To get started working with us, you can now access a new site, developers.google.com/games, that pulls together all our technologies to help you build, distribute, promote, and monetize your games. And for those of you attending GDC this week, stop by our developer day and our booth. We are looking forward to continuing our collaboration with the gaming community and bringing the best games to hundreds of millions of Internet gamers.


David Glazer, Engineering Director for Google+ .

Posted by Scott Knaster, Editor

Introducing Technitone: Showcasing the Web Audio API, multiplayer and live in WebGL

By Paul Irish, Chrome Developer Relations

The Web Audio API, currently available in Chrome, provides a considerable amount of aural power to developers interested in integrating audio into their apps and games. Low latency audio playback, audio generation and realtime effects are available with a sensible API in Chrome stable.

We worked with gskinner.com to develop Technitone, a web audio experience that lets you join other players to plot tones on a grid, construct melodies and modify the output with a robust toolset of effects.

Click on over and poke around.

• Your tone samples can come from your own recordings, or any of the available samples.
• The left side Tools panel offers realtime audio filters, like echo reverb and pitch shift.
• We keep you connected to other players in realtime using WebSockets and Node.js.
• You can drop into solo mode or invite your friends to join you in a session.
• Get inspired by others’ audio creations in the gallery.

If you’re interested in the techniques and software behind the project, take a look at the case study with plenty of sample code and demos on HTML5 Rocks: http://www.html5rocks.com/en/tutorials/casestudies/technitone/


Paul Irish helps developers build compelling apps for the web on the Chrome Team. He also works on HTML5 Boilerplate, Modernizr, and many bits and bobs of open source code.

Posted by Scott Knaster, Editor

Building Web Apps? Check out our Field Guide

By Pete LePage, Developer Advocate

Yesterday, the Chrome Developer Relations team launched several new resources, including the Field Guide to Web Applications. It’s a new resource that is designed to help web developers create great web apps. We’ve heard loud and clear from users that they want more and better web apps, and we hope this new field guide will enable you to create those web apps. Our fictitious author Bert Appward guides you through topics like the properties of web applications, design fundamentals, tips for creating great experiences, and a few case studies that put best practices to use. Whether you're building your first web app or are just looking for ways to improve your existing apps, I hope you'll find the field guide useful.

We built the field guide to embody the principles and best practices that it preaches. We stepped away from the normal webpage look, and instead designed the experience around a field guide. We used many CSS3 features like box-shadow, opacity, multiple backgrounds and more to provide a rich, visual experience. To make sure that it worked offline, we used AppCache and other than some URL rewriting techniques, didn't use any server-side code. We used the HTML5 History API to maintain page state even though everything is served from a single HTML page. We've started working on a new case study about the field guide, so check back soon for that!


Pete LePage is a Developer Advocate on the Google Chrome team and works with developers to create great web applications for the Chrome Web Store. He recently helped launch the +Chrome Developers page on Google+.

Posted by Scott Knaster, Editor

A fresh new look for HTML5Rocks.com

By Eric Bidelman, Senior Developer Programs Engineer, Google Chrome Team

Over the past year, HTML5Rocks.com has become a top destination for developers craving to learn more about HTML5. Today, we have over 60 articles and tutorials covering the latest HTML5 tech, published by 30 contributors from around the world! We've worked hard to bring great content to the site as quickly as possible, but it's been challenging to consolidate so much information as HTML5 continues to push the web forward and evolve at an accelerated pace.

Today, we're launching an updated HTML5Rocks with better tools for finding content, including an edgy new look and "rocking" logo. As our content expands, finding things becomes more important. To address this, we've created "persona pages" with catered content in 3 different verticals (Games, Business, Mobile). If you're one of those developers, finding content relevant to you should now be a snap. We've also consolidated many of the different components (Updates, Studio, Playground) into the main site and have deeply integrated the HTML5 technology classes to bring a better identity to the content.

All in all, it's a little bit Punk and a little bit Rock and Roll.

Lastly, if you're interested in contributing to the site, it's an open source project and we'd love to have your expertise. See our contributors guide.


Eric Bidelman is a Senior Developer Programs Engineer on the Google Chrome Team and a core contributor to html5rocks.com. He is the author of the book Using the HTML5 Filesystem API.

Posted by Scott Knaster, Editor

Angry Birds Chrome now uses the Web Audio API

By Fred Sauer, Developer Advocate

Cross-posted with the Google Web Toolkit Blog

Last week Angry Birds for Chrome was updated to use the Web Audio API for all its in-game audio for Chrome users, which means Chrome users get the full Angry Birds experience, without any plugins. The Web Audio API supports a wide variety of use cases, including the high fidelity and low latency requirements of games. Users of other supported browsers will still get sound via Flash or HTML5 audio.

How does this cross-browser audio magic work? As you may have seen or heard, Angry Birds was in no small part made possible by the cross-platform open source PlayN library. When building for the HTML platform, PlayN in turn relies heavily on Google Web Toolkit (GWT) to delivery a highly optimized web experience for users, and on gwt-voices to easily deliver a cross-browser audio experience.

The responsibility of choosing the appropriate audio API for the game's sound is (mostly) left up to gwt-voices, which chooses the audio API that will give the best experience. If you'd like to hear how other audio APIs perform, you can ask gwt-voices to try to use the Web Audio API, Flash, HTML5 Audio, or even native audio. Your mileage will vary by browser and platform and which plugins you have installed. Also, gwt-voices will select the best available fallback, if the desired audio API is not going to work at all in your environment.

Want to learn more? Check out the Web Audio API tutorial and don't let those pigs grunt too much.


Fred Sauer is a Developer Advocate at Google where most of his time is devoted to Google App Engine and Google Web Toolkit. He is the author of various GWT related open source projects including gwt-dnd (providing in browser Drag and Drop capabilities), gwt-log (an advanced logging framework) and gwt-voices (for cross browser sound support). Fred has dedicated much of his career to Java related development, with an increasing focus on HTML5.

Posted by Scott Knaster, Editor

Fridaygram: goodbye to 2011

By Scott Knaster, Google Code Blog Editor

This is the last Fridaygram of 2011, and like most everybody else, we’re in a reflective mood. It’s also the 208th post on Google Code Blog this year, which means we’ve averaged more than one post every two days, so that’s plenty of stuff for you to read. What did we write about?

At Google, we love to launch. Many of our posts were about new APIs and client libraries. We also posted a bunch of times about HTML5 and Chrome and about making the web faster. And we posted about Android, Google+, and Google Apps developer news.

Many of our 2011 posts were about the steady progress of App Engine, Cloud Storage, and other cloud topics for developers. We also published several times about commerce and in-app payments.

2011 was a stellar year for Google I/O and other developer events around the world. Some of our most popular posts provided announcements, details, and recaps of these events. And we welcomed a couple dozen guest posts during Google I/O from developers with cool stories to tell.

The two most popular Code Blog posts of the year were both launches: the Dart preview in October, and the Swiffy launch in June.

Last, and surely least, I posted 26 Fridaygrams in an attempt to amuse and enlighten you. Thank you for reading those, and thanks for dropping by and reading all the posts we’ve thrown your way this year. See you in 2012!

And finally, please enjoy one more Easter egg.

Flash developers: export to HTML5 with new Swiffy extension

By Esteban de la Canal, Software Engineer

We launched Google Swiffy in July. Swiffy enables you to convert Flash SWF files to HTML5. One of our main aims for Swiffy is to let you continue to use Flash as a development environment, even when you’re developing animations for environments that don’t support Flash.

To speed up the development process, we’ve built the Swiffy Extension for Flash Professional. The extension enables you to convert your animation to HTML5 with one click (or keyboard shortcut). The extension is available for both Mac and Windows, and it uses Swiffy as a web service, so you’ll always get our latest and greatest conversion. Information about the conversion process is shown within Flash Professional.

You can download the Swiffy Extension from the Google Swiffy site. We hope it will streamline your workflow when you use Flash and Swiffy to produce HTML5 animations. Please let us know how well it works for you via our feedback page.


Esteban de la Canal is a Software Engineer on the Swiffy team. He also enjoys game development, particularly weird-looking snake-like games in Flash.

Posted by Scott Knaster, Editor

New features and a new home for Swiffy

By Pieter Senster, Software Engineer

In June we released Swiffy, an experimental tool to convert Flash to HTML5, on Google Labs. We were thrilled with the response: in the first month, Swiffy users converted hundreds of thousands of files.

We received a lot of feedback from developers after the launch, and we learnt a lot from studying the warnings generated in the conversion process. As a result, we’ve released several improvements over the last few weeks. For example, Swiffy now supports shape tweening and drop shadow, blur and glow filters, all using SVG, CSS and JavaScript. Some of these filters can be seen in action in this Chrome ad (on a browser with SVG filter support).

We’ve also made Swiffy easier to use. You can now convert files of up to 1MB, and you’ll get a QR code to preview the output on a mobile device. We’ve also made it clear that you can host the Swiffy runtime (the JavaScript file that controls the animation) yourself if you need to.

Although Google Labs is winding down, Swiffy will continue to be available. We’re moving Swiffy to a new home: http://www.google.com/doubleclick/studio/swiffy (or, for those in a hurry, g.co/swiffy). Although it’s no longer a Labs product, it is still in beta, so it may not be able to convert all your Flash files, but we’re working to improve it all the time.

Pieter Senster is a Software Engineer on the Swiffy team. He's currently planning his first diving trip to the Great Barrier Reef.

Posted by Scott Knaster, Editor

Mark your calendars: HTML5 hackathons

By Mihai Ionescu, Developer Advocate

Cross-posted with the Google Commerce Blog

Over the past year, the web application ecosystem has been growing at an accelerating pace. Faster browsers and powerful web platforms like HTML5 have enabled developers to switch from native code to web based apps.

That’s why the Google Chrome and Commerce teams are holding several HTML5 Web App hackathons around the United States in early August. This is a great opportunity for developers to socialize, network, and play with the latest web APIs. During the hackathons, we'll cover the end-to-end process of developing an HTML5 application, publicizing with Chrome Web Store, and finally monetizing with In-App Payments.

In true hackathon style, participants will have the opportunity to create teams and work on a project together. At the end of the day, participants will present what they have created, and vote on the best apps or games. And of course we’ll have some awesome prizes for the winners.

The event is free of charge but space is limited. For more information and to register, please visit the location-specific links below:

August 1, 2011: New York
August 3, 2011: Chicago
August 8, 2011: Seattle
August 11, 2011: Mountain View

We’re looking forward to seeing the applications and games you build!

Mihai Ionescu is a Developer Advocate at Google helping developers build compelling applications using open web technologies. In his free time, when not skiing in the Sierras, Mihai enjoys traveling and exploring the great outdoors with his family.

Posted by Scott Knaster, Editor