Another foreword – HTML5 in Action

Keeping the streak alive, I was asked to provide a foreword for another book, this time HTML5 in action by Robert Crowther, Joe Lennon, and Ash Blue. So here is what I had to say:


Explaining what HTML5 is can be a very daunting task. I’ve been doing this more or less since its inception and I am still amazed just how many myths and how much confusion is there on the topic.

With HTML5 we re-booted web development. The world of HTML4.01 and the non-starter XHTML left those who wanted to use the web as a platform for applications stranded. HTML4 was meant for linked documents and XHTML was far too strict for its own good and it lacked real support in browsers.

HTML5 started with a clean slate. We analysed what was used on the web and added a lot of features we didn’t have before, like CANVAS for creating visuals on the fly or accessing images and videos on a pixel level, native audio and video without the need for plugins and forms that validate in the browser without us having to write extra JavaScript. We also started mudding the waters by merging HTML and JavaScript functionality – a lot of HTML5 will not do anything without accessing the elements via a JavaScript API. This confuses a lot of people. We moved on from a document based web and in that process we need more technical know-how. And this means we need to rethink a few of our “best practices” now which can annoy people so that they spread nasty rumours about the viability of HTML5 as a choice for professional development.

HTML5 is built on the robustness principle, which means that a browser will make a lot of educated guesses what you might have meant when you make a syntax error instead of simply giving up and showing an error. This gives it backwards compatibility and we will be able to show pages developed for a never-to-arrive XHTML world in browsers these days. A large part of the standard is just that – it tells you how to write a browser that renders HTML5 rather than using it as a web developer. Again, this angers some people and they shout about the verbosity of the standard.

HTML5 is also the new hotness. A lot of advertising talk, shiny demos and promises of fidelity that matches native apps on phones make us cynical battle hardened web developers think back on Java, Flash and Silverlight and their promises and sigh. We have a lot of buzz about HTML5 and a lot of things that are not part of the standard are simply declared part of it as it makes a good punch line.

When it comes to extending the language and bringing new features into it we are running wild right now. Every browser maker and web company comes up with great new concepts on almost a weekly level. That can be frustrating for developers who just want to get a job done. Can you rely on the functionality that is currently developed or will the standard be changed later on? We are pushing browsers further into the operating system and allow them to access hardware directly which comes with security and robustness issues that need to be fixed by trial and error. Can you take that risk with us when it comes to delivering your product?

These are exciting times and when you want to be part of the ride you can help forge the future development environment for all of us. If you don’t have the time to follow the discussions on mailing lists, do a lot of browser testing in previews and propose own ideas you can be left quite confused.

And this is where a book like this comes in. Instead of promising you a cornucopia of functionality that will soon be available you get examples that work right now based on examples that worked in the past. Instead of getting experimental demos you learn how to build production code based on proven ideas but using the features in modern browsers that make it easier for us developers and much more enjoyable for our end users. All the examples come with a legend telling you which browsers support the features and you learn how not to give them to old browsers that will choke on them.

You will learn how to use HTML5 now, using secure and intelligent solutions like Modernizr and HTML5 Boilerplate and you will come out at the end understanding how to write things in HTML5 that work right now. This will make you a part of the movement to get HTML5 “production ready” for all of us.

Those who live on the bleeding edge of defining the next browser and language features need implementations in the wild right now. We are past the show and tell stage and we need to get to deliver and enhance. And you can become an integral part of this process by following the advice and applying the examples you find here. Go forth and deliver.

View full post on Christian Heilmann

VN:F [1.9.22_1171]
Rating: 0.0/10 (0 votes cast)
VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

Some thoughts on CSS – a foreword

The other day I was asked to write a foreword for a book on CSS by someone I inspired, so here is what I wrote.

When Cascading Style Sheets got supported by browsers, a lot of things changed. I remember the first article I read about them was saying that using them could increase the speed of your web sites tenfold and your development and maintenance time will be cut in half.

That was totally true, as this was a time when connecting to the internet sounded like Dubstep sounds now and 56k connections were luxury. In order to style things we needed images, background colours, table layouts and font elements. And of course lots and lots of spacer gifs and   to create padding.

Fast forward to now, and you will see that it is almost impossible to think of any web design without CSS. In the last year alone we got so many cool new features to play with that animation and transformations with JavaScript can soon be as forgotten as spacer gifs are now. We can set colours in various formats, we can add our own fonts, create patterns and gradients, we have transformations and transitions and we can define animations. We can generate content in CSS in case we need it only for a visual effect and we have all kind of interaction selectors when the user hovers over something, clicks it or even selects text in the page.

A lot of this comes with a price: we have to repeat a lot of settings to support all the browsers (and those coming in the future) and there are differences in implementation that can make our life harder. This, however, is a temporary problem. Sadly enough it doesn’t stop people from repeating mistakes of the past like favouring one browser without providing fallbacks for others and older ones. We did that already with IE6 which is why now a lot of our products are hard to maintain and upgrade.

In general, the ubiquity of CSS in our development world made it a bit less magical. We actually see it as a given and there is hardly any thought and documentation out there how to write well-structured, clean and simple CSS that does the job. Our high speed connections, caching and a plain disregard of CSS amongst “real developers” made our style sheets a dumping ground rather than getting the same love we give our Python or JavaScript. Want proof? Github, a rather simple looking site loads 400KB of CSS in over 20000 lines of code. Facebook used to have over 2MB of CSS before some friends of mine re-engineered the CSS using an “object oriented approach” and last but not least a new bug in Internet Explorer got discovered: it only loads 32 external style sheets before giving up.

Now, as an old-school, hand-craft developer I shook my head at the mere thought of 32 style sheets, but the fact of the matter is that CMS and other systems create a sheet for each module on a large site and instead of concatenating them just add them to the template as a new link element.

I once wrote a 300 line CSS document for a massive, international web site. When I left the company, I looked at it half a year later and it grew to a whopping 3800 lines with massive selector chains and very specific class names like “headingright3c6bold”. In order to create a visual change the poor maintainers who obviously had no clue how CSS works (or didn’t care) added random HTML elements to the templates to have a handle to increase the specificity and many other crimes against CSS were committed before my very eyes.

That is why I am happy that there is a new movement, a desire to clean up the CSS we write and make it snappy and fast again, going full circle to the original promise of CSS.

This book is part of this movement, and the writer shows insight, foresight and interest in a topic that many consider too confusing to care about. I for one am very happy to see it come out and hope that by reading it you get inspired to put the art and the magic of speed back into your style sheets.

View full post on Christian Heilmann

VN:F [1.9.22_1171]
Rating: 0.0/10 (0 votes cast)
VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)