Blog.おにぎりたまごうぃんなー

Suzuki Yuki@s12bt おべんと箱みたいに色々つめこみたい。仕事とかデザインとか料理とか好きなもののことを書きます。

amazonでフォアグラが買えるし大人数パーティーにオススメ

フォアグラが好きです。
結婚式で食べてから、この世にこんなうまいものがあるのかと衝撃を受けた。
おうちでもフォアグラが食べれないか…

f:id:s12bt:20131225153614p:plain

あ!あったー!!!!!

最高級extraグレード!ハンガリー産フォアグラ・ド・カナール500?600gのビックサイズ!!

最高級extraグレード!ハンガリー産フォアグラ・ド・カナール500?600gのビックサイズ!!

しかも500gで3200円と思っていたよりも安い。

贅沢なフォアグラパーティーをしました

500gのやつを頼みました。
真空パック、冷凍で届きます(写真撮り忘れた)。
冷蔵庫につっこんで解凍。

1日目

f:id:s12bt:20131225154750j:plain
バターでソテーして、大根をコンソメで煮たものを下に引きました。
Cpicon フォアグラ大根 by nyaop

マデラワインが手に入らなかったので、ソースはこちらのレシピから拝借。
Cpicon お家で☆フォアグラと牛ヒレ肉のステーキ♪ by ★ぷう★
ちょっと甘みが強く感じたので醤油多めにした。

2日目

f:id:s12bt:20131225155430j:plain
フォアグラ丼にしました。
ご飯に合うように、昨日のソースからさらに醤油を足して、甘酸っぱいソースではなく、しょっぱめのソースにしました。
レンコンとししとうを軽く揚げて、フォアグラを焼いてソースをからめた残りの油とからめています。

クリスマスとかお正月とか人が集まるときにすごくいい

1日目で2/3, 2日目で1/3を消費しました。
2人だったら400gでも十分だった。めっちゃうまかったけど胃もたれ。。。

今度は400gにしようと思います。

BootstrapをBEMに考えてみる

この記事はBEM Advent Calendar 2013の22日目の記事です。

こちらの記事を読んで、初めてBEMを知りました。
BEMという命名規則とSass 3.3の新しい記法 - アインシュタインの電話番号
ほー。そのうち調べてみよう。と思ってても人間必要に迫られないとやりません!
Advent Calendarに参加することでやらなきゃいけない理由をつくるライフハック。
とりあえずよく使っているBootstrapをBEMで記述するとどうなるかを考えてみました。

よくあるあるヘッダーでBEMる

Components - Navbar / Bootstrap
f:id:s12bt:20131222210113p:plain

bootstrapのコードはこう

<nav class="navbar navbar-default" role="navigation">
  <div class="navbar-header">
    <a class="navbar-brand" href="#">Brand</a>
  </div>

  <ul class="nav navbar-nav">
    <li class="active"><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li class="dropdown">
      <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
      <ul class="dropdown-menu">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li class="divider"></li>
        <li><a href="#">Separated link</a></li>
        <li class="divider"></li>
        <li><a href="#">One more separated link</a></li>
      </ul>
    </li>
  </ul>
</nav>
Blockはどれか

これをBEMに書き換えてみるよ!

Block - 構成のルートとなる要素。すべてはここから始まると言っても過言ではない。
Element - Blockに所属する子要素。必ずBlockの中にいて単体では生きられない。
Modifier - 元となるBlockまたはElementから変化した状態を表す要素。

BEMという命名規則とSass 3.3の新しい記法 - アインシュタインの電話番号

headerコンポーネントのnavbarと、左側のメニュー類を構成するnavコンポーネントのnav、その中のドロップダウンメニューのdropdownだろう。
1つのパーツの中で3つのブロックが存在している。

Block以下のものを、ElementとModifierを振り分けながらBEMで書く

MindBEMdingは、そのBEMをCSSのクラス名に適用するために作られた規則で、CSS界隈でBEMと言った場合はこのMindBEMdingを指すことが多い。Elementをアンダースコア2つ(__)、Modifierをハイフン2つ(--)で連結することでBEMの各要素を表現する。

