Vol.326
How design systems can enhance creativity in cross-functional teams Jump to heading
デザインシステムが協業に対してどのように有効に働くか Jump to heading
デザインシステムはすべてのアプリとWebサイトが同じように見えるUXパターンを実現する制限でもあるが、それはデザイナの創造的な探求を制限するものではない。それどころか、それを使用することによって、より創造的な探求をサポートするツールである。プロダクトが成長するにに伴って、新しいコンポーネントをより早く追加することが求められるが、デザインシステムを使うことによって、より短い時間で、労力をかけずに、一貫したユーザーエクスペリエンスを確保できる。デザインシステムに投資することで、品質を犠牲にすること無く、デリバリ、コラボレーション、クリエイティビティを妥協なく実現でき、エンジニアとデザイナのコンテキストシフトを減らすことができる。
Best practices for writing code comments Jump to heading
コードコメントのベストプラクティス Jump to heading
コード自体ではなく、コードコメントについてのベストプラクティスを9つにまとめており、それぞれについて詳しく解説をしている。
ルール1:コメントはコードを複製であってはならない
ルール2:良いコメントは不明確なコードを許さない
ルール3:明確なコメントを書くことができない場合は、コードに問題がある
ルール4:混乱を払拭するコメントであるべき
ルール5:コメントで自然でないコードを説明する
ルール6:コピーされたコードの元のソースへのリンクを示す
ルール7:最も役立つ外部参照へのリンクを挿入する
ルール8:バグを修正するときにコメントを追加する
ルール9:コメントを使用して不完全な実装にマークをする
The Key to Understanding Why Things Happen – Jorge Arango Jump to heading
物事が起こる理由を理解する方法 Jump to heading
ある物事が何故起きたのか、それを正確に判断するためには氷山モデルを理解することが助けとなる。この記事では、氷山モデルでは4つのレイヤーをもつことを紹介し、それがどのように活用できるのかについて紹介する
- イベント: 発生した事実
- パターン: 何度も発生する事象
- 構造: パターンを引き起こしている可能性のあるもの
- メンタルモデル: 構造を実現するもの
npm audit: Broken by Design Jump to heading
npm auditが壊れた挙動をすることについての指摘をする。npm auditがどのように機能するか解説しつつ、それがなぜ壊れているのかを詳細に説明していく。
export default thing
is different to export { thing as default }
Jump to heading
export/importの挙動について、特にexport default thing
と export { thing as default }
の挙動がどのように違うかについて紹介する。
In Brief Jump to heading
CSS @supports rules to target only Firefox / Safari / Chromium: 現時点において有効な、CSSで特定のブラウザのみにCSSを適用させる方法を紹介
What does
font: 110%/1.4 system-ui
mean?:font: 110%/1.4 system-ui
の設定がどのような仕組みになっているかを解説するHow to Use Promise.all(): Promise.allの挙動について詳しく紹介する
Trigonometry in CSS and JavaScript: Beyond Triangles | Codrops: 三角法をCSSやJSの実装に取り入れることで、どのような表現が可能になるのか、実際のソースを交えて紹介する
Using HSL Colors In CSS: HSLとはなにか、CSSでどのように使えるのか、便利なユースケースなどを紹介する