[B! CSS3][HTML5] es335abのブックマーク

BEM スタートガイド ― これからのWEB フロントエンド開発に必要な方法論に触れてみる | zerokara web

今年ぐらいからか、BEM というキーワードが国内外のフロントエンドな人達の間で使われたり議論されているのをよく見かけるようになりました。私自身も何度か調べたりbem-tools に触れてみたりとしていたのですが、最近になってようやくBEM が何なのかが少しずつ掴めてきたような気がします。そこで今回はまず第一弾として、これまで私がBEM について調べてきたこと、実際に試してみた上で理解したこと等を分かりやすくまとめたいと思います。 BEM について聞き慣れない方、ゼロから始めてみようという方々のスタートガイドとなれば幸いです。 BEM とは？ BEM とは、WEB サイト・アプリケーション等の開発において… ・メンテナンス性の高いものを短期間で開発すること・チームでの作業効率を上げ、メンバーの追加・変更による影響を最小限に抑えること・UI の質を保ち、変更に労力をかけないことな

es335ab 2014/01/10

リンク

HTML5 × CSS3 × jQueryを真面目に勉強 – #18.1 画像ファイルからカラーパレットを作ってみる (後編) | DevelopersIO

HTML5 × CSS3 × jQueryを真面目に勉強 – #18.1 画像ファイルからカラーパレットを作ってみる (後編) 前回の記事にて Canvas 上に画像データを表示したり、ピクセル単位で色情報を取得するなどといった操作の基本を学びました。これらの知識を踏まえて、画像ファイルから特定の色を抽出してカラーパレットを生成する処理を JavaScript でやってみるとします。結構難易度は高めですが(※オレ調べ)、なるべく丁寧に解説していきたいと思います。はじめに - カラーパレットまずはカラーパレットの要件を大まかに書き出してみます。画像ファイルを読み込み、その画像を構成している色から平均的な色情報を抽出カラーパレットの色数制限はなしまだまだ試行錯誤の段階ということで、要件はこの程度に留めておきます。次にどういった処理の流れで実現するかを書き出してみます。画像ファイルを

es335ab 2013/10/25

リンク

スマホ用サイトの読み込み速度を改善し、1秒以内の表示を目指そう

携帯端末向けページのレンダリングを高速化するためのガイドラインができたことを紹介する内容です。ガイドラインは英語ですがなかなか勉強になります。日本語版は準備中だそうです。最初に見える部分は1秒以内に表示するここでは1秒以内にページ（スクロールなしで表示される部分）を見ることができる状態にすることが重要だといわれています。1秒を超えると我慢できなくなり離脱する人が増えるようです。1秒で諦めるのもちょっと短気な気もしますが、読込みは早いに越したことはないですね。まず、3G環境では一般的にDNSルックアップ、TCP接続、HTTPリクエストにそれぞれ0.2秒かかるそうです。この辺のことはあまり詳しくないですが、とにかくこれらにかかる計0.6秒はこちらでどうしようもありません。ですので1秒で表示しようと思うと残り0.4秒しかありません。ということで、サーバーのレスポンスとユーザー側のレンダ

es335ab 2013/08/19

リンク

HTML5 Boilerplateの開発者でGoogleのエンジニア、ポール・アイリッシュに聞くCSS高速化テクニック - builder by ZDNet Japan

Adobe Systemsがロサンゼルスで5月に初旬に開催した「Adobe MAX 2013」において、HTML5 Boilerplateの開発者として知られるPaul Irish氏の講演「Mobile CSS Performance」を聴講した。その内容をベースにしながら、CSSを高速化するためのさまざまなテクニックを紹介する。 Paul Irish氏は、HTML5 BoilerplateやModernizrなどの開発者として世界的に著名なGoogleのエンジニア。その彼が直接CSSのパフォーマンスを語るとあって、セッションは大変な人気であった。一般的にウェブページの高速化、特にモバイルにおいてはCSSを高速化することよりもネットワークのパフォーマンスを最適化する方が効果が高い。そのため、まずはPageSpeedやYSlowなどを効果的に使用し、HTTPリクエスト数を減らす、ダウンロー