book

HTML5 Hacks

by Jesse Cravens, Jeff Burtoft

November 2012

Intermediate to advanced

500 pages

11h 21m

English

O'Reilly Media, Inc.

Read now

Unlock full access

HTML5 Hacks
Preface
Why HTML5?HTML5 ImplementationsBrowser-specific prefixesValidation with HTML5 Conformance CheckerHTML5 LintReferences for HTML5 implementation statuses and feature supportWhy HTML5 Hacks?Who This Book Is ForContents of This BookConventions Used in This BookUsing Code ExamplesWe’d Like to Hear from YouSafari® Books OnlineAcknowledgmentsGuest Hackers
1. Hacking the Semantic Way
Hack 1. Simplify Your Doc with the Right <doctype>Hack 2. Adopt Common StructuresAll That and MoreHack 3. Make Your New HTML5 Tags Render Properly in Older BrowsersThe Fallback divThe Real DOM Hack: The HTML5 Shim (or Shiv)Hack 4. Bring Back the <input> TagSome of the BasicsThe autocomplete AttributeThe list AttributeThe pattern AttributeHack 5. Easily Implement Form Validation Without JavaScriptWhat Does It Mean to Validate?Validation CriteriaThe required attributeThe pattern attributeMeasurable attributesLet’s Call This Validation Thing OffThe Constraint Validation APIHack 6. Improve the Usability of Your Forms with New ControlsThe date Input TypeThe range Input TypeThe color Input TypeThe <meter> and <progress> TagsForm Elements and Making Them Look GoodIn ConclusionHack 7. Know What’s Going On in Your App with New DOM EventsThe oninput, onchange, and oninvalid EventsReal-Time Form Validation with the oninput/oninvalid EventsOther New EventsHack 8. Add Rich Context to Your Markup with Custom DataAccessing the DataHack 9. Track User Events with Custom DataCan It Get Any Easier?Hack 10. Make Your Page Consumable by Robots and Humans Alike with MicrodataDetails, Details!
2. Hacking with Style
Hack 11. Use Experimental CSS Features with Browser PrefixesThe Browser Prefix ControversyHack 12. Design with Custom Fonts Using Web FontsWorking with Different Versions of FontsA Few Things to Note: Support and PerformanceHack 13. Use Google Web Fonts for Simple @font-face ImplementationEasy Implementation of Google Web FontsNontraditional Font AccessOptimizing Your Font UsageCommon MistakesHack 14. Use CSS3 Text Effects to Make Your Text Not SuckThe Text Shadow PropertyOther Text ControlsHack 15. Make Elements Appear Transparent Without Altering the OpacityIntroducing Alpha TransparencyA Word About Color FormatsHack 16. Use Media Queries to Build Responsive DesignIn Come the Media QueriesHack 17. Make Your Web App Respond to Device Orientation ChangesWhy Not Width?Hack 18. Take Full Control of Your DOM with PseudoclassesThe CSS Zebra Stripe Data TableHack 19. Hack Up Your Sprite and Put Your Images Inline with Image Data URIsWhy Do a Sprite?The Problem with Image SpritesHacking Up the SpriteThe Downsides of Data URIsHack 20. Build Gradients the Easy WayPure CSS GradientsThe ColorZilla Ultimate Gradient GeneratorDesigning and customizing gradientsModernizing your old gradientsHack 21. Make Borders Interesting Again, with Border TreatmentsThe Border RadiusThe Box ShadowThe Border ImageHack 22. Set Multiple Background Images to the Same ElementHow It WorksHack 23. Free Your Page Elements from Their Traditional Space with CSS3 TransformsCSS3 Transforms in 3DEven More Advanced EffectsHack 24. Turn Transforms into Animations with CSS3 TransitionsTransition to What?Make 3D Transitions with TransformsTransition EventsHack 25. Make iOS-Style Card Flips with CSS Transforms and TransitionsStyling the ElementsPutting It All TogetherHack 26. Use Respond.js to Polyfill CSS3 Media Queries in IEJust Add JavaScriptCaveats and Quid Pro QuoHack 27. Control Mobile Layout with the viewport <meta> TagWill the Real HTML5 Spec Please Stand Up?
3. Multimedia Hacking
Hack 28. Embed Video Directly in Your Application with HTML5 VideoWriting the CodeVideo As a First-Class ElementHack 29. Choose the Right Codecs for Your Video FilesWhich Codecs to SupportHack 30. Create Custom Video Controls with Video APIsA Word About AudioHack 31. Replace the Background of Your HTML5 Video with the <canvas> TagSource VideoHidden CanvasDisplay CanvasThe Nuts and BoltsThe ResultsHack 32. Add Subtitles to Your HTML5 Video ElementEasy ImplementationThe VTT FileKaraoke Anyone?SummaryHack 33. Beautify Your HTML5 Video CuesBasic Formatting from WebVTTCSS StylingPseudoclasses Within a Track CueHack 34. Use the Cuepoint.js Polyfill for SubtitlesUsing Cuepoint.jsHack 35. Easily Build Audio-Rich Applications with BuzzThe Buzz LibraryUsing the Audio APIsUsing the Buzz APIsBuzzSoundGroupEventsImplementing BuzzHack 36. Simplify Your HTML5 Media with MediaElement.jsResponsive VideoEvent ListenersCaptions and SubtitlesWrapping It Up
4. Hacking Your Graphics with Canvas and SVG
Hack 37. Draw Shapes on Your HTML5 <canvas> TagDrawing RectanglesDrawing PathsSmile, the Canvas Loves You!Advanced DrawingHack 38. Apply Styles to Your Canvas ElementsColorGradientsAdditional StylesHack 39. Style Canvas Elements with Image FilesThe Basic FillUsing an Image as a FillEasy Image DataHack 40. Use the HTML5 <canvas> Tag to Create High-Res, Retina-Display-Ready MediaIn Comes the <canvas> TagHack 41. Accelerate Animation with Canvas DrawingsWrite and CleanSmile, You’re Being Animated!Implementing requestAnimationFramePutting It All TogetherHack 42. Build “Native” Illustrations with Scalable Vector GraphicsWhy SVG?Creating Your SVG ImageDrawing with XMLHack 43. Style SVG Elements with CSSStarting with SVGStripping Away the NoiseBuilding the CSSHack 44. Animate Illustrations with SVGThe SVG <animateMotion> TagFlexibility in StructureOne Last OptionHack 45. Embed SVG Directly in Your HTMLWhy Inline?
5. User Interactions
Hack 46. Make Any Content Draggable Within Your ApplicationTurning On the DragListening for All Those Great EventsHack 47. Update the DOM with a Drag-and-Drop Data Transfer ObjectIncoming: Data Transfer ObjectThe Drop Zone AttributeHack 48. Drag Files In and Out of Your Web ApplicationBringing Files HomeBringing Files Back to the BrowserHack 49. Make Any Element on Your Page User-Customizable with Editable ContentSpellcial!Hack 50. Turn Your Web Page into a WYSIWYG EditorMake the Page EditableHack 51. Take Control of the Browser History Buttons with HTML5 Session HistorySmile, It’s History!Other History Features
6. Client-Side Data Storage Hacks
Hack 52. Embed Binary Data in an Inline URLWithin an Image TagWithin an External StylesheetGetting Help from Your Web Application FrameworkDisadvantages to Using Data URLsHack 53. Convert a Data URI to a Blob and Append It to Form Data with XHR2Hack 54. Use the WebStorage API to Persist User DataThe BasicsThe APILocalStorage and Complex DataUsing SessionStorageSecurity ConcernsHack 55. Polyfill LocalStorage with YepNope.js and Storage.jsIncluding ModernizrUsing YepNopeUsing Storage.jsHack 56. Cache Media Resources Locally with the FileSystem APIInitializing and Preparing the FilesystemWorking with the FilesystemGetting and Processing the ZIP FileWhere to Go from HereHack 57. Build a Milestone Calendar with IndexedDB and FullCalendar.jsThe Milestone IndexedDBAdding Milestones
7. Geolocation Hacks
Hack 58. Use the Geolocation APIs to Display Longitude and Latitude in a Mobile Web ApplicationA Simple jQuery Mobile AppSecurity and Privacy ConcernsHack 59. Use Google’s Geocoding API to Reverse-Geocode a User’s LocationHack 60. Update a User’s Current Location in a Google MapUsing the Google Maps APIUpdating the Current Location with a TimerImproving the MapImproving AccuracySaving Power and/or BandwidthHack 61. Use the Geoloqi Service to Build a GeofenceBuilding a GeofenceGetting StartedBuilding the Geofencing ApplicationCalling the Geoloqi APIHack 62. Use the Geoloqi Real-Time Streaming Service to Broadcast a Remote User’s MovementThe Geoloqi Real-Time Streaming ServiceHack 63. Polyfill Geolocation APIs with Webshims
8. WebWorker API
How Browsers Handle JavaScriptHack 64. Use the BlobBuilder Interface to Create an Inline WorkerThe Facebook Graph API and Batching ResponsesReducing the Batch to a Single RequestBuilding the BlobFetching Data from the Facebook Graph APIHack 65. Perform Heavy Array Computations in a Dedicated Web WorkerAn Expensive ComputationThe Bouncing Balls CanvasSpawning a Dedicated Web WorkerHack 66. Use a Timer to Send Application State to WorkersGeneral OverviewInitializing the ThingsThe Worker LibraryReal-World UseHack 67. Process Image Data with Pixel Manipulation in a Dedicated WorkerHack 68. Use Import Scripts to Make Twitter JSONP RequestsJSONPHack 69. Connect to Shared Workers Simultaneously from Multiple Browser Windows

