我一直将 Adam 的 GUI 挑战 文章/视频添加至书签，并且在我有机会回顾和链接它们之前，另一个就发布了！ 幸运的是，它们在 web.dev 上的主页 是一个不错的汇总。
例如，最近的一个是分隔按钮组件（文章 / 视频 / 演示）。 拥有设计规范、编写代码使其正常工作并看起来正确，然后就此结束，这是一回事。 但是，我敢说真正的前端开发 比这更深入地思考。 仅在这一组件中，Adam 就考察了
- 颜色的设置和应用方式。 这些颜色具有微妙之处，使它们在一起感觉很舒服。 例如，最深的颜色是基础颜色的深色版本，但不是黑色。 它使用自定义属性来设置一种颜色组合菜单，但最重要的是，也为主题成功做好了准备。
- 菜单使用阴影来传达适当的深度。 由于支持多个主题，因此阴影不会做任何尴尬的事情，例如反转自身，即在深色背景上使用浅色阴影，看起来很愚蠢，或深色阴影在深色背景上。
- SVG 描边的使用（高效！灵活！），它解锁了 CSS 设计选项，例如圆化端帽。
点击（活动和悬停状态）应**提高**对比度。
- 所有内容都经过键盘使用测试。 菜单在被 Tab 键切换到时打开，箭头键在菜单中移动焦点，并通过视觉变化来强调。 还使用了屏幕阅读器（在本例中为 VoiceOver）来测试某些内容，例如使用 ESC 键关闭菜单并移除焦点是可行的。
- 菜单打开和关闭时，会尊重降低运动偏好，减少运动量。
- 在视觉上，唯一打开和关闭菜单的是 CSS 中的
:focus-within。 多么简单！ 但 JavaScript 中的aria属性仍在更新，以正确表达这一点。
这并不是全部，但已经很多了，对吧？（文章 包含更多详细信息，包括用于检查构建过程中发生情况的工具以及使用的少量辅助库。）这就是真正的前端开发。 仅仅是“带菜单的按钮”就有很多方面需要正确处理，并且如果处理错误，会带来危险的隐患。
如果您喜欢挑战的想法，CodePen 每周都会向您发起挑战，让您根据提示构建一些内容，并提供想法和资源。 这很有趣，因为有很多人和你一起做这件事，让你可以看到其他人如何以不同的方式处理相同的想法。