You have probably seen face detection at work in programs like iPhoto and Picasa, but what if you could do that performantly in JavaScript? Chinese developer Liu Liu has done the honors, and implemented Face Detection in JavaScript via HTML5 Canvas.

The algorithm is implemented on top of a JS port of a C-based computer vision library by the same author. It works off a grayscale version of the image, and seems to be quite reliable in detecting faces in photographs. The demo then draws a red box around each face in the picture, but the library could be used to do much more interesting things with this data.

Published under: Utilities | License Free

VideoJS is an HTML5 Video Player with 3 core parts: An embed code (Video for Everybody), a Javascript library (video.js), and a pure HTML/CSS skin (video-js.css). Using Video for Everybody as the embed code means you know it’s compatible with many devices (including ones without javascript).

The javascript library fixes browser & device bugs, and makes sure your video is even more compatible across different browser versions. The pure HTML5/CSS skin ensures a consistent look between HTML5 browsers, and easy custom skinning if you want to give it a specific look, or brand it with your own colors.

Published under: Video | LGPL License

audio.js is a drop-in javascript library that allows HTML5’s <audio> tag to be used anywhere.

It uses native <audio> where available and an invisible flash player to emulate <audio> for other browsers. It provides a consistent html player UI to all browsers which can be styled used standard css.

audio.js can only play mp3 files and can be extended in any way like playing a single file or a list of songs.

Published under: Audio | MIT License

Easel JS is a Javascript library for working with the HTML5 Canvas element. The new Canvas element in HTML5 is powerful, but it can be difficult to work with. It has no internal concept of discrete display elements, so you are required to manage updates manually. The Easel Javascript library provides a full, hierarchical display list, a core interaction model, and helper classes to make working with Canvas much easier.

Easel JS was built by gskinner.com, and is released under the MIT license, which means you can use it freely for almost any purpose including commercial projects.

Published under: Framework | MIT License

Jo is a JavaScript framework for HTML5 capable browsers and devices. It was originally designed to work on mobile platforms as a GUI and light data layer on top of PhoneGap.

Since its creation, Jo has also been tested successfully as a lightweight framework for mobile browsers, newer desktop browsers, and even Dashboard widgets. Jo is under a friendly OpenBSD License. Minified JavaScript is just over 8K with no dependancies.

Published under: Framework | License Free

Tile5 is an open source HTML5 mapping JavaScript library that enables developers to integrate existing mapping platforms for providing a rich HTML5 experience.

It is compatible with most of the mapping providers like Google, Bing, Yahoo, MapQuest and more.

Besides the API for mapping, the library is also functional for creating more generic tiling application interfaces.

With the compatibility HTML5 offers, Tile5 is targeted at both desktop and mobile browsers.

Published under: Maps | MIT License

AddyOsmani is going to teach us how to create a useful hover-based user interface using jQuery, CSS3, HTML5 and @font-face. Why a hover-based interface? With the popularity of touch-based web applications simplifying the way that people can use sites on mobile devices, there’s room for us to look into ways of making it even easier for people to use sites in desktop-based browsers too.

WanderWall achieves that and what it could easily be used for a portfolio or business site but the concepts we’ll learn could certainly be used to expand the idea further.

Published under: Menu | License Free

HTML5 Boilerplate is the professional badass’s base HTML/CSS/JS template for a fast, robust and future-proof site.

After more than two years in iterative development, you get the best of the best practices baked in: cross-browser normalization, performance optimizations, even optional features like cross-domain ajax and flash. A starter apache .htaccess config file hooks you the eff up with caching rules and preps your site to serve HTML5 video, use @font-face, and get your gzip zipple on.

Boilerplate is not a framework, nor does it prescribe any philosophy of development, it’s just got some tricks to get your project off the ground quickly and right-footed.

Published under: Framework | License Free

HTML5 Cheat Sheet:

 

HTML5 Canvas Cheat Sheet:

 

HTML5 Glossary:

Published under: Cheat Sheet | Information

Sencha Touch allows your web apps to look and feel like native apps. Beautiful user interface components and rich data management, all powered by the latest HTML5 and CSS3 web standards and ready for Android and Apple iOS devices. Keep them web-based or wrap them for distribution on mobile app stores.

Sencha Touch provides you with many features including:

  • Bind non-standard touch events to your elements like tap, doubletap, swipe, pinch, and rotate to create amazing interactions.
  • Load data from AJAX, YQL, or JSONp, bind it to visual components, then take your data offline with localStorage.
  • Discover a user's location and display nearby points of interest in our Google Maps component.
  • Sencha Touch is built with web standard HTML5, CSS3, and Javascript, making it a very flexible mobile app framework.
  • Easily shift theme coloring, add style, and use our pre-included icons to deliver a phenomenal visual experience.
  • Animate between views using one of our many predefined animations, with loads of configuration options.

Published under: Framework | GPL License