mirror of
https://github.com/KazooTTT/kazoottt-blog.git
synced 2025-06-22 18:21:33 +08:00
Update docs and sort content
This commit is contained in:
github-actions[bot]
56
src/content/post/141.环形链表.md
Normal file
56
src/content/post/141.环形链表.md
Normal file
@ -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
|
||||
```
|
||||
|
||||
|
||||
16
src/content/post/142.环形链表-ii.md
Normal file
16
src/content/post/142.环形链表-ii.md
Normal file
@ -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
|
||||
23
src/content/post/2023-02-21.md
Normal file
23
src/content/post/2023-02-21.md
Normal file
@ -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 也就很自然了。
|
||||
|
||||
|
||||
25
src/content/post/2023-10-07.md
Normal file
25
src/content/post/2023-10-07.md
Normal file
@ -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 星期六
|
||||
|
||||
<!-- start of weread -->
|
||||
<!-- end of weread -->
|
||||
|
||||
## 今天要做的事情
|
||||
|
||||
[[2023 国庆厦门和杭州之行]]
|
||||
|
||||
## 打卡
|
||||
|
||||
## Inbox
|
||||
25
src/content/post/2023-10-19.md
Normal file
25
src/content/post/2023-10-19.md
Normal file
@ -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 星期四
|
||||
|
||||
<!-- start of weread -->
|
||||
<!-- end of weread -->
|
||||
|
||||
## 今天要做的事情
|
||||
|
||||
xlsx util 发包，实现输入列的索引，输出 A B 这样真实的列名
|
||||
|
||||
## 打卡
|
||||
|
||||
## Inbox
|
||||
27
src/content/post/2023-10-28.md
Normal file
27
src/content/post/2023-10-28.md
Normal file
@ -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
|
||||
|
||||
<!-- start of weread -->
|
||||
<!-- end of weread -->
|
||||
31
src/content/post/2024-03-05 刷题.md
Normal file
31
src/content/post/2024-03-05 刷题.md
Normal file
@ -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)** 删除重复出现的元素
|
||||
67
src/content/post/86.分隔链表.md
Normal file
67
src/content/post/86.分隔链表.md
Normal file
@ -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
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
|
||||
可以看出内存还有很大的优化空间
|
||||
30
src/content/post/AI大局.md
Normal file
30
src/content/post/AI大局.md
Normal file
@ -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
|
||||
---
|
||||
|
||||
# 大局
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
基础大模型落地面临两大难题，一是终端客户对算力成本的接受能力，二是大模型虽擅长通用领域问题，但往往在垂直行业任务中表现欠佳。因此，基础大模型会通过领域数据或专属知识库进行训练和调优，形成垂直领域的行业大模型或业务大模型；此外，部分企业还具有深度定制、私有化部署的需求，需要在行业大模型基础上，进一步加入企业专有数据进行训练或微调，形成企业级大模型。
|
||||
|
||||
[2023 年中国 AIGC 产业全景报告 | 艾瑞咨询 - 实时互动网](https://www.nxrte.com/zixun/31964.html)
|
||||
|
||||
中间层
|
||||
应用层
|
||||
26
src/content/post/AI相关名词.md
Normal file
26
src/content/post/AI相关名词.md
Normal file
@ -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)
|
||||
@ -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, <rmadden29@bloomberg.net>, +1 (646) 807-2213
|
||||
41
src/content/post/CSS随用随记.md
Normal file
41
src/content/post/CSS随用随记.md
Normal file
@ -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);
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
|
||||
## 2. 请给 Html 模块的 Div 元素加一个后伪元素，且后伪元素的宽度和高度都是 20px，背景颜色为 "rgb(255, 0, 0)"
|
||||
|
||||
|
||||
|
||||
## 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:
|
||||
|
||||
<a href='/2022/11/15/清除浮动/'>CSS | 清除浮动</a>
|
||||
@ -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 而言，这说明自控力“并非内在品质，而是我们所处环境的反映。”通过微调环境，我们也许能够模仿那些看起来更有自制力的人。
|
||||
|
||||
> 成功的自控，实际上来自于有效隐藏诱惑
|
||||
105
src/content/post/CommonJS简介.md
Normal file
105
src/content/post/CommonJS简介.md
Normal file
@ -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)
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
参考：
|
||||
33
src/content/post/Cta Button是什么.md
Normal file
33
src/content/post/Cta Button是什么.md
Normal file
@ -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 按钮的设计和位置在用户体验和转化率方面非常重要，因此它们通常是设计和营销策略的核心组成部分。
|
||||
22
src/content/post/LLM.md
Normal file
22
src/content/post/LLM.md
Normal file
@ -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
|
||||
65
src/content/post/Page Visibility API.md
Normal file
65
src/content/post/Page Visibility API.md
Normal file
@ -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) 这篇文章很好地实现了兼容性
|
||||
15
src/content/post/React设计原理阅读.md
Normal file
15
src/content/post/React设计原理阅读.md
Normal file
@ -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)
|
||||
34
src/content/post/Telegram bot推荐 VidDlPBot.md
Normal file
34
src/content/post/Telegram bot推荐 VidDlPBot.md
Normal file
@ -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
|
||||
|
||||
|
||||
|
||||
目前已支持 Twitter、TikTok、YouTube、Instagram
|
||||
|
||||
添加 bot 之后，直接输入要下载的链接给 bot，它就会返回下载好的视频给你了。超级方便。gemoo
|
||||
|
||||
教学视频：
|
||||
|
||||
[如何快速下载视频(手机端同理)\[telegram bot推荐#1\]\_哔哩哔哩\_bilibili](https://www.bilibili.com/video/BV1dGgkecEr7/)
|
||||
64
src/content/post/What I learn from dom-to-image.md
Normal file
64
src/content/post/What I learn from dom-to-image.md
Normal file
@ -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源代码解析]]
|
||||
185
src/content/post/agent-protocol代码阅读.md
Normal file
185
src/content/post/agent-protocol代码阅读.md
Normal file
@ -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 文件的时候，直接把它作为纯文本文件加载到你的应用中，不进行特殊的编译或转换。
|
||||
|
||||
然后整个项目的结构如下：
|
||||
|
||||
|
||||
其中 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. 启动代理服务，并根据提供的或默认的端口号监听客户端请求。
|
||||
18
src/content/post/agent合集.md
Normal file
18
src/content/post/agent合集.md
Normal file
@ -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)
|
||||
70
src/content/post/ant design pro i18n-remove报错.md
Normal file
70
src/content/post/ant design pro i18n-remove报错.md
Normal file
@ -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)
|
||||
25
src/content/post/antd switch组件错误使用案例.md
Normal file
25
src/content/post/antd switch组件错误使用案例.md
Normal file
@ -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
|
||||
<Switch checked={mode === 1} onChange={handleModeChange} />
|
||||
```
|
||||
|
||||
这里的 onChange 是 cheked 变化的时候触发的回调,如果想要切换 Switch 的时候触发回调,应该使用 onClick，而不是 onChange。
|
||||
|
||||
|
||||
21
src/content/post/arm64和x64与苹果芯片的关系备忘.md
Normal file
21
src/content/post/arm64和x64与苹果芯片的关系备忘.md
Normal file
@ -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 芯片
|
||||
44
src/content/post/astro启动报错address not available.md
Normal file
44
src/content/post/astro启动报错address not available.md
Normal file
@ -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",
|
||||
},
|
||||
})
|
||||
```
|
||||
20
src/content/post/bento专题.md
Normal file
20
src/content/post/bento专题.md
Normal file
@ -0,0 +1,20 @@
|
||||
---
|
||||
slug: bento-topics
|
||||
published: true
|
||||
description: >-
|
||||
Bento专题介绍了两种不同的网页设计工具：Bento风格的起始页和Packery无缝可拖动的网格布局。Bento风格的起始页提供了一个简洁的GitHub项目链接，而Packery则是一个用于创建无缝且可拖动网格布局的工具。这些资源为网页设计师提供了创新的设计思路和实用的布局工具。
|
||||
tags:
|
||||
- bento布局
|
||||
- packery网格布局
|
||||
---
|
||||
|
||||
# Bento 专题
|
||||
|
||||
## Bento 风格的起始页
|
||||
|
||||
<https://github.com/migueravila/Bento>
|
||||
|
||||
|
||||
## packery: 无缝、可拖动的网格布局
|
||||
|
||||
<https://github.com/metafizzy/packery>
|
||||
27
src/content/post/bilibili-rec-auto-ffmpeg.md
Normal file
27
src/content/post/bilibili-rec-auto-ffmpeg.md
Normal file
@ -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
|
||||
|
||||
## 开发
|
||||
16
src/content/post/blender学习资源.md
Normal file
16
src/content/post/blender学习资源.md
Normal file
@ -0,0 +1,16 @@
|
||||
---
|
||||
slug: blender-learning-resources
|
||||
published: true
|
||||
description: 本资源提供了两个学习Blender的途径：羊羊羊的教室和暗房。羊羊羊的教室展示了Blender的截图，而暗房则未详细说明其内容。
|
||||
tags:
|
||||
- blender学习资源
|
||||
- 羊羊教室
|
||||
- Blender screenshot
|
||||
---
|
||||
|
||||
# Blender 学习资源
|
||||
|
||||
1. 羊羊羊的教室
|
||||
|
||||
|
||||
2. 暗房
|
||||
25
src/content/post/bossdesign.cn.md
Normal file
25
src/content/post/bossdesign.cn.md
Normal file
@ -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网站提供了许多优秀的推荐。如果有相关需求，可以直接访问该网站获取推荐资源。网址为：<https://www.bossdesign.cn/>。
|
||||
rinId: 68
|
||||
---
|
||||
|
||||
# bossdesign.cn
|
||||
|
||||
昨天搜 gradient 和 svg 背景图的时候，都在这个网站上找打了很棒的推荐。所以如果有相关的需求的话，可以直接检索这个网站的推荐。
|
||||
|
||||
<https://www.bossdesign.cn/>
|
||||
|
||||
![[IMG-20250104114645360.png]]
|
||||
41
src/content/post/b站首页的背景图跟随鼠标移动是如何实现的？.md
Normal file
41
src/content/post/b站首页的背景图跟随鼠标移动是如何实现的？.md
Normal file
@ -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 等方式来实现类似的动画效果,但原理都是根据鼠标位置不断更新和重绘图像帧。具体实现方式需要结合使用的技术框架和项目需求来设计。
|
||||
49
src/content/post/codegen学习.md
Normal file
49
src/content/post/codegen学习.md
Normal file
@ -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 服务
|
||||
|
||||
## 前端
|
||||
32
src/content/post/codeimage.dev 代码美化工具.md
Normal file
32
src/content/post/codeimage.dev 代码美化工具.md
Normal file
@ -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 代码美化工具
|
||||
|
||||
<https://app.codeimage.dev/>
|
||||
|
||||
<https://github.com/riccardoperra/codeimage>
|
||||
|
||||
A tool to beautify your code screenshots. Built with SolidJS and Fastify.
|
||||
|
||||
美化代码屏幕截图的工具。使用 SolidJS 和 Fastify 构建。
|
||||
|
||||
直接把代码复制粘贴进去，然后挑选预设模板，或自己调整样式，最后导出既可。如果登录之后，也可以保存预设。
|
||||
|
||||
无论是实用性还是从 solidjs 学习层面都挺有用的。
|
||||
|
||||
![[IMG-20250104114646168.png]]
|
||||
53
src/content/post/convert list like into list.md
Normal file
53
src/content/post/convert list like into list.md
Normal file
@ -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`.
|
||||
47
src/content/post/cra系列比较.md
Normal file
47
src/content/post/cra系列比较.md
Normal file
@ -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 个月前
|
||||
|
||||
|
||||
|
||||
## [GitHub - facebook/create-react-app: Set up a modern web app by running one command.](https://github.com/facebook/create-react-app)
|
||||
|
||||
9 个月前
|
||||
|
||||
|
||||
|
||||
## [GitHub - timarney/react-app-rewired: Override create-react-app webpack configs without ejecting](https://github.com/timarney/react-app-rewired)
|
||||
|
||||
2 年前
|
||||
|
||||
|
||||
|
||||
## [GitHub - arackaf/customize-cra: Override webpack configurations for create-react-app 2.0](https://github.com/arackaf/customize-cra)
|
||||
|
||||
4 年前
|
||||
|
||||
|
||||
192
src/content/post/dom-to-image源代码解析.md
Normal file
192
src/content/post/dom-to-image源代码解析.md
Normal file
@ -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 `<style>` element, then attach it to the clone
|
||||
将所有处理过的 CSS 规则连接起来并将它们放入一个 `<style>` 元素中，然后将其附加到克隆中
|
||||
|
||||
4. Embed images 嵌入图像
|
||||
|
||||
- embed image URLs in `<img>` elements
|
||||
在元素中 `<img>` 嵌入图像 URL
|
||||
- inline images used in `background` CSS property, in a fashion similar to fonts
|
||||
CSS 属性中使用的 `background` 内联图像，其方式类似于字体
|
||||
|
||||
5. Serialize the cloned node to XML
|
||||
将克隆的节点序列化为 XML
|
||||
6. Wrap XML into the `<foreignObject>` tag, then into the SVG, then make it a data URL
|
||||
将 XML 包装到标记中 `<foreignObject>` ，然后包装到 SVG 中，然后使其成为数据 URL
|
||||
7. Optionally, to get PNG content or raw pixel data as a Uint8Array, create an Image element with the SVG as a source, and render it on an off-screen canvas, that you have also created, then read the content from the canvas
|
||||
（可选）若要将 PNG 内容或原始像素数据作为 Uint8Array 获取，请创建一个以 SVG 为源的 Image 元素，并将其呈现在你也创建的屏幕外画布上，然后从画布中读取内容
|
||||
8. Done! 完成！
|
||||
|
||||
## 从 toSvg 开始
|
||||
|
||||
从 `dom-to-image.js` 的 18 行代码开始，从这里的代码中可以看出来，所有的图形转化的基础方法都是 toSvg 这一个。因此我们从 toSvg 入手，看看它的实现原理。
|
||||
|
||||
```js
|
||||
var domtoimage = {
|
||||
// 2023-10-28 @kazoottt, standard lib functions
|
||||
toSvg: toSvg, // 2023-11-06 @kazoottt, 传入节点，返回svg dataUrl
|
||||
toPng: toPng, // 2023-11-06 @kazoottt, 传入节点，返回png dataUrl
|
||||
toJpeg: toJpeg, // 2023-11-06 @kazoottt, 传入节点，返回jpeg dataUrl
|
||||
toBlob: toBlob, // 2023-11-06 @kazoottt, 传入节点，返回blob对象
|
||||
toPixelData: toPixelData, // 2023-11-06 @kazoottt, 传入节点，返回表示RGBA的Uint8Array
|
||||
}
|
||||
```
|
||||
|
||||
toSvg 的代码如下
|
||||
|
||||
```js
|
||||
function toSvg(node, options) {
|
||||
// 2023-10-28 @kazoottt, if the options received is undefined, set it to {}
|
||||
options = options || {}
|
||||
// 2023-10-28 @kazoottt, call the copyOptions method(just for impl for test, so it will not affect the behavior of dom-to-image itself)
|
||||
copyOptions(options)
|
||||
// 2023-10-28 @kazoottt, wrap the node to a Promise object so that it can be used in the chained calls
|
||||
return Promise.resolve(node)
|
||||
.then(function (node) {
|
||||
// 2023-10-29 @kazoottt, return Element
|
||||
return cloneNode(node, options.filter, true)
|
||||
})
|
||||
.then(embedFonts)
|
||||
.then(inlineImages)
|
||||
.then(applyOptions)
|
||||
.then(function (clone) {
|
||||
// 2023-11-06 @kazoottt, 节点转svg dataUrl
|
||||
return makeSvgDataUri(
|
||||
clone,
|
||||
options.width || util.width(node),
|
||||
options.height || util.height(node),
|
||||
)
|
||||
})
|
||||
|
||||
/**
|
||||
* @description: 传入节点，之前保存的配置复制给这个节点，然后返回节点
|
||||
* @param {*} clone
|
||||
* @return {*}
|
||||
*/
|
||||
function applyOptions(clone) {
|
||||
if (options.bgcolor) clone.style.backgroundColor = options.bgcolor
|
||||
|
||||
if (options.width) clone.style.width = options.width + "px"
|
||||
if (options.height) clone.style.height = options.height + "px"
|
||||
|
||||
if (options.style)
|
||||
Object.keys(options.style).forEach(function (property) {
|
||||
clone.style[property] = options.style[property]
|
||||
})
|
||||
|
||||
return clone
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
toSvg 的类型声明：
|
||||
入参：`node` 和 `options`
|
||||
出参：`Promise<any>`
|
||||
|
||||
由于这个库是很久之前写的，当时还不支持 es6 的写法，所以写的是一串回调。
|
||||
看起来可能会不习惯，转成 async 的写法后会比较好理解。
|
||||
不过这么多年这个库依然可以使用，也说明了兼容性很好。
|
||||
它进行的操作如下：
|
||||
|
||||
第一步: `Promise.resolve(node)` (可忽略)
|
||||
使用 `Promise.resolve(node)` 创建一个已经解决的 Promise，然后 `.then` 方法被用来添加一个回调函数。这样做的好处是，无论 `node` 是一个普通值还是一个 Promise，`.then` 方法都会正确地处理。不过其实 `cloneNode(node, options.filter, true);` 返回的也是 Promise，可以直接从这里开始调用的。
|
||||
作者在最开头写这里 `Promise.resolve(node)` 的使用可能是为了确保代码的健壮性。因为 `Promise.resolve(node)` 可以处理 `node` 是 Promise 或者非 Promise 的情况。如果 `node` 不是一个 Promise，
|
||||
|
||||
第二步：`cloneNode(node, filter, root)`
|
||||
|
||||
```js
|
||||
function cloneNode(node, filter, root) {
|
||||
// 2023-10-28 @kazoottt, if 1.the node is not the root 2.the filter is existed 3. after the filter, the node is not included, return undefined. (it is to filter out the node)
|
||||
if (!root && filter && !filter(node)) return Promise.resolve();
|
||||
|
||||
// 2023-10-29 @kazoottt,the result is: Element
|
||||
return Promise.resolve(node)
|
||||
.then(makeNodeCopy)
|
||||
.then(function (clone) {
|
||||
// 2023-10-29 @kazoottt, get the target node
|
||||
return cloneChildren(node, clone, filter);
|
||||
})
|
||||
.then(function (clone) {
|
||||
return processClone(node, clone);
|
||||
});
|
||||
```
|
||||
|
||||
2.1 makeNodeCopy
|
||||
判断是否是 canvas，如果是 canvas 则直接转为
|
||||
|
||||
第三步 embedFonts
|
||||
|
||||
第四步 inlineImages
|
||||
|
||||
第五步 applyOptions
|
||||
|
||||
第五步 makeSvgDataUri
|
||||
67
src/content/post/embedding exapmle.md
Normal file
67
src/content/post/embedding exapmle.md
Normal file
@ -0,0 +1,67 @@
|
||||
---
|
||||
title: embedding exapmle
|
||||
date: 2024-02-28
|
||||
author: KazooTTT
|
||||
tags:
|
||||
- openai
|
||||
- embedding
|
||||
finished: false
|
||||
published: true
|
||||
slug: embedding-exapmle
|
||||
description: 一个很好的embedding例子
|
||||
---
|
||||
|
||||
# Embedding Example
|
||||
|
||||
[emoji-semantic-search/server/app.py at main · lilianweng/emoji-semantic-search · GitHub](https://github.com/lilianweng/emoji-semantic-search/blob/main/server/app.py#L51)
|
||||
|
||||
## Build
|
||||
|
||||
构造一个 msg2emoji 的 json
|
||||
|
||||
```python
|
||||
msg2emoji = {
|
||||
"Hello! How are you?": ["😊", "👋"],
|
||||
"I'm doing great!": ["👍"],
|
||||
"What about you?": ["❓"],
|
||||
"Me too!": ["😄"]
|
||||
}
|
||||
```
|
||||
|
||||
转化为数组
|
||||
|
||||
```python
|
||||
descriptions = [
|
||||
"The emoji 😊 is about feeling happy.",
|
||||
"The emoji 👋 is about saying hello.",
|
||||
"The emoji 👍 is about showing approval.",
|
||||
"The emoji ❓ is about asking a question.",
|
||||
"The emoji 😄 is about expressing joy."
|
||||
]
|
||||
```
|
||||
|
||||
调用接口 embeddings
|
||||
|
||||
```python
|
||||
[
|
||||
{"emoji": "😊", "message": "feeling happy", "embed": [0.1, 0.2, 0.3]},
|
||||
{"emoji": "👋", "message": "saying hello", "embed": [0.4, 0.5, 0.6]},
|
||||
{"emoji": "👍", "message": "showing approval", "embed": [0.7, 0.8, 0.9]},
|
||||
{"emoji": "❓", "message": "asking a question", "embed": [0.2, 0.3, 0.4]},
|
||||
{"emoji": "😄", "message": "expressing joy", "embed": [0.5, 0.6, 0.7]}
|
||||
]
|
||||
```
|
||||
|
||||
然后保存 emoji-embeddings.jsonl.gz 中，不用重复训练
|
||||
|
||||
## Search
|
||||
|
||||
从本地读取 emoji-embeddings.jsonl.gz 文件，然后格式化
|
||||
|
||||
请求 embedding api, 获取向量
|
||||
|
||||
```python
|
||||
dotprod = np.matmul(self.embeddings, np.array(query_embed).T)
|
||||
```
|
||||
|
||||
取 20 个最相似的返回
|
||||
51
src/content/post/evo.ninja.md
Normal file
51
src/content/post/evo.ninja.md
Normal file
@ -0,0 +1,51 @@
|
||||
---
|
||||
slug: evoninja
|
||||
published: true
|
||||
description: >-
|
||||
本文主要介绍了evo.ninja仓库的代码结构和运行机制。首先，通过分析根目录下的package.json文件，了解到该仓库的脚本命令包括重置、清理、构建、启动服务等。特别关注了start:api命令，该命令实现在名为evo-ninja的工作区中，具体位于evo.ninja/app.cli目录下。这里的package.json文件定义了启动命令，分别指向cli.ts和api.ts文件，这两个文件依赖于app.ts文件。此外，还提到了evo.ninja的API部分使用了名为agent-protocol的库。
|
||||
tags:
|
||||
- evo.ninja
|
||||
- agent-protocol
|
||||
- 语法错误
|
||||
---
|
||||
|
||||
# evo.ninja
|
||||
|
||||
我首先阅读的是 evo.ninja 这个仓库的代码
|
||||
在它根目录的 package.json 中，它的 script 是这样写的：
|
||||
|
||||
```json
|
||||
"scripts": {
|
||||
"reset": "yarn clean && yarn && yarn build",
|
||||
"clean": "npx rimraf ./node_modules ./*/**/node_modules ./*/**/yarn.lock ./*/**/build",
|
||||
"build": "npx turbo build",
|
||||
"build:browser": "yarn workspace @evo-ninja/ui run build",
|
||||
"start": "yarn workspace evo-ninja run start",
|
||||
"start:browser": "yarn workspace @evo-ninja/ui run start",
|
||||
"start:api": "yarn workspace evo-ninja run start:api",
|
||||
"lint": "npx turbo lint",
|
||||
"lint:fix": "npx turbo lint -- --fix"
|
||||
},
|
||||
```
|
||||
|
||||
然后在 run 中，它运行的是 start:api。所以我们直接来看 start:api 的代码。
|
||||
|
||||
可以看到 start:api 的代码是在工作区中 package.json 的 name 是 evo-ninja 的这个文件夹中的 package.json 中的 script 中的 start:api
|
||||
|
||||
具体位置就是 evo.ninja/app.cli 了
|
||||
|
||||
这个代码的 package.json 是这样写的：
|
||||
|
||||
``` json
|
||||
"scripts": {
|
||||
"start": "ts-node src/cli.ts",
|
||||
"start:api": "ts-node src/api.ts",
|
||||
"build": "rimraf build && tsc --project tsconfig.build.json",
|
||||
},
|
||||
````
|
||||
|
||||
也就是说命令在 cli.ts，服务在 api.ts，而这两个文件都依赖于 app.ts，它才是主体。
|
||||
|
||||
[[evo.ninja api]]
|
||||
它用到了一个叫做 agent-protocol 的库来实现
|
||||
[[agent-protocol代码阅读]]
|
||||
31
src/content/post/expo报错.md
Normal file
31
src/content/post/expo报错.md
Normal file
@ -0,0 +1,31 @@
|
||||
---
|
||||
title: expo报错
|
||||
slug: expo-error
|
||||
published: true
|
||||
description: >-
|
||||
在expo开发中遇到报错：TypeError: The 'compilation' argument must be an instance of
|
||||
Compilation。错误的原因是项目中存在多个webpack版本，特别是由于额外添加了依赖"metro-core":
|
||||
"^0.80.1"。解决此问题的方法是删除node_modules目录，移除该依赖，然后重新安装依赖。
|
||||
rinId: 10
|
||||
finished: true
|
||||
date: 2024-02-07
|
||||
category: web3
|
||||
tags:
|
||||
- expo 错误，angular cli，webpack，npm， metro-core
|
||||
toAstro: false
|
||||
---
|
||||
|
||||
# Expo 报错
|
||||
|
||||
[angular cli - The 'compilation' argument must be an instance of Compilation - Stack Overflow](https://stackoverflow.com/questions/67727180/the-compilation-argument-must-be-an-instance-of-compilation)
|
||||
|
||||
expo TypeError: The 'compilation' argument must be an instance of Compilation
|
||||
|
||||
```
|
||||
npm ls webpack
|
||||
```
|
||||
|
||||
原因是有多个 webpack，而具体的原因是我另外加了一个 dep
|
||||
"metro-core": "^0.80.1",
|
||||
|
||||
解决方法：删除 node_modules，以及把上面这个依赖移除，再安装一次。
|
||||
67
src/content/post/fetch 报错排查 SocketError other side closed.md
Normal file
67
src/content/post/fetch 报错排查 SocketError other side closed.md
Normal file
@ -0,0 +1,67 @@
|
||||
---
|
||||
title: fetch 报错排查 SocketError other side closed
|
||||
date: 2024-02-03
|
||||
author: KazooTTT
|
||||
tags:
|
||||
- 网络
|
||||
published: true
|
||||
slug: fetch-socketerror-other-side-closed
|
||||
link: >-
|
||||
https://kazoottt.notion.site/fetch-SocketError-other-side-closed-d399e7db398c4f7faaa8d3e0003327fd
|
||||
notionID: d399e7db-398c-4f7f-aaa8-d3e0003327fd
|
||||
description: >-
|
||||
在main.js文件中使用fetch方法时遇到了报错，错误信息显示“fetch failed”并指出“other side
|
||||
closed”。错误发生在getFansNum函数中，具体是由于TLS连接的另一端关闭导致的。解决此问题的方法是关闭MitM（中间人攻击）工具，这通常用于拦截和修改网络通信，可能会导致不正常的连接关闭。
|
||||
rinId: 15
|
||||
finished: true
|
||||
category: 前端
|
||||
toAstro: false
|
||||
---
|
||||
|
||||
# Fetch 报错
|
||||
|
||||
# 常规
|
||||
|
||||
排查 SocketError other side closed
|
||||
|
||||
在 main.js 中使用了 fetch，但是在运行 main.js 的时候时候 fetch 报错。
|
||||
|
||||
```shell
|
||||
% node main.js
|
||||
|
||||
(node:51258) Warning: Setting the NODE_TLS_REJECT_UNAUTHORIZED environment variable to '0' makes TLS connections and HTTPS requests insecure by disabling certificate verification.
|
||||
(Use `node --trace-warnings ...` to show where the warning was created)
|
||||
node:internal/deps/undici/undici:11730
|
||||
Error.captureStackTrace(err, this);
|
||||
^
|
||||
|
||||
TypeError: fetch failed
|
||||
at Object.fetch (node:internal/deps/undici/undici:11730:11)
|
||||
at async getFansNum (/Users/kazoottt/GitHub/bilibili-fans/main.js:11:20) {
|
||||
cause: SocketError: other side closed
|
||||
at TLSSocket.onSocketEnd (node:internal/deps/undici/undici:8280:26)
|
||||
at TLSSocket.emit (node:events:526:35)
|
||||
at endReadableNT (node:internal/streams/readable:1589:12)
|
||||
at process.processTicksAndRejections (node:internal/process/task_queues:82:21) {
|
||||
code: 'UND_ERR_SOCKET',
|
||||
socket: {
|
||||
localAddress: '198.19.0.1',
|
||||
localPort: 55306,
|
||||
remoteAddress: '198.18.2.185',
|
||||
remotePort: 443,
|
||||
remoteFamily: 'IPv4',
|
||||
timeout: undefined,
|
||||
bytesWritten: 607,
|
||||
bytesRead: 0
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Node.js v20.10.0
|
||||
```
|
||||
|
||||
从报错信息中可以看出来是 getFansNum 这个方法中的 fetch 方法报了错。
|
||||
|
||||
解决方法：
|
||||
|
||||
关闭 MitM
|
||||
57
src/content/post/flask-jwt.md
Normal file
57
src/content/post/flask-jwt.md
Normal file
@ -0,0 +1,57 @@
|
||||
---
|
||||
slug: flask-jwt
|
||||
published: true
|
||||
description: >-
|
||||
本文对比了几个Flask可用的JWT库，包括flask-jwt-extended、Flask-JWT和jwt，根据PyPI下载量和Star量，选择使用最广泛的flask-jwt-extended。文章介绍了在父页面通过iframe嵌入子页面时，如何在子页面中验证和使用JWT
|
||||
token，包括页面级别和接口级别的token验证。同时，提供了安装flask-jwt-extended的命令，并建议参考官方文档进行详细配置。
|
||||
category: 后端
|
||||
title: flask-jwt
|
||||
date: 2024-09-10
|
||||
author: KazooTTT
|
||||
type: Post
|
||||
status: Published
|
||||
tags:
|
||||
- flask-jwt
|
||||
- flaskjwt扩展
|
||||
- token验证
|
||||
- iframe嵌入
|
||||
- 接口鉴权
|
||||
- 装饰器
|
||||
finished: false
|
||||
toAstro: false
|
||||
---
|
||||
|
||||
# Flask-jwt
|
||||
|
||||
## Flask 可用库的对比
|
||||
|
||||
flask-jwt-extended 的使用量是最多的，为了后期更好地项目维护，还是选择第一个来使用。
|
||||
|
||||
## 使用 flask-jwt-extended
|
||||
|
||||
场景：
|
||||
|
||||
父页面 + iframe 嵌入子页面，嵌入的时候 url 带上 token。
|
||||
|
||||
在子页面需要做的事情：
|
||||
|
||||
1. 页面级别：每个页面都需要验证 token 是否有效。
|
||||
2. 接口级别：每个接口都需要验证 token 是否有效。
|
||||
|
||||
### 对于页面
|
||||
|
||||
父页面使用 iframe 嵌入子页面的时候，url 带上 token。因此在子页面加载的时候需要处理 url 以获取 token,然后把它存储在 localStorage 中。在后续接口调用中都需要把 token 带上，以便于接口的鉴权。
|
||||
|
||||
### 对于接口
|
||||
|
||||
实现一个装饰器，用于校验 token。
|
||||
|
||||
## 具体过程
|
||||
|
||||
[参考文档](https://flask-jwt-extended.readthedocs.io/en/stable/basic_usage.html)
|
||||
|
||||
1. 安装 `flask-jwt-extended`
|
||||
|
||||
```shell
|
||||
pip install flask-jwt-extended
|
||||
```
|
||||
57
src/content/post/form的validate注意判空.md
Normal file
57
src/content/post/form的validate注意判空.md
Normal file
@ -0,0 +1,57 @@
|
||||
---
|
||||
title: form的validate注意判空
|
||||
date: 2023-10-16
|
||||
author: KazooTTT
|
||||
tags:
|
||||
- antdesign
|
||||
- 组件库
|
||||
- react
|
||||
- antd
|
||||
published: true
|
||||
slug: ant-design-form-validate
|
||||
description: >-
|
||||
在表单验证中，特别是密码确认字段的验证，需要注意即使设置了必填规则，也应在自定义验证函数中检查值是否为空。示例代码展示了如何使用Ant
|
||||
Design的Form组件进行密码确认验证，其中包含了一个必填规则和一个自定义验证函数，确保输入的密码与确认密码一致。如果不检查确认密码字段的值是否为空，可能会导致不必要的异常抛出。
|
||||
---
|
||||
|
||||
# Form 的 validate 注意判空
|
||||
|
||||
![[IMG-20250104114646194.png]]
|
||||
|
||||
```js
|
||||
<Form.Item
|
||||
name="confirm"
|
||||
label="Confirm Password"
|
||||
dependencies={["password"]}
|
||||
hasFeedback
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: "Please confirm your password!",
|
||||
},
|
||||
({ getFieldValue }) => ({
|
||||
validator(_, value) {
|
||||
if (!value || getFieldValue("password") === value) {
|
||||
return Promise.resolve()
|
||||
}
|
||||
return Promise.reject(new Error("The new password that you entered do not match!"))
|
||||
},
|
||||
}),
|
||||
]}
|
||||
>
|
||||
<Input.Password />
|
||||
</Form.Item>
|
||||
```
|
||||
|
||||
需要注意一下，即使 rule 中存在
|
||||
|
||||
```ts
|
||||
{
|
||||
required: true,
|
||||
message: 'Please confirm your password!',
|
||||
},
|
||||
```
|
||||
|
||||
在后面的自定义校验（validator）中，也需要对 value 进行判断是否非空。
|
||||
|
||||
否则容易抛出其他的异常。
|
||||
45
src/content/post/gallery.md
Normal file
45
src/content/post/gallery.md
Normal file
@ -0,0 +1,45 @@
|
||||
---
|
||||
title: gallery
|
||||
date: 2023-11-03
|
||||
author: KazooTTT
|
||||
tags: []
|
||||
published: true
|
||||
slug: gallery
|
||||
description: >-
|
||||
该gallery网站包含多个板块，包括首页、动态汇总、科普、产出汇总和关于与友链。动态汇总主要来源于b站动态。日程部分详细列出了资源、名称、日期、作者原始链接、系列和标签等信息，并提供画廊查询展示功能，支持单图片展示。整体结构清晰，内容丰富，适合用户浏览和获取信息。
|
||||
---
|
||||
|
||||
# Gallery
|
||||
|
||||
## 结构
|
||||
|
||||
首页
|
||||
|
||||
动态汇总
|
||||
|
||||
科普
|
||||
|
||||
产出汇总
|
||||
|
||||
关于和友链
|
||||
|
||||
## 动态汇总
|
||||
|
||||
来源
|
||||
b 站动态
|
||||
|
||||
## 日程
|
||||
|
||||
结构：
|
||||
|
||||
资源
|
||||
名称
|
||||
日期
|
||||
作者原始链接
|
||||
系列
|
||||
标签
|
||||
|
||||
查询展示
|
||||
画廊
|
||||
|
||||
支持单图片
|
||||
73
src/content/post/how to check if a key is in the Object.md
Normal file
73
src/content/post/how to check if a key is in the Object.md
Normal file
@ -0,0 +1,73 @@
|
||||
---
|
||||
title: how to check if a key is in the Object
|
||||
date: 2024-05-06
|
||||
author: KazooTTT
|
||||
type: Post
|
||||
status: Published
|
||||
tags:
|
||||
- javascript
|
||||
- Object
|
||||
finished: true
|
||||
published: true
|
||||
category: 随手记
|
||||
slug: how-to-check-if-a-key-is-in-the-object
|
||||
description: >-
|
||||
This document explains two methods to check if a property exists in a
|
||||
JavaScript object: the `in` operator and the `hasOwnProperty` method. The `in`
|
||||
operator returns `true` if the specified property is in the object or its
|
||||
prototype chain, and it requires the property name to be a string. The
|
||||
`hasOwnProperty` method also checks for property existence, specifically
|
||||
within the object itself, not its prototype chain, and it also requires the
|
||||
property key to be a string. Both methods are demonstrated with examples.
|
||||
NotionID-notionnext: 196ff681-16d8-47f1-a3d1-15a87b02aa5f
|
||||
link-notionnext: >-
|
||||
https://kazoottt.notion.site/how-to-check-if-a-key-is-in-the-Object-196ff68116d847f1a3d115a87b02aa5f
|
||||
rinId: 47
|
||||
---
|
||||
|
||||
# How to Check if a Key is in the Object
|
||||
|
||||
there are many methods.
|
||||
|
||||
## `in` Operator
|
||||
|
||||
[in - JavaScript | MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/in)
|
||||
|
||||
> The **`in`** operator returns `true` if the specified property is in the specified object or its prototype chain.
|
||||
|
||||
how to use?
|
||||
|
||||
for example:
|
||||
|
||||
```javascript
|
||||
const dict = { a: "a", b: "b" }
|
||||
console.log("a" in dict)
|
||||
```
|
||||
|
||||
attention: the attribute name should be string.
|
||||
|
||||
that is to say:
|
||||
|
||||
- a in dict ❎
|
||||
- "a" in dict ✅
|
||||
|
||||
## Object API: hasOwnProperty
|
||||
|
||||
[Object.prototype.hasOwnProperty() - JavaScript | MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/hasOwnProperty)
|
||||
|
||||
The complete expression is `Object.prototype.hasOwnProperty()`.
|
||||
|
||||
how to use it ?
|
||||
|
||||
```javascript
|
||||
const dict = {
|
||||
a: "a",
|
||||
b: "b",
|
||||
}
|
||||
console.log(dict.hasOwnProperty("a"))
|
||||
```
|
||||
|
||||
the same is the attribute key should be a string.
|
||||
|
||||
- a in dict ❎
|
||||
- "a" in dict ✅
|
||||
@ -0,0 +1,70 @@
|
||||
---
|
||||
title: how to find the repeated number of an array?
|
||||
date: 2024-05-06
|
||||
author: KazooTTT
|
||||
type: Post
|
||||
status: Draft
|
||||
tags:
|
||||
- javascript
|
||||
- array
|
||||
- map
|
||||
- object
|
||||
finished: true
|
||||
published: true
|
||||
slug: how-to-find-the-repeated-number-of-an-array
|
||||
description: >-
|
||||
This TypeScript function `findTheNumber` uses a Map to store and check for the
|
||||
presence of numbers in an array. It utilizes the `find` method to locate the
|
||||
first number that has already been encountered in the array, using the Map to
|
||||
track seen numbers. The difference between a Map and an Object in JavaScript
|
||||
is that a Map allows keys of any type, while Object keys are limited to
|
||||
strings or symbols, and a Map maintains the order of insertion. The `find`
|
||||
method is used to retrieve the first element in an array that satisfies a
|
||||
given condition.
|
||||
NotionID-notionnext: 3e3d3c62-203d-4771-a708-ad8d6c04b992
|
||||
link-notionnext: >-
|
||||
https://kazoottt.notion.site/how-to-find-the-repeated-number-of-an-array-3e3d3c62203d4771a708ad8d6c04b992
|
||||
rinId: 48
|
||||
---
|
||||
|
||||
# How to Find the Repeated Number of an Array
|
||||
|
||||
```typescript
|
||||
const findTheNumber = (array: number[]) => {
|
||||
const dict = new Map()
|
||||
return array.find((item) => {
|
||||
if (dict.has(item)) {
|
||||
return item
|
||||
} else {
|
||||
dict.set(item, true)
|
||||
}
|
||||
})
|
||||
}
|
||||
```
|
||||
|
||||
## 1. What is the Difference between Map and Object?
|
||||
|
||||
<https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map#objects_vs._maps>
|
||||
|
||||
1. the key of the map can be any type, but the key of the object only can be **string** or **symbol**.
|
||||
2. the map has order.
|
||||
|
||||
> The Map object holds key-value pairs and remembers the original insertion order of the keys. Any value (both objects and primitive values) may be used as either a key or a value.
|
||||
|
||||
## 2. How to Get the Target Item from a Array?
|
||||
|
||||
use the `find` api of the Array `Array.prototype.find()`
|
||||
|
||||
<https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/find>
|
||||
|
||||
> The find() method of Array instances returns the first element in the provided array that satisfies the provided testing function. If no values satisfy the testing function, undefined is returned.
|
||||
|
||||
how to use:
|
||||
|
||||
```typescript
|
||||
// find the first item that can be divided by 2（even）
|
||||
const array = [1, 2, 3, 4]
|
||||
const target = array.find((item) => {
|
||||
return item / 2 === 0
|
||||
})
|
||||
```
|
||||
27
src/content/post/leetcode刷题 js + python.md
Normal file
27
src/content/post/leetcode刷题 js + python.md
Normal file
@ -0,0 +1,27 @@
|
||||
---
|
||||
slug: leetcode-brush-up
|
||||
published: true
|
||||
description: >-
|
||||
2023年1月10日，记录了在LeetCode上的刷题情况。首先完成了“两数之和”问题，随后解决了“删除有序数组中的重复项”，虽然使用的方法简单但性能较差。最后，解决了“移除元素”问题。每个问题都附有相关的提交链接和截图，以便记录和回顾。
|
||||
finished: true
|
||||
date: '2024-07-11T02:17:53.454Z'
|
||||
rinId: 120
|
||||
---
|
||||
|
||||
# Leetcode 刷题
|
||||
|
||||
2023-01-10
|
||||
[1. 两数之和 - 力扣（LeetCode）](https://leetcode.cn/problems/two-sum/submissions/394403223/)
|
||||
|
||||
|
||||
|
||||
[26. 删除有序数组中的重复项 - 力扣（LeetCode）](https://leetcode.cn/problems/remove-duplicates-from-sorted-array/submissions/394407635/)
|
||||
使用的方法比较简单，性能比较差
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
[27. 移除元素 - 力扣（LeetCode）](https://leetcode.cn/problems/remove-element/submissions/394409513/)
|
||||
|
||||
|
||||
67
src/content/post/lodash中的位运算.md
Normal file
67
src/content/post/lodash中的位运算.md
Normal file
@ -0,0 +1,67 @@
|
||||
---
|
||||
title: lodash中的位运算
|
||||
date: 2023-10-20
|
||||
author: KazooTTT
|
||||
tags:
|
||||
- lodash
|
||||
- 源码学习
|
||||
published: true
|
||||
slug: lodash-bit-cal
|
||||
description: >-
|
||||
在lodash的深拷贝源码中，使用了位运算来控制拷贝行为。通过设置不同的标志位，如CLONE_DEEP_FLAG和CLONE_SYMBOLS_FLAG，分别控制深拷贝和是否克隆symbol属性。这些标志位通过按位或（|）运算组合成一个变量，然后通过按位与（&）运算在baseClone函数中解构，以确定具体的拷贝行为。这种设计使得代码更加高效且灵活，能够根据不同的标志位组合实现不同的拷贝需求。
|
||||
noteId_x: 6
|
||||
create_time: '2023/10/20 09:56:48'
|
||||
update_time: '2023/10/20 10:28:41'
|
||||
publish_time: '2023/10/20 10:28:22'
|
||||
link: 'https://kazoottt.notion.site/lodash-43f6444559334df780b685ca74591cec'
|
||||
notionID: 43f64445-5933-4df7-80b6-85ca74591cec
|
||||
---
|
||||
|
||||
# Lodash 中的位运算
|
||||
|
||||
在阅读 lodash 的深拷贝源码的时候，发现有 FLAG 这样的变量。
|
||||
|
||||
```ts
|
||||
// src/cloneDeep.ts
|
||||
const CLONE_DEEP_FLAG = 1
|
||||
const CLONE_SYMBOLS_FLAG = 4
|
||||
|
||||
function cloneDeep(value) {
|
||||
return baseClone(value, CLONE_DEEP_FLAG | CLONE_SYMBOLS_FLAG)
|
||||
}
|
||||
```
|
||||
|
||||
- `CLONE_DEEP_FLAG | CLONE_SYMBOLS_FLAG` 代表的是做位运行算,按位或操作
|
||||
- CLONE_DEEP_FLAG - 控制是否进行深拷贝
|
||||
- CLONE_SYMBOLS_FLAG - 控制是否克隆 symbol 属性
|
||||
- CLONE_DEEP_FLAG 的值是 1 二进制表示是 0001
|
||||
CLONE_SYMBOLS_FLAG 的值是 4,二进制表示是 0100
|
||||
|
||||
按位或计算如下:
|
||||
0001
|
||||
0100
|
||||
0101
|
||||
所以 1 | 4 二进制是 0101。结果是 5,
|
||||
|
||||
然后在传入 baseClone 的时候，
|
||||
|
||||
```ts
|
||||
// src/.internal/baseClone.ts
|
||||
function baseClone(value, bitmask, customizer, key, object, stack) {
|
||||
let result
|
||||
const isDeep = bitmask & CLONE_DEEP_FLAG
|
||||
const isFlat = bitmask & CLONE_FLAT_FLAG
|
||||
const isFull = bitmask & CLONE_SYMBOLS_FLAG
|
||||
...
|
||||
|
||||
}
|
||||
```
|
||||
|
||||
通过与运算来判断是否需要做某项操作。
|
||||
|
||||
之前我们传入的 bitmask 是 0101
|
||||
然后 CLONE_DEEP_FLAG 是 0001
|
||||
与运算得到的是 0001 (1)，其他同理
|
||||
|
||||
也就是说可以通过或的操作把变量组合为一个变量
|
||||
然后再用与操作，把变量解构成不同的变量
|
||||
31
src/content/post/md路径正确但是图片不显示的原因.md
Normal file
31
src/content/post/md路径正确但是图片不显示的原因.md
Normal file
@ -0,0 +1,31 @@
|
||||
---
|
||||
title: md路径正确但是图片不显示的原因
|
||||
date: 2024-03-01
|
||||
author: KazooTTT
|
||||
tags:
|
||||
- bug
|
||||
- markdown
|
||||
- md
|
||||
finished: true
|
||||
published: true
|
||||
slug: the-reason-why-the-markdown-path-is-correct-but-the-image-is-not-displayed
|
||||
description: >-
|
||||
从flowus导出文章后，图片无法在预览中显示，原因是路径中包含空格。解决方法是使用%20替换路径中的空格。此外，如果使用vscode的prettier格式化工具且未对md文件设置忽略，保存时可能会破坏文件路径链接，导致预览问题。
|
||||
link: 'https://kazoottt.notion.site/md-74bbc5ba9b24460d91c04e6bd3ec5422'
|
||||
notionID: 74bbc5ba-9b24-460d-91c0-4e6bd3ec5422
|
||||
rinId: 71
|
||||
---
|
||||
|
||||
# Md 路径正确但是图片不显示的原因
|
||||
|
||||
从 flowus 导出文章后，发现虽然路径是正确的，但是在预览中无法显示图片。
|
||||
|
||||
|
||||
|
||||
后来发现是路径中带有空格的原因，解决方法是使用%20 替代路径中的空格
|
||||
|
||||
|
||||
|
||||
另外还有一个坑点是：
|
||||
|
||||
如果你的 vscode 的 formatter 是 prettier，并且对于 md 没有做忽略设置，那么在保存的时候可能也会破坏你的文件路径链接，导致无法正常预览
|
||||
19
src/content/post/momentjs的format string大小写导致的问题.md
Normal file
19
src/content/post/momentjs的format string大小写导致的问题.md
Normal file
@ -0,0 +1,19 @@
|
||||
---
|
||||
title: momentjs的format string大小写导致的问题
|
||||
date: 2023-09-28
|
||||
author: KazooTTT
|
||||
tags: []
|
||||
published: true
|
||||
slug: problems-caused-by-format-string-case-in-momentjs
|
||||
description: >-
|
||||
在使用antd的TimePicker组件时，通过传入format参数来控制时间显示格式。然而，momentjs的format
|
||||
string的大小写使用可能导致显示问题，需要特别注意。
|
||||
---
|
||||
|
||||
# Momentjs 的 format String 大小写导致的问题
|
||||
|
||||
## 一、起因
|
||||
|
||||
在使用 antd 的 [TimePicker 组件](https://ant.design/components/time-picker-cn) 的时候，可以传入 format 来控制展示的时间格式。
|
||||
|
||||
![[IMG-20250104114646201.png]]
|
||||
14
src/content/post/next blog存在的问题.md
Normal file
14
src/content/post/next blog存在的问题.md
Normal file
@ -0,0 +1,14 @@
|
||||
---
|
||||
slug: next-blog-problems
|
||||
published: true
|
||||
description: 本博客讨论了Algolia缓存存在的问题。
|
||||
tags:
|
||||
- 缓存问题
|
||||
- Algolia
|
||||
- blog
|
||||
- .next
|
||||
---
|
||||
|
||||
# Next Blog 存在的问题
|
||||
|
||||
Algolia 的缓存存在问题
|
||||
@ -0,0 +1,23 @@
|
||||
---
|
||||
title: AMD
|
||||
date: 2023-09-27
|
||||
author: KazooTTT
|
||||
tags:
|
||||
- node
|
||||
- amd
|
||||
published: true
|
||||
slug: amd
|
||||
description: >-
|
||||
AMD, or Asynchronous Module Definition, is a JavaScript specification for
|
||||
defining modules where the module and its dependencies can be asynchronously
|
||||
loaded. This is particularly useful for web applications where scripts can be
|
||||
loaded in parallel, improving performance and efficiency.
|
||||
category: 前端
|
||||
toAstro: false
|
||||
---
|
||||
|
||||
# AMD
|
||||
|
||||
[[CommonJS简介]]
|
||||
|
||||
## 什么是 AMD
|
||||
32
src/content/post/npm scope公共包.md
Normal file
32
src/content/post/npm scope公共包.md
Normal file
@ -0,0 +1,32 @@
|
||||
---
|
||||
title: npm scope公共包
|
||||
date: 2024-02-18
|
||||
author: KazooTTT
|
||||
tags:
|
||||
- npm
|
||||
finished: true
|
||||
published: true
|
||||
slug: npm-scope-public-package
|
||||
description: >-
|
||||
在package.json文件中添加"publishConfig"字段，设置"access"为"public"，或者在发布时使用命令`npm publish
|
||||
--access=public`，以确保包的访问权限为公开。
|
||||
rinId: 72
|
||||
category: 前端
|
||||
toAstro: false
|
||||
---
|
||||
|
||||
# Npm Scope 公共包
|
||||
|
||||
在 package.json 中新增：
|
||||
|
||||
```json
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
```
|
||||
|
||||
或者发布的时候加上 `--access=public`
|
||||
|
||||
```javascript
|
||||
npm publish --access=public
|
||||
```
|
||||
25
src/content/post/npmrc配置.md
Normal file
25
src/content/post/npmrc配置.md
Normal file
@ -0,0 +1,25 @@
|
||||
---
|
||||
slug: npmrc-deployment
|
||||
description: 这里提供两个主要链接，分别是npm镜象网站和其注册中心，以及Canvas二进制镜象的 hosted 地址。
|
||||
tags:
|
||||
- npmmirror
|
||||
- registry
|
||||
- canvas
|
||||
title: npmrc配置
|
||||
date: 2024-12-02
|
||||
author: KazooTTT
|
||||
type: Post
|
||||
status: Published
|
||||
finished: true
|
||||
published: true
|
||||
category:
|
||||
toAstro:
|
||||
---
|
||||
|
||||
```
|
||||
home=https://npmmirror.com
|
||||
|
||||
registry=https://registry.npmmirror.com/
|
||||
|
||||
canvas_binary_host_mirror=https://registry.npmmirror.com/-/binary/canvas
|
||||
```
|
||||
24
src/content/post/obsidian技巧备忘.md
Normal file
24
src/content/post/obsidian技巧备忘.md
Normal file
@ -0,0 +1,24 @@
|
||||
---
|
||||
title: obsidian技巧备忘
|
||||
date: 2023-10-16
|
||||
author: KazooTTT
|
||||
tags:
|
||||
- 备忘
|
||||
published: true
|
||||
link: 'https://kazoottt.notion.site/obsidian-c6755f6ab1f04617b378e8bee26fd089'
|
||||
notionID: c6755f6a-b1f0-4617-b378-e8bee26fd089
|
||||
slug: obsidian-tips-memo
|
||||
description: Obsidian技巧备忘：粘贴代码时，使用cmd+v可能导致样式错乱，建议改用cmd+shift+v。同时，可以利用Obsidian链接外部代码文件。
|
||||
toAstro: false
|
||||
---
|
||||
|
||||
# Obsidian 技巧备忘
|
||||
|
||||
- 粘贴代码使用 cmd+v 会样式错乱，请使用 cmd+shift+v
|
||||
- [[obsidian链接外部代码文件]]
|
||||
|
||||
输入 task-todo:/.
|
||||
|
||||
搜索所有的未完成的任务
|
||||
|
||||
|
||||
13
src/content/post/obsidian部署.md
Normal file
13
src/content/post/obsidian部署.md
Normal file
@ -0,0 +1,13 @@
|
||||
---
|
||||
slug: obsidian-deployment
|
||||
published: true
|
||||
description: 本内容涉及如何获取Obsidian工作区中的所有文件，指导用户进行Obsidian部署操作。
|
||||
tags:
|
||||
- '# Obsidian部署'
|
||||
- Obsidian工作区
|
||||
- .obsidian文件
|
||||
---
|
||||
|
||||
# Obsidian 部署
|
||||
|
||||
获取 obsidian 的工作区的所有文件
|
||||
109
src/content/post/python100 1-15.md
Normal file
109
src/content/post/python100 1-15.md
Normal file
@ -0,0 +1,109 @@
|
||||
---
|
||||
slug: learn-python
|
||||
published: true
|
||||
tags:
|
||||
- subprocess
|
||||
- process
|
||||
description: 本内容涵盖了Python学习的多个方面，包括Flask框架的学习、Python基础知识如循环和模块的使用、文件操作和异常处理、正则表达式、进程与线程等。具体包括了Python的变量作用域搜索顺序、切片操作、列表的remove方法、文件读写和异常处理、正则表达式的学习资源和练习网站、进程与线程的基本概念和Python中的实现方法。此外，还提供了一个使用multiprocessing模块实现多进程下载任务的Python示例代码，展示了进程的启动和等待结束的方法。整体内容丰富，适合Python初学者系统学习。
|
||||
category: 后端
|
||||
---
|
||||
|
||||
# 学习 Python
|
||||
|
||||
项目里面用的是 flask
|
||||
所以先从 flask 学起吧。
|
||||
|
||||
[GitHub - jackfrued/Python-100-Days: Python - 100天从新手到大师](https://github.com/jackfrued/Python-100-Days)
|
||||
|
||||
init 和 main 的区别是什么
|
||||
|
||||
## 循环
|
||||
|
||||
[Python For Loops](https://www.w3schools.com/python/python_for_loops.asp)
|
||||
|
||||
for i
|
||||
|
||||
while
|
||||
|
||||
## 模块
|
||||
|
||||
[Fetching Title#aodf](https://github.com/jackfrued/Python-100-Days/blob/master/Day01-15/06.%E5%87%BD%E6%95%B0%E5%92%8C%E6%A8%A1%E5%9D%97%E7%9A%84%E4%BD%BF%E7%94%A8.md)
|
||||
|
||||
|
||||
|
||||
> 事实上，Python 查找一个变量时会按照“局部作用域”、“嵌套作用域”、“全局作用域”和“内置作用域”的顺序进行搜索，前三者我们在上面的代码中已经看到了，所谓的“内置作用域”就是 Python 内置的那些标识符，我们之前用过的 `input`、`print`、`int` 等都属于内置作用域。
|
||||
|
||||
python 切片的尾下标，是不包含在内的
|
||||
|
||||
0 1 2 3 4 5
|
||||
|
||||
比如说 [0:3] 取的是 0,1,2 这三个值
|
||||
|
||||
list remove 的是第一个匹配项
|
||||
|
||||
## 文件
|
||||
|
||||
[Python-100-Days/Day01-15/11.文件和异常.md at master · jackfrued/Python-100-Days · GitHub](https://github.com/jackfrued/Python-100-Days/blob/master/Day01-15/11.%E6%96%87%E4%BB%B6%E5%92%8C%E5%BC%82%E5%B8%B8.md)
|
||||
|
||||
|
||||
|
||||
2024-03-04 看到了文件这里
|
||||
|
||||
---
|
||||
|
||||
## 正则表达式
|
||||
|
||||
推荐的教程 [正则表达式30分钟入门教程](https://deerchao.cn/tutorials/regex/regex.htm)
|
||||
|
||||
推荐的练习网站 [regex101: build, test, and debug regex](https://regex101.com/)
|
||||
|
||||
## 进程与线程
|
||||
|
||||
[进程与线程的一个简单解释 - 阮一峰的网络日志](https://www.ruanyifeng.com/blog/2013/04/processes_and_threads.html)
|
||||
|
||||
[multiprocessing — Process-based parallelism — Python 3.12.2 documentation](https://docs.python.org/3/library/multiprocessing.html)
|
||||
|
||||
---
|
||||
|
||||
```python
|
||||
from multiprocessing import Process
|
||||
from os import getpid
|
||||
from random import randint
|
||||
from time import time, sleep
|
||||
|
||||
|
||||
def download_task(filename):
|
||||
print('启动下载进程，进程号[%d].' % getpid())
|
||||
print('开始下载%s...' % filename)
|
||||
time_to_download = randint(5, 10)
|
||||
sleep(time_to_download)
|
||||
print('%s下载完成! 耗费了%d秒' % (filename, time_to_download))
|
||||
|
||||
|
||||
def main():
|
||||
start = time()
|
||||
p1 = Process(target=download_task, args=('Python从入门到住院.pdf', ))
|
||||
p1.start()
|
||||
p2 = Process(target=download_task, args=('Peking Hot.avi', ))
|
||||
p2.start()
|
||||
p1.join()
|
||||
p2.join()
|
||||
end = time()
|
||||
print('总共耗费了%.2f秒.' % (end - start))
|
||||
|
||||
|
||||
if __name__ == '__main__':
|
||||
main()
|
||||
```
|
||||
|
||||
`Process` 对象的 `start` 方法用来启动进程，而 `join` 方法表示等待进程执行结束
|
||||
|
||||
# process
|
||||
|
||||
# subprocess
|
||||
|
||||
> Python 实现并发编程主要有 3 种方式：多进程、多线程、多进程 + 多线程。
|
||||
|
||||
进程通信
|
||||
|
||||
|
||||
63
src/content/post/python之禅.md
Normal file
63
src/content/post/python之禅.md
Normal file
@ -0,0 +1,63 @@
|
||||
---
|
||||
title: python之禅
|
||||
date: 2024-03-04
|
||||
author: KazooTTT
|
||||
tags:
|
||||
- python
|
||||
finished: false
|
||||
published: true
|
||||
slug: the-zen-of-python
|
||||
description: >-
|
||||
The Zen of Python, written by Tim Peters, is a collection of guiding
|
||||
principles for writing computer programs that are both beautiful and
|
||||
effective. It emphasizes the importance of simplicity, readability, and
|
||||
explicitness in coding. The text advocates for avoiding complexity and
|
||||
ambiguity, and encourages the use of namespaces. It also highlights the value
|
||||
of practicality over theoretical purity, and stresses that errors should not
|
||||
be ignored. Overall, the Zen of Python promotes clarity and elegance in
|
||||
programming practices.
|
||||
category: 后端
|
||||
toAstro: false
|
||||
---
|
||||
|
||||
# Python 之禅
|
||||
|
||||
> The Zen of Python, by Tim Peters
|
||||
>
|
||||
> Beautiful is better than ugly.
|
||||
>
|
||||
> Explicit is better than implicit.
|
||||
>
|
||||
> Simple is better than complex.
|
||||
>
|
||||
> Complex is better than complicated.
|
||||
>
|
||||
> Flat is better than nested.
|
||||
>
|
||||
> Sparse is better than dense.
|
||||
>
|
||||
> Readability counts.
|
||||
>
|
||||
> Special cases aren't special enough to break the rules.
|
||||
>
|
||||
> Although practicality beats purity.
|
||||
>
|
||||
> Errors should never pass silently.
|
||||
>
|
||||
> Unless explicitly silenced.
|
||||
>
|
||||
> In the face of ambiguity, refuse the temptation to guess.
|
||||
>
|
||||
> There should be one-- and preferably only one --obvious way to do it.
|
||||
>
|
||||
> Although that way may not be obvious at first unless you're Dutch.
|
||||
>
|
||||
> Now is better than never.
|
||||
>
|
||||
> Although never is often better than _right_ now.
|
||||
>
|
||||
> If the implementation is hard to explain, it's a bad idea.
|
||||
>
|
||||
> If the implementation is easy to explain, it may be a good idea.
|
||||
>
|
||||
> Namespaces are one honking great idea -- let's do more of those!
|
||||
52
src/content/post/python常用的命令备忘.md
Normal file
52
src/content/post/python常用的命令备忘.md
Normal file
@ -0,0 +1,52 @@
|
||||
---
|
||||
title: python常用的命令备忘
|
||||
date: 2024-03-27
|
||||
author: KazooTTT
|
||||
tags: []
|
||||
finished: false
|
||||
published: true
|
||||
slug: commonly-used-command-memos-in-python
|
||||
description: >-
|
||||
本文介绍了如何在当前环境下导出最小依赖以及配置Python包管理工具pip的镜像源。首先，通过安装`pipreqs`工具并使用命令`pipreqs ./
|
||||
--encoding=utf8`在项目根目录导出依赖。其次，讲解了如何在Windows系统中通过修改`pip.ini`文件或使用命令行配置pip的镜像源，包括设置镜像源地址、取消配置以及查看当前配置的方法。
|
||||
category: 后端
|
||||
toAstro: false
|
||||
---
|
||||
|
||||
# Python 常用的命令备忘
|
||||
|
||||
## 导出当前环境下的最小依赖
|
||||
|
||||
首先安装包
|
||||
|
||||
```shell
|
||||
pip install pipreqs
|
||||
```
|
||||
|
||||
然后在环境根目录导出
|
||||
|
||||
```shell
|
||||
pipreqs ./ --encoding=utf8
|
||||
```
|
||||
|
||||
## 镜像源配置
|
||||
|
||||
在 windows 中，搜索 pip.ini，去修改
|
||||
|
||||
或者使用命令行来配置
|
||||
|
||||
```
|
||||
pip config set global.index-url https://pypi.tuna.tsinghua.edu.cn/simple
|
||||
```
|
||||
|
||||
取消配置
|
||||
|
||||
```
|
||||
pip config unset global.index-url
|
||||
```
|
||||
|
||||
读取当前的配置：
|
||||
|
||||
```
|
||||
pip config get global.index-url
|
||||
```
|
||||
26
src/content/post/response的两种状态 fresh and stale.md
Normal file
26
src/content/post/response的两种状态 fresh and stale.md
Normal file
@ -0,0 +1,26 @@
|
||||
---
|
||||
title: response的两种状态 fresh and stale
|
||||
date: 2024-02-07
|
||||
author: KazooTTT
|
||||
tags:
|
||||
- 缓存
|
||||
published: true
|
||||
slug: two-states-of-response-fresh-and-stale
|
||||
description: >-
|
||||
在HTTP协议中，响应（response）的状态分为新鲜（fresh）和过时（stale）两种。判断一个响应是否过时的标准是生成响应后的时间是否超过了预设的阈值。HTTP
|
||||
1.0使用Expires来指定超时时间，这是一个绝对时间，但存在可以通过修改系统时间绕过限制的缺点。而HTTP 1.1则采用cache
|
||||
control中的max-age属性来判断，这是一个相对时间，更为灵活和安全。
|
||||
---
|
||||
|
||||
# Response 的两种状态 Fresh and Stale
|
||||
|
||||
新鲜 过时
|
||||
|
||||
判断标准：生成 response 后的时间有没有超过某个值，其实 expires 和 max-age 本质做的事情一样，只是前者是绝对时间，后者是相对时间。
|
||||
|
||||
http1.0
|
||||
使用 Expires 来显式地表示超时的时间
|
||||
缺点：修改系统的时间可以绕过此限制
|
||||
|
||||
http1.1
|
||||
使用 cache control 的 max-age 来判断
|
||||
26
src/content/post/shot.so - 图片美化工具.md
Normal file
26
src/content/post/shot.so - 图片美化工具.md
Normal file
@ -0,0 +1,26 @@
|
||||
---
|
||||
title: shot.so
|
||||
date: 2023-09-17
|
||||
author: KazooTTT
|
||||
tags:
|
||||
- 软件推荐
|
||||
- 图片处理
|
||||
- 设计
|
||||
- 图片美化工具
|
||||
finished: true
|
||||
published: true
|
||||
slug: shotso-image-beautification-tool
|
||||
description: >-
|
||||
shot.so是一个图片美化工具，主要用于快速美化截图。它支持设备模拟，允许用户修改阴影、边框、比例等属性。该工具内置了大量免费模板，方便用户快速创建精美的图片效果。
|
||||
rinId: 62
|
||||
category: 软件
|
||||
toAstro: false
|
||||
---
|
||||
|
||||
# shot.so - 图片美化工具
|
||||
|
||||
<https://shots.so/>
|
||||
|
||||
可快速美化图片（主要是截图），支持设备 mock，支持修改 shadow,border,scale 等。内置模板很多，且均免费。
|
||||
|
||||
|
||||
108
src/content/post/solidity_bootcamp学习笔记.md
Normal file
108
src/content/post/solidity_bootcamp学习笔记.md
Normal file
@ -0,0 +1,108 @@
|
||||
---
|
||||
title: solidity_bootcamp学习笔记
|
||||
date: 2023-11-16
|
||||
author: KazooTTT
|
||||
tags:
|
||||
- web3，开build，Solidity Bootcamp，区块链，ERC20
|
||||
published: true
|
||||
slug: soliditybootcamp-study-notes
|
||||
description: >-
|
||||
在之前的博客文章中，作者提到了报名参加了一个名为“web3课程”的openbuild课程。2023年11月16日是课程的第一天，作者对课程内容感到有趣，并计划继续学习并在博客中记录心得。第一节课主要讲解了区块链的基本原理和与web2的区别，作者还计划完成课程中的项目部署，并寻找其他资源进行额外学习。第二节课涉及了Solidity智能合约开发，并提供了相关的学习资源和工具。作者还收集了一些web3相关的工具、案例和教程链接，以便进一步学习和实践。
|
||||
rinId: 11
|
||||
finished: true
|
||||
category: web3
|
||||
---
|
||||
|
||||
|
||||
在之前的 [3-周报 平淡的一周 | KazooTTT Blog](https://www.kazoottt.top/article/weekly3#194502abe9804dbc860fb9c0a1091819) 中提到了一个 openbuild 的 [web3 课程](https://openbuild.xyz/learn/challenges/91?from=Challenges)，抱着尝试的心态报名了。2023-11-16 是开课的第一天，整体停下来觉得挺有意思，大家的氛围也不错。打算继续学习下去，并且在本文中记录学习心得。
|
||||
|
||||
# 待办事项
|
||||
|
||||
- [x] 完成 [[#11.16 第一节课]] 中的部署项目（添加时间 2023-11-16）
|
||||
|
||||
# 11.16 第一节课
|
||||
|
||||
今天主要讲了区块链的基本原理，与 web2 的区别。了解到在 web3 的开发中，比较注重的是合约（类似传统后端）和前端，而前端的技术栈主要是 react 那一套（这一点在后面收集到的案例中也有体现，大部分都是 nextjs 来实现的）
|
||||
|
||||
由于我从未接触过 web3，听下来还是挺吃力的，不过感觉挺有趣。打算在课程之余，另外找一些课程来学习和实践，做一些感兴趣的东西，以及给开源项目提 pr。
|
||||
|
||||
要做的事:
|
||||
完成课程中教学的例子：区块链开发例子 - 部署一个 [ERC20 代币](<[https://github.com/meterio/tokenERC20](https://github.com/meterio/tokenERC20)>)
|
||||
|
||||
**对自己提升最快的应该是多参加一些 Hackathon**
|
||||
|
||||
# 2023-11-18 第二节课
|
||||
|
||||
课件如下：
|
||||
|
||||
![[IMG-20250104114718280.pdf]]
|
||||
|
||||
## 备忘
|
||||
|
||||
问题咨询：
|
||||
|
||||
[https://github.com/openbuildxyz/solidity_bootcamp](https://github.com/openbuildxyz/solidity_bootcamp)
|
||||
|
||||
Meter 社区网站：
|
||||
|
||||
[https://docs.meter.io/developer-documentation/introduction](https://docs.meter.io/developer-documentation/introduction)
|
||||
|
||||
区块链查询网站：
|
||||
|
||||
[https://chainlist.org](https://chainlist.org)
|
||||
|
||||
ERC20 案例网站：
|
||||
|
||||
[https://github.com/meterio/tokenERC20](https://github.com/meterio/tokenERC20)
|
||||
![[IMG-20250104114718484.pdf]]
|
||||
|
||||
# 资源收集
|
||||
|
||||
## 工具
|
||||
|
||||
### [Chainlist](https://chainlist.org/)
|
||||
|
||||
查询可连接的网络
|
||||
|
||||
[GitHub - DefiLlama/chainlist](https://github.com/DefiLlama/chainlist)
|
||||
基于 nextjs
|
||||
|
||||
[GitHub - DefiLlama/chainlist](https://github.com/DefiLlama/chainlist)
|
||||
|
||||
## 案例
|
||||
|
||||
### [Lens Protocol](https://www.lens.xyz/)
|
||||
|
||||
基于 web3 的社交平台
|
||||
|
||||
|
||||
### [Dune](https://dune.com/home)
|
||||
|
||||
web3 交流论坛
|
||||
报表做的很好看
|
||||
|
||||
|
||||
|
||||
（能从上面的技术栈看出来，绝大部分都是 react/nextjs)
|
||||
|
||||
## 教程
|
||||
|
||||
## 当前的课程链接
|
||||
|
||||
[Solidity Bootcamp](https://openbuild.xyz/learn/challenges/91?from=Challenges)
|
||||
|
||||
## Openbuild 的另一门课程
|
||||
|
||||
[Learn Smart Contract with Foundry](https://openbuild.xyz/learn/courses/83)
|
||||
|
||||
## 微信公众号的入门文章
|
||||
|
||||
[Web3 从入门到实战](https://mp.weixin.qq.com/s/OFmrKuyHYF-W6zTLEBXVoA)
|
||||
|
||||
## 其他人推荐的 Foundry-full-course-f23
|
||||
|
||||
[GitHub - Cyfrin/foundry-full-course-f23](https://github.com/Cyfrin/foundry-full-course-f23)
|
||||
|
||||
# 更新记录
|
||||
|
||||
2023-11-16 第一节课笔记，以及一些资源收集。
|
||||
50
src/content/post/tcp与udp传输层.md
Normal file
50
src/content/post/tcp与udp传输层.md
Normal file
@ -0,0 +1,50 @@
|
||||
---
|
||||
slug: tcp-vs-udp-transport-layer
|
||||
published: true
|
||||
tags:
|
||||
- 三次握手
|
||||
description: >-
|
||||
TCP和UDP是两种不同的传输层协议。TCP提供可靠的数据传输，确保数据的完整性和顺序不变，通过建立连接、发送SYN、接收SYN
|
||||
ACK和发送ACK等步骤来验证和确认链接。如果数据传输中出现问题，TCP会重新发送数据以恢复损失。TCP适用于文件传输和浏览器浏览等对稳定性要求高的场景。
|
||||
相比之下，UDP是一种不可靠的传输协议，它不建立会话，不保证数据传递，只是简单地发送数据。UDP不关心对方是否接收到数据，因此传输速度更快，适合实时性要求高的应用，如语音、视频通话和游戏。UDP的标头设计简单，有助于提高传输效率。
|
||||
---
|
||||
|
||||
# Tcp 与 Udp 传输层
|
||||
|
||||
## Tcp 可靠
|
||||
|
||||
数据完整而且顺序不变
|
||||
先确认 验证链接
|
||||
|
||||
建立联系
|
||||
计算机发送 SYN
|
||||
接收方发送一条确认信息 SYN ACK
|
||||
计算机发送 ACK 收到给到服务器
|
||||
![[IMG-20250104114646207.png]]
|
||||
如果没有收到，就会重新发送（可以恢复损失的数据）
|
||||
|
||||
方式：
|
||||
|
||||
![[IMG-20250104114647089.png]]
|
||||
|
||||
seq is index of data item
|
||||
after trans , if the data is not the same as sended, the checksum will be not the same, it will be deleted
|
||||
|
||||
![[IMG-20250104114650568.png]]
|
||||
|
||||
文件传输，浏览器浏览，不介意延迟问题，重视稳定
|
||||
|
||||
## Udp 不可靠
|
||||
|
||||
无连接
|
||||
不建立会话，不保证数据传递
|
||||
只是一直发送数据
|
||||
|
||||
发数据的时候，不在乎对方是否接收到
|
||||
更快
|
||||
|
||||
重视实时连接
|
||||
语音，视频通话，游戏
|
||||
|
||||
UDP 标头
|
||||
![[IMG-20250104114651984.png]]
|
||||
24
src/content/post/telegram 通知机器人.md
Normal file
24
src/content/post/telegram 通知机器人.md
Normal file
@ -0,0 +1,24 @@
|
||||
---
|
||||
slug: telegram-notification-bot
|
||||
published: true
|
||||
description: 该Telegram通知机器人主要用于实时通知用户在微博、B站（包括动态、投稿和直播）以及毛怪俱乐部的新帖子发布情况。
|
||||
tags:
|
||||
- telegram通知
|
||||
- b微博发布
|
||||
- b站动态
|
||||
- b站投稿
|
||||
- b站直播
|
||||
- maoqu俱乐部
|
||||
---
|
||||
|
||||
# Telegram 通知机器人
|
||||
|
||||
通知范围：
|
||||
|
||||
微博发布
|
||||
|
||||
b 站动态
|
||||
b 站投稿
|
||||
b 站直播
|
||||
|
||||
毛怪俱乐部帖子发布
|
||||
20
src/content/post/tokenERC20部署和学习.md
Normal file
20
src/content/post/tokenERC20部署和学习.md
Normal file
@ -0,0 +1,20 @@
|
||||
---
|
||||
title: tokenERC20部署和学习
|
||||
slug: tokenerc20-deployment-and-learning
|
||||
published: true
|
||||
description: >-
|
||||
本内容涉及ERC20代币的部署与学习，具体参考GitHub上的meterio/tokenERC20项目，地址为https://github.com/meterio/tokenERC20。
|
||||
rinId: 12
|
||||
finished: true
|
||||
date: 2024-02-07
|
||||
category: web3
|
||||
tags:
|
||||
- tokenERC20
|
||||
- 部署
|
||||
- 学习
|
||||
toAstro: false
|
||||
---
|
||||
|
||||
# tokenERC20 部署和学习
|
||||
|
||||
[GitHub - meterio/tokenERC20](https://github.com/meterio/tokenERC20)
|
||||
46
src/content/post/tweet to image 输入推特链接生成对应的图片.md
Normal file
46
src/content/post/tweet to image 输入推特链接生成对应的图片.md
Normal file
@ -0,0 +1,46 @@
|
||||
---
|
||||
title: tweet to image
|
||||
date: 2024-06-26
|
||||
author: KazooTTT
|
||||
type: Post
|
||||
status: Published
|
||||
tags:
|
||||
- Tweet to Image
|
||||
- Twitter Tools
|
||||
- Social Media
|
||||
- Online Tools
|
||||
- Image Conversion
|
||||
- Shareable Content
|
||||
- Digital Marketing
|
||||
finished: true
|
||||
published: true
|
||||
slug: tweet-to-image
|
||||
description: >-
|
||||
This post introduces three online tools that allow users to convert tweets
|
||||
into shareable images. The tools featured are TweetPik, PostWizz, and 10015
|
||||
Tools. These services provide an easy way to create visually appealing
|
||||
screenshots of tweets for sharing on various platforms.
|
||||
NotionID-notionnext: 1203f3c5-7438-44af-a655-d509a4dff4ec
|
||||
link-notionnext: 'https://kazoottt.notion.site/tweet-to-image-1203f3c5743844afa655d509a4dff4ec'
|
||||
rinId: 50
|
||||
category: 软件
|
||||
toAstro: false
|
||||
---
|
||||
|
||||
# Tweet to Image 输入推特链接生成对应的图片
|
||||
|
||||
[Perfect Twitter Screenshots - TweetPik](https://tweethunter.io/tweetpik)
|
||||
|
||||
|
||||
|
||||
[Free Tweet to Image Converter Online - PostWizz](https://postwizz.com/tweet-to-image-converter/)
|
||||
|
||||
|
||||
|
||||
[Tweet to Image Converter: Tweet Screenshots Online | 10015 Tools](https://10015.io/tools/tweet-to-image-converter)
|
||||
|
||||
|
||||
|
||||
ref：
|
||||
|
||||
[The Top 6 Free Tools to Convert Tweets Into Shareable Images](https://www.makeuseof.com/free-tools-convert-tweets-into-images/)
|
||||
38
src/content/post/vite中使用stl.md
Normal file
38
src/content/post/vite中使用stl.md
Normal file
@ -0,0 +1,38 @@
|
||||
---
|
||||
slug: stl-is-used-in-vite
|
||||
description: >-
|
||||
修改了vite配置文件和全局类型定义后，支持STL文件的导入现在可以正常使用。
|
||||
tags:
|
||||
- vite
|
||||
- stl
|
||||
title: vite中使用stl
|
||||
date: 2024-12-17T00:00:00.000Z
|
||||
author: KazooTTT
|
||||
type: Post
|
||||
status: Published
|
||||
finished: true
|
||||
published: true
|
||||
category: null
|
||||
toAstro: false
|
||||
---
|
||||
|
||||
首先需要修改 vite.config.ts
|
||||
|
||||
``` ts
|
||||
import { defineConfig } from 'vite';
|
||||
|
||||
export default defineConfig({
|
||||
assetsInclude: ['**/*.stl'], // 允许 .stl 文件作为资源导入
|
||||
});
|
||||
```
|
||||
|
||||
在 global.d.ts 新增对于.stl 的支持
|
||||
|
||||
``` ts
|
||||
declare module '*.stl' {
|
||||
const content: string;
|
||||
export default content;
|
||||
}
|
||||
```
|
||||
|
||||
然后就可以 import 了
|
||||
34
src/content/post/vscode md自动预览.md
Normal file
34
src/content/post/vscode md自动预览.md
Normal file
@ -0,0 +1,34 @@
|
||||
---
|
||||
title: vscode md自动预览
|
||||
date: 2024-10-15
|
||||
author: KazooTTT
|
||||
type: Post
|
||||
status: Published
|
||||
tags:
|
||||
- vscode
|
||||
- markdown
|
||||
finished: true
|
||||
published: true
|
||||
category: 软件
|
||||
slug: vscode-md
|
||||
description: >-
|
||||
vscode md自动预览是使用Markdown All In One插件实现的，通过设置Auto Show Preview To
|
||||
Side为true可以快速看到 markdown 文件的预览效果，但这种方式不是很推荐。
|
||||
NotionID-notionnext: 12b55568-fd75-81ce-82a3-fdb4a13d1658
|
||||
link-notionnext: 'https://kazoottt.notion.site/vscode-md-12b55568fd7581ce82a3fdb4a13d1658'
|
||||
toAstro: false
|
||||
---
|
||||
|
||||
# vscode md 自动预览
|
||||
|
||||
下载 vscode 插件 [markdown all in one](https://marketplace.visualstudio.com/items?itemName=yzhang.markdown-all-in-one)
|
||||
|
||||
|
||||
|
||||
然后设置中搜索：`Auto Show Preview To Side`
|
||||
|
||||
设置为 `true`
|
||||
|
||||
|
||||
|
||||
备注：不是很好用，不推荐这种使用方式
|
||||
25
src/content/post/win11恢复win10右键的样式.md
Normal file
25
src/content/post/win11恢复win10右键的样式.md
Normal file
@ -0,0 +1,25 @@
|
||||
---
|
||||
slug: win11-right-menu
|
||||
NotionID-notionnext: 12b55568-fd75-8198-b766-dd14229022d2
|
||||
link-notionnext: https://kazoottt.notion.site/win11-win10-12b55568fd758198b766dd14229022d2
|
||||
tags:
|
||||
- win11
|
||||
- 右键样式
|
||||
- WIN10恢复
|
||||
description: Windows 11恢复 win10 的右键菜单样式，提供了“Windows 11 Classic Context Menu v1.2”程序，帮助用户恢复 win10 的原始右键菜单风格。
|
||||
title: win11恢复win10右键的样式
|
||||
date: 2024-12-17
|
||||
author: KazooTTT
|
||||
type: Post
|
||||
status: Published
|
||||
finished: true
|
||||
published: true
|
||||
category: 软件
|
||||
toAstro: true
|
||||
---
|
||||
|
||||
# win11 恢复 win10 右键的样式
|
||||
|
||||
使用：[Windows 11 Classic Context Menu v1.2](https://www.sordum.org/14479/windows-11-classic-context-menu-v1-2/)
|
||||
|
||||
![[IMG-20250104114722956.png]]
|
||||
@ -0,0 +1,188 @@
|
||||
---
|
||||
title: 【译】Alpine、Slim、Bookworm、Bullseye、Stretch、Jessie - 我应该选择哪个 Docker Image？
|
||||
date: 2023-12-13
|
||||
author: KazooTTT
|
||||
tags:
|
||||
- dockek
|
||||
- 镜像
|
||||
- image
|
||||
finished: true
|
||||
published: true
|
||||
slug: >-
|
||||
alpine-slim-stretch-bookworm-bullseye-buster-jessie-which-docker-image-should-i-choose
|
||||
description: >-
|
||||
本文讨论了在选择Docker镜像时，如何根据不同的需求和环境选择合适的镜像，如Alpine、Slim、Bookworm、Bullseye、Stretch、Jessie等。文章详细解释了这些镜像的特点，包括它们的基础操作系统、大小、安全性和适用场景。同时，作者提供了一些实用的建议，帮助读者根据项目需求和环境限制，选择最合适的Docker镜像。此外，文章还强调了在生产环境中遵循安全最佳实践的重要性，并提供了比较不同Docker镜像大小的方法。
|
||||
toAstro: false
|
||||
---
|
||||
|
||||
# **【译】Alpine、Slim、Bookworm、Bullseye、Stretch、Jessie - 我应该选择哪个 Docker Image？**
|
||||
|
||||
原文链接：[https://readmedium.com/zh/alpine-slim-stretch-bookworm-bullseye-buster-jessie-which-docker-image-should-i-choose-500f8c15c8cf](https://readmedium.com/zh/alpine-slim-stretch-bookworm-bullseye-buster-jessie-which-docker-image-should-i-choose-500f8c15c8cf)
|
||||
|
||||
使用的翻译 GPT:**[翻译英文科技文章的 GPT](https://chat.openai.com/g/g-uBhKUJJTl-ke-ji-wen-zhang-fan-yi)**
|
||||
|
||||
翻译内容如下：
|
||||
|
||||
## Alpine、Slim、Bookworm、Bullseye、Stretch、Jessie—我应该选择哪个 Docker 镜像？
|
||||
|
||||
我关于选择适合你项目的正确 Docker 镜像的原始文章的更新。
|
||||
|
||||
|
||||
|
||||
照片由 Taylor Deas-Melesh 在 Unsplash 拍摄
|
||||
|
||||
几年前，当我在学习如何使用 Docker 来容器化我的应用程序时，[我写了一篇文章，讲解了不同版本和镜像类型之间的区别](https://readmedium.com/alpine-slim-stretch-buster-jessie-bullseye-bookworm-what-are-the-differences-in-docker-62171ed4531d)。当我刚开始时，我总是困惑于应该选择哪个版本的镜像。
|
||||
|
||||
Alpine、slim、bookworm、bullseye、stretch、buster、jessie、slim-bookworm—这些都是什么意思？
|
||||
|
||||
它一直是并且仍然是我阅读量最高的文章。困惑是真实的。但是，自从我第一次写这篇文章以来，我学到了很多，想要提供一个更新。
|
||||
|
||||
简而言之，docker 镜像之间的区别仍然是其运行的底层操作系统。但问题仍然存在，你该如何选择正确的镜像？
|
||||
|
||||
记住，编程中没有永久的事物。你可以尝试不同的选项，看看哪个适合你，进行更改并重新部署。在推送到生产环境之前，始终彻底测试你的镜像。
|
||||
|
||||
## 简单标签 vs. 共享标签
|
||||
|
||||
在我之前的文章中，我没有解释你可能在一些 Docker 镜像页面上看到的简单标签与共享标签。
|
||||
|
||||
简单标签与特定版本的镜像相关联，该镜像是为 Linux 或 Windows 构建的。共享标签代表一组镜像。集合中的每个镜像可能为不同的平台和架构构建。
|
||||
|
||||
无论是简单标签还是共享标签，检索哪个镜像的决定都由主机 docker 守护程序确定。
|
||||
|
||||
要记住的是，“简单”标签用于单一平台（Windows 或 Linux），而“共享标签”可以用于多个平台的组合。
|
||||
|
||||
通常，如果你知道你为哪个平台构建，就选择简单标签。如果你真的需要一个可移植的 docker 镜像，你可能会考虑一个共享标签。小心这个并彻底测试。
|
||||
|
||||
## 完整官方镜像
|
||||
|
||||
我将使用 python 和 node 作为例子，因为这些是我最常用的 docker 镜像，但这些规则适用于大多数镜像。
|
||||
|
||||
根据 DockerHub 的说法，没有合格标签的完整镜像是事实上的镜像，如果你不确定并且刚开始，应该使用它。
|
||||
|
||||
例如：
|
||||
|
||||
python:3.11.4 node:20.3.0 这些镜像基于最新的稳定 Debian 操作系统版本。我通常在尝试在开发环境中快速启动一个项目时，首先使用其中之一，那时我还不关心生成的镜像的大小或安全性。
|
||||
|
||||
在我之前的文章中，我提到完整镜像是最安全的选择，但我想修改这个声明。完整镜像不是最安全的选择，但当你试图在开发环境中快速启动某事时，你应该使用它。
|
||||
|
||||
原因是，它可能包含你的应用程序或脚本运行所需的一切。
|
||||
|
||||
但是，在部署到生产之前，一定要选择对你来说最小最安全的镜像。在下面阅读有关 docker 安全最佳实践的更多信息。
|
||||
|
||||
所有其他镜像选择都是完整镜像的子集。因此，如果你从子集开始，你可能会发现自己必须安装在较小的镜像中不可用的工具。
|
||||
|
||||
如果你有更多时间，并且想要从一开始就为生产环境构建，那么研究下面概述的其他镜像选择，并找到适合你的镜像。
|
||||
|
||||
## -bookworm/-bullseye/-stretch/-jessie
|
||||
|
||||
带有 bullseye、bookworm、stretch、buster 或 jessie 标签的镜像是不同 Debian 版本的代号。在撰写本文时，稳定的 Debian 版本是 12，其代号是“Bookworm”。“Bullseye”是 Debian 11。“Buster”是 10。“Stretch”是所有版本 9 变体的代号，“Jessie”是所有版本 8 变体的代号。
|
||||
|
||||
未来的版本正在开发中，但尚未稳定，它们是“Forky”和“Trixy”。你可能会开始在 DockerHub 上的镜像版本列表中看到这些标签。
|
||||
|
||||
如果你的代码与特定版本的 Debian 操作系统兼容，请选择其中一个镜像。通常情况下，当你安装超出基础操作系统提供的包时，就会这样。在这种情况下，你要确保你留在同一个 Debian 版本上，这样你就不会在将来破坏你的构建。
|
||||
|
||||
## -slim
|
||||
|
||||
slim 镜像是完整镜像的精简版本。这个镜像通常只安装运行你特定工具所需的最小内容。就 Python 而言，那就是运行 python 所需的最少包，对于 node.js 也是如此。
|
||||
|
||||
通过省略不常用的工具，镜像变得更小。如果你有空间限制，不需要完整版本，请使用此镜像。
|
||||
|
||||
但是在使用此镜像时一定要彻底测试！如果你遇到无法解释的错误，请尝试切换到完整镜像，看看是否解决了问题。
|
||||
|
||||
Slim 还有一个额外的好处，那就是最安全的。更小的镜像有较少可能被攻击的点，所以如果你只需要运行一个基本脚本或你的应用程序不需要完整操作系统的许多功能，使用最小的镜像是最好的选择。
|
||||
|
||||
## -slim-bookworm/-slim-bullseye
|
||||
|
||||
将 slim 与特定 Debian 版本结合时，你会得到一个只包含运行该特定版本操作系统所需最基本文件的 slim 版本。
|
||||
|
||||
## -alpine
|
||||
|
||||
Alpine 镜像基于 Alpine Linux 项目，该项目是专门为容器内部使用而构建的操作系统。很长一段时间以来，这些是最受欢迎的镜像变体，因为它们的体积非常小。
|
||||
|
||||
然而，一些团队正在远离 alpine，因为这些镜像可能导致难以调试的兼容性问题。特别是，如果使用 Python 镜像，一些轮子被构建为与 Debian 兼容，并且需要重新编译才能与基于 Apline 的镜像一起使用。
|
||||
|
||||
使用 Alpine 镜像的主要原因是使你的结果镜像尽可能小。基础镜像将小于 5MB。当前的 python 基础镜像（将 python 添加到基础 alpine 镜像）为 78.9MB。那仍然相对较小。
|
||||
|
||||
如果空间是一个问题，这个镜像是最受推荐的。
|
||||
|
||||
缺点是它不包含你可能需要的一些包。主要是，它使用比 glibc 更轻的 musl lib。如果你的应用程序有特定的 libc 要求，你可能会遇到问题。
|
||||
|
||||
小型镜像中缺少你需要的东西，你可以直接在 Dockerfile 中安装所需的包。这样可以保持镜像仅包含你需要的内容。请注意，如果你安装了外部包，你的 Dockerfile 将会发生变化。主要区别在于你将使用 apk 而不是 apt-get 来安装包。
|
||||
|
||||
对于 -alpine 镜像有一些担忧，所以你需要了解它们。在这里和这里阅读一些关于它们的信息，并做好研究。同样，如果在构建 Dockerfile 时遇到无法解释的问题，尝试切换到完整镜像看看是否能解决问题。
|
||||
|
||||
## -windowsservercore
|
||||
|
||||
我很少使用 Windows，现在我坚定地站在 Mac/Linux 阵营，但如果你的应用程序只在 Windows 或 Windows Server 上运行，这是你的镜像。
|
||||
|
||||
## 在生产中，始终遵循安全最佳实践
|
||||
|
||||
一旦准备好进入生产，选择正确的基础镜像至关重要。当你超越了“让它工作”的阶段，你就需要确保你正在“正确地做事”。安全性是极其重要的一环。
|
||||
|
||||
首先，确保你使用的是 DockerHub 的官方镜像或由验证过的发布者构建的镜像。你可以在 DockerHub 上的镜像旁看到这些徽章。
|
||||
|
||||
选择满足你需求的最小基础镜像。决定以上哪个版本的镜像符合你的需求。较小的镜像可以最小化你暴露的安全漏洞数量，且更轻量。
|
||||
|
||||
确保你从 Dockerfile 中移除任何不必要的包。在开发和测试时，你可能会尝试安装一些包，但在部署到生产之前，返回去移除任何未使用的包。
|
||||
|
||||
不要在生产环境的 Dockerfile 中使用 :latest。这样做将总是拉取最新的镜像，而你的应用程序的依赖可能与未来版本不兼容，导致它可能在未来出现故障。
|
||||
|
||||
## 那么，我应该选择哪一个？
|
||||
|
||||
以下是我使用的一些一般指导原则：
|
||||
|
||||
- 如果我需要在开发环境中快速启动某物，没有空间限制，也没有时间瞎折腾，我会从事实上的镜像开始。
|
||||
- 我主要关心的是镜像是否具备我需要的一切以开箱即用，我可以让我的概念验证工作。然而，这个镜像将占用最多的空间，也是最不安全的。除非绝对必要，不要在生产环境中使用它。
|
||||
- 如果空间是一个问题，并且我知道我只需要运行特定语言（如 python）的最小包，我会选择 -slim。Slim 提供了运行 Python 所需的最低限度，并减少了安全漏洞。
|
||||
- 简单的 Python 脚本是 slim 镜像的良好候选。
|
||||
- 对于一些我有时间彻底测试的项目，并且有极端的空间限制，我会使用 Alpine 镜像。但请注意，这可能导致更长的构建时间和难以发现的错误。
|
||||
- 如果你在将 docker 容器移植到新环境时遇到困难，或者在添加新包时出现故障，尝试不同的镜像。
|
||||
- 当我需要安装针对特定 Debian 版本的额外包时，我使用 bullseye 或 bookworm 标签。这将确保我获得该版本 Debian 的最新版本，但不会在将来破坏我的构建。
|
||||
- 你还可以尝试这些镜像的 -slim 版本以减少空间。
|
||||
- 最后，始终滚动到特定镜像的 DockerHub 页面底部，阅读有关选择特定镜像的建议。
|
||||
|
||||
## 比较 Docker 镜像大小
|
||||
|
||||
如果你想亲自检查 docker 镜像并比较它们的大小，请尝试这个。
|
||||
|
||||
```python
|
||||
docker pull --quiet python:3.11.4
|
||||
docker pull --quiet python:3.11.4-slim
|
||||
docker pull --quiet python:3.11.4-alpine
|
||||
docker pull --quiet python:3.11.4-bookworm
|
||||
docker pull --quiet python:3.11.4-slim-bookworm
|
||||
docker images | sort -k7 -h
|
||||
|
||||
```
|
||||
|
||||
你会看到事实上的镜像与 -slim 和 -alpine 版本之间有巨大的差异。
|
||||
|
||||
|
||||
|
||||
## 结论
|
||||
|
||||
在选择 docker 镜像时，重要的是要考虑许多因素，包括你为哪种架构构建、空间限制、安全问题以及构建镜像所需的时间。
|
||||
|
||||
我希望这有助于阐明差异，并指导你为下一个项目选择 docker 镜像。
|
||||
|
||||
🙏 感谢你读到最后！如果你有任何问题，请在下面评论或通过 [julie.perilla@gmail.com](https://www.notion.so/kazoottt/julie.perilla@gmail.com) 给我发邮件。
|
||||
|
||||
👉 新来 Medium？成为会员，每周只需 1 美元即可阅读任何文章！
|
||||
|
||||
☕ 喜欢你所读的内容？请我喝杯咖啡来激发更多内容！
|
||||
|
||||
## 参考文献
|
||||
|
||||
### Python
|
||||
|
||||
Python 是一种解释型、交互式、面向对象、开源的编程语言。[hub.docker.com](https://www.notion.so/kazoottt/hub.docker.com)
|
||||
|
||||
### Node
|
||||
|
||||
Node.js 是一个基于 JavaScript 的服务器端和网络应用平台。[hub.docker.com](https://www.notion.so/kazoottt/hub.docker.com)
|
||||
|
||||
安全最佳实践 镜像安全最佳实践指南 [docs.docker.com](https://www.notion.so/kazoottt/docs.docker.com)
|
||||
|
||||
### DebianReleases
|
||||
|
||||
Debian 正在持续开发中。最新发布的是 Debian 12.0。它也（当前）被称为或以其… [wiki.debian.org](https://www.notion.so/kazoottt/wiki.debian.org)
|
||||
26
src/content/post/一直记不住的form layout.md
Normal file
26
src/content/post/一直记不住的form layout.md
Normal file
@ -0,0 +1,26 @@
|
||||
---
|
||||
title: 一直记不住的form layout
|
||||
date: 2023-10-17
|
||||
author: KazooTTT
|
||||
tags:
|
||||
- antdesign
|
||||
published: true
|
||||
slug: form-layout-that-i-cant-remember
|
||||
description: >-
|
||||
本文讨论了在使用antd的Form组件时，如何理解和应用layout、labelCol和wrapperCol这几个关键属性。作者提到自己经常忘记这些属性的用法，因此撰写此文以学习和备忘。文章详细解释了这些属性的含义和在Form及Form.Item组件中的应用。
|
||||
---
|
||||
|
||||
# 一直记不住的 form Layout
|
||||
|
||||
在使用 [antd 的 form 组件](https://ant.design/components/form) 的时候，需要进行排版，因此对于 Form 组件通常用到一下几个属性：
|
||||
|
||||
| | | |
|
||||
| ----------- | ---- | --------- |
|
||||
| 属性\| 组件 | Form | Form.Item |
|
||||
| layout | ✅ | |
|
||||
| labelCol | ✅ | ✅ |
|
||||
| wrapperCol | ✅ | ✅ |
|
||||
|
||||
但我对于这几个属性总是忘记怎么使用，因此写一篇博文来学习它的用法并且作为备忘。
|
||||
|
||||
## 属性的含义
|
||||
21
src/content/post/不建议做的事.md
Normal file
21
src/content/post/不建议做的事.md
Normal file
@ -0,0 +1,21 @@
|
||||
---
|
||||
title: 不建议做的事
|
||||
date: 2023-03-19
|
||||
author: KazooTTT
|
||||
finished: false
|
||||
published: true
|
||||
slug: dont-recommend
|
||||
description: >-
|
||||
本文列举了四件不建议做的事情：购买键盘，因为目前已有太多且使用不过来；跷二郎腿，可能对身体健康不利；熬夜，影响睡眠质量和身体健康；不吃早饭，可能导致营养不均衡和能量不足。建议读者避免这些行为，以维护健康的生活方式。
|
||||
tags:
|
||||
- 不良习惯
|
||||
- 疏忽生活管理
|
||||
- 生活上危险行为
|
||||
---
|
||||
|
||||
# 不建议做的事
|
||||
|
||||
1. 买键盘（目前键盘太多了，根本用不过来）
|
||||
2. 跷二郎腿
|
||||
3. 熬夜
|
||||
4. 不吃早饭
|
||||
20
src/content/post/乱七八糟的推荐.md
Normal file
20
src/content/post/乱七八糟的推荐.md
Normal file
@ -0,0 +1,20 @@
|
||||
---
|
||||
slug: messy-recommendations
|
||||
published: true
|
||||
description: >-
|
||||
The content features a recommendation for "Not By AI — Add the Badge to Your
|
||||
Human-Created Content," a resource that encourages the use of a badge to
|
||||
identify content created by humans rather than AI. The link provided directs
|
||||
to a website where users can access this badge, and an accompanying image
|
||||
illustrates the badge design.
|
||||
tags:
|
||||
- 乱七八糟的推荐
|
||||
- 推荐电影
|
||||
- 电影杂志
|
||||
---
|
||||
|
||||
# 乱七八糟的推荐
|
||||
|
||||
[Not By AI — Add the Badge to Your Human-Created Content](https://notbyai.fyi/)
|
||||
|
||||
![[IMG-20250104114646390.png]]
|
||||
11
src/content/post/事件循环.md
Normal file
11
src/content/post/事件循环.md
Normal file
@ -0,0 +1,11 @@
|
||||
---
|
||||
slug: event-loop
|
||||
published: true
|
||||
description: 事件循环是编程中的一个概念，主要用于处理和管理程序中的异步操作和事件。它允许程序在等待某些操作完成的同时继续执行其他任务，从而提高程序的效率和响应性。
|
||||
tags:
|
||||
- 循环
|
||||
- 事件
|
||||
- 程序
|
||||
---
|
||||
|
||||
# 事件循环
|
||||
26
src/content/post/从零开始学习React.md
Normal file
26
src/content/post/从零开始学习React.md
Normal file
@ -0,0 +1,26 @@
|
||||
---
|
||||
title: 从零开始学习React
|
||||
date: 2023-09-06
|
||||
author: KazooTTT
|
||||
finished: false
|
||||
published: true
|
||||
slug: learning-react-from-scratch
|
||||
description: >-
|
||||
本文介绍了React学习的基础知识，包括状态的定义和useMemo与useCallback的区别。状态是React中一个重要的概念，它不是静态的，不依赖于props，也不能通过现有的props或状态计算得出。文章还解释了useMemo和useCallback在React中的应用，指出useCallback的主要优势在于避免编写额外的嵌套函数，两者在功能上是等价的。
|
||||
tags:
|
||||
- 从零开始学习React，状态，memo和useCallback
|
||||
---
|
||||
|
||||
# 从零开始学习 React
|
||||
|
||||
自己对于 react 还是只停留在使用层面，这是远远不够的。
|
||||
|
||||
什么是状态
|
||||
|
||||
1. 不会随着时间推移保持不变
|
||||
2. 不是从 props 传进来的
|
||||
3. 不能根据现在有的 props 或者状态把它给计算出来
|
||||
|
||||
useMemo 和 useCallback 的区别
|
||||
The two examples above are completely equivalent. The only benefit to `useCallback` is that it lets you avoid writing an extra nested function inside. It doesn’t do anything else. [Read more about `useCallback`.](https://react.dev/reference/react/useCallback)
|
||||
上面的两个例子是完全等价的。`useCallback` 的唯一好处是它可以让您避免在内部编写额外的嵌套函数。它没有做任何其他事情。了解有关 `useCallback` 的更多信息。
|
||||
19
src/content/post/从零开始阅读vite文档.md
Normal file
19
src/content/post/从零开始阅读vite文档.md
Normal file
@ -0,0 +1,19 @@
|
||||
---
|
||||
slug: reading-vite-documentation-from-scratch
|
||||
published: true
|
||||
description: >-
|
||||
Vite是一个新型的前端构建工具，它包括一个用于开发应用的开发服务器和一个用于打包的构建指令。Vite提供了NPM依赖解析和预打包功能，详细信息可以在其官方指南中找到。
|
||||
tags:
|
||||
- 前端构建工具，开发服务器、打包指令
|
||||
---
|
||||
|
||||
# 什么是 Vite
|
||||
|
||||
是一种新型前端构建工具，它主要由两部分组成：
|
||||
|
||||
A dev server 开发服务器 --> 开发应用的
|
||||
A build command 构建指令 --> 打包的
|
||||
|
||||
<https://vitejs.dev/guide/>
|
||||
![[IMG-20250104114646393.png]]<https://vitejs.dev/guide/features.html>
|
||||
NPM Dependency Resolving and Pre-Bundling
|
||||
23
src/content/post/伪类和伪元素的区别.md
Normal file
23
src/content/post/伪类和伪元素的区别.md
Normal file
@ -0,0 +1,23 @@
|
||||
---
|
||||
slug: the-difference-between-pseudo-classes-and-pseudo-elements
|
||||
published: true
|
||||
description: >-
|
||||
The content discusses the differences between pseudo-classes and
|
||||
pseudo-elements in web development, as explained in the MDN web development
|
||||
guide. Pseudo-classes are selectors that define the special states of an
|
||||
element, while pseudo-elements select and style a specific part of an element.
|
||||
tags:
|
||||
- |-
|
||||
伪类、伪元素、 CSS 选择器、 CSS 样式处理、 MDN
|
||||
注：如果需要中文标签，可以转换为中文如下：
|
||||
伪类、伪元素、 CSS 选取、 CSS 样式处理、 MDN
|
||||
---
|
||||
|
||||
# 伪类和伪元素的区别
|
||||
|
||||
[Pseudo-classes and pseudo-elements - Learn web development | MDN](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements)
|
||||
|
||||
伪类
|
||||
A pseudo-class is a selector
|
||||
|
||||
伪元素
|
||||
13
src/content/post/修复了notion-blog中vercel og的问题.md
Normal file
13
src/content/post/修复了notion-blog中vercel og的问题.md
Normal file
@ -0,0 +1,13 @@
|
||||
---
|
||||
title: 修复了notion-blog中 vercel og的问题
|
||||
date: 2023-09-15
|
||||
author: KazooTTT
|
||||
tags:
|
||||
- bug
|
||||
finished: false
|
||||
published: true
|
||||
slug: fixed-issue-with-vercel-og-in-notion-blog
|
||||
description: 解决了notion-blog在vercel上og图像显示的问题。
|
||||
---
|
||||
|
||||
# 修复了 notion-blog 中 vercel Og 的问题
|
||||
63
src/content/post/关于vite.md
Normal file
63
src/content/post/关于vite.md
Normal file
@ -0,0 +1,63 @@
|
||||
---
|
||||
title: 关于vite
|
||||
date: 2024-02-22
|
||||
author: KazooTTT
|
||||
tags:
|
||||
- vite
|
||||
- rollup
|
||||
finished: false
|
||||
published: true
|
||||
slug: about-vite
|
||||
description: >-
|
||||
本文介绍了如何在vite.config.js中配置alias，包括基本的alias配置和特殊情况下的处理，如对"~"符号的特殊处理。此外，还推荐了几种常用的vite插件，如vite-plugin-checker、vite-plugin-imp等，以及解决Uncaught
|
||||
ReferenceError: process is not defined错误的方法，建议使用import.meta.env替代。
|
||||
---
|
||||
|
||||
# 关于 vite
|
||||
|
||||
如何配置 alias
|
||||
|
||||
```
|
||||
// vite.config.js
|
||||
module.exports = {
|
||||
alias: {
|
||||
{ find: '@', replacement: '/src' },
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
对于特殊 alias 的处理
|
||||
|
||||
某些组件中可能有 import "~@scope/pkgname/filename"
|
||||
|
||||
一般是出现在 css 引用的时候
|
||||
|
||||
这个时候需要对~做特殊处理
|
||||
|
||||
比较推荐的 vite 插件
|
||||
|
||||
```
|
||||
// vite.config.js
|
||||
module.exports = {
|
||||
alias: {
|
||||
{ find: /^~@/, replacement: '@' },
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
比较常用的 vite 插件
|
||||
|
||||
1. vite-plugin-checker。支持 eslint、ts、stylelint 等规则对应的警告或错误，并且支持直接点击跳转到对应的文件。
|
||||
2. vite-plugin-imp，按需引入配置。（如果配置直接写 babelrc 可以满足要求则不需要，如果配置比较灵活，则可以使用这个插件来完成）
|
||||
3. rollup-plugin-visualizer。打包文件可视化
|
||||
4. @vitejs/plugin-legacy。提升 web 的兼容性。
|
||||
|
||||
---
|
||||
|
||||
报错：Uncaught ReferenceError: process is not defined
|
||||
|
||||
使用 import.meta.env 来替代
|
||||
12
src/content/post/关于测试.md
Normal file
12
src/content/post/关于测试.md
Normal file
@ -0,0 +1,12 @@
|
||||
---
|
||||
slug: about-the-test
|
||||
published: true
|
||||
description: >-
|
||||
冒烟测试是一种软件测试方法，主要用于验证软件的基本功能是否正常，确保软件的主要功能没有严重问题，可以进行更详细的测试。这种测试通常在软件构建后立即进行，目的是快速检查，避免在后续测试中浪费时间。
|
||||
tags:
|
||||
- 测试，冒烟测试，开发
|
||||
---
|
||||
|
||||
# 关于测试
|
||||
|
||||
什么是冒烟测试
|
||||
100
src/content/post/切片总结.md
Normal file
100
src/content/post/切片总结.md
Normal file
@ -0,0 +1,100 @@
|
||||
---
|
||||
title: 切片总结
|
||||
date: 2023-01-15
|
||||
author: KazooTTT
|
||||
tags:
|
||||
- 切片
|
||||
- Hanser
|
||||
- ffmpeg
|
||||
- 产出
|
||||
slug: slicing-summary
|
||||
finished: true
|
||||
published: true
|
||||
description: >-
|
||||
本文详细介绍了一个视频切片的工作流程，包括切片的基本组成部分、本地录播的开启、片段挑选、切片过程、字幕生成、视频导出及封面制作等。作者还分享了个人在切片过程中的感受，如粗剪与精简的选择、封面的设计以及视频发布时间的考量。此外，作者指出了当前工作中的不足，如封面美观度不够、粗剪质量有待提高，并计划未来将直接使用大号进行投稿。整体上，本文为想要了解或从事视频切片工作的人提供了实用的指导和建议。
|
||||
rinId: 74
|
||||
---
|
||||
|
||||
# 切片总结
|
||||
|
||||
其实 2022 年有一个计划就是多多产出，但是一直都没有迈出这一步。
|
||||
|
||||
[[2021年度总结]]
|
||||
|
||||
|
||||
近几个月看到某些让我不适的内容，越发想要自己做切片来缓解自己的不适。第一是可以记录自己印象深刻或者有意义的片段，方便日后回顾；第二是可以稍微把控一下风向。于是在 23 年年初，正式开启了切片支线。
|
||||
|
||||
这篇博客主要用于记录工作流，和一些小总结，日后有新的内容也会更新在里面。
|
||||
|
||||
## 1. 基本工作流
|
||||
|
||||
一个切片，由 1. 转场（片头、片尾、中途转场等）2. 内容 3. 字幕 4. 特效，四个部分组成。
|
||||
|
||||
其中内容是主要部分，其他三个部分不是必要的，但如果有，效果会更好。
|
||||
|
||||
1. 本地开启录播。可以在直播结束后，直接开始切片，不用等待录播投稿后才切片。
|
||||
2. 挑选切片片段。
|
||||
1. 直播中途遇到想记录的片段，打开记事本，记录下时间点和关键词。方便后面定位切片时间。搜狗输入法输入 sj，可以快速插入当前的时间，其他输入法应该也有类似功能。
|
||||
|
||||
|
||||
2. 参考弹幕密度，得出反应比较强烈的片段。
|
||||
3. 开始切片。
|
||||
1. 根据记录的时间点，掐头去尾（找到出入点）
|
||||
2. 去除停顿时间过长，或重复部分，加上转场，让片段尽可能流畅。如果有强调部分，或高亮部分可复制该部分到最开头，作为预告。
|
||||
3. 语音识别，生成字幕。（可以用网易见外或剪映）检查字幕错别字，设置字幕样式。
|
||||
4. 片段中提到的内容，可以加上图片或者文字补充。、
|
||||
5. 导出视频。
|
||||
6. 制作封面。可以使用 canva 等软件，快速制作封面。
|
||||
7. 上传视频 + 封面，投稿。
|
||||
|
||||
以上是粗剪的过程。
|
||||
如果想精简可以加上一些音效和特效等。
|
||||
如果想压制弹幕，可以先把 xml 转为 ass,然后使用 ffmpeg 压制。
|
||||
|
||||
1. 在 mac 上，我是用的是
|
||||
|
||||
```shell
|
||||
ffmpeg -i input.mp4 -vf ass=subtitle.ass output_ass.mp4
|
||||
```
|
||||
|
||||
1. 在 windows 上，我是用的是 (需要安装 cuda)
|
||||
（30 分钟的视频压 10+ 分钟。)
|
||||
|
||||
```shell
|
||||
ffmpeg -hwaccel cuda -c:v h264_cuvid -i 替换.flv -vf subtitles=替换.ass -c:v h264_nvenc -b:v 6000k -c:a copy output.flv -y
|
||||
```
|
||||
|
||||
参考：<https://www.bilibili.com/read/cv14965549>
|
||||
|
||||
## 2. 个人感受
|
||||
|
||||
- 关于粗剪、精简
|
||||
初期不建议精简，感觉现在的切片更追求的是速度。如果是精简，可能花费了比较多的时间，但最后传播度不高。可以先主要粗剪，偶尔做总结的地精简。
|
||||
|
||||
- 关于封面
|
||||
|
||||
这是目前投稿的封面，可以分为两个类别（红色框内，和非红色框内）
|
||||
红色框内是有意识对背景做了模糊的低亮度处理，看着没有那么吃力
|
||||
非红色框内是花里胡哨乱做的
|
||||
|
||||
虽然封面还是做得比较丑，但是框内的比起非框内的，已经有进步了。
|
||||
|
||||
流程为：
|
||||
|
||||
1. 调低背景亮度，模糊背景。或者把背景和标题颜色设为对比度比较高的颜色。
|
||||
2. 尺寸：b 站这边提示封面 1146 \* 716 (16:10)，创建画布的时候也选这个尺寸就可以了。但是要注意一下，边缘部分不要有太多内容，边缘可能被 B 占组件显示的数据挡住。
|
||||
|
||||
|
||||
- 关于发布时间：
|
||||
个人感觉下播当天晚上和第二天中午是比较好的选择。
|
||||
|
||||
- 关于视频长短
|
||||
做过多主题的长切片和单主题的短切片，往往是短投稿数据更好，以后也是以单主题的短切片为主了。长切片更适合某个主题的串联剪辑。
|
||||
|
||||
## 3. 不足和 TODO
|
||||
|
||||
上面也提到了一部分。
|
||||
|
||||
1. 封面不够美观，缺乏审美
|
||||
2. 粗剪为主，目前质量不太够
|
||||
3. 后续将不再使用小号投稿，直接用大号投稿。
|
||||
60
src/content/post/判断类型的几种方式.md
Normal file
60
src/content/post/判断类型的几种方式.md
Normal file
@ -0,0 +1,60 @@
|
||||
---
|
||||
slug: several-ways-to-determine-the-type-of
|
||||
published: true
|
||||
description: >-
|
||||
本文介绍了在JavaScript中判断数据类型的几种方法，包括使用Object.prototype.toString()、typeof、instanceof和constructor。其中，Object.prototype.toString()方法可以准确地返回对象的类型字符串，而typeof对于对象类型的判断不够精确，instanceof用于检查对象是否属于某个构造函数的实例，constructor则可以查看对象的构造函数。文章还提到了在不同情况下应选择哪种方法进行类型判断，并提供了参考链接以供深入学习。
|
||||
tags:
|
||||
- object prototype toString，typeof，instanceof，构造函数判断类型
|
||||
---
|
||||
|
||||
# 判断类型的几种方式
|
||||
|
||||
## Object.prototype.toString()
|
||||
|
||||
如果是 Object，那么它本身就有 toString 的方法，直接调用就可以了。
|
||||
|
||||
```ts
|
||||
/** `Object#toString` result references. */
|
||||
const argsTag = "[object Arguments]"
|
||||
const arrayTag = "[object Array]"
|
||||
const boolTag = "[object Boolean]"
|
||||
const dateTag = "[object Date]"
|
||||
const errorTag = "[object Error]"
|
||||
const mapTag = "[object Map]"
|
||||
const numberTag = "[object Number]"
|
||||
const objectTag = "[object Object]"
|
||||
const regexpTag = "[object RegExp]"
|
||||
const setTag = "[object Set]"
|
||||
const stringTag = "[object String]"
|
||||
const symbolTag = "[object Symbol]"
|
||||
const weakMapTag = "[object WeakMap]"
|
||||
|
||||
const arrayBufferTag = "[object ArrayBuffer]"
|
||||
const dataViewTag = "[object DataView]"
|
||||
const float32Tag = "[object Float32Array]"
|
||||
const float64Tag = "[object Float64Array]"
|
||||
const int8Tag = "[object Int8Array]"
|
||||
const int16Tag = "[object Int16Array]"
|
||||
const int32Tag = "[object Int32Array]"
|
||||
const uint8Tag = "[object Uint8Array]"
|
||||
const uint8ClampedTag = "[object Uint8ClampedArray]"
|
||||
const uint16Tag = "[object Uint16Array]"
|
||||
const uint32Tag = "[object Uint32Array]"
|
||||
```
|
||||
|
||||
来源 lodash
|
||||
|
||||
## Typeof
|
||||
|
||||
需要注意的是对于 object、null 以及其他的任何对象，最后得到的结果都是 object
|
||||
所以是没有办法区别 object，null 和其他对象的。
|
||||
|
||||
## Instanceof
|
||||
|
||||
## Constructor
|
||||
|
||||
## 什么时候应该选择什么样的方式
|
||||
|
||||
## 参考
|
||||
|
||||
[判断 JS 数据类型的四种方法](https://www.cnblogs.com/onepixel/p/5126046.html)
|
||||
63
src/content/post/前端中常见的三个斜杠代表什么.md
Normal file
63
src/content/post/前端中常见的三个斜杠代表什么.md
Normal file
@ -0,0 +1,63 @@
|
||||
---
|
||||
slug: what-the-three-common-slashes-in-front-end-stand-for
|
||||
published: true
|
||||
description: >-
|
||||
在TypeScript中，三个斜杠（///）开头的指令被称为三斜杠指令，它们是特殊的注释，用作编译器指令。这些指令主要用于文件间的类型引用和模块声明。例如，`///
|
||||
<reference path="..." />`用于引用其他TypeScript文件的声明和类型，而`/// <amd-module
|
||||
name="module-name"
|
||||
/>`用于在生成AMD模块时指定模块名称。三斜杠指令必须位于文件顶部，且其前面只能是其他注释或指令。这些指令帮助确保类型安全和编译时正确处理依赖关系。
|
||||
tags:
|
||||
- typescript三斜杠
|
||||
- 三斜杠指令
|
||||
- 引用类型
|
||||
- TypeScript引用
|
||||
---
|
||||
|
||||
# typescript 中常见的三个斜杠代表什么？
|
||||
|
||||
具体例子，在 vitest 的文档中，提到
|
||||
|
||||
> “如果你已经在使用 Vite，请在 Vite 配置中添加 test 属性。您还需要使用配置文件顶部的三斜杠指令添加对 Vitest 类型的引用。”
|
||||
|
||||
|
||||
|
||||
那么这样写的目的是什么，起到了什么样的作用呢？下文将会详细介绍。
|
||||
|
||||
## 三斜杠指令的含义与要求
|
||||
|
||||
在 ts 的官网中有开一个章节来专门讲解它。
|
||||
|
||||
[Triple-Slash Directives](https://www.typescriptlang.org/docs/handbook/triple-slash-directives.html)
|
||||
|
||||
从这里可以看出它的本质是一个注释。注释的内容被用作编译器指令。
|
||||
|
||||
|
||||
|
||||
生效的要求：
|
||||
|
||||
1. 必须要在文件的顶部
|
||||
2. 如果不在顶部，前面的内容要么是别的注释，要么是别的三斜杠指令
|
||||
|
||||
## 分类与使用
|
||||
|
||||
三斜杠命令有不同的语法，根据语法的不同，可以分为以下几种：
|
||||
|
||||
1. `/// <reference path="..." />` 此指令用于引用另一个 TypeScript 文件，并使其声明和类型在当前文件中可用。
|
||||
2. `/// <reference types="..." />` 此指令用于引用特定包或模块的类型声明。
|
||||
3. `/// <reference lib="..." />` 此指令用于在编译过程中包含特定库。
|
||||
4. `/// <reference no-default-lib="true"/>` 此指令用于在编译过程中排除默认的 TypeScript 库。
|
||||
5. `/// <amd-module name="module-name" />` 此指令用于在生成 AMD 样式模块时指定 AMD 模块的名称。
|
||||
6. `/// <amd-dependency />`
|
||||
|
||||
根据目的的不同可以分为两类：
|
||||
|
||||
1. 用于声明引用
|
||||
2. 用于声明模块
|
||||
|
||||
### 用于声明引用
|
||||
|
||||
例如 `/// <reference path="..." />, /// <reference types="..." />, /// <reference lib="..." />`，都是用于声明引用的。
|
||||
|
||||
### 用于声明模块
|
||||
|
||||
而例如 `/// <amd-module name=”…” />, /// <amd-dependency path=”…” />`，则是用于声明模块的。
|
||||
63
src/content/post/前端入门的项目.md
Normal file
63
src/content/post/前端入门的项目.md
Normal file
@ -0,0 +1,63 @@
|
||||
---
|
||||
title: 前端入门的项目
|
||||
date: 2024-04-11
|
||||
author: KazooTTT
|
||||
tags:
|
||||
- 前端入门
|
||||
- 项目学习
|
||||
- 前端框架
|
||||
- 博客开发
|
||||
- Gemini
|
||||
- API
|
||||
- GROQ
|
||||
- GitHub项目
|
||||
finished: true
|
||||
published: true
|
||||
category: 随手记
|
||||
slug: projects-to-get-started-on-the-front-end
|
||||
description: 这个项目列表提供了一些适合前端入门的项目建议，涵盖了基础知识学习、框架实践和个人项目开发等方面。其中包括了博客开发、UI设计、以及接入Gemini API和GROQ API等内容的示例。
|
||||
type: Post
|
||||
status: Published
|
||||
NotionID-notionnext: 42131976-4124-47ec-aaad-2a9dfc0516d6
|
||||
link-notionnext: https://kazoottt.notion.site/42131976412447ecaaad2a9dfc0516d6
|
||||
rinId: 51
|
||||
---
|
||||
|
||||
# 前端入门的项目
|
||||
|
||||
之前一个朋友问了我一下前端入门的项目，感觉是比较通用的，所以也同步到博客上吧。
|
||||
|
||||
---
|
||||
|
||||
我当时的学习路线是：先去 freecodecamp 学了一下前端的基础（css + js + html），做了它的练习之后对前端有一个大概的了解。
|
||||
|
||||
然后就是开始学框架做项目了。首先要挑一个框架作为主要的学习目标。这里有两种方式，一种是看文档学知识，另一种是从项目中去学习。
|
||||
|
||||
如果是文档的话，可以先看官方的文档，不需要记住所有的内容，对这个框架会有一个大概的了解，后面遇到问题检索一下关键词去搜索就可以了。
|
||||
|
||||
然后挑一个项目或者自己做项目来加深实践。
|
||||
|
||||
如果是看别的人项目，或者在别人的项目上休怪。目前前端比较适合入手的项目主要还是博客、gpt 的套壳 ui。
|
||||
|
||||
1. 博客的话，你可以想一下自己的博客里想加什么功能，或者看一下博客的某个功能是怎么实现的。比如说目录大概这个功能，它是怎么从一个 markdown 的内容中解析#标题，然后生成大纲的。怎么把自己 github 的热力图给嵌入到博客中，有哪些库可以使用，[GitHub - grubersjoe/react-activity-calendar: A flexible React component to display activity data in a calendar (heatmap).](https://github.com/grubersjoe/react-activity-calendar) 以及它的库实现思路。
|
||||
|
||||
这些博客都是做的很好的：
|
||||
|
||||
[Cali Castle | 开发者、设计师、细节控、创始人](https://cali.so/)
|
||||
|
||||
[静かな森 - 致虚极，守静笃。](https://innei.in/)
|
||||
|
||||
1. gpt 的套壳的话目前比较火。现在 google gemini api、groq api 都是可以免费使用的。可以看一下别人是怎么接入它的，以及流式和非流式是怎么解析和展示的。比较经典的例子是：
|
||||
<https://github.com/babaohuang/GeminiProChat>（比较简洁）
|
||||
|
||||
[GitHub - lobehub/lobe-chat: 🤯 Lobe Chat - an open-source, modern-design LLMs/AI chat framework. Supports Multi AI Providers( OpenAI / Claude 3 / Gemini / Perplexity / Bedrock / Azure / Mistral / Ollama ), Multi-Modals (Vision/TTS) and plugin system. One-click FREE deployment of your private ChatGPT chat application.](https://github.com/lobehub/lobe-chat)（大杂烩比较复杂）
|
||||
|
||||
然后如果是自己做项目的话，可以想一下平时有没有遇到过什么不便利的地方，“要是 xxx 就好了”，我一般都会把这种想法存下来，然后有空的时候就去实现它。
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
然后现在大模型也很用，无论是解释代码还是帮忙写代码。
|
||||
|
||||
可能开头的回答并不能拿来用，但是在完善提示词的过程中，也是对需求的进一步分析，写着写着自己也知道要怎么去做这个需求了。
|
||||
16
src/content/post/前端补基础.md
Normal file
16
src/content/post/前端补基础.md
Normal file
@ -0,0 +1,16 @@
|
||||
---
|
||||
slug: front-end-refresher-course
|
||||
published: true
|
||||
description: >-
|
||||
Promise对象是用来表示异步操作的最终完成或失败及其结果值的。它本质上是一个函数返回的对象，允许我们在其上绑定回调函数，从而无需在函数调用之初就传递回调函数作为参数。
|
||||
tags:
|
||||
- 异步操作
|
||||
- 完成状态
|
||||
- 回调函数
|
||||
---
|
||||
|
||||
# Promise
|
||||
|
||||
Promise 对象表示异步操作最终的完成（或失败）以及其结果值。
|
||||
|
||||
本质上 Promise 是一个函数返回的对象，我们可以在它上面绑定回调函数，这样我们就不需要在一开始把回调函数作为参数传入这个函数了。
|
||||
32
src/content/post/博客改造日志.md
Normal file
32
src/content/post/博客改造日志.md
Normal file
@ -0,0 +1,32 @@
|
||||
---
|
||||
title: 博客改造日志
|
||||
subtitle: 改造自黄玄老师提供的博客模板
|
||||
date: 2022-10-12
|
||||
author: KazooTTT
|
||||
tags:
|
||||
- 博客
|
||||
- 前端
|
||||
slug: blog-makeover-log
|
||||
published: true
|
||||
description: >-
|
||||
本博客改造日志记录了对基于Jekyll的模板[GitHub - Huxpro/huxpro.github.io: My Blog / Jekyll
|
||||
Themes / PWA](https://github.com/Huxpro/huxpro.github.io)的修改。主要更新包括：当featured
|
||||
tags数量为0时，隐藏该组件；以及使用rake命令`rake post title="xxx" subtitle="xxx"`快速创建博客文章。
|
||||
finished: true
|
||||
rinId: 124
|
||||
category: 项目
|
||||
toAstro: false
|
||||
---
|
||||
|
||||
# 博客改造日志
|
||||
|
||||
The blog template is [GitHub - Huxpro/huxpro.github.io: My Blog / Jekyll Themes / PWA](https://github.com/Huxpro/huxpro.github.io), which is based on Jekyll.
|
||||
|
||||
## 1. Featured Tags 数量为 0 时，隐藏该组件
|
||||
|
||||
在组件外层新增一道 tags 数量判断
|
||||
|
||||
|
||||
## 2. Rake 快速创建博客
|
||||
|
||||
`rake post title="xxx" subtitle="xxx"`
|
||||
71
src/content/post/各种软件使用方式梳理.md
Normal file
71
src/content/post/各种软件使用方式梳理.md
Normal file
@ -0,0 +1,71 @@
|
||||
---
|
||||
title: 随笔 | 各种软件使用方式梳理
|
||||
date: 2022-11-13
|
||||
author: KazooTTT
|
||||
tags:
|
||||
- 工具
|
||||
- 随笔
|
||||
slug: sorting-out-how-to-use-various-software
|
||||
published: true
|
||||
description: >-
|
||||
本文详细介绍了个人的软件使用情况，包括社交平台、效率工具和博客三个方面。在社交平台方面，作者使用微博、Twitter、小红书等分享日常生活和技术信息；效率工具如滴答清单、flomo、Cubox和Notion则用于管理任务、记录碎片化信息和整理长文本。博客方面，作者通过GitHub
|
||||
Pages、博客园和CSDN发布技术文章，同时保持内容的专业性和完整性。整体上，这些工具和平台帮助作者高效地管理信息和分享内容。
|
||||
---
|
||||
|
||||
# 各种软件使用方式梳理
|
||||
|
||||
目前常用的软件有：
|
||||
|
||||
### 社交平台
|
||||
|
||||
1. 微博：浏览资讯，分享日常，保存资料
|
||||
|
||||
目前有三个号，生活号、追星号、技术号，生活号是主力号，用于微博浏览和日常的分享；追星号目前基本停用，即使有相关的消息也在生活号浏览、点赞完了；技术号只有我自己知道，用于保存有用的技术资源，记录我日常工作和学习的感想。
|
||||
|
||||
2. twitter：我的负面情绪垃圾桶与技术趋势了解地
|
||||
|
||||
在推特主要关注的是技术相关博主，少部分是 ACG 产出者，感觉推特的技术浓度更高，技术时效性更高，所以主要用来了解最新的技术发展趋势。
|
||||
|
||||
3. 小红书 + ins + 绿洲 + 朋友圈：分享日常
|
||||
|
||||
这四个平台发的内容差不多是同步，主要用来分享生活日常，例如出去玩拍的照片，自己做的饭的照片。
|
||||
|
||||
### 效率工具
|
||||
|
||||
1. 滴答清单：TODO LIST APP
|
||||
|
||||
[滴答清单:一个帮你高效完成任务和规划时间的应用 (dida365.com)](https://www.dida365.com/)
|
||||
|
||||
主要用来记录待办事项，本来之前也用来当脑洞池存放脑洞的，后面脑洞池暂存于 notion 待整理，整理后会写到 flomo 中。日后新的脑洞也将直接写入 flomo。
|
||||
|
||||
2. flomo：碎片化记录、情绪发泄（个人记录最完整的地方）
|
||||
|
||||
[https://v.flomoapp.com/](https://v.flomoapp.com/)
|
||||
|
||||
主要用来记录一些零碎的文本和图片，例如学习笔记、工作感悟、日常、备忘等等，如果觉得这些内容有必要分享出去，才会发到微博或者别的平台。
|
||||
|
||||
3. cubox：资源收藏夹
|
||||
|
||||
[Cubox 个人碎片知识库](https://cubox.pro/)
|
||||
|
||||
主要用来保存觉得有价值的内容，并且因为它具有快照功能，偶尔也用来存档一些比较负面的内容，方便日后查看。
|
||||
|
||||
4. notion：长文本写作 APP
|
||||
|
||||
主要用来保存学习、读书、工作、开发等事务的较为完整的内容，一般是在 flomo 中碎片化累积到一定程度才会整理到 notion 上开始完善。因为发现没有事前的积累，很难完成一篇文章，导致 notion 中出现了很多篇幅很短，写到一半放弃的废稿。
|
||||
|
||||
### 博客
|
||||
|
||||
1. github pages
|
||||
|
||||
[声控烤箱博客 | Kazoo Blog (kazoottt.club)](https://blog.kazoottt.club/)
|
||||
|
||||
从 notion 中完稿的文章中选出可以公开分享的发布到 github pages，此处的内容应该是最完整的，包含随笔、学习、工作笔记。
|
||||
|
||||
2. 博客园和 csdn
|
||||
|
||||
notion ⇒ github pages ⇒ 博客园和 csdn
|
||||
|
||||
因此博客园和 csdn 相比与 github pages 会更少一些，一般不会发布随笔到这两个平台，只发布技术相关的文章，因为随笔感觉和技术平台调性不符。
|
||||
|
||||
等我写的内容再好一些的时候才考虑把文章发布到掘金上，就先不拉低掘金的平均水平了。
|
||||
101
src/content/post/国内关于缓存的概念.md
Normal file
101
src/content/post/国内关于缓存的概念.md
Normal file
@ -0,0 +1,101 @@
|
||||
---
|
||||
title: 国内关于缓存的概念
|
||||
date: 2024-02-08
|
||||
author: KazooTTT
|
||||
tags:
|
||||
- 缓存
|
||||
- 强缓存
|
||||
- 协商缓存
|
||||
finished: true
|
||||
published: true
|
||||
slug: the-concept-of-caching-in-china
|
||||
description: >-
|
||||
国内将缓存分为强缓存和协商缓存两大类。强缓存一旦命中，无需向服务器确认有效性；而协商缓存则是在强缓存未命中时，向服务器验证缓存的有效性。强缓存通过Expires（HTTP1.0）和Cache-Control（HTTP1.1）实现，后者优先级更高。协商缓存则通过Last-Modified/If-Modified-Since和Etag/If-None-Match实现，后者更为精确，能处理文件内容未变但修改时间变化的情况。这两种缓存机制是国内常见的缓存处理方式，有助于提高网页加载速度和减少服务器负载。
|
||||
rinId: 75
|
||||
---
|
||||
|
||||
# 国内关于缓存的概念
|
||||
|
||||
国内将缓存分类为：强缓存和协商缓存。
|
||||
|
||||
这两者的区别在于：
|
||||
|
||||
强缓存如果命中了，则不需要向服务器确认是否有效。
|
||||
|
||||
而协商缓存，没有命中强缓存，还是会向服务器确认是否有效。（也就是说即使过期了，也不代表这缓存和原始服务器上的文件有区别）
|
||||
|
||||
也就是说判断是强缓存还是协商缓存的标准在于：
|
||||
|
||||
（缓存没有命中的时候）是否需要向服务器确认是否有效。
|
||||
|
||||
> 其中 Expires 和 Cache-control 属于强缓存；Last-Modified/If-Modified-Since 和 Etag/If-None-Match 属于协商缓存。摘自：[\[前端开发\]几种你不得不了解的浏览器缓存设置方式 - 知乎](https://zhuanlan.zhihu.com/p/36882594)
|
||||
|
||||
# 强缓存
|
||||
|
||||
**什么是强缓存**
|
||||
|
||||
如果命中了缓存，那么就直接使用缓存。
|
||||
|
||||
**怎么实现强缓存**
|
||||
|
||||
1. 如果是 http1.0 的话，使用 Expires 来实现
|
||||
expires 后面会跟一个过期的时间，如果当前客户端的**系统时间**比这个时间晚的话，就代表过期了。
|
||||
这么做缺点也比较明显了，是否过期与当前客户端的时间强关联，
|
||||
修改了客户端的系统时间的话，会影响判断。
|
||||
|
||||
2. 如果是 http1.1 的话，使用 cache control 来实现
|
||||
备注：cache control 的优先级是要比 expires 要高的，同时出现的话按照前者来。
|
||||
cache control 是使用 `max-age` 以及 `age` 来判断的，max-age 是一个相对的时间。
|
||||
max-age 指的是在生成相应的时间到当前时间的 N 秒中，缓存都是新鲜的有效的，不需要重新获取。
|
||||
age 指的是目前已经缓存的时间。
|
||||
|
||||
也就是说如果 age 存在，那么还有多久过期的时间就是 max-age 减去 age。
|
||||
|
||||
# 协商缓存
|
||||
|
||||
**什么是协商缓存**
|
||||
|
||||
如果没有命中缓存，向服务器验证后确保缓存没有失效才使用缓存。
|
||||
|
||||
**怎么实现协商缓存**
|
||||
|
||||
1. 使用 Last-Modified，If-Modified-Since
|
||||
|
||||
If-Modified-Since 是在请求头中的，Last-Modified 是在响应头中的。
|
||||
|
||||
![[IMG-20250104114646397.png]]
|
||||
|
||||
但是如果本地的缓存被修改了之后，它的修改时间是会变化的，所以 If-Modified-Since 也是有改变的可能的。
|
||||
|
||||
1. 用 eTag、If-None-Match
|
||||
eTag = **entity tag**
|
||||
|
||||
Last-Modified 的缺陷:
|
||||
|
||||
![[attachment/05-临时/01-草稿箱/国内关于缓存的概念/IMG-20250104114647119.png]]
|
||||
|
||||
（来自 [[HTTP权威指南-David Gourley Brian Totty等]]）
|
||||
|
||||
If-None-Match 是请求头里的，值的话就是当前缓存中的 tag 有哪些
|
||||
|
||||
If-None-Match 可以传入 etag_value 也不难理解，可以一次请求验证多个，哪个 tag 有效就用哪个。
|
||||
|
||||
eTag 是响应头里的
|
||||
|
||||
# 为什么说强缓存和协商缓存是国内的标准
|
||||
|
||||
![[IMG-20250104114651080.png]]
|
||||
|
||||
![[IMG-20250104114652496.png]]
|
||||
|
||||
感觉越看越觉得强缓存和协商缓存没必要放在一起说
|
||||
|
||||
# 参考资料
|
||||
|
||||
[缓存（二）——浏览器缓存机制：强缓存、协商缓存 · Issue #41 · amandakelake/blog · GitHub](https://github.com/amandakelake/blog/issues/41)
|
||||
|
||||
[Cache-Control explained - DEV Community](https://dev.to/yishai_zehavi/http-caching-explained-part-1-theory-3j4m)
|
||||
|
||||
[HTTP 缓存策略：强缓存和协商缓存 - 掘金](https://juejin.cn/post/7095206869072871455)
|
||||
|
||||
[\[前端开发\]几种你不得不了解的浏览器缓存设置方式 - 知乎](https://zhuanlan.zhihu.com/p/36882594)
|
||||
25
src/content/post/图标网站.md
Normal file
25
src/content/post/图标网站.md
Normal file
@ -0,0 +1,25 @@
|
||||
---
|
||||
slug: icon-site
|
||||
published: true
|
||||
NotionID-notionnext: eb68d84c-f94b-4425-ac5b-bc40b68e8ff7
|
||||
link-notionnext: 'https://kazoottt.notion.site/eb68d84cf94b4425ac5bbc40b68e8ff7'
|
||||
description: >-
|
||||
The content features a website showcasing Phosphor Icons, with a specific icon
|
||||
image labeled "diu" displayed. The website URL is provided as
|
||||
https://phosphoricons.com/. Additionally, a reference link to a Twitter status
|
||||
discussing this icon set is also included.
|
||||
tags:
|
||||
- 图标网站
|
||||
- Phosphor Icons
|
||||
- 圖標
|
||||
---
|
||||
|
||||
# 图标网站
|
||||
|
||||
|
||||
|
||||
[Phosphor Icons](https://phosphoricons.com/)
|
||||
|
||||
参考地址：
|
||||
|
||||
[X](https://twitter.com/joaoaguiam/status/1772503319975428110)
|
||||
28
src/content/post/在react中如何生成直方图.md
Normal file
28
src/content/post/在react中如何生成直方图.md
Normal file
@ -0,0 +1,28 @@
|
||||
---
|
||||
title: 在react中如何生成直方图
|
||||
date: 2024-02-19
|
||||
author: KazooTTT
|
||||
tags:
|
||||
- antd
|
||||
- 直方图
|
||||
- 可视化
|
||||
finished: true
|
||||
published: true
|
||||
slug: how-to-generate-a-histogram-in-react
|
||||
description: >-
|
||||
用户正在使用Ant Design组件，并特别提到了AntV React可视化组件库。用户通过一个具体的例子，即直方图的示例，体验了Ant
|
||||
Design的组件。用户对Ant Design的文档表示满意，认为其完备且易于上手。
|
||||
rinId: 77
|
||||
---
|
||||
|
||||
# 在 react 中如何生成直方图
|
||||
|
||||
我使用的是 ant design 组件
|
||||
|
||||
[AntV React 可视化组件库 | AntV](https://ant-design-charts.antgroup.com/)
|
||||
|
||||
具体的例子是：
|
||||
|
||||
[ant-design-charts.antgroup.com/examples/more-plots/histogram#basic](https://ant-design-charts.antgroup.com/examples/more-plots/histogram/#basic)
|
||||
|
||||
感觉 ant design 的文档还是比较完备的，很方便上手。
|
||||
229
src/content/post/在前端使用abort取消请求.md
Normal file
229
src/content/post/在前端使用abort取消请求.md
Normal file
@ -0,0 +1,229 @@
|
||||
---
|
||||
title: 在前端使用abort取消请求
|
||||
date: 2024-04-17
|
||||
author: KazooTTT
|
||||
type: Post
|
||||
status: Draft
|
||||
tags:
|
||||
- 前端
|
||||
- request
|
||||
- 网络
|
||||
- abortController
|
||||
- 实践
|
||||
finished: true
|
||||
published: true
|
||||
slug: use-abort-on-the-frontend-to-cancel-the-request
|
||||
description: >-
|
||||
本文介绍了在不同前端框架中如何取消HTTP请求的方法。在原生JavaScript中，使用AbortController接口来实现请求的取消。在React中，通过useState和useEffect钩子管理AbortController的状态，并在组件卸载时自动取消请求。在SolidJS中，利用createSignal和onCleanup来处理AbortController，确保在需要时可以中断请求。这些方法都通过创建AbortController实例，并在fetch请求中使用其signal属性来控制请求的取消。
|
||||
NotionID-notionnext: 801e2fa1-dfa9-4b4f-b579-ef7f6658b9d3
|
||||
link-notionnext: 'https://kazoottt.notion.site/abort-801e2fa1dfa94b4fb579ef7f6658b9d3'
|
||||
rinId: 53
|
||||
---
|
||||
|
||||
# 在前端使用 abort 取消请求
|
||||
|
||||
举个例子，在写 llm 的 chat 的时候，经常会出现需要取消请求的场景。
|
||||
|
||||
如何在**前端**取消请求，涉及到一个接口：[AbortController.AbortController() - Web API 接口参考 | MDN](https://developer.mozilla.org/zh-CN/docs/Web/API/AbortController/AbortController)
|
||||
|
||||
在原生的 js 的写法，参考 mdn 的写法。
|
||||
|
||||
```js
|
||||
let controller
|
||||
const url = "video.mp4"
|
||||
|
||||
const downloadBtn = document.querySelector(".download")
|
||||
const abortBtn = document.querySelector(".abort")
|
||||
|
||||
downloadBtn.addEventListener("click", fetchVideo)
|
||||
|
||||
abortBtn.addEventListener("click", () => {
|
||||
if (controller) {
|
||||
controller.abort()
|
||||
controller = null
|
||||
console.log("Download aborted")
|
||||
}
|
||||
})
|
||||
|
||||
function fetchVideo() {
|
||||
controller = new AbortController()
|
||||
const signal = controller.signal
|
||||
fetch(url, { signal })
|
||||
.then((response) => {
|
||||
console.log("Download complete", response)
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error(`Download error: ${err.message}`)
|
||||
})
|
||||
}
|
||||
```
|
||||
|
||||
在 react 的写法
|
||||
|
||||
```jsx
|
||||
import React, { useState, useEffect } from "react"
|
||||
|
||||
const RequestComponent = () => {
|
||||
const [responseData, setResponseData] = useState(null)
|
||||
const [error, setError] = useState(null)
|
||||
const [loading, setLoading] = useState(false)
|
||||
const [controller, setController] = useState(null)
|
||||
|
||||
useEffect(() => {
|
||||
// 组件被卸载的时候，取消请求
|
||||
return () => {
|
||||
if (controller) {
|
||||
controller.abort()
|
||||
}
|
||||
}
|
||||
}, [controller])
|
||||
|
||||
const fetchData = async () => {
|
||||
setLoading(true)
|
||||
setError(null)
|
||||
|
||||
const abortController = new AbortController()
|
||||
setController(abortController)
|
||||
|
||||
try {
|
||||
const response = await fetch("https://api.example.com/data", {
|
||||
signal: abortController.signal,
|
||||
})
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error("Network response was not ok")
|
||||
}
|
||||
|
||||
const data = await response.json()
|
||||
setResponseData(data)
|
||||
} catch (error) {
|
||||
if (error.name === "AbortError") {
|
||||
console.log("Request canceled by user")
|
||||
} else {
|
||||
setError(error)
|
||||
}
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
const cancelRequest = () => {
|
||||
if (controller) {
|
||||
controller.abort()
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<button onClick={fetchData} disabled={loading}>
|
||||
{loading ? "Loading..." : "Fetch Data"}
|
||||
</button>
|
||||
<button onClick={cancelRequest} disabled={!loading}>
|
||||
Cancel Request
|
||||
</button>
|
||||
{error && <div>Error: {error.message}</div>}
|
||||
{responseData && <div>Data: {JSON.stringify(responseData)}</div>}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default RequestComponent
|
||||
```
|
||||
|
||||
在 solidjs 中的写法，可以参考 diu 老师的 [GitHub - anse-app/chatgpt-demo: Minimal web UI for ChatGPT.](https://github.com/anse-app/chatgpt-demo)
|
||||
|
||||
```js
|
||||
import { Index, Show, createEffect, createSignal, onCleanup, onMount } from 'solid-js'
|
||||
import { useThrottleFn } from 'solidjs-use'
|
||||
import { generateSignature } from '@/utils/auth'
|
||||
import IconClear from './icons/Clear'
|
||||
import MessageItem from './MessageItem'
|
||||
import SystemRoleSettings from './SystemRoleSettings'
|
||||
import ErrorMessageItem from './ErrorMessageItem'
|
||||
import type { ChatMessage, ErrorMessage } from '@/types'
|
||||
|
||||
export default () => {
|
||||
const [controller, setController] = createSignal<AbortController>(null)
|
||||
|
||||
|
||||
const requestWithLatestMessage = async() => {
|
||||
setLoading(true)
|
||||
setCurrentAssistantMessage('')
|
||||
setCurrentError(null)
|
||||
const storagePassword = localStorage.getItem('pass')
|
||||
try {
|
||||
const controller = new AbortController()
|
||||
setController(controller)
|
||||
const requestMessageList = messageList().slice(-maxHistoryMessages)
|
||||
if (currentSystemRoleSettings()) {
|
||||
requestMessageList.unshift({
|
||||
role: 'system',
|
||||
content: currentSystemRoleSettings(),
|
||||
})
|
||||
}
|
||||
const timestamp = Date.now()
|
||||
const response = await fetch('/api/generate', {
|
||||
method: 'POST',
|
||||
body: JSON.stringify({
|
||||
messages: requestMessageList,
|
||||
time: timestamp,
|
||||
pass: storagePassword,
|
||||
sign: await generateSignature({
|
||||
t: timestamp,
|
||||
m: requestMessageList?.[requestMessageList.length - 1]?.content || '',
|
||||
}),
|
||||
temperature: temperature(),
|
||||
}),
|
||||
signal: controller.signal,
|
||||
})
|
||||
if (!response.ok) {
|
||||
const error = await response.json()
|
||||
console.error(error.error)
|
||||
setCurrentError(error.error)
|
||||
throw new Error('Request failed')
|
||||
}
|
||||
const data = response.body
|
||||
if (!data)
|
||||
throw new Error('No data')
|
||||
|
||||
const reader = data.getReader()
|
||||
const decoder = new TextDecoder('utf-8')
|
||||
let done = false
|
||||
|
||||
while (!done) {
|
||||
const { value, done: readerDone } = await reader.read()
|
||||
if (value) {
|
||||
const char = decoder.decode(value)
|
||||
if (char === '\n' && currentAssistantMessage().endsWith('\n'))
|
||||
continue
|
||||
|
||||
if (char)
|
||||
setCurrentAssistantMessage(currentAssistantMessage() + char)
|
||||
|
||||
isStick() && instantToBottom()
|
||||
}
|
||||
done = readerDone
|
||||
}
|
||||
} catch (e) {
|
||||
console.error(e)
|
||||
setLoading(false)
|
||||
setController(null)
|
||||
return
|
||||
}
|
||||
archiveCurrentMessage()
|
||||
isStick() && instantToBottom()
|
||||
}
|
||||
|
||||
const stopStreamFetch = () => {
|
||||
if (controller()) {
|
||||
controller().abort()
|
||||
...
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
return (
|
||||
...
|
||||
)
|
||||
}
|
||||
```
|
||||
13
src/content/post/复习前端.md
Normal file
13
src/content/post/复习前端.md
Normal file
@ -0,0 +1,13 @@
|
||||
---
|
||||
slug: review-the-front-end
|
||||
published: true
|
||||
description: 本文将复习前端知识，重点探讨cookie和localStorage之间的区别。
|
||||
tags:
|
||||
- 前端开发
|
||||
- cookie localStorage
|
||||
- JavaScriptStorage
|
||||
---
|
||||
|
||||
# 复习前端
|
||||
|
||||
cookie localStorage 的区别
|
||||
76
src/content/post/如何使agnet过程可视化.md
Normal file
76
src/content/post/如何使agnet过程可视化.md
Normal file
@ -0,0 +1,76 @@
|
||||
---
|
||||
slug: how-to-visualize-the-agnet-thinking-process
|
||||
published: true
|
||||
description: >-
|
||||
本文探讨了如何使agnet过程可视化的两种方法：第一种是通过前端不断请求日志数据来更新日志，适合短期快速实现；第二种是通过前后端建立websocket连接，更适合长期效果。文章还详细介绍了websocket的实现方式，参考了blivechat的配置和实现思路，并通过代码示例展示了如何初始化websocket客户端和启动服务。此外，还解释了动态导入模块的优点，即实现代码分割，提高应用加载速度和性能。
|
||||
tags:
|
||||
- 可视化、websockt、websocket连接、日志数据更新
|
||||
---
|
||||
|
||||
# 如何使 agnet 过程可视化
|
||||
|
||||
经过调研有两种方式
|
||||
第一种是：
|
||||
|
||||
前端不断地请求日志数据，来更新日志。
|
||||
|
||||
第二种是：
|
||||
|
||||
前后端建立 websocket 的连接
|
||||
|
||||
我的想法是，如果是短期内要快速时间，那么第一种也可以
|
||||
如果长期效果的话还是第二种。
|
||||
|
||||
对于 websocket 我们来参考一下 blivechat 的实现思路
|
||||
blivechat 配置完之后，打开对应的网页，就会开始获取到这个直播的数据。
|
||||
|
||||
我们从路由入手，能看到实现这个界面的组件是 views/Room
|
||||
wss://broadcastlv.chat.bilibili.com/sub
|
||||
|
||||
页面 mounted 的时候，调用了
|
||||
|
||||
```
|
||||
this.init()
|
||||
```
|
||||
|
||||
重点来看 initChatClientPromise 的部分，这里是初始化了 ws 的客户端
|
||||
身份码 roomKeyType = 2
|
||||
房间号 roomKeyType = 1
|
||||
这里为了简化，我们直接来看 1
|
||||
|
||||
简化后的代码是这样：
|
||||
|
||||
```js
|
||||
async initChatClient() {
|
||||
let ChatClientDirectWeb = (await import('@/api/chat/ChatClientDirectWeb')).default
|
||||
this.chatClient = new ChatClientDirectWeb(this.roomKeyValue)
|
||||
this.chatClient.msgHandler = this
|
||||
this.chatClient.start()
|
||||
},
|
||||
```
|
||||
|
||||
这里是新建了一个 chatClient，然后把组件实例赋值给到了 msgHandler，然后启动了服务。
|
||||
|
||||
为什么要这样写？
|
||||
|
||||
```js
|
||||
let ChatClientDirectWeb = (await import("@/api/chat/ChatClientDirectWeb")).default
|
||||
```
|
||||
|
||||
这是一个动态导入（Dynamic Imports）的例子，它是 JavaScript 的一个特性，允许你在运行时（runtime）按需（on-demand）加载模块。这与在文件顶部使用 import 语句的静态导入（Static Imports）方式不同，静态导入会在代码加载时就加载所有模块。
|
||||
|
||||
动态导入的主要优点是可以实现代码分割（Code Splitting），即将代码分割成多个小块（chunks），并在需要时才加载某个块，而不是一开始就加载所有代码。这可以显著提高应用的加载速度和性能，特别是对于大型和复杂的应用。
|
||||
|
||||
我们使用了
|
||||
|
||||
```
|
||||
this.chatClient.start()
|
||||
```
|
||||
|
||||
来启动 ws 连接，这个 start 方法是继承自 ChatClientOfficialBase 类的。
|
||||
|
||||
```js
|
||||
start() {
|
||||
this.wsConnect()
|
||||
}
|
||||
```
|
||||
44
src/content/post/如何在前端提供实现下载文件.md
Normal file
44
src/content/post/如何在前端提供实现下载文件.md
Normal file
@ -0,0 +1,44 @@
|
||||
---
|
||||
title: 如何在前端提供一个下载的文件
|
||||
date: 2024-02-18
|
||||
author: KazooTTT
|
||||
tags:
|
||||
- 前端
|
||||
- 前端实践
|
||||
finished: true
|
||||
published: true
|
||||
slug: how-to-provide-implementation-download-files-on-the-frontend
|
||||
link: 'https://kazoottt.notion.site/8098c919896e499c97444ab663b43246'
|
||||
notionID: 8098c919-896e-499c-9744-4ab663b43246
|
||||
description: >-
|
||||
在React框架中，为了提供一个模板Excel文件供用户下载，可以将文件`template.xlsx`放置在项目的public文件夹中，从而获取下载链接如`/template.xlsx`。若部署路径非根目录，需相应调整链接。通过绑定按钮的onClick事件，调用自定义函数`downloadFileFromURL`实现文件下载，该函数通过创建一个a标签并模拟点击来触发下载。此外，也可使用npm包`file-downloader`简化下载过程。
|
||||
rinId: 78
|
||||
---
|
||||
|
||||
# 如何在前端提供实现下载文件
|
||||
|
||||
有这样一个需求，我所使用的框架是 react，需要给用户一个模板 excel 进行参考，因为就这一个文件要下载，所有就不放在后端，直接放在前端这边进行下载了。
|
||||
|
||||
假设这个文件的名称叫做 `template.xlsx`
|
||||
|
||||
具体的做法是：
|
||||
|
||||
1. 把 excel 文件放到 public 文件夹中
|
||||
2. 这样就可以拿到下载链接了 , `/template.xlsx`。
|
||||
需要注意的是如果你的部署路径不是 `/`，而是类似于 `/webapp` 这样的，你需要在前面加上它。也就是变成`/webapp/template.xlsx
|
||||
这样部署的时候，下载路径才是正确的。
|
||||
3. 给 button 绑定 onClick 方法，这样点击的时候触发下载。用下面的写法，然后把 url 传进来就可以了。
|
||||
|
||||
```ts
|
||||
export function downloadFileFromURL(url: string, filename?: string) {
|
||||
const a = document.createElement("a")
|
||||
a.href = url
|
||||
a.download = filename ?? ""
|
||||
a.target = "_blank"
|
||||
document.body.appendChild(a)
|
||||
a.click()
|
||||
document.body.removeChild(a)
|
||||
}
|
||||
```
|
||||
|
||||
也可以直接用这个 npm pkg，封装了下载方法 [[file-downloader]]
|
||||
40
src/content/post/如何实现像chatgpt一样的流式.md
Normal file
40
src/content/post/如何实现像chatgpt一样的流式.md
Normal file
@ -0,0 +1,40 @@
|
||||
---
|
||||
slug: how-to-implement-streaming-like-chatgpt
|
||||
published: true
|
||||
title: 如何实现像chatgpt一样的流式
|
||||
date: 2024-02-18
|
||||
author: KazooTTT
|
||||
tags:
|
||||
- 流式
|
||||
- sse
|
||||
- 前端实践
|
||||
finished: true
|
||||
description: >-
|
||||
本内容介绍了如何使用微软封装的库来实现浏览器中的Event
|
||||
Source请求，该库支持POST方法及其他参数，仓库地址为GitHub上的Azure/fetch-event-source。文档中详细说明了使用方法，其中最常用的是`onmessage`方法，用于处理每次收到的消息。此外，目前Chrome
|
||||
Devtools中看不到Event Stream是正常现象，预计Chrome
|
||||
M123版本将在3月19日支持此功能。同时，ChatGPT也将从text/event-stream改为使用ws协议。
|
||||
rinId: 79
|
||||
---
|
||||
|
||||
# 如何实现像 chatgpt 一样的流式
|
||||
|
||||
如果是自己实现的话，使用浏览器的 api，只支持 get 方法，所以比较简单的方法就是直接用微软封装好的库，它是支持 post 以及传入其他参数的。仓库地址如下：
|
||||
|
||||
[GitHub - Azure/fetch-event-source: A better API for making Event Source requests, with all the features of fetch()](https://github.com/Azure/fetch-event-source)
|
||||
|
||||
具体的使用方法在他们的文档中也写的比较清楚了。
|
||||
|
||||
最常用的方法就是 `onmessage`，在这里面去写每次收到 message 的逻辑。
|
||||
|
||||
另外现在（截止 2024-02-18）的浏览器 Chrome Devtools 里面看不到 eventStream 是正常的。
|
||||
|
||||
["Event Stream" tab is empty in Chrome dev tools · Issue #3 · Azure/fetch-event-source · GitHub](https://github.com/Azure/fetch-event-source/issues/3)
|
||||
|
||||
预计 Chrome M123 将于 3.19 支持此功能。
|
||||
|
||||
|
||||
|
||||
另外 ChatGPT 也要从 text/event-stream 改为 ws 了。
|
||||
|
||||
[[待读]]
|
||||
25
src/content/post/如何更加直接地查看浏览器内核.md
Normal file
25
src/content/post/如何更加直接地查看浏览器内核.md
Normal file
@ -0,0 +1,25 @@
|
||||
---
|
||||
title: 如何更加直接地查看浏览器内核
|
||||
date: 2024-04-01
|
||||
author: KazooTTT
|
||||
tags: []
|
||||
finished: true
|
||||
published: true
|
||||
slug: how-to-look-at-the-browser-kernel-more-directly
|
||||
description: >-
|
||||
在浏览器的开发者工具命令行中输入`navigator.appVersion`命令，可以查看浏览器的版本信息。通过这个命令，开发者可以快速了解当前浏览器的版本详情，这对于调试和兼容性测试非常有帮助。
|
||||
NotionID-notionnext: 23be0d61-036d-48cc-925c-c8c25de31aa5
|
||||
link-notionnext: 'https://kazoottt.notion.site/23be0d61036d48cc925cc8c25de31aa5'
|
||||
rinId: 54
|
||||
toAstro: false
|
||||
---
|
||||
|
||||
# 如何更加直接地查看浏览器内核
|
||||
|
||||
打开 devtools 的命令行，然后输入：
|
||||
|
||||
```shell
|
||||
navigator.appVersion
|
||||
```
|
||||
|
||||
|
||||
38
src/content/post/如何清空dns缓存.md
Normal file
38
src/content/post/如何清空dns缓存.md
Normal file
@ -0,0 +1,38 @@
|
||||
---
|
||||
title: 如何清空dns缓存
|
||||
date: 2024-02-26
|
||||
author: KazooTTT
|
||||
tags:
|
||||
- dns
|
||||
- 缓存
|
||||
- mac
|
||||
- ip
|
||||
finished: true
|
||||
published: true
|
||||
slug: how-to-clear-the-dns-cache
|
||||
description: 本文介绍了如何在Mac和windows系统中清空DNS缓存和查看自己的IP地址。
|
||||
rinId: 76
|
||||
toAstro: false
|
||||
---
|
||||
|
||||
# 如何清空 dns 缓存
|
||||
|
||||
## macos
|
||||
|
||||
如何清空 dns 缓存
|
||||
|
||||
``` shell
|
||||
sudo dscacheutil -flushcache
|
||||
```
|
||||
|
||||
mac 如何获取自己的 ip
|
||||
|
||||
``` shell
|
||||
ifconfig
|
||||
```
|
||||
|
||||
## windows
|
||||
|
||||
``` shell
|
||||
ipconfig /flushdns
|
||||
```
|
||||
74
src/content/post/学习JavaScript数据结构与算法.md
Normal file
74
src/content/post/学习JavaScript数据结构与算法.md
Normal file
@ -0,0 +1,74 @@
|
||||
---
|
||||
date created: '2023-01-16 00:05'
|
||||
slug: learn-javascript-data-structures-and-algorithms
|
||||
published: true
|
||||
description: >-
|
||||
本内容涵盖了JavaScript数据结构与算法的学习，包括前端模块化的AMD实现（如requirejs）、TypeScript中的类型设置和接口概念、数据结构的基本操作（增删查改）、数组的操作方法（如push、pop、unshift、shift和splice），以及栈的数据结构特点（先进后出）。此外，还提供了TypeScript中数组操作的示例代码和相关图片链接。
|
||||
tags:
|
||||
- 学习javascript
|
||||
- 数据结构与算法
|
||||
- 前端模块化
|
||||
- TypeScript
|
||||
- 数据结构模板
|
||||
- 数组
|
||||
- 栈
|
||||
---
|
||||
|
||||
# 学习 JavaScript 数据结构与算法
|
||||
|
||||
## 前端模块化
|
||||
|
||||
```
|
||||
AMD 异步模块定义，实现方式之一：requirejs(最流行)
|
||||
```
|
||||
|
||||
## TypeScript
|
||||
|
||||
什么时候需要设置类型？
|
||||
|
||||
如果声明了一个变量但没有设置其初始值，推荐为其设置一个类型
|
||||
|
||||
接口
|
||||
[接口 · TypeScript 中文网 · TypeScript——JavaScript 的超集 (tslang.cn)](https://www.tslang.cn/docs/handbook/interfaces.html)
|
||||
|
||||
## 数据结构模板
|
||||
|
||||
增 创建
|
||||
删 删除
|
||||
查 查找
|
||||
改 修改
|
||||
|
||||
## 数组
|
||||
|
||||
增
|
||||
|
||||
```typescript
|
||||
// 数据初始化
|
||||
let array = []
|
||||
// 在数组尾部插入
|
||||
array.push(newEl)
|
||||
array.push(newEl1, newEl2)
|
||||
// 在数组头部插入
|
||||
array.unshift(newEl)
|
||||
```
|
||||
|
||||
删
|
||||
|
||||
```typescript
|
||||
// 从数组末尾删除
|
||||
array.pop()
|
||||
// 从数组的开头删除
|
||||
array.shift()
|
||||
```
|
||||
|
||||
```ts
|
||||
array.splice(5, 4) // 删除index=5开始的4个元素
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## 栈
|
||||
|
||||
先进后出
|
||||
33
src/content/post/封面生成器收集.md
Normal file
33
src/content/post/封面生成器收集.md
Normal file
@ -0,0 +1,33 @@
|
||||
---
|
||||
title: 封面生成器
|
||||
date: 2023-11-19
|
||||
author: KazooTTT
|
||||
tags:
|
||||
- 封面生成
|
||||
- 资料收集
|
||||
published: true
|
||||
slug: cover-generator
|
||||
description: >-
|
||||
This content presents a collection of GitHub repositories that offer tools for
|
||||
generating cover images for blog posts and websites. The repositories include
|
||||
Cover-Image-Generator by PJijin, Hero Generator by sdras, CoverView by
|
||||
rutikwankhade, and cover-paint by youngle316. Each repository is accompanied
|
||||
by a visual example of the generated cover image, showcasing their
|
||||
capabilities in creating visually appealing headers for digital content.
|
||||
---
|
||||
|
||||
# 封面生成器
|
||||
|
||||
[GitHub - PJijin/Cover-Image-Generator: 📕 Generate a cover image for your blog post 📝 https://blogcover.now.sh/](https://github.com/PJijin/Cover-Image-Generator)
|
||||
|
||||
![[IMG-20250104114646402.png]]
|
||||
|
||||
[GitHub - sdras/hero-generator: 🦸🏻♀️Hero Generator! Create a nice hero image for your site or app](https://github.com/sdras/hero-generator)
|
||||
|
||||
![[IMG-20250104114647133.png]]
|
||||
|
||||
[GitHub - rutikwankhade/CoverView: 🛠 Create awesome cover images for your blog posts quickly.](https://github.com/rutikwankhade/CoverView)
|
||||
![[IMG-20250104114651280.png]]
|
||||
|
||||
[GitHub - youngle316/cover-paint: 🖌️ cover create tool](https://github.com/youngle316/cover-paint)
|
||||
![[IMG-20250104114652827.png]]
|
||||
26
src/content/post/屏蔽推特黄推.md
Normal file
26
src/content/post/屏蔽推特黄推.md
Normal file
@ -0,0 +1,26 @@
|
||||
---
|
||||
title: 屏蔽推特黄推
|
||||
date: 2023-09-17
|
||||
author: KazooTTT
|
||||
tags:
|
||||
- twitter
|
||||
- 油猴脚本
|
||||
- gray
|
||||
- 项目推荐
|
||||
- 开源项目
|
||||
finished: true
|
||||
published: true
|
||||
slug: blocking-twitter-yellow-tweets
|
||||
description: >-
|
||||
推荐一个GitHub项目：daymade/Twitter-Block-Porn，该项目提供共享黑名单，可以一键拉黑所有发送假色情评论的诈骗账号，有效提升使用Twitter的体验。此方法比仅在网页上隐藏更有效，因为一旦拉黑，无论在手机端还是网页端，相关内容都会消失。
|
||||
rinId: 80
|
||||
---
|
||||
|
||||
# 屏蔽推特黄推
|
||||
|
||||
# 项目推荐
|
||||
|
||||
[GitHub - daymade/Twitter-Block-Porn: 共享黑名单, 一键拉黑所有黄推诈骗犯. Block scammers who sending fake porn comments, and help you improve your experience using Twitter.](https://github.com/daymade/Twitter-Block-Porn)
|
||||
比仅在网页上隐藏好使，这个是直接 block 之后手机和网页端都会消失
|
||||
|
||||
![[IMG-20250104114646405.png]]
|
||||
42
src/content/post/已经发布的分支在本地重命名之后如何推送到远程.md
Normal file
42
src/content/post/已经发布的分支在本地重命名之后如何推送到远程.md
Normal file
@ -0,0 +1,42 @@
|
||||
---
|
||||
title: 已经发布的分支在本地重命名之后如何推送到远程
|
||||
date: 2024-10-16
|
||||
author: KazooTTT
|
||||
type: Post
|
||||
status: Published
|
||||
tags:
|
||||
- Git
|
||||
- 分支管理
|
||||
finished: true
|
||||
published: true
|
||||
category: null
|
||||
slug: rename-published-branch-git
|
||||
description: >-
|
||||
要将已经发布的分支在本地重命名并推送到远程，可以按照以下步骤进行：首先使用git branch -m指令重命名本地分支，如果需要可以使用以下命令：git
|
||||
branch -m 旧分支名 新分支名。然后使用git push指令推送重命名后的分支到远程，如果需要使用-u选项，可以设置上游分支，使用git push
|
||||
-u origin 新分支名。最后要删除远程的旧分支，可以使用git push origin --delete 旧分支名。
|
||||
toAstro: false
|
||||
---
|
||||
|
||||
要将已经发布的分支在本地重命名并推送到远程，可以按照以下步骤进行：
|
||||
|
||||
1. 重命名本地分支：
|
||||
如果你还没有重命名分支，可以使用以下命令：
|
||||
|
||||
```bash
|
||||
git branch -m 旧分支名 新分支名
|
||||
```
|
||||
|
||||
2. 推送重命名后的分支到远程：
|
||||
使用 `-u` 选项设置上游分支：
|
||||
|
||||
```bash
|
||||
git push -u origin 新分支名
|
||||
```
|
||||
|
||||
3. 删除远程的旧分支：
|
||||
如果你希望删除远程的旧分支，可以使用：
|
||||
|
||||
```bash
|
||||
git push origin --delete 旧分支名
|
||||
```
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user