24 Jan 2013

RSpecのベストプラクティス

オンライン上のRSpecのベストプラクティスって結構限られていますよね。Specの書き方の基本が分かると”ControllerのexampleでViewやModel出力のバリエイションを担保しない。”といったような一定のノウハウにそってスペックを書きつつコーディングもきれいに整頓していきたくなるところ。

- Better Specs
Specそのものの書き方を学ぶならここ。Githubの議論付きで紹介しています。

- RSpec Rails in Relish
ベストプラクティスと銘打っているわけではありませんがRailsのMVCHのスペックの書き方をここで学ぶことができます。

8 Jan 2013

[Sass] @extendの覚えておくべき動作とplaceholder seloctorの使い道

以前から疑問に思っていたSassのplaceholder selectorの使い道がひとつ見つかりました。それは既存の継承の定義を汚さずに拡張を行うというものでした。といっても例をあげないことにはぱっと伝わらないと思います。以下のような順番でおさらいをしながら話を進めます。

extend => placeholder selector => codeschoolの応用問題



@extendの基本的な使い方


@extendの基本的な使い方はこのようにクラスを拡張して他の要素(この例だとborder-with)を付け足すことだ。
.error {
  border: 1px #f00;
  background-color: #fdd;
}

.seriousError {
  @extend .error;
  border-width: 3px;
}

>> 

.error, .seriousError {
  border: 1px #f00;
  background-color: #fdd; }

.seriousError {
  border-width: 3px; }



出力結果はもともと定義されていたCSS上の.error{} にセレクタである.seriousErrorを追加して同じスタイルを適応している。さらに.seriousError{ border-width: 3px; } を単体で宣言することで拡張という概念を実現している。

では、上記の例のように既に.errorsが拡張されている場合に、.errorsを別のところでも定義したらどうなるだろうか？
.error {
  border: 1px #f00;
  background-color: #fdd;
}
.error.intrusion {
  background-image: url("/image/hacked.png");
}
.seriousError {
  @extend .error;
  border-width: 3px;
}

>> 

.error, .seriousError {
  border: 1px #f00;
  background-color: #fdd; }

.error.intrusion, .seriousError.intrusion {
  background-image: url("/image/hacked.png"); }

.seriousError {
  border-width: 3px; }

出力結果には.error.intrusion だけでなく.seriousError.intrusion もできるんですね。


実はこれ本家のリファレンスにある基本的なextendの例なんです。


placeholder selector


Placeholder selectorはそれそのものの定義は何も出力されませんが、それをextendするとextendした先の定義が出力されます

// This ruleset won't be rendered on its own.
#context a%extreme {
  color: blue;
  font-weight: bold;
  font-size: 2em;
}

//However, placeholder selectors can be extended, just like classes and ids. The extended selectors will be generated, but the base placeholder selector will not. For example:

.notice {
  @extend %extreme;
}

>> 

#context a.notice {
  color: blue;
  font-weight: bold;
  font-size: 2em; }

僕はこれの使い道がいまいち分かりませんでした。


Codeschool


以下は僕がCodeschoolで遭遇した問題です。


= 問題本文 =
Whoops - we've discovered an alteration to .blueprint later in our stylesheet, and extending .blueprint with .surveyor is creating extra selectors in .factory that aren't needed. Create a placeholder selector called container to hold the shared properties and extend it with .blueprint and .surveyor to remove the extra .factory .surveyor selector.

？？？なんじゃそりゃ。と初見だと文の意味すらよく理解できなかったです。
でも上記のコンテキストを踏んでいるのでもうお分かりじゃないかと思います。

意訳するとこういうことですね。

最初に .blueprint を定義して .factoryでextendした。
.blueprint {
  background: blue;
  border-radius: 5px;
  margin-bottom: 15px;
  padding: 10px;
}
.factory {
  background: #fff;
  .blueprint {
    margin-bottom: 20px;
  }
}


だけど、変更が必要で .surveyor を作って extend した。

.blueprint {
  background: blue;
  border-radius: 5px;
  margin-bottom: 15px;
  padding: 10px;
}
.surveyor {
  @extend .blueprint;
  color: #fff;
}

.factory {
  background: #fff;
  .blueprint {
    margin-bottom: 20px;
  }
}

そしたら、出力結果に予期せぬ余分な .factory .surveyor が入ったのでこれを取り除きたい。
.blueprint, .surveyor {
  background: blue;
  border-radius: 5px;
  margin-bottom: 15px;
  padding: 10px;
}

.surveyor {
  color: #fff;
}

.factory {
  background: #fff;
}
.factory .blueprint, .factory .surveyor {
  margin-bottom: 20px;
}

Placeholder selectorを作って余分な .factory .surveyorセレクタを削除してください。

どうでしょう、make senseしましたか?すでに定義済みの継承関係.factory{ .blueprint{} }を汚さないように拡張をするのにplaceholder selector使ってくださいと言っています。こういうケースならplaceholder selectorが使えるのかもしれません。


では以下が問題全文です。回答もありますので併せて参考にしてみてください。

Whoops - we've discovered an alteration to .blueprint later in our stylesheet, and extending .blueprint with .surveyor is creating extra selectors in .factory that aren't needed. Create a placeholder selector called container to hold the shared properties and extend it with .blueprint and .surveyor to remove the extra .factory .surveyor selector.

.blueprint {
  background: blue;
  border-radius: 5px;
  margin-bottom: 15px;
  padding: 10px;
}
.surveyor {
  @extend .blueprint;
  color: #fff;
}

