HTML5 Rocks

HTML5 Rocks

HTML5 Rocks

Posts & Tutorials

Format:

Audience:

Technology:

Recent Articles

A non-responsive approach to building cross-device webapps

April 24, 2012 By Boris Smus Boris Smus Operaunsupported Internet Explorerunsupported Safariunsupported Firefoxunsupported Chromesupported mobile
nuts_and_bolts
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.

Case Study: A Tale of An HTML5 Game with Web Audio

April 24, 2012 By Z Goddard Z Goddard Operaunsupported Internet Explorerunsupported Safariunsupported Firefoxunsupported Chromesupported webaudio gaming
multimedia
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.

WebGL Transforms

April 18, 2012 By Gregg Tavares Gregg Tavares Operaunsupported Internet Explorerunsupported Safariunsupported Firefoxunsupported Chromesupported 3D webgl
graphics
How 3D transforms work and how you can use them in WebGL.

Creating a Mobile-First Responsive Web Design

April 16, 2012 By Brad Frost Brad Frost Operaunsupported Internet Explorerunsupported Safariunsupported Firefoxunsupported Chromesupported mobile
performance
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.

Introduction to JavaScript Source Maps

March 21, 2012 By Ryan Seddon Ryan Seddon Operaunsupported Internet Explorerunsupported Safariunsupported Firefoxunsupported Chromesupported devtools
performance
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.

Developing Game Audio with the Web Audio API

Feb. 28, 2012 By Boris Smus Boris Smus Operaunsupported Internet Explorerunsupported Safariunsupported Firefoxunsupported Chromesupported gaming webaudio
multimedia
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!

Case Study: Building Technitone.com

Feb. 27, 2012 By gskinnerdot com gskinnerdot com Operaunsupported Internet Explorerunsupported Safariunsupported Firefoxunsupported Chromesupported audio webgl webaudio
graphics multimedia
How Technitone.com was built with the Web Audio API, WebGL, WebSockets, and a decent amount of magic.

Capturing Audio & Video in HTML5

Feb. 22, 2012 By Eric Bidelman Eric Bidelman Operaunsupported Internet Explorerunsupported Safariunsupported Firefoxunsupported Chromesupported getusermedia
multimedia
How to capture audio and video using the navigator.getUserMedia() API.

Case Study: Bouncy Mouse

Feb. 18, 2012 By Eric Karl Eric Karl Operaunsupported Internet Explorerunsupported Safariunsupported Firefoxunsupported Chromesupported webaudio gaming
Bouncy Mouse is a slingshot platformer by Munkadoo Games. This article talks about porting the game to HTML5 and WebAudio.

Mixing Positional Audio and WebGL

Feb. 16, 2012 By Ilmari Heikkinen Ilmari Heikkinen Operaunsupported Internet Explorerunsupported Safariunsupported Firefoxunsupported Chromesupported webaudio webgl
multimedia
How to use the positional audio features in Web Audio API with Three.js.

WebGL Fundamentals

Feb. 9, 2012 By Gregg Tavares Gregg Tavares Operaunsupported Internet Explorerunsupported Safariunsupported Firefoxunsupported Chromesupported webgl
graphics
Fundamentals of using WebGL as a 2D drawing API and using shaders for image processing.

Getting Started With the Track Element

Feb. 8, 2012 By Sam Dutton Sam Dutton Operaunsupported Internet Explorerunsupported Safariunsupported Firefoxunsupported Chromesupported accessibility audio video
multimedia
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.
Feb. 7, 2012 By Ilmari Heikkinen Ilmari Heikkinen Operaunsupported Internet Explorerunsupported Safariunsupported Firefoxunsupported Chromesupported closure
Building the gallery widget for the Google Photography Prize site using Closure.

Migrating your WebSQL DB to IndexedDB

Dec. 5, 2011 By Ido Green Ido Green Operaunsupported Internet Explorerunsupported Safariunsupported Firefoxunsupported Chromesupported business indexeddb
offline
A look at what it would take to port a WebSQL based application to IndexedDB.

Using CORS

