- 博客(150)
- 收藏
- 关注
RSS订阅
原创 我用AI“ vibe“出了一个小程序的记录和感想
摘要：作者利用Vibe Coding和AI工具在一天内开发完成了一款人脸相似度对比小程序。开发过程完全由AI生成代码，包括页面设计、前后端开发、数据准备和部署。通过调用旷视API实现人脸识别和相似度评分功能，并使用AI生成文案和Canvas绘制结果页。作者总结指出AI大幅降低了开发门槛，使独立开发小工具变得简单高效，建议开发者尽早拥抱AI技术变革。该案例展示了AI辅助开发的完整流程和显著效率提升。（149字）
2026-01-27 13:42:13
1052
原创 阿里云也有Cloudflare Pages，免费建站成功！
最近白嫖免费版 ESA Pages创建了一个在线工具站 [ToolGarden](https://toolgarden.xyz/zh), 主要是自己日常用的一些工具，JSON处理、图片处理、PDF处理，文件处理、编码处理等，一个网站全部解决，不需要再到处找工具了，所有数据全部浏览器本地处理，隐私安全，本文简单介绍一下ESA Page配置和部署过程。
2026-07-21 23:27:38
270
原创 SVG 转 PNG 踩坑记录，重新理解矢量图转位图
本文分享了开发工具站ToolGarden时遇到的SVG转PNG模糊问题及其解决方案。作者发现SVG作为矢量图，在转换为位图时若直接使用浏览器默认尺寸会导致栅格化分辨率不足。通过分析问题本质，最终采用先3倍超采样再使用Pica库高质量降采样的方法，解决了导出图片模糊的问题。文章总结了关键经验：矢量图转位图的核心在于栅格化尺寸和重采样算法，不同图片格式需要差异化处理，同时需平衡质量与性能。这体现了工具开发中"看不见的细节"对用户体验的决定性作用。
2026-07-13 12:53:40
364
原创 为什么有的 JSON 可以带注释？
标准 JSON 不允许注释。TypeScript 使用的是 JSONC（JSON with Comments）。JSONC 是为了让配置文件更易读、更易维护。JSON5 则提供了更多 JavaScript 风格的语法扩展。对于开发者来说，配置文件带注释几乎已经成为现代工具链的标配。理解 JSON、JSONC 和 JSON5 的区别，也能帮助我们在不同场景下选择合适的数据格式。下次再看到 tsconfig.json 里的注释，就不用疑惑了——它其实不是严格意义上的 JSON，而是 JSONC。
2026-06-29 21:08:32
233
原创 我做了一个 AI 歌词时间轴生成工具：再也不用手工制作 LRC 了
这篇文章介绍了一个名为"lrc-generator"的开源AI工具，它能自动为音频文件生成带时间轴的LRC歌词文件。该工具基于OpenAI Whisper语音识别技术，支持多种语言，主要特点包括：自动识别音频内容并生成歌词时间轴、支持已有歌词文本的对齐、智能纠错功能、多种模型选择、音频自动转换、MCP服务接口和在线预览等。使用简单，只需提供音频文件即可自动生成LRC，适用于音乐播放器、视频字幕制作、播客转录等场景。该项目旨在通过AI技术替代传统手工制作LRC歌词的繁琐过程，提高效率。作者在GitHub开源了
2026-06-08 09:50:18
294
原创 互联网越来越卷，普通人还能去哪里找机会(一)
相比已经高度成熟的互联网行业，Web3仍处于早期发展阶段新产品不断出现新赛道持续诞生全球资本持续进入人才供给远远不足Web3的竞争密度远低于传统互联网。在今天的互联网行业：一个运营岗位可能收到上千份简历；一个产品经理岗位有几十位大厂候选人竞争；一个热门赛道往往已被巨头垄断。而在Web3领域：很多项目长期招不到合适的人；优秀设计师、产品经理、开发者依然稀缺；大量岗位开放全球远程招聘；很多细分赛道甚至尚未形成真正的竞争格局。一句话总结互联网行业比拼的是存量市场里的竞争能力；
2026-06-01 22:42:07
187
原创 快速了解 Web3 核心的概念
【150字摘要】针对Web3新手学习资料繁杂难懂的问题，开源项目web3-101以简明语言解析核心概念，涵盖基础认知、钱包/NFT/DeFi/DAO等模块。项目强调Web3本质是新型互联网架构，实现用户对数字身份与资产的真正拥有（钱包即身份、区块链为账本、智能合约执行规则）。不同于Web1/2，Web3解决"拥有互联网"问题，涉及数字所有权、开放协议等前沿议题。建议新手先建立基础认知再探索具体应用，该仓库提供系统化入门指南，持续更新中。
2026-06-01 14:15:35
312
原创 又到年中了，OKR应该怎么定？
开发人员设定 OKR，可以记住一句话：不要写“我会做什么”，要写“我会让什么变得更好”。来自真实问题：不是为了填表，而是解决当前系统、流程或团队中的关键痛点。结果可以验证：能用数据、交付物、覆盖率、接入量、故障率、效率变化等方式衡量。能带来长期价值：不只是完成一次需求，而是提升系统能力、团队效率和工程质量。对开发人员来说，OKR 不是额外负担。写得好的 OKR，反而能帮你从“被需求推着走”，变成“主动推动重要问题被解决”。
2026-05-29 11:57:35
158
原创 写好KPI，不再为低绩效烦恼
很多开发同学习惯把 KPI 想得很大：要做平台、要做系统、要做架构升级、要做全链路治理。这些当然都可以。一个页面太慢一个流程经常报错一个组件反复被复制一次发布总要等半天一个接口字段变化总是出 bug一个新人接项目总是问同样的问题一个线上问题每次都要靠老同学手动排查一个文档每次都没人维护一个测试用例每次都没人补一个表单页面每次都从零写把这些小问题抓出来，做成小专项，有指标、有结果、有复盘，就是很好的 KPI 项目。
2026-05-28 00:09:10
245
原创 快速理解 Git submodule
submodule = 在一个 Git 仓库里，引用另一个 Git 仓库的某个提交。–recursive 表示如果子模块里还有子模块，也一并处理。• 主仓库只记录“我现在依赖它的哪个 commit”• 需要固定依赖在某个版本，而不是总跟着最新代码跑。• 主仓库不直接“吃进去”另一个仓库的全部历史。• 而是记录那个子仓库当前指向的 commit。• 别人拉主仓库时，也能把这个子仓库一起拉下来。• 你的项目依赖一个独立组件，但你。• 子仓库仍然是独立 Git 仓库。它里面其实是另一个 Git 仓库。
2026-04-10 11:40:43
299
原创 Harness Engineering 前端开发的下一个阶段
最近大家都在聊 OpenAI 提出的（驾驭工程）。刚看到这个词时，我以为是又一套 AI 编程方法论，详细了解了一下，发现它说的其实是工作方式的底层转变：当开发者的主要工作不再是亲手写代码，而是设计环境、明确意图、搭建反馈回路，让智能体可靠完成工作时，工程方式就变了。对前端来说，天然有一套"可视化验证 + 组件约束 + 自动检查"的体系，只是以前用来约束人，现在可以用来约束 AI。
2026-03-31 10:16:15
245
原创 【文心快码】确实有点东西！
前两天百度在2025 百度AI开发者大会上发布了文心快码，注册试用了一下，感觉改善很不错的，比其他的开发助手要好很多，类似Trae和Cursor，个人感觉比Trae应用起来体验好很多，至少不用排队，功能也很非常强。“帮我创建一个Electron应用，实现一个MarkDown编辑器的功能，需要实现”所见即所得“，类似Typaro，尽量使用开源软件，包含完整的开发和编译流程”自动应用之后，可以满足需求，可以编辑时，所见即所得。底部新增了一个📌，点击之后窗口会置顶。
2025-04-27 19:47:11
594
原创 搞懂TypeScript的类型声明的方方面面
在 NPM 上会有对应的标签，使用TypeScript编写，会展示有TS标识：DefinitelyTyped中维护类型定义，会展示有DT使用TypeScript 开发的项目中可以通过tsc"declaration": true, // 用于指定是否在编译完成后生成相应的*.d.ts文件"emitDeclarationOnly": true // 只生成声明文件, 不会生成js文件和上文介绍的 vue 一样，在中通过"types"或"typings"字段来指定类型声明文件即可。
2023-10-20 18:55:02
742
原创 搞懂TypeScript中的类型断言和使用场景
TypeScript的类型断言看起来概念比较简单，但是对于刚接触TypeScript的使用者，可能对使用场景缺少认识，希望本文可以帮助你更了解类型断言。当你使用一个值，但是TypeScript不知道具体类型或者TypeScript记录的类型没有办法满足使用要求时，可以使用类型断言来明确指定为自己想要使用的类型。......
2022-07-26 19:09:20
1714
原创 搭建组件库文档最快姿势：Docz
Docz是零配置的，基于Gatsby + MDX，如果你们部门没有使用文档工具，那么你可以轻松接入(KPI向)，如果已经使用了文档工具不妨了解一下Docz，做个对比。为什么要为项目组件/组件库添加文档组件库文档可以帮我们解决以下问题：不知道项目中有哪些公共组件(比如组员写的组件，但是你并不知道)，导致重复开发。复用组件时需要再去翻代码，看看怎么使用，传什么参数。以前写的代码，需要修改或者重构时，无从下手有了组件库文档，基本就可以解决上面的问题，同时也提升了代码复用率和开发效率。...
2022-05-01 10:38:15
1792
翻译 JavaScript中的继承和组合
继承与组合都是面向对象中代码复用的方式，了解各自有什么特点，可以让我们写出更简洁的代码，设计出更好的代码架构。
2022-04-28 14:19:54
433
原创 Zoom会议怎么录屏，录屏存放在哪里，meetingrec文件转换
首先找到录屏存储地址：设置>录制>保存地址一般会存储到zhumuintl(瞩目国际版)或Zoom文件夹中。如果录制过程是被中断的，可能看到的文件就是meetingrec文件，如果想转换成可以播放的文件，需要修改后缀为zoom。双击zoom文件即可打开转换窗口，可能还需要点击一下确认转换：...
2022-04-24 18:23:11
18921
1
翻译 【推荐阅读】JavaScript 中的 SOLID 原则(五)：“D”代表什么
本篇是SOLID原则的最后一篇，建议先阅读前四部分：JavaScript 中的 SOLID 原则（一）：“S”代表什么JavaScript 中的 SOLID 原则（二）：“O”代表什么JavaScript 中的 SOLID 原则（三）：“L”代表什么JavaScript 中的 SOLID 原则（四）：“I”代表什么这是SOLID的第五篇文章(原文一共五篇)，作者是serhiirubets，感谢持续关注。依赖倒置原则D - 依赖倒置原则 这个原则是指：高级模块不应该依赖低级模块；两者都应该依赖于抽象，抽象应该
2022-04-11 17:50:09
2231
翻译 【推荐阅读】JavaScript 中的 SOLID 原则(四)：“I”代表什么
本篇是SOLID原则的第四部分，建议先阅读前三部分：JavaScript 中的 SOLID 原则（一）：“S”代表什么JavaScript 中的 SOLID 原则（二）：“O”代表什么JavaScript 中的 SOLID 原则（三）：“L”代表什么这是SOLID的第四篇文章(原文一共五篇)，作者是serhiirubets，欢迎持续关注。接口隔离原则（Interface Segregation Principle）I - 接口隔离原则。这个原则是指：客户端不应该依赖他们不使用的接口(接口应该是精简的，拥有尽
2022-04-10 21:32:04
255
翻译 【推荐阅读】JavaScript 中的 SOLID 原则（三）：“L”代表什么
本篇是SOLID原则的第三部分，建议先阅读前两部分：JavaScript 中的 SOLID 原则：“S”代表什么JavaScript 中的 SOLID 原则：“O”代表什么这是SOLID的第三篇文章(原文一共五篇)，作者是serhiirubets，欢迎持续关注。里氏替换原则（Liskov Substitution Principle）L - 里氏替换原则。这个原则是指：如果S是T的子类型，那么程序中的T对象可以被S对象替换，不需要改变程序中任何所需属性。从定义上可能没有办法清晰的理解其含义，我
2022-04-09 18:37:12
253
翻译 【推荐阅读】JavaScript 中的 SOLID 原则（二）：“O”代表什么
本文主要渐进的讲解了SOLID原则：不使用SOLID是怎么编写代码的，存在什么问题？应该使用SOLID中的哪个原则？使用SOLID我们应该如何对代码进行修改？相信对比和沉浸式的示例会让你更容易理解SOLID原则，以及如何应用到代码实践中
2022-04-08 09:38:32
294
翻译 【推荐阅读】JavaScript 中的 SOLID 原则(一)：“S”代表什么
你可能已经了解过一些设计原则或者设计模式，本文主要渐进的讲解了SOLID原则：不使用SOLID是怎么编写代码的，存在什么问题？应该使用SOLID中的哪个原则？使用SOLID我们应该如何对代码进行修改？相信对比和沉浸式的示例会让你更容易理解SOLID原则，以及如何应用到代码实践中。这是SOLID的第一篇翻译文章(原文一共五篇)，来自hackernoon，作者是serhiirubets，欢迎持续关注。在本文中，我们将讨论什么是 SOLID 原则，为什么我们应该使用他们和如何在JavaScript中使用他们。什么
2022-04-06 16:16:31
304
原创 前端必备Chrome插件推荐
Web Serve for Chrome通过浏览器直接起一个静态服务，文件夹就可以在浏览器中通过http://127.0.0.1:8887进行访问，默认是首页是index.html。高级用法：可以调整对应的端口号，设置CORS头，支持HTTPS等。运行结果：OneTabOneTab可以把当前打开的所有标签以链接的方式收纳到一个标签中，可以在下班关电脑之前把已打开的标签做收纳，下次打开电脑再进行恢复，也可以管理自己没来得及看的文章。FE Helper强烈推荐 一款强大的插件系统，基本可以满足
2022-04-06 10:50:09
6727
原创 那些我使用过的神级效率工具
为什么介绍这些效率工具：这些我经常使用的工具，对我的日常工作和生活有很大的帮助。效率工具的看法：工具本身出现就是为了解决某些问题，方便我们开发和工作，提高生产力。但是每个人的使用习惯和审美不同，对效率工具的选择和使用也是一样的。工具不是“银弹”，一个好的书写软件并不会让你写出优秀文章，一个优秀的作图软件也不会让你画出令人眼前一亮的图形，正确合理的使用工具。最近打算录个视频来对介绍一下这些工具，主要是可以看到具体操作界面，了解这些软件的隐藏比较深的功能，欢迎持续关注。笔记工具Typora编写MarkDown最
2022-01-07 14:58:38
858
原创 我从Typoro中学到的Child Process知识点(三)
相关链接：我从Typoro中学到的Clipboard妙用我从Typoro中学到的Clipboard妙用(二) 混沌前端 分享技术、工作和生活。 9篇原创内容
2021-11-30 20:48:11
1208
原创 推荐一个工作区管理小工具
起因工作中的业务线比较复杂，每个业务线对应一个项目，经常会遇到多个需求并行开发或者在多个项目中排查问题的情况，需要频繁在不同项目之间切换。日常接触到各种新工具自己也会上手试一下，有时候研究到一半可能会被其他事情中断导致忘记。所以编写了一个简单的小工具满足自己的需求：可以记录工作区目录，增加和删除可以直接通过VS Code打开工作区进行编辑小工具介绍这个小工具使用了一年多，在大部分场景下满足我自己的需求，也提高了开发效率。小工具使用nodejs编写，使用了inquire.js来做交互提示，通
2021-11-24 18:05:34
3642
原创 我从Typoro中学到的Clipboard妙用(二).md
上篇介绍了一下我从Typora中学到的Clipboard妙用：我们从网页复制文字时，剪切板中会塞入两种格式的数据：纯文本和富文本。当我们粘贴到其他编辑器时，文本编辑器会使用纯文本数据，富文本编辑器会使用富文本数据(Typora中会把对应的文本提取成MarkDown格式)。具体内容和简单的代码实现可以查看：我从Typora中学到的Clipboard妙用.mdTypora中图片处理方式经常使用Typora的人应该都知道Typora对于处理图片也有着优秀的使用体验，当插入图片时，你可以指定图片存储方式：Typor
2021-11-23 10:29:44
555
原创 Puppeteer常用代码
!important 欢迎点赞收藏，会不定期更新1. Puppeteer点击包含指定文字内容的元素async function clickWithText(selector,text){ await page.$$eval(selector, (options=[],text) => { options.forEach(item=>{ item.textContent.includes(text) && item.click() }) },text)}.
2021-11-22 10:24:52
1426
原创 我从Typora中学到的Clipboard妙用.md
Typora是我经常使用的一款软件，用来写MarkDown很舒适，有着非常优秀的使用体验：实时预览自定义图片上传服务文档转换主题自定义起因不过我遇到一个非常好玩的事情，当我复制Typora内容粘贴到文本编辑器时，会得到MarkDown格式的内容；复制到富文本编辑器时，可以渲染出富文本效果：复制到VS Code：VS Code复制到其他富文本编辑器：富文本编辑器我很好奇为什么会出现两种不同的结果，Typora应该是使用Electron(或类似技术)开发的，我尝试用Clipboard API来进行测试：//&n
2021-11-18 15:45:00
917
原创 Chrome浏览器主页被篡改怎么修复
今天发现Chrome主页被篡改了，查了一下网上的方法都不管用。先查看了快捷方式右键，没有异常:打开chrome://version/ 发现被修改成了："C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" xxxx.com尝试从Chrome重新创建快捷方式，但是还是被篡改的状态，但是直接打开Chorme.exe是正常的，猜测篡改方式可能是实时的。解决方法：查看Windows安全中心的应用和浏览器控制，发现有问题：某个解
2021-11-14 09:59:17
5089
原创 Super expression must either be null or a function错误
在使用Jest为封装的业务组件库添加单元测试时，遇到Super expression must either be null or a function错误，但是组件的引入和渲染又没有问题，网上查了一下主要是由下面几个问题引起的：拼写错误 比如写React类组件时，Component大小写或拼写错误import/export使用问题 示例当使用export default A导出模块时，使用 import * as AModule 就会遇到这种问题，A会出现在AModule.default当出现循
2021-10-11 13:52:10
2705
原创 Windows上怎么使用gzip压缩
在使用koa-static作为静态服务器中间件时，看官网文档支持gzip压缩，所以想试试效果。但是gzip是类Unix系统的内置命令，尝试使用了Windows上常用的压缩软件，都只提供了把文件压缩成.tar.gz格式的功能，最后发现了GunWin提供的gzip压缩工具关于GunWin: Gun Win项目为Win32提供了GNU Linux平台的一些工具包，可以在Window平台使用Linux的部分工具, 具体介绍和工具列表具体使用方法1.下载打开下载地址，这里我们可以选择使用第一个(安装
2021-10-07 23:27:30
11090
翻译 npm ci和npm install区别
npm大家肯定都使用过，可能会有一些不经常使用的命令，npm ci和npm install都可以用来安装依赖，他们之间有什么区别呢？官方文档npm ci 和 npm install类似，不同之处在于npm ci旨在用于自动化环境，例如测试平台、持续集成和部署，或者您希望确保对依赖项进行全新安装。npm ci 在以下情况下会明显更快：有一个 package-lock.json 或 npm-shrinkwrap.json 文件node_modules 不存在或为空目录npm install 和 n
2021-10-06 19:31:34
5740
原创 Antd中示例代码是怎么直接在CodeSandBox中打开的
image-20210906111439548使用过Antd的小伙伴应该很熟悉，Antd组件文档有在CodeSandBox和CodePen中打开直接预览和编辑的功能，这么炫酷且实用的功能具体是怎么实现的？codesandbox.io[1] 是一个前端代码的在线编辑器，支持各种不同的框架，可以随时预览代码的运行结果。创建沙盒“在CodeSandBox中打开”是CodeSandbox提供的功能，让我们可以通过直接调用API来创建CodeSandbox沙盒。CodeSandbox提供了几种导入到沙盒中预览的方式：
2021-09-06 15:52:33
1504
原创 file-uploader-cli的使用方法
先看一下file-uploader-cli可以实现的效果命令行直接上传文件：在Typora中使用: 图片拖拽到Typora，或者复制图片到Typora中粘贴，自动替换图片为网络地址安装npm install -g file-uploader-cli 我们以GitHub为例，看看怎么使用吧。需要使用Public权限的仓库或者GitHub Pages仓库，否则公网会因为没有权限而无法进行访问1.创建需要导入的json配置{ "token": "", "user": "",
2021-08-26 23:48:35
659
原创 业务组件库开发流程
业务组件库必要性项目经过长期维护之后往往会沉淀出很多公共组件，当一个组件编写完成之后，其他维护者想要使用这个组件，了解这个组件是做什么的，应该怎么用，必须再去翻看源码，或者没有压根儿注意到这个组件导致重发开发。这个时候一个完善的组件库就很有必要了，可以保障开发者之间进行良好的协作。组件库可以帮我们解决以下问题：业务组件跨项目复用，提升开发效率统一代码实现，统一代码质量保障组件库文档提供清晰的使用方式和直观的展示效果组件库的组成业务组件构成业务组件库是基于基础组件库进行编写的，基础组件库是使用antd。我们会
2021-08-26 19:22:09
6464
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人