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.html
http://gildas-lormeau.github.io/zip.js/demos/demo2.html
http://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

Made with Slides.com