ISUCON3 予選の記録 - Webtech Walker
チームNoderとして@yosuke_furukawaさんと@hakoberaさんと一緒にISUCON3に参戦してきた。ISUCON初参戦。なんとか1日目の9位に食い込んで本選にもでれるっぽい（まだ暫定だけど）。 以下大体の記録。 序盤 前日までにLingerでチャットルーム、GitHubでプライベートリポジトリつくって当日に臨む。当日はyosuke_furukawaさんが勤務するDeNAのオフィスをお借りして3人で集まって作業した。 まず最初にAWSの設定をhakoberaさんにお願いして、sshでログインできるようにしてもらう。僕とyosuke_furukawaさんはAWSに不慣れだったので二人だったらここでだいぶ時間かかった気がする。 とりあえずアプリをgitで管理してローカルで作業できるようにしたりアプリの構成とかベンチマークツールの使い方を把握するなどの雑務をやって、Node.j
静的サイト開発ツールとしてのMiddlemanとGrunt - Webtech Walker
最近自分の周りを見ると、フロントエンドの開発ツールといえばGruntをみんな使ってるんだけど、Middlemanを使うのもけっこういいんじゃないかと思ったので比較してみる。 実現したいこと 例えば次のようなものをつくりたいとする。 HTMLは数ページ〜十数ページくらい（ヘッダ・フッタくらいは共通化したい） JSはconcatしてminifyしたい CSSはSassを使いたい 開発時はwatchしたり動的サーバーなりでJSやCSSは動的にビルドしたい 最終的には成果物として静的ファイルを出力したい まあ、フロントエンドの開発ではいたって普通な要件だと思う。普段サーバーサイドの開発してたり、サーバーサイドと一緒にフロントエンドも開発してる人にとっては、静的ファイルだけ成果物としてあればいいとかあるの？と思うかもしれないけど自分の周りではけっこうよくある。 Gruntとの比較について このような
Ubuntu上でXvfbを使ってJavaScriptのユニットテストをChromeとFirefoxで実行する - Webtech Walker
JavaScriptのユニットテストをJenkinsとかでCIしたいとき、PhantomJSで実行するのもいいけどやっぱりChromeとかFirefoxみたいな実際のブラウザでテストしたい。でも環境作るのめんどくさいよなーと思ってたけどXvfbを使うとChromeとかFirefoxが動くのでLinux版のChromeとFirefoxだけだとわりと簡単に環境つくれた。 Xvfbというのは画面入出力をシミュレートするやつでデスクトップ環境を用意しなくてもChromeとかFirefoxとかが動かせるやつ。 OSはUbuntsの12.04（precise64）で試した。 まずXvfbを入れる。 $ sudo apt-get install xvfb 次にFirefoxを入れる。これもすぐ入る。 $ sudo apt-get install firefox Chromeは一手間必要だけどわりとすぐ入
Windows8のChromeやFirefoxはタッチイベントとマウスイベント両方考慮すべし - Webtech Walker
タッチ系の操作をスマホでもデスクトップPCでも動くようにするため、タッチイベントがある場合はtouchstartやtouchmoveを使い、タッチイベントをサポートしていないブラウザではmousedownやmousemoveを使って同じ挙動にするというケースがあります。 例えばこういうやつ。 flipsnap.js DEMO そのようなケースでは僕はこれまで次のように書いていました。 var supportTouch = 'ontouchstart' in window; var touchStartEvent = supportTouch ? 'touchstart' : 'mousedown'; var touchMoveEvent = supportTouch ? 'touchmove' : 'mousemove'; var touchEndEvent = supportTouch
Backbone.js 0.9.9 の変更点 - Webtech Walker
Backbone.js Advent Calendarの19日目です。 先週Backbone.jsの0.9.9がリリースされてけっこう変更点多いのでChange Logに書いてあるやつを簡単にまとめときます。 Backbone.js - Change Log また、先日清水さん（@tori3_jp）が以下のようなエントリを書いていて、いくつか重複する点がありますので、こちらも参照してください。 Backbone.js 1.0に向けての変更点 « NAVER Engineers' Blog Events関連 EventsにlistenToとstopListeningが追加されました。清水さんのエントリの追記の部分に詳しく書いてあります。 BackboneオブジェクトがEventsを継承するようになりました。Backbone.on('foo')みたいなグローバルなイベントが貼れるみたいです。
nodebrewでバイナリからインストールできるようにした - Webtech Walker
nodebrewの0.6.0をリリースしました。install-binaryというコマンドを追加しまして、コンパイル済みのバイナリからインストールできるようにしました。 バイナリのファイルはNode.jsのv0.8.6以降で配布されるようになったので、それ以前のバージョンはインストールできません。Mac OSX、Linux、Solaris用のがそれぞれ32bitと64bitのものが用意されていて、nodebrewがアーキテクチャから自動で判別してとってくるようにしています。OSXとUbuntuくらいでしか試してないので動かなかった場合は報告ください。 こんな感じです。 $ nodebrew install-binary v0.8.6 fetch: http://nodejs.org/dist/v0.8.6/node-v0.8.6-darwin-x64.tar.gz ############
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');
CSSセレクタの高速化の話し - Webtech Walker
続・ハイパフォーマンスWebサイトを読んでCSSセレクタの高速化の話しが面白かった（というか全然知らなくてちょっとびびった）ので紹介します。 セレクタは右から左に解釈される これは正直知らなくて、結構衝撃でした。 #foo .bar {} これはなんとなく#fooを探して、その中の.barを探している気がしてたんですけど、実は.barを探して、その親要素に#fooがあるかを探すそうです。なので特に#fooが必要なければ .bar {} と書いたほうが高速だということ。 また、以下の様に要素名で指定すると、その要素を全て探します。 #foo a {} これは一度a要素を全て探すので、できればaにclassをふって #foo .anchor {} とするほうが高速のようです。（#fooをとるとより高速） 特にユニバーサルセレクタなどは、 #foo * {} とすると、全ての要素の親要素に対して
ref.vimのjQuery用source書いた - Webtech Walker
thincaさんが書いてるライフチェンジングなプラグイン、ref.vimのjQuery用sourceを書きました。 hokaccha’s vim-ref at master - GitHub ほとんどsoh335が書いたalc.vimのコピペで、単にワードをjQueryのAPIリファレンスのURLに埋め込んで投げてるだけです。 :Ref jquery attr で http://api.jquery.com/attr/ を参照します。「$」を「jQuery」に変換するって処理だけ入れてるので :Ref jquery $.each は http://api.jquery.com/jQuery.each/ を見にいきます。オフラインで使えないのが難点。 javascriptのドキュメントをref.vimで引きたいんですけど、ドキュメント探したけどなかったんでいい感じのドキュメント知ってる方いた
javascriptでArray.prototype.push.applyとかを使う理由 - Webtech Walker
jQueryのソースとで下記のような表記を見かけます。（1.4からは push = Array.prototype.push というエイリアスつくってますけど） Array.prototype.push.apply( this, elems ); これはArray likeなオブジェクトを作るときに用いる手法なんですけど、そこら変はとりあえず置いておいて、なんでこれが this.push( elems ); じゃダメなのかがわからなかったんですけど、検証してみたらすぐわかりました。 var obj = {}; obj.push('foo'); // => [error] obj.push is not a function 上記がエラーになるのに対して以下は成功します。 var obj = {}; Array.prototype.push.apply( obj, ['foo'] ); //
im.kayac.comでiPhoneにtwitterのリプライを通知する - Webtech Walker
im.kayac.comというカヤックのサービスがあるんですが、これを使うとIMとかにHTTPとかメール経由で通知することができて、iPhoneにも対応したのでtwitterでリプライがあったら通知するスクリプト書いてみました。 #!/usr/bin/env perl use strict; use warnings; use AnyEvent::Twitter::Stream; use AnyEvent::HTTP; use HTTP::Request::Common; my $done = AnyEvent->condvar; my $streamer = AnyEvent::Twitter::Stream->new( username => 'twitter_username', password => 'twitter_password', method => 'filter',
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
HTML5Validator.vim書いた - Webtech Walker