Frontend Weekly Vol.182

UIコンポーネントとnpm、リスト vs グリッドビュー、ほか計13リンク

Published in

Frontend Weekly

3 min readAug 3, 2018

再利用可能なUIコンポーネントをWeb Componentで作成し、npmで公開するまで

UIコンポーネントを作成し、共有していくという目標を達成する上で解決方法は様々あるが、この記事では既存のWeb技術の課題をクリアするWeb Componentを利用してUIを構築し、そのコードをnpmで共有するまでの道のりについて詳解している

リストビューかグリッドビューかは重要ではない

アイテム一覧のようなUIにおいてリストビューを採用するか、グリッドビューを採用するかという話はよくある。それぞれの特長や、適切な扱い方について触れつつ、ユーザーが選択できるようにした場合の利点や、コンテンツ情報の見せ方が重要であることを解説している。

コンポーネント化されたUIにおける関心の分離

UIがコンポーネント化されるにつれ、関心の分離点がそのコンポーネントが持つ機能での分離になってきている。
しかし、元々Webが持っている関心の分離であるストラクチャ、プレゼンテーション、振る舞いについても考慮しつづけるべきでは無いかという提案。

ナイトモード、あるいはダークモードへの切り替えなどに使うスイッチのUIをデザインし、実装するための調査結果。

サービスを作って売っていくために大切なスローガン。
何ができるか、だけではなく、何をしないかも大切。

データが大好きなGoogleのLuke Wroblewski氏によるモバイルウェブの現状。

Clear Site Data by W3C: 開発者側がユーザエージェントに向け、ローカルに保持されたデータを削除する仕様
Site Isolation for web developers by Google Developers: 新たなセキュリティレイヤーとしてChromeに実装されたSite Isolationについて
Beyond 800 words: new digital story formats for news by BBC News Labs: ニュース記事の新しいフォーマット探求
Strings by Axel Rauschmayer: JavaScriptの string のメソッドでできること
How to Frame Design Problem Statements by Toptal: 問題の本質を探るためのフレームワークについて
Art of debugging with Chrome DevTools by Frontmen: Chrome DevToolsを使ったデバッグ方法について
Stuff you can do with CSS pointer events by Martijn Cuppens: CSSの pointer-events でできる意外なこと