2012-12-10のJS: Firebug 1.11.0、Heap Profilerでのメモリリーク調査、CSS testing tools

JSer.info #100 - Firebug 1.11.0がリリースされました。
Firebugのコンソール上で利用できる $() や $$() がquerySelector相当になったりinclude()でjsファイルを取り込んだり出来るようになったりしています。
また、postMessageや関数呼び出しのログ表示やSPDY対応等も含まれています。

Firebug 1.11 New Features ✩ Mozilla Hacks – the Web developer blog

Navigation Timing APIやNavigation Timing APIでブラウザの処理時間を可視化するツール作ったのようなwindow.performanceのグラフィカル表示にも対応しています

JavaScript アプリケーションのメモリー・リークを理解するという記事で、ChromeのHeap Profilerを使ったメモリリークの調査方法について書かれています。
console.logを使ったことにより参照が残ってリークが見えることなどについても書かれてて面白いと思います。
リッチスマートフォンWebアプリのメモリ管理｜1 pixel｜サイバーエージェント公式クリエイターズブログも一緒に読むとHeap Profilerの使いかたが分かりやすくなるかもしれません。

Huddle/PhantomCSS · GitHubやthingsinjars/GhostStory · GitHubやthingsinjars/cssert · GitHubなどの、PhantomJSと(PhantomJS上で動く)CasperJSを使ったCSSやレンダリングのテストをするツールが色々出てきています。
CasperJSはv1.0.0-RC5がリリースされて、そろそろ1.0.0となるので色々でてきてるのかもしれないです。

追記: csste.stというスライドでCSSのテストについて上記で出てきたツールなどが紹介されています。(これが発端で昨日色々出てきたのだと思います)

ヘッドライン

Underscore.js
http://underscorejs.org

Underscore.js 1.4.3 リリース
Adobe’s JS engine フレンドリーに、throttleの改善等

casperjs/CHANGELOG.md at master · n1k0/casperjs · GitHub
https://github.com/n1k0/casperjs/blob/master/CHANGELOG.md#2012-10-31-v100-rc4

CasperJS 1.0.0-RC4リリース
書いてる途中でv1.0.0-RC5もリリースされた。

Getfirebug Blog » Blog Archive » Firebug 1.11.0
https://blog.getfirebug.com/2012/12/07/firebug-1-11-0/

Firebug 1.11.0リリース

Firebug 1.11 New Features ✩ Mozilla Hacks – the Web developer blog
https://hacks.mozilla.org/2012/12/firebug-1-11-new-features/

Firebug 1.11の新しい機能についてのまとめ。
SPDY対応、performance-timing、CSS Selectorでの検索、postMessageログ、関数呼び出しのログ、$,$$の変更、自動補完などの機能紹介

アーティクル

Asynchronous JS: Callbacks, Listeners, Control Flow Libs and Promises - Sebastian’s Blog
http://sporto.github.com/blog/2012/12/09/callbacks-listeners-promises/

非同期JavaScriptについて.
コールバック、イベントリスナーon/trigger、Flow Control Library、Promise それぞれのメリット・デメリットをまとめてる

JavaScript アプリケーションのメモリー・リークを理解する
http://www.ibm.com/developerworks/jp/web/library/wa-jsmemory/

ChromeのHeap Profilerをつかったメモリリークの調査方法について。
クロージャー、console APIを使った事によるリーク、循環参照のリークと対処法

Backbone.js 1.0に向けての変更点 « NAVER Engineers’ Blog
http://tech.naver.jp/blog/?p=2342

Backbone.js 1.0で追加予定の機能紹介.
DOMの削除に合わせて参照も取り除くdispose、Collection.add()のmergeオプション

What They Didn’t Tell You About ES5′s Array Extras | Nettuts+
http://net.tutsplus.com/tutorials/javascript-ajax/what-they-didnt-tell-you-about-es5s-array-extras/

ES5で追加されたArrayメソッドについて.
applyと合わせたTips、[…].filter(RegExp.prototype.test, /^b/);のようなprototypeメソッド渡して使う応用的な方法についても

Arrays in JavaScript
http://www.2ality.com/2012/12/arrays.html

粗密なArrayの違い、配列のlengthの仕様について

All You Need to Know About the HTML5 Data Attribute | Webdesigntuts+
http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/all-you-need-to-know-about-the-html5-data-attribute/

data属性の扱い方について。
どういう時に使うか、CSSから利用する方法、jQueryのdataメソッドについて

Tutorial: JavaScript animation with the Greensock framework
http://ahrengot.com/tutorials/greensock-javascript-animation/

JavaScriptアニメーションライブラリのGreensockのチュートリアル.

Object.defineProperty 関数で Observable なオブジェクトを作る #JavaScript #jQuery - Qiita
http://qiita.com/items/42f30cf4983822240398

値が変更されたらtriggerするようなsetterを定義して、モデルの変更をViewに通知する仕組みを作る

Introducing the Battery Status API
http://jspro.com/apis/introducing-the-battery-status-api/

バッテリーの情報を取得するBattery Status APIのプロパティとBattery Eventsについて

esformatter & rocambole | Blog | Miller Medeiros
http://blog.millermedeiros.com/esformatter-rocambole/

JavaScriptのコード整形を行うツールesformatterと整形するためにAST walk と操作を行うrocamboleについて

次世代JavaScriptでデータバインディング： Object.observe() を試す - ぼちぼち日記
http://d.hatena.ne.jp/jovi0608/20121206/1354762082

オブジェクトの変更監視をするObject.observeについて

oosugi20-blog — HTML5でこの要素ってどういう仕様だっけって思った時の調べ方
http://oosugi20-blog.tumblr.com/post/36823233295/html5

仕様の読み解き方

Nashorn - OpenJDKに提案された新JavaScriptエンジン
http://www.infoq.com/jp/news/2012/12/Nashorn-proposal

JDKのJavaScript実装Nashornについて

Nashorn

パフォーマンスからみるSass/Compass 第2回：CompassによるCSS Sprite | MOL
http://t32k.me/mol/log/spriting-with-compass/

CompassのCSSスプライトについて

Sassオレオレリファレンス
http://tenderfeel.github.com/SassReference/

Sassのリファレンスサイト

スライド、動画関係

Learning to Love JavaScript
http://infrequently.org/11/io/js/

JavaScriptとは何か。
all mutable objects、closure、関数スコープ、prototypeについて。
またES.nextの内容も出しながら、それを今まではどのように書いてたかという感じ

csste.st
http://csste.st/slides/

CSSのテストについてのスライド.
CSSLint、CSSUnit、GhostStory、Mogotest、画像diffでのテスト、cssertなどについて紹介

JS開発におけるTDDと自動テストツール利用の勘所
http://www.slideshare.net/KojiNakamura/jstdd

QUnit、Jasmineの基本的な使い方、DOMに依存したテスト、Testacularについてのスライド。
テストの導入からCIまでの流れが一通りな感じ

An Analysis of the Redesign of the CoffeeScript Compiler - YOW2012 // Speaker Deck
https://speakerdeck.com/michaelficarra/an-analysis-of-the-redesign-of-the-coffeescript-compiler-yow2012

新しいCoffeeScriptコンパイラの設計デザインについて.
inputからoutputまで流れ.
Spidermonkey ASTをIR(中間表現)とすることで、それに関するツール(esprima等)との連携が得られるメリットが有る。
http://constellation.github.com/slides/contents/20121118/modules.html

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