Understand how paints affect your performance.

Understand how different CSS property combinations can influence the paint-time of your page.

Discover how the Google I/O 2013 experiment was developed.

Using clipping and masking from CSS.

This article describes a way to do as little work as possible, yet still serve beautiful images for both high and low DPI screens.

Learn how you can use Chrome DevTools against your mobile device.

Advanced tips and tricks with Shadow DOM.

Learn about CSS styling options in Shadow DOM.

This article describes techniques to support mouse and touch together.

This article explains how GPU-accelerated rendering works in Chrome.

Introduction to the <template> element.

Learn why and how you ought to serve your sites over a secure HTTPS connection, rather than wide open and vulnerably over HTTP.

How we made a Magical Chrome Experiment.

Learn how to build rock-solid rhythmic timing into Web Audio applications.

Learn how to use Shadow DOM to separate content from presentation.

Learn how to run IFramed content in a sandbox, greatly reducing the risk associated with third-party widgets, and your own application's code.

This article explains scrolling performance and how to avoid large repaints.

An investigation into the parallax effect and common pitfalls in implementation.

A deep dive into how the instruments were built for JAM with Chrome

A case study using THREE.js to visualize space.

We take a look at some of the challenges we ecountered during the development of JAM with Chrome, using the Web Audio API

Techniques for improving rendering performance in web applications.

An introduction to the PageVisibility API in HTML5.

A tutorial on HTML5's constraint validation API and how it can be used to enhance forms.

Tips and techniques for using SVG effectively on mobile browsers.

Techniques for improving JavaScript performance in web applications, particularly when running in Chrome's V8 engine.

Techniques for screensharing the contents of a browser tab.

Building the 3D world of Movi.Kanti.Revo.

A discussion about how to use asynchronous techniques in HTML5.

High density displays are here on many devices. The canvas element deals with that in different ways in different browsers - find out how.

Techniques for delivering the best quality images as quickly and efficiently as possible.

Learn how to use HTML5 pointer lock and implement first person shooter controls.

How the Google Doodles team used the Gamepad API to include different user interactions.

Learn how Adobe is helping to bring new capabilities to CSS which enable advanced layout techniques for the modern web.

Create a chat application with AngularJS, Socket.IO, and Node.js.

How the Google World Wonders 3D Globe was made.

Read how Subsonic built SONAR using the HTML5 FileSystem API to cache 70+ MB of game data.

Plugin-free, realtime communication of video, audio and data using WebRTC.

Overview of Typed Arrays APIs and libraries.

Use JQuery UI to bind data from IndexedDB.

How orthographic 3D transforms work in WebGL.

Mitigate the risk of cross-site scripting attacks by whitelisting trusted origins with a Content Security Policy.

Let's take requestAnimationFrame to the next level and use it for debouncing resize events. We'll also dig into how to debug performance and smooth out your code.

Learn how CSS filters work, their performance impact and what each filter effect does.

The about:tracing tool provides the insight that helps you avoid hasty workarounds aimed at performance improvement, but which are essentially well-intentioned guesswork. You’ll save a lot of time and energy, get a clearer picture of what Chrome is doing with each frame, and use this information to optimize your game.

Responsive design is great for changing the styling of your UIs depending on screen size, but as your projects increase in complexity, you may want to serve custom versions of your client depending on what kind of device your visitors are using. This article covers classifying visitor's devices into device classes, and serving the appropriate version, while maximizing code reuse between versions.

Gradient Studios ported their award-winning Fieldrunners game to HTML5. This article chronicles their journey in utilizing the Web Audio API to implement sound for Fieldrunners.

How 3D transforms work and how you can use them in WebGL.

Responsive web design gives web creators some tools for making layouts that respond to any screen size. This article uses fluid grids, flexible images and media queries to get the layout looking great regardless of the size of the device's screen dimensions.

Have you ever found yourself wishing you could keep your client-side code readable and more importantly debuggable even after you've combined and minified it, without impacting performance? Well now you can through the magic of source maps.

Varied intensity background music, overlapping sound effects and randomization, sound source and listener spatialization (and directional sound cones), room effects via convolution, detect and prevent clipping, and implement dynamics compression. Including interactive inline demos!

Using the JSARToolKit library with WebRTC to build augmented reality applications in JavaScript.

How Technitone.com was built with the Web Audio API, WebGL, WebSockets, and a decent amount of magic.

How to capture audio and video using the navigator.getUserMedia() API.

Bouncy Mouse is a slingshot platformer by Munkadoo Games. This article talks about porting the game to HTML5 and WebAudio.

How to use the positional audio features in Web Audio API with Three.js.

Fundamentals of using WebGL as a 2D drawing API and using shaders for image processing.

The track element provides a simple, standardized way to add subtitles and captions to video and audio, but can also be used with other kinds of timed data, to improve searchability and enable deep linking.

Building the gallery widget for the Google Photography Prize site using Closure.

A guide to using shaders to animate large amounts of particles.

A walk through of the HTML5 tech behind the Stanisław Lem Google doodle.

A look at what it would take to port a WebSQL based application to IndexedDB.

An introduction to Cross Origin Resource Sharing (CORS), which gives scripts the ability to make cross-origin XHRs.

The HTML5 FileSystem API offers an synchronous version to be used in the context of Web Workers. The tutorial introduces the Synchronous API, and gives practical examples of using it.

A gentle introduction to loading and playing, cross-fading, and filtering sound using the Web Audio API.

Learn the fundamentals of an HTML5 mobile framework. From network detection to sliding, flipping, and more.

Learn how to use Raphaël.js to create cross-platform SVG scenes.

