height auto でも transitionさせたい

height: 0; から height: auto; を行ったり来たりとか、
height: Xem; からheight: auto; を行ったり来たりするときにも、transitionかけたいけど効かないじゃないですかー。

冷静に探したらありましたですよ。
CSS3 transition height 0 to auto

max-height にまあ安全な大きめの数値入れとけば一応transitionかかる。
けれども、あまり巨大な数値を入れておくと、
そこから戻ってくるイメージなんで、初期の反応がえらい鈍くなる。
(※詳しくはよく知らない)

だもんで、duration も短めで、巨大すぎないまあ安全な大きめの数値入れとくのがベターか。

当たり前のとこでハマるjQuery

blog書くまでもないけど・・・。jQueryは既に世に出て結構時間が経っている。

検索して引っかかるのが今のバージョンで動くとは限らない。んでjQuery1.12で動かなかったセレクタの例↓

こうが正しい↓

IE9対応でwindow.matchMediaが使えない時

完全にこのBlogのこと忘れてた。講座でBlogはーとか言ってて全く書いてないのもアレなんで久々のIE9対応、window.matchMediaも使えない。やり方忘れとったんでメモメディアクエリで表示切り替えしてる部分があると思うので

まあ下記のようなイメージで

しかし、タスクランナーとかな慣れきってたのか、直にcssとかゴリゴリ書くの意外と大変

はじめてのCoffeeScript

いまさらながらCoffeeScript書き出している。たった数行の動いているJavaScriptをCoffeeScriptにしようとしたら、動かなかった。公式サイトには、CoffeeScript→JavaScriptはあるが逆はない。ググったら下記のサービス発見

それでも解決できなかった。ちなみに下記のようなコード

色々ググッてみてたら、先人の方のありがたい記録を発見

んでこうなって動いた

動いて嬉しかったので、思わずブログに書いた。&よく使いそうなんでメモ。

Bracketsが相当使えるんじゃないかと

SublimeText と恋に落ちてたんであまり触ってなかったんだけど、Brackets は相当使えるように進化していると思うので、しばらくは浮気しようと思います。

Brackets のポイント

  1. Dreamweaver CCのExtract なあれ PSDデータから色々する奴

  2. クイック編集(インライン要素)

    簡単にいえば、デベロッパーツールが凄く賢くなった感じ。

    Cmd-Eで該当部分のスタイルとかがインラインで出てくる。

    こちらとしては、ファイルのタブも遷移しなくていいので楽。

  3. ライブプレビュー

    元々CSSEditを愛してたので、最近の状況に対応したライブプレビューは嬉しい。

    タスクランナー設定するまでもないようなモノでもライブプレビュー。

オレオレ設定等

 

EmmetのExpandをCtrl-Eにした

ちなみに自分はMac。他のエディタでもCtrl-EでExpandしてるんで合わせたかった。

Tabを当ててる人はEmmetの設定で、チェックボックス入れるだけでいい。

キーバインドをSublimeTextと合わせた

https://github.com/adobe/brackets/wiki/User-Key-Bindingsここに書いてある通り

ユーザーキーマップはこうなった

最後の行がEmmetのキーバインドでその他はSublimeTextと合わせる用

エイリアスに追加すると便利:忘れてたので、2015.1.2追記

atomなんかは、何もしなくても、ターミナルから

とか

とかでatomで開けて便利なんだけど、Bracketsはできない。 正しくは、Terminalからファイル名を指定してBracketsを開く – Qiita のようにシェルスクリプトかな?と思って試したけどうまく動いてくれなかった。 「じゃあ、単なるエイリアスでいいか」って感じで、.bash_profileに

って追記した。

とか

とかでBracketsで開けて便利になった。 しかし、bracketsは打つのがダルいな。bra位にするかな。

Sublime Text で括弧の中だけ選択がどうも

完全に自分用のメモ

sublime-expand-region がうまく動かせんな〜って思ってたけど、
しばらくというかずっと放置してました。

今日ちょっと見なおして、
英語キーボードで、Karabiner とか使ってたんで、
どうもcmd+shift+spaceが、言語入力切り替えに取られちゃって

うまく動いてなかったようだったんで、
キーバインド-ユーザ で
{ “keys”: [“super+shift+m”], “command”: “expand_region” }
ってな具合でspaceの代わりにmで妥協。

node.jsやらnpmやらgruntやらインストールしようとしてはまったのでメモ

もやは何日も前に、インストールしようとしてハマったのでメモ。
※だいぶ前の事なので色々あやふやw

結論

Mavericksにしてから、XcodeのCommand Line Toolsがちゃんと入ってなかったらしい。
先に、ちゃんとCommand Line Tools入れないかん!

経緯

Homebrewでnode.jsやらnpmの最新のをインストールしようとしても
ErrorやらWarningだらけでなんのこっちゃ?と
右往左往しよったんですが、
たぶんその間にbrew doctorもしたかもだけど、それらしきこと書いてなかった気がする。
もしかして、MavericksにしてからあんまりHomebrewとかいじってないぞとか思って、

XcodeのCommand Line Tools入れたら、ちゃんとインストールできたって話。

結局、Homebrewごとインストールしなおして、綺麗になったw