单元测试：从 Jest 到 Karma+Mocha+Chai
我所参与过的 Web 项目大部分都使用 React 框架。Jest 是我们曾经最主要使用的单元测试 (Unit Test) 框架。Jest 配置足够简单，功能也足够丰富。但是随着前端开发逐渐进入深水区，Jest 的短板开始逐渐显现。我在经过探索和尝试后，迁移到了 Karma+Mocha+Chai 的解决方案。在此分享这两种技术方案的区别和取舍，希望对遇到同样问题的同学有所帮助。
继续阅读 →前端必学&勿学清单（2022更新）
前端技术发展很快，有些技术如常青树，有些则已日渐式微。不断涌现的新技术，有的是真创新，有的是换汤不换药。本文希望帮助大家避免在没有学习价值的技术上浪费事件。
需要注意的是，仅凭个人经历去判断一项技术是不是不流行，是很片面的。很多人在整个职业生涯中都没有遇到过 Angular 项目，但这并不代表 Angular 没有人用。有人觉得 Vue 小众，是玩具，但是其生态仍然在蓬勃发展。本文尽量从技术架构和统计数据来分析，而非个人经验。
更新于 2022 年二月。
继续阅读 →编程英语基础
编程是一门语言艺术。要写出赏心悦目的代码，最重要的便是恰当的命名变量，函数，类和包等。每种编程语言都自己独特的语法和代码风格。比如 C 语言常用 snake_case 命名，而 Java 语言用 camelCase 命名。这篇文章将不去探讨具体语言的特有规范，而是去介绍通用的命名的英语语法，比如变量类型与词性的关系，词组和短语的顺序，省略的用法，近义词的辨析等。示例以 Java/TypeScript 为主。正确示例标记为✔️，错误示例标记为❌。
本文有待完善，欢迎读者意见。
继续阅读 →position: fix 没用？你大概是被 transform 坑了
在 CSS 里很多位置布局都是相对于容器的。但是 position: fixed; 比较直白，只相对于窗口，通常不会被干扰。但是我最近就遇到了这么个问题：
transform:scale(1);
position:fixed; right:10px; bottom:10px;
这不对呀，我明明写的是 position: fixed; 为啥没用呢？
于是我一个一个翻看父元素的 CSS 布局属性，发现一个 Modal 库有个奇怪的 transform: scale(1); 。这个属性没有任何视觉的效果，显然是动画执行之后留下的。然而在技术实现上，即使是 scale(1) 和 translateX(0) 这种没有任何效果的 transform ，也会重建一个坐标系，导致内部元素的 position:fixed 不再相对于窗口，而是相对于这个 transform 元素。
这是不是某个浏览器实现的缺陷呢？实际测试 Firefox 和 Chrome 都是一样的效果。这也许是一个 Web 标准中比较含糊的灰色区域。
解决方法比较简单粗暴，把 transform: scale(1) 改成 transform: unset 即可。在实践中，尽量避免对比较大的容器使用 transform，比如 Sidebar 和 Modal。如果要用的话，则要确保子元素不会用到 position: fixed，比如一些 Popup。
Web 内嵌字体格式
简而言之，WOFF2 是你唯一需要的字体格式。如果你需要支持 IE11，那么就加上 WOFF 作为备用字体格式。
@font-face {
font-family: 'Source Code Pro';
font-weight: 400;
font-style: normal;
src: local('Source Code Pro'),
url('source-code-pro-regular.woff2') format('woff2');
}比较 HTML 和 JavaScript Input 验证
如果你想验证表单输入是否有效，比如你想让输入框只接受整数，而不是小数或文字，在 HTML5 中你可以用以下代码轻松实现：
<input type="number" pattern="[0-9]*" />但是，用户仍然可以输入无效信息：
- 在 Firefox 里，你可以输入任何字符：比如“fsielfs”。
- 在 Chrome 里，你可以输入一些无效的数字：比如“1..2.2.2”。
构建基于 React 的 WebExtension 浏览器扩展
创建一个 React 应用，然后把它转化成一个 Firefox/Chrome 浏览器扩展。
继续阅读 →