BEMという命名規則とSass 3.3の新しい記法 - アインシュタインの電話番号
Bootstrap BEM メモ
navbar navbar Block
navbar-default navbar--default Modifier
navbar-header navbar__header Element
navbar-brand navbar__brand Element
nav nav Block
navbar-nav navbar__nav Element
active nav--active Modifier, navの中の状態を表すもの
dropdown droppdown Block
dropdown-toggle dropdown--toggle Modifier?
caret dropdown--caret Element? Modifier? うーん。上のtoggleがModifierならModifierな気がする
dropdown-menu dropdown__menu Element
divider dropdown__menu__divider dropdown__menuの中でしか使わない区切り線なので、menuの下にいれてみた。
結果
<nav class="navbar navbar--default" role="navigation">
  <div class="navbar__header">
    <a class="navbar__brand" href="#">Brand</a>
  </div>

  <ul class="nav navbar__nav">
    <li class="nav--active"><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li class="dropdown">
      <a href="#" class="dropdown--toggle " data-toggle="dropdown">Dropdown <b class="dropdown--caret"></b></a>
      <ul class="dropdown__menu">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li class="dropdown__menu__divider"></li>
        <li><a href="#">Separated link</a></li>
        <li class="dropdown__menu__divider"></li>
        <li><a href="#">One more separated link</a></li>
      </ul>
    </li>
  </ul>
</nav>

コンポーネントがどう構成されているか見渡しやすくなった気がする

Bootstrapのドキュメント読んでると、サンプルコードで、コンポーネントとコンポーネントの関係がわかりずらい時がある(今回みたいに、navとnavbarとか)。
そういうときにBEMで書かれてると、activeっていうのはnavコンポーネントの要素だよっていうのがhtmlだけで一目でわかるからいいのかもしれない。
CSS見たら、BEMすごい気持ち悪いなと思ったけど、HTMLに起こすと、CSSの断片から構造が見えていいなと思ってる。

っていうか、結果がすごく間違ってる気がする。BEMこれであってるのかなー。
bem-methodology-ja/definitions.md at master · juno/bem-methodology-ja · GitHubを読むと、CSSプリプロセッサで書くときに、色々楽になりそうな感じがする。

理解がまだまだ浅いので、BEM Advent Calendar 2013の他の方の記事読み込んで勉強します。

MacBookAirを買ってから設定したりいれたりしたもの[フリーランス/UIデザイナー/27歳/女性]

年末が近いので棚卸しブームです。
備忘録も兼ねて。

続きを読む

コワーキングスペースに拠点を置く

f:id:s12bt:20131208001407j:plain
この記事はコワーキング Advent Calendar 2013の8日目の記事です。
昨日は広島のコワーキングスペース Shake Hands.オーナーのIchikawaさんでした。
まわりが運営者の方ばかりみたいで、ADVENTAR見てて飛び入りしてしまったので大丈夫かなと不安に思いつつ。
コワーキングスペースって場所は今年の私にとってすごく重要な場所だったので、利用者視点で書いていきます。

続きを読む

おれのさぶらいむてきすとはGruntが実行できる!【おれのさぶらいむてきすと Advent Calendar 7日目】

おれのさぶらいむてきすと Advent Calendar 7日目です。7日目です!
ついに1週間です!スズキユキ@s12btです。
昨日は@kei_qさんの「おれがさぶらいむてきすとのパッケージを探すときの方法」でした。

最近の仕事を始めるときの環境づくり

  1. bowerで必要なプラグインもろもろを落としてきて
  2. Gruntプラグインを入れて
  3. Grunt.jsでLessのパスなどなどを書いて
  4. 作業開始

Gruntなしでは仕事したくない感じがします。
Gruntさんには、Lessのコンパイルとwatch+livereloadをお願いしています。
s12bt/less-watch-compile · GitHub

ウィンドウが邪魔

Sublime text, Terminal, ブラウザの3つが最低限発生してしまう。
これをなんとか減らせないものか。
探したらステキプラグイン見つけた!!!

Sublime textでGruntを実行する

tvooo/sublime-grunt · GitHub

続きを読む