2013-08-12のJS: Firefox 23.0、W3C Highlights@2013、DalekJS

JSer.info #135 - Firefox 23.0がリリースされました。
Firefox23でネットワークモニターが入ったので、よくみる開発者ツールの機能はひと通り形になっている気がします。

次のFirefox 24で入るよう機能についてはNew Features in Firefox Developer Tools: Episode 24 ✩ Mozilla Hacks – the Web developer blogに書かれています。

W3Cのここ半年ほどの活動についてまとめたW3C Highlights - August 2013が公開されています。
かなり範囲が広く書かれていますが、その中に出てくるCross-platform app development with HTML5 | Kendo UI Surveyの5000規模の開発者アンケートは結構面白いので見ておくのもいいかもしれません。

WebDriver APIを使って実際をブラウザをAPI経由で動かしてテストを書けるDalekJSが公開されました。
DalekJSはまだαな感じがしますが、Chrome,IE,Firefox,PhantomJSなどで動作させられます。

内部的には、dalek-internal-webdriverがWebDriver APIと実際にやり取りするコマンドを定義して、Actionsに載ってるようなユーザー扱うAPIはdalek-driver-nativeで定義されています。

ActionsのAPIは基本的にQを使ったPromiseを返すような実装になっていて、テストを書くときに使うAssertionはdalek-internal-assertionsで定義されています。

今あるAPIがCasperJSのほど気軽じゃない感じがしますが、このAPI部分だけ入れ替える実装とかも出来そうな感じがして仕組みてきに面白いと思います。

CasperJSで気軽にJSのテストできる - hitode909の日記

ヘッドライン

TodoMVC 1.2 — TasteJS
http://tastejs.roon.io/todomvc-1-2

JavaScript MVC ReleaseNote

TodoMVC 1.2リリース。
Polymer、Flight、Enyo 等の追加やVanilla JSの書き直し

Firefox 23.0 リリースノート
http://www.mozilla.jp/firefox/23.0/releasenotes/

firefox ReleaseNote

Firefox 23.0リリースされた

Welcome Packt - Deals - O’Reilly Media
http://shop.oreilly.com/category/deals/packt.do

book

Packt Publishingの書籍がAugust 15, 2013 at 5:00am PTまで全て半額

Announcing 0.9.1 - TypeScript - Site Home - MSDN Blogs
http://blogs.msdn.com/b/typescript/archive/2013/08/06/announcing-0-9-1.aspx

TypeScript ReleaseNote

TypeScript 0.9.1リリース。
パフォーマンス改善、`typeof` 演算子の追加、`—noImplicitAny` で暗黙のAnyをエラーにするtscのオプションの追加

リリースノートには書かれていませんが、enumのバグ修正も含まれています。

[TypeScript] enumの挙動（修正ずみ） « きんくまデザイン

超高速レビュー: TypeScript 0.9.1 - teppeis blog
http://teppeis.hatenablog.com/entry/typescript-0.9.1

TypeScript ReleaseNote

TypeScript 0.9.1の変更点詳細

W3C Highlights - August 2013
http://www.w3.org/2013/08/w3c-highlights/

W3C news

2013年前半におけるW3Cの活動のハイライト。
HTML5、DRM、国際化、アクセシビリティ、Web Platform Docsなどなどについて

Cross-platform app development with HTML5 | Kendo UI Survey
http://www.kendoui.com/surveys/global-developer-survey-2013.aspx

HTML5 document 資料

Kendo UIが5000人超を対象にしたHTML5についての世論調査.
どのようなアプリを作ったか、重要と思う要素、ネイティブvs HTML5 vs ハイブリッド、コスト、将来性、対応プラットフォームと難易度等についてのアンケート結果がまとまってる。

アーティクル

CasperJSで気軽にJSのテストできる - hitode909の日記
http://hitode909.hatenablog.com/entry/2013/08/07/202608

JavaScript browser testing

CasperJSを使って実際にクリックやページ遷移があるようなテストを書くことについて

Web Worker Patterns - Tech.Pro
http://tech.pro/tutorial/1487/web-worker-patterns

