HTML5 Hacks

Overview

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 ...

See more details below
Paperback
$25.89
BN.com price
(Save 26%)$34.99 List Price

Pick Up In Store

Reserve and pick up in 60 minutes at your local store

Other sellers (Paperback)
  • All (21) from $2.17   
  • New (13) from $11.08   
  • Used (8) from $2.17   
HTML5 Hacks

Available on NOOK devices and apps  
  • NOOK Devices
  • Samsung Galaxy Tab 4 NOOK
  • NOOK HD/HD+ Tablet
  • NOOK
  • NOOK Color
  • NOOK Tablet
  • Tablet/Phone
  • NOOK for Windows 8 Tablet
  • NOOK for iOS
  • NOOK for Android
  • NOOK Kids for iPad
  • PC/Mac
  • NOOK for Windows 8
  • NOOK for PC
  • NOOK for Mac

Want a NOOK? Explore Now

NOOK Book (eBook)
$16.49
BN.com price
(Save 45%)$29.99 List Price

Overview

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
Read More Show Less

Product Details

  • ISBN-13: 9781449334994
  • Publisher: O'Reilly Media, Incorporated
  • Publication date: 12/4/2012
  • Edition number: 1
  • Pages: 500
  • Sales rank: 944,154
  • Product dimensions: 5.90 (w) x 8.90 (h) x 1.20 (d)

Meet the Author

Jesse is a Sr. Engineer at frog where he works with the world’s leading companies, helping them to design, engineer, and bring to market meaningful products and services. With 12 years of experience in web application development, Jesse is currently focusing on single page web applications, the mobile web, and HTML5.

Jeff Burtoft, HTML5 Evangelist for Microsoft Corporation, has built a reputation of pushing the boundaries of HTML5 and JavaScript. He has over 10 years experience in web development and has filled a variety of roles in the industry, from “web master” of a start-up to Lead front end developer for a fortune 500 company. Jeff also develops mobile apps and is a blogger at HTML5Hacks.com

Read More Show Less

Table of Contents

Preface vii

1 Hacking the Semantic Way 1

Hack 01 Simplify Your Doc with the Right <doctype> 1

Hack 02 Adopt Common Structures 2

Hack 03 Make Your New HTML5 Tags Render Properly in Older Browsers 5

Hack 04 Bring Back the <input> Tag 11

Hack 05 Easily Implement Form Validation Without JavaScript 16

Hack 06 Improve the Usability of Your Forms with New Controls 24

Hack 07 Know What's Going On in Your App with New DOM Events 37

Hack 08 Add Rich Context to Your Markup with Custom Data 40

Hack 09 Track User Events with Custom Data 44

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

2 Hacking with Style 53

Hack 11 Use Experimental CSS Features with Browser Prefixes 54

Hack 12 Design with Custom Fonts Using Web Fonts 56

Hack 13 Use Google Web Fonts for Simple @font-face Implementation 61

Hack 14 Use CSS3 Text Effects to Make Your Text Not Suck 70

Hack 15 Make Elements Appear Transparent Without Altering the Opacity 73

Hack 16 Use Media Queries to Build Responsive Design 76

Hack 17 Make Your Web App Respond to Device Orientation Changes 81

Hack 18 Take Full Control of Your DOM with Pseudoclasses 85

Hack 19 Hack Up Your Sprite and Put Your Images Inline with Image Data URIs 87

Hack 20 Build Gradients the Easy Way 92

Hack 21 Make Borders Interesting Again, with Border Treatments 98

Hack 22 Set Multiple Background Images to the Same Element 103

Hack 23 Free Your Page Elements from Their Traditional Space with CSS3 Transforms 106

Hack 24 Turn Transforms into Animations with CSS3 Transitions 110

Hack 25 Make iOS-Style Card Flips with CSS Transforms and Transitions 113

Hack 26 Use Respond.js to Polyfill CSS3 Media Queries in IE 117

Hack 27 Control Mobile Layout with the viewport <meta> Tag 121

