タグ

ブックマーク / webtech-walker.com (7)

  • 静的サイト開発ツールとしてのMiddlemanとGrunt - Webtech Walker

    最近自分の周りを見ると、フロントエンドの開発ツールといえばGruntをみんな使ってるんだけど、Middlemanを使うのもけっこういいんじゃないかと思ったので比較してみる。 実現したいこと 例えば次のようなものをつくりたいとする。 HTMLは数ページ〜十数ページくらい(ヘッダ・フッタくらいは共通化したい) JSはconcatしてminifyしたい CSSはSassを使いたい 開発時はwatchしたり動的サーバーなりでJSやCSSは動的にビルドしたい 最終的には成果物として静的ファイルを出力したい まあ、フロントエンドの開発ではいたって普通な要件だと思う。普段サーバーサイドの開発してたり、サーバーサイドと一緒にフロントエンドも開発してる人にとっては、静的ファイルだけ成果物としてあればいいとかあるの?と思うかもしれないけど自分の周りではけっこうよくある。 Gruntとの比較について このような

    静的サイト開発ツールとしてのMiddlemanとGrunt - Webtech Walker
  • mochaとphantomJSとtravis-ciでフロントエンドJavaScriptのテスト - Webtech Walker

    東京Node学園祭2012 アドベントカレンダーの9日目です。Node.jsとほとんど関係ないうえに内容がけっこう薄い感じなった気がするんですけど気にせずいこうと思います。 フロントエンドJavaScriptをテストするとき最近はいつもmochaを使ってるんですが、やはりJenkinsとかtravis-ciを使って自動テストもしたいと思って試してみました。 hokaccha/mocha-phantom-travis-test ここではよくあるjQueryで画像のロールオーバーをするというプラグインを作ってそのライブラリに対してテストを書いています。ソースコードはこんな感じです。 $.fn.rollover = function() { return this.each(function() { var $img = $(this); var src = $img.attr('src');

    mochaとphantomJSとtravis-ciでフロントエンドJavaScriptのテスト - Webtech Walker
  • TitaniumでiPhoneアプリを申請に出すときのフロー - Webtech Walker

    アプリ申請始めてで色々細かいところで色々はまったのでメモ。 Provisioning Profileをつくる まずProvisioning Profileをつくります。以下の記事が参考になると思います。 目指せ!iPhoneアプリ開発エキスパート:第10回 App Storeでアプリを公開|gihyo.jp … 技術評論社 まずはまったのが、ここでDistributionのタブがでなかったこと。これはアカウントのRoleがAgentの人じゃないとでないみたいです。僕のRoleはAdminでしたorz AgentのアカウントでProvisioning ProfileつくったらそれをTitaniumに登録します。以下のSelect Provisioning ProfileというところにダウンロードしたProvisioning Profileを設定します。 ここで気になるのがSelect Dis

    TitaniumでiPhoneアプリを申請に出すときのフロー - Webtech Walker
  • Python初心者によるPythonのいいところ、はまりどころのまとめ - Webtech Walker

    Python勉強し始めて一ヶ月くらいたったんで一度復習を兼ねてまとめてみようと思います。僕が今までPHPとかPerlとかJavaScriptを使っていて、Pythonはこうやるのかーとか、これは便利だなーと思ったところ、開発していてはまったところなどピックアップしてみました。 初めてのPythonを読んで初心者向け勉強会に参加した程度の知識です。とりあえず初めてのPythonがかなりいいのでこれ読むだけで大体基礎は習得できた気がします。基的な文法の説明だけでなく、大事なことは何回も繰り返し書いてあったり、Pythonの思想などにも触れているのでなぜこういう実装になっているかということも理解できます。これオススメ。 尚、このエントリーではPythonのバージョンは2.5をベースにしてます(主にGoogleAppEngineで使ってるので)。間違えなどあったらツッコミお待ちしてます。 文法、

    Python初心者によるPythonのいいところ、はまりどころのまとめ - Webtech Walker
  • CSSセレクタの高速化の話し - Webtech Walker

    続・ハイパフォーマンスWebサイトを読んでCSSセレクタの高速化の話しが面白かった(というか全然知らなくてちょっとびびった)ので紹介します。 セレクタは右から左に解釈される これは正直知らなくて、結構衝撃でした。 #foo .bar {} これはなんとなく#fooを探して、その中の.barを探している気がしてたんですけど、実は.barを探して、その親要素に#fooがあるかを探すそうです。なので特に#fooが必要なければ .bar {} と書いたほうが高速だということ。 また、以下の様に要素名で指定すると、その要素を全て探します。 #foo a {} これは一度a要素を全て探すので、できればaにclassをふって #foo .anchor {} とするほうが高速のようです。(#fooをとるとより高速) 特にユニバーサルセレクタなどは、 #foo * {} とすると、全ての要素の親要素に対して

    CSSセレクタの高速化の話し - Webtech Walker
  • perlbrew + cpanminus + local::lib で環境構築 - Webtech Walker

    local::libとかcpanmとか便利になってきたなーと思っていたところにperlbrewというまた新たなツールがでてきたので一度ここら辺でperlの環境構築についてまとめときます。 システムにインストールされているperlを使うとOSのアップデートなどの影響を受けてしまうので、それらを使わずホームディレクトリ以下にperlもCPANモジュールも全部インストールしていきます。 perlbrewはperlをバージョン毎にインストールしたり、それらをswitchして使えたりすることができるコマンドです。 App::perlbrew - search.cpan.org まずperlbrewをインストールします。 $ curl -LO http://xrl.us/perlbrew $ chmod +x perlbrew $ ./perlbrew install これで$HOME/perl5にp

    perlbrew + cpanminus + local::lib で環境構築 - Webtech Walker
    lizy
    lizy 2010/04/22
    Pythonのvirtualenv風味?
  • iPhone用のCSSを読み込ませる方法 - Webtech Walker

    iPhoneのみにスタイルを読み込ませるにはMediaQueryというのを使います。MediaQueryはMediaTypeを拡張したもので、CSSを読み込ませるメディアをMediaTypeより細かく指定できます。 詳しくは以下を参照してください。 MediaQuery まとめ - IT戦記 具体的にどうやってiPhone用にCSSを読み込ませるようにするかというと、こんな感じです。 <link rel="stylesheet" type="text/css" media="screen and (min-device-width: 481px)" href="/css/default.css" /> <link rel="stylesheet" type="text/css" media="only screen and (max-device-width: 480px)" href="

    iPhone用のCSSを読み込ませる方法 - Webtech Walker
  • 1