Vol.414
Design Patterns Are A Better Way To Collaborate On Your Design System Jump to heading
デザインシステムにおけるデザインパターンの有効性 Jump to heading
デザイナと開発者が効果的にコラボレーションするためには、デザインシステムだけではなく、デザインパターンを構築することをおすすめしている。この記事におけるデザインパターンは、目的のための要素の再利用可能な組み合わせを示す。要素とは、ボタンやカードのような独立したUIのコンポーネントを指している。後半では具体的にそれをどのように作り上げるかの実践的な例を示している。
How to Turn Good Design Direction into a Good System - Christopher Butler Jump to heading
アイディアは構造とシステムが9割 Jump to heading
デザインにおいて、良いアイディアがどのように生み出されるか、その仕組を体系化する。アイディアを生み出すのは、クリエイティブだけではなく、むしろそれ以外の構造とシステムが9割の役割を担っていると主張する。記事ではこの構造とシステムをについて詳しく解説する。
How to plan as an engineering executive. Jump to heading
エンジニアリングのリーダーとして計画を立てる方法 Jump to heading
この記事では、経営陣の年間予算編成プロセス、エンジニアリング部門の目標機能割り当て、およびこれらを組み合わせた具体的なロードマップを確立する考え方を紹介する。また、機能割り当ての粒度やシャドウプランニングプロセスの実行によるトレードオフを考慮して、エンジニアリングの成長が会社全体の成長を制限するべきかどうかなど、いくつかの小さなトピックにも触れる。
Introducing the popover API - Chrome Developers Jump to heading
popover
属性についての解説。 Chromium 114 の APIから、ポップオーバーを構築するための新しい宣言型 HTML API が利用可能になった。この記事では popover
属性の基本的な使い方を紹介する。また、 <dialog>
との使い分けについても言及している。
Brief Note on Popovers with Dialogs Jump to heading
<dialog>
と popover
属性の仕様について比較し、その問題点を指摘する。 既存のプロジェクトにおいては、既存のダイアログを <dialog>
と交換する作業が作業が終わるまで、popover
は利用しないことを進めている。
In Brief Jump to heading
Conditional CSS with :has and :nth-last-child - Ahmad Shadeed:
:has
および:nth-last-child
を使用した条件付きCSSの実装方法を紹介するError-Message Guidelines: エラーメッセージをUXの観点からどのようにデザインすべきかをまとめている
Complete guide on Playwright visual regression testing - Lost Pixel - holistic Visual Regression Testing cloud: Playwriteを用いたビジュアルリグレッションテストの実装方法について紹介
display: contents considered harmful:
display: contents
のアクセシビリティ上の問題を指摘する11 HTML best practices for login & sign-up formsMartian Chronicles Evil Martians team blog: ログイン、会員登録フォームでのベストプラクティスを11個紹介する