https://tsing.space/ 一个个人作品集与开放知识库：项目、随手记，与长文笔记。 zh-CN Tue, 16 Jun 2026 16:43:27 GMT https://tsing.space/posts/cli-ai-coding-agents/ https://tsing.space/posts/cli-ai-coding-agents/ Wed, 20 May 2026 00:00:00 GMT 为什么真正的主战场，正在悄悄从编辑器的侧边栏聊天框，转移到终端 —— 以及本地多工作区的开发方式，究竟解锁了什么。 https://tsing.space/posts/private-knowledge-graph/ https://tsing.space/posts/private-knowledge-graph/ Sun, 15 Mar 2026 00:00:00 GMT 一份务实的蓝图 —— 在纯文本的 Obsidian 仓库之上，跑起一座私有、可查询的知识图谱，而不必背上每月的 SaaS 账单。 https://tsing.space/posts/%E5%8E%9F%E7%94%9F%E6%97%B6%E9%97%B4%E5%88%87%E7%89%87%E8%83%BD%E5%8A%9B%E6%8F%90%E5%8D%87%E6%B5%8F%E8%A7%88%E5%99%A8%E5%93%8D%E5%BA%94%E6%80%A7/ https://tsing.space/posts/%E5%8E%9F%E7%94%9F%E6%97%B6%E9%97%B4%E5%88%87%E7%89%87%E8%83%BD%E5%8A%9B%E6%8F%90%E5%8D%87%E6%B5%8F%E8%A7%88%E5%99%A8%E5%93%8D%E5%BA%94%E6%80%A7/ Wed, 05 Mar 2025 00:00:00 GMT 在复杂交互页面开发中，JavaScript 执行耗时较长的任务会导致浏览器响应用户输入的能力变慢，从而影响用户体验。为了解决这个问题，Chrome 129 引入了 `scheduler.yield()` 方法，允许开发者将耗时任务分解为较小的任务块，从而提高页面的响应能力。早在 `Chrome 115` 版本，其开始了对 `scheduler.yield` https://tsing.space/posts/%E4%B8%80%E9%94%AE%E5%88%87%E6%8D%A2%E6%97%A0%E7%BC%9D%E8%AE%BF%E9%97%AE%E5%88%A9%E7%94%A8arc%E6%B5%8F%E8%A7%88%E5%99%A8%E5%AE%9E%E7%8E%B0%E5%A4%9A%E7%8E%AF%E5%A2%83%E9%9A%94%E7%A6%BB%E7%9A%84%E6%8F%90%E6%95%88%E6%8C%87%E5%8D%97/ https://tsing.space/posts/%E4%B8%80%E9%94%AE%E5%88%87%E6%8D%A2%E6%97%A0%E7%BC%9D%E8%AE%BF%E9%97%AE%E5%88%A9%E7%94%A8arc%E6%B5%8F%E8%A7%88%E5%99%A8%E5%AE%9E%E7%8E%B0%E5%A4%9A%E7%8E%AF%E5%A2%83%E9%9A%94%E7%A6%BB%E7%9A%84%E6%8F%90%E6%95%88%E6%8C%87%E5%8D%97/ Tue, 11 Feb 2025 00:00:00 GMT > 在复杂的项目的研发过程中，我们可能出现需要同时在多个环境中进行测试和调试的情况。这些环境可能都有其独特的配置和数据。然而，由于不同环境可能共享相同的域名，直接在同一个浏览器中切换代理进行访问不仅需要重新登录，可能会导致数据混淆和配置冲突，或多开浏览器步骤繁琐，从而影响开发效率和测试准确性。为了解决这一问题，本文结合了在去年比较火的Arc浏览器的用户空间P https://tsing.space/posts/js%E9%80%86%E5%90%91%E5%88%86%E6%9E%90%E5%AD%97%E8%8A%82%E7%9A%84%E7%81%AB%E5%B1%B1%E5%BC%95%E6%93%8E%E5%A6%82%E4%BD%95%E5%81%9A%E5%89%8D%E7%AB%AF%E7%99%BD%E5%B1%8F%E7%9B%91%E6%8E%A7/ https://tsing.space/posts/js%E9%80%86%E5%90%91%E5%88%86%E6%9E%90%E5%AD%97%E8%8A%82%E7%9A%84%E7%81%AB%E5%B1%B1%E5%BC%95%E6%93%8E%E5%A6%82%E4%BD%95%E5%81%9A%E5%89%8D%E7%AB%AF%E7%99%BD%E5%B1%8F%E7%9B%91%E6%8E%A7/ Fri, 03 Jan 2025 00:00:00 GMT > 前不久调研了web监控的一些竞品，本文通过JS逆向分析火山引擎web-pro监控白屏的原理 前不久调研了前端监控的一些产品，本文分析火山引擎web-pro监控的白屏原理，npm链接：[@apmplus/web - npm](https://www.npmjs.com/package/@apmplus/web) 首先根据package.json找到入口 https://tsing.space/posts/flex%E5%B8%83%E5%B1%80%E4%B8%AD%E4%BD%BF%E7%94%A8margin-auto%E5%AE%9E%E7%8E%B0%E5%B1%85%E4%B8%AD%E7%9A%84%E8%BF%9B%E9%98%B6%E6%8A%80%E5%B7%A7/ https://tsing.space/posts/flex%E5%B8%83%E5%B1%80%E4%B8%AD%E4%BD%BF%E7%94%A8margin-auto%E5%AE%9E%E7%8E%B0%E5%B1%85%E4%B8%AD%E7%9A%84%E8%BF%9B%E9%98%B6%E6%8A%80%E5%B7%A7/ Wed, 06 Sep 2023 00:00:00 GMT #### 一、引言 传统Flex居中需要同时设置 `justify-content` 和 `align-items`，但在某些场景下，使用 `margin: auto` 能简化代码。本文将介绍两种实现方式，并深入解析原理。 --- #### 二、基础方法：传统居中方案 通过父容器控制子项对齐，适用于**多子项居中**场景： ``` .parent https://tsing.space/posts/%E6%B7%B1%E5%85%A5%E8%A7%A3%E6%9E%90-addeventlistener-%E7%9A%84%E9%AB%98%E7%BA%A7%E9%85%8D%E7%BD%AE%E4%BB%8E%E5%9F%BA%E7%A1%80%E5%88%B0-vue3-%E5%AE%9E%E8%B7%B5/ https://tsing.space/posts/%E6%B7%B1%E5%85%A5%E8%A7%A3%E6%9E%90-addeventlistener-%E7%9A%84%E9%AB%98%E7%BA%A7%E9%85%8D%E7%BD%AE%E4%BB%8E%E5%9F%BA%E7%A1%80%E5%88%B0-vue3-%E5%AE%9E%E8%B7%B5/ Thu, 06 Jul 2023 00:00:00 GMT > 在 JavaScript 事件处理中，`addEventListener` 的第三个参数 `options` 提供了强大的控制能力。本文将解析现代浏览器支持的四个核心配置参数：`capture`、`once`、`passive` 和 `signal`，通过实际场景示例展示它们的妙用。 ### 前言 在 JavaScript 事件处理中，`addEve https://tsing.space/posts/%E5%86%B3%E7%AD%96%E6%80%9D%E7%BB%B4%E8%AF%BB%E4%B9%A6%E7%AC%94%E8%AE%B0/ https://tsing.space/posts/%E5%86%B3%E7%AD%96%E6%80%9D%E7%BB%B4%E8%AF%BB%E4%B9%A6%E7%AC%94%E8%AE%B0/ Sun, 04 Jun 2023 00:00:00 GMT > 本文是王嘉陵著《决策思维》的读书笔记，这是一本比较薄、废话相对少、语言简单易懂的书，可以让你对“决策”的整个概念、体系有一定的认知。 导语：本文是王嘉陵著《决策思维》的读书笔记，这是一本比较薄、废话相对少、语言简单易懂的书，可以让你对“决策”的整个概念、体系有一定的认知。 优点：把整个决策的基本概念和架构串联了起来，让我重新审视自己日常生活、工作中在 https://tsing.space/posts/%E6%8F%90%E5%8D%87%E5%B7%A5%E4%BD%9C%E6%95%88%E7%8E%87%E7%9A%846%E4%B8%AA%E5%AE%9E%E7%94%A8%E6%80%9D%E7%BB%B4%E5%B7%A5%E5%85%B7/ https://tsing.space/posts/%E6%8F%90%E5%8D%87%E5%B7%A5%E4%BD%9C%E6%95%88%E7%8E%87%E7%9A%846%E4%B8%AA%E5%AE%9E%E7%94%A8%E6%80%9D%E7%BB%B4%E5%B7%A5%E5%85%B7/ Thu, 28 Jan 2021 00:00:00 GMT ### 时间管理 #### 1. 实用“四象限原理”规划时间  #### 2. 用 80/20 法则分配时间 5. 第一步：安排事项 - 例会 - 与人事谈奖金问题 - 审阅文件 - 接电话 - 准备招聘计划 - 会 https://tsing.space/posts/git%E6%8F%90%E4%BA%A4%E6%97%B6%E7%9A%84emoji%E8%A1%A8%E6%83%85%E4%BD%BF%E7%94%A8%E6%8C%87%E5%8D%97/ https://tsing.space/posts/git%E6%8F%90%E4%BA%A4%E6%97%B6%E7%9A%84emoji%E8%A1%A8%E6%83%85%E4%BD%BF%E7%94%A8%E6%8C%87%E5%8D%97/ Thu, 21 Jan 2021 00:00:00 GMT 在浏览他人的优秀的Github项目时，我有时会发现这种情况，git的提交记录竟然有emoji前缀，感觉好有趣的样子：  一番探索后，我发现了emoji在git中的使用方法： 直接在git提交时添加emoji图标代码就可以了，如下： ``` g https://tsing.space/posts/input%E6%A0%87%E7%AD%BE%E6%96%87%E4%BB%B6%E9%80%89%E6%8B%A9%E9%99%90%E5%88%B6%E6%96%87%E4%BB%B6%E7%B1%BB%E5%9E%8B%E6%96%B9%E6%B3%95mime%E7%AE%80%E4%BB%8B/ https://tsing.space/posts/input%E6%A0%87%E7%AD%BE%E6%96%87%E4%BB%B6%E9%80%89%E6%8B%A9%E9%99%90%E5%88%B6%E6%96%87%E4%BB%B6%E7%B1%BB%E5%9E%8B%E6%96%B9%E6%B3%95mime%E7%AE%80%E4%BB%8B/ Mon, 14 Sep 2020 00:00:00 GMT 当我们使用表单组件的时候，经常会使用到文件选择控件： `<input type="file" />`，有时候我们会忽略掉其一个重要的属性 `accept`，其代表这个上传控件允许浏览的文件类型，使用这个属性可以大大改善用户选择文件时的体验。  期初我以为是仓库的文档图片本身的问题，但是有时候我发现连自己的头像都无法显示，我眉头一皱，发现事情没辣么简单了🙁：  即使两个不同的对象可以具有相同的属性，但在使用`==`或`===`进行比较时，它们不被认为是相等的。这是因为它们是通过引用(内存中的位置)进行 https://tsing.space/posts/axios%E8%8E%B7%E5%8F%96%E4%BA%8C%E8%BF%9B%E5%88%B6%E6%B5%81%E5%B9%B6%E8%BD%AC%E5%8C%96%E7%94%9F%E6%88%90%E6%96%87%E4%BB%B6/ https://tsing.space/posts/axios%E8%8E%B7%E5%8F%96%E4%BA%8C%E8%BF%9B%E5%88%B6%E6%B5%81%E5%B9%B6%E8%BD%AC%E5%8C%96%E7%94%9F%E6%88%90%E6%96%87%E4%BB%B6/ Fri, 27 Sep 2019 00:00:00 GMT > 在很多情况下，我们需要通过后端提供的接口来获取动态生成的文件，而我们请求接口的时候，往往后端返回的是二进制数据流。这时我们该如何将后端返回的二进制数据流转换为我们需要的文件呢？ 在很多情况下，我们需要通过后端提供的接口来获取动态生成的文件，而我们请求接口的时候，往往后端返回的是二进制数据流。这时我们该如何将后端返回的二进制数据流转换为我们需要的文件呢？ https://tsing.space/posts/javascript%E5%AE%9E%E7%8E%B0%E9%98%B2%E6%8A%96%E5%92%8C%E8%8A%82%E6%B5%81%E7%9A%84%E6%96%B9%E6%B3%95/ https://tsing.space/posts/javascript%E5%AE%9E%E7%8E%B0%E9%98%B2%E6%8A%96%E5%92%8C%E8%8A%82%E6%B5%81%E7%9A%84%E6%96%B9%E6%B3%95/ Wed, 18 Sep 2019 00:00:00 GMT > 你是否在日常开发中遇到一个问题，在滚动事件中需要做个复杂计算或者实现一个按钮的防二次点击操作。 > 这些需求都可以通过函数防抖动来实现。 ### 防抖 你是否在日常开发中遇到一个问题，在滚动事件中需要做个复杂计算或者实现一个按钮的防二次点击操作。 这些需求都可以通过函数防抖动来实现。尤其是第一个需求，如果在频繁的事件回调中做复杂计算，很有可能导致页面 https://tsing.space/posts/objectdefineproperty%E5%A6%99%E7%94%A8vue2%E6%95%B0%E6%8D%AE%E5%8F%8C%E5%90%91%E7%BB%91%E5%AE%9A%E7%9A%84%E5%8E%9F%E7%90%86/ https://tsing.space/posts/objectdefineproperty%E5%A6%99%E7%94%A8vue2%E6%95%B0%E6%8D%AE%E5%8F%8C%E5%90%91%E7%BB%91%E5%AE%9A%E7%9A%84%E5%8E%9F%E7%90%86/ Mon, 16 Sep 2019 00:00:00 GMT > `Object.defineProperty`方法会直接在一个对象上定义一个新属性,或者修改一个对象的现有属性, 并返回这个对象，这也是Vue2数据双向绑定的原理 最近看了一下 Vue.js 实现相关的文章，了解到了其数据劫持（双向绑定）的原理，使用到了`Object.defineProperty`这个方法，花了点时间，自己尝试着做了一个小 demo。 https://tsing.space/posts/%E5%9C%A8less%E4%B8%AD%E4%BD%BF%E7%94%A8css3%E7%9A%84calc%E8%BF%90%E7%AE%97%E8%A2%AB%E7%BC%96%E8%AF%91%E7%9A%84%E8%A7%A3%E5%86%B3%E6%96%B9%E6%A1%88/ https://tsing.space/posts/%E5%9C%A8less%E4%B8%AD%E4%BD%BF%E7%94%A8css3%E7%9A%84calc%E8%BF%90%E7%AE%97%E8%A2%AB%E7%BC%96%E8%AF%91%E7%9A%84%E8%A7%A3%E5%86%B3%E6%96%B9%E6%A1%88/ Mon, 01 Jul 2019 00:00:00 GMT ### 问题 在less中 calc(100% - 6rem) 等带单位混合运算会被less解析后忽略被运算的rem等单位，全部按照百分比计算，此例中的计算被less编译成calc(94%)。 ### 原因 less的解析方式跟calc方法有重叠，两者在一起有冲突 ### 解决方案 ``` width: e("calc(100% - 6rem)") https://tsing.space/posts/%E5%A6%82%E4%BD%95%E4%BF%AE%E6%94%B9input%E8%BE%93%E5%85%A5%E6%A1%86%E5%8D%A0%E4%BD%8Dplaceholder%E7%9A%84%E5%AD%97%E4%BD%93/ https://tsing.space/posts/%E5%A6%82%E4%BD%95%E4%BF%AE%E6%94%B9input%E8%BE%93%E5%85%A5%E6%A1%86%E5%8D%A0%E4%BD%8Dplaceholder%E7%9A%84%E5%AD%97%E4%BD%93/ Tue, 19 Mar 2019 00:00:00 GMT 在一个业务场景中我想让input输入框占位字符显示的字体颜色和输入的颜色保持一致，想当然地认为应该要设置input的颜色，改了好几次都不管用，最后想到了placeholder属性，搜索一下之后发现果然可以针对placeholder来设置你自己想要的颜色。 *示例如下：* ``` <input class="inputtext1" type="text" p https://tsing.space/posts/es3es5es6%E5%88%86%E5%88%AB%E7%BB%99%E6%95%B0%E6%8D%AE%E5%81%9A%E5%8F%AA%E8%AF%BB%E4%BF%9D%E6%8A%A4%E7%9A%84%E6%96%B9%E6%B3%95/ https://tsing.space/posts/es3es5es6%E5%88%86%E5%88%AB%E7%BB%99%E6%95%B0%E6%8D%AE%E5%81%9A%E5%8F%AA%E8%AF%BB%E4%BF%9D%E6%8A%A4%E7%9A%84%E6%96%B9%E6%B3%95/ Sat, 16 Mar 2019 00:00:00 GMT > **在某些业务逻辑中我们需要保护某些JS对象的数据为只读，这个时候我们可以根据ES3、ES5、ES6分别使用不同方法来实现** **在某些业务逻辑中我们需要保护某些JS对象的数据为只读，这个时候我们可以根据ES3、ES5、ES6分别使用不同方法来实现** #### ES3,ES5: 使用闭包的原理 ``` { var Person = fun https://tsing.space/posts/%E5%9F%BA%E4%BA%8Enodejs%E5%81%9A%E7%9A%84%E7%BD%91%E9%A1%B5%E7%88%AC%E8%99%AB%E5%B0%8F%E9%A1%B9%E7%9B%AE/ https://tsing.space/posts/%E5%9F%BA%E4%BA%8Enodejs%E5%81%9A%E7%9A%84%E7%BD%91%E9%A1%B5%E7%88%AC%E8%99%AB%E5%B0%8F%E9%A1%B9%E7%9B%AE/ Tue, 14 Aug 2018 00:00:00 GMT 最近看了慕课网的Nodejs课程，跟着做了一个基于nodejs开发的网页爬虫爬了我自己的博客文章列表，感觉挺有趣的，记录一下。 最终完成的效果如下：  #### 主要步骤 #### 先选择几个目录，根据目录链接，获取每个目录页面的