You are previewing HTML5 Hacks.
O'Reilly logo
HTML5 Hacks

Book Description

With 90 detailed hacks, expert web developers Jesse Cravens and Jeff Burtoft demonstrate intriguing uses of HTML5-related technologies. Each recipe provides a clear explanation, screenshots, and complete code examples for specifications that include Canvas, SVG, CSS3, multimedia, data storage, web workers, WebSockets, and geolocation.

Table of Contents

  1. Preface
    1. Why HTML5?
      1. HTML5 Implementations
        1. Browser-specific prefixes
        2. Validation with HTML5 Conformance Checker
        3. HTML5 Lint
        4. References for HTML5 implementation statuses and feature support
    2. Why HTML5 Hacks?
    3. Who This Book Is For
    4. Contents of This Book
    5. Conventions Used in This Book
    6. Using Code Examples
    7. We’d Like to Hear from You
    8. Safari® Books Online
    9. Acknowledgments
      1. Guest Hackers
  2. 1. Hacking the Semantic Way
    1. <span xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops" xmlns:m="http://www.w3.org/1998/Math/MathML" xmlns:pls="http://www.w3.org/2005/01/pronunciation-lexicon" xmlns:ssml="http://www.w3.org/2001/10/synthesis" xmlns:svg="http://www.w3.org/2000/svg" class="hack-label">Hack 1</span>. Simplify Your Doc with the Right &lt;doctype&gt;. Simplify Your Doc with the Right <doctype>
    2. <span xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops" xmlns:m="http://www.w3.org/1998/Math/MathML" xmlns:pls="http://www.w3.org/2005/01/pronunciation-lexicon" xmlns:ssml="http://www.w3.org/2001/10/synthesis" xmlns:svg="http://www.w3.org/2000/svg" class="hack-label">Hack 2</span>. Adopt Common Structures. Adopt Common Structures
      1. All That and More
    3. <span xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops" xmlns:m="http://www.w3.org/1998/Math/MathML" xmlns:pls="http://www.w3.org/2005/01/pronunciation-lexicon" xmlns:ssml="http://www.w3.org/2001/10/synthesis" xmlns:svg="http://www.w3.org/2000/svg" class="hack-label">Hack 3</span>. Make Your New HTML5 Tags Render Properly in Older Browsers. Make Your New HTML5 Tags Render Properly in Older Browsers
      1. The Fallback div
      2. The Real DOM Hack: The HTML5 Shim (or Shiv)
    4. <span xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops" xmlns:m="http://www.w3.org/1998/Math/MathML" xmlns:pls="http://www.w3.org/2005/01/pronunciation-lexicon" xmlns:ssml="http://www.w3.org/2001/10/synthesis" xmlns:svg="http://www.w3.org/2000/svg" class="hack-label">Hack 4</span>. Bring Back the &lt;input&gt; Tag. Bring Back the <input> Tag
      1. Some of the Basics
      2. The autocomplete Attribute
      3. The list Attribute
      4. The pattern Attribute
    5. <span xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops" xmlns:m="http://www.w3.org/1998/Math/MathML" xmlns:pls="http://www.w3.org/2005/01/pronunciation-lexicon" xmlns:ssml="http://www.w3.org/2001/10/synthesis" xmlns:svg="http://www.w3.org/2000/svg" class="hack-label">Hack 5</span>. Easily Implement Form Validation Without JavaScript. Easily Implement Form Validation Without JavaScript
      1. What Does It Mean to Validate?
      2. Validation Criteria
        1. The required attribute
        2. The pattern attribute
        3. Measurable attributes
      3. Let’s Call This Validation Thing Off
      4. The Constraint Validation API
    6. <span xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops" xmlns:m="http://www.w3.org/1998/Math/MathML" xmlns:pls="http://www.w3.org/2005/01/pronunciation-lexicon" xmlns:ssml="http://www.w3.org/2001/10/synthesis" xmlns:svg="http://www.w3.org/2000/svg" class="hack-label">Hack 6</span>. Improve the Usability of Your Forms with New Controls. Improve the Usability of Your Forms with New Controls
      1. The date Input Type
      2. The range Input Type
      3. The color Input Type
      4. The <meter> and <progress> Tags
      5. Form Elements and Making Them Look Good
      6. In Conclusion
    7. <span xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops" xmlns:m="http://www.w3.org/1998/Math/MathML" xmlns:pls="http://www.w3.org/2005/01/pronunciation-lexicon" xmlns:ssml="http://www.w3.org/2001/10/synthesis" xmlns:svg="http://www.w3.org/2000/svg" class="hack-label">Hack 7</span>. Know What&#8217;s Going On in Your App with New DOM Events. Know What’s Going On in Your App with New DOM Events
      1. The oninput, onchange, and oninvalid Events
      2. Real-Time Form Validation with the oninput/oninvalid Events
      3. Other New Events
    8. <span xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops" xmlns:m="http://www.w3.org/1998/Math/MathML" xmlns:pls="http://www.w3.org/2005/01/pronunciation-lexicon" xmlns:ssml="http://www.w3.org/2001/10/synthesis" xmlns:svg="http://www.w3.org/2000/svg" class="hack-label">Hack 8</span>. Add Rich Context to Your Markup with Custom Data. Add Rich Context to Your Markup with Custom Data
      1. Accessing the Data
    9. <span xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops" xmlns:m="http://www.w3.org/1998/Math/MathML" xmlns:pls="http://www.w3.org/2005/01/pronunciation-lexicon" xmlns:ssml="http://www.w3.org/2001/10/synthesis" xmlns:svg="http://www.w3.org/2000/svg" class="hack-label">Hack 9</span>. Track User Events with Custom Data. Track User Events with Custom Data
      1. Can It Get Any Easier?
    10. <span xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops" xmlns:m="http://www.w3.org/1998/Math/MathML" xmlns:pls="http://www.w3.org/2005/01/pronunciation-lexicon" xmlns:ssml="http://www.w3.org/2001/10/synthesis" xmlns:svg="http://www.w3.org/2000/svg" class="hack-label">Hack 10</span>. Make Your Page Consumable by Robots and Humans Alike with Microdata. Make Your Page Consumable by Robots and Humans Alike with Microdata
      1. Details, Details!
  3. 2. Hacking with Style
    1. <span xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops" xmlns:m="http://www.w3.org/1998/Math/MathML" xmlns:pls="http://www.w3.org/2005/01/pronunciation-lexicon" xmlns:ssml="http://www.w3.org/2001/10/synthesis" xmlns:svg="http://www.w3.org/2000/svg" class="hack-label">Hack 11</span>. Use Experimental CSS Features with Browser Prefixes. Use Experimental CSS Features with Browser Prefixes
      1. The Browser Prefix Controversy
    2. <span xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops" xmlns:m="http://www.w3.org/1998/Math/MathML" xmlns:pls="http://www.w3.org/2005/01/pronunciation-lexicon" xmlns:ssml="http://www.w3.org/2001/10/synthesis" xmlns:svg="http://www.w3.org/2000/svg" class="hack-label">Hack 12</span>. Design with Custom Fonts Using Web Fonts. Design with Custom Fonts Using Web Fonts
      1. Working with Different Versions of Fonts
      2. A Few Things to Note: Support and Performance
    3. <span xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops" xmlns:m="http://www.w3.org/1998/Math/MathML" xmlns:pls="http://www.w3.org/2005/01/pronunciation-lexicon" xmlns:ssml="http://www.w3.org/2001/10/synthesis" xmlns:svg="http://www.w3.org/2000/svg" class="hack-label">Hack 13</span>. Use Google Web Fonts for Simple @font-face Implementation. Use Google Web Fonts for Simple @font-face Implementation
      1. Easy Implementation of Google Web Fonts
      2. Nontraditional Font Access
      3. Optimizing Your Font Usage
      4. Common Mistakes
    4. <span xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops" xmlns:m="http://www.w3.org/1998/Math/MathML" xmlns:pls="http://www.w3.org/2005/01/pronunciation-lexicon" xmlns:ssml="http://www.w3.org/2001/10/synthesis" xmlns:svg="http://www.w3.org/2000/svg" class="hack-label">Hack 14</span>. Use CSS3 Text Effects to Make Your Text Not Suck. Use CSS3 Text Effects to Make Your Text Not Suck
      1. The Text Shadow Property
      2. Other Text Controls
    5. <span xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops" xmlns:m="http://www.w3.org/1998/Math/MathML" xmlns:pls="http://www.w3.org/2005/01/pronunciation-lexicon" xmlns:ssml="http://www.w3.org/2001/10/synthesis" xmlns:svg="http://www.w3.org/2000/svg" class="hack-label">Hack 15</span>. Make Elements Appear Transparent Without Altering the Opacity. Make Elements Appear Transparent Without Altering the Opacity
      1. Introducing Alpha Transparency
      2. A Word About Color Formats
    6. <span xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops" xmlns:m="http://www.w3.org/1998/Math/MathML" xmlns:pls="http://www.w3.org/2005/01/pronunciation-lexicon" xmlns:ssml="http://www.w3.org/2001/10/synthesis" xmlns:svg="http://www.w3.org/2000/svg" class="hack-label">Hack 16</span>. Use Media Queries to Build Responsive Design. Use Media Queries to Build Responsive Design
      1. In Come the Media Queries
    7. <span xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops" xmlns:m="http://www.w3.org/1998/Math/MathML" xmlns:pls="http://www.w3.org/2005/01/pronunciation-lexicon" xmlns:ssml="http://www.w3.org/2001/10/synthesis" xmlns:svg="http://www.w3.org/2000/svg" class="hack-label">Hack 17</span>. Make Your Web App Respond to Device Orientation Changes. Make Your Web App Respond to Device Orientation Changes
      1. Why Not Width?
    8. <span xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops" xmlns:m="http://www.w3.org/1998/Math/MathML" xmlns:pls="http://www.w3.org/2005/01/pronunciation-lexicon" xmlns:ssml="http://www.w3.org/2001/10/synthesis" xmlns:svg="http://www.w3.org/2000/svg" class="hack-label">Hack 18</span>. Take Full Control of Your DOM with Pseudoclasses. Take Full Control of Your DOM with Pseudoclasses
      1. The CSS Zebra Stripe Data Table
    9. <span xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops" xmlns:m="http://www.w3.org/1998/Math/MathML" xmlns:pls="http://www.w3.org/2005/01/pronunciation-lexicon" xmlns:ssml="http://www.w3.org/2001/10/synthesis" xmlns:svg="http://www.w3.org/2000/svg" class="hack-label">Hack 19</span>. Hack Up Your Sprite and Put Your Images Inline with Image Data URIs. Hack Up Your Sprite and Put Your Images Inline with Image Data URIs
      1. Why Do a Sprite?
      2. The Problem with Image Sprites
      3. Hacking Up the Sprite
      4. The Downsides of Data URIs
    10. <span xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops" xmlns:m="http://www.w3.org/1998/Math/MathML" xmlns:pls="http://www.w3.org/2005/01/pronunciation-lexicon" xmlns:ssml="http://www.w3.org/2001/10/synthesis" xmlns:svg="http://www.w3.org/2000/svg" class="hack-label">Hack 20</span>. Build Gradients the Easy Way. Build Gradients the Easy Way
      1. Pure CSS Gradients
      2. The ColorZilla Ultimate Gradient Generator
        1. Designing and customizing gradients
        2. Modernizing your old gradients
    11. <span xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops" xmlns:m="http://www.w3.org/1998/Math/MathML" xmlns:pls="http://www.w3.org/2005/01/pronunciation-lexicon" xmlns:ssml="http://www.w3.org/2001/10/synthesis" xmlns:svg="http://www.w3.org/2000/svg" class="hack-label">Hack 21</span>. Make Borders Interesting Again, with Border Treatments. Make Borders Interesting Again, with Border Treatments
      1. The Border Radius
      2. The Box Shadow
      3. The Border Image
    12. <span xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops" xmlns:m="http://www.w3.org/1998/Math/MathML" xmlns:pls="http://www.w3.org/2005/01/pronunciation-lexicon" xmlns:ssml="http://www.w3.org/2001/10/synthesis" xmlns:svg="http://www.w3.org/2000/svg" class="hack-label">Hack 22</span>. Set Multiple Background Images to the Same Element. Set Multiple Background Images to the Same Element
      1. How It Works
    13. <span xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops" xmlns:m="http://www.w3.org/1998/Math/MathML" xmlns:pls="http://www.w3.org/2005/01/pronunciation-lexicon" xmlns:ssml="http://www.w3.org/2001/10/synthesis" xmlns:svg="http://www.w3.org/2000/svg" class="hack-label">Hack 23</span>. Free Your Page Elements from Their Traditional Space with CSS3 Transforms. Free Your Page Elements from Their Traditional Space with CSS3 Transforms
      1. CSS3 Transforms in 3D
      2. Even More Advanced Effects
    14. <span xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops" xmlns:m="http://www.w3.org/1998/Math/MathML" xmlns:pls="http://www.w3.org/2005/01/pronunciation-lexicon" xmlns:ssml="http://www.w3.org/2001/10/synthesis" xmlns:svg="http://www.w3.org/2000/svg" class="hack-label">Hack 24</span>. Turn Transforms into Animations with CSS3 Transitions. Turn Transforms into Animations with CSS3 Transitions
      1. Transition to What?
      2. Make 3D Transitions with Transforms
      3. Transition Events
    15. <span xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops" xmlns:m="http://www.w3.org/1998/Math/MathML" xmlns:pls="http://www.w3.org/2005/01/pronunciation-lexicon" xmlns:ssml="http://www.w3.org/2001/10/synthesis" xmlns:svg="http://www.w3.org/2000/svg" class="hack-label">Hack 25</span>. Make iOS-Style Card Flips with CSS Transforms and Transitions. Make iOS-Style Card Flips with CSS Transforms and Transitions
      1. Styling the Elements
      2. Putting It All Together
    16. <span xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops" xmlns:m="http://www.w3.org/1998/Math/MathML" xmlns:pls="http://www.w3.org/2005/01/pronunciation-lexicon" xmlns:ssml="http://www.w3.org/2001/10/synthesis" xmlns:svg="http://www.w3.org/2000/svg" class="hack-label">Hack 26</span>. Use Respond.js to Polyfill CSS3 Media Queries in IE. Use Respond.js to Polyfill CSS3 Media Queries in IE
      1. Just Add JavaScript
      2. Caveats and Quid Pro Quo
    17. <span xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops" xmlns:m="http://www.w3.org/1998/Math/MathML" xmlns:pls="http://www.w3.org/2005/01/pronunciation-lexicon" xmlns:ssml="http://www.w3.org/2001/10/synthesis" xmlns:svg="http://www.w3.org/2000/svg" class="hack-label">Hack 27</span>. Control Mobile Layout with the viewport &lt;meta&gt; Tag. Control Mobile Layout with the viewport <meta> Tag
      1. Will the Real HTML5 Spec Please Stand Up?
  4. 3. Multimedia Hacking
    1. <span xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops" xmlns:m="http://www.w3.org/1998/Math/MathML" xmlns:pls="http://www.w3.org/2005/01/pronunciation-lexicon" xmlns:ssml="http://www.w3.org/2001/10/synthesis" xmlns:svg="http://www.w3.org/2000/svg" class="hack-label">Hack 28</span>. Embed Video Directly in Your Application with HTML5 Video. Embed Video Directly in Your Application with HTML5 Video
      1. Writing the Code
      2. Video As a First-Class Element
    2. <span xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops" xmlns:m="http://www.w3.org/1998/Math/MathML" xmlns:pls="http://www.w3.org/2005/01/pronunciation-lexicon" xmlns:ssml="http://www.w3.org/2001/10/synthesis" xmlns:svg="http://www.w3.org/2000/svg" class="hack-label">Hack 29</span>. Choose the Right Codecs for Your Video Files. Choose the Right Codecs for Your Video Files
      1. Which Codecs to Support
    3. <span xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops" xmlns:m="http://www.w3.org/1998/Math/MathML" xmlns:pls="http://www.w3.org/2005/01/pronunciation-lexicon" xmlns:ssml="http://www.w3.org/2001/10/synthesis" xmlns:svg="http://www.w3.org/2000/svg" class="hack-label">Hack 30</span>. Create Custom Video Controls with Video APIs. Create Custom Video Controls with Video APIs
      1. A Word About Audio
    4. <span xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops" xmlns:m="http://www.w3.org/1998/Math/MathML" xmlns:pls="http://www.w3.org/2005/01/pronunciation-lexicon" xmlns:ssml="http://www.w3.org/2001/10/synthesis" xmlns:svg="http://www.w3.org/2000/svg" class="hack-label">Hack 31</span>. Replace the Background of Your HTML5 Video with the &lt;canvas&gt; Tag. Replace the Background of Your HTML5 Video with the <canvas> Tag
      1. Source Video
      2. Hidden Canvas
      3. Display Canvas
      4. The Nuts and Bolts
      5. The Results
    5. <span xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops" xmlns:m="http://www.w3.org/1998/Math/MathML" xmlns:pls="http://www.w3.org/2005/01/pronunciation-lexicon" xmlns:ssml="http://www.w3.org/2001/10/synthesis" xmlns:svg="http://www.w3.org/2000/svg" class="hack-label">Hack 32</span>. Add Subtitles to Your HTML5 Video Element. Add Subtitles to Your HTML5 Video Element
      1. Easy Implementation
      2. The VTT File
      3. Karaoke Anyone?
      4. Summary
    6. <span xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops" xmlns:m="http://www.w3.org/1998/Math/MathML" xmlns:pls="http://www.w3.org/2005/01/pronunciation-lexicon" xmlns:ssml="http://www.w3.org/2001/10/synthesis" xmlns:svg="http://www.w3.org/2000/svg" class="hack-label">Hack 33</span>. Beautify Your HTML5 Video Cues. Beautify Your HTML5 Video Cues
      1. Basic Formatting from WebVTT
      2. CSS Styling
      3. Pseudoclasses Within a Track Cue
    7. <span xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops" xmlns:m="http://www.w3.org/1998/Math/MathML" xmlns:pls="http://www.w3.org/2005/01/pronunciation-lexicon" xmlns:ssml="http://www.w3.org/2001/10/synthesis" xmlns:svg="http://www.w3.org/2000/svg" class="hack-label">Hack 34</span>. Use the Cuepoint.js Polyfill for Subtitles. Use the Cuepoint.js Polyfill for Subtitles
      1. Using Cuepoint.js
    8. <span xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops" xmlns:m="http://www.w3.org/1998/Math/MathML" xmlns:pls="http://www.w3.org/2005/01/pronunciation-lexicon" xmlns:ssml="http://www.w3.org/2001/10/synthesis" xmlns:svg="http://www.w3.org/2000/svg" class="hack-label">Hack 35</span>. Easily Build Audio-Rich Applications with Buzz. Easily Build Audio-Rich Applications with Buzz
      1. The Buzz Library
      2. Using the Audio APIs
      3. Using the Buzz APIs
        1. Buzz
        2. Sound
        3. Group
        4. Events
      4. Implementing Buzz
    9. <span xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops" xmlns:m="http://www.w3.org/1998/Math/MathML" xmlns:pls="http://www.w3.org/2005/01/pronunciation-lexicon" xmlns:ssml="http://www.w3.org/2001/10/synthesis" xmlns:svg="http://www.w3.org/2000/svg" class="hack-label">Hack 36</span>. Simplify Your HTML5 Media with MediaElement.js. Simplify Your HTML5 Media with MediaElement.js
      1. Responsive Video
      2. Event Listeners
      3. Captions and Subtitles
      4. Wrapping It Up
  5. 4. Hacking Your Graphics with Canvas and SVG
    1. <span xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops" xmlns:m="http://www.w3.org/1998/Math/MathML" xmlns:pls="http://www.w3.org/2005/01/pronunciation-lexicon" xmlns:ssml="http://www.w3.org/2001/10/synthesis" xmlns:svg="http://www.w3.org/2000/svg" class="hack-label">Hack 37</span>. Draw Shapes on Your HTML5 &lt;canvas&gt; Tag. Draw Shapes on Your HTML5 <canvas> Tag
      1. Drawing Rectangles
      2. Drawing Paths
      3. Smile, the Canvas Loves You!
      4. Advanced Drawing
    2. <span xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops" xmlns:m="http://www.w3.org/1998/Math/MathML" xmlns:pls="http://www.w3.org/2005/01/pronunciation-lexicon" xmlns:ssml="http://www.w3.org/2001/10/synthesis" xmlns:svg="http://www.w3.org/2000/svg" class="hack-label">Hack 38</span>. Apply Styles to Your Canvas Elements. Apply Styles to Your Canvas Elements
      1. Color
      2. Gradients
      3. Additional Styles
    3. <span xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops" xmlns:m="http://www.w3.org/1998/Math/MathML" xmlns:pls="http://www.w3.org/2005/01/pronunciation-lexicon" xmlns:ssml="http://www.w3.org/2001/10/synthesis" xmlns:svg="http://www.w3.org/2000/svg" class="hack-label">Hack 39</span>. Style Canvas Elements with Image Files. Style Canvas Elements with Image Files
      1. The Basic Fill
      2. Using an Image as a Fill
      3. Easy Image Data
    4. <span xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops" xmlns:m="http://www.w3.org/1998/Math/MathML" xmlns:pls="http://www.w3.org/2005/01/pronunciation-lexicon" xmlns:ssml="http://www.w3.org/2001/10/synthesis" xmlns:svg="http://www.w3.org/2000/svg" class="hack-label">Hack 40</span>. Use the HTML5 &lt;canvas&gt; Tag to Create High-Res, Retina-Display-Ready Media. Use the HTML5 <canvas> Tag to Create High-Res, Retina-Display-Ready Media
      1. In Comes the <canvas> Tag
    5. <span xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops" xmlns:m="http://www.w3.org/1998/Math/MathML" xmlns:pls="http://www.w3.org/2005/01/pronunciation-lexicon" xmlns:ssml="http://www.w3.org/2001/10/synthesis" xmlns:svg="http://www.w3.org/2000/svg" class="hack-label">Hack 41</span>. Accelerate Animation with Canvas Drawings. Accelerate Animation with Canvas Drawings
      1. Write and Clean
      2. Smile, You’re Being Animated!
      3. Implementing requestAnimationFrame
      4. Putting It All Together
    6. <span xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops" xmlns:m="http://www.w3.org/1998/Math/MathML" xmlns:pls="http://www.w3.org/2005/01/pronunciation-lexicon" xmlns:ssml="http://www.w3.org/2001/10/synthesis" xmlns:svg="http://www.w3.org/2000/svg" class="hack-label">Hack 42</span>. Build &#8220;Native&#8221; Illustrations with Scalable Vector Graphics. Build “Native” Illustrations with Scalable Vector Graphics
      1. Why SVG?
      2. Creating Your SVG Image
      3. Drawing with XML
    7. <span xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops" xmlns:m="http://www.w3.org/1998/Math/MathML" xmlns:pls="http://www.w3.org/2005/01/pronunciation-lexicon" xmlns:ssml="http://www.w3.org/2001/10/synthesis" xmlns:svg="http://www.w3.org/2000/svg" class="hack-label">Hack 43</span>. Style SVG Elements with CSS. Style SVG Elements with CSS
      1. Starting with SVG
      2. Stripping Away the Noise
      3. Building the CSS
    8. <span xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops" xmlns:m="http://www.w3.org/1998/Math/MathML" xmlns:pls="http://www.w3.org/2005/01/pronunciation-lexicon" xmlns:ssml="http://www.w3.org/2001/10/synthesis" xmlns:svg="http://www.w3.org/2000/svg" class="hack-label">Hack 44</span>. Animate Illustrations with SVG. Animate Illustrations with SVG
      1. The SVG <animateMotion> Tag
      2. Flexibility in Structure
      3. One Last Option
    9. <span xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops" xmlns:m="http://www.w3.org/1998/Math/MathML" xmlns:pls="http://www.w3.org/2005/01/pronunciation-lexicon" xmlns:ssml="http://www.w3.org/2001/10/synthesis" xmlns:svg="http://www.w3.org/2000/svg" class="hack-label">Hack 45</span>. Embed SVG Directly in Your HTML. Embed SVG Directly in Your HTML
      1. Why Inline?
  6. 5. User Interactions
    1. <span xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops" xmlns:m="http://www.w3.org/1998/Math/MathML" xmlns:pls="http://www.w3.org/2005/01/pronunciation-lexicon" xmlns:ssml="http://www.w3.org/2001/10/synthesis" xmlns:svg="http://www.w3.org/2000/svg" class="hack-label">Hack 46</span>. Make Any Content Draggable Within Your Application. Make Any Content Draggable Within Your Application
      1. Turning On the Drag
      2. Listening for All Those Great Events
    2. <span xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops" xmlns:m="http://www.w3.org/1998/Math/MathML" xmlns:pls="http://www.w3.org/2005/01/pronunciation-lexicon" xmlns:ssml="http://www.w3.org/2001/10/synthesis" xmlns:svg="http://www.w3.org/2000/svg" class="hack-label">Hack 47</span>. Update the DOM with a Drag-and-Drop Data Transfer Object. Update the DOM with a Drag-and-Drop Data Transfer Object
      1. Incoming: Data Transfer Object
      2. The Drop Zone Attribute
    3. <span xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops" xmlns:m="http://www.w3.org/1998/Math/MathML" xmlns:pls="http://www.w3.org/2005/01/pronunciation-lexicon" xmlns:ssml="http://www.w3.org/2001/10/synthesis" xmlns:svg="http://www.w3.org/2000/svg" class="hack-label">Hack 48</span>. Drag Files In and Out of Your Web Application. Drag Files In and Out of Your Web Application
      1. Bringing Files Home
      2. Bringing Files Back to the Browser
    4. <span xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops" xmlns:m="http://www.w3.org/1998/Math/MathML" xmlns:pls="http://www.w3.org/2005/01/pronunciation-lexicon" xmlns:ssml="http://www.w3.org/2001/10/synthesis" xmlns:svg="http://www.w3.org/2000/svg" class="hack-label">Hack 49</span>. Make Any Element on Your Page User-Customizable with Editable Content. Make Any Element on Your Page User-Customizable with Editable Content
      1. Spellcial!
    5. <span xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops" xmlns:m="http://www.w3.org/1998/Math/MathML" xmlns:pls="http://www.w3.org/2005/01/pronunciation-lexicon" xmlns:ssml="http://www.w3.org/2001/10/synthesis" xmlns:svg="http://www.w3.org/2000/svg" class="hack-label">Hack 50</span>. Turn Your Web Page into a WYSIWYG Editor. Turn Your Web Page into a WYSIWYG Editor
      1. Make the Page Editable
    6. <span xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops" xmlns:m="http://www.w3.org/1998/Math/MathML" xmlns:pls="http://www.w3.org/2005/01/pronunciation-lexicon" xmlns:ssml="http://www.w3.org/2001/10/synthesis" xmlns:svg="http://www.w3.org/2000/svg" class="hack-label">Hack 51</span>. Take Control of the Browser History Buttons with HTML5 Session History. Take Control of the Browser History Buttons with HTML5 Session History
      1. Smile, It’s History!
      2. Other History Features
  7. 6. Client-Side Data Storage Hacks
    1. <span xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops" xmlns:m="http://www.w3.org/1998/Math/MathML" xmlns:pls="http://www.w3.org/2005/01/pronunciation-lexicon" xmlns:ssml="http://www.w3.org/2001/10/synthesis" xmlns:svg="http://www.w3.org/2000/svg" class="hack-label">Hack 52</span>. Embed Binary Data in an Inline URL. Embed Binary Data in an Inline URL
      1. Within an Image Tag
      2. Within an External Stylesheet
      3. Getting Help from Your Web Application Framework
      4. Disadvantages to Using Data URLs
    2. <span xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops" xmlns:m="http://www.w3.org/1998/Math/MathML" xmlns:pls="http://www.w3.org/2005/01/pronunciation-lexicon" xmlns:ssml="http://www.w3.org/2001/10/synthesis" xmlns:svg="http://www.w3.org/2000/svg" class="hack-label">Hack 53</span>. Convert a Data URI to a Blob and Append It to Form Data with XHR2. Convert a Data URI to a Blob and Append It to Form Data with XHR2
    3. <span xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops" xmlns:m="http://www.w3.org/1998/Math/MathML" xmlns:pls="http://www.w3.org/2005/01/pronunciation-lexicon" xmlns:ssml="http://www.w3.org/2001/10/synthesis" xmlns:svg="http://www.w3.org/2000/svg" class="hack-label">Hack 54</span>. Use the WebStorage API to Persist User Data. Use the WebStorage API to Persist User Data
      1. The Basics
      2. The API
      3. LocalStorage and Complex Data
      4. Using SessionStorage
      5. Security Concerns
    4. <span xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops" xmlns:m="http://www.w3.org/1998/Math/MathML" xmlns:pls="http://www.w3.org/2005/01/pronunciation-lexicon" xmlns:ssml="http://www.w3.org/2001/10/synthesis" xmlns:svg="http://www.w3.org/2000/svg" class="hack-label">Hack 55</span>. Polyfill LocalStorage with YepNope.js and Storage.js. Polyfill LocalStorage with YepNope.js and Storage.js
      1. Including Modernizr
      2. Using YepNope
      3. Using Storage.js
    5. <span xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops" xmlns:m="http://www.w3.org/1998/Math/MathML" xmlns:pls="http://www.w3.org/2005/01/pronunciation-lexicon" xmlns:ssml="http://www.w3.org/2001/10/synthesis" xmlns:svg="http://www.w3.org/2000/svg" class="hack-label">Hack 56</span>. Cache Media Resources Locally with the FileSystem API. Cache Media Resources Locally with the FileSystem API
      1. Initializing and Preparing the Filesystem
      2. Working with the Filesystem
      3. Getting and Processing the ZIP File
      4. Where to Go from Here
    6. <span xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops" xmlns:m="http://www.w3.org/1998/Math/MathML" xmlns:pls="http://www.w3.org/2005/01/pronunciation-lexicon" xmlns:ssml="http://www.w3.org/2001/10/synthesis" xmlns:svg="http://www.w3.org/2000/svg" class="hack-label">Hack 57</span>. Build a Milestone Calendar with IndexedDB and FullCalendar.js. Build a Milestone Calendar with IndexedDB and FullCalendar.js
      1. The Milestone IndexedDB
      2. Adding Milestones
  8. 7. Geolocation Hacks
    1. <span xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops" xmlns:m="http://www.w3.org/1998/Math/MathML" xmlns:pls="http://www.w3.org/2005/01/pronunciation-lexicon" xmlns:ssml="http://www.w3.org/2001/10/synthesis" xmlns:svg="http://www.w3.org/2000/svg" class="hack-label">Hack 58</span>. Use the Geolocation APIs to Display Longitude and Latitude in a Mobile Web Application. Use the Geolocation APIs to Display Longitude and Latitude in a Mobile Web Application
      1. A Simple jQuery Mobile App
      2. Security and Privacy Concerns
    2. <span xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops" xmlns:m="http://www.w3.org/1998/Math/MathML" xmlns:pls="http://www.w3.org/2005/01/pronunciation-lexicon" xmlns:ssml="http://www.w3.org/2001/10/synthesis" xmlns:svg="http://www.w3.org/2000/svg" class="hack-label">Hack 59</span>. Use Google&#8217;s Geocoding API to Reverse-Geocode a User&#8217;s Location. Use Google’s Geocoding API to Reverse-Geocode a User’s Location
    3. <span xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops" xmlns:m="http://www.w3.org/1998/Math/MathML" xmlns:pls="http://www.w3.org/2005/01/pronunciation-lexicon" xmlns:ssml="http://www.w3.org/2001/10/synthesis" xmlns:svg="http://www.w3.org/2000/svg" class="hack-label">Hack 60</span>. Update a User&#8217;s Current Location in a Google Map. Update a User’s Current Location in a Google Map
      1. Using the Google Maps API
      2. Updating the Current Location with a Timer
      3. Improving the Map
      4. Improving Accuracy
      5. Saving Power and/or Bandwidth
    4. <span xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops" xmlns:m="http://www.w3.org/1998/Math/MathML" xmlns:pls="http://www.w3.org/2005/01/pronunciation-lexicon" xmlns:ssml="http://www.w3.org/2001/10/synthesis" xmlns:svg="http://www.w3.org/2000/svg" class="hack-label">Hack 61</span>. Use the Geoloqi Service to Build a Geofence. Use the Geoloqi Service to Build a Geofence
      1. Building a Geofence
      2. Getting Started
      3. Building the Geofencing Application
      4. Calling the Geoloqi API
    5. <span xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops" xmlns:m="http://www.w3.org/1998/Math/MathML" xmlns:pls="http://www.w3.org/2005/01/pronunciation-lexicon" xmlns:ssml="http://www.w3.org/2001/10/synthesis" xmlns:svg="http://www.w3.org/2000/svg" class="hack-label">Hack 62</span>. Use the Geoloqi Real-Time Streaming Service to Broadcast a Remote User&#8217;s Movement. Use the Geoloqi Real-Time Streaming Service to Broadcast a Remote User’s Movement
      1. The Geoloqi Real-Time Streaming Service
    6. <span xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops" xmlns:m="http://www.w3.org/1998/Math/MathML" xmlns:pls="http://www.w3.org/2005/01/pronunciation-lexicon" xmlns:ssml="http://www.w3.org/2001/10/synthesis" xmlns:svg="http://www.w3.org/2000/svg" class="hack-label">Hack 63</span>. Polyfill Geolocation APIs with Webshims. Polyfill Geolocation APIs with Webshims
  9. 8. WebWorker API
    1. How Browsers Handle JavaScript
    2. <span xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops" xmlns:m="http://www.w3.org/1998/Math/MathML" xmlns:pls="http://www.w3.org/2005/01/pronunciation-lexicon" xmlns:ssml="http://www.w3.org/2001/10/synthesis" xmlns:svg="http://www.w3.org/2000/svg" class="hack-label">Hack 64</span>. Use the BlobBuilder Interface to Create an Inline Worker. Use the BlobBuilder Interface to Create an Inline Worker
      1. The Facebook Graph API and Batching Responses
      2. Reducing the Batch to a Single Request
      3. Building the Blob
      4. Fetching Data from the Facebook Graph API
    3. <span xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops" xmlns:m="http://www.w3.org/1998/Math/MathML" xmlns:pls="http://www.w3.org/2005/01/pronunciation-lexicon" xmlns:ssml="http://www.w3.org/2001/10/synthesis" xmlns:svg="http://www.w3.org/2000/svg" class="hack-label">Hack 65</span>. Perform Heavy Array Computations in a Dedicated Web Worker. Perform Heavy Array Computations in a Dedicated Web Worker
      1. An Expensive Computation
      2. The Bouncing Balls Canvas
      3. Spawning a Dedicated Web Worker
    4. <span xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops" xmlns:m="http://www.w3.org/1998/Math/MathML" xmlns:pls="http://www.w3.org/2005/01/pronunciation-lexicon" xmlns:ssml="http://www.w3.org/2001/10/synthesis" xmlns:svg="http://www.w3.org/2000/svg" class="hack-label">Hack 66</span>. Use a Timer to Send Application State to Workers. Use a Timer to Send Application State to Workers
      1. General Overview
      2. Initializing the Things
      3. The Worker Library
      4. Real-World Use
    5. <span xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops" xmlns:m="http://www.w3.org/1998/Math/MathML" xmlns:pls="http://www.w3.org/2005/01/pronunciation-lexicon" xmlns:ssml="http://www.w3.org/2001/10/synthesis" xmlns:svg="http://www.w3.org/2000/svg" class="hack-label">Hack 67</span>. Process Image Data with Pixel Manipulation in a Dedicated Worker. Process Image Data with Pixel Manipulation in a Dedicated Worker
    6. <span xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops" xmlns:m="http://www.w3.org/1998/Math/MathML" xmlns:pls="http://www.w3.org/2005/01/pronunciation-lexicon" xmlns:ssml="http://www.w3.org/2001/10/synthesis" xmlns:svg="http://www.w3.org/2000/svg" class="hack-label">Hack 68</span>. Use Import Scripts to Make Twitter JSONP Requests. Use Import Scripts to Make Twitter JSONP Requests
      1. JSONP
    7. <span xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops" xmlns:m="http://www.w3.org/1998/Math/MathML" xmlns:pls="http://www.w3.org/2005/01/pronunciation-lexicon" xmlns:ssml="http://www.w3.org/2001/10/synthesis" xmlns:svg="http://www.w3.org/2000/svg" class="hack-label">Hack 69</span>. Connect to Shared Workers Simultaneously from Multiple Browser Windows. Connect to Shared Workers Simultaneously from Multiple Browser Windows
  10. 9. Hacking HTML5 Connectivity
    1. <span xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops" xmlns:m="http://www.w3.org/1998/Math/MathML" xmlns:pls="http://www.w3.org/2005/01/pronunciation-lexicon" xmlns:ssml="http://www.w3.org/2001/10/synthesis" xmlns:svg="http://www.w3.org/2000/svg" class="hack-label">Hack 70</span>. Use Kaazing&#8217;s Remote WebSocket Server to Echo Simple Messages from a Browser. Use Kaazing’s Remote WebSocket Server to Echo Simple Messages from a Browser
    2. <span xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops" xmlns:m="http://www.w3.org/1998/Math/MathML" xmlns:pls="http://www.w3.org/2005/01/pronunciation-lexicon" xmlns:ssml="http://www.w3.org/2001/10/synthesis" xmlns:svg="http://www.w3.org/2000/svg" class="hack-label">Hack 71</span>. Build a Blazing-Fast WebSocket Server with Node.js and the ws Module. Build a Blazing-Fast WebSocket Server with Node.js and the ws Module
      1. Installing Node.js
      2. Using the wscat Client to Call the Kaazing Echo Server
      3. Creating a Simple Server and Connecting to It with wscat
      4. Creating a Simple Client
    3. <span xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops" xmlns:m="http://www.w3.org/1998/Math/MathML" xmlns:pls="http://www.w3.org/2005/01/pronunciation-lexicon" xmlns:ssml="http://www.w3.org/2001/10/synthesis" xmlns:svg="http://www.w3.org/2000/svg" class="hack-label">Hack 72</span>. Build a Donation Thermometer with Web Sockets, the Pusher API, and PHP. Build a Donation Thermometer with Web Sockets, the Pusher API, and PHP
      1. Progressive Enhancement
      2. Building the Thermometer HTML
      3. Adding a Thermometer to the Widget Using CSS
      4. Tweaking the UI with JavaScript
      5. Measurement Markers
      6. Marker Values, Hover Highlights, and Tool Tips
      7. Animating Value Changes
      8. Adding Real-Time Updates
      9. Summary
    4. <span xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops" xmlns:m="http://www.w3.org/1998/Math/MathML" xmlns:pls="http://www.w3.org/2005/01/pronunciation-lexicon" xmlns:ssml="http://www.w3.org/2001/10/synthesis" xmlns:svg="http://www.w3.org/2000/svg" class="hack-label">Hack 73</span>. Build Plug-Ins for jWebSocket. Build Plug-Ins for jWebSocket
      1. Running the jWebSocket Server
        1. Prerequisites on the server
      2. jWebSocket “Hello World” for Browsers
        1. Embedding the jWebSocket script
        2. Creating the jWebSocketClient instance
      3. Connecting and Logging On
      4. Sending and Broadcasting Tokens
      5. Processing Incoming Messages
      6. Logging Off and Disconnecting
      7. Extending jWebSocket with Plug-Ins
        1. Create a server-side plug-in
        2. Add your plug-in to the jWebSocket Server
      8. Creating a Client-Side Plug-In
        1. Use the plug-ins in your web pages
      9. Included jWebSocket Plug-Ins
    5. <span xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops" xmlns:m="http://www.w3.org/1998/Math/MathML" xmlns:pls="http://www.w3.org/2005/01/pronunciation-lexicon" xmlns:ssml="http://www.w3.org/2001/10/synthesis" xmlns:svg="http://www.w3.org/2000/svg" class="hack-label">Hack 74</span>. Push Notifications to the Browser with Server-Sent Events. Push Notifications to the Browser with Server-Sent Events
      1. What Is HTTP Streaming?
      2. Ruby’s Sinatra
      3. Building Push Notifications
      4. A Simple HTTP Streaming Server
      5. Setting Up the HTML Pages
      6. Adding a Bit of jQuery
      7. EventSource
      8. Installing jQuery.notify
    6. <span xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops" xmlns:m="http://www.w3.org/1998/Math/MathML" xmlns:pls="http://www.w3.org/2005/01/pronunciation-lexicon" xmlns:ssml="http://www.w3.org/2001/10/synthesis" xmlns:svg="http://www.w3.org/2000/svg" class="hack-label">Hack 75</span>. Configure Amazon S3 for Cross-Origin Resource Sharing to Host a Web Font. Configure Amazon S3 for Cross-Origin Resource Sharing to Host a Web Font
      1. What Is an Amazon S3 Bucket?
      2. Same Origin Policy
      3. Using Web Fonts in Your Application
      4. Uploading Your Font to Your Amazon S3 Bucket
      5. Adding the Web Font to Your Web Page
      6. What Is CORS?
      7. Configuring CORS at Amazon S3
    7. <span xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops" xmlns:m="http://www.w3.org/1998/Math/MathML" xmlns:pls="http://www.w3.org/2005/01/pronunciation-lexicon" xmlns:ssml="http://www.w3.org/2001/10/synthesis" xmlns:svg="http://www.w3.org/2000/svg" class="hack-label">Hack 76</span>. Control an HTML5 Slide Deck with Robodeck. Control an HTML5 Slide Deck with Robodeck
      1. Deck.js
      2. Node.js and Express
      3. Establishing Routes
      4. Building Desktop and Mobile Views
      5. Public Files
      6. Polyfill WebSocket Support with Socket.IO
      7. Adding the Socket.IO Client JavaScript to Our Views
      8. Adding Geolocation APIs and Reverse Geocoding with the googlemaps Module
      9. Setup for Mobile and Install of Sencha 2.0
      10. Communicating from the Remote Control
    8. <span xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops" xmlns:m="http://www.w3.org/1998/Math/MathML" xmlns:pls="http://www.w3.org/2005/01/pronunciation-lexicon" xmlns:ssml="http://www.w3.org/2001/10/synthesis" xmlns:svg="http://www.w3.org/2000/svg" class="hack-label">Hack 77</span>. Inspect a Socket.IO Connection to Determine If It Is Native or Emulated. Inspect a Socket.IO Connection to Determine If It Is Native or Emulated
    9. <span xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops" xmlns:m="http://www.w3.org/1998/Math/MathML" xmlns:pls="http://www.w3.org/2005/01/pronunciation-lexicon" xmlns:ssml="http://www.w3.org/2001/10/synthesis" xmlns:svg="http://www.w3.org/2000/svg" class="hack-label">Hack 78</span>. Build a Simple SPDY Server with node-spdy. Build a Simple SPDY Server with node-spdy
      1. node-spdy
      2. What’s Next?
  11. 10. Pro HTML5 Application Hacks with Node.js
    1. HTML5 Application Design Considerations
      1. Why Node.js?
      2. Installation
      3. Installing on Mac OS X via Homebrew
    2. <span xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops" xmlns:m="http://www.w3.org/1998/Math/MathML" xmlns:pls="http://www.w3.org/2005/01/pronunciation-lexicon" xmlns:ssml="http://www.w3.org/2001/10/synthesis" xmlns:svg="http://www.w3.org/2000/svg" class="hack-label">Hack 79</span>. Deliver &#8220;Hello Html5&#8221; to the Browser. Deliver “Hello Html5” to the Browser
      1. A Little Background on HTTP
        1. URL
        2. Methods
        3. Headers
    3. <span xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops" xmlns:m="http://www.w3.org/1998/Math/MathML" xmlns:pls="http://www.w3.org/2005/01/pronunciation-lexicon" xmlns:ssml="http://www.w3.org/2001/10/synthesis" xmlns:svg="http://www.w3.org/2000/svg" class="hack-label">Hack 80</span>. Detect the User Agent String Within the Request Object. Detect the User Agent String Within the Request Object
    4. <span xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops" xmlns:m="http://www.w3.org/1998/Math/MathML" xmlns:pls="http://www.w3.org/2005/01/pronunciation-lexicon" xmlns:ssml="http://www.w3.org/2001/10/synthesis" xmlns:svg="http://www.w3.org/2000/svg" class="hack-label">Hack 81</span>. Use Node.js&#8217;s Response Object to Respond to the Client with Device-Specific Data. Use Node.js’s Response Object to Respond to the Client with Device-Specific Data
    5. <span xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops" xmlns:m="http://www.w3.org/1998/Math/MathML" xmlns:pls="http://www.w3.org/2005/01/pronunciation-lexicon" xmlns:ssml="http://www.w3.org/2001/10/synthesis" xmlns:svg="http://www.w3.org/2000/svg" class="hack-label">Hack 82</span>. Use the Node Package Manager to Add a Web Application Framework As a Third-Party Module. Use the Node Package Manager to Add a Web Application Framework As a Third-Party Module
    6. <span xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops" xmlns:m="http://www.w3.org/1998/Math/MathML" xmlns:pls="http://www.w3.org/2005/01/pronunciation-lexicon" xmlns:ssml="http://www.w3.org/2001/10/synthesis" xmlns:svg="http://www.w3.org/2000/svg" class="hack-label">Hack 83</span>. Use the Express Application Generator to Bootstrap Your App. Use the Express Application Generator to Bootstrap Your App
      1. Why Use Express?
    7. <span xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops" xmlns:m="http://www.w3.org/1998/Math/MathML" xmlns:pls="http://www.w3.org/2005/01/pronunciation-lexicon" xmlns:ssml="http://www.w3.org/2001/10/synthesis" xmlns:svg="http://www.w3.org/2000/svg" class="hack-label">Hack 84</span>. Build a Custom Module to Handle Routing. Build a Custom Module to Handle Routing
    8. <span xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops" xmlns:m="http://www.w3.org/1998/Math/MathML" xmlns:pls="http://www.w3.org/2005/01/pronunciation-lexicon" xmlns:ssml="http://www.w3.org/2001/10/synthesis" xmlns:svg="http://www.w3.org/2000/svg" class="hack-label">Hack 85</span>. Configure Express to Use a View Engine. Configure Express to Use a View Engine
    9. <span xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops" xmlns:m="http://www.w3.org/1998/Math/MathML" xmlns:pls="http://www.w3.org/2005/01/pronunciation-lexicon" xmlns:ssml="http://www.w3.org/2001/10/synthesis" xmlns:svg="http://www.w3.org/2000/svg" class="hack-label">Hack 86</span>. Use Jade Layouts to DRY Up Your Application&#8217;s Views. Use Jade Layouts to DRY Up Your Application’s Views
    10. <span xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops" xmlns:m="http://www.w3.org/1998/Math/MathML" xmlns:pls="http://www.w3.org/2005/01/pronunciation-lexicon" xmlns:ssml="http://www.w3.org/2001/10/synthesis" xmlns:svg="http://www.w3.org/2000/svg" class="hack-label">Hack 87</span>. Use a Jade Partial to Create a Common Navigation Bar in Your Views. Use a Jade Partial to Create a Common Navigation Bar in Your Views
    11. <span xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops" xmlns:m="http://www.w3.org/1998/Math/MathML" xmlns:pls="http://www.w3.org/2005/01/pronunciation-lexicon" xmlns:ssml="http://www.w3.org/2001/10/synthesis" xmlns:svg="http://www.w3.org/2000/svg" class="hack-label">Hack 88</span>. Use Jade Mixins to Populate Your Views with Data. Use Jade Mixins to Populate Your Views with Data
    12. <span xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops" xmlns:m="http://www.w3.org/1998/Math/MathML" xmlns:pls="http://www.w3.org/2005/01/pronunciation-lexicon" xmlns:ssml="http://www.w3.org/2001/10/synthesis" xmlns:svg="http://www.w3.org/2000/svg" class="hack-label">Hack 89</span>. Set Up Expressive, Dynamic, Robust CSS with Stylus. Set Up Expressive, Dynamic, Robust CSS with Stylus
    13. <span xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops" xmlns:m="http://www.w3.org/1998/Math/MathML" xmlns:pls="http://www.w3.org/2005/01/pronunciation-lexicon" xmlns:ssml="http://www.w3.org/2001/10/synthesis" xmlns:svg="http://www.w3.org/2000/svg" class="hack-label">Hack 90</span>. Include HTML5 Boilerplate As Your Default Starter Template. Include HTML5 Boilerplate As Your Default Starter Template
      1. Integrating with the Node.js/Express Application
    14. Become an HTML5 Hacker
  12. Index
  13. About the Authors
  14. Colophon
  15. Copyright