Re: Single Page Application ではない場合 JavaScript コードのエントリポイントはどこにあるべきか？ - Webtech Walker
Single Page Application ではない場合 JavaScript コードのエントリポイントはどこにあるべきか？ - @kyanny's blog Backbone.Routerは基本的にhistory APIやhashchangeを使ったSPAのためのルーティングをしてくれるものなので、SPAじゃない場合に使うのはあんまりオススメできない。 方法は色々だと思うけど、自分の場合はそういうケースでは次のような簡易的なURL Dispatcherを書いて対応することが多い。 dispatcher.js これをこんな感じで使う。 // main.js new Dispatcher() .route('.*', 'Common') .route('/', 'Top') .route('/user/([^/]+)', 'User') .dispatch({ path: locatio
ブログをJekyllからmiddlemanに移行してTravis CIでGitHub Pagesにデプロイするようにした - Webtech Walker
ちょうど一年くらい前にWordPressからJekyllに移行したんだけど、今回middlemanで作りなおしてみた。 hokaccha/webtech-walker - GitHub 特にJekyllに不満があったわけでもなく単に技術的興味によるもの。 middleman Middleman: Hand-crafted frontend development middlemanはほぼJekyllのようなものなんだけど、Asset Pipelineが使えたり、テンプレートがerbとかhaml、Slimなどで書けたり、helperが充実してたりする。 RailsのViewまわりの機能をそのまま持ってきたような感じなので、普段Rails使ってる人にとってはJekyllよりも使いやすいかもしれない。個人的にもJekyllよりはmiddlemanのほうが好みだった。 調べた時にでてくる情報量など
flipsnap.jsでIE10のPointer Eventsに対応した - Webtech Walker
flipsnap.jsをWindows8のIE10のタッチで動くようにしました。 flipsnap.js 思ったより簡単に対応できました。diffはこんな感じ。 IE10 for touch device support. Fix #13 · 0524fef · pxgrid/js-flipsnap IE10はiOSやAndroidのようにtouchstartやtouchmoveのようなタッチイベントが用意されておらず、代わりにタッチした際に、pointerイベントというイベントが発火します。 Pointer Events Specification Touch Input for IE10 and Metro style Apps - IEBlog - Site Home - MSDN Blogs まだMSPointerDownのようにMSというprefixがついています。 elemen
Backbone.jsでNode.jsとクライアントサイドのロジックをイケてる感じで共通化する - Webtech Walker
Backbone.js Advent Calendarの12日目です。 Backbone.jsを使ってNode.jsとクライアントサイドのJavaScriptでロジックを共有する方法について書いてみます。 Node.jsといえばチャット。チャットといえばSocket.IOということでSocket.IOを使ったチャットを例にしてみます。 例えばチャットの一回の文字列の上限を140文字にしたいとします。その場合クライアント側でもサーバー側でも同じバリデーションのロジックを実装するのは面倒ですし、上限値が変更になったときに2箇所変更するのはイケてないですね。そこでBackbone.jsを使ってその部分のロジックを共通化する方法を考えてみます。 Backbone.jsはnpmでインストールできるのでまずはBackbone.jsとSocket.IOをインストールします。 $ npm install
jQueryの非推奨な機能 - Webtech Walker
軽めのjQuery Advent Calendar 2012 3日目の記事です。jQueryのDeprecated（非推奨）な機能をいくつか紹介します。 $.browser これは有名ですね。ブラウザで分岐するんじゃなくて機能があるかないかで分岐するのがいいから$.supportを使えよって話です。 まあIE6だけで起きるバグとかのためにブラウザ判定するのはありだと思いまけどjQuery的には$.browserは非推奨らしいです。 .live() .live()は非推奨で.on()とか.delegate()で同じ事でできるのでこっちを使うのを推奨してるみたいです。 .size() .size()はjQueryオブジェクトの要素数を返すメソッドですが、これが非推奨な理由は.size()と.lengthは同じで.size()のほうが関数呼び出しのオーバーヘッドがかかるから.lengthのほうが
ターミナルからMacVimでファイルを開く - Webtech Walker
ずっとやりたいと思って放置してたのを勉強会で教えてもらってできるようになった。 教えてもらったのはこれ。 MacVim起動コマンド完成版 - namutakaの日記 僕の環境にはなぜかmvimというコマンドが入ってなくて、MacVimのソースの中に入ってるからそこからとってきて使おうと思ったけどソースみてみたらインストールされてるMacVim探してコマンド実行してるだけなんでエイリアスだけで済ませた。 alias macvim="/Applications/MacVim.app/Contents/MacOS/Vim -g --remote-tab-silent" 特にエラーもでないし引数指定しないというのは特に想定しなくてもいいので僕の場合はこれで事足りる。
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'] ); //
HTML5の新要素をjQueryでappendとかするとIEでバグる件 - Webtech Walker
jQueryでsectionとかarticleとかをappendしたときにstyleが反映されなかったという話しを聞いたので調べた＆検証してみたメモ。 デモつくった 調べてみたところ、定義されていない要素をinnerHTMLしてappendChildすると、以下の例の場合IE8以下では開始タグ、テキストノード、終了タグの3つの要素として追加されるとのこと。（html5shivは読み込んでます） var div = document.createElement('div'); div.innerHTML = '<section>section</section>'; document.getElementById('box').appendChild(div); 以下のようにcreateElementすればいける。 var div = document.createElement('div'
Python初心者によるPythonのいいところ、はまりどころのまとめ - Webtech Walker
Python勉強し始めて一ヶ月くらいたったんで一度復習を兼ねてまとめてみようと思います。僕が今までPHPとかPerlとかJavaScriptを使っていて、Pythonはこうやるのかーとか、これは便利だなーと思ったところ、開発していてはまったところなどピックアップしてみました。 初めてのPythonを読んで初心者向け勉強会に参加した程度の知識です。とりあえず初めてのPythonがかなりいいのでこれ読むだけで大体基礎は習得できた気がします。基本的な文法の説明だけでなく、大事なことは何回も繰り返し書いてあったり、Pythonの思想などにも触れているのでなぜこういう実装になっているかということも理解できます。これオススメ。 尚、このエントリーではPythonのバージョンは2.5をベースにしてます（主にGoogleAppEngineで使ってるので）。間違えなどあったらツッコミお待ちしてます。 文法、
jQueryでcheckboxがcheckされてるかの値をとる - Webtech Walker
checkboxがcheckされてるかどうかを判別するメソッドってjQuery側に用意されてないんですよね。 twitterでも色々教えてもらったけど方法としては3つくらいかなー。 https://twitter.com/kyo_ago/status/11685019866 https://twitter.com/songmu/status/11675950113 https://twitter.com/rea/status/11675545507 素のHTMLエレメントから取得 var checked = $('#elem').get(0).checked; せっかくjQuery使ってるのにという感じがいなめない。。これはないかな。 is()で取得 var checked = $('#elem').is(':checked'); これが一番直感的ではある。これでいいっちゃいい気もする。
CSSセレクタの高速化の話し - Webtech Walker
続・ハイパフォーマンスWebサイトを読んでCSSセレクタの高速化の話しが面白かった（というか全然知らなくてちょっとびびった）ので紹介します。 セレクタは右から左に解釈される これは正直知らなくて、結構衝撃でした。 #foo .bar {} これはなんとなく#fooを探して、その中の.barを探している気がしてたんですけど、実は.barを探して、その親要素に#fooがあるかを探すそうです。なので特に#fooが必要なければ .bar {} と書いたほうが高速だということ。 また、以下の様に要素名で指定すると、その要素を全て探します。 #foo a {} これは一度a要素を全て探すので、できればaにclassをふって #foo .anchor {} とするほうが高速のようです。（#fooをとるとより高速） 特にユニバーサルセレクタなどは、 #foo * {} とすると、全ての要素の親要素に対して
perlのワンライナーで使えそうなのをいくつか - Webtech Walker
最近ちょっとしたことはperlのワンライナーでやるので便利そうなのを抜き出してみる。必要に応じてzshの関数とかaliasにしたりとか。ちなみにperlのワンライナーといえばsugyanなのできっともっと便利なのをいくつも紹介してくれるはずです。 画像をbase64にエンコード $ perl -MMIME::Base64 -0777 -wne 'print encode_base64($_)' < file HTMLにdataスキームで画像埋め込むときとか、出力を改行したくないときはencode_base64の第二引数に空文字を渡す。 $ perl -MMIME::Base64 -0777 -wne 'print encode_base64($_,"")."\n"' < file 画像のリサイズ $ perl -MImager -se 'Imager->new->read(file=>$f
IE6のバグのまとめ - Webtech Walker
XHTML+CSSでコーディングするときにブラウザのバグを知っているか知らないかでは大きく違いますよね。とりわけ他のブラウザよりバグが多いIE6さんのバグをまとめてみることにしました。そろそろIE7の自動配布が始まるころなので忘れないうちにということで。 とは言ったもののIE6のバグを改めて見てみると多い･･･多すぎるよ！逆にこれだけのブラウザがあるからこそコーダーという職種がある気さえしてきます。 今回は『CSSバグ辞典スレッド』の要約のWinIE CSSバグリストからIE6のバグを抜き出して自分でわかりやすいように種類わけしてみました。これで全てではないですがこれだけ知ってればかなりのケースで対応できると思います。 2012/07/31 追記: リンク先がなくなったのでリンクを外して一覧だけ残しときます。 ちなみにこの種類分けも厳密ではないのであしからず。 ボックスモデル maring
Mac OS X（Leopard）のローカルにWordpressをインストールしたときのメモ - Webtech Walker
Home Archive Mac OS X（Leopard）のローカルにWordpressをインストールしたときのメモ Mac OS X（Leopard）のローカルにWordpressをインストールしたときのメモ 2008年06月09日 category:Mac, CMS Comment(0) Trackback(0) 最近MacBookを買って色々さわってるんですが、ローカルにWordpressをインストールしたときの手順をメモしておきます。 PHPとApacheはデフォルトでインストールされているという、すばらしい環境なのでMysqlをインストールすればあとは簡単です。普通にMysqlをインストールしてもいいんですが、勉強も兼ねてFreeBSDのportsに似たMacPortstというパッケージ管理システムを使ってMysqlをインストールすることにしました。 Xco
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
