3月 2012
11件の投稿
jQuery.ui.domwindow - ThickBoxみたいなやつ
AjaxかIframeかなんかしらのコンテンツを擬似ダイアログに出すやつを書いた。
gitHub - Takazudo/jQuery.ui.domwindow
なんの素っ気も無いダイアログなんだけれども、なんの素っ気も無いダイアログが欲しかったので書いた。ダイアログのスクリプトはそりゃー山のように世の中には存在するんだけれども、実際に仕事で使う時には、素敵な見た目とか全然いらないことが多いし、そんでもってAPIも柔軟に用意されてないと困るんだよなーと思うことが多かったので、そんな時に便利かもしれない。
今までそういう時は、自分は、DOM window っていうライブラリをよく使っていたんだけれども、このライブラリを使う場合でも、このライブラリのラッパーみたいのを書いてどうのこうのしていた事が多かったので。
目玉な機能？は以下みたいなものか
...
Github Flavored Markdownをローカルでプレビューする for Mac
300円ぐらいでこのアプリを買う
Marked: MultiMarkdown preview, everywhere
必要なやつらをインストール
$ sudo gem install redcarpet
$ sudo gem install pygments.rb
$ sudo easy_install pygments
どこぞから拾ってきた以下のスクリプトをローカルのどっかに置く
https://gist.github.com/2216954
例えば /hoge/foo/gfm.rb に置いたととして、これを実行可能にする
$ chmod a+x /hoge/foo/gfm.rb
Markedの設定から、Custom Markdown Processorに、 /hoge/foo/gfm.rb を指定する。これでgitHub flavored...
SassのmixinライブラリBourbon
最近CSSを書くのにCompassを使ってたんだけど、
compassとやら試した - Takazudo hamalog
大してCompassの機能を使ってないので、オーバースペックな気がしてきた。なので、Compassのライブラリから、必要なやつだけ引っこ抜いてきて、オレオレライブラリとして使えばいいやと思ったんだけど、なんだかCompassは独自に関数を定義したりしててそのままだと使えないっぽかった。compactとかいう関数が中で使われてて、これがCompass独自に定義しているやつらしく、こいつは、複数の引数を渡し、ある分だけにまとめてくれるやつらしいんだけども。
めんどくさいから他になんか無いかと探してたけど、Sassのmixinをファイルにまとめましたみたいなやつが見つからんかったので、Bourbonとかいうやつにしようかと思ってるところ。
Bourbon Sass...
gruntのサンプルら
grunt がバージョン0.3になり、APIが変更になった。ついでによく使うサンプルらをまとめておいたのでちょこちょこ更新するかも。
gitHub - Takazudo/gruntExamples
CoffeeScript、sass、compassとかをwatchしてコンパイルするやつ。
jQuery.fx.offですべてのアニメーションをカット
jQueryのopacityアニメとIE6,7,8 - Takazudo hamalog
でも昔書いたのだけども、IE8以下ではopacityに対応していないので、jQueryでアニメーションしようとすると、色々なことが面倒。そこで、ばっさりIE8以下対応をさっさとやるのが以下。どうのこうのでブラウザ判別でもして
if (ieLessThan9){
jQuery.fx.off = true;
}
jQuery.fx.off = true にすれば、すべてのアニメーションが一瞬で終わるようになります。これでfadeした時でも一瞬で変わるから問題なしだぜイェイってねー。
※これはかなりUIに関するJSを書く必要があるケースを想定してます
おいおいおい、おれのクライアントはそんなので納得しないぜ？オイ？...
CoffeeScriptをおすすめしたいワケ
以下のエントリでも少し書いたけれども、
CoffeeScriptいいかも - Takazudo hamalog
それ以降、CoffeeScriptでJSを書き続けていて、やっぱCoffeeScriptいいなーと結構思ってる。自分にとってのCoffeeScriptがいいと思う一番の理由は、「オブジェクト指向的なコードが、ストレス無く書けるから」っていう点だと感じてる。例えば、以下のような動作をするUIがあり、
サンプル
このひとまとめのUIを管理するクラス的な物を作ろうとしたら、例えば以下のようになる。
var Hoge = function(el) {
this.content = el.find('.content');
var self = this;
el.find('button').click(function() {
self.toggle();
...
Backbone.jsでTweetDeckっぽいUIなサンプル
Twitter検索を複数のカラムで見れるみたいなそういうやつを、Backbone.jsの勉強のために作ってみた。
BackboneTwitterExample
gitHub - Takazudo/BackboneTwitterExample
app.coffee
クラス図っぽいの
Modelに対応するViewを作り、modelの更新などをトリガーにしてViewを更新するみたいな感じにして、ModelはViewのことを知らなくても良くすればいいっぽい。
おまけで、上記アプリは検索したクエリーをlocalStorageに保存していて、ブラウザ閉じても前開いてた奴がすぐ出るようになってる。あと、右上にあるカウンターは3分おきに各検索結果をリロードするもので、クリックするとこのインターバルの感覚を変えられる。
Backbone.jsでUIの状態を管理するみたいなやつ
前のやつの続き。UIの状態がコロコロ変わるのはどこで制御すりゃええねんっていうことで、Managerっていうクラスを作ってそいつにやらせることにした例。といっても、Spine.jsのManagerっていうやつの真似をBackbone.jsでやっただけだけど。Spine.jsのドキュメントによれば、これは、State machine とかいうやつらしい。
サンプル
my.coffee
このサンプルでは、一個クリックすると他のがactiveじゃなくなる。作ったViewのインスタンスを、Managerにぴょこぴょこ追加し、追加されたviewらをまとめてアクティブにしたりしなかったりするようなことをやるだけのクラスを作る。
# ============================================
# Abstract things
#...
Backbone.jsでMVCでTwitter検索なやつをCoffeeScriptで
最近MVCがどうのとか調べたりしてるもんで、前Spine.jsで作ったやつを、Backbone.jsにして書いてみた。
Backbone.js
作ったやつ
# Template manager
# //hamalog.tumblr.com/post/13593032409/jquery-tmpldeck
deck = $.TmplDeck 'templates.html'
# ============================================
# API wrapper
# ============================================
api =
getTweets: (query) ->
$.Deferred (defer) ->
$.ajax
url:...
gitで前のあのタイミングに一時的に戻りたい
git checkout hash
で一時的にそこまで戻る
git checkout master
で元に戻る
あの、すばらしい日々をもう一度 ♪
IEだとcookieにpath=/hoge/foo.htmlみたいな指定は無理
知らんくてハマった。
javascript - RESTful cookie path fails in IE without trailing slash - Stack Overflow
Javascriptのdocument.cookieのpath
path=/hoge とかじゃないと効いてくれなかった。たぶん、path=/hoge/foo.html と指定すると、/hoge/foo.html/ 以下すべてで有効なcookieになるっぽい。つまり、 /hoge.html みたいなページだけに有効なcookieというのは、path=/ と指定しないとダメなため、実質、ページ固有で有効なcookieというのは、ディレクトリをちゃんと切らないと無理っぽい気がする。他のブラウザではページ固有のcookieは有効。
NOOOOOO