SassのデバッグにSource Mapsを使うべきたくさんの理由 | Dress Cording

2013/05/13 101 users Tincr Sass Compass デバッグ エディタ

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

Layout、Paintingとは何か？レンダリングから学ぶWebサイトのパフォーマンス | Dress Cording

2013/04/04 166 users layout レンダリングエンジン レンダリング 根拠 前半

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

HTML5 カスタムデータ属性「data-*」にJavaScript、jQueryからアクセスする方法 | Dress Cording

2013/01/30 206 users jQuery Data value カスタムデータ属性 CSS

HTML5では「data-*="value"」の形式で属性名にプライベートな値を設定できるカスタムデータ属性の仕様と、そのカスタムデータ属性にJavaScriptからアクセスするAPIが定義されました。 でも実はJavaScriptだけではなく、jQueryはもちろんCSSからでもアクセスすることができるのです。 それなら私も私だけの属性作ってみたい！ ということで、今回から3回の連載で、Java... 続きを読む

高速で安全なjQueryを書くために今できること | Dress Cording

2013/01/09 865 users jQuery jsPerf 定説 XSS対策 先人達

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