2013-11-11のJS: AngularJS 1.2.0、ブラウザ間を超えたRemoteDebug protocol

JSer.info #148 - AngularJS 1.2.0がリリースされました。
Animations and Transitions、エラーメッセージの改善、$sce のデフォルト有効、Promise A+への準拠、$routeProviderが本体から分離等の変更や機能追加等がされています。
1.2へのアップデートガイドは Migrating from 1.0 to 1.2 に公開されています。

AngularJS 1.2.0: timely-delivery | AngularJS

ブラウザの開発者ツールにおけるRemote debugging protocolは、ChromeやFirefoxではそれぞれ異なるプロトコルになっていて互換性がありません。
そこで、この状況を解決する事を目的にRemoteDebugというプロジェクトが立ち上げられました。

RemoteDebugでは、Chrome Remote debugging protocolをベースとして(選定理由としてはChromiumの一部であるためChromeやOperaで使える事、ドキュメントがよく書かれているため)、
このRemoteDebug protocolに対するブリッジの実装等を進め、ブラウザ間やエディタ等のツール間でコミュニケーションを取れるようにすることを目的としています。

最初の一歩としてFirefoxのRemote debugging ProtocolをRemoteDebug protocolにブリッジするremotedebug-firefox-bridgeが公開されています。
これを使うことで、Firefoxで表示しているウェブサイトをChrome Dev Toolsを使ってデバッグする等ができます。

このプロジェクトが始まる一因について書かれているOur web development workflow is completely broken. — Kenneth Auchenbergも一緒に見ておくといいです。

こうした、ブラウザ間でRemote debugging protocolの互換性が壊れてる問題は、Firebugの開発者がChromeチームに移動する時にも話にでてきて
予期されていた問題ですが、RemoteDebugのような動きは開発環境の更なる発展につながると思うので期待しています。
(必ずしもベンダーが足並みを揃えるのが正解という訳ではないですが、具体的な実装から解決に取り掛かるのはいい傾向だと思います)

console APIについてのデファクトスタンダードについてのプロジェクトconsole-objectも最近できたので、
こうしたブラウザ/JavaScriptのデバッグについて動きが活発化していると思います。

サイトに関する連絡

このサイトで紹介してるサイトのデータ等はazu/jser.infoに公開していますが、JSer.infoのアーカイブで閲覧出来るようにしました。
といっても、自分が記事を書くときにリストから選んでための編集ツールみたいな感じです…(あんまり使いやすくない…)

別にTumblrと同期してる訳ではありませんが、一応index.jsonとかにPull Requestとか送ってもらっても問題ないです。

ヘッドライン

AngularJS 1.2.0: timely-delivery | AngularJS
http://blog.angularjs.org/2013/11/angularjs-120-timely-delivery.html

AngularJS ReleaseNote

AngularJS 1.2.0リリース

harmony:specification_drafts [ES Wiki]
http://wiki.ecmascript.org/doku.php?id=harmony:specification_drafts#november_8_2013_draft_rev_21

ECMAScript document spec

ES6 Draft Rev 21リリース
module synxtaxについての記述がアップデートされた

History - Octane — Google Developers
https://developers.google.com/octane/history

google benchmark

GoogleのJavaScriptベンチマークOctane 2.0リリース

アーティクル

What’s new in JSHint (October, 2013)
http://jshint.com/blog/new-in-jshint-oct-2013/

JavaScript Tools

JSHint 2.2/2.3の機能について。
Lintを無視するコメント、typeofのチェック、freezeを指定するdirective

Firefox Developer Tools: Episode 27 – Edit as HTML, Codemirror & more ✩ Mozilla Hacks – the Web developer blog
https://hacks.mozilla.org/2013/11/firefox-developer-tools-episode-27-edit-as-html-codemirror-more/

firefox デバック Tools

Firefox 27の開発者ツールについて.
DOM eventでのbreak、カラーテーマの変更、CSS上に色の表示、画像のプレビュー、Codemirrorベースのエディタ、reflowのログ機能等が追加された

Firefoxの開発者ツールについての連載も訳され始めた

High Performance Animations - HTML5 Rocks
http://www.html5rocks.com/en/tutorials/speed/high-performance-animations/

CSS performance

