Fork me on GitHub

2016-09-20のJS: AngularJS 2、Node 6.6.0、Chrome 54の開発者ツール

Edit on GitHub 編集履歴を見る

JSer.info #297 - Angular 2.0.0がリリースされました。

AngularJS 2.0.0以降では、Semverに従ってバージョンを上げていくようです。


Node.js 6.6.0がリリースされました

6.6.0ではEventEmitterのmemory leak警告と
PromiseのUnhandled rejectionの警告を次のように書くことで受け取れるようになっています。

process.on('warning', (warning) => {
    console.log(warning);
});

ブラウザでは自動でコンソールにPromiseのUnhandled Rejectionの警告が表示されます。
Node.js 6.6.0でも同様にデフォルトでstderrへ警告が出力されるようになりました。

const p = Promise.reject('This was rejected');
// UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 1): This was rejected

また、これらの警告は"warning"イベントとしてキャッチすることができるようになっています。

今まで、EventEmitterのメモリリーク警告はstderrにログを出すだけでテストも難しいものでしたが、同じようにwarningイベントで取得できるようになりました。

const events = require("events");
const event = new events.EventEmitter();
event.setMaxListeners(1);
process.on('warning', (warning) => {
    console.warn(warning.message);
    // Warning: Possible EventEmitter memory leak detected. 2 test listeners added. Use emitter.setMaxListeners() to increase limit
});

event.on("test", () => {});
event.on("test", () => {});

Chrome 54 Betaがリリースされましたが、開発者ツールも同様に更新されています。

CPU Throttling、TimelineにNetwork viewの表示、スクロールパフォーマンスのProfile、SourceパネルにTimelineのデータ表示などのボトルネックを見つける機能が追加されています。


ヘッドライン


Angular, version 2: proprioception-reinforcement

angularjs.blogspot.com/2016/09/angular2-final.html

AngularJS ReleaseNote

AngularJS 2リリース


Node v6.6.0 (Current) | Node.js

nodejs.org/en/blog/release/v6.6.0/

node.js ReleaseNote

Node v6.6.0リリース。
EventEmitterのmemory leak警告、
PromiseのUnhandled rejectionの警告が、process.on('warning', (warning) => { })でキャッチできるように


jQuery UI 1.12.1 | jQuery UI Blog

blog.jqueryui.com/2016/09/jquery-ui-1-12-1/

jQuery UI ReleaseNote

jQuery UI 1.12.1リリース。
新しいテーマの追加、Checkboxradio widgetの追加、classesオプションの追加など


Release Notes for Safari Technology Preview Release 13 | WebKit

webkit.org/blog/6937/release-notes-for-safari-technology-preview-release-13/

safari webkit ReleaseNote

Safari Technology Preview Release 13 リリース。
adoptedCallbackのサポート、CSS.escapeの実装、クロスオリジンのチェック強化など


Chromium Blog: Chrome 54 Beta: Custom Elements V1, BroadcastChannel, and media platform improvements

blog.chromium.org/2016/09/chrome-54-beta-custom-elements-v1.html

Chrome ReleaseNote

Chrome 54βリリース。
Custom Element v1、BroadcastChannelのサポート。
Resource Timing API のtransferやencoded/decodedのサポート、initTouchEventの削除など


アーティクル


Introducing debugger.html ★ Mozilla Hacks – the Web developer blog

hacks.mozilla.org/2016/09/introducing-debugger-html/

firefox debug

debugger.htmlというソースパネルライクな新しいデバッガーについて。
Firefox、Chrome、Node.jsに対応し、Remote Debug Protocolでデータをやり取りする。
Firefoxの開発者ツールに統合される予定


DevTools Digest, September 2016: Perf Roundup | Web Updates - Google Developers

developers.google.com/web/updates/2016/09/devtools-digest

debug Chrome

Chrome 54での開発者ツールについて。
CPU Throttling、TimelineにNetwork viewの表示、スクロールパフォーマンスのProfile、SourceパネルにTimelineのデータ表示など


JS web frameworks benchmark – Round 4 | Stefan_Krause.blog()

www.stefankrause.net/wp/?p=316

JavaScript library

AngularやReactなどのライブラリやフレームワークのベンチマーク比較


How Developers use Node.js - Survey Results | @RisingStack

blog.risingstack.com/node-js-developer-survey-results-2016/

node.js アンケート

Node.jsを使ったサーバサイド開発についてのアンケート結果


Why Use Flow? · Aria

blog.aria.ai/post/why-use-flow/

flowtype

FlowによるStatic typeについて


スライド、動画関係


The future of ES6 (Jafar Husain) - Full Stack Fest 2016 - YouTube

www.youtube.com/watch?v=3pKNRgResq0

JavaScript 動画

現在策定中の仕様も含めて非同期処理について。
Promise、Async/Await。
PullなAPIとしてGenerator(同期)、AsyncGenerator(Stage 2)。
PushなAPIとしてObservable(Stage 1)について


Пользовательские свойства как основа архитектуры CSS (FrontTalks) // Speaker Deck

speakerdeck.com/lautsevich/pol-zovatiel-skiie-svoistva-kak-osnova-arkhitiektury-css-fronttalks

CSS スライド

CSS Custom Propertiesについてのスライド。
Fallback、i18n、CSS Custom Propertiesとcalc、JavaScriptからの利用、@supportsについてなど


Testing JavaScript with Jest - Lesson Playlist @eggheadio

egghead.io/playlists/testing-javascript-with-jest-a36c4074

JavaScript testing video

Jestを学ぶスクリーンキャスト


Building Applications with React and Redux in ES6 | Zombie Code Kill

zombiecodekill.com/2016/05/21/building-applications-with-react-and-redux-in-es6/

React redux

ReactとReduxの入門講座


Developer's guide to accessibility mechanics — Developer's guide to accessibility mechanics

ljwatson.github.io/decks/2016/fromthefront/index.html#cover

accessibility スライド

デフォルトの<a>はどういうサポートがあるからaccessibleであるかについてを独自のリンク実装で見ていく話。
またデフォルトではaccessibleでないツールチップ、タブパネルなどをどう実装するか。
実際にスクリーンリーダーの音を聞きながら確認できる


ソフトウェア、ツール、ライブラリ関係


avocode/combokeys: Web browser keyboard shortcuts. CommonJS, NPM.

github.com/avocode/combokeys

JavaScript キーボード library

Mousetrapをforkしたキーボードショートカットライブラリ。
リファクタリングとdocumentへのlistenがデフォルトではないように変更されている


kentcdodds/match-sorter: Simple, expected, and deterministic best-match sorting of an array in JavaScript

github.com/kentcdodds/match-sorter

JavaScript library

オブジェクトの配列から検索するライブラリ。
指定したキーのみを対象にしたり、検索方法などを指定できる


書籍関係


BUILD PACMAN by Jeffrey Biles [Leanpub PDF/iPad/Kindle]

leanpub.com/buildpacman

JavaScript game book

JavaScriptでパックマンを作る書籍。


この記事へ修正リクエストをする
JSer.info Slackに参加する