3 Multimedia Hacking 125

Hack 28 Embed Video Directly in Your Application with HTML5 Video 125

Hack 29 Choose the Right Codecs for Your Video Files 128

Hack 30 Create Custom Video Controls with Video APIs 130

Hack 31 Replace the Background of Your HTML5 Video with the <canvas> Tag 135

Hack 32 Add Subtitles to Your HTML5 Video Element 139

Hack 33 Beautify Your HTML5 Video Cues 142

Hack 34 Use the Cuepoint.js Polyfill for Subtitles 146

Hack 35 Easily Build Audio-Rich Applications with Buzz 149

Hack 36 Simplify Your HTML5 Media with MediaElement.js 153

4 Hacking Your Graphics with Canvas and SVG 157

Hack 37 Draw Shapes on Your HTML5 <canvas> Tag 158

Hack 38 Apply Styles to Your Canvas Elements 164

Hack 39 Style Canvas Elements with Image Files 171

Hack 40 Use the HTML5 <canvas> Tag to Create High-Res, Retina-Display-Ready Media 177

Hack 41 Accelerate Animation with Canvas Drawings 180

Hack 42 Build "Native" Illustrations with Scalable Vector Graphics 187

Hack 43 Style SVG Elements with CSS 191

Hack 44 Animate Illustrations with SVG 198

Hack 45 Embed SVG Directly in Your HTML 202

5 User Interactions 207

Hack 46 Make Any Content Draggable Within Your Application 208

Hack 47 Update the DOM with a Drag-and-Drop Data Transfer Object 212

Hack 48 Drag Files In and Out of Your Web Application 218

Hack 49 Make Any Element on Your Page User-Customizable with Editable Content 224

Hack 50 Turn Your Web Page into a WYSIWYG Editor 227

Hack 51 Take Control of the Browser History Buttons with HTML5 Session History 230

6 Client-Side Data Storage Hacks 237

Hack 52 Embed Binary Data in an Inline URL 237

Hack 53 Convert a Data URI to a Blob and Append It to Form Data with XHR2 242

Hack 54 Use the WebStorage API to Persist User Data 244

Hack 55 Polyfill LocalStorage with YepNope.js and Storage.js 250

Hack 56 Cache Media Resources Locally with the FileSystem API 253

Hack 57 Build a Milestone Calendar with IndexedDB and FullCalendar.js 262

7 Geolocation Hacks 271

Hack 58 Use the Geolocation APIs to Display Longitude and Latitude in a Mobile Web Application 272

Hack 59 Use Google's Geocoding API to Reverse-Geocode a User's Location 278

Hack 60 Update a User's Current Location in a Google Map 284

Hack 61 Use the Geoloqi Service to Build a Geofence 289

Hack 62 Use the Geoloqi Real-Time Streaming Service to Broadcast a Remote User's Movement 296

Hack 63 Polyfill Geolocation APIs with Webshims 300

8 WebWorker API 305

How Browsers Handle JavaScript 305

Hack 64 Use the BlobBuilder Interface to Create an Inline Worker 307

Hack 65 Perform Heavy Array Computations in a Dedicated Web Worker 313

Hack 66 Use a Timer to Send Application State to Workers 323

Hack 67 Process Image Data with Pixel Manipulation in a Dedicated Worker 336

Hack 68 Use Import Scripts to Make Twitter JSONP Requests 341

Hack 69 Connect to Shared Workers Simulataneously from Multiple Browser Windows 345

9 Hacking HTML5 Connectivity 349

Hack 70 Use Kaazing's Remote WebSocket Server to Echo Simple Messages from a Browser 350

Hack 71 Build a Blazing-Fast WebSocket Server with Node.js and the ws Module 358

Hack 72 Build a Donation Thermometer with Web Sockets, the Pusher API, and PHP 365

Hack 73 Build Plug-Ins for jWebSocket 381

Hack 74 Push Notifications to the Browser with Server-Sent Events 392

