Now vibe coding, so learning hammer FE ?
《CSS 单位完全参考手册》
标签：
#前端开发 #CSS #响应式设计 #Web排版 #容器查询 #视口单位 #字体相对单位 #CSS数学函数
总结：
这是一本由 Mykola Ptushchuk 编写的交互式 CSS 单位参考手册，涵盖从基础像素到现代容器查询单位的所有 CSS 度量单位。全书共 7 章，每个单位都配有实时浏览器演示，可在线调整参数观察实际效果，并提供完整 PDF 下载。
文章要点：
1. 全书结构清晰，覆盖七大单位家族：从绝对单位（px）、字体相对单位（em/rem/ch/cap 等）、视口单位（vw/vh 及小/大/动态视口变体）、容器查询单位（cqi/cqw 等）、百分比、数学函数，到角度单位，形成完整的 CSS 度量体系地图。
2. 视口单位家族详解：现代移动端浏览器 UI 会动态收缩/展开，因此视口单位分为默认（等价于大视口）、小视口（sv，假设浏览器控件展开）、大视口（lv，假设控件收起）和动态视口（dv，实时状态）四大家族，解决了
3. 容器查询单位让组件真正可移植：
4. 字体相对单位不止 em/rem：除了常见的
5. CSS 数学函数是单位的粘合剂：
6. 实用选型建议：正文用
7. 交互式学习体验：每个单位都配有可拖拽、可滑动的实时演示，直接在浏览器中观察单位变化效果，将抽象概念转化为直观体验，并支持下载完整 PDF 离线阅读。
URL：
https://cssunits.com/
标签：
#前端开发 #CSS #响应式设计 #Web排版 #容器查询 #视口单位 #字体相对单位 #CSS数学函数
总结：
这是一本由 Mykola Ptushchuk 编写的交互式 CSS 单位参考手册，涵盖从基础像素到现代容器查询单位的所有 CSS 度量单位。全书共 7 章，每个单位都配有实时浏览器演示，可在线调整参数观察实际效果，并提供完整 PDF 下载。
文章要点：
1. 全书结构清晰，覆盖七大单位家族：从绝对单位（px）、字体相对单位（em/rem/ch/cap 等）、视口单位（vw/vh 及小/大/动态视口变体）、容器查询单位（cqi/cqw 等）、百分比、数学函数，到角度单位，形成完整的 CSS 度量体系地图。
2. 视口单位家族详解：现代移动端浏览器 UI 会动态收缩/展开，因此视口单位分为默认（等价于大视口）、小视口（sv，假设浏览器控件展开）、大视口（lv，假设控件收起）和动态视口（dv，实时状态）四大家族，解决了
100vh 在移动端全屏布局中常见的"被地址栏遮挡"难题。3. 容器查询单位让组件真正可移植：
cqi/cqw 等单位测量的是组件所在的"查询容器"而非整个视口，使同一个卡片组件在 300px 侧边栏和 700px 主栏中能自动呈现不同布局，无需媒体查询或额外类名，实现了"组件响应自身上下文"而非"响应整个页面"的范式转变。4. 字体相对单位不止 em/rem：除了常见的
em（当前元素字体大小）和 rem（根元素字体大小），还有 ch（数字 0 的字宽，适合设置最佳阅读行宽如 65ch）、cap（大写字母高度，适合图标与标题对齐）、lh（当前行高作为长度）等精细排版单位，以及对应的根元素变体（rch/rex/rcap 等，2026 年 1 月才在 Firefox 中补齐，至此全浏览器支持）。5. CSS 数学函数是单位的粘合剂：
calc() 可混合不同单位（如 100% - 240px），clamp() 实现流体排版（如 clamp(2rem, 5vw + 1rem, 4rem)），min()/max() 取极值，还有三角函数（sin/cos/tan）可用于无 JS 的圆形布局，指数函数（pow/sqrt）可构建模块化字号比例系统。6. 实用选型建议：正文用
rem 尊重用户偏好，组件内部比例用 em 保持缩放一致性，line-height 推荐无单位写法（如 1.5）以便作为乘数继承，clamp() 的流体值中务必包含 rem 项以确保缩放无障碍性。7. 交互式学习体验：每个单位都配有可拖拽、可滑动的实时演示，直接在浏览器中观察单位变化效果，将抽象概念转化为直观体验，并支持下载完整 PDF 离线阅读。
URL：
https://cssunits.com/
CSS Units
CSS Units — The Complete Reference
A complete interactive reference to every CSS measurement unit. From the basics of px and rem to the nuances of svh, dvh, and cqw.
《hucre：零依赖的电子表格引擎》
标签：
#Web开发 #TypeScript #电子表格 #Xlsx #Csv #Ods #数据转换 #零依赖 #流式处理 #数据验证 #无障碍访问
总结：
文章要点：
1. 核心定位：一个纯 TypeScript 编写的零依赖电子表格引擎，支持读写 XLSX、CSV、ODS、JSON、NDJSON、XML、HTML 等多种格式，可在 Node.js、Deno、Bun、浏览器、Cloudflare Workers 等任意平台运行
2. 极致轻量：完全支持 Tree Shaking，按需导入，CSV 模块仅 3.7KB gzip，完整库 129KB gzip，远小于 SheetJS（300KB）和 ExcelJS（500KB）
3. 多格式统一 API：通过
4. 流式处理：支持 XLSX、CSV、NDJSON、ODS、XML 的流式读写，可处理百万级数据而不爆内存；300万行 XLSX 流式写入峰值内存仅 70MB，而增量写入器需要 1GB+
5. 功能全面：支持单元格样式、条件格式（13 种）、数据验证、超链接、图片（含 SVG）、图表（柱状/折线/饼图等）、数据透视表、迷你图、冻结窗格、密码保护、Excel 2024 原生复选框、模板引擎等
6. 往返保真：
7. 数据验证与无障碍：内置 Schema 验证（类型强制、正则、枚举、范围），以及 WCAG 2.1 AA 无障碍审计（对比度检查、缺失替代文本、表头检测等）
8. 遗留格式支持：可读取 XLS（Excel 97-2003）和 XLSB（二进制 Excel）文件，自动检测格式
9. 开发体验友好：提供 Builder API 链式调用、对象简写读写（
10. 明确的能力边界：不实现公式计算引擎、不支持 XLS/XLSB 写入、部分高级图表类型（气泡图/雷达图等）仅支持读取和往返、流式 ODS 写入不带样式
URL：https://github.com/productdevbook/hucre
标签：
#Web开发 #TypeScript #电子表格 #Xlsx #Csv #Ods #数据转换 #零依赖 #流式处理 #数据验证 #无障碍访问
总结：
文章要点：
1. 核心定位：一个纯 TypeScript 编写的零依赖电子表格引擎，支持读写 XLSX、CSV、ODS、JSON、NDJSON、XML、HTML 等多种格式，可在 Node.js、Deno、Bun、浏览器、Cloudflare Workers 等任意平台运行
2. 极致轻量：完全支持 Tree Shaking，按需导入，CSV 模块仅 3.7KB gzip，完整库 129KB gzip，远小于 SheetJS（300KB）和 ExcelJS（500KB）
3. 多格式统一 API：通过
read() 自动检测格式，write() 支持 9 种输出格式（XLSX、ODS、CSV、TSV、JSON、NDJSON、XML、HTML、Markdown），大幅降低多格式处理的心智负担4. 流式处理：支持 XLSX、CSV、NDJSON、ODS、XML 的流式读写，可处理百万级数据而不爆内存；300万行 XLSX 流式写入峰值内存仅 70MB，而增量写入器需要 1GB+
5. 功能全面：支持单元格样式、条件格式（13 种）、数据验证、超链接、图片（含 SVG）、图表（柱状/折线/饼图等）、数据透视表、迷你图、冻结窗格、密码保护、Excel 2024 原生复选框、模板引擎等
6. 往返保真：
openXlsx/saveXlsx 路径可保留图表、VBA 宏、切片器、时间线过滤器等 hucre 不原生建模的部分，实现无损编辑他人文件7. 数据验证与无障碍：内置 Schema 验证（类型强制、正则、枚举、范围），以及 WCAG 2.1 AA 无障碍审计（对比度检查、缺失替代文本、表头检测等）
8. 遗留格式支持：可读取 XLS（Excel 97-2003）和 XLSB（二进制 Excel）文件，自动检测格式
9. 开发体验友好：提供 Builder API 链式调用、对象简写读写（
readObjects/writeObjects）、CLI 工具（格式转换、检查、验证）、单元格工具函数（行列转换、范围解析）10. 明确的能力边界：不实现公式计算引擎、不支持 XLS/XLSB 写入、部分高级图表类型（气泡图/雷达图等）仅支持读取和往返、流式 ODS 写入不带样式
URL：https://github.com/productdevbook/hucre
GitHub
GitHub - productdevbook/hucre: Zero-dependency spreadsheet engine. Read & write XLSX, CSV, ODS. Pure TypeScript, works everywhere.
Zero-dependency spreadsheet engine. Read & write XLSX, CSV, ODS. Pure TypeScript, works everywhere. - productdevbook/hucre
《别在 div 和 span 上乱加 aria-label》
标签：#前端 #Web无障碍 #ARIA #屏幕阅读器 #HTML语义化
总结：
本文通过实测数据揭示了在 div、span 等 generic 角色元素上使用 aria-label 的严重兼容性问题。ARIA 规范明确禁止为 generic 角色命名，而各屏幕阅读器的表现更是天差地别——有的只读标签、有的只读内容、有的两者都读、有的干脆忽略。这种不一致会让依赖辅助技术的用户获得错误信息，属于典型的"好心办坏事"。作者指出 section 和 popover 是例外，前者加标签会自动升级为 region 地标，后者角色会变为 group。
文章要点：
1. ARIA 规范 5.2.8.6 明确把 generic 角色列入"禁止命名"清单，div 和 span 默认就是这个角色
2. 实测 8 组屏幕阅读器+浏览器组合，对带 aria-label 的 div announcement 结果五花八门：VoiceOver 读"News, group"、TalkBack 只读"News"、JAWS/NVDA 完全忽略标签只读内容
3. 空 div 的测试结果更混乱，有的读"News, empty group"、有的完全静默，无法预测用户会听到什么
4. 这种不可预测性对屏幕阅读器用户是灾难性的——你以为在帮忙标注，实际上可能覆盖了真正有用的内容
5. 例外情况：section 元素加 aria-label 会自动从 generic 升级为 region 地标，这是规范允许的；带 popover 属性的 div 角色会变为 group，加标签也合法
6. 正确做法：需要可访问名称时，优先使用语义化标签（如 button、nav）或显式设置 role，而不是在裸 div 上硬塞 aria-label
URL：https://www.matuzo.at/blog/2026/aria-label-generic-elements
标签：#前端 #Web无障碍 #ARIA #屏幕阅读器 #HTML语义化
总结：
本文通过实测数据揭示了在 div、span 等 generic 角色元素上使用 aria-label 的严重兼容性问题。ARIA 规范明确禁止为 generic 角色命名，而各屏幕阅读器的表现更是天差地别——有的只读标签、有的只读内容、有的两者都读、有的干脆忽略。这种不一致会让依赖辅助技术的用户获得错误信息，属于典型的"好心办坏事"。作者指出 section 和 popover 是例外，前者加标签会自动升级为 region 地标，后者角色会变为 group。
文章要点：
1. ARIA 规范 5.2.8.6 明确把 generic 角色列入"禁止命名"清单，div 和 span 默认就是这个角色
2. 实测 8 组屏幕阅读器+浏览器组合，对带 aria-label 的 div announcement 结果五花八门：VoiceOver 读"News, group"、TalkBack 只读"News"、JAWS/NVDA 完全忽略标签只读内容
3. 空 div 的测试结果更混乱，有的读"News, empty group"、有的完全静默，无法预测用户会听到什么
4. 这种不可预测性对屏幕阅读器用户是灾难性的——你以为在帮忙标注，实际上可能覆盖了真正有用的内容
5. 例外情况：section 元素加 aria-label 会自动从 generic 升级为 region 地标，这是规范允许的；带 popover 属性的 div 角色会变为 group，加标签也合法
6. 正确做法：需要可访问名称时，优先使用语义化标签（如 button、nav）或显式设置 role，而不是在裸 div 上硬塞 aria-label
URL：https://www.matuzo.at/blog/2026/aria-label-generic-elements
