2013-06-17のJS: Gmailでのメモリ管理、requestAnimationFrame、DOM Future と DOM の将来

JSer.info #127 - Google I/Oの発表されたGmailでのメモリ管理についての記事が公開されています。

Effectively managing memory at Gmail scale - HTML5 Rocks

Gmailのような長時間滞在するWebアプリはメモリリークが問題になりやすいので、どのようにしてそれらを解決していくかという感じの内容。

Better performance with requestAnimationFrame - Dev.Opera という記事では、requestAnimationFrameがどういう仕組みで動いてるかについてまとめられています。

DOM Future と DOM の将来というスライドでは、最近のDOMの動きについて簡単にまとまっています。(DOM4)

ヘッドライン

Node v0.10.11 (Stable)
http://blog.nodejs.org/2013/06/13/node-v0-10-11-stable/

node.js ReleaseNote

Node v0.10.11リリース

Updates – Pure
http://purecss.io/updates/

Yahoo css ReleaseNote

Yahoo製のCSSフレームワーク Pure 0.2.0リリース。
CIでCSSLint、Gruntを使った開発ワークフローなどについても書かれてる

0.2.0 (2013-06-11)

Dart News & Updates: Angular.js announces port for Dart
http://news.dartlang.org/2013/06/angularjs-announces-port-for-dart.html

AngularJS dart ReleaseNote

Angular.js のDartポートが公開された.
https://github.com/angular/angular.dart

Getfirebug Blog » Blog Archive » Firebug 1.12 alpha 8
https://blog.getfirebug.com/2013/06/14/firebug-1-12-alpha-8/

Firebug ReleaseNote

Firebug 1.12リリース.
$_ で前回の評価結果を取得できるようになった

Surfin’ Safari - Blog Archive » State of Web Inspector
https://www.webkit.org/blog/2518/state-of-web-inspector/

safari デバック

SafariのWeb Inspectorがオープンソースになったので、画面の解説

Chromium Blog: Retiring Chrome Frame
http://blog.chromium.org/2013/06/retiring-chrome-frame.html

Chrome IE ReleaseNote

Google Chrome Frame 開発終了のお知らせ
2014年4月サポート終了

アーティクル

Effectively managing memory at Gmail scale - HTML5 Rocks
http://www.html5rocks.com/en/tutorials/memory/effectivemanagement/

google mail JavaScript

Gmailでのメモリ管理の話(via Google I/O)
JavaScriptにおけるメモリリークとは、V8におけるGCの動き。
どのようにGmailのメモリリークを直すのにあたり、performance.memoryとChrome Dev Toolsを使いどこに問題があるかを見つけ出す話

Content Security Policy 1.0 Lands In Firefox | Mozilla Security Blog
https://blog.mozilla.org/security/2013/06/11/content-security-policy-1-0-lands-in-firefox/

firefox セキュリティ ReleaseNote

Firefox 23 でContent Security Policy 1.0 をサポート。
CSP 1.0と仕様について

sourceMappingURL and sourceURL syntax changed - HTML5Rocks Updates
http://updates.html5rocks.com/2013/06/sourceMappingURL-and-sourceURL-syntax-changed

browser デバック

sourceURL を指定するコメントの書式が変更された。
JScriptの//@cc_onみたいなものと衝突してしまっていたので`//# sourceMappingURL=<url>`という書式に変更された

Better performance with requestAnimationFrame - Dev.Opera
http://dev.opera.com/articles/view/better-performance-with-requestanimationframe/

JavaScript animation

timerベースの描画とrequestAnimationFrameの仕組みの違い。requestAnimationFrameがすることとしないこと。
requestAnimationFrameの使い方について

Intro to Web Workers · Zapier
https://zapier.com/engineering/intro-to-web-workers/

JavaScript WebAPI tutorial

Web Workers入門
SharedWorkerについてや、Blob/createObjectURLを使った別ファイルに分けないでWorkerを作る方法について等

Gone In 60 Frames Per Second: A Pinterest Paint Performance Case Study | Smashing Magazine
http://www.smashingmagazine.com/2013/06/10/pinterest-paint-performance-case-study/

デバック browser

Pinterestと描画パフォーマンス改善の話

PhantomJSを使ったスマホサイトテストの自動化(前編)｜1 pixel｜サイバーエージェント公式クリエイターズブログ
http://ameblo.jp/ca-1pixel/entry-11549761391.html

JavaScript webkit mobile

PhantomJSを使ってモバイルサイトのテスト.
mocha-phantomを使ってPhantomJSを操作しながらテストを書く

blakeembrey/code-problems · GitHub
https://github.com/blakeembrey/code-problems

JavaScript

よくある感じのプログラム問題をJavaScriptで実装/解答した感じのコード集

Refactoring DOM Heavy JS
http://javascriptplayground.com/blog/2013/06/refactoring-js/

JavaScript DOM HTML

よく見かけるタブUIのDOMをリファクタリングする話。

ECMAScript 6: automatically binding extracted methods
http://www.2ality.com/2013/06/auto-binding.html

ECMA JavaScript

event listnerのhandlerのthis bindingを自動化するためにはどうするか。
Proxyを使った方法、さらにProxy内にキャッシュを作るコトや、ES6的な方法について

The Extensible Web Manifesto
http://extensiblewebmanifesto.org/

WebAPI

開発者と標準は少し距離があるので、その間を埋める新たなサイクルについてのマニフェスト.
Polymerのように既存機能を使ったPolyfillなどを用いながらやることで、開発者はすぐに使えて議論でき、Web標準へのフィードバックをより活発に行えるサイクルを形成していこうという感じの内容

Sign the Manifesto からマニフェストに対して署名できます。

0-9, ネットワーク通信を行う場合に検討すべきこと
http://0-9.tumblr.com/post/53160053698/network-connection-development

mobile HTTP

モバイル環境でのネットワーク通信について。
コネクション数の制限が強いので正しく破棄で来てるかどうか、再接続や通信の数を減らすことのチェック項目

Reserved keywords in JavaScript · Mathias Bynens
http://mathiasbynens.be/notes/reserved-keywords

ECMA JavaScript

ECMAScript バージョン別の予約語まとめ

csswizardry/CSS-Guidelines · GitHub
https://github.com/csswizardry/CSS-Guidelines

css

CSSガイドライン

(* programming -> girl -> ? *) | 業務アプリ実装にFRP使ってみた
http://programplusgirl.tumblr.com/post/52698153869/frp

JavaScript library

Functional Reactive Programming なライブラリであるBacon.jsについて

スライド、動画関係

「データバインディングによるインタラクティブなUIの効率的な表現」Build Insider OFFLINEで登壇しました : アシアルブログ
http://blog.asial.co.jp/1165

JavaScript スライド

データバインディングとリアクティブプログラミングについてのスライド

Beyond DOM Manipulations: Building Stateful Modules with Events and…
http://www.slideshare.net/crashlytics/jquery-conf

backbone.js スライド

CrashlyticsのBackbone.jsについてのスライド。
Backboneを使ったアプリの構造、stateと非同期の処理、同期的にデータをやり取りする場合は`Vent`に対してレスポンスとリクエストを登録して直接はやり取りしないようにしてモジュールの疎結合を作る

JavaScript Static Analysis Tools and Techniques - STP Online Sessio…
http://www.slideshare.net/noahsussman/java-script-staticanalysistoolsandtechniquesjune2013

JavaScript スライド Tools

JSLint/JSHint/JSONLint/gjslintなどの静的解析ツールについてのスライド