webworker

WebWorkerのuse caseについて。
inline(createObjectURL), dedicated(URL読み込み), sharedWorker それぞれの使い方についてまとまってる

0-9, HTMLElementのdata attributeの使いどころ
http://0-9.tumblr.com/post/57660015287/data-attribute-use-case

DOM JavaScript

data属性での読み書きするデメリットとuse caseについて。
代替方法としては jQuery.fn.dataのような実装

意外と要注意 HTML5データ属性とjQuery Data APIの関係まとめ | ゆっくりと… (WeakMapがあるとやりやすい)

IE11 の F12 開発者ツールによる Web サイトおよびアプリのデバッグとチューニング - IEBlog 日本語 - Site Home - MSDN Blogs
http://blogs.msdn.com/b/ie_ja/archive/2013/08/07/debugging-and-tuning-web-sites-and-apps-with-f12-developer-tools-in-ie11.aspx

IE デバック

IE11開発者ツールの機能についての訳。
メモリプロファイラ、パフォーマンスダッシュボード、DOM Explorer(inspector)、デバッガー

Chromium Blog: Introducing the (New) Chromium Web Platform Feature Dashboard
http://blog.chromium.org/2013/08/introducing-new-chromium-web-platform.html

Chrome WebAPI

chromestatus.comがPolymerで書きなおされた

Backbone patterns
http://ricostacruz.com/backbone-patterns/#naming_convention

backbone.js Tips

Backbone.jsまわりで起きる問題と解決方法等のTipsについて。
View、Event、ファイル名、名前空間の命名、AMD、アンチパターンについてなど

New Features in Firefox Developer Tools: Episode 24 ✩ Mozilla Hacks – the Web developer blog
https://hacks.mozilla.org/2013/07/new-features-in-firefox-developer-tools-episode-24/

firefox デバック

Firefox 24の開発者ツールについて。
SourceMapがデフォルト有効に、
ネットワークモニターの改善、console.profileの対応

The flag /g of JavaScript’s regular expressions
http://www.2ality.com/2013/08/regexp-g.html

JavaScript 正規表現

正規表現を使うsearch、exec、matchについて。
また、globalオプションとlastIndexの保持されることで起きる問題について

Absolute Centering - CodePen
http://codepen.io/shshaw/full/gEiDt

css design

CSSおabsoluteによる上下中央揃えについてのわかりやすい解説.

BEM-Methodology Definitionsの日本語訳。 - Sooey
http://journal.sooey.com/220

css HTML

YandexのBEM-Methodologyの翻訳。

François Beaufort - Google+ - The limit for window.localStorage in the last chromium…
https://plus.google.com/100132233764003563318/posts/S5Q9HqDB8bh

Chrome DOM

ChromiumのlocalStorageのデフォルトサイズが5MBから10MBに変更

コールバック地獄
http://callbackhell.dec31.net/

JavaScript 翻訳

callbackhell.com の翻訳.
コードバックのネスト深くなってしまう問題の対処方について

スライド、動画関係

BackboneConf 2013 Recap | bit swapping
http://bitswapping.com/2013/08/backboneconf-2013-recap/

backbone.js イベントスライドまとめ

BACKBONECONF 2013 のスライドまとめ

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

jQuery Boilerplate
http://jqueryboilerplate.com/

jQuery plugin

jQueryプラグインのテンプレート。
Yeoman Generatorも用意されてる

ツール、ライブラリ関係

DalekJS - Automated cross browser testing with JavaScript
http://dalekjs.com/

JavaScript DOM browser testing Tools

WebDriver - ChromeDriver、IEDriver、Firefoxのmarionetteなどを使って実際のブラウザで動かしながらUIテストをするツール。
Selemium/CasperJSの系統。

今のところ、公式ページのテストが一番参考になる。

dalekjs/guineapig

“Grunt” your way to frontend performance optimization | Be better and faster
http://bbinto.wordpress.com/2013/08/03/grunt-your-way-through-frontend-performance-optimization/

JavaScript node.js web

圧縮や最適化等のGruntタスクまとめ