Just a year ago Paul Irish and several contributors started working on html5-boilerplate, a popular repository of boilerplate and best practices for creating cross-browser compatible, html5-enabled websites.

Thanks to the efforts of many front-end developers and researchers who have spent countless hours on developing and evolving best practices, html5 boilerplate is rapidly maturing and establishing itself as the de-facto standard html boilerplate.

The authors just celebrated the one-year anniversary with the release of version 2.0, delivering a well tested, versatile and most useful package. Here’s a brief excerpt of why h5bp is awesome:

• Cross-browser compatible (IE6, yeah we got that.)
• HTML5 ready. Use the new tags with certainty
• Build toolchain for optimizing images, minifying and concatenating js+css
• Optimal caching and compression rules, Mobile browser optimizations
• IE specific classes for maximum cross-browser control
• Handy .no-js and .js classes to style based on capability
• iOS, Android, Opera Mobile-adaptable markup and CSS skeleton
• CDN hosted jQuery with local fallback failsafe
• much more

App Engine Boilerplate 2.0

appengine-boilerplate is the easiest way to use html5-boilerplate 2.0 on App Engine. It provides a startup kit with h5bp and several app engine specific boilerplate resources and best practices:

• OpenID authentication + beatiful login UI with openid-selector
• Memcaching setup for requests and responses
• Flexible user-preferences model
• Templates and template addons
• Tools such as is_testenv() and slugify(url)
• Build tool for optimizing images, minifying and concatenating js+css
• Released under the BSD license — do with it what you want!

This let’s you skip the boring work of setting up a new app, and focus on building the idea!

Screenshot of the openid-selector plugin used for users logging in.

Tutorial

Here’s a quick step by step guide on starting a new project with appengine-boilerplate:

1. (optional) fork appengine-boilerplate on Github
2. Clone the repository

   git clone git@github.com:metachris/appengine-boilerplate.git

3. Configure upload_to_appengine.sh: set CMD_APPCFG to your local appcfg.py from the App Engine SDK
4. Start the appengine dev-server:

   [APP_ENGINE_SDK]/dev_appserver.py app/

5. Hack away! You can access the dev version via http://localhost:8080

Once you are ready to deploy to App Engine:

1. Create an app on App Engine, if you haven’t already
2. Set the application name in app/app.yaml
3. Invoke upload_to_appengine.sh which builds the production version of the app with minified and concatenated html, js and css files and optimized images. It will ask you to test the app and, if confirmed, will invoke the App Engine upload-script appcfg.py.

References

• App Engine Boilderplate on Github
• HTML5 Boilerplate, on Github
• App Engine Boilerplate v1.0
• Paul Irish