HTML5 Hacks

HTML5 Hacks

by Jesse Cravens, Jeff Burtoft
Released November 2012
Publisher(s): O'Reilly Media, Inc.
ISBN: 9781449335083

Read it now on the O’Reilly learning platform with a 10-day free trial.

O’Reilly members get unlimited access to books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial

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.

You’ll also find hacks for HTML5 markup elements and attributes that will give you a solid foundation for creative recipes that follow. The last chapter walks you through everything you need to know to get your HTML5 app off the ground, from Node.js to deploying your server to the cloud.

Here are just a few of the hacks you’ll find in this book:

  • Make iOS-style card flips with CSS transforms and transitions
  • Replace the background of your video with the Canvas tag
  • Use Canvas to create high-res Retina Display-ready media
  • Make elements on your page user-customizable with editable content
  • Cache media resources locally with the filesystem API
  • Reverse-geocode the location of your web app user
  • Process image data with pixel manipulation in a dedicated web worker
  • Push notifications to the browser with Server-Sent Events

Table of contents

  1. HTML5 Hacks
  2. 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
  3. 1. Hacking the Semantic Way
    1. Hack 1. Simplify Your Doc with the Right <doctype>
    2. Hack 2. Adopt Common Structures
      1. All That and More
    3. Hack 3. 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. Hack 4. Bring Back the <input> Tag
      1. Some of the Basics
      2. The autocomplete Attribute
      3. The list Attribute
      4. The pattern Attribute
    5. Hack 5. 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. Hack 6. 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. Hack 7. 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. Hack 8. Add Rich Context to Your Markup with Custom Data
      1. Accessing the Data
    9. Hack 9. Track User Events with Custom Data
      1. Can It Get Any Easier?
    10. Hack 10. Make Your Page Consumable by Robots and Humans Alike with Microdata
      1. Details, Details!
  4. 2. Hacking with Style
    1. Hack 11. Use Experimental CSS Features with Browser Prefixes
      1. The Browser Prefix Controversy
    2. Hack 12. Design with Custom Fonts Using Web Fonts
      1. Working with Different Versions of Fonts
      2. A Few Things to Note: Support and Performance
    3. Hack 13. 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. Hack 14. Use CSS3 Text Effects to Make Your Text Not Suck
      1. The Text Shadow Property
      2. Other Text Controls
    5. Hack 15. Make Elements Appear Transparent Without Altering the Opacity
      1. Introducing Alpha Transparency
      2. A Word About Color Formats
    6. Hack 16. Use Media Queries to Build Responsive Design
      1. In Come the Media Queries
    7. Hack 17. Make Your Web App Respond to Device Orientation Changes
      1. Why Not Width?
    8. Hack 18. Take Full Control of Your DOM with Pseudoclasses
      1. The CSS Zebra Stripe Data Table
    9. Hack 19. 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. Hack 20. 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. Hack 21. Make Borders Interesting Again, with Border Treatments
      1. The Border Radius
      2. The Box Shadow
      3. The Border Image
    12. Hack 22. Set Multiple Background Images to the Same Element
      1. How It Works
    13. Hack 23. Free Your Page Elements from Their Traditional Space with CSS3 Transforms
      1. CSS3 Transforms in 3D
      2. Even More Advanced Effects
    14. Hack 24. Turn Transforms into Animations with CSS3 Transitions
      1. Transition to What?
      2. Make 3D Transitions with Transforms
      3. Transition Events
    15. Hack 25. Make iOS-Style Card Flips with CSS Transforms and Transitions
      1. Styling the Elements
      2. Putting It All Together
    16. Hack 26. Use Respond.js to Polyfill CSS3 Media Queries in IE
      1. Just Add JavaScript
      2. Caveats and Quid Pro Quo
    17. Hack 27. Control Mobile Layout with the viewport <meta> Tag
      1. Will the Real HTML5 Spec Please Stand Up?
  5. 3. Multimedia Hacking
    1. Hack 28. Embed Video Directly in Your Application with HTML5 Video
      1. Writing the Code
      2. Video As a First-Class Element
    2. Hack 29. Choose the Right Codecs for Your Video Files
      1. Which Codecs to Support
    3. Hack 30. Create Custom Video Controls with Video APIs
      1. A Word About Audio
    4. Hack 31. 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. Hack 32. Add Subtitles to Your HTML5 Video Element
      1. Easy Implementation
      2. The VTT File
      3. Karaoke Anyone?
      4. Summary
    6. Hack 33. Beautify Your HTML5 Video Cues
      1. Basic Formatting from WebVTT
      2. CSS Styling
      3. Pseudoclasses Within a Track Cue
    7. Hack 34. Use the Cuepoint.js Polyfill for Subtitles
      1. Using Cuepoint.js
    8. Hack 35. 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. Hack 36. Simplify Your HTML5 Media with MediaElement.js
      1. Responsive Video
      2. Event Listeners
      3. Captions and Subtitles
      4. Wrapping It Up
  6. 4. Hacking Your Graphics with Canvas and SVG
    1. Hack 37. Draw Shapes on Your HTML5 <canvas> Tag
      1. Drawing Rectangles
      2. Drawing Paths
      3. Smile, the Canvas Loves You!
      4. Advanced Drawing
    2. Hack 38. Apply Styles to Your Canvas Elements
      1. Color
      2. Gradients
      3. Additional Styles
    3. Hack 39. Style Canvas Elements with Image Files
      1. The Basic Fill
      2. Using an Image as a Fill
      3. Easy Image Data
    4. Hack 40. Use the HTML5 <canvas> Tag to Create High-Res, Retina-Display-Ready Media
      1. In Comes the <canvas> Tag
    5. Hack 41. Accelerate Animation with Canvas Drawings
      1. Write and Clean
      2. Smile, You’re Being Animated!
      3. Implementing requestAnimationFrame
      4. Putting It All Together
    6. Hack 42. Build “Native” Illustrations with Scalable Vector Graphics
      1. Why SVG?
      2. Creating Your SVG Image
      3. Drawing with XML
    7. Hack 43. Style SVG Elements with CSS
      1. Starting with SVG
      2. Stripping Away the Noise
      3. Building the CSS
    8. Hack 44. Animate Illustrations with SVG
      1. The SVG <animateMotion> Tag
      2. Flexibility in Structure
      3. One Last Option
    9. Hack 45. Embed SVG Directly in Your HTML
      1. Why Inline?
  7. 5. User Interactions
    1. Hack 46. Make Any Content Draggable Within Your Application
      1. Turning On the Drag
      2. Listening for All Those Great Events
    2. Hack 47. Update the DOM with a Drag-and-Drop Data Transfer Object
      1. Incoming: Data Transfer Object
      2. The Drop Zone Attribute
    3. Hack 48. Drag Files In and Out of Your Web Application
      1. Bringing Files Home
      2. Bringing Files Back to the Browser
    4. Hack 49. Make Any Element on Your Page User-Customizable with Editable Content
      1. Spellcial!
    5. Hack 50. Turn Your Web Page into a WYSIWYG Editor
      1. Make the Page Editable
    6. Hack 51. Take Control of the Browser History Buttons with HTML5 Session History
      1. Smile, It’s History!
      2. Other History Features
  8. 6. Client-Side Data Storage Hacks
    1. Hack 52. 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. Hack 53. Convert a Data URI to a Blob and Append It to Form Data with XHR2
    3. Hack 54. 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. Hack 55. Polyfill LocalStorage with YepNope.js and Storage.js
      1. Including Modernizr
      2. Using YepNope
      3. Using Storage.js
    5. Hack 56. 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. Hack 57. Build a Milestone Calendar with IndexedDB and FullCalendar.js
      1. The Milestone IndexedDB
      2. Adding Milestones
  9. 7. Geolocation Hacks
    1. Hack 58. 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. Hack 59. Use Google’s Geocoding API to Reverse-Geocode a User’s Location
    3. Hack 60. 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. Hack 61. 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. Hack 62. Use the Geoloqi Real-Time Streaming Service to Broadcast a Remote User’s Movement
      1. The Geoloqi Real-Time Streaming Service
    6. Hack 63. Polyfill Geolocation APIs with Webshims
  10. 8. WebWorker API
    1. How Browsers Handle JavaScript
    2. Hack 64. 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. Hack 65. 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. Hack 66. 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. Hack 67. Process Image Data with Pixel Manipulation in a Dedicated Worker
    6. Hack 68. Use Import Scripts to Make Twitter JSONP Requests
      1. JSONP
    7. Hack 69. Connect to Shared Workers Simultaneously from Multiple Browser Windows
  11. 9. Hacking HTML5 Connectivity
    1. Hack 70. Use Kaazing’s Remote WebSocket Server to Echo Simple Messages from a Browser
    2. Hack 71. 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. Hack 72. 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. Hack 73. 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. Hack 74. 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. Hack 75. 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. Hack 76. 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. Hack 77. Inspect a Socket.IO Connection to Determine If It Is Native or Emulated
    9. Hack 78. Build a Simple SPDY Server with node-spdy
      1. node-spdy
      2. What’s Next?
  12. 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. Hack 79. Deliver “Hello Html5” to the Browser
      1. A Little Background on HTTP
        1. URL
        2. Methods
        3. Headers
    3. Hack 80. Detect the User Agent String Within the Request Object
    4. Hack 81. Use Node.js’s Response Object to Respond to the Client with Device-Specific Data
    5. Hack 82. Use the Node Package Manager to Add a Web Application Framework As a Third-Party Module
    6. Hack 83. Use the Express Application Generator to Bootstrap Your App
      1. Why Use Express?
    7. Hack 84. Build a Custom Module to Handle Routing
    8. Hack 85. Configure Express to Use a View Engine
    9. Hack 86. Use Jade Layouts to DRY Up Your Application’s Views
    10. Hack 87. Use a Jade Partial to Create a Common Navigation Bar in Your Views
    11. Hack 88. Use Jade Mixins to Populate Your Views with Data
    12. Hack 89. Set Up Expressive, Dynamic, Robust CSS with Stylus
    13. Hack 90. Include HTML5 Boilerplate As Your Default Starter Template
      1. Integrating with the Node.js/Express Application
    14. Become an HTML5 Hacker
  13. Index
  14. About the Authors
  15. Colophon
  16. Copyright

Product information

  • Title: HTML5 Hacks
  • Author(s): Jesse Cravens, Jeff Burtoft
  • Release date: November 2012
  • Publisher(s): O'Reilly Media, Inc.
  • ISBN: 9781449335083