Get accurate and detailed timing statistics-natively-for page navigation and load events.

Introduction on touch events for mobile devices.

Ten tips to make your canvas applications and games faster. Every technique is backed up by a performance test.

Use the HTML5 canvas element to create, edit, open, export images and tips on how these techniques can be applied to an existing web application.

In this comprehensive primer, you will learn what happens in the browser between when you type google.com in the address bar until you see the Google page on the browser screen.

Resizing your game to fit a variety of form factors and window sizes.

Centralize and manage the asset downloads for your HTML5 game.

Tune your app to the environment it's running in using Feature Detection, Browser Detection, and Form Factor detection.

There are still compelling reasons to go native, and clearly, many developers are indeed going that route. This article is a debate on native versus web. We'll examine each point in favor of native, then we'll let the web come in and give its best defense.

Take advantage of improved forms support in HTML5 to build better forms, more easily.

Want to learn about WebGL shaders but don't know where to start? I'm here to help!

Three.js is a powerful engine for doing native 3D work in your browser. But how do you get going?

This article covers practical techniques and examples for handling connectivity flakiness.

HTML5 adds a multitude of new awesome tools to the web developer toolbox. Google Chrome Frame helps bringing these features to older browsers. This article will tell you how to use Chrome Frame on your site.

There has been a slew of improvements to our old friend XMLHttpRequest for working with different types of data. This tutorial covers the new hotness.

A quick guide to writing custom image filters with <canvas>.

Experiences from building a kiosk-style demo station with HTML and WebGL.

Learn how to use device orientation and device motion events to tell when your computer is moving.

Choosing the right technology to accomplish real-time, asynchronous updates.

Learn how we converted our Wordico crossword game from Flash to HTML5.

A guide on how to create a mobile version of an existing HTML5 website. This study looks at what was required to make html5rocks.com friendly to mobile users.

Effects in canvas inner/outer shadows, neon-glows, reflections, space-age, pattern/gradient overlays, stereoscopic imaging, and other text/vector-effects...

Optimization strategies and techniques for HTML5 applications.

Learn how Onslaught! Arena created their fast-paced, arcade-style medieval fantasy shoot 'em up.

Building an HTML5 game using <canvas>, the no tears way.

A discussion on how the iPad's popular MathBoard application was ported to HTML5.

Learn how to re-create the page flip effect found on 20thingsilearned.com using the Canvas API.

Solve the puzzle! Hover over the correct area to place tiles, click to rotate.

Break up a video into lots of boxes and move them around by titling your machine.

A WebGL sphere of news stories. Open stories by clicking. When you find the video, hit p to play.

Synchronized ASCII art video via WebSockets. All current viewers see the same video frame at the same time. Move your mouse over the video to change the color.

The FileSystem APIs give applications the ability to read/write files and directories in a secure, sandboxed file system on a user's local machine.

IndexedDB represents the future of query-able client-side storage. This tutorial presents a real world application implementing the basics of the IndexedDB API.

Entanglement is a puzzle game made by Gopherwood Studios. This article talks about Entanglement's usage of the <canvas> tag.

The EventSource API is designed for receiving push notifications from a server, removing the need for client-size XHR polling.

Learn how to use WebSockets to add low latency bidirectional client-server communication to your web app.

An introduction to flexbox, an alternative CSS layout scheme based on vboxes and hboxes.

An overview of client-side storage techniques: Web Storage (local/session storage), Web SQL Database, Indexed Database, Filesystem.

Drag-and-drop is yet another first class citizen in HTML5! This article explains how to enhance your web applications by adding native DnD functionality.

Learn how deviantART used HTML5 drawing features in deviantART muro.

Learn how Box.net implemented GMail's attachment drag and drop to the desktop.

Learn how to build exciting 3D user interfaces using the power of CSS.

Build a cube of ASCII reflecting a video in realtime and reposition the view.

A minimal version of the HTML5 Slide Deck, ready for you to adapt to your uses.

Schedule a countdown to a notification, like an alarm clock.

Drag files in from your machine, get an instant preview

Peruse local job listings and envision your commute.

Image gallery in a carousel UI. Page through the images quickly, and click to view full size.

Use Picture-in-picture to swap between two video sources while enjoying a color glow effect. Custom pause, mute and progress bar.

A newspaper-like layout provided by CSS3. Adjust the sliders to understand the styles.

Load in podcast feeds dynamically, then listen to episodes in a custom player UI. The player UI is a semi-opaque skin on top of the background color.

An animated page flip of real HTML content.

Video is one of the most interesting and widely supported features of HTML5. This tutorial covers the mechanics of incorporating native video into your site (without a plugin) and gives interesting examples of using the >video< tag.

Webfonts give new typographic freedom to designers while retaining scalability and accessibility.

A discussion of what it means to take an application "offline" and the options available to developers for doing so.

The Audit Panel is an excellent tool for examining latency in your web apps. It offers customized recommendations to enhance performance and reduce latency.

Web Workers are a means of spawning background scripts in your application, giving thread-like message passing for handling computationally intensive tasks.

How to effectively use features from HTML5 to improve the performance and responsiveness of your app.

A step-by-step guide to taking your web app offline using the application cache APIs.

An introduction to the tools available in Google Chrome that make a developer's life easier!

Expanding on the simple TODO list, this tutorial gives a practical guide for taking the sample offline using the application cache.

Starter guide for using the File/FileList/FileReader APIs to process and read binary files in JavaScript.

Learn how to implement geolocation very quickly including a distance calculator

Learn the notification basics creating a twitter notification

Create a TODO list which persists data using a client side database.

Learn how to use the HTML5 audio tag and fall back to Flash on platforms which do not support it.