Oct. 26, 2011 By Monsur Hossain Monsur Hossain Operaunsupported Internet Explorerunsupported Safariunsupported Firefoxunsupported Chromesupported cors xhr2
nuts_and_bolts
An introduction to Cross Origin Resource Sharing (CORS), which gives scripts the ability to make cross-origin XHRs.

The Synchronous FileSystem API for Workers

Oct. 25, 2011 By Eric Bidelman Eric Bidelman Operaunsupported Internet Explorerunsupported Safariunsupported Firefoxunsupported Chromesupported filesystem workers
storage file_access
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.

Getting Started with Web Audio API

Oct. 14, 2011 By Boris Smus Boris Smus Operaunsupported Internet Explorerunsupported Safariunsupported Firefoxunsupported Chromesupported gaming webaudio
multimedia
A gentle introduction to loading and playing, cross-fading, and filtering sound using the Web Audio API.

Introduction to Raphaël.js

Sept. 8, 2011 By James Williams James Williams Operaunsupported Internet Explorerunsupported Safariunsupported Firefoxunsupported Chromesupported svg raphaeljs
graphics
Learn how to use Raphaël.js to create cross-platform SVG scenes.

Multi-touch Web Development

Aug. 21, 2011 By Boris Smus Boris Smus Operaunsupported Internet Explorerunsupported Safariunsupported Firefoxunsupported Chromesupported mobile
Introduction on touch events for mobile devices.

Improving HTML5 Canvas Performance

Aug. 16, 2011 By Boris Smus Boris Smus Operaunsupported Internet Explorerunsupported Safariunsupported Firefoxunsupported Chromesupported gaming canvas
graphics performance
Ten tips to make your canvas applications and games faster. Every technique is backed up by a performance test.

Integrating Canvas into your Web App

Aug. 5, 2011 By David Tong David Tong Operaunsupported Internet Explorerunsupported Safariunsupported Firefoxunsupported Chromesupported canvas
graphics
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.

HTML5 vs Native: The Mobile App Debate

June 3, 2011 By Michael Mahemoff Michael Mahemoff Operaunsupported Internet Explorerunsupported Safariunsupported Firefoxunsupported Chromesupported mobile
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.

Making Forms Fabulous with HTML5

June 2, 2011 By Jan Kleinert Jan Kleinert Operaunsupported Internet Explorerunsupported Safariunsupported Firefoxunsupported Chromesupported forms
semantics
Take advantage of improved forms support in HTML5 to build better forms, more easily.

An Introduction to Shaders

June 2, 2011 By Paul Lewis Paul Lewis Operaunsupported Internet Explorerunsupported Safariunsupported Firefoxunsupported Chromesupported webgl gaming shaders
graphics
Want to learn about WebGL shaders but don't know where to start? I'm here to help!

Getting Started with Three.js

June 2, 2011 By Paul Lewis Paul Lewis Operaunsupported Internet Explorerunsupported Safariunsupported Firefoxunsupported Chromesupported canvas webgl gaming
graphics
Three.js is a powerful engine for doing native 3D work in your browser. But how do you get going?

Working Off the Grid with HTML5 Offline

June 1, 2011 By Paul Kinlan Paul Kinlan Operaunsupported Internet Explorerunsupported Safariunsupported Firefoxunsupported Chromesupported business mobile
offline
This article covers practical techniques and examples for handling connectivity flakiness.

Rendering HTML5 in older browsers with Google Chrome Frame

May 30, 2011 By Malte Ubl Malte Ubl Operaunsupported Internet Explorerunsupported Safariunsupported Firefoxunsupported Chromesupported chromeframe
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.

New Tricks in XMLHttpRequest2

May 27, 2011 By Eric Bidelman Eric Bidelman Operaunsupported Internet Explorerunsupported Safariunsupported Firefoxunsupported Chromesupported binary xhr2
nuts_and_bolts
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.

Image Filters with Canvas

May 25, 2011 By Ilmari Heikkinen Ilmari Heikkinen Operaunsupported Internet Explorerunsupported Safariunsupported Firefoxunsupported Chromesupported canvas
graphics
A quick guide to writing custom image filters with <canvas>.

