From 6446ccf9a5c5eb802a60174de412829945cb8bfe Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" Date: Wed, 22 Jan 2025 05:06:47 +0000 Subject: [PATCH] Update docs and sort content --- src/content/post/141.环形链表.md | 56 +++++ src/content/post/142.环形链表-ii.md | 16 ++ src/content/post/2023-02-21.md | 23 ++ src/content/post/2023-10-07.md | 25 ++ src/content/post/2023-10-19.md | 25 ++ src/content/post/2023-10-28.md | 27 +++ src/content/post/2024-03-05 刷题.md | 31 +++ src/content/post/86.分隔链表.md | 67 +++++ src/content/post/AI大局.md | 30 +++ src/content/post/AI相关名词.md | 26 ++ ...erg Welcomes Intra-Firm Chatbots to IB .md | 64 +++++ src/content/post/CSS随用随记.md | 41 ++++ ... Brain Science Help Us Break Bad Habits.md | 23 ++ src/content/post/CommonJS简介.md | 105 ++++++++ src/content/post/Cta Button是什么.md | 33 +++ src/content/post/LLM.md | 22 ++ src/content/post/Page Visibility API.md | 65 +++++ src/content/post/React设计原理阅读.md | 15 ++ .../post/Telegram bot推荐 VidDlPBot.md | 34 +++ .../post/What I learn from dom-to-image.md | 64 +++++ src/content/post/agent-protocol代码阅读.md | 185 ++++++++++++++ src/content/post/agent合集.md | 18 ++ .../post/ant design pro i18n-remove报错.md | 70 ++++++ .../post/antd switch组件错误使用案例.md | 25 ++ .../post/arm64和x64与苹果芯片的关系备忘.md | 21 ++ .../astro启动报错address not available.md | 44 ++++ src/content/post/bento专题.md | 20 ++ src/content/post/bilibili-rec-auto-ffmpeg.md | 27 +++ src/content/post/blender学习资源.md | 16 ++ src/content/post/bossdesign.cn.md | 25 ++ ...首页的背景图跟随鼠标移动是如何实现的？.md | 41 ++++ src/content/post/codegen学习.md | 49 ++++ .../post/codeimage.dev 代码美化工具.md | 32 +++ .../post/convert list like into list.md | 53 ++++ src/content/post/cra系列比较.md | 47 ++++ src/content/post/dom-to-image源代码解析.md | 192 +++++++++++++++ src/content/post/embedding exapmle.md | 67 +++++ src/content/post/evo.ninja.md | 51 ++++ src/content/post/expo报错.md | 31 +++ ... 报错排查 SocketError other side closed.md | 67 +++++ src/content/post/flask-jwt.md | 57 +++++ src/content/post/form的validate注意判空.md | 57 +++++ src/content/post/gallery.md | 45 ++++ .../how to check if a key is in the Object.md | 73 ++++++ ...to find the repeated number of an array.md | 70 ++++++ src/content/post/leetcode刷题 js + python.md | 27 +++ src/content/post/lodash中的位运算.md | 67 +++++ .../post/md路径正确但是图片不显示的原因.md | 31 +++ ...momentjs的format string大小写导致的问题.md | 19 ++ src/content/post/next blog存在的问题.md | 14 ++ ...dejs AMD Asynchronous Module Definition.md | 23 ++ src/content/post/npm scope公共包.md | 32 +++ src/content/post/npmrc配置.md | 25 ++ src/content/post/obsidian技巧备忘.md | 24 ++ src/content/post/obsidian部署.md | 13 + src/content/post/python100 1-15.md | 109 +++++++++ src/content/post/python之禅.md | 63 +++++ src/content/post/python常用的命令备忘.md | 52 ++++ .../response的两种状态 fresh and stale.md | 26 ++ src/content/post/shot.so - 图片美化工具.md | 26 ++ src/content/post/solidity_bootcamp学习笔记.md | 108 +++++++++ src/content/post/tcp与udp传输层.md | 50 ++++ src/content/post/telegram 通知机器人.md | 24 ++ src/content/post/tokenERC20部署和学习.md | 20 ++ ...eet to image 输入推特链接生成对应的图片.md | 46 ++++ src/content/post/vite中使用stl.md | 38 +++ src/content/post/vscode md自动预览.md | 34 +++ src/content/post/win11恢复win10右键的样式.md | 25 ++ ...tretch、Jessie - 我应该选择哪个 Docker Image？.md | 188 ++++++++++++++ src/content/post/一直记不住的form layout.md | 26 ++ src/content/post/不建议做的事.md | 21 ++ src/content/post/乱七八糟的推荐.md | 20 ++ src/content/post/事件循环.md | 11 + src/content/post/从零开始学习React.md | 26 ++ src/content/post/从零开始阅读vite文档.md | 19 ++ src/content/post/伪类和伪元素的区别.md | 23 ++ .../修复了notion-blog中vercel og的问题.md | 13 + src/content/post/关于vite.md | 63 +++++ src/content/post/关于测试.md | 12 + src/content/post/切片总结.md | 100 ++++++++ src/content/post/判断类型的几种方式.md | 60 +++++ .../post/前端中常见的三个斜杠代表什么.md | 63 +++++ src/content/post/前端入门的项目.md | 63 +++++ src/content/post/前端补基础.md | 16 ++ src/content/post/博客改造日志.md | 32 +++ src/content/post/各种软件使用方式梳理.md | 71 ++++++ src/content/post/国内关于缓存的概念.md | 101 ++++++++ src/content/post/图标网站.md | 25 ++ src/content/post/在react中如何生成直方图.md | 28 +++ src/content/post/在前端使用abort取消请求.md | 229 ++++++++++++++++++ src/content/post/复习前端.md | 13 + src/content/post/如何使agnet过程可视化.md | 76 ++++++ .../post/如何在前端提供实现下载文件.md | 44 ++++ .../post/如何实现像chatgpt一样的流式.md | 40 +++ .../post/如何更加直接地查看浏览器内核.md | 25 ++ src/content/post/如何清空dns缓存.md | 38 +++ .../post/学习JavaScript数据结构与算法.md | 74 ++++++ src/content/post/封面生成器收集.md | 33 +++ src/content/post/屏蔽推特黄推.md | 26 ++ ...发布的分支在本地重命名之后如何推送到远程.md | 42 ++++ src/content/post/常用的命令备忘.md | 27 +++ src/content/post/应用推荐.md | 14 ++ src/content/post/建议做的事情.md | 18 ++ src/content/post/开源协议.md | 31 +++ src/content/post/录播机启动脚本.md | 24 ++ src/content/post/待读.md | 18 ++ src/content/post/微博分享截图.md | 14 ++ src/content/post/性能问题排查.md | 16 ++ src/content/post/愿望清单.md | 33 +++ src/content/post/我的书签栏.md | 15 ++ src/content/post/排查icloud上传卡住.md | 26 ++ .../掘金小册【SSR 实战：官网开发指南】.md | 116 +++++++++ src/content/post/提示词.md | 16 ++ src/content/post/摘抄.md | 25 ++ src/content/post/无用的生活小技巧.md | 28 +++ src/content/post/梳理剪辑所需预设.md | 104 ++++++++ src/content/post/正则表达式积累和学习.md | 28 +++ src/content/post/深拷贝与浅拷贝.md | 61 +++++ src/content/post/滚动条专题.md | 15 ++ .../现代javascript库开发 原理、技术与实战.md | 84 +++++++ src/content/post/直播间管理增强脚本.md | 22 ++ src/content/post/直播间管理系统.md | 15 ++ .../post/禁止antd modal按下esc关闭弹窗.md | 28 +++ src/content/post/缓存.md | 24 ++ src/content/post/编程偶像.md | 14 ++ src/content/post/网络连通性问题排查.md | 11 + .../网页页面在非输入的组件也出现闪烁的光标.md | 52 ++++ .../post/自己容易忘记或者混淆的概念.md | 27 +++ src/content/post/节流.md | 30 +++ src/content/post/节点编辑器 项目收集.md | 14 ++ .../视频颜色空间异常，请检查文件后重新上传.md | 28 +++ .../post/请求头中和响应头的Cache-Control.md | 123 ++++++++++ src/content/post/课程 - 零基础学figma.md | 28 +++ src/content/post/输出内容分发梳理.md | 25 ++ src/content/post/运行npm run tsc报错.md | 63 +++++ src/content/post/链表.md | 29 +++ src/content/post/阅读autogpt的代码.md | 16 ++ src/content/post/阅读现代javascript教程.md | 115 +++++++++ src/content/post/防抖.md | 49 ++++ src/content/post/零碎备忘.md | 16 ++ src/content/post/项目推荐.md | 18 ++ 141 files changed, 6152 insertions(+) create mode 100644 src/content/post/141.环形链表.md create mode 100644 src/content/post/142.环形链表-ii.md create mode 100644 src/content/post/2023-02-21.md create mode 100644 src/content/post/2023-10-07.md create mode 100644 src/content/post/2023-10-19.md create mode 100644 src/content/post/2023-10-28.md create mode 100644 src/content/post/2024-03-05 刷题.md create mode 100644 src/content/post/86.分隔链表.md create mode 100644 src/content/post/AI大局.md create mode 100644 src/content/post/AI相关名词.md create mode 100644 src/content/post/Bloomberg Welcomes Intra-Firm Chatbots to IB .md create mode 100644 src/content/post/CSS随用随记.md create mode 100644 src/content/post/Can Brain Science Help Us Break Bad Habits.md create mode 100644 src/content/post/CommonJS简介.md create mode 100644 src/content/post/Cta Button是什么.md create mode 100644 src/content/post/LLM.md create mode 100644 src/content/post/Page Visibility API.md create mode 100644 src/content/post/React设计原理阅读.md create mode 100644 src/content/post/Telegram bot推荐 VidDlPBot.md create mode 100644 src/content/post/What I learn from dom-to-image.md create mode 100644 src/content/post/agent-protocol代码阅读.md create mode 100644 src/content/post/agent合集.md create mode 100644 src/content/post/ant design pro i18n-remove报错.md create mode 100644 src/content/post/antd switch组件错误使用案例.md create mode 100644 src/content/post/arm64和x64与苹果芯片的关系备忘.md create mode 100644 src/content/post/astro启动报错address not available.md create mode 100644 src/content/post/bento专题.md create mode 100644 src/content/post/bilibili-rec-auto-ffmpeg.md create mode 100644 src/content/post/blender学习资源.md create mode 100644 src/content/post/bossdesign.cn.md create mode 100644 src/content/post/b站首页的背景图跟随鼠标移动是如何实现的？.md create mode 100644 src/content/post/codegen学习.md create mode 100644 src/content/post/codeimage.dev 代码美化工具.md create mode 100644 src/content/post/convert list like into list.md create mode 100644 src/content/post/cra系列比较.md create mode 100644 src/content/post/dom-to-image源代码解析.md create mode 100644 src/content/post/embedding exapmle.md create mode 100644 src/content/post/evo.ninja.md create mode 100644 src/content/post/expo报错.md create mode 100644 src/content/post/fetch 报错排查 SocketError other side closed.md create mode 100644 src/content/post/flask-jwt.md create mode 100644 src/content/post/form的validate注意判空.md create mode 100644 src/content/post/gallery.md create mode 100644 src/content/post/how to check if a key is in the Object.md create mode 100644 src/content/post/how to find the repeated number of an array.md create mode 100644 src/content/post/leetcode刷题 js + python.md create mode 100644 src/content/post/lodash中的位运算.md create mode 100644 src/content/post/md路径正确但是图片不显示的原因.md create mode 100644 src/content/post/momentjs的format string大小写导致的问题.md create mode 100644 src/content/post/next blog存在的问题.md create mode 100644 src/content/post/nodejs AMD Asynchronous Module Definition.md create mode 100644 src/content/post/npm scope公共包.md create mode 100644 src/content/post/npmrc配置.md create mode 100644 src/content/post/obsidian技巧备忘.md create mode 100644 src/content/post/obsidian部署.md create mode 100644 src/content/post/python100 1-15.md create mode 100644 src/content/post/python之禅.md create mode 100644 src/content/post/python常用的命令备忘.md create mode 100644 src/content/post/response的两种状态 fresh and stale.md create mode 100644 src/content/post/shot.so - 图片美化工具.md create mode 100644 src/content/post/solidity_bootcamp学习笔记.md create mode 100644 src/content/post/tcp与udp传输层.md create mode 100644 src/content/post/telegram 通知机器人.md create mode 100644 src/content/post/tokenERC20部署和学习.md create mode 100644 src/content/post/tweet to image 输入推特链接生成对应的图片.md create mode 100644 src/content/post/vite中使用stl.md create mode 100644 src/content/post/vscode md自动预览.md create mode 100644 src/content/post/win11恢复win10右键的样式.md create mode 100644 src/content/post/【译】Alpine、Slim、Bookworm、Bullseye、Stretch、Jessie - 我应该选择哪个 Docker Image？.md create mode 100644 src/content/post/一直记不住的form layout.md create mode 100644 src/content/post/不建议做的事.md create mode 100644 src/content/post/乱七八糟的推荐.md create mode 100644 src/content/post/事件循环.md create mode 100644 src/content/post/从零开始学习React.md create mode 100644 src/content/post/从零开始阅读vite文档.md create mode 100644 src/content/post/伪类和伪元素的区别.md create mode 100644 src/content/post/修复了notion-blog中vercel og的问题.md create mode 100644 src/content/post/关于vite.md create mode 100644 src/content/post/关于测试.md create mode 100644 src/content/post/切片总结.md create mode 100644 src/content/post/判断类型的几种方式.md create mode 100644 src/content/post/前端中常见的三个斜杠代表什么.md create mode 100644 src/content/post/前端入门的项目.md create mode 100644 src/content/post/前端补基础.md create mode 100644 src/content/post/博客改造日志.md create mode 100644 src/content/post/各种软件使用方式梳理.md create mode 100644 src/content/post/国内关于缓存的概念.md create mode 100644 src/content/post/图标网站.md create mode 100644 src/content/post/在react中如何生成直方图.md create mode 100644 src/content/post/在前端使用abort取消请求.md create mode 100644 src/content/post/复习前端.md create mode 100644 src/content/post/如何使agnet过程可视化.md create mode 100644 src/content/post/如何在前端提供实现下载文件.md create mode 100644 src/content/post/如何实现像chatgpt一样的流式.md create mode 100644 src/content/post/如何更加直接地查看浏览器内核.md create mode 100644 src/content/post/如何清空dns缓存.md create mode 100644 src/content/post/学习JavaScript数据结构与算法.md create mode 100644 src/content/post/封面生成器收集.md create mode 100644 src/content/post/屏蔽推特黄推.md create mode 100644 src/content/post/已经发布的分支在本地重命名之后如何推送到远程.md create mode 100644 src/content/post/常用的命令备忘.md create mode 100644 src/content/post/应用推荐.md create mode 100644 src/content/post/建议做的事情.md create mode 100644 src/content/post/开源协议.md create mode 100644 src/content/post/录播机启动脚本.md create mode 100644 src/content/post/待读.md create mode 100644 src/content/post/微博分享截图.md create mode 100644 src/content/post/性能问题排查.md create mode 100644 src/content/post/愿望清单.md create mode 100644 src/content/post/我的书签栏.md create mode 100644 src/content/post/排查icloud上传卡住.md create mode 100644 src/content/post/掘金小册【SSR 实战：官网开发指南】.md create mode 100644 src/content/post/提示词.md create mode 100644 src/content/post/摘抄.md create mode 100644 src/content/post/无用的生活小技巧.md create mode 100644 src/content/post/梳理剪辑所需预设.md create mode 100644 src/content/post/正则表达式积累和学习.md create mode 100644 src/content/post/深拷贝与浅拷贝.md create mode 100644 src/content/post/滚动条专题.md create mode 100644 src/content/post/现代javascript库开发 原理、技术与实战.md create mode 100644 src/content/post/直播间管理增强脚本.md create mode 100644 src/content/post/直播间管理系统.md create mode 100644 src/content/post/禁止antd modal按下esc关闭弹窗.md create mode 100644 src/content/post/缓存.md create mode 100644 src/content/post/编程偶像.md create mode 100644 src/content/post/网络连通性问题排查.md create mode 100644 src/content/post/网页页面在非输入的组件也出现闪烁的光标.md create mode 100644 src/content/post/自己容易忘记或者混淆的概念.md create mode 100644 src/content/post/节流.md create mode 100644 src/content/post/节点编辑器 项目收集.md create mode 100644 src/content/post/视频颜色空间异常，请检查文件后重新上传.md create mode 100644 src/content/post/请求头中和响应头的Cache-Control.md create mode 100644 src/content/post/课程 - 零基础学figma.md create mode 100644 src/content/post/输出内容分发梳理.md create mode 100644 src/content/post/运行npm run tsc报错.md create mode 100644 src/content/post/链表.md create mode 100644 src/content/post/阅读autogpt的代码.md create mode 100644 src/content/post/阅读现代javascript教程.md create mode 100644 src/content/post/防抖.md create mode 100644 src/content/post/零碎备忘.md create mode 100644 src/content/post/项目推荐.md diff --git a/src/content/post/141.环形链表.md b/src/content/post/141.环形链表.md new file mode 100644 index 0000000..96a315c --- /dev/null +++ b/src/content/post/141.环形链表.md @@ -0,0 +1,56 @@ +--- +title: 141.环形链表 +date: 2023-09-12 +author: KazooTTT +tags: + - 算法 + - 链表 + - leetcode +platform: leetcode +number: 141 +url: 'https://leetcode.cn/problems/linked-list-cycle/' +finished: true +published: true +slug: 141-ring-chained-tables +description: >- + 该内容描述了一个用于检测链表中是否存在环的算法。算法通过使用两个指针，一个慢指针和一个快指针，在链表中移动。如果链表中存在环，快指针最终会追上慢指针；否则，快指针会先到达链表的末尾。算法首先检查链表的头节点是否为空或其下一个节点是否为空，如果是，则返回false，表示没有环。然后，算法进入一个循环，每次循环中慢指针前进一步，快指针前进两步。如果快指针变为null或其下一个节点为null，则返回false，表示没有环。如果循环中快指针与慢指针相遇，则返回true，表示链表中存在环。 +rinId: 58 +--- + +# 141.环形链表 + +```ts +/* + * @lc app=leetcode.cn id=141 lang=typescript + * + * [141] 环形链表 + */ + +// @lc code=start +/** + * Definition for singly-linked list. + * class ListNode { + * val: number + * next: ListNode | null + * constructor(val?: number, next?: ListNode | null) { + * this.val = (val===undefined ? 0 : val) + * this.next = (next===undefined ? null : next) + * } + * } + */ + +function hasCycle(head: ListNode | null): boolean { + if (head === null || head.next === null) return false + let slow = head + let fast = head.next + while (slow !== fast) { + if (fast === null || fast.next === null) return false + slow = slow.next + fast = fast.next.next + } + return true +} +// @lc code=end +``` + +![Pasted image 20230913211049](https://pictures.kazoottt.top/2024/10/20241017-4f53a7eae19ab17b762648f666cfabb6.png) diff --git a/src/content/post/142.环形链表-ii.md b/src/content/post/142.环形链表-ii.md new file mode 100644 index 0000000..a22a903 --- /dev/null +++ b/src/content/post/142.环形链表-ii.md @@ -0,0 +1,16 @@ +--- +title: 【leetcode】142.环形链表-ii +date: 2023-09-13 +author: KazooTTT +tags: + - 算法 +platform: leetcode +url: 'https://leetcode.cn/problems/linked-list-cycle-ii/description/' +finished: true +published: true +slug: 142-ring-linked-tables-ii +description: 题目“142.环形链表-ii”指的是一个关于数据结构中环形链表的问题，特别是针对环形链表中特定节点的查找或操作问题。 +rinId: 118 +--- + +# 142.环形链表 -ii \ No newline at end of file diff --git a/src/content/post/2023-02-21.md b/src/content/post/2023-02-21.md new file mode 100644 index 0000000..4008c30 --- /dev/null +++ b/src/content/post/2023-02-21.md @@ -0,0 +1,23 @@ +--- +title: 2023-02-21 星期二 +slug: diary-2023-02-21 +date: 2023-02-21 +author: KazooTTT +tags: + - 日记 +published: true +description: >- + 在2023年2月21日的内容中，讨论了数组元素索引为何从0开始编号的问题。根据地址计算公式，索引实际上代表了内存地址的偏移量，首个元素的地址偏移量为0，因此索引从0开始是合理的。文章中还提供了一张图示，进一步解释了这一概念。 +rinId: 23 +toAstro: false +category: 日记 +--- + +# 2023-02-21 星期二 + +## 数组 + +[4.1. 数组（Array） - Hello 算法 (hello-algo.com)](https://www.hello-algo.com/chapter_array_and_linkedlist/array/#411) +**为什么数组元素索引从 0 开始编号？**  根据地址计算公式，**索引本质上表示的是内存地址偏移量**，首个元素的地址偏移量是  0 ，那么索引是  0  也就很自然了。 + +![Pasted image 20230221221853](https://pictures.kazoottt.top/2024/04/20240407-170214c87b99ed229900334e27d6db5d.png) diff --git a/src/content/post/2023-10-07.md b/src/content/post/2023-10-07.md new file mode 100644 index 0000000..a3faa76 --- /dev/null +++ b/src/content/post/2023-10-07.md @@ -0,0 +1,25 @@ +--- +title: 2023-10-07 星期六 +slug: diary-2023-10-07 +date: 2023-10-07 +author: KazooTTT +tags: + - 日记 +published: true +description: 2023年10月7日星期六的计划包括国庆期间的厦门和杭州旅行，以及当天的打卡和待办事项。 +toAstro: false +category: 日记 +--- + +# 2023-10-07 星期六 + + + + +## 今天要做的事情 + +[[2023 国庆厦门和杭州之行]] + +## 打卡 + +## Inbox \ No newline at end of file diff --git a/src/content/post/2023-10-19.md b/src/content/post/2023-10-19.md new file mode 100644 index 0000000..ff4e989 --- /dev/null +++ b/src/content/post/2023-10-19.md @@ -0,0 +1,25 @@ +--- +title: 2023-10-19 星期四 +slug: diary-2023-10-19 +date: 2023-10-19 +author: KazooTTT +tags: + - 日记 +published: true +description: 2023年10月19日星期四的日程包括发布xlsx util工具包，该工具能够根据输入的列索引返回如A、B等实际列名。此外，还包括打卡和处理inbox事项。 +toAstro: false +category: 日记 +--- + +# 2023-10-19 星期四 + + + + +## 今天要做的事情 + +xlsx util 发包，实现输入列的索引，输出 A B 这样真实的列名 + +## 打卡 + +## Inbox \ No newline at end of file diff --git a/src/content/post/2023-10-28.md b/src/content/post/2023-10-28.md new file mode 100644 index 0000000..bd2645e --- /dev/null +++ b/src/content/post/2023-10-28.md @@ -0,0 +1,27 @@ +--- +title: 2023-10-28 星期六 +slug: diary-2023-10-28 +date: 2023-10-28 +author: KazooTTT +tags: + - 日记 +published: true +description: >- + Today's schedule includes learning from the dom-to-image topic, with a note on + weread content in the inbox. +toAstro: false +category: 日记 +--- + +# 2023-10-28 星期六 + +## 今天要做的事情 + +[[What I learn from dom-to-image]] + +## 打卡 + +## Inbox + + + diff --git a/src/content/post/2024-03-05 刷题.md b/src/content/post/2024-03-05 刷题.md new file mode 100644 index 0000000..634d30c --- /dev/null +++ b/src/content/post/2024-03-05 刷题.md @@ -0,0 +1,31 @@ +--- +description: >- + 内容中提到了两个编程问题及其相关注意事项。首先，对于“两数之和”问题，指出了在JavaScript代码中，如果`numberToIndexMap[targetNumber]`的值为0时，使用`!== + undefined`进行判断可能会导致错误的结果，建议使用`in`操作符来检查对象属性是否存在。其次，提到了“删除有序数组中的重复项”问题，强调了需要原地删除重复元素，即不使用额外的空间。 +slug: 2024-03-05-brush-questions +finished: true +published: true +date: '2024-07-11T02:17:53.454Z' +rinId: 119 +--- + +# 2024-03-05 刷题 + +需要注意的是 + +[1. 两数之和](https://leetcode.cn/problems/two-sum/) + +```js +if (numberToIndexMap[targetNumber] !== undefined) { + const targetNumberIndex = numberToIndexMap[targetNumber] + return [targetNumberIndex, i] +} +``` + +这里的写法，如果 `numberToIndexMap[targetNumber] = 0` 的话, if 也会判断为 false，所以不能这么写。 + +要么写成 `numberToIndexMap[targetNumber] !== undefined` 要么写成 `if (targetNumber in numberToIndexMap)` + +[26. 删除有序数组中的重复项](https://leetcode.cn/problems/remove-duplicates-from-sorted-array/) + +请你 **[原地](http://baike.baidu.com/item/%E5%8E%9F%E5%9C%B0%E7%AE%97%E6%B3%95)** 删除重复出现的元素 diff --git a/src/content/post/86.分隔链表.md b/src/content/post/86.分隔链表.md new file mode 100644 index 0000000..6ba9b9b --- /dev/null +++ b/src/content/post/86.分隔链表.md @@ -0,0 +1,67 @@ +--- +title: 【leetcode】86.分隔链表 +date: 2023-09-13 +author: KazooTTT +tags: + - 算法 + - 链表 + - leetcode + - 待优化 + - todo +platform: leetcode +number: 86 +url: 'https://leetcode.cn/problems/partition-list/description/' +finished: true +published: true +slug: 86-separated-chained-tables +description: >- + 该内容描述了一个TypeScript函数`partition`，用于将一个单链表分割成两部分：一部分包含所有小于给定值x的节点，另一部分包含所有大于或等于x的节点。函数首先创建两个新的链表头节点`small`和`large`，分别用于存储小于x和大于等于x的节点。通过遍历原链表，将节点值小于x的节点添加到`small`链表，将节点值大于等于x的节点添加到`large`链表。最后，将`large`链表连接到`small`链表的尾部，并返回`small`链表的头节点。此方法在内存使用上还有优化空间。 +rinId: 59 +--- + +# 86.分隔链表 + +```typescript +/** + * Definition for singly-linked list. + * class ListNode { + * val: number + * next: ListNode | null + * constructor(val?: number, next?: ListNode | null) { + * this.val = (val===undefined ? 0 : val) + * this.next = (next===undefined ? null : next) + * } + * } + */ + +function partition(head: ListNode | null, x: number): ListNode | null { + let small = new ListNode(-1), + smallP = small, + large = new ListNode(-1), + largeP = large + + while (head) { + if (head.val < x) { + smallP.next = { + val: head.val, + next: null, + } + smallP = smallP.next + } else { + largeP.next = { + val: head.val, + next: null, + } + largeP = largeP.next + } + head = head.next + } + largeP.next = null + smallP.next = large.next + return small.next +} +``` + +![Pasted image 20230913211808](https://pictures.kazoottt.top/2024/10/20241017-31a8a6fcff29819c944e3716bb8f1979.png) + +可以看出内存还有很大的优化空间 diff --git a/src/content/post/AI大局.md b/src/content/post/AI大局.md new file mode 100644 index 0000000..3837043 --- /dev/null +++ b/src/content/post/AI大局.md @@ -0,0 +1,30 @@ +--- +slug: present-conditions +published: true +description: >- + 基础大模型在实际应用中面临两大挑战：终端客户对高昂算力成本的接受度以及大模型在垂直行业任务中的表现不足。为解决这些问题，大模型通常会通过领域特定数据或知识库进行训练和优化，以形成适用于垂直领域的行业大模型或业务大模型。此外，一些企业还有深度定制和私有化部署的需求，需要在行业大模型的基础上，进一步加入企业专有数据进行训练或微调，以构建企业级大模型。 +category: AI +title: AI大局 +date: 2023-09-04 +author: KazooTTT +type: Post +status: Published +tags: + - 基础大模型 + - 产业应用 + - 机器学习 +finished: false +--- + +# 大局 + +![IMG-20240904002708358](https://pictures.kazoottt.top/2024/10/20241017-f444952a6f250a1577ef0bb6e0b2841e.png) + +![IMG-20240904002708406](https://pictures.kazoottt.top/2024/10/20241017-19840b5bdf81b7f542746ffcc779b8c0.png) + +基础大模型落地面临两大难题，一是终端客户对算力成本的接受能力，二是大模型虽擅长通用领域问题，但往往在垂直行业任务中表现欠佳。因此，基础大模型会通过领域数据或专属知识库进行训练和调优，形成垂直领域的行业大模型或业务大模型；此外，部分企业还具有深度定制、私有化部署的需求，需要在行业大模型基础上，进一步加入企业专有数据进行训练或微调，形成企业级大模型。 + +[2023 年中国 AIGC 产业全景报告 |   艾瑞咨询 - 实时互动网](https://www.nxrte.com/zixun/31964.html) + +中间层 +应用层 diff --git a/src/content/post/AI相关名词.md b/src/content/post/AI相关名词.md new file mode 100644 index 0000000..532ee4f --- /dev/null +++ b/src/content/post/AI相关名词.md @@ -0,0 +1,26 @@ +--- +title: AI相关名词 +date: 2024-02-28 +author: KazooTTT +tags: + - ai + - 深度学习 +finished: false +published: true +slug: ai-related-words +description: >- + SOTA（State of the + Art）代表在特定任务中表现最佳的方法或模型，尤其在计算机视觉领域，常指最先进的深度学习技术。扩散模型作为深度生成模型的新SOTA，在性能上超越了传统的基准和基线。研究论文通常以超越现有基线/基准为目标，通过实验数据评估其性能提升。基线强调一套方法，而基准则侧重于如精确度、召回率等可量化的最高指标。 +--- + +# AI 相关名词 + +#ai #深度学习 + +SOTA 是 state of the art 的缩写，指在特定任务中目前表现最好的方法或模型。它代表着最前沿、 + +最先进、目前最高水平的意思。在计算机视觉等领域，SOTA 通常指代最先进的深度学习模型或方法，在各种基准测试中取得最好的性能表现 + +Benchmark 和 baseline 则是指最基础的比较对象。研究论文通常以超越现有的 baseline/benchmark 为动机，实验数据需要以它们为基准来评估是否有提高。Baseline 强调一套方法，而 benchmark 更偏向于当前最高的指标，如 precision、recall 等可量化的指标 + +> 扩散模型（diffusion models）是深度生成模型中新的 SOTA [扩散模型爆火，这是首篇综述与Github论文分类汇总 | 机器之心](https://www.jiqizhixin.com/articles/2022-09-13-5) diff --git a/src/content/post/Bloomberg Welcomes Intra-Firm Chatbots to IB .md b/src/content/post/Bloomberg Welcomes Intra-Firm Chatbots to IB .md new file mode 100644 index 0000000..9f66e6c --- /dev/null +++ b/src/content/post/Bloomberg Welcomes Intra-Firm Chatbots to IB .md @@ -0,0 +1,64 @@ +--- +slug: bloomberg-welcomes-intra-firm-chatbots-to-ib +published: true +title: 彭博社欢迎公司内部聊天机器人加入国际商业银行 +tags: + - 翻译 +category: 阅读笔记-阅读和翻译 +description: >- + 彭博社宣布推出新的Instant Bloomberg (IB)附加服务——IB + Connect，其中包括公司内部聊天机器人服务。这项服务允许彭博终端用户将专有聊天机器人集成到IB聊天室中，促进内部信息的共享和商业智能的发现。客户可以使用提供的软件开发工具包定制聊天机器人，以适应其独特的技术堆栈和工作流程。此外，IB + Connect支持两种类型的聊天机器人：问答式和通知型，分别用于提供可操作的情报和关键事件的及时通知。这一创新旨在帮助客户推进数字化转型战略，提高协作工作流程的效率。 +date: '2023-11-09T10:26:54.033Z' +toAstro: false +--- + +# 彭博社欢迎公司内部聊天机器人加入国际商业银行 + +[原文：Bloomberg Welcomes Intra-Firm Chatbots to IB](https://www.bloomberg.com/company/press/bloomberg-welcomes-intra-firm-chatbots-to-ib/) + +2023 年 11 月 09 日 +**_ 客户可使用公司内部聊天机器人推动数字化转型和协作工作流程 _** + +彭博社今天宣布推出一项新的 Instant Bloomberg (IB) 附加服务，以支持客户的数字化转型计划。IB Connect：IB Connect：公司内部聊天机器人服务使彭博终端用户能够将专有聊天机器人添加到所有用户都是同一公司成员的 IB 聊天室中。 + +客户可以调用公司内部聊天机器人，自动将其内部系统中的重要信息显示在 IB 中，与同事共享，并促进内部商业智能的可发现性。 + +**IB Connect** 是一套服务，使彭博终端用户能够将 IB 与公司内部工作流程工具无缝集成，帮助简化与同事的协作。 + +**IB Connect：公司内部聊天机器人**是一项新的 IB Connect 服务，在客户适用的 IB 聊天室与其内部系统之间提供双向集成。它使用自然语言处理为客户的非结构化 IB 数据提供结构和上下文，并将丰富的信息提供给客户的公司内部聊天机器人。 +每个客户都可以使用提供的软件开发工具包来构建和定制自己的 IB Connect：行内聊天机器人，以满足其公司独特的技术堆栈和内部用户工作流程，并与彭博社的 API 协议保持一致。 + +**ING 金融市场战略工程主管 Pieter van Gaa**l 说："ING 的金融市场前台战略工程团队一直致力于改善客户体验。人们已经开始期待即时访问，我们认为他们对金融市场的体验也应如此。 +我们使用聊天机器人已经有一段时间了，我们发现 Instant Bloomberg 中新增的公司内部聊天机器人非常适合我们的需求 "。 + +**Bardin Hill Investment Partners 的执行信贷主管兼投资组合经理 Philip Raciti** 说：" 在彭博社推出公司内部聊天机器人之前，我们一直在寻找一种方法，以一种可用于深度分析的结构从不同来源获取数据，并能随着时间的推移扩展功能。 +我们认为 Intra-Firm Chatbots 是弥合数据鸿沟的重要一步，因为它提供了一个简单、高附加值的工具，促进了彭博社与我们内部系统之间的实时数据连接。Bardin Hill 实施的公司内部聊天机器人帮助我们直接访问最大的信息孤岛，同时提高流程效率。 + +**罗杰 - 伯奇（Roger Birch），产品主管：彭博国际银行通信与协作系统产品主管 Roger Birch** 说：" 我们将继续投资于创新，使我们的客户能够进一步推进其数字化转型战略，并从使用 IB 中获取更多价值。 +IB Connect 服务集（包括公司内部聊天机器人）将帮助我们的客户创建信息超回路，并从根本上提高协作工作流程的效率。" + +彭博社目前通过 IB Connect 支持两种类型的客户聊天机器人功能：**公司内问答聊天机器人**和**公司内通知聊天机器人**。 + +**问答式公司内部聊天机器人**通过 IB Connect 与客户系统之间的双向通信获取可操作的情报，以回答指向公司内部聊天机器人的聊天询问。 +用户可以查询其专有系统中的各种数据，然后这些聊天机器人可以直接在聊天室中生成内容（链接、表格、可视化丰富数据）。 +这些与问答 Intrafirm 聊天机器人的简单互动可帮助用户及其队友高效地传递信息，并为他们的交流增加更多价值。 + +当发生关键事件或满足特定市场条件时，**通知型 Intrafirm 聊天机器人**会及时、主动地发出警报，并提供有意义的商业情报，而不会转移对正在进行的团队交流的注意力。 + +这样，用户就能在已经开展协作的 IB 环境中接收关键更新。例如，可以为交易前、执行中和交易后的工作流程发送分析、库存或订单状态更新通知。 + +**关于 Instant Bloomberg（IB）：** +IB 帮助彭博终端用户与金融市场和彼此之间实时连接，在安全的环境中交流想法、分享可操作的信息并优化通信工作流程。 +彭博还提供其他服务，使客户能够将 IB 与公司内部应用程序无缝集成，帮助简化与同事的协作。 + +**关于彭博终端：** +四十多年来，彭博终端通过为资本市场带来透明度和创新，彻底改变了金融服务行业。 +彭博终端受到全球最具影响力的决策者的信赖，提供实时的新闻、数据、见解和交易工具，帮助我们的客户将知识转化为行动。 + +**关于彭博社** +彭博社是商业和金融信息领域的全球领导者，提供可信赖的数据、新闻和见解，为市场带来透明度、效率和公平性。 +公司通过可靠的技术解决方案帮助连接全球金融生态系统中具有影响力的社区，使我们的客户能够做出更明智的决策并促进更好的合作。欲了解更多信息，请访问 Bloomberg.com/company 或申请演示。 + +**媒体联系方式** +Robert Madden, , +1 (646) 807-2213 diff --git a/src/content/post/CSS随用随记.md b/src/content/post/CSS随用随记.md new file mode 100644 index 0000000..dc8f8b5 --- /dev/null +++ b/src/content/post/CSS随用随记.md @@ -0,0 +1,41 @@ +--- +title: CSS | 随用随记 +date: 2022-11-15 +author: KazooTTT +tags: + - css + - 前端 + - 刷题 +slug: css-on-the-go +published: true +description: >- + 本文介绍了CSS中的一些关键技巧，包括使用伪类选择器来设置HTML模块中特定li标签的背景颜色，以及如何为div元素添加后伪元素并设置其样式。此外，还讨论了浮动和清除浮动的概念，并提供了一个实际的编程练习链接，帮助读者更好地理解和应用这些CSS技术。 +--- + +# CSS 随用随记 + +## 1. 请将 Html 模块中 Ul 列表的第 2 个 Li 标签和第 4 个 Li 标签的背景颜色设置成 "rgb(255, 0, 0)" + +关键词：伪类选择器 + +```css +ul li:nth-child(2n) { + background: rgb(255, 0, 0); +} +``` + +![image-20221115233947891](https://pictures.kazoottt.top/2024/04/20240407-5e745e9abfb757513c8b6853b98262b7.png) + +## 2. 请给 Html 模块的 Div 元素加一个后伪元素，且后伪元素的宽度和高度都是 20px，背景颜色为 "rgb(255, 0, 0)" + +![image-20221115234139207](https://pictures.kazoottt.top/2024/04/20240407-1b6d680284da37bc6bcb8014e8ffe0e0.png) + +## 3. [浮动和清除浮动*牛客题霸*牛客网 (nowcoder.com)](https://www.nowcoder.com/practice/88bcbaee954349f5a8810bfa94ee61a8?tpId=260&tqId=2200196&ru=%2Fexam%2Foj&qru=%2Fta%2Ffront-quick-study%2Fquestion-ranking&sourceUrl=%2Fexam%2Foj%3Fpage%3D1%26tab%3DHTML%2FCSS%26topicId%3D260) + +请将类为 "left" 的 div 元素和类为 "right" 的 div 元素在同一行上向左浮动，且清除类为 "wrap" 的父级 div 元素内部的浮动。 + +关键词：清除浮动 + +TODO: + +CSS | 清除浮动 diff --git a/src/content/post/Can Brain Science Help Us Break Bad Habits.md b/src/content/post/Can Brain Science Help Us Break Bad Habits.md new file mode 100644 index 0000000..26cf67f --- /dev/null +++ b/src/content/post/Can Brain Science Help Us Break Bad Habits.md @@ -0,0 +1,23 @@ +--- +slug: can-brain-science-help-us-break-bad-habits +published: true +tags: + - 摘抄 +description: >- + 研究表明，通过调整环境来隐藏诱惑，可以有效提高自控力。一项实验发现，当孩子们看不到面前的棉花糖时，他们能坚持的时间比看到棉花糖时更长。这表明自控力并非仅是个人内在品质，而是受环境影响的。因此，通过微调环境，我们或许能模仿那些看起来更有自制力的人。 +category: 阅读笔记-阅读和翻译 +date: 2024-01-07 +title: Can Brain Science Help Us Break Bad Habits +toAstro: false +--- + +# Can Brain Science Help Us Break Bad Habits? + +原文: +[Can Brain Science Help Us Break Bad Habits? | The New Yorker](https://www.newyorker.com/magazine/2019/10/28/can-brain-science-help-us-break-bad-habits) +翻译: +[研究表明，依靠意志力改掉坏习惯是徒劳无功的 \[译\] | 宝玉的分享](https://baoyu.io/translations/life/can-brain-science-help-us-break-bad-habits) + +> 研究者比较了两种情况：一种是孩子们能看到面前的棉花糖；另一种则是知道棉花糖在那儿，但看不到它。结果显示，面对可见诱惑时，孩子们平均只能坚持六分钟，但如果把诱惑藏起来，他们能坚持十分钟。对 Wood 而言，这说明自控力“并非内在品质，而是我们所处环境的反映。”通过微调环境，我们也许能够模仿那些看起来更有自制力的人。 + +> 成功的自控，实际上来自于有效隐藏诱惑 diff --git a/src/content/post/CommonJS简介.md b/src/content/post/CommonJS简介.md new file mode 100644 index 0000000..637da4b --- /dev/null +++ b/src/content/post/CommonJS简介.md @@ -0,0 +1,105 @@ +--- +title: CommonJS简介 +date: 2023-10-17 +author: KazooTTT +tags: + - commonjs + - JavaScript + - node +published: true +slug: introduction-to-commonjs +description: >- + CommonJS是一种模块规范，主要用于Node.js服务器端JavaScript应用程序。它通过`require`函数导入模块，通过`module.exports`或`exports`导出模块内容。在`package.json`文件中，通过设置`"type"`字段为`"commonjs"`来指定模块格式。CommonJS不支持浏览器环境，是Node.js中模块管理的基础。 +--- + +# CommonJS 简介 + +## 什么是 Commonjs + +commonjs 是 module 的一种类型（规范） + +## 使用场景 + +> CommonJS is mainly used in server-side JS apps with Node, as browsers don't support the use of CommonJS. + +CommonJS 主要用于带有 Node 的服务器端 JS 应用程序，因为浏览器不支持使用 CommonJS。 + +## 如何使用 + +### package.json + +> The "type" field defines the module format that Node.js uses for all .js files that have that package.json file as their nearest parent. + +`"type"`  字段定义 Node.js 用于所有将该  `package.json`  文件作为其最近父级的  `.js`  文件的模块格式。 + +在 package 中不需要显示定义 type(type 的可选项是 commonjs 和 module)，一般是需要用到 ESM 的时候才去定义 module。 + +package 的影响范围是当前文件夹以及子文件夹的所有 js 文件。（ts 会被 ts 编译器转化为 js 代码） + +### 语法 + +导入：require 导出：module.exports + +举个例子： + +```jsx +// 导出两个函数 +exports.add = function (a, b) { + return a + b +} + +exports.multiply = function (a, b) { + return a * b +} +``` + +```jsx +// 引入 math 模块 +var math = require("./math") + +// 使用 math 模块中的函数 +var sum = math.add(5, 3) +var product = math.multiply(4, 6) + +console.log("Sum:", sum) +console.log("Product:", product) +``` + +--- + +批量导入导出： + +```jsx +// 定义多个实用函数 +function add(a, b) { + return a + b +} + +function subtract(a, b) { + return a - b +} + +// 将这些函数添加到一个对象中并导出该对象 +module.exports = { + add, + subtract, +} +``` + +```jsx +// main.js + +// 引入 utils 模块 +var utils = require("./utils") + +// 使用 utils 模块中的函数 +var sum = utils.add(5, 3) +var difference = utils.subtract(8, 2) + +console.log("Sum:", sum) +console.log("Difference:", difference) +``` + +--- + +参考： diff --git a/src/content/post/Cta Button是什么.md b/src/content/post/Cta Button是什么.md new file mode 100644 index 0000000..6d0b88f --- /dev/null +++ b/src/content/post/Cta Button是什么.md @@ -0,0 +1,33 @@ +--- +link: 'https://kazoottt.notion.site/Cta-Button-71da9f4b9152422fa99acfef23f0eaca' +notionID: 71da9f4b-9152-422f-a99a-cfef23f0eaca +slug: whats-cta-button +published: true +description: >- + CTA按钮，即Call to + Action按钮，是网页、广告或应用程序中的重要设计元素，用于鼓励用户执行特定动作，如注册、购买或下载等。这些按钮通常设计醒目，包含清晰的文本和明确的指示，以吸引用户注意力并促使他们采取期望的行动。CTA按钮广泛应用于网站、广告、社交媒体和移动应用中，是数字营销和用户互动的关键组成部分。 +tags: + - CTA 按钮设计 + - CTA Button + - User Interaction + - 数字营销 +--- + +# Cta Button 是什么 + +[React Navbar - Flowbite](https://www.flowbite-react.com/docs/components/navbar#navbar-with-cta-button) + +CTA（Call to Action）按钮是网页、广告或应用程序中的一个设计元素，旨在鼓励用户执行特定的动作或行为。这个按钮通常包含明确的文本或图标，目的是引导用户完成某项任务，如注册、订阅、购买、下载、分享内容等。CTA 按钮的设计和文本通常是精心制定的，以吸引用户的注意力，并激发他们的兴趣，促使他们采取所期望的行动。 + +CTA 按钮通常具有醒目的颜色、清晰的文本和明确的指示，以便用户能够轻松地理解要采取的行动。它们在网站、广告、社交媒体帖子、电子邮件营销和移动应用中都广泛使用，是数字营销和用户互动的关键元素之一。 + +一些常见的 CTA 按钮示例包括： + +1. " 注册 " 按钮，用于引导用户创建账户。 +2. " 购买 " 按钮，用于鼓励用户购买产品或服务。 +3. " 了解更多 " 按钮，引导用户深入了解某一主题或产品。 +4. " 下载 " 按钮，用于鼓励用户下载应用程序、电子书或其他资源。 +5. " 分享 " 按钮，用于鼓励用户分享内容到社交媒体平台。 +6. " 订阅 " 按钮，引导用户订阅新闻简报、博客或电子邮件通讯。 + +CTA 按钮的设计和位置在用户体验和转化率方面非常重要，因此它们通常是设计和营销策略的核心组成部分。 diff --git a/src/content/post/LLM.md b/src/content/post/LLM.md new file mode 100644 index 0000000..80dc495 --- /dev/null +++ b/src/content/post/LLM.md @@ -0,0 +1,22 @@ +--- +slug: llm +published: true +description: >- + 本文介绍了大型语言模型（LLM）中的`temperature`参数如何影响模型的输出结果。当`temperature`值较低时，模型输出更确定的结果；而当该值较高时，模型可能产生更多样化或更具创造性的输出。此外，文章还提供了学习与AI沟通的资源链接，包括Learn + Prompting和Prompt Engineering Guide。 +tags: + - LLM + - temperature + - random，prompt engineering，生成型语言模型 +--- + +# LLM + +TODO + +`temperature`  的参数值越小，模型就会返回越确定的一个结果。如果调高该参数值，大语言模型可能会返回更随机的结果，也就是说这可能会带来更多样化或更具创造性的产出。 + +[欢迎 | Learn Prompting: Your Guide to Communicating with AI](https://learnprompting.org/zh-Hans/docs/intro) +[提示工程指南 | Prompt Engineering Guide](https://www.promptingguide.ai/zh) + +arxiv.org/abs/2201.11903 diff --git a/src/content/post/Page Visibility API.md b/src/content/post/Page Visibility API.md new file mode 100644 index 0000000..5511cce --- /dev/null +++ b/src/content/post/Page Visibility API.md @@ -0,0 +1,65 @@ +--- +title: Page Visibility API +date: 2024-05-22 +author: KazooTTT +type: Post +status: Published +tags: + - document + - mdn + - html + - pagevisibility +finished: true +published: true +slug: page-visibility-api +description: >- + The Page Visibility API is a web API related to the Document object, designed + to determine whether the current document is visible to users. It is + particularly useful for pausing and resuming animations and videos when the + user switches to a different tab, thereby conserving system resources and + battery life. Additionally, it can enhance user interaction by dynamically + changing the page title based on visibility status, such as changing the title + to "你快回来" when the tab is not in focus. The API is supported by various + resources and discussions, including those on GitHub and articles by experts + like Ruan Yifeng, ensuring its compatibility and practical application in web + development. +NotionID-notionnext: 3bd51bf2-356f-4059-9d12-e8321d422a49 +link-notionnext: >- + https://kazoottt.notion.site/Page-Visibility-API-3bd51bf2356f40599d12e8321d422a49 +rinId: 45 +--- + +# Page Visibility API + +[Page Visibility API - Web APIs | MDN](https://developer.mozilla.org/en-US/docs/Web/API/Page_Visibility_API) + +这是一个与 Domcument 有关的 API，主要用来判断当前的 document 是否可见。 + +具体的用途： + +- **暂停/恢复动画和视频**：当用户切换到其他标签页时，暂停正在播放的视频或动画，节省系统资源和电量。当用户返回该页面时，再恢复播放。 +- 为用户交互提供一些多样性，例如我们切换到其他的 tab 页的时候，博客对应的 tab 的标题变成了“你快回来”。 + +``` js +document.addEventListener("visibilitychange", function () { + if (document.visibilityState === "hidden") { + document.title = "你快回来"; + } else { + document.title = "原始标题"; + } +}); +``` + +## 协议以及相关的讨论 + +[GitHub - w3c/page-visibility: Page Visibility](https://github.com/w3c/page-visibility) + +[Editorial: remove note about hidden being 'historical' by marcoscaceres · Pull Request #64 · w3c/page-visibility · GitHub](https://github.com/w3c/page-visibility/pull/64) + +## 其他的资料 + +[Page Lifecycle API 教程 - 阮一峰的网络日志](https://www.ruanyifeng.com/blog/2018/11/page_lifecycle_api.html) + +[Page Visibility API 教程 - 阮一峰的网络日志](https://www.ruanyifeng.com/blog/2018/10/page_visibility_api.html) + +[使用 Page Visibility API  |  Articles  |  web.dev](https://web.dev/articles/pagevisibility-intro) 这篇文章很好地实现了兼容性 diff --git a/src/content/post/React设计原理阅读.md b/src/content/post/React设计原理阅读.md new file mode 100644 index 0000000..cec6014 --- /dev/null +++ b/src/content/post/React设计原理阅读.md @@ -0,0 +1,15 @@ +--- +slug: react-design-principles-reading +published: true +description: >- + React设计原理的核心概念是将用户界面（UI）定义为状态（state）的函数（f），即UI = + f(state)。这一公式简洁地表达了React如何通过状态的变化来更新界面的工作原理。 +tags: + - React设计原理 + - UI设计原理 + - 状态管理 +--- + +# React 设计原理阅读 + +UI = f(state) diff --git a/src/content/post/Telegram bot推荐 VidDlPBot.md b/src/content/post/Telegram bot推荐 VidDlPBot.md new file mode 100644 index 0000000..efeb19e --- /dev/null +++ b/src/content/post/Telegram bot推荐 VidDlPBot.md @@ -0,0 +1,34 @@ +--- +title: Telegram bot推荐 VidDlPBot +date: 2024-06-26 +author: KazooTTT +type: Post +status: Published +tags: + - Telegram + - 视频下载 + - VidDlPBot + - Twitter + - TikTok + - YouTube + - Instagram +finished: true +published: true +slug: telegram-bot-recommendation-viddlpbot +description: 推荐一款Telegram bot——VidDlPBot，可以轻松下载Twitter、TikTok、YouTube、Instagram的视频，操作简便。 +rinId: 60 +category: 软件 +toAstro: false +--- + +# Telegram Bot 推荐 VidDlPBot + +![CleanShot 2024-06-23 at 13.26.57@2x](https://pictures.kazoottt.top/2024/06/20240626-ab6dac2fda86c4569f09c9067e0616d6.png) + +目前已支持 Twitter、TikTok、YouTube、Instagram + +添加 bot 之后，直接输入要下载的链接给 bot，它就会返回下载好的视频给你了。超级方便。gemoo + +教学视频： + +[如何快速下载视频(手机端同理)\[telegram bot推荐#1\]\_哔哩哔哩\_bilibili](https://www.bilibili.com/video/BV1dGgkecEr7/) diff --git a/src/content/post/What I learn from dom-to-image.md b/src/content/post/What I learn from dom-to-image.md new file mode 100644 index 0000000..a61fbfb --- /dev/null +++ b/src/content/post/What I learn from dom-to-image.md @@ -0,0 +1,64 @@ +--- +slug: what-i-learn-from-dom-to-image +published: true +description: >- + This article explores the dom-to-image library, detailing the author's + experience with it, particularly in handling CORS issues when generating + images from DOM nodes. The author shares their journey of diving into the + source code to understand the library's functionality and to find alternative + solutions to CORS problems. They also discuss the structure of the project's + directory and highlight the importance of the README file and the main source + file, `src/dom-to-image.js`. +tags: + - dom-to-image + - CORS解决方案 + - DOM转化 + - Image生成 + - 前端开发 +--- + +# What I Learn from Dom-to-image + +the github repo url is below: + +[GitHub - tsayen/dom-to-image: Generates an image from a DOM node using HTML5 canvas](https://github.com/tsayen/dom-to-image) + +## Why I want to Read the Source Code of This Project? + +I use this lib to generate the image of mgclub post content. And When I use it, I found that it will throw out error because of [CORS](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS). +Finally, I convert the images to base64 in the server side to solve the problem. +But I wonder how the lib realize the function and how can I solve the CORS in other way. +So I start reading the source code of the project. + +## RoadMap + +## README + +the `README.md` is a good choice to start. +it tells me + +1. what dom-to-image it is and what can it do +2. install +3. the way to use it (pass in Dom node and render options) +4. how it works (svg foreignObject) + +## Directory Structure + +```plain text +├── Gruntfile.js // dev and build config +├── LICENSE // open source litcence +├── README.md +├── bower.json // bower config +├── bower_components // for bower enable +├── dist // output +├── karma.conf.js // test +├── node_modules +├── package.json +├── spec // test +├── src // *the main file +└── test-lib +``` + +So we should read the `src/dom-to-image.js` mainly. + +[[dom-to-image源代码解析]] diff --git a/src/content/post/agent-protocol代码阅读.md b/src/content/post/agent-protocol代码阅读.md new file mode 100644 index 0000000..79e9206 --- /dev/null +++ b/src/content/post/agent-protocol代码阅读.md @@ -0,0 +1,185 @@ +--- +title: agent-protocol +date: 2023-12-23 +author: KazooTTT +tags: + - JavaScript + - TypeScript + - Agent Protocol + - agent +published: true +slug: agent-protocol-code-study +description: >- + 本文详细介绍了一个名为Agent Protocol的JavaScript & TypeScript + SDK，该库旨在统一agent的规范，使不同agent之间的通信更为便捷。文章首先提供了库的文档和源代码地址，并解释了其主要功能和结构。接着，详细描述了库的入口点、目录结构以及如何使用tsup进行打包。此外，还深入探讨了库中包含的各种方法，如创建任务、列出任务ID、获取任务详情等，并解释了这些方法的内部逻辑和使用方式。最后，文章通过一个示例展示了如何使用Agent + Protocol启动服务，并详细解释了启动过程中的每一步。 +--- + +# Agent-protocol + +下面我们先来看一下这个库的代码 +文档地址： + +[JavaScript & TypeScript Agent Protocol SDK - Agent Protocol](https://agentprotocol.ai/sdks/js) +源代码地址： + +[js](https://github.com/AI-Engineer-Foundation/agent-protocol/tree/main/packages/sdk/js) + +这个库的作用是什么？ + +统一 agent 的规范，让不同的 agent 之间通信更加容易。 + +## 入口和目录结构 + +这个库使用的是 tsup 来打包。 + +```js +import { defineConfig } from "tsup" + +export default defineConfig({ + entry: ["src/index.ts"], + target: "node16", + platform: "node", + format: "cjs", + minify: true, + sourcemap: true, + dts: true, + loader: { + ".yml": "text", + }, +}) +``` + +在自定义 Loader 的时候有这样一行代码： + +```javascript +loader: { + '.yml': 'text', +} +``` + +表示了 Tsup 的加载器配置。这个配置指定了当 Tsup 打包你的应用时，如何处理特定文件类型（在这种情况下是.yml 文件）。 + +具体来说，这个配置告诉 Tsup 在处理.yml 文件时使用 text loader。也就是说遇到 yml 文件的时候，直接把它作为纯文本文件加载到你的应用中，不进行特殊的编译或转换。 + +然后整个项目的结构如下： + +![Pasted image 20231222231920](https://pictures.kazoottt.top/2023/12/20231223-cf324c088da5c1c9296b9167ee0a4780.webp) +其中 model 和 yml.d.ts 是用来定义类型的。 + +然后这个库的入口为 index.ts（从 tsup 的配置中也能看出来）, 因此只导入了 agent 和 model 模块，因此可以看出 api 是只在 agent 里面用的。 + +所以层级是： + +index.ts --> agent.ts --> api.ts + +最后导出的内容为： + +```typescript +export { + type TaskInput, + type Artifact, + type StepInput, + type StepOutput, + type Step, + type StepRequestBody, + type Task, + type TaskRequestBody, + type StepHandler, + type TaskHandler, + StepResultWithDefaults as StepResult, + createAgentTask, + listAgentTaskIDs, + getAgentTask, + listAgentTaskSteps, + executeAgentTaskStep, + getAgentTaskStep, +} + +export { v4 } from "uuid" + +export default Agent +``` + +## 具体的方法 + +对于 Type 我们可以先不看，直接看后面的方法 + +### 对于 StepResultWithDefaults + +这里是对于 StepResul 的一个初始化 + +### 对于 createAgentTask + +这个方法的作用是：Creates a task for the agent. 为代理创建任务。 + +输入是任务的信息 输出是全局的任务列表 +内部的逻辑是： + +跑一遍 taskHandler（从 Agent 外部传进来的） + +然后获取到 stepHandler +最后把任务的信息和 stepHandler 添加到全局的任务列表的最后 + +### 对于 listAgentTaskIDs + +Lists all tasks that have been created for the agent. +列出为代理创建的所有任务。 + +这里的逻辑很简单，就是去遍历全局的 tasks 把它的用 uuid 创建的 task_id 给取出来放到一个数组里 + +### 对于 getAgentTask + +Get details about a specified agent task. +获取指定代理任务的详细信息。 + +传入 task_id，获取 task item 的信息（也就是 task 和 stephandler 的信息） + +### 对于 listAgentTaskSteps + +Lists all steps for the specified task. +列出指定任务的所有步骤。 + +根据 task_id 来查询这个 task 的所有的步骤 id + +### 对于 executeAgentTaskStep + +Execute a step in the specified agent task. +执行指定代理任务中的一个步骤。 + +传入 taskId +获取到对应的所有的任务 +执行 stephandler，获取到结果 +然后创建一个 step，把任务的 id ,step 执行结果给存进去 +最后把这个 step 给添加到一个全局的 step_list 的最后 + +### 对于 getAgentTaskStep + +Get details about a specified task step. +输入 task 和 step 的 id,查询这个 step 具体的信息 + +### 然后是最后的 Agent + +它有一个静态的方法 taskHandler + +和对外提供服务的接口化的方法 start() +它把上述所有的方法都用 express 给构建成了服务 + +## 如何使用？ + +[minimal.ts](https://github.com/AI-Engineer-Foundation/agent-protocol/blob/main/packages/sdk/js/examples/minimal.ts) +`Agent.handleTask(taskHandler).start()` + +使用 Agent.handleTask(taskHandler).start() 来启动服务，过程中发生了什么 + +`Agent.handleTask(taskHandler).start()` 这一行代码的目的是通过调用 `Agent` 类的静态方法 `handleTask` 来创建一个 `Agent` 实例，然后立即调用该实例的 `start` 方法来启动服务。让我解释这个过程中发生的事情： + +1. `Agent.handleTask(taskHandler)`：首先，`Agent.handleTask` 是一个静态方法，它接受两个参数，第一个参数是 `taskHandler`（任务处理程序），第二个参数是一个部分代理配置。这个方法的目的是创建一个新的 `Agent` 实例，并将 `taskHandler` 和代理配置传递给该实例的构造函数。实际上，这一步返回了一个 `Agent` 实例。 +2. `.start()`: 一旦 `Agent.handleTask(taskHandler)` 返回一个 `Agent` 实例，紧接着调用了 `start()` 方法。这个方法用于启动代理服务。 + + - 在内部调用 `createApi(config)`，是用于创建代理的 API。 + +总结起来，`Agent.handleTask(taskHandler).start()` 这一行代码的作用是： + +1. 创建一个代理实例，该实例具有指定的任务处理程序和配置信息。 +2. 启动代理服务，并根据提供的或默认的端口号监听客户端请求。 diff --git a/src/content/post/agent合集.md b/src/content/post/agent合集.md new file mode 100644 index 0000000..1802f4b --- /dev/null +++ b/src/content/post/agent合集.md @@ -0,0 +1,18 @@ +--- +slug: agent-collection +published: true +description: >2- + 探索ICLR 2024年基于大型语言模型（LLM）的智能代理论文合集，该合集收录了最新的研究成果，为研究者和开发者提供了丰富的资源和灵感。 + slug: iclr-2024-llm-based-agent-论文合集 tags: ICLR 2024, LLM-based Agent, 论文合集, + 人工智能研究 description: 本合集汇集了ICLR + 2024年关于基于大型语言模型的智能代理的最新研究论文，为人工智能领域的研究者和开发者提供了一个宝贵的资源库。 +tags: + - Agent + - ICLR 2024 + - LLM + - 机器人 +--- + +# Agent 合集 + +[ICLR 2024 LLM-based Agent论文合集](https://www.aminer.cn/topic/65409b681512231370cbf681) diff --git a/src/content/post/ant design pro i18n-remove报错.md b/src/content/post/ant design pro i18n-remove报错.md new file mode 100644 index 0000000..70d57f7 --- /dev/null +++ b/src/content/post/ant design pro i18n-remove报错.md @@ -0,0 +1,70 @@ +--- +title: ant design pro i18n-remove报错 +date: 2024-02-13 +author: KazooTTT +tags: + - antd + - eslint + - bugFix +finished: true +published: true +slug: ant-design-pro-i18n-remove +link: >- + https://kazoottt.notion.site/ant-design-pro-i18n-remove-6e2a745902ca4600ae306437f0cd1a9f +notionID: 6e2a7459-02ca-4600-ae30-6437f0cd1a9f +description: >- + 在执行ant design + pro的i18n-remove任务时，遇到了一个报错，错误信息显示环境键“es2022”未知。解决方法是注释掉.eslintrc.js文件中的extends部分。此问题在GitHub的ant-design/ant-design-pro仓库的Issue + #10620中有详细讨论。 +rinId: 66 +--- + +# Ant Design pro i18n-remove 报错 + +报错日志： + +``` +* 正在执行任务: pnpm run i18n-remove + +> ant-design-pro@6.0.0 i18n-remove /Users/kazoottt/GitHub/KazooTTT/toolkit + +> pro i18n-remove --locale=zh-CN --write + +✔ 📦 load all locale file and build ts + +✔ ✂️ format routes + +⠋ ✂️ remove locale for src/components/Footer/index.tsx./Users/kazoottt/GitHub/KazooTTT/toolkit/node_modules/.pnpm/@eslint+eslintrc@0.4.3/node_modules/@eslint/eslintrc/lib/shared/config-validator.js:175 + +throw new Error(message); + +^ + +Error: .eslintrc.js » /Users/kazoottt/GitHub/KazooTTT/toolkit/node_modules/.pnpm/@umijs+lint@4.0.52_eslint@8.34.0_jest@29.4.3_styled-components@6.1.8_stylelint@14.8.2_typescript@4.9.5/node_modules/@umijs/lint/dist/config/eslint/index.js: + +Environment key "es2022" is unknown + + +``` + +也就是 + +> Environment key "es2022" is unknown + +这里报错了 + +解决方法：注释掉 extends 这里 + +```js +module.exports = { + // extends: [require.resolve('@umijs/lint/dist/config/eslint')], + globals: { + page: true, + REACT_APP_ENV: true, + }, +} +``` + +## 参考 + +[yarn run i18n-remove报错🐛 \[BUG\] · Issue #10620 · ant-design/ant-design-pro · GitHub](https://github.com/ant-design/ant-design-pro/issues/10620) diff --git a/src/content/post/antd switch组件错误使用案例.md b/src/content/post/antd switch组件错误使用案例.md new file mode 100644 index 0000000..49eb8c5 --- /dev/null +++ b/src/content/post/antd switch组件错误使用案例.md @@ -0,0 +1,25 @@ +--- +title: antd switch组件错误使用案例 +date: 2024-10-12 +author: KazooTTT +tags: + - bug +finished: true +published: true +description: >- + antd的switch组件错误使用案例：当使用到antd的[switch](https://ant-design.antgroup.com/components/switch-cn)组件时，需要注意其api的使用。典型情况是，将checked状态与mode关联起来，并在mode变化时触发回调，然而，这种写法会导致切换switch时不会触发回调，而是等待-checked状态改变时才触发。正确的方法是使用onClick事件而不是onChange，这样可以让切换switch时触发回调。 +slug: antd-switch-component-misuse-example +toAstro: false +--- + +# antd switch 组件错误使用案例 + +在使用 antd 的 [switch](https://ant-design.antgroup.com/components/switch-cn) 的时候,我错误地使用了 api + +``` tsx + +``` + +这里的 onChange 是 cheked 变化的时候触发的回调,如果想要切换 Switch 的时候触发回调,应该使用 onClick，而不是 onChange。 + +![](https://pictures.kazoottt.top/2024/10/20241012-3c8ddd04bc2a657d8a1a265e48b533fb.png) diff --git a/src/content/post/arm64和x64与苹果芯片的关系备忘.md b/src/content/post/arm64和x64与苹果芯片的关系备忘.md new file mode 100644 index 0000000..66f5bdb --- /dev/null +++ b/src/content/post/arm64和x64与苹果芯片的关系备忘.md @@ -0,0 +1,21 @@ +--- +title: arm64和x64与苹果芯片的关系备忘 +date: 2023-10-16 +author: KazooTTT +tags: + - 备忘 +published: true +link: 'https://kazoottt.notion.site/arm64-x64-b527f80503f241d3a0f20503eb8a9c0c' +notionID: b527f805-03f2-41d3-a0f2-0503eb8a9c0c +slug: memo-on-arm64-and-x64-in-relation-to-apple-chips +description: >- + 本文旨在帮助读者理解并记忆arm64（aarch64）与x86_64架构的区别及其与苹果芯片和Intel芯片的关系。通过简明的记录，指导读者在选择硬件时如何根据芯片类型做出正确的决策。 +toAstro: false +--- + +# Arm64 和 X64 与苹果芯片的关系备忘 + +一直记不住应该如何选择，在这里记录备忘一下 + +aarch64 or arm64 - 苹果芯片 +x86_64 - Intel 芯片 diff --git a/src/content/post/astro启动报错address not available.md b/src/content/post/astro启动报错address not available.md new file mode 100644 index 0000000..d98e69d --- /dev/null +++ b/src/content/post/astro启动报错address not available.md @@ -0,0 +1,44 @@ +--- +title: astro启动报错address not available +date: 2024-03-03 +author: KazooTTT +tags: + - astro + - ipv6 + - node +finished: true +published: true +slug: astroaddress-not-available +description: >- + To resolve the issue with the Astro configuration, modify the + `astro.config.mjs` file by setting the `server.host` to `0.0.0.0`. This change + allows the server to accept connections from any IP address, enhancing + accessibility and functionality of the application. The updated configuration + includes integrations for MDX, sitemap, and Tailwind, ensuring a robust and + optimized web development setup. +rinId: 67 +--- + +# Astro 启动报错 address not Available + +![[IMG-20250104114645260.png]] + +解决方法： + +在 `astro.config.mjs` 修改 server.host 为 `0.0.0.0` + +```js +import { defineConfig } from "astro/config" +import mdx from "@astrojs/mdx" +import sitemap from "@astrojs/sitemap" +import tailwind from "@astrojs/tailwind" + +// https://astro.build/config +export default defineConfig({ + site: "https://astrofy-template.netlify.app", + integrations: [mdx(), sitemap(), tailwind()], + server: { + host: "0.0.0.0", + }, +}) +``` diff --git a/src/content/post/bento专题.md b/src/content/post/bento专题.md new file mode 100644 index 0000000..0f28447 --- /dev/null +++ b/src/content/post/bento专题.md @@ -0,0 +1,20 @@ +--- +slug: bento-topics +published: true +description: >- + Bento专题介绍了两种不同的网页设计工具：Bento风格的起始页和Packery无缝可拖动的网格布局。Bento风格的起始页提供了一个简洁的GitHub项目链接，而Packery则是一个用于创建无缝且可拖动网格布局的工具。这些资源为网页设计师提供了创新的设计思路和实用的布局工具。 +tags: + - bento布局 + - packery网格布局 +--- + +# Bento 专题 + +## Bento 风格的起始页 + + +![img_1.png](已完成/attachment/bento专题/img_1.png) + +## packery: 无缝、可拖动的网格布局 + + diff --git a/src/content/post/bilibili-rec-auto-ffmpeg.md b/src/content/post/bilibili-rec-auto-ffmpeg.md new file mode 100644 index 0000000..2e75925 --- /dev/null +++ b/src/content/post/bilibili-rec-auto-ffmpeg.md @@ -0,0 +1,27 @@ +--- +slug: bilibili-rec-auto-ffmpeg +published: true +description: >- + bilibili-rec-auto-ffmpeg是一个自动化工具，用于处理B站录播机的录播内容，包括弹幕的转化和压制。该工具使用ffmpeg进行视频格式转换和弹幕处理，支持将xml格式的弹幕转换为ass格式，并将flv视频转换为mp4格式。此外，还提供弹幕与视频的压制功能，以及danmakufactory的webui界面，方便用户进行操作和管理。 +tags: + - bilibili + - ffmpeg + - 录播处理 + - 弹幕转化 + - 视频压制 + - danmakufactory +--- + +# Bilibili-rec-auto-ffmpeg + +自动使用 ffmpeg 处理 b 站录播机的录播，弹幕转化，以及弹幕压制到录播内。 + +## TODO + +- [ ] xml 转 ass (使用 danmakufactory) +- [ ] flv 转 mp4 +- [ ] ass 弹幕 + 视频压制 + +danmakufactory webui + +## 开发 \ No newline at end of file diff --git a/src/content/post/blender学习资源.md b/src/content/post/blender学习资源.md new file mode 100644 index 0000000..12fea03 --- /dev/null +++ b/src/content/post/blender学习资源.md @@ -0,0 +1,16 @@ +--- +slug: blender-learning-resources +published: true +description: 本资源提供了两个学习Blender的途径：羊羊羊的教室和暗房。羊羊羊的教室展示了Blender的截图，而暗房则未详细说明其内容。 +tags: + - blender学习资源 + - 羊羊教室 + - Blender screenshot +--- + +# Blender 学习资源 + +1. 羊羊羊的教室 + ![blender截图|375](https://pictures.kazoottt.top/2024/04/20240407-a0bf794f456e0bae71febb04069bc63e.png) + +2. 暗房 diff --git a/src/content/post/bossdesign.cn.md b/src/content/post/bossdesign.cn.md new file mode 100644 index 0000000..45ce5ef --- /dev/null +++ b/src/content/post/bossdesign.cn.md @@ -0,0 +1,25 @@ +--- +title: bossdesign.cn +date: 2023-09-24 +author: KazooTTT +tags: + - 网站推荐 + - 设计 + - gradient + - svg背景图 + - 项目推荐 +finished: true +published: true +slug: bossdesigncn +description: >- + 在寻找gradient和svg背景图时，bossdesign.cn网站提供了许多优秀的推荐。如果有相关需求，可以直接访问该网站获取推荐资源。网址为：。 +rinId: 68 +--- + +# bossdesign.cn + +昨天搜 gradient 和 svg 背景图的时候，都在这个网站上找打了很棒的推荐。所以如果有相关的需求的话，可以直接检索这个网站的推荐。 + + + +![[IMG-20250104114645360.png]] diff --git a/src/content/post/b站首页的背景图跟随鼠标移动是如何实现的？.md b/src/content/post/b站首页的背景图跟随鼠标移动是如何实现的？.md new file mode 100644 index 0000000..ce0eb28 --- /dev/null +++ b/src/content/post/b站首页的背景图跟随鼠标移动是如何实现的？.md @@ -0,0 +1,41 @@ +--- +slug: >- + how-is-the-background-image-on-the-home-page-of-b-site-realized-to-follow-the-mouse-movement +published: true +description: >- + B站首页的背景图跟随鼠标移动的效果，是通过JavaScript结合HTML5的canvas元素实现的。具体步骤包括创建canvas元素、监听鼠标移动事件以获取位置坐标、根据鼠标位置计算图像绘制参数、使用canvas的绘图API更新图像帧，并通过requestAnimationFrame实现动画循环。这种技术不仅限于canvas，也可以使用CSS3动画或Web + Animation API来实现类似效果，具体方法需根据项目需求和技术框架来选择。 +tags: + - b 站首页背景图、javascript、canvas、鼠标事件 +--- + +# b 站首页的背景图跟随鼠标移动是如何实现的？ + +其实 b 站首页的背景图会跟着季节或者某些特殊的节日变化，里面也会有一些小细节。 + +今天看的时候突然发现鼠标悬浮上去，然后左右移动的时候，这个背景图片会跟随鼠标移动。如下图所示： + +![[IMG-20250104114645478.gif]] + +那么这样的效果是如何实现的呢？我们就来探究一下。 + +打开 F12，把无关的元素给删掉，只留下这个 banner 相关的 div，显示的效果如下： + +![[IMG-20250104114647084.png]] +dom 树中结构如下： + +![[IMG-20250104114650176.png]] + +来自 claude: + +这种画面随着鼠标移动的效果可以通过 JavaScript 来实现。常见的方式是使用 HTML5 canvas 元素结合鼠标事件监听来绘制和更新动画效果。 + +基本步骤如下: + +1. 创建一个 canvas 元素并获取它的 2D 渲染上下文。 +2. 使用 JavaScript 监听鼠标移动事件,获取鼠标位置坐标。 +3. 在鼠标事件处理函数中,根据鼠标位置坐标计算出需要绘制图像的位置和角度等参数。 +4. 使用 canvas 的绘图 API 在每一帧中清空上一帧,并根据计算出的参数重新绘制新的一帧图像。 +5. 使用 requestAnimationFrame 或 setTimeout 等方式实现动画帧的循环更新。 + +除了基于 canvas 的方式外,也可以使用 CSS3 动画或 Web Animation API 等方式来实现类似的动画效果,但原理都是根据鼠标位置不断更新和重绘图像帧。具体实现方式需要结合使用的技术框架和项目需求来设计。 diff --git a/src/content/post/codegen学习.md b/src/content/post/codegen学习.md new file mode 100644 index 0000000..b6b1965 --- /dev/null +++ b/src/content/post/codegen学习.md @@ -0,0 +1,49 @@ +--- +title: codegen学习 +date: 2024-03-22 +author: KazooTTT +tags: [] +finished: false +published: true +slug: codegen-learning +description: >- + AutoGen项目是一个编程框架，用于构建智能代理AI。它包括后端和前端两部分，后端使用Python实现，依赖于`pyproject.toml`文件，而前端与后端通过RESTful服务进行通信。项目提供了详细的安装指南和启动命令，使得开发者可以轻松地开始使用。此外，AutoGen还提供了示例代码和社区支持，方便用户学习和交流。 +--- + +# Codegen 学习 + +官网地址 [AutoGen | AutoGen](https://microsoft.github.io/autogen/) + +代码地址 [GitHub - microsoft/autogen: A programming framework for agentic AI. Join our Discord: https://discord.gg/pAbnFJrkgZ](https://github.com/microsoft/autogen) + +## 从 samples 开始 + +![[IMG-20250104114646165.png]] + +目前有三个 app，直接看第二个 autogen-studio + +项目分为两个部分，一个是后端（autogen + restful 服务）一个是前端，前端与后端是通过 restful 来通信的。 + +## 后端 + +后端使用 python 实现，依赖文件在 `pyproject.toml` + +如何安装依赖？ + +创建虚拟环境并 activate，然后输入一下命令，就会安装对应的依赖。 + +```shell +pip install -e . +``` + +启动命令： + +```shell +autogenstudio ui --port 8081 +``` + +## 后端 Autogen + +## 后端 Restful 服务 + +## 前端 \ No newline at end of file diff --git a/src/content/post/codeimage.dev 代码美化工具.md b/src/content/post/codeimage.dev 代码美化工具.md new file mode 100644 index 0000000..1c91e1c --- /dev/null +++ b/src/content/post/codeimage.dev 代码美化工具.md @@ -0,0 +1,32 @@ +--- +title: codeimage.dev 代码美化工具 +date: 2023-09-19 +author: KazooTTT +tags: + - solidjs + - 开源项目 + - 项目推荐 + - 代码美化 +finished: true +published: true +slug: codeimagedev-code-beautification-tool +description: >- + 代码美化工具codeimage.dev，专为美化代码屏幕截图设计。用户可以直接复制粘贴代码，选择预设模板或自定义样式，然后导出美化后的截图。登录后还可保存个人预设。该工具基于SolidJS和Fastify构建，不仅实用，也是学习SolidJS的好资源。 +rinId: 69 +--- + +# codeimage.dev 代码美化工具 + + + + + +A tool to beautify your code screenshots. Built with SolidJS and Fastify. + +美化代码屏幕截图的工具。使用 SolidJS 和 Fastify 构建。 + +直接把代码复制粘贴进去，然后挑选预设模板，或自己调整样式，最后导出既可。如果登录之后，也可以保存预设。 + +无论是实用性还是从 solidjs 学习层面都挺有用的。 + +![[IMG-20250104114646168.png]] diff --git a/src/content/post/convert list like into list.md b/src/content/post/convert list like into list.md new file mode 100644 index 0000000..3a2786b --- /dev/null +++ b/src/content/post/convert list like into list.md @@ -0,0 +1,53 @@ +--- +title: convert list like into list +date: 2024-06-03 +author: KazooTTT +type: Post +status: Draft +tags: [] +finished: true +published: true +slug: convert-list-like-into-list +rinId: 70 +description: 如何使用 NodeList 转换为 Array 进行 map 操作 +--- + +# Convert List like into List + +```js +document.querySelectorAll(".dir-item").map((item) => item.innerText) +``` + +The error `document.querySelectorAll(...).map is not a function` occurs because `querySelectorAll` returns a `NodeList`, which is not an Array and does not have the `map` method. To solve this, you can convert the `NodeList` to an Array using one of the following methods: + +1. **Spread Operator** + +```javascript +const items = [...document.querySelectorAll(".dir-item")] +const itemTexts = items.map((item) => item.innerText) +``` + +1. **Array.from()** + +```javascript +const items = Array.from(document.querySelectorAll(".dir-item")) +const itemTexts = items.map((item) => item.innerText) +``` + +1. **Array.prototype.slice.call()** + +```javascript +const items = Array.prototype.slice.call(document.querySelectorAll(".dir-item")) +const itemTexts = items.map((item) => item.innerText) +``` + +After converting the `NodeList` to an Array, you can then use the `map` method to get the `innerText` of each element. + +Here's an example using the spread operator: + +```javascript +const itemTexts = [...document.querySelectorAll(".dir-item")].map((item) => item.innerText) +console.log(itemTexts) +``` + +This will give you an array of the text content of each element with the class `dir-item`. diff --git a/src/content/post/cra系列比较.md b/src/content/post/cra系列比较.md new file mode 100644 index 0000000..4f386e7 --- /dev/null +++ b/src/content/post/cra系列比较.md @@ -0,0 +1,47 @@ +--- +title: cra系列比较 +date: 2024-03-27 +author: KazooTTT +tags: + - react + - create-reaat-app + - 脚手架 +finished: true +published: true +slug: cra-series-comparison +description: >- + craco是目前仍在更新的Create React + App配置覆盖工具，相比其他已多年未更新的类似项目，如react-app-rewired和customize-cra，craco是一个更好的选择。尽管React官网已不再推荐使用Create + React App，但对于需要使用该系列工具的用户，craco提供了更新的支持和更易理解的配置层。 +NotionID-notionnext: 62b39e52-62d0-4cae-b17b-9c280dd513a7 +link-notionnext: "https://kazoottt.notion.site/cra-62b39e5262d04caeb17b9c280dd513a7" +rinId: 46 +--- + +# Cra 系列比较 + +省流版：craco 目前还算在更新，其他的已经几年未更新了。虽然 react 官网已经不推荐 cra 了，但如果非要用这个系列还是推荐 craco 吧。 + +## [GitHub - dilanx/craco: Create React App Configuration Override, an easy and comprehensible configuration layer for Create React App.](https://github.com/dilanx/craco) + +3 个月前 + +![Pasted image 20240311170529](https://pictures.kazoottt.top/2024/03/20240327-c21b6a61f5cd55e40069d33b765ed888.png) + +## [GitHub - facebook/create-react-app: Set up a modern web app by running one command.](https://github.com/facebook/create-react-app) + +9 个月前 + +![Pasted image 20240311170738](https://pictures.kazoottt.top/2024/03/20240327-5ec113719eb368d5aa9271b237f91803.png) + +## [GitHub - timarney/react-app-rewired: Override create-react-app webpack configs without ejecting](https://github.com/timarney/react-app-rewired) + +2 年前 + +![Pasted image 20240311170511](https://pictures.kazoottt.top/2024/03/20240327-3c35b90cfe5ebb096f20fde171a40566.png) + +## [GitHub - arackaf/customize-cra: Override webpack configurations for create-react-app 2.0](https://github.com/arackaf/customize-cra) + +4 年前 + +![Pasted image 20240311170536](https://pictures.kazoottt.top/2024/03/20240327-329d5863715bd58be21079e5f670cfee.png) diff --git a/src/content/post/dom-to-image源代码解析.md b/src/content/post/dom-to-image源代码解析.md new file mode 100644 index 0000000..f600c88 --- /dev/null +++ b/src/content/post/dom-to-image源代码解析.md @@ -0,0 +1,192 @@ +--- +slug: source-code-analysis-of-dom-to-image +published: true +description: >- + 本文详细解析了GitHub上的开源项目dom-to-image的源代码，该项目能够通过HTML5 + canvas从DOM节点生成图像。作者通过阅读和注释源代码，分享了其工作流程，包括递归克隆DOM节点、计算并复制样式、嵌入Web字体和图像、序列化节点为XML等步骤。此外，作者还讨论了使用该库开发截图应用的背景和动机，以及如何将帖子内容转换为图片以解决论坛分享问题。文章最后提供了toSvg函数的代码实现和分析，展示了如何将DOM节点转换为SVG数据URL。 +tags: + - >- + Looks like you want me to write code based on the specifications you + provided. However + - >- + I need a bit more information from you. The specifications mention various + functions and their implementations in the `dom-to-image` library + - >- + but they don't provide enough context for me to write the entire code. + Could you please provide more details or clarify which specific parts of the + code you'd like me to implement? Additionally + - >- + are there any specific requirements or constraints I should be aware of + while writing the code? + Once I have a better understanding of what's required + - I'll do my best to assist you in generating the code. +--- + +# Dom-to-image 源代码解析 + +仓库地址 [GitHub - tsayen/dom-to-image: Generates an image from a DOM node using HTML5 canvas](https://github.com/tsayen/dom-to-image) + +我写了注释的地址：[om-to-image](https://github.com/KazooTTT/dom-to-image/tree/code-reading) + +分支是：code-reading 这个分支。 + +## 背景 + +开一个 thread 来记录阅读 dom-to-image 源代码的收获和感受。 + +是怎么发现这个库的？起因是想要快速制作封面于是找到了 [https://coverview.vercel.app](https://t.co/7Zzs7Av0kp) 这个网站，习惯性地 fork 了代码然后进行学习参考，发现这个网站的使用了 [dom-to-image](https://t.co/X434ulYzzh) 这个库。 + +为什么要阅读这个库的代码？因为我所使用的一个论坛没有提供分享内容为图片的功能，并且是小众应用，所以发送帖子链接到 qq 的时候，会被腾讯屏蔽无法直接打开，体验非常不好。所以我想开发一个分享帖子内容的功能。 + +而这个功能前期我有两种思路，第一种是使用 pptr 截图，第二种是把帖子内容渲染出来生成图片（联想到了之前 coverview 的思路，也就是使用 dom-to-image 了）。最后放弃 pptr 的原因是 vercel 的请求超过 10 秒则超时，而 pptr 的启动 +api 调用往往超过了这个时间，更别说服务之间的时间了。 + +不过市面上的截图 api 已经很成熟了，例如 [https://screenshotone.com](https://t.co/OC77w4GJRX) 可以直接调用，最近大热的 [https://screenshottocode.com](https://t.co/7LYVHIGjmR) 也是使用的上述 api 进行截图，而 cali 老师的博客使用的是 [https://urlbox.io](https://t.co/1kV1dVmLQ8) 这个 api。其他的就不一一列举了。 + +回到正题，于是我开始使用 dom-to-image 开始开发我的自己的截图应用。我能够直接根据帖子的链接，拿到对应的 post 的 content，content 由富文本编辑器编辑，因此保存的内容直接是 html，我只需要手动新增一下和社区类似的样式就可以渲染出差不多的帖子界面，然后调用 dom-to-image 截图。 + +## 开始 + +我们从 readme 入手,其实作者已经非常清晰地讲解了这个库的工作流程。 + +[GitHub - tsayen/dom-to-image: Generates an image from a DOM node using HTML5 canvas](https://github.com/tsayen/dom-to-image?tab=readme-ov-file#how-it-works) + +以下为内容引用以及翻译 + +1. Clone the original DOM node recursively + 递归克隆原始 DOM 节点 +2. Compute the style for the node and each sub-node and copy it to corresponding clone + 计算节点和每个子节点的样式，并将其复制到相应的克隆 + + - and don't forget to recreate pseudo-elements, as they are not cloned in any way, of course + 并且不要忘记重新创建伪元素，因为它们当然不会以任何方式克隆 + +3. Embed web fonts  嵌入 Web 字体 + + - find all the `@font-face` declarations that might represent web fonts + 查找可能表示 Web 字体的所有  `@font-face`  声明 + - parse file URLs, download corresponding files + 解析文件 URL，下载相应文件 + - base64-encode and inline content as `data:` URLs + base64 编码和内联内容作为  `data:` URL + - concatenate all the processed CSS rules and put them into one `