#sourcemaps

You can run Hammer for Mac and CodeKit on the same project at the same time!

Basically, I was getting frustrated that I couldn't use sass source maps in Chrome for debugging with Hammer for Mac. I'd bought CodeKit (and updated to the latest version) a while back but I'd never really used it because I like the HTML includes in Hammer for Mac so much* and CodeKit was always an app I thought I'd get around to grasping when I had some free time (yeah, I know).

Anyway, I was working on a project and finally got sick and tired of playing hunt-the-attribute when debugging the CSS/SCSS files. I thought about putting a watch on my scss files using the command line, but on a whim I opened up CodeKit and imported my project into it.

I soon realised that this might cause some problems if I used it to compile the whole project, but seeing as I only needed it to create a sass source map for me, I took a punt on using it to compile the top level sass file (style.scss)**.

It worked! I now have sass debugging goodness while keeping my original workflow intact. Win all round!

  * I know CodeKit can use the kit language to do much the same thing, but I didn't want yet something else to compile every time I made a change

If you want to use the awesome source maps for Sass in Devtools, you will have to:

Go to chrome://flags/ and Enable Developer Tools experiments, then restart Chrome.

Open Devtools and check Enable source maps in General tab and Support for Sass in Experimental tab.

Download latest Sass from the console: gem install sass --pre (you might need sudo)

Just adding sass_options = {:sourcemap => true} to config.rb in Compass won't work (just yet) and you can even get Compass conflicts with the aforementioned Sass alpha version. In my case, Compass 0.12.2 (Alnilam) does not get on very well with Sass 3.3.0.alpha.103 (Bleeding Edge), though it might be some other gem conflict.

JSer.info #87 - WebStorm等のJetBrains製IDEはBack To School saleで50%オフのセール中(2012/09/14まで)なので、 以前書いたWebStormについての紹介記事を現在のバージョン5.0に合わせた改めて最強のJavaScript IDE 「WebStorm」についてまとめてみた(改訂版)という記事を書きました。 Oreilly Mediaも同様に、Back-to-School Specialのセールをやっています。

Node.js: Style and structureという記事で、Node.jsの非同期なコード向けのコーディングガイドの記事がよくまとまってるので、 コールバックなど大部分は普通のJavaScriptでも同様の事が当てはまるので読んでみると面白いと思います。

今週はSourceMapsについて話題が色々な所で見られた気がします。

UglifyJS v2

CoffeeScript Source Maps ☃ Ryan Florence Online

Const なんとかさん関連のツール群をつかうと、簡単に EcmaScript target の言語をつくれる! - tokuhirom's blog.

など、JavaScript関連のツール周りの変遷を感じられます。

ヘッドライン

Back-to-School Special - Save up to 50% - Choose from 1000s of Books, Videos, Courses - O'Reilly Media http://shop.oreilly.com/category/deals/b2s-2012-special.do

Oreilly 全ての電子書籍が50%オフ September 18, 2012 at 11:59pm PTまで

Back To School sale: JetBrains tools for up to 50% OFF! | JetBrains Company Blog http://blog.jetbrains.com/blog/2012/09/03/back-to-school-sale-jetbrains-tools-for-up-to-50-off/

WebStorm/PHPStrom等JetBrains系IDEが全部50%オフ

jQuery Mobile 1.2 Beta Released | jQuery Mobile http://jquerymobile.com/blog/2012/09/05/jquery-mobile-1-2-beta-released/

jQuery Mobile 1.2 Betaリリース。 mobile safari/Android Browserで読み込むだけでXSSができる脆弱性が修正されてる http://masatokinugawa.l0.cm/2012/09/jquery-mobile-location.href-xss.html

アーティクル

改めて最強のJavaScript IDE 「WebStorm」についてまとめてみた | Web scratch http://efcl.info/2012/0909/res3111/

WebStorm 5.0ベースの変更点や機能紹介まとめ その他、最近JavaScriptなIDEなどについて

WebMatrix 2 is Released! + New Windows Azure Features - Windows Azure - Site Home - MSDN Blogs http://blogs.msdn.com/b/windowsazure/archive/2012/09/06/webmatrix-2-is-released-new-windows-azure-features.aspx

WebMatrix 2リリース。 NodeとかHTML5との補完が入った. MS系のIDEについては https://speakerdeck.com/u/mayuki/p/javascript-community-open-day-2012 とかも一緒に見ると良さそう

Node.js: Style and structure http://caolanmcmahon.com/posts/nodejs_style_and_structure/

JavaScriptのコードスタイル、コード構造のパターン。 ガード節、コールバックとerror、非同期の中でthrowしない、エラーのキャッチ。 全体的に非同期とコールバックフローの扱いについて書かれてる

node.js におけるエラー処理のコーディングパターン (もしくは非同期 JavaScript における例外処理) - kazuhoのメモ置き場

JavaScript Design Patterns: Table of Contents - Rob Dodson talks internets http://robdodson.me/blog/2012/08/03/javascript-design-patterns

JavaScriptのデザインパターンについて(の目次ページ)

Standards for Web Applications on Mobile: current state and roadmap (August 2012) http://www.w3.org/2012/08/mobile-web-app-state/

W3Cのどの仕様がどの機能を定義しているか、ワーキンググループ、現在のバージョンの段階、ブラウザの実装状況(mobileも含め)、テストスイートのまとめ。