CSS アニメーションとGPUレイヤーについて。 opacity, translate, rotate, scaleはGPUによって処理させる事が出来る。 reflow/repaintの要因となるCSSプロパティのまとめ。

An In-Depth Introduction To Ember.js | Smashing Coding
http://coding.smashingmagazine.com/2013/11/07/an-in-depth-introduction-to-ember-js/

JavaScript MVC tutorial

Ember.jsについてのチュートリアル。
基本的な構造やEmber-Data、デバッグの方法などについて書かれてる

HTML5 を利用したWeb アプリケーションのセキュリティ問題に関する調査報告書
http://www.jpcert.or.jp/research/html5.html

HTML5 JavaScript セキュリティ PDF 資料

広義のHTML5やWebWorkerやXHR Lv2などによって起こりえる脆弱性等の問題やXSSフィルターやCSP等についてまとめられた資料

xfo-clickjacking.pdf
https://cure53.de/xfo-clickjacking.pdf

HTML セキュリティ PDF

X-Frame-Optionsとクリックジャッキング、XSSについて

スライド、動画関係

Testing YUI Everywhere
http://reidburke.com/deck/2013/yuiconf/#slide=title

YUI testing スライド

YUIのテストについてのスライド.
CI, Selenium, Sauce Labsを使ってSafari/iOSでのテスト.
100K以上あるテストをどうやって効率よく回すかについて

ES6 Uncensored // Speaker Deck
https://speakerdeck.com/anguscroll/es6-uncensored

JavaScript ECMAScript スライド

ES5と比較したES6の新しい機能についてのスライド

サイト、サービス、ソフトウェア関係

Amazon Web Services Blog: Developer Preview - AWS SDK for JavaScript in the Browser
http://aws.typepad.com/aws/2013/10/developer-preview-aws-sdk-for-javascript.html

JavaScript amazon

AWSのJavaScript向けSDKがリリースされた。
Amazon S3、SQS、SNS、DynamoDBが利用できる

ツール、ライブラリ関係

tantaman/LargeLocalStorage
https://github.com/tantaman/LargeLocalStorage

JavaScript library

FilesystemAPI、IndexedDB、 LocalStorage、WebSQLをそれぞれブリッジする実装があり、それを透過的に利用できるKey-value storeなライブラリ

JSDiff for Comparing Text
http://tobyho.com/2013/11/05/jsdiff-for-comparing-text/

JavaScript library

文字列のdiffを取るライブラリ

Animated SVG Icons: Using Snap.svg to animate SVG icons
http://tympanus.net/Development/AnimatedSVGIcons/

SVG animation

Snap.svgを使ったアニメーションSVGアイコン

Creditcard.js: a more usable credit card form. Improve payment form, checkout, and ecommerce usability with JavaScript card number validation, credit card type detection, and more.
http://creditcardjs.com

JavaScript library

クレジトカードの入力フォームライブラリ

dtao/autodoc
https://github.com/dtao/autodoc

JavaScript document AST testing Tools

JavaScriptでdoctestやベンチマークのアノテーションを使えるツール。
またコメントからドキュメントも生成することが出来る

RemoteDebug, an initiative to unify remote debugging across browsers.
http://remotedebug.org/

browser デバック Tools spec community

ブラウザの開発者ツール等でのremote debug protocolを共通の仕様(Chromeのをベースとしてる)を使えるようにして、色々なツールやブラウザ間でやり取り出来るようにするのを目的としてる。
ブリッジの実装としてFirefoxのものなどが公開されてる。

書籍関係

Amazon.co.jp：コーディングが５倍早くなるjQueryセレクター超活用 eBook: Paul Cyan: Kindleストア
http://www.amazon.co.jp/%E3%82%B3%E3%83%BC%E3%83%87%E3%82%A3%E3%83%B3%E3%82%B0%E3%81%8C%EF%BC%95%E5%80%8D%E6%97%A9%E3%81%8F%E3%81%AA%E3%82%8BjQuery%E3%82%BB%E3%83%AC%E3%82%AF%E3%82%BF%E3%83%BC%E8%B6%85%E6%B4%BB%E7%94%A8-Paul-Cyan-ebook/dp/B00FKA52BM

jQuery book

jQery Selectorについてのkindle book