デザイン通りに実装するだけじゃない！フロントエンドエンジニアが考えるべきデザインのこと。〜アニメーションと印象〜 | WebNAUT by Beeworks
デザイン通りに実装するだけじゃない！フロントエンドエンジニアが考えるべきデザインのこと。〜アニメーションと印象〜 Webサイトのマークアップするとき、参考にするデザインはほとんどは静止画の状態ですよね。 しかしWebサイトは「見るだけ」ではなく「使うもの」ですので、実際には様々な「動き」や「状態」が存在します。 そんな動きや状態については都度デザイナーとエンジニアが一緒に検討していくのが理想ではあるのですが、それが難しいケースもあるでしょう。 そんな時には事細かにデザイナーに確認したりデザインデータを要求するのではなく、ある程度はエンジニアが意図を汲み取って実装することが必要ではないでしょうか。 今回はそんな「デザインに鋭いフロントエンドエンジニア」になるために、実装機会の多い「ホバーアニメーション」を例にしてフロントエンドエンジニアがどのように実装を決めていけばよいのかを考えてみたいと思
Intersection Observer を用いた要素出現検出の最適化 | blog.jxck.io
Intro スクロールによる DOM 要素の出現などを効率よく検知するため、新しく Intersection Observer という API が追加された。 この API の使い方と、本サイトへの適用について記す。 要素交差(intersection)の検出 ページをスクロールしていく過程で、特定の DOM が画面に出現したことをフックしたいケースがある。 代表例は 画像の遅延読み込み であり、初期ロードでは画像の取得を行わずスクロールしていく過程で順次取得する手法である。 特に画像の多いページでは表示に必要なリソース取得のみに最適化でき、初期画面表示などでは効果が大きいとされる。 これを実装するのに必要なのは、「 <img> 要素が出現しているかどうか」であるが、本質的には「画面外にあった <img> が viewport と交差したか」を取得することになる。 つまり、 要素出現の取得
逆引き！フロントエンドのイマドキパフォーマンス改善 - 青空コメントアウト
WebアプリにしろWebサイトにしろパフォーマンスはとても重要です。どんなに高機能であっても、どんなにデザインが良くても、パフォーマンスが悪ければユーザーは離れてしまいます。 とは言え現場はキツキツのスケジュールで、パフォーマンスにまでこだわる余裕がないよ！パフォーマンスはひとまずできる限りのところまで頑張るよ！となってしまうこともあるかと…。 この問題の解決の糸口はパフォーマンスを良くする手段をどれだけ知っているかです。仕様を決めるとき、デザインを決めるとき、実装するとき、それぞれのフェーズでパフォーマンスを常に意識していると自ずとハイパフォーマンスに近づきます。 というわけで今回はフロントエンドの観点から、イマドキのパフォーマンス改善手法をまとめてみました。イマドキと謳っておきながら2年前くらいの技術が出てきたりして最新の話題でもないのですが。 ちなみに、本題に入る前にWebパフォーマ
家事代行サービスを東京でお探しなら1時間2,190円のCaSy
1時間2,790円(税込)〜 業界最安値水準 無駄を省き低価格を実現しました。 リーズナブルなのに 損害保険加入で安心
How to Use Rust with Node.js When Performance Matters - RisingStack Engineering
Join 150K+ monthly readers. In-depth articles on Node.js, Microservices, Kubernetes and DevOps. Rust combines low-level control over performance with high-level convenience and safety guarantees. Rust 1.0 just got released. Let’s see how and why can we use it with Node! Rust Features Before jumping into Rust and its ecosystem, let’s step one back and take a look on what Rust promises. Rust is a sy
セマンティック バージョニング 2.0.0
セマンティック バージョニング 2.0.0 概要 バージョンナンバーは、メジャー.マイナー.パッチ とし、バージョンを上げるには、 APIの変更に互換性のない場合はメジャーバージョンを、 後方互換性があり機能性を追加した場合はマイナーバージョンを、 後方互換性を伴うバグ修正をした場合はパッチバージョンを上げます。 プレリリースやビルドナンバーなどのラベルに関しては、メジャー.マイナー.パッチ の形式を拡張する形で利用することができます。 導入 ソフトウェア・マネージメントの世界には、「依存性地獄」と呼ばれる恐ろしいものがあります。あなたのシステムが大きく成長すればするほど、さまざまなパッケージを組み込めば組み込むほど、自分が地獄の底にいることにいつか気づくでしょう。 多くの依存性を有しているシステムにとって、新しいバージョンがリリースされることは悪夢でしかありません。厳密に依存関係を指定し
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Remote Style(リモートスタイル)
サンカク｜ふるさと副業・社会人インターンシップ
旧ログインページ
CSS：ホバー時のアンダーラインアニメーションの実装サンプルとmixinを用いた実装方法 - NxWorld