タグ

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

  • 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
    y-kawaz
    y-kawaz 2012/10/24
    ブラウザの試験
  • Google Chrome11でサポートされた音声入力API - Webtech Walker

    Google Chrome11の正式版がリリースされたわけですが、音声入力APIに対応したようです。 音声入力APIはフォームの入力を音声から取得してテキストに変換してくれるAPIです。 HTML Speech Input API Specification 使い方は超かんたん。speech属性をinput要素に指定するだけ。chrome11ではx-webkitっていうprefixつかないとダメっぽい。こんな感じ。 <input type="text" speech x-webkit-speech> 対応してるブラウザだったらテキストボックスにマイクのアイコンがでてると思うのでクリックすると音声で入力できます。 あと、言語をlang属性で指定できる模様。 <input type="text" speech x-webkit-speech lang="en"> ちなみにGoogle検索とかG

    Google Chrome11でサポートされた音声入力API - Webtech Walker
    y-kawaz
    y-kawaz 2011/04/28
    これは楽ちんだね。ChromeってことはiPhoneのWebKitでもそのうち導入されてくるだろうから、そしたらかなり面白いことになりそうだね。
  • 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
    y-kawaz
    y-kawaz 2010/05/18
    こんなもん実装依存じゃね?そんな探す順序に関する仕様は決められてないと思うし、現在のFirefoxの実装ではそうなってるらしいねってレベルの話だと思う。
  • 1