CodeReviewGPT系列（二）：魔法打败魔法，说说 prompt 优化
到了 CodeReviewGPT 的第二期分享了（自己鼓掌👏） 一个好消息和一个坏消息： 坏消息是，这一期技术成分很低，玄学指数很高。 好消息是，玄学看起来更有趣些，只是很难解释。 先说说背景 与其说是背景，更像是解释一下这篇文章诞生的原因。 在第一期: CodeReviewGPT 工作流程的分享中，有说到
阅读文章Handler Journal
文章与思考
关于前端工程、人工智能与持续构建的个人记录。
近期专题
03
CodeReviewGPT系列（一）：工作流程
旨在以简单的描述来解释 CodeReviewGPT 的工作流程（因为没啥难的东西）。 让 GPT-3.5 进行 CR需要几步？ 答案是3步，打开冰箱门 → 放进冰箱 → 关上冰箱门 （不是） DiffCode 的准备工作 当然如果真的这么简单，也就没有这篇文章了。 diff code在丢给 GPT 前有很多准备工作要做
阅读文章
让 GPT Code Review
尝试让 GPT 进行 code review。 实现全过程 介绍如何实现用 GPT 做 code review 的全过程。 基础原理 让 GPT 帮我们 code review 的原理就像把大象装进冰箱一样简单： 把代码丢给 GPT 告诉它帮忙 code review 然后接收到 code review
阅读文章全部文章
35n8n真的很好用
尝试用n8n搭建自动化流程，这个低代码交互是我见过的特别好用的一款了。 What is n8n？ n8n 是一个免费的和开源的工作流自动化工具，你可以用它来连接各种应用和服务。其名字是 "node to node" 的缩写，这反映了其设计理念，即帮助用户在各种节点（也就是应用和服务）之间创建工作流。 n8n 允许你通过
Langchain
最近在搞 AI 与业务结合的相关内容， 了解了一些 关于 langchain 的知识，前来分享。 你知道什么是LangChain吗？ 🦜️🔗 让我们一起来聊聊LangChain，这是一个框架，它设计用来简化使用大型语言模型(LLMs)创建应用程序。听起来有点难以理解？没关系，慢慢解释！ LangChain的问题
LLM浪潮下的杂谈
去年年末(2022/12)的时候几条新闻报道了一些关于 chatGPT的内容，说来惭愧，当时都没有真的点进去好好了解一下。 之后的两个月里我的信息茧房暂时趋于平静，没有很多chatGPT的消息，但是今年的2月，这个话题的引爆让我意识到，事情并不简单。 这不是一片技术博客，纯属个人想法。 值得注意的是，这篇除部
Rollup is kind of different.
最近的工作用到了rollup， 正好在这里记录学习一下。 什么是Rollup 先按照惯例给出官方的定义 Rollup is a module bundler for JavaScript which compiles small pieces of code into something larger and mo
MobX - 初识响应式编程
也许今天学习 MobX 对我来说有点晚了。 但今天还是要看一看什么是 MobX 什么是响应式编程。 什么是MobX？ Simple, scalable state management. 简单，可扩展的状态管理 官方定义非常简洁，甚至没有任何关于响应式的描述。只是突出了一句状态管理 (state manag
类型定义转换组件props描述文档
维护组件库的过程总是充满惊喜的。 但有时候随着频繁的操作一些流程内的东西，会发现很多低效的事情。 今天想说一下的，就是在开发组件的同时，必不可少的一步 编写组件说明文档。 而编写文档中，特别特别特别繁琐的一件事就是 编写 props 说明表格。 什么是 props 说明表格？ 这里就拿 ant-design 里
记录命令式唤起Drawer/Modal与redux联合使用的冲突
前些日子开发了一个 Drawer 组件的命令式使用方式，然后业务侧使用却发现了一个奇怪的问题。 起因 sugar 的 Drawer 组件一直是这么使用的： 这么写本身没啥问题，但是随着业务的复杂性越来越高，可能某一个页面会用到 2-3 个甚至更多个 Drawer。 如果每一个 Drawer 都需要去维护一个 state
NewTable树形数据渲染
经典再现，这次，是 NewTable 的又一 milestone，支持树形结构的数据渲染。 数据处理 读过前两篇的你应该有记着，NewTable 的渲染逻辑是服务于虚拟渲染的。 所以无论是普通模式的 NewTable 还是分组模式，再到现在的树形数据模式，都希望沿用已有的虚拟化计算方式，能减少很多的工作量。 而决定
组件库按需加载
什么是按需加载？ 对于 Sugar 这样体量较大的组件库，如果仅仅是使用一个 Button 组件就要把整个 sugar 引入进来，未免太过了。 所以想要的理想效果就是，使用了 Button 就仅仅将 Button 相关代码引入即可。 但是这样写，每一个引入的组件都要详细的给出具体的引入路径，感觉很麻烦。 希望是引入时还
TS思考 - 类遗产
类遗产 不是什么高级的词汇，所有 TS 类相关的都在这里了～ implement implement 可以用来检测一个类是否符合一个具体的 interface 的定义。 可以看到 Ball 这个类因为没有实现 ping 方法而被发现然后揭发。 那么 type 定义的类型可以被 implement 吗
TS思考 - 函数重载
TS思考系列又与大家准时见面了～(其实是我没有别的系列可以写) 今天来看一看我一直搞不懂的，函数重载。 什么时候要用到函数重载呢？ 其实我在看官网例子的时候，一头雾水 先看看这个例子，我就想实现一个函数，他能做到这样的效果 输入数字，返回具体某个信息 输入字符串，返回一个数组 先做准备工作 这个时候肯定
TS思考 - 索引签名与映射类型
久违的TS思考系列又来了。 今天带来的是索引签名(Index Signatures)。 什么是索引签名？ 一说起索引签名(Index Signatures)可能觉得自己没听说过。 但是我写一段 TS 代码，大概率见过。 对，这个就是索引签名。我们先来引入一下官方的概念。wait, 官方没有具体概念？只给出了
Formily取经2.0
继Formily 取经之后。 今天的 2.0 取经还会再来一些比较特别的 Formily 使用场景。随后，内容会偏向用过一段时间的 Formily 后的一些感受。 废话不多说我们下面开始！ 先来继续说几个相对复杂的场景 接下来主要列举几个我在写一些复合表单组件的经历中遇到的场景。 因为最近在开发银行卡组件。 我们可以想
Formily取经
最近的工作涉及到了很多表单，也在不知不觉中意识到了自己对表单的一无所知。 今天，就来聊聊Formily。 Fomily 为什么诞生 Formily 只是众多表单处理方式里的一种。 我们必须要先说说表单本身。 先说说表单本身 最初我对表单的理解可能是这个样子的 但是实际的 Form 表单场景却是 这样的 这样的 等等
React 的 Refs
写 React 难免会看到这个词。 每次用都有一种迷迷糊糊的感觉，好像并不是真的了解ref的用法。 今天，就来让自己进一步了解一下ref。 ref到底是什么 先来翻出React官方文档的定义，逐字看一下(本人糙翻，有错请指出)。 Refs provide a way to access DOM nodes or
Proxy
说实话这对我来说是一个基本没啥印象的ES6特性。 平时开发中基本用不到，工作中也很少看到有人使用Proxy。 而最近随着面试的增多，在问道Vue双向数据绑定时，总是会听到Proxy，所以今天来学一下～ Proxy是什么？ 先来放上MDN官方的解释： The Proxy object enables
TS思考 - 逆变与协变
TypeScript思考篇又来了 之前听到同事分享逆变与协变，自己很感兴趣但一直没有去研究，今天就来康康～ extends 开始前可能要准备一下基础知识。extends关键字在TS中非常常用，它有如下几个功能 继承类/类型 约束类型 分配律 extends在TS中不光可以表示类的继承和拓展，
NewTable分组功能
不好意思，我又来了，又来说NewTable了（忍耐 这次想分享一下NewTable的分组功能实现方式。 这篇读完可能会觉得NewTable的分组功能全是骚操作(也没有那么骚)，为什么呢？那就得long long ago...(不是 分组功能的前因后果 分组功能想法的萌芽据我所知萌发在NewTable刚诞生之际 那个时候
NewTable技术说明
NewTable 是 Sugar Design 中的表格组件。 相关链接 NewTable分组功能 NewTable树形数据渲染 一、NewTable的布局 NewTable是被tableWrapper所包裹的，tableWrapper的作用就是将NewTable与外界隔开，所有的外界样式作用于
说说单元测试
今天的主题是单元测试。 说实话最开始我对单元测试一无所知，以至于我觉得单元测试“没什么用”。 今天就来 什么是单元测试 来自wikipedia的定义： In computer programming, unit testing is a software testing method by which
TS思考 - 函数
已经是 TS 思考篇的第三篇了，今天来说说函数。 自己在写 TS 的时候，有很多困惑都来自函数，也不是说都是在定义函数类型的时候遇到的困难，有很多地方都会涉及到函数。 所以今天，就来看一看之前一直弄不懂的一些概念和新学到的在写 TS 时，函数相关的注意事项。 What is call signature
TS思考 - Type Guard
为什么突然要学type guard呢？ 突然有一天被问到了type guard是什么？ 在写Table的时候其实很多地方都用了只是自己不太知道这个就是type guard。 那么今天就来好好的了解一下什么是type guard。 一个场景 其实这个场景很多情况下都会存在，一个union类型的变量想要
TS思考 - 泛型与类型推断
最近在写 Table 的过程中了解到一些关于TypeScript的类型推断的一些知识。 前排提示：这篇博客包含大量的TypeScript报错截图，可能会引起不适。 类型和值 其实在最开始接触TS的时候，没有区分值和类型的概念。 因为最开始作为一个TS的初学者，下意识的会认为类型就是number
虚拟滚动 - 条！
最近在写组件，遇到的第一个问题就是浏览器的滚动条。 记得之前就被滚动条长痛过一次了，这次决定短痛， 直接总计来写一个滚动条。 什么？为什么要这么大费周章？滚动条这个磨人的小妖精，我觉得她值得... 起因 最近写 Table 的虚拟化组件，因为 Table 实际是计算出位置的一个个 div 拼成的 Grid，所以在整
对类组件生命周期函数的思考
新的需求是要用Class Component来写，说实话高举hooks真香旗帜的我已经有很长一段时间没有写过Class Component了。 React v16.3之后有几个生命周期被标记为unsafe，还添加了两个新的生命周期函数。 为什么有的生命周期被标记为了UNSAFE? 新的生命周期又与之
All I want is 对齐
在项目中要某些元素对齐简直直是不能再常见的需求。 而文本的对齐就是对齐大军中的一支先锋部队了。说实话，我到现在都有点害怕文本对齐🤦♂️。 那么，这篇blog也就呼之欲出了，今天我们就来一起学习一下文本相关的对齐。 本文注重的是不同font-size的字体对齐 说在前 有的CSS属性看起来是最基本最简单的，但
事件机制三顾
前端攻城狮在“攻城”之时往往有一利器那便是事件。 此利器非常人所能习得之物。欲精其身，必先精其内，明其相辅相成之道。 咳～这么说下去我怕是马上就走到文化沙漠了哈哈哈。今天呢，就来研究研究前端乃至React的事件相关机制。 这一期有太多的理论知识需要做铺垫，且有的内容需要涉及到fiber之类的高深知识，我自己也是一知
熟悉的陌生人Jekyll
看似平淡无奇的2月突然急转直下，上个月还只是才思枯竭罢了，这个月就是才思枯竭 + 时间紧迫。 但还是想跟自己说一句，不能把写博客变成自己的一种负担，还是要开开心心地写才能有好的效果。 今天就来学习一下Jekyll。自己的博客就是用Jekyll写的，但因为之前都是拿来现有的theme一用就好，没有真的去了
CSS之clip一些花里胡哨的东西
最近的我，有点才思枯竭的感觉🤯。其实就是拖延。 众所周知喜欢搞一些花里胡哨的东西。继上次的gradient & hue-rotate之后 今天我们引来了一个新的神级属性(自封)clip，ta～da～! 先来个简单的 可以看到这是一段文本，但是这个文本花里胡哨的。 对，它是彩色的。 background
用Webpack把2020打包
芜湖！！！这是2020年的最后一篇博客啦！双dan快乐～ 🎄🎄。 这是一篇及其入门级别的关于webpack的博客， 所以写起来会把很基础的细节也都写一下，争取每一步都弄明白为什么，一步一步来。也确实该补补这一块的知识盲区了...不要带到新的一年哈哈哈。 因为是初学，文中有错误欢迎指正！ 我真的很想知道webp
来自Serverless的一句hello, world!
Severless的相关内容也是一个自己博客心愿单中的老钉子户了。 但是一直迟迟没有写是因为自己一直不是很明白我用Serverless能做些什么， 就算我知道了它的概念。 而且意识到Serverless可能还需要一定的Node技术栈， 又想起了曾经实习期的自己(当时实习写Node)，对Node浅入浅出的经历。🤦♂️
CSS写一个QQ登陆页的Button
其实这一期我早就想写了，应该是年初的时候，那会在家隔离，但一直没写出来。 感谢春雷的提示🎉🎉 契机 其实就是偶然需要重新登陆一下QQ，结果看到了这么一个Button。 GIF的画质实在不行，可以自行QQ退出登录看一下😂 可以看到这个Button的效果是背景是渐变色且是动态的。 --- 当时最开始的想法是用
只是朴实无华的Virtual List
前两天项目的二期优化中有一项是滚动下拉加载Table卡顿优化。 说实话刚开始我对这个优化项完全没有头绪。一度认为只是接口拿到加载的新数据拼接新数组再渲染导致的卡顿。 所以优化方向一直在往怎么高效拼接数组，高效rerender的方向去思考。 直到我打开F12才意识到此事并不简单🤔 这只是我模
CSS & 矩阵
接触前端以来，总是会听到类似于前端相对简单的言论，再精确一些就是CSS很简单。 其实我有的时候对自己评估，css、js、html三大块我比较弱的可能就是css了。我从来没有觉得css很简单啊(掀桌.jpg）。 今天就来看看CSS中涉及到的高端知识点。当然一说到高端，那必须拿出数学来撑门面，所以今天的主题，就是CSS与
React元素的$$typeof属性
如果打印一个React Element到控制台，会发现有个长得很奇怪的属性，是做什么用的呢？ 先来发现这个属性 先随便创建一个React的项目或者随便找手头一个现有的项目(我这边选择创建一个空的React项目) 然后我在这个project的首页里随便打印一个React Element出来，比如选择打印一个div吧。 然