pixivのCSSで使われるクラス名ルール
pixivで運用して上手く行っている感触のあるルールを紹介。 CSS的にルートになるセレクターのクラス名は_で始める _始まりのクラスはサイト内でユニーク CSSの何が問題か。それはどこで指定が衝突するのか分からないことである。そこさえ把握できれば気を付けながら書けるので、それでもう問題ないと思っている。CSSには機能がなく、それが美しい（ということにしておく）。最低限抑えるべき要素以外は考えない方がいい。 コード例。 HTML: <section class="_foo-container"> <h1 class="title">foo</h1> <ul class="_bar-items"> <li class="item"><span class="title">item 1</span></li> <li class="item"><span class="title">item
UP24買ってよかった
先日UP24を買った。なかなか良いので紹介。 UP by Jawbone™ | Track Activity, Manage Weight, and Sleep Better UP24は自分の活動を記録してくれるリストバンドだ。エジプトっぽい模様がデザインされている。色はアップルストア限定のライムにした。だいたい以下のような機能がある。 歩数記録 ストップウォッチ 睡眠状態記録 目覚まし（起床が近い眠りの浅い時間に振動で起こす） パワーナップ（昼寝をする時にセットすると、いい時間に振動で起こす。睡眠状態も記録される） アイドル（一定時間活動していないと振動で通知） リマインダー（指定の時間に振動で通知） 当初気になっていたのは目覚まし機能。音で起こされるのが嫌だと思って（そもそも起こされるのが嫌だが）試してみたかった。こいつは全く役に立たない。人は振動では起きない。休日はともかく平日使うの
URLディスパッチャー書いてみた
URLディスパッチャー書いてみた ファイルが散乱していて管理が難しいような状態のサイトだとJSを1つにまとめてページごとにディスパッチャーで読み込みを分けた方がいいのかも。1箇所にスクリプト要素を置けるとLABjsも使えそう。 と思って書いたけどいまいちしっくり来ないな…。うーん。 書き直した。 dispatcher.connect(/^\/foo\/(bar)/, function(params) { console.log(params[1]); // bar }); でディスパッチしていたのを、 dispatcher .connect(/^\/foo\/(bar)/, function(params) { console.log(params[1]); // bar }) .dispatch(); のようにトリガーから起動するように変更。繋げて書きやすくなった。 dispatcher
jQuery 1.8でDeferred.thenの挙動が変わった
jQuery 1.8でDeferred.thenの挙動が変わった JavaScriptを書いていて楽しいのがDeferredの処理。その仕組みはjQueryでも実装されていますが、このDeferred、1.8からDeferred.thenの挙動がDeferred.pipeと全く同じになりました。それまでのthenは単純にdeferred.done().fail().progress()のエイリアスでした。 #11010 (Make Deferred.then == Deferred.pipe like Promise/A) – jQuery Core - Bug Tracker このせいで非同期処理が動かず、いつもならさくっと上げられるバージョンがまだ1.7系のままです！ 具体的に困るのはthenの後にdone、failを続けている場合にコールバック引数が渡らなくなること。 var d =
IE 9以下に存在するセレクター数制限にはまった
IE 9以下に存在するセレクター数制限にはまった 開発中にいきなりCSSが壊れて原因を探っていたらこれに行き着きました。IE 9以下では1つのCSSファイル当たり4,095個までしかセレクターを認識しない。4,096個以上は無視される。ええええ。。 SCSSだと割とカジュアルにセレクター数が増える CSSは出来るだけ1ファイルにまとめたい（リクエスト数削減のため） との組み合わせがやばい。SCSSはセレクターが他のページに影響しないように以下のように書いていました。 // 共通部分 @mixin foo { color: red; .foo { font-size: 2em; // たくさんの指定… ... } } // 影響範囲を以下のページのみに限定したい #page-a { @include foo; } #page-b { @include foo; color: yellow;
less - jstv: JavaSctipt Test Viewer
jstv: JavaSctipt Test Viewer テストを書いても確認ページを用意するのが面倒だったり、Gistなどにテスト付きでコードを上げても実行出来ないのが不便だったので、コードやテストスクリプトのURLを渡すとテストページが出来上がる簡単なサービスを作りました。 jstv 今のところQUnitのテンプレートのみです。パラメータに指定したパスでscript要素を挿入してテストが走ります。例: http://jstv.codefairy.org/qunit?base=https%3A%2F%2Fgist.github.com%2Fraw%2F751419%2F;script=jquery.replaceClass.js;script=qunit.replaceClass.js アプリはGAEで動いてます。ソースはGitHubに置きました。 便利なのかよく分からないですね。短縮U
less - 非同期処理を挟むと発動するポップアップブロックへの対処方法
各ブラウザのポップアップブロック機能は普通ユーザーが起こしたイベントに対しては発動しないように作られていますが、例えば要素がクリックされると非同期でリンク先を取得してページを開くような場合、Operaを除く主要ブラウザでポップアップブロックが発動します。実際どうなるかクリックするとURLをbit.lyして別ウィンドウで開くサンプルを書いて試してみました。ちなみにわざわざ非同期でリクエストするのは負荷軽減のためです。 #0は最初からURLが分かっている場合です。非同期ではないので各ブラウザ、直接開いたと認識して問題なく動きます。参考用で今回のテストとは関係ないです。 #1はbit.lyへのJSONPリクエストを挟みました。結果を取得後にwindow.openしています。ブラウザでポップアップを許可していない場合、 IEとFirefoxはポップアップブロックが働き警告が出る SafariとCh
less - URLディスパッチャー書いてみた
URLディスパッチャー書いてみた ファイルが散乱していて管理が難しいような状態のサイトだとJSを1つにまとめてページごとにディスパッチャーで読み込みを分けた方がいいのかも。1箇所にスクリプト要素を置けるとLABjsも使えそう。 と思って書いたけどいまいちしっくり来ないな…。うーん。
less - ::-webkit-scrollbarをページ全体のスクロールバーに適用する
WebKitにはCSSでスクロールバーをカスタマイズ出来る独自拡張が存在します。 Surfin’ Safari - Blog Archive » Styling Scrollbars Scrollbar Debug View この設定はルート（セレクタ的にはhtml）のスクロールバーには反映されないため、全体に使いたい場合にはbody要素にスクロールバーを表示させて肩代わりさせる必要があります。overflowでこんな感じに: html { /* scrollbar */ overflow-y: auto; } body { /* scrollbar */ position: absolute; top: 0; left: 0; bottom: 0; right: 0; overflow-y: scroll; overflow-x: hidden; } bodyに設定する関係で気付いた点を
less - arguments
JavaScript、仮引数で宣言した変数へ代入したあとの arguments の挙動 - 冬通りに消え行く制服ガールは、夢物語にリアルを求めない。 - subtechより。 さて問題です。以下のコードで alert されるのは何でしょう!! (function (x) { x = 2; alert(arguments[0]); })(1); 答えは2。この挙動については (function(x) { arguments[0] = 2; alert(x); // 2 })(1); のようなことが出来るので不思議に思わなかった（いかにも裏にオブジェクトがある風）のだけど、むしろ (function (x) { x = 2; alert(arguments[0]); })(); // 引数なし の場合の結果がundefinedなのにびびった。引数が渡されなかった場合はバインドされない。でもun
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
WebKitは背後のタブを閉じる時にunloadイベントを発火しない
IEのアップデートリンクに使いたいURL
less - 画像限定Tumblrクライアント「pixel bottle」作りました