标签：前端
共 16 篇文章
-
调色板生成与色彩系统设计：从和谐配色到 WCAG 可访问性
深度解析调色板生成的核心算法：6 种和谐配色方案（互补 / 类似 / 三角 / 分割互补 / 四角 / 单色阶）、Tailwind 与 Material 设计系统色阶生成算法、明度色调（Tints / Shades / Tones）、WCAG 2.1 对比度计算、三种色盲模拟（红色盲 / 绿色盲 / 蓝色盲）的线性 RGB 矩阵变换原理、黄金角度随机配色、6 种格式导出（CSS / Tailwind / SCSS / JSON / Android / iOS）。配套在线调色板生成器实操演练。
-
时间表示全家桶：从 Unix 时间戳到 CRON 调度的开发者时间指南
一篇打通 Unix 时间戳、时区转换、时间单位换算与 CRON 表达式四大工具的跨工具专题博客，涵盖绝对时间与本地时间、IANA 时区数据库、夏令时陷阱、Gregorian 历法平均值、缓存 TTL 配置、定时任务调度等核心概念，附 JavaScript/Python/Java 三语言代码示例与工具联动场景。
-
时区转换与国际化时间处理实战指南
从 IANA 时区数据库到夏令时识别，从 ISO 8601 带偏移格式到跨时区定时任务调度，系统讲解时区转换原理与全栈最佳实践。附 JavaScript Intl API、Node.js、Python、Java 时区处理代码示例。
-
CSS 格式化与压缩原理：从词法分析到 minify 算法
深入解析 CSS 格式化与压缩背后的原理：CSS 词法结构、手写 tokenizer 逐字符扫描、递归下降 parser 构建 AST、向前探测区分规则与声明、美化序列化算法、压缩 minify 算法与末尾分号省略、校验常见问题。涵盖嵌套 at-rule、@keyframes、字符串字面量处理、纯原生 TypeScript 实现要点、与 HTML 格式化工具与颜色工具的联动方案。
-
ASCII Art 与 FIGlet 字体：从终端横幅到纯原生 TypeScript 实现
深入解析 ASCII Art 文本横幅的渲染原理：FIGlet 程序与 FIGfont 字体格式、字符多行表示与横向拼接算法、字符间距与等宽对齐、字体高度与基线设计。对比 Block/Banner/Small 三种字体的视觉差异，涵盖 GitHub README 标题、终端启动横幅、CLI 签名等应用场景，并附纯原生 TypeScript 零依赖实现要点。
-
HTML 格式化与压缩原理：从解析模型到 minify 算法
深入解析 HTML 格式化与压缩背后的原理：HTML5 解析模型与容错规则、空白语义、void elements 与可选闭合标签、rawtext 元素特殊处理、递归缩进美化算法、压缩 minify 算法、属性序列化规则、常见校验问题。涵盖 DOMParser 使用、纯原生 TypeScript 实现要点、与 HTML 实体工具与 Markdown 工具的联动方案。
-
JSON 转 TypeScript 接口原理：类型推断、联合合并与 interface 去重
深入解析 JSON 转 TypeScript 接口生成器背后的原理：递归类型推断算法、TypeInfo 树设计、数组元素类型合并、联合类型去重排序、可选字段检测、嵌套对象提取为独立 interface、结构签名去重策略、键名合法性处理。涵盖纯原生 TypeScript 实现要点、与 JSON / JSONPath / JSON Schema 工具的联动方案、常见陷阱与最佳实践。
-
JavaScript 格式化与压缩原理：从词法分析到智能缩进
深入解析 JavaScript 格式化与压缩背后的原理：JS 词法结构、手写 tokenizer 逐字符扫描、正则字面量与除法区分、模板字符串与注释处理、基于括号深度的智能缩进算法、压缩 minify 与 ASI 陷阱、校验未闭合括号。涵盖箭头函数、类、多字符运算符、纯原生 TypeScript 实现要点、与 HTML/CSS 格式化工具的联动方案。
-
二维码应用场景与设计指南：容错等级、容量、颜色与扫描兼容性
系统讲解二维码（QR Code）的 4 种容错等级、4 种编码模式与容量上限、前景背景色对比度要求、Logo 嵌入规则、WiFi / vCard / 邮件预设格式，以及 PNG 与 SVG 选型。结合在线二维码生成器实操，帮你做出既能扫描又美观的二维码。
-
TOML 配置文件实战指南：语法详解、日期时间类型与 Cargo / pyproject 案例
系统讲解 TOML v1.0.0 语法：表、数组表、点号键、内联表、4 种字符串、4 种日期时间类型、整数精度陷阱。结合 Rust Cargo.toml 与 Python pyproject.toml 真实案例，讲清 TOML 与 JSON 互转时的类型丢失问题。配套在线 TOML/JSON 互转工具实操演练，帮你写好现代配置文件。
-
无障碍颜色对比度：WCAG 2.1 标准与前端实践
系统讲解 WCAG 2.1 颜色对比度标准：相对亮度公式、对比度比值计算、AA / AAA 评级阈值、5 类应用场景（普通文字 / 大文字 / UI 组件）、品牌色不达标的 4 种解决方案、暗色模式下的对比度陷阱。配套可交互对比度检查工具，帮你交付无障碍合规的界面。
-
数据格式转换全景：JSON / CSV / TSV / YAML 该用哪个？
系统对比 JSON、CSV、TSV、YAML 四种主流数据格式的优劣与适用场景：RFC 4180 CSV 状态机解析原理、JSON 嵌套对象展平为点号路径列、Excel 乱码与 UTF-8 BOM、分隔符选择策略、CSV 无类型系统的陷阱。配套可交互 CSV / JSON 互转工具，帮你选对格式、转对数据。
-
前端编码全景：encodeURI / encodeURIComponent / btoa / Base64 / HTML 实体 该用哪个？
系统对比前端开发中常见的编码方式：URL 编码（encodeURI / encodeURIComponent）、Base64（btoa / atob + TextEncoder）、HTML 实体（命名 / 数字实体）的原理、应用场景、上下文边界与常见误用。配套可交互工具矩阵，帮你一图搞清该用哪个。
-
Markdown 实战指南：GFM 语法速查 + 解析原理 + XSS 防护
系统讲解 Markdown 与 GFM（GitHub Flavored Markdown）子集语法：标题、段落、粗体斜体、删除线、行内代码与代码块、链接图片、列表与任务列表、引用、表格、水平线。深入解析行内元素与块级元素的解析顺序（为什么粗体必须在斜体之前）、XSS 防护策略（默认 HTML 转义 + URL 协议白名单）、写作技巧与常见陷阱。配套可交互 Markdown 预览器，实时渲染 + 工具栏快捷插入 + HTML 导出。
-
前端安全实战：CSP、XSS、CSRF 防护全景指南
系统讲解前端三大安全威胁：XSS（跨站脚本攻击）、CSRF（跨站请求伪造）、CSP（内容安全策略）。覆盖三种 XSS 类型与载荷、CSRF 与 XSS 的本质区别、SameSite Cookie 与 CSRF Token 防御、CSP 指令与 nonce/hash 用法、上下文相关编码策略。配套可交互工具矩阵，帮你一图搞清该用哪种防御手段。
-
YAML / JSON / TOML 配置格式对比：该用哪个？转换陷阱与选型决策
系统对比 YAML、JSON、TOML 三种主流配置文件格式：语法特性、注释支持、类型系统、可读性、生态兼容性。详解 YAML 类型推断陷阱（yes/no 布尔、日期自动解析）、JSON 无注释的 workaround、TOML 的表结构设计。配套在线 YAML/JSON 互转工具实操演练，帮你选对配置格式。