体感速度をぐぐっと改善！Medium風プログレッシブ画像ローダーの実装テク
このサイト、表示が遅いな…とユーザーに思われないためによく使われる、画像の遅延読み込み。見栄えがよく、シンプルで使いやすい実装方法を紹介。 ページをスクロールして要素がビュー内に入ると、ぼやけた低解像度の画像がフル解像度の画像に置換される「プログレッシブ画像」をFacebookやMediumで見たことがあることでしょう。 プレビュー画像は幅20pxほどと小さく、高圧縮のJPEG画像です。ファイルサイズは300バイト未満なのであっという間に表示され、読み込みが速い印象を与えます。実際の画像（フル解像度）は必要に応じて読み込まれます。 プログレッシブ画像はすばらしいテクニックですが、いまのところ出回っているソリューションは複雑なものです。幸いなことに、ちょっとしたHTML5、CSS3、JavaScriptで以下のようなコードを作成できます。 わずか463バイトのCSSと1007バイト（圧縮後）
「動き」はどの技術で実装すべきか？ Web Animations APIの登場で常識が変わる
CSS AnimationsやTranstions、Canvas、JavaScriptによるDOM操作など、Webアニメーションの実装にはさまざまな手法がありますが、決定版となる新しいJavaScript APIの策定が進んでいます。CSSアニメーションのスペシャリストであり、the new codeを運営するDudley Storeyさんによる特別寄稿です。 従来のWebアニメーションの問題を解決するAPI Webにおけるアニメーションは、性質のまったく異なる4つのグループに分けられます。 CSS TransitionsとAnimationsはパフォーマンスに優れ、キーフレームを提供しているが、構築に膨大な時間を必要とし、基本的な開始と終了の制御のみをCSSとJavaScriptで提供している。UIの応答、ループ、ページ読み込みなどのシンプルなアニメーションに利用される傾向がある SMI
ReactとD3.jsの組み合わせで変わる！JavaScriptアニメーション開発
人気のデータビジュアライゼーションライブラリー「D3.js」をもっと使いやすく、便利にするために。Reactを使ったコンポーネント化に取り組み、リアルタイムで描画されるアニメーションを作ります。 D3は最高です。Webのデータビジュアライゼーション分野におけるjQueryのように、考えられるあらゆることが実現できます。 オンラインで見られる最良のWebのデータビジュアライゼーションの多くがD3を使用しています。D3は素晴らしいライブラリーですが、最近のv4のアップデートで従来よりさらに安定性が増しました。 Reactと一緒に使えば、D3はさらに便利になります。 ちょうどjQueryのように、D3は高性能ですが課題もあります。データビジュアライゼーションが大規模になればなるほど、用いるコードは複雑になり、バグを修正したりアイデアを絞り出したりするのにさらに時間がかかるようになります。 しかし
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