Chrome Experiments Demo Harness

May 25, 2011 By Ilmari Heikkinen Ilmari Heikkinen Operaunsupported Internet Explorerunsupported Safariunsupported Firefoxunsupported Chromesupported canvas wegl
graphics
Experiences from building a kiosk-style demo station with HTML and WebGL.

This End Up: Using Device Orientation

April 29, 2011 By Pete LePage Pete LePage Operaunsupported Internet Explorerunsupported Safariunsupported Firefoxunsupported Chromesupported device devicemotion deviceorientation mobile
Learn how to use device orientation and device motion events to tell when your computer is moving.

"Mobifying" Your HTML5 Site

March 3, 2011 By Eric Bidelman Eric Bidelman Operaunsupported Internet Explorerunsupported Safariunsupported Firefoxunsupported Chromesupported mobile
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.

Typographic effects in canvas

March 1, 2011 By Michael Deal Michael Deal Operaunsupported Internet Explorerunsupported Safariunsupported Firefoxunsupported Chromesupported webfonts canvas
graphics
Effects in canvas inner/outer shadows, neon-glows, reflections, space-age, pattern/gradient overlays, stereoscopic imaging, and other text/vector-effects...

Improving the Performance of your HTML5 App

Feb. 14, 2011 By Malte Ubl Malte Ubl Operaunsupported Internet Explorerunsupported Safariunsupported Firefoxunsupported Chromesupported canvas css
performance presentation
Optimization strategies and techniques for HTML5 applications.

No Tears Guide to HTML5 Games

Feb. 1, 2011 By Daniel X. Moore Daniel X. Moore Operaunsupported Internet Explorerunsupported Safariunsupported Firefoxunsupported Chromesupported canvas gaming
Building an HTML5 game using <canvas>, the no tears way.

SVG Puzzle

Jan. 18, 2011 By Eric Bidelman Eric Bidelman svg
graphics
Solve the puzzle! Hover over the correct area to place tiles, click to rotate.

Orientation Physics

Jan. 18, 2011 By Eric Bidelman Eric Bidelman deviceorientation video canvas
multimedia
Break up a video into lots of boxes and move them around by titling your machine.

WebGL Globe

Jan. 18, 2011 By Paul Irish Paul Irish webgl CSS 3D video
graphics
A WebGL sphere of news stories. Open stories by clicking. When you find the video, hit p to play.

ASCII Art

Jan. 18, 2011 By Malte Ubl Malte Ubl websockets
performance
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.

Exploring the FileSystem APIs

Jan. 4, 2011 By Eric Bidelman Eric Bidelman Operaunsupported Internet Explorerunsupported Safariunsupported Firefoxunsupported Chromesupported filewriter filesystem
file_access storage
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.

A Simple TODO list using HTML5 IndexedDB

Dec. 20, 2010 By Paul Kinlan Paul Kinlan Operaunsupported Internet Explorerunsupported Safariunsupported Firefoxunsupported Chromesupported business indexeddb
storage
IndexedDB represents the future of query-able client-side storage. This tutorial presents a real world application implementing the basics of the IndexedDB API.

Case Study: Getting Entangled with HTML5 Canvas

Dec. 14, 2010 By Derek Detweiler Derek Detweiler Operaunsupported Internet Explorerunsupported Safariunsupported Firefoxunsupported Chromesupported canvas gaming
Entanglement is a puzzle game made by Gopherwood Studios. This article talks about Entanglement's usage of the <canvas> tag.

Stream Updates with Server-Sent Events

Nov. 30, 2010 By Eric Bidelman Eric Bidelman Operaunsupported Internet Explorerunsupported Safariunsupported Firefoxunsupported Chromesupported eventsource
performance
The EventSource API is designed for receiving push notifications from a server, removing the need for client-size XHR polling.

Quick hits with the Flexible Box Model

Oct. 5, 2010 By Paul Irish Paul Irish Operaunsupported Internet Explorerunsupported Safariunsupported Firefoxunsupported Chromesupported css
presentation
An introduction to flexbox, an alternative CSS layout scheme based on vboxes and hboxes.

Client-Side Storage

