In the sludgy, squdgy creek

Review:

I’ve just finished reading “HTML5 and CSS3” by Brian P. Hogan (http://www.bphogan.com/) and The Pragmatic Bookshelf. I’m not new to HTML and I’ve even read another book on HTML5, but I really learned a lot from this book, and enjoyed the author’s writing style and examples, enough to give this 4.5 of 5 stars. It’s a great introduction to the not-yet-finalized HTML5 spec, and has a very nice section on the new CSS3 features. With all HTML5 references I’ve seen so far, there is a fine line between what’s in the HTML5 spec, what’s in CSS3, and what are extras. I think this author did a good job in not blurring the lines, and I’ll likely use this book as a reference for that in the future.

I think one of the strong points of this book is the examples. I tried almost all of them, which was easy, because all of the source code was online. Another strong point is the fallback strategies presented, because practically speaking, we’ll always need fallback strategies for browsers that don’t support the latest spec. The only reason I didn’t give this book a full 5 stars is that I would have liked to see a little more about offline web applications, and I wanted some more depth in some of the examples, but that’s just me – I learn better by doing. I certainly feel more empowered to use HTML5 and CSS3 features now and recommend this book.

And here’s the overview, chapter by chapter:

Chapters 1 & 2 are just the acknowledgements and preface to the book, so not much to cover here.

Chapter 3 is an overview of HTML5 and CSS3. I like the way this chapter presents the changes to these standards by describing not only what the changes are, but why we should want to use them. For instance, there is more descriptive markup, less reliance on plug-ins for media, improved accessibility, and visual effects etc. It even contains a nice section on deprecated tags and attributes which I hadn’t seen elsewhere. For instance, I’m surprised to see that the target attribute of the anchor tag has been deprecated, but I’m very glad to know it.

Chapter 4 covers the new structural tags and attributes. The tags are: header, footer, nav, section, article, aside, meter, and progress. Custom attributes using the data- pattern can be read via getAttribute() — nice. I took several things out of this chapter: Don’t confuse aside with sidebar. “The aside is designed to show content related to an article. It’s a good place to show related links, a glossary, or a pullout quote.” There’s a nice technique for using JavaScript conditional comments to define the new element types in IE versions lower than 9:

There’s  also a nice example on how to use custom data attributes for window popups. In chapter 4, I also learned that I’ve been suffering from “divitis” for years now. You need to read this chapter to see what I’m talking about.

Chapter 5 covers the new form fields and attributes. The new form field types are specified by the input tag’s type attribute: ex. <input type=”text”> where “text” is the form field type. They include: email, url, tel (telephone number), search, range, number, date, datetime, and color. The new attributes are autofocus – used to focus on a specific form element; placeholder – browser supported placeholder text; and contenteditable – support for in-place editing of content. The author references and uses Modernizr in examples http://www.modernizr.com/. The examples are useful and extra functionality is used with jquery. I like the jquery way of life… to get things to work without jquery and enhance it with jquery, but some of the examples here need jquery to work, so the author proposes the idea of having completely independent html-only forms that post to the same server side script as the ajax actions – interesting idea, but could be a maintenance nightmare if you have a lot of them.

Chapter 6 is the first chapter that focuses on CSS. It covers these:

• :nth-of-type [pay:nth-of-type(2n+1){color: red;}]  – Finds all an elements of a certain type.
• :first-child [p:first-child{color:blue;}]  Finds the first child element.
• :nth-child [p:nth-child(2n+1){color: red;}]  Finds a specific child element counting forward.
• :last-child [p:last-child{color:blue;}]  Finds the last child element.
• :nth-last-child [p:nth-last-child(2){color: red;}]  Finds a specific child element counting backward.
• :first-of-type [p:first-of-type{color:blue;}]  Finds the first element of the given type.
• :last-of-type [p:last-of-type{color:blue;}] Finds the last element of the given type.
• Column support [#content{ column-count: 2; column-gap: 20px; column-rule: 1px solid #ddccb5; }] Divides a content area into multiple columns.
• :after [span.weight:after { content: “lbs”; color: #bbb; }]  Used with content to insert content after the specified element.
• Media Queries [media=”only all and (max-width: 480)”]  Apply styles based on device settings.

The chapter excels at showing how using some of the new features further separates content from presentation of that content. For instance, there is no need to specify that table rows are odd or even when you want to stripe the rows. It also does a good job presenting JavaScript options for adding these features to IE6-8. It introduced ie-css.js, which has morphed into selectivr.css http://selectivizr.com/ (author: Keith Clark).

Chapter 7 is all about improving accessibility and the parts of the WIA-ARIA spec that have made their way into HTML5. It covers the role,  aria-live attribute, and aria-atomic attributes (ex.  <div role=”document” aria-live=”polite” aria-atomic=”true”> ).

• role  – identifies responsibility of an element to screen readers. There are 2 types of roles, landmark roles and document roles. Landmark roles identify points of interest, such as navigation. Some html tags have default roles that can’t be overridden, such as the nav tag. It’s role is navigation. The landmark roles are: banner,  search, navigation, main, contentinfo, complementary, and application. The document roles are document, article, definition, directory, heading, img, list, listitem, math, note, presentation, row, and rowheader. ‘document’ is important because it means that the page is static content and not a web application.
• aria-live – identifies a region that updates automatically, possibly by Ajax. Options are polite or assertive. Polite is designed to not interrupt the user’s workflow, so a screen reader will not stop because a section is updated. Assertive is designed to interrupt, as it signals that a high priority content update has occurred. This should be used only when necessary.
• aria-atomic – identifies whether the entire content of a live region should be read or just the elements that changed. The true value instructs screen readers to read the entire contents of the changed region. A false value means to only read the nodes that have changed.

Chapter 8  covers the canvas tag. There is a nice example of using vector graphics to draw a logo, and I was happily introduced to the RGraph library, available at RGraph.net. I especially liked the example that uses the data-name and data-percent attributes along with RGraph and jquery to make a bar graph – a very useful technique to make your data available to everyone, but to have more interesting looking graphs for people who’s browsers support it.

Chapter 9 is the chapter on embedded audio and video and covers the, what-else?, audio and video tags. There is a nice, succinct overview of the challenges of audio and video in different browsers, on different devices, and then some good fallback tips. Some useful links are included for: Video For Everybody and Flow Player, which has an open source Flash media player. There is also a section on the limitations of HTML5 video. For instance, there is no provision for streaming video. (translation, the entire video needs to be downloaded to see any particular part of it) Also, there is no rights management.

Chapter 10 is entitled “Eye Candy”. It’s really about the extra, cool stuff in CSS3, including: border-radius, RGBa support, box-shadow, rotation (transform), gradients (linear-gradient), and @font-face. The example page is easy to play around with on your own. These are some of the useful references listed in this chapter for font support:

• http://www.typekit.com/
• http://code.google.com/apis/webfonts/
• http://www.fontsquirrel.com/fontface/generator

Chapter 11 is about client-side data, and more specifically Web Storage and Web SQL Databases which aren’t really part of HTML5. They have been spun off from it. It covers:

• localStorage – stores data in key/value pairs, tied to a domain, and persists across browser sessions. 4kb max
• sessionStorage – stores data in key/value pairs, tied to a domain, and is erased when a browser session ends. 4kb max
• Web SQL Databases – fully relational databases with support for creating tables, inserts, updates, deletes, and selects, with transactions. It’s tied to a domain and persists across sessions.  Mozilla has vowed not to support Web SQL, so it may not survive, but it’s used in mobile browsers so may be useful for mobile web apps. The W3C is working towards implementing the IndexedDB specification.
• Offline Web Applications – Defines files to be cached for offline use, allowing applications to run without an Internet connection. This is just touched on.

Chapter 12 covers other stuff outside of HTML5, history, cross-document messaging, web sockets, and geolocation. There’re simple succinct examples of each of these. I just wish these were in the spec today.

Chapter 13 is an introduction to what’s next and touches on CSS3 transitions, web workers (background processing for JS – yeah!), 3d canvas with WebGL, IndexedDB, drag and drop (dnd), and form validation. Some points taken away: dnd is not ready for primetime. IndexedDB may be the future of client-side data stores, but is not very far along.

Chapters 14-18 are really reference chapters. Chapter 14 is a quick reference of the new tags and attributes of HTML5, and of the new features of CSS3. Chapter 15 is a nice jquery primer, so you can skip it if you’ve used even a little jquery before. Chapter 16 lists some tools and techniques to encode audio and video for use with the new HTML5 audio and video tags. Chapter 17 is a list of external resources (links), and chapter 18 is a bibliography.

Review:

I’ve just finished reading “HTML5: Up and Running” by Mark Pilgrim (http://diveintohtml5.org/). I liked the book, as it’s a good introduction to the new features of HTML5, and even broken down the way I wanted it to be, i.e. a chapter for each new set of features. However, I was a little disappointed by some of it, so I feel it’s deserving of 3 stars out of 5. The good: an entertaining history of the HTML img tag; introductions to 3rd party libraries Modernizr, html5shiv, and explorecanvas; the example board game in the chapter on the canvas tag (later updated to use local storage); the development gotchas mentioned in the chapter on offline web applications; the detail on new form elements; and the chapter covering microdata. The bad: too much emphasis on Modernizr in chapter 2; too much detail on codecs in the video chapter; and an emphasis on geo.js in the geolocation chapter.

I don’t think I’ll refer back to this book in the future, as it really is just an introduction to HTML5 features, and there are lots of places on the web I can find such a list. If you’ve already been introduced to these features, you might be better off finding a more in depth reference on HTML5. I’ll be looking for one myself, after the new year.

And here’s the overview, chapter by chapter:

Chapter 1 has a nice little section on the history of HTML5 and an example of how the img tag made its way in. A story is a nice start to the book.

Chapter 2 contains a brief listing of the new HTML 5 features, with a short description of each, and the way to detect if your browser supports it. There’s too much of an emphasis on the Modernizr library, though it’s certainly nice to learn that it exists. I also found a useful link to Video for Everybody! in the HTML 5 video section, which I’m likely to look into.

Chapter 3 contains a quick look at some changes in HTML 5 from previous versions, and then proceeds to show a list of the new semantic elements. These are all included in a sample web page with an interesting technique to use these today in non-capable browsers via html5shiv:

• section
• nav
• article
• aside
• hgroup
• header
• footer
• time
• mark

As someone that uses the keyboard  a lot for navigation, and can imagine how cumbersome it can be to skip over links in screen readers, I found this technique for Skip Navigation particularly interesting: http://webaim.org/techniques/skipnav/.

Chapter 4 is an introduction to the canvas element. This is the browser element that allows you to “draw” on a web page using JavaScript. This is a nice basic description with browser compatibility and a straightforward example that happens to be a simple board game. It makes me want to really dig in. The canvas element has been supported in most browsers for a while now, but not in IE < version 9. But explorercanvas exists to imitate the Canvas in current versions of IE.

Chapter 5 introduces us to the video element, <video />. There is probably more details about audio and video codecs and media container formats than I really need or want to know just now, but the inclusion of this information, is useful for future reference and to get across the idea that in general, video on the web is not simple. The things that struck me are: “There is no single combination of containers and codecs that works in all HTML5 browsers.” and: “To make your video watchable across all of these devices and platforms, you’re going to need to encode your video more than once.” There’s also a nice sampling of video encoding tools, including one for Firefox called Firefogg  which encodes Ogg Video (Theora video + Vorbis audio in Ogg container).

Chapter 6 is a brief description of the geolocation support in HTML5. It doesn’t really go very deep and it references a library, geo.js, that uses gears, but Google is not continuing with Gears: http://gearsblog.blogspot.com/2010/02/hello-html5.html, so I’m not sure how useful this library is.

Chapter 7 presents an overview of Local Storage. It has a nice history overview and some details on how to use it, but it does not go into much depth. There is a nice example of how to save and restore a game’s state though. There is extra stuff on Web SQL Database and IndexedDB, but since this stuff is not production ready, it’s interesting, but not very usable.

Chapter 8 contains a good introduction to offline applications. This seemed like particularly good information with a bunch of gotchas for developing apps that work offline, so I think this chapter was just right. I’m sure once I try to develop an app that works offline, I’ll want to dig in deeper, but it’s a nice start. After all, with mobile apps use on the rise, this could be very important info.

Chapter 9 includes the new list of form elements. First off: Thanks for placeholder text!! I won’t need to write JavaScript to do this anymore. Any input field can now contain placeholder text. There’s also a new autofocus attribute, so sites can specify which form field of which form should get focus when a page is loaded.

The new input types are:

• email
• url
• number (with additional attributes: min, max, & step) – can be represented as a spinner
• range (also supports: min, max, & step) – can be represented as a slider
• date
• month
• week
• time
• datetime
• datetime-local
• search
• color (which is not currently supported by any browsers)

If a browser doesn’t support the new type, it will just fall back to type=”text”, meaning sites can use these new types right now. HTML5 does specify browser based validation of these new fields, but only Safari has any support at all for this so far (email, url).

Chapter 10 is microdata: “Microdata annotates the DOM with scoped name/value pairs from custom vocabularies.” This chapter describes HTML5 microdata, and some specific examples of how to markup your markup to use it. The examples use microdata formats from Google available at data-vocabulary.org, including ones for event, person and review. This lets you add semantic meaning to your markup without needing more extensions to HTML. Google uses some microdata in it’s search results pages.