2013-07-16のJS: Jasmineとモック、Chrome Dev Tools新機能まとめ、ESLint

JSer.info #131 - JavaScriptでテストのためのspyやmock,stubといった機能を提供するライブラリといえばSinon.JSが有名ですが、
主にBDDなテストフレームワークとしての認識が強いJasmineには類似する機能がSpiesという名前で内蔵されています。(matcher扱いもされがち)

Advanced Jasmine - Front-End JavaScript Unit Testing というスライドでは、JasmineのSpiesを使ったテストについて簡単にまとまっています。
Unit Testing JavaScript and Backbone.JS // Speaker Deck のスライドも一緒に見ておくといいかもしれません。

また、最近はJasmine本が色々出てるのでそれらを探してみるのもいいかもしれません

最近Jasmine本です http://t.co/JndOTOA3wW http://t.co/xAO6aaSpzp https://t.co/FVEq0rwFBX http://t.co/yQIECWE9Jn

— azu (@azu_re)

June 14, 2013

Chrome DevTools Revolutions 2013 - HTML5 Rocksという記事では、Google I/Oの話を元に最近のChrome Dev Toolsの機能についてまとめられています。

ChromeはDevTools以外にも、Skia Debuggerや描画系の情報を見る方法が色々あるので詳しく見たい方には便利かもしれないです。

まだα版で開発中という感じですが、JSHintなどのようにJavaScriptのLintツールとしてESLintが公開されています。
JSHintとの違いについてはFrequently Asked Questionsにも書かれていますが、Lintのルール自体がpluggableになってるのが特徴的です。

Introducing ESLint | NCZOnline

ヘッドライン

Underscore.js
http://underscorejs.org

JavaScript library ReleaseNote

Underscore.js 1.5.1リリース
https://github.com/jashkenas/underscore/releases/tag/1.5.1

Node v0.10.13 (Stable)
http://blog.nodejs.org/2013/07/09/node-v0-10-13-stable/

node.js ReleaseNote

Node v0.10.13リリース

RequireJS 2.1.7 Released ~ James Burke
http://jrburke.com/2013/07/07/requirejs-2.1.7-released/

AMD JavaScript library ReleaseNote

RequireJS 2.1.7 リリース

Knockout v2.3.0 released; v3.0.0 beta available - Steve Sanderson’s blog - As seen on YouTube™
http://blog.stevensanderson.com/2013/07/09/knockout-v2-3-0-released-v3-0-0-beta-available/

JavaScript MVC library

Knockout v2.3.0リリース
3.0.0βもリリースされた。

Release Notes — SlimerJS v0.8.0 documentation
http://docs.slimerjs.org/0.8/release-notes.html

firefox Tools ReleaseNote

SlimerJS 0.8リリース
パッケージにXulRunnerを同梱するように、CasperJSから利用できるようになった

CasperJS 1.1-beta1 released, with Gecko support | Code | Nicolas Perriault
https://nicolas.perriault.net/code/2013/casperjs-1.1-beta1-released/

JavaScript Tools

CasperJS 1.1-beta1リリース。
Gecko版PhantomJSなSlimerJSをサポート

Chutzpah - Chutzpah 2.4.2 - Matthew Manela - Farblondzshet in Code
http://matthewmanela.com/blog/chutzpah-2-4-2/

JavaScript windows testing

Chutzpah 2.4.2リリース

WebStorm 7 build 130.1167 | JetBrains WebStorm Blog
http://blog.jetbrains.com/webstorm/2013/07/webstorm-7-build-130-1167/

WebStorm ReleaseNote

WebStorm 7 build 130.1167リリース。
TypeScript 0.9のサポート、Karma + istanbulでのコードカバレッジをサポート.

アーティクル

Web Audio API comes to Firefox ✩ Mozilla Hacks – the Web developer blog
https://hacks.mozilla.org/2013/07/web-audio-api-comes-to-firefox/

firefox sound API

Firefox 24でWeb Audio APIのサポート

JavaScriptデザインパターン – 第1部：シングルトン、コンポジット、ファサード | Adobe Developer Connection
http://www.adobe.com/jp/devnet/html5/articles/javascript-design-patterns-pt1-singleton-composite-facade.html

JavaScript デザインパターン翻訳

JavaScriptでのデザインパターン:
シングルトン、コンポジット、ファサード、アダプター、デコレーター、ファクトリ、プロキシ、オブザーバー、コマンドについて

スマートフォンで動くリアルタイム3Dグラフィック｜1 pixel｜サイバーエージェント公式クリエイターズブログ
http://ameblo.jp/ca-1pixel/entry-11559614722.html

canvas 3D

CanvasAPIで3D表現をする方法について。
3Dの基本となる座標変換、カメラの定義、アフィン変換などについて詳しく説明されてる

JavaScript - 結局jQuery.Deferredの何が嬉しいのか分からない、という人向けの小話 - Qiita [キータ]
http://qiita.com/yuku_t/items/1b8ce6bba133a7eaeb23

jQuery JavaScript thought

Deferredを使った非同期コードのリファクタリングの話。
具体性のある感じになってて用途がつかみやすい

