暂时未有相关云产品技术能力~
公众号【写代码的海怪】
哈喽，大家好，我是海怪。 刚开始我在写项目的单测方案的时候，老板就让我能够写一些单测的规范。虽然表面上我非常自然地说：没问题，但是心里还是慌得不行：以前我自己写单测也没啥规范呀，直接开干就好了。 最近一直在看 Kent 的文章，刚好看到他写的这篇 《Common mistakes with React Testing Library》，里面列举了很多别人写单测时经常犯的一些错误 。正好可以作为单测规范的参考。所以，今天就把这篇文章也分享给大家~
哈喽，大家好，我是海怪。 刚开始我在写项目的单测方案的时候，老板就让我能够写一些单测的规范。虽然表面上我非常自然地说：没问题，但是心里还是慌得不行：以前我自己写单测也没啥规范呀，直接开干就好了。 最近一直在看 Kent 的文章，刚好看到他写的这篇 《Common mistakes with React Testing Library》，里面列举了很多别人写单测时经常犯的一些错误 。正好可以作为单测规范的参考。所以，今天就把这篇文章也分享给大家~
大家好，我是海怪。最近换到了新部门，在做智能平台相关的内容。我接到的第一个任务就是把以前前端的项目重构一次。 说是重构，不如说是重写一遍。因为原来的项目是 ant-design-vue + vue 全家桶，要切换成 ant-design + ant-design-pro + react 全家桶。 更让人头疼的是，产品经理并不会让我们有大把大把时间专门搞重构，我们要边重构边做需求。在这样的挑战下，我想到了微前端解决方案，下面就跟大家分享这次 微前端在重构上的落地实践吧。
大家好，我是海怪。最近换到了新部门，在做智能平台相关的内容。我接到的第一个任务就是把以前前端的项目重构一次。 说是重构，不如说是重写一遍。因为原来的项目是 ant-design-vue + vue 全家桶，要切换成 ant-design + ant-design-pro + react 全家桶。 更让人头疼的是，产品经理并不会让我们有大把大把时间专门搞重构，我们要边重构边做需求。在这样的挑战下，我想到了微前端解决方案，下面就跟大家分享这次 微前端在重构上的落地实践吧。
说起微前端框架，很多人第一反应就是 single-spa。但是再问深入一点：它是干嘛的，它有什么用，可能就回答不出来了。 一方面没多少人研究和使用微前端。可能还没来得及用微前端扩展项目，公司就已经倒闭了。 另一方面是中文博客对微前端的研究少之又少，很多文章只是简单翻译一下官方文档，读几个API，放个官方的 Demo 就完事了。很少有深入研究到底 single-spa 是怎么一回事的。这篇文章将不会聊怎么搭建一个 Demo，而是会从 “Why” 和 “How” 的角度来聊一下官方文档的都讲了哪些内容，相信看完这篇文章就能看懂 官方的 Demo 了。
说起微前端框架，很多人第一反应就是 single-spa。但是再问深入一点：它是干嘛的，它有什么用，可能就回答不出来了。 一方面没多少人研究和使用微前端。可能还没来得及用微前端扩展项目，公司就已经倒闭了。 另一方面是中文博客对微前端的研究少之又少，很多文章只是简单翻译一下官方文档，读几个API，放个官方的 Demo 就完事了。很少有深入研究到底 single-spa 是怎么一回事的。这篇文章将不会聊怎么搭建一个 Demo，而是会从 “Why” 和 “How” 的角度来聊一下官方文档的都讲了哪些内容，相信看完这篇文章就能看懂 官方的 Demo 了。
第一眼看 Array.reduce 这个函数总感觉怪怪的，用法也得花几分种才弄懂，懂了之后也不知道应用场景是啥。最近写项目的时候才慢慢对这个函数有更多的理解，可以算是 Array 类型下最强大的函数之一了。
第一眼看 Array.reduce 这个函数总感觉怪怪的，用法也得花几分种才弄懂，懂了之后也不知道应用场景是啥。最近写项目的时候才慢慢对这个函数有更多的理解，可以算是 Array 类型下最强大的函数之一了。
Redux 应该是很多前端新手的噩梦。还记得我刚接触 Redux 的时候也是刚从 Vue 转过来的时候，觉得Redux 概念非常多，想写一个 Hello World 都难。文档也是很难看懂，并不是看不懂英文，而是看的时候总会想：TMD在说泥🐴呢。看得出文档想手把手把新手教好，结果却是适得而反，啰嗦的排版和系统性地阐述让新手越来越蒙逼。文档还有一步令人窒息的操作：把 redux、react-redux、redux-toolkit 三个库放在一起来讲。靠，你的标题叫 redux 文档啊，就讲 Redux 不就行了嘛？搞得新手总会觉得 Redux 就是像 Vuex 一样为 React 量身订做的。
Redux 应该是很多前端新手的噩梦。还记得我刚接触 Redux 的时候也是刚从 Vue 转过来的时候，觉得Redux 概念非常多，想写一个 Hello World 都难。文档也是很难看懂，并不是看不懂英文，而是看的时候总会想：TMD在说泥🐴呢。看得出文档想手把手把新手教好，结果却是适得而反，啰嗦的排版和系统性地阐述让新手越来越蒙逼。文档还有一步令人窒息的操作：把 redux、react-redux、redux-toolkit 三个库放在一起来讲。靠，你的标题叫 redux 文档啊，就讲 Redux 不就行了嘛？搞得新手总会觉得 Redux 就是像 Vuex 一样为 React 量身订做的。
文章里主要讲了 3 种使用 TDD 的场景：修 Bug 时，写纯函数时，以及设计 UI 时。我感觉在写纯函数（数据转换），以及写接口时（Node 端开发）时用的比较多，修 Bug 嘛，实际情况都是业务 Bug，要用测试复现是比较麻烦的。设计 UI 前写测试也是比较麻烦的。总之，大家应该都会有自己使用 TDD 的场景，找到适合自己的就好。需要注意的是，千万别提前做优化，特别是你还不确定你的项目要发展到什么程度时。
哈喽，大家好，我是海怪。 最近有不少朋友找到我聊了聊测试相关的内容，发现他们对测试的分类有些迷茫。实际上测试一共就 3 种：E2E，集成，单测，其它的功能测试、UI 测试、界面测试只是它们中里面的一种。 Kent C. Dodds 在这篇文章 《Static vs Unit vs Integration vs E2E Testing for Frontend Apps》 也聊到了这 3 种测试的对比和区别，除此之外，还聊到它们各自的适用场景，应该对还在迷茫中的同学有所帮助。所以今天把这篇文章分享给大家~
哈喽，大家好，我是海怪。 最近把项目里的 utils 以及 components 里的东西都测完了，算是完成了这次单测引入的第一个里程碑了。之后，我又把目光放到了 hooks 的文件夹上面，因为这些自定义 Hooks 一般都当工具包来使用，所以给它们上一上单测还是很有必要的。 正好我在 Kent C. Dodds 的博客里也发现了这篇 《How to test custom React hooks》，里面正好提到了如何高效地对自定义 Hooks 进行测试。今天就把这篇文章也分享给大家吧。
哈喽，大家好，我是海怪。 不知道大家在写前端单测的时候，是否有出现测试代码和测试数据重复冗余的情况？然后不得不写一些函数和类来封装他们的。然而，慢慢地会发现：过度的封装会致使你的测试用例变得越来越难读。 那到底在写测试代码时，怎样的封装才是好的封装呢？今天就把 Kent 的这篇 《AHA Testing》 分享给大家~
哈喽，大家好，我是海怪。 相信很多前端开发在写单测的时候，最大的问题就是：“我应该测什么东西？” 没错，解决问题不是最难的，发现问题才是！知道要测哪个远比怎么测重要很多！ 今天看了 Kent 博客的 《How to know what to test》 的这篇博客，感觉醍醐灌顶，今天就把这篇博文也分享给大家。
哈喽，大家好，我是海怪。 相信不少同学在写单测的时候，最大的困扰不是如何写测试代码，而是：“应该测什么？”，“要测多深入”，“哪些不该测”。 最近在给 React 组件写单测的时候，发现了 Kent （React Testing Library 的贡献者之一）的 《Testing Implementation Details》 这篇文章，里面对 “为什么不要测代码实现细节？” 这个问题写得非常好，今天就把这篇文章也分享给大家。
哈喽，大家好，我是海怪。 最近不是写了一篇关于京东微前端框架的文章嘛 《初探 MicroApp，一个极致简洁的微前端框架》，里面提到了一个叫 Web Components 的东西。虽然对它早有耳闻，但是一直也没怎么仔细看过，所以就深入了解了一下，今天给大家做个简单分享 :)
哈喽大家好，我是海怪。
哈喽大家好，我是海怪。 不知道大家有没有经常遇到这样一种情况：每次新建项目项目做代码风格的配置时总是随便找一篇文章，也不管啥意思，把 .eslintrc.js 的配置一抄，再把对应的 NPM 包装上就算完事了。 诶？不想承认？那考考你：eslint, prettier, eslint-config-prettier, eslint-plugin-prettier, prettier-eslint 这些都是个啥关系？它们的职责是什么？ 再考考你：如果想用 ESLint 和 TypeScript 结合，要用到哪些包呢？
大家好，我是海怪。了解过微前端的同学应该对 single-spa 这个框架都不陌生，但是我翻看了中文整个社区，发现太少文章是讲 single-spa Demo 实践的。 还有一些文章讲了，但是都是以晒代码为主，只讲是什么，不讲为什么。这对读者来说并不是一个很好的体验。那今天就跟大家深入分析一下 single-spa 的 React 版 Demo 吧。让读者知其然，也能知其所然。
大家好，我是海怪。 最近发现接手的项目里一直有用 react-hot-loader 这个库，然后我就想：Webpack 不是已经有了一个 HMR(Hot Module Replacement) 的玩意了么？还要这个 loader 干啥的？ 然后搜到了这篇文章：Blogged Answers: Webpack HMR vs React-Hot-Loader 这是一篇关于 HMR 和 react-hot-loader 的对比总结，里面讲得还比较清楚，下面给大家分享一下。
我最近又想到了一些 idea，把侧边栏 JS-SDK 里的 API 的 TS 类型（入参、返回）都写了一遍，然后使用简单几个 API 来封装和调用原来的 wx.fn 以及 wx.invoke('xxx')。 整个封装的最终效果就是今天要说的 wecom-sidebar-jssdk，此 SDK 是专门针对企业微信侧边栏的 JS-SDK 进行封装的。
同样地，为了不浪费大家的时候，如果你不知道 企微侧边栏 是什么，这篇文章可以关掉了。 如果你对 微前端 有强烈的兴趣，也可以尝试了解一下我是怎么在这个应用场景下实践微前端的，希望这篇文章可以对你有所启发。
前言 大家好，我是海怪。最近没研究太多的技术，打算这段时间都来分享一些偏向感想和经验的内容，希望能对大家有所启发。 前一段时间内推了一些简历，也听我同事分享了很多面试的一些故事，再回想自己面试时候的样子，还是有很多话想聊的，所以这期先来分享一些关于面试的心得。
跨域是个老生常谈的话题了，最近不管在和后端联调，或者搞微前端的时候都会遇到，正好写篇文章来总结一下吧。
前言 如果你不知道 企业微信侧边栏 是什么，那就可以划走这篇文章了。如果你知道这是个啥，那你一定非常苦恼要怎么开始。 从去年就开始就一直有在做企业微信侧边栏的应用。说实话，开发和调试体验实在是太糟糕了，而且上手的时候跟本连怎么打开它都不知道。
Next.js 已经出来很久了，但是一直没机会看这个框架。 以前一直在用 create-react-app 来创建 React 项目，奈何 CRA 实在太难用了，今天花了点时间扫了一下 Next.js 的官网，发现用起来还挺简单的。
上次写了一篇给 Gihub Pages 添加自定义域名的文章，之后感觉写得还是偏实践多一点，只做到了受人以鱼。 为了让大家在别的场景下也能搞定自定义域名，比如腾讯云网页部署、Heroku 自定义域名、自定义 CDN 域名。，今天就来写篇更通用的文章来总结一下自定义域名那些事。
最近爱了上 Nest.js 这个框架，边学边做了一个 nest-todo 这个项目。没错，就是一个 UI 很丑陋的 Todo List App。不知道为啥，慢慢开始喜欢上这种原始风味的 UI 样式了，不写 CSS 也挺好看的。虽然皮肤很丑，但是项目里面包含了大量 Nest.js 文档里的知识点（除了 GraphQL 和微服务，这部分平常用得不多就不瞎整了），能实现的点我基本都想个需求实现了
如果你和我一样经常和管理页面打交道，那么 Excel导入数据 和 数据导出Excel 这两个需求一定是逃不掉的。 相信大多数人也知道 xlsx 这个 npm 库，但是文档内容实在是太多，太冗余了。很多人的需求就是一个简单的导入导出，但文档愣是把整个 xlsx 系统给解释了一遍，看了半天也没找到 Demo， 找到 Demo 也跑不太起来。 网上的博客要不扔个 xlsx.utils.sheet_to_json 就完了，要不写很多很长的代码（很多循环那种），唉。就让这篇文章终结这个需求吧！
相信很多人都很头疼 Docker 的部署，我自己也是。 最近发现一个很有意思的现象：一个人想学某样技术的时候，当学会了之后，但是这时出现了一个问题需要学习另一门技术时，无论这个人前面学得多么刻苦，用功，到这一步有 99% 的概率都会放弃。我愿称这种现象为 “学习窗口”。 写一个网站、学会 Vue.js 是很多人的“学习窗口”，只要离开了这个“学习窗口”，他们就不想学了：我都学这么多了，草，怎么最后还要学部署啊。 所以，这篇文章就跟大家分享一下关于 Docker 部署的那些事。
相信不少人最听说过 Github 部署网站，但是我翻找了很多文章基本以实操为主，在 Setting 点一下就没了。 虽然 Github 部署已经很简单了，但是里面还是有不少细节的，这篇文章除了手把手教大家部署一个网站，还会聊一些关于部署的细节。
唉，时间过得真快，算下来已经过去快3年了。当时只是想发在 v2ex 上骗骗赞，今天正好看到这个话题就来分享一下做这个组件库的心得吧，希望可以给你一点灵感~
最近看到一个 Up 主 Ele实验室 发布的一个视频：字符化视频是怎么做出来的，感觉很有意思。不如自己也实现一个来玩玩？ 以前也没怎么写过 Python，只用来刷过 LeetCode。正好借这个机会再学一学 Python 吧。
最近发现身边的同事和朋友使用 VsCode 比较多。我自己也去知乎的 为什么 Webstorm 这么好用还会有人去用 Vscode 调研了一下。发现大家不喜欢 WebStorm 有几个原因： • 收钱 • 功能多、杂 • 笨重 我自己在使用 WebStorm 的时候也遇到过这些问题，之后都有了一些解决方法了，今天就给大家分享一下吧。
在上一篇文章【微前端】single-spa 到底是个什么鬼 聊到了 single-spa 这个框架仅仅实现了子应用的生命周期的调度以及 url 变化的监听。微前端的一个特点都没有实现，严格来说算不上微前端框架。 今天就来聊一个真正的微前端框架：qiankun。同样地，本文不会教大家怎么实现一个 Demo，因为官方的 Github 已经有一个很好的 Demo 了，如果你觉得官网的 Demo 太复杂了，也可以看我自己实现的小 Demo。
debounce 和 throttle 是面试时经常会被问到的一道 JS 题。我自己在第一次找工作的时候，就被问过。当时被问得半天说不出两者的区别，说着说着就把自己带入坑了。 今天就跟大家分享一下这两者的区别吧。
最近在 algoexpert.io/ 上看到一个非常好玩的东西。刚开始的时候，我还要以为要用到什么 JS 库来实现的，打开控制台研究了一下，原来用 CSS 就可以实现了，好吧，算我孤陋寡闻了，哈哈。于是，写篇博客记录一下吧。
今天刚刚学习了一个微前端框架——乾坤，正着热乎劲，写一篇入门博客。这篇文章不会讨论太多的原理和实现，只是一个入门写 Hello World 的教程。 文章的很多地方都参考官网，但是官网的教程太简洁了，个人觉得还是做不到无脑上手，希望这篇文章可以帮到正在入门微前端的伙伴。 想直接看代码的，我写了个比官网更简单的例子，点击即可学会。
个人也有很讨厌找学习资源的时候，老手总是给一些“大而全”但对新人极度不友好的答案，我知道发图的人可能真的想为了新人好，但是这种图除了增加焦虑，没有大多作用。 但是前端发明了那么多的“名词”，不去了解又会一头雾水。这篇文章继续给大家盘一盘前端开发那些“名词”的由来。
个人也有很讨厌找学习资源的时候，老手总是给一些“大而全”但对新人极度不友好的答案，我知道发图的人可能真的想为了新人好，但是这种图除了增加焦虑，没有大多作用。 但是前端发明了那么多的“名词”，不去了解又会一头雾水。这篇文章就给大家盘一盘前端开发那些“名词”的由来。
supertest 是一个短小精悍的接口测试工具，比如一个登录接口的测试用例如下：整个用例感观上非常简洁易懂。这个库挺小的，设计也不错，还是 TJ Holowaychuk 写的！今天就带大家一起实现一个 supertest 的轮子吧，做一个测试框架！
很多分析 redux-thunk 源码的文章一般会说：如果 action 是函数的话就传入 dispatch，在 action 函数里面使用 dispatch，如果action 不是函数的话就正常 dispatch(action)。不过，我觉得这是从结果出发找造这个轮子的原因，并不能从需求层面解释这个中间件到底解决了什么问题。 本文希望从解决问题的角度来推导 redux-thunk 诞生的原因。
需求很简单，在输入框里添加按钮就好了。这种功能一般用于邮件群发，这里的按钮“姓名”其实就是一个变量，后端应该要自动填充真实用户的姓名，然后再把邮件发给用户的。这个需求第一感觉像是 textarea 里加入一个 button，但是想想又不对：textarea 里加不了 button。那用 div 包裹呢？也不对：div 不能输入啊，唉，谁说不能输入的？contentEditable 属性就是可以让用户手动输入的。 下面就带大家手写一个 react-contenteditable 的轮子吧。
无限滚动是一个开发时经常遇到的问题，比如 ant-design 的 List 组件里就推荐使用 react-infinite-scroller 配合 List 组件一起使用。假如我们想自己实现无限滚动，难免要去查 scroll 事件，还要搞清 offsetHeight, scrollHeight, pageX 这些奇奇怪怪变量之间的关系，真让人脑袋大。今天就带大家造一个 reac-infinite-scroller 的轮子吧。
如果玩过知乎都会被那些大 V 洗脑说 Vim 好用，Vim 牛逼，也是因为这个原因才开始用 Vim 的，也想着总有一天会变成 Vim 高级玩家。 那这篇文章会教你怎么用 Vim 么？会，但是我不想像官方手册去说，只想提供一个学习 Vim 的学习方法和基本的指令。我更希望这篇文章做到的是 “授人以渔”。我不想写这种像 Vim 官方手册那种文章，因为复制粘贴所有指令过来，你也不会记多少的，更不会记住。
用 JS 来复制文本在网页应用里十分常见，比如 github 里复制 remote 地址的功能：今天就来带大家一起写一个 JS 复制文本的轮子吧~
轮询，一个前端非常常见的操作，然而对于很多人来说第一反应竟然还是用 setInterval 来实现， setInterval 作为轮询是不稳定的。下面就带大家一起写一个 promise-poller 的轮子吧。
Cookie 相信大家都不陌生，但是很多时候我们都是这样：“啊，我这个地方要用 Cookie 了，怎么办？没事，装一个 npm 包嘛”，或者去 MDN 去抄一两个函数。没什么机会手写一个 js-cookie 的库，今天就带大家一起来写一个 js-cookie 的小库。
上一篇文章主要介绍了 redux 文档里所用到的基本优化方案，但是很多都是手工实现的，不够自动化。这篇文章主要讲的是怎么用 redux-toolkit 组织 redux 代码。
发表了文章
2022-05-11
发表了文章
2022-05-11
发表了文章
2022-05-11
发表了文章
2022-05-11
发表了文章
2022-05-11
发表了文章
2022-05-11
发表了文章
2022-05-11
发表了文章
2022-05-11
发表了文章
2022-05-11
发表了文章
2022-05-11
发表了文章
2022-05-10
发表了文章
2022-05-10
发表了文章
2022-05-10
发表了文章
2022-05-10
发表了文章
2022-05-10
发表了文章
2022-05-10
发表了文章
2022-05-10
发表了文章
2022-05-10
发表了文章
2022-05-10
发表了文章
2022-05-10
