サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
世界禁煙デー
hokaccha.hatenablog.com
BDD Assert系のモジュールでchaiとexpect.jsを試した。機能はほぼ変わらないけどブラウザのサポートでけっこう差が出た。(ここでいう機能が変わらないってのはchai.expectと比較しての話し。chai.assertとかchai.shouldを考えると完全にchaiが高機能) https://github.com/logicalparadox/chai https://github.com/LearnBoost/expect.js chaiはIE8以下だとぴくりとも動かない。expect.prototype.instanceofとかって予約語をキーにしてるのでが主な原因かな(他にも原因いくつかあるっぽい)。なのでちょっと前のSafari(主にiOS4系)でもアウト。 IE9は動くのは動くけどテストがいくつかこけてる。expect.prototype.throwがバグってた
jekyllの実行が20秒〜30秒くらいかかってさすがにかかりすぎなので原因を調べてみたらコードハイライトに使ってるpygamentsが原因だった。 今現在gemでインストールできるjekyllはコードハイライトにalbinoっていうモジュールを使ってみるみたいで、こいつはハイライトするコードブロックがあるあるたびにpygamentsプロセスを立ち上げるらしく、それが原因で超重くなってたみたい。 コードハイライトしてる部分は280箇所くらいあったから一回の変換で280回プロセスが立ち上がってたみたいなんでそりゃ遅くなるよと思った。 githubの最新を見たらalbinoじゃなくてpygments.rbを使うように変更されてて、こいつはalbinoと違ってFFIを使って高速に動作するらしい。以下のコミットで変更されてる。 https://github.com/tombell/jekyll/c
embededじゃなくて正規化してリレーションしたい場合。これでいいのかわからんけど。mongoose.Schema.ObjectIdというのがSchemaの指定に使えるっぽいので var mongoose = require('mongoose') , Schema = mongoose.Schema , ObjectId = Schema.ObjectId; var BlogSchema = new Schema({ title: String, body: String, created_at: Date }); var CommentSchema = new Schema({ body: String, blog: ObjectId }); var Blog = mongoose.model('Blog', BlogSchema); var Comment = mongoose.m
document.querySelector("textarea").addEventListener("keydown", function(e) { if (e.keyCode === 9) { e.preventDefault(); var elem = e.target; var val = elem.value; var pos = elem.selectionStart; elem.value = val.substr(0, pos) + '\t' + val.substr(pos, val.length); elem.setSelectionRange(pos + 1, pos + 1); } }); selectionStartで現在のカーソル位置を取得してタブを間に挟んだ値を入れる。setSelectionRangeでカーソル位置をタブの後ろにもってくる。
補完関数書いた。 https://github.com/hokaccha/nodebrew/blob/master/completions/zsh/_nodebrew これを$fpathがとおってるところに置くと動くはず。ホームディレクトリとかに補完関数を置きたいなら.zshrcに fpath=($HOME/.zsh_fun $fpath)とか書いて ~/.zsh_fun/_nodebrew ってなるように設置すればOK。 installのときの補完はリモートを見にいくので結果をキャッシュしたりしてる。 補完関数よくわからんくて見よう見まねで書いたので間違ってるところあったら教えてください。 bash補完のpull requestお待ちしております。
色々な言語に対応したシンタックスチェックのプラグイン。けっこうよさげなので使ってみる。 https://github.com/scrooloose/syntastic 設定はこんなん。 " syntastic let g:syntastic_mode_map = { 'mode': 'active', \ 'active_filetypes': [], \ 'passive_filetypes': ['html'] } let g:syntastic_auto_loc_list = 1 let g:syntastic_javascript_checker = 'jshint' HTMLは色々エラるのでとりあえずチェックしない syntastic_auto_loc_listを1にしとくとエラったときQuickfixが立ち上がる jshintを使いたい場合、gjslintとかjslintがイン
jshintで (function() { 'use strict'; var foo = Backbone.Model.extend({...}); })(); とか書くとBackboneがないよこのやろうって怒られる。jsのファイルに /*global Backbone: true*/って書くけばいいんだけど、全ファイルに書きたくない。 調べたら.jshintrcとかに { "predef": ["Backbone"] }って書けばいいというのがわかった。とりあえずこれでいいや。
スマホのクロスプラットフォーム動画対応とか自分でやろうと思ったら大変すぎるのでyoutubeにあげて埋め込むに限る。方法は2つ。どっちも簡単だけど一長一短。なお、検証したのはiOS4.3、Android2.3(Xperia arc) リンク まず一個目。リンク。 <a href='http://www.youtube.com/watch?v=***'>どうが</a> サムネイルとか自分が好きなのを設定できる テキストリンクとかも可能 iPhoneの場合は強制的にyoutubeアプリが起動 Androidの場合はアプリの選択画面になる。ブラウザを選べばyoutubeのページに遷移、youtubeアプリを選べばyoutubeアプリが起動 再生後、元のページに戻るのが少し大変なのがデメリット iframe 二つ目、iframe。youtubeの動画画面にあるiframeをコピペでOK。サイズもご
Node.jsでつくったサービスをJenkinsで自動テスト走らせるようにした。gitでpushしたら自動でテストが走って失敗したらメールとかチャットに通知してくれる。便利。 インストール サーバーはUbuntu(v10.04@sakura vps)なのでここに書いてある通りにする。 http://pkg.jenkins-ci.org/debian/ まずキーを取得。 $ wget -q -O - http://pkg.jenkins-ci.org/debian/jenkins-ci.org.key | sudo apt-key add -次に以下を/etc/apt/sources.listに追加。 deb http://pkg.jenkins-ci.org/debian binary/んでインストール。 $ sudo apt-get update $ sudo apt-get insta
github pagesはプラグイン使えないので、プラグイン使いたい場合はローカルでコンパイルして静的ファイルをpushする必要があるんだけど、その場合ソースファイルの管理どうすればいいんだってのが問題になる。 URLを http://<username>.github.com/<reponame>/_site/とかにすれば話は単純だけど、できれば http://<username>.github.com/<reponame>/でやりたい。github pagesでDocument Root的な設定が可能ならそれで済む話なんだけど、できないのでどうにか頑張るしかない。 で、Octopressってプラグイン使ってgithub pagesにデプロイできるけどどうしてんだろと思って調べてみた。Octopressは $ rake deployってやるとデプロイできるようになってる、んでこのdepl
最近jekyllがマイブームなので自分で使うようのテンプレート作ってみた。 https://github.com/hokaccha/jekyll-template SassのコンパイルとJSのコンパイルをやるjekyllのプラグインつくったので $ jekyllだけでHTML、JS、Sassをコンパイルしてくれるのがポイント。 Sass(というかscssだけど)はソースの場所と出力の場所だけ指定すればOK scss: source: _src/_scss destination: css これで _src/_scss/hoge.scss とかは htdocs/css/hoge.css になって出力される。_(アンスコ)から始まるscssファイルはsassコマンドのwatchと同じく無視するようにしてる(watchの対象にはなる)。sassコマンドでいうと $ sass --watch _s
git push/pullは何気なく使ってるけど実はよくわかってなかった。ことのきっかけはこういう質問。 hogeというリモートブランチをローカルのhogeブランチにもってきたい hogeをローカルのmasterにはマージしたくない pullでなんかこんな感じでいけそう? $ git pull origin hoge:hogeでもこれは間違えで、なぜか今いるブランチ(master)にhogeがmergeされるし、期待してる動作じゃない。正解はこう。 $ git branch hoge origin/hogeもしくはチェックアウトも同時にするなら $ git checkout -b hoge origin/hogeこう。自分は普段後者のやり方でやってたけど、なんで上のはダメで下のが正解なのか説明できなかったのでちゃんと調べてみた。 入門Gitと実用Git、あとhelpを参考にした。 ブランチ
なんか流行ってるみたいなので便乗してみる。 なぜ CoffeeScript がダメか - 冬通りに消え行く制服ガールは✖夢物語にリアルを求めない。 - subtech なぜ CoffeeScript がよいか - 0xff.toBlog() CoffeeScriptは自分にとっては有益だった - Takazudo hamalog 基本的にはcho45さんとほぼ同じ意見(なんで書くことあんまないんだけども)。takazudoさんが挙げてるメリットとデメリットを比べて個人的にはデメリットのほうが大きいと思うってだけ。 var self = this; を書くのがつらいってのはperl書いてたので免疫ができたのかもしれない。(perlだとだいたいメソッドの一行目に my self = shift; とか書くから) あとはBackbone.js使ってたら var MyModel = Backbon
設定ファイルに auth = true書いとくか、起動オプションで --auth つける。 管理ユーザーの追加は、ユーザーはmongoシェルで use admin db.addUser('user', 'passwd')ってする。 これだけだと管理者のユーザー登録だけでDBのユーザーは別途設定が必要。 use mydb db.addUser('user', 'passwd')これでOK。 接続するホストを制限したい場合は設定ファイルに bind_ip = 127.0.0.1とか書くか、起動オプションの --bind_ip で指定する 参考 http://nemolade.melvic.biz/modules/d3blog/details.php?bid=38 Configuration File Options — MongoDB Manual 3.2
.vimrcに augroup vimrc-project autocmd! autocmd BufNewFile,BufReadPost * call s:vimrc_project(expand('<afile>:p:h')) augroup END function! s:vimrc_project(loc) let files = findfile('.vimrc.project', escape(a:loc, ' ') . ';', -1) for i in reverse(filter(files, 'filereadable(v:val)')) source `=i` endfor endfunction とか書いとく。これでカレントディレクトリをさかのぼって.vimrc.projectという設定ファイルを読む。ので、プロジェクトのディレクトリに.vimrc.projectを
ブランチ名にはスラッシュを含めることができるわけだけど、ちょっとはまった。 $ git branch hoge $ git branch hoge/fuga error: unable to resolve reference refs/heads/hoge/fuga: Not a directory fatal: Failed to lock ref for update: Not a directoryという感じで、hogeブランチつくった後にhoge/fugaブランチをつくろうとするとエラる。なんでかというとhogeというブランチ名を作った時点で .git/refs/heads/hoge というファイルができていて、hoge/fuga ブランチをつくるためには .git/refs/heads/hoge/fuga というファイルをつくる必要があるので、すでに hoge があるよってこと
SSLでCookie使う場合はsecure属性つけて非SSLの場合にはCookie送信しないようにするって仕組みがあるわけだけど、connectのsessionもその実装はされてる。 app.use(express.session({ secret: yourSecret, cookie: { secure: true } })); こんな感じ(コードはexpressだけど)。で、こうするとSSLの場合だけCookieが有効になるはずなんだけど、herokuでやってたらSSLのときも有効にならなくて(Set-Cookieされない)なんぞと思って調べてみた。 現状(v1.8.5)のmiddleware/session.jsの該当のコードはこうなってる。 // only send secure session cookies when there is a secure connection.
aliasとunaliasというコマンドを追加したnodebrew v0.5.0をリリースした。 https://github.com/hokaccha/nodebrew 僕は常に最新版のnodeを使ってるわけじゃなくて一個固定のやつ(今はv0.6.6)を使ってて、必要な時に必要なバージョンをuseして、終わったらまたいつも使ってるバージョンに戻してる。っていうのはnpm install -gしたモジュールを毎回インストールするのがめんどいから。 んでそういうときに $ nodebrew alias default v0.6.6とかしとくとuseするときに設定したキーワードを使えるようになる。 $ nodebrew use default use v0.6.6ってできて嬉しい。あとは開発してるサービス名で使ってるバージョンをaliasしとくとかも便利だと思う。 ちなみにaliasの情報は
ってやるとpackage.jsonのdependenciesに勝手にインストールしたモジュール追加してくれるって機能があるらしい。 $ echo '{ "dependencies":{} }' > package.json $ npm install express --save $ cat package.json { "dependencies": { "express": "~2.5.8" } }いちいち手でdependencies追加しなくてもいいので便利。
vimのプラグインでシンタックスチェックやってエラーの行を出してくれる。いろんな言語に対応してるし設定もそんなにいらないし。 https://github.com/scrooloose/syntastic perlとかrubyは何もしなくてもいいけど、jsはjslintとかjshintいれないとダメみたいなんでjshint入れた。 $ npm install -g jshintなんかインストールのときエラったのでググったら同じようにはまってる人がいてnpmアップデートしたらいけた https://github.com/isaacs/npm/issues/1888 あとついでにjsonlintも入れてJSONもチェックできるようにした。
daemontools使えばいいという話しなんだけど、node.jsの死活監視だけならforeverというのでモジュールでできるみたいなのでやってみた。 GitHub - indexzero/forever: A simple CLI tool for ensuring that a given script runs continuously (i.e. forever) $ forever start app.jsとかでアプリを起動できてエラーとかで死んだら自動で再起動してくれる。 あとサーバー再起動時に立ち上がるように/etc/rc.localに起動スクリプト書いた。 PATH=$PATH:/usr/local/bin NODE_ENV=production /usr/local/bin/forever start -p /path/to/forever_dir /path/to/a
この件。主に2.1とかっぽい。 http://www.youtube.com/watch?v=s6c3n7IjKuY 手元の端末だとIS03で同じ現象だった。エミュレーターでも同じ挙動になったので端末依存じゃないかも。 んで検証してみたらtouchstartをpreventDefault()すればうまく動くことがわかった。 http://dl.dropbox.com/u/336104/demo/touch/touchmove.html この例だと上二つはうまく動くけど下二つは動画みたいになる。つまりtouchstartをpreventDefaultすれば問題解決なんだけど、touchstartをpreventDefaultすると、ネイティブのスクロールが効かなくなる。 これで何が困るか。flipsnapはtouchmoveで横と縦どっちに動いたかを判定して、ネイティブのスクロールを止めるか
retina対応するとき縦横それぞれ2倍でつくってbackground-sizeで縮めるとかやるんだけど、Android2.1とかできかなくてどうしようかと思ってたらベンダプレフィックスついてないだけだった。 -webkit-background-size: 100px 50px; background-size: 100px 50px; iPhoneとかAndroid2.3だとプレフィックスいらないので注意。
http://ginpen.com/2011/12/16/apply-to-through/ function log() { // console.logが使えればそれで出力 if (window.console && console.log) { console.log.apply(console, arguments); } // consoleが使えなければalert()で出力 else { // alert()は引数がひとつだけなので、結合してから渡す var text = Array.prototype.join.apply(arguments, [', ']); alert(text); } } log("abc", 1 + 99); これだと出力されたとき(主にchromeのdev toolsのときの話し)の行数がconsole.log.applyのところになっちゃうので個
Less & Sass Advent calendar 2011の14日目です。LESSにextendを実装したので紹介。 LESSはSassに比べて機能が少ないです。その中でもよくLESSにはextendがないのが困るというのを聞くので実装してみました。 SassのextendについてはAdvent Calendarでも後ほど誰かが紹介してくれると思いますが、こんな感じです。 Sassの@extendでCSSとHTMLをシンプルに - あと味 LESS版はこんな感じで書けます。 .foo { width: 100px; } .bar { +.foo; /* この + ってのがSassでいうところの @extend */ } これをコンパイルするとこうなります。 .foo, .bar { width: 100px; } いいですね。よく使いそうなのがclearfix的なやつだと思います。
nodeのqsモジュールのコード読んでたらよくわからん書き方があった。 if (~key.indexOf(']')) { ... } って感じだったんだけど、チルダってなんだっけと思って。 チルダはビット反転演算子で、整数をビット反転させると符号を反転させて1引いた数になる。こんな感じ。 console.log(~-4); // 3 console.log(~-3); // 2 console.log(~-2); // 1 console.log(~-1); // 0 console.log(~0); // -1 console.log(~1); // -2 console.log(~2); // -3 console.log(~3); // -4 console.log(~4); // -5 つまり-1のときだけ0になるので、indexOfと組み合わせるとあんな感じに書けるというわけみた
JavaScript Advent Calendar 2011 (フレームワークコース)6日目です。この前のエントリーで予告したとおりmochaを使ったフロントエンドでのテストについて書きます。ちなみにこの前エントリー書いたときは0.2.0だったんですけどすでに0.3.2です。 必要なファイルを読み込んでこんな感じで書きます。jQueryに依存してるみたいなのでjQueryも読み込みます。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>mocha sample</title> <link rel="stylesheet" href="mocha.css"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.m
JavaScript Advent Calendar 2011 (Node.js/WebSocketsコース)3日目のhokacchaです。Node.jsのテストフレームワーク、mochaについて書きます。 mochaはTJが新しく作り始めているテストフレームワークです。ドキュメントを見ればできることは大体書いてありますので、ドキュメントを元にどういうことができるのかを解説していきます。現時点でのバージョンは0.2.0です。 http://visionmedia.github.com/mocha/ shouldについて まずmochaでどういうことができるかの前にshouldについて解説しておきます。mochaのドキュメントには特に説明もなくshouldが使われていて、shouldでどういうことができるかわかってないと、ドキュメントを読んだときにmochaの機能なのかshouldの機能なの
function Foo() {} Foo.prototype.a = 'b'; var foo = new Foo; console.log(foo.constructor.name); // => Foo これでコンストラクタとれるんだけど、こうするとダメ。 function Foo() {} Foo.prototype = { a: 'b' }; var foo = new Foo; console.log(foo.constructor.name); // => Object Foo.prototype.constructorを上書きしちゃうから。 ちなみにjQueryはこうなってる。 jQuery.fn = jQuery.prototype = { constructor: jQuery, ... }
次のページ
このページを最初にブックマークしてみませんか?
『hokaccha memo』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く