HTML5 Showcase for Web Developers: The Wow and the How
Amplify clipping likes the HTML5 also. I wish all the web pages were using the html5 transition, so I could clip multiple pages.
Gotta see the Google demo on Chrome. Make sure to enable about:flags | Web Audio
Amplify’d from www.htmlfivewow.com
The Wow and the How
All code is open sourced at http://html5wow.googlecode.com
Please give us feedback! http://goo.gl/ac8n7
Ask questions in Google Moderator: http://goo.gl/mod/XKDL
Binary data on the web is was painful!
xhr.open('GET', '/path/to/image.png', true);
// Trick to pass bytes through unprocessed.
xhr.overrideMimeType('text/plain; charset=x-user-defined');
xhr.onreadystatechange = function(e) {
if (this.readyState == 4 && this.status == 200) {
var binStr = this.responseText;
for (var i = 0, len = binStr.length; i < len; ++i) {
var c = binStr.charCodeAt(i);
//String.fromCharCode(c & 0xff)
var byte = c & 0xff; // byte at offset i
}
}
};
xhr.send();
HTML5 ♥ binary data New features let you:
- Import from the filesystem or the web.
- Create new files from scratch.
- Manipulate existing file data.
- Store file data on the client.
- Publish files back to the web.
New data types
ArrayBuffer
Uint8Array
Uint16Array
Uint32Array
Int8Array
Int16Array
Int32Array
Float32Array
mport Publish Fetch binary file: new hotness BlobBuilder is prefixed in Chrome 12+ as window.WebKitBlobBuilder().
xhr.open('GET', '/path/to/image.png', true);
xhr.responseType = 'arraybuffer';
xhr.onload = function(e) {
if (this.status == 200) {
var uInt8Array = new Uint8Array(this.response); // Note: not xhr.responseText
var byte3 = uInt8Array[4]; // byte at offset 4
}
};
xhr.send();
Import Getting file handles: File/FileListGetting access to the native file system is easier. New capabilities yield more ways to get files in/out of your app. Easy import. Easy export.
var files = e.target.files; // FileList of File objects.
for (var i = 0, f; f = files[i]; ++i) {
console.log(f.name, f.type, f.size,
f.lastModifiedDate.toLocaleDateString());
}
};
mport Directory upload
var out = [];
for (var i = 0, f; f = e.target.files[i]; ++i) {
out.push(f.webkitRelativePath);
}
document.querySelector('output'),textContent = out.join('/n');
};
Import Directory upload
var out = [];
for (var i = 0, f; f = e.target.files[i]; ++i) {
out.push(f.webkitRelativePath);
}
document.querySelector('output'),textContent = out.join('/n');
};Import Drag & drop
reader.onload = function(e) {
document.querySelector('img').src = e.target.result;
};
function onDrop(e) {
reader.readAsDataURL(e.dataTransfer.files[0]);
};