9. Hacking HTML5 Connectivity
Hack 70. Use Kaazing’s Remote WebSocket Server to Echo Simple Messages from a BrowserHack 71. Build a Blazing-Fast WebSocket Server with Node.js and the ws ModuleInstalling Node.jsUsing the wscat Client to Call the Kaazing Echo ServerCreating a Simple Server and Connecting to It with wscatCreating a Simple ClientHack 72. Build a Donation Thermometer with Web Sockets, the Pusher API, and PHPProgressive EnhancementBuilding the Thermometer HTMLAdding a Thermometer to the Widget Using CSSTweaking the UI with JavaScriptMeasurement MarkersMarker Values, Hover Highlights, and Tool TipsAnimating Value ChangesAdding Real-Time UpdatesSummaryHack 73. Build Plug-Ins for jWebSocketRunning the jWebSocket ServerPrerequisites on the serverjWebSocket “Hello World” for BrowsersEmbedding the jWebSocket scriptCreating the jWebSocketClient instanceConnecting and Logging OnSending and Broadcasting TokensProcessing Incoming MessagesLogging Off and DisconnectingExtending jWebSocket with Plug-InsCreate a server-side plug-inAdd your plug-in to the jWebSocket ServerCreating a Client-Side Plug-InUse the plug-ins in your web pagesIncluded jWebSocket Plug-InsHack 74. Push Notifications to the Browser with Server-Sent EventsWhat Is HTTP Streaming?Ruby’s SinatraBuilding Push NotificationsA Simple HTTP Streaming ServerSetting Up the HTML PagesAdding a Bit of jQueryEventSourceInstalling jQuery.notifyHack 75. Configure Amazon S3 for Cross-Origin Resource Sharing to Host a Web FontWhat Is an Amazon S3 Bucket?Same Origin PolicyUsing Web Fonts in Your ApplicationUploading Your Font to Your Amazon S3 BucketAdding the Web Font to Your Web PageWhat Is CORS?Configuring CORS at Amazon S3Hack 76. Control an HTML5 Slide Deck with RobodeckDeck.jsNode.js and ExpressEstablishing RoutesBuilding Desktop and Mobile ViewsPublic FilesPolyfill WebSocket Support with Socket.IOAdding the Socket.IO Client JavaScript to Our ViewsAdding Geolocation APIs and Reverse Geocoding with the googlemaps ModuleSetup for Mobile and Install of Sencha 2.0Communicating from the Remote ControlHack 77. Inspect a Socket.IO Connection to Determine If It Is Native or EmulatedHack 78. Build a Simple SPDY Server with node-spdynode-spdyWhat’s Next?
10. Pro HTML5 Application Hacks with Node.js
HTML5 Application Design ConsiderationsWhy Node.js?InstallationInstalling on Mac OS X via HomebrewHack 79. Deliver “Hello Html5” to the BrowserA Little Background on HTTPURLMethodsHeadersHack 80. Detect the User Agent String Within the Request ObjectHack 81. Use Node.js’s Response Object to Respond to the Client with Device-Specific DataHack 82. Use the Node Package Manager to Add a Web Application Framework As a Third-Party ModuleHack 83. Use the Express Application Generator to Bootstrap Your AppWhy Use Express?Hack 84. Build a Custom Module to Handle RoutingHack 85. Configure Express to Use a View EngineHack 86. Use Jade Layouts to DRY Up Your Application’s ViewsHack 87. Use a Jade Partial to Create a Common Navigation Bar in Your ViewsHack 88. Use Jade Mixins to Populate Your Views with DataHack 89. Set Up Expressive, Dynamic, Robust CSS with StylusHack 90. Include HTML5 Boilerplate As Your Default Starter TemplateIntegrating with the Node.js/Express ApplicationBecome an HTML5 Hacker
Index
About the Authors
Colophon
Copyright

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

Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
and much more.

Read now

Unlock full access

More than 5,000 organizations count on O’Reilly

O’Reilly covers everything we've got, with content to help us build a world-class technology community, upgrade the capabilities and competencies of our teams, and improve overall team performance as well as their engagement.

Julian F.

Head of Cybersecurity

I wanted to learn C and C++, but it didn't click for me until I picked up an O'Reilly book. When I went on the O’Reilly platform, I was astonished to find all the books there, plus live events and sandboxes so you could play around with the technology.

Addison B.

Field Engineer

I’ve been on the O’Reilly platform for more than eight years. I use a couple of learning platforms, but I'm on O'Reilly more than anybody else. When you're there, you start learning. I'm never disappointed.

Amir M.

Data Platform Tech Lead

I'm always learning. So when I got on to O'Reilly, I was like a kid in a candy store. There are playlists. There are answers. There's on-demand training. It's worth its weight in gold, in terms of what it allows me to do.

Mark W.

Embedded Software Engineer

Publisher Resources

ISBN: 9781449335052Errata

Cloud Computing

Data Engineering

Data Science

AI & ML

Programming Languages

Software Architecture

IT/Ops

Security

Design

Business

Soft Skills