「设计模式」是一个老生常谈的话题，但更多是集中在面向对象语言领域，如 C++，Java 等。前端领域对于设计模式的探讨热度并不是很高，很多人觉得对于 JavaScript 这种典型的面向过程的语言来说，设计模式的价值很难体现。之前我持有类似的观点，对于设计模式的理解仅停留在概念层面，没有深入去了解其在前端工程中的实践...

都说秋招是金七银八，八月份发招聘帖的我们是几个意思，其实也没啥意思，单纯就是老板把这事给忘了 orz…… 突然想起自己还有不少 hc，于是决定为难本胖虎来社区捞些小鲜肉。

引言：对技术开发同学来说，我们经常会面对一些在组织中典型的成长性问题，例如：技术思考力是什么？技术到达一定段位，下阶段的成长是什么？如何避免内卷？在组织中如何提升自身影响力？解决这些成长性问题，最重要的是改变自己的思维模式，将专注于效率的模式，切换到专注于有效性的模式中来。

日常工作中，经常会遇到很多敏感的数据，为防止数据的泄露，我们要在数据上做一些”包装“。目的就是让那些有心泄露数据的”不法分子“迫于严重的”舆论压力“而放弃不法行为，使之”犯罪未遂“，达到不战而屈人之兵的效果。而在安全部门工作的我们，数据安全的观念早已深入骨髓，每个文字，每张图片，都要留心是否有泄露的风险...

内容简介（方便想要快速了解文章内容结论的同学）先上结论，Node.js 将依赖分为 dependency 与 devDependency 两部分，但是却公用同一个 node_modules 文件夹的方式，在当下越来越复杂的前端项目开发过程中，已经不适用了。工具依赖与业务依赖共用同一个 node_modules 文件夹，会使得开发与构建过程变得低效与脆弱，包括...

Deck.GL 是 Uber 开源的地理数据渲染框架，在使用 Deck.GL 绘制热力图的时候，发现不断放大地图时，地图层明显地抖动，且热力的聚合结果也有问题。下面的 demo 展示了这个现象，黄色图层是热力图图层，黑点代表原始数据，显然不断放大地图时，热力图的点并没有和原始数据点对应，且在不断抖动。

不知从什么时候开始，前端白屏问题成为一个非常普遍的话题，'白屏' 甚至成为了前端 bug 的代名词：_喂，你的页面白了。_而且，'白' 这一现象似乎对于用户体感上来说更加强，回忆起 windows 系统的崩溃 '蓝屏'：  可以说是非常相似了，甚至能明白了白屏这个词汇是如何统一出来的。那么，体感如此强烈的现象势必会给用户带...

“都 1202 年了怎么还有人在用 Redux”——这大概不少人看到这篇文章的第一反应。首先先表明一下，这篇文章并不讨论是不是应该使用 Redux，这是一个比较大的话题，应该单独水一篇。而且社区已经存在许许多多的讨论了，你总能从几篇高赞的文章中找到一些优缺点的对比图，然后结合你项目的场景最终作出决定。我们来随便举几个...

大家可能不知道，鄙人之前人送外号“过度设计”。作为一个自信的研发人员，我总是希望我开发的系统可以解决之后所有的问题，用一套抽象可以覆盖之后所有的扩展场景。当然最终往往能够证明我的愚昧与思虑不足。先知曾说过“当一个东西什么都可以做时，他往往什么都做不了”。过度的抽象，过度的开放性，往往让接触他的人无所...

代码重构有两大难点，一个是「考古」，也就是如何快速梳理出代码的原有逻辑，还有一点就是「发布」，如何让新的代码可以稳定的发布到线上，而不产生故障。下面我们就聊聊我一个朋友的故事，看看他是怎么把代码稳定搞上线的。为了表达更为亲切，你现在就是我那个朋友。

本文并不会从头开始介绍 Web Worker 的基础知识和基本 API 的使用等（只是部分有涉及），若还未了解过 Web Worker，可参考查阅 W3C 标准 Workers 文档 中的相关介绍。

前些日子在做线上验品抽检需求，在开发发起检测任务页面时遇到一个字段校验的诉求，具体要求：“用户可以填入多组 ID，每组 ID 可以由商品 ID 和 SKU ID 共同构成，也可以只由其中一种 ID 构成，两种 ID 之间通过冒号分隔；每组 ID 之间又需要通过英文逗号分隔”。这不就是一个表单字段格式校验场景吗？因此很自然的想到使...

作为开发人员，大家对“提升用户体验”一词并不陌生，甚至有时候自己都会说：“这个操蛋的系统用户体验贼差，就不能好好提升一下用户体验吗？”，但是怎么才算真的提升了用户体验呢？

Bundle or Bundleless？自 2015 年 ESM 标准发布后，路线之争就开始逐步升温。转眼间，时间已来到 2021 年。如果白酒的车你错过了，那么不妨看看 Bundleless，或许它就是前端圈的下一位「茅台」。

单元可视化是常见的一类可视化形式，它的特点是将数据集中每一个数据项使用一个单独的视觉元素进行可视化映射。对于特定的数据集和可视化任务而言，单元可视化能够提供更多的信息，更符合用户的心理模型，与传统的聚合可视化相比，支持新颖的交互。但是现有可视化语法并不能全面的描述单元可视化，本文针对单元可视化，...