Hack 75 Configure Amazon S3 for Cross-Origin Resource Sharing to Host a Web Font 402

Hack 76 Control an HTML5 Slide Deck with Robodeck 411

Hack 77 Inspect a Socket.IO Connection to Determine If It Is Native or Emulated 432

Hack 78 Build a Simple SPDY Server with node-spdy 432

10 Pro HTML5 Application Hacks with Node.js 435

HTML5 Application Design Considerations 435

Hack 79 Deliver "Hello Html5" to the Browser 436

Hack 80 Detect the User Agent String Within the Request Object 444

Hack 81 Use Node.js's Response Object to Respond to the Client with Device-Specific Data 445

Hack 82 Use the Node Package Manager to Add a Web Application Framework As a Third-Party Module 447

Hack 83 Use the Express Application Generator to Bootstrap Your App 448

Hack 84 Build a Custom Module to Handle Routing 451

Hack 85 Configure Express to Use a View Engine 452

Hack 86 Use Jade Layouts to DRY Up Your Application's Views 454

Hack 87 Use a Jade Partial to Create a Common Navigation Bar in Your Views 456

Hack 88 Use Jade Mixins to Populate Your Views with Data 458

Hack 89 Set Up Expressive, Dynamic, Robust CSS with Stylus 462

Hack 90 Include HTML5 Boilerplate As Your Default Starter Template 465

Become an HTML5 Hacker 471

Index 473

Read More Show Less

Customer Reviews

Be the first to write a review
( 0 )
Rating Distribution

5 Star

(0)

4 Star

(0)

3 Star

(0)

2 Star

(0)

1 Star

(0)

Your Rating:

Your Name: Create a Pen Name or

Barnes & Noble.com Review Rules

Our reader reviews allow you to share your comments on titles you liked, or didn't, with others. By submitting an online review, you are representing to Barnes & Noble.com that all information contained in your review is original and accurate in all respects, and that the submission of such content by you and the posting of such content by Barnes & Noble.com does not and will not violate the rights of any third party. Please follow the rules below to help ensure that your review can be posted.

Reviews by Our Customers Under the Age of 13

We highly value and respect everyone's opinion concerning the titles we offer. However, we cannot allow persons under the age of 13 to have accounts at BN.com or to post customer reviews. Please see our Terms of Use for more details.

What to exclude from your review:

Please do not write about reviews, commentary, or information posted on the product page. If you see any errors in the information on the product page, please send us an email.

Reviews should not contain any of the following:

  • - HTML tags, profanity, obscenities, vulgarities, or comments that defame anyone
  • - Time-sensitive information such as tour dates, signings, lectures, etc.
  • - Single-word reviews. Other people will read your review to discover why you liked or didn't like the title. Be descriptive.
  • - Comments focusing on the author or that may ruin the ending for others
  • - Phone numbers, addresses, URLs
  • - Pricing and availability information or alternative ordering information
  • - Advertisements or commercial solicitation

Reminder:

  • - By submitting a review, you grant to Barnes & Noble.com and its sublicensees the royalty-free, perpetual, irrevocable right and license to use the review in accordance with the Barnes & Noble.com Terms of Use.
  • - Barnes & Noble.com reserves the right not to post any review -- particularly those that do not follow the terms and conditions of these Rules. Barnes & Noble.com also reserves the right to remove any review at any time without notice.
  • - See Terms of Use for other conditions and disclaimers.
Search for Products You'd Like to Recommend

Recommend other products that relate to your review. Just search for them below and share!

Create a Pen Name

Your Pen Name is your unique identity on BN.com. It will appear on the reviews you write and other website activities. Your Pen Name cannot be edited, changed or deleted once submitted.

 
Your Pen Name can be any combination of alphanumeric characters (plus - and _), and must be at least two characters long.

Continue Anonymously

    If you find inappropriate content, please report it to Barnes & Noble
    Why is this product inappropriate?
    Comments (optional)