开发者的"奇技淫巧"：那些让你效率翻倍的实战技巧

引子

你是不是也遇到过这种情况------明明知道有个 CSS 技巧能解决文字溢出显示省略号，但就是想不起来具体要写哪几个属性？或者在 Stack Overflow 上搜了半天，发现答案质量参差不齐，有的还已经过时了？

作为一个开发者，我深知这种痛。我们每天都在解决各种具体问题，而很多问题的解决方案其实并不复杂，只是需要有人帮你整理好、说清楚。

这就是"奇技淫巧"这个概念诞生的原因。

原文地址

墨渊书肆/开发者的"奇技淫巧"：那些让你效率翻倍的实战技巧

我的"奇技淫巧"收集癖

作为一个写了多年代码的开发者，我有个习惯------遇到好用的技巧就记下来。

最开始是记在印象笔记上，后来用有道云笔记，再后来直接 mark 收藏到 chrome 浏览器书签栏。但记着记着我发现一个问题：技巧越来越多，找起来越来越麻烦，而且很多技巧我也不知道放在哪里了。

比如某天我突然想："CSS 文字超出容器怎么显示省略号来着？"我知道这个技巧我肯定记过，但翻遍笔记软件就是找不到。或者找到了，但只有一行代码，没有注释，我自己都看不懂当时为什么这么写。

于是我开始思考：能不能把这些技巧系统地整理出来，不仅方便自己查，也能帮到其他人？

这就是我做「奇技淫巧」模块的初衷。

我整理的实战技巧

下面分享几个我日常开发中最常用的技巧，这些都是真真切切帮我节省过时间的"小妙招"。

CSS 文字超出容器怎么显示省略号？

这个技巧我用过无数次。做卡片列表、文章摘要时，文字溢出是必遇到的问题。

单行省略只需三个 CSS 属性配合：

css 复制代码

.text {
  overflow: hidden;        /* 必须：隐藏溢出内容 */
  text-overflow: ellipsis;  /* 省略号 */
  white-space: nowrap;     /* 禁止换行 */
}

多行省略（以 2 行为例），需要 WebKit 内核浏览器支持：

css 复制代码

.text {
  display: -webkit-box;
  -webkit-line-clamp: 2;   /* 最多显示 2 行 */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

我一开始只记了单行省略的代码，后来遇到多行需求又去搜了半天。所以现在我都把两种写法记在一起，备注好兼容性，下次直接用。

JS 数组怎么去重最简单？

以前我用 filter + indexOf 的方式，后来发现 Set 更简洁：

javascript 复制代码

const arr = [1, 2, 2, 3, 3, 3, 4, 5, 5];
const unique = [...new Set(arr)];
// [1, 2, 3, 4, 5]

一行代码搞定，而且性能更好。Set 对 NaN 也能正确去重，这是 indexOf 方案做不到的。

CSS 如何实现毛玻璃效果？

这个效果现在很流行，做弹窗、导航栏都好用。核心是 backdrop-filter 属性：

css 复制代码

.glass {
  background: rgba(255, 255, 255, 0.2);  /* 半透明白色背景 */
  backdrop-filter: blur(10px);            /* 模糊背景 */
  -webkit-backdrop-filter: blur(10px);    /* Safari 兼容前缀 */
  border: 1px solid rgba(255, 255, 255, 0.3);
}

我踩过一个坑：忘记加背景色，结果模糊效果不明显。所以一定要记得 background 和 backdrop-filter 配合使用。

Git 如何撤销上一次 commit？

这个操作我至少用过几十次。有时候 commit 之后发现漏了文件，或者 commit 信息写错了。

撤销 commit 但保留修改：

bash 复制代码

git reset --soft HEAD~1

修改最近一次 commit 信息：

bash 复制代码

git commit --amend

我一开始不敢用 reset，怕把代码搞丢了。后来才知道 --soft 会保留工作区和暂存区的修改，非常安全。

为什么我要系统整理这些技巧

记着记着我发现，光靠笔记软件已经不够用了。

技巧越来越多，分类越来越乱。 CSS 的、JS 的、Git 的、Docker 的......全混在一起，找起来比不记还麻烦。

笔记质量参差不齐。 有些只有一行代码，没有注释；有些写了大段解释，但重点不突出。

搜索效率太低。 笔记软件的搜索功能有限，有时候明明记过，就是搜不到。

于是我想：为什么不做一个专门的网站来管理这些技巧？ 按分类整理，支持搜索，每个技巧都包含问题描述、代码示例和补充说明。这样不仅我自己好用，其他人也能受益。

墨渊书肆的「奇技淫巧」模块

这就是我做这个模块的初衷。现在它已经初具规模：

14 个分类 ：CSS、JavaScript、TypeScript、React、Vue、Node.js、Python、Go、Java、数据库、Docker、Git、Linux、工程化
每个技巧都包含：问题描述 + 代码示例 + 补充说明
支持搜索：输入关键词就能找到相关技巧
分类浏览：按技术栈筛选，系统性学习

我自己用得最多的就是搜索功能。遇到问题，打开网站搜一下，几秒就能找到答案，再也不用去 Stack Overflow 翻半天。

未来规划

这个模块我还在持续完善。接下来打算：

继续补充内容：现在已经有上百条技巧了，但还不够，我计划覆盖更多技术栈
优化搜索体验：让搜索结果更精准，支持标签过滤
AI补充内容：利用 AI 助手补充更多技巧，提高内容质量

结语

"奇技淫巧"不是什么高深的东西，就是日常开发中积累的那些"小妙招"。它们可能不会出现在面试中，但会在你遇到问题时帮你省下半小时的搜索时间。

如果你也有收集技巧的习惯，或者厌倦了在 Stack Overflow 上翻来翻去找答案，欢迎来 墨渊书肆 的「奇技淫巧」模块看看。

这是我给自己做的工具，现在分享给你。希望它能帮你提高效率，少加点班。