タグ

ブックマーク / blog.makitasako.com (3)

  • jQuery animateのStep関数を使ってみる | blog.makitasako.com

    このエントリーはjQuery Advent Calendar 2013向けに書いたものです。 西畑さんが募集していたので、こういうの初めてですが参加してみました。内容も軽めなのでお手柔らかに・・・。 jQuery の animate 関数でマイナーだけど強力なステップ関数についてご紹介したいと思います。 animate 関数は通常こういう書き方をするかと思います。 $("#hoge").animate "top": "+=10" , 1000, "easeInOutExpo", () -> console.log "Animation done" 少し冗長ですがこういう書き方もできます。上は下記のショートカット的記述なんですね。 $("#hoge").animate "top": "100px", { duration: 500 easing: 'easeOutExpo' complete

  • JavaScriptと正規表現 | blog.makitasako.com

    JavaScript は正規表現でかなり扱うがちょっと難しいのでGoogle先生に頼ったりすることが多い。もうちょっと何とかしたいので復習してみる。JavaScript で正規表現を使うケースが多いのは以下のパターン。 HTML ノードの文字列を操作する CSS セレクタの一部を探しだす 要素が特定のクラス名を持っているか判定する IEのfilterプロパティから不透明度を算出する etc... 正規表現をテストするのによいサイト -> RegexPlanet: online regular expression testing for JavaScript よさげな参考書 -> 正規表現クックブック JavaScript での正規表現 正規表現リテラルとして表現する方法とRegExpオブジェクトのインスタンスを構築する方法の2種類ある。 //正規表現リテラル var pattern =

  • grunt-bake が静的サイト制作に便利だった | blog.makitasako.com

    受託制作をしていると、SSI が使えないサーバーが稀にあって共通要素の扱いに非常に困る。さらにそういうサーバーは PHP すらも使わせてくれなかったり厳しい条件のケースが多い。そんなときよく見かけるのが Dreamweaver のテンプレート機能。何度か使ったことはあるが、こういうときには便利な機能だと思う。 が、自分は Dreamweaver が嫌いだ。理由はいくつかあるが、JavaScript などの閉じカッコを自動で書いてくれなかったり、そして何より重かったり。テンプレート機能についても、自分の使い方が悪いせいもあるかもしれないが、すぐに壊れる貧弱なイメージがある。一度壊れてしまうと戻せなかったはず。少し学習コストが必要なのも気に入らない。 ではどうするか。 こういう課題に grunt-bake は見事に答えてくれた。grunt-bake には SSI 同様にインクルード機能がある。

  • 1