エスケープしよう

Twitter のツイートの用の URL とか直書きできるけど https://twitter.com/intent/tweet?url=http://example.org エスケープしないと IE 系でエラーでちゃうので encodeURIComponent でエスケープを 追記: encodeURIComponent だけだと不十分らしいです enc…

Nightmare

未だ実用に耐えない気がした

node の出力に色をつける

colors 良いです

Don't Use A Reporter Called Nyan

mocha には nyan という素晴らしい reporter がいて、 こいつを使うと nyancat がテスト結果を知らせてくれる、 カワイイヤッターな攻守最強オプションなのだが、 mocha-phantomjs を使ってテストするとき、 reporter を nyan にすると、 大したエラー文も出…

koa, co そして thunk について

Node の Web Framework としては Express が有名だが、 最近は、Node の ES6 実装に伴い、 ES6 の新しい機能を利用した koa という Web Framework が注目を集めている。 koa は ES6 の generators をフルに活用したインターフェイスが特徴で、 今までの JS …

node-canvas

Automattic/node-canvas · GitHub 意外とよく動きました

Share Dialog

Share Dialog 複数のURLのシェアリンク貼れます

SASS から Stylus に切り替えるべき 3つの理由

1. 構文が柔軟 公式サイトを見ればわかりますが、 書き方がとても柔軟です。 h1 { color: red; } h1 { color: red } h1 color: red; h1 color: red //全部通る! SASS のつもりが、後ろにセミコロンつけて怒られたり、 CSS をコピペするために変換する苦労と…

coffeescript + mocha で module のテスト

should = require "should" describe "myModule", -> before -> @myModule = require "myModule" describe "#someFunction", -> it "is nice", -> @myModule.someFunction.should "be cool" @ でテストの直前に module 読み込める

_

node とか irb みたいな対話環境だと、 直前に評価された式が _ って変数に入ってて、 いろいろ便利なんだけど、 Chrome の開発者ツールだと使えなくて不便だなーと思ってた。 が、しかしChrome の開発者ツールでは、 _ ではなく、 $_ に格納されてるらしい…

gulp で coffee script + browserify

browserify = require "browserify" transform = require "vinyl-transform" rename = require "gulp-rename" gulp .src "coffee/*.coffee", base: "coffee/" .pipe transform (filename) -> browserify filename .transform {}, "coffeeify" .bundle() .pip…

gulp と browserify と vinyl の話

browserify の API が変わったので、この記事のコードのままでは動きません! gulp で browserify しようとしたんだけど、 色々ハマったので、 ひとまずまとめておきたい。

body タグに transform をかける愚行

ほぼすべての要素が、固定画面内に fixed で配置してある HTML で 「今すぐ、固定画面をブラウザ目一杯に拡大して表示してほしい!」なんて言われたものだから、 とち狂った僕は、おもむろに body に transform: scale などと記述したのだけど、 Chrome と F…

Jade + Sass (or Stylus) のススメ

Jade 使うなら、 スタイルシート側も、 同じインデントスタイルのメタ言語を使ったほうがいいです。 Jade .wrapper section.section-top h1.title Taitoru p.text blahblahblahblah Sass .wrapper width: 640px margin: 0 auto section.section-top backgrou…

4つの方法で下線を引く in CSS

text-decoration border-bottom 擬似要素 linear-gradient

リングバッファ in JS

o(1) で enqueue, dequeue のできるすごいやつだよ

CSS のセンタリング方法の違い

センタリングしてる要素の親要素が、 センタリングしてる要素より、横幅が狭くなった時 position: relative; margin: 0 auto; は親要素の左端に合わせるけど、 position: absolute; left: 50%; margin-left: -XXXpx; とかは親要素無視してはみ出すんで

javascript の this, that, self, _this ...

var _this = this; setTimeout(function(){ _this.hoge(); }, 1000); this を保持するための変数名は、色々あるけど、 僕は、断然 _this を推したい。 消去法で。 that → 変数名として意味が通じない。 self → var つけ忘れたら window.self 書き換えちゃう…

coco というコマンド

便利なので紹介しておきます alias coco='python -m SimpleHTTPServer'

Facebook アプリ 経由でアクセスされたときの UserAgent

iPad でも iPhone って文字を含んでるので、 気をつけたほうがいいです。

フロントでコードの minify って必要あるか?

そんなことより画像の減色頑張ったほうがずっと効果あるよな。 ソースなくした時編集できなくなるし。 そりゃ利用者が何百万人もいるシビアなサービスとかならわかるけど。

闇の transform3d

非常にややこしそうで、微塵もややこしくない話なのですが、 Webkit 系ブラウザの transform3d は z-index が非常に正確に反映されるので、 迂闊に rotateY とかかけちゃうと、z が 0 の要素とかぶって、 タッチイベントが発火されなかったりします。 滅多に…

非復元抽出 in Javascript

箱に入った N 個のくじから ランダムで M 個のくじを取り出す。 意外と正しく書ける人少ないと思います。 全体をソートしたり、今までにでた乱数と比較して再抽選するのは、やばい頭悪い。 var choiceRandom = function(obj, m){ var k, n, i, key, tmp; var…

くそが async 使え

Javascript で非同期処理を連結するときは、必ず async か、それに準ずるライブラリや関数を使え。 async とは、 callback を引数に取る関数を、順番に呼んだり、並列に呼ぶ機能をサポートする npm モジュールである。 async を使うことで、非同期処理を直感…

Jade の vim syntax ファイル

github に転がっていたのを今まで使っていたんだけど、 改行時のインデントがめちゃくちゃで使い物にならなかった。 jade の拡張子を、 sass に結びつけたら、いい感じに動いてすばらしいです。

top-right-bottom-left (TRBL) と translate の違いまとめ

CSS には、位置を指定するプロパティが大きく分けて2つある。 top-right-bottom-left (TRBL) と translate である。 多くの場合、レイアウトには TRBL さえ使えば十分だが、 translate には様々なメリットがあるから、 状況によって使い分けることで、 CSS …

【感想】 魔獣の召喚者

Amazon.co.jp: 魔獣の召喚者 (魔法師グリーシャの騎士団): リー バーデュゴ, 田辺 千幸: 本 Amazon.co.jp: 魔獣の召喚者 (魔法師グリーシャの騎士団): リー バーデュゴ, 田辺 千幸: 本 イケメンの狭間で揺れる乙女心に世界の命運が託されるハイ・ファンタ…

演算子優先順位当てゲーム

優先順位をルール付けすると、簡単に覚えられます。 覚えましょう。 添字系 > その他 > 代入 単項演算子 > 二項演算子 > 三項演算子 算術演算子 > ビットシフト演算子 > 比較演算子 > ビット演算子 > 論理演算子 積 > 排他的論理和 > 和 これで9割…

iframe を含む div の hover が効かない @ IE

ゆゆ式自体です。 CSS の hover で判定するのは諦めて、 jQuery でクラスをつけます。 $e = $("div._elements_contain_iframe"); if(navigator.userAgent.indexOf("MSIE") !== -1){ $e.on("mouseenter",function(){ $(this).addClass("hover"); }); $e.on("m…

CSS Sprite のための mixin

CSS Sprite を手作業で結合とかもうやってられないです。 かと言って、compass だけだと、かゆいところに手が届かないので、 最近は compass とオレオレ mixin でやってます。 hystking/compass-sprite hystking/compass-sprite · GitHub こんな感じで使いま…