Oct. 1, 2010 By Michael Mahemoff Michael Mahemoff Operaunsupported Internet Explorerunsupported Safariunsupported Firefoxunsupported Chromesupported business webdatabase filesystem indexeddb
offline storage
An overview of client-side storage techniques: Web Storage (local/session storage), Web SQL Database, Indexed Database, Filesystem.

Native HTML5 Drag and Drop

Sept. 30, 2010 By Eric Bidelman Eric Bidelman Operaunsupported Internet Explorerunsupported Safariunsupported Firefoxunsupported Chromesupported dnd filereader
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.

Case Study: HTML5 in deviantART muro

Sept. 28, 2010 By Mike Dewey Mike Dewey Operaunsupported Internet Explorerunsupported Safariunsupported Firefoxunsupported Chromesupported canvas svg
Learn how deviantART used HTML5 drawing features in deviantART muro.

3D and CSS

Sept. 7, 2010 By Paul Kinlan Paul Kinlan Operaunsupported Internet Explorerunsupported Safariunsupported Firefoxunsupported Chromesupported 3D CSS
graphics presentation
Learn how to build exciting 3D user interfaces using the power of CSS.

Video Cube

Aug. 13, 2010 By Paul Irish Paul Irish video canvas CSS
presentation
Build a cube of ASCII reflecting a video in realtime and reposition the view.

Slideshow

Aug. 13, 2010 By Ernest Delgado Ernest Delgado CSS
presentation
A minimal version of the HTML5 Slide Deck, ready for you to adapt to your uses.
Aug. 13, 2010 By Eiji Kitamura Eiji Kitamura CSS
presentation
Image gallery in a carousel UI. Page through the images quickly, and click to view full size.

Video PiP

Aug. 13, 2010 By Paul Irish Paul Irish video canvas
multimedia
Use Picture-in-picture to swap between two video sources while enjoying a color glow effect. Custom pause, mute and progress bar.

Podcast Player

Aug. 13, 2010 By Eric Bidelman Eric Bidelman audio CSS
multimedia
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.

HTML5 Video

Aug. 3, 2010 By Ernest Delgado Ernest Delgado Operaunsupported Internet Explorerunsupported Safariunsupported Firefoxunsupported Chromesupported video
multimedia
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.

Quick guide to webfonts via @font-face

Aug. 2, 2010 By Paul Irish Paul Irish Operaunsupported Internet Explorerunsupported Safariunsupported Firefoxunsupported Chromesupported CSS webfonts
presentation
Webfonts give new typographic freedom to designers while retaining scalability and accessibility.

Auditing Your Web App For Speed

July 28, 2010 By Seth Ladd Seth Ladd Operaunsupported Internet Explorerunsupported Safariunsupported Firefoxunsupported Chromesupported devtools
performance
The Audit Panel is an excellent tool for examining latency in your web apps. It offers customized recommendations to enhance performance and reduce latency.

The Basics of Web Workers

July 26, 2010 By Eric Bidelman Eric Bidelman Operaunsupported Internet Explorerunsupported Safariunsupported Firefoxunsupported Chromesupported workers
performance
Web Workers are a means of spawning background scripts in your application, giving thread-like message passing for handling computationally intensive tasks.

Best Practices for a Faster Web App with HTML5

June 18, 2010 By Paul Irish Paul Irish Operaunsupported Internet Explorerunsupported Safariunsupported Firefoxunsupported Chromesupported business appcache webdatabase
performance offline
How to effectively use features from HTML5 to improve the performance and responsiveness of your app.

Reading files in JavaScript using the File APIs

June 18, 2010 By Eric Bidelman Eric Bidelman Operaunsupported Internet Explorerunsupported Safariunsupported Firefoxunsupported Chromesupported filereader dnd
file_access
Starter guide for using the File/FileList/FileReader APIs to process and read binary files in JavaScript.

Using the Notifications API

Feb. 24, 2010 By Ernest Delgado Ernest Delgado Operaunsupported Internet Explorerunsupported Safariunsupported Firefoxunsupported Chromesupported notifications
Learn the notification basics creating a twitter notification