暂时未有相关云产品技术能力~
公众号【写代码的海怪】
哈喽,大家好,我是海怪。 刚开始我在写项目的单测方案的时候,老板就让我能够写一些单测的规范。虽然表面上我非常自然地说:没问题,但是心里还是慌得不行:以前我自己写单测也没啥规范呀,直接开干就好了。 最近一直在看 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 代码。