呜啦!日常碎碎念,偶尔掉落优质前端博文推荐、学习资源等
网页:https://tg.cosine.ren
本频道的搜索Bot 来辣 👉 @cosSearchBot
私聊直接发消息就可以搜索啦~
🔖tags
#优质博文 #资源推荐 #博客更新 #碎碎念 #项目更新 #手工 #书摘 #阮一峰的科技周刊 #新动态

图频:Cosine 🎨 Gallery @CosineGallery
猫片: @cosine_cat
#优质博文 #前端 #typescript
难得一见的比较不同的思路
Understanding the Value of TypeScript Enums

AI 摘要:本文为 TypeScript 的枚举(enum)功能辩护,指出当前对其的批评多源于误用而非特性本身的问题。作者强调枚举应作为符号化(symbolic)工具用于内部逻辑,而非直接绑定字面值或暴露为公共 API,并详细分析了错误使用枚举的三大风险及正确实践方法。

1. 引言与背景
• 近年来越来越多开发者批评 TypeScript 的枚举功能,倾向于使用联合类型或常量对象。
• 作者认为问题在于对枚举的误解和误用,而非特性本身。

2. 枚举的符号化本质
• 枚举应代表抽象概念而非具体值(如 "red" 或 #FF0000 ),类似 ES6 的 Symbol 特性。
• 示例:交通灯状态应通过 enum TrafficLight { Red, Yellow, Green } 抽象表示,而非绑定字符串或颜色代码。

3. TypeScript 枚举的陷阱
• 允许字面值赋值:如 enum TrafficLight { Red = "red" } 导致以下问题:
• 抽象泄漏:逻辑层与表示层耦合(如 UI 直接依赖 "red" 字符串)。
• 脆弱性:字符串比较易受大小写或拼写错误影响。
• 公共 API 污染:枚举值暴露后难以修改(如后端 API 返回 "Processing")。

4. 正确使用建议
• 仅用于内部逻辑:枚举值应作为代码中的符号标签,不直接序列化或展示。
• 显式转换层:通过 Map 或映射函数将枚举值转换为外部需要的表示形式。

5. 结论
• 批评者常抱怨枚举“不易序列化”,但作者指出这是误用——枚举本就不应直接用于序列化场景。
• TypeScript 枚举虽有设计差异,但在符号化场景中仍具价值,关键在于区分抽象与具体表示。


author Yazan Alaboudi Understanding the Value of TypeScript Enums
#优质博文 #前端 #design #color #oklch #色彩空间
蛮有意思,在文章的网页里我 mac 上能看出来差别()手机上不行。
这里的图仅供参考色差
Design systems need a colour space

AI 摘要:本文探讨设计系统中色彩空间的重要性,分析 sRGB 与 Display P3 的差异,介绍 OKLCH 的优势与局限,并强调未来色彩空间规范化的必要性。

本文通过类比鞋码系统的复杂性,引出设计系统中色彩空间的重要性。传统使用十六进制值(如 #ff0000 )或 RGB 值的色彩定义方式缺乏对色彩空间的明确标注,可能导致显示偏差。sRGB 是当前 CSS 和 Figma 的默认色彩空间,但 Display P3 因其更广的色域(尤其是更鲜艳的红、绿色)正成为未来趋势。

Tailwind CSS 4 和 Radix 3 已转向 Display P3,并采用 OKLCH 色彩空间。OKLCH 通过亮度(Lightness)、色度(Chroma)和色相(Hue)实现感知一致性,但需注意其超广色域可能导致部分颜色无法在现有设备上准确显示。此外,OKLCH 在颜色混合时可能因色相差异产生意外结果,需结合 OKLAB 等其他空间优化。

文章建议将色彩创建与部署分离:创作阶段可利用 OKLCH 等高级空间,而部署时需兼顾代码紧凑性与兼容性。最后提到工具 Pinwheel 可辅助色彩编辑、混合及代码生成。


author bjango
via Frontend Focus ​684
 
 
Back to Top