Let me introduce you to a new useful book I discovered recently (thanks to Packt Publishing): “HTML5 Data and Services Cookbook“, by Gorgi Kosev and Mite Mitreski, published by Packt Publishing. If you are interested, you can check out more details about the book on the Packt website.
As the title states, the book is about HTML5 data and services. It is very detailed and describes all major HTML5 features very well. Unlike the book “Building Impressive Presentations with impress.js” about which I talked in my previous book review, this time the book is much more detailed and less concise, and spans 460 pages. The book consists of twelve well structured chapters, which I will try to sum up in this post.
The first chapter of the book is about displaying text in HTML5, namely:
- Number formatting;
- Displaying measurements;
- Date/time formatting;
- Displaying mathematical formulas;
- Displaying code;
- Rendering markdown;
- Autoupdating the values of fields.
In addition, it looks at how to create scrolling lists, sortable paginated tables, multiple-choice filters, range filters and combined complex filters.
The second chapter is about displaying different graphical data, like:
- Charts (using Flot): line charts, bar charts, pie charts, area charts, combined charts (e.g. combining an area and a line chart) and bubble charts;
- Maps (using Leaflet and OpenStreetMap): both with a marked location and with a path;
- Analog gauges;
- Tree structures (using JSON for storing the data contained in the tree);
- LED scoreboards (using web fonts).
Chapter three is about displaying animated data, which includes:
- Motion charts (using Rickshaw);
- Force directed graphs (using JSON for storing the data to display in the graph);
- Live range chart filters (using Rickshaw, again);
- Image carousels (using CSS3 3D transforms);
- Chart panning and zooming (using Flot);
- Web notifications (using the web notifications API);
- Interactive Geo charts (using JSON for storing the data to display in the chart).
Chapter four explains the interaction with HTML5 input components, like:
- Text input fields (including speech input, autofocus and placeholders);
- Date inputs (including date, month and week inputs);
- Time inputs (including timezone selection and datetime inputs);
- Telephone inputs (including also URL, search and email inputs, as well as input modes);
- Range inputs (or, in other words, sliders);
- Color pickers;
- Single-choice dropdowns;
- Multiple-choice select lists;
- Geolocation (using the geolocation API and Leaflet);
- File inputs (using the file API);
- Drag and drop file areas.
Some of the input types discussed enhance user experience by providing a clear way to input the desired data (like dates through a calendar, for example), while others provide semantics to the data (like the telephone input, for example).
Custom input components
Chapter five analyzes the creation and use of custom input components, which include:
- Basic rich-text editors (using the contentEditable attribute);
- Advanced rich-text editors;
- Drop-down menus;
- Custom dialogs;
- Autocomplete fields;
- Custom single-selection lists;
- Custom multiple-selection lists;
- Geographic location inputs.
Chapter six explains the validation of user input, including:
- Text length validation (including maxlength and spellcheck);
- Number validation by range (using min and max attributes);
- Pattern validation (using regular expressions);
- Advanced built-in constraints and custom validations;
- Password strength calculation;
- ZIP code validation;
- Asynchronous server-side validation;
- Combinations of client-side and server-side validation.
Chapter seven looks at how to serialize data for transmission and storage. The following cases are taken into consideration:
Decoding of base64 encoded binary data;
Encoding of binary data/text to base64;
Serialization of binary data into JSON;
Serialization and deserialization of cookies;
Serialization of forms into request strings;
Reading of XML documents with DOMParser;
Client-side serialization of XML documents.
Chapter eight explains the comunication with servers, by covering the following topics:
Creating HTTP GET requests to fetch JSON;
Creating requests using custom headers;
Fetching JSON data using JSONP;
Reading XML data from the server;
Using the FormData interface;
Posting binary files to the server;
Creating SSL connections using Node.js;
Making real-time updates using Ajax Push;
Exchanging real-time messages using WebSockets.
Chapter nine looks at the three client-side template languages Handlebars, EJS and Jade and explains how to:
- Render objects and arrays;
- Simplify templates with helpers;
- Reuse templates with partials;
- Use filters;
- Use mixins;
- Use layouts and blocks.
Data binding frameworks
Chapter ten covers the two frameworks Angular and Meteor.js, which allow to simplify data binding. More in detail it looks at the following aspects:
- Creating a basic Angular view with data binding;
- Rendering lists and using Angular controllers;
- Routing, filters, and backend services in Angular;
- Using Angular’s client-side validation;
- Making a chart component with Angular directives;
- Structuring applications for Meteor.js;
- Reactive programming and data in Meteor.js;
- Live HTML and user-specific data in Meteor.js;
- Security mechanisms in Meteor.js.
Chapter eleven covers the following recipes for client-side data storage:
- Data URI;
- Session and local storage;
- Reading data from files;
- Using IndexedDB;
- Limits of the storage and how to ask for more;
- Manipulating the browser history.
The last chapter explains how to:
- Play audio files;
- Play video files;
- Customize controls for media elements;
- Add text to your video;
- Embed multimedia;
- Convert text to speech using HTML5 audio.
Usually, appendixes stay unobserved and would not need to be part of a book review, but in this case they are quite useful, so they deserve a short appearance here. Appendix A provides a very useful guide to installing Node.js and using the node package manager (npm), while Appendix B covers a list of comunities and resources related with HTML.
As anticipated in the introduction, HTML5 Data and Services Cookbook is a very useful book. It covers all major HTML5 aspects related to data and services and each chapter provides a useful introduction, clear explanations and code examples which help to better understand the related argument. With its 460 pages the book may seem quite heavy to read, but due to its cookbook structure, you can also keep it at hand on your bookshelf or on your computer and use it as a reference in case you need to work with one of the techniques explained in the book, using the corresponding recipe and adapting it to your needs. Just remember to do as you would with any recipe in a cookbook: give it a personal touch, adding some spice here and there. As with many other books by Packt Publishing, with the book you get most of the code examples to download and try out, in order to better understand them and easily adapt them to your needs. But remember that some of the examples cannot be executed directly from your local machine, they need to be run on a server. I had the occasion to try out most of the examples from the book: some were techniques I already knew and had used, others will become an integrating part of my developer toolbox and others will probably wait for the right moment to be used on a future project, who knows. What about you? Have you had the occasion to read the book? Did you have an occasion to work with data and services in HTML5? Please feel free to post your comments below.