Merge pull request #229 from frontendweekly/draft

Vol.456

11ty/posts/2024-06-12-v456.md

@@ -0,0 +1,48 @@
+---
+title: Vol.456
+date: '2024-06-12'
+desc: Campfireでの最新のCSSパターンと技術、最新のCSSを使用してHTMLをテストする方法、ユーザーのメンタルモデルを測定する、ほか計10リンク
+permalink: /posts/456/
+---
+
+
+## [Modern CSS patterns in Campfire](https://dev.37signals.com/modern-css-patterns-and-techniques-in-campfire/)
+#### Campfireでの最新のCSSパターンと技術
+
+この記事では、37signalsがCampfireを構築する際に使用した最新のCSSパターンと技術について説明しています。バニラCSSを用い、フレームワークやプリプロセッサを使用せずに、CSSネスティングや:has()、:is()、oklch()などの新機能を活用している。これにより、コードの可読性とメンテナンス性が向上している。また、カスタムプロパティやレスポンシブデザインの実践方法についても詳述している。
+
+
+## [Testing HTML With Modern CSS](https://heydonworks.com/article/testing-html-with-modern-css/)
+#### 最新のCSSを使用してHTMLをテストする方法
+
+この記事では、最新のCSSを使用してHTMLをテストする方法について説明する。著者は、古いプロジェクト「REVENGE.CSS」を例に、CSSセレクターを利用してマークアップの問題を視覚的に強調する方法を紹介している。カスタムプロパティや表現力豊かなセレクターを使って、HTMLのアンチパターンを検出し、エラーメッセージを開発者ツールに表示する手法を詳解。CSSを利用することで、スタックに依存せずにテストが可能となる。
+
+## [Measuring Users Mental Models](https://uxmag.com/articles/measuring-users-mental-models)
+#### ユーザーのメンタルモデルを測定する
+
+この記事では、ユーザーのメンタルモデルを測定する重要性と方法について説明している。メンタルモデルはユーザーがシステムの動作を理解するための信念であり、デザインの成功に影響を与える。測定方法として、シンクアラウドプロトコルや回想インタビュー、ペアワイズ比較、カードソーティングなどが紹介されている。これらの方法を用いることで、ユーザー体験を向上させるための設計に役立つ。
+
+
+## [What we talk about when we talk about root cause](https://github.com/readme/guides/root-cause)
+
+この記事では、「根本原因（root cause）」という概念の複雑さについて論じている。失敗の原因は単一の要素ではなく、複数の要因が組み合わさって発生する。特定の「根本原因」を見つけることは簡略化に過ぎず、問題の全体像を見失う恐れがある。記事では、この用語の使用が技術的な分析よりも心理的な安心感を提供するために使われていることを指摘している。
+
+
+## [Why it seems like the sky is falling for digital design](https://uxdesign.cc/why-it-seems-like-the-sky-is-falling-for-digital-design-229fefb431e0)
+
+この記事では、デジタルデザイン業界が直面する現状と将来について論じる。デザイン業界は成長してきたが、現在は経済の低迷と技術の進化により厳しい時期を迎えている。これにより、多くのデザイナーがキャリアの選択に迷い、業界の将来を不安視している。これを解決するためには新しい市場条件に適応し、ビジネスモデルの理解やマルチスキルの習得が重要となる。
+
+
+
+
+## In Brief
+
+- **[The Value of Design Tokens in Modern Web Development](https://southleft.com/insights/design-systems/the-value-of-design-tokens/)**: デザイントークンがウェブ開発における一貫性とメンテナンス性を向上させる理由
+
+- **[Folding the DOM](https://www.joshwcomeau.com/react/folding-the-dom/)**: ReactでDOMノードを折りたたむエフェクトを実装する方法を紹介
+
+- **[Why we moved away from primary secondary and tertiary buttons](https://medium.com/carwow-product-engineering/why-we-moved-away-from-primary-secondary-and-tertiary-buttons-2cba59855775)**: プライマリ、セカンダリ、ターシャリのボタン分類を廃止した理由
+
+- **[When to use tabindex='0'](https://tetralogical.com/blog/2024/04/04/why-you-dont-need-to-use-tabindex=)**: HTML要素へのtabindex="0"の使用が不要である理由
+
+- **[Using the Popover API for HTML Tooltips](https://frontendmasters.com/blog/using-the-popover-api-for-html-tooltips/)**: HTMLのツールチップにポップオーバーAPIを使用する方法を紹介