SassやCompassをChrome Developer ToolsでデバッグしたいのにCSSしか参照できなくて困ったり、編集したコードをコピペするのが面倒、エディタに即時反映できたらいいのにって思ったことはありませんか？
この悩みを、Source MapsとChrome拡張「Tincr」を使って解決する方法をご紹介をします。
一連の流れを動画に撮ってみました。

どうしたらWebサイトのパフォーマンスを向上させることができるのか？
レンダリングエンジンについて学ぶことで、その根拠を理解していきたいと思います。
前半ではレンダリングプロセスについて、それを踏まえた上で、後半ではJavaScript、CSSそれぞれの高速化、最適化について書きます。 この記事を書き終える頃には、自分でも最適な判断できるようになることを願って。。

2/1のHTML5 Rocksのブログによると、WebKitのbackgroundショートハンド・プロパティの挙動が修正され、バージョンの移行が完了次第、モバイル版Webkitのbackground-sizeのショートハンドがW3Cの仕様に準拠し、Firefox、Opera、IE9~と同じ挙動になるとのことです。
いったいどんなバグがあって、どのように修正されるのでしょうか？
ある日突然表示が崩れてしまう、なんてことのないように、WebKitのbackgroundショートハンドのアップデートがもたらす影響や正しい書き方についてまとめてみたいと思います。

「カスタムデータ属性ってなんてHTMLとスクリプトとのアクセスが簡単に行えるんだろう！」これが前回の記事でカスタムデータ属性「data-*」について調べてみてわかったこと。
プラグインほど高機能でないけど、スニペットにしておくのはもったいないようなものを、サクッとコンポーネントにするにはうってつけ。
ということで今回は、「data-tooltip」属性を指定するだけで、ツールチップ表示ができる、ごくシンプルなjQueryコンポーネント「data-tooltip.js」をご紹介します。実際に作って、カスタムデータ属性に慣れ親しんでいこうという試みです。

HTML5では「data-*="value"」の形式で属性名にプライベートな値を設定できるカスタムデータ属性の仕様と、そのカスタムデータ属性にJavaScriptからアクセスするAPIが定義されました。
でも実はJavaScriptだけではなく、jQueryはもちろんCSSからでもアクセスすることができるのです。
それなら私も私だけの属性作ってみたい！
ということで、今回から連載で、JavaScript、jQuery、CSSからカスタムデータ属性にアクセスする方法と、ごくごく簡単なツールチップが実装できるコンポーネントをご紹介します。
今回はJavaScript、jQuery編です。

先人達が模索し続けたjQueryの定説を、私はちゃんと理解できているだろうか？またそれはjQuery1.8~2.0世代の現在においても有効なのだろうか？
jsPerfよりベンチマークをシェアさせていただきつつ、パフォーマンスやXSS対策についても少しだけ。高速で安全なjQueryの書き方をまとめてみました。
jsPerfはベンチマークを自分で作成したり、他の方がつくったものをシェアできるツールです。ブラウザやデバイズ別の履歴が残っているので、精度の高い検証が行えます。

HTML5のDrag and dropには7つもイベントがあってさぞや大忙し!
なのかと思いきや、実装に必須なのは3つのイベントだけ。
ということで今回は基本編として、ブラウザ上でDrag and dropができるデモをつくってみました。
少し工夫した点と言えば、ドラッグ要素が複数でも大丈夫なように配列にしたり、好きな場所にドロップできるようにイベントの発生場所を取得したところでしょうか。