MOMENTOS from Nuno Rocha on Vimeo.

ホームレスの男が路上で寝ていると、
目の前のショーケースにディスプレイが運ばれてきて…

心温まるストーリーです。イイハナシダナー。
私は皆のガッツポーズにヤラれます。

同じ作者さんのをもう一本。

こっちはユーモラスな作品。
おもわずニヤリとしてしまいますね。
この後二人の勝負の行方はどうなったのか妄想しちゃいます。

The All-In-One Almost-Alphabetical No-Bullshit Guide to Detecting Everything – Dive Into HTML5

軽く抜粋してみます。

audio

return !!document.createElement('audio').canPlayType;

video

return !!document.createElement('video').canPlayType;

canvas

return !!document.createElement('canvas').getContext;

SVG

return !!(document.createElementNS && document.createElementNS('http://www.w3.org/2000/svg', 'svg').createSVGRect);

contentEditable

return 'isContentEditable' in document.createElement('span');

Drag-anddrop

return 'draggable' in document.createElement('span');

localStorage

return ('localStorage' in window) && window['localStorage'] !== null;

Web SQL Database

return !!window.openDatabase;

こんな感じのシンプルな判別式が57個も掲載されています。
（数え間違えでなければ）
尚、それぞれの見出しは該当する要素のドキュメントに飛ばしてくれます。

ブラウザの対応が安定した物になるには、まだまだ時間が必要。
しばらく判別式にお世話になると思われますので、
こういったリストの存在は大変ありがたいですね。

CSS 2.1 and CSS 3 Help Cheat Sheets (PDF) – Smashing Magazine

こんな感じにデザインされています。
いつぞや紹介したVIエディタのチートシートと同じデザイナーさんが手がけています。
テイストが同じですね。

新しく追加されているプロパティについては
現状ではまだブラウザ独自の書式を使わざるをえませんが、
そこらへんも考慮して、各ブラウザの記法とスタンダードの記法を明記してあります。
これは助かりますね。

CSS3だけでなく、CSS2のチートシートのリンクも掲載されているので、
そちらも大いに活用できそうです。

CSS 2.1 and CSS 3 Help Cheat Sheets (PDF) – Smashing Magazine

Television is a drug. on Vimeo

クレイジーなハイテンションぶりに爆笑してしまいました！

見て！ぼくを見て！なに！？メシ！？なにか食うの？？
え？寝るの？いいよ！いいとも！戻ってきたら見てね！OK！？

テレビをあまり見ない生活を送っているのでわかりませんが、
依存してる人はこんな感じ…なわけないか。どうなんでしょう。

jQuery1.4の新機能を実例を盛り込みながら紹介するスライドを、
HTML5によるHTML5のプレゼンテーションスライド
のスライドを制作したMatt Nowackさんが公開しています。

jQuery 1.4: What you need to know

スライドの内容は、jQueryの概要から始まり、
1.4で追加された新要素へシフトしていきます。
コードと実例を元に紹介してくれているので、大変分かりやすいです。

1.4になって知らない機能が出てきてしまった方は
是非一度流し見してみると良いかもしれません。

目についた機能を軽く紹介してみます。

新しいエレメント追加法

var div = $('<div />', {
    id: 'example',
    css: {
        height: '100px',
        width:  '100px',
        color:  'blue',
        backgroundColor: 'green'
    },
    click: function() {
        $(this).css('backgroundColor', 'red');
    }
});

この書き方は知らなかったーっ！
属性もCSSもイベントもまとめて指定できるんですね。
これは楽！そしてソースが綺麗になる！
“less write, do more”がさらに進みそうですね。

$.liveを使ったイベントハンドリング

現在 jQuery.fn.live は削除されています。

$.live()は1.3から追加されていましたが、
$.bind()とどう違うのか、私はよく分かっておりませんでした。