.factory {
  background: #fff;
  .blueprint {
    margin-bottom: 20px;
  }
}

>> 

.blueprint, .surveyor {
  background: blue;
  border-radius: 5px;
  margin-bottom: 15px;
  padding: 10px;
}

.surveyor {
  color: #fff;
}

.factory {
  background: #fff;
}
.factory .blueprint, .factory .surveyor {
  margin-bottom: 20px;
}



回答；
%container {
  background: blue;
  border-radius: 5px;
  margin-bottom: 15px;
  padding: 10px;
}

.blueprint {
  @extend %container;
}
.surveyor {
  @extend %container;
  color: #fff;
}

.factory {
  background: #fff;
  .blueprint {
    margin-bottom: 20px;
  }
}

>> 

.blueprint, .surveyor {
  background: blue;
  border-radius: 5px;
  margin-bottom: 15px;
  padding: 10px; }

.surveyor {
  color: #fff; }

.factory {
  background: #fff; }

 .factory .blueprint {
   margin-bottom: 20px; }


まずは.blueprintに親になる %containerを定義して拡張することで出力結果の .blueprint{} と .factory .blueprint{} を実現します。.surveyor{} には color: #fff; という拡張を入れたいので別途 %containerをextendしています。そうすると、.factory { .blueprint{} } は .blueprint だけに適用されますから余分な .factory .surveyerは出力されません。

覚えているようで覚えられない5通りのActiveRecordの属性を変更する方法

メモ；

5 Ways to set Attributes in ActiveRecord




5 Ways to set Attributes in ActiveRecord


Method Uses Default Accessor Mass Assignment Protection Saved to Database Validations
attribute= Yes No No n/a
write_attribute No No No n/a
update_attribute Yes No Yes No
attributes= Yes Yes1 No n/a
update_attributes Yes Yes Yes Yes

TextMateでパス指定でファイルを開く 

# Create sym link to mate command
% ps aux|grep Mate
tatsuya-suzuki 36875   0.0  1.4   920560 121252   ??  R     2:07PM   0:13.67 /Applications/TextMate.app/Contents/MacOS/TextMate -psn_0_2155022

% sudo ln -s /Applications/TextMate.app/Contents/Resources/mate /usr/bin/mate

# Now you can open a file with the command
% mate config/database.yml

mate commandの前にTextMateでプロジェクトを開いていれば一個のプロジェクトに全てのファイルがそれぞれのタブとして開かれます。そうでない場合は一個のファイルにつき一個のプロジェクトが立ち上がるので注意してください。

参考：
http://superuser.com/questions/201251/how-to-add-textmate-to-my-path-on-mac
https://github.com/textmate/textmate/issues/327

7 Jan 2013

CodeSchoolを試してみてる

最近いろいろなタイプのオンラインの学習サイトが乱立していることは皆さんもご存知のことと思います。

お手軽にプログラミングを学習したい人のための厳選5サイト

その中にはあまりにも一般化しすぎているものや、”やりたいことはあるけど使い勝手がいまいち。。”的なものなどあって、試してみるまでなかなかどれが良いか分かりません。そんな中周りの評判が良かったのと、自分で使った感じも良かったのでCodeSchoolを使い始めています。


コードスクールの良さ


コードスクールが良いのは、書きながら覚えていくことにラーニングのアプリケーションが特化しているので知識の吸収効率が良いこと、それから、ながーーいリファレンスから必要な情報を抽出する手間を省いてくれていることなどです。

Webのエンジニアリングの世界って分量的にカバーしておくべきが多いですよね？CodeSchoolは月＄５０と割高な感じなんですが、全ての技術に分厚い本を買って望む暇は無いけれど体系化した知識を付けてないと業務上の実践では不安というケースには有効です。

コースはこんな感じのがあります。今のところRuby on Rails界隈のスタックが多いけど、徐々に汎用的なコースが増えてきている感じがします。

Git, Sass, CSS, Mobile, HTML5, Coffeescript, jQuery, iOSなんかのコースがあるのもうれしいですね。
- Javascript
- デザイン
- Web tools



始めた理由


- 以前iKnowを毎日やって成果が出たので感覚的にこういう感じのタイプの公文式みたいに繰り返しやって覚えるオンラインラーニングに慣れている
- 毎日２時間の学習時間は取れないけど、３０分なら取れる。週に一日２時間よりも、毎日３０分x５日の方が頭に定着する
- ＄５０は高いけど本の料金やWeb上のドキュメントとそれにかける時間を考えるとまあ良いかなと思える。仕事への投資と思えば安い。


迷っている人は全てのコースの１個目のチャレンジは無料なのでものの試しにやってみることをお勧めします。ユーザ登録しておくとたまにディスカウントのメールが来るので良いですよ。



以上、また一ヶ月後に使った感想を書くかも！

6 Jan 2013

Macのキーリピートを”さらに”早くする

Macでキーリピート（キーボードの出力を繰り返し行うこと）の早さの設定は環境設定からの標準に設定できる範囲では非常に遅い。


defaults writeから直接編集してもまだ遅い

それで見つけたのがこの記事。 KeyRemap4MacBook というアプリを使えばkeyの再配置だけでなく、リピートの早さも設定できる。




- Initial wait で最初にキーを押してからリピートが始まるまでの時間
- Waitでリピートの間隔
をそれぞれ設定すれば完了だ。


Macを使うようになってからずーーーーーっとおざなりにしてしまっていたうざったい問題がこれで解決した。