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

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
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!
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?
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
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?
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
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
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
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

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

Content preview from HTML5 Hacks

Chapter 2. Hacking with Style

I remember designing websites without CSS. It was horrible—lots of tables and images and image maps. Back in the day, most sites took several minutes to load because generally they were so overladen with image hacks in an effort to achieve a decent design. Then CSS came along and it was spectacular! Suddenly the Web had standards, you could separate your functionally into your JavaScript, your markup into your HTML file, and your look and feel into your CSS file.

Just as HTML went through a decade without seeing any true updates, CSS followed nearly the same path, which is why I am so excited that the HTML5 revolution brought CSS3 along with it. This chapter focuses primarily on another spec within the HTML5 family of technologies: Cascading Style Sheets version 3.0, a.k.a. CSS3. HTML5 may bring us a whole new world of functionality, but CSS3 blows the doors open on the user experience!

A Word About Browser Prefixes

One important thing to note within this chapter is the use of browser prefixes for new CSS3 attributes. In brief, a browser prefix is an extension placed at the beginning of a CSS3 class to be used while that feature is in an experimental stage. For additional information on browser prefixes, see [Hack #11].

In my references and code examples, I chose to not utilize browser prefixes, even when the prefix may be required for the example. The reason is simple: browsers are updating at a pace at which a print book cannot keep up. It is very likely ...