2014-09-01から1ヶ月間の記事一覧

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 こんな感じで使いま…

SASS を書くときに、とりあえずスケーラを挟む薦め

SASS を使うとき、 $SCALE: 0.5 @function s($val) @return $val * $SCALE みたいな関数を用意しておいて、 数値を書くとき、常に s() を挟むようにすれば、 いきなり SP 版作ることになったとき、 対応が楽になって、とても好いです。 特に 幅 640px で PC…

animation-fill-mode 使わないほうがいい気がする

終了状態を直接書いておいたほうが、 レガシーブラウザでも表示されるのでハッピーです。

Nightcore のこと

Nightcore(ナイトコア) とはトランスのサブジャンルで、 既存の適当な音楽をスピードアップして二次元の女の子の画像を張り、 Youtube にアップロードした楽曲のこと(である/ではない)。 nightcore - YouTube Nightcore は、成り立ちが結構複雑で面白い…

Jade で複数行の文字列の入力

Jade では、 "|" を使えば、複数行の入力ができる。 例えば、 p.text |とりなくこゑす |ゆめさませ |みよあけわたる |ひんかしを と書くと、次のような HTML が生成される。 <p class="text">とりなくこゑす ゆめさませ みよあけわたる ひんかしを</p> 非常に読みやすい。 言わず…

SASS with Compass で震える CSS Animation

SASS には、デフォルトでたくさんの有用な関数が用意されている。 random() はその一例で、0〜1 の数値を、ランダムに返してくれる関数だ。 これと、Compassの mixin をうまく組み合わせれば、 震えるアニメーションを簡単に作ることが出来る。 See the Pen …

ワンライン・ミュージック

ワンライン・ミュージックとは、 ワンラインの関数で出力した数列を、 そのままオーディオデバイスに投げ入れて音楽を奏でる遊びである。 JS でのサンプル もちろん JS でもできる。 ミニマムでこんな感じ var DURATION = 5; var SAMPLING_RATE = 8000; play…

png スプライトは、隙間を開けよう

png スプライトを使うとき、 画像を隙間なく敷き詰めていると、 Retina 対応などで縮小した時、思わぬ自体になる。 上は、 background-size を 1/2 に縮小して、 スプライト画像として使っている例である。 環境によっては、青いアイコンの右側に、 細い線の…

無慈悲な確認ダイアログ

onbeforeunload を使えば、ウィンドウを閉じるときに、確認ダイアログを出すことが出来る。 返り値が、ダイアログに表示されるメッセージだ。 window.onbeforeunload = function() { return "編集中ですが、終了しますか?"; }; ブログの編集画面など、誤っ…

如何にして EventEmitter (あるいは EventDispatcher )を書かないか

Ticker.js var extend = require("extend"), EventEmitter = require("events").EventEmitter; var Ticker = function(interval){ this.interval = interval; }; Ticker.prototype = { "start": function(){ var _this = this; setInterval(function(){ _thi…

【感想】 黒猫の三角

Amazon.co.jp: 黒猫の三角 (講談社文庫): 森 博嗣: 本 『すべてがFになる』ドラマ化と聞いて 皆さん、よろしくて?誰のためでもなく、何のためでもなく、誰にも願わず、何も祈らず、乾杯! 以下ネタバレ

【感想】コロロギ岳から木星トロヤへ

Amazon.co.jp: コロロギ岳から木星トロヤへ (ハヤカワ文庫JA): 小川 一水, 橋本晋: 本 超時空生物と、国立天文台の腐女子が力を合わせて、 はるか未来、木製トロヤで密室に閉じ込められてしまった少年2人を助けるお話。 以下ネタバレ

チョコレート消費量とノーベル賞受賞者数の相関

Chocolate consumption and number of Nobel laureates - Imgur DAT CORRELATION !!!!!

その自前 keyframes mixin 使うのやめろ

今まで、keyframes を使うとき、自前で次のような mixin を定義して使ってゐた。 @mixin keyframes($animationName){ @-webkit-keyframes #{$animationName} { @content; } @-moz-keyframes #{$animationName} { @content; } @-ms-keyframes #{$animationNam…

text-shadow で縁取り文字を実現する sass mixin

@mixin font-outline($lineWidth: 2px, $color: #000, $steps: 16){ $q: ""; @for $i from 0 through $steps{ $q: $q + cos($i / $steps * 360) * $lineWidth sin($i / $steps * 360) * $lineWidth 0px $color; @if($i != $steps){ $q: $q + ", "; } } @incl…

こんにちは

ブログ始めてみました!!