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は自分の活動を記録してくれるリストバンドだ。エジプトっぽい模様がデザインされている。色はアップルストア限定のライムにした。だいたい以下のような機能がある。 歩数記録 ストップウォッチ 睡眠状態記録 目覚まし（起床が近い眠りの浅い時間に振動で起こす） パワーナップ（昼寝をする時にセットすると、いい時間に振動で起こす。睡眠状態も記録される） アイドル（一定時間活動していないと振動で通知） リマインダー（指定の時間に振動で通知） 当初気になっていたのは目覚まし機能。音で起こされるのが嫌だと思って（そもそも起こされるのが嫌だが）試してみたかった。こいつは全く役に立たない。人は振動では起きない。休日はともかく平日使うの
Stylusでは擬似クラス、擬似要素をネストして書いた方がよい
Stylus（0.47.3）で@extendする時に変なハマり方をした。 .foo:before content '\f101' このような擬似要素のあるセレクターを以下のように@extendするとコンパイルエラーになる。 .bar @extend .foo // こうコンパイルされてほしい // .foo:before, // .bar:before { // content: '\f101'; // } 実行するとFailed to @extend ".foo"と言われる。回避方法は .foo &:before content '\f101' のように:beforeをネストすること。反対にかっこわるいがネストしていないセレクターの表記をそのまま使うこともできる。 .bar:before @extend .foo:before つまりStylusでは@extendする際に元のセレクターと
後で読むサービス、最近Pocketが頑張ってる印象がある。 ...
後で読むサービス、最近Pocketが頑張ってる印象がある。 Pocketのいいところは対応したアプリ、サービスが多い点。Tumblrアプリも対応しているのはPocketだけ（メール経由ならどのサービスにも送れるけど）。 それからPocketは記事の中から画像を抽出して表示してくれるのが便利。他のサービスだと味気ないし、画像で判断できるのは楽。 もうひとつ、PocketはIFTTTでできることが多い。Readabilityでトリガーにできるのは記事をお気に入りした時だけ、Instapaperはそもそもトリガーにできない。Pocketは新規ポストをトリガーにできるのが大きい。 サービスとしてはReadabilityが好きなので、今は Pocketに追加 IFTTTでPocketからReadabilityに送る Reederアプリで読む ことが多い。Pocketのアプリがもう少し好みの挙動になっ
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;
pixivポップボードのキャッシュの仕組みとFacebookのUIの話
pixivポップボードのキャッシュの仕組みとFacebookのUIの話 こんにちは。JavaScript Advent Calendar 2011 オレ標準コース18日目の@ykskです。 先日pixivにポップボードという通知機能がリリースされました。自分がお気に入りユーザーに追加されたり、投稿したイラストがブックマークされたりした時にヘッダーに未読件数などのお知らせを表示します。僕は直接機能を実装していたわけではないのですが、リリース直後に起こった負荷の問題でJSを書きました。今日はその話をします。主にUIの話です！ え！ リリース直後、定期的に未読数の更新をAjaxで行っていた部分の負荷が急激に上がりました。ページロード時にHTMLに未読数を埋め込んだあと、2分ごとに未読数取得APIへリクエストするという処理です。 ポップボードはヘッダーに出るため、ほぼ全てのページでこの処理が入りま
Tumblrで誰に多くリブログされたかをグラフ化してみた
Tumblrで誰に多くリブログされたかをグラフ化してみた 以前Twitterでtumblrのアクティビティをメールに流しておくとスレッド表示で誰にどれくらいリブログされてるのかが分かる。とつぶやいたのですが、スレッド表示だと感覚でしか分からないのでyksk.tumblr.comの被リブログ数を実際に集計してグラフにしてみました。 自分の場合少数の近い人がリブログしまくっていて、ほとんどは1人1リブログ。もう少しきれいなロングテールになるかと思っていたけど、だいぶ極端な結果になりました。誰に多くリブログされたかとかは伏せておきます・・。もう少し安定してくると面白いかな。 グラフの作り方。MacなのでMacです。流れは Tumblrからリブログ通知メールを送るように設定 Mail.appで受信。ルールからAppleScript（から実行したRuby）を走らせてデータを集計 作ったデータからGo
TurntableでファンのDJが回し始めたらGrowlに通知する
TurntableでファンのDJが回し始めたらGrowlに通知する Turntable面白い！ TurntableにはファンになったDJが演奏を始めるとメール通知してくれる機能がありますが、見逃してしまって、気付いたころには終わっていることもよくあります。そこでMail.appのルール機能を使って、メールが来たらGrowlに通知するようにしてみました。 mail-turntable-notifier.scptを適当な場所に保存 Mail.appに画像のようなルールを追加。「AppleScript を実行」には1で保存したファイルを選択 スティッキーなどの設定はGrowlの設定にある「Mail.app Rules」から変更してください。 https://gist.github.com/1020727
less - jQuery Templatesプラグインが面白い
jQuery Templatesプラグインが面白い jQuery TemplatesプラグインはjQuery公式のテンプレートエンジンです。元々マイクロソフトのASP.NET Ajax Libraryで実装されていた機能を切り出したものらしい。 jQuery Templates, Data Link, globalization が公式 jQuery プラグインに加わりました - THE TRUTH IS OUT THERE - Site Home - MSDN Blogs 現在は1.0.0pre。そろそろ出るjQuery 1.5には標準で入る模様です。preですがマイクロソフトのCDNが利用出来ます。 配列を渡すと自動的にループして出力されるなど、JSONをそのまま渡して動くように意識されているところが面白いと思いました。 <ul id="name-list"></ul> <script
less - 画像限定Tumblrクライアント「pixel bottle」作りました
Tumblr Dashboardの画像を表示するウェブアプリ、pixel bottleを作りました。 pixel bottle 以下のような機能があります。 1分おきに自動でリロード。画像は直近100件程表示されます リブログ、Like、Unlikeが出来ます Fluidで作成したOS X用のアプリを用意しました。Dockに未読バッジを表示したりGrowl通知したりします HTML5です 常にデスクトップに表示してDashboardの画像をチェック、リブログする想定で作りました。一瞬で好みを判断出来る画像なら作業しながら楽しく使えるかなと思っています。若干色を薄くしてTumblrの証（エロ画像）が流れてきても目立たないように配慮しました（健全な方が多いようなら透明度のオプションを追加するつもりです）。 ずっと表示してると誰がいつリブログしてるかが分かったりして面白いよ・・！ よかったら使っ
less - Tumblrで誰に多くリブログされたかをグラフ化してみた
以前Twitterでtumblrのアクティビティをメールに流しておくとスレッド表示で誰にどれくらいリブログされてるのかが分かる。とつぶやいたのですが、スレッド表示だと感覚でしか分からないのでyksk.tumblr.comの被リブログ数を実際に集計してグラフにしてみました。 自分の場合少数の近い人がリブログしまくっていて、ほとんどは1人1リブログ。もう少しきれいなロングテールになるかと思っていたけど、だいぶ極端な結果になりました。誰に多くリブログされたかとかは伏せておきます・・。もう少し安定してくると面白いかな。 グラフの作り方。MacなのでMacです。流れは Tumblrからリブログ通知メールを送るように設定 Mail.appで受信。ルールからAppleScript（から実行したRuby）を走らせてデータを集計 作ったデータからGoogle Charts APIを使ってグラフを作成 です。
less - Safari + GreaseKit用ReblogCommand作った
FirefoxにはReblogCommandという、キー一発でリブログしてくれるリブログ生活にはなくてはならないGMがあるのですが、GreaseKitの制限によりSafariでは動きません。くやしい＞＜ でもリブログ出来る範囲をTumblr内に限定すれば動きそうだったので（クロスドメイン制限が問題なのです）、Dashboard限定でSafariで動くバージョンを作ってみました。 Tumblr Dashboard Quick Reblog GitHub 標準でTumblrのDashboardにその場でリブログするボタンを追加します。 リブログ前後で顔が変わる:D oAutoPagerizeがインストールされていると足されたページにもボタンを追加します。また、Minibufferがインストールされていると、tキーでリブログしたりpキーでまとめてリブログしたり出来るようになります。 yksk.t
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
