Web-front-end Report
May 30th, 2014
Lu Yuan
Overview
Upgrades (2)
Experimental APIs (3)
Skills, Tricks and Traps (3)
Useful Tools (3)
Others
Chrome 36
http://blog.chromium.org/2014/05/chrome-36-beta-elementanimate-html.html
element.animate()
elem.animate([ {transform: 'translateX(0px)'}, {transform: 'translateX(100px)'} ], 3000
HTML Imports
<head> <link rel="import" href="/path/to/imports/stuff.html"> </head>
Data-binding with Object.observe()
ES6 draft is now available
http://esdiscuss.org/topic/rev25-es6-draft-is-now-available
ECMAScript i18n API
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl
http://www.ecma-international.org/ecma-402/1.0/#sec-8
Properties
-
Intl.Collator - Constructor for collators, objects that enable language sensitive string comparison.
-
Intl.DateTimeFormat - Constructor for objects that enable language sensitive date and time formatting.
-
Intl.NumberFormat - Constructor for objects that enable language sensitive number formatting.
Demo
http://192.168.5.14/luyuan/es_i18n/i18n.html
var date = new Date(Date.UTC(2012, 11, 20, 3, 0, 0));
// toLocaleString without arguments depends on the implementation,
// the default locale, and the default time zone
alert(new Intl.DateTimeFormat().format(date));
// → "12/19/2012" if run in en-US locale with time zone America/Los_Angele
CSS @supports CR
http://davidwalsh.name/css-supports
http://www.w3.org/TR/css3-conditional/#at-supports
In CSS:
@supports (display: flex) {
div { display: flex; }
}@supports not (display: flex) {
div { float: left; } /* alternative styles */
}@supports ((display: -webkit-flex) or
(display: -moz-flex) or
(display: flex)) and (-webkit-appearance: caret) {
/* use styles here */
}CSS @supports
In JavaScript:
var supportsFlex = CSS.supports("display", "flex");var supportsFlexAndAppearance =
CSS.supports("(display: flex) and (-webkit-appearance: caret)");
var supportsCSS = !!((window.CSS && window.CSS.supports) || window.supportsCSS || false);
Ambient Light API CR Firefox on Mac OS X
http://flippinawesome.org/2014/05/27/introduction-to-the-ambient-light-api/http://aurelio.audero.it/demo/ambient-light-api-demo.htmlhttp://www.w3.org/TR/ambient-light/
window.addEventListener('devicelight', function(event) {
console.log('The current value of light is ' + event.value + ' lux');
// 勒克斯（lux，法定符号lx）照度单位
// 1 勒克斯等于 1流明(lumen,lm)的光通量均匀分布于 1㎡ 面积上的光照度。
});
if ('ondevicelight' in window) {
// API supported. How much light is there?
} else {
// API not supported :(
}
monitor & monitorEvents
unmonitor & unmonitorEvents
https://plus.google.com/+UmarHansa/posts/jf4mCvrayk8
function monitor(fn) { [Command Line API] }
function monitorEvents(object, [types]) { [Command Line API] } 
Internal Implementation
- monitor, unmonitor
JavaScript wraps C++ native
Add and remove Breakpoint
- monitorEvents, unmonitorEvents
Pure JavaScript
Add and remove custom event
Overwite toString() to return [Command Line API]
NaN
Not A Number, Not A NaN!
http://ariya.ofilabs.com/2014/05/the-curious-case-of-javascript-nan.html
isNaN === Number.isNaN
isNaN('x')
Number.isNaN('x')
Analysis
v8natives.js
function GlobalIsNaN(number) {
if (!IS_NUMBER(number)) number = NonNumberToNumber(number);
return NUMBER_IS_NAN(number);
} function NumberIsNaN(number) {
return IS_NUMBER(number) && NUMBER_IS_NAN(number);
} global.isNaN -- ECMA-262 5th Edition
Number.isNaN -- ECMA-262 6th Edition
http://people.mozilla.org/~jorendorff/es6-draft.html#sec-number.isnan
DevTools Snippets
A collection of helpful snippets to use inside of browser devtools
http://bgrins.github.io/devtools-snippets/
zip.js
http://gildas-lormeau.github.io/zip.js/
zip.js provides a low-level API for writing and reading large zip files
(up to 4GB with File writer API).
zip-fs.js provides a high-level filesystem API.
This library depends on Typed array (WebGL) and these APIs optionally:
- Web workers
- File
- File writer
- File directories and system
Demo
http://gildas-lormeau.github.io/zip.js/demos/demo1.htmlhttp://gildas-lormeau.github.io/zip.js/demos/demo2.htmlhttp://gildas-lormeau.github.io/zip.js/demos/demo3.html
Compatibility
This library works fully with Chrome, Firefox, Safari 6 and Internet Explorer 10.
With Safari 5 and IE9, you must disable Web Workers and use a Typed Array polyfill.
Storage
Asynchronous browser storage with multiple back-ends (IndexedDB, WebSQL, localStorage)
https://github.com/ask11/storage
// set
storage('key', 'val', function(err) {});
storage({ key: 'foo', key2: 'val2'}, function(err) {});
// get
storage('key', function(err, val) {});
storage(['key', 'key2'], function(err, all) {}); // all.length == 2
// delete
storage('key', null, function(err) {});
storage(['key1', 'key2', 'key3'], null, function(err) {});
BridJS
runtime binding C function and struct without writing any extra native code
https://github.com/jiahansu/BridJS/
double testMultiplyFunction(const int16_t w, const int32_t x,const long y, const LONGLONG z, const double e);
var bridjs = require('../lib/bridjs.js'),
Sig = bridjs.Signature;
var NativeModule = bridjs.defineModule({
testMultiplyFunction: bridjs.defineFunction(Sig.double, Sig.int16, Sig.int32, Sig.long,
Sig.longlong, Sig.double) }, libraryPath);
var nativeModule = new NativeModule();
var result = nativeModule.testMultiplyFunction(2,2,2,2,2.5);
Others
Introducing Socket.IO 1.0
http://socket.io/blog/introducing-socket-io-1-0/
Lightweight Bootstrap NodeJS Apps Build Using ExpressJS 4, MongoDB/Mongoose, Authentication with Passport.js, Jade and GruntJS as Task Automation
https://github.com/aredo/express4-bootstrap-starter
Communicating Large Objects with Web Workers in javascript
http://developerblog.redhat.com/2014/05/20/communicating-large-objects-with-web-workers-in-javascript/
An Introduction to IndexedDB
http://dev.opera.com/articles/introduction-to-indexeddb/
Thanks
Web-front-end Report On May 30th, 2014
By luyuan
Web-front-end Report On May 30th, 2014
Web-front-end Report On May 30th, 2014 by Lu Yuan