Testing your responsive design with PhantomJS — Adnane Belmadiaf’s Blog
http://daker.me/2013/07/testing-your-responsive-design-with-phantomjs.html

browser Tools

PhantomJSを使って様々な画面サイズでCaptchaをまとめて取る方法

CSS Architecture | en.ja | Translated Articles for Front End Developers
http://enja.studiomohawk.com/2013/07/06/css-architecture/

css 翻訳

CSS Architectureの翻訳

The case for setImmediate() | NCZOnline
http://www.nczonline.net/blog/2013/07/09/the-case-for-setimmediate/

JavaScript

setImmediate()のuse caseとrequestAnimationFrame()、process.nextTick()について。
polyfillの実装について等

Chrome DevTools Revolutions 2013 - HTML5 Rocks
http://www.html5rocks.com/en/tutorials/developertools/revolutions2013/

Chrome デバックまとめ

Chrome Dev Toolsの新機能まとめ.
Workspaces、Sass+SourceMap、Reverse port forwarding 、Flame chart、FPS、描画領域の表示、オブジェクトのallocationの計測、Canvasプロファイリング

Soma.js – Your Way Out of Chaotic JavaScript | Flippin’ Awesome
http://flippinawesome.org/2013/07/15/soma-js-your-way-out-of-chaotic-javascript/

JavaScript tutorial library

soma.jsを使ったアプリケーションを作りながら、デザインパターンの紹介やどうやったら疎結合になるのかについて等色々書かれてる
https://github.com/somajs/somajs

TEST CORDING » 基礎からのSass – Sassによる効率的CSSコーディングまとめ
http://testcording.com/?p=412

Sass まとめ

Sassについての記事まとめ

Interview with Addy Osmani, Developer Programs Engineer at Google
http://www.awwwards.com/interview-with-addy-osmani-developer-programs-engineer-at-google.html

JavaScript person インタビュー

Addy Osmani インタビュー
Yeoman、Chrome Dev Tools、TasteJS、JavaScript Future、Dart、情報源の移り変わり

スライド、動画関係

Advanced Jasmine - Front-End JavaScript Unit Testing
http://www.slideshare.net/larsthorup/advanced-jasmine

jasmine スライド

Jasmineについてのスライド。
メソッド、コンストラクタのモックの使い方、Fake Timer、DOM fixture、非同期テスト、matcherについて等

ES6: The Awesome Parts
http://www.slideshare.net/domenicdenicola/es6-the-awesome-parts

JavaScript ECMA スライド

@esdiscussの方によるGenerator *, Template Stringについてのスライド.
Template Stringの実用的な使い方について

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

A better way to learn AngularJS - AngularJS Tutorial | Thinkster
http://www.thinkster.io/

AngularJS tutorial

AngularJSについて学ぶサイト
Egghead.ioの動画などを含めて、段々と学べる感じになってる

ツール、ライブラリ関係

Furatto
http://icalialabs.github.io/furatto/index.html

JavaScript css design library

フラットデザインなフロントエンドフレームワーク
CSS、JavaScript + UIコンポーネントな感じ

nzakas/eslint
https://github.com/nzakas/eslint

JavaScript Tools

JavaScriptのLintツール.
Lintのルールをpluginとして管理できる仕組みを持ってる

Minified.js - A Truly Lightweight JavaScript Library
http://minifiedjs.com/

JavaScript library

Util、DOM操作、アニメーション、Promise、IE互換のためのJSONやXHR、event handler等の機能を持ったライブラリ。
ビルド用の条件分岐が細かく入っていて、カスタムビルドできるようになってる。

somajs/somajs
https://github.com/somajs/somajs

JavaScript MVC library

Dependency injection,Facade pattern,Observer pattern, Command pattern, Mediator pattern,
Templatesなどの実装が入ったMV*ライブラリ。
本体の行数は意外と小さい。

Soma.js – Your Way Out of Chaotic JavaScript | Flippin’ Awesome の方も一緒に見るといいかも。

ccampbell/mousetrap
https://github.com/ccampbell/mousetrap

JavaScript キーボード library

シンプルなキーボードショートカットライブラリ

goloroden/isolated
https://github.com/goloroden/isolated

node.js testing

Nodeのテスト時に使える一時フォルダみたいなものを提供してくれるライブラリ

書籍関係

learn.js
http://learnjs.io/

JavaScript book

"Learn.js is like a collection of LEGO guides.
The goal: a fun way to learn javascript.”

Jump Start JavaScript - O’Reilly Media
http://shop.oreilly.com/product/9780987332189.do

JavaScript book

SitePointのJavaScript,HTML,CSSな書籍

Amazon: WebクリエイターのためのCreateJSスタイルブック ~JavaScript+HTML5で作るアニメーション/インタラクティブコンテンツ~ (Web Designing Books) [単行本（ソフトカバー）]: 野中文雄
http://www.amazon.co.jp/o/ASIN/4839945179/amazon0abac-22/ref=nosim

JavaScript library book

CreateJS本
http://www.fumiononaka.com/Books/CreateJS_Style_Book.html