CodeReviewGPT系列（二）：魔法打败魔法，说说 prompt 优化
到了 CodeReviewGPT 的第二期分享了（自己鼓掌👏） 一个好消息和一个坏消息： 坏消息是，这一期技术成分很低，**玄学**指数很高。 好消息是，玄学看起来更有趣些，只是很难解释。 先说说背景 与其说是背景，更像是解释一下这篇文章诞生的原因。 在第一期: CodeReviewGPT 工作流程的分享中，有说到...
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...
n8n真的很好用
尝试用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吧。 然...