Commit书写规范

当日所学

背景

git提交的commit的书写之前比较随意，看到了一个规范：

约定式提交

我顺便总结了一下，自己以后可以选用。

总体规范

1
2
3
4
5
<type>[optional scope]: <description>

[optional body]

[optional footer(s)]

详细解释：

Type：

  1. fix: 类型 为 fix 的提交表示在代码库中修复了一个bug。
  2. feat: 类型 为 feat 的提交表示在代码库中新增了一个功能。
  3. build: 用于修改项目构建系统，例如修改依赖库、外部接口或者升级 Node 版本等；
  4. chore: 用于对非业务性代码进行修改，例如修改构建流程或者工具配置等；
  5. ci: 用于修改持续集成流程，例如修改 Travis、Jenkins 等工作流配置；
  6. docs: 用于修改文档，例如修改 README 文件、API 文档等；
  7. style: 用于修改代码的样式，例如调整缩进、空格、空行等；
  8. refactor: 用于重构代码，例如修改代码结构、变量名、函数名等但不修改功能逻辑；
  9. perf: 用于优化性能，例如提升代码的性能、减少内存占用等；
  10. test: 用于修改测试用例，例如添加、删除、修改代码的测试用例等。
More...

常用工具类方法总结

资料总结

from: https://submara.com/posts/utils/

存储localStorage

1
2
3
4
5
6
7
export const setStorage = (name, content) => { 
 if (!name) return;  
 if (content) {    
		 content = JSON.stringify(content);  
 }  
 window.localStorage.setItem(name, content);
};

获取localStorage

1
2
3
4
5
6
7
8
9
export const getStorage = name => {
  if (!name) return;  
  const data = window.localStorage.getItem(name);  
  if (data) {    
	  return JSON.parse(data);  
	} else {
	    return null;  
	}
};
More...

如何减少不必要的状态更新

当日所学

背景

有一个时间块应用，当前是用zustand创建的store保存状态，目前都放在一个大的map里，但目前的问题是由于每个日期要保存状态，导致网页频繁刷新。

解决方法

1. 减少不必要的状态更新

确保只有必要的状态变化时才触发重新渲染。使用 Zustand 的选择器（selector）来订阅特定的状态，而不是整个 store。

2. 使用 memoization

在 React 组件中使用 React.memo 和 useMemo 来减少不必要的重新渲染。

3. 使用局部状态

对于不需要全局管理的状态，尽量使用组件的局部状态（useState）。这可以减少全局状态更新带来的渲染压力。

4. 优化数据结构

将日期对应的状态存储在一个嵌套的对象结构中，而不是一个大的 map。这样可以通过深度比较来减少不必要的渲染。

More...

Built Portfolio Page - 8 (Skills Component)

日常练习

Steps:

  1. Add Skills Component
  2. Add margin bottom in Projects.tsx
  3. Add css to skill component
  4. Add hook
  5. Add animation

1. Add Skills Component

Add src/components/Skills.tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
import React from 'react'
import SectionHeading from './Section-heading'
import { skillsData } from '@/libs/data'

export default function Skills() {
  return (
    <section>
      <SectionHeading>My skills</SectionHeading>
      <ul>
        {
          skillsData.map((skill,index)=>(
            <li key={index}>{skill}</li>
          ))
        }
      </ul>
    </section>
  )
}

More...

背单词提示词

有趣资源

背景

背单词总是背不下来，缺少相关背景，可以利用下面的提示词给GPT提问

提示词

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
下面我将输入英文单词或词组，请按下面格式返回，看懂了回答“明白了”：
# [用户输入的单词]
- 基本释义：确保标题清晰突出，音标准确（美式与英式），并提供简洁明了的中文释义。
---
### 记忆方法
在以下记忆方法旁，请随机选择一个emoji图标进行标记，以增强学习的趣味性和视觉记忆。
1. 方法一：[描述]
2. 方法二：[描述]
3. 方法三：[描述]
4. 场景记忆法：将单词放入一个具体的日常生活场景中，帮助形成更加鲜明的记忆印象。
5. 动作记忆法：为每个单词创造一个特定的动作，通过动作帮助记忆单词。
6. 情感联结法：将单词与个人的情感经历或感受联系起来，通过情感经历加深记忆。
7. 分组分类法：将学习的单词按主题或类别分组，帮助大脑更有效地组织和记忆信息。
- 词根词源：[如果有]
---
### 常用词组
选择与日常生活和学习贴近的词组，以增加其实际应用的可能性。
| 词组 | 使用场景说明 |
|---|---|
| 词组1 | 场景说明 |
| 词组2 | 场景说明 |
| 词组3 | 场景说明 |
| 词组4 | 场景说明 |
---
### 联想记忆
- 近义词：[列表]
- 反义词：[列表]
- 联想词：[列表]
- 同根词：[列表]
- 反义连词：[列表]
- 形近词：[列表]
- 情态词汇：[列表]
- 反义连词：[列表]
---
### 台词记忆
选择富有画面感和情感色彩的电影台词，使记忆过程更加有趣。
> "英文台词" - 电影名
中文翻译
---
### 结合记忆宫殿
尝试将单词与个人经历或熟悉的地点结合，创建更个性化的记忆桥梁。
- 中英结合短句1：[描述]
- 中英结合短句2：[描述]
- 中英结合短句3：[描述]
More...

如何用Prisma为数据库添加初始化数据

日常练习

背景

到目前为止，数据库还是为空的，因此，我们需要创建一个种子脚本，填充一些初始数据进入数据库，有些初始数据是程序必不可少的，比如货币语言信息等，有时候开发需要重置数据库，因此为数据库播种也很有必要。

首先，创建一个名为prisma/seed.ts。 然后粘贴以下模板代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
import { PrismaClient } from "@prisma/client";
// 初始化 Prisma Client
const prisma = new PrismaClient();

async function main() {
  //在此编写 Prisma Client 查询
}

main()
  .catch((e) => {
    console.error(e);
    process.exit(1);
  })
  .finally(async () => {
    // 关闭 Prisma Client
    await prisma.$disconnect();
  });

为了能够让 nodejs 运行 typescript，我们需要安装ts-node

1
npm i -D ts-node

然后在 tsconfig.json 中指定输出格式为 commonjs

1
2
3
4
5
6
7
{
  "ts-node": {
    "compilerOptions": {
      "module": "commonjs"
    }
  }
}

接下来，我们在 main 函数中创建一个用户:

1
2
3
4
5
6
7
8
9
10
11
async function main() {
  const user = await prisma.user.create({
    data: {
      name: "小马",
      avatar:
        "https://p3-passport.byteimg.com/img/user-avatar/585e1491713363bc8f67d06c485e8260~100x100.awebp",
    },
  });
  console.log(user)
}

执行命令

1
npx ts-node ./prisma/seed.ts

请我喝杯咖啡吧~

支付宝
微信