JSer.info #184 - Chrome 36.0がリリースされました。
同じくChromium 36ベースのOpera23もリリースされています。 Operaのリリースノートの方が変更内容が分かりやすいかもしれません。
- Dev.Opera — Opera 23 released
- Chromium Blog: Chrome 36 Beta: element.animate(), HTML Imports, and Object.observe()
何故かWeb Components(主にPolymer)に関する記事が色々出ていたのでまとめて紹介します。
Web Componentsの概要について知りたい方はまずTender Surrender: なぜ Web Components はウェブ開発に革命を起こすのかを見るといいでしょう。
The roles of AngularJS and Polymer という記事では、AngularJSとPolymerは役割の違いについてまとめられています。
AngularJSはDIやルーティング等ウェブアプリ開発向けのデザインで、PolymerはCustom Element開発向けに最適化されているという話が書かれています。 この2つに興味がある人はHere’s the difference between Polymer and Angular - Binpressも読むといいかもしれません。
同じく比較系の記事としてPolymer vs. X-Tag - Here’s the difference · Pascal Prechtでは、PolymerとX-Tagの違いについて書かれています。
X-TagはCustom Elementについて扱うライブラリなので、この記事ではCustom Elementを中心に解説されています。
また、WebReflection/document-register-elementという別のCustomElement polyfillが公開されているので、こちらもみてみるといいかもしれません。
以下の2つの記事では、Polymer(platform.js)がどこまでpolyfillをやってくれているのかについて書かれています。
- Why Web Components Aren’t Ready for Production… Yet -Telerik Developer Network
- 天使やカイザーと呼ばれて » Web ComponentsのWebブラウザ別動作を調べてみた
主にShadow DOMのCSSのスコープについて等、polyfillすることが不可能な部分についての検証がされています。
お知らせ
先週からJu U-Yeongさんによる JSer.info の韓国語訳が以下のサイトで公開されています。
このブログで書いてる文章は CC-BY で利用できるようにしてあります。
また、先週書いていたTumblr -> Jekyllへの移行の件ですが、移行することに決めたので手伝ってくださる方がいらしたらお知らせ下さい。
ヘッドライン
Chrome Releases: Stable Channel Update
Chrome 36 stableリリース。
Object.observe()やelement.animate()、 HTML Imports等が入った
- Chromium Blog: Chrome 36 Beta: element.animate(), HTML Imports, and Object.observe()
- Chrome 36 Launches with New Incognito Design
Dev.Opera — Opera 23 released
Opera 23リリース。
Chromium36がベースとなっていて、CSS touch-action、CSS will-change、CSS Transformsからprefixの削除、Web Animationsの一部実装、Object.observe()、HTML Importsの実装等が入ってる。
基本的にChrome36と同様の機能が入っていて、それぞれ簡単な解説が書かれているのでChromeと合わせて読むといいです。
node-webkit v0.10.0 released - Google グループ
node-webkit v0.10.0リリース。
Chromium 35、Node.js 0.11.13にアップデート、ネイティブメニューの改善、グローバルショートカットのサポート等
New Compiler and Moving to GitHub - TypeScript - Site Home - MSDN Blogs
TypeScriptがGitHubへ移行した。
WikiもGitHubへ移行。
また新しいコンパイラの開発していて、現在のものより5倍早くコンパイルできているが、まだ機能は完全ではなく開発中との事。
New design and site changes now on caniuse.com
Caniuseの新しいデザインが公開された。
国別のブラウザ利用率の表示や、それぞれの機能についてブラウザシェアを反映したサポート対象の表示などが見られるようになっている。
New: Rev26 ES6 draft now available
ES6 draft Rev26リリース。
アーティクル
The roles of AngularJS and Polymer
AngularJSとPolymerの役割の違い。
Angularはアプリ開発に最適化したデザイン(DIやルーティング等)、PolymerはCustom Element開発に最適化したデザイン。
2つは競合なのかどうかについて書かれてる。
天使やカイザーと呼ばれて » Web ComponentsのWebブラウザ別動作を調べてみた
WebCompoentsをサポートしてないブラウザでのplatform.jsのpolyfillの挙動について。
createShadowRoot() と Shadow DOMのCSSスコープについて
Polymer vs. X-Tag - Here’s the difference · Pascal Precht
Polymerのplatform.jsによるpolyfillとX-Tagの違い。
X-TagはCustom Elementについて扱う。
polymer-elementにnoscript属性を入れる意味等Polyfillを使ったCustom Elementについて詳しく書かれている
18 Surprises From Reading jQuery’s Source Code - Quick Left Boulder Colorado
jQueryのソースコードを読んでの知見。
コメント欄にも書かれているからundocumentなAPIについてが多い
JavaScript フレームワークがデータバインディングを実現する４通りの手法 - てっく煮ブログ
MV*フレームワークで見られるデータバインディングの実装方法について
Improve Your Tests by Breaking the Rules - Bocoup
JavaScript一般で良くないパターンを、あえてテストにおいては使用することで改善できるという話。
グローバル変数の利用、同期的なコードにする(Sinon.JS、Generator)、DRYじゃないコードを書く事で得られる点について
selector-replace() の利用 · terkel.jp
Sass 3.4.0のselector-replace() 関数について
スライド、動画関係
ECMAScript 6 // Speaker Deck
ES6の主要な機能について概要スライド。
Module, Class, Iterator, Syntaxについての紹介。
またES7や8に入るかもしれない機能についてやECMAScriptについてはどこを参照すればいいかについて書いてある。。
WebRTC at SFHTML5 - YouTube
SFHTML5のWebRTCイベントの動画
node streams
node.jsのStreamについてのスクリーンキャスト。
ランダムな単語を流すStreamを作り、transform streamで変換してWriteStreamに流すサンプルについて
サイト、サービス
Are We Componentized Yet?
ブラウザごとのWebComponentsのサポート状況、仕様についてまとめてるサイト
ソフトウェア、ツール、ライブラリ関係
WebReflection/document-register-element
WebComponentsのCustom Elementsのpolyfillライブラリ
ezequiel/cssprima
CSS パーサーライブラリ
azproduction/autopolyfiller
AutoprefixerのJavaScript版的なツール。
対象となるコードとサポートブラウザの範囲を指定して、必要なPolyfillコードを生成してくれる
Ampersand.js - Home
HumanJSの作者によるJavaScriptアプリ向けのフレームワーク。
Backbone.jsを使っていた経験から、機能を細かくNodeモジュールとして分けてBrowserifyでコンパイルして利用出来るようになってる。
Raynos/mercury
モジュール指向なフレームワーク。
Input(Controller),State(Model),Render(View)
ReactのようにVirtual DOM持っていて、データバインディングはモデルクラス方式。
Protractor - end to end testing for AngularJS
AngularJS向けのWebdriverを使ったE2EテストフレームワークであるProtractorが公開された。
デフォルトではテストコードはJasmineで書く事ができ、MochaやCucumberも利用できる。
書籍関係
Three.js Essentials | Packt Publishing
Three.jsについての書籍