可视化是一种利用计算机图形学和图像处理技术，将数据转换成图形或图像在屏幕上显示出来，再进行交互处理的理论、方法和技术。数据在经过图可视化的方式展示后能够辅助用户去分析复杂的关系数据，从而发现数据中蕴含的价值。而图布局则是图可视化中非常重要的基石，对可视化图进行合理的布局可以帮助我们快速分析，准确...

毫无疑问，现在是短视频、直播的时代。视频内容逐渐代替图文形式成为网友们获取新鲜事物以及展现自我的一大媒介。随着5G的到来，2020年属于直播短视频爆发式增长的一年，电商平台也都涌入直播营销的大风口，成为了各自平台引流转化的关键。不管是用户还是开发者，我们处于这个风口中。本文将带你探索浏览器视频播放的奥秘。

在过去，与大多数工程师一样，我认为前端代码的设计水平大多与工程师的能力有直接关系。但随着接手了几个多人协作的大型前端项目，我开始意识到，这种认知对短生命周期的小型项目可能适用，但对真正的大型项目，仅靠提升工程师质量有时并不能直接提升代码的质量。

Chrome 浏览器的 Performance 面板为我们提供了检测页面性能的能力，但其提供的远不止一些性能数据。本文将从工作原理的视角，结合实际工程的录制结果，探一探性能面板向我们透露的其他信息。

在使用 React 开发的这段时间里，我最大的感受就是 “这是 React 最好的时代，也是最坏的时代” ！「好」在于 hooks 开启了不一样的开发模式，在思考方式上要求更关注于数据之间的依赖关系，同时书写方式更加简便，总体上提升了开发效率；「坏」在于项目中经常是类组件与函数组件共存，而类组件以类编程思想为主导，开发过...

21 世纪是变化的世纪，在新的千年之始，科技日新月异得改变着我们的生活。前端作为近年很火的岗位，一直被大家吐槽技术更新速度太快了，新概念层出不穷。然而面对这变化的时代，可能我们的变化还可以更多更快。在前端工作过几年之后的同学，往往会开始产生对未来的焦虑，整天学习新的框架、新的语法，但生产力提升却赶不...

不管你是做技术、BI 或是科研，都或多或少接触过“数据可视化”，或者在狭义范围来说便是各类图表。如果总结归纳一下，各种图表库按照表达性和速度的差异主要分为三类：

爱码客3.0 开始开发到现在已经过去快整整一年了，虽然我投入其中的时间只有短短4个月，但是在最初后端几乎只有我一个人投入的情况下，可以说也是研究了一些东西，蹚了二三次浑水，来来回回改过五六次结构，心里七上八下的时间也不少，当然最后折腾出来的东西肯定到不了九十分。但，这些都不重要了，事了拂衣去，深藏功（...

重构过程中，肯定会遇到新的代码如何做技术选型的问题，要考虑到这套技术的生命力，也就是他是否是更新的技术，还有他的灵活和拓展性，期望能够达到在未来至少 3 年内不需要做大的技术栈升级。我的这次重构经历是把 jQuery 的代码变为 React ，你品品，算是最难，劳动最密集的重构任务了吧。看多了之前代码动辄上千行的 ...

Reactive 就是响应式，在现在已经算是个老概念了。为什么说 more reactive 呢，其实本文最终的主旨还是要给还没有开始接触 Hooks 或者对于 Hooks 不是那么感冒的同学安利一下。Hooks 不光是一组 API，他背后承载的是 React 团队想要宣导的一套编程理念。这其中的一部分，就是我们今天的主角——响应式。我们今天就来看看，...

大家好，我们是「阿里巴巴-新零售技术事业群-CRO技术部-体验技术团队」。如果您关注一些社区，或许还见识过我们的江湖名号：ES2049。没错，我们是一支正经的前端中台团队。

useState vs useReducer 关于 finally 的一些特殊场景 TSLint in 2019 Screenshot To Code 优化 React App 性能的 5 个建议 禁用大体积依赖的 import 理解 TS 类型注解 Back/forward cache for Chrome ES 新提案：Promise.any(promises) 为什么这个函数不能 new 函数组件和类组件的根本差异 Preact X Alpha 0 released C...

我们在微信朋友圈里经常看到很多人分享 H5 的链接，有的科技感十足，有的展示炫目，有的非常有创意，各大公司也把H5作为他们品牌传播，活动预热的很好方式。企业商户对于这种方式也很有好感，从而导致了 H5 制作行业涌进大批从业者。这几年做过几十个 H5 ，每一次都在思考动画与技术的关系，于是记录下来。

在之前的文章中我讲述了 WebAssembly 是如何允许我们将 C/C++ 生态中的库应用于 web 应用中的。一个典型的使用了 C/C++ 扩展包的 web 应用就是 squoosh，这个应用使用了一系列从 C++ 语言编译成 WebAssembly 的代码来压缩图片。

乍一听，这个海外项目需求并没有什么特别的地方，似乎就多了一个国际化适配。但细细一想，事情可没这么简单，前端开发面临了很多新的问题。下面梳理一下国际化开发中通常会面临的挑战：