例えば、$.bind()を使った次のコードは予想通りに動きません。
$.bind()はDOMに生成された後でないとイベントハンドラを付加出来ない為です。

$("input.mybutton").bind("click", function(){
    alert("Clicked !");
});

$("<input />",{
    "class":"mybutton",
    type:"button",
    value:"click me !"
}).appendTo("body");

ここで、$.bind()ではなく$.live()を使う事で上手く動くようになります。

$("input.mybutton").live("click", function(){
    alert("Clicked !");
});

.live() – jQuery API

Attach a handler to the event for all elements which match the current selector, now or in the future.

DOMに存在する要素でないと働かないbindと異なり、
宣言以降に追加された要素に対してもイベントハンドラを設定出来るというわけですね。
これは便利だ！

jQuery.proxyの件といい、
私はどちらかというと取扱説明書を読まずに物を使うタイプなので、
色々取りこぼしがあります…。
新しくなったら軽くドキュメントに目を通すと良いのかも知れませんね。

cf) Ajaxian » jQuery 1.4 presentation, using Ernest’s HTML5 open source presentation app

VI Editor / Linux Terminal Cheat Sheet (PDF) – Smashing Magazine

こんなかんじに綺麗にまとめられています。
リンク先ではPDFにてダウンロード出来るので、印刷して目につくところに貼っておくと便利。
私も本当に限られた機能しか使っていなかったので、重宝しそうです。

VIのチートシートとしては、このグラフィカルなやつも結構有名ですね。

Graphical vi-vim Cheat Sheet and Tutorial

これはデスクトップの壁紙にして使えそう。

この手のチートシートで日本語で書かれたものはあまり見かけないですが、
必要とする人の多くが英語で十分だと感じているからでしょうか。
それとも面倒だからでしょうか。（まぁもちろん面倒ですが！）

面倒くさがりやの私は感謝の気持ちを胸に、
ありがたく活用させて頂きたく思います。

これはシュールです…
なんでもない映像なんですが、なんとも言えない気分になってきます。

Movie – today and tomorrow

ああ、ああああっ　キッチンペーパーがッああああああっ
ああああっシュレッダー詰まッ　ああああもう、あああああ

というなんともやるせない気分になりましたので勢いだけで投稿。

ちなみに、「paulinebastard_artworks」というサイトからの紹介だそうですが、
他にもシュールな映像が色々ありました。言葉ではちょっと説明出来ない感じの。
気になる方はチェックしてみてください。

物を落下させてリズムを刻むアイデアムービー。
お皿が割れる音っていがいと綺麗ですね？

Gravité on Vimeo

ふとMoreを見たら閲覧したことのある動画が。
同じ方が作られたんですね。

Sonar on Vimeo

おもわず涎をたらしながら見てしまった、
魚群探知機をモチーフにしたミュージックムービーです。
コチラで紹介されておりました。

魚群探知機と音楽のコラボレーション「Sonar」 | 9bic blog
ここのチョイスはなかなか好きです。

CSSのセレクタがどのように上書きされていくのかを理解する為の、
ポイント制を導入したちょっとしたTipsです。

CSSセレクタの点数計算法

（どうでもいいけどタイポ多くてなごみました。）

CSSのセレクタを次のように計算する考え方ですね。

• HTML要素 : 1点
• クラス : 10点
• ID : 100点

引用元の記事から例を拝借しますが、

#test { background: red; } /* specificity : 100 */
.item p { background: green; } /* specificity : 10 + 1 = 11 */
p { background: orange; } /* specificity : 1  */
body #wrap p { background: yellow; } /* specificity : 1 + 100 + 1 = 102 */

このように計算して点数が高いほうが適用される（であろう）、というわけです。
それぞれのセレクタがどの程度の影響力を持っているか知っていると
コーディングの助けになりそうですね。

2010/04/20

上記のリンク先を読むとかいてありますが、
インライン要素は1000点とされているらしいです。

他の計算方法

似たような計算方法で、

