Vol.367

Declarative design systems Jump to heading #

宣言的なデザインシステム Jump to heading #

従来のWeb開発プロセスに則ると、必要となるデザインのパターンはとても多くなってしまうためメンテナンスは現実的ではない。代わりに"宣言型デザイン"の考えを提唱している。例として様々な色のボタンを実装することを例に挙げている。従来のデザインでは、それぞれの色に対して、それぞれのホバー時の色を明確に指定するが、宣言型デザインでは、その代わりに “明度を5%低下させる” というようなルールをセットすることで、レジリエントなデザインを実装できる。これはCSSでも関数などの機能を使って実現できる。それぞれのアプローチに優劣は無く、チームごとに適切な方法を採用することを勧めている。

Lesser-Known And Underused CSS Features In 2022 Jump to heading #

あまり知られていないCSSの機能 Jump to heading #

CSSであまり使われていないが便利なプロパティや機能を紹介していく。

• all
• currentColor
• カスタムプロパティのフォールバック
• counters
• インタラクションメディアクエリ
• aspect-ratio
• hslを利用した美しいグラデーション

など

Don’t fight the browser preload scanner Jump to heading #

ブラウザのプリロードスキャナーについての解説 Jump to heading #

ブラウザーのパフォーマンスの最適化を行う仕組みの一つに、プリロードスキャナーが存在する。この記事では、この機能がブラウザの内部でどのようにワークするかを解説し、パフォーマンス改善のときにどのように考慮すればよいかを説明する。

How to Disagree Jump to heading #

正しく反対意見を述べるためにはどのようにすればいいのか、よくある反論のやり方を分類し、それぞれの特徴と、どのようなやり方が良いかを解説する。

Tools for better thinking Jump to heading #

思考を整理、深めるために使用できるツールを紹介する。

In Brief Jump to heading #

• Guiding principle: consent over consensus: チームで物事を進めるにあたって、合意を形成するのではなく、同意をとることの重要性を説く。

• CSS: Absolutely positioning things relatively: CSS Gridを使用して複雑なレイアウトをレスポンシブにする方法を紹介

• Avoiding Puppeteer Antipatterns: Puppeteerアンチパターンを避ける方法

• Adversarial Testing: A slightly unorthodox testing philosophy: テストを実装するときは、物事がうまくいくことではなく、うまくいかない方に関心を寄せることが重要である

• What you need to know about the Block Protocol: ブロックプロトコルについての概念を解説する