ブックマーク / qiita.com/damele0n (6)

  • mocha + enzyme + power-assertの環境構築メモ - Qiita

    npm install -D babel babel-register babel-preset-latest babel-preset-react babel-plugin-espower mocha power-assert enzyme react-addons-test-utils jsdom jsdom-global npm install -S react

    mocha + enzyme + power-assertの環境構築メモ - Qiita
    minony
    minony 2016/08/30
  • CSS: will-change指定時の挙動, パフォーマンスへの影響と考察 - Qiita

    ※will-changeは編集時点(2016/07/27)でCandidate Recommendationの状態です。仕様変更による挙動差異などがあれば適宜コメントを頂けるとありがたいです。 TL;DR 使いどころ JavaScriptでアニメーションを行う際 CSS animation, transitionを:hover等で遅延実行する際 などの、初期値として変形やアニメーションの値を持たない要素を特定の要因で実行する際に効果を発揮する ユースケースによって、常に指定するか、動かす直前から指定して終了時に解除するかを判断する 最適化はUAごとに異なっており、かつ指定したからといって必ず恩恵が得られるものではない "おまじない"的な使い方も有りだが、当にパフォーマンスが必要な場面で有効かどうかはブラウザの実装を調べるのがてっとり早い 前提知識 Webブラウザのレンダリングの仕組み ブ

    CSS: will-change指定時の挙動, パフォーマンスへの影響と考察 - Qiita
    minony
    minony 2016/07/28
  • peco で git branch -a から checkout - Qiita

    function peco-git-branch-checkout () { local selected_branch_name="$(git branch -a | peco | tr -d ' ')" case "$selected_branch_name" in *-\>* ) selected_branch_name="$(echo ${selected_branch_name} | perl -ne 's/^.*->(.*?)\/(.*)$/\2/;print')";; remotes* ) selected_branch_name="$(echo ${selected_branch_name} | perl -ne 's/^.*?remotes\/(.*?)\/(.*)$/\2/;print')";; esac if [ -n "$selected_branch_name"

    peco で git branch -a から checkout - Qiita
    minony
    minony 2014/12/07
  • Webフロントエンドに従事するお前らはいい加減高頻度イベントとレイアウトとスタイリングの付き合い方を考えろ - Qiita

    もうなんかこの際マジで言わせていただくんですけど、知ってるか知らないか分かりませんが世の中にはすごい頻度で呼ばれうるDOMイベントって言うのがいくつかあるわけですよ 例えば scroll mousemove, touchmove devicemotion 辺りですよ。 で、高頻度で呼ばれるって言うことは必然的に処理量が増えるって分かりますよね?????while(1) {}じゃないとはいえUIスレッドに十分影響を与えうる頻度で呼ばれる訳です。分かりますよね???????? そうなると当然そのイベント内で重い処理を行えば人間が認識できるレベルでのレスポンス遅延が起きるっていうのはご理解できますよね? 重い処理っていうのはまぁ想像出来るとは思うんですが例えばよくあるのが DOMのレイアウトプロパティへのアクセス offsetTop、offsetLeft、offsetWidth、offsetHe

    Webフロントエンドに従事するお前らはいい加減高頻度イベントとレイアウトとスタイリングの付き合い方を考えろ - Qiita
    minony
    minony 2014/10/24
  • 本当にあったTouchEventの怖い話 - Qiita

    事前知識: ブラウザ毎の差異 Android 2.x, 3.x 2.x, 3.x では伝統的に TouchEvent がまともに使えません。 経験上、一部端末でdocument.createEvent('TouchEvent')するとNOT_SUPPORTED_ERRを吐くなどの現象が見られ、seleniumのこのコードでも、MouseEventsを利用して無理矢理回避しています。 4.x (Stock Browser & WebView) 4.x では、やっと TouchEvent が利用できるようになります。 が、 イベントの初期化方法が後述する iOS のソレと異なっています。同じくselenium上のコードではこのように回避しているのが見受けられます。 // Android's initTouchEvent method is not compliant with the W3C

    本当にあったTouchEventの怖い話 - Qiita
    minony
    minony 2014/10/07
  • 何となく分かった気持ちになる AngularJS のカスタムディレクティブ - Qiita

    カスタムディレクティブを作るに当たって、覚えておくプロパティがいくつかある。 ディレクティブ ng_service/$compile プロパティ一覧にすると restrict priority template templateUrl replace transclude scope controller require compile link となっている。 相変わらず公式の説明が取っつきづらく、かつ意外と奥が深いので、かみ砕きつつサンプルと一緒に載せておく。 ちなみに AngularJSアプリケーション開発ガイド はわりと役に立つので AngularJS をやるならおすすめの一冊です。 Ebook 版を買っていたのに書籍版も何故か買ってしまったので誰か書籍版を僕から買い取ってください。 restrict HTML 側でディレクティブを呼び込むための形式を定義するプロパティ 複数指定も

    何となく分かった気持ちになる AngularJS のカスタムディレクティブ - Qiita
    minony
    minony 2014/05/16
  • 1