mirror of
https://github.com/KazooTTT/kazoottt-blog.git
synced 2025-06-23 10:41:31 +08:00
docs: update
This commit is contained in:
KazooTTT
88
src/content/post/编程/AI/01 Perplexity系列产品.md
Normal file
88
src/content/post/编程/AI/01 Perplexity系列产品.md
Normal file
@ -0,0 +1,88 @@
|
||||
---
|
||||
title: 01 Perplexity系列产品
|
||||
date: 2024-09-04
|
||||
author: KazooTTT
|
||||
type: Post
|
||||
status: Published
|
||||
tags:
|
||||
- AI
|
||||
- 搜索引擎
|
||||
- Perplexity
|
||||
- Playground
|
||||
- 播客
|
||||
finished: true
|
||||
published: true
|
||||
category: 编程
|
||||
slug: perplexity-productions-intro
|
||||
description: 概述Perplexity系列产品，包括搜索引擎、Playground和播客，重点介绍其功能和区别。
|
||||
NotionID-notionnext: ae2fba46-af30-4bd5-b6d0-fe751c162800
|
||||
link-notionnext: https://kazoottt.notion.site/01-Perplexity-ae2fba46af304bd5b6d0fe751c162800
|
||||
---
|
||||
|
||||
# Perplexity系列产品
|
||||
|
||||
## 产品1 Perplexity搜索引擎
|
||||
|
||||
|
||||
|
||||
https://www.perplexity.ai/
|
||||
|
||||
### 普通和Pro的区别
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
### 频繁人工验证怎么办
|
||||
|
||||
|
||||
|
||||
[Perplexity - AI Search - Chrome 应用商店](https://chromewebstore.google.com/detail/perplexity-ai-search/bnaffjbjpgiagpondjlnneblepbdchol)
|
||||
|
||||
|
||||
|
||||
### 同类别产品
|
||||
|
||||
[Devv AI](https://devv.ai/) (编程向)
|
||||
|
||||
|
||||
|
||||
## 产品2 Perplexity Playground
|
||||
|
||||
体验最新大模型
|
||||
|
||||
https://labs.perplexity.ai/
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
[Introducing Llama 3.1: Our most capable models to date](https://ai.meta.com/blog/meta-llama-3-1/)
|
||||
|
||||
|
||||
|
||||
[Changelog - Perplexity](https://docs.perplexity.ai/changelog/changelog#introducing-new-and-improved-sonar-models)
|
||||
|
||||
|
||||
|
||||
## 产品3 Perplexity播客
|
||||
|
||||
[资讯汇总 Discover](https://www.perplexity.ai/discover)
|
||||
|
||||
|
||||
|
||||
Perplexity和eleventlab合作，把Discover的内容转成播客了。
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
很适合练习听力以及了解科技资讯。地址：[Discover Daily by Perplexity](https://discoverdaily.ai/)
|
||||
|
||||
[spotify](https://open.spotify.com/episode/1CaSWrm7uUAOkaKjE9KI47?si=WPbA0x73QkGEPm-DFh4big)
|
||||
|
||||
[pca.st](https://pca.st/03qazv0d)
|
||||
|
||||
支持rss
|
||||
|
||||
|
||||
83
src/content/post/编程/AI/ChainForge简单介绍.md
Normal file
83
src/content/post/编程/AI/ChainForge简单介绍.md
Normal file
@ -0,0 +1,83 @@
|
||||
---
|
||||
title: ChainForge简单介绍
|
||||
date: 2024-05-22T00:00:00.000Z
|
||||
author: KazooTTT
|
||||
type: Post
|
||||
status: Published
|
||||
tags:
|
||||
- llm
|
||||
- chainforge
|
||||
- 工具
|
||||
finished: true
|
||||
published: true
|
||||
category: 编程
|
||||
slug: chainforge-intro
|
||||
description: >-
|
||||
ChainForge is a visual programming environment designed for prompt
|
||||
engineering, allowing users to evaluate and test prompts for large language
|
||||
models (LLMs). It supports various use cases such as assessing prompt
|
||||
effectiveness, conducting adversarial testing, and evaluating model
|
||||
performance. The platform also facilitates the customization of LLMs through
|
||||
its documentation on adding custom providers. Users can find practical
|
||||
examples and tutorials on the ChainForge website and GitHub repository,
|
||||
including a case study on Twitter and a video demonstrating LLM prompt
|
||||
injection attacks and vulnerability testing. Additionally, ChainForge is
|
||||
working on enhancing its functionality by enabling internal and proxy network
|
||||
environments.
|
||||
NotionID-notionnext: 40ec4f8d-2030-4ce1-b8c7-c1c9f56ef55b
|
||||
link-notionnext: 'https://kazoottt.notion.site/ChainForge-40ec4f8d20304ce1b8c7c1c9f56ef55b'
|
||||
rinId: 8
|
||||
---
|
||||
|
||||
# ChainForge简单介绍
|
||||
|
||||
|
||||
|
||||
官网：
|
||||
|
||||
[ChainForge: A visual programming environment for prompt engineering](https://chainforge.ai/)
|
||||
|
||||
github地址：
|
||||
|
||||
[GitHub - ianarawjo/ChainForge: An open-source visual programming environment for battle-testing prompts to LLMs.](https://github.com/ianarawjo/ChainForge)
|
||||
|
||||
## 简介
|
||||
|
||||
|
||||
|
||||
## 使用场景
|
||||
|
||||
评估提示词
|
||||
|
||||
攻击性测试
|
||||
|
||||
评估模型
|
||||
|
||||
评估某项指标
|
||||
|
||||
## 实践
|
||||
|
||||
|
||||
|
||||
这两个例子单独拿出来讲
|
||||
|
||||
## TODO
|
||||
|
||||
1. 内部环境运行
|
||||
2. 内网环境proxy [Add Custom Providers - ChainForge Documentation](https://chainforge.ai/docs/custom_providers/ 提供了自定义llm
|
||||
|
||||
## 参考
|
||||
|
||||
使用案例：
|
||||
|
||||
[X](https://twitter.com/9hills/status/1772467763165958602)
|
||||
|
||||
自动化Prompts
|
||||
|
||||
[\[2402.10949\] The Unreasonable Effectiveness of Eccentric Automatic Prompts](https://arxiv.org/abs/2402.10949)
|
||||
|
||||
相关的视频
|
||||
|
||||
[LLM Prompt Injection Attacks & Testing Vulnerabilities With ChainForge - YouTube](https://www.youtube.com/watch?v=x1_uEnoxvNs)
|
||||
|
||||
使用 ChainForge 进行 LLM 提示注入攻击和漏洞测试
|
||||
70
src/content/post/编程/AI/可以免费领取tokens的大模型服务.md
Normal file
70
src/content/post/编程/AI/可以免费领取tokens的大模型服务.md
Normal file
@ -0,0 +1,70 @@
|
||||
---
|
||||
title: 可以免费领取tokens的大模型服务
|
||||
date: 2024-06-20
|
||||
author: KazooTTT
|
||||
type: Post
|
||||
status: Published
|
||||
tags:
|
||||
- 大模型
|
||||
- 豆包
|
||||
- siliconflow
|
||||
- deepseek
|
||||
finished: true
|
||||
published: true
|
||||
category: 编程
|
||||
slug: free-tokens-large-model-service
|
||||
description:
|
||||
NotionID-notionnext: 30a20483-ea28-4daf-b8be-155f0e690bc7
|
||||
link-notionnext: https://kazoottt.notion.site/tokens-30a20483ea284dafb8be155f0e690bc7
|
||||
rinId: 43
|
||||
---
|
||||
|
||||
# 可以免费领取tokens的大模型服务
|
||||
|
||||
本文更新时间：2024年6月20日
|
||||
|
||||
## [豆包大模型](https://www.volcengine.com/)
|
||||
|
||||
[豆包大模型-火山引擎](https://www.volcengine.com/product/doubao)
|
||||
|
||||
"亲爱的客户，模型提供方将在5月15日至8月30日期间，为您提供一次独特的机会，即高达5亿tokens的免费权益。这是我们对您长期支持的感谢，也是对未来合作的期待。"
|
||||
|
||||
在8月30日之前可以领取5亿tokens
|
||||
|
||||
|
||||
|
||||
## [DeepSeek | 深度求索](https://www.deepseek.com/)
|
||||
|
||||
注册获 500 万 tokens（限中国大陆地区）
|
||||
|
||||
|
||||
|
||||
## [SiliconCloud](https://siliconflow.cn/zh-cn/siliconcloud)
|
||||
|
||||
手机号注册，一个手机号可以约 1 亿 token。
|
||||
|
||||
目前支持的模型有：
|
||||
|
||||
deepseek, qwen等
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
小红书输出：
|
||||
|
||||
目前可以免费领tokens的平台
|
||||
|
||||
一、豆包大模型 p1
|
||||
|
||||
在8月30日之前可以领取5亿tokens
|
||||
|
||||
二、DeepSeek
|
||||
|
||||
注册获500万tokens（限中国大陆地区）
|
||||
|
||||
三、SiliconCloud p3
|
||||
|
||||
手机号注册，一个手机号可以领约1亿token。
|
||||
|
||||
目前支持的模型有：deepseek, qwen等
|
||||
52
src/content/post/编程/AI/如何在 cursor 中使用 deepseek-coder.md
Normal file
52
src/content/post/编程/AI/如何在 cursor 中使用 deepseek-coder.md
Normal file
@ -0,0 +1,52 @@
|
||||
---
|
||||
title: 如何在 Cursor 中使用 DeepSeek-Coder
|
||||
date: 2024-07-25
|
||||
author: KazooTTT
|
||||
type: Post
|
||||
status: Draft
|
||||
tags:
|
||||
- deepseek-coder
|
||||
- OpenAI
|
||||
- API
|
||||
finished: true
|
||||
published: true
|
||||
category: 编程
|
||||
slug: using-deepseek-coder-in-cursor
|
||||
description: 本文介绍了如何在 Cursor 中添加和使用 DeepSeek-Coder 模型，以及配置相关的 OpenAI API Key 和 Base URL。
|
||||
NotionID-notionnext: f759bbe6-aa4b-4317-9695-44927430146b
|
||||
link-notionnext: https://kazoottt.notion.site/cursor-deepseek-coder-f759bbe6aa4b4317969544927430146b
|
||||
---
|
||||
|
||||
# 如何在 cursor 中使用 deepseek-coder
|
||||
|
||||
[Cursor](https://www.cursor.com/) 是一款智能代码编辑器，可以帮助用户生成代码、修改 Bug、生成测试等，提高编程效率。
|
||||
|
||||
可以免费使用，但是具有一定的额度。
|
||||
|
||||
|
||||
|
||||
但是它也可以使用自己的 key和模型具体的操作如下。
|
||||
|
||||
|
||||
|
||||
## 1. 添加模型：DeepSeek-Coder
|
||||
|
||||
在 Cursor 的模型页面，添加新模型，选择 `deepseek-coder`。
|
||||
|
||||
## 2. 配置 OpenAI API Key
|
||||
|
||||
在设置中找到 OpenAI API Key 选项，并填写 DeepSeek 提供的 API Key。
|
||||
|
||||
## 3. 配置 Base URL
|
||||
|
||||
在设置中找到 `Override OpenAI Base URL` 选项，并填入以下地址：
|
||||
|
||||
```
|
||||
https://api.deepseek.com/v1
|
||||
```
|
||||
|
||||
## 4. 在侧边栏中选择 deepseek-coder
|
||||
|
||||
|
||||
|
||||
这样配置就完成了
|
||||
56
src/content/post/编程/git/使用cursor生成git commit msg.md
Normal file
56
src/content/post/编程/git/使用cursor生成git commit msg.md
Normal file
@ -0,0 +1,56 @@
|
||||
---
|
||||
title: 使用cursor生成git commit msg
|
||||
date: 2024-11-12T00:00:00.000Z
|
||||
author: KazooTTT
|
||||
tags:
|
||||
- 笔记
|
||||
finished: true
|
||||
published: true
|
||||
description: null
|
||||
slug: cursorgit-commit-msg
|
||||
category: 编程
|
||||
---
|
||||
|
||||
原文参考：
|
||||
|
||||
[x.com](https://x.com/0xinhua_zh/status/1855650777110630471)
|
||||
|
||||
```
|
||||
|
||||
太懒了不想写 Commit message，
|
||||
|
||||
@cursor_ai
|
||||
|
||||
帮你写👇：
|
||||
|
||||
1⃣ 按住 [Control ⌃ + `] 打开终端输入 git add 暂存更改。
|
||||
|
||||
2⃣ 按住 [Command ⌘ + K] 对话框输入 "git commit message" 然后提交请求，搞定！简洁明了。
|
||||
|
||||
```
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
我是这样，在暂存前使用 command
|
||||
|
||||
[x.com](https://x.com/FaiChou_zh/status/1855775123271459192)
|
||||
|
||||
```
|
||||
|
||||
@Commit (Diff of Working State)
|
||||
|
||||
Please generate a commit message with English. Below is the commit message template: <type>(<scope>): <subject>
|
||||
|
||||
```
|
||||
|
||||
```
|
||||
|
||||
@Commit (Diff of Working State)
|
||||
|
||||
Please generate a commit message with CN. Below is the commit message template: <type>(<scope>): <subject>
|
||||
|
||||
```
|
||||
|
||||
|
||||
38
src/content/post/编程/git/已经发布的分支在本地重命名之后如何推送到远程.md
Normal file
38
src/content/post/编程/git/已经发布的分支在本地重命名之后如何推送到远程.md
Normal file
@ -0,0 +1,38 @@
|
||||
---
|
||||
title: 已经发布的分支在本地重命名之后如何推送到远程
|
||||
date: 2024-10-16
|
||||
author: KazooTTT
|
||||
type: Post
|
||||
status: Published
|
||||
tags:
|
||||
- Git
|
||||
- 分支管理
|
||||
finished: true
|
||||
published: true
|
||||
category: 编程
|
||||
slug: rename-published-branch-git
|
||||
description:
|
||||
---
|
||||
|
||||
要将已经发布的分支在本地重命名并推送到远程，可以按照以下步骤进行：
|
||||
|
||||
1. 重命名本地分支：
|
||||
如果你还没有重命名分支，可以使用以下命令：
|
||||
|
||||
```bash
|
||||
git branch -m 旧分支名 新分支名
|
||||
```
|
||||
|
||||
2. 推送重命名后的分支到远程：
|
||||
使用 `-u` 选项设置上游分支：
|
||||
|
||||
```bash
|
||||
git push -u origin 新分支名
|
||||
```
|
||||
|
||||
3. 删除远程的旧分支：
|
||||
如果你希望删除远程的旧分支，可以使用：
|
||||
|
||||
```bash
|
||||
git push origin --delete 旧分支名
|
||||
```
|
||||
68
src/content/post/编程/vtk.js/在vtk.js中stl和json的互相转化.md
Normal file
68
src/content/post/编程/vtk.js/在vtk.js中stl和json的互相转化.md
Normal file
@ -0,0 +1,68 @@
|
||||
---
|
||||
title: 在vtk.js中stl和json的互相转化
|
||||
date: 2024-11-22T00:00:00.000Z
|
||||
author: KazooTTT
|
||||
type: Post
|
||||
status: Published
|
||||
tags: null
|
||||
finished: true
|
||||
published: true
|
||||
category: 编程
|
||||
slug: in-vtkjs-stl-and-json-are-converted-to-each-other
|
||||
description: ''
|
||||
noteId_x: 15
|
||||
create_time: '2024/11/22 13:35:36'
|
||||
update_time: '2024/11/22 14:40:08'
|
||||
publish_time: '2024/11/22 14:38:29'
|
||||
---
|
||||
|
||||
## stl如何转为json
|
||||
|
||||
``` ts
|
||||
import vtkSTLReader from '@kitware/vtk.js/IO/Geometry/STLReader';
|
||||
|
||||
const getStlModelFromPath = async (path: string) => {
|
||||
const response = await fetch(path);
|
||||
const stlArrayBuffer = await response.arrayBuffer();
|
||||
|
||||
const stlReader = vtkSTLReader.newInstance();
|
||||
stlReader.parseAsArrayBuffer(stlArrayBuffer);
|
||||
|
||||
const polyData = stlReader.getOutputData();
|
||||
return polyData;
|
||||
};
|
||||
|
||||
const stlPath = '/path/to/your/model.stl';
|
||||
const polyData = await getStlModelFromPath(stlPath);
|
||||
const jsonData = polyData.toJSON();
|
||||
```
|
||||
|
||||
## json如何转为stl
|
||||
|
||||
``` ts
|
||||
import modelJSON from './model.json';
|
||||
|
||||
const convertPolyDataJSONToStl = (polyDataJSON: string, fileName: string = 'model.stl') => {
|
||||
const polyData = vtkPolyData.newInstance(polyDataJSON);
|
||||
const writer = vtkSTLWriter.newInstance();
|
||||
|
||||
writer.setInputData(polyData);
|
||||
const fileContents = writer.getOutputData();
|
||||
|
||||
// Create a blob and download link
|
||||
const blob = new Blob([fileContents], { type: 'application/octet-stream' });
|
||||
const a = window.document.createElement('a');
|
||||
a.href = window.URL.createObjectURL(blob);
|
||||
a.download = fileName;
|
||||
|
||||
// Trigger download
|
||||
document.body.appendChild(a);
|
||||
a.click();
|
||||
document.body.removeChild(a);
|
||||
window.URL.revokeObjectURL(a.href);
|
||||
};
|
||||
|
||||
|
||||
convertPolyDataJSONToStl(modelJSON);
|
||||
|
||||
```
|
||||
28
src/content/post/编程/web3/expo报错.md
Normal file
28
src/content/post/编程/web3/expo报错.md
Normal file
@ -0,0 +1,28 @@
|
||||
---
|
||||
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: 编程
|
||||
---
|
||||
|
||||
# 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，以及把上面这个依赖移除，再安装一次。
|
||||
15
src/content/post/编程/web3/tokenERC20部署和学习.md
Normal file
15
src/content/post/编程/web3/tokenERC20部署和学习.md
Normal file
@ -0,0 +1,15 @@
|
||||
---
|
||||
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: 编程
|
||||
---
|
||||
|
||||
# tokenERC20部署和学习
|
||||
|
||||
[GitHub - meterio/tokenERC20](https://github.com/meterio/tokenERC20)
|
||||
66
src/content/post/编程/web3/web3资源收集.md
Normal file
66
src/content/post/编程/web3/web3资源收集.md
Normal file
@ -0,0 +1,66 @@
|
||||
---
|
||||
title: web3资源收集
|
||||
slug: web3-resource-collection
|
||||
published: true
|
||||
description: >-
|
||||
本资源收集提供了深入了解Web3的基础材料，包括比特币和以太坊的历史与技术细节。推荐阅读比特币前传系列文章，了解比特币诞生前的技术背景和发展历程。以太坊简史则概述了其近十年的重大突破和变化，以及创始人Vitalik
|
||||
Buterin的初衷。此外，加密思潮编年史帮助读者快速把握加密技术的发展脉络。技术方面，比特币和以太坊的白皮书精读版详细解读了其技术原理，而“一个以太坊交易的完整周期”则深入探讨了交易的具体流程。YouTube教程和相关文章进一步提供了Foundry开发框架和Web3.0应用架构的讲解，以及Uniswap
|
||||
v2的详细解析，为学习和研究Web3提供了丰富的资料。
|
||||
rinId: 13
|
||||
finished: true
|
||||
date: 2024-02-07
|
||||
category: 编程
|
||||
---
|
||||
|
||||
# web3资源收集
|
||||
|
||||
基础推荐材料
|
||||
人文基础：
|
||||
|
||||
比特币之前的事情：理解组成比特币的核心技术的发展，理解比特币的前前后后，能更好的理解中本聪创造比特币的核心产物。
|
||||
|
||||
1、比特币前传
|
||||
<https://foresightnews.pro/article/detail/13987>（比特币前传（一）70 年代公钥传奇）
|
||||
|
||||
<https://foresightnews.pro/article/detail/14114>（比特币前传（二）：去中心化的起源）
|
||||
|
||||
<https://foresightnews.pro/article/detail/14545>（比特币前传（三）：90 年代的加密战争
|
||||
<https://foresightnews.pro/article/detail/14783>（比特币前传（四）：跨越半个世纪的思想与蓝图）
|
||||
|
||||
2、以太坊简史：因暴雪削弱术士而诞生的千亿美元巨兽
|
||||
<https://foresightnews.pro/article/detail/13531>
|
||||
以太坊近十年的发展很难用一篇文章概括，但是可以大致浏览每一个阶段的重大突破与变化。了解 VB 创造 ETH 的时候主要想解决什么问题
|
||||
3、加密思潮编年史，从 25 年前说起
|
||||
<https://foresightnews.pro/article/detail/961>
|
||||
快速了解加密思潮在不同时期的变化，了解到如何一步步从 BTC 走向 DAPP
|
||||
技术基础：
|
||||
|
||||
1**、比特币白皮书精读版**
|
||||
<https://mp.weixin.qq.com/s/eYCbAD_tPG9PmuFE1LvCWA>
|
||||
比特币白皮书精读版是对比特币白皮书更详细的解读，有助于更好的理解白皮书中的内容。比特币的技术原理搞的越清楚越好。
|
||||
|
||||
2、以太坊白皮书精讲 精选
|
||||
<https://zhuanlan.zhihu.com/p/37747240>（Part1）
|
||||
|
||||
<https://zhuanlan.zhihu.com/p/38002875>（Part2）
|
||||
|
||||
<https://zhuanlan.zhihu.com/p/38003169>（Part3）
|
||||
|
||||
白皮书精讲系列是看懂白皮书很好的参考资料，可以更深入的了解白皮书中的细节。这是 ETH1.0 的架构，后面再看 ETH 2.0 的架构。也是搞得越清楚越好，后续的区块链整体上都没有脱离这个架构，既 Chain-VM-共识-Daap
|
||||
3**、一个以太坊交易的完整周期**
|
||||
<https://www.notonlyowner.com/learn/what-happens-when-you-send-one-dai>
|
||||
这篇文章对具体的每一个环节都有很详细的记录，跟 Daap 的开发结合非常紧密，最好能完整过一遍，然后自己尝试画一个详细的流程图。包括前端怎么跟钱包交互，钱包怎么跟 RPC 交互，节点之间怎么通信，EVM 怎么处理交易，Gas，最后存储等。
|
||||
|
||||
---
|
||||
|
||||
youtube 教程
|
||||
[Site Unreachable](https://www.youtube.com/watch?v=q9UzRyWRPcY&ab_channel=CyfrinAudits)
|
||||
|
||||
这个可以看看 Foundry 开发框架
|
||||
[Foundry 开发框架 | Decert.me](https://decert.me/tutorial/solidity/tools/foundry/)
|
||||
|
||||
[The Architecture of a Web 3.0 application](https://www.preethikasireddy.com/post/the-architecture-of-a-web-3-0-application)这篇是讲 web3 应用的架构
|
||||
|
||||
对了，有一个 uniswap v2 详细讲解材料，非常不错，我发出来
|
||||
大家有需要可以好好看一下，讲得非常详细
|
||||
[X 上的 RareSkills：“It's 100% free -- no login required. Bookmark (no pun intended) and come back as needed. Book link: https://t.co/8BcWQH8jH0” / X](https://twitter.com/RareSkills_io/status/1724741635995799607?t=ItDMIKngRqH7yQ4Zf1gIxQ&s=19)
|
||||
24
src/content/post/编程/前端/antd switch组件错误使用案例.md
Normal file
24
src/content/post/编程/前端/antd switch组件错误使用案例.md
Normal file
@ -0,0 +1,24 @@
|
||||
---
|
||||
title: antd switch组件错误使用案例
|
||||
date: 2024-10-12
|
||||
author: KazooTTT
|
||||
tags:
|
||||
- bug
|
||||
finished: true
|
||||
published: true
|
||||
description:
|
||||
slug: antd-switch-component-misuse-example
|
||||
category: 编程
|
||||
---
|
||||
|
||||
# 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。
|
||||
|
||||
|
||||
@ -0,0 +1,66 @@
|
||||
---
|
||||
title: fetch 报错排查 SocketError other side closed
|
||||
date: 2024-02-03T00:00:00.000Z
|
||||
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: 编程
|
||||
---
|
||||
|
||||
# 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
|
||||
@ -0,0 +1,41 @@
|
||||
---
|
||||
title: __dirname is not defined in ES module scope
|
||||
date: 2024-05-29T00:00:00.000Z
|
||||
author: KazooTTT
|
||||
type: Post
|
||||
status: Published
|
||||
tags:
|
||||
- nodejs
|
||||
- 前端
|
||||
- esm
|
||||
- module
|
||||
finished: true
|
||||
published: true
|
||||
category: 编程
|
||||
slug: dirname-is-not-defined-in-es-module-scope
|
||||
NotionID-notionnext: 543bfc66-a416-4704-92be-9a93fed191a8
|
||||
link-notionnext: >-
|
||||
https://kazoottt.notion.site/__dirname-is-not-defined-in-ES-module-scope-543bfc66a416470492be9a93fed191a8
|
||||
rinId: 14
|
||||
---
|
||||
|
||||
# __dirname Is not Defined in ES Module Scope
|
||||
|
||||
在package.json中的type = module的项目中，我创建了一个ts文件，类型是esm的类型。
|
||||
|
||||
这里的报错是因为我们错误的使用了module的语法到esm的文件中，要解决这个问题的方法有两种，第一种改为module，另一种是改为esm的写法。
|
||||
|
||||
首先是第一种改为module的写法，那就是把import改为require，然后由于我们这里是module的项目，所以需要修改一下ts文件的后缀ts改为cts。
|
||||
|
||||
一个供参考的例子：[GitHub - shawnsparks/typescript-esm: Explore different usage patterns of ES modules with Typescript](https://github.com/shawnsparks/typescript-esm)
|
||||
|
||||
然后是第二种，文件、路径相关的改为esm的写法。
|
||||
|
||||
```ts
|
||||
import { fileURLToPath } from "url"
|
||||
import path from "path"
|
||||
|
||||
// 获取当前模块的目录路径
|
||||
const __filename = fileURLToPath(import.meta.url)
|
||||
const __dirname = path.dirname(__filename)
|
||||
```
|
||||
31
src/content/post/编程/前端/node/npm scope公共包.md
Normal file
31
src/content/post/编程/前端/node/npm scope公共包.md
Normal file
@ -0,0 +1,31 @@
|
||||
---
|
||||
title: npm scope公共包
|
||||
date: 2024-02-18T00:00:00.000Z
|
||||
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: 编程
|
||||
---
|
||||
|
||||
# Npm Scope公共包
|
||||
|
||||
在package.json中新增：
|
||||
|
||||
```json
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
```
|
||||
|
||||
或者发布的时候加上 `--access=public`
|
||||
|
||||
```javascript
|
||||
npm publish --access=public
|
||||
```
|
||||
36
src/content/post/编程/前端/node/npm发包失败的原因.md
Normal file
36
src/content/post/编程/前端/node/npm发包失败的原因.md
Normal file
@ -0,0 +1,36 @@
|
||||
---
|
||||
title: npm发包失败的原因
|
||||
date: 2024-02-18T00:00:00.000Z
|
||||
author: KazooTTT
|
||||
tags:
|
||||
- npm
|
||||
finished: true
|
||||
published: true
|
||||
slug: reasons-why-npm-fails-to-send-packages
|
||||
link: 'https://kazoottt.notion.site/npm-b256188902f74be09e4ee74f8247da84'
|
||||
notionID: b2561889-02f7-4be0-9e4e-e74f8247da84
|
||||
description: >-
|
||||
本文讨论了在npm发包过程中可能遇到的失败原因，包括账号权限不足、包名不规范、包名包含屏蔽词等。特别提到了“download”是一个屏蔽词，作者通过将其替换为“downloader”后成功发布。同时，文章也提到了npm的命令行工具在错误信息提供上的不足，使得问题定位变得困难。参考了GitHub上的相关讨论，以帮助理解这一问题。
|
||||
rinId: 73
|
||||
category: 编程
|
||||
---
|
||||
|
||||
# Npm发包失败的原因
|
||||
|
||||
## 可能的原因：
|
||||
|
||||
1. 当前的账号没有发包权限。（比如没有某个包或者某个scope的权限）
|
||||
2. 当前的包名不符合规范。（需要URL-safe characters）
|
||||
3. 当前的包名是屏蔽词。（例如download [[npm发包失败的原因#npm包名屏蔽词]])
|
||||
4. 可能是当前的 npm 设置了镜像地址，而不是原始的 npm 地址，导致 login 的时候无法登录从而无法发布。解决方法就是在发布的时候先切换为原始的 npm 地址，再发布。
|
||||
5. 其他（后续遇到了再补充）
|
||||
|
||||
// 吐槽一下，npm的cli给的信息很多都是无效信息，有时候很难从中知道到底是哪里有问题
|
||||
|
||||
## Npm包名屏蔽词
|
||||
|
||||
1. download (我替换成downloader之后才成功发布）
|
||||
|
||||
## 参考
|
||||
|
||||
[\[BUG\] npm publish get 400 Bad Request without any useful information · Issue #6090 · npm/cli · GitHub](https://github.com/npm/cli/issues/6090)
|
||||
84
src/content/post/编程/前端/search params 请求参数的获取与更新.md
Normal file
84
src/content/post/编程/前端/search params 请求参数的获取与更新.md
Normal file
@ -0,0 +1,84 @@
|
||||
---
|
||||
title: search params 请求参数
|
||||
date: 2024-11-13T00:00:00.000Z
|
||||
author: KazooTTT
|
||||
type: Post
|
||||
status: Published
|
||||
tags: null
|
||||
finished: true
|
||||
published: true
|
||||
category: 编程
|
||||
slug: search-params
|
||||
description: null
|
||||
NotionID-notionnext: 13d55568-fd75-81f5-be1b-e0a4f8137355
|
||||
link-notionnext: 'https://kazoottt.notion.site/search-params-13d55568fd7581f5be1be0a4f8137355'
|
||||
---
|
||||
|
||||
## react router `useSearchParams`
|
||||
|
||||
[useSearchParams | React Router](https://reactrouter.com/en/main/hooks/use-search-params#usesearchparams)
|
||||
|
||||
``` ts
|
||||
interface URLSearchParams {
|
||||
/** Appends a specified key/value pair as a new search parameter. */
|
||||
append(name: string, value: string): void;
|
||||
/** Deletes the given search parameter, and its associated value, from the list of all search parameters. */
|
||||
delete(name: string): void;
|
||||
/** Returns the first value associated to the given search parameter. */
|
||||
get(name: string): string | null;
|
||||
/** Returns all the values association with a given search parameter. */
|
||||
getAll(name: string): string[];
|
||||
/** Returns a Boolean indicating if such a search parameter exists. */
|
||||
has(name: string): boolean;
|
||||
/** Sets the value associated to a given search parameter to the given value. If there were several values, delete the others. */
|
||||
set(name: string, value: string): void;
|
||||
sort(): void;
|
||||
/** Returns a string containing a query string suitable for use in a URL. Does not include the question mark. */
|
||||
toString(): string;
|
||||
forEach(callbackfn: (value: string, key: string, parent: URLSearchParams) => void, thisArg?: any): void;
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
它提供了内建的 API，允许直接获取查询参数的值，比如 `.get()`, `.set()`, `.append()` 等。
|
||||
|
||||
``` ts
|
||||
const [queryParams, setQueryParams] = useSearchParams();
|
||||
console.log('%c Line:52 🍿 queryParams', 'color:#33a5ff', queryParams.get('medicalRecordID'));
|
||||
```
|
||||
|
||||
## qs + window.location
|
||||
|
||||
[GitHub - ljharb/qs: A querystring parser with nesting support](https://github.com/ljharb/qs)
|
||||
|
||||
|
||||
|
||||
使用window.location.search获取到请求参数对应的字符串（需要注意的是：字符串是带有?的）
|
||||
|
||||
然后使用qs.parse方法来解析查询字符串
|
||||
|
||||
案例：localhost?medicalRecordID=1
|
||||
|
||||
错误使用:
|
||||
|
||||
``` ts
|
||||
const getQueryParam = (): QueryParams => {
|
||||
// use qs to parse the query params
|
||||
const queryParams: QueryParams = qs.parse(window.location.search);
|
||||
return queryParams;
|
||||
};
|
||||
```
|
||||
|
||||
|
||||
|
||||
正确使用：
|
||||
|
||||
``` ts
|
||||
const getQueryParam = (): QueryParams => {
|
||||
// use qs to parse the query params
|
||||
const queryParams: QueryParams = qs.parse(window.location.search.slice(1));
|
||||
return queryParams;
|
||||
};
|
||||
```
|
||||
|
||||
|
||||
66
src/content/post/编程/前端/其他/open graph 简述.md
Normal file
66
src/content/post/编程/前端/其他/open graph 简述.md
Normal file
@ -0,0 +1,66 @@
|
||||
---
|
||||
title: open graph简述
|
||||
date: 2024-04-09T00:00:00.000Z
|
||||
author: KazooTTT
|
||||
tags: []
|
||||
finished: true
|
||||
published: true
|
||||
slug: open-graph
|
||||
description: >-
|
||||
在使用Twitter时，我们可能会注意到有些链接会显示预览卡片，而有些则不会。这主要是因为一些网站设置了Open Graph协议，而有些则没有。Open
|
||||
Graph是由Facebook在2010年推出的协议，用于在社交网络上分享链接时显示预览卡片。此外，Twitter也有自己的Twitter
|
||||
Card协议，如果两者同时存在，Twitter会优先显示Twitter Card的内容。文章还介绍了一些检查和预览Open
|
||||
Graph设置的工具，以及提供Open Graph示例的网站。
|
||||
NotionID-notionnext: 76ed52a0-ad58-401c-8a5d-c5719f67b673
|
||||
link-notionnext: 'https://kazoottt.notion.site/open-graph-76ed52a0ad58401c8a5dc5719f67b673'
|
||||
rinId: 16
|
||||
category: 编程
|
||||
---
|
||||
|
||||
# Open Graph 简述
|
||||
|
||||
## 场景
|
||||
|
||||
在我们使用twitter的时候，会发现有的链接会显示预览卡片，有的不会。
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
这是因为有的网站设置了open graph，有的没有。
|
||||
|
||||
|
||||
|
||||
## 那么什么是open graph？
|
||||
|
||||
open graph是一个由facebook在2010年发布的协议，用于在社交网络上分享链接时，显示预览卡片。
|
||||
|
||||
|
||||
|
||||
我觉得无论是它的名称还是意图，都能看出facebook以及其他支持这种协议的社交平台的开放性, 特别是在某些平台会屏蔽外链或者限流带有外链的衬托下。
|
||||
|
||||
|
||||
|
||||
和open graph类似还有twitter自己的card，如果twitter card和open graph同时存在的话，会先显示在twitter card。如果twitter card没有定义，才会显示open graph。
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## 预览和检查工具
|
||||
|
||||
[OpenGraph - Preview Social Media Share and Generate Metatags - OpenGraph](https://www.opengraph.xyz/)
|
||||
|
||||
|
||||
|
||||
[OpenGraph - Preview Images and Generate Open Graph Meta Tags](https://opengraph.dev/)
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## 一些例子
|
||||
|
||||
[Open Graph Examples](https://opengraphexamples.com/)
|
||||
|
||||
|
||||
52
src/content/post/编程/前端/在react中不要滥用 short-circuit &&.md
Normal file
52
src/content/post/编程/前端/在react中不要滥用 short-circuit &&.md
Normal file
@ -0,0 +1,52 @@
|
||||
---
|
||||
title: 在react中不要滥用 &&
|
||||
date: 2024-10-16
|
||||
author: KazooTTT
|
||||
tags:
|
||||
- bug
|
||||
- react
|
||||
- jsx
|
||||
- short-circuit
|
||||
- 前端
|
||||
finished: true
|
||||
published: true
|
||||
description: 在React中使用短路运算符（&&）时，0 会被错误地渲染为内容。通过避免使用 && 判断数字，特别是可能为 0 的值，可以确保正确的内容显示，例如显示 0号相机 而非仅仅显示 0。
|
||||
slug: do-not-misuse-short-circuiting-in-react
|
||||
category: 编程
|
||||
NotionID-notionnext: 12b55568-fd75-815c-ba9c-ff587a86a262
|
||||
link-notionnext: https://kazoottt.notion.site/react-short-circuit-12b55568fd75815cba9cff587a86a262
|
||||
---
|
||||
|
||||
## 错误现象
|
||||
|
||||
代码如下：
|
||||
|
||||
``` jsx
|
||||
{camera_id && (
|
||||
<div>{camera_id}号相机</div>
|
||||
)}
|
||||
```
|
||||
|
||||
当camera_id>0的时候，正常显示x号相机
|
||||
|
||||
当camera_id=0的时候，**异常**显示0,而不是0号相机
|
||||
|
||||
## 错误原因
|
||||
|
||||
这是因为在 JavaScript 中，`0` 被视为 falsy 值，因此当 `camera_id` 为 `0` 时，条件判断 `camera_id &&` 会返回 `false`。所以后面的内容不被渲染。
|
||||
|
||||
但是0是可以被react渲染的，所以最后显示的是0，而不是不显示。
|
||||
|
||||
## 解决方法
|
||||
|
||||
涉及到数字且可能为0的时候，不要直接使用&&来判断，而是使用
|
||||
|
||||
``` jsx
|
||||
{camera_id !== undefined && (
|
||||
<div>{camera_id}号相机</div>
|
||||
)}
|
||||
```
|
||||
|
||||
## 参考
|
||||
|
||||
[reactjs - React showing 0 instead of nothing with short-circuit (&&) conditional component - Stack Overflow](https://stackoverflow.com/questions/53048037/react-showing-0-instead-of-nothing-with-short-circuit-conditional-component)
|
||||
91
src/content/post/编程/前端/如何实现在markdown中渲染iframe.md
Normal file
91
src/content/post/编程/前端/如何实现在markdown中渲染iframe.md
Normal file
@ -0,0 +1,91 @@
|
||||
---
|
||||
title: 如何实现在markdown中渲染iframe
|
||||
date: 2024-04-01T00:00:00.000Z
|
||||
author: KazooTTT
|
||||
tags: []
|
||||
finished: true
|
||||
published: true
|
||||
slug: how-to-render-iframes-in-markdown
|
||||
description: >-
|
||||
本文介绍了如何在Markdown中渲染iframe的两种方法。第一种方法是通过直接在Markdown中嵌入iframe标签，需要使用`rehypeRaw`插件来实现HTML内容的嵌入。第二种方法是通过重写Markdown中的`a`标签，将其转换为iframe，这种方法可以根据链接内容进行定制化处理，例如将特定链接转换为iframe展示。文中还提供了相关的代码示例和项目源代码链接，以及一个演示地址供参考。
|
||||
NotionID-notionnext: a63f5e28-352a-48cc-8c89-f9dd5b5a18ac
|
||||
link-notionnext: 'https://kazoottt.notion.site/markdown-iframe-a63f5e28352a48cc8c89f9dd5b5a18ac'
|
||||
rinId: 19
|
||||
category: 编程
|
||||
---
|
||||
|
||||
# 1 如何实现在markdown中渲染iframe
|
||||
|
||||
demo展示地址：[Create Next App](https://markdown-preview-eosin.vercel.app/demo)
|
||||
|
||||
项目源代码：[https://github.com/KazooTTT/markdown-iframe-preview/](https://github.com/KazooTTT/markdown-iframe-preview/)
|
||||
|
||||
[https://github.com/KazooTTT/markdown-iframe-preview/](https://github.com/KazooTTT/markdown-iframe-preview/)
|
||||
|
||||
使用的markdown渲染器是：[GitHub - remarkjs/react-markdown: Markdown component for React](https://github.com/remarkjs/react-markdown)
|
||||
|
||||
|
||||
|
||||
有两种方案，第一种是iframe以html的语法嵌入（1），第二种是重写a标签把它转化为iframe（3）。
|
||||
|
||||
## 1.1 Iframe直接嵌入markdown
|
||||
|
||||
```markdown
|
||||
### 1.1.1 Iframe
|
||||
|
||||
<iframe src="./" width="100%" height="500"></iframe>
|
||||
```
|
||||
|
||||
参考：
|
||||
|
||||
[iFrame Not Rendering · Issue #661 · remarkjs/react-markdown · GitHub](https://github.com/remarkjs/react-markdown/issues/661)
|
||||
|
||||
[GitHub - remarkjs/react-markdown: Markdown component for React](https://github.com/remarkjs/react-markdown?tab=readme-ov-file#appendix-a-html-in-markdown)
|
||||
|
||||
也就是引入rehypeRaw这个rehypePlugin，实现在markdown中嵌入html。
|
||||
|
||||
（谨慎使用，需要保证html内容安全的情况下嵌入）
|
||||
|
||||
```tsx
|
||||
import Markdown from "react-markdown"
|
||||
import rehypeRaw from "rehype-raw"
|
||||
|
||||
const DempPage = () => {
|
||||
return <Markdown rehypePlugins={[rehypeRaw]}>{markdownContent}</Markdown>
|
||||
}
|
||||
```
|
||||
|
||||
## 1.2 a标签转化为iframe
|
||||
|
||||
在某些情况下我们需要把a标签的对应的网页直接展示出来，这个时候就要把a标签转化为iframe了。实现的方法是重写a这个组件。
|
||||
|
||||
下面是我的写法，我需要把链接中有`/agent/special`的所有的链接都以iframe的形式展示出来。于是做了一个特殊判断来实现这个逻辑。对于其他的不满足要求的a标签，则直接渲染为a标签即可。
|
||||
|
||||
这里还可以做一些拓展的写法，比如检查到网易云的音乐链接，就在前面加一个网易云的logo，如果检测到外链那么点击的时候打开新的窗口等等。
|
||||
|
||||
```ts
|
||||
import Markdown from "react-markdown";
|
||||
|
||||
const DemoPage = () => {
|
||||
<Markdown
|
||||
components={{
|
||||
a(props) {
|
||||
const { href, children } = props;
|
||||
if (href && href.indexOf("/agent/special") != -1) {
|
||||
return (
|
||||
<iframe src={href} width="100%" height="500" allowFullScreen />
|
||||
);
|
||||
}
|
||||
// 否则,渲染为普通的 <a> 链接
|
||||
return (
|
||||
<a href={href} target="_blank" rel="noopener noreferrer">
|
||||
{children}
|
||||
</a>
|
||||
);
|
||||
},
|
||||
}}
|
||||
>
|
||||
{markdownContent}
|
||||
</Markdown>;
|
||||
};
|
||||
```
|
||||
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
|
||||
category: 编程
|
||||
---
|
||||
|
||||
# 如何更加直接地查看浏览器内核
|
||||
|
||||
打开devtools的命令行，然后输入：
|
||||
|
||||
```shell
|
||||
navigator.appVersion
|
||||
```
|
||||
|
||||
![[IMG-20241112142408056.png]]
|
||||
48
src/content/post/编程/前端/对于a标签的download属性.md
Normal file
48
src/content/post/编程/前端/对于a标签的download属性.md
Normal file
@ -0,0 +1,48 @@
|
||||
---
|
||||
title: 对于a标签的download属性
|
||||
date: 2024-10-15
|
||||
author: KazooTTT
|
||||
type: Post
|
||||
status: Published
|
||||
tags:
|
||||
- 前端
|
||||
- html
|
||||
finished: true
|
||||
published: true
|
||||
category: 编程
|
||||
slug: the-download-attribute-for-the-a-tag
|
||||
description:
|
||||
---
|
||||
|
||||
## 对于a标签的download属性
|
||||
|
||||
|
||||
|
||||
[\<a\>: The Anchor element - HTML: HyperText Markup Language | MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a)
|
||||
|
||||
---
|
||||
|
||||
如何定义没有值？
|
||||
|
||||
`<a download> ` 或者 `<a download="">`
|
||||
|
||||
---
|
||||
|
||||
在设置的需要注意类型转换：
|
||||
|
||||
``` js
|
||||
let temp1 = document.createElement('a');
|
||||
|
||||
temp1.download = null;
|
||||
|
||||
console.log(temp1.download); // 输出 undefined
|
||||
|
||||
```
|
||||
|
||||
但是如果先设置了download = '', 再设置 download = null, 就会被转化为'null'
|
||||
|
||||
|
||||
|
||||
所以要么直接设置 download = null，要么直接设置download = ''
|
||||
|
||||
不要设置了download = ''之后去设置download = null
|
||||
33
src/content/post/编程/前端/平台/如何快速导出vercel project中的环境变量.md
Normal file
33
src/content/post/编程/前端/平台/如何快速导出vercel project中的环境变量.md
Normal file
@ -0,0 +1,33 @@
|
||||
---
|
||||
title: 如何快速导出vercel project中的环境变量
|
||||
date: 2024-02-23
|
||||
author: KazooTTT
|
||||
tags:
|
||||
- vercel
|
||||
finished: true
|
||||
published: true
|
||||
slug: how-to-quickly-export-environment-variables-in-vercel-project
|
||||
description: >-
|
||||
本文介绍了如何在Vercel中集成插件或链接数据库后，快速导出环境变量的方法。首先，需要全局安装Vercel，然后通过命令链接Vercel账户，并拉取环境变量到本地的.env.local文件中。这一过程简化了环境变量的管理，提高了开发效率。
|
||||
rinId: 3
|
||||
category: 编程
|
||||
---
|
||||
|
||||
# 如何快速导出vercel Project中的环境变量
|
||||
|
||||
我在vercel中集成了某些插件或者链接了数据库，要如何快速的导出这些环境变量呢？
|
||||
|
||||
具体方法如下：
|
||||
|
||||
``` shell
|
||||
npm i -g vercel
|
||||
|
||||
vercel link
|
||||
|
||||
vercel env pull .env.local
|
||||
```
|
||||
|
||||
1. 首先是安装vercel
|
||||
2. 然后登录vercel 
|
||||
3. 最后拉取环境变量到.env.local
|
||||
|
||||
93
src/content/post/编程/前端/浏览器/再次学习History.scrollRestoration.md
Normal file
93
src/content/post/编程/前端/浏览器/再次学习History.scrollRestoration.md
Normal file
@ -0,0 +1,93 @@
|
||||
---
|
||||
title: 再次学习History.scrollRestoration
|
||||
date: 2024-05-23T00:00:00.000Z
|
||||
author: KazooTTT
|
||||
type: Post
|
||||
status: Published
|
||||
tags:
|
||||
- History API
|
||||
- scrollRestoration
|
||||
- Web Development
|
||||
- JavaScript
|
||||
- 浏览器
|
||||
finished: true
|
||||
published: true
|
||||
category: 编程
|
||||
slug: understanding-history-scrollrestoration
|
||||
description: >-
|
||||
本文重新探讨了浏览器History对象的scrollRestoration属性，该属性用于控制历史页面切换时滚动条是否恢复到之前的位置。scrollRestoration属性有两个可选值：auto和manual。当设置为auto时，滚动条会自动恢复到切换前的位置；若设置为manual，则滚动条保持在页面顶部。文章还讨论了该属性的局限性，包括可能导致的页面跳动和在不同浏览器中实现一致滚动恢复的困难。最后，文章建议在页面出现不美观跳跃或需要手动控制滚动条位置时，应将scrollRestoration设置为manual。
|
||||
NotionID-notionnext: b5838d05-d223-4a6d-b92c-e284c5e5a2ce
|
||||
link-notionnext: >-
|
||||
https://kazoottt.notion.site/History-scrollRestoration-b5838d05d2234a6db92ce284c5e5a2ce
|
||||
rinId: 18
|
||||
---
|
||||
|
||||
# 再次学习History.scrollRestoration
|
||||
|
||||
|
||||
|
||||
之前在react.dev的源代码中了解到了这个HIstory的属性，当时写了一篇笔记来记录我对它的理解，现在看来还是一知半解。所以今天打算重新学习一下这个属性，主要从属性以及所属对象的介绍、使用方法，是否开启标准这几个方面来简单展开。
|
||||
|
||||
## 什么是scrollRestoration
|
||||
|
||||
scrollRestoration是一个属性，它所属的实例是浏览器的History。
|
||||
|
||||
这个属性是做什么的？它用来控制我们在切换历史页面的时候，滚动条的位置会不会恢复到之前的位置。
|
||||
|
||||
|
||||
|
||||
如图所示，我们切换历史页面，又切换回最之前的页面，发现滚动条的位置依然保持底部，也就是之前的位置。
|
||||
|
||||
什么是切换历史页面，从操作上来讲就是点击浏览器的回退（有的浏览器长按回退键会弹出历史的前面多个页面供选择）、前进按钮
|
||||
|
||||
从代码上来讲就是执行下面的这些操作：
|
||||
|
||||
```js
|
||||
history.back()
|
||||
history.forward()
|
||||
history.go(page) // page大于0，表示往后面翻对应的页数，反之则是往前翻对应的页数
|
||||
```
|
||||
|
||||
那么scrollRestoration这个属性与是否恢复滚动条的关系是什么？
|
||||
|
||||
scrollRestoration可选的值为auto和manual (如果浏览器支持这个属性，那么它默认是auto)
|
||||
|
||||
> scroll restoration mode, a scroll restoration mode, initially "auto". [HTML Standard](https://html.spec.whatwg.org/multipage/browsing-the-web.html#she-scroll-restoration-mode)
|
||||
|
||||
如果是auto：那么在切换历史页面的时候，滚动条会自动地恢复到切换之前的位置。
|
||||
|
||||
如果是manual：那么在切换页面的时候，滚动条会在顶部。
|
||||
|
||||
（上述的结果均在未手动修改state对应的滚动条位置的情况下）
|
||||
|
||||
## 属性的局限性
|
||||
|
||||
我之前觉得这个特性很好，但是为什么要单独地设置一个属性来控制是否要恢复到之前的滚动条位置呢？
|
||||
|
||||
在[History API - 滚动恢复 | Blog | Chrome for Developers](https://developer.chrome.com/blog/history-api-scroll-restoration)这篇文章中提到：
|
||||
|
||||
> This often means unsightly jumps as the scroll position changes automatically, and especially so if your app does transitions, or changes the contents of the page in any way. Ultimately this leads to an horrible user experience.
|
||||
> To make matters even worse there's very little you can do about it: Chrome triggers a `popState` event before the `scroll` event, which means you can read the current scroll position in `popState` and then reverse it in the `scroll` event handler with `window.scrollTo` (Ewww, but at least it works!). Firefox, however, triggers the `scroll` event *before* `popState`, so you have no idea what the old scroll value was in order to restore it. Bah!
|
||||
|
||||
翻译为中文：
|
||||
|
||||
> 这通常意味着当滚动位置自动改变时会出现难看的跳动，尤其是当你的应用程序进行过渡或以任何方式更改页面内容时。这最终会导致糟糕的用户体验。
|
||||
> 更糟的是，你几乎无能为力：Chrome 会在 scroll 事件之前触发 popState 事件，这意味着你可以在 popState 中读取当前的滚动位置，然后在 scroll 事件处理程序中使用 window.scrollTo 恢复滚动位置（呃，但至少它能工作！）。然而，Firefox 则是在 popState 事件之前触发 scroll 事件，所以你无法知道旧的滚动位置以便恢复它。唉！
|
||||
|
||||
总结一下就是，此文的作者认为这个属性会造成的两个缺点是：
|
||||
|
||||
1. 可能产生不太美观的跳跃：当滚动位置自动改变时，页面内容可能会突然跳动，尤其是在应用程序进行过渡或更改页面内容时，这会导致不好的用户体验。
|
||||
2. （在不开启这个属性的时候）非常难以人工地实现恢复滚动位置：由于不同浏览器在触发 popState 和 scroll 事件的顺序上存在差异（如 Chrome 和 Firefox），这使得在所有浏览器中一致地恢复滚动位置变得非常困难。
|
||||
|
||||
## 那么什么时候需要设置为manual？
|
||||
|
||||
参考上面的两个缺点来说，当满足以下的条件的时候，可以考虑设置为manual
|
||||
|
||||
1. 页面确实会产生了不太美观的跳跃
|
||||
2. 不在意历史的滚动条位置，同时更希望全部由手动控制滚动条位置的时候
|
||||
|
||||
## 参考的资料
|
||||
|
||||
[History: scrollRestoration property - Web APIs | MDN](https://developer.mozilla.org/en-US/docs/Web/API/History/scrollRestoration)
|
||||
|
||||
[HTML Standard](https://html.spec.whatwg.org/multipage/nav-history-apis.html#dom-history-scroll-restoration)
|
||||
100
src/content/post/编程/前端/浏览器/浏览器滚动恢复属性History.scrollRestoration.md
Normal file
100
src/content/post/编程/前端/浏览器/浏览器滚动恢复属性History.scrollRestoration.md
Normal file
@ -0,0 +1,100 @@
|
||||
---
|
||||
title: html | 浏览器滚动恢复属性History.scrollRestoration
|
||||
date: 2022-11-27T00:00:00.000Z
|
||||
author: KazooTTT
|
||||
tags:
|
||||
- history
|
||||
- html
|
||||
- scrollRestoration
|
||||
- 前端
|
||||
- 页面滚动
|
||||
slug: browser-scroll-restoration-property-historyscrollrestoration
|
||||
published: true
|
||||
description: >-
|
||||
在React新版官网的代码中，发现了一个名为History.scrollRestoration的属性，用于控制页面刷新或返回后是否恢复到原来的滚动位置。该属性有两个值：'auto'表示自动恢复到用户滚动到的位置，而'manual'则表示不恢复，用户需手动滚动到该位置。在React官网的实现中，针对Safari浏览器设置了'auto'，而其他浏览器则使用'manual'，以优化不同浏览器的用户体验。这一设置有助于避免在Safari浏览器中出现返回时的灰色屏幕问题，同时确保其他浏览器如Chrome和Firefox的用户体验。
|
||||
NotionID-notionnext: 7dc13064-8325-4aa3-bf45-5450c89e0223
|
||||
link-notionnext: >-
|
||||
https://kazoottt.notion.site/History-scrollRestoration-7dc1306483254aa3bf455450c89e0223
|
||||
rinId: 21
|
||||
finished: true
|
||||
category: 编程
|
||||
---
|
||||
|
||||
## 后续 2024-05-23
|
||||
|
||||
后来发现我被注释给欺骗了，虽然\_app.tsx里面说让nextjs设置scrollRestoration为manual，但是其实他们的项目中nextjs的scrollRestoration就是true。
|
||||
|
||||
与之前的注释不符...
|
||||
|
||||
```tsx
|
||||
useEffect(() => {
|
||||
// 取自StackOverflow。试图检测Safari桌面版和移动版。
|
||||
const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent)
|
||||
if (isSafari) {
|
||||
// 这有点不真实。
|
||||
// 我们仍然依赖手动的Next.js滚动恢复逻辑。
|
||||
// 但是，我们*也*不希望在Safari的回退滑动手势期间出现灰屏。
|
||||
// 看起来启用自动恢复和Next.js逻辑同时使用似乎没有坏处。
|
||||
history.scrollRestoration = "auto"
|
||||
} else {
|
||||
// 对于其他浏览器，让Next.js将scrollRestoration设置为'manual'。
|
||||
// 这似乎对Chrome和Firefox更有效，因为它们没有动画回退滑动。
|
||||
}
|
||||
}, [])
|
||||
```
|
||||
|
||||
|
||||
|
||||
[Re-enable scroll restoration behind flag (#14046) · vercel/next.js@38bd1a0 · GitHub](https://github.com/vercel/next.js/commit/38bd1a024cb25923d8ea15f269a7294d073684d8)
|
||||
|
||||
# 浏览器滚动恢复属性History.scrollRestoration
|
||||
|
||||
[GitHub - reactjs/react.dev: The React documentation website](https://github.com/reactjs/react.dev)
|
||||
|
||||
最近在阅读 React 新版官网的代码时，发现在[\_app.tsx](https://github.com/reactjs/reactjs.org/blob/main/beta/src/pages/_app.tsx)中有这样一段代码。
|
||||
|
||||
```typescript
|
||||
useEffect(() => {
|
||||
// Taken from StackOverflow. Trying to detect both Safari desktop and mobile.
|
||||
const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent)
|
||||
if (isSafari) {
|
||||
// This is kind of a lie.
|
||||
// We still rely on the manual Next.js scrollRestoration logic.
|
||||
// However, we *also* don't want Safari grey screen during the back swipe gesture.
|
||||
// Seems like it doesn't hurt to enable auto restore *and* Next.js logic at the same time.
|
||||
history.scrollRestoration = "auto"
|
||||
} else {
|
||||
// For other browsers, let Next.js set scrollRestoration to 'manual'.
|
||||
// It seems to work better for Chrome and Firefox which don't animate the back swipe.
|
||||
}
|
||||
}, [])
|
||||
```
|
||||
|
||||
这里用到了我没有接触过的一个属性 History.scrollRestoration，发现这个属性是用来控制页面刷新或者返回后是否滚动到原来的位置。
|
||||
|
||||
[MDN 文档](https://developer.mozilla.org/zh-CN/docs/Web/API/History/scrollRestoration)
|
||||
|
||||
属性的值：
|
||||
|
||||
1. auto 将恢复用户已滚动到的页面上的位置。
|
||||
2. manual 未还原页上的位置。用户必须手动滚动到该位置。
|
||||
|
||||
在 mdn 文档中没有看到 auto 是默认值，但是自己手动验证以及在[google blog](https://developer.chrome.com/blog/history-api-scroll-restoration) 中提到：
|
||||
|
||||
> The good news is, however, that there's a potential fix: history.scrollRestoration. It takes two string values: auto, which keeps everything as it is today (and is its default value), and manual, which means that you as the developer will take ownership of any scroll changes that may be required when a user traverses the app's history.
|
||||
|
||||
所以 auto 确实是默认值没错。
|
||||
|
||||
## 举例
|
||||
|
||||
1. 如果 history.scrollRestoration = 'auto'; 自动回到原有位置。
|
||||
|
||||
|
||||
2. 如果 history.scrollRestoration = 'manual'; 回到顶部。
|
||||
|
||||
|
||||
## 在 react.dev (新版官网)中为什么要使用 manual
|
||||
|
||||
这是因为这个项目用的 next.js，涉及到 ssr，可能出现页面还没渲染完就滚动到了之前的位置。（待补充例子。）
|
||||
|
||||
可以看一下这篇文档[Next.js 中怎么保持页面的滚动位置](https://juejin.cn/post/7141235243326898213)
|
||||
27
src/content/post/编程/前端/禁止antd modal按下esc关闭弹窗.md
Normal file
27
src/content/post/编程/前端/禁止antd modal按下esc关闭弹窗.md
Normal file
@ -0,0 +1,27 @@
|
||||
---
|
||||
title: 禁止antd modal按下esc关闭弹窗
|
||||
date: 2024-10-15
|
||||
author: KazooTTT
|
||||
type: Post
|
||||
status: Published
|
||||
tags:
|
||||
- antd
|
||||
- 前端
|
||||
finished: true
|
||||
published: true
|
||||
category: 编程
|
||||
slug: antd-modal-esc-disabled
|
||||
description:
|
||||
---
|
||||
|
||||
参考地址：[Modal: option not to close with cancel key · Issue #22137 · ant-design/ant-design · GitHub](https://github.com/ant-design/ant-design/issues/22137)
|
||||
|
||||
解决方法：
|
||||
|
||||
设置modal的keyboard属性为false
|
||||
|
||||
在antd的modal的文档中也有提到：[对话框 Modal - Ant Design](https://ant-design.antgroup.com/components/modal-cn#api)
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
| -------- | ------------- | ------- | ---- | --- |
|
||||
| keyboard | 是否支持键盘 esc 关闭 | boolean | true | |
|
||||
50
src/content/post/编程/前端/网页页面在非输入的组件也出现闪烁的光标.md
Normal file
50
src/content/post/编程/前端/网页页面在非输入的组件也出现闪烁的光标.md
Normal file
@ -0,0 +1,50 @@
|
||||
---
|
||||
title: 前端页面在非输入的组件也出现闪烁的光标
|
||||
date: 2024-10-15T00:00:00.000Z
|
||||
author: KazooTTT
|
||||
tags:
|
||||
- bug
|
||||
- 前端
|
||||
- 浏览器
|
||||
finished: true
|
||||
published: true
|
||||
description: null
|
||||
slug: web-pages-also-have-a-flashing-cursor-on-non-input-components
|
||||
category: 编程
|
||||
---
|
||||
|
||||
## 错误现象
|
||||
|
||||
如图：
|
||||
|
||||
|
||||
|
||||
## 错误原因
|
||||
|
||||
开启了光标浏览
|
||||
|
||||
|
||||
|
||||
## 解决方法
|
||||
|
||||
方法一
|
||||
|
||||
按下F7取消光标浏览
|
||||
|
||||
方法二
|
||||
|
||||
如果你使用的是edge，打开浏览器设置，找到辅助功能-键盘-使用文本光标导航页面，取消启用该功能。
|
||||
|
||||
|
||||
|
||||
如果你使用的是google chrome,打开浏览器设置，找到无障碍-使用光标浏览器页面，取消启用该功能。
|
||||
|
||||
方法三 (不推荐)
|
||||
|
||||
``` css
|
||||
body {
|
||||
user-select: none;
|
||||
}
|
||||
```
|
||||
|
||||
这将导致所有的元素都不可以选择，会极大地降低使用体验
|
||||
49
src/content/post/编程/前端/运行npm run tsc报错.md
Normal file
49
src/content/post/编程/前端/运行npm run tsc报错.md
Normal file
@ -0,0 +1,49 @@
|
||||
---
|
||||
title: 运行npm run tsc报错
|
||||
date: 2024-10-15T00:00:00.000Z
|
||||
author: KazooTTT
|
||||
tags:
|
||||
- bug
|
||||
finished: true
|
||||
published: true
|
||||
description: null
|
||||
slug: npm-run-tsc
|
||||
category: 编程
|
||||
---
|
||||
|
||||
## 错误现象
|
||||
|
||||
``` bash
|
||||
> npm run lint:js && npm run prettier && npm run tsc
|
||||
|
||||
Checking formatting...
|
||||
All matched files use Prettier code style!
|
||||
npm error Missing script: "tsc"
|
||||
npm error
|
||||
npm error To see a list of scripts, run:
|
||||
npm error npm run
|
||||
npm error A complete log of this run can be found in: C:\Users\turbo\AppData\Local\npm-cache\_logs\2024-10-12T06_30_22_873Z-debug-0.log
|
||||
ELIFECYCLE Command failed with exit code 1.
|
||||
```
|
||||
|
||||
## 错误原因
|
||||
|
||||
虽然安装了tsc但是这里的写的是npm run tsc，也就是说package.json的script中的需要有tsc
|
||||
|
||||
## 解决方法
|
||||
|
||||
在package.json中添加：
|
||||
|
||||
```
|
||||
"scripts": {
|
||||
"tsc": "tsc"
|
||||
},
|
||||
```
|
||||
|
||||
如果有其他的配置需求可以在后面添加，例如
|
||||
|
||||
```
|
||||
"scripts": {
|
||||
"tsc": "tsc --noEmit"
|
||||
},
|
||||
```
|
||||
39
src/content/post/编程/计算机网络/如何清空dns缓存.md
Normal file
39
src/content/post/编程/计算机网络/如何清空dns缓存.md
Normal file
@ -0,0 +1,39 @@
|
||||
---
|
||||
title: 如何清空dns缓存
|
||||
date: 2024-02-26T00:00:00.000Z
|
||||
author: KazooTTT
|
||||
tags:
|
||||
- dns
|
||||
- 缓存
|
||||
- mac
|
||||
- ip
|
||||
finished: true
|
||||
published: true
|
||||
slug: how-to-clear-the-dns-cache
|
||||
description: >-
|
||||
本文介绍了如何在Mac和windows系统中清空DNS缓存和查看自己的IP地址。
|
||||
rinId: 76
|
||||
category: 编程
|
||||
---
|
||||
|
||||
# 如何清空dns缓存
|
||||
|
||||
## macos
|
||||
|
||||
如何清空dns缓存
|
||||
|
||||
``` shell
|
||||
sudo dscacheutil -flushcache
|
||||
```
|
||||
|
||||
mac如何获取自己的ip
|
||||
|
||||
``` shell
|
||||
ifconfig
|
||||
```
|
||||
|
||||
## windows
|
||||
|
||||
``` shell
|
||||
ipconfig /flushdns
|
||||
```
|
||||
Reference in New Issue
Block a user