Keith Dawson: Develop in the Cloud
This story was written by Keith Dawson for UBM DeusM’s community Web site Develop in the Cloud, sponsored by AT&T. It is archived here for informational purposes only because the Develop in the Cloud site is no more. This material is Copyright 2012 by UBM DeusM.

What You Can Do Without Javascript

July's Mozilla Dev Derby provided arresting examples of the flexibility of plain old HTML+CSS.

A recent Mozilla Dev Derby provides eye-catching examples of what can be done with nothing more than HTML and CSS.

Mozilla's Dev Derby is a contest that runs every month. Each contest is themed. Prizes are modest -- an Android phone at the top end -- so nobody enters these competitions for the swag. They enter to learn and to stretch their muscles as developers.

July's contest asked entrants to explore the fertile space of the surprising applications and features that can be built strictly using HTML5 and CSS3; no Javascript allowed. This contest brought creativity out of the Web's woodwork. The number of entrants was nearly twice what it had ever been before, "More than seventy amazing demos of how powerful declarative markup can be," in the words of Mozilla's John Karahalis.

The winning entry was Honey Pursuit: Yet Another Love Saga. It is a complete if simple interactive game, with intro and "outro," credited to "HTML5 Entertainment, in association with CSS3 Animation Studios." The only Javascript in view is in service of the Dev Derby's presentation of the entrants and winners. The game itself, hosted in an iframe, consists of about 220 lines of HTML and 2,900 of CSS.

Go ahead, play the game through. It doesn't take long (the longest part is the intro). I'll wait.

I for one would not have believed that such an experience could be constructed without any Javascript, using only declarative markup. Yet the game is only one of a dizzying array of demonstrations of the possibilities latent in HTML5 and CSS3. Others include:

While some of the contestants are deeply experienced developers (such as Stu Nicholls, the creator of the image gallery linked above, who is proprietor of CSSPlay.co.uk), others are just starting out -- like the 16-year-old portfolio creator. Mozilla puts on these contests for their educational value. Even just reading through and understanding the invitation to a Derby -- see the links in the next paragraph -- provides a foundation for the contest's subject matter. From there, diving in to figure out what you want to create is bound to solidify the knowledge.

The Mozilla Developer Network is now accepting entries for the contests related to Geolocation (September), CSS Media Queries (October), and the Full Screen API (November). The Dev Derby is the place to start.