Packt Publishing recently published HTML5 Data and Services Cookbook by Gorgi Kosev and Mite Mitreski. The subtitle of the book is: "Over one hundred website building recipes utilizing all the modern HTML5 features and techniques!" I accepted an invitation to review this book and was provided with an electronic copy of that book that I am reviewing in this post.
HTML5 Data and Services Cookbook is a collection of "recipes" organized in categories such as text, graphics, animation, input, data storage, validation, and server communication. The recipes cover not only HTML, but also JavaScript and CSS. This is not too surprising given that HTML5 is really much more than simply HTML.
Preface (Target Audience and Prerequisites)
The Preface provides a brief overview of each of the book's 12 chapters and 2 appendices. The Preface also describes what readers should have available when reading the book such as "a modern browser" such as "Firefox, Chrome, Safari, Opera, or Internet Explorer 9," a text editor, and an Internet connection. The authors also mention in the Preface that node.js is used for examples in later chapters of the book.
The "Who this book is for" section of the Preface describes the audience targeted by the authors:
This book is for programmers who already have used JavaScript in one way or the other. It's for people who work with a lot of backend code, and want to get up to speed with the world of HTML5 and JavaScript. It's for people who have used copy/paste to patch up a part of a page and want to know more about how things work in the background. It's for JavaScript developers who would like to update their knowledge with new techniques and capabilities made possible with HTML5. The book is for both beginners and seasoned developers, assuming that you will have some experience in HTML, JavaScript, and jQuery already, but not necessary [sic] an in-depth knowledge.
Chapter 1: Display of Textual Data
The first sentence of the initial chapter of HTML5 Data and Services Cookbook introduces the chapter with the statement, "The most common task related to web application development is the displaying of text." The authors use this chapter to describe how to work with text presentation (including presentation of numeric text and dates as well as alternate text formats). I like the fact that the authors include some iterative and functional examples and describe differences between them including disadvantages and advantages of each. The authors also demonstrate how to add a function to a standard JavaScript object but at the same time explain why this is not generally a good idea. These are examples of how the book does more than simply show how to accomplish a certain task.
Chapter 2: Display of Graphical Data
Chapter 2 of HTML5 Data and Services Cookbook looks at "displaying graphical data using various JavaScript libraries that are based on modern HTML5 standards." Presentation of several types of charts (line, bar, pie, area, and bubble) are demonstrated in the recipes of Chapter 2 and these make use of the Flot and D3 charting libraries. Scalable Vector Graphics (SVG) technology is also applied in this chapter.
The second chapter also includes detailed recipes on creating simple mapping applications, creating and using a gauge jQuery plugin, and creating an LED scoreboard. The last recipe goes into quite a bit of detail regarding font snf introduces terms such as Web Open Font Format (WOFF), TrueType Font (TTF), OpenType Font (OTF), and Flash of Unstyled Text (FOUT).
Chapter 3: Animated Data Display
The third chapter of HTML5 Data and Services Cookbook covers "some common ways of doing animated data visualizations with minor interactions." D3 and SVG figure prominently in this chapter and one of the recipes is devoted to Web Notifications.
Chapter 4: Using HTML5 Input Components
Chapter 4 provides recipes related to HTML form input fields. It includes standard input form material (placeholder text, HTML5 Date Pickers, Color Pickers, Range Pickers, etc.) as well as information on less commonly discussed input mechanisms such as HTML Speech/Web Speech API. This chapter also features recipes on the Geolocation API Specification, File API, and Drag and Drop.
Chapter 5: Custom Input Components
The fifth chapter of HTML5 Data and Services Cookbook builds on the fourth chapter with recipes that demonstrate how to extend the standard HTML input elements. Recipes in this chapter outline use of contentEditable (and browser support for it), Embedded JavaScript Templates (including John Resig's JavaScript Micro-Templating), and OpenStreetMap Nominator as they describe creation of rich content elements, drop-down menus, custom dialogs, input autocompletion (applying jQueryUI and Chosen), and map-related applications.
Chapter 6: Data Validation
Chapter 6 of HTML5 Data and Services Cookbook covers data validation and looks at "new mechanisms provided mostly for client-side checks by HTML5 as well as how to tackle some common problems." Recipes in this chapter cover validating form fields, length of text fields, spelling and grammar checks, numeric range checks, calculating password strength, and validating United States zip codes. The examples also include application of box shadows, the required attribute of input tags, and references to the client-side form validation and constraint validation API specifications. This chapter also contains the first recipe requiring use of node.js.
Chapter 7: Data Serialization
HTML5 Data and Services Cookbook's seventh chapter introduces its recipes with the statement, "One of the basic concepts of data storage and transmission is serialization" and then the chapter's recipes demonstrate approaches for saving data, reading data, and preparing data for transmission. Binary data (ArrayBuffer), XML data, and, of course, JSON data each get attention in one or more recipes of this chapter. Serialization inherently involves encoding and decoding, so it's not surprising that much attention is paid to encoding and decoding in JavaScript.
Chapter 7 reminds the reader that while "JSON is language independent format," it still "is JavaScript." I like that the authors point out that while one could use eval to evaluate JSON data as a subset of JavaScript, its use is "something we should avoid in most cases." The authors instead recommend using JavaScript 1.7's JSON.parse function and, for browsers too old to support that, recommend the fallbacks of either JSON2 or JSON3.
Chapter 7 includes a demonstration of CanvasRenderingContext2D in recipes in which binary data needs to be created. The chapter also mentions use of JavaScript typed arrays. One of the recipes in Chapter 7 introduces Keyhole Markup Language (KML). As would be expected from a chapter on serialization in HTML5, recipes in this seventh chapter use jQuery.serialize(), jQuery.serializeArray(), DOMParser, and XMLSerializer.
Before reading Chapter 7 of HTML5 Data and Services Cookbook, I was not aware of JXON (lossless JavaScript XML Object Notation). The authors introduce JXON and describe it as "the API related to creation and use of XML documents in JavaScript" that "defines a convention for a two-way conversion between JSON and XML." The recipe that introduces JXON also introduces something with which I'm much more familiar: XPath (XML Path Language).
Chapter 8: Communicating with Servers
Although Ajax is used throughout recipes of earlier chapters in HTML5 Data and Services Cookbook, it is Chapter 8 that more formally introduces the concept of Asynchronous JavaScript and XML and XMLHttpRequest. Just as I thought it helpful when JavaScript and JSON Essentials demonstrated applying Ajax implementation directly in JavaScript before using the easier JQuery-based approach, the authors of HTML5 Data and Services Cookbook intentionally show direct JavaScript implementation of asynchronous communication with the (node.js-based) server in early recipes of Chapter 8. The authors explicitly state their very good reasons for this decision: "We strongly believe that jQuery simplifies the DOM API, but it is not always available to us, and additionally, we need have to know the underlying code behind asynchronous data transfer in order to fully grasp how applications work."
I was pleased to see coverage of XMLHttpRequest Level 2 in Chapter 8. The authors succinctly describe the major differences and improvements of this version and discuss browser support for it. Other topics covered in this chapter include Cross-Origin Resource Sharing, Semantic Versioning, JSONP (JSON with Padding), building XML with xmlbuilder-js, and leveraging WebSockets with dnode.
Chapter 8 includes recipes addressing security issues. The concepts of Secure Sockets Layer (SSL) and Transport Layer Security (TLS) are discussed and the OpenSSL Project and Socket.io are used. There is mention of the Open Web Application Security Project (OWASP) and its HTML5 Security Cheat Sheet.
Chapter 9: Client-side Templates
Chapter 9 of HTML5 Data and Services Cookbook addresses "the shift in web apps from using server-side HTML rendering to client-side HTML rendering" that is attributed to many of today's target platforms not supporting HTML. The recipes in this chapter take turns using one of three "popular client-side template languages": EJS, Handlebars, and Jade.
Chapter 10: Data Binding Frameworks
When I was browsing the table of contents before reading HTML5 Data and Services Cookbook, one of the chapters I was looking most forward to reading was Chapter 10 because it covers two trendy JavaScript frameworks that I only had minimal knowledge (not much more than awareness) of: AngularJS and Meteor. The authors open the chapter contrasting these two frameworks and one of the most obvious differences that they highlight is that AngularJS "provides client-side bindings and can work with any server-side stack" while Meteor is "a complete framework and platform that covers both the client and the server side." The section on Meteor reproduces and references the "Seven Principles of Meteor" that is available on the main Meteor documentation page.
MongoDB is referenced and used in multiple recipes in Chapter 10. Other introduced concepts include EJSON, reactive programming, and Meteor's spiderable.
Chapter 11: Data Storage
Chapter 11 of HTML5 Data and Services Cookbook "covers some of the features that are related to HTML5 and are about data storage." The recipes in this chapter cover Data URI, Web Storage (Local Storage), IndexedDB, Web SQL Database, Quota Management API, and History API.
I was particularly intrigued by the number of fallback mechanisms for Web Storage listed in HTML5 Data and Services Cookbook. One of the referenced fallbacks is actually two choices of code implementations and are based on cookies for browsers not supporting Web Storage. Other referenced fallbacks for when Web Storage is not supported include implementations based on Google Gears and Flash.
The authors' recipes include a good explanation of why they cannot currently recommend use of IndexedDB and instead recommend a couple of alternatives.
Chapter 12: Multimedia
The final non-appendix chapter of HTML5 Data and Services Cookbook, Chapter 12, covers on the the areas that is most wanting in HTML5 browser compliance: multimedia support. One of the issues making this so difficult is the plethora of formats available. Indeed, in the first recipe of this chapter, the authors refer the reader to media.io to covert files into other formats for use in the recipe. Before displaying a handy table detailing the "rough state of the browser format support using Windows as operating system," the authors make this important observation about working with multimedia in HTML5: "With the current state some browsers support certain format but others do not. If we want to have support in all modern browsers then we supply the option to have multiple sources." After two decades of development for the Internet, browser incompatibilities remain an influential force.
Chapter 12 introduces The Internet Archive (home of the Wayback Machine) as a source of publicly available videos to use for a recipe on video handling. I liked the chapter's introduction of MediaElement.js as a simple fallback mechanism for browsers not supporting the media elements or not supporting certain media formats.
WebVTT (The Web Video Text Tracks Format) is also covered in Chapter 12 along with a reference to Live WebVTT Validator and the Timed Text Markup Language (TTML). The chapter briefly references the Web Audio API before moving to coverage of converting text to speech in HTML5 using emscripten, speakjs, and eSpeak.
The Appendices
HTML5 Data and Services Cookbook includes two appendices with Appendix A devoted to "Installing Node.js and Using npm" (node package manager) and Appendix B covering "Community and Resources." Appendix A is particularly useful to and important for readers who wish to run the many node.js-based recipes in HTML5 Data and Services Cookbook but who do not already have Node.js running.
Appendix B covers WHAT Working Group (WHATWG), Worldwide Web Consortium (W3C), Mozilla Developer Network (MDN) [source of many of the links I embedded in this post], HTML5 Rocks, Dive Into HTML5, HTML5 Test, and QuirksMode Compatibility Master Table.
General Observations
HTML5 Data and Services Cookbook references and demonstrates use of several tools and libraries related to HTML5 such as jQuery (1.8.2), jQuery plugins (timeago, DataTables, Validation), node.js (including modules node-restify and FileSystem), big.js, Moment.js, MathJax, ASCIIMathML.js, google-code-prettify, Markdown (markdown-js), Flot, D3.js, Leaflet, OpenStreetMap (including Nominatim), FontSquirrel, google.com/fonts, Rickshaw, GeoJSON, TopoJSON, html5-slider, TinyMCE, Embedded JavaScript Templates, John Resig's JavaScript Micro-Templating, Handlebars, jade, jQueryUI, Chosen, HTML5Pattern, Webshims lib, yepnope.js, Base64.js, hashify.me, form2js, xmlbuilder-js, Connect, OpenSSL, Socket.io, dnode, sessionstorage, Storage polyfill, Storage Compatibility, PouchDB, db.js, history.js, path.js, Abaroids, media.io, AreWePlayingYet?, MediaElement.js, Live WebVTT Validator, Captionator.js, emscripten, speakjs. Many of these referenced products are available via cdnjs.
HTML5 Data and Services Cookbook contains recipes using and covering several different approaches and tactics commonly used in JavaScript and HTML5 such as Ajax, JSON, Comet, and WebSockets.
HTML5 Data and Services Cookbook not only has recipes showing how to accomplish certain specific tasks with HTML5 technologies, but it also makes a lot of nice points along the way about things to do and not do with HTML5 technologies.
One of the most frustrating aspects of web development has always been differing support of alleged standards by different web browsers
HTML5 Data and Services Cookbook often calls out features not supported in certain browsers at the time of its writing.
Chapter 4 lists two tools that can be used to help determine updated browser support for a particular capability: http://caniuse.com/ and http://html5please.com/.
Compatibility Master Table is referenced in Chapter 6.
I have also used Modernizr for this.
The authors also provide appropriate fallbacks, shims, and polyfills to use in many of the recipes when the newer covered feature may not work in some browsers.
The code listings in the electronic version of HTML5 Data and Services Cookbook are differentiated from regular prose by a fixed-width font being used for code. Other than the different font, there are no differences between code listings and prose. It would be easier to read the large amount of code in this book if it had color coded syntax and was offset with a border or other visual separator. However, the code can be copied-and-pasted easily in this form.
Although there are many code listings in this book, not all code used in the recipes is directly available in the book. Some listings require code to be downloaded from the book's companion web site and many of the code listings depend upon availability of third-party libraries and frameworks.
An advantage of reviewing the electronic version of HTML5 Data and Services Cookbook is that many of the screen snapshots of HTML5 applications are reproduced in full color.
I really liked the wide breadth of realistic but small examples contained in the recipes of HTML5 Data and Services Cookbook. The "domain" modeled by these recipes introduced some things new to me and in some cases were as interesting as the code examples.
I expected to learn some new techniques related to HTML5 from reading this book and was not disappointed. Howeverm I was pleasantly surprised to learn some interesting minor pieces of information with no specific relationship to HTML5 during my reading. These include things like the existence of the United States postal zip codes in CSV format and how/why the UTC acronym (formerly GMT) was selected. These are just a few examples of many incidental things I picked up from reading this book.
Most of HTML5 Data and Services Cookbook is highly readable and flows fairly well. However, there are a significant number of strange wording constructs and typos. One example comes from Chapter 7: "JSON is extremely simple to use than JavaScript; there are lot of REST services already out there that use XML." I have my suspicions of what this means (and wrote my interpretation when I filed this errata), but I cannot be sure what the intent was. Most of the cases of strange wording constructs are easier to figure out the intent for (many cases were strangely worded because adjectives were used where adverbs should have been used instead or vice versa), but the relatively large number of these strange wordings make me think HTML5 Data and Services Cookbook would have benefited from another and more thorough English grammar editing process. I'd describe the overall editing quality of HTML5 Data and Services Cookbook to be equivalent to a well-written blog post, but I typically expect even a well-written blog post to not be able to compare to a book in terms of editorial quality.
Conclusion
I really liked HTML5 Data and Services Cookbook. I learned several new things, reinforced some things I had previously learned, and had several ideas come to mind as I read the book. I particularly liked the book's approach of making liberal use of freely available open source frameworks and toolkits to do some of the recipes' heavy lifting. This approach made the recipes easier to implement and read and introduced me to some tools and frameworks I was not previously aware of. I also appreciated that most recipes covered fallback mechanisms that are available when the newer HTML5 feature is not supported in a particular browser. The many side notes and special emphases in HTML5 Data and Service Cookbook added tremendous value to me as I read the book.
The biggest downsides of HTML5 Data and Services Cookbook were related to presentation rather than to content. The code listings were not as easy-to-read as I would have liked and some of the grammar and sentence structure could have used more editing.
I strongly recommend HTML5 Data and Services Cookbook, especially for those who have similar HTML5 experience to mine. I've been away from it for a couple of years and this book helped me catch up on some of the latest happenings in the community, the specifications, the technologies, and the available libraries and toolkits. It reminded me of the excitement (new technologies and specifications that affect daily online and mobile experience) and the frustration (differing browser support for features, incompatibilities between browsers, and sometimes slowly evolving standards) of developing with HTML5.
Original posting available at http://marxsoftware.blogspot.com/ (Inspired by Actual Events)