HTML 5 experimentation and demos I've hacked together. Click on the browser support icon or the technology tag to filter the demos (the filter is an OR filter).
Learn the power tools for your job: git, SASS, require.js and more
One day of tutorials run by 3 different teachers. Choose 4 topics from: git, require.js, SASS, testing, debugging and build processes - and master your tools.
| Demo | Support | Technology |
|---|---|---|
| Stream video and filter with canvas | ie: none firefox: none opera: live safari: none chrome: nightly | getUserMedia canvas |
| Stream video to the browser Also works on Opera Mobile 12 |
ie: none firefox: none opera: live safari: none chrome: nightly | getUserMedia |
| Drag and drop and XHR upload | ie: nightly firefox: live opera: none safari: none chrome: live | file dnd xhr2 |
| Hidden property | ie: none firefox: live opera: live safari: live chrome: live | hidden |
| Simple class manipulation | ie: none firefox: live opera: live safari: live chrome: live | classlist |
| Storage events | ie: live firefox: live opera: live safari: live chrome: live | storage |
| dataset (data-* attributes) | ie: none firefox: live opera: live safari: live chrome: live | dataset |
| History API using pushState | ie: none firefox: live opera: live safari: live chrome: live | history |
| Browser based file reading Not part of HTML5 | ie: none firefox: live opera: live safari: none chrome: live | file-api |
| Drag files directly into your browser Not directly part of HTML5 | ie: none firefox: live opera: none safari: none chrome: live | file-api dnd |
| Simple chat client | ie: none firefox: nightly opera: nightly safari: live chrome: live | websocket |
| Two videos playing in sync | ie: live firefox: live opera: live safari: live chrome: live | video |
| Interactive canvas gradients | ie: live firefox: live opera: live safari: live chrome: live | canvas |
| Canvas & Video | ie: live firefox: live opera: live safari: live chrome: live | video canvas |
| Video | ie: live firefox: live opera: live safari: live chrome: live | video |
| Canvas | ie: live firefox: live opera: live safari: live chrome: live | canvas |
| Content Editable | ie: live firefox: live opera: live safari: live chrome: live | contenteditable storage |
| Geolocation Works on Safari Mobile too | ie: live firefox: live opera: live safari: live chrome: live | geolocation |
| postMessage same domain | ie: live firefox: live opera: live safari: live chrome: live | postMessage |
| postMessage cross domain | ie: live firefox: live opera: live safari: live chrome: live | postMessage |
| drag and drop | ie: live firefox: live opera: live safari: live chrome: live | dnd |
| drag anything | ie: live firefox: live opera: live safari: live chrome: live | dnd |
| offline detection Works on Safari Mobile too | ie: none firefox: live opera: live safari: none chrome: none | offline events |
| navigator.onLine tests Doesn't use events, only polls | ie: live firefox: live opera: live safari: none chrome: none | offline |
| on/offline event tests | ie: none firefox: live opera: live safari: none chrome: none | offline events |
| offline application using the manifest FF 3.6 is still buggy - doesn't request manifest after initial load | ie: none firefox: live opera: live safari: live chrome: live | offline manifest |
| Storage | ie: live firefox: live opera: live safari: live chrome: live | storage |
| Web SQL Database Storage | ie: none firefox: none opera: live safari: live chrome: live | sql-database |
| Web SQL Database - rollback test | ie: none firefox: none opera: live safari: live chrome: live | sql-database |
| Web Workers watch out - uses a lot of CPU! example without - will hang your browser | ie: none firefox: live opera: live safari: live chrome: live | workers |
All content, code, video and audio is Creative Commons Share Alike 2.0
