Vol.372

21. Prototyping to learn Jump to heading #

プロトタイピングの威力 Jump to heading #

プロトタイピングでは、アイディアに対して複数のバージョンを構築し、それが有効かどうかを確かめる。これは一見、2倍、3倍の労力を余計にかけているように感じるが、異なるアイデアを試すことで、既存のパスがどれほど強力であるかを明確に示すことができる。これはチーム全体の決意を強めることに繋がる。私たちが知らないことを明らかにし、目前の問題に対しての最善の方法を見つける方法としてプロトタイピングは非常に有効である。

The Demo Demo Loop Jump to heading #

デモが生み出すもの Jump to heading #

デモの重要性について。デモはクリエイティブな製品を成功させる秘訣である。デモは会議、ワークフロー、プロジェクトスコープを改善させていく力がある。頻繁に、例えば毎日行っても良いと考える。すべての回が素晴らしいデモである必要は無い。重要なのは、デモを行う組織的な慣行を確立し、デモを提供する際のスキルと自信を磨くことである。

Governance is a design systems friend Jump to heading #

デザインシステムにおけるガバナンス Jump to heading #

デザインシステムにおいてガバナンスとは、意思決定に対する役割、責任、および権限を明確にするためのフレームワークとして考える事ができる。これにより、意思決定がスムーズになる。コンポーネントに関するもの、チームがどのようにワークするか、についての2つの領域に関して恩恵がある。ガバナンスを確保するための重要なこととは。

Building tabs in Web Components Jump to heading #

タブのWeb Componentsを作成する。セマンティクス、アクセシビリティを考慮する。また、スクロールが可能であることを示すシャドウを動的に適用するテクニックを紹介している。

The Unlocked Possibilities of the :has() Selector Jump to heading #

:has() セレクタにより、DOMツリー内の他の場所の状態に基づいて、他の要素を指定にすることが非常に簡単になる。これにより、JavaScriptを使用が必要だったスタイリングの多くをCSSのみで実装できるようになることを紹介している。

In Brief Jump to heading #

• The Ballad of Text Overflow: text-overflowのアクセシビリティの観点からの問題を指摘しながら、どのようにその問題に対応すればよいかを考える

• Avoiding layout shifts: aspect-ratio vs width & height attributes: <img> のレイアウトシフトを防ぐためにはどのような方法があるのかを解説する

• The CSS behind Figma - Ahmad Shadeed: Figmaが生成するCSSはどのようなロジックになっているのかを探る

• Frontend Web Performance: The Essentials [1]: フロントエンドのパフォーマンスを理解するために必要な知識を学ぶ

• Use Legend and Fieldset: <fieldset> と <legend> の使い方について具体的な例を用いて解説する