Fork me on GitHub

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

Edit on GitHub 編集履歴を見る

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

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

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

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

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

ヘッドライン

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

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

Firebug 1.11.0リリース

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

アーティクル

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

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

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

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

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

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

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

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

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

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

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

仕様の読み解き方

JDKのJavaScript実装Nashornについて

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

Sassのリファレンスサイト

スライド、動画関係

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

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

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

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

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

モバイル/スマートフォン/タブレット端末の画面情報のまとめ。
画面サイズ、解像度、アスペクト比
device-pixel-ratioの値等

CSS regression testingツール.
PhantomJSとCasperJSを使って js-imagediff によるレンダリング描画の画像を比較してregression testingを行うツール

CasperJS/PhantomJSを使って、 cucumber-styleな感じでCSSが適応されているかをテストするツール

CSS verification testingツール.
ブックマークレットでテストしたい要素のstyleを取ってきて、リファクタリングした結果それが壊れてないかを検証するツール.
runnerはPhantomJSで動かせる

Navigation TIming API(window.performance)の内容をタイムライン表示するブックマークレット

JSCoverageの改良コードカバレッジツール。Javaで実装されてる

ライブラリ関係

D3.jsを使ったグラフライブラリ

書籍関係

2013年12月発売
CoffeeScriptでNode.jsアプリを作りながら、Node.jsやCoffeeScriptやドキュメントやテストについて学んで行く書籍

2013年5月発売
ECMAScript 6についての書籍

この記事へ修正リクエストをする
記事を紹介する