使用教程Guides & Blog
围绕编码、安全、时间、图片与文本处理的原创教程和科普文章，讲清工具背后的原理与最佳实践。Original tutorials and explainers on encoding, security, time, images and text — the principles and best practices behind the tools.
Lorem Ipsum 不只是占位符：排版密度、断行测试与设计稿填充指南Lorem Ipsum Is More Than Placeholder: Typographic Density, Line-Break Testing and Mock-Filling Guide
设计稿里那堆 "Lorem ipsum dolor sit amet" 不是随便乱打的拉丁文，它有近五百年的历史。本文聊聊它的由来，以及如何用占位文本真正测出行高、断行、溢出和响应式布局的问题，而不是只填满画布That "Lorem ipsum dolor sit amet" in your mockups is not random Latin — it has a history of nearly 500 years. This article covers its origins and how to use placeholder text to actually reveal line-height, line-break, overflow and responsive layout issues, not just fill the canvas.
阅读全文 →Read more →大小写转换不简单：土耳其语 i、Unicode 大小写与 locale 陷阱Case Conversion Is Not Trivial: Turkish i, Unicode Case Mapping and Locale Traps
`"I".toLowerCase()` 谁不会写？但在土耳其语 locale 下它返回的不是 "i" 而是 "ı"。本文从这个经典 bug 出发，讲清 Unicode 大小写映射的一对多、无条件映射与 locale 映射，以及数据库、URL、HTTP 头里的大小写坑Who can't write `"I".toLowerCase()`? But under a Turkish locale it returns "ı", not "i". Starting from this classic bug, this article explains Unicode one-to-many case mapping, unconditional vs locale-aware mapping, and the case pitfalls in databases, URLs and HTTP headers.
阅读全文 →Read more →Diff 算法入门：LCS 与 Myers，以及代码评审中高效读 diff 的技巧Diff Algorithms 101: LCS and Myers, Plus Tricks for Reading Diffs in Code Review
`git diff` 每天都在用，但你知道它背后的算法吗？本文从最长公共子序列讲起，对比 LCS 与 Myers 的取舍，再给出代码评审中快速定位真实改动、忽略噪音的几个实用技巧You run `git diff` every day, but do you know the algorithm behind it? This article starts from the longest common subsequence, compares LCS versus Myers, and shares practical tricks for locating real changes and ignoring noise during code review.
阅读全文 →Read more →中英文字数统计为什么对不上：字符、码点、Word 与编辑器的计数差异Why Chinese and English Word Counts Disagree: Characters, Code Points, Word vs Editor Counting
同一段文字，Word 说 320 字，编辑器说 412 字符，公众号后台又给了一个 356。这篇文章把"字数"背后的字符、码点、码元与分词规则讲清楚，让你再也不会被不同工具的数字搞晕The same paragraph: Word says 320 words, your editor says 412 characters, and the publishing backend reports 356. This article unpacks characters, code points, code units and tokenisation rules so you stop being confused by inconsistent counters.
阅读全文 →Read more →文本清洗流水线：去重、去空行、去 BOM 与批量处理的经验总结A Text Cleaning Pipeline: Deduplication, Blank-Line Removal, BOM Stripping and Batch Processing Lessons
拿到一份"看起来没问题"的文本数据，跑进系统却乱码、重复、空行满天飞——文本清洗是数据分析和迁移中最容易被低估的环节。本文总结我在多个项目中沉淀的清洗流水线：从 BOM 到行尾，从去重到批量处理，以及每一步最容易踩的坑You receive a text dataset that "looks fine", feed it into the system, and get mojibake, duplicates and blank lines everywhere — text cleaning is the most underrated step in data analysis and migration. This article distils the cleaning pipeline I have built across multiple projects: from BOM to line endings, from deduplication to batch processing, and the pitfalls at every step.
阅读全文 →Read more →MD5/SHA1/SHA256 怎么选：哈希碰撞、加盐与密码存储的正确姿势Choosing Between MD5, SHA1 and SHA256: Collisions, Salting and the Right Way to Store Passwords
哈希不是加密，MD5 也不是"过时了就不能用"——算法选型取决于场景。本文从碰撞攻击的真实数据出发，讲清通用哈希与密码哈希的本质区别，以及加盐、bcrypt、Argon2 各自的适用边界Hashing is not encryption, and MD5 is not "obsolete so never use it" — algorithm choice depends on the scenario. Starting from real collision-attack data, this article explains the fundamental difference between general-purpose hashes and password hashes, and where salting, bcrypt and Argon2 each fit.
阅读全文 →Read more →二进制与十六进制调试手册：位运算、掩码与颜色值的进制思维Binary and Hex Debugging Handbook: Bitwise Ops, Masks and Thinking in Bases for Colour Values
日志里打出 `0xFFFFFF00` 不是乱码，权限位 `0755` 不是十进制，颜色 `#FF8800` 也不是魔法字符串。本文用一线调试中的真实案例，讲清二进制、十六进制与位运算如何帮你快速定位问题。`0xFFFFFF00` in a log is not garbage, permission bits `0755` are not decimal, and colour `#FF8800` is not a magic string. This article uses real debugging cases to show how binary, hexadecimal and bitwise operations help you locate problems fast.
阅读全文 →Read more →HTML 实体编解码： 与空格的区别，以及 XSS 防护中的转义边界HTML Entity Encoding: Why Is Not a Space, and Escaping Boundaries in XSS Defense
` ` 看起来就是个空格，但 `trim()` 去不掉、`split(' ')` 切不开，因为它根本不是空格。本文从实体编码的原理讲起，结合 XSS 转义边界的真实案例，说清什么时候该转义、转义哪些字符。` ` looks like a space, but `trim()` won't remove it and `split(' ')` won't split on it — because it is not a space at all. This article starts from how entity encoding works, then uses real XSS escaping boundary cases to explain when to escape and which characters to escape.
阅读全文 →Read more →Unicode 与中文：为什么 \u4e2d 是"中"，以及 Emoji 代理对的长度坑Unicode and Chinese: Why \u4e2d Means "中", and the Emoji Surrogate Pair Length Trap
从 `\u4e2d` 到"中"只差一次码点查表，但 Emoji 一出现，`string.length` 就开始撒谎。本文讲清码点、编码单元与代理对的关系，以及我在前后端联调中踩过的三个真实坑From `\u4e2d` to "中" is just one code-point lookup, but the moment Emoji enters the picture, `string.length` starts lying. This article explains code points, code units and surrogate pairs, plus three real bugs I hit during frontend-backend integration.
阅读全文 →Read more →URL 编码的三个坑：空格变 + 还是 %20、中文与保留字符、双重编码Three URL Encoding Pitfalls: Space as + or %20, Chinese and Reserved Characters, Double Encoding
URL 编码看似简单，就是把不安全字符换成 `%XX`，但实际联调时空格变 `+` 还是 `%20`、中文该不该编码、参数被双重编码后服务端死活解析不出来——这些坑我一个个踩过。本文把三个最常见的问题讲透，附排查思路URL encoding looks simple — just replace unsafe characters with `%XX` — but in real integrations, whether a space becomes `+` or `%20`, whether Chinese needs encoding, and parameters that are double-encoded and can't be parsed on the server side are pitfalls I've hit one by one. This article explains the three most common problems and how to debug them.
阅读全文 →Read more →CSS box-shadow 从入门到拟物：多层阴影、内阴影与渲染性能CSS box-shadow From Basics to Skeuomorphism: Layered Shadows, Inset Shadows and Rendering Performance
`box-shadow` 是前端最常用的视觉工具之一，但五个参数的含义、多层叠加的技巧和性能陷阱并不总是被讲清楚。本文从语法拆解到拟物质感，再到什么时候该用图片代替阴影。`box-shadow` is one of the most-used visual tools in frontend, but the meaning of its five parameters, multi-layer stacking techniques and performance pitfalls are not always clearly explained. This article goes from syntax breakdown to skeuomorphic texture, and covers when to replace shadows with images.
阅读全文 →Read more →保存即格式化：Prettier 与 ESLint 的分工与团队配置实践Format-on-Save: How Prettier and ESLint Divide the Work and a Team Config That Works
团队里代码风格不统一，review 时一半评论在挑空格和引号，这是病，得治。Prettier 管格式、ESLint 管质量，两者配合加上保存自动格式化，能把风格争议从代码评审里彻底剔除。本文讲清分工边界和一套能直接用的团队配置When code style is inconsistent across a team and half the code review comments are about spaces and quotes, that's a problem worth fixing. Prettier handles formatting, ESLint handles code quality, and together with format-on-save they eliminate style debates from reviews entirely. This article clarifies the division of labour and a team config you can use directly.
阅读全文 →Read more →CSS 渐变进阶：linear-gradient 的角度、色标位置与 5 个常用视觉效果Advanced CSS Gradients: Angles, Colour-Stop Positioning and 5 Useful Visual Effects
`linear-gradient` 看似简单，但角度基准、色标位置和多层叠加里藏着不少细节。本文从原理讲起，给出 5 个可直接复制的视觉效果代码，并讨论性能与兼容性。`linear-gradient` looks simple, but the angle baseline, colour-stop positions and multi-layer stacking hide plenty of detail. This article starts from first principles, gives five copy-paste-ready visual effects, and discusses performance and compatibility.
阅读全文 →Read more →Cron 表达式实战：6 个高频调度场景与 Linux/Quartz 的字段差异Cron Expressions in Practice: 6 Common Scheduling Scenarios and the Linux/Quartz Field Difference
Cron 表达式看起来只有五六个字段，但"每 5 分钟"和"每 5 分钟从第 3 分开始"是两回事，Linux cron 和 Quartz 的字段数还不一样。本文用 6 个真实场景把写法讲透，附字段差异对照表A cron expression looks like just five or six fields, but "every 5 minutes" and "every 5 minutes starting from minute 3" are different things — and Linux cron and Quartz don't even have the same number of fields. This article works through six real scenarios and includes a field-difference comparison table.
阅读全文 →Read more →前端颜色体系：HEX/RGB/HSL 互转与设计系统的颜色令牌实践Frontend Colour Systems: Converting HEX/RGB/HSL and Colour Tokens in Design Systems
HEX、RGB、HSL 不是三种"不同的颜色"，而是同一种颜色的三种描述方式。本文讲清三者的本质与互转公式，再落到设计系统里颜色令牌（Design Token）的组织实践HEX, RGB and HSL are not three "different colours" — they are three ways of describing the same colour. This article explains their essence and conversion formulas, then moves to colour-token organisation in real design systems.
阅读全文 →Read more →JWT 解析的 5 个常见报错：签名失效、过期、算法混淆与排查清单5 Common JWT Parsing Errors: Invalid Signature, Expiry, Algorithm Confusion and a Debug Checklist
JWT 看起来就是三段 Base64URL 拼起来的字符串，但实际联调时签名失效、过期、算法不匹配这类报错能耗掉大半天。本文整理我踩过的 5 个高频坑，附一个可直接照着走的排查清单A JWT looks like three Base64URL segments glued together, but in real integrations, invalid signatures, expiry and algorithm mismatches can eat half a day. This article collects five high-frequency pitfalls I've hit, plus a debug checklist you can follow step by step.
阅读全文 →Read more →图片加水印的正确姿势：可见水印、盲水印与版权保护的边界Watermarking Images the Right Way: Visible Watermarks, Blind Watermarks and the Limits of Copyright Protection
水印不是防盗的银弹，但用对了能显著提高盗用成本。本文从可见水印的摆放策略讲起，对比盲水印与数字指纹的原理，并给出版权保护的真实边界与实操建议A watermark is no silver bullet against theft, but done right it raises the cost of misuse considerably. This article starts with visible-watermark placement, compares how blind watermarks and digital fingerprints work, and lays out the real limits of copyright protection plus practical advice.
阅读全文 →Read more →UUID v4 与 v7 的区别：为什么分布式系统开始从随机 ID 切到时序 IDUUID v4 vs v7: Why Distributed Systems Are Moving from Random to Time-Ordered IDs
用了多年的 UUID v4 正在被 v7 取代，背后不是玄学，而是数据库索引与分布式排序的真实痛点。本文拆解 v4 的随机代价、v7 的时间戳结构，以及什么场景下该迁移、什么场景下继续用 v4After years of dominance, UUID v4 is being displaced by v7 — not by hype, but by real pain in database indexing and distributed ordering. This article breaks down the cost of randomness in v4, the timestamp-based structure of v7, and when to migrate versus when to stick with v4.
阅读全文 →Read more →Base64 编码是什么？原理、用途与常见误区详解What Is Base64? Principles, Use Cases and Common Pitfalls
Base64 出现在 Data URL、接口鉴权、邮件附件等无数场景中。本文用通俗语言讲清 Base64 的工作原理、为什么体积会增大三分之一，以及处理中文与二进制时最容易踩的三个坑。Base64 shows up everywhere — Data URLs, API auth, email attachments. This article explains in plain terms how Base64 works, why it inflates size by a third, and the three pitfalls people hit most with Chinese text and binary data.
阅读全文 →Read more →密码安全指南：为什么弱密码屡禁不止，如何真正防住A Practical Guide to Password Security
每年泄露榜单上 "123456" 依然名列前茅。本文解释弱密码与密码复用的真实风险，给出强密码的三个特征，以及“生成器 + 密码管理器 + 两步验证”的落地方案。"123456" still tops breach lists every year. This article explains the real risks of weak and reused passwords, the three traits of a strong password, and a practical setup combining a generator, a password manager and two-factor authentication.
阅读全文 →Read more →Unix 时间戳入门：为什么全世界从 1970 年开始数秒Unix Timestamps 101: Why the World Counts Seconds from 1970
时间戳是数据库、日志与 API 的通用语言，但秒/毫秒混用、时区误解造成的 bug 层出不穷。本文讲清时间戳的本质、三个高频事故场景与排查方法。Timestamps are the lingua franca of databases, logs and APIs, yet seconds/milliseconds mix-ups and timezone misunderstandings cause endless bugs. This article explains what timestamps really are and the three most common incident scenarios.
阅读全文 →Read more →接口调试提效：JSON 格式化与校验的完整工作流Debug APIs Faster: A Complete JSON Formatting and Validation Workflow
面对一坨压缩 JSON，如何 30 秒内定位结构问题？本文分享一套“格式化 → 校验 → 转换 → 压缩”的实用工作流，覆盖接口调试与配置编写的常见场景。Facing a wall of minified JSON, how do you spot structural problems in 30 seconds? This article shares a practical format → validate → convert → minify workflow covering common API debugging and config authoring scenarios.
阅读全文 →Read more →网页图片格式怎么选：JPG、PNG、WebP 使用与压缩实践Choosing Web Image Formats: JPG, PNG, WebP and Compression in Practice
图片通常占网页体积的一半以上。本文对比三大格式的特点与适用场景，给出选型决策路径与压缩参数建议，帮你把页面加载速度提一个档次。Images typically account for over half of a page’s weight. This article compares the three major formats, offers a decision path and compression settings, and helps you move your page load time up a class.
阅读全文 →Read more →正则表达式入门：核心概念与 8 个即用高频模式Regex for Beginners: Core Concepts and 8 Ready-to-Use Patterns
正则表达式是“学会一次、受益十年”的技能。本文用最短篇幅讲清字符类、量词、锚点三大核心，并给出邮箱、手机号、中文等 8 个高频模式与避坑建议。Regex is a "learn once, benefit for a decade" skill. This article covers the three cores — character classes, quantifiers, anchors — in minimal space, plus 8 high-frequency patterns and pitfall advice.
阅读全文 →Read more →二维码为什么坏了还能扫？原理与安全扫码建议Why Do Damaged QR Codes Still Scan? How They Work and Safe-Scanning Tips
二维码被折角、沾水、贴了 Logo 依然能扫，背后是纠错码在发挥作用。本文讲清二维码的存储与纠错原理，并给出日常扫码的安全建议。QR codes survive folded corners, water stains and logos thanks to error correction. This article explains how QR codes store data and correct errors, plus practical safe-scanning advice.
阅读全文 →Read more →BMI 怎么看才科学：公式、区间与它没告诉你的事Reading BMI Scientifically: Formula, Ranges and What It Doesn’t Tell You
BMI 是最普及的健康粗筛指标，但“同一个 BMI，不同身体”的现象让很多人误读。本文讲清计算公式与标准区间，以及需要结合体脂率、腰围等指标的原因。BMI is the most widespread health screening metric, yet "same BMI, different bodies" leads to frequent misreading. This article covers the formula, standard ranges, and why body-fat percentage and waist circumference matter too.
阅读全文 →Read more →