Fork me on GitHub

JavaScriptの最新情報を紹介する週刊ブログ

2012-12-23のJS: jQuery1.9での変更点まとめ、Back-Forwad Cache、Chrome Devloper Tools解説

2012年12月24日 Edit on GitHub 編集履歴を見る

JSer.info #102 - 先週jQuery 1.9 Beta 1が公開されましたが、以前jQuery Blog » jQuery Core: Version 1.9 and Beyondで書かれていたように、jQuery 1.9以降は変更点が色々あるためjQuery Core 1.9 Upgrade Guideというドキュメントが公開されています。

ブラウザで戻るを押した時のキャッシュBack-Forwad Cacheについてbfcache について覚えて帰ってもらいますという記事はとても詳しく書かれているので、戻るボタンが押された際、ページのJavaScriptを途中の状態から実行させない方法が効かないとかbfcacheについて疑問に思ったことがある人は読んだほうがいいです。

Chrome Devloper ToolsについてChrome DevTools.nextというスライドが機能についてよくまとまっています。
Web ブラウザは Web に対する GUI シェルである - snyk_s log edit.hatebloという記事でも開発者ツールについて話が少し出てきましたが、最近の開発者ツール(Devloper Tools)に求められるような機能がかなり多くなりUIが複雑化していると思います。
(蛇足: Chromeのremote debuggingを利用して、ウェブ以外にもiOSアプリのデバッグを行うPonyDebugger等 “ブラウザのデバッガー”を離れた使い方も見られるようになった気がします。)

また、Chrome Devloper Toolsについて今月のWeb+DBで解説が書かれているそうです。

ヘッドライン

Node.js 0.9.4リリース

OpenJDKのJavaScript実装 Nashornのソースが公開された

Shumpei Shiraishi’s Weblog: ついにHTML5が勧告候補に！そしてそれが意味するもの
http://blog.shumpei.net/2012/12/html5-cr.html

HTML5とCanvas 2D Contextの仕様が勧告候補になり、大きな変更がない段階になった.
HTML5の勧告と次のバージョンについて

アーティクル

jQuery: The Write Less, Do More, JavaScript Library
http://jquery.com/upgrade-guide/1.9/

jQuery1.9での変更点に関するまとめ
$.parseHTMLやattrとprop等について、削除されたAPIやアンドキュメントなAPIについて書かれている

Differences Between CSS2.1 and CSS3+ | Impressive Webs
http://www.impressivewebs.com/differences-between-css2-and-css3/

CSS2.1からCSS3で増えたプロパティや値、セレクタ等のまとめ

JavaScriptで競技プログラミングを始めよう！ - ひよっこプログラマのプログラミング
http://d.hatena.ne.jp/otaks/20121216/1355670113

JavaScriptで競技プログラミング。
JavaScriptの基本的な文法やオブジェクトと数学関数の話. JavaScriptの型について

"bfcache について覚えて帰ってもらいます。"
Back-Forwad Cacheの動作、無効にしてキャッシュを回避する方法についての検証.
Cache-Control: no-store/no-cache とサンプルコード、FirebugでのBFCacheの確認方法

Sencha Touch 2.1 のチュートリアルを書きました！ | ありえるえりあ
http://dev.ariel-networks.com/wp/archives/2791

Sencha Touch でメモ帳アプリを作るチュートリアル

Scrolling Performance - HTML5 Rocks
http://www.html5rocks.com/en/tutorials/speed/scrolling/

スクロールのパフォーマンスについて.
Developer Toolsを使ってスクロール時にタイムラインのPaint/Image Resizeの処理の見方、offsetTopプロパティ等Reflows/repaintsを起こすものの影響やscrollイベント時のdebounceについて

Conditional loading of resources with mediaqueries | Christian Heilmann
http://christianheilmann.com/2012/12/19/conditional-loading-of-resources-with-mediaqueries/

mediaqueryでCSSファイルを分岐しても読み込まれてしまうので、data属性にurlを書いてlazy loadする仕組みについて。

Performance Calendar » Moving beyond window.onload()
http://calendar.perfplanet.com/2012/moving-beyond-window-onload/

Webサイトの速度を計測するのに`window.onload`を指標にするのは不適切ではないかという話。
他にどのような測定基準があるのか、パフォーマンス計測ツールはどうしてるかや今後どうして行くかの話

CSSの変化をアニメーションさせるtransitionについてまとめたよ。（CSS おれおれ Advent Calendar 2012 – 22日目） | Ginpen.com
http://ginpen.com/2012/12/23/transition/

CSSのTransitionsの使いかた.
transitionでアニメーションするプロパティについて

Leaner, Meaner, Faster Animations with requestAnimationFrame - HTML5 Rocks
http://www.html5rocks.com/en/tutorials/speed/animations/

スクロールイベントなどでrequestAnimationFrameを使ってdebounceするアプローチについて

ビットマスクによるフラグ - piglovesyouの日記
http://d.hatena.ne.jp/piglovesyou/20120621/1340237658

JavaScriptでビットマスクによるフラグ管理の例
http://javascripter.hatenablog.com/entry/20081002/1222962329

JavaScript Physics Engines Comparison - Build New Games
http://buildnewgames.com/physics-engines-comparison

JavaScriptの物理エンジンライブラリの比較.
box2dweb/Ammo.js/JigLibJS/Cannon.js

Addy Osmani - Google+ - Recommended JavaScript books I regularly receive emails…
https://plus.google.com/115133653231679625609/posts/H3onog42Msj

Addy Osmani氏がオススメするJavaScriptを学ぶ書籍のまとめ

スライド、動画関係

ChromeのDevloper Toolsの解説スライド. それぞれのパネル解説、Breakpoints、タイムラインパネルの見方/Events/FramesとFPS、MemoryとGC、プロファイルと ヒープスナップショットの比較によるメモリリーク調査、拡張について

JavaScript Code Analysis with Esprima - Marakana
http://marakana.com/s/post/1353/javacript_code_analysis_esprima_video

Esprimaを使ったコード解析についてのスライド
動画: http://marakana.com/s/post/1353/javacript_code_analysis_esprima_video by Ariya Hidayat

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

Todoを例にしたMVCの役割についてのスライド。
Backbone.jsを使ったアプローチについて

angular/angularjs-batarang · GitHub
https://github.com/angular/angularjs-batarang

AngularJSのDeveloper Tools拡張。
Models、パフォーマンス、依存関係、ElementsタブにAngularJSプロパティの表示、$scope等

thlorenz/browserify-ftw · GitHub
https://github.com/thlorenz/browserify-ftw

AMD to CommonJSするツール

ライブラリ関係

unconed/console-extras.js · GitHub
https://github.com/unconed/console-extras.js

console APIの拡張ライブラリ.
times/throttle/collate/summary

書籍関係

JavaScript Enlightenment - O’Reilly Media
http://shop.oreilly.com/product/0636920027713.do

JavaScript Enlightenment のオライリー本
元は有料電子書籍で今は無料で配布されてる
http://javascriptenlightenment.com/

この記事へ修正リクエストをする
JSer.info Slackに参加する