JavaScriptでのbuilt-in/DOM objectのprototype拡張 - 文殊堂 http://d.hatena.ne.jp/monjudoh/20120904/1346764216

JavaScriptのPrototype汚染について改めて紹介。ES5でのdefinePropertyで列挙の防止は可能だが、コンクリフト自体はなくなるわけではないことについて。

CoffeeScript Source Maps ☃ Ryan Florence Online http://ryanflorence.com/2012/coffeescript-source-maps/

CoffeeScriptとSource Mapsについて https://gist.github.com/3664429

Const なんとかさん関連のツール群をつかうと、簡単に EcmaScript target の言語をつくれる! - tokuhirom's blog. http://blog.64p.org/entry/2012/09/08/090729

自作言語のParser API形式のASTを吐くことで、SourceMap対応のECMAScriptを吐けることについて

Machine Learning in Javascript: Introduction | Burak Kanber's Blog http://burakkanber.com/blog/machine-learning-in-other-languages-introduction/

JavaScriptで機械学習についての記事シリーズ。 JavaScriptでやる理由はページに埋め込むの簡単な事や幅広い人が触ってる言語だから。

jQueryについての所感 ::ハブろぐ http://havelog.ayumusato.com/develop/javascript/e333-jquery_thiking_misc.html

jQueryの役割とコストについて

canvasのgetImageData(), toDataURL()などにおけるCORSについて - 愛と勇気と缶ビール http://d.hatena.ne.jp/zentoo/20120905/1346858940

CanvasのSame Originについて。 img要素のcrossorigin属性とAccess-Control-Allow-Originヘッダを適応すれば、img要素のデータをCanvasで取得できるようになってる

スライド、動画関係

WebGL and Three.js http://www.slideshare.net/yomotsu/webgl-and-threejs

WebGLの仕組みとThree.jsを使った描画方法についてのスライド。

実践Sass 前編 http://www.slideshare.net/azusatomita3/sass-14212266

Sassについてのスライド。 --line-comments によるデバッグ、色変数の扱い、@mixin、@extend 後編 http://www.slideshare.net/kosei27/sass-14212276 ライブラリを作る話、サポートブラウザ別のグローバル設定変数、@content

Firefox and Firebug with Foxkeh http://www.slideshare.net/dynamis/firefox-and-firebug-with-foxkeh

Firefoxの開発者ツールの機能紹介、 Firebugの機能紹介についてのスライド。 一通り機能がまとまってる感じの内容

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

ddopson/underscore-cli https://github.com/ddopson/underscore-cli?ref=hn

JSONを操作するCLIツール。 与えたJSONデータに対してpreety print系やJSON Selector、filter等の処理、is*な判定,template 等の機能を持っている

yp-engineering/jcov https://github.com/yp-engineering/jcov

JSpecとJasmineに対応したカバレッジツール

cliffano/datagen https://github.com/cliffano/datagen

Node製のテスト用データジェネレーター 属性が入ったテンプレートを書いて生成できる

twitter/bower https://github.com/twitter/bower/tree/

Twitter社製のWeb向けのパッケージマネージャー HTML/CSS/JSのパッケージ管理を行うNode製のツール。 Jam, Volo, Enderよりも低いレベルのコンポーネント

ライブラリ関係

Boilerplate | JavaScript Reference Architecture http://boilerplatejs.org/

JavaScriptのBoilerplate。 AMD(requirejs), knockout, jquery, Crossroads.js, underscore, js-signals,sinon.JS,QUnit,YUIDoc,r.js等が含まれている。 AMDベースのプロジェクトテンプレートとして見ていくと良さそう

enquire.js - Awesome Media Queries in JavaScript http://wickynilliams.github.com/enquire.js/

matchMediaのラッパーライブラリ(not polyfill)

Datavisualization.ch Selected Tools http://selection.datavisualization.ch/

JavaScriptのデータビジュアライズライブラリのまとめ。 グラフとかプロットとかタイムライン表示等

Using the Referee assertion library with JsTestDriver http://cjohansen.no/using-the-referee-assertion-library-with-jstestdriver

Buster.JSのReferee assertion(アサーションの文法)をJSTestDriverで使えるようにするライブラリ

OptimalBits/fs.js https://github.com/OptimalBits/fs.js

HTML5 File System APIのラッパーライブラリ。 Nodeのfsモジュール的なインターフェースを提供する

zzo/JUTE https://github.com/zzo/JUTE

Testable JavaScript の著者が作ってるテストフレームワーク

書籍関係

CSS 2.1仕様 日本語訳 EPUB版 - 達人出版会 http://tatsu-zine.com/books/css21

CSS仕様書の日本語訳 epub版 http://d.hatena.ne.jp/momdo/20120907/p1

Effective JavaScript http://effectivejs.com/

著者はMozilla ResearchのDavid Herman. Effective Software Development Series

Smashing Node.js: JavaScript Everywhere (Smashing Magazine Book Series): Guillermo Rauch: Amazon.com: Kindle Store http://www.amazon.com/Smashing-Node-js-JavaScript-Everywhere-ebook/dp/B008Z5OEUY

Node.js本

Testable JavaScript - O'Reilly Media http://shop.oreilly.com/product/0636920024699.do