• a = もしインライン指定ならば1
• b = IDの数
• c = 属性セレクタ/クラス/擬似クラスの数
• d = HTML要素の数

として、

<p style=”color:#000000;”>

a=1, b=0, c=0, d=0 → 1000

“footer nav li:last-child”

a=0, b=0, c=1, d=3 → 0013

“# sidebar input:not([type=”submit”])”

a=0, b=1, c=1, d=1 → 0111

このように点数を作り上げる方法もあるみたいですね。
cf) CSS Specificity And Inheritance – Smashing Magazine

余談

（であろう）とつけておいたのは、
ただ単純に計算式の通りになるというわけではなく、
他の要因も絡んでくるという事。
極端な馬鹿げた例で大変恐縮なのですが

.mylink {
    color:red;
}
body div div div div div div ul li span a {
    color: blue;
}

前者はクラスで10点、後者はHTML要素*11=11点。
ですが、リンクの色は赤になります。（本当に馬鹿げた例だ！）

フロントエンドのWebデベロッパーの為の10の習慣だそうです。
出来ていない事もあったりするので自分のワークフローを再確認する意味でも。

以下、日本語による解釈。
和訳というより、超訳、もとい跳訳…？
読んで理解した部分だけかいつまんで書いてます。

1. どのDIV要素を閉じているのか記述しておく

div要素で汚くなったソースを読むのは大変。
どのdiv要素を閉じているのかをコメントしておけば浪費する時間の節約になります。

<div id="header">
    <div id="sub" class="first left">
    ...
    </div><!-- #sub.first.left -->
</div><!-- #header -->

2. CSSリセットを使う

各要素のリセットをしておく事で、
クロスブラウザによるレンダリングの差異を最小限に抑えられ、
CSSを記述する上でも大きな助けになるでしょう。
CSS Tools: Reset CSS

3. @importは使うべからず

link要素のみで埋め込むのに比べ、はるかに低速になるためです。
High Performance Web Sites :: don’t use @import

4. 画像を「Smush」せよ

最適化されていない画像を使う事は、ビジターの帯域を浪費する原因となります。
Smush.itで簡単に画像を最適化してくれるので、これを活用するのも良いでしょう。

5. HTMLとCSSを混ぜるべからず

次の例は悪い例です。スタイル要素とHTMLは分離されているべきです。

<a href="http://www.catswhocode.com" style="background:#069;padding:3px;font-weight:bold;color:#fff;">Cats Who Code</a>

6. HTMLとJavaScriptを混ぜるべからず

次の例は悪い例です。JavaScriptとHTMLは分離されているべきです。
jQueryなどのフレームワークは、JavaScriptの分離に大きな助けになるでしょう。

<a id="cwc" href="http://www.catswhocode.com" onclick="alert('I love this site!');">Cats Who Code</a>

7. IEには条件分岐コメントで対処する

CSSハックは有用な場合もありますが、その多くはバグであり、ValidなCSSではなくなります。
IEに対応させるCSSを書く時は、条件分岐コメントを使いましょう。

<link href="style.css" rel="stylesheet" type="text/css" />
<!--[if lte IE 6]>
<link href="ie.css" rel="stylesheet" type="text/css"  />
<![endif]-->

8. JavaScriptファイルは最後に読み込む

（昔はhead要素内に記述するのが標準的でしたが）
JavaScriptファイルを読み込むscript要素は</body>の直前に記述すべきです。

9. 要素の意味を考えてマークアップすること

HTMLは文書構造を記述する為のマークアップ言語です。
その内容に相応しい要素を以て記述しましょう。

10. クロスブラウザを実現できるまでテストを重ねる

普段から複数ブラウザでの動作チェックを怠らないようにする事で、
結果的に効率化を図れるでしょう。

結構徹底出来てないケースもあったりするので、注意をせねば。
1.とかはやっていないな…。

2010/8/30

7も違う手法でやってるな…