HTML5 Hacks

1. Simplify Your Doc with the Right

2. Adopt Common Structures

3. Make Your New HTML5 Tags Render Properly in Older Browsers

4. Bring Back the Tag

5. Easily Implement Form Validation Without JavaScript

6. Improve the Usability of Your Forms with New Controls

7. Know What’s Going On in Your App with New DOM Events

8. Add Rich Context to Your Markup with Custom Data

9. Track User Events with Custom Data

10. Make Your Page Consumable by Robots and Humans Alike with Microdata

Chapter 2 Hacking with Style

1. Use Experimental CSS Features with Browser Prefixes

2. Design with Custom Fonts Using Web Fonts

3. Use Google Web Fonts for Simple @font-face Implementation

4. Use CSS3 Text Effects to Make Your Text Not Suck

5. Make Elements Appear Transparent Without Altering the Opacity

6. Use Media Queries to Build Responsive Design

7. Make Your Web App Respond to Device Orientation Changes

8. Take Full Control of Your DOM with Pseudoclasses

9. Hack Up Your Sprite and Put Your Images Inline with Image Data URIs

10. Build Gradients the Easy Way

11. Make Borders Interesting Again, with Border Treatments

12. Set Multiple Background Images to the Same Element

13. Free Your Page Elements from Their Traditional Space with CSS3 Transforms 2D transforms

14. Turn Transforms into Animations with CSS3 Transitions

15. Make iOS-Style Card Flips with CSS Transforms and Transitions

16. Use Respond.js to Polyfill CSS3 Media Queries in IE

17. Control Mobile Layout with the viewport Tag

Chapter 3 Multimedia Hacking

1. Embed Video Directly in Your Application with HTML5 Video multimedia video embedding video embedding

2. Choose the Right Codecs for Your Video Files

3. Create Custom Video Controls with Video APIs

4. Replace the Background of Your HTML5 Video with the Tag

5. Add Subtitles to Your HTML5 Video Element

6. Beautify Your HTML5 Video Cues

7. Use the Cuepoint.js Polyfill for Subtitles

8. Easily Build Audio-Rich Applications with Buzz

9. Simplify Your HTML5 Media with MediaElement.js

Chapter 4 Hacking Your Graphics with Canvas and SVG

1. Draw Shapes on Your HTML5 Tag

2. Apply Styles to Your Canvas Elements

3. Style Canvas Elements with Image Files

4. Use the HTML5 Tag to Create High-Res, Retina-Display-Ready Media

5. Accelerate Animation with Canvas Drawings

6. Build “Native” Illustrations with Scalable Vector Graphics

7. Style SVG Elements with CSS

8. Animate Illustrations with SVG

9. Embed SVG Directly in Your HTML

Chapter 5 User Interactions

1. Make Any Content Draggable Within Your Application

2. Update the DOM with a Drag-and-Drop Data Transfer Object

3. Drag Files In and Out of Your Web Application

4. Make Any Element on Your Page User-Customizable with Editable Content

5. Turn Your Web Page into a WYSIWYG Editor

6. Take Control of the Browser History Buttons with HTML5 Session History

Chapter 6 Client-Side Data Storage Hacks

1. Embed Binary Data in an Inline URL

2. Convert a Data URI to a Blob and Append It to Form Data with XHR2

3. Use the WebStorage API to Persist User Data

4. Polyfill LocalStorage with YepNope.js and Storage.js

5. Cache Media Resources Locally with the FileSystem API

6. Build a Milestone Calendar with IndexedDB and FullCalendar.js

Chapter 7 Geolocation Hacks

1. Use the Geolocation APIs to Display Longitude and Latitude in a Mobile Web Application

2. Use Google’s Geocoding API to Reverse-Geocode a User’s Location

3. Update a User’s Current Location in a Google Map

4. Use the Geoloqi Service to Build a Geofence

5. Use the Geoloqi Real-Time Streaming Service to Broadcast a Remote User’s Movement

6. Polyfill Geolocation APIs with Webshims

Chapter 8 WebWorker API

1. How Browsers Handle JavaScript

2. Use the BlobBuilder Interface to Create an Inline Worker

3. Perform Heavy Array Computations in a Dedicated Web Worker

4. Use a Timer to Send Application State to Workers

5. Process Image Data with Pixel Manipulation in a Dedicated Worker

6. Use Import Scripts to Make Twitter JSONP Requests

7. Connect to Shared Workers Simultaneously from Multiple Browser Windows

Chapter 9 Hacking HTML5 Connectivity

1. Use Kaazing’s Remote WebSocket Server to Echo Simple Messages from a Browser

2. Build a Blazing-Fast WebSocket Server with Node.js and the ws Module

3. Build a Donation Thermometer with Web Sockets, the Pusher API, and PHP

4. Build Plug-Ins for jWebSocket

5. Push Notifications to the Browser with Server-Sent Events

6. Configure Amazon S3 for Cross-Origin Resource Sharing to Host a Web Font

7. Control an HTML5 Slide Deck with Robodeck

8. Inspect a Socket.IO Connection to Determine If It Is Native or Emulated

9. Build a Simple SPDY Server with node-spdy

Chapter 10 Pro HTML5 Application Hacks with Node.js

1. HTML5 Application Design Considerations

2. Deliver “Hello Html5” to the Browser

3. Detect the User Agent String Within the Request Object

4. Use Node.js’s Response Object to Respond to the Client with Device-Specific Data

5. Use the Node Package Manager to Add a Web Application Framework As a Third-Party Module

6. Use the Express Application Generator to Bootstrap Your App

7. Build a Custom Module to Handle Routing

8. Configure Express to Use a View Engine

9. Use Jade Layouts to DRY Up Your Application’s Views

10. Use a Jade Partial to Create a Common Navigation Bar in Your Views

11. Use Jade Mixins to Populate Your Views with Data

12. Set Up Expressive, Dynamic, Robust CSS with Stylus

13. Include HTML5 Boilerplate As Your Default Starter Template

14. Become an HTML5 Hacker

Colophon