Skip to content

Vol.238

Kota Furusawa

How Web Content Can Affect Power Usage by @awfulben Jump to heading

Webサイトがバッテリーに与える影響とその対策 Jump to heading

オンラインのほとんど多くのユーザーはモバイルデバイスか、ラップトップを使用しており、彼らにとって、バッテリーの寿命は非常に重要な要素となる。この記事では、バッテリーを減らす要因を明らかにし、Webディベロッパとしてユーザーがより多くの時間Webサイトを閲覧できるように、サイトの電力効率を高める方法を紹介する。

何が電力を消費させるのか

  • CPU
  • GPU
  • 通信
  • 画面

基本的な方針
ハイパワーを使用する時間を可能な限り減らす。

Webディベロッパが着目するべき点:

  • ユーザーに積極的なインタラクションがあるとき
  • ユーザーにインタラクションがないとき
  • ユーザーがコンテンツを閲覧していないとき

待機状態の消費電力を抑える

  • タイマーの使用を最小限にする
  • アニメーションを最小限にする
  • CSSアニメーションやトランジションを活用する
  • ポーリングを最小限にする

ページがバックグラウンド

  • Page Visibility APIを使用して処理を切り替える
  • blurイベントを活用する

その他、デベロッパーツールを使用した電力効率デバッグ方法など。

Everything I Know About Style Guides, Design Systems, and Component Libraries by Lee Robinson Jump to heading

スタイルガイド・デザインシステム・コンポーネントライブラリ Jump to heading

Lee氏はHy-Veeでフロントエンド開発とデザインに携わり、その中でスタイルガイドや、デザインシステム、コンポーネントライブラリなどについて深く調査実装を行なってきた。この記事では、その経験から学んだベストプラクティスを紹介。それぞれの役割の解説からはじまり、どのようにそれらを構築していくべきか丁寧に解説する。

Design System Backlogging by Sandy Lam Jump to heading

デザインシステムにおけるバックログの作り方 Jump to heading

デザインシステムを構築する際に浮かび上がる疑問に、”どのコンポーネントを優先的にすすめるべきなのか”というものがある。Sandy氏は実際にその問題に対面し、以下のステップを踏んで対処した事例を紹介する。

  • プロダクトのエコシステムを理解する
  • デザイン決定を発見する
  • コンポーネントを特定する
  • コンポーネントのバケット化
  • バケット化されたコンポーネントの優先度づけ
  • 結果を解析する

Process for growing Seedling into an internal product by Jaclyn Kerschner Jump to heading

Jaclyn氏のチームでは、コンポーネントライブラリを作成する過程で、プロダクトの多様化、メンバーの変化などで、複雑さが増し、一貫性がとれなくなってくる自体が発生した。そのような状態において、どのような手順を踏み、話し合い、決定を行って整理をおこなっていったのか、紹介していく。

How to Present an Easy-to-Follow Tech Demo by Angie Siu Jump to heading

技術的なデモや発表を行う際にどのような点に気をつけて資料作成や説明を行うべきか、ポイントをまとめて紹介する

In Brief Jump to heading