mirror of
https://github.com/Sevichecc/Urara-Blog.git
synced 2025-04-30 04:29:30 +08:00
new post
This commit is contained in:
SevicheCC
parent
bb907ba1fc
commit
5612fc5cea
99 changed files with 13058 additions and 14 deletions
|
|
@ -25,6 +25,6 @@ My Tech Blog, base on [Urara](https://github.com/importantimport/urara)
|
|||
- [ ] NeoDB component
|
||||
- [ ] ...
|
||||
|
||||
### License:
|
||||
### License
|
||||
|
||||
[CC BY-NC-SA 4.0](https://creativecommons.org/licenses/by-nc-sa/4.0/)
|
||||
© 2024 Sevi.C All Rights Reserved.
|
||||
|
|
|
|||
|
|
@ -52,14 +52,6 @@ export const friends: Friend[] = [
|
|||
title: '野生栗子🌰',
|
||||
link: 'https://blog.chestnut.monster/'
|
||||
},
|
||||
{
|
||||
id: 'summerblue',
|
||||
rel: 'friend',
|
||||
name: '夏诤',
|
||||
title: 'SummberBlue',
|
||||
link: 'https://blog.summerrrrrr.blue',
|
||||
descr: '早睡早起身体好'
|
||||
},
|
||||
{
|
||||
id: 'loikin',
|
||||
rel: 'friend',
|
||||
|
|
|
|||
|
|
@ -128,7 +128,7 @@ export const footer: FooterConfig = {
|
|||
link: '/privacy'
|
||||
}
|
||||
],
|
||||
html: '<a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY-NC-SA 4.0</a>',
|
||||
html: '@Sevi.C All Rights Reserved.',
|
||||
since: '2021'
|
||||
}
|
||||
|
||||
|
|
|
|||
132
urara/2021-11-08-ux1/+page.md
Normal file
132
urara/2021-11-08-ux1/+page.md
Normal file
|
|
@ -0,0 +1,132 @@
|
|||
---
|
||||
title: Overview of User Experience Design
|
||||
summary: Introduction to User Experience Design｜Week1
|
||||
created: 2021-11-08T10:54:40+08:00
|
||||
# categories:
|
||||
# - UX学习笔记
|
||||
# - Introduction to User Experience Design
|
||||
tags:
|
||||
- UX
|
||||
---
|
||||
|
||||
## 课程简介
|
||||
|
||||
这是一门在 [Coursera](https://www.coursera.org/learn/user-experience-design) 上的 UX 课程，共有五个星期的内容，讲了 UX 的基本概念和实际操作流程，主要侧重用户研究方面，也讲了很多和设计心理学有关的内容，很适合 UX 入门。
|
||||
|
||||
我将按照课程内容的划分，分别发布五个 weeks 的笔记，这是第一篇。
|
||||
|
||||
原笔记是在 Notion 上写的，我喜欢用 Notion 里面的 toggle 效果，用“提问”-“答案”的形式来启发思考，但是博客这里用折叠文本比较麻烦，所以直接列出来了
|
||||
|
||||
## Week 1 笔记
|
||||
|
||||
### 什么是 ux？
|
||||
|
||||
> User Experience design is design that is user centered。The goal is to design artifacts that allow the users to meet their needs in the most effective efficient and satisfying manner。
|
||||
>
|
||||
> **以用户为中心的设计。目标是轻松高效地满足用户的需求。**
|
||||
|
||||
### 用户体验设计的核心概念
|
||||
|
||||
> “用户使用界面来完成任务”
|
||||
|
||||
通过理解用户以及他们要完成的任务，以便设计出最好的界面 (interface)
|
||||
|
||||
### 什么是用户
|
||||
|
||||
这里的“用户”是指使用一些技术来达到目的的个体
|
||||
|
||||
### 什么是界面
|
||||
|
||||
有输入、输出、系统，于此同时，每个输入都会导致一个期望的输出：
|
||||
|
||||
个人使用界面的能力与个人特征、群体、社会有关
|
||||
|
||||
|
||||
### 用户体验设计的目标
|
||||
|
||||
|
||||
|
||||
**设计“能用”并且“好用”的界面**
|
||||
|
||||
- “**能用**”的意思是：它可以让用户完成一个任务。在图中，这个系统 (S) 就产生了期望的成果 (Output)
|
||||
- “**好用**”的意思是：用户可以有效高效甚至满意地达成这项任务。在我们的图表中，这需要轻松快速地输入 (Input) 并且输出 (Output) 的结果有效的完成了任务
|
||||
|
||||
### 界面设计环 (四个步骤)
|
||||
|
||||
|
||||
|
||||
#### Step1：Requirements Gathering 收集需求
|
||||
|
||||
- Understanding the user and what her goals are，What are the current practices
|
||||
- This step can also be thought of as understanding the**“problem space”**- what is hindering the completion of the task how can the task or process be improved
|
||||
- A whole host of techniques are presented that allow the designer to collect data about the user，her goals and current practices
|
||||
|
||||
#### Step 2：Design Alternatives 设计方案
|
||||
|
||||
- Once you understand the users，their goals，and their current practices (e.i., the problem space) you are able to take this data and **develop various design options** that will improve the user experience
|
||||
|
||||
#### Step 3：Prototyping 原型
|
||||
|
||||
- Techniques for modeling the novel designs before a final version is produced
|
||||
|
||||
#### Step 4：Evaluation 评估测试
|
||||
|
||||
- A set of techniques for ascertaining that your design meets the needs of the user
|
||||
|
||||
### 什么样的界面是“实用”的？
|
||||
|
||||
“实用性”指的是有效、高效并且让用户觉得满意的。
|
||||
|
||||
> 如果用户能够理解怎样的输入 (Input) 会带来所需的输出 (Output) 那么这个界面就是实用的
|
||||
|
||||
### 好设计的三个特征
|
||||
|
||||
|
||||
|
||||
#### 1 - Affordance (示能)
|
||||
|
||||
> 指一个物理对象与人之间的关系
|
||||
>
|
||||
> (无论是动物还是人类，甚至机器和机器人，他们之间发生的任何交互作用)
|
||||
|
||||
是指可以感知到的事物的实际属性，主要是那些决定事物如何被使用的基本属性 (看看你的智能手机，我们会看到很多种功能，例如按键，可以感知到可以被按。)
|
||||
|
||||
#### 2 - Signifiers (意符)
|
||||
|
||||
> 能告诉人们正确操作方式的任何可感知的标记或声音。
|
||||
|
||||
示能决定可能进行哪些操作，意符则点名操作的位置。
|
||||
|
||||
#### 3 - Feedback (反馈)
|
||||
|
||||
> 一些让你知道系统正在处理你的要求的方式
|
||||
|
||||
反馈需要将用户信息发送回来其中包括哪些系统输入的信息已发生它跟我们沟通操作结果
|
||||
|
||||
- 输入：示能、意符
|
||||
- 输出：示能
|
||||
|
||||
### 如何与“用户”接洽
|
||||
|
||||
注意礼貌、着装
|
||||
|
||||
#### 三个步骤
|
||||
|
||||
**1 - 介绍**
|
||||
|
||||
- 简要概述目标
|
||||
- 坦率：让用户知道该会话的目标是什么。询问他们坦率的意见。
|
||||
- 保密：说明交互内容是保密的。
|
||||
- 自愿：在介绍期间，向用户解释他们的参与完全是自愿的。他们可以随时停止参与。如果他们希望停止参与，这不会消极地影响他们与你的公司或机构的关系。这一部分是很重要的，它能让用户放心并能够不受约束，因为你可能代表一个在社区中具有较高知名度的实体
|
||||
- 开放：让他们知道，没有正确或错误的答案，他们应该简单直接地向你提供反馈和意见
|
||||
|
||||
**2 - 交流**
|
||||
|
||||
- 中立态度、语气轻松专业。
|
||||
- 如果形式允许，鼓励详细阐述意外或有趣的信息
|
||||
- 保持对交流过程的控制，尽量覆盖所有话题
|
||||
|
||||
**3 - 结束**
|
||||
|
||||
- 在会话结束时，提醒他们有关交互的目标和您打算如何处理他们提供的数据。
|
||||
- 询问他们是否还有需要补充的内容。
|
||||
407
urara/2021-11-09-ux2/+page.md
Normal file
407
urara/2021-11-09-ux2/+page.md
Normal file
|
|
@ -0,0 +1,407 @@
|
|||
---
|
||||
title: Requirement Gathering
|
||||
summary: Introduction to User Experience Design｜Week2
|
||||
created: 2021-11-09T22:26:49+08:00
|
||||
categories:
|
||||
- UX学习笔记
|
||||
- Introduction to User Experience Design
|
||||
tags:
|
||||
- UX
|
||||
---
|
||||
|
||||
## **Overview**
|
||||
|
||||
- **设计流程的第一步**
|
||||
|
||||
了解用户当前是如何完成任务的
|
||||
|
||||
- **需求收集的目标是什么？**
|
||||
|
||||
理解问题域
|
||||
|
||||
- **问题域（problem space)包含什么？**
|
||||
|
||||
1. 谁是我们的用户
|
||||
2. 什么时候使用产品、在什么地点、为什么、以及他们当前如何实现目标任务
|
||||
3. 用户所认为的当前存在的问题是什么
|
||||
4. 以及用户自己关于如何改进任务流程的心愿清单
|
||||
|
||||
- **需求收集的陷井**
|
||||
|
||||
设计师可能会直接开始设计可供选择的设计品，尽管他们尚未完全了解任务，用户以及用户如何实现任务 换句话说，他们急于直奔主题了 他们在没有取得用户数据的基础上就开始设计了
|
||||
|
||||
- **设计是一个系统性的数据驱动的过程**
|
||||
|
||||
## **Types of Users and Types of Data**
|
||||
|
||||
### 数据类型
|
||||
|
||||
#### 定量
|
||||
|
||||
- 定量数据可以被认为是可以用数字转录的数据， 比如调查数据（用户年龄、性别等等）
|
||||
- 定量分析是依据统计数据，建立数学模型，并用数学模型计算出分析对象的各项指标及其数值的一种方法。
|
||||
|
||||
#### 定性
|
||||
|
||||
- 定性数据更容易被认为是为我们提供专题的信息，可放到叙事语境中（如问卷中的开放性问题）
|
||||
- 定性分析则是主要凭分析者的直觉、经验，凭分析对象过去和现在的延续状况及最新的信息资料，对分析对象的性质、特点、发展变化规律作出判断的一种方法。
|
||||
|
||||
> 设计师通常结合使用两种数据，这种方法称为 _混合方法（Mixed method approach)_
|
||||
|
||||
### 将用户视为利益相关者的三个类型
|
||||
|
||||
**1.主要 Primary**
|
||||
|
||||
主要利益相关者是直接使用设计的人员。这些是设计者最常与之互动的用户，他们被称为**最终用户**
|
||||
|
||||
**2.二级 Secondary**
|
||||
|
||||
不直接使用设计，但可以**间接地使用**，因为他们从中可得到某种输出
|
||||
|
||||
**3.三级 Tertiary**
|
||||
|
||||
可能根本不使用设计 ，但**直接受设计的影响**， 无论是消极还是积极的方式
|
||||
|
||||
### 了解利益相关者的意义
|
||||
|
||||
> 考虑二级和三级利益相关者，也可以帮助我们创造具有创新性的设计，并为我们的客户提供竞争优势。从这个意义上讲了解利益相关者会带来更好的用户体验设计
|
||||
|
||||
## **Discovery Technique Overview**
|
||||
|
||||
### 四种调研方法
|
||||
|
||||
1. 自然观察 (Naturalistic observation)
|
||||
2. 问卷法( Surveys)
|
||||
3. 焦点小组( Focus groups)
|
||||
4. 访谈 (Interviews)
|
||||
|
||||
### 交互程度
|
||||
|
||||
|
||||
|
||||
### 进行的场景
|
||||
|
||||
|
||||
|
||||
### 在设计周期中迭代
|
||||
|
||||
|
||||
|
||||
## **Naturalistic Observation 自然观察**
|
||||
|
||||
### 是什么
|
||||
|
||||
是在用户自己的环境中，观察用户的行为，不需要询问用户何时何地以及怎样完成既定任务的 设计师会亲自到用户完成任务的地点，并观察他们的行为。
|
||||
|
||||
### 如何做
|
||||
|
||||
- 预期计划
|
||||
- 实地进行
|
||||
- 过程中设计师与用户无交谈
|
||||
|
||||
### 数据
|
||||
|
||||
定性、定量
|
||||
|
||||
### 优点
|
||||
|
||||
- 直接观察用户的行为，随时随地收集数据
|
||||
- 用户的行为习惯真实自然，不受设计师主观影响
|
||||
|
||||
### 缺点
|
||||
|
||||
- **数据收集受设计师主观影响。**
|
||||
|
||||
设计师所收集到的数据，局限于他们个人的收集方式和理解方式。无法核实设计师做出的 假设正确与否
|
||||
|
||||
- **停留表面，看不到深层原因。**
|
||||
|
||||
我们并不知道为什么 用户采取这样的方式完成任务
|
||||
|
||||
### 道德局限
|
||||
|
||||
需要注意用户隐私、匿名化
|
||||
|
||||
### 在设计流程中
|
||||
|
||||
> 基于收集到的数据，进行下一步调研，如问卷、焦点小组等，使问题域更聚焦，探寻真正的问题所在，解释用户行为的原因
|
||||
|
||||
## **Survey 问卷**
|
||||
|
||||
### 是什么
|
||||
|
||||
- 问卷调查的目的是了解用户的观点。
|
||||
- 最常见的是让用户自我报告他们的行为、主观感觉、态度和感受。我们也可以获取他们对于他人的看法
|
||||
|
||||
### 如何做
|
||||
|
||||
- 实地、实验室
|
||||
- 几乎不需要直接和用户交流
|
||||
- 形式：纸质问卷、电子问卷、面对面调查
|
||||
|
||||
### 数据
|
||||
|
||||
#### 1.定性-封闭性问题
|
||||
|
||||
**Closed-ended questions**
|
||||
|
||||
- **顺序回答**
|
||||
- **二分型问题 (dichotomous )**
|
||||
是/否
|
||||
- **李克特评分 (likert scales)**
|
||||
评分 1-5
|
||||
- **排序 (rank)**
|
||||
如按照喜好程度排序
|
||||
- **乱序回答**
|
||||
- 给用户呈现了一系列的问题,这些问题并没有逻辑顺序
|
||||
- 例如，人种学问卷：如性别、 教育程度或者是一些列举项，供用户勾选适用于他们的选项
|
||||
|
||||
#### 2.定量-开放性问题
|
||||
|
||||
**Open-ended questions**
|
||||
|
||||
目的是获取用户简短的回答，包括他们的观点、偏好、态度等
|
||||
|
||||
### 优点
|
||||
|
||||
- 高效收集数据
|
||||
- 数据易于分析
|
||||
|
||||
### 缺点
|
||||
|
||||
- 信息表面化，不能提供深入洞察
|
||||
- 回忆偏倚、社会称许性偏见和样本偏差
|
||||
|
||||
### 在设计流程中
|
||||
|
||||
|
||||
|
||||
## **Focus group 焦点小组**
|
||||
|
||||
### 是什么
|
||||
|
||||
- 目的是让用户参与直接对话
|
||||
- 焦点小组在可控的环境中进行，通常是一个房间 在这个充满隐私性的房间里 用户可以自由地分享和讨论自己的观点
|
||||
- 焦点小组能够与参与者产生高度互动，这种程度高于 问卷调查，但是低于采访
|
||||
|
||||
### 如何做
|
||||
|
||||
#### 组成
|
||||
|
||||
- **用户**
|
||||
- 5-10 个用户
|
||||
- 这些用户应能够代表设计师所关注的用户群体
|
||||
- **设计团队**
|
||||
|
||||
**1. 主持人**
|
||||
|
||||
- 一个训练有素的主持人 他负责组织用户讨论的话题
|
||||
- 主持人必须非常擅长深入挖掘，在讨论过程中出现的有价值的主题。但同时也要引导用户的讨论 使之覆盖所需要的主题范围
|
||||
|
||||
**2. 记录员**
|
||||
|
||||
- 负责记录用户和主持人之间的谈话要点
|
||||
|
||||
**3. 媒介记录员（可选）**
|
||||
|
||||
- 使用录音或者 录像设备进行记录
|
||||
|
||||
- **流程**
|
||||
|
||||
|
||||
|
||||
### 数据
|
||||
|
||||
- **定性**
|
||||
|
||||
- 对话过程中记录员写下的一系列笔记
|
||||
- 完整的焦点小组对话脚本
|
||||
- 对焦点小组的分析
|
||||
|
||||
- **定量**
|
||||
|
||||
- 可能会在焦点小组一开始进行收集 （例如收集用户的人种学统计信息，或者捕捉关于用户态度的原始问卷调查信息，以及用户对于目标话题的观点）
|
||||
- 主持人应当善于运用这些数据快速开始对话
|
||||
|
||||
### 优点
|
||||
|
||||
- 能够在短时间内收集到关于所感兴趣话题的海量数据
|
||||
- 充满活力的小组讨论 或许能够激发出不一样的结果 这些结果是一对一访谈无法得到的
|
||||
|
||||
### 缺点
|
||||
|
||||
- 需要设计团队去执行
|
||||
- 数据收集的质量依赖主持人水平
|
||||
- 群体思维
|
||||
|
||||
### 在设计流程中
|
||||
|
||||
|
||||
|
||||
- 设计流程中的高潮，应在进行其他与用户交互较少的调研方法后使用（如自然观察、问卷
|
||||
- 在焦点小组之后，设计师或许需要采访其他的用户 目的是获取更多关于焦点小组中发现的有趣话题的信息
|
||||
|
||||
## **Interviews**
|
||||
|
||||
### 是什么
|
||||
|
||||
目的是深度收集用户信息
|
||||
|
||||
### 如何做
|
||||
|
||||
- 实地、实验室
|
||||
- 足够的隐私程度 以确保用户可以自如地回答问题
|
||||
|
||||
### 数据
|
||||
|
||||
定性>定量
|
||||
|
||||
- **定性**
|
||||
- 设计师所作的一系列访谈笔记
|
||||
- 访谈记录的系统性分析
|
||||
- **定量**
|
||||
- 可以在访谈的开始进行收集
|
||||
- 可以以简短问卷的形式进行（它可以用来迅速获取人种学信息，或者 快速了解用户对于访谈话题的态度，访谈者可以利用这些信息开始访谈环节）
|
||||
|
||||
### 优点
|
||||
|
||||
- 与用户一对一访谈（深度访谈）
|
||||
- 灵活的采访提纲
|
||||
|
||||
### 缺点
|
||||
|
||||
- 需要熟练的采访者
|
||||
> 需要知道用户将会继续说什么，以及 何时控制不再提供价值的对话。 采访者的技能在保持融洽关系方面也很重要, 这种关系应该是既灵活又平衡的。 它使用户舒适, 足以提供诚实的意见 但不能太舒适 而导致用户想用采访者的反应来取悦她。
|
||||
- 数据的收集和分析耗时
|
||||
- 定性数据分析费力
|
||||
|
||||
### 在设计流程中
|
||||
|
||||
|
||||
|
||||
- 据收集策略达到极点时，访谈最有用。
|
||||
|
||||
- 这意味着当问题得到很好的理解时， 设计人员在需求收集流程中处于关键位置， 需要的是用户最终的澄清或见解。
|
||||
|
||||
## **User Results 用户数据处理**
|
||||
|
||||
> 假设：已对定性和对定量数据进行了适当的分析
|
||||
|
||||
### 描述性统计信息
|
||||
|
||||
**Descriptive statistics**
|
||||
|
||||
描述性统计允许我们总结定量信息 这包括数据集的范围、平均值和中值
|
||||
|
||||
1. 范围
|
||||
2. 平均值
|
||||
3. 中值 （减少极端数据的影响）
|
||||
|
||||
### 用户特征表
|
||||
|
||||
**User characteristics table**
|
||||
|
||||
特征表以简单的形式提供了我们所有数据的快速总结，包括定量数据和定性数据
|
||||
|
||||
|
||||
|
||||
### 人物画像 Persona
|
||||
|
||||
## **Presenting Task Findings**
|
||||
|
||||
### Scenario
|
||||
|
||||
场景
|
||||
|
||||
> 场景使得我们能**了解用户如何使用系统。**
|
||||
|
||||
|
||||
|
||||
#### 是什么
|
||||
|
||||
场景提供了定性和定量数据的描述。
|
||||
|
||||
#### 作用
|
||||
|
||||
- 使我们有机会传达我们在故事线中 收集数据的丰富性
|
||||
- 故事线会突出所有任务的重要方面以及目前如何完成任务。
|
||||
- 它让任务变的真实,超越了 枯燥的数据图表和表格
|
||||
|
||||
### Essential Case Study
|
||||
|
||||
基本案例场景
|
||||
|
||||
> 帮助理解 **用户的活动以及系统的要求**。
|
||||
|
||||
|
||||
|
||||
#### 三个要素
|
||||
|
||||
**1.用户的目标**
|
||||
|
||||
- 首先,它用户的目标进行命名。 这捕捉到了 X 的哪些方面。
|
||||
- 在本例中 用户可能想知道她去西印度群岛是否需要签证。
|
||||
|
||||
**2. 用户意向**
|
||||
|
||||
- 她进入系统需要进行的一系列步骤。
|
||||
|
||||
**3.系统的责任**
|
||||
|
||||
- 用户完成每个步骤后系统必须执行的操作。
|
||||
- 所以在这里,用户首先要找到 签证要求然后系统请求获得目的地和国籍。 一旦用户提供所需信息 系统将获得相应的签证等信息。
|
||||
|
||||
### Hierarchical Task Analysis
|
||||
|
||||
分层任务分析
|
||||
|
||||
> 最常见的任务分析技术。 使我们考虑**用户当前如何完成任务**。关键点是**可观察的行为**。
|
||||
|
||||
|
||||
|
||||
- 简单的形式就是一个**大纲**。
|
||||
- 从目标开始。 并对目标中的每个主要步骤进行**编号**。 其中一些步骤包含必须先完成的小步骤 然后才能继续下一步 这项技术是关于用户目标的。
|
||||
- 与基本案例不同。 我们**没有考虑航空公司系统**需要在每个用户步骤中做什么。
|
||||
- 另外请注意， 我没有将一些系统交互任务列入， 比如使用滚动条。 这**只是与用户和完成目标的步骤有关。**
|
||||
|
||||
### Current UI Critique
|
||||
|
||||
当前 UI 评估
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
- 需要与 UI 进行真实交互。
|
||||
- 系统地分析当前正在使用的界面。 你要确认你明确地传达出需求被满足以及 为了改善用户体验你能做的事情。
|
||||
|
||||
#### 步骤
|
||||
|
||||
**1.确定用户任务**
|
||||
|
||||
对于每个 UI 对应的每个 UI ，你想要确定任务或者用户使用的目的是什么
|
||||
|
||||
**2. 测定任务完成时间**
|
||||
|
||||
要客观的测定所需时间去 响应这个客户提交的任务
|
||||
|
||||
在这个例子中 我选择了一些点击，它会让我使用这个应用程序，或者网站，或者通过终端完成任务。
|
||||
|
||||
**3. 评估操作**
|
||||
|
||||
**4. 改进方法**
|
||||
|
||||
## **相关资源**
|
||||
|
||||
Resources for Requirement Gathering
|
||||
|
||||
1. [25 Useful Brainstorming Techniques](http://personalexcellence.co/blog/brainstorming-techniques/)
|
||||
2. [Non-Functional Requirements - Minimal Checklist](http://leadinganswers.typepad.com/leading_answers/2009/03/nonfunctional-requirements-minimal-checklist.html)
|
||||
3. [Differentiating between Functional and Nonfunctional Requirements](http://searchsoftwarequality.techtarget.com/answer/Differentiating-between-Functional-and-Nonfunctional-Requirements)
|
||||
4. [Facilitated Brainstorming](http://www.usabilityfirst.com/usability-methods/facilitated-brainstorming/)
|
||||
5. [5 powerful ways to brainstorming with teams/](http://blog.abovethefolddesign.com/2010/11/11/5-powerful-ways-to-brainstorming-with-teams/)
|
||||
6. [ips for Structuring Better Brainstorming Sessions](http://www.inspireux.com/2013/07/18/tips-for-structuring-better-brainstorming-sessions/)
|
||||
7. [Collaborative Brainstorming for Better UX Workshop](http://www.slideshare.net/jessicaivins/aiga-cincy-uxworkshop01)
|
||||
8. [WHAT IS AN AFFINITY DIAGRAM?](http://asq.org/learn-about-quality/idea-creation-tools/overview/affinity.html)
|
||||
9. [Affinity Diagrams](https://www.mindtools.com/pages/article/newTMC_86.htm)
|
||||
10. [Affinity diagramming](http://infodesign.com.au/usabilityresources/affinitydiagramming/)
|
||||
111
urara/2021-11-14-ux3/+page.md
Normal file
111
urara/2021-11-14-ux3/+page.md
Normal file
|
|
@ -0,0 +1,111 @@
|
|||
---
|
||||
title: Design Alternatives
|
||||
summary: Introduction to User Experience Design｜Week3
|
||||
created: 2021-11-14T11:18:45+08:00
|
||||
categories:
|
||||
- UX学习笔记
|
||||
- Introduction to User Experience Design
|
||||
tags:
|
||||
- UX
|
||||
lastmod: 2022-04-16T12:56:27.924Z
|
||||
---
|
||||
|
||||
## Review of Design Goals 审查设计目标
|
||||
|
||||
### 用户体验的核心目标
|
||||
|
||||
> "用户使用界面来完成任务 "
|
||||
>
|
||||
> 通过理解用户以及他们要完成的任务 以便设计出最好的界面(interface)
|
||||
|
||||
前提是，最好的界面 只能在我们了解用户和他们想要完成的任务之后才能被设计出
|
||||
|
||||
### 设计的定义
|
||||
|
||||
> 一种创新的开发用来满足一些需求。
|
||||
|
||||
### 设计的目标
|
||||
|
||||
- 要比现有的设计更好地满足用户的需要
|
||||
- 不是为了新奇本身,而是为了服务和改善用户体验
|
||||
- 设计新的界面是为了**找到更好的方法来调解用户如何实现任务**。 它可能需要我们创建一个全新的系统。 或者,我们可以简单地设计出新的输入和输出。
|
||||
|
||||
### 设计时，需考虑的三个方面
|
||||
|
||||
|
||||
|
||||
- **个人层面 individual**
|
||||
- 考虑用户特征。 这些包括用户的年龄,教育水平,和对科技的适应程度，
|
||||
- 考虑用户之间的差异。
|
||||
- **群体 group**
|
||||
- 考虑用户之间的交互（一组用户）
|
||||
- **社会 society**
|
||||
- 文化事件会影响系统的使用 和采纳情况。
|
||||
- 我们需要了解与用户所从事的任务相关的文化价值观， 并在设计时考虑这些问题
|
||||
|
||||
## **Design Alternatives 设计替代方案**
|
||||
|
||||
### 目标
|
||||
|
||||
开发一个比现在更能满足用户需求的界面（基于设计的问题空间)
|
||||
|
||||
### 关键
|
||||
|
||||
使用屏幕实践将设计基础概念化
|
||||
|
||||
### Road map 路线
|
||||
|
||||
- **能用 useful**
|
||||
|
||||
- **目标**
|
||||
|
||||
改善用户完成目标任务的能力
|
||||
|
||||
- **方法**
|
||||
|
||||
回顾第一阶段获得的数据 并且鉴别出用户的需求
|
||||
|
||||
1. **显性需求**
|
||||
|
||||
|
||||
|
||||
2. **隐形需求**
|
||||
|
||||
|
||||
|
||||
- **好用 usable**
|
||||
|
||||
- **目标**
|
||||
|
||||
以功能性和在第一阶段所发现的非功能性的需求为基础，使用户更加有效高效和满意 地完成任务，从而改善他们的用户体验
|
||||
|
||||
- **方法**
|
||||
|
||||
回顾第一阶段的数据，确定设计可替代品中功能性和非功能性的需求
|
||||
|
||||
|
||||
1. **功能性需求**
|
||||
|
||||
——面向用户的
|
||||
|
||||
系统应该完成的，这些基于用户所期望的系统功能
|
||||
|
||||
2. **非功能性需求**
|
||||
|
||||
——面向商家的
|
||||
|
||||
和系统开发有关的限制。它们也可以被看作质量特性（ 这些特性包含了许多或后端功能，比如安全性，可执行性，可维护性 但是他们也包括了前端功能货可用特性，像布局、流程或者甚至是语言本地化需求）
|
||||
|
||||
- **小组讨论**
|
||||
- 头脑风暴
|
||||
- 学生或设计师的个人特征， 也会影响到他们发现的需求
|
||||
- 在头脑风暴中，最重要的原则是打开思路，不要错过任何点子
|
||||
- 想法整理
|
||||
使用类同图表有助于把头脑风暴数据设计成流线型
|
||||
1. 参与者是设计师或与设计师相关的人
|
||||
2. 在各自的便贴纸上写下想法。
|
||||
3. 然后设计师收起这些纸条
|
||||
4. 并把他们按照相同程度组织起来，以一些典型的概念为导向。
|
||||
5. 之后设计师们来决定什么样的界面 可以满足所有的功能性的需求 一类或者一个同类的需求
|
||||
- **界面类型**
|
||||
|
||||
130
urara/2021-11-18-ux4/+page.md
Normal file
130
urara/2021-11-18-ux4/+page.md
Normal file
|
|
@ -0,0 +1,130 @@
|
|||
---
|
||||
title: Prototyping
|
||||
summary: Introduction to User Experience Design｜Week4
|
||||
created: 2021-11-18T21:26:41+08:00
|
||||
categories:
|
||||
- UX学习笔记
|
||||
- Introduction to User Experience Design
|
||||
tags:
|
||||
- UX
|
||||
---
|
||||
|
||||
## **关于 Prototyping**
|
||||
|
||||
### 什么是原型开发
|
||||
|
||||
- 原型开发可以被定义为一个新颖设计的早期模型
|
||||
- 通过原型来评估新设计的各个方面 并检查设计是否达到了预期的结果
|
||||
|
||||
### 原型开发的作用
|
||||
|
||||
- 经济（节约时间的金钱）
|
||||
- 快速构建、迭代
|
||||
|
||||
### 水平原型
|
||||
|
||||
|
||||
涵盖功能的广度，整合所含的功能（大概有什么）
|
||||
|
||||
### 垂直原型
|
||||
|
||||
|
||||
对一些特征进行深入的建模（多层级）
|
||||
|
||||
## **低保真 Lofi Prototype**
|
||||
|
||||
### 低保真和高保真的区别
|
||||
|
||||
- 低保真原型与最终设计几乎没有什么相似之处，无论是在形式或功能上（快速迭代、验证想法）
|
||||
- 高保真原型则与最终设计非常相似
|
||||
|
||||
### 注意事项
|
||||
|
||||
- 注重用户反馈
|
||||
- 也可以让利益相关者加入反馈过程
|
||||
- 避免完美主义，注重想法的表达和验证，关注核心路径
|
||||
|
||||
### 三种形式
|
||||
|
||||
#### 1. 草图
|
||||
|
||||
表明用户场景，痛点是怎么产生的（场景）
|
||||
|
||||
|
||||
#### 2. 故事版
|
||||
|
||||
|
||||
|
||||
- 一种以静态方式提供叙事的常用方法
|
||||
- 将设计放在上下文中，来考虑用户如何在给定的场景中使用我们的新设计。
|
||||
- 场景互动的迭代，简单的任务图形、场景互动
|
||||
|
||||
#### 3.卡片原型
|
||||
|
||||
|
||||
|
||||
- 表示我们与实际界面可能发生的交互序列。
|
||||
- 使用一组索引卡。逐一代表一个用户在尝试完成任务时，会遇到的一序列屏幕。
|
||||
|
||||
## **其他原型方式**
|
||||
|
||||
### 绿野仙踪/奥茨法师
|
||||
|
||||
_Wizard of Oz_
|
||||
|
||||
|
||||
|
||||
- 用来模拟产品的功能。
|
||||
- 通过让人执行通常由计算机执行的任务,在这里用户不知道该产品是不具备功能性的
|
||||
- 优点：能够节省建立功能性产品的时间和金钱
|
||||
- 缺点：
|
||||
- 需要相当长的时间来使其正常运转，并且它总是需要多人操作
|
||||
- 需要一个训练有素的巫师，最终用户可能对系统有不切实际的期望。
|
||||
- 基于欺骗性的功能，反过来可能会限制他们提供反馈，继而限制从收集的数据中得出的推论
|
||||
|
||||
### 概念验证视频
|
||||
|
||||
_Proof of Concept Video_
|
||||
|
||||
- 一个能够在各种场景下展示各种用途和系统的功能的视频（系统是如何工作的 以及在什么情况下它会有用）
|
||||
|
||||
### 隐喻技术
|
||||
|
||||
_Metaphor Development_
|
||||
|
||||
- 考虑用户如何看待设计
|
||||
- 帮助用户建立新设计如何运作的**相关心理模型**
|
||||
- 隐喻将新功能与用户以及熟悉的系统功能相比较对比。
|
||||
|
||||
## **相关资源**
|
||||
|
||||
### Resources and Tools for Protoyping 1
|
||||
|
||||
1. [prototyping.html](http://www.usability.gov/how-to-and-tools/methods/prototyping.html)
|
||||
2. [high fidelity prototype/](http://www.usabilityfirst.com/glossary/high-fidelity-prototype/)
|
||||
3. [high fidelity vs low fidelity prototyping web design and app development](http://www.atlargeinc.com/insights/high-fidelity-vs-low-fidelity-prototyping-web-design-and-app-development)
|
||||
4. [Social Mirror](https://www.youtube.com/watch?v=91-JnTq3MhA)
|
||||
|
||||
### Tools
|
||||
|
||||
1. [Uxrecorder](http://www.uxrecorder.com/)
|
||||
2. [Invision](https://www.invisionapp.com/)
|
||||
3. [Marvel](https://marvelapp.com/)
|
||||
4. [Axure](http://www.axure.com/)
|
||||
|
||||
### Resources for Prototyping 2
|
||||
|
||||
1. [What a prototype is and is not](https://uxmag.com/articles/what-a-prototype-is-and-is-not)
|
||||
2. [the skeptics guide to low fidelity prototyping](https://www.smashingmagazine.com/2014/10/the-skeptics-guide-to-low-fidelity-prototyping/)
|
||||
3. [low fidelity prototype](http://www.usabilityfirst.com/glossary/low-fidelity-prototype/)
|
||||
4. [why every consumer internet startup should do more low fidelity prototyping](http://andrewchen.co/why-every-consumer-internet-startup-should-do-more-low-fidelity-prototyping/)
|
||||
5. [lofi vs hifi prototyping how real does the real thing have to be](http://www.telono.com/en/articles/lo-fi-vs-hi-fi-prototyping-how-real-does-the-real-thing-have-to-be/)
|
||||
6. [prototyping types of prototypes](http://it.toolbox.com/blogs/enterprise-solutions/prototyping-types-of-prototypes-14927)
|
||||
7. [horizontal and vertical prototypes](http://www.usabilityfirst.com/glossary/horizontal-and-vertical-prototypes/)
|
||||
8. [introduction sketch ui design/](http://marketblog.envato.com/grow-improve/creativity/introduction-sketch-ui-design/)
|
||||
9. [the messy art of ux sketching/](https://www.smashingmagazine.com/2011/12/the-messy-art-of-ux-sketching/)
|
||||
10. [how to draw quick useful ui sketches](http://www.slideshare.net/LaneHalley/how-to-draw-quick-useful-ui-sketches)
|
||||
11. [User interface sketching tips part-1](http://ui-patterns.com/blog/User-interface-sketching-tips-part-1)
|
||||
12. [storyboarding in the software design process](https://uxmag.com/articles/storyboarding-in-the-software-design-process)
|
||||
13. [the 8 steps to creating a great storyboard](http://www.fastcodesign.com/1672917/the-8-steps-to-creating-a-great-storyboard)
|
||||
14. [users story ux storyboarding](http://www.slideshare.net/fgarofalo/users-story-ux-storyboarding)
|
||||
94
urara/2021-11-18-ux5/+page.md
Normal file
94
urara/2021-11-18-ux5/+page.md
Normal file
|
|
@ -0,0 +1,94 @@
|
|||
---
|
||||
title: Evaluation
|
||||
summary: Introduction to User Experience Design｜Week5
|
||||
created: 2021-11-18T22:09:49+08:00
|
||||
categories:
|
||||
- UX学习笔记
|
||||
- Introduction to User Experience Design
|
||||
tags:
|
||||
- UX
|
||||
---
|
||||
|
||||
## **评估**
|
||||
|
||||
- 可以确定我们正在改善用户的体验
|
||||
- 需要定性、定量的数据
|
||||
|
||||
## **分类**
|
||||
|
||||
### 形成性评估
|
||||
|
||||
- 在设计**低保真**原型的过程中进行的
|
||||
- 数据：( 例如：完成任务的时间或点击次数）（关注任务）
|
||||
- 环境：一个受控环境, 例如, 实验室或办公室
|
||||
|
||||
### 总结性评估
|
||||
|
||||
- 是在**高保真**原型或最终界面即将完成的情况下进行的。
|
||||
- 数据：设计者能够访问的和分析的数据， 它们可以告诉我们如何使用系统。 例如，用户开始和结束会话时可能会有时间戳， 并记录用户如何与系统交互的数据（真实场景）、
|
||||
- 场景：高保真原型可在野外进行，如真实的使用场景
|
||||
|
||||
## **如何评估**
|
||||
|
||||
### 数据收集
|
||||
|
||||
- 以问卷形式进行的定量数据,
|
||||
- 记录用户完成任务时所经过的路径的数据。
|
||||
- 用户访谈的形式获得的定性数据
|
||||
|
||||
### 衡量
|
||||
|
||||
- 衡量任务的目标所达到的程度（完成程度）
|
||||
- 包括完成任务的时间、单击次数或 执行任务时出现的错误数。
|
||||
|
||||
### 可学习性
|
||||
|
||||
- 定义：首次成功完成任务的简单程度。
|
||||
- 衡量：完成任务的点击次数、完成任务所需的时间量来获得客观的测量结果， 然后将这些数据与专家的表现进行比较。
|
||||
|
||||
### 可记忆性
|
||||
|
||||
- 定义：要记住产品用方法的难易程度（如何在反复试验之后在界面上执行给定的任务）
|
||||
- 衡量：时间量或点击次数（完成一项反复试验的任务, 以获得可记忆性的测量）
|
||||
|
||||
### 主观情感评估
|
||||
|
||||
|
||||
|
||||
- 认知测量：心理负担
|
||||
- 情感测量：情感体验
|
||||
|
||||
## **相关资源**
|
||||
|
||||
1. [usability evaluation](http://www.usability.gov/what-and-why/usability-evaluation.html)
|
||||
2. [15. Usability Evaluation](https://www.interaction-design.org/literature/book/the-encyclopedia-of-human-computer-interaction-2nd-ed/usability-evaluation)
|
||||
3. [more than ease of use](http://www.wqusability.com/articles/more-than-ease-of-use.html)
|
||||
4. [Measuring Usability: Are Effectiveness, Efficiency, and Satisfaction Really Correlated?](http://www.diku.dk/~kash/papers/CHI2000_froekjaer.pdf)
|
||||
5. [usability 101|introduction to usability/](https://www.nngroup.com/articles/usability-101-introduction-to-usability/)
|
||||
|
||||
## **推荐教材**
|
||||
|
||||
### Trade Book
|
||||
|
||||
- **The Design of Everyday Things**
|
||||
2013 edition by Don Norman
|
||||
|
||||
### Text Books
|
||||
|
||||
- **Interaction Design**
|
||||
- by Jennifer Preece, Helen Sharp and Yvonne Rogers (in alphabetical order).
|
||||
- There are four editions of this book. I believe any of the editions are a good purchase. This is the book I use in my undergraduate college course.
|
||||
- **Human Computer Interaction**
|
||||
- 2004 by Dix, Finlay, Abowd & Beale.
|
||||
- This is an advance text book.
|
||||
- **Understanding Your Users**
|
||||
- 2015 edition by Baxter, Courage & Caine.
|
||||
- I really like this book because it does what it claims, provides a "practical guide to User Research Methods
|
||||
|
||||
## **参考网站**
|
||||
|
||||
- [What is Usability? | Usability Body of Knowledge](http://www.usabilitybok.org/what-is-usability)
|
||||
- [User interface design - Wikipedia](https://en.wikipedia.org/wiki/User_interface_design)
|
||||
- [User experience design - Wikipedia](https://en.wikipedia.org/wiki/User_experience_design)
|
||||
- [Usability First: Usability in Website and Software Design](http://www.usabilityfirst.com/)
|
||||
- [Methods](http://www.usability.gov/how-to-and-tools/methods/index.html)
|
||||
78
urara/2022-03-03/+page.md
Normal file
78
urara/2022-03-03/+page.md
Normal file
|
|
@ -0,0 +1,78 @@
|
|||
---
|
||||
title: JavaScript · 判断水仙花数
|
||||
summary: 用JavaScript判断水仙花数
|
||||
created: 2022-03-03T15:07:14.533Z
|
||||
categories:
|
||||
- JavaScript
|
||||
tags:
|
||||
- JavaScript
|
||||
slug: Narcissistic-number-in-JavaScript
|
||||
lastmod: 2022-04-07T07:20:02.340Z
|
||||
---
|
||||
|
||||
题目来源： [“如果”可以“重来” | 百度前端技术学园](http://ife.baidu.com/javascript/if&while.html#%E7%BC%96%E7%A0%81%E4%B8%89)
|
||||
|
||||
## 题目
|
||||
|
||||
根据用户输入的数据，判断水仙花数（三位数），水仙花数是指一个 n 位数 (n≥3)，它的每个位上的数字的 n 次幂之和等于它本身。
|
||||
|
||||
```html
|
||||
<label>请输需要判断的水仙花数(三位数):</label>
|
||||
<input type="text" />
|
||||
<br />
|
||||
<button>开始判断</button>
|
||||
<script>
|
||||
function numDaffodils(num) {
|
||||
// 判断是否为水仙花数
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
**需求说明**
|
||||
|
||||
- 当点击 `开始判断` 按钮，就执行 `numDaffodils` 函数判断输入的数字是否为水仙花数.
|
||||
- 如果是，就弹出提示框提示是水仙花数，如果不是，就提示不是水仙花数
|
||||
- 例如输入 153，`153=1* 1*1+5*5*5+3*3*3` , 是水仙花数，就提示 153 是水仙花数。
|
||||
- 请加入输入判断，必须输入数字，不能输入其他类型。
|
||||
|
||||
## 解法
|
||||
|
||||
```html
|
||||
<label>请输需要判断的水仙花数(三位数):</label>
|
||||
<input type="text" />
|
||||
<br />
|
||||
<button>开始判断</button>
|
||||
<script>
|
||||
const btn = document.querySelector('button')
|
||||
|
||||
function numDaffodils() {
|
||||
let num = document.querySelector('input').value
|
||||
|
||||
//输入的是字符串
|
||||
// console.log(typeof num); =>string
|
||||
|
||||
// 检查是否是有效数字
|
||||
if (num.startsWith('0') || num.length !== 3 || isNaN(num)) alert('请输入三位有效数字')
|
||||
|
||||
// 拆分为数组
|
||||
let numArr = num.split('')
|
||||
|
||||
//判断是不是水仙花数字！
|
||||
const numCheck = numArr.reduce((acc, value) => acc + Math.pow(value, 3), 0)
|
||||
|
||||
numCheck == num ? alert('是水仙花数 ✅') : alert('不是水仙花数❗️')
|
||||
}
|
||||
|
||||
btn.addEventListener('click', numDaffodils)
|
||||
</script>
|
||||
```
|
||||
|
||||
这里有一个坑：从 `<input type="text">` 获取输入内容[^1]，因为 `type=text` ，所以输出的是 `string` 而不是 `number`，不能直接用`typeof ==='number'`判断输入的是不是数字
|
||||
|
||||
## 参考
|
||||
|
||||
- [learn/task2_3 简单水仙花.html · Homeuh/learn · GitHub](https://github.com/Homeuh/learn/blob/6ed2d79cd6abff09f981c0af21080c38b55b6ef2/out/artifacts/Web0_1_Web_exploded/Task_JS/task2_3%E7%AE%80%E5%8D%95%E6%B0%B4%E4%BB%99%E8%8A%B1.html)
|
||||
|
||||
- [IFE/水仙花数.html · Yaomiaomu/IFE · GitHub](https://github.com/Yaomiaomu/IFE/blob/fed038d6c76b2bf62ee83d6539c927c6fa333b91/JAVASCRIPT/%E6%B0%B4%E4%BB%99%E8%8A%B1%E6%95%B0.html)
|
||||
|
||||
[^1]: [HTML text input allow only numeric input](https://stackoverflow.com/questions/469357/html-text-input-allow-only-numeric-input)
|
||||
76
urara/2022-03-04-decbin/+page.md
Normal file
76
urara/2022-03-04-decbin/+page.md
Normal file
|
|
@ -0,0 +1,76 @@
|
|||
---
|
||||
title: JavaScript · 十进制数转二进制
|
||||
summary: 用JavaScript将十进制数转二进制数
|
||||
created: 2022-03-04T14:57:48.683Z
|
||||
draft: ''
|
||||
tags:
|
||||
- JavaScript
|
||||
categories:
|
||||
- JavaScript
|
||||
lastmod: 2022-04-16T12:54:16.167Z
|
||||
type: default
|
||||
# changelogs:
|
||||
# - tag: "20220308"
|
||||
# summary:
|
||||
# - 将`push` 改为`unshift`
|
||||
# - 使用`padding`填充字符串
|
||||
# - 修改`binNumber.length >= binBit`
|
||||
---
|
||||
|
||||
## 题目
|
||||
|
||||
来源：[“如果”可以“重来” | 百度前端技术学园](http://ife.baidu.com/javascript/if&while.html#:~:text=opens%20new%20window)
|
||||
|
||||
验证工具：[在线进制转换 | 进制转换器 — 在线工具](https://www.sojson.com/hexconvert.html)
|
||||
|
||||
### Task1
|
||||
|
||||
实现当点击转化按钮时，将输入的十进制数字转化为二进制，并显示在 `result` 的 `p` 标签内
|
||||
|
||||
### Task2
|
||||
|
||||
- 转化显示后的二进制数为 bin-bit 中输入的数字宽度，例如 `dec-number` 为 5 ，`bin-bit` 为 5 ，则转化后数字为 `00101`
|
||||
- 如果 `bin-bit` 小于转化后的二进制本身位数，则使用原本的位数，如 `dec-number` 为 5 ，`bin-bit` 为 2 ，依然输出 `101` ，但同时在 console 中报个错。
|
||||
|
||||
## 解法
|
||||
|
||||
```html
|
||||
<input id="dec-number" type="number" placeholder="输入一个十进制非负整数" />
|
||||
<input id="bin-bit" type="number" placeholder="输入转化后二进制数字位数" />
|
||||
<button id="trans-btn">转化为二进制</button>
|
||||
<p id="result">运算结果</p>
|
||||
<script>
|
||||
/////// Task 1
|
||||
const btn = document.querySelector('#trans-btn')
|
||||
const result = document.querySelector('#result')
|
||||
|
||||
function dec2bin() {
|
||||
let decNumber = Number(document.querySelector('#dec-number').value)
|
||||
|
||||
// 判断输入必须为一个非负整数
|
||||
if (decNumber < 0 || !Number.isInteger(decNumber)) {
|
||||
alert('请输入一个非负整数！')
|
||||
}
|
||||
|
||||
// 求余
|
||||
let bin = []
|
||||
let remainder
|
||||
while (decNumber !== 0) {
|
||||
remainder = decNumber % 2
|
||||
decNumber = parseInt(decNumber / 2)
|
||||
bin.unshift(remainder)
|
||||
}
|
||||
let binNumber = bin.join('')
|
||||
|
||||
////// Task2
|
||||
let binBit = Number(document.querySelector('#bin-bit').value)
|
||||
if (binNumber.length >= binBit) {
|
||||
binNumber = binNumber.slice(0, binBit + 1)
|
||||
} else {
|
||||
binNumber = binNumber.padStart(binBit, '0')
|
||||
}
|
||||
result.innerHTML = `运算结果：${binNumber}`
|
||||
}
|
||||
btn.addEventListener('click', dec2bin)
|
||||
</script>
|
||||
```
|
||||
115
urara/2022-03-06-airtable/+page.md
Normal file
115
urara/2022-03-06-airtable/+page.md
Normal file
|
|
@ -0,0 +1,115 @@
|
|||
---
|
||||
title: Airtable · 网页剪藏
|
||||
summary: Airtable Web Cilpper设置
|
||||
created: 2022-03-06T05:58:29.026Z
|
||||
categories:
|
||||
- 实用技巧
|
||||
tags:
|
||||
- 实用技巧
|
||||
# layout: post
|
||||
lastmod: 2022-04-16T12:54:20.049Z
|
||||
---
|
||||
|
||||
## 书签这回事
|
||||
|
||||
上回说到用 [自建网页书签 Flare](https://sevic.me/blog/flare/) ，今天不小心把 SSH 链接弄坏了（也就是连不上了），因为搭载的服务不多，所以把整个服务器都重装了，Flare 网页书签也炸了。
|
||||
|
||||
其实搭建之后我没有用过（一次都没有），平时的书签管理主要靠搜索，各个浏览器之间的书签互相导入后，直接在搜索栏搜，如果是常用的网址，我用 Chorme 扩展 [eesel](https://chrome.google.com/webstore/detail/eesel-productivity-at-wor/jffaiidojfhflballoapgofphkadiono) 来解决，它可以列出最近用过的网页，按站点分类，查找起来很方便
|
||||
|
||||
|
||||
|
||||
最近还推出了一个新功能，可以通过命令进行一下快捷操作，如创建新的 coda 文件、figma 文件等……有点像 Alfred
|
||||
|
||||
|
||||
|
||||
然后还有一个工具叫 [Omni](https://chrome.google.com/webstore/detail/omni-bookmark-history-tab/mapjgeachilmcbbokkgcbgpbakaaeehi) 可以做类似的事情，它还可以搜收藏夹，但不知道为什么我的 Chrome 用不了这个，所以也一直没用。
|
||||
|
||||
## 关于 Airtable
|
||||
|
||||
Airtable 是一个多功能的表格应用，它的表格跟 Notion 里的 Database 挺像的，不过功能更多，用来做网页收藏夹 Free Plan 完全够用。基本的操作可以看这个： [真· Airtable 3 分钟菜鸟入门 - 少数派](https://sspai.com/post/44746) ，我没有什么要补充的。
|
||||
|
||||
从去年开始，我开始用 Airtable 整理我的一些收藏夹。原因如下：
|
||||
|
||||
1. 可以分享的表格链接，移动端网页适配也很好
|
||||
2. 提供可嵌入网页（如博客）的 `<iframe>` 代码，样式也可以调整
|
||||
3. 方便的 Chrome 拓展，可以智能抓取网页标题和截图、描述
|
||||
4. 可以给收藏打 Tag，更好整理，也可以写补充描述/评分等
|
||||
5. 多种表格视图（Gallery/Calender/Kanban……）
|
||||
6. 美丽: D
|
||||
|
||||
当然这样做也有一些缺点，和其他专门做网页书签的应用不同，Airtable 只是一个「表格」，所以从表格到收藏的网页中去需要点两次，也就是需要打开条目再点一次链接。我把它定义为一个「收藏仓库」，而不是一个随用随取的「文具袋」，我会尽可能详细地描述收藏的条目，以备之后查找和辨识。
|
||||
|
||||
我的书签例子：
|
||||
|
||||
<iframe title="coding resource" class="airtable-embed" src="https://airtable.com/embed/shrPHGWAGI8JypL16?backgroundColor=cyanLight&viewControls=on" frameborder="0" onmousewheel="" width="100%" height="533" style="background: transparent; border: 1px solid #ccc;"></iframe>
|
||||
|
||||
## 怎么用 Airtable 剪切网页
|
||||
|
||||
我的收藏夹示例： [Airtable - About Coding](https://airtable.com/shrpftxf6JgRomP2X/tblEvtThXHNBMQ8lW/viwSXGTALloahC10H)
|
||||
|
||||
### 1. 创建表格
|
||||
|
||||
至少包含三项内容：
|
||||
|
||||
1. URL：用来放网页的链接
|
||||
2. LongText：网页描述
|
||||
3. Attachment：放网页截图
|
||||
|
||||
如果需要打开 Markdown 格式支持，需要打开 `Enable rich text formatting`
|
||||
|
||||
|
||||
也可以增加 Tag 和 Categories 分类等其他内容，下面是我建的示例文件：
|
||||
|
||||
|
||||
|
||||
### 2. 创建 app
|
||||
|
||||
点击右上角的 `App` → 点击 `App an app` → 搜 `Web clipper`
|
||||
|
||||
|
||||
点击 `add` 添加应用
|
||||
|
||||
|
||||
|
||||
然后按提示安装 Chrome 拓展，你可以直接在这里安装： [Airtable web clipper](https://chrome.google.com/webstore/detail/airtable-web-clipper/fehcbmngdgagfalpnfphdhojfdcoblgc)
|
||||
|
||||
为剪切动作命名，如直接用表格名字：About Coding
|
||||
|
||||
|
||||
然后点击 `Add to Extension`, 你会看到它出现在了 Web clipper 里面，不过现在先不用管，点击左上角关掉。
|
||||
|
||||
### 3. 配置剪切设置
|
||||
|
||||
在 Web clipper 的设置页面（如下），可以调整表格里面各个单元格对应的网页数据，可以按需设置
|
||||
|
||||
|
||||
|
||||
其中：
|
||||
|
||||
- Page Title：页面标题
|
||||
- Page URL：页面链接
|
||||
- Selected text：打开 Web Clipper 时选中的文本
|
||||
- Meta tag：The field will be prefilled with the value of the matching meta tag. （不知道是什么
|
||||
- Text content by CSS selector：用 CSS 选择文本，会返回第一个符合选择器的文本内容，如 `.page-description`
|
||||
- HTML attribute by CSS selector ：结合 HTML 属性选择
|
||||
|
||||
我的设置是：
|
||||
|
||||
- Name——Page title
|
||||
- URL——Page URL
|
||||
- Attachments——none
|
||||
- Description——Selected Text
|
||||
|
||||
### 4. Web Clipper 剪切
|
||||
|
||||
配置好后就可以开始使用了。在你需要剪切的网页，打开 Airtable web clipper，也就是先前安装的浏览器拓展，点击相应动作，比如刚才创建的 About Coding（如果这个面板有挡到页面内容，可以用鼠标拖动到别的地方）
|
||||
|
||||
|
||||
|
||||
在 Attachment 里选择附加图片的来源：
|
||||
|
||||
|
||||
Description 里面的内容可以自己写，也可以在打开 Web clipper 之前先选中，打开后会自动填充进去，如图：
|
||||
|
||||
|
||||
最后点击 `Add record` 就完成啦
|
||||
65
urara/2022-03-07-filter/+page.md
Normal file
65
urara/2022-03-07-filter/+page.md
Normal file
|
|
@ -0,0 +1,65 @@
|
|||
---
|
||||
title: JavaScript · 字符串去重
|
||||
summary: 编码实现字符串去重
|
||||
created: 2022-03-07T13:55:21.090Z
|
||||
tags:
|
||||
- JavaScript
|
||||
categories:
|
||||
- JavaScript
|
||||
lastmod: 2022-04-07T07:20:30.550Z
|
||||
---
|
||||
|
||||
## 题目
|
||||
|
||||
来源:[百度前端学院](http://ife.baidu.com/javascript/string.html#%E5%AD%97%E7%AC%A6%E4%B8%B2)
|
||||
|
||||
```js
|
||||
/*
|
||||
去掉字符串 str 中，连续重复的地方
|
||||
*/
|
||||
function removeRepetition(str) {
|
||||
// do something
|
||||
}
|
||||
|
||||
// 测试用例
|
||||
console.log(removeRepetition('aaa')) // ->a
|
||||
console.log(removeRepetition('abbba')) // ->aba
|
||||
console.log(removeRepetition('aabbaabb')) // ->abab
|
||||
console.log(removeRepetition('')) // ->
|
||||
console.log(removeRepetition('abc')) // ->abc
|
||||
```
|
||||
|
||||
## 解法
|
||||
|
||||
```js
|
||||
function removeRepetition(str) {
|
||||
let strArr = [...str]
|
||||
const result = strArr.filter((s, i, arr) => s !== arr[i + 1]).join('')
|
||||
return result
|
||||
}
|
||||
|
||||
console.log(removeRepetition('aaa')) // ->a
|
||||
console.log(removeRepetition('abbba')) // ->aba
|
||||
console.log(removeRepetition('aabbaabb')) // ->abab
|
||||
console.log(removeRepetition('')) // ->
|
||||
console.log(removeRepetition('abc')) // ->abc
|
||||
```
|
||||
|
||||
如果没有限定条件说是“连续重复”，就可以用 **Set**：
|
||||
|
||||
```js
|
||||
function removeRepetition(str) {
|
||||
let strArr = [...new Set(str)]
|
||||
return strArr.join('')
|
||||
}
|
||||
console.log(removeRepetition('aaa')) // ->a
|
||||
console.log(removeRepetition('abbba')) // ->ab
|
||||
console.log(removeRepetition('aabbaabb')) // ->ab
|
||||
console.log(removeRepetition('')) // ->
|
||||
console.log(removeRepetition('abc')) // ->abc
|
||||
```
|
||||
|
||||
## 其他解法
|
||||
|
||||
- [filter 结合 call Method](https://www.programminghunter.com/article/7794242622/)
|
||||
- [用 for 循环的两种方式](https://www.cnblogs.com/zyc-zsxbh/p/9327364.html)
|
||||
101
urara/2022-03-07-obsidian-notes1/+page.md
Normal file
101
urara/2022-03-07-obsidian-notes1/+page.md
Normal file
|
|
@ -0,0 +1,101 @@
|
|||
---
|
||||
title: Obsidian · 网课学习笔记整理
|
||||
summary: 拆分整合的过程
|
||||
created: 2022-03-06T16:23:33.118Z
|
||||
tags:
|
||||
- Obsidian
|
||||
categories:
|
||||
- Obsidian
|
||||
lastmod: 2022-04-07T07:20:39.933Z
|
||||
---
|
||||
|
||||
最近在用 obsidian 做网课学习笔记，感觉还挺好用的。简单记一下我记笔记的一些方法（其实也不算什么方法）需要用到的插件：Image Auto Upload，用来传图片。
|
||||
|
||||
其实我的记笔记方法很简单，就是不断拆碎重组，方便后面查找。
|
||||
|
||||
上课时，先按时间顺序书写笔记，就像传统的笔记本一样，上完课后再将那一页笔记拆碎重组到知识结构中。方法论大概是 MOC？就是用索引去整理笔记结构，而不是所处文件夹的层次，这里我们先不做深入探讨。
|
||||
|
||||
下面以学习 JavaScript 为例子。
|
||||
|
||||
我近期的笔记目录页面（用 Logseq 发布）：[JavaScript](https://javascript-logseq.netlify.app/#/page/javascript)
|
||||
|
||||
## 具体的方法
|
||||
|
||||
我把几乎所有的笔记都放在一个叫 `Zone` 的文件夹内，常用的会打上星标，或者移到最外层文件夹，新笔记默认放在 `Zone` 文件夹下。
|
||||
|
||||
### Step1-构建地图
|
||||
|
||||
MOC 是 Map of Contents，也就是内容地图，所以我们会从构建一张地图出发。刚开始地图不需要太完美，很精细，因为一个不识路的人是没办法认路的，何况是指路、画地图，反正后面也要调整，可以随意一点。
|
||||
|
||||
我刚开始创建了一个叫 `JavaScript` 的索引页，里面用标题列了几项比较重要的内容，比如 OOP / DOM 之类的，然后在页面最上面列了几项常用的内容：
|
||||
|
||||
|
||||
之后会以这一页内容为目录索引，不断补充和修改，构建自己的知识结构
|
||||
|
||||
### Step2-写课堂笔记
|
||||
|
||||
首先需要创建一个空白页面。我用 Obsidian 里自带的插件 `ZK 卡片 ` 创建，可以自动生成时间戳标题，这个功能可以在设置里打开：
|
||||
|
||||
|
||||
|
||||
然后点击左边功能栏就可以创建并打开了
|
||||
|
||||
|
||||
|
||||
创建好之后，把这页笔记添加到索引页中，方便后面查找：
|
||||
|
||||
|
||||
|
||||
然后就可以写课堂笔记了，如果需要在笔记中插入图片，可以使用 Image Auto Upload 这个插件，配合 PicGo 客户端，可以在 Obsidian 里上传图片到图床，非常好用，直接粘贴图片到页面就可以了，具体可以看插件描述。
|
||||
|
||||
|
||||
|
||||
记笔记的过程没什么特别的，如果提到了一些我还不了解，以后还想深入的话题，我会用 `[[ ]]` 先标出来， 后面整理笔记的时候看到会留意下。
|
||||
|
||||
### Step3-重组笔记
|
||||
|
||||
做完笔记后，将笔记重组。
|
||||
|
||||
#### 布局
|
||||
|
||||
先打开三个窗口，布局如下：
|
||||
|
||||
|
||||
|
||||
其中课堂笔记和索引页面需要锁定，这样新打开的窗口就会一直在右下角那个地方，将在这个区域编辑笔记内容。
|
||||
|
||||
#### 结构编辑
|
||||
|
||||
浏览课堂笔记大纲，看下本节课的知识点应该放在索引里的哪里，知识点之间应该是怎样的关系，在索引里用 `[[]]` 都列出来，简而言之就是画思维导图。我的一个比较粗糙的整理：
|
||||
|
||||
|
||||
|
||||
这样就可以比较直观地看到哪些内容整理了，哪些没有整理。
|
||||
|
||||
#### 拆分笔记
|
||||
|
||||
然后就可以将左边的笔记拆分整合到右边的索引中了，按住快捷键 `CMD`，鼠标点击索引里的链接打开新页面，然后在右下部分复制整理。写完一个知识点后可以不用关闭窗口，按住 `CMD` 然后点击链接，继续在右下窗口编辑笔记。
|
||||
|
||||
看到索引浅色链接（没有创建页面的）都没了，就基本整理完了，可以再看看课程笔记里有没有要补充的。
|
||||
|
||||
然后就整理完啦！之后继续补充索引页面就好了……^\_^
|
||||
|
||||
<!-- ## 其他
|
||||
|
||||
有空再补充咯！
|
||||
|
||||
### image auto upload
|
||||
|
||||
<iframe src="https://social.datalabour.com/@nonsense/107907119934568990/embed" class="mastodon-embed" style="max-width: 100%; border: 0" width="100%" allowfullscreen="allowfullscreen"></iframe><script src="https://social.datalabour.com/embed.js" async="async"></script>
|
||||
|
||||
### Copy Block Link
|
||||
|
||||
<iframe src="https://social.datalabour.com/@nonsense/107831022090709742/embed" class="mastodon-embed" style="max-width: 100%; border: 0" width="100%" allowfullscreen="allowfullscreen"></iframe><script src="https://social.datalabour.com/embed.js" async="async"></script>
|
||||
|
||||
### MOC
|
||||
|
||||
<iframe src="https://o3o.ca/@nonsense/107642980121444003/embed" class="mastodon-embed" style="max-width: 100%; border: 0" width="100%" allowfullscreen="allowfullscreen"></iframe>
|
||||
|
||||
### 随机发言
|
||||
|
||||
<iframe src="https://social.datalabour.com/@nonsense/107824733009904426/embed" class="mastodon-embed" style="max-width: 100%; border: 0" width="100%" allowfullscreen="allowfullscreen"></iframe><script src="https://social.datalabour.com/embed.js" async="async"></script> -->
|
||||
116
urara/2022-03-09-caesar-cipher/+page.md
Normal file
116
urara/2022-03-09-caesar-cipher/+page.md
Normal file
|
|
@ -0,0 +1,116 @@
|
|||
---
|
||||
title: JavaScript · Caesar Cipher 凯撒加密
|
||||
summary: 用JavaScrpit编码实现凯撒加密算法
|
||||
created: 2022-03-08T16:01:08.850Z
|
||||
tags:
|
||||
- JavaScript
|
||||
categories:
|
||||
- JavaScript
|
||||
lastmod: 2022-04-07T07:20:47.694Z
|
||||
---
|
||||
|
||||
## 题目
|
||||
|
||||
来源：[操作字符串对象 | 百度前端技术学园](http://ife.baidu.com/javascript/string.html#%E5%AD%97%E7%AC%A6%E4%B8%B2)
|
||||
|
||||
编码实现凯撒加密算法，根据输入的偏移量，实现对字符串的加密和解密.
|
||||
|
||||
恺撒加密（Caesar cipher），是一种最简单且最广为人知的替换加密技术。明文中的所有字母都在字母表上向后（或向前）按照一个固定数目进行偏移后被替换成密文。
|
||||
|
||||
例如，当偏移量是 3 的时候，所有的字母 A 将被替换成 D，B 变成 E，以此类推。
|
||||
|
||||
**需求说明**
|
||||
|
||||
- 点击加密按钮，根据用户输入的偏移量，对明文进行加密，加密后的为密文，显示在密文输入框中
|
||||
- 点击解密按钮，根据用户输入的偏移量，对密文进行加密，解密出来的为明文，显示在明文输入框中
|
||||
|
||||
## 解法
|
||||
|
||||
- `string.replace` 替换数字
|
||||
- 用`.charCodeAt()` 获取字母编码
|
||||
- 正则表达式`/[A-Za-z]/g`选择字母
|
||||
- 偏移量超过范围的，往反方向偏移
|
||||
- 结果验证：[凯撒密码加密/解密 - 一个工具箱 ](http://www.atoolbox.net/Tool.php?Id=778)
|
||||
|
||||
### HTML
|
||||
|
||||
```html
|
||||
<label>偏移:</label>
|
||||
<input type="text" name="offset" size="5" value="3" />
|
||||
<br />
|
||||
<label>
|
||||
明文:
|
||||
<label></label>
|
||||
<input type="text" name="plain" size="50" value="This is a test." />
|
||||
<br />
|
||||
<label>密文:</label>
|
||||
<input type="text" name="enc" size="50" />
|
||||
<br />
|
||||
<input type="button" value="加密" onClick="encrypt()" />
|
||||
|
||||
<input type="button" value="解密" onClick="decrypt()" />
|
||||
</label>
|
||||
```
|
||||
|
||||
### JS
|
||||
|
||||
```js
|
||||
let offsetInput = document.querySelector('input[name=offset]')
|
||||
let plain = document.querySelector('input[name=plain')
|
||||
let enc = document.querySelector('input[name=enc]')
|
||||
|
||||
// 加密
|
||||
function encrypt() {
|
||||
let offset = Number(offsetInput.value)
|
||||
function conver(s) {
|
||||
let charCode = s.charCodeAt(0)
|
||||
// 替换大写字母 A-Z:65-90
|
||||
if (charCode <= 90 && charCode >= 65) {
|
||||
return String.fromCharCode(charCode + offset < 90 ? charCode + offset : charCode - offset)
|
||||
} else {
|
||||
//替换小写字母 a-z:97-122
|
||||
return String.fromCharCode(charCode + offset < 122 ? charCode + offset : charCode - offset)
|
||||
}
|
||||
}
|
||||
enc.value = plain.value.replace(/[A-Za-z]/g, conver)
|
||||
|
||||
// 替换大写字母 A-Z:65-90
|
||||
// function transUpper(s) {
|
||||
// let charCode = s.charCodeAt();
|
||||
// return String.fromCharCode(
|
||||
// charCode + offset <= 90 ? charCode + offset : charCode - offset
|
||||
// );
|
||||
// }
|
||||
|
||||
// //替换小写字母 a-z:97-122
|
||||
// function transLower(s) {
|
||||
// let charCode = s.charCodeAt();
|
||||
// return String.fromCharCode(
|
||||
// charCode + offset <= 122 ? charCode + offset : charCode - offset
|
||||
// );
|
||||
// }
|
||||
// let encUpper = plain.replace(/[A-Z]/g, transUpper);
|
||||
// enc.value = encUpper.replace(/[a-z]/g, transLower);
|
||||
}
|
||||
|
||||
// 解密
|
||||
function decrypt() {
|
||||
let offset = Number(offsetInput.value)
|
||||
function conver(s) {
|
||||
let charCode = s.charCodeAt(0)
|
||||
// 替换大写字母 A-Z:65-90
|
||||
if (charCode <= 90 && charCode >= 65) {
|
||||
return String.fromCharCode(charCode - offset < 65 ? charCode + offset : charCode - offset)
|
||||
} else {
|
||||
//替换小写字母 a-z:97-122
|
||||
return String.fromCharCode(charCode - offset < 97 ? charCode + offset : charCode - offset)
|
||||
}
|
||||
}
|
||||
plain.value = enc.value.replace(/[A-Za-z]/g, conver)
|
||||
}
|
||||
```
|
||||
|
||||
## 参考
|
||||
|
||||
- [凯撒密码 javascript](https://blog.csdn.net/dikanjiang6340/article/details/101264748?utm_relevant_index=1)
|
||||
- [Caesar Cipher in Javascript - Stack Overflow](https://stackoverflow.com/questions/44232645/caesar-cipher-in-javascript?newreg=0a8ff4c05c484b01a7df20821475fb15)
|
||||
101
urara/2022-03-09-css-tab/+page.md
Normal file
101
urara/2022-03-09-css-tab/+page.md
Normal file
|
|
@ -0,0 +1,101 @@
|
|||
---
|
||||
title: CSS · Tab选项卡
|
||||
summary: 一个纯 CSS 实现的 Tab 选项卡
|
||||
created: 2022-03-09T07:42:25.299Z
|
||||
tags:
|
||||
- CSS
|
||||
categories:
|
||||
- CSS
|
||||
lastmod: 2022-04-07T07:40:02.371Z
|
||||
---
|
||||
|
||||
一个纯 CSS 实现的 Tab 选项卡
|
||||
|
||||
## 原理
|
||||
|
||||
> 通过隐藏的 `input` 和与之关联的 [label](https://so.csdn.net/so/search?q=label&spm=1001.2101.3001.7020) 点击 `label` 触发 `input` 的 `checked` 状态触发的，再配合使用元素状态的伪类 `:checked `样式就可以实现不同状态的切换，中间的过度效果还可以配合 CSS3 的 `transition`过度效果实现 [^1]。
|
||||
|
||||
## 代码
|
||||
|
||||
- `input` 的`name` 都一样，`id`不同
|
||||
|
||||
### HTML
|
||||
|
||||
```html
|
||||
<div class="tab-frame">
|
||||
<!--标签页标题栏-->
|
||||
<!-- 设置一个为check -->
|
||||
<input type="radio" name="tab" id="tab1" check />
|
||||
<label for="tab1">TAB1</label>
|
||||
|
||||
<input type="radio" name="tab" id="tab2" />
|
||||
<label for="tab2">TAB2</label>
|
||||
|
||||
<input type="radio" name="tab" id="tab3" />
|
||||
<label for="tab3">TAB2</label>
|
||||
|
||||
<!--Tab内容-->
|
||||
<div class="tab-content">
|
||||
<p>THIS IS TAB1 CONTENT</p>
|
||||
<p>Notice the gap between the content and tab after applying background cololr</p>
|
||||
</div>
|
||||
<div class="tab-content">
|
||||
<p>THIS IS TAB2 CONTENT</p>
|
||||
<p>Notice the gap between the content and tab after applying background cololr</p>
|
||||
</div>
|
||||
<div class="tab-content">
|
||||
<p>THIS IS TAB3 CONTENT</p>
|
||||
<p>Notice the gap between the content and tab after applying background cololr</p>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
### CSS
|
||||
|
||||
```css
|
||||
/* 隐藏input和tab内容 */
|
||||
.tab-frame input,
|
||||
.tab-content {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* 导航栏样式：未选中时 */
|
||||
.tab-frame label {
|
||||
color: #555;
|
||||
padding: 10px 20px;
|
||||
border-bottom: 1px solid #555;
|
||||
cursor: pointer;
|
||||
float: left;
|
||||
}
|
||||
|
||||
/* 导航栏样式：选中时 */
|
||||
.tab-frame input:checked + label {
|
||||
color: #0f71aa;
|
||||
border: 1px solid #555;
|
||||
border-bottom: none;
|
||||
border-radius: 4px 4px 0px 0px;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
/* Tab内容样式 */
|
||||
.tab-frame .tab-content {
|
||||
color: #0f71aa;
|
||||
font-size: 1.5rem;
|
||||
font-weight: bold;
|
||||
padding-top: 40px;
|
||||
clear: left;
|
||||
}
|
||||
|
||||
/* 点击的时候显示tab内容，即input checked的时候显示label*/
|
||||
.tab-frame input:nth-of-type(1):checked ~ .tab-content:nth-of-type(1),
|
||||
.tab-frame input:nth-of-type(2):checked ~ .tab-content:nth-of-type(2),
|
||||
.tab-frame input:nth-of-type(3):checked ~ .tab-content:nth-of-type(3) {
|
||||
display: block;
|
||||
}
|
||||
```
|
||||
|
||||
## 参考
|
||||
|
||||
Demo：[Tabs CSS & HTML, no JS & Jquery](https://codepen.io/llgruff/pen/ZGBxOa)
|
||||
|
||||
[^1]: [CSS tab 选项卡 (标签页) 切换](https://blog.csdn.net/baiding1123/article/details/51889201)
|
||||
59
urara/2022-03-09-typewriter/+page.md
Normal file
59
urara/2022-03-09-typewriter/+page.md
Normal file
|
|
@ -0,0 +1,59 @@
|
|||
---
|
||||
title: JavaScript · 打字机效果生成器
|
||||
summary: 用 JavaScript 实现网页打字机效果
|
||||
created: 2022-03-08T16:19:05.137Z
|
||||
tags:
|
||||
- JavaScript
|
||||
categories:
|
||||
- JavaScript
|
||||
lastmod: 2022-04-07T07:40:27.758Z
|
||||
---
|
||||
|
||||
## 题目
|
||||
|
||||
来源：[百度前端学院](http://ife.baidu.com/javascript/string.html#%E4%BB%BB%E5%8A%A1%E5%9B%9B)
|
||||
|
||||
参照 [打字机效果 DEMO (opens new window)](https://b.bdstatic.com/searchbox/icms/searchbox/img/%E6%89%93%E5%AD%97%E6%9C%BA.gif)，实现一个打字机效果生成器
|
||||
|
||||
**需求说明**
|
||||
|
||||
- 在输入框中输入需要实现打字机效果的文本
|
||||
- 实现原理使用定时器间隔一段时间递增地截取字符串的长度
|
||||
- 点击 button 实现打字机效果的生成，将文本输出到 id 为 showText 的标签中
|
||||
|
||||
```html
|
||||
<label>请输入文本:</label>
|
||||
<input type="text" />
|
||||
<button onclick="generateTypeEffect()">生成打字效果</button>
|
||||
<h2 id="showText"></h2>
|
||||
<script>
|
||||
function generateTypeEffect() {
|
||||
//这里实现打字机效果
|
||||
//将内容显示在h2中
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
## 解法
|
||||
|
||||
```html
|
||||
<label>请输入文本:</label>
|
||||
<input type="text" />
|
||||
<button onclick="generateTypeEffect()">生成打字效果</button>
|
||||
<h2 id="showText"></h2>
|
||||
<script>
|
||||
let i = 0
|
||||
function generateTypeEffect() {
|
||||
const output = document.getElementById('showText')
|
||||
const input = document.querySelector('input').value
|
||||
if (i < input.length) {
|
||||
output.textContent += input[i]
|
||||
setTimeout(generateTypeEffect, 200, ++i)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
## 参考
|
||||
|
||||
[How TO - Typing Effect](https://www.w3schools.com/howto/howto_js_typewriter.asp)
|
||||
30
urara/2022-03-10-forty/+page.md
Normal file
30
urara/2022-03-10-forty/+page.md
Normal file
|
|
@ -0,0 +1,30 @@
|
|||
---
|
||||
title: Forty页面仿写
|
||||
summary: 完成 HTML、CSS 代码编写，暂无 JavaScript
|
||||
created: 2022-03-10T08:38:17.227Z
|
||||
preview: ''
|
||||
draft: ''
|
||||
tags:
|
||||
- CSS
|
||||
- HTML
|
||||
lastmod: 2022-04-07T07:39:48.473Z
|
||||
---
|
||||
|
||||
## 题目
|
||||
|
||||
来源：[百度前端学院｜浮动实战任务](http://ife.baidu.com/csspart/floatTask.html)
|
||||
|
||||
通过 HTML 及 CSS 参考[示例图](https://b.bdstatic.com/searchbox/icms/searchbox/img/task1.png)实现页面开发，要求实现效果与示例图基本一致
|
||||
|
||||
- 页面宽度固定（定宽）, 请应用 CSS 浮动以及前几天所学的 CSS 样式来完成页面效果
|
||||
- 只需要完成 HTML、CSS 代码编写，不需要写 JavaScript
|
||||
|
||||
## 示例图
|
||||
|
||||
|
||||
|
||||
## Demo
|
||||
|
||||
https://forty-seviche.netlify.app/
|
||||
|
||||
耗时：4 小时（还没有做自适应等很多东西……╮(￣ ▽ ￣"")╭
|
||||
110
urara/2022-03-11-miniflux-to-pocket/+page.md
Normal file
110
urara/2022-03-11-miniflux-to-pocket/+page.md
Normal file
|
|
@ -0,0 +1,110 @@
|
|||
---
|
||||
title: Miniflux · 保存文章到 Pocket 以及 RSS
|
||||
summary: 将 Miniflux 上的文章到保存到 Pocket/Instapaper,以及 RSS 相关文章和资源
|
||||
created: 2022-03-10T16:24:38.663Z
|
||||
tags:
|
||||
- RSS
|
||||
- Miniflux
|
||||
lastmod: 2022-04-07T07:38:52.406Z
|
||||
---
|
||||
|
||||
将 Miniflux 上的文章到保存到 Pocket/Instapaper,以及 RSS 相关文章和资源
|
||||
|
||||
Miniflux 文档： [Integration with External Services](https://miniflux.app/docs/services.html)
|
||||
|
||||
## 1. 创建 Pocket Application
|
||||
|
||||
在 [这里](https://getpocket.com/developer/apps/new) 创建一个 Pocket 应用，以获取 Consumer Key
|
||||
|
||||
我的设置如下：
|
||||
|
||||
|
||||
|
||||
## 2. 获取 Consumer Key 用户密钥
|
||||
|
||||
在**My Apps**下面找到刚刚创建的应用，复制 Consumer Key：
|
||||
|
||||
|
||||
|
||||
在 Miniflux 后台，设置 → 集成 → Pocket → **Pocket 用户密钥**（第一栏）中 填入刚刚复制的 Consumer key
|
||||
|
||||
## 3. 获取 Access Token 访问密钥
|
||||
|
||||
填好后，通过通过点击下面的 **连接您的 Pocket 账户** 自动获取 Access Token(访问密钥):
|
||||
|
||||
|
||||
|
||||
点击链接后按 **授权**。
|
||||
|
||||
|
||||
这里可能会跳到 `http://localhost/integration/pocket/callback` 然后就无法访问页面了，解决办法很简单，把 `localhost` 改为你的服务器 ip 端口或者 miniflux 所在域名即可,如 `http://miniflux.com/integration/pocket/callback`，按回车会跳回到 miniflux 设置页面。
|
||||
|
||||
出现这个提醒就连接成功了：
|
||||
|
||||
|
||||
然后就可以点击文章页面的**保存**测试看看。
|
||||
|
||||
|
||||
## 其他
|
||||
|
||||
### 1.为博客添加 Pocket 收藏按钮
|
||||
|
||||
在 [此处](https://getpocket.com/publisher/button)复制需要的 Pocket 收藏按钮样式，添加到主题的 layout 里面（具体要看不同主题的设置，wordpress 似乎有内置这功能，我不确定，有三种效果。
|
||||
|
||||
### 2.用 Fever 同步到 Reeder
|
||||
|
||||
1. 在 Miniflux 中创建 Fever 账户和密码
|
||||
2. 在 Reeder 中添加 Fever 账号，其中：
|
||||
|
||||
- server：`https://miniflux 的网址/fever`
|
||||
- email：Fever 用户名
|
||||
- password：就是 Fever 密码
|
||||
|
||||
### 3.连接到 Instapaper
|
||||
|
||||
官网：[Instapaper](https://www.instapaper.com/)
|
||||
|
||||
用户名为 Instapaper 的登录邮箱，设置好更新下就可以了～
|
||||
|
||||
## RSS 相关内容
|
||||
|
||||
来都来了，整理一下最近看过的相关内容，因为隐私问题，长毛象上的嘟文暂时不贴（除了我自己的
|
||||
|
||||
### 1. Miniflux 搭建
|
||||
|
||||
- [RSS | RSSHub 搭配 Miniflux，实现订阅自由](https://mantyke.icu/2021/rsshub-miniflux/)
|
||||
- [Miniflux | 利用 Docker-compose 搭建 RSS 阅读器](https://blog.tantalum.life/posts/build-miniflux-in-docker/#%E6%90%AD%E5%BB%BA%E8%BF%87%E7%A8%8B)
|
||||
- [Miniflux：自建私有 RSS 订阅工具，可多用户使用](https://www.moerats.com/archives/385/comment-page-1)
|
||||
- [简易 RSS 阅读器 | Miniflux 2 安装教程](https://www.moewah.com/archives/3157.html)
|
||||
|
||||
### 2. 其他选择
|
||||
|
||||
- [RSS 服务对比评测](https://type.cyhsu.xyz/2018/05/rss-aggregators-review-2018/)
|
||||
- [找不到满意的 RSS 服务？你可以自己搭建一个](https://sspai.com/post/57498)
|
||||
- [用 Tiny Tiny RSS 自建 RSS 服务](https://type.cyhsu.xyz/2017/10/use-ttrss-to-build-a-self-hosted-rss-service/)
|
||||
- [（另一篇）Tiny Tiny RSS 教程](https://sspai.com/post/42787)
|
||||
- [(2021) 自建 RSS 阅读器 Tiny Tiny RSS 教程，docker 安装 Awesome TTRSS](https://blog.naibabiji.com/tutorial/tiny-tiny-rss.html)
|
||||
- [创建一个私有的 rss 订阅工具 Wallabag](https://www.vpslala.com/t/762)
|
||||
|
||||
### 3. RSS 生成
|
||||
|
||||
- [可能是目前最全的 RSS 源，微信公众号也有！](https://mp.weixin.qq.com/s/K00wWvlAJu4KLbxru9-bXQ)
|
||||
- [Feed Creator](http://createfeed.fivefilters.org/)
|
||||
- [根据页面 HTML 生成 RSS 链接](https://social.datalabour.com/@nonsense/107824299041894067)
|
||||
- [你的专属 RSS 源：在自己的 VPS 上安装 RSSHub](https://sspai.com/post/66451)
|
||||
- [8 个好用的 WordPress RSS Feed 插件](https://www.wpdaxue.com/wordpress-rss-feed-plugins.html)
|
||||
|
||||
### 4. 看什么
|
||||
|
||||
- [分享你认为值得订阅的内容 | Notion 小活动 Vol.13](https://www.notion.so/cnotion/Notion-Vol-13-89e51bdb621a4e009e7ec60d1cc58c2f#16368490755248a28efa4c229dc56321)
|
||||
- [产品沉思录|优质订阅源](https://www.notion.so/ca290ef313804bae8584804440548c80?v=4470668a5078437f816b0273ed042ebf)
|
||||
- [中文 Newsletter 导航](https://www.notion.so/kfang/Newsletter-68ee46c0a4574f659fb8a873ead438c6)
|
||||
- [中文独立博客列表](https://github.com/timqian/chinese-independent-blogs)
|
||||
|
||||
#### 5. 关于 RSS
|
||||
|
||||
- [论 RSS 的「复兴」](https://type.cyhsu.xyz/2018/04/on-the-so-called-revival-of-rss/)
|
||||
- [关于 RSS 协议的一些迷思](https://blog.dylanwu.space/2021/11/30/myth-of-rss.html)
|
||||
- [是 RSS 复兴的时候了（翻译 )](https://www.fengkx.top/post/translation-of-RSS-revival/)
|
||||
- [RSS3](https://rss3.io/)
|
||||
- [拆解 RSS3— 是否可以真正的开启 Web3 社交？](https://mp.weixin.qq.com/s/CYmXvEHSd7idhDHtEe3ehw)
|
||||
52
urara/2022-03-29-12px/+page.md
Normal file
52
urara/2022-03-29-12px/+page.md
Normal file
|
|
@ -0,0 +1,52 @@
|
|||
---
|
||||
title: CSS · 解决 Chrome 中小于12px的字体不显示的问题
|
||||
lastmod: 2022-04-07T07:36:23.629Z
|
||||
summary: 先用scale总体缩小再补上减少的宽度
|
||||
created: 2022-03-29T13:46:29.228Z
|
||||
tags:
|
||||
- CSS
|
||||
- CSS Trick
|
||||
categories:
|
||||
- CSS
|
||||
toc: false
|
||||
---
|
||||
|
||||
如设置字体大小为 10.2px
|
||||
|
||||
### HTML
|
||||
|
||||
```html
|
||||
<p>
|
||||
I am a frontend developer with a particular interest in making things simple and automating daily tasks. I try to keep up with
|
||||
security and best practices, and am always looking for new things to learn.
|
||||
</p>
|
||||
```
|
||||
|
||||
### CSS
|
||||
|
||||
```css
|
||||
p {
|
||||
color: #dcdcdc;
|
||||
|
||||
/*缩小基准大小，也就是缩小后的字体应该是 10.2px=12px*0.85*/
|
||||
font-size: 12px;
|
||||
|
||||
/* 缩小比例 10.2px/12px=0.85 */
|
||||
transform: scale(0.85);
|
||||
|
||||
/*设置缩放中心*/
|
||||
transform-origin: 0 0;
|
||||
|
||||
/*(1-0.85)+1，补上缩小的宽度，这里可以按视觉效果调整一点*/
|
||||
width: 118%;
|
||||
|
||||
/*兼容IE*/
|
||||
*font-size: 10.2px;
|
||||
}
|
||||
```
|
||||
|
||||
参考：
|
||||
|
||||
- [css 小于 12px 字体\_MAIMIHO 的博客-CSDN 博客](https://blog.csdn.net/maimiho/article/details/121548769)
|
||||
- [css 设置字体小于 12px 的方法 - 代码先锋网](https://www.codeleading.com/article/46263149244/)
|
||||
- [Set CSS font-size less than 12px in webkit browser](https://codepen.io/mjj2000/pen/AYEqwJ)
|
||||
363
urara/2022-05-07-vps-init/+page.md
Normal file
363
urara/2022-05-07-vps-init/+page.md
Normal file
|
|
@ -0,0 +1,363 @@
|
|||
---
|
||||
title: VPS 安全初始化
|
||||
created: 2022-05-06
|
||||
summary: 上次 VPS 被别人暴力破解了，一哭二闹三重装之后，有了本文
|
||||
tags:
|
||||
- VPS
|
||||
- Self hosted
|
||||
---
|
||||
|
||||
**前情提要：**
|
||||
|
||||
前段时间我所购买的 VPS 服务商 Contabo 发邮件来说，我用 VPS 攻击了其他的服务器，让我快点停止这种行为，要是不改就罚我的钱，但是我并没有在上面装什么奇怪的东西，就只装了一个聊胜于无的 WordPress，手足无措之余在 Mastodon 哀嚎了一下，得到了很多热心网友的帮助，才发现原来我一直在裸奔使用 VPS，什么安全措施都没采取:(
|
||||
|
||||
鉴于 VPS 上本来就没有什么东西，我决定重新初始化机子，本文是初始化的笔记，我的系统是 Ubuntu 20.04，文中提到的 ufw 是内置的，没有额外安装, 有些步骤上有所省略，最好对照着提到的参考文章看。
|
||||
|
||||
（再次感谢 Allen Zhong、糖喵、南狐、shrik3 等朋友的热心指导 o(≧v≦)o！）
|
||||
|
||||
## 思路
|
||||
|
||||
下面这两点都是 Contabo 客服发给我的防护建议，用 Deepl 翻译了一下
|
||||
|
||||
### 日常防护
|
||||
|
||||
- 检查你的服务器是否有可疑的进程并删除它们（例如使用以下命令：ps aux| grep stealth)
|
||||
- 检查错误日志，例如/var/log/apache2/error_log，找出是否有任何恶意脚本的错误信息或恶意软件下载的迹象。
|
||||
- 攻击者经常在以下目录中安装恶意软件。/tmp/ , /var/tmp/ - 请使用 find /tmp (find /var/tmp) 来检查隐藏的文件。
|
||||
- 扫描你的服务器以防止安装的 rootkits。
|
||||
- 运行一个防病毒软件，如 ClamAV 或 ClamWin。
|
||||
|
||||
### 安全检查
|
||||
|
||||
1. 保持定期备份。
|
||||
2. 保持你的整个系统一直是最新的，这意味着你必须定期安装使用的软件包和网络应用程序的更新和补丁。
|
||||
3. 安装并运行一个防病毒软件，如 ClamAV 或 ClamWin，以保持你的服务器不受恶意软件侵害。
|
||||
4. 设置一个防火墙，关闭所有你不需要的端口，并将 SSH 的 22 或 RDP 的 3389 等默认端口改为其他。
|
||||
5. 通过安装一个合适的软件，如 cPHulk 或 Fail2ban，阻止暴力攻击。
|
||||
6. 避免使用只在不安全的设置下工作的脚本。
|
||||
7. 不要点击电子邮件中的任何可疑附件或链接，或访问不安全的网站。
|
||||
8. 使用 SSH-Keys 而不是密码。
|
||||
|
||||
---
|
||||
|
||||
最后我将 VPS 里的内容全删了，从 0 出发，下面是具体的操作步骤：
|
||||
|
||||
## 1. 创建新用户
|
||||
|
||||
参考： [VPS 建站新手上路 - YOLO](https://yolo.blue/vps-hosting-setup/)
|
||||
|
||||
首先用 root 登陆，然后输入 adduser + 用户名 创建新用户，如添加用户`jack`
|
||||
|
||||
```shell
|
||||
adduser jack
|
||||
```
|
||||
|
||||
接着输入两遍密码，其他信息可以按 <kbd>Enter </kbd>留空
|
||||
|
||||
给这个用户 root 权限：
|
||||
|
||||
```shell
|
||||
sudo usermod -aG sudo jack
|
||||
```
|
||||
|
||||
其他参考： [如何在 Ubuntu 上添加和删除用户 | myfreax](https://www.myfreax.com/how-to-add-and-delete-users-on-ubuntu-18-04/)
|
||||
|
||||
## 2. 配置 SSH-keys
|
||||
|
||||
参考： [给 VPS 配置 SSH 密钥免密登录 - P3TERX ZONE](https://p3terx.com/archives/configure-ssh-keyfree-login-for-vps.html)
|
||||
|
||||
### 本地生成 SSH 密钥对
|
||||
|
||||
文中提到可以在远端 VPS 上，也可以在本地，这里我选择在本地生成。
|
||||
|
||||
打开终端，输入 `ssh-keygen` ,连续按四次 <kbd>Enter </kbd>（密码设置为空），如果出现了 `overwrite(y/n)?` 就说明之前就有生成了，你可以选择 `y` 重新生成一个，或者就用已有的这个
|
||||
|
||||
比如：
|
||||
|
||||
```bash
|
||||
root@p3ter:~# ssh-keygen # 输入命令，按 Enter 键
|
||||
Generating public/private rsa key pair.
|
||||
Enter file in which to save the key (/root/.ssh/id_rsa): # 保存位置，默认就行，按 Enter 键
|
||||
Enter passphrase (empty for no passphrase): # 输入密钥密码，按 Enter 键。填写后每次都会要求输入密码，留空则实现无密码登录。
|
||||
Enter same passphrase again: # 再次输入密钥密码，按 Enter 键
|
||||
Your identification has been saved in /root/.ssh/id_rsa.
|
||||
Your public key has been saved in /root/.ssh/id_rsa.pub.
|
||||
The key fingerprint is:
|
||||
SHA256:GYT9YqBV4gDIgzTYEWFs3oGZjp8FWXArBObfhPlPzIk root@p3ter
|
||||
The key's randomart image is:
|
||||
+---[RSA 2048]----+
|
||||
|*OO%+ .+o |
|
||||
|*=@.+++o. |
|
||||
| *o=.=.... |
|
||||
|. +.B + +o. |
|
||||
| . + E *S. |
|
||||
| o o |
|
||||
| . |
|
||||
| |
|
||||
| |
|
||||
+----[SHA256]-----+
|
||||
```
|
||||
|
||||
出现那个神秘的矩形就是生成好了
|
||||
|
||||
### 安装公钥
|
||||
|
||||
在本地终端：
|
||||
|
||||
```bash
|
||||
ssh-copy-id -pport user@remote
|
||||
```
|
||||
|
||||
`user` 为用户名，`remote` 为 IP 地址，`port` 为端口号。
|
||||
|
||||
也可以不加端口号：
|
||||
|
||||
```bash
|
||||
ssh-copy-id user@remote
|
||||
```
|
||||
|
||||
然后按要求输入密码，如果是用 root 登陆的，就是用的初始密码，如果是用上面设置的新用户，那就跟之前设置的用户密码一样
|
||||
|
||||
### 修改权限
|
||||
|
||||
**登入 VPS **后，在远程终端输入：
|
||||
|
||||
```bash
|
||||
chmod 600 .ssh/authorized_keys
|
||||
```
|
||||
|
||||
### 修改 sshd 配置文件
|
||||
|
||||
打开配置文件：
|
||||
|
||||
```bash
|
||||
nano /etc/ssh/sshd_config
|
||||
```
|
||||
|
||||
找到下面这两行，并改成这样：
|
||||
|
||||
```bash
|
||||
PermitRootLogin no
|
||||
AllowUsers username #如果没有这一行就手动添加
|
||||
RSAAuthentication yes #这一行我找不到就没有配置
|
||||
PubkeyAuthentication yes
|
||||
```
|
||||
|
||||
记得 username 要换成自己设置的名字，也就是上面配置的 jack
|
||||
|
||||
修改完按 <kbd>Ctrl</kbd>+<kbd>o</kbd> 保存，<kbd>Enter</kbd> 确认，<kbd>Ctrl</kbd>+<kbd>X</kbd> 退出编辑
|
||||
|
||||
重启 ssh 服务
|
||||
|
||||
```bash
|
||||
systemctl reload sshd
|
||||
```
|
||||
|
||||
或者
|
||||
|
||||
```bash
|
||||
service sshd restart
|
||||
```
|
||||
|
||||
### 禁用密码登陆和改端口
|
||||
|
||||
设置好后，试试看能不能用 ssh 登陆，如果可以，再 `sudo nano /etc/ssh/sshd_config` 修改配置，禁用密码登陆：
|
||||
|
||||
```bash
|
||||
PasswordAuthentication no
|
||||
```
|
||||
|
||||
### 修改默认登陆端口
|
||||
|
||||
然后改默认登陆端口[^1]，应该什么数都可以吧，什么 8080，9080，8888，3141……
|
||||
|
||||
找到 `Port 22` 这行，在下面加你要开的口
|
||||
|
||||
```bash
|
||||
Port 22
|
||||
Port 8888
|
||||
```
|
||||
|
||||
加完了之后重启
|
||||
|
||||
```bash
|
||||
sudo service sshd restart
|
||||
```
|
||||
|
||||
打开防火墙并给你设置的端口放行
|
||||
|
||||
```bash
|
||||
sudo ufw allow 8888
|
||||
sudo ufw enable
|
||||
```
|
||||
|
||||
`sudo ufw status` 查看防火墙状态，比如：
|
||||
|
||||
```bash
|
||||
Status: active
|
||||
|
||||
To Action From
|
||||
-- ------ ----
|
||||
8888 ALLOW Anywhere
|
||||
8888 (v6) ALLOW Anywhere (v6)
|
||||
```
|
||||
|
||||
然后重新连接一下 VPS，用设置好的端口登陆看看，如果没问题的话重新 `sudo nano /etc/ssh/sshd_config` ，注释掉 `Port 22` 那一行
|
||||
|
||||
## 3. 安装 ClamAV
|
||||
|
||||
参考：
|
||||
|
||||
- [如何在 Ubuntu 20.04 LTS 上安装 ClamAV - LinuxCapable](https://www.linuxcapable.com/zh-CN/%E5%A6%82%E4%BD%95%E5%9C%A8-ubuntu-20-04-%E4%B8%8A%E5%AE%89%E8%A3%85%E5%92%8C%E4%BD%BF%E7%94%A8-clamav/)
|
||||
- [How to Install and Use ClamAV on Ubuntu 20.04](https://linoxide.com/how-to-install-and-use-clamav-on-ubuntu-20-04/)
|
||||
|
||||
### 安装
|
||||
|
||||
```bash
|
||||
sudo apt update
|
||||
sudo apt install clamav clamav-daemon -y
|
||||
```
|
||||
|
||||
### 更新病毒数据库
|
||||
|
||||
先停止 `clamav-freshclam` 服务
|
||||
|
||||
```bash
|
||||
sudo systemctl stop clamav-freshclam
|
||||
```
|
||||
|
||||
执行更新：
|
||||
|
||||
```bash
|
||||
sudo freshclam
|
||||
```
|
||||
|
||||
启动`clamav-freshclam` 服务
|
||||
|
||||
```bash
|
||||
sudo systemctl start clamav-freshclam
|
||||
```
|
||||
|
||||
### 开机启动
|
||||
|
||||
```bash
|
||||
sudo systemctl is-enabled clamav-freshclam
|
||||
```
|
||||
|
||||
### 下载 ClamAV 数据库
|
||||
|
||||
先关掉 clamav-freshclam 再下载
|
||||
|
||||
```bash
|
||||
sudo systemctl stop clamav-freshclam
|
||||
sudo freshclam
|
||||
```
|
||||
|
||||
查看 clamav 的目录和文件的日期
|
||||
|
||||
```bash
|
||||
ls /var/lib/clamav/
|
||||
```
|
||||
|
||||
### 限制 Clamscan CPU 使用率
|
||||
|
||||
**`nice`**：降低 clamscan 的优先级（限制相对 cpu 时间）。
|
||||
|
||||
```bash
|
||||
sudo nice -n 15 clamscan
|
||||
```
|
||||
|
||||
**`cpulimit`**：限制绝对的 CPU 时间。
|
||||
安装 cpulimit
|
||||
|
||||
```bash
|
||||
sudo apt-get install cpulimit
|
||||
```
|
||||
|
||||
使用 cpulimit 来限制 clamscan：
|
||||
|
||||
```bash
|
||||
cpulimit -z -e clamscan -l 20 & clamscan -ir /
|
||||
```
|
||||
|
||||
### 常见 CLI
|
||||
|
||||
```bash
|
||||
clamscan /home/filename.docx #扫描特定目录或文件
|
||||
clamscan --no-summary /home/ #扫描结束时不显示摘要
|
||||
clamscan -i / #打印受感染的文件
|
||||
clamscan --bell -i /home #警惕病毒检测
|
||||
clamscan -r --remove /home/USER #删除受感染的文件
|
||||
```
|
||||
|
||||
### ClamAV 返回码
|
||||
|
||||
- 0：未发现病毒。
|
||||
- 1：发现病毒。
|
||||
- 2：发生了一些错误。
|
||||
|
||||
## 4. 安装 Fail2ban
|
||||
|
||||
安装 fail2ban 以阻止重复登录尝试
|
||||
|
||||
参考：[准备你的机器 - Mastodon documentation](https://docs.joinmastodon.org/zh-cn/admin/prerequisites/)
|
||||
|
||||
### 准备
|
||||
|
||||
更新软件包：
|
||||
|
||||
```bash
|
||||
sudo apt update
|
||||
sudo apt upgrade -y
|
||||
```
|
||||
|
||||
### 安装
|
||||
|
||||
参考：[如何在 Ubuntu 20.04 上安装和配置 Fail2ban](https://www.myfreax.com/install-configure-fail2ban-on-ubuntu-20-04/)
|
||||
|
||||
```bash
|
||||
sudo apt install fail2ban
|
||||
```
|
||||
|
||||
安装完后将自动启动，可以用`sudo systemctl status fail2ban` 查看运行状态
|
||||
|
||||
### 修改配置：
|
||||
|
||||
打开`/etc/fail2ban/jail.local`:
|
||||
|
||||
```bash
|
||||
sudo nano /etc/fail2ban/jail.local
|
||||
```
|
||||
|
||||
写入下面的内容，修改邮箱，如果端口改了，也要记得相应修改
|
||||
|
||||
```text
|
||||
[DEFAULT]
|
||||
destemail = your@email.here
|
||||
sendername = Fail2Ban
|
||||
|
||||
[sshd]
|
||||
enabled = true
|
||||
port = 22
|
||||
|
||||
[sshd-ddos]
|
||||
enabled = true
|
||||
port = 22
|
||||
```
|
||||
|
||||
重启 fail2ban:
|
||||
|
||||
```bash
|
||||
sudo systemctl restart fail2ban
|
||||
```
|
||||
|
||||
## 5. SSL 证书相关
|
||||
|
||||
还没弄明白怎么回事，待更
|
||||
|
||||
参考：
|
||||
|
||||
- 【[杂谈】防止 SSL 证书泄露你的源站 IP](https://luotianyi.vc/5056.html)
|
||||
- [WEB 服务器安全指南 - 防止源站 IP 暴露](https://blog.hicasper.com/post/114.html)
|
||||
|
||||
[^1]: [更改 VPS 的默认 SSH 端口 22 – 托尼的博客](https://zhucaidan.xyz/2019/12/281/)
|
||||
69
urara/2022-05-09-copywithin/+page.md
Normal file
69
urara/2022-05-09-copywithin/+page.md
Normal file
File diff suppressed because one or more lines are too long
77
urara/2022-05-23-win-sql/+page.md
Normal file
77
urara/2022-05-23-win-sql/+page.md
Normal file
|
|
@ -0,0 +1,77 @@
|
|||
---
|
||||
title: SQL · 在 Windows 10 上安装 sqlite
|
||||
created: 2022-05-23
|
||||
summary: 写给计算机小白的 sqlite 安装笔记
|
||||
tags:
|
||||
- SQL
|
||||
---
|
||||
|
||||
参考： [Site Unreachable](https://www.runoob.com/sqlite/sqlite-installation.html)
|
||||
|
||||
## 1. 下载二进制文件
|
||||
|
||||
- 请访问 [SQLite 下载页面](http://www.sqlite.org/download.html)，从 Windows 区下载预编译的二进制文件。
|
||||
- 您需要下载 **sqlite-tools-win32-\*.zip** 和 **sqlite-dll-win32-\*.zip** 压缩文件。
|
||||
|
||||
|
||||
|
||||
## 2. 创建安装文件夹
|
||||
|
||||
- 在 C 盘内创建文件夹 sqlite（在别的地方应该也可以？），并在此文件夹下解压上面两个压缩文件，将得到 sqlite3.def、sqlite3.dll 和 sqlite3.exe 文件。如：
|
||||
|
||||
|
||||
## 3. 添加环境变量
|
||||
|
||||
参考：[sqlite 在 windows 下载安装，配置环境变量](https://blog.csdn.net/gymaisyl/article/details/108073278)
|
||||
|
||||
首先，打开控制面板，如果找不到的话，直接搜索，例如：
|
||||
|
||||
|
||||
然后点击**系统与安全**，再点击 **系统**
|
||||
|
||||
|
||||
|
||||
在新窗口中点击**高级系统设置** -> **环境变量**
|
||||
|
||||
|
||||
|
||||
|
||||
如上图所示，在蓝色区域新建一个环境变量，此处填写一开始创建 sqlite 文件的路径，比如这里就是`C:\sqlite`
|
||||
|
||||
## 4. 命令提示符中查看 sqlite3 版本
|
||||
|
||||
**什么是命令提示符？**
|
||||
|
||||
> 命令提示符是大多数 Windows [操作系统中](https://zhcn.eyewated.com/%E6%93%8D%E4%BD%9C%E7%B3%BB%E7%BB%9F/)可用的[命令行解释器](https://zhcn.eyewated.com/%E4%BB%80%E4%B9%88%E6%98%AF%E5%91%BD%E4%BB%A4%E8%A1%8C%E8%A7%A3%E9%87%8A%E5%99%A8%EF%BC%9F/)应用程序。
|
||||
>
|
||||
> 命令提示符用于执行输入的[命令](https://zhcn.eyewated.com/%E4%BB%80%E4%B9%88%E6%98%AF%E8%AE%A1%E7%AE%97%E6%9C%BA%E5%91%BD%E4%BB%A4%EF%BC%9F/) 。 大多数这些命令用于通过脚本和[批处理文件](https://zhcn.eyewated.com/%E4%BB%80%E4%B9%88%E6%98%AFbat%E6%96%87%E4%BB%B6%EF%BC%9F/)自动执行任务，执行高级管理功能以及排除和解决某些类型的 Windows 问题。
|
||||
>
|
||||
> 命令提示符被正式称为*Windows 命令处理器，*但有时也被称为*命令外壳程序*或*cmd 提示符* ，甚至称其为文件名*cmd.exe* 。
|
||||
> ——[命令提示符（它是什么以及如何使用它）](https://zhcn.eyewated.com/%E5%91%BD%E4%BB%A4%E6%8F%90%E7%A4%BA%E7%AC%A6%EF%BC%9A%E5%AE%83%E6%98%AF%E4%BB%80%E4%B9%88%E4%BB%A5%E5%8F%8A%E5%A6%82%E4%BD%95%E4%BD%BF%E7%94%A8%E5%AE%83/)
|
||||
|
||||
我的理解就是用代码的方式操作电脑系统
|
||||
|
||||
**如何打开命令提示符：**
|
||||
|
||||
|
||||
打开后输入`sqlite3` ，出现下面的文字就是安装成功了
|
||||
|
||||
|
||||
## 常用命令行
|
||||
|
||||
- 需要在文件夹里运行
|
||||
- `cd` 的时候按 tab 可以自动填充文件名 （VS Code 里面按 command）
|
||||
|
||||
| 命令 | 功能 |
|
||||
| ---------------------- | ------------------------------------------------------------------------------------------- |
|
||||
| `ls`(win 用 `dir`) | 展示当前文件夹文件 |
|
||||
| `cd` | 改变当前文件夹（change directory) 按 tab 可以自动填充 |
|
||||
| `cd..` | 去到上个层级的文件夹 |
|
||||
| `clear` | 清除命令行记录 |
|
||||
| `mkdir` | 创建新文件夹(make directory) |
|
||||
| `touch`(win 用 `edit`) | 创建新文件（可以一次性创建多个） |
|
||||
| `mv` | 移动文件，第一个参数是要移动的文件，第二个是目的地，如 `mv index.html ../` 为移动到上一层级 |
|
||||
| `rmdir` | 删除空文件夹(remove directory) |
|
||||
| `rm -R` | 删除文件夹(R-recursively) |
|
||||
| `pwd` | 当前所在位置 |
|
||||
| `rm`(win 用 `del`) | 删除文件 |
|
||||
92
urara/2022-05-25-git/+page.md
Normal file
92
urara/2022-05-25-git/+page.md
Normal file
|
|
@ -0,0 +1,92 @@
|
|||
---
|
||||
title: Git · 常用操作笔记
|
||||
created: 2022-05-25
|
||||
summary: 每次更新博客进行的操作以及常见错误处理
|
||||
tags:
|
||||
- Git
|
||||
---
|
||||
|
||||
**资料：**
|
||||
|
||||
- [GIT CHEAT SHEET](https://education.github.com/git-cheat-sheet-education.pdf)
|
||||
- [45 个 Git 经典操作场景，专治不会合代码](https://mp.weixin.qq.com/s/BzdgZXyM1UaNCUCXySL9Rw)
|
||||
- [版本控制(Git) - 计算机教育中缺失的一课](https://missing-semester-cn.github.io/2020/version-control/)
|
||||
- [战壕里面的 Git（Git In The Trenches）](http://cbx33.github.io/gitt/intro.html)
|
||||
|
||||
## 每次更新博客进行的操作
|
||||
|
||||
### 1. 追踪所有文件
|
||||
|
||||
(除了 gitignore 里面的)，也可以单独加
|
||||
|
||||
`git add -A`
|
||||
|
||||
### 2. 提交上传信息
|
||||
|
||||
`git commit -m '一些信息，如fixed something etc'`
|
||||
|
||||
### 3. push 到 Github
|
||||
|
||||
`git push origin main`
|
||||
|
||||
等待一会儿就好了，如果不行，换个网或者关掉 VPN 看看
|
||||
|
||||
## 常用 Git 操作
|
||||
|
||||
- `.gitignore`: 放不想传到 git repo 的文件/文件夹
|
||||
- 当内容改动很多的时候，最好开一个 branch
|
||||
- VSCode 文件后面的字母：
|
||||
- U：untrack
|
||||
- M: modified
|
||||
- A : on track
|
||||
- 一般不在`main` 或`master` 修改代码，而是开一个 branch，确定好后再 merge
|
||||
- 下载叫做 pull，上传是 push
|
||||
|
||||
| 命令 | 作用 |
|
||||
| :------------------------------------------------------------- | -------------------------------------------------- |
|
||||
| `git config --global user.name "名字"` | 设置全局用户名 |
|
||||
| `git config --global user.email "邮箱"` | 设置全局邮箱 |
|
||||
| `git init` | 初始化仓库 |
|
||||
| `git add -A` | 追踪所有文件（除了.gitignore里的），也可以单独添加 |
|
||||
| `git commit -m "提交信息"` | 提交更改，-m 后跟提交信息 |
|
||||
| `git status` | 查看仓库状态 |
|
||||
| `git log` | 查看提交日志，按 Q 退出 |
|
||||
| `git reset --hard <commit_id>` | 回到特定版本 |
|
||||
| `git reset --hard HEAD^` | 返回上一次改动（还没有commit） |
|
||||
| `git branch` | 列出所有分支，按 Q 退出 |
|
||||
| `git branch <branch_name>` | 创建新分支 |
|
||||
| `git merge <branch_name>` | 将指定分支合并到当前分支 |
|
||||
| `git checkout -b <new_branch>` | 创建新分支并切换到该分支 |
|
||||
| `git checkout <branch_name>` | 切换到指定分支 |
|
||||
| `git remote add origin https://github.com/username/repo.git` | 添加远程仓库 |
|
||||
| `git pull` | 从远程仓库拉取更新 |
|
||||
| `git push origin <branch_name>` | 推送指定分支到远程仓库 |
|
||||
| `git config --global push.default current` | 设置推送默认行为为推送当前分支到同名远程分支 [^1] |
|
||||
| `git commit --amend --author="Name <email@example.com>"` | 修改最近一次提交的作者信息 |
|
||||
| `git config --global push.autoSetupRemote true` | 自动设置远程跟踪分支 |
|
||||
| `git config --global http.proxy http://proxy.example.com:8080` | 设置全局 HTTP 代理[^2] |
|
||||
|
||||
## 常见问题
|
||||
|
||||
下面是一些我看过的文章
|
||||
|
||||
### 版本回滚
|
||||
|
||||
- [项目中 git 怎么回退到之前的版本 & git 放弃本地修改，强制拉取更新](https://mp.weixin.qq.com/s/MCtCQg7rcokf6IrZVINF4w)
|
||||
- [Git 学习笔记：版本回退](https://mp.weixin.qq.com/s/98wEvWU6OYVkPauWn-XXng)
|
||||
- [如果你还不会用 git 回滚代码，那你一定要来看看](https://mp.weixin.qq.com/s/FPiSyeivTKhoAgJmORZFog)
|
||||
|
||||
### 报错处理
|
||||
|
||||
- [git push 错误 failed to push some refs to 解决方法](https://blog.csdn.net/qq_39416311/article/details/102219428)
|
||||
- [git 上传忽略 node_modules](https://blog.csdn.net/jiandan1127/article/details/81205530)
|
||||
|
||||
### 博客相关
|
||||
|
||||
- [GitHub Pages 绑定来自阿里云的域名](https://blog.csdn.net/qq_29232943/article/details/52786603)
|
||||
- [Hexo 发布到 Github 丢失 readme 和 CNAME 解决方案](https://www.cnblogs.com/LandWind/articles/8269636.html)
|
||||
- [把 HUGO 博客托管到 GITHUB 上](https://www.freesion.com/article/37111127345/)
|
||||
|
||||
### 其他
|
||||
|
||||
- [Github 上如何添加 LICENSE 文件？](https://www.cnblogs.com/chenmingjun/p/8555906.html)
|
||||
133
urara/2022-05-25-hypothesis/+page.md
Normal file
133
urara/2022-05-25-hypothesis/+page.md
Normal file
|
|
@ -0,0 +1,133 @@
|
|||
---
|
||||
title: Hypothesis 使用小记
|
||||
created: 2022-05-25
|
||||
summary: Hypothesis同步到Obsidian / Logseq的方法
|
||||
tags:
|
||||
- Logseq
|
||||
- Obsidian
|
||||
---
|
||||
|
||||
Hypothesis 太好用了，方便我满世界乱画写屁话(?)，用它在网页上高亮，就像用荧光笔在纸上标注一样轻松 ，写标注就写在 3M 便利贴上，哪里都好贴，而且还支持用 Markdown 写，真的越用越顺手
|
||||
|
||||
它导出的笔记提供了导出的 API，可以轻松同步到 Obsidian / Logseq，真是平易近人呢！
|
||||
|
||||
我的使用例子：
|
||||
|
||||
我在 Obsidian 中导出的笔记：
|
||||
|
||||
|
||||
一些基础的部分我会省略掉，详情可以看这篇文章：[开源、可定制的网页批注工具——Hypothesis](https://type.cyhsu.xyz/2020/10/hypothesis-tutorial/)
|
||||
|
||||
在下面这些操作之前，需要先注册一个 Hypotheis 账号，并安装浏览器扩展：
|
||||
|
||||
- 注册：[Get started.](https://web.hypothes.is/start/#)
|
||||
- Chrome 扩展：[Hypothesis - Web & PDF Annotation](https://chrome.google.com/webstore/detail/hypothesis-web-pdf-annota/bjfhmglciegochdpefhhlphglcehbmek)
|
||||
然后在浏览器扩展中登陆。
|
||||
|
||||
## 同步到 Logseq
|
||||
|
||||
Logseq 我用得不多，如果有写错的，欢迎给我提建议～
|
||||
|
||||
### 1. 打开插件系统开关
|
||||
|
||||
（如果打开了可以省略这个）
|
||||
|
||||
|
||||
|
||||
如果在国内连接插件市场，最好设置一下代理，不然可能装不上，具体的设置需要看一下 VPN 端口号之类的。
|
||||
|
||||
### 2. 安装 Hypothesis 插件
|
||||
|
||||
打开 Logseq 的插件市场，找到如下名为
|
||||
**Hypothesis**的插件：
|
||||
|
||||
如果一直下载不了的话，可以直接在 Github 下载：[logseq-hypothesis](https://github.com/c6p/logseq-hypothesis)
|
||||
|
||||
然后在这里导入：
|
||||
|
||||
|
||||
### 3. 获取 API Token
|
||||
|
||||
在这里生成一个 API Token：[Regenerate your API token](https://hypothes.is/account/developer)
|
||||
|
||||
复制后点击 Logseq 右上角的这个 H 的标志：
|
||||
|
||||
|
||||
然后填入刚刚复制的 API Token 和用户名
|
||||
|
||||
|
||||
|
||||
用户名跟 Hypothesis 这里显示的一样，比如我的就是 Sevicheeee
|
||||
|
||||
|
||||
### 4. 同步笔记
|
||||
|
||||
点击 `Fetch Latest Notes` 会拉取最新的笔记
|
||||
|
||||
如果选择了指定页面，然后点`Add page notes to graph`，会自动生成一篇相应的笔记，比如：
|
||||
|
||||
|
||||
### 5. 修改笔记模板
|
||||
|
||||
如果想修改笔记模板的话，可以在`setting`中修改：
|
||||
|
||||
|
||||
## 同步到 Obsidian
|
||||
|
||||
### 1. 安装 Hypothesis 插件
|
||||
|
||||
如图所示：
|
||||
|
||||
|
||||
Github: [obsidian-hypothesis-plugin](https://github.com/weichenw/obsidian-hypothesis-plugin)
|
||||
|
||||
### 2. API 配置
|
||||
|
||||
打开插件设置，点击右上角的`Connect`, 输入你的 API Token 并保存，如果没有获取的话，请在这里获取：[Regenerate your API token](https://hypothes.is/account/developer)
|
||||
|
||||
|
||||
|
||||
可以在这里选择笔记保存的位置：
|
||||
|
||||
|
||||
其中`Use Domain Folders` 是按域名来划分文件结构，如果没有打开的话就是默认一篇笔记一个 md 文档，如下图红框所示就是打开了这个，下面蓝色的就是没打开时的输出结构
|
||||
|
||||
|
||||
### 3. 笔记模板配置
|
||||
|
||||
可以在右边的文本框内设置笔记输出格式
|
||||
|
||||
说实话，我没有怎么看懂 Orz, 然后这是我的模板:
|
||||
|
||||
```js
|
||||
{% if is_new_article %}# {{title}}
|
||||
|
||||
## Metadata
|
||||
{% if author %}- Author: [{{author}}]({{authorUrl}}){% endif %}
|
||||
- Title: {{title}}
|
||||
{% if url %}- Reference: {{url}}{% endif %}
|
||||
- Category: #source/article🗞{% endif %}
|
||||
- Tags:
|
||||
|
||||
{% if is_new_article -%}## Highlights{%- endif %}
|
||||
{% for highlight in highlights -%}- {{highlight.text}}
|
||||
{% if highlight.tags | length %} - Tags: {% for tag in highlight.tags -%}#{{tag| replace(" ", "-")}} {%- endfor %}{%- endif %}
|
||||
{% if highlight.annotation %} - Annotation: {{highlight.annotation}}{%- endif -%}{%- endfor -%}
|
||||
```
|
||||
|
||||
效果：
|
||||
|
||||
|
||||
### 4. 更新笔记
|
||||
|
||||
点击右边这个标志就可以更新笔记了～也可以在设置里打开启动时自动抓取的设置
|
||||
|
||||
|
||||
## 订阅 Hypothesis 的 RSS
|
||||
|
||||
- 文档：[Atom & RSS Feeds for Annotations](https://web.hypothes.is/help/atom-rss-feeds-for-annotations/)
|
||||
- 工具：[Subscribe to Hypothesis web annotations](https://diegodlh.github.io/hfeed/)
|
||||
|
||||
## 其他参考
|
||||
|
||||
- [我的 Obsidian 使用经验 - 程序员的喵](https://catcoding.me/p/obsidian-for-programmer/)
|
||||
300
urara/2022-05-26-write-a-page-template/+page.md
Normal file
300
urara/2022-05-26-write-a-page-template/+page.md
Normal file
|
|
@ -0,0 +1,300 @@
|
|||
---
|
||||
title: 为博客写一个Project showcase 页面
|
||||
created: 2022-05-26
|
||||
summary: 第一次Pull Request的经历
|
||||
tags:
|
||||
- Svelte
|
||||
- Open Source
|
||||
---
|
||||
|
||||
这两天为博客写了一个 Project 的页面用来放我的作品，这里记录一下我是怎么写（模仿）的，我对 Svelte 语法的了解不多，没有特别深入学习，只是在官方看了下文档和用了下他们的 [交互式教程](https://www.sveltejs.cn/tutorial/basics) ，编码的过程是一边学习一边模仿慢慢摸索的，虽然最终没有 merge 到 repo 中，但我觉得整个过程都蛮兴奋的。
|
||||
|
||||
既然有了博客，那我肯定是要写一下这个过程的。
|
||||
|
||||
## 1. 分析需求
|
||||
|
||||
我想要的是一个独立的 Page，而不是一个 Post 页面，最后把它放在导航栏里面。
|
||||
想要有以下这几个功能：
|
||||
|
||||
- 技术栈分类
|
||||
- 项目类别筛选
|
||||
- 项目展示
|
||||
|
||||
主要有这些信息的展示：
|
||||
|
||||
- 项目标题
|
||||
- 项目图片
|
||||
- 项目描述
|
||||
- 技术栈
|
||||
- 项目类别
|
||||
|
||||
## 2. 画原型图
|
||||
|
||||
明确了需求后，参考了几个项目平台的布局，在 [Whimsical](https://whimsical.com/) 上画了原型图如下：
|
||||
|
||||
|
||||
目前还没有做上面 Tag 的分类功能，之后可能会做吧
|
||||
|
||||
## 2. 创建组件样式 CSS
|
||||
|
||||
为了统一风格，我在博客现有框架里四处搜寻可用的组件样式，想在这基础上修改，然后我找到了作者 藍 在 Tailwind Play 上的友链组件，感觉很适合，然后就直接在这个 Tailwind Play Demo 上进行了样式修改，不过此时填写的数据都是死数据，后面再进行修改。
|
||||
|
||||
因为我之前没有怎么用过 Tailwind，所以是一边对照 Tailwind 文档修改的，然后 Tailwind Play 上的代码提示功能真的很新手友好，hover CSS class 的时候会显示具体的 CSS 原始参数，很直观。
|
||||
|
||||
|
||||
最后我构建的 Demo 样式如下：
|
||||
[Tailwind Play](https://play.tailwindcss.com/uQwYojgpuk?layout=horizontal)
|
||||
|
||||
|
||||
|
||||
## 4. 编写组件代码
|
||||
|
||||
整个页面的构建跟 Friend 页面很像，我分析了 Friend 页面所涉及到的代码和结构，然后一点点模仿构建 Project 页面。
|
||||
|
||||
### 数据
|
||||
|
||||
首先根据需求确定传入的数据及其格式，以便后面使用 TypeScript 的提示
|
||||
|
||||
- 参考：`/src/lib/config/friends.ts`
|
||||
- 新建：`/src/lib/config/projects.ts`
|
||||
|
||||
```ts twoslash title="/src/lib/config/friends.ts"
|
||||
export interface FriendOld {
|
||||
// hCard+XFN
|
||||
id: string // HTML id
|
||||
rel?: string // XFN, contact / acquaintance / friend
|
||||
link?: string // URL
|
||||
html?: string // HTML
|
||||
title?: string // 标题
|
||||
descr?: string // 描述
|
||||
avatar?: string // 头像
|
||||
name?: string // backwards compatibility
|
||||
}
|
||||
|
||||
export type Friend = {
|
||||
id: string // HTML id
|
||||
rel?: string // XHTML Friends Network
|
||||
link?: string // URL
|
||||
html?: string // Custom HTML
|
||||
|
||||
title?: string // 标题
|
||||
name?: string // 人名
|
||||
avatar?: string // 头像
|
||||
descr?: string // 描述
|
||||
class?: {
|
||||
avatar?: string // 头像类名
|
||||
img?: string // 图片类名
|
||||
}
|
||||
}
|
||||
|
||||
export const friends: Friend[] = [
|
||||
{
|
||||
id: 'id',
|
||||
rel: '',
|
||||
title: '',
|
||||
name: '',
|
||||
link: '',
|
||||
descr: '',
|
||||
avatar: ''
|
||||
}
|
||||
]
|
||||
```
|
||||
|
||||
```ts twoslash title="/src/lib/config/projects.ts"
|
||||
export type Project = {
|
||||
id: string
|
||||
name?: string
|
||||
tags?: string[]
|
||||
feature?: string
|
||||
description?: string
|
||||
img?: string
|
||||
link?: string
|
||||
}
|
||||
|
||||
export const projects: Project[] = [
|
||||
{
|
||||
id: 'coach',
|
||||
name: 'Find a Coach',
|
||||
tags: ['Vue 3', 'Composition API'],
|
||||
feature: 'Vue3',
|
||||
description:
|
||||
'既然如何， 问题的关键究竟为何？ 要想清楚，科学和人文谁更有意义，到底是一种怎么样的存在。 普列姆昌德曾经提到过，希望的灯一旦熄灭，生活刹那间变成了一片黑暗。这启发了我， 那么， 我认为， 总结的来说，',
|
||||
img: 'https://uneorange.oss-cn-guangzhou.aliyuncs.com/202205251801454.avif',
|
||||
link: 'https://sevic.me'
|
||||
}
|
||||
]
|
||||
```
|
||||
|
||||
### 组件
|
||||
|
||||
将 CSS 复制进去，并注入数据
|
||||
|
||||
- 参考：`/src/lib/components/extra/friend.svelte`
|
||||
- 新建：`/src/lib/components/extra/project.svelte`
|
||||
|
||||
```html title="/src/lib/components/extra/friend.svelte"
|
||||
<script lang="ts">
|
||||
import type { Friend } from '$lib/config/friends'
|
||||
import Footer from '$lib/components/footer.svelte'
|
||||
export let item: unknown
|
||||
let friend = item as unknown as Friend
|
||||
</script>
|
||||
|
||||
{#if friend.id === 'footer'}
|
||||
<footer rounded="{true}" class="p-4 md:p-8" />
|
||||
{:else if friend.html}
|
||||
<a id="{friend.id}" rel="{friend.rel}" href="{friend.link}" class="h-card u-url">{@html friend.html}</a>
|
||||
{:else}
|
||||
<a
|
||||
id="{friend.id}"
|
||||
rel="{friend.rel}"
|
||||
href="{friend.link}"
|
||||
class="card bg-base-100 shadow-xl hover:shadow-2xl transition-shadow h-card u-url">
|
||||
<div class="absolute text-4xl font-bold opacity-5 rotate-6 leading-tight top-4">{friend.name ?? ''}{friend.title ?? ''}</div>
|
||||
<div class="card-body p-4">
|
||||
<div class="flex items-center gap-4">
|
||||
{#if friend.avatar}
|
||||
<div class="avatar {friend.class?.avatar} shrink-0 w-16 mb-auto">
|
||||
<img class="{friend.class?.img ?? 'rounded-xl'} u-photo" src="{friend.avatar}" alt="{friend.title}" />
|
||||
</div>
|
||||
{:else}
|
||||
<div class="avatar {friend.class?.avatar} placeholder mb-auto">
|
||||
<div class="{friend.class?.img ?? 'bg-neutral-focus text-neutral-content shadow-inner rounded-xl'} w-16">
|
||||
<span class="text-3xl">{(friend.name ?? friend.title).charAt(0)}</span>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
<div class="card-title flex-col gap-0 flex-1 items-end">
|
||||
<span class="text-right p-name">{friend.name ?? ''}</span>
|
||||
<span class="opacity-50 text-right">{friend.title}</span>
|
||||
</div>
|
||||
</div>
|
||||
{#if friend.descr}
|
||||
<div class="prose opacity-70 p-note">{friend.descr}</div>
|
||||
{/if}
|
||||
</div>
|
||||
</a>
|
||||
{/if}
|
||||
```
|
||||
|
||||
根据具体的页面效果修改了 Demo 中的 CSS 样式
|
||||
|
||||
```html title="/src/lib/components/extra/project.svelte"
|
||||
<script lang="ts">
|
||||
import type { Project } from '$lib/config/projects'
|
||||
import Footer from '$lib/components/footer.svelte'
|
||||
export let item: unknown
|
||||
let project = item as unknown as Project
|
||||
let tags = project.tags
|
||||
</script>
|
||||
|
||||
{#if project.id === 'footer'}
|
||||
<footer rounded="{true}" class="max-w-4xl mx-auto p-4 md:p-8" />
|
||||
{:else}
|
||||
<a
|
||||
id="{project.id}"
|
||||
href="{project.link}"
|
||||
class="card mx-auto max-w-4xl bg-base-100 shadow-xl transition-shadow mb-7 h-card u-url hover:shadow-2xl">
|
||||
<div class="absolute text-5xl font-bold opacity-5 rotate-6 leading-tight top-2 right-0">{project.feature}</div>
|
||||
<div class="card-body p-4">
|
||||
<div class="flex flex-col md:flex-row items-start gap-4">
|
||||
<div class="mb-auto max-w-full shrink-0 md:max-w-xs">
|
||||
<img class="rounded-md" src="{project.img}" alt="{project.description}" />
|
||||
</div>
|
||||
<div class="card-title flex-1 flex-col items-start gap-4">
|
||||
<div>
|
||||
<h2 class="p-name text-left text-2xl mb-2">{project.name}</h2>
|
||||
<div class="mb-3 text-base font-normal">
|
||||
{#each tags as tag}
|
||||
<span class="btn btn-sm btn-ghost normal-case border-dotted border-base-content/20 border-2 my-1 mr-1">{tag}</span>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-left text-base font-normal opacity-70">{@html project.description}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
{/if}
|
||||
```
|
||||
|
||||
### 页面
|
||||
|
||||
- 参考：`/urara/friends/index.svelte`
|
||||
- 新建：`/urara/projects/index.svelte`
|
||||
|
||||
```html title="/urara/friends/index.svelte"
|
||||
<script lang="ts">
|
||||
// @ts-nocheck
|
||||
import Masonry from 'svelte-bricks'
|
||||
import { Friend, friends as allFriends } from '$lib/config/friends'
|
||||
import Head from '$lib/components/head.svelte'
|
||||
import FriendComponent from '$lib/components/extra/friend.svelte'
|
||||
|
||||
const rnd = Math.random()
|
||||
const fy = (a: Friend[], r = 0, c = a.length) => {
|
||||
while (c) (r = (rnd * c--) | 0), ([a[c], a[r]] = [a[r], a[c]])
|
||||
return a
|
||||
}
|
||||
let items: { id: string }[] = [...fy(allFriends as { id: string }[]), { id: 'footer' }]
|
||||
let width: number, height: number
|
||||
</script>
|
||||
|
||||
<head />
|
||||
|
||||
<Masonry
|
||||
{items}
|
||||
minColWidth="{384}"
|
||||
maxColWidth="{384}"
|
||||
gap="{32}"
|
||||
let:item
|
||||
class="mx-4 sm:mx-8 md:my-4 lg:mx-16 lg:my-8 xl:mx-32 xl:my-16"
|
||||
bind:width
|
||||
bind:height>
|
||||
<FriendComponent {item} />
|
||||
</Masonry>
|
||||
```
|
||||
|
||||
**Projects 页面**
|
||||
|
||||
因为我没有用到瀑布流布局，所以删掉了一些组件和 function
|
||||
|
||||
```html title="/urara/projects/index.svelte"
|
||||
<script lang="ts">
|
||||
import { projects as allProjects } from '$lib/config/projects'
|
||||
import Head from '$lib/components/head.svelte'
|
||||
import ProjectComponent from '$lib/components/extra/projects.svelte'
|
||||
|
||||
let items: { id: string }[] = [...(allProjects as { id: string }[]), { id: 'footer' }]
|
||||
</script>
|
||||
|
||||
<head />
|
||||
|
||||
{#each items as item}
|
||||
<ProjectComponent {item} />
|
||||
{/each}
|
||||
```
|
||||
|
||||
### 响应式布局
|
||||
|
||||
参考 [Tailwind 的响应式设计指南](https://tailwindcss.com/docs/responsive-design) ，修改了卡片`flex` 的方向，以及图片的宽度，以适应小尺寸屏幕。
|
||||
|
||||
## 5. 测试
|
||||
|
||||
其实有错误的话 `pnpm dev` 以及 `pnpm build` 的时候都会提醒，但我后面发现也可以用 `pnpm check` 来检查。过程中我好像没有遇到什么 Bug。
|
||||
|
||||
## 6. Pull request 到 Github
|
||||
|
||||
先看了一下 Repo 作者写的 [contributing docs](https://github.com/importantimport/urara/blob/main/.github/CONTRIBUTING.md)，了解 Contribute 的规范。
|
||||
|
||||
按照相应步骤做了之后，Google 了一下如何 pull request，照着 FreeCodeCamp 的这篇进行了操作：
|
||||
[如何在 GitHub 提交第一个 pull request](https://chinese.freecodecamp.org/news/how-to-make-your-first-pull-request-on-github/) ，然后成功 Pull 了一个 Request，但后面发现有的文件没有改，造成了 bug，就删除了原 Request 重新 Pull。
|
||||
|
||||
最后终于创建成功了我的第一个 Pull request！
|
||||
链接：[feat: ✨ add project page by Sevichecc · Pull Request #19 · importantimport/urara · GitHub](https://github.com/importantimport/urara/pull/19)
|
||||
|
||||
## 7. Last but not least
|
||||
|
||||
写一篇这样的博文，并发表到互联网。
|
||||
|
||||
||好啦我知道这篇文章有点臭屁，但下次还敢……||
|
||||
89
urara/2022-05-30-contabo-oss/+page.md
Normal file
89
urara/2022-05-30-contabo-oss/+page.md
Normal file
|
|
@ -0,0 +1,89 @@
|
|||
---
|
||||
title: Contabo OSS + PicGo 图床配置
|
||||
created: 2022-05-30
|
||||
summary: OSS自建图床笔记
|
||||
tags:
|
||||
- OSS
|
||||
- Self-host
|
||||
---
|
||||
|
||||
## 1. 购买套餐
|
||||
|
||||
在官网购买 OSS 套餐，按月付费：[Object Storage: S3-Compatible with Free Data Transfer](https://contabo.com/en/object-storage/)
|
||||
|
||||
我没有修改设置，选的 250G 的容量，位于美国
|
||||
|
||||
## 2. 创建 Bucket
|
||||
|
||||
进入控制面板：[Contabo Object Storage Panel](https://new.contabo.com/storage/object-storage/buckets)，然后点击`Create Bucket` 创建存储桶
|
||||
|
||||
|
||||
其中 **Bucket Name** 可以随便写，**Select Region** 不用选，默认是购买 OSS 时所选择的区域，如果换区域也可以另选
|
||||
|
||||
创建好后如图：
|
||||
（这个 Public Access 应该默认是红色的，也就是没有打开，我这里打开了）
|
||||
|
||||
|
||||
## 3. 安装 PicGo 插件
|
||||
|
||||
在插件里面搜`s3`，然后安装第一个：
|
||||
|
||||
|
||||
安装好后，在设置里选择打开，
|
||||
|
||||
|
||||
## 4. 配置插件
|
||||
|
||||
|
||||
|
||||
### 应用密钥 ID 和 应用密钥
|
||||
|
||||
打开[Contabo Object Storage Panel](https://new.contabo.com/account/security)的 **Acount** > **Security & Access** 面板，找到最下面的 **S3 Object Storage Credentials**
|
||||
|
||||
这里对应插件设置里的：
|
||||
|
||||
- **应用密钥 ID** → **Access Key**
|
||||
- **应用密钥** → **Secret Key**
|
||||
|
||||
|
||||
### 桶 / 自定义节点 /自定义域名
|
||||
|
||||
- **桶** → **Bucket Name**
|
||||
- **自定义节点** → Bucket URL 中桶名字前的部分，比如这里就是`https://usc1.contabostorage.com`
|
||||
|
||||
- **自定义域名**，需要先点击 Quick Action 里面的 Share 标志，打开 Public Sharing，然后里面的链接对应的就是设置里的自定义域名：
|
||||
|
||||
|
||||
### 其他设置
|
||||
|
||||
打开这两项：
|
||||
|
||||
|
||||
然后文件路径对应的是 Bucket 里面存储文件的路径，具体的设置可以参照：[GitHub - wayjam/picgo-plugin-s3: PicGo S3 插件](https://github.com/wayjam/picgo-plugin-s3)
|
||||
|
||||
## 5. 其他
|
||||
|
||||
### Obsidian 中的图床设置
|
||||
|
||||
先安装这个`Image auto upload Plugin`插件：
|
||||
|
||||
|
||||
然后在 PicGo 设置里面 → **设置 Server**→ 打开 Server 开关
|
||||
|
||||
|
||||
|
||||
|
||||
然后 Obsidian 插件中这样设置：
|
||||
|
||||
PicGo Server ：`http://127.0.0.1:36677/upload`
|
||||
|
||||
端口号不一定是 36677，只要一一对应就好。
|
||||
|
||||
|
||||
设置好后，在后台保持 PicGo 开启，就可以在 Obsidian 里面粘贴一键上传图床了～
|
||||
|
||||
### 更多 PicGO 插件：
|
||||
|
||||
[GitHub - PicGo/Awesome-PicGo: A collection of awesome projects using PicGo.](https://github.com/PicGo/Awesome-PicGo)
|
||||
|
||||
有图床备份、图片压缩、图床转移等插件，不过我都没有试过……
|
||||
90
urara/2022-06-10-backtotop/+page.md
Normal file
90
urara/2022-06-10-backtotop/+page.md
Normal file
|
|
@ -0,0 +1,90 @@
|
|||
---
|
||||
title: 实现一个返回页面顶部的 Vue3 组件
|
||||
created: 2022-06-10
|
||||
summary: 结合流畅的动画平滑滚动到页面顶部
|
||||
tags:
|
||||
- Vue3
|
||||
---
|
||||
|
||||
主要参考：[Simple Vue.js and Tailwind.css Scroll To Top Button | Adam Bailey](https://adambailey.io/blog/scroll-to-top-button-vue/)
|
||||
|
||||
CSS 库：[Bootstrap V5.2](https://getbootstrap.com/docs/5.2/getting-started/introduction/)
|
||||
|
||||
- 按钮的布局方式为 sticky
|
||||
- 因为可能需要频繁切换显示状态，所以用`v-show` 而不是 `v-if`来控制按钮可见性
|
||||
- 使用 Vue 中内置的`<transition>`组件实现状态之间的平滑过渡
|
||||
|
||||
```vue title="BackToTop.vue"
|
||||
<template>
|
||||
<div class="position-sticky bottom-0 end-0 w-100 d-flex justify-content-end b-0 pb-3 pe-5">
|
||||
<transition>
|
||||
<button class="btn btn-secondary btn-sm" v-show="isVisible" @click="scrollToTop" aria-label="scroll to top of the page">
|
||||
<img src="../assets/to-top.min.svg" alt="an arrow point to top" />
|
||||
</button>
|
||||
</transition>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, ref, onMounted, onBeforeUnmount } from 'vue'
|
||||
|
||||
export default defineComponent({
|
||||
name: 'BackToTop',
|
||||
setup() {
|
||||
const isVisible = ref(false)
|
||||
const handleScroll = () => {
|
||||
isVisible.value = window.scrollY > 0
|
||||
}
|
||||
const scrollToTop = () => {
|
||||
window.scrollTo({
|
||||
top: 0,
|
||||
behavior: 'smooth'
|
||||
})
|
||||
}
|
||||
onMounted(() => {
|
||||
window.addEventListener('scroll', handleScroll)
|
||||
})
|
||||
onBeforeUnmount(() => {
|
||||
window.removeEventListener('scroll', handleScroll)
|
||||
})
|
||||
return {
|
||||
isVisible,
|
||||
handleScroll,
|
||||
scrollToTop
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.v-enter-active,
|
||||
.v-leave-active {
|
||||
transition: opacity 0.2s ease;
|
||||
}
|
||||
.v-enter-from,
|
||||
.v-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
```html title="to-top.min.svg"
|
||||
<svg width="20" height="20" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M24.008 14.1V42M12 26l12-12 12 12M12 6h24"
|
||||
stroke="#fff"
|
||||
stroke-width="4"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round" />
|
||||
</svg>
|
||||
```
|
||||
|
||||
其他参考/实现方式：
|
||||
|
||||
- [vue 返回顶部的组件 BackTop](https://blog.csdn.net/m0_46217225/article/details/117933815)
|
||||
- [vue-simple-scroll-up/ScrollToTop.vue · GitHub](https://github.com/asdf1899/vue-simple-scroll-up/blob/master/src/ScrollToTop.vue)
|
||||
- [Vue.js - Scroll Back To Top Button Without Library](https://codepen.io/webty_mizusawa/pen/QWLMeqE)
|
||||
- [Vue3 从 0 到 1 组件开发-基础组件：BackTop 回顶 - 掘金](https://juejin.cn/post/6993729338843594783)
|
||||
- [vue 相同路径刷新怎么回到顶部 - 掘金](https://juejin.cn/post/6873264845915947016)
|
||||
|
||||
题外话：||BootStrap 的文档写得好烂||
|
||||
129
urara/2022-06-12-cloudflare/+page.md
Normal file
129
urara/2022-06-12-cloudflare/+page.md
Normal file
|
|
@ -0,0 +1,129 @@
|
|||
---
|
||||
title: VPS · 配置 Cloudflare 的免费 SSL 证书
|
||||
created: 2022-06-12
|
||||
summary: 关于如何为多个域名配置SSL证书的操作笔记
|
||||
tags:
|
||||
- Nginx
|
||||
- VPS
|
||||
---
|
||||
|
||||
声明：我不知道这样安不安全哈，It just works，个人笔记，操作有风险
|
||||
|
||||
参考：[申请 CloudFlare 免费 SSL 证书并应用到 nginx – 65536.io | 自娱自乐](https://65536.io/2020/03/607.html)
|
||||
|
||||
先设置加密方式为`完全` ，否则之后可能会出现 526 错误
|
||||
|
||||
|
||||
|
||||
## 1. 创建证书
|
||||
|
||||
首先将主域名绑定到 Cloudflare，然后在`SSL/TLS` 下的源服务器证书处，点击`创建证书`
|
||||
|
||||
|
||||
然后选择私钥和 CSR 生成方式，以及证书的有效期（也可以不改），点击`创建`
|
||||
|
||||
|
||||
将下面的证书和私钥暂时复制到某个安全的地方，点击确定
|
||||
|
||||
|
||||
## 2. 密钥上传到 VPS
|
||||
|
||||
连接 VPS 之后，创建一个文件夹存入密钥，我将其存到`/etc/nginx/cert/` 路径下
|
||||
|
||||
```bash
|
||||
sudo mkdir /etc/nginx/cert && cd /etc/nginx/cert
|
||||
```
|
||||
|
||||
写入证书,粘贴入刚刚保存的`证书` 栏里面的内容
|
||||
|
||||
```bash
|
||||
sudo nano public.pem
|
||||
```
|
||||
|
||||
修改权限
|
||||
|
||||
```bash
|
||||
sudo chmod 644 public.pem
|
||||
```
|
||||
|
||||
写入私钥，粘贴入刚刚保存的`私钥` 栏里面的内容
|
||||
|
||||
```bash
|
||||
sudo nano private.key
|
||||
```
|
||||
|
||||
修改权限
|
||||
|
||||
```bash
|
||||
sudo chmod 600 private.key
|
||||
```
|
||||
|
||||
## 3. 修改 Nginx 配置
|
||||
|
||||
参考：[How to Redirect HTTP to HTTPS in Nginx](https://phoenixnap.com/kb/redirect-http-to-https-nginx)
|
||||
|
||||
如果有用防火墙，请先打开 80 端口和 443 端口，不然可能会像我一样，卡在一个毫无意义的 522 Error 上 ^ ^
|
||||
|
||||
```bash
|
||||
sudo ufw allow 80
|
||||
sudo ufw allow 443
|
||||
```
|
||||
|
||||
打开 Nginx 配置
|
||||
|
||||
```bash
|
||||
sudo nano /etc/nginx/nginx.conf
|
||||
```
|
||||
|
||||
在 http 块里面配置一个默认 server，将 http 重定向到 https
|
||||
|
||||
```bash
|
||||
# 默认server
|
||||
server {
|
||||
listen 80 default_server;
|
||||
server_name _;
|
||||
return 301 https://$host$request_uri;
|
||||
}
|
||||
|
||||
# ssl配置
|
||||
server {
|
||||
listen 443 ssl default_server;
|
||||
server_name *.example1.com;
|
||||
|
||||
ssl_certificate /etc/nginx/cert/public.pem;
|
||||
ssl_certificate_key /etc/nginx/cert/private.key;
|
||||
}
|
||||
|
||||
# 如果有多个域名，可以这样配置，证书也要按之前的添加一下
|
||||
server {
|
||||
listen 443 ssl;
|
||||
server_name *.example2.com;
|
||||
|
||||
ssl_certificate /etc/nginx/cert/example2/public.pem;
|
||||
ssl_certificate_key /etc/nginx/cert/example2/private.key;
|
||||
}
|
||||
```
|
||||
|
||||
然后`sudo nginx -t` 测试一下，没有问题的话就可以 Nginx 了：
|
||||
|
||||
```bash
|
||||
sudo systemctl reload nginx
|
||||
```
|
||||
|
||||
之后如果有域名要配置 ssl ，如 example.conf 中，可以直接将 `listen 80` 改为`listen 443 ssl`
|
||||
|
||||
我常用的一个反代配置:
|
||||
|
||||
```conf
|
||||
server {
|
||||
listen 443 ssl;
|
||||
server_name 域名;
|
||||
location / {
|
||||
proxy_pass http://127.0.0.1:反代端口;
|
||||
proxy_set_header HOST $host;
|
||||
proxy_set_header X-Forwarded-Proto $scheme;
|
||||
proxy_set_header X-Real-IP $remote_addr;
|
||||
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
|
||||
}
|
||||
}
|
||||
```
|
||||
167
urara/2022-06-15-jellyfin/+page.md
Normal file
167
urara/2022-06-15-jellyfin/+page.md
Normal file
|
|
@ -0,0 +1,167 @@
|
|||
---
|
||||
title: VPS · Jellyfin结合Cloudreve开启线上影院
|
||||
created: 2022-06-15
|
||||
summary: 基于 Docker 和 Nginx 的信心搭建过程
|
||||
image: /2022-06-15-jellyfin/1.jpg
|
||||
tags:
|
||||
- Nginx
|
||||
- VPS
|
||||
- Docker
|
||||
- Self-host
|
||||
---
|
||||
|
||||
昨天搭了一下 Pleroma，完全失败，完全没信心了，所以今天决定随便在[Awesome Self Hosted | LibHunt](https://selfhosted.libhunt.com/)找了一个排名很靠前的东西搭一下，给自己建立一点没有必要的信心……
|
||||
|
||||
刚好最近朋友找电影资源很犯难，所以我决定拿排在 Media 第一的[Jellyfin](https://jellyfin.org/)试试手。
|
||||
|
||||
## 关于 Jellyfin
|
||||
|
||||
Jellyfin 是一个在线的流媒体影音库，对电影、音乐、有声书都有比较好的支持。除了在 web 端观看之外，它还支持很多的[客户端](https://jellyfin.org/clients/)，几乎是随处可用，目前我只试过安卓端的，其功能与网页端无异，适配得很好，体验流畅。
|
||||
|
||||
可以在这里试一下 Demo：[Jellyfin](https://demo.jellyfin.org/stable/web/index.html)
|
||||
|
||||
（用户名 demo，密码留空）
|
||||
|
||||
下面是我的成果:-D
|
||||
|
||||
|
||||
|
||||
|
||||
||其实我也是搭完才知道它有什么功能的||
|
||||
|
||||
## Cloudrever
|
||||
|
||||
Jellyfin 目前不支持 S3 存储，所以我需要一个网盘来存储和管理 VPS 上的媒体资源。看了塔塔的 [音乐库搭建 ](https://mantyke.icu/2022/cloudreve-navidrome/) 文章后我决定试一下 [Cloudreve](https://cloudreve.org/) ，具体的搭建过程这里按下不表，是完全照着塔塔的教程和 [Cloudreve 文档](https://docs.cloudreve.org/getting-started/install) 做的
|
||||
|
||||
### 反代
|
||||
|
||||
需要注意的是，配置 Nginx 反代时，与往常不同，需要设置一下最大的文件大小，以免后期上传失败：
|
||||
|
||||
```bash title="/etc/nginx/conf.d/jellyfin.conf" {7}
|
||||
location / {
|
||||
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
|
||||
proxy_set_header Host $http_host;
|
||||
proxy_redirect off;
|
||||
proxy_pass http://127.0.0.1:5212;
|
||||
|
||||
# 如果您要使用本地存储策略，请将下一行注释符删除，并更改大小为理论最大文件尺寸
|
||||
client_max_body_size 20000m;
|
||||
}
|
||||
```
|
||||
|
||||
### 一些配置
|
||||
|
||||
1. **最大容量**
|
||||
|
||||
在 `管理面板-> 用户组` 里可修改
|
||||
|
||||
|
||||
2. **配置离线下载**
|
||||
|
||||
配置好离线下载就可以用它在后台下载种子资源了。
|
||||
如果用的是 docker-compose 来安装，下面的应该这样配置：
|
||||
|
||||
|
||||
- **[不可修改]** RPC 服务器地址 => `http://aria2:6800`
|
||||
- **[可修改, 需保持和 docker-compose.yml 文件一致]** RPC 授权令牌 => `your_aria_rpc_token`
|
||||
- **[不可修改]** Aria2 用作临时下载目录的 节点上的绝对路径 => `/data`
|
||||
|
||||
最后在 cloudreve 面板里创建一个用来存放 jelly 用的文件夹，比如 `jellyfin`
|
||||
|
||||
## Jellyfin
|
||||
|
||||
### 搭建
|
||||
|
||||
jellyfin 的搭建非常简单，给了我做人的很大信心（没有），我这里依旧选择用 docker-compose 来搭建。
|
||||
|
||||
官方文档：[Installing Jellyfin | Documentation - Jellyfin Project](https://jellyfin.org/docs/general/administration/installing.html#docker)
|
||||
|
||||
首先创建一个配置文件夹并进入：
|
||||
|
||||
```bash
|
||||
sudo mkdir /opt/jellyfin && cd /opt/jellyfin
|
||||
```
|
||||
|
||||
创建配置文件
|
||||
|
||||
```bash
|
||||
sudo nano docker-compose.yml
|
||||
```
|
||||
|
||||
写入：
|
||||
|
||||
```yaml title="docker-compose.yml" {10-11}
|
||||
version: '3.5'
|
||||
services:
|
||||
jellyfin:
|
||||
image: jellyfin/jellyfin
|
||||
container_name: jellyfin
|
||||
user: root
|
||||
network_mode: 'host'
|
||||
volumes:
|
||||
- /path/to/config:/config
|
||||
- /path/to/cache:/cache
|
||||
- /path/to/media:/media #修改为cloudreve的文件夹
|
||||
- /path/to/media2:/media2:ro #修改为cloudreve的文件夹
|
||||
restart: 'unless-stopped'
|
||||
# Optional - alternative address used for autodiscovery
|
||||
environment:
|
||||
- JELLYFIN_PublishedServerUrl=http://你的域名
|
||||
```
|
||||
|
||||
其中需要修改 `/path/to/media:/media` 的前半部分为 cloudreve 中在 VPS 中的存储路径，比如改为`/opt/drive/cloudreve/uploads/` ，如果有多个 cloudreve 用户则可以在后面加用户 id，比如 `/opt/drive/cloudreve/uploads/1` 这样
|
||||
|
||||
然后`/path/to/media2` 也是同样的修改，改为 `/opt/drive/cloudreve/uploads/`
|
||||
|
||||
改完域名之后，执行 `sudo docker-compose up -d` 就可以在端口 `你的ip:8096` 看到界面了。
|
||||
|
||||
### 反代
|
||||
|
||||
我用的是 Nginx 来进行反代，虽然每次都是一样的操作，但是直接写可以复制粘贴会比较简单，所以我现在准备说废话。
|
||||
|
||||
首先，创建配置文件：
|
||||
|
||||
```bash
|
||||
sudo nano /etc/nginx/conf.d/jellyfin.conf
|
||||
```
|
||||
|
||||
写入：
|
||||
|
||||
```bash title="/etc/nginx/conf.d/jellyfin.conf" {2,4}
|
||||
server {
|
||||
listen 80;
|
||||
server_name 你的域名;
|
||||
location / {
|
||||
proxy_pass http://127.0.0.1:8096;
|
||||
proxy_set_header HOST $host;
|
||||
proxy_set_header X-Forwarded-Proto $scheme;
|
||||
proxy_set_header X-Real-IP $remote_addr;
|
||||
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
SSL/TLS 配置可以看我之前这篇：[配置 Cloudflare 的免费 SSL 证书](/2022-06-12-cloudflare)，或者用 certbot 配置
|
||||
|
||||
最后 `sudo nginx -t` 以及 `sudo systemctl reload nginx` 一下就可以在相应域名看到初始界面啦。
|
||||
|
||||
### 媒体库路径
|
||||
|
||||
这个地方我摸了好一会才明白.
|
||||
|
||||
路径选择 media 或者 media2 下面的文件，然后后面的跟 cloudreve 里面的是一样的，比如在 cloudreve 中用户 1 创建的文件夹叫 jellyfin，则媒体库中路径为 `/media/1/jellyfin`
|
||||
|
||||
|
||||
|
||||
### 插件安装
|
||||
|
||||
Jellyfin 有很多实用的插件可以爬电影/音乐等元数据，可以在 `控制台-> 插件` 安装，需要注意的是，安装完插件需要重启一下才可以生效，也就是先`docker-compose down` 再 `docker-compose up -d`
|
||||
|
||||
目前感觉比较好用的两个插件：
|
||||
|
||||
- [Douban plugin for Jellyfin](https://github.com/Libitum/jellyfin-plugin-douban)： 可以抓豆瓣的元数据，需要通过链接安装
|
||||
- Open Subtitles：字幕资源，需要登录 [opensubtitles.com](https://www.opensubtitles.com/zh-CN)，并获取 API
|
||||
|
||||
### 主题和语言
|
||||
|
||||
可以在`display` 里面更改界面语言和主题，我比较喜欢的主题是 Purple Haze, 感觉是有些克制的赛博朋克风格
|
||||
134
urara/2022-07-13-sql/+page.md
Normal file
134
urara/2022-07-13-sql/+page.md
Normal file
|
|
@ -0,0 +1,134 @@
|
|||
---
|
||||
title: SQL 基础笔记
|
||||
created: 2022-07-13
|
||||
summary: 关于增改删查的方式
|
||||
tags:
|
||||
- SQL
|
||||
---
|
||||
|
||||
- 课程：[The Complete 2022 Web Development Bootcamp](https://www.udemy.com/share/1013gG3@wP9ybulEki65OWpaP1-gXEeRPJl4aj8eZNX7YYjFOgXlrxBGQyU6NniyJf2PqDI1EA==/)
|
||||
- 工具：[SQL Online Compiler - for Data Science](https://sqliteonline.com)
|
||||
- 教程：[SQL 教程 | 菜鸟教程](https://www.runoob.com/sql/sql-tutorial.html)
|
||||
|
||||
## SQL vs. NOSQL
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
- SQL
|
||||
- 注重结构
|
||||
- NOSQL
|
||||
- 更灵活，也更稳健
|
||||
- MoogoDB
|
||||
|
||||
## CRUD
|
||||
|
||||
### Create
|
||||
|
||||
```sql
|
||||
CREATE TABLE product(
|
||||
id Int NOT NULL,
|
||||
name STRING,
|
||||
price MONEY,
|
||||
PRIMARY KEY(id)
|
||||
)
|
||||
```
|
||||
|
||||
- `NOT NULL` 当此值为 null 时，不创建列
|
||||
- `PRIMARY KEY(id)` 主键必须包含唯一的值，这个不能有重复的值
|
||||
|
||||
**插入数值**
|
||||
第一种形式无需指定要插入数据的列名，只需提供被插入的值即可
|
||||
|
||||
```sql
|
||||
INSERT INTO _table_name_
|
||||
VALUES (_value1_,_value2_,_value3_,...);
|
||||
```
|
||||
|
||||
第二种形式需要指定列名及被插入的值：
|
||||
|
||||
```sql
|
||||
INSERT INTO _table_name_ (_column1_,_column2_,_column3_,...)
|
||||
VALUES (_value1_,_value2_,_value3_,...);
|
||||
```
|
||||
|
||||
### Read
|
||||
|
||||
SELECT 语句用于从数据库中选取数据。
|
||||
|
||||
```sql
|
||||
SELECT _column_name_,_column_name_
|
||||
FROM _table_name_;
|
||||
```
|
||||
|
||||
```sql
|
||||
SELECT * FROM _table_name_;
|
||||
```
|
||||
|
||||
`*` 表示选择全部
|
||||
|
||||
可以用`WHERE` 筛选选择结果，如：
|
||||
|
||||
```sql
|
||||
SELECT _column_name_,_column_name_
|
||||
FROM _table_name_
|
||||
WHERE _column_name operator value_;
|
||||
```
|
||||
|
||||
### Update
|
||||
|
||||
```sql
|
||||
UPDATE _tablse_name_
|
||||
SET _column1_=_value1_,_column2_=_value2_,...
|
||||
WHERE _some_column_=_some_value_;
|
||||
```
|
||||
|
||||
**ALTER TABLE 语句用于在已有的表中添加、删除或修改列。**
|
||||
如需在表中添加列，请使用下面的语法:
|
||||
|
||||
```sql
|
||||
ALTER TABLE table_name
|
||||
ADD column_name datatype
|
||||
```
|
||||
|
||||
如需删除表中的列，请使用下面的语法（请注意，某些数据库系统不允许这种在数据库表中删除列的方式）：
|
||||
|
||||
```sql
|
||||
ALTER TABLE table_name
|
||||
DROP COLUMN column_name
|
||||
```
|
||||
|
||||
### Destory
|
||||
|
||||
```sql
|
||||
DELETE FROM _table_name_
|
||||
WHERE _some_column_=_some_value_;
|
||||
```
|
||||
|
||||
## Understanding SQL Relationships, Foreign Keys and Inner Joins
|
||||
|
||||
### FOREIGN KEY
|
||||
|
||||
- 用`FOREIGN KEY` 来和外部表单链接
|
||||
- 一个表中的 FOREIGN KEY 指向另一个表中的 UNIQUE KEY(唯一约束的键)。
|
||||
|
||||
### INNER JOIN
|
||||
|
||||
选择相应列并合并表，`ON`后面写的是条件
|
||||
|
||||
```sql
|
||||
SELECT _column_name(s)_
|
||||
FROM _table1_
|
||||
INNER JOIN _table2_
|
||||
ON _table1.column_name_=_table2.column_name_;
|
||||
```
|
||||
|
||||
或：
|
||||
|
||||
```sql
|
||||
SELECT _column_name(s)_
|
||||
FROM _table1_
|
||||
JOIN _table2_
|
||||
ON _table1.column_name_=_table2.column_name_;
|
||||
```
|
||||
43
urara/2022-07-13-work/+page.md
Normal file
43
urara/2022-07-13-work/+page.md
Normal file
|
|
@ -0,0 +1,43 @@
|
|||
---
|
||||
title: 一些设计作品
|
||||
created: 2022-07-13
|
||||
summary: logo / UI / 包装 / 儿童玩具 ……
|
||||
---
|
||||
|
||||
## 二十四节气茶包
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## UI 设计
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## 饼干包装
|
||||
|
||||
升级前
|
||||
|
||||
升级后（面对年轻人重新设计
|
||||
|
||||
|
||||
## Logo
|
||||
|
||||
|
||||
|
||||
|
||||
## 排版装帧
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## 儿童玩具
|
||||
|
||||
|
||||
|
||||
未完待续……（也不知道续不续）
|
||||
92
urara/2022-07-15-reading-6/+page.md
Normal file
92
urara/2022-07-15-reading-6/+page.md
Normal file
|
|
@ -0,0 +1,92 @@
|
|||
---
|
||||
title: 我在看什么 · 6月
|
||||
created: 2022-07-15
|
||||
summary: Vue / 网页性能优化 / npm ……
|
||||
tags:
|
||||
- 我在看什么
|
||||
image: /2022-07-15-reading-6/june.png
|
||||
---
|
||||
|
||||
## 编程相关
|
||||
|
||||
### 前端
|
||||
|
||||
1. [Learn Debounce And Throttle In 16 Minutes](https://www.youtube.com/watch?v=cjIswDCKgu0)
|
||||
|
||||
讲得挺好的一个视频。
|
||||
节流（debounce）和防抖（Throttle）是优化高频率执行代码的一种手段[^1] 如果把执行代码比喻成下楼拿快递的话:
|
||||
|
||||
- 不做任何处理时就是快递来了就下楼拿。
|
||||
- 节流是不管快递来没来，每隔 10 分钟下一次楼。
|
||||
- 防抖则是第一个快递来了，等上 10 分钟，要是在这个 10 分钟内第二个快递来了，就继续等 10 分钟看有没有第三个快递，如果 10 分钟内下一个快递没来就下楼拿前面的快递。
|
||||
|
||||
2. [基于 Vue 实现一个简易 MVVM](https://juejin.cn/post/6844904099704471559)
|
||||
3. [Websocket 原理及具体使用（ws+socket.io）](https://juejin.cn/post/6857716625764777991)
|
||||
4. [String.prototype.localeCompare()](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String/localeCompare)
|
||||
|
||||
- 一个用来比较字符串的方法，可以结合 sort 方法对字符串进行排序，因为 sort 方法是按 ASCII 值来排序的，很多时候使用表现并不好，结合`localeCompare`可以做到按大小写排序、对带有重音符号的字符排序……
|
||||
- `localeCompare`接受三个参数：compareString、locales、options，其中 compareString（即用来比较的字符串）是必选的，其他为可选。
|
||||
- `localeCompare`的返回值有三种，负数、正数、0，其中如果引用字符存在于比较字符之前则为负数; 如果引用字符存在于比较字符之后则为正数; 相等的时候返回 0 。
|
||||
|
||||
5. Pinia 和 Optional API 的结合使用
|
||||
|
||||
- [Access Pinia State in the Options API](https://vueschool.io/lessons/access-pinia-state-in-the-options-api)
|
||||
- [Usage without setup()](https://pinia.vuejs.org/cookbook/options-api.html)
|
||||
|
||||
6. [How to Migrate from Vue CLI to Vite](https://vueschool.io/articles/vuejs-tutorials/how-to-migrate-from-vue-cli-to-vite/)
|
||||
7. [使用 pnpm 替换 npm 优化项目开发](https://juejin.cn/post/7067801337076908068)
|
||||
8. [剪贴板操作 Clipboard API 教程](https://www.ruanyifeng.com/blog/2021/01/clipboard-api.html)
|
||||
9. [如何做前端单元测试](https://juejin.cn/post/7039108357554176037)
|
||||
10. [Vue-测试](https://staging-cn.vuejs.org/guide/scaling-up/testing.html)
|
||||
11. [前后端加密（一）：前端请求加密封装](https://www.hsmus.top/202011210.html)
|
||||
12. [深入浅出 npm & yarn & pnpm 包管理机制](https://mp.weixin.qq.com/s/ZTI-8RI0l314Ki9oBxqRWw)
|
||||
> 很多人认为 npm 是 node package manager 的缩写，其实不是，而且 npm 根本也不是任何短语的缩写。
|
||||
> 它的前身其实是名为 pm（pkgmakeinst） 的 bash 工具，它可以在各种平台上安装各种东西。
|
||||
> 硬要说缩写的话，也应该是 node pm 或者 new pm。
|
||||
13. [过度使用懒加载对 Web 性能的影响](https://juejin.cn/post/7074759905197948935)
|
||||
14. [Vue 项目性能优化 — 实践指南（网上最全 / 详细）](https://juejin.cn/post/6844903913410314247)
|
||||
15. [Vue 打包 chunk-vendors.js 文件过大解决方案（compression-webpack-plugin）](https://blog.csdn.net/zz00008888/article/details/119893222)
|
||||
16. [解决 NPM 安装应用出现 ERESOLVE 错误](https://blog.alanwei.com/blog/2021/03/30/npm-install-eresulve-error/)
|
||||
17. [Web 性能优化：FOUC](https://mp.weixin.qq.com/s/gCn_QwuhiT4aSKZB6bDs6g)
|
||||
18. [傻傻分不清之 Cookie、Session、Token、JWT](https://juejin.cn/post/6844904034181070861)
|
||||
19. [[译文]为什么 Angular 比 React 更适合企业级应用程序](https://juejin.cn/post/7060399592298250270)
|
||||
|
||||
### 后端
|
||||
|
||||
1. [Docker 从入门到实践](https://yeasy.gitbook.io/docker_practice/)
|
||||
2. [Ubuntu 安装新版本 nodejs 的 5 种姿势](https://uzykj.com/_posts/javascript/nodejs/basic/2021-08-17-ubuntu-install-nodejs.html#%E5%A7%BF%E5%8A%BFa-%E6%BA%90%E7%A0%81%E7%BC%96%E8%AF%91%E5%AE%89%E8%A3%85)
|
||||
3. [npm does not support Node.js v10.19.0](https://askubuntu.com/questions/1382565/npm-does-not-support-node-js-v10-19-0)
|
||||
|
||||
## 其他
|
||||
|
||||
1. [详细的全自动追番教程：Sonarr+Jackett+qBittorrent+Jellyfin](https://www.dnlab.net/archives/65/)
|
||||
2. [Open Source Alternative to](https://www.opensourcealternative.to/)
|
||||
3. [在 GitHub 公开仓库中隐藏自己的私人邮箱地址](https://blog.walterlv.com/post/remove-personal-emails-from-public-repos.html)
|
||||
4. [各种开发者文档的以往版本](https://devdocs.io/)
|
||||
5. [Github 删除某个文件的所有提交记录](https://cloud.tencent.com/developer/article/1665810)
|
||||
|
||||
## 互联网哲学
|
||||
|
||||
1. [Who Actually Owns Your Device?](https://chuck.is/root/)
|
||||
> What it means to truly own your device is having the power and ability to modify it at a system level should you choose to – even if you don’t know what you’re doing, you should have the right.
|
||||
2. [Information forest](https://tyler.cafe/information_forest)
|
||||
|
||||
在产品沉思录周刊看到的推荐
|
||||
|
||||
> What should the browser of the 2020s be?
|
||||
>
|
||||
> What will a browser built for research, analysis, rabbit-hole exploration, messy thinking, and collaboration look like? These features are listed in the order I thought of them in, not necessarily by importance.
|
||||
>
|
||||
> 1. Graph visualization and mind mapping.
|
||||
> 2. Interactive history and version control.
|
||||
> 3. Predictive search paths.
|
||||
> 4. Super Command-F (Superf).
|
||||
> 5. Collaboration
|
||||
> 6. Automatic scraping and clusterin
|
||||
> 7. Built in word processing.
|
||||
> 8. Backlinks.
|
||||
> 9. An infinitely zoomable interface (ZUI)
|
||||
|
||||
相关阅读：[Next Browser](https://mp.weixin.qq.com/s/6vKJxVhXXqLvBqf_V1KCwQ)
|
||||
|
||||
[^1]: [什么是防抖和节流？有什么区别？如何实现？](https://vue3js.cn/interview/JavaScript/debounce_throttle.html#%E4%B8%80%E3%80%81%E6%98%AF%E4%BB%80%E4%B9%88)
|
||||
42
urara/2022-07-16-reading-5/+page.md
Normal file
42
urara/2022-07-16-reading-5/+page.md
Normal file
|
|
@ -0,0 +1,42 @@
|
|||
---
|
||||
title: 我在看什么 · 5月
|
||||
created: 2022-07-16
|
||||
summary: Anki / JSDoc / 蘑菇 / Music-Map ……
|
||||
tags:
|
||||
- 我在看什么
|
||||
image: /2022-07-16-reading-5/May1.jpg
|
||||
---
|
||||
|
||||
## Productivity
|
||||
|
||||
- [How To Create ANKI Flashcards From Your Kindle Vocabulary Builder](https://learnoutlive.com/kindle-vocabulary-builder-anki-flashcards/)
|
||||
- [SSH 使用入门](https://wiki.cheng-group.net/wiki/%E9%9B%86%E7%BE%A4%E4%BD%BF%E7%94%A8/ssh_note#ssh-%E4%BD%BF%E7%94%A8%E5%85%A5%E9%97%A8)
|
||||
|
||||
SCP 部分写得很清楚
|
||||
|
||||
- [如何使用 JSDoc 保证你的 Javascript 类型安全性](https://mp.weixin.qq.com/s/PcHu-DeZDQCdtWjzb-QkBA)
|
||||
- [你不知道的 JSDoc](https://juejin.cn/post/7072685382323830821)
|
||||
- [codecombat](https://codecombat.cn/)
|
||||
|
||||
哇哦，打游戏学编程
|
||||
|
||||
- [讓有效學習更簡單！Markdown 匯出到 Anki | 使用 Flashcards 外掛](http://jdev.tw/blog/6505)
|
||||
- [建立一套完整的筆記複習流程，使用 Obsidian 插件 Spaced Repetition](https://ithelp.ithome.com.tw/articles/10280788?sc=iThomeR)
|
||||
- [硬核必备：Web3 生存指南之防骗反诈安全手册（65 页）](https://web3caff.com/zh/archives/8304)
|
||||
- [写作 12 年，我的经验和技巧](https://catcoding.me/p/writing-for-joy/)
|
||||
|
||||
## 有趣的
|
||||
|
||||
- [Maggie Appleton](https://maggieappleton.com/)
|
||||
|
||||
很喜欢的一个博客！设计很漂亮，博文图文结合读起来让人很愉悦，是我理想的博客样子
|
||||
|
||||
- [科普|“朝菌”毛头鬼伞的菇事](https://mp.weixin.qq.com/s/YeLuBH9VZ1l-bltKdEqxsw)
|
||||
- ["I'm Not Like Other Girls"](https://www.youtube.com/watch?v=7nL-kgbbcBA)
|
||||
> _not like other girls_ can also be used as an insult
|
||||
- [Why Life Is So Boring (and why it's a good thing)](https://www.youtube.com/watch?v=Wuu-2CR8btw)
|
||||
- [吃蘑菇前我都会跟它说会儿话，因为我知道它是活的](https://mp.weixin.qq.com/s/qrtfEJMRn3LH0W05nBIa5Q)
|
||||
> 「在期刊的原文中，阿达玛斯基写道：“我们不应该期望快速地得到一个结果，尽管我们与猫和狗生活了几个世纪，但我们还没有破译它们的语言，而对真菌的电子通讯的研究还处于纯粹的婴儿阶段。”
|
||||
>
|
||||
> 这么一想也不无道理，你甚至连自己家的猫猫狗狗在说什么都没搞明白，为什么一定要期待先跟一颗蘑菇对话呢？」
|
||||
- [Music-Map](https://www.music-map.com/)
|
||||
182
urara/2022-07-17-vol1/+page.md
Normal file
182
urara/2022-07-17-vol1/+page.md
Normal file
|
|
@ -0,0 +1,182 @@
|
|||
---
|
||||
title: Nonsense Wander ~ Vol1
|
||||
created: 2022-07-17
|
||||
summary: Kiwix / Leitner Box / Summer Sense / It’s Nicky Case!
|
||||
tags:
|
||||
- Nonsense Wander
|
||||
---
|
||||
|
||||
## 前言
|
||||
|
||||
大家好，这是**无意义漫游记**的第一期，**Nonsense Wander ｜无意义漫游记** 是一个不求甚解、没有特定主题、也没有意义的周刊（或者月刊），我将在这里跟大家分享我最近发现的有意思的东西，新的旧的都有，一切只因好奇和有趣，内容随心所欲毫无边际，希望您喜欢，不喜欢也不要紧，我们来去自由。
|
||||
|
||||
## Tools
|
||||
|
||||
### 1. [Kiwix ——离线维基百科阅读器](https://www.kiwix.org/en)
|
||||
|
||||
|
||||
|
||||
> Kiwix is an offline reader for online content like Wikipedia, Project Gutenberg, or TED Talks. It makes knowledge available to people with no or limited internet access. The software as well as the content is free to use for anyone.
|
||||
>
|
||||
> Kiwix 是一个在线内容的离线阅读器，如维基百科、古腾堡计划或 TED 演讲。它使没有互联网接入或互联网接入有限的人也能获得知识。该软件以及内容对任何人都是免费使用的。
|
||||
|
||||
我是在[F-Droid](https://f-droid.org/zh_Hans/packages/org.kiwix.kiwixmobile/)上看到 icon 很可爱就下载了，没想到这么有趣，我用的移动端 APP 上有一个「图书馆」的页面，可以在这里下载许多不同领域的知识，除了上面提到的维基百科等平台之外，Stack Exchange、Khan Academy 、edX 等网站的知识板块也有比较完整的收录，其中我下载了 MDN Web Docs、wikiHow、Coffee Stack Exchange 等内容，不过……一个都还没有仔细看过。
|
||||
|
||||
官网上中间那张讲朝鲜的图片让我想起了《鱿鱼游戏》在朝鲜的一些事情，感到很荒诞。
|
||||
|
||||
|
||||
|
||||
- 了解更多：[What is Kiwix?](https://www.kiwix.org/en/about/)
|
||||
- 下载阅读器：[Download Kiwix Reader – Kiwix](https://www.kiwix.org/en/download/)
|
||||
- 一个名字相似的个人 Wiki：
|
||||
- [Kiwi](https://kiwi.ssine.cc/)
|
||||
- [GitHub – ssine/Kiwi: A flat file personal wiki](https://github.com/ssine/Kiwi)
|
||||
|
||||
### 2. [Anki X Markdown X MindMap – AnkiWeb](https://ankiweb.net/shared/info/728482867)
|
||||
|
||||
> An anki add-on to support writing markdown and preview as mind map
|
||||
> 一个支持 Markdown 和预览为思维导图的 Anki 插件
|
||||
|
||||
安装代码：`728482867`
|
||||
|
||||
**效果：**
|
||||
|
||||
|
||||
### 3. Leitner Box
|
||||
|
||||
上面提到了用于间隔重复(Space Repetition)的工具 [Anki](https://apps.ankiweb.net/)，不过最近我还了解到另外一个同样有用的工具，叫 Leitner Box，是用实物卡片的方式来进行间隔重复式学习。了解更多可以看下面这个视频：
|
||||
|
||||
> How to make and use a Leitner Box! The Leitner Box is a kind of spaced repetition system; basically, flashcards on steroids. It is one of the fastest, easiest, and most reliable ways to put lots of data into your long-term memory—and chances are, you have everything you need to make one already!
|
||||
>
|
||||
> [The Leitner Box—How to Remember Anything Forever – YouTube](https://www.youtube.com/watch?v=uvF1XuseZFE)
|
||||
|
||||
## Blog
|
||||
|
||||
这个栏目罗列了一些最近发现的有意思的个人博客，并摘录了一些博客内容作为介绍
|
||||
|
||||
### 1\. [chuck.is](https://chuck.is/)
|
||||
|
||||
> One of my hobbies is nerding out on technology. I enjoy tinkering with linux and any device that runs an operating system. I am not a programmer/developer.
|
||||
|
||||
### 2\. [It’s Nicky Case!](https://ncase.me/)
|
||||
|
||||
> Hi, I’m Nicky! I make shtuff for curious & playful folks.
|
||||
|
||||
- 项目： [和焦虑一起冒险！](https://z-lyen.github.io/anxiety/)
|
||||
- 博文：[Mental Health Tips feat. Anxiety Wolf](https://ncase.me/mental-health/)
|
||||
- 相关介绍：[Nicky Case 可探索的解释 Explorable Explanations (2014)](https://mp.weixin.qq.com/s/3-1M8qJb0y_5Q2xgFJKUig)
|
||||
|
||||
PS：上面提到的 Leiner Box 也是在 Nicky 的博客看到的，
|
||||
|
||||
### 3\. [Henrique Dias](https://hacdias.com/)
|
||||
|
||||
> I’m interested in how we can use computer networks to our advantage, prioritizing decentralized systems, capable of pushing the humanity forward. Web infrastructure, peer-to-peer systems, as well as human-computer interaction are at the core of my interests.
|
||||
|
||||
博文：
|
||||
|
||||
- [My Website After IndieWeb](https://hacdias.com/2022/06/18/my-website-after-indieweb)
|
||||
- [About Moving Away From Hugo](https://hacdias.com/2021/10/31/eagle-move-away-from-hugo)
|
||||
|
||||
### 4\. [Paige Ruten](https://viewsourcecode.org/)
|
||||
|
||||
> Hey, welcome to my collection of why the lucky stiff links. Everything \_why has published on the internet should be accessible from here. It works sort of like a museum that sells maps. Many of his abandoned writings are mirrored locally here, and everything else is through external links.
|
||||
|
||||
## Video
|
||||
|
||||
一些我喜欢的视频
|
||||
|
||||
### 1\. [The Updated Last Whole Earth Catalog](https://youtu.be/8_xpq2IDNvw)
|
||||
|
||||
> This is the last update to the last Whole Earth Catalog. There won’t be another! But where will we get things in the future if there are no more Whole Earth Catalogs? Where do YOU get things?
|
||||
>
|
||||
> The Whole Earth Catalog was a counterculture magazine and product catalog published by Stewart Brand several times a year between 1968 and 1972. The editorial focus was on self-sufficiency, ecology, alternative education, “do it yourself” (DIY), and holism, and featured the slogan “access to tools”. While WEC listed and reviewed a wide range of products (clothing, books, tools, machines, seeds, etc.), it did not sell any of the products directly. Instead, the vendor’s contact information was listed alongside the item and its review.
|
||||
|
||||
### 2\. [Summer Sense](https://www.bilibili.com/video/BV1Db411V719)
|
||||
|
||||
> 这支影片承载着我在荷兰接近一个月的时间里的各种回忆，从宁静小镇阿默龙恩到奇特疯狂的鹿特丹，从被朋友带着认识更多的朋友到独自一人在野外探寻。山河森林，微风树叶，音乐舞蹈…… 现在我希望能通过一种我的方式重新将这份感觉组合在一起。
|
||||
|
||||
我特别喜欢片头在房子里面一起唱歌的场景，还有划着小船飘在小溪里什么也不做的场景……
|
||||
|
||||
### 3\. [我 的 钱 呢](https://www.bilibili.com/video/BV1cK411G7aj)
|
||||
|
||||
> 【配乐】
|
||||
>
|
||||
> SAM KIM - WHERE’S MY MONEY
|
||||
>
|
||||
> 【主演】
|
||||
>
|
||||
> 刘亚仁，主演的素材出自《少年菀得》《老手》《强哲》《燃烧》《活着》《无声》。
|
||||
>
|
||||
> 【素材】
|
||||
>
|
||||
> 少年菀得／九尾狐传／蜂鸟 ／灿实也多福／小公女 ／老手 ／强哲 ／门锁 ／未成年 ／小森林 ／人间课堂 ／钱 ／燃烧 ／摩天楼 ／Live ／读心术 ／金融决战 ／一条龙 ／单身骑士 ／一定要抓住 ／无声 ／恶人传 ／化时为机 ／活着 ／寄生虫 ／个人拍摄
|
||||
|
||||
## What else
|
||||
|
||||
### 1\. [LOW TECH WEBRING DIRECTORY](https://emreed.net/LowTech_Directory.html)
|
||||
|
||||
> This [webring](https://en.wikipedia.org/wiki/Webring)is for homepages of people who are interested in low tech, small game tools, and other forms of Web 1.0 inspired creativity.
|
||||
> 这个 webring 适用于对低技术、小型游戏工具和其他形式的 Web 1.0 激发创造力感兴趣的人的主页
|
||||
|
||||
### 2\. [Suricrasia Online](https://suricrasia.online/)
|
||||
|
||||
> Suricrasia Online is a Toronto-based ISP staffed entirely by anthropomorphic sharks in maid outfits. Since our establishment in the mid-90s, we have made a name for ourselves in the internet marketplace by combining the allure of the sea with the adorable regalia of a maid cafe!
|
||||
>
|
||||
> Suricrasia Online 是一家总部位于多伦多的 ISP ，其工作人员完全由身着女仆装的拟人鲨鱼组成。自 90 年代中期成立以来，我们将大海的魅力与女仆咖啡馆的可爱形象相结合，在互联网市场上声名鹊起！
|
||||
|
||||
### 3\. [Fantômes](https://fantomeszine.com/)
|
||||
|
||||
> Fantômes is a yearly collaborative ghost story zine, bringing together story-telling, poetry, folklore, illustration and photography in a small hand-bound publication. It is a place to explore personal and collective ghosts, lend them a voice through summoning rituals, raw poetry or scribbled drawings and get familiar with their haunting presence.
|
||||
>
|
||||
> Fantômes 是一本一年一度的合作性鬼故事杂志，将讲故事、诗歌、民间传说、插图和摄影汇集在一个小型手工装订的出版物中。它是一个探索个人和集体鬼魂的地方，通过召唤仪式、原始诗歌或潦草的图画让它们发出声音，并熟悉它们萦绕的存在。
|
||||
|
||||
## 后言
|
||||
|
||||
最后，分享一下本周最喜欢的歌：[New Boy · 朴树](https://music.163.com/song?id=28996919)
|
||||
|
||||
> 是的我看见到处是阳光
|
||||
> 快乐在城市上空飘扬
|
||||
> 新世纪来得像梦一样
|
||||
> 让我暖洋洋
|
||||
> 你的老怀表还在转吗
|
||||
> 你的旧皮鞋还能穿吗
|
||||
> 这儿有一支未来牌香烟
|
||||
> 你不想尝尝吗
|
||||
> 明天一早
|
||||
> 我猜阳光会好
|
||||
> 我要把自己打扫
|
||||
> 把破旧的全部卖掉
|
||||
> 哦这样多好
|
||||
> 快来吧奔腾电脑
|
||||
> 就让它们代替我来思考
|
||||
> 穿新衣吧剪新发型呀
|
||||
> 轻松一下 Windows98
|
||||
> 打扮漂亮
|
||||
> 18 岁是天堂
|
||||
> 我们的生活甜得像糖
|
||||
> 穿新衣吧剪新发型呀
|
||||
> 轻松一下 Windows98
|
||||
> 以后的路不再会有痛苦
|
||||
> 我们的未来该有多酷
|
||||
> 明天一早
|
||||
> 我猜阳光会好
|
||||
> 我要把自己打扫
|
||||
> 把破旧的全部卖掉
|
||||
> 哦这样多好
|
||||
> 快来吧奔腾电脑
|
||||
> 就让它们代替我来思考
|
||||
> 穿新衣吧剪新发型呀
|
||||
> 轻松一下 Windows98
|
||||
> 打扮漂亮
|
||||
> 18 岁是天堂
|
||||
> 我们的生活甜得像糖
|
||||
> 穿新衣吧剪新发型呀
|
||||
> 轻松一下 windows98
|
||||
> 以后的路不再会有痛苦
|
||||
> 我们的未来该有多酷
|
||||
> Babawowo
|
||||
> 向前走你的路
|
||||
> 猜猜未来给你什么礼物
|
||||
> Babawowo
|
||||
> 扔掉吧你的旧书包
|
||||
> Oh my international cool play boy
|
||||
446
urara/2022-07-23-d3/+page.md
Normal file
446
urara/2022-07-23-d3/+page.md
Normal file
|
|
@ -0,0 +1,446 @@
|
|||
---
|
||||
title: D3.js 基础笔记
|
||||
created: 2022-07-23
|
||||
summary: 即使是FreeCodeCamp也要做笔记
|
||||
tags:
|
||||
- D3.js
|
||||
- 数据可视化
|
||||
---
|
||||
|
||||
内容出自：[FreeCodeCamp](https://chinese.freecodecamp.org/learn/data-visualization)
|
||||
|
||||
> D3 或 D3.js 表示数据驱动文档。它是一个用于在浏览器中创建动态和交互式数据视觉化的 JavaScript 库。[^1]
|
||||
|
||||
## 学习资源
|
||||
|
||||
- [D3.js - Data-Driven Documents](https://d3js.org/)
|
||||
- [Data Visualization with D3 – Full Course for Beginners [2022] - YouTube](https://www.youtube.com/watch?v=xkBheRZTkaw&t=1s)
|
||||
- [Get it Right in Black & White Index - Get it Right in Black & White - VizHub Forum](https://vizhub.com/forum/t/get-it-right-in-black-white-index/110/2)
|
||||
- [New Livestream Series: Get it Right in Black and White](https://vizhub.com/blog/2021/02/20/new-livestream-series-get-it-right-in-black-and-white/)
|
||||
- [Get it Right in Black & White Index - Get it Right in Black & White - VizHub Forum](https://vizhub.com/forum/t/get-it-right-in-black-white-index/110)
|
||||
- [The D3 Graph Gallery – Simple charts made with d3.js](https://d3-graph-gallery.com/)
|
||||
- [Introduction to D3.js | D3 in Depth](https://www.d3indepth.com/introduction/)
|
||||
- [数据可视化 认证 | freeCodeCamp.org](https://chinese.freecodecamp.org/learn/data-visualization/#data-visualization-with-d3)
|
||||
- [Amelia Wattenberger](https://wattenberger.com/blog/d3)
|
||||
- [GitHub - xswei/d3js_doc: D3js 中文文档 D3 中文](https://github.com/xswei/d3js_doc)
|
||||
|
||||
## 基础操作
|
||||
|
||||
### 修改元素
|
||||
|
||||
- `select()` ：
|
||||
- 功能：从文档中选择一个元素。
|
||||
- 参数：它接受你想要选择的元素的名字作为参数，并返回文档中第一个与名字匹配的 HTML 节点。
|
||||
- `selectAll()`
|
||||
- 选择一组元素。 并以 HTML 节点数组的形式返回该文本中所有匹配所输入字符串的对象
|
||||
- `append()`
|
||||
- 功能：将 HTML 节点附加到选定项目，并返回该节点的句柄。
|
||||
- 参数：接收你希望添加到文档中的元素
|
||||
- `text()`
|
||||
- 功能：设置所选节点的文本，也可以获取当前文本。 也可以用来添加标签
|
||||
- 参数：字符串或者回调函数
|
||||
|
||||
```js
|
||||
const anchor = d3.select('a')
|
||||
```
|
||||
|
||||
在 D3 中可以串联多个方法，连续执行一系列操作。->[[function chaining|链式调用]]
|
||||
|
||||
### 使用数据
|
||||
|
||||
[d3-selection](https://github.com/xswei/d3-selection/blob/master/README.md#selection_data)
|
||||
|
||||
- `data()`：
|
||||
- 将元素与数据绑定
|
||||
- 不需要写 for 循环或者用 forEach() 迭代数据集中的对象。 data() 方法会解析数据集，任何链接在 data() 后面的方法都会为数据集中的每个对象运行一次。
|
||||
- 可以使用方括号的方式，如 `d[0]`，来访问数组中的值。
|
||||
- `enter()`：获取需要插入的选择集(数据个数大于元素个数)的占位符.
|
||||
|
||||
> 当 enter() 和 data() 方法一起使用时，它把从页面中选择的元素和数据集中的元素作**比较**。 如果页面中选择的元素较少则创建缺少的元素。
|
||||
|
||||
可以理解为管理仓库的，选择的元素是货架，数据是货，如果货架不够了，就再补几个货架，如果多了就不管
|
||||
|
||||
```html
|
||||
<body>
|
||||
<ul></ul>
|
||||
<script>
|
||||
const dataset = ['a', 'b', 'c']
|
||||
d3.select('ul').selectAll('li').data(dataset).enter().append('li').text('New item')
|
||||
</script>
|
||||
</body>
|
||||
```
|
||||
|
||||
### 使用动态数据
|
||||
|
||||
text 中设置回调处理数据如：
|
||||
|
||||
- `d3.json()`: 从指定的 input URL 获取 JSON 文件。如果指定了 init 则会将其传递给底层的 fetch 方法
|
||||
|
||||
```html
|
||||
<body>
|
||||
<script>
|
||||
const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9]
|
||||
|
||||
d3.select('body')
|
||||
.selectAll('h2')
|
||||
.data(dataset)
|
||||
.enter()
|
||||
.append('h2')
|
||||
.text(d => d + ' USD')
|
||||
</script>
|
||||
</body>
|
||||
```
|
||||
|
||||
### 给元素添加内联样式
|
||||
|
||||
- `style()`
|
||||
- 功能：在动态元素上添加内联 CSS 样式
|
||||
- 参数：以用逗号分隔的键值对作为参数
|
||||
|
||||
```js
|
||||
selection.style('color', 'blue')
|
||||
|
||||
//用回调过滤
|
||||
selection.style('color', d => {
|
||||
return d < 20 ? 'red' : 'green'
|
||||
})
|
||||
// 动态设置样式
|
||||
selection.style('height', d => d + 'px') // 动态设置高度
|
||||
```
|
||||
|
||||
### 添加 Class
|
||||
|
||||
- `attr()`
|
||||
- 功能：可以给元素添加任何 HTML 属性，包括 class 名称。
|
||||
- 参数：
|
||||
- attr() 方法和 style() 的使用方法一样。 它使用逗号分隔值，并且可以使用回调函数
|
||||
- 可接收一个回调函数来动态设置属性。 这个回调函数有两个参数，一个是数据点本身（通常是 `d`），另一个是该数据点在数组中的下标 i， 这个参数是可选的
|
||||
- 当需要添加 class 时，class 参数保持不变，只有 container 参数会发生变化。
|
||||
|
||||
```js
|
||||
selection.attr('class', 'container')
|
||||
// 回调
|
||||
selection.attr('property', (d, i) => {})
|
||||
|
||||
// 比如改变间距
|
||||
svg
|
||||
.selectAll('rect')
|
||||
.data(dataset)
|
||||
.enter()
|
||||
.append('rect')
|
||||
.attr('x', (d, i) => {
|
||||
return i * 30 //改变间距
|
||||
})
|
||||
.attr('y', (d, i) => {
|
||||
return d * 3 //改变高度
|
||||
})
|
||||
//悬停效果
|
||||
.attr('class', 'bar')
|
||||
```
|
||||
|
||||
### 标签
|
||||
|
||||
- 和 rect 元素类似，text 元素也需要 x 和 y 属性来指定其放置在 SVG 画布上的位置， 它也需要能够获取数据来显示数据值。
|
||||
- 标签样式
|
||||
- `fill` 属性为 text 节点设置文本颜色
|
||||
- `style()` 方法设置其它样式的 CSS 规则，例如 font-family 或 font-size。
|
||||
|
||||
```js
|
||||
//添加标签
|
||||
svg
|
||||
.selectAll('text')
|
||||
.data(dataset)
|
||||
.enter()
|
||||
.append('text')
|
||||
.attr('x', (d, i) => i * 30)
|
||||
.attr('y', (d, i) => h - 3 * d - 3) // 高三个单位是减
|
||||
.text(d => d)
|
||||
// 添加样式
|
||||
.attr('fill', 'red')
|
||||
.style('font-size', '25px')
|
||||
//悬停效果
|
||||
.attr('class', 'bar')
|
||||
/** css中
|
||||
.bar:hover {
|
||||
fill: brown;
|
||||
}
|
||||
**/
|
||||
```
|
||||
|
||||
### 添加工具提示 tooltip
|
||||
|
||||
- 当用户在一个对象上悬停时，提示框可以显示关于这个对象更多的信息
|
||||
|
||||
1. title
|
||||
|
||||
```js
|
||||
svg
|
||||
.selectAll('rect')
|
||||
.data(dataset)
|
||||
.enter()
|
||||
.append('rect')
|
||||
.attr('x', (d, i) => i * 30)
|
||||
.attr('y', (d, i) => h - 3 * d)
|
||||
.attr('width', 25)
|
||||
.attr('height', (d, i) => d * 3)
|
||||
// 每个 rect 节点下附加 title 元素。 然后用回调函数调用 text() 方法使它的文本显示数据值。
|
||||
.append('title')
|
||||
.text(d => d)
|
||||
```
|
||||
|
||||
## SVG
|
||||
|
||||
- 坐标系：坐标轴的原点在左上角。 x 坐标为 0 将图形放在 SVG 区域的左边缘， y 坐标为 0 将图形放在 SVG 区域的上边缘。 x 值增大矩形将向右移动， y 值增大矩形将向下移动。
|
||||
|
||||
### 创建 SVG
|
||||
|
||||
```js
|
||||
//创建svg
|
||||
selection.append('svg')
|
||||
```
|
||||
|
||||
### 反转 SVG 元素
|
||||
|
||||
- 为了使条形图向上，需要改变 y 坐标计算的方式
|
||||
|
||||
> SVG 区域的高度为 100。 如果在集合中一个数据点的值为 0，那么条形将从 SVG 区域的最底端开始（而不是顶端）。 为此，y 坐标的值应为 100。 如果数据点的值为 1，你将从 y 坐标为 100 开始来将这个条形设置在底端， 然后需要考虑该条形的高度为 1，所以最终的 y 坐标将是 99。
|
||||
|
||||
(高度从下面开始计算，坐标轴从上面开始)
|
||||
|
||||
- y 坐标为 `y = heightOfSVG - heightOfBar` 会将条形图向上放置。
|
||||
- 通常，关系是 `y = h - m * d`，其中 m 是缩放数据点的常数。
|
||||
|
||||
### 更改 SVG 元素的颜色
|
||||
|
||||
- 在 SVG 中， rect 图形用 `fill` 属性着色。 它支持十六进制代码、颜色名称、rgb 值以及更复杂的选项，比如渐变和透明。
|
||||
|
||||
```js
|
||||
svg
|
||||
.selectAll('rect')
|
||||
.data(dataset)
|
||||
.enter()
|
||||
.append('rect')
|
||||
.attr('x', (d, i) => i * 30)
|
||||
.attr('y', (d, i) => h - 3 * d)
|
||||
.attr('width', 25)
|
||||
.attr('height', (d, i) => 3 * d)
|
||||
//将所有条形图的 fill 设置为海军蓝。
|
||||
.attr('fill', 'navy')
|
||||
```
|
||||
|
||||
[^1]: [数据可视化 认证 | freeCodeCamp.org](https://chinese.freecodecamp.org/learn/data-visualization/)
|
||||
|
||||
### SVG 图形
|
||||
|
||||
- SVG 支持多种图形，比如矩形和圆形， 并用它们来显示数据。
|
||||
|
||||
#### 矩形
|
||||
|
||||
SVG 的 rect 有四个属性。 x 和 y 坐标指定图形放在 svg 区域的位置， height 和 width 指定图形大小
|
||||
|
||||
```js
|
||||
const svg = d3
|
||||
.select('body')
|
||||
.append('svg')
|
||||
.attr('width', w)
|
||||
.attr('height', h)
|
||||
.append('rect') //rect矩形
|
||||
.attr('width', 25)
|
||||
.attr('height', 100)
|
||||
.attr('x', 0)
|
||||
.attr('y', 0)
|
||||
```
|
||||
|
||||
#### 圆形
|
||||
|
||||
- SVG 用 circle 标签来创建圆形
|
||||
- circle 有三个主要的属性。
|
||||
- cx 和 cy 属性是坐标。 它们告诉 D3 将图形的中心放在 SVG 画布的何处。
|
||||
- 半径（ r 属性）给出 circle 的大小。
|
||||
- 和 rect 的 y 坐标一样，circle 的 cy 属性是从 SVG 画布的顶端开始测量的，而不是从底端。
|
||||
|
||||
```js
|
||||
svg
|
||||
.selectAll('circle')
|
||||
.data(dataset)
|
||||
.enter()
|
||||
.append('circle')
|
||||
//散点图
|
||||
.attr('cx', d => d[0])
|
||||
.attr('cy', d => h - d[1])
|
||||
.attr('r', '5')
|
||||
```
|
||||
|
||||
## 比例尺
|
||||
|
||||
### 创建线性比例
|
||||
|
||||
> 条形图和散点图都直接在 SVG 画布上绘制数据。 但是，如果一组的高或者其中一个数据点比 SVG 的高或宽更大，它将跑到 SVG 区域外。
|
||||
|
||||
> D3 中，比例尺可帮助布局数据。 scales 是函数，它告诉程序如何将一组原始数据点映射到 SVG 画布上。
|
||||
|
||||
#### 线性缩放
|
||||
|
||||
- 通常使用于定量数据
|
||||
- 默认情况下，比例尺使用一对一关系（identity relationship）。 输入的值和输出的值相同。
|
||||
|
||||
```js
|
||||
const scale = d3.scaleLinear()
|
||||
```
|
||||
|
||||
例子
|
||||
|
||||
```js
|
||||
const scale = d3.scaleLinear() // 在这里创建轴
|
||||
const output = scale(50) // 调用 scale，传入一个参数
|
||||
d3.select('body').append('h2').text(output)
|
||||
```
|
||||
|
||||
#### 按比例设置域和范围
|
||||
|
||||
- 域 domain：假设有一个数据集范围为 50 到 480， 这是缩放的**输入信息**，也被称为域。
|
||||
- 范围 range：沿着 x 轴将这些点映射到 SVG 画布上，位置介于 10 个单位到 500 个单位之间。 这是**输出信息**，也被称为范围。
|
||||
- `domain()` 和 `range()` 方法设置比例尺的值， 它们都接受一个至少有两个元素的数组作为参数。
|
||||
- `domain()` 方法给比例尺传递关于散点图原数据值的信息
|
||||
- `range()` 方法给出在页面上进行可视化的实际空间信息
|
||||
|
||||
例子：
|
||||
|
||||
```js
|
||||
scale.domain([50, 480]); //域
|
||||
scale.range([10, 500]); //范围
|
||||
scale(50) //10
|
||||
scale(480) //500
|
||||
scale(325) //323.37
|
||||
scale(750)。// 807.。67
|
||||
d3.scaleLinear()
|
||||
```
|
||||
|
||||
按顺序，将在控制台中显示以下值：10、500、323.37 和 807.67。
|
||||
|
||||
注意，比例尺使用了域和范围之间的线性关系来找出给定数字的输出值。 域中的最小值（50）映射为范围中的最小值（10）。
|
||||
|
||||
（也就是给定范围，用线性关系缩小，比如图片放大缩小，给了原图大小和缩小后的图片大小，根据线性关系比例来计算每个像素的位置，元素的大小）
|
||||
|
||||
#### 最小值最大值
|
||||
|
||||
- `d3.min`：最小值
|
||||
- `d3.max`: 最大值
|
||||
- `min()` 和 `max()` 都可以使用回调函数，下面例子中回调函数的参数 d 是当前的内部数组。
|
||||
- `min()` 和 `max()` 方法在设置比例尺时十分有用
|
||||
|
||||
例子：找到二维数组的最大值和最小值
|
||||
|
||||
```js
|
||||
const locationData = [
|
||||
[1, 7],
|
||||
[6, 3],
|
||||
[8, 3]
|
||||
]
|
||||
const minX = d3.min(locationData, d => d[0]) //查找在d[0]位置上最小的值
|
||||
```
|
||||
|
||||
### 使用动态比例
|
||||
|
||||
- 用`min()` 和 `max()` 来确定比例尺范围和域
|
||||
- `padding` 将在散点图和 SVG 画布边缘之间添加空隙。
|
||||
- 保持绘图在右上角。 当为 y 坐标设置 range 时，大的值（height 减去 padding）是第一个参数，小的值是第二个参数。
|
||||
|
||||
```js
|
||||
const dataset = [
|
||||
[34, 78],
|
||||
[109, 280],
|
||||
[310, 120],
|
||||
[79, 411],
|
||||
[420, 220],
|
||||
[233, 145],
|
||||
[333, 96],
|
||||
[222, 333],
|
||||
[78, 320],
|
||||
[21, 123]
|
||||
]
|
||||
const w = 500
|
||||
const h = 500
|
||||
|
||||
const padding = 30
|
||||
const xScale = d3
|
||||
.scaleLinear()
|
||||
.domain([0, d3.max(dataset, d => d[0])])
|
||||
.range([padding, w - padding])
|
||||
```
|
||||
|
||||
### 使用预定义的比例放置元素
|
||||
|
||||
- 用比例尺函数为 SVG 图形设置坐标属性值。
|
||||
- 当显示实际数据值时，不用使用比例尺，例如，在提示框或标签中的 `text()` 方法。
|
||||
|
||||
```js
|
||||
svg
|
||||
.selectAll('circle')
|
||||
.data(dataset)
|
||||
.enter()
|
||||
.append('circle')
|
||||
.attr('cx', d => xScale(d[0]))
|
||||
.attr('cy', d => yScale(d[1]))
|
||||
.attr('r', '5')
|
||||
```
|
||||
|
||||
### 添加坐标轴
|
||||
|
||||
- 位置：`axisLeft()` 和 `axisBottom()`。
|
||||
- g 元素， g 是英文中组（group）的缩写，在渲染时，轴只是一条直线。 因为它是一个简单的图形，所以可以用 g
|
||||
- SVG 支持多种 transforms，但是定位轴需要使用 translate 属性
|
||||
|
||||
例子：
|
||||
|
||||
```js
|
||||
// X轴
|
||||
const xAxis = d3.axisBottom(xScale)
|
||||
|
||||
svg
|
||||
.append('g')
|
||||
.attr('transform', 'translate(0, ' + (h - padding) + ')') // translate(0,x)
|
||||
.call(xAxis) // x轴作为参数被传递给 call() 方法
|
||||
|
||||
// Y轴
|
||||
const yAxis = d3.axisLeft(yScale)
|
||||
|
||||
svg
|
||||
.append('g')
|
||||
.attr('transform', 'translate(0,' + (h - padding) + ')')
|
||||
.call(xAxis)
|
||||
svg
|
||||
.append('g')
|
||||
.attr('transform', 'translate(' + padding + ',0)')
|
||||
.call(yAxis)
|
||||
```
|
||||
|
||||
## 常见图表
|
||||
|
||||
### 散点图
|
||||
|
||||
> 圆圈来映射数据点，每个数据点有两个值。 这两个值和 x 和 y 轴相关联，在可视化中用来给圆圈定位。
|
||||
|
||||
```js
|
||||
svg
|
||||
.selectAll('circle')
|
||||
.data(dataset)
|
||||
.enter()
|
||||
.append('circle')
|
||||
.attr('cx', d => d[0])
|
||||
//反转图像
|
||||
.attr('cy', d => h - d[1])
|
||||
.attr('r', '5')
|
||||
|
||||
// 散点图加标签
|
||||
svg
|
||||
.selectAll('text')
|
||||
.data(dataset)
|
||||
.enter()
|
||||
.append('text')
|
||||
// Add your code below this line
|
||||
|
||||
.attr('x', d => d[0] + 5)
|
||||
.attr('y', d => h - d[1])
|
||||
.text(d => d[0] + ', ' + d[1])
|
||||
```
|
||||
21
urara/2022-07-23-xss/+page.md
Normal file
21
urara/2022-07-23-xss/+page.md
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
---
|
||||
title: XSS 学习
|
||||
created: 2022-07-26
|
||||
tags:
|
||||
- XSS
|
||||
- Notes
|
||||
---
|
||||
|
||||
介绍文章：
|
||||
|
||||
- [前端安全系列（一）：如何防止 XSS 攻击？ - 美团技术团队](https://tech.meituan.com/2018/09/27/fe-security.html)
|
||||
- [Cross-site scripting（跨站脚本攻击） - 术语表 | MDN](https://developer.mozilla.org/zh-CN/docs/Glossary/Cross-site_scripting)
|
||||
|
||||
练习：
|
||||
|
||||
- [prompt(1) to win](https://prompt.ml/)
|
||||
- 解答：[prompt.ml](https://github.com/cure53/XSSChallengeWiki/wiki/prompt.ml#level-1)
|
||||
|
||||
相关文章：
|
||||
|
||||
- [我自己博客的一个 XSS 的故事 | 离别歌](https://www.leavesongs.com/PENETRATION/xss-from-my-blog.html)
|
||||
31
urara/2022-07-27-bin/+page.md
Normal file
31
urara/2022-07-27-bin/+page.md
Normal file
|
|
@ -0,0 +1,31 @@
|
|||
---
|
||||
title: JS中的二进制数字
|
||||
created: 2022-07-27
|
||||
summary: 0b/0B和paresInt
|
||||
tags:
|
||||
- JavaScript
|
||||
---
|
||||
|
||||
参考：[How to Represent Binary Numbers in JavaScript? - Designcise](https://www.designcise.com/web/tutorial/how-to-represent-binary-numbers-in-javascript)
|
||||
|
||||
## ES6+
|
||||
|
||||
在 ES6 之后的版本，在二进制数字前加`0b` 或者`0B`来标识这是一个二进制数字，比如：
|
||||
|
||||
```js
|
||||
let number5 = ob101
|
||||
let number5 = oB101
|
||||
```
|
||||
|
||||
## Before ES6
|
||||
|
||||
- 通过字符串和 parseInt 来转换
|
||||
- parseInt 可以在字符串中提取数字，第一个参数是要提取的字符串，第二个是基准的计算进制
|
||||
|
||||
```js
|
||||
const number = '0101'
|
||||
|
||||
Number.parseInt(number, 2)
|
||||
```
|
||||
|
||||
相关：[JavaScript · 十进制数转二进制](/2022-03-04-decbin)
|
||||
161
urara/2022-07-31-reading-7/+page.md
Normal file
161
urara/2022-07-31-reading-7/+page.md
Normal file
|
|
@ -0,0 +1,161 @@
|
|||
---
|
||||
title: 我在看什么 · 7 月
|
||||
created: 2022-07-31
|
||||
summary: eval / CSP&XSS / Commonplace Book ……
|
||||
tags:
|
||||
- 我在看什么
|
||||
image: /2022-07-31-reading-7/july.webp
|
||||
---
|
||||
|
||||
## 前端
|
||||
|
||||
- **关于类型数组 TypedArray**
|
||||
|
||||
- [TypedArray - JavaScript | MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/TypedArray)
|
||||
- [Typed arrays - Binary data in the browser](https://www.html5rocks.com/en/tutorials/webgl/typed_arrays/)
|
||||
|
||||
- [Deep-copying in JavaScript using structuredClone](https://web.dev/structured-clone)
|
||||
- [How not to learn TypeScript](https://fettblog.eu/how-not-to-learn-typescript/)
|
||||
|
||||
讲了 TypeScript 使用过程中经常犯的错误
|
||||
|
||||
- [25+ JavaScript Shorthand Coding Techniques](https://www.sitepoint.com/shorthand-javascript-techniques/)
|
||||
|
||||
`Math.floor` 的简写是`~~`
|
||||
|
||||
- **eval**
|
||||
|
||||
- [eval-MDN](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/eval#don.27t_use_eval.21)
|
||||
|
||||
- [Js 代替 eval 的方法](https://blog.csdn.net/yx_xuan/article/details/115342622)
|
||||
```js
|
||||
const evalAlter = fn => {
|
||||
const Fn = Function
|
||||
return new Fn('return' + fn)()
|
||||
}
|
||||
```
|
||||
|
||||
- **Vue 函数式组件**
|
||||
|
||||
- [函数式组件](https://staging-cn.vuejs.org/guide/extras/render-function.html#functional-components)
|
||||
- [Vue 函数式组件](https://juejin.cn/post/6867458052036624392)
|
||||
|
||||
- [Notion 编辑器是怎么实现的？](https://www.yuexun.me/blog/how-the-notion-editor-is-implemented/)
|
||||
|
||||
- [Content Security Policy 入门教程](https://www.ruanyifeng.com/blog/2016/09/csp.html)
|
||||
- CSP 是什么：
|
||||
> CSP 的实质就是白名单制度，开发者明确告诉客户端，哪些外部资源可以加载和执行，等同于提供白名单。它的实现和执行全部由浏览器完成，开发者只需提供配置
|
||||
- 设置方法：
|
||||
1. 在 http 头中声明
|
||||
2. 在 meta 标签中声明
|
||||
- 具体配置中：
|
||||
1. 如果同一个限制选项使用多次，只有第一次会生效。
|
||||
2. `script-src`和`object-src`是必设的，除非设置了`default-src`。
|
||||
3. `script-src`不能使用`unsafe-inline`关键字（除非伴随一个`nonce`值），也不能允许设置`data:URL`。
|
||||
- 补充阅读：
|
||||
- [Web Security](https://infosec.mozilla.org/guidelines/web_security#content-security-policy)
|
||||
- [Content security policy](https://web.dev/csp/)
|
||||
- [前端安全系列（一）：如何防止 XSS 攻击？ - 美团技术团队](https://tech.meituan.com/2018/09/27/fe-security.html)
|
||||
|
||||
严格的 CSP 在 XSS 的防范中可以起到以下的作用：
|
||||
|
||||
- 禁止加载外域代码，防止复杂的攻击逻辑。
|
||||
- 禁止外域提交，网站被攻击后，用户的数据不会泄露到外域。
|
||||
- 禁止内联脚本执行（规则较严格，目前发现 GitHub 使用）。
|
||||
- 禁止未授权的脚本执行（新特性，Google Map 移动版在使用）。
|
||||
- 合理使用上报可以及时发现 XSS，利于尽快修复问题。
|
||||
|
||||
- [我自己博客的一个 XSS 的故事](https://www.leavesongs.com/PENETRATION/xss-from-my-blog.html)
|
||||
|
||||
> 浏览器在渲染 JavaScript 伪协议地址的时候，会先进行 URL 解码，再执行 JavaScript。
|
||||
|
||||
> 因为浏览器在解析 URL 的时候会进行 URL 解码，那么用户的输入理应进行 URL 编码后再放进 URL 中。这就是我修复这个漏洞的方法，让用户的输入按照浏览器解析的顺序进行编码：**先进行 unicode 编码再进行 url 编码。**
|
||||
|
||||
- [Ladle vs. Storybook: Measuring performance across project sizes](https://blog.logrocket.com/ladle-storybook-performance-project-sizes/)
|
||||
|
||||
这个博客的文章质量都很高
|
||||
|
||||
- [a fresh new web framework is out](https://www.youtube.com/watch?v=4boXExbbGCk)
|
||||
|
||||
## 后端
|
||||
|
||||
- [Linux 入侵检测](https://www.cnblogs.com/sanduo1314/p/7458415.html)
|
||||
- [如何删除镜像、容器和数据卷？几个值得收藏的 docker 命令](https://juejin.cn/post/6914846299607171080)
|
||||
- [HTTP 413 错误解决方法](https://www.cnblogs.com/jiahm/p/12357503.html)
|
||||
|
||||
总结一下：413 错误是因为上传文件的大小超过了限制，需要调整 Nginx 设置，比如在 server 里面加
|
||||
|
||||
```yaml
|
||||
client_max_body_size 8M; #配置请求体缓存区大小
|
||||
|
||||
client_body_buffer_size 128k; #设置客户端请求体最大值
|
||||
|
||||
fastcgi_intercept_errors on;
|
||||
```
|
||||
|
||||
今天在安装 WordPress 主题时遇到了这个问题，上次遇到好像是在 Mastodon 上传表情包的时候（不确定）
|
||||
|
||||
- **关于 WordPress 上传限制这回事：**
|
||||
- [【docker】wordpress 修改文件上传限制](https://blog.csdn.net/j84491135/article/details/105977073)
|
||||
- [How to install & use nano in a running Docker container](https://techoverflow.net/2019/10/13/how-to-install-use-nano-in-a-running-docker-container/)
|
||||
- 这样方便一点：[如何修改 wordpress docker 容器的文件上传尺寸限制？](https://blog.csdn.net/sitebus/article/details/97648177)
|
||||
|
||||
## 什锦
|
||||
|
||||
- [折腾火狐](https://mp.weixin.qq.com/s/HvDKWRPXZbFK4T8pXZTWNg)
|
||||
- [中文博客榜](https://xyzrank.com/)
|
||||
- [git add .，git add -A，git add -u，git add\* 的区别与联系](https://dingxuewen.com/article/about-git-add/)
|
||||
- [Delightful lists](https://delightful.club/)
|
||||
|
||||
> Delightful lists are an effort to help bring change to this trend. To make freedom more discoverable again. This top-level project will allow navigation to all high-quality curated delightful lists created and maintained all over the web.
|
||||
> Anyone that wishes to do so can create their own list, and thus create an entrypoint to freedom.
|
||||
|
||||
- [Computer Programming](https://homepage.cs.uri.edu/faculty/wolfe/book/Readings/Reading13.htm)
|
||||
|
||||
偶然进入的网站，没有入口也没有出口，比较有年代感了
|
||||
|
||||
> A set of rules that provides a way of telling a computer what operations to perform is called a programming language. There is not, however, just one programming language; there are many. In this chapter you will learn about controlling a computer through the process of programming. You may even discover that you might want to become a programmer.
|
||||
|
||||
- [Mentality](https://alearningaday.blog/2022/07/11/mentality/)
|
||||
|
||||
一点点鸡汤
|
||||
|
||||
|
||||
- [白话开源和 Web3](https://mp.weixin.qq.com/s/6B8z5NJzsDNN54EIF9oRzQ)
|
||||
|
||||
原文：[Open source and web3, simplified](https://www.flyingpenguins.io/p/open-source-and-web3-simplified)
|
||||
|
||||
> “并非所有这些平台本身都开源，但重要的是，与服务模式绑定的收益会直接反馈在其原生代币的价值上。有了这样的设定，随着时间的推移将源代码开放出来的激励是巨大的，因为它让开发者更具活力，让基于服务的生态系统得以存续，并让人们相信，项目将会以最符合网络利益的方式持续运作（因为倘若不这样，它可以被＂分叉＂，即容易被复制）”
|
||||
|
||||
> “它也不仅仅是代码。想想维基百科、Facebook、Uber、Linux —— 所有这些项目都是由少数人定义平台的规则，然后大量的人参与价值构建。在这些社区中进行价值捕获和分配面临各种困境 ──Facebook 或 Uber 模式让少数人暴富，维基百科或 Linux 模式则几乎无利可图。我上面描述的结构能够让用户参与价值的创造和捕获，既适用于 Facebook 也可用于 Linux。”
|
||||
|
||||
- [How to lazy load images in Hugo](https://flaviocopes.com/lazy-load-images-hugo/)
|
||||
|
||||
> Create the file `layouts/_default/_markup/render-image.html` in your theme with this content:
|
||||
|
||||
```html
|
||||
<img src="{{ .Destination | safeURL }}" alt="{{ .Text }}" loading="lazy" />
|
||||
This makes the resulting HTML have the loading="lazy" attribute, which lazily loads images.
|
||||
```
|
||||
|
||||
- [How Do Dolphins Choose Their Name?](https://www.discovermagazine.com/planet-earth/how-do-dolphins-choose-their-name)
|
||||
> Dolphins identify themselves with a unique whistle that scientists have likened to a human name. Here's how they decide what to call themselves.
|
||||
|
||||
## Commonplace Book
|
||||
|
||||
- [Commonplace book-Method of knowledge compiling](https://en.wikipedia.org/wiki/Commonplace_book)
|
||||
- [How To Keep A Commonplace Book - 2022 Edition](https://www.youtube.com/watch?v=NPqjgN-pNDw)
|
||||
|
||||
1. Intentionality
|
||||
|
||||
> every idea matters
|
||||
|
||||
> just collect very succinct quotes from biographies that i've read from books that i've read or from articles from of the internet that i've read and over time i ended up with this collection of very succinct sentences that but basically every one of these sentences they mean something every one of these words they mean something every expression that i put into this book they're all very deeply personal for me and also the act of writing for me is very personal because writing for me and journaling for me is a form of calming the brain because my brain does not shut up so point one keeping a commonplacebook on a physical notebook is a lot more deliberate
|
||||
|
||||
2. better editing
|
||||
> writing on the paper at least
|
||||
> for me liberates me from that uh illusion of
|
||||
> perfection illusion of cleanliness that i get on a computer screen because i can
|
||||
> cross everything out i can cross things out straight away and i can spot
|
||||
> mistakes and you know weak sentences straight away
|
||||
3. Crossing Disciplines
|
||||
89
urara/2022-07-31-vol2/+page.md
Normal file
89
urara/2022-07-31-vol2/+page.md
Normal file
|
|
@ -0,0 +1,89 @@
|
|||
---
|
||||
title: Nonsense Wander ~ Vol2
|
||||
created: 2022-08-15
|
||||
summary: 20 张照片 / Experiments with Google / delightful fediverse apps / 你的电脑是怎么看你的呢？
|
||||
tags:
|
||||
- Nonsense Wander
|
||||
---
|
||||
|
||||
这里是无意义漫游记第二期，最近两周活得焦头烂额所以没有找到什么新东西，翻箱倒柜炒旧饭中，有的记忆已经很模糊了……但好东西不怕时间流逝不是吗？再看一次吧
|
||||
|
||||
## Video
|
||||
|
||||
### 1. [【一席】王久良:有关中国大地的 20 张照片](https://www.bilibili.com/video/BV1Yb411G7BG)
|
||||
|
||||
> “一邊是爛尾的城市，一邊是破碎的山河。”
|
||||
>
|
||||
> 王久良，自由攝影師。2008-2011 年創作《垃圾圍城》。2011-2016 年創作《塑料王國》，獲得阿姆斯特丹紀錄片電影節(IDFA)新人單元評委會大獎。這是王久良最新的攝影項目，“有關中國大地的一切，確切地說，就是藉助影像去重新觀察我們基於人類的行為對地貌造成的影像，并進一步地求證，我們每一個個體和腳下大地的關係。”
|
||||
|
||||
相关文章：[王久良：一边是烂尾的城市，一边是破碎的山河 - 中国数字时代](https://chinadigitaltimes.net/chinese/581568.html)
|
||||
|
||||
几年前的一个深夜看到那张矿山的照片，感觉自己也被那些大大小小的矿井吸了进去，不合时宜地想起那句话「当你凝视深渊的时候，深渊也在凝视你」，深渊……深渊……
|
||||
|
||||
### 2. [Stolen Aircraft Makes an Unauthorized Takeoff and Crashes into Seattle](https://youtu.be/lQy3e5yUKvo)
|
||||
|
||||
> “I think I am going to try to do a barrel roll and if that goes good then I am going to go nose down and call it a night."
|
||||
|
||||
关于 2018 年一位机场工作人员偷飞机的事情。
|
||||
|
||||
「我只是身体里的一个螺丝松掉了」之前在微博看到这件事情，这句话，久久地被打动了，时常觉得自己离螺丝松掉只差一步，离崩溃只差一步。当时跟朋友分享的时候，她说「他这样太自私了，太不负责任了，只有自己浪漫」，然后我只能为他找借口，「据说是有一些精神上的问题」。现在想起来觉得有些荒谬，很多事情没有绝对的对错，也许从大的层面上说他这样确实是很不负责任，但从个人的层面上我想我可以理解他，每个人都有崩溃的时候，失控的时候，也许这正是健全人所不能理解的事情吧……
|
||||
|
||||
## Tool
|
||||
|
||||
### 1. [delightful fediverse apps](https://delightful.club/delightful-fediverse-apps/)
|
||||
|
||||
> A curated list of applications for the Fediverse that are based on the ActivityPub protocol and related standards.
|
||||
|
||||
一个联邦宇宙相关 APP 的清单
|
||||
|
||||
### 2. [Obsidian CSS Snippets](https://blog.dev0.sh/2022/03/14/obsidian-css.html)
|
||||
|
||||
Obsidian 的 CSS 片段合集
|
||||
|
||||
### 3. [The Brutalist Report](https://brutalist.report/)
|
||||
|
||||
> The day's headlines delivered to you without bullshit.
|
||||
|
||||
汇集了多个平台的每日头条的网站
|
||||
|
||||
### 4. [Find Discord Bots | The #1 Discord Bot List](https://top.gg/tags)
|
||||
|
||||
一个 Bot 集合网站，大部分是 Discord 上的 bot，不知道可不可以搬到 Matrix？
|
||||
|
||||
## What Else
|
||||
|
||||
### 1. Emergence Magazine
|
||||
|
||||
- [Living with the Unknown – Emergence Magazine](https://emergencemagazine.org/)
|
||||
- [Shikoku Pilgrimage – Emergence Magazine](https://emergencemagazine.org/feature/shikoku-pilgrimage/#/index)
|
||||
一本交互式的杂志
|
||||
|
||||
### 2. [Experiments with Google](https://experiments.withgoogle.com/)
|
||||
|
||||
> Since 2009, coders have created thousands of amazing experiments using Chrome, Android, AI, AR and more. We're showcasing projects here, along with helpful tools and resources, to inspire others to create new experiments. Here are collections of experiments to explore, with new ones added every week. Have fun
|
||||
|
||||
谷歌的实验平台，有很多有趣的项目
|
||||
|
||||
### 3. [🎀 𝒢𝓁𝒶𝓃𝒸𝑒 𝐵𝒶𝒸𝓀 🎀](https://glanceback.info/)
|
||||
|
||||
> Doesn't your computer deserve a chance to glance back @ you?
|
||||
>
|
||||
> Glance Back is a daily photo diary, capturing the moments shared between you and your computer. Once a day, when you open a new tab, Glance Back will unexpectedly take your photo, ask you what you’re thinking about, and save both the photo and written thought to its locally stored archive.
|
||||
|
||||
你的电脑是怎么看你的呢？
|
||||
|
||||
### 4. [DEMO Studio](http://www.demostudio.cn/)
|
||||
|
||||
> 首先大部分塑料是进化不完全的，它被制造的时候没有考虑废品的处理成本，当人从后续处理中缺席时找不到责任人，只能谴责这个 Frankenstein；然后媒体没有深究根本原因是塑料被过度消耗了，没有提供理性生产理性消费的建议是他们的局限；再者也有一些姿态比较激进的环保组织，新能源产业默认（或者也主导了）妖魔化的策略，所以这是一种政治/经济手段，也挺有效果的。
|
||||
>
|
||||
> ——[塑料是罪恶的吗？](https://mp.weixin.qq.com/s/aXEf7R809hwRyEi56c6pRA)
|
||||
|
||||
> 当今建筑明星和明星建筑的诞生越来越依靠于这套意义生产体系。越是生产图像，越是激活了一连串的图像经济产业链；越是生产意义，建筑则越抽象成雕塑一样的物品，剥离了它原本成为人们居住生活场所的空间。
|
||||
>
|
||||
> 那么，以社会改造为目的的建筑还有没有别的方向可以走？
|
||||
>
|
||||
> ——[社会建筑背后的意义生产](https://mp.weixin.qq.com/s/ZRwqMX04dQ3iFUmn5e7FwQ)
|
||||
|
||||
### 5. [Timeline Of Design Periods | Preceden](https://www.preceden.com/timelines/308433-timeline-)
|
||||
|
||||
设计史的发展历程，所在平台 Preceden 也是一个做时间轴的好工具
|
||||
21
urara/2022-08-06-notes/+page.md
Normal file
21
urara/2022-08-06-notes/+page.md
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
---
|
||||
title: Monkey Patch
|
||||
created: 2022-08-06
|
||||
summary: 猴子打补丁
|
||||
toc: false
|
||||
tag:
|
||||
- Notes
|
||||
---
|
||||
|
||||
[Monkey Patch - Wikipedia](https://en.wikipedia.org/wiki/Monkey%20patch)
|
||||
|
||||
> A **Monkey patch** is a way for a program to extend or modify supporting system software locally (affecting only the running instance of the program)."
|
||||
|
||||
也可以可以理解为基于原生功能（API）的一些自定义拓展？这个概念常在 Python 里面出现，也叫鸭子双关
|
||||
|
||||
[Checking if a JavaScript native function is monkey patched](https://mmazzarolo.com/blog/2022-07-30-checking-if-a-javascript-native-function-was-monkey-patched/)
|
||||
|
||||
> Monkey patching is a powerful but dangerous technique because the code you’re overriding is not in your control: future updates to the JavaScript engine may break some assumptions made in your patch and cause serious bugs.
|
||||
> Additionally, by monkey patching code you don’t own, you might override some code that has already been monkey patched by another developer, introducing a potential conflict.
|
||||
|
||||
对于 JS 来说，Monkey patch 的问题在于：如果 JS 引擎更新了，可能会带来一些难以预计的 bug，这篇文章说了几种怎么检测是否存在 monkey patch 函数的方法，比如用 toString、iframe、proxy 等等，但都不是很完美，可以根据使用场景来决定用哪种方法
|
||||
1256
urara/2022-08-12-vue-challenges/+page.md
Normal file
1256
urara/2022-08-12-vue-challenges/+page.md
Normal file
File diff suppressed because it is too large
Load diff
183
urara/2022-08-14-design/+page.md
Normal file
183
urara/2022-08-14-design/+page.md
Normal file
|
|
@ -0,0 +1,183 @@
|
|||
---
|
||||
title: 通用设计 VS. 包容性设计
|
||||
created: 2022-08-14
|
||||
summary: Universal Design VS. Inclusive Design
|
||||
tag:
|
||||
- Design
|
||||
- Notes
|
||||
image: /2022-08-14-design/photo.png
|
||||
---
|
||||
|
||||
这篇博文为测试博文，是读论文[《通用设计与包容性设计原则的发展和挑战》](https://www.researchgate.net/publication/328981184_tongyongshejiyubaorongxingshejiyuanzedefazhanhetiaozhan)的学习笔记，内容可能有不对的地方，逻辑也可能不通顺，感兴趣的朋友可以再研究一下。
|
||||
|
||||
## 社会背景和起源
|
||||
|
||||
- **人口老龄化和失能者增加**
|
||||
|
||||
老人和失能者的社会境遇往往与普通人明显不同
|
||||
|
||||
- **设计师摩尔（Patricia Moore）的变装实验**
|
||||
- **无障碍（Barrier-free）运动**
|
||||
|
||||
（20th50s）开启了公共政策和设计实践的变革
|
||||
|
||||
- 1963 年，英国建筑师戈登史密斯（Selwyn Goldsmith）出版了名为 **《为失能者设计》** 的综合建筑设计导则
|
||||
- **失能人士权力运动**
|
||||
- **全球层面存在的具有地缘特征的挑战**
|
||||
|
||||
诸如越来越多的移民和流动人口造成的族群和文化多样性 ；经济发展失衡和贫富分化 ；城市化进程对生活方式的影响等等
|
||||
|
||||
## 共同的理念
|
||||
|
||||
> 产品和环境应考虑全体公民的需求和权利
|
||||
|
||||
> 减少和消除失能者与普通人之间在生理和思想观念上的隔阂
|
||||
|
||||
> 努力帮助失能者融入主流群体
|
||||
|
||||
> 失能者提供的许多环境变化实际上能使每个人都从中受益，许多类似的功能可以普及推广，从而更便宜，更有吸引力，甚至更有市场，并且不会带有污名化和歧视性标签
|
||||
|
||||
## 相关概念
|
||||
|
||||
### 无障碍设计 Barrier-free Design
|
||||
|
||||
- 特点
|
||||
|
||||
针对<u>残疾人</u>考虑
|
||||
|
||||
- 障碍的尺度
|
||||
- 永久性残疾 permanent disability
|
||||
- 情境性残疾 situational disability
|
||||
- 临时性残疾 temporary disability
|
||||
- 设计的角度（障碍的具体原因）
|
||||
- 视觉无障碍设计 visual
|
||||
- 听觉无障碍设计 hearing
|
||||
- 行动无障碍设计 mobility
|
||||
- 认知无障碍设计 cognition
|
||||
|
||||
### 跨代设计 Transgenerational Design
|
||||
|
||||
- **起源**
|
||||
|
||||
美国雪城大学（Syracuse University）的**珀克尔**（James Pirkl）教授和他的同事们提出概念以及一系列适用于这一概念的指导方针和战略
|
||||
|
||||
- **定义**
|
||||
|
||||
主张产品、服务和环境同时满足**不同年龄**和能力人群的需求，尤其强调老年人应能与年轻人在同一环境中共事
|
||||
|
||||
### 全纳设计 Design for All
|
||||
|
||||
- **起源**
|
||||
|
||||
北欧斯堪的纳维亚地区
|
||||
|
||||
- **概念**
|
||||
|
||||
强调产品应被设计为可让最广泛的用户群使用，包容人类的多样性，尊重人的**平等**
|
||||
|
||||
### 通用设计 Universal Design
|
||||
|
||||
- **特点**
|
||||
|
||||
从商业利益角度
|
||||
|
||||
- **起源**
|
||||
- **美国**建筑师、设计师和教育先驱梅斯（Ron Mace）
|
||||
- 将概念从无障碍设计强调环境应**适合失能人士**的语境
|
||||
- **概念**
|
||||
|
||||
强调产品和环境不需要作特别调整而尽最大可能为**所有人可用**的理念
|
||||
|
||||
- **NCSU 的通用设计原则**
|
||||
|
||||
- 具体原则
|
||||
- 使用平等
|
||||
- 使用灵活
|
||||
- 使用简单直观
|
||||
- 信息可觉察
|
||||
- 容错
|
||||
- 不费力
|
||||
- 适于接近和使用的尺度与空间
|
||||
- 三个层次
|
||||
|
||||
1. **价值**
|
||||
|
||||
- "平等观"
|
||||
- 强调对所有的用户一视同仁。
|
||||
需注意这种一视同仁并非出于漠视用户的差别，而是指产品、服务和环境对用户使用体验和价值的一致性，即用户所得结果的一致性，此一致性不应受用户能力差异的影响。
|
||||
|
||||
2. **需求**
|
||||
- 强调尽可能降低对用户的能力要求，其所指的能力既包括了生理和感官能力，也涵盖了认知和表达。
|
||||
- 一般选择以最低能力的用户为标准进行设计，从而使产品、服务和建成环境得以覆盖全体用户的使用能力范围。
|
||||
3. **供给**
|
||||
|
||||
主张提供尽可能高的灵活性和容错能力
|
||||
|
||||
- **设计的目标**
|
||||
1. 合身——适应各种体型和能力
|
||||
2. 舒适——将需求保持在身体机能的理想限度内
|
||||
3. 觉察——确保（产品）使用的关键信息易于获得
|
||||
4. 理解——使操作和使用的方法直观、清晰、明确
|
||||
5. 健康——有助于促进健康、避免疾病和预防伤害
|
||||
6. 社会融合——以有尊严和尊重的方式对待所有群体
|
||||
7. 个性化——包含选择机会和个人偏好的表达
|
||||
8. 文化适宜性——尊重和加强设计项目的文化价值及社会和环境背景。
|
||||
- **案例**
|
||||
- 斜坡入口
|
||||
- 自动门
|
||||
- 杠杆门把手
|
||||
- 平板灯开关
|
||||
- 任务照明
|
||||
|
||||
### 包容性设计 Inclusive Design
|
||||
|
||||
- **起源**
|
||||
|
||||
英国
|
||||
|
||||
- **概念**
|
||||
|
||||
主旨是在认识到用户**群体多样性**的情况下，倡导主流的产品、服务和建成环境应尽可能满足更多人的需求 ，或者说，将设计可能产生的**排斥度降到最低**。
|
||||
|
||||
- **特点**
|
||||
- 和通用设计与全纳设计强调在技术可能性允许的条件下将可及性最大化略有不同，包容性设计主张为产品、服务和建成环境选取**合适的市场区间**，通过降低对用户使用能力的要求，从而将产品的主要适用人群在合理的可能性下最大化，并提升用户体验和满意度
|
||||
- 并不以失能者为中心，也避免采用“辅助技术”
|
||||
- 注重每个个体的福祉，但不再刻意追求在一项设计中满足所有群体的需求。
|
||||
- **意义**
|
||||
|
||||
包容性设计可以在有限的资源约束下，为创造尽可能多的普惠价值提供方法和途径，从而与辅助技术的发展相辅相成。
|
||||
|
||||
- **“群体金字塔”**
|
||||
|
||||
|
||||
展现了群体中的个体能力多样性差异
|
||||
|
||||
- **方法论**
|
||||
|
||||
通过合理降低能力要求，提升在不同情境下广泛客户群的产品体验
|
||||
|
||||
- **案例**
|
||||
- 微软推出的 Xbox Adaptive Controller
|
||||
- Chrome 浏览器的无障碍字幕
|
||||
|
||||
## 总结
|
||||
|
||||
- **通用设计**：
|
||||
- 强调产品和环境无需做特别调整而尽最大可能为所有人而用。
|
||||
- 例如：公共空间的斜坡入口设计，既可以满足使用轮椅的人的需求，同时又有利于骑自行车的孩子、使用步行者的老年人、推婴儿车的父母等其他所有人群的使用。
|
||||
- **包容性设计**：
|
||||
- 主张为产品、服务和建成环境选取合适的市场区间，通过降低对用户使用能力的要求，从而将产品的主要适用人群在合理的可能性下最大化。
|
||||
- 例如：微软推出的 Xbox Adaptive Controller 是一款针对残疾玩家和运动技能较差的人的游戏机，它有更大的按键和更容易被打开的包装设计，残疾人可以不费力使用的同时，普通人也能轻松地使用。
|
||||
|
||||
总而言之，两者都有相同的出发点，即"帮助失能人群更好地融入主流群体"，同时都务实地接受一种产品并不总是能够满足整个人群的需求。其中，通用性设计以全体大众为出发点，不特意针对某一类族群而设计，包容性则主张在满足特定困难人群需求的基础上辐射到最广泛人群上。
|
||||
|
||||
## Reference
|
||||
|
||||
- [Universal Design 101 | Rick Hansen Foundation](https://www.rickhansen.com/news-stories/blog/universal-design-101)
|
||||
|
||||
- [包容性设计(inclusive design)和通用设计(universal design)的区别是什么？](https://www.zhihu.com/question/26045305)
|
||||
|
||||
- [从无障碍设计中学习如何成为一个更好的设计师](https://zhuanlan.zhihu.com/p/119766231)
|
||||
|
||||
- [无障碍设计](https://zhuanlan.zhihu.com/p/31657525)
|
||||
- [Microsoft-Inclusive Design](https://www.microsoft.com/design/inclusive/)
|
||||
128
urara/2022-08-15-vol3/+page.md
Normal file
128
urara/2022-08-15-vol3/+page.md
Normal file
|
|
@ -0,0 +1,128 @@
|
|||
---
|
||||
title: Nonsense Wander ~ Vol3
|
||||
created: 2022-08-15
|
||||
summary: ActivityWatch / scrut.ch / 微信聊天记录导出工具 / 秋天到了
|
||||
tags:
|
||||
- Nonsense Wander
|
||||
---
|
||||
|
||||
周日快乐！这是无意义漫游记的第三期，没想到居然~~糊弄~~写到第三期了……这两周我又收集了更多的个人博客和工具，虽然感觉自己有看蛮多博客的，但是要写的时候都找不到了，罢也，找不到也是一种缘分……
|
||||
|
||||
八月，秋天来得比我想象中还要快，已经过上了不需要空调和风扇也能入睡的日子了。
|
||||
|
||||
## Tools
|
||||
|
||||
### 1. [ActivityWatch](https://activitywatch.net/)
|
||||
|
||||
一个记录时间花费的 App，跨平台(Windows, macOS, Linux, and Android)且开源，我下了 mac 版本的，但是没有跑得起来。这个 App 目前还不支持同步，但是团队有在推进同步功能了，值得期待
|
||||
|
||||
> ActivityWatch is an app that automatically tracks how you spend time on your devices.
|
||||
>
|
||||
> It is open source, privacy-first, cross-platform, and a great alternative to services like RescueTime, ManicTime, and WakaTime.
|
||||
>
|
||||
> It can be used to keep track of your productivity, time spent on different projects, bad screen habits, or just to understand how you spend your time.
|
||||
|
||||
### 2. [网页变动提醒 - 云端+开源自部署](https://creatorsdaily.com/4a320489-cede-40ce-8eec-85528e51d294)
|
||||
|
||||
> 云端持续定时监控/检测一个网页的变化，间隔最小十分钟。
|
||||
> 如网页有变化或指定的关键词出现， 便发送电子邮件提醒，或电话提醒（开发中）。
|
||||
|
||||
### 3. [Rosé Pine](https://rosepinetheme.com/)
|
||||
|
||||
一个多彩的色彩系统，有很多现成可用的样式方案，比如说 Pleroma、Misskey、VS Code……之类的
|
||||
|
||||
> A community-enriched theme and palette featuring all natural pine, faux fur and a bit of soho vibes for the classy minimalist.
|
||||
|
||||
### 4. [scrut.ch](https://scrut.ch/)
|
||||
|
||||
一个基于浏览器的 Markdown 写作工具，功能很少，但不需要注册还可以分享，应急用还挺好的
|
||||
|
||||
> scrut.ch is a non-bloated, secure editor with only one main feature: writing. Together with others or in private. You wouldn’t know you missed it, until you’ve tried it.
|
||||
|
||||
### 5. [微信聊天记录导出工具](http://wxbackup.imxfd.com/)
|
||||
|
||||
免费的聊天记录导出工具，可以导出为 html 格式，查看很方便
|
||||
|
||||
## Blogs
|
||||
|
||||
当当当——又发现一些有趣的个人博客啦！请看：
|
||||
|
||||
### 1. [maya.land](https://maya.land/)
|
||||
|
||||
一个 oldschool 风格的个人博客，有点魔法的感觉，字体很好看
|
||||
|
||||
> Warning – this website may contain strong language (which may be unsuitable for children), time-wasting links (which may be unsuitable for adults), and nonliteral material (which may be unsuitable for STEM majors).
|
||||
|
||||
> If you want someone to provide you with recipes without advertising or personal essays, buy a cookbook.
|
||||
> ——[recipe blogs | maya.land](https://maya.land/recipe-blogs/)
|
||||
|
||||
### 2. [RACH SMITH](https://rachsmith.com/)
|
||||
|
||||
一个 Codepen 开发者的数字花园，更新比较频繁。风格蛮雅致和特别的，特别是首页燃烧的名字，非常亮眼（还可以停火），我很喜欢这个博客的方格背景和标签的样式。
|
||||
|
||||
> Hi 👋🏼 I'm Rach. A developer building software for CodePen, wife, mother of two, productivity nerd and recovering screen addict. This is my digital garden.
|
||||
|
||||
> I honestly don’t think this note is very good. Fuck it, I’ll publish anyway.
|
||||
>
|
||||
> [Fuck it](https://rachsmith.com/fuck-it/)
|
||||
|
||||
> Yes, we can design our learning strategy so that we are learning more efficiently, but there is no way to short-cut learning new things. You still have to put in work to gain knowledge and experience around a subject. Hopefully, if you’re making sure you’re relying on intrinsic motivation, it will be easier to keep going when things get difficult.
|
||||
>
|
||||
> [Learning how you best learn: some questions to ask yourself](https://rachsmith.com/learning-how-you-best-learn-some-questions-to-ask-yourself/)
|
||||
|
||||
### 3. [Older Than Netfic](https://olderthannetfic.tumblr.com/)
|
||||
|
||||
一个同人作者的博客，蛮有意思的
|
||||
|
||||
> I'm a filmmaker and novelist who is hopelessly addicted to old fandoms.
|
||||
> I live in Oakland, CA. I like hanging out with fans in person. Look me up if you're in the area. I'm also on Dreamwidth as franzeska.
|
||||
|
||||
### 4. [Forever's Home](https://aroace.space/)
|
||||
|
||||
一个[GoToSocial](https://gts.superseriousbusiness.org/)实例站长的博客，基于 Hugo 搭建，也是比较复古的风格
|
||||
|
||||
> Hey. I’m Forever. I'm part of the Leptæniformia System, which is me and Lilith. This is our shared website, but mostly I write. Anyway, I’m a queer weirdo residing in Colorado with a hyperfixation on programming, specifically web programming and accessibility. Things I have been previously hyperfixated on include chess, cars, Linux, and theming. I believe minimalism is good, as it allows something to be robust; which is why this website is so tiny. I tinker around with things sometimes.
|
||||
|
||||
### 5. [Nabeel Qureshi](https://nabeelqu.co/)
|
||||
|
||||
这个博客好像蛮多人在关注的，效率类的内容比较多，风格比较小清新
|
||||
|
||||
> I work at Palantir on health research at NIH. This includes N3C, the US’s largest HIPAA-limited electronic health record dataset for researchers to better understand the long-term effects of COVID-19 and, soon, other diseases.
|
||||
|
||||
> I concluded that what we call 'intelligence' is as much about virtues such as honesty, integrity, and bravery, as it is about 'raw intellect’.
|
||||
> ——[understanding - nabeelqu](https://nabeelqu.co/understanding)
|
||||
|
||||
好了，没有了，好像还看了蛮多的，但是找不到了 Orz……
|
||||
|
||||
## What Else
|
||||
|
||||
### 1. [UNINCORPORATED ASSOCIATES](https://unincorporatedassociates.com/)
|
||||
|
||||
这是一个设计工作室的网站，形式很特别，以桌面文件夹形式的展示图片/项目、还有打字机的文字效果，还做了权限控制，很酷
|
||||
|
||||
> WE ARE A FUTURIST, MULTI-DISCIPLINE DESIGN STUDIO.
|
||||
>
|
||||
> WE CREATE IMMERSIVE EXPERIENCES THAT TRANSFORM THE WAY WE LIVE, THE WAY WE FEEL AND OUR IMPACT ON THE PLANET.
|
||||
>
|
||||
> WE DO THIS BY BRINGING TOGETHER ARCHITECTURE, APPAREL AND CUSTOM AUTO DESIGN.
|
||||
|
||||
### 2. [聊聊月经杯](https://hystericalanduseless.club/menstrualcups/)
|
||||
|
||||
> 所有正在经历月经的女性都应该选择安全、舒适、有能力负担且尽可能环保的月经用品，为了实现这一目标，研究人员和政策制定者不仅需要综合考虑产品本身的安全性、更要考虑到产品分销过程的复杂性、产品之外的社会因素造成的影响，来改善女性的月经体验。这些问题的答案绝不可能是简单的，幸运的是，时至今日，相对成熟的科学研究方法能为解决这些复杂的跨界问题提供重要的支持。虽然现有研究的总体质量还有很大提升空间，但仍旧可以为我们提供大量层次丰富的信息。与此同时，专业人士也有责任向公众及时传达最新研究成果，科学知识的普及对于使公民做出明智的个人和专业选择至关重要。
|
||||
>
|
||||
> 看见月经贫困仅仅是个开始，我们还有很长的路要走。
|
||||
> ——[#hystericalanduseless](https://hystericalanduseless.club/)
|
||||
|
||||
### 3. [Lingdong Huang's Work](https://lingdong.works/)
|
||||
|
||||
一个从事交互艺术编程的人的作品，有很多有趣的项目，比如[变老模拟镜子](https://age2death.glitch.me)、 [用文言文编程](https://wy-lang.org/)、[鱼画生成器](https://fishdraw.glitch.me/) 等等……
|
||||
|
||||
> My field of expertise is high-performance software development for the arts, multimedia, research, and entertainment. I am skilled in software development that entails novel combinations of machine learning, computer vision, computer
|
||||
> graphics, and interaction design for applications such as interactive artworks, games, visualizations, and virtual realities. My effort contributes to the creation of experimental prototypes, installations and performances in museums,
|
||||
> advertising, and online experiences.
|
||||
|
||||
## 后记
|
||||
|
||||
今天是农历的七月十三，进小区的时候差点踩到一个橘子，确切地说，是插着一根香的半只橘子，走到楼底，看到有一位阿姨在点香，我突然想起来中元节到了，也就是鬼节，想必此时此刻的家里也点着这样的香。
|
||||
|
||||
妈妈前几天给我发来消息，说家里这几天在过节，杀鸡又杀鸭的，让我也加点菜，可是加点什么菜好呢？于是今晚吃了麦当劳。总是在下雨天来到麦当劳，伞是湿的，心情也是湿漉漉的，吃饱喝足之后在麦当劳度过了非常平静的一个小时，没有在看招聘软件也没有在学习，在嘟文编辑框里删删改改，写了又丢掉，父母、家庭、朋友、我……没什么特别的东西，想想还是算了，又刷了会儿嘟文，看到了某位象友去世的消息，悲伤渐渐地蔓延开来了，十年，很多人都不见了。
|
||||
134
urara/2022-08-18-lwt/+page.md
Normal file
134
urara/2022-08-18-lwt/+page.md
Normal file
|
|
@ -0,0 +1,134 @@
|
|||
---
|
||||
title: VPS · 用 docker 安装语言学习工具 LWT
|
||||
created: 2022-08-18
|
||||
summary: Installing LWT with docker and docker composer
|
||||
tag:
|
||||
- VPS
|
||||
- Self-host
|
||||
- Docker
|
||||
image: /2022-08-18-lwt/wizard.png
|
||||
---
|
||||
|
||||
[LWT](https://learning-with-texts.sourceforge.io/) 是一个阅读分词软件，上传阅读材料后可以标记其中的生词并制卡复习，全称叫 Learning with Texts，不过我还没有怎么用过，详细的介绍可以看下面这几篇文章：
|
||||
|
||||
- [英语学习软件推荐——Learning with text (LWT) | 软通达](https://cyddgh.github.io/post/20220311154810/)
|
||||
- [Learning With Text 使用全解（也许） - 知乎](https://zhuanlan.zhihu.com/p/463832139)
|
||||
- [LWT(learning With Text) 本地化安装 - 知乎](https://zhuanlan.zhihu.com/p/473056398)
|
||||
- Demo： [Learning With Texts (LWT)](https://learning-with-texts.sourceforge.io/testdb/index.php)
|
||||
|
||||
LWT 可以在本地安装也可以在 VPS 上安装，鉴于买了就要用的原则，我决定在 VPS 上安装看看。
|
||||
|
||||
我安装的 docker image 来源于：[GitHub - jsz4n/lwt-docker: Learning With Texts with Docker](https://github.com/jsz4n/lwt-docker)，还有试过一些其他的 docker image ，都不太顺利，这安装介绍也写得不太清楚，几番周折之后，我修改了`docker-compose.yml` 中的部分内容后部署成功了，下面是我的搭建过程。
|
||||
|
||||
## 0. 准备
|
||||
|
||||
前提：安装好 docker 和 docker composer、nginx
|
||||
|
||||
如果还没安装的话，可以这样安装（Ubuntu）：
|
||||
|
||||
```bash
|
||||
sudo apt update
|
||||
sudo apt install docker docker-compose
|
||||
sudo apt install nginx
|
||||
```
|
||||
|
||||
准备一个解析好了的域名，如在 Cloudflare 里面配置域名`n.example.org` ：添加一个 A 记录，名称为`n` ，内容为 VPS 的 IP 地址，如`123.123.123.14`
|
||||
|
||||
我之前安装了比较新的 docker composer 版本(1.27.4)，如果没有装新版的话，下面操作的`docker compose`请全部替换为`docker-compose`
|
||||
|
||||
## 1. 下载仓库源码
|
||||
|
||||
我决定在`/opt/`文件夹下面安装，首先进入 opt 文件夹
|
||||
|
||||
```bash
|
||||
cd /opt
|
||||
```
|
||||
|
||||
复制 git 仓库并进入文件夹
|
||||
|
||||
```bash
|
||||
sudo git clone https://github.com/jsz4n/lwt-docker.git
|
||||
cd lwt-docker
|
||||
```
|
||||
|
||||
原 README 有讲需要本地 build 一下 image，但是感觉不是很必要？我直接用了 `suzanje/lwt:latest` 中的 image
|
||||
|
||||
## 2. 修改配置
|
||||
|
||||
打开`docker-compose.yml`文件：
|
||||
|
||||
```bash
|
||||
sudo nano docker-compose.yml
|
||||
```
|
||||
|
||||
修改密码：
|
||||
|
||||
```yaml title="docker-compose.yml" {7,15}
|
||||
version: '3'
|
||||
|
||||
services:
|
||||
mariadb:
|
||||
image: mariadb:10.6
|
||||
restart: always
|
||||
environment:
|
||||
- 'MARIADB_ROOT_PASSWORD=密码' #改这里
|
||||
volumes:
|
||||
- ./media/:/var/lib/mysql
|
||||
lwt:
|
||||
image: suzanje/lwt:latest
|
||||
restart: always
|
||||
environment:
|
||||
- 'MARIADB_SERVER=mariadb'
|
||||
- 'MARIADB_ROOT_PASSWORD=密码' #和上面的一样
|
||||
ports:
|
||||
- '8080:80' #如果需要改端口的话改8080的地方
|
||||
depends_on:
|
||||
- mariadb
|
||||
```
|
||||
|
||||
## 3. 上线容器
|
||||
|
||||
```bash
|
||||
sudo docker compose up -d
|
||||
```
|
||||
|
||||
然后 `sudo docker compose ps` 一下看`lwt-docker-lwt-1` 和` lwt-docker-mariadb-1` 这两项的情况。
|
||||
|
||||
如果有错误的话，可以`sudo docker logs lwt-docker-lwt-1`看下日志
|
||||
或者试着在`/opt/lwt-docker`文件夹下创建一个 media 文件夹：
|
||||
|
||||
```bash
|
||||
sudo mkdir media
|
||||
```
|
||||
|
||||
然后再重新上线容器
|
||||
|
||||
## 4. 配置反代和 SSL
|
||||
|
||||
我比较懒，设置还是跟之前的[配置 Cloudflare 的免费 SSL 证书](/2022-06-12-cloudflare)里面一样配置，如果不想按照这个方法来配置反代的话可以参考：[利用 Nginx 进行反代](https://mantyke.icu/posts/2021/rsshub-miniflux/#%E5%88%A9%E7%94%A8nginx%E8%BF%9B%E8%A1%8C%E5%8F%8D%E4%BB%A3)中的配置
|
||||
|
||||
```bash
|
||||
sudo nano /etc/nginx/conf.d/lwt.conf
|
||||
```
|
||||
|
||||
写入
|
||||
|
||||
```bash title="/etc/nginx/conf.d/lwt.conf" {2,4}
|
||||
server {
|
||||
listen 443 ssl;
|
||||
server_name 域名;
|
||||
location / {
|
||||
proxy_pass http://127.0.0.1:8080;
|
||||
proxy_set_header HOST $host;
|
||||
proxy_set_header X-Forwarded-Proto $scheme;
|
||||
proxy_set_header X-Real-IP $remote_addr;
|
||||
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
接着`sudo nginx -t` 之后 `sudo systemctl reload nginx` 重启 nginx 之后就可以在配置好的域名看到 LWT 啦
|
||||
|
||||
## 后续
|
||||
|
||||
如果我有继续使用的话后面可能会更新阅读配置和使用细节等内容（不确定）
|
||||
68
urara/2022-08-28-vol4/+page.md
Normal file
68
urara/2022-08-28-vol4/+page.md
Normal file
|
|
@ -0,0 +1,68 @@
|
|||
---
|
||||
title: Nonsense Wander ~ Vol4
|
||||
created: 2022-08-28
|
||||
summary: 1kb club / LOW-TECH MAGAZINE / Internet Time Machine / All About Birds
|
||||
tags:
|
||||
- Nonsense Wander
|
||||
---
|
||||
|
||||
## Blogs
|
||||
|
||||
### 1. [PLOG](https://hing9u.tistory.com/)
|
||||
|
||||
一个喜欢薰衣草紫的韩国前端工程师，网页设计简洁优雅，
|
||||
|
||||
### 2. [Passo uno](https://passo.uno/why-technical-writing/)
|
||||
|
||||
> **About “passo uno”**
|
||||
> Passo uno is Italian for stop-motion. It also means step one.
|
||||
> Choosing the first step of a procedure is often the most critical part of technical writing. At the same time, good UX writing can be seen as a sequence of discrete steps, a stop-motion dialogue which flows like a real conversation. I also wanted the domain name to reflect my ancestry: I was born in Italy and consider myself Italian, though I’ve lived in Spain for longer.
|
||||
|
||||
### 3. [政治学的邀约](https://finelin.notion.site/finelin/8f0e84b281894a9fb599e5ac8c511faf)
|
||||
|
||||
> 我从 2020 年开始比较集中地在微博上写一些文献的介绍，旨在把有趣的研究分享给更多人，同时也是回报自己曾经收益于许多前辈相似的贡献。现在陆续累计了有七十余篇，按照话题整理一个目录，供新关注的朋友查询。原本只是想发长微博，可惜我似乎被限制发布链接了。正好借此机会，整理成文章，方便保存。目录中每个问题都对应一条微博，每条微博都是一篇文章。简介或长或短，并不固定，取决于我那天有多闲。
|
||||
|
||||
### 4. [4G Spaces](https://blog.youxu.info/)
|
||||
|
||||
> 这个中文博客是我的思考记录，主要用来帮助我 debug/refactor 我的思想，但本人不对任何因为阅读造成的后果负责。
|
||||
> 一切文章皆为原创, 18 岁以上的网友转载本博客文章请保留出处. 这里欢迎留言, 但没有智力活动迹象的留言将会被删除.
|
||||
|
||||
### 5. [rachelbythebay : Writing](https://rachelbythebay.com/w/)
|
||||
|
||||
Software, technology, sysadmin war stories, and more
|
||||
[More on geo-tagging photos with a time element](https://rachelbythebay.com/w/2022/06/20/exif/)
|
||||
|
||||
> The best I can figure so far is that you'd send back a list of ALL of the place names for a given area and let the device figure out which times apply to which photos, and just discard the rest. Also, it should probably be "zoomed out" pretty far, such that only very coarse bounds are given to the server. Just return all of the mappings for all of the polygons or whatever inside some giant swath of space, and do all of the nitty gritty stuff on their device.
|
||||
|
||||
## Explore
|
||||
|
||||
### 1. [1kB](https://1kb.club/)
|
||||
|
||||
一些在 1kb 一下的网页
|
||||
|
||||
> 1kB Club is a list of web pages weighing less than 1 kilobyte (1,024 bytes).
|
||||
|
||||
### 2. [LOW-TECH MAGAZINE](https://www.lowtechmagazine.com/)
|
||||
|
||||
Doubts on progress and technology
|
||||
|
||||
> Low-tech Magazine underscores the potential of past and often forgotten technologies and how they can inform sustainable energy practices. Technology has become the idol of our society, but technological progress is—more often than not—aimed at solving problems caused by earlier technical inventions.
|
||||
|
||||
> There is a lot of potential in past and often forgotten knowledge and technologies when it comes to designing a sustainable society. Interesting possibilities arise when you combine old technology with new knowledge and new materials, or when you apply old concepts and traditional knowledge to modern technology.
|
||||
|
||||
### 3. [stickerlife.org](https://stickerlife.org/)
|
||||
|
||||
收集了很多品牌贴纸的网站
|
||||
|
||||
### 4. [I Made an Internet Time Machine](https://www.youtube.com/watch?v=0OB1g8CUdbA)
|
||||
|
||||
一个网页时间机器！简单来说就是通过 wayback machine 来获取之前的页面，通过树莓派代理网络请求。
|
||||
|
||||
### 5. [Mac Open Web, by Brian Warren](https://macopenweb.com/)
|
||||
|
||||
> A collection of open and indie Mac, iOS, and web apps that help promote the open web.
|
||||
|
||||
### 6.[All About Birds](https://www.allaboutbirds.org/)
|
||||
|
||||
- [Online bird guide, bird ID help, life history, bird sounds from Cornell All About Birds](https://www.allaboutbirds.org/news/)
|
||||
- [Turkey Vulture Life History, All About Birds, Cornell Lab of Ornithology](https://www.allaboutbirds.org/guide/Turkey_Vulture/lifehistory)
|
||||
126
urara/2022-09-02-reading-8/+page.md
Normal file
126
urara/2022-09-02-reading-8/+page.md
Normal file
|
|
@ -0,0 +1,126 @@
|
|||
---
|
||||
title: 我在看什么 · 8 月
|
||||
created: 2022-09-02
|
||||
summary: 蝴蝶 / 驴肉火烧 / 如何给你的代码祝寿 / The Chicken and the Pig
|
||||
tags:
|
||||
- 我在看什么
|
||||
image: /2022-09-02-reading-8/augest.JPG
|
||||
---
|
||||
|
||||
## 小碎步
|
||||
|
||||
- [翻译练习：如何损失金钱和时间](https://mp.weixin.qq.com/s/fyK0gp8rcaDnOJqfSAJFrw)
|
||||
|
||||
> 几天前我意识到一些让人吃惊的事：人们在时间上发生的状况和在金钱上发生的状况很类似。损失时间最危险的方式不是花时间去玩耍，而是去做假工作。
|
||||
|
||||
> 天性和教养相结合，使得我们避免自我放纵。但今天的世界已经变得更为复杂：现在最危险的陷阱是一些新的行为，这些行为会通过模仿更具德行的行为来绕过针对自我放纵的报警器。最糟糕的是，它们甚至都不好玩。
|
||||
|
||||
- [为语言多样性现象点灯之作——《〈役割語〉小辞典》读后感](http://www.acgpiping.net/2022/10143/bookreview_9784767491134/)
|
||||
|
||||
> 在阅读本书的过程中，我也不断思考，为什么在中文的中文作品里，似乎我感觉不到有那么多丰富的「役割語」呢？当然也不是说完全没有，例如北京的儿化音、上海人角色的「阿拉」，四川人角色的「脑斧」（「老虎」的 l 音变为 n 音）……不过或许是我阅读中文文学作品也并不多的原因吧，总感觉没有日语里那么多的对话变形现象。
|
||||
|
||||
- [“速通‘老头环’，但是小学生”](https://www.chuapp.com/article/288815.html)
|
||||
|
||||
触乐的文章都挺有意思的
|
||||
|
||||
- [蝴蝶并非个人专属](https://mp.weixin.qq.com/s/ToLKgr9q92HEYAnHb4ieXw)
|
||||
|
||||
一篇抄袭澄清文，对这个事件不太了解，我是被标题吸引进来的，很喜欢这句话：「蝴蝶并非个人专属」
|
||||
|
||||
- [《罗福兴，走出杀马特》](https://www.chuapp.com/article/288824.html)
|
||||
|
||||
再次，触乐的文章写得真好。
|
||||
|
||||
> 戏里还原了他前半生的经历：进过厂，开过美发室，拍过纪录片，搞过直播，做过装置艺术，演过话剧，但毫无例外地，他身上发生的一切都跟杀马特相关。他试图逃离这个定义，但杀马特又把他留在这里。
|
||||
|
||||
> 这种认知在 2013 年达到了顶峰，“反三俗”的社会气氛中，杀马特被当成低俗典型，人们“围剿”这些顶着夸张发型的年轻人，杀马特聚集的各大 QQ 群被解散，平台封杀。一些落单的杀马特在出门吃饭时被打，工厂也不再招收他们。
|
||||
>
|
||||
> 这成了杀马特消失的最直接原因——没法进厂，就没饭吃。大批杀马特在一夜之间消失，包括罗福兴。
|
||||
|
||||
> “偶尔有几个顺着微信找我，想借几百块钱还花呗，我 ×，几百块，还花呗。” 罗福兴叹了口气，声音沉下来，长久的沉默后说：“我觉得好难受。”
|
||||
|
||||
- [THE TASTE FOR ASS | Real Changzhou](https://realchangzhou.org/2022/07/08/the-taste-for-ass/)
|
||||
作者是一位大学老师，有次学生做 presentation 的时候介绍驴肉火烧时说味道是 **the taste of ass**，他笑喷了，然后他决定去试试驴肉火烧到底是什么
|
||||
|
||||
> There was even a picture of the beloved Shrek character Donkey on the wall. I am not kidding.
|
||||
|
||||
> I cannot stop myself. Do I like eating ass? Yes. Have I hit the streets looking for ass? Yes. Do I like getting my hands around more ass? Yes. Do I wish I had more ass in my life? Yes.
|
||||
|
||||
- 关于苹果位置标注的时间维度问题，作者之前标注为 Facebook 的照片最近自动变成了 Meta，由此展开了一番讨论
|
||||
|
||||
- [Place name mappings probably need a time dimension too](https://rachelbythebay.com/w/2022/06/15/places/)
|
||||
- [More on geo-tagging photos with a time element](https://rachelbythebay.com/w/2022/06/20/exif/)
|
||||
|
||||
> The best I can figure so far is that you’d send back a list of ALL of the place names for a given area and let the device figure out which times apply to which photos, and just discard the rest. Also, it should probably be “zoomed out” pretty far, such that only very coarse bounds are given to the server. Just return all of the mappings for all of the polygons or whatever inside some giant swath of space, and do all of the nitty gritty stuff on their device.
|
||||
|
||||
## 前端
|
||||
|
||||
- [Avoiding `<img\>` layout shifts: aspect-ratio vs width & height attributes](https://jakearchibald.com/2022/img-aspect-ratio/)
|
||||
|
||||
关于图片占位符，提到了两种方法： 1.固定纵横比：aspect-ratio 结合 object-fit 2.根据内容确定：用 width 和 height 固定，其中可以设置 height 为 auto
|
||||
|
||||
- [Reflect.get()](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Reflect/get)
|
||||
- [How to use Ant Design with Vue 3](https://blog.logrocket.com/use-ant-design-vue-3/)
|
||||
|
||||
感觉这些组件库用起来都差不多
|
||||
|
||||
- [You Are Using Emojis The Wrong Way](https://dev.to/iamludal/you-are-using-emojis-the-wrong-way-i71)
|
||||
|
||||
要搭配着下面的评论看
|
||||
|
||||
- [尼姆游戏](https://zh.wikipedia.org/wiki/%E5%B0%BC%E5%A7%86%E6%B8%B8%E6%88%8F)
|
||||
- [奇异局势](https://blog.csdn.net/u011519618/article/details/13749311)
|
||||
- [重学递归](https://juejin.cn/post/703877204904037582)
|
||||
- [大厂的 SDK 写法，偷学到了！](https://juejin.cn/post/7004695364896817183)
|
||||
- 关于浏览器拓展的两篇文章，图片解释得蛮清楚的：
|
||||
- [Browser extensions - our first extension](https://daily-dev-tips.com/posts/browser-extensions-our-first-extension/)
|
||||
- [Browser extensions - our first theme](https://daily-dev-tips.com/posts/browser-extensions-our-first-theme/)
|
||||
- [Delete unused node_modules in a second and enjoy some free space!](https://dev.to/this-is-learning/delete-unused-nodemodules-in-a-second-and-enjoy-some-free-space-f3p)
|
||||
- 清除电脑上多余的 node 包，不过一开始就用 pnpm 会更好
|
||||
- 安装：`npm i -g npkill`
|
||||
- 启动：`npx npkill`
|
||||
- 按大小排序结果：`npx npkill -s size`
|
||||
- 上下方向键选择，空格删除，`Q` or `Ctrl + c`推出
|
||||
- Repo：[GitHub - voidcosmos/npkill](https://github.com/voidcosmos/npkill)
|
||||
|
||||
* [JS replaceAll 和 matchAll 使用指南不指北 ](https://www.zhangxinxu.com/wordpress/2022/08/js-replaceall-matchall/)
|
||||
* [tdarb.org / Making a Website Under 1kB](https://tdarb.org/blog/under-1kb.html)
|
||||
* [HTTP 协议中 URI 和 URL 有什么区别？](https://www.zhihu.com/question/21950864/answer/158161453)
|
||||
* [You Do Not Need a Plugin for This - jdhao’s digital space](https://jdhao.github.io/2022/08/21/you-do-not-need-a-plugin-for-this/)
|
||||
|
||||
给 Neovim 新手的一些建议，比起一开始就安装很多的外部插件，作者建议尝试写自己需要的插件
|
||||
|
||||
## 编程相关
|
||||
|
||||
- [使用元素间索引](https://6cdh.github.io/posts/index_between_elements/)
|
||||
- [Git In Two Minutes (For A Solo Developer)](https://www.garyrobinson.net/2014/10/git-in-two-minutes-for-a-solo-developer.html)
|
||||
- [如何给你的代码祝寿](https://tw93.fun/2022-07-09/code.html)
|
||||
- [How to Learn to Code](https://headlinedev.xyz/2022/08/12/how-to-learn-to-program.html)
|
||||
> - Learn by doing, have resources available to assist you and apply them.
|
||||
> - Understand that learning to program involves making thousands of tiny mistakes, you can recover from them!
|
||||
> - Get help. Thousands of developers lurk in different chat rooms wanting to assist you, the programming community is amazing in this aspect.
|
||||
> - If you cannot finish your project, aim lower and try again.
|
||||
> - If you can finish your project, post it in a public chat room and ask for critique.
|
||||
|
||||
* [软件工程是个面包机](https://drmingdrmer.github.io/tech/bla/2018/09/27/toaster.html)
|
||||
|
||||
> - 软件工程就像人类社会一样, 绝大多数人的工作不是制作”面包机”这种最终产品的. 大部分人的工作是提供零件和支持 :
|
||||
> - **而研发体系的建设, 也像面包机项目一样, 它的成功与否, 取决于是否能让一个工程师把精力集中在业务核心的思考上, 也就是说, 取决于是否在这个工程师背后有一个支撑他的完善工具体系**.
|
||||
> - IT 也不同于传统业: IT 行业中, 信息的复制, 经验的复制, 都不需要额外的实体成本, 它的每个成果都是可以零(实物)成本传递给其他人的.
|
||||
> - 互相支持就是为其他人提供可以用的东西, 而且这个东西必须是可靠的.
|
||||
> - 就像一个精确符合标准的螺丝钉, 可以让再次使用它的人, 免除后顾之忧. 耦合紧密, 无需担心松动脱落.
|
||||
> - 如果要发现软件质量的问题, 短期内没有非常好的方法, 但长期上也可以用比较简单的方法可以量化出来, 关注 2 个概念: 代码的 **增长率** 和 **丢弃率**
|
||||
> - 代码可读性 \> review \> 文档 \> 测试
|
||||
|
||||
* [技术管理猪鸡-1 开篇](https://blog.youxu.info/2015/05/17/tech-lead-1/)
|
||||
|
||||
> 做技术领导时也是一样，许多我们知道的常识性的东西，一旦遇到复杂情况，我们往往依赖于旧习惯和情绪反应，忘了要解决的问题，忘了运用常识做出正确的判断。
|
||||
|
||||
> 技术管理的模型本身多种多样。人月神话模型，人件模型，丰田模型，温伯格模型，Agile 模型，Lean 模型等等不可枚举。对于一个技术管理人员来说，幸运的是，所有的模型都是错的，所以即使不知道这些模型，也未必遗漏了什么重要的。不幸的是，有些模型的确比较有用，所以知道一些还是有好处的。
|
||||
|
||||
* [The Chicken and the Pig - Wikipedia](https://en.wikipedia.org/wiki/The_Chicken_and_the_Pig)
|
||||
|
||||
- [独立开发变现周刊（第 67 期）：如何建立了一个年收入 42 万美元的业务，将播客转化为文章](https://www.ezindie.com/weekly/issue-67)
|
||||
> 在早期，你的 logo 和你的网站并不重要——尤其是当你提供服务的时候。修补品牌和网站可能很有趣，但这不会帮助你获得客户。在早期，你的 logo 不会让你在市场上脱颖而出，你的网站也不太可能在一开始就帮你实现任何转变。
|
||||
>
|
||||
> 相反，专注于与客户交谈，并开发解决问题的解决方案。不要忙于制作一个漂亮的标志和花哨的网站。
|
||||
117
urara/2022-10-01-nuxt3-ssr/+page.md
Normal file
117
urara/2022-10-01-nuxt3-ssr/+page.md
Normal file
|
|
@ -0,0 +1,117 @@
|
|||
---
|
||||
title: Nuxt3-SSR 部署方式
|
||||
created: 2022-10-01
|
||||
summary: 基于pm2的启动方式
|
||||
tags:
|
||||
- Nuxt
|
||||
---
|
||||
|
||||
## 环境：
|
||||
|
||||
### 服务器环境
|
||||
|
||||
- node v18.4.0
|
||||
- Ubuntu 20.04
|
||||
- pm2...
|
||||
|
||||
### Nuxt3 相关
|
||||
|
||||
- 版本：nuxt3-rc11
|
||||
- 包管理工具： yarn
|
||||
- 其他库：element plus / unocss
|
||||
|
||||
我这里本来用的是 pnpm，但是打包的时候总是漏打包了某些包，导致部署时出现 500 错误，后面换成了 yarn 就好了。
|
||||
|
||||
## Step1-打包文件夹
|
||||
|
||||
- 本地生成文件： `yarn build` or `pnpm build`
|
||||
- 需要的文件：`.output`文件夹
|
||||
|
||||
我这里将`.output` 文件夹重命名为了 `output`，下面的操作中也进行了相应的修改
|
||||
|
||||
## Step2-上传云端
|
||||
|
||||
可以用 scp 或者 sftp 的方式上传，如果用 scp 的话，先用命令行进入`output` 文件夹，然后再用 scp 上传
|
||||
如：
|
||||
|
||||
```bash
|
||||
cd output && scp -P 22 -i ~/.ssh/id_rsa -r * root@127.0.0.1:/opt/work/example
|
||||
```
|
||||
|
||||
其中 scp 的配置为：
|
||||
|
||||
|
||||
**服务器文件夹结构**：
|
||||
以放在`/opt/test/`下面为例
|
||||
|
||||
- opt
|
||||
- test
|
||||
- **output**
|
||||
- **public**
|
||||
- **server**(这里面有 node_module 了，不需要额外 npm install，重新装会破坏原有的内容）
|
||||
- **nitro.json**
|
||||
- **ecosystem.config.js**
|
||||
|
||||
## Step3 - 配置 pm2
|
||||
|
||||
pm2 是让 node 在后台持久运行的工具，不然的话关掉操作窗口后，程序就会停掉
|
||||
|
||||
安装 pm2:
|
||||
|
||||
```bash
|
||||
npm install pm2 -g
|
||||
```
|
||||
|
||||
这里主要是修改`ecosystem.config.js`
|
||||
|
||||
```javascript
|
||||
module.exports = {
|
||||
apps: [
|
||||
{
|
||||
name: 'NuxtAppName',
|
||||
exec_mode: 'cluster',
|
||||
instances: 'max',
|
||||
script: './output/server/index.mjs',
|
||||
env: {
|
||||
NITRO_PORT: '8080',
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
注意几点：
|
||||
|
||||
- 修改`script`里面 output 的路径
|
||||
- `NITRO_PORT`应该是字符串类型
|
||||
|
||||
更多配置可参考 pm2 设置文档和[nuxt 配置文档](https://v3.nuxtjs.org/guide/deploy/node-server#configuring-defaults-at-runtime)
|
||||
|
||||
## Step4-启动 pm2
|
||||
|
||||
```Bash
|
||||
pm2 start ecosystem.config.js
|
||||
```
|
||||
|
||||
这个命令其实是涵盖了`node output/server/index.mjs` 这一个操作，如果 pm2 不行的话，可以直接到该目录下`node index.mjs` , 然后用别的方式让 node 服务在后台持久运行，不过需要另外研究一下端口的配置。
|
||||
|
||||
启动后，可以在`http://ip:8080` 查看站点，如果需要配置域名的话，可以用 nginx 配置反向代理，映射到 8080 端口或者其他自定义的端口，这里先不赘述了。
|
||||
|
||||
## 其他
|
||||
|
||||
### 可能有用的操作：
|
||||
|
||||
- 查看端口使用情况: `netstat -tunlp` （如果有装这个的话）
|
||||
- 停掉当前服务：`pm2 stop 进程名`
|
||||
- 在当前文件夹解压 zip 包：`unzip 包名`
|
||||
|
||||
### 一些遇到的问题和相关解决方法：
|
||||
|
||||
- **[nuxt] [request error] [unhandled] [500] Cannot find package '@popperjs/core'**
|
||||
[https://github.com/element-plus/element-plus/issues/6233](https://github.com/element-plus/element-plus/issues/6233)
|
||||
|
||||
换成`yarn install`，这个应该是 element plus 或者 pnpm、npm 的问题，没有把这个依赖包包进去
|
||||
|
||||
- **ENOENT: no such file or directory**
|
||||
除去真的没有这个文件的情况，一般是切换包管理工具的时候会出现这个问题，比如 pnpm 切换到 yarn，此时可以试试重新`npx nuxi init nuxt-app` 初始化一个 nuxt 项目文件夹`nuxt-app`，初始化 install 之后，把东西搬过去再`yarn install`
|
||||
|
||||
最后，nuxt3 真的蛮多坑的，不过也挺好用的，我还遇到一个问题，就是 element plus 的样式在开发模式下会覆盖掉 unocss 的样式，虽然在本地 dev 的时候是正常的……
|
||||
67
urara/2022-10-02-reading-9/+page.md
Normal file
67
urara/2022-10-02-reading-9/+page.md
Normal file
|
|
@ -0,0 +1,67 @@
|
|||
---
|
||||
title: 我在看什么 · 9 月
|
||||
created: 2022-10-02
|
||||
summary: 倒鸭子 / Nuxt3 / 原子化 CSS
|
||||
tags:
|
||||
- 我在看什么
|
||||
image: /2022-10-02-reading-9/September.jpg
|
||||
---
|
||||
|
||||
这个月基本上是没看什么
|
||||
|
||||
## 小碎步
|
||||
|
||||
- [effort + coffee = software](https://tleaves.com/)
|
||||
- [“倒鸭子”的起源](https://www.yolo.blue/docs/dev-notes/origin-of-backward-duck)
|
||||
|
||||
原来这种文字效果叫倒鸭子，也就是 Kinetic Typography
|
||||
|
||||
- [“Content is like water ”响应式布局设计](https://mp.weixin.qq.com/s/eaqLNmorbODAJkSoux5zyQ)
|
||||
- [【译】本地优先软件 Local-first software](https://zhuanlan.zhihu.com/p/557353347)
|
||||
|
||||
## 前端相关
|
||||
|
||||
- [no-cache 与 no-store 的区别是什么](https://github.com/shfshanyue/Daily-Question/issues/207)
|
||||
|
||||
no-cache 就是要协商一下再决定要不要缓存，no-store 是不沟通直接不缓存
|
||||
|
||||
- [Border inside Grid Layout](https://stackoverflow.com/questions/49554727/border-inside-grid-layout)
|
||||
- [还在用定时器吗？借助 CSS 来监听事件](https://mp.weixin.qq.com/s/N25KcGneKPgvBa8zBownlw)
|
||||
|
||||
学到了，感觉很不错，但是有没有性能方面的问题呢？还需要查一下兼容性
|
||||
|
||||
- [点亮你的 Vue 技术栈，万字 Nuxt.js 实践笔记来了](https://juejin.cn/post/6844904160324747278)
|
||||
- [NuxtJS + animate.css 超入門](https://stephenlaichaowen.medium.com/nuxtjs-animate-css-%E8%B6%85%E5%85%A5%E9%96%80-40bed5e9946c)
|
||||
- [Nuxt3 项目实战篇 9——Nuxt3 中插件的使用](https://www.zhmzjl.com/show-11-327-1.html)
|
||||
|
||||
博主 Nuxt3 系列文章似乎都挺好的，先 Mark
|
||||
|
||||
- [How to validate forms in Nuxt with Vee-Validate](https://medium.com/@yusufznl/how-to-validate-forms-in-nuxt-with-vee-validate-eef45508c3d4)
|
||||
- [HTTP ETag 的强弱区别](https://www.yolo.blue/docs/dev-notes/http-etag-strong-vs-weak)
|
||||
|
||||
- [javascript 中，var that = this;是什么意思？](https://www.superweb999.com/article/412927.html)
|
||||
|
||||
这个就是那个啦
|
||||
|
||||
- [What is the difference between position:sticky and position:fixed in CSS ?](https://www.geeksforgeeks.org/what-is-the-difference-between-positionsticky-and-positionfixed-in-css/)
|
||||
- [基于 ubuntu 部署前端项目到 docker 容器](https://juejin.cn/post/7143148167125532680)
|
||||
- [如何用 CSS 中写出超级美丽的阴影效果](https://juejin.cn/post/7034323356459466760)
|
||||
|
||||
感觉这种事情直接复制 Figma 里面的代码就好了
|
||||
|
||||
- [pointer-events:none 限制鼠标事件及对覆盖元素层进行穿透](https://www.cnblogs.com/92cz/p/5787693.html)
|
||||
|
||||
写得挺有意思的，很风趣
|
||||
|
||||
- [重新构想原子化 CSS](https://antfu.me/posts/reimagine-atomic-css-zh)
|
||||
|
||||
> [Windi CSS](https://cn.windicss.org/) 是从零开始编写的 Tailwind CSS 的替代方案。它的零依赖，也不要求用户安装 PostCSS 和 Autoprefixer。更为重要的是，它支持 **按需生成**。Windi CSS 不会一次生成所有的 CSS，而是只会生成你在代码中实际使用到的原子化 CSS。
|
||||
|
||||
> UnoCSS 是一个引擎，而非一款框架，因为它并未提供核心工具类，所有功能可以通过预设和内联配置提供。
|
||||
|
||||
> 从内部实现上看，Tailwind 依赖于 PostCSS 的 AST 进行修改，而 Windi 则是编写了一个自定义解析器和 AST。考虑到在开发过程中，这些工具 CSS 的并不经常变化，UnoCSS 通过非常高效的字符串拼接来直接生成对应的 CSS 而非引入整个编译过程。同时，UnoCSS 对类名和生成的 CSS 字符串进行了缓存，当再次遇到相同的实用工具类时，它可以绕过整个匹配和生成的过程。
|
||||
|
||||
- [一文彻底了解 Web Worker，十万、百万条数据都是弟弟](https://mp.weixin.qq.com/s/5XR-dOJ2s0tSLl5e2veP0g)
|
||||
- [网页动画的十二原则](https://mp.weixin.qq.com/s/ZEsWV4mNxRGafyNG_ZJDTA)
|
||||
- [Windows 滚动条如何美化成 macOS 那样？](https://mp.weixin.qq.com/s/RSSQymhS48pFXI2Z9JX6TA)
|
||||
- [动效师前端结合篇 - AE/Lottie/交互动效/程序 “动效文本连接数据”](https://mp.weixin.qq.com/s/oHOHQrSBi2aYGJtcfbSi7g)
|
||||
57
urara/2022-10-03-vue-carousel-3d/+page.md
Normal file
57
urara/2022-10-03-vue-carousel-3d/+page.md
Normal file
|
|
@ -0,0 +1,57 @@
|
|||
---
|
||||
title: nuxt2安装3d轮播图插件vue-3d-carousel
|
||||
created: 2022-10-03
|
||||
summary: Using Vue-3d-carousel in nuxt2
|
||||
tags:
|
||||
- Nuxt
|
||||
---
|
||||
|
||||
[Vue-3d-carousel](https://github.com/Wlada/vue-carousel-3d)是一个 vue2 的 3d 轮播图组件包，比起 swiper 里面的轮播图其 3d 方面的自定义选项更多，缺点是单位只能用 px，自适应不太方便，而且点击左右两边的卡片时会连跳两级，动画效果不太流畅。
|
||||
|
||||
- 文档：[Vue Carousel 3D - 3D Carousel for Vue.js](https://wlada.github.io/vue-carousel-3d/)
|
||||
- Nuxt 版本：2.15.8
|
||||
|
||||
## 1-安装
|
||||
|
||||
```bash
|
||||
npm install -S vue-carousel-3d
|
||||
```
|
||||
|
||||
或者
|
||||
|
||||
```bash
|
||||
yarn add vue-carousel-3d
|
||||
```
|
||||
|
||||
## 2-配置 nuxt 插件
|
||||
|
||||
在 `/plugin`文件夹里面加入`vue-carousel-3d.js` ,写入
|
||||
|
||||
```js
|
||||
import Vue from 'vue'
|
||||
import Carousel3d from 'vue-carousel-3d'
|
||||
|
||||
Vue.use(Carousel3d)
|
||||
```
|
||||
|
||||
然后在 `nuxt.config.js` 里面配置插件，这个插件需要关闭 ssr
|
||||
|
||||
```js
|
||||
export.module{
|
||||
plugin:[
|
||||
{src:'vue-carousel-3d',ssr:false}]，
|
||||
}
|
||||
```
|
||||
|
||||
## 3-使用举例
|
||||
|
||||
需要包裹在`<client-only>`里面
|
||||
|
||||
```html
|
||||
<client-only>
|
||||
<carousel-3d>
|
||||
<slide :index="0">Slide 1 Content</slide>
|
||||
<slide :index="1">Slide 2 Content</slide>
|
||||
</carousel-3d>
|
||||
</client-only>
|
||||
```
|
||||
19
urara/2022-10-16-vue-lazyloading/+page.md
Normal file
19
urara/2022-10-16-vue-lazyloading/+page.md
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
---
|
||||
title: 阅读 · vue用箭头函数懒加载组件的原理
|
||||
created: 2022-10-16
|
||||
summary: Promise + Dynamic Import + Webpack
|
||||
tags:
|
||||
- Vue
|
||||
---
|
||||
|
||||
- [JS 懒加载，预加载 - 掘金](https://juejin.cn/post/6863295010591375373)
|
||||
> vue 中的延迟加载是通过 webpack 代码拆分组件实现的。
|
||||
- [解密 Vue 路由懒加载\_跟小猿学前端的博客-CSDN 博客](https://blog.csdn.net/weixin_43742274/article/details/107202322)
|
||||
> 路由懒加载的实现方式主要是利用 Promise 对象和 Webpack 打包时的特性（webpack 在打包项目的时候会根据你的配置文件将项目进行模块划分），利用箭头函数成功将不同的路由组件划分成为不同的模块，实现按需引入，不需要一次性全量加载，优化性能，降低首屏加载的时延
|
||||
- [【译】ES6 的工厂函数](https://www.jianshu.com/p/9ce26a5044e6)
|
||||
> 工厂函数是一个最后返回值是对象的函数，但它既不是类，也不是构造函数。在 JavaScript 中，任何函数都可以返回一个对象。但当函数没有使用 new 关键字时，那它便是一个工厂函数。
|
||||
- [一文搞懂 Dynamic Import 和 Top-level await 提案 - 掘金](https://juejin.cn/post/6844904126535434253)
|
||||
|
||||
> 通过动态 import 允许我们按需加载 JavaScript 模块，而不会在最开始的时候就将全部模块加载。
|
||||
|
||||
> 动态 import 返回了一个 Promise 对象，这也意味着可以在 then 中等模块加载成功后去做一些操作。
|
||||
96
urara/2022-11-01-reading-10/+page.md
Normal file
96
urara/2022-11-01-reading-10/+page.md
Normal file
|
|
@ -0,0 +1,96 @@
|
|||
---
|
||||
title: 我在看什么 · 10 月
|
||||
created: 2022-11-01
|
||||
summary: Bash 脚本 / Vue-> React / Git / Project book / The rules of friendship
|
||||
tags:
|
||||
- 我在看什么
|
||||
image: /2022-11-01-reading-10/October.jpg
|
||||
---
|
||||
|
||||
## 前端相关
|
||||
|
||||
- [Vue3 入门指南与实战案例](https://vue3.chengpeiquan.com/)
|
||||
- [带你再看 Vue 文档，你就顺便学会了 React](https://juejin.cn/post/6844904034432712712)
|
||||
|
||||
比较基础的内容，但这样类比起来还挺好理解的。 感觉写 React 跟原生 JS 差不多，Vue 则感觉会让人忘了 JS……
|
||||
|
||||
- 这个 React 组件库看起来不错： [https://www.radix-ui.com/](https://www.radix-ui.com/)
|
||||
|
||||
- 读剪报：[Weekly Frontend News - Collective #732](https://tympanus.net/codrops/collective/collective-732/)
|
||||
- [【译】ES6 的工厂函数](https://www.jianshu.com/p/9ce26a5044e6)
|
||||
|
||||
> 工厂函数是一个最后返回值是对象的函数，但它既不是类，也不是构造函数。在 JavaScript 中，任何函数都可以返回一个对象。但当函数没有使用 new 关键字时，那它便是一个工厂函数。
|
||||
|
||||
> 当你想要返回一个对象字面量的时候，如果你使用了大括号，JavaScript 会默认你想要创建一个函数体。像是`{ broken: true }`。如果你想要通过隐式返回来返回一个字面量对象，那你就需要在你的字面量对象外面包裹一层小括号来消除这种歧义
|
||||
|
||||
- [ECMAScript 6 入门 ——Promise 对象](https://es6.ruanyifeng.com/#docs/promise)
|
||||
|
||||
收藏很久了，一直没看，果然写得清晰易懂
|
||||
|
||||
- [JavaScript 数据结构与算法之美](https://github.com/biaochenxuying/blog/issues/43)
|
||||
- [前端应该掌握的浏览器调试技巧](https://juejin.cn/post/7145256569041584142)
|
||||
- console.assert/ console.error /console.time / console.timeEnd / console.dir….
|
||||
- 断点调试
|
||||
- [编写 Bash 脚本所需知道的一切](https://www.linuxmi.com/bash-programs-writing.html)
|
||||
- [【动效实现】超酷炫的 3D 视差 Hover 效果](https://juejin.cn/post/7126369893930237989)
|
||||
|
||||
原来 steam 上面那种悬浮卡片可以这样做
|
||||
|
||||
> 视差效果其实就是在 2D 的平面上，利用不同元素位置变化的速度不同，来模拟肉眼对物理世界远近感知的差异。观察者位移，距离近的物体位置变化大，而距离远的物体位置的变化小。
|
||||
|
||||
- [超强的苹果官网滚动文字特效实现](https://www.cnblogs.com/coco1s/p/16808899.html)
|
||||
- [ 一个被忽略的前端细分领域](https://mp.weixin.qq.com/s/vF58bbxwCbO_9VhLgj5S0g)
|
||||
|
||||
说的似乎是交互式文档，确实有想法朝这个方向升级一下博客。 （ps：为啥 markdown 不说全，要说 MD，这谁知道是啥）
|
||||
|
||||
- [前端面试知识点（一）](https://juejin.cn/post/6987549240436195364)
|
||||
|
||||
看了其中[Promise 的部分](https://juejin.cn/post/6987549240436195364#heading-33)，感觉写得很不错
|
||||
|
||||
## Git 相关
|
||||
|
||||
- [Pro Git 官方版](https://www.git-scm.com/book/zh/v2)
|
||||
- [Pro Git 第二版（中文版）](https://www.kancloud.cn/kancloud/progit)
|
||||
- [Commit message 和 Change log 编写指南](https://www.ruanyifeng.com/blog/2016/01/commit_message_change_log.html)
|
||||
- [Github 漫游指南 - 挑选好 license](https://github.phodal.com/#/chapter/Github%E6%BC%AB%E6%B8%B8%E6%8C%87%E5%8D%97?id=%e6%8c%91%e9%80%89%e5%a5%bd-license)
|
||||
- [Github 上如何添加 LICENSE 文件？](https://www.cnblogs.com/chenmingjun/p/8555906.html)
|
||||
- [添加许可到仓库 - GitHub Docs](https://docs.github.com/cn/communities/setting-up-your-project-for-healthy-contributions/adding-a-license-to-a-repository)
|
||||
|
||||
也可以通过添加`COPYING` 文件添加 license
|
||||
|
||||
## Resources
|
||||
|
||||
- [Awesome list of web development resources 💥As you learn, keep this list handy.](https://stark.bearblog.dev/awesome-list/)
|
||||
- 好多书噢 [FreeComputerBooks.com](https://freecomputerbooks.com/)
|
||||
- [Projectbook](https://projectbook.code.brettchalupa.com/_introduction.html)
|
||||
- [Three.js 系列教程，学习和探索 Three.js 世界。](https://github.com/puxiao/threejs-tutorial)
|
||||
|
||||
作者其他系列教程好像也不错：https://www.puxiao.com/
|
||||
|
||||
- [⚛️ 2022 React developer roadmap with +39 FREE resources to learn from.](https://twitter.com/_georgemoller/status/1576956039647354882)
|
||||
|
||||
## 小碎步
|
||||
|
||||
- [在遛狗的时候用 Kindle 读书](https://www.owenyoung.com/blog/reading-while-walking-dogs/)
|
||||
- [电纸书阅读器使用小记](https://www.uncoverman.com/share-android-eink-reader-usage.html)
|
||||
- [The rules of friendship](https://alearningaday.blog/2022/10/24/the-rules-of-friendship/)
|
||||
|
||||
> When I consider the people I know with the greatest talent for friendship, I realize that they do just this. They make contact a priority. They jump in their cars. They appear at regular intervals in my inbox. One told me she clicks open her address book every now and then just to check which friends she hasn’t seen in a while—and then immediately makes a date to get together.
|
||||
|
||||
想来我还是太不主动了
|
||||
|
||||
- [做了 6 年程序员，我学到的 10 条经验](https://lutaonan.com/blog/things-i-learnt-after-6-years-as-software-engineer/)
|
||||
|
||||
> 「三板斧」指的是「可灰度」、「可监控」、「可回滚」。在代码发布之前，要先想想自己的代码是不是符合这三个条件。
|
||||
|
||||
> 学习技术并不一定要求你把他用到工作中。工作就是工作，学习就是学习。工作的内容是为了业务服务的
|
||||
|
||||
> 而工作则相当于是一个真实的场景，是在你学习新的技术的时候，帮助你进行实际思考的场景。你需要有意识地去想，这个技术如果用到我的工作中，它是否适合？它能解决什么问题？它为什么适合？它为什么不适合。当你在学习新技术的时候，结合这个技术，多思考这些问题，这才是真正的学习。
|
||||
|
||||
- [我的笔记系统实践](https://sspai.com/post/75940)
|
||||
|
||||
在这里发现一个 markdown 预览插件：[Markdown Preview Plus](https://chrome.google.com/webstore/detail/markdown-preview-plus/febilkbfcbhebfnokafefeacimjdckgl/related)
|
||||
|
||||
- [Index-pengx17](https://pengx17.vercel.app/)
|
||||
|
||||
这个博客好简洁
|
||||
30
urara/2022-12-01-reading-11/+page.md
Normal file
30
urara/2022-12-01-reading-11/+page.md
Normal file
|
|
@ -0,0 +1,30 @@
|
|||
---
|
||||
title: 我在看什么 · 11月
|
||||
created: 2022-12-08
|
||||
summary: Geohash / Rewind / Code Editor Slander
|
||||
tags:
|
||||
- 我在看什么
|
||||
image: /2022-12-01-reading-11/Noverber.jpg
|
||||
---
|
||||
|
||||
这个月基本上是没看什么，就不分类了
|
||||
|
||||
- [a16z 种子轮投 1000 万美金，Rewind 要帮你搜索你的人生](https://mp.weixin.qq.com/s/VWJB0u_H7N5liMb7ymRbYQ)
|
||||
|
||||
> 「很多时候，当我们想要重新审视一个想法时，我们不记得更精细的细节，也不记得我们在哪里读过、看到过、说过、听到或分享过它。这也就是 Rewind 这款产品想解决的问题。」
|
||||
|
||||
> 「无需做任何云端和 IT 集成：Rewind 采用了原生 macOS API 和 OCR 来识别和索引你屏幕上出现的所有文字，你不需要与 Gmail、Dropbox 或者 Slack 等产品做集成，之前一些类似产品需要你集成获得授权才可能搜索到这些产品里的内容；」
|
||||
|
||||
- [npm ERR code ERR*SOCKET_TIMEOUT npm ERR 出现错误改正方法*](https://blog.csdn.net/m0_57446284/article/details/123183221)
|
||||
- 实现「附近的人」功能的原理——Geohash
|
||||
- [Geohash-Wikipedia](https://en.wikipedia.org/wiki/Geohash)
|
||||
- [一文了解 geohash 原理，实践实战设计思路，面试官不嘲笑我了](https://juejin.cn/post/6960459958185885710)
|
||||
- [GeoHash 核心原理解析](https://www.cnblogs.com/LBSer/p/3310455.html)
|
||||
- [Unlocking Your Intuition: How to Solve Hard Problems Easily - YouTube](https://www.youtube.com/watch?v=1f6N2UrCK6o)
|
||||
- [How To Master Data Structures & Algorithms - YouTube](https://www.youtube.com/watch?v=QsIzwrEZG8U)
|
||||
- [Use RSS for privacy and efficiency :: \[rsapkf/www\]](https://rsapkf.org/weblog/q2z)
|
||||
- [不想被 mansplaining？你想要的女性科技博主都在这里](https://mp.weixin.qq.com/s/WKJqSXuAAQxzxpz24TYO2w)
|
||||
- 一些笑话 : [Code Editor Slander…](https://www.youtube.com/watch?v=RHh888YSCoc)
|
||||
- [Bookshelf · Patrick Collison](https://patrickcollison.com/bookshelf)
|
||||
- [英语自学指南](https://bewaters.me/limxtop/2021/08/18/English-introduction/)
|
||||
- [维生素片不仅没用，还有可能损害健康](https://www.bbc.com/ukchina/simp/vert-fut-38529250)
|
||||
45
urara/2022-12-12-waterfall/+page.md
Normal file
45
urara/2022-12-12-waterfall/+page.md
Normal file
|
|
@ -0,0 +1,45 @@
|
|||
---
|
||||
title: 瀑布流图片的简单实现
|
||||
created: 2022-12-12
|
||||
summary: Simple implementation of a waterfall flow picture
|
||||
tags:
|
||||
- CSS
|
||||
---
|
||||
|
||||
瀑布流图片又被称为 Masonry Layout, Waterfall Layout
|
||||
|
||||
## HTML
|
||||
|
||||
```html
|
||||
<div>
|
||||
<img />
|
||||
<img />
|
||||
<img />
|
||||
<img />
|
||||
</div>
|
||||
```
|
||||
|
||||
## CSS
|
||||
|
||||
```css
|
||||
div {
|
||||
/*在容器内设置栏数*/
|
||||
column-count: n;
|
||||
|
||||
/*垂直间距*/
|
||||
column-gap: 0;
|
||||
|
||||
/*在间隔中加点线*/
|
||||
column-rule: dotted;
|
||||
}
|
||||
|
||||
img {
|
||||
/*防止单个元素分栏*/
|
||||
break-inside: avoid;
|
||||
}
|
||||
```
|
||||
|
||||
元素是从上到下竖直排列的[^1]
|
||||
|
||||
|
||||
[^1]: [ Masonry (Waterfall) Layout with Pure CSS](https://www.simpleweblearning.com/masonry-waterfall-layout-with-pure-css/)
|
||||
133
urara/2022-12-18-linkding-intro/+page.md
Normal file
133
urara/2022-12-18-linkding-intro/+page.md
Normal file
|
|
@ -0,0 +1,133 @@
|
|||
---
|
||||
title: VPS · 搭建轻量便捷的书签应用 Linkding
|
||||
created: 2022-12-18
|
||||
summary: linkding is a simple bookmark service that you can host yourself. It's designed be to be minimal, fast, and easy to set up using Docker.
|
||||
cover: https://github.com/sissbruecker/linkding/blob/master/docs/linkding-screenshot.png?raw=true
|
||||
tags:
|
||||
- VPS
|
||||
- Self-host
|
||||
---
|
||||
|
||||
## 前言
|
||||
|
||||
在前文[Airtable · 网页剪藏](/2022-03-06-airtable/) 中提到了我是如何使用[Airtable](https://airtable.com/)来剪切网页的，虽然 Airtable 剪切时可以同时保留网页截图，但没办法自动 Archive 网页，有些内容时间久了还是一样在风里消散。于是某天我决定试试[Miniflux](https://miniflux.app/)最近支持的开源书签应用 [Linkding](https://github.com/sissbruecker/linkding)：
|
||||
|
||||
<script lang="ts">
|
||||
import Github from '$lib/components/extra/github.svelte'
|
||||
</script>
|
||||
|
||||
<Github user='sissbruecker' repo='linkding'/>
|
||||
|
||||
## 功能介绍
|
||||
|
||||
Linkding 是一款极简、高效、容易使用的自建书签应用，官方文档写的主要特点有：
|
||||
|
||||
- Organize bookmarks with tags——用标签来管理书签
|
||||
- Read it later functionality——稍后读功能
|
||||
- Share bookmarks with other users——和他人分享书签
|
||||
- Bulk editing——批量管理书签
|
||||
- Bookmark archive——书签 Archive 功能
|
||||
- Automatically provides titles and descriptions of bookmarked websites——自动获取书签网页的标题和描述
|
||||
- Automatically creates snapshots of bookmarked websites on the Internet Archive Wayback Machine——自动创建网页快照上传到[Internet Archive Wayback Machine](https://web.archive.org/).
|
||||
- Import and export bookmarks in Netscape HTML format——以 Netscape HTML 的格式导入和导出书签
|
||||
- Extensions for Firefox and Chrome, as well as a bookmarklet——有支持 Firefox 和 Chrome 的浏览器插件，以及 bookmarklet
|
||||
- Light and dark themes——明亮和黑暗模式
|
||||
- REST API for developing 3rd party apps——用于开发第三方应用的 REST API
|
||||
- Admin panel for user self-service and raw data access——用户自助服务和原始数据访问的管理面板
|
||||
- Easy setup using Docker, uses SQLite as database——使用 Docker 轻松设置，使用 SQLite 作为数据库
|
||||
|
||||
里面没有提到的三个比较吸引人的功能：
|
||||
|
||||
- 联合 Miniflux 同步收藏
|
||||
- 书签 List 可以自动生成 RSS 源
|
||||
- 使用浏览器插件[Linkding-injector](https://github.com/Fivefold/linkding-injector)可以在搜索引擎搜索时显示书签内相符的内容
|
||||
|
||||
## 搭建
|
||||
|
||||
我采用 `docker-compose` 的方式来部署 Linkding，下面是具体搭建步骤：
|
||||
|
||||
### 1.创建配置文件夹
|
||||
|
||||
```bash
|
||||
sudo mkdir /opt/linkding && cd /opt/linkding
|
||||
```
|
||||
|
||||
也可以放在别的地方，这个位置并不影响
|
||||
|
||||
### 2.修改配置
|
||||
|
||||
```bash
|
||||
sudo nano docker-compose.yml
|
||||
```
|
||||
|
||||
复制 [linkding/docker-compose.yml](https://github.com/sissbruecker/linkding/blob/master/docker-compose.yml)，粘贴进去，也就是：
|
||||
|
||||
```yaml
|
||||
version: '3'
|
||||
|
||||
services:
|
||||
linkding:
|
||||
container_name: '${LD_CONTAINER_NAME:-linkding}'
|
||||
image: sissbruecker/linkding:latest
|
||||
ports:
|
||||
- '${LD_HOST_PORT:-9090}:9090'
|
||||
volumes:
|
||||
- '${LD_HOST_DATA_DIR:-./data}:/etc/linkding/data'
|
||||
env_file:
|
||||
- .env
|
||||
restart: unless-stopped
|
||||
```
|
||||
|
||||
然后修改环境变量`.env`：
|
||||
|
||||
```bash
|
||||
sudo nano .env
|
||||
```
|
||||
|
||||
将[`.env.example`](https://github.com/sissbruecker/linkding/blob/master/.env.sample) 下面的内容 copy 进去，按照[文档](https://github.com/sissbruecker/linkding/blob/master/docs/Options.md)调整自己的配置，下面是我的配置：
|
||||
|
||||
```bash title=".env" {9,12}
|
||||
# Docker container name
|
||||
LD_CONTAINER_NAME=linkding
|
||||
# Port on the host system that the application should be published on
|
||||
# 端口号，默认9090
|
||||
LD_HOST_PORT=9090
|
||||
# Directory on the host system that should be mounted as data dir into the Docker container
|
||||
LD_HOST_DATA_DIR=./data
|
||||
# Username of the initial superuser to create, leave empty to not create one
|
||||
# 设置管理员用户名
|
||||
LD_SUPERUSER_NAME=test
|
||||
# Password for the initial superuser, leave empty to disable credentials authentication and rely on proxy authentication instead
|
||||
# 设置管理员密码
|
||||
LD_SUPERUSER_PASSWORD=1234
|
||||
# Option to disable background tasks
|
||||
LD_DISABLE_BACKGROUND_TASKS=False
|
||||
# Option to disable URL validation for bookmarks completely
|
||||
LD_DISABLE_URL_VALIDATION=False
|
||||
# Enables support for authentication proxies such as Authelia
|
||||
LD_ENABLE_AUTH_PROXY=False
|
||||
```
|
||||
|
||||
注意修改用户名和用户密码，保存后`sudo docker compose up -d`上线 docker，然后就可以在`http://ip:9090`预览 Linkding 页面了，
|
||||
|
||||
### 3.配置反代
|
||||
|
||||
nginx 配置(和往常一样，没有什么特别的)：
|
||||
|
||||
```conf
|
||||
server {
|
||||
listen 443 ssl;
|
||||
server_name 域名;
|
||||
|
||||
location / {
|
||||
proxy_pass http://127.0.0.1:9090;
|
||||
proxy_redirect off;
|
||||
proxy_set_header Host $host;
|
||||
proxy_set_header X-Real-IP $remote_addr;
|
||||
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
|
||||
proxy_set_header X-Forwarded-Proto $scheme;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
这一步具体可以参考[VPS · 配置 Cloudflare 的免费 SSL 证书-Nginx 配置](/2022-06-12-cloudflare/#3-%E4%BF%AE%E6%94%B9-nginx-%E9%85%8D%E7%BD%AE)部分内容，在此不再赘述，`nginx -t` 和 `systemctl reload nginx` 一套操作下来之后就可以在相应的域名访问 Linkding 了，然后用上面设置的用户名和密码登录
|
||||
71
urara/2022-12-19-search-injectors/+page.md
Normal file
71
urara/2022-12-19-search-injectors/+page.md
Normal file
|
|
@ -0,0 +1,71 @@
|
|||
---
|
||||
title: Miniflux Injector · 构建自己的搜索引擎
|
||||
created: 2022-12-19
|
||||
summary: Build your own search engine by Miniflux&Linkidng injector
|
||||
image: /2022-12-19-search-injectors/cover.png
|
||||
---
|
||||
|
||||
在前文 [VPS · 搭建轻量便捷的书签应用 Linkding](/2022-12-18-linkding-intro) 中我提到了 [Linkding-Injector](https://github.com/Fivefold/linkding-injector) 这个插件，它是一个搜索引擎辅助工具，它可以在 DuckDuckGo/Google 中搜索某关键词的时候同时在书签数据库里搜索，并将搜索结果显示在页面上。用了一段时间后我特别喜欢，因为使用它可以在一定程度上避免「稍后读」=>「永远不读」的困境，但是 Linkding 里面的内容又总是太少了，常常搜不到什么对应的，于是……面对 [Miniflux](https://miniflux.app/)中五万多条未读，我决定做些什么。
|
||||
|
||||
## 关于 Miniflux-Injector
|
||||
|
||||
<script lang="ts">
|
||||
import Github from '$lib/components/extra/github.svelte'
|
||||
</script>
|
||||
|
||||
<Github user='sevichecc' repo='miniflux-injector'/>
|
||||
|
||||
Miniflux Injector 是 Fork 自 Linkding-injector 的一个浏览器插件，它可以将 Miniflux 的搜索结果注入到 Google 和 Duckduckgo 等搜索页面。
|
||||
|
||||
### 使用效果：
|
||||
|
||||
在搜索结果页面插入
|
||||
|
||||
|
||||
|
||||
|
||||
直接在搜索栏输入`mj` + 空格 触发搜索：
|
||||
|
||||
|
||||
## 安装
|
||||
|
||||
### FireFox
|
||||
|
||||
从 [Mozilla Addon Store](https://addons.mozilla.org/zh-CN/firefox/addon/miniflux-injector/)中添加
|
||||
|
||||
### Chrome
|
||||
|
||||
1. 下载最新 [release](https://github.com/Sevichecc/miniflux-injector/releases/tag/v1.0.1)中的`miniflux_injector-1.0.1.zip`压缩包并解压
|
||||
2. 在浏览器拓展管理页面中打开`开发者模式`
|
||||
3. 点击`加载已解压的扩展程序`选取刚刚解压的文件夹，如图就是加载好了：
|
||||
|
||||
|
||||
Brave 浏览器同理
|
||||
|
||||
## 配置
|
||||
|
||||
### 1. 生成 Miniflux API Token
|
||||
|
||||
在`https://你的miniflux域名/keys` 下，点击`Create a new API Key` 创建，`API Key Label`可以随意填，创建完后复制 Token
|
||||
|
||||
### 2. 填入 Token
|
||||
|
||||
打开扩展配置页面，填入刚才复制的 Token 和其他内容:
|
||||
|
||||
点击右下角的`Save` 保存配置，如果配置成功，则会出现`Connection successful` 的字样
|
||||
|
||||
### 3. 关于默认配置
|
||||
|
||||
- Max Search result：默认展示的条目数
|
||||
- Open Link in a New Tab：在新页面打开链接
|
||||
- Open in Miniflux：可以选择在 Miniflux 中打开链接，需要注意的是此设置打开后搜索会变慢
|
||||
|
||||
配置完成之后就可以在 DuckDuckGo 和 Google 中搜索看看啦~
|
||||
|
||||
## 后记
|
||||
|
||||
我目前的 RSS Feed 有 951 条，未读 53460 条……不过有了 Miniflux-injector 后我相信不会积灰了，还看到有人在开发[shiori-injector](https://github.com/tezlm/shiori-injector)，[shiori](https://github.com/go-shiori/shiori) 跟 linkding 一样，也是一个书签管理器，但和 linkding 不一样的是，shiori 还保存了源网页的内容，类似 Pocket 的感觉，我之前试过，功能还不是很完善所以没有用下去，未来还会不会再次尝试呢？暂不清楚
|
||||
|
||||
- 发现更多的 RSS 源，我推荐 [RSS+](https://greasyfork.org/zh-CN/scripts/373252-rss-show-site-all-rss)
|
||||
|
||||
- 推荐阅读：[Use RSS for privacy and efficiency](https://rsapkf.org/weblog/q2z)
|
||||
99
urara/2023-01-01-reading-12/+page.md
Normal file
99
urara/2023-01-01-reading-12/+page.md
Normal file
|
|
@ -0,0 +1,99 @@
|
|||
---
|
||||
title: 我在看什么 · 12 月
|
||||
created: 2023-01-01
|
||||
summary: 命令行工具 / Neovim / Vim / GPG / curl / 网页字体排版
|
||||
tags:
|
||||
- 我在看什么
|
||||
image: /2023-01-01-reading-12/December.jpg
|
||||
---
|
||||
|
||||
## 工具
|
||||
|
||||
- [kitty -- 一个被严重忽视的生产力利器](https://ttys3.dev/post/kitty/)
|
||||
- 命令行工具
|
||||
|
||||
- [A list of new(ish) command line tools](https://jvns.ca/blog/2022/04/12/a-list-of-new-ish--command-line-tools/)
|
||||
|
||||
用上了 Lazygit, thefuck
|
||||
|
||||
- [10 款更先进的开源命令行工具](https://hellogithub.com/article/a8f28268130242779cf863a44486b004)
|
||||
- [GitHub - ibraheemdev/modern-unix: A collection of modern/faster/saner alternatives to common unix commands.](https://github.com/ibraheemdev/modern-unix)
|
||||
|
||||
- Algolia 的开源替代 Typesense:
|
||||
|
||||
- [Typesense | Fast, typo-tolerant open source search engine](https://typesense.org/)
|
||||
- [How to implement typo-friendly search components in your React app - LogRocket Blog](https://blog.logrocket.com/implement-typo-friendly-search-react)
|
||||
|
||||
- [Mastodon Profile Redirect](https://github.com/bramus/mastodon-profile-redirect)
|
||||
- [Software recommendations | ☯︎ Li](https://li.bearblog.dev/software-recommendations/)
|
||||
- [When Hammers Don’t Hammer | rnilo](https://rnilo.com/when-hammers-dont-hammer/)
|
||||
- [Mac OSX 使用 proxychains-ng](https://medium.com/@xiaoqinglin2018/mac-osx-%E4%BD%BF%E7%94%A8proxychains-ng-91ba61472fdf)
|
||||
|
||||
## GPG / PGP
|
||||
|
||||
- 原理
|
||||
- [你知道 PGP 和 GPG 的区别 吗？](https://mp.weixin.qq.com/s/sNcctTpCOc2tJ5h4WqResw)
|
||||
- 算号
|
||||
- [使用 GPG 密鑰進行 SSH 身份驗證 - The Error Log](https://blog.theerrorlog.com/using-gpg-keys-for-ssh-authentication-zh.html)
|
||||
- [一位 PGP 进步青年的科学算号实践](https://www.douban.com/note/763978955/?_i=0763092S-9yYM8)
|
||||
- [一位 PGP 进步青年的科学算号实践 – Telegraph](https://telegra.ph/%E4%B8%80%E4%BD%8D-PGP-%E8%BF%9B%E6%AD%A5%E9%9D%92%E5%B9%B4%E7%9A%84%E7%A7%91%E5%AD%A6%E7%AE%97%E5%8F%B7%E5%AE%9E%E8%B7%B5-09-13)
|
||||
- [某科学的 PGP 算号指南 | Dejavu's Blog](https://www.dejavu.moe/posts/vanity-pgp/)
|
||||
- 使用
|
||||
- [GPG(GunPG)的使用 | Bolog](https://zhoubofsy.github.io/2017/05/18/security/gpg-usage/)
|
||||
- [如何使用 GPG 给文件签名？](https://mp.weixin.qq.com/s/t2vVbhGKKUiZwn7lHwUd6A)
|
||||
- [Git 使用 GPG 对提交进行签名认证 - Coding Life Share](https://xwi88.com/git-sign-tags-commits-with-gpg/#%E5%B7%B2%E5%AD%98%E5%9C%A8-gpg-keys)
|
||||
- [GitHub 使用 GPG 密钥提交签名认证 | Dejavu's Blog - Brave](https://www.dejavu.moe/posts/gpg-verified-github/#%E5%88%97%E5%87%BA%E5%AF%86%E9%92%A5%E5%AF%B9)
|
||||
- [Mailvelope: PGP for Gmail & Webmail](https://mailvelope.com/en)
|
||||
|
||||
## Neovim / Vim
|
||||
|
||||
- [我比想象中更需要浏览器中的 Vim 模式](https://www.owenyoung.com/blog/vimium/)
|
||||
- 里面提到的热点汇总：[Buzzing - 用中文浏览国外社交媒体里的热门讨论](https://www.buzzing.cc/#more)
|
||||
- [我的现代化 Neovim 配置 - 知乎](https://zhuanlan.zhihu.com/p/382092667)
|
||||
- [Vim 配置入门 - 阮一峰的网络日志](https://ruanyifeng.com/blog/2018/09/vimrc.html)
|
||||
- [干活向的 vim 配置 | Hi! 上天不?](https://a-wing.top/vim/2021/03/21/work_vim_config)
|
||||
- [写给 VS Code 用户的 Vim 入坑指南 - Yuexun’s Blog](https://www.yuexun.me/blog/the-vim-guide-for-vs-code-users/)
|
||||
- [Mac 电脑 iterm 中配置 neovim 入门与实践 | 二丫讲梵](https://wiki.eryajf.net/pages/4733.html)
|
||||
- [MAC 配置 neovim 以及 vimplug 的基础用法\_Murmansk_NKU 的博客-CSDN 博客\_neovim vim-plug](https://blog.csdn.net/m0_57476889/article/details/123182691)
|
||||
- [How to Install NeoVim and Plugins with vim-plug | Linode](https://www.linode.com/docs/guides/how-to-install-neovim-and-plugins-with-vim-plug/)
|
||||
|
||||
## 网页字体排版相关
|
||||
|
||||
- 相关阅读
|
||||
- [优化中文网页排版样式 | 一个兆基 - Brave](https://zhaoji.wang/optimize-chinese-webpage-layout-style/)
|
||||
- [Typography Handbook](https://typographyhandbook.com/)
|
||||
- [最佳 WEB 字体排版实践的简明指导手册](https://juejin.cn/post/6844903444084424718)
|
||||
- [Best Practices for Chinese Layout | by Bobby Tung | Medium](https://bobtung.medium.com/best-practice-in-chinese-layout-f933aff1728f)
|
||||
- 中文：[簡單做好中文排版 – WANDERER books](https://wanderertw.wordpress.com/%e7%b0%a1%e5%96%ae%e5%81%9a%e5%a5%bd%e4%b8%ad%e6%96%87%e6%8e%92%e7%89%88/)
|
||||
- 工具
|
||||
- [樣式標準化 — 漢字標準格式・使用手冊](https://hanzi.pro/manual/yangshi_biaozhunhua#quanyu_ziti_yangshi)
|
||||
- [typo.css](https://github.com/sofish/typo.css)
|
||||
- [赫蹏（hètí）](https://github.com/sivan/heti)
|
||||
|
||||
## 开发
|
||||
|
||||
- [Jekyll vs Hugo vs Gatsby vs Next vs Zola vs Eleventy](https://mtm.dev/static)
|
||||
- [macOS 基础开发环境设置指南 | Dejavu's Blog](https://www.dejavu.moe/posts/macos-setup-guide/)
|
||||
- [2022-25: 开源当以上游优先](https://xuanwo.io/reports/2022-25/)
|
||||
|
||||
> 上游优先主要有以下工作：更新、沟通、贡献
|
||||
|
||||
> 不同的 Linux 发行版也存在着不同的利益趋向，由此会产生不同的决策。比如 Archlinux 希望成为一个 K.I.S.S 的发行版，尽量避免修改上游的软件，当软件出现破坏性变更时则需要用户自己手动进行调整；而 Debian 希望成为创建一个自由的操作系统，让所有人都能够自由获取，因此会尽量避免在软件库中提供非自由的软件；Ubuntu 的理念是 “人道待人”，希望为用户提供尽可能易用的发行版等等。我们会看到不同的下游发行版的理念是不同的，因此他们眼中的最大利益也各不相同，由此带来的具体决策，比如对上游进行 Patch，冻结软件版本，对 Linux 内核进行 backport 等等也各不相同。
|
||||
|
||||
> 我们仍要看到，尽管不同的开源共同体有着不同的利益趋向，但是大家仍然会有着共同的利益，即共同的上游。不管是 Archlinux，还是 Debian，抑或是 Ubuntu，他们仍然会努力保持跟上游的同步，把上游的问题向上游反馈，必要的时候还会参与上游的贡献（比如肥猫），而出于自己的利益考虑他们会选择 patch，lock，backport 等不同的方式解决具体的问题。我相信这种方式仍然属于上游优先的范畴，跟国产 XX 的做法是有本质区别的。
|
||||
|
||||
- [HOWTO fork a MIT licensed project · GitHub](https://gist.github.com/fbaierl/1d740a7925a6e0e608824eb27a429370)
|
||||
- [How to Open Visual Studio Code From Your Terminal](https://www.freecodecamp.org/news/how-to-open-visual-studio-code-from-your-terminal/)
|
||||
- [Firefox Extension Workshop | Get help creating & publishing Firefox extensions.](https://extensionworkshop.com/)
|
||||
- [不应该在没有 sudo 的情况下运行 Docker 的 3 个原因 - Linux 迷](https://www.linuxmi.com/no-sudo-run-docker.html)
|
||||
- curl 相关
|
||||
|
||||
> curl 是常用的命令行工具，用来请求 Web 服务器。它的名字就是客户端（client）的 URL 工具的意思[^1]。
|
||||
|
||||
- [Curl 命令详解 - 笨鸟教程的博客 | BY BenderFly](https://handerfly.github.io/linux/2019/05/26/curl%E5%91%BD%E4%BB%A4%E8%AF%A6%E8%A7%A3/)
|
||||
- [Curl Cookbook](https://catonmat.net/cookbooks/curl)
|
||||
- [curl 的用法指南 - 阮一峰的网络日志](https://www.ruanyifeng.com/blog/2019/09/curl-reference.html)
|
||||
- [curl 网站开发指南 - 阮一峰的网络日志](https://www.ruanyifeng.com/blog/2011/09/curl.html)
|
||||
- [curl - Tutorial](https://curl.se/docs/manual.html)
|
||||
|
||||
[^1]: [curl 的用法指南 - 阮一峰的网络日志](https://www.ruanyifeng.com/blog/2019/09/curl-reference.html)
|
||||
148
urara/2023-01-09/+page.md
Normal file
148
urara/2023-01-09/+page.md
Normal file
|
|
@ -0,0 +1,148 @@
|
|||
---
|
||||
title: OTP安装方法下的 Pleroma 命令速查笔记
|
||||
created: 2023-01-09
|
||||
summary: 不完全、不充分、仅供参考
|
||||
---
|
||||
|
||||
我想要说的，前人们都已经说过了：[Pleroma Documentation](https://docs-develop.pleroma.social/)
|
||||
|
||||
如果是用 OTP 方式安装的话，Pleroma 的操作基本上是：
|
||||
|
||||
```bash
|
||||
su pleroma -s $SHELL -lc "命令"
|
||||
```
|
||||
|
||||
命令里面的内容，全都可以在 Pleroma 文档找到，遇事不决，先查文档。
|
||||
|
||||
## 基础操作
|
||||
|
||||
```bash
|
||||
# 查看pleroma情况
|
||||
systemctl status pleroma
|
||||
# 启动
|
||||
systemctl start pleroma
|
||||
# 或者：
|
||||
su pleroma -s $SHELL -lc "./bin/pleroma daemon"
|
||||
## 开机启动
|
||||
systemctl enable pleroma
|
||||
## 停止
|
||||
systemctl stop pleroma
|
||||
# 或者：
|
||||
su pleroma -s $SHELL -lc "./bin/pleroma stop"
|
||||
```
|
||||
|
||||
## 数据库运维
|
||||
|
||||
[Database maintenance tasks - Pleroma Documentation](https://docs-develop.pleroma.social/backend/administration/CLI_tasks/database/)
|
||||
|
||||
```bash
|
||||
# safe to cancel：
|
||||
# Full
|
||||
su pleroma -s $SHELL -lc "./bin/pleroma_ctl database vacuum full"
|
||||
|
||||
# Analyze
|
||||
su pleroma -s $SHELL -lc "./bin/pleroma_ctl database vacuum analyze"
|
||||
```
|
||||
|
||||
## 版本升级
|
||||
|
||||
[Updating your instance - Pleroma Documentation](https://docs-develop.pleroma.social/backend/administration/updating/)
|
||||
|
||||
```bash
|
||||
su pleroma -s $SHELL -lc "./bin/pleroma_ctl update"
|
||||
|
||||
systemctl stop pleroma
|
||||
|
||||
su pleroma -s $SHELL -lc "./bin/pleroma_ctl migrate"
|
||||
|
||||
systemctl start pleroma
|
||||
```
|
||||
|
||||
## Pleroma-fe 升级
|
||||
|
||||
```bash
|
||||
cd /tmp
|
||||
```
|
||||
|
||||
版本链接：Commit -> Pipelines -> Download artifacts -> build(右键复制链接)
|
||||
以[kazv.moe infrastructure / pleroma-fe · GitLab](https://lily-is.land/infra/pleroma-fe) 为例子
|
||||
|
||||
|
||||
```bash
|
||||
sudo curl -L 复制的链接 -o pleroma-fe.zip
|
||||
# 如：sudo curl -L https://lily-is.land/infra/pleroma-fe/-/jobs/5430/artifacts/download?file_type=archive -o pleroma-fe.zip
|
||||
# 解压
|
||||
sudo busybox unzip pleroma-fe.zip -o -d /var/lib/pleroma
|
||||
```
|
||||
|
||||
然后复制里面的内容到 static 文件夹
|
||||
|
||||
```bash
|
||||
cd /var/lib/pleroma
|
||||
sudo cp -r dist/* static/
|
||||
```
|
||||
|
||||
## 添加主题
|
||||
|
||||
[Theming your instance - Pleroma Documentation](https://docs-develop.pleroma.social/backend/configuration/howto_theming_your_instance/)
|
||||
|
||||
首先要确定 static 文件夹所在路径，可以在 admin-fe 里的这个位置：
|
||||
|
||||
然后进入这个路径，如：
|
||||
|
||||
```bash
|
||||
cd /var/lib/pleroma/static
|
||||
```
|
||||
|
||||
然后`ls`一下看路径下有没有 static 文件夹，如果没有的话就创建一个，如果有了就进入这个文件夹
|
||||
|
||||
```bash
|
||||
ls
|
||||
cd static
|
||||
```
|
||||
|
||||
同样的在路径下创建`themes`和`styels.json` 文件
|
||||
在 themes 文件夹下放主题 json 文档，然后在
|
||||
Styles.json 默认下添加自定义主题路径：
|
||||
|
||||
```json
|
||||
{
|
||||
"pleroma-dark": ["Pleroma Dark", "#121a24", "#182230", "#b9b9ba", "#d8a070", "#d31014", "#0fa00f", "#0095ff", "#ffa500"],
|
||||
"pleroma-light": ["Pleroma Light", "#f2f4f6", "#dbe0e8", "#304055", "#f86f0f", "#d31014", "#0fa00f", "#0095ff", "#ffa500"],
|
||||
"classic-dark": ["Classic Dark", "#161c20", "#282e32", "#b9b9b9", "#baaa9c", "#d31014", "#0fa00f", "#0095ff", "#ffa500"],
|
||||
"bird": ["Bird", "#f8fafd", "#e6ecf0", "#14171a", "#0084b8", "#e0245e", "#17bf63", "#1b95e0", "#fab81e"],
|
||||
"ir-black": ["Ir Black", "#000000", "#242422", "#b5b3aa", "#ff6c60", "#FF6C60", "#A8FF60", "#96CBFE", "#FFFFB6"],
|
||||
"monokai": ["Monokai", "#272822", "#383830", "#f8f8f2", "#f92672", "#F92672", "#a6e22e", "#66d9ef", "#f4bf75"],
|
||||
"redmond-xx": "/static/themes/redmond-xx.json",
|
||||
"redmond-xx-se": "/static/themes/redmond-xx-se.json",
|
||||
"redmond-xxi": "/static/themes/redmond-xxi.json",
|
||||
"breezy-dark": "/static/themes/breezy-dark.json",
|
||||
"breezy-light": "/static/themes/breezy-light.json",
|
||||
"mammal": "/static/themes/mammal.json",
|
||||
"你的主题名字": "/static/themes/my-awesome-theme.json"
|
||||
}
|
||||
```
|
||||
|
||||
主题参考：
|
||||
|
||||
- [Themes Gallery](https://suicablog.cobaltkiss.blue/posts/themes-gallery/)
|
||||
- [Pleroma Theme Repository](https://plthemes.vulpes.one/)
|
||||
- [The Pleroma Themes](https://mindpalace.michaelis.website/tech/pleroma-theme.html)
|
||||
|
||||
## 加入中继
|
||||
|
||||
|
||||
|
||||
```bash
|
||||
su pleroma -s $SHELL -lc "./bin/pleroma_ctl relay follow 中继的网址"
|
||||
```
|
||||
|
||||
## 一些参考
|
||||
|
||||
- [Pleroma (Soapbox BE+FE) 安装笔记 | ./kwaa.dev](https://kwaa.dev/pleroma)
|
||||
- [GitHub - angristan/docker-pleroma: Docker image for the Pleroma federated social network](https://github.com/angristan/docker-pleroma)
|
||||
- [我的 pleroma 搭建笔记 ｜ 执痴](https://dasgelobteland.github.io/posts/22pleroma/)
|
||||
- [小巧的数字绿洲 - 秘密花园](https://blog.debula.ml/index.php/archives/5/)
|
||||
- [在 Debian 10 / Ubuntu 20.04 上安装 Pleroma](https://suicablog.cobaltkiss.blue/posts/pleroma-installation-on-linux-using-otp-releases/)
|
||||
|
||||
[^1]: [Pleroma (Soapbox BE+FE) 安装笔记 | ./kwaa.dev](https://kwaa.dev/pleroma)
|
||||
200
urara/2023-01-13-vol5/+page.md
Normal file
200
urara/2023-01-13-vol5/+page.md
Normal file
|
|
@ -0,0 +1,200 @@
|
|||
---
|
||||
title: Nonsense Wander ~ Vol5
|
||||
created: 2023-01-13
|
||||
summary: Personal Blogs / Eink / Kindle / punkism …
|
||||
tags:
|
||||
- Nonsense Wander
|
||||
---
|
||||
|
||||
好久不见。
|
||||
|
||||
本期用 [immersive-translate](https://github.com/immersive-translate/immersive-translate) 翻译了涉及到的部分内容
|
||||
|
||||
## Blog
|
||||
|
||||
### 1. [Jayeless.net](https://www.jayeless.net/)
|
||||
|
||||
> I’m Jessica Smith, and this is my personal website. I’m a socialist and a feminist who loves animals, books, gaming, and cooking; I’m also very interested in linguistics, history, technology and society. I live in Melbourne, Australia, with my partner Vivian and our delightful tabby cat, Gidget.
|
||||
|
||||
这个 Hugo 博客是一个[IndieWeb](https://indieweb.org/)-enabled website，我觉得挺有意思的
|
||||
|
||||
### 2. [✧･marzka･✧](https://marzka.cafe/)
|
||||
|
||||
> hey! i'm marzka, a web developer from the uk · i hope your day is going great and you enjoy browsing my little web nook! 💚
|
||||
|
||||
太别致的博客了，鼠标也做得很可爱
|
||||
|
||||
### 3. [Happy Coding](https://happycoding.io/)
|
||||
|
||||
> Happy Coding is a collection of coding tutorials, starting with the fundamentals of creative coding and leading to advanced topics like server-side coding, Android development, and technical interviewing.
|
||||
|
||||
### 4. [bt.ht](https://bt.ht/)
|
||||
|
||||
> Rambling about design, programming, hardware and Linux
|
||||
>
|
||||
> I'm Brad Taunt, a UX-focused front-end designer, technical writer, and self-taught developer who creates enjoyable experiences for humans.
|
||||
>
|
||||
> Passionate about open source software, usability, performance, privacy, and minimal design.
|
||||
>
|
||||
> This small piece of the internet stores a growing collection of my personal brain dumps.
|
||||
|
||||
博文：[Don't Make a Blog, Make a Brain Dump](https://bt.ht/dump)
|
||||
|
||||
### 5. [Top - oimo.io](https://oimo.io/)
|
||||
|
||||
> saharan / さはら
|
||||
>
|
||||
> I make something.
|
||||
>
|
||||
> 何か作ってます。触って楽しいものが好き。
|
||||
|
||||
### 6. [ Patrick Collison](https://patrickcollison.com/about)
|
||||
|
||||
> I currently live in California and work at [Stripe](https://stripe.com/). I grew up in Ireland and previously studied at MIT.
|
||||
|
||||
博文：[Bookshelf · Patrick Collison](https://patrickcollison.com/bookshelf)
|
||||
|
||||
### 7. [» archives mnmlist](https://mnmlist.com/archives/)
|
||||
|
||||
一个关于 minimalism 的博客
|
||||
|
||||
> Bloggers and website creators get so caught up in things that they lose sight of what’s the most important thing: creating a great experience for the reader. The person coming to your site isn’t a customer, a potential mailing list subscriber, a consumer of advertising, a person who wants to be marketed to, a buyer of your affiliate products, a Facebook or Twitter follower … he’s a person who simply wants some information or entertainment from what you’ve written.
|
||||
>
|
||||
> 博主和网站创建者过于专注于一些事情，以至于他们忽视了最重要的事情：为读者创造良好的体验。 访问您网站的人不是客户、潜在的邮件列表订阅者、广告消费者、想要营销的人、您附属产品的购买者、Facebook 或 Twitter 的追随者……他只是一个人想从你写的东西中得到一些信息或娱乐。
|
||||
>
|
||||
> —— [» minimal web mnmlist](https://mnmlist.com/w/)
|
||||
|
||||
### 8. [Quentin Hocdé - Creative Developer & Digital Artist](https://quentinhocde.com/)
|
||||
|
||||
> I'm addicted to well thought-through animations and smart user-experiences. Small websites is what I like to create, especially for a social cause. I also do generative art, creating algorithms which generate visuals and animations, mixing technology and colorful palettes. I’m in love with infinite mesmerizing loops but also with beautiful and smart generative compositions.
|
||||
|
||||
动效很好的一个个人作品集网站
|
||||
|
||||
### 9. [Max Böck](https://mxb.dev/)
|
||||
|
||||
一个前端工程师的博客，博客主题很多，把鼠标变成虾的设计挺好玩的
|
||||
|
||||
### 10. [POURIA](https://pouria.dev/)
|
||||
|
||||
> Hello there!
|
||||
>
|
||||
> I’m unemployed, sorry I mean I’m POURIA 🦋. Currently based in Tehran.
|
||||
>
|
||||
> I use web technologies such as TypeScript, React and Node.js to create things I find useful and interesting. Right now I’m fascinated by WebGL, Three.js, 3D graphics, math and generative art and music and I’m shifting my focus there.
|
||||
|
||||
下面的轮播太好笑了
|
||||
|
||||
## Eink
|
||||
|
||||
前段时间买了一个 Boox 的阅读器，于是研究了一下 Eink 相关内容，对于该阅读器的体验如何呢？总之槽多无口，我先不说了
|
||||
|
||||
### 1. [重度使用这款墨水屏手机之后，谈谈我对电子纸的理解和预测 - 少数派](https://sspai.com/post/65051)
|
||||
|
||||
这篇文章的内容远比标题要好，共三万字，介绍了电子纸的方方面面。
|
||||
|
||||
### 2. [一次「买椟还珠」的选择——得到阅读器体验 - Neverland](https://type.cyhsu.xyz/2019/12/flow-ereader-review/)
|
||||
|
||||
提到的 eink app：
|
||||
|
||||
- [Kiwi Browser](https://kiwibrowser.com/)
|
||||
- Nova Launcher
|
||||
- 桌面插件工具 [UCCW](https://play.google.com/store/apps/details?id=in.vineetsirohi.customwidget&hl=en)
|
||||
- [FV 悬浮球](http://fooview.com/)
|
||||
- [KOReader](http://koreader.rocks/)
|
||||
|
||||
### 3. [Vol.67 很多人忘了 kindle 曾经成功过](https://www.xiaoyuzhoufm.com/episode/62aa64cb7550034d35d432f2)
|
||||
|
||||
### 4. [我们所认识的 E Ink • Anyway.FM 设计杂谈 ](https://anyway.fm/e-ink/)
|
||||
|
||||
> E Ink 电子墨水这种看似与现行显示方案背道而驰的显示介质，为何没有销声匿迹，反而在一些垂直领域里「蓬勃发展」着呢？来，那就跟着我们再次回到 10 年前，做一次时间钳形运动吧 :)
|
||||
|
||||
### 5. [电纸书阅读器使用小记](https://www.uncoverman.com/share-android-eink-reader-usage.html)
|
||||
|
||||
> 电纸书阅读器的购买需要考虑几方面。第一是尺寸，场景决定尺寸。如果是漫画为主的阅读，不消说，10 寸及以上。如果是纯文字为主的阅读，建议选用 8 到 10 寸，8 寸其实更为轻巧一些。第二个要点是系统，如果重度使用「多看阅读」和「微信读书」的话，肯定还是要选开放系统。
|
||||
|
||||
### 6. [Freewrite Alpha is the cheapest smart typewriter Astrohaus has made yet | Engadget](https://www.engadget.com/freewrite-alpha-portable-smart-typewriter-140005201.html)
|
||||
|
||||
|
||||
|
||||
> Last year, [I tried the Freewrite Smart Typewriter](https://www.engadget.com/astrohaus-freewrite-one-month-writing-test-140008132.html) — an expensive, single-purpose E Ink typewriter that does one thing very well. It lets you draft text with an excellent keyboard and zero distractions. If you're a serious writer, there's a lot to like about it, but it is most definitely not cheap; Astrohaus, the company behind the Freewrite, even raised the prices of its products, including the full-size model and the [portable laptop-style Freewrite Traveler](https://www.engadget.com/astrohaus-freewrite-traveler-eink-typewriter-review-130000032.html), earlier this year.
|
||||
>
|
||||
> 去年， [我试用了 Freewrite 智能打字机](https://www.engadget.com/astrohaus-freewrite-one-month-writing-test-140008132.html) ——一种昂贵的单一用途 E Ink 打字机，但它只做一件事。 它使您可以使用出色的键盘和零干扰来起草文本。 如果您是一位认真的作家，那么它有很多值得喜欢的地方，但绝对不便宜； 今年早些时候，Freewrite 背后的公司 Astrohaus 甚至提高了其产品的价格，包括全尺寸型号和 [便携式笔记本电脑风格的 Freewrite Traveler](https://www.engadget.com/astrohaus-freewrite-traveler-eink-typewriter-review-130000032.html) 。
|
||||
|
||||
一个有墨水屏的键盘
|
||||
|
||||
### 7. [The elusiveness of digital paper — Stephan Ango](https://stephanango.com/the-elusiveness-of-digital-paper)
|
||||
|
||||
> Our cyberpunk future is made of darkness and artificial light, but I’m not sure that’s the only future I want.\
|
||||
>
|
||||
> 我们的赛博朋克未来是由黑暗和人造光构成的，但我不确定那是我唯一想要的未来。
|
||||
|
||||
一个电子纸普遍应用的未来会是什么样的呢？
|
||||
|
||||
### 8. [The Kindle Test | Eric's Blog](https://blog.ericfrisch.com/kindle-test/)
|
||||
|
||||
> So what does this have to do with the Kindle? Much like the news sites I mentioned above, I doubt the Kindle web browser was intended to provide a superior internet experience. For me, it's primarily used for logging into wifi networks on the road. But I decided a few years ago that all my web content should look good on that limited, oft-forgotten browser. This is **not** because I think lots of people are viewing my sites on their Kindles (they aren't). Instead, I figure that if something looks good in an experimental browser on a tiny e-ink screen, it will likely work on any other device, too. "The Kindle Test" is my simplicity standard for web design, and that standard has served me well. In fact, Bear is so lightweight that I could actually write posts on my Kindle if I wanted to!
|
||||
>
|
||||
> 那么这与 Kindle 有什么关系呢？ 就像我上面提到的新闻网站一样，我怀疑 Kindle 网络浏览器旨在提供卓越的互联网体验。 对我来说，它主要用于在路上登录 wifi 网络。 但几年前我决定，我所有的网络内容都应该在那个受限的、经常被遗忘的浏览器上看起来不错。 这 并不是 因为我认为很多人都在他们的 Kindle 上查看我的网站（他们不是）。 相反，我 数字 如果某些东西在微型电子墨水屏幕上的实验性浏览器中看起来不错，那么它也可能在任何其他设备上运行。 “Kindle 测试”是我的网页设计简单标准，这个标准对我很有帮助。 事实上，Bear 非常轻巧，如果我愿意，我实际上可以在 Kindle 上写文章！
|
||||
|
||||
### 9. [A smart E Ink calendar comes to my kitchen – Six Colors](https://sixcolors.com/post/2022/09/a-smart-e-ink-calendar-comes-to-my-kitchen/)
|
||||
|
||||
|
||||
提到的项目： [eInkCalendar](https://github.com/13Bytes/eInkCalendar)
|
||||
|
||||
### 10. [SystemSix](https://www.engineersneedart.com/systemsix/systemsix.html)
|
||||
|
||||
|
||||
|
||||
> SystemSix is a desk calendar that displays the weather forecast and phase of the moon on an e-ink display. This is a kind of love-letter to my first Macintosh.
|
||||
|
||||
这个博文所在网站也很有意思
|
||||
|
||||
### 11. [Digital License Plates Are Here, But Do We Need Them? | Hackaday](https://hackaday.com/2019/02/01/digital-license-plates-are-here-but-do-we-need-them/)
|
||||
|
||||
## Might be useful
|
||||
|
||||
### 1. [Decoupled](https://decoupled.app/)
|
||||
|
||||
> An app for those who take music seriously.
|
||||
|
||||
feature:
|
||||
|
||||
- Playback of a wide range of formats: [FLAC](https://xiph.org/flac/), [Vorbis (Ogg)](https://xiph.org/vorbis/), [Opus](http://www.opus-codec.org/), [Apple Lossless](https://en.wikipedia.org/wiki/Apple_Lossless), MP3, AAC, WAV.
|
||||
|
||||
* Gapless playback
|
||||
* 10-band equalizer
|
||||
* Music sync through USB, via [iTunes File Sharing](https://support.apple.com/en-us/HT201301)
|
||||
* Music sync *without iTunes* via FTP, WebDAV, or a simple Web browser!
|
||||
* Dark mode
|
||||
|
||||
### 2. [Free Computer, Programming, Mathematics, Technical Books, Lecture Notes and Tutorials](https://freecomputerbooks.com/)
|
||||
|
||||
Links to Free Computer, Mathematics, Technical Books all over the World
|
||||
|
||||
### 3. [Granary](https://granary.io/)
|
||||
|
||||
> Fetches and converts data between [social networks](https://indiewebcamp.com/silo), HTML and JSON with [microformats2](http://microformats.org/wiki/microformats2), [ActivityStreams](http://activitystrea.ms/) 1 and 2, [Atom](http://atomenabled.org/), [RSS](http://www.rssboard.org/rss-specification), [JSON Feed](https://jsonfeed.org/), and more.
|
||||
|
||||
### 4.[一次性临时电子邮件 - Temp Mail](https://temp-mail.io/zh)
|
||||
|
||||
### 5. [Tabby - a terminal for a more modern age](https://tabby.sh/)
|
||||
|
||||
> Tabby is an infinitely customizable cross-platform terminal app for local shells, serial, SSH and Telnet connections.
|
||||
|
||||
## Others
|
||||
|
||||
### 1. [punkism - the ideology of punk](https://www.punk.ist/)
|
||||
|
||||
> A HUNDRED AND TWENTYTHREE THINGS A PUNKIST SHOULD KNOW
|
||||
>
|
||||
> 一百二十三件朋克主义者应该知道的事
|
||||
|
||||
### 2. [HackAllTheThings](https://notes.akenofu.me/)
|
||||
|
||||
### 3. [Webring](https://webring.xxiivv.com/#icons)
|
||||
|
||||
> This webring is an attempt to inspire artists & developers to build their websites and share traffic amongst each other. The ring welcomes **hand-crafted wikis and portfolios**.
|
||||
|
||||
### 4. [Explorable Explanations](https://explorabl.es/)
|
||||
|
||||
> Welcome to Explorable Explanations, a hub for learning through play! We’re a disorganized “movement” of artists, coders & educators who want to reunite play and learning.
|
||||
250
urara/2023-01-22-backup/+page.md
Normal file
250
urara/2023-01-22-backup/+page.md
Normal file
|
|
@ -0,0 +1,250 @@
|
|||
---
|
||||
title: 用duplicacy备份Pleroma
|
||||
created: 2023-01-22
|
||||
summary: 本地备份 + 异地远端备份
|
||||
tags:
|
||||
- Pleroma
|
||||
---
|
||||
|
||||
## 前言
|
||||
|
||||
- 实现的功能：
|
||||
- 本地备份
|
||||
- 远端加密备份
|
||||
- 定时自动清理备份
|
||||
- 存在的问题：
|
||||
- 用`root`操作脚本不安全
|
||||
- 操作环境：`Ubuntn 20.04` `Pleroma 2.5.0`
|
||||
- 关于 duplicacy：
|
||||
- [Duplicacy CLI 备份工具基本使用笔记](https://www.dejavu.moe/posts/duplicacy-cli-basic-guide/)
|
||||
- [Quick Start · gilbertchen/duplicacy Wiki · GitHub](https://github.com/gilbertchen/duplicacy/wiki/Quick-Start)
|
||||
- 如果不需要 duplicacy 备份的话，忽略下述带 `*` 内容
|
||||
|
||||
<script lang="ts">
|
||||
import Github from '$lib/components/extra/github.svelte'
|
||||
</script>
|
||||
|
||||
<Github user='Sevichecc' repo='pleroma-backup-script'/>
|
||||
|
||||
## 备份原理
|
||||
|
||||
### 备份什么
|
||||
|
||||
- 上传的文件：`/var/lib/pleroma/upload`
|
||||
- 静态文件：`/var/lib/pleroma/static`
|
||||
- 数据库：`pleroma.pgdump`
|
||||
- 配置文件：`/etc/pleroma/config.exs`
|
||||
|
||||
参考：[Backup/Restore/Move/Remove your instance - Pleroma Documentation](https://docs-develop.pleroma.social/backend/administration/backup/)
|
||||
|
||||
### 如何备份
|
||||
|
||||
- Pleroma 停机后，备份数据库
|
||||
- 用`tar` 结合`gzip` 压缩打包 `static/` 和 `uploads/`文件夹
|
||||
- 复制配置文件`config.exs`
|
||||
- 用 [duplicacy](https://duplicacy.com/) 将所有本地备份内容上传至 S3 存储中
|
||||
- 用`expect`脚本在 duplicacy 备份过程中自动输入
|
||||
|
||||
## 备份准备
|
||||
|
||||
- 确定上述备份内容的所在位置
|
||||
- 创建一个备份存放的文件夹并进入:
|
||||
```bash
|
||||
sudo mkdir /opt/pleroma-backup && cd /opt/pleroma-backup
|
||||
```
|
||||
- \*安装 `expect`：
|
||||
```bash
|
||||
sudo apt-get install tcl tk expect
|
||||
```
|
||||
- \*安装 `duplicacy`，详见 [Duplicacy CLI 备份工具基本使用笔记](https://www.dejavu.moe/posts/duplicacy-cli-basic-guide/)
|
||||
|
||||
## 备份流程
|
||||
|
||||
我是在 root 用户下操作的
|
||||
|
||||
### 1. \*初始化 duplicacy
|
||||
|
||||
在开始之前，确保按照安装好了 duplicacy，然后进入到备份文件夹中(下为`/opt/pleroma-backup`)，
|
||||
|
||||
这里设置 duplicacy Snapshot ID 为 pleroma，bucket 名为`pleroma`：
|
||||
|
||||
```bash
|
||||
# contabo storage
|
||||
sudo duplicacy init -e pleroma s3c://usc1@usc1.contabostorage.com/pleroma
|
||||
```
|
||||
|
||||
然后输入密码，如 1234
|
||||
|
||||
我所用的是 Contabo storage，比较推荐 Cloudflare 的 R2，但我尚不清楚如何配置……
|
||||
|
||||
其他平台的配置参考： [Supported storage backends - How-to - Duplicacy Forum](https://forum.duplicacy.com/t/supported-storage-backends/1107)
|
||||
|
||||
### 2. 获取备份脚本
|
||||
|
||||
从 Github 获取并解压：
|
||||
|
||||
```bash
|
||||
sudo curl -L https://github.com/Sevichecc/pleroma-backup-script/releases/download/1.0.1/backup-script.zip -o backup-script.zip
|
||||
sudo unzip backup-script.zip
|
||||
sudo rm -rf backup-script.zip
|
||||
```
|
||||
|
||||
### 3. 修改设置
|
||||
|
||||
```bash
|
||||
sudo vim .env
|
||||
```
|
||||
|
||||
其中：
|
||||
|
||||
- PLEROMA_DB: pleroma 数据库的名字
|
||||
- PLEROMA_PATH: pleroma 静态文件的位置，下面应该会有`static` 和`uploads` 文件
|
||||
- PLEROMA_CONFIG_PATH： pleroma 设置文件的位置
|
||||
- BACKUP_PATH：备份文件夹的位置
|
||||
|
||||
以下为默认值：
|
||||
|
||||
```bash
|
||||
PLEROMA_DB=pleroma
|
||||
PLEROMA_PATH=/var/lib/pleroma
|
||||
PLEROMA_CONFIG_PATH=/etc/pleroma/config.exs
|
||||
BACKUP_PATH=/opt/pleroma-backup
|
||||
```
|
||||
|
||||
### 4. \*设置 duplicacy
|
||||
|
||||
打开`duplicacy` 脚本：
|
||||
|
||||
```bash
|
||||
sudo vim duplicacy.sh
|
||||
```
|
||||
|
||||
在引号内填入自己的各项配置：
|
||||
|
||||
```bash
|
||||
set ACCESS_KEY_ID "YOUR_ACCESS_KEY_ID"
|
||||
set SECRET_ACCESS_KEY "YOUR_SECRET_ACCESS_KEY"
|
||||
set PASSWORD "YOUR_PASSWORD"
|
||||
```
|
||||
|
||||
下面这段表示的是用`duplicacy prune -keep 7:30`设置了对于超过 30 天的版本，每 7 天保留一次新版本。
|
||||
|
||||
如果需要的话，删掉前面的注释，如：
|
||||
|
||||
```bash
|
||||
##### (optional) Keep a revision every 7 days for revisions older than 30 days
|
||||
expect "completed"
|
||||
spawn duplicacy prune -keep 7:30
|
||||
|
||||
expect "ID"
|
||||
send "$ACCESS_KEY_ID\r"
|
||||
|
||||
expect "Secret"
|
||||
send "$SECRET_ACCESS_KEY\r"
|
||||
|
||||
expect "password"
|
||||
send "$PASSWORD\r"
|
||||
```
|
||||
|
||||
最后，给 `duplicacy` 备份脚本执行权限
|
||||
|
||||
```bash
|
||||
sudo chmod +x duplicacy.sh
|
||||
```
|
||||
|
||||
### 3. 运行脚本
|
||||
|
||||
```bash
|
||||
sudo bash backup.sh
|
||||
```
|
||||
|
||||
### 4. 定时备份
|
||||
|
||||
用 crontab 设置定时运行该脚本，这里设置的是每 7 天备份一次，如果还没有 crontab 的话，需要安装一下，这里不再赘述
|
||||
|
||||
编辑 crontab 任务：
|
||||
|
||||
```bash
|
||||
sudo crontab -e
|
||||
```
|
||||
|
||||
添加下面这行
|
||||
|
||||
```bash
|
||||
0 1 */7 * * root /bin/bash /opt/pleroma-backup/backup.sh
|
||||
```
|
||||
|
||||
保存退出。
|
||||
|
||||
## 停机通知 bot
|
||||
|
||||
创建了一个简单的停机 bot，在停机备份前 1 小时发嘟提醒
|
||||
|
||||
安装依赖：
|
||||
|
||||
```
|
||||
sudo pip3 install requests beautifulsoup4 Mastodon.py
|
||||
|
||||
```
|
||||
|
||||
创建 bot：
|
||||
|
||||
```bash
|
||||
sudo vim bot.py
|
||||
```
|
||||
|
||||
写入：
|
||||
|
||||
```py
|
||||
#!/usr/bin/python
|
||||
from mastodon import Mastodon
|
||||
|
||||
Mastodon.create_app(
|
||||
'backupbot',
|
||||
api_base_url = 'https://your_pleoma_instance.com',
|
||||
to_file = 'backupbot_clientcred.secret'
|
||||
)
|
||||
|
||||
mastodon = Mastodon(
|
||||
client_id = 'backupbot_clientcred.secret',
|
||||
api_base_url = 'https://your_pleoma_instance.com'
|
||||
)
|
||||
|
||||
mastodon.log_in(
|
||||
'bot_account_username',
|
||||
'bot_account_password',
|
||||
to_file = 'backupbot_usercred.secret'
|
||||
)
|
||||
|
||||
mastodon = Mastodon(
|
||||
access_token = 'backupbot_usercred.secret',
|
||||
api_base_url = 'https://your_pleoma_instance.com',
|
||||
feature_set = 'pleroma'
|
||||
)
|
||||
|
||||
mastodon.status_post('各位居民们,很抱歉,1小时后将停机备份10分钟,喝杯咖啡稍等一下吧~:cafe_cappucino:')
|
||||
```
|
||||
|
||||
其中
|
||||
|
||||
- `api_base_url`：实例 URL
|
||||
- `bot_account_username` ： bot 登录的用户名
|
||||
- `bot_account_password` ：bot 登录密码
|
||||
|
||||
设置定时：
|
||||
|
||||
```bash
|
||||
sudo crontab -e
|
||||
```
|
||||
|
||||
```bash
|
||||
0 0 */7 * * cd /opt/pleroma-backup && python3 bot.py
|
||||
```
|
||||
|
||||
然后就做完了！
|
||||
|
||||
## 参考：
|
||||
|
||||
- [Mastodon 媒体存储和数据库备份](https://tech.konata.co/2022-02-20-mastodon-backup/)
|
||||
- [Mastodon | 做完这个没关系 bot 就去打游戏 | 小球飞鱼](https://mantyke.icu/posts/2022/dontworry-bot/)
|
||||
- [麻瓜念咒之时间线轰炸机 - 秘密花园](https://blog.debula.ml/index.php/archives/6/)
|
||||
116
urara/2023-02-03-reading-1/+page.md
Normal file
116
urara/2023-02-03-reading-1/+page.md
Normal file
|
|
@ -0,0 +1,116 @@
|
|||
---
|
||||
title: 我在看什么 · 1月
|
||||
created: 2023-02-03
|
||||
summary: 422 / TypeScript / Text-to-4D / 像素画 / History of Unix
|
||||
tags:
|
||||
- 我在看什么
|
||||
image: /2023-02-03-reading-1/jan.jpg
|
||||
---
|
||||
|
||||
## 未分类
|
||||
|
||||
- [ipfs 公共网关](https://iui.su/2753/)
|
||||
- [MacStories Selects 2022: Recognizing the Best Apps of the Year](https://www.macstories.net/stories/macstories-selects-2022-recognizing-the-best-apps-of-the-year/)
|
||||
- [用户最讨厌的 15 个交互行为，需要你找到更好的时机](https://mp.weixin.qq.com/s/KFTMDzL5Mxulqj3iB0RF6Q)
|
||||
> 大部分时候，我们都是用最简单、粗暴的逻辑去强迫用户接受。但数据却告诉我们用户并不买单，同时我们的客户体验也在受到严重的影响。
|
||||
- [The State Of Usability In 2023](https://www.smashingmagazine.com/2023/01/usability-2023/)
|
||||
- [Fuck it，直接上线就好，不要执着于完美了 - Owen 的博客存档](https://archive.owenyoung.com/blog/just-make-it-online)
|
||||
- [Digital detoxes don’t actually work - Ness Labs - Brave](https://nesslabs.com/digital-detoxes)
|
||||
|
||||
> A collaboration between Oxford University, The Education University of Hong Kong, Reading University and Durham University has found “no evidence to suggest abstaining from social media has a positive effect on an individual’s well-being.” The researchers noted that this contrasts popular beliefs about the benefits of digital detoxes.
|
||||
|
||||
> Moreover, this international study found that those who took a break from social media didn’t replace online socializing with face-to-face, voice, or email interactions, as the researchers had expected. Taking a break from social media therefore led to reduced overall interaction and loneliness as social media was not replaced with forms of socializing.
|
||||
|
||||
- [Generative Art vs AI Art Generators (highlights)](https://davidmatthew.ie/generative-art-vs-ai-art-generators/)
|
||||
|
||||
> I understand of AI art as a kind of outsourcing of our inner lives as artists, defeating one of primary purposes of art: the active process of creating. This is the lifeblood of art, and while AI text-to-image tools can certainly be fun to play with and could even form valuable sources of inspiration, as in end in themselves they’re actually quite parasitic to the artistic process, relegating us to relatively passive observers. Is that where we want generative art to go, or art in general?
|
||||
>
|
||||
> 我认为人工智能艺术是对我们作为艺术家的内心生活的一种外包，违背了艺术的主要目的之一：积极的创造过程。这是艺术的命脉，虽然人工智能文本到图像的工具当然可以玩得很开心，甚至可以形成有价值的灵感来源，但就其本身而言，它们实际上是对艺术过程的一种寄生，使我们沦为相对被动的观察者。这就是我们想让生成式艺术发展的方向？或者说是一般的艺术 ？
|
||||
|
||||
- [IRC - 维基百科，自由的百科全书](https://zh.wikipedia.org/wiki/IRC)
|
||||
- [朝知万象 | 《Whole Earth Catalog》：如何成为完整的人](https://archive.ph/Yvpqr)
|
||||
> 地球是完整的，人也应该是完整的。《Whole Earth Catalog》是给任何想成为完整的人准备的目录。
|
||||
- [Claire Morwood 给所有人的 Bitsy 游戏制作教程 A Bitsy Tutorial (2017) ](https://mp.weixin.qq.com/s/mBZMUrvM2Ko4E__VgGiyiw)
|
||||
- [但是春联不只一种颜色](https://mp.weixin.qq.com/s/XQeYHUe31qAvzXV0FrXlMQ)
|
||||
- 不相关的十二面体
|
||||
- [About](https://a.exozy.me/about/)
|
||||
- [每个面都是凹多边形的多面体](http://www.matrix67.com/blog/archives/7132)
|
||||
|
||||
## 开发相关
|
||||
|
||||
- [ArrayBuffer - JavaScript | MDN](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer)
|
||||
- [Run a Node.js script from your macOS menu bar](https://flaviocopes.com/run-a-nodejs-script-from-your-macos-menu-bar/)
|
||||
- [422 Unprocessable Entity - HTTP | MDN - Brave](https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Status/422)
|
||||
- [422 Unprocessable Entity Explained - KeyCDN Support](https://www.keycdn.com/support/422-unprocessable-entity)
|
||||
- TypeScript
|
||||
- Codecademy 的 TypeScript 教程很好，不过我建议了解基础的 TypeScript 概念再去学：[Learn TypeScript](https://www.codecademy.com/learn/learn-typescript)
|
||||
- 在刷完 Codecademy 的课之后，刷了这个练习，非常实用性的针对练习：[TypeScript Exercise](https://typescript-exercises.github.io/)
|
||||
- 一些 Cheatsheet
|
||||
- [Learn TypeScript: Type Narrowing Cheatsheet | Codecademy ](https://www.codecademy.com/learn/learn-typescript/modules/learn-typescript-type-narrowing/cheatsheet)
|
||||
- [TypeScript Cheat Sheet 📄 (32 Code Examples + PDF & Poster)](https://www.doabledanny.com/typescript-cheat-sheet)
|
||||
- [TypeScript Cheat Sheets](https://www.typescriptlang.org/cheatsheets)
|
||||
- [从 Lint 工具窥探前端的 clean-code](https://mp.weixin.qq.com/s/0VndF1TFxXiuuqQnz9Xswg)
|
||||
|
||||
> Prettier 的英文名也是「更漂亮的」。也就是说它只是美化 **代码样式** 并不会检查 **代码质量** 。这就是它与 ESLint 最大的区别。
|
||||
|
||||
- [clean-code-javascript](https://github.com/ryanmcdermott/clean-code-javascript)
|
||||
- 美团技术团队的文章都非常不错：[深入理解函数式编程（上） - 美团技术团队](https://tech.meituan.com/2022/10/13/dive-into-functional-programming-01.html)
|
||||
- 不同框架的组件写法，用来学习挺好的： [Component Party](https://component-party.dev/)
|
||||
- [您应该了解的 Node.js 19 新 watch 模式和其他功能 - Linux 迷](https://www.linuxmi.com/node-js-19-watch-mode.html)
|
||||
> Node.js 19 的一个显著特性是新的实验性 watch 模式。这使您无需重新启动即可对服务器进行更改。
|
||||
- [reset-button.css · GitHub](https://gist.github.com/MoOx/9137295)
|
||||
- [JavaScript For Cats](http://jsforcats.com/)
|
||||
- [前端主题切换方案详解](https://mp.weixin.qq.com/s/KMFarLh0Xjl-NYmkxFZRrg)
|
||||
- [开发人员为什么更喜欢 NeoVim 而不是 Vim - Linux 迷](https://www.linuxmi.com/neovim-vs-vim.html)
|
||||
- [动手写一个 Hugo 博客主题 | Yuanji's Blog](https://blog.gimo.me/posts/creating-a-hugo-theme/)
|
||||
- [Cyber](https://cyberscript.dev/)
|
||||
- [termpdf.py](https://github.com/dsanson/termpdf.py)
|
||||
> A graphical pdf and epub reader that works inside the kitty terminal
|
||||
|
||||
## 新的发现
|
||||
|
||||
- UnifiedPush
|
||||
> UnifiedPush is a set of specifications and tools that lets the user choose how push notifications\* are delivered. All in a free and open source way. [^1]
|
||||
- [ntfy.sh](https://ntfy.sh/)
|
||||
> Send push notifications to your phone or desktop via PUT/POST
|
||||
- [Hacker News: UnifiedPush: A decentralized, open-source push notification protocol (f-droid.org)](https://news.ycombinator.com/item?id=34094497)
|
||||
- nostr
|
||||
- [awesome-nostr](https://github.com/aljazceru/awesome-nostr)
|
||||
- [GitHub - nostr-protocol/nostr: a truly censorship-resistant alternative to Twitter that has a chance of working](https://github.com/nostr-protocol/nostr)
|
||||
- AI 生成视频
|
||||
- [Text-to-4D dynamic scene generation - Marginal REVOLUTION](https://marginalrevolution.com/marginalrevolution/2023/01/text-to-4d-dynamic-scene-generation.html)
|
||||
- [Text-To-4D Dynamic Scene Generation](https://make-a-video3d.github.io/)
|
||||
- [ALL-about-RSS](https://github.com/AboutRSS/ALL-about-RSS)
|
||||
- 头戴式 E ink 阅读器 ：[The Sol Reader Is An E-Reader Disguised As A Headset](https://screenrant.com/sol-reader-head-mounted-ereader/)
|
||||
|
||||
## Art / 像素画
|
||||
|
||||
- [带你领略马赛克之美，游戏像素画基本原理分析](https://mp.weixin.qq.com/s/2sgLpsflpj_ZYNZRg0TrDQ)
|
||||
- [saint11 像素宝典- 文集 哔哩哔哩专栏](https://www.bilibili.com/read/readlist/rl38114)
|
||||
- [Pixel Art Articles](https://saint11.org/pixel_articles/)
|
||||
- [Pixel perfect: the story of eBoy](https://www.theverge.com/2014/6/17/5803850/pixel-perfect-the-story-of-eboy)
|
||||
- [我知道的大佬们：像素画家郎](https://mp.weixin.qq.com/s/F81nF-QbYt0IX5lYmnjtPA)
|
||||
- [LDtk – 2D level editor](https://ldtk.io/)
|
||||
- [GitHub - giventofly/pixelit: Create pixel art from an image](https://github.com/giventofly/pixelit)
|
||||
|
||||
## linux / unix 相关
|
||||
|
||||
- [Linux Command Line Cheat Sheet by DaveChild](https://cheatography.com/davechild/cheat-sheets/linux-command-line/)
|
||||
|
||||
* [How to use the head command - by The Linux Information Project (LINFO)](http://www.linfo.org/head.html)
|
||||
* [Archive file - Wikipedia](https://en.wikipedia.org/wiki/Archive_file)
|
||||
* [Shell 脚本自动输入 - Person Sink](https://ignorantshr.github.io/person-blog/shell/shell%E8%84%9A%E6%9C%AC%E8%87%AA%E5%8A%A8%E8%BE%93%E5%85%A5/)
|
||||
* [关于 GNU/Linux 操作系统的 10 个神话 - Linux 迷](https://www.linuxmi.com/gnu-linux-myths.html)
|
||||
* [History of Unix - Wikipedia](https://en.wikipedia.org/wiki/History_of_Unix)
|
||||
* [AT&T Archives: The UNIX Operating System - YouTube](https://www.youtube.com/watch?v=tc4ROCJYbm0)
|
||||
|
||||
## Self Host
|
||||
|
||||
- 甚至可以 self-host Firefox account：[Run your own Firefox Accounts Server](https://mozilla-services.readthedocs.io/en/latest/howtos/run-fxa.html)
|
||||
- [Self Host Your Own Message Board Forum With Flarum](https://noted.lol/self-host-your-own-message-board-forum-with-flarum/)
|
||||
- [Self-hosting | Briefkasten Home](https://docs.briefkastenhq.com/docs/self-hosting.html)
|
||||
- [Duplicacy CLI 备份工具基本使用笔记](https://www.dejavu.moe/posts/duplicacy-cli-basic-guide/)
|
||||
|
||||
好了，什么东西都写了，那么 Nonsense Wander 5 写什么好呢？
|
||||
|
||||
[^1]: [unifiedpush.org](https://unifiedpush.org/)
|
||||
90
urara/2023-02-15-tools/+page.md
Normal file
90
urara/2023-02-15-tools/+page.md
Normal file
|
|
@ -0,0 +1,90 @@
|
|||
---
|
||||
title: 一些最近在用的App
|
||||
created: 2023-02-15
|
||||
summary: 好像每个博客都有这么一篇博文呢
|
||||
---
|
||||
|
||||
这篇主要写的我最近常用的一些 App，更详细的清单等下辈子吧，实在是装了太多的 App 啦
|
||||
|
||||
### 电脑
|
||||
|
||||
| **功能** | **App** |
|
||||
| ----------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| 操作系统 | macOS Ventura |
|
||||
| 浏览器 | [brave](https://brave.com/zh/), [Arc](https://arc.net/gift/588ed12e), [Firefox Developer Edition](https://www.mozilla.org/en-US/firefox/developer/) |
|
||||
| RSS | [Miniflux](https://miniflux.app/)(see also: [Miniflux · 保存文章到 Pocket 以及 RSS](https://sevic.me/2022-03-11-miniflux-to-pocket/) ), [Readwise Reader](https://read.readwise.io/) |
|
||||
| 书签/稍后读 | Readwise Reader, [Cubox](https://cubox.pro/), [Linkding](https://github.com/sissbruecker/linkding), [Airtable](https://airtable.com)( see also: [Airtable · 网页剪藏](https://sevic.me/2022-03-06-airtable/) , 浏览器自带 |
|
||||
| 笔记 | [Logseq](https://logseq.com/), [Obsidian](https://obsidian.md/), [Notion](https://www.notion.so/), [Craft](https://www.craft.do/)[^1], [Tot](https://tot.rocks/)[^2], [Airtable ](https://airtable.com)[^3], 备忘录 |
|
||||
| 阅读 | Zotero, Readwise Reader, Obsidian |
|
||||
| 社交 | [Pleroma](https://pleroma.social/), [Mastodon](https://mastodon.online/) |
|
||||
| 密码 | [bitwarden](https://bitwarden.com/), 浏览器自带 |
|
||||
| 网络 | Clash, ClashX Pro, [proxychains-ng](https://github.com/rofl0r/proxychains-ng) |
|
||||
| 图片收集 | [eagle](https://eagle.cool/) |
|
||||
| 邮箱 | Microsoft Outlook, Zoho Mail |
|
||||
| 输入法 | [鼠须管](https://rime.im/) & [雾凇拼音](https://dvel.me/posts/rime-ice/), [Input Source Pro](https://inputsource.pro/) |
|
||||
| 音乐 | Spotify & [LyricsX](https://github.com/ddddxxx/LyricsX) |
|
||||
| 词典 | 欧陆词典、系统自带词典 |
|
||||
| 网盘 | Onedrive, icloud |
|
||||
| 效率类 | [Forest](https://www.forestapp.cc/), [Habitica](https://habitica.com/), [Habitica Pomodoro SiteKeeper](https://chrome.google.com/webstore/detail/habitica-pomodoro-sitekee/iaanigfbldakklgdfcnbjonbehpbpecl), [Vision](https://apps.apple.com/cn/app/vision-%E4%B8%AA%E4%BA%BA-okr-%E7%9B%AE%E6%A0%87%E7%AE%A1%E7%90%86%E5%B7%A5%E5%85%B7/id1572457968),[ Eye Monitor](https://apps.apple.com/cn/app/eye-monitor-%E7%94%A8%E7%9C%BC%E7%9B%91%E6%8E%A7%E4%B8%8E%E7%96%B2%E5%8A%B3%E6%8F%90%E9%86%92/id1527031341) |
|
||||
| IM | [Matrix ](https://matrix.org/)& [Element](https://element.io/) |
|
||||
| 系统工具 | [Raycast](https://www.raycast.com/), [CheatSheet](https://www.mediaatelier.com/CheatSheet/), [Keyboard Maestro](https://www.keyboardmaestro.com/), [PopClip](https://pilotmoon.com/popclip/), [Hidden Bar](https://github.com/dwarvesf/hidden), [Rectangle](https://rectangleapp.com/) |
|
||||
| 文件相关 | [Localsend](https://localsend.org/), [Syncthing](https://github.com/syncthing/syncthing) |
|
||||
| 图片处理 | [Shottr](https://shottr.cc/), [PicGo](https://github.com/Molunerfinn/PicGo), |
|
||||
| Terminal | [Kitty](https://sw.kovidgoyal.net/kitty/) & [Oh-my-zsh](https://ohmyz.sh/) & [Fig](https://fig.io/) |
|
||||
| 代码编辑器 | [VS Code](https://code.visualstudio.com/), [Neovim](https://neovim.io/) & [nvimdots](https://github.com/ayamir/nvimdots), Vim |
|
||||
| API | [Postman](https://www.postman.com/) |
|
||||
| SSH | [Termius,](https://termius.com/) [Tabby](https://tabby.sh/) |
|
||||
| 搜索引擎 | [Whoogle](https://github.com/benbusby/whoogle-search), Google |
|
||||
| Git | [Codeberg](https://codeberg.org/), [Github](https://github.com/), [Forgejo](https://forgejo.org/) |
|
||||
|
||||
## 浏览器插件
|
||||
|
||||
| **功能** | **插件** |
|
||||
| -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
|
||||
| 学英语 | [Burning Vocabulary](https://burningvocabulary.com/)[^4], [沉浸式翻译](https://chrome.google.com/webstore/detail/immersive-translate/bpoadfkcbjbfhfodiogcnhhhpibjhbnh), [Language Reactor](https://www.languagereactor.com/) |
|
||||
| 搜索辅助 | [Miniflux-injector](https://github.com/Sevichecc/miniflux-injector), [linkding-injector](https://github.com/Fivefold/linkding-injector) |
|
||||
| 样式优化 | [Clearly Reader](https://clearlyreader.com/), [Dark Reader](https://darkreader.org/), [Stylus](https://stylus.com/)( [Mastodon-Modern](https://codeberg.org/Freeplay/Mastodon-Modern), [Neat](https://uso.kkx.one/style/241528) [Modern for Wikipedia](https://www.modernwiki.app/)) |
|
||||
| 笔记 | [Readwise Highlighter](https://chrome.google.com/webstore/detail/readwise-highlighter/jjhefcfhmnkfeepcpnilbbkaadhngkbi), [hypothes.is](https://hypothes.is) |
|
||||
| 隐私 | [uBlock Origin](https://chrome.google.com/webstore/detail/ublock-origin/cjpalhdlnbpafiamejdnhcphjbkeiagm), [Google Analytics（分析）停用扩展](https://chrome.google.com/webstore/detail/google-analytics-opt-out/fllaojicojecljbmefodhfapmkghcbnh?hl=zh-CN), [WebRTC Leak Shield](https://chrome.google.com/webstore/detail/webrtc-leak-shield/bppamachkoflopbagkdoflbgfjflfnfl), [Decentraleyes](https://decentraleyes.org/) |
|
||||
| 其他 | [SponsorBlock for YouTube](https://sponsor.ajay.app/) |
|
||||
| 脚本 | [Tampermonkey BETA](https://www.tampermonkey.net/): [RSS+](https://greasyfork.org/zh-CN/scripts/373252-rss-show-site-all-rss), [链接地址洗白白](https://script.izyx.xyz/clean-the-link/), [Open the F\*\*king URL Right Now](https://greasyfork.org/zh-CN/scripts/412612-open-the-f-king-url-right-now), [杀死“麦欧兔”](https://greasyfork.org/zh-CN/scripts/379391-%E6%9D%80%E6%AD%BB-%E9%BA%A6%E6%AC%A7%E5%85%94), [广告屏蔽 1](https://www.dadiyouhui02.cn/tampermonkey/baiduga.user.js), [CSDN 广告完全过滤](https://greasyfork.org/zh-CN/scripts/378351-%E6%8C%81%E7%BB%AD%E6%9B%B4%E6%96%B0-csdn%E5%B9%BF%E5%91%8A%E5%AE%8C%E5%85%A8%E8%BF%87%E6%BB%A4-%E4%BA%BA%E6%80%A7%E5%8C%96%E8%84%9A%E6%9C%AC%E4%BC%98%E5%8C%96-%E4%B8%8D%E7%94%A8%E5%86%8D%E7%99%BB%E5%BD%95%E4%BA%86-%E8%AE%A9%E4%BD%A0%E4%BD%93%E9%AA%8C%E4%BB%A4%E4%BA%BA%E6%83%8A%E5%96%9C%E7%9A%84%E5%B4%AD%E6%96%B0csdn), [redirect 外链跳转](https://greasyfork.org/zh-CN/scripts/416338-redirect-%E5%A4%96%E9%93%BE%E8%B7%B3%E8%BD%AC) |
|
||||
| 开发相关 | [Octotree - GitHub code tree](https://www.octotree.io/), [GitHub Hovercard](https://github.com/Justineo/github-hovercard) |
|
||||
|
||||
### 安卓手机
|
||||
|
||||
我不喜欢用手机，所以用得都不是很多，像支付宝、淘宝这些人均一个的就不说了
|
||||
|
||||
| 功能 | App |
|
||||
| -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| 社交 | [Fedilab](https://fedilab.app/), [Tooot](https://tooot.app/), [Moshidon](https://github.com/LucasGGamerM/moshidon), [Megalodon](https://github.com/sk22/megalodon), [Kaiteki,](https://kaiteki.app/) |
|
||||
| 密码 | bitwarden |
|
||||
| 浏览器 | [Fennec](https://f-droid.org/packages/org.mozilla.fennec_fdroid/), [Kiwi Browser](https://kiwibrowser.com/) |
|
||||
| 阅读 | Readwise Reader, 静读天下 Pro, 废文, 晋江, 长佩, |
|
||||
| RSS | Miniflux 网页版, Readwise Reader |
|
||||
| 效率 | Forest, [Yeolpumta](https://play.google.com/store/apps/details?id=com.pallo.passiontimerscoped), |
|
||||
| 书签 | 浏览器自带，发给 Matrix 账号, Cubox |
|
||||
| Git | [GitNex](https://gitnex.com/), Github |
|
||||
| 搜索 | [Setter](https://github.com/scubajeff/Setter)（可以直接搜微博、公众号的内容） |
|
||||
| 应用下载 | [Obtainium](https://github.com/ImranR98/Obtainium), [Driod-ify](https://github.com/Iamlooker/Droid-ify)( Goodbye [~~NeoStore~~](https://github.com/NeoApplications/Neo-Store)~~)~~ |
|
||||
| 视频 | 其实很少看视频，但是这些挺好用的：[AnimePipe](https://codeberg.org/NullPointerException/AnimePipe), [Seal](https://github.com/JunkFood02/Seal), [LibreTube](https://libre-tube.github.io/) |
|
||||
| 资讯 | 稀土掘金、[Hacki](https://github.com/Livinglist/Hacki) |
|
||||
| 文件 | Syncthing |
|
||||
| 图片 | [FIMO](https://fimo.app/), [Immich](https://immich.app/) |
|
||||
| IM | ~~微信~~, Element, [FluttyChat](https://fluffychat.im/) |
|
||||
| 系统工具 | [轻启动](https://wpengapp.com/lightstart)、[清浊](https://www.dircleaner.com/)、炼妖壶([Insular](https://secure-system.gitlab.io/Insular/))、[TrackerControl](https://trackercontrol.org/) [UrlChecker](https://github.com/TrianguloY/UrlChecker) |
|
||||
| 输入法 | Gboard |
|
||||
|
||||
最近还发现几个蛮有意思的 App，但是我用得不是很多：
|
||||
|
||||
- Reddit 的可替代前端 App：
|
||||
- [Stealth](https://gitlab.com/cosmosapps/stealth)
|
||||
- [RedReader](https://github.com/QuantumBadger/RedReader)
|
||||
- 把 URL 变成 markdown 格式：[Markdownr](https://github.com/sanzoghenzo/markdownr)
|
||||
- 图片大小修改：[Image Resizer](https://github.com/T8RIN/ImageResizer)
|
||||
|
||||
反正没事在 [Driod-ify](https://github.com/Iamlooker/Droid-ify) 瞎逛，总能发现有意思的。
|
||||
|
||||
[^1]: 写博文为主
|
||||
[^2]: 随手记
|
||||
[^3]: 记录书单、影单
|
||||
[^4]: 如果有需要 Pro 的话，可以用我的邀请码 HM1qZw，我们都可以增加 6 个月 Pro 时长）
|
||||
108
urara/2023-04-29-readings/+page.md
Normal file
108
urara/2023-04-29-readings/+page.md
Normal file
|
|
@ -0,0 +1,108 @@
|
|||
---
|
||||
title: 我在看什么 · 2-4月
|
||||
created: 2023-05-08
|
||||
summary: 前端测试 / AI / 媒介
|
||||
tags:
|
||||
- 我在看什么
|
||||
image: /2023-04-29-readings/cover.jpg
|
||||
---
|
||||
|
||||
很久没更新这个系列了，因为博客构建时 Out of Memory 的问题，一直懒得去写什么，加上现在 AI 好像什么都会了，感觉写什么都没什么意义，「我想做的前人都做过了」，是这样的感觉。
|
||||
|
||||
这几个月没有看什么特别的东西，当然没有做什么特别的记录，之前每看一篇就要在 Fediverse 上记录，但是这样会打断思绪，也很容易沉浸到另一个语境中，感觉很低效，所以就没记录，然后下面的梳理来自 Readwise Reader 和 Cubox。
|
||||
|
||||
## 前端
|
||||
|
||||
- [Controlled and uncontrolled form inputs in React don't have to be complicated](https://goshacmd.com/controlled-vs-uncontrolled-inputs-react/)
|
||||
- [Why It's So Hard to Check Object Equality in JavaScript](https://www.joshbritz.co/posts/why-its-so-hard-to-check-object-equality/)
|
||||
> the main reason this happens is that (`===`) doesn’t check that both objects have the same property keys and values. Instead, it checks that the two objects occupy the same place in memory.
|
||||
- [What Is Serverless](https://www.youtube.com/watch?v=vxJobGtqKVM)
|
||||
- [Serverless Functions Overview](https://vercel.com/docs/concepts/functions/serverless-functions)
|
||||
- [前端测试体系和最佳实践](https://insights.thoughtworks.cn/frontend-testing/)
|
||||
- [用 GPT 从 0 搭建 Jest 到帮写测试用例](https://mp.weixin.qq.com/s/VjPb1bFy50njX_4QsfrREA)
|
||||
- [End-to-End Testing With Playwright and Github Actions](https://www.builder.io/blog/end-to-end-testing-with-playwright-and-github-actions)
|
||||
- [信息溯源：“前端已死”的论调是如何传播的？](https://mp.weixin.qq.com/s/yHIVEMPCc4YeQcM6WPtn8w)
|
||||
- [The End of Front-End Development](https://www.joshwcomeau.com/blog/the-end-of-frontend-development/)
|
||||
- [Let's Build a Chrome Extension That Steals Everything](https://mattfrisbie.substack.com/p/spy-chrome-extension)
|
||||
- [纯函数和引用透明概念](https://caowenwei.github.io/%E5%87%BD%E6%95%B0%E5%BC%8F%E7%BC%96%E7%A8%8B/pure-function-rt/)
|
||||
> 简单的说，任意函数，或者任意代码段，如果它可以被它的计算结果直接替代，仍然不影响任何调用它的程序，那么这个函数或代码段就拥有引用透明的性质
|
||||
- [Safari releases are development hell](https://www.construct.net/en/blogs/ashleys-blog-2/safari-releases-development-1616)
|
||||
> Of course we had no idea that Safari wasn't due for release the next day. Some Apple employees tried to drop hints about a schedule they obviously weren't allowed to talk about, but couldn't manage anything much more specific than "soon". So we were forced to treat it as an emergency and act immediately.
|
||||
- [JSONP demystified: What it is and why it exists - LogRocket Blog](https://blog.logrocket.com/jsonp-demystified-what-it-is-and-why-it-exists/)
|
||||
- [Case Study - Analyzing Web Font Performance](https://www.keycdn.com/blog/web-font-performance)
|
||||
- [Learn JavaScript Generators In 12 Minutes](https://www.youtube.com/watch?v=IJ6EgdiI_wU)
|
||||
- [一行代码都不写，用 Cloudflare 轻松做网站](https://orangeai.substack.com/p/cloudflare)
|
||||
|
||||
## AI
|
||||
|
||||
- [Sam Altman，以及他的 AGI 烏托邦](https://shosho.tw/blog/sam-altman-agi-utopia/)
|
||||
- [Moore's Law for Everything](https://moores.samaltman.com/)
|
||||
> AI will lower the cost of goods and services, because labor is the driving cost at many levels of the supply chain.
|
||||
- [GPT 4 and the Uncharted Territories of Language](https://www.fast.ai/posts/2023-03-20-wittgenstein.html)
|
||||
> Perhaps it is only in grappling with the uncanny valley of language that we may find the strength to redefine our own linguistic boundaries and catch a fleeting glimpse of the world beyond the walls.
|
||||
- [智能对话时代来临：GUI 正在向 CUI 演变](https://mp.weixin.qq.com/s/cLz6rcVlrwyys5yorItnTg)
|
||||
- [一张估值 20 亿的“笑脸”，正在拆掉 OpenAI 的围墙](https://mp.weixin.qq.com/s/uaIljNnF_TJjOnIzn6o5cw)
|
||||
|
||||
## 观点
|
||||
|
||||
- [以行动为中心的解释性媒介](https://mp.weixin.qq.com/s/z854s3E0tnVqVjTH9pKwpg)
|
||||
|
||||
> 解释性文字可能缺乏个性化和人际联系，但它可以更仔细地打磨；它不累，随时准备好；它可以嵌入图形和抽象符号；它可以被非线性地消耗；阅读它的速度比听言语要快；等等。也许最重要的是，它是一种大众媒介。
|
||||
|
||||
> 视频游戏在这方面就很出色。有时教程会出现在非互动性过场动画中，与普通游戏截然不同，但更好的例子将指导和叙述呈现为互动环境中的无缝元素，而不会将镜头或控制权从玩家手中 “抢走”。其结果是在游戏环境中的丰富沉浸感 ——与棋盘游戏的指导手册形成鲜明的对比
|
||||
|
||||
> 在优秀的游戏中，叙事感觉像是对玩家行动的持续响应。这就打破了人们在阅读文本时与 “行动”分离的距离感。
|
||||
|
||||
> 复制/粘贴文档中的说明性文本没有行为和反应。对于使用者来说，这不是一个真正的动态媒介。
|
||||
|
||||
- 原文：[Doing-centric explanatory mediums: board game instruction manuals and an unusual Figma document](https://andymatuschak.org/doing-centric/)
|
||||
|
||||
- [How Developers Can Make money with Open Source Projects](https://rubygarage.org/blog/how-make-money-with-open-source-projects)
|
||||
- [You have two jobs](https://jacobian.org/2017/nov/1/you-have-two-jobs/)
|
||||
|
||||
> You were hired to write code. Many developers make the mistake and think that their job stops there. That’s not true. In fact, you have two jobs:
|
||||
>
|
||||
> 1. Write good code.
|
||||
> 2. Be easy to work with.
|
||||
|
||||
> “Easy to work with” means that you act professionally at all times. You disagree respectfully. You seek to understand before looking to be understood. You communicate clearly. You value your commitments
|
||||
|
||||
> Mostly, it means that you understand the value of relationships, and build them as carefully and intentionally as you build frameworks and libraries.
|
||||
|
||||
- [You Can Achieve Anything If You Focus On ONE Thing](https://dariusforoux.com/one-thing/)
|
||||
- [Should we call them users? ](https://shapeofsoftware.com/should-we-call-them-users/?ref=shape-of-software-newsletter)
|
||||
|
||||
> Describing those people in a more nuanced and relatable way resulted in a positive shift in thinking across teams.
|
||||
|
||||
> So with all that in mind, the term "user" has feels even more odd to me now. I feel it strips the human from everybody. When seeing points on a graph and entries in a database it's easy to forget that these people are people at all.
|
||||
|
||||
> A company, team or designer should always push to be closer to the people powering their products and the language that is used sets a strong foundation for that. Every product is different, so ask yourself who you are building for.
|
||||
|
||||
- [你所嘗試的一切終究是徒勞 - Northern Wind](https://www.chunfuchao.com/posts/everything-you-do-is-ultimately-pointless/)
|
||||
> 期待技術能解決人生問題就像期待考試考好能過上好人生一樣，最後只是緣木求魚。
|
||||
|
||||
## 设计
|
||||
|
||||
- [交互动效设计指南｜深入浅出带你了解交互动效](https://mp.weixin.qq.com/s/G5XoQtzDcHF31TWuPgkjfA)
|
||||
- [Can You Be a Designer if You Have No Training?](https://henry.codes/writing/can-you-be-a-designer-if-you-have-no-training/)
|
||||
|
||||
## 书籍
|
||||
|
||||
没一本看完的
|
||||
|
||||
> 那些以大写字母 A 开头的“艺术”（Art）似乎具有某种被称为“灵韵”（aura）的精神性，被人们高高地供奉起来，放进了博物馆。大写字母开头的“艺术”（Art），与小写字母开头的“艺术”（art），即一些大众艺术区分了开来。这种区分是现代社会发展的结果。高雅艺术与通俗艺术区分之后，有教养者将自己的欣赏范围局限于前者，而人民大众则既由于缺乏财力、时间和教育水平，又由于觉得它苍白无力而去“寻找便宜而粗俗的物品”。 由此，造成了高雅艺术与通俗艺术的分野。这种分化对艺术的发展来说，是具有灾难性的，前者失去了大众，后者则失去了品味
|
||||
>
|
||||
> ——《艺术即经验》译者前言
|
||||
|
||||
> 当我们询问，绘画和音乐所表现的是什么意义时，我们是在要求一种从图像和声音的意义向语词意义的转换，而这本身就否定了图像和声音的意义的独特性。因此，艺术家是用形象来构思他们的作品的，这种形象同时也与艺术所使用的媒介，即实际的材料结合在一起。因此，这种思维，既是图像的思维，也是材料的思维。
|
||||
>
|
||||
> ——《艺术即经验》译者前言
|
||||
|
||||
> 批评可能很危险，主要是因为你批评的人常常觉得受到非难，无论你多么善解人意地发表评论，他都可能会以相同的方式反击。因为你伤害了他“宝贵的自尊”，他可能会觉得你是故意伤害他的，然后他也会试图伤害你。这种反击源于我称之为“错误的归因原则”的一种心理倾向——“我感到痛苦，因此我有这种感觉肯定是某个人的错”。
|
||||
>
|
||||
> ——《自恋也疯狂：面具下的极端自恋者》 约瑟夫·布尔戈(Joseph Burgo)
|
||||
|
||||
上个星期在看的：
|
||||
|
||||
- 《Javascript 设计模式与开发实践》
|
||||
- 《你不知道的 Javascript（上）》
|
||||
92
urara/2023-04-29-recent/+page.md
Normal file
92
urara/2023-04-29-recent/+page.md
Normal file
|
|
@ -0,0 +1,92 @@
|
|||
---
|
||||
title: 最近在做的东西
|
||||
created: 2023-04-29
|
||||
summary: Raycast插件 / 鼠须管主题 / Akkoma 和 Forgejo备份脚本 / Shiraha
|
||||
image: /2023-04-29-recent/certificate-fullstack.png
|
||||
---
|
||||
|
||||
## Full Stack Open
|
||||
|
||||
为了学习 React，我最近在学 [Full Stack Open](https://fullstackopen.com/)，其实去年刚学完 JS 的时候有试着学，但是当时觉得很吃力，因为很多知识点教程里并不会深入去讲解，只是提到了就给一个链接，让人自己去看，这样跳来跳去学的话，感觉还蛮累的，半天都还不能看完一 Part，看起来完全没进展，所以我就没有学下去。
|
||||
|
||||
不过经过了一段时间的修炼，积累了一些各方面的知识之后，我又开始了，这次感觉轻松不少。
|
||||
|
||||
这个课一共有 14 个 Part，0-7 是 React 和一些 Node 相关的内容，后面还有 GraphQL、TypeScript、Docker 之类的主题，我目前是完成了前面部分的内容，后面的内容则想等需要的时候再去学。不过就算只完成了部分，也有相应的证书，好了，下面是我的课程作业表（时间不准确），证书已经摆在最前面了：
|
||||
|
||||
|
||||
|
||||
说一下感悟吧。
|
||||
|
||||
我觉得 Full Stack Open 不太适合零基础入门，如果之前没有学过框架或者类似的东西，直接通过 Full Stack Open 学习的话，还是蛮难上手的，教的内容都比较浅，我之前 Node、MongoDB、Vue 之类的都有学过，所以这次感觉还算轻松。
|
||||
|
||||
其次，Full Stack Open 教的内容有些过时了，就像 Kwaa 说的，或许应该一开始就上 TypeScript。以及比起英文版，中文翻译是更为过时的版本，建议不要看中文版，可以浏览器开翻译插件看英文版，前面两 Part 中文版翻译还可以，但是后面不仅内容过时，排版也很错乱，Promise 翻译成「承诺」也让人很难理解。
|
||||
|
||||
不过，我很喜欢 Full Stack Open 的教学方式，文章+练习，文章里面用例子 A 来讲述原理和操作，而练习里面则用和 A 非常相似的项目来做练习，这样能避免直接抄代码，练习也是循序渐进的，一步一步完成，让人压力没这么大。
|
||||
|
||||
## Raycast 插件开发
|
||||
|
||||
|
||||
|
||||
**事情的发展**
|
||||
|
||||
为了练习 React， 我开始写 Raycast 的 Miniflux 插件：[Miniflux](https://www.raycast.com/SevicheCC/miniflux) ，后面写着写着发现不太会处理缓存，于是又跑去写 [Akkoma 插件](https://www.raycast.com/SevicheCC/akkoma) ，想着这是个只能发帖文的插件，功能简单，实现起来应该也很简单吧，乱七八糟地写了一通，终于懂 Raycast 是怎么缓存的了，在这两个插件上架后又开始在 Akkoma 的基础上做 Mastodon 的插件，但是改之前忘记搜下看有没有人在做了，于是现在暂时搁置了：[Add Mastodon extension](https://github.com/raycast/extensions/pull/6156) , 可能过几天会开始合之前别人的代码、加功能。
|
||||
|
||||
以及最近发现在 Miniflux 前端搜索内容的时候，条目内容总比通过调用 API 搜出来的结果少，不知道为什么。
|
||||
|
||||
**难点和不解**
|
||||
|
||||
写 Raycast 插件，一开始最让我不解的是：什么 Command 和什么组件对应？后面发现 Command 名是和组件名绑定的，需要在 `package.json` 里面指定，如图所示：
|
||||
|
||||
|
||||
|
||||
- 某次 Publish 的时候，把我的本地代码全删了，详见：[Local codebase deleted after running npm run publish](https://github.com/raycast/extensions/issues/6086)
|
||||
- 不用 masto.js 也可以实现授权和认证（这玩意对 Mastodon 以外的系列不太友好，试了几次都没成功），我最后是参考官方给的例子实现的
|
||||
- 开发的时候可以用 pnpm ，但是 Publish 的时候要用 npm（会检查里面有没有 package-lock.json)
|
||||
|
||||
**所以到底写了什么插件**
|
||||
|
||||
- Akkoma：发送定时帖文、用 Markdown 写帖文、查看书签和自己的最近 20 条贴文、草稿功能……
|
||||
- Miniflux：搜索内容、增加订阅源、收藏内容到 Readwise Reader……
|
||||
- Mastodon：功能和 Akkoma 的一样，之后还会加功能
|
||||
|
||||
看起来非常实用，但写完之后我基本没怎么用过（笑）
|
||||
|
||||
**推荐的参考**
|
||||
|
||||
- [Create Your First Extension - Raycast API](https://developers.raycast.com/basics/create-your-first-extension)
|
||||
- [Raycast 插件简明体验](https://zsakvo.notion.site/Raycast-b4998b2deca348f5b9192af2838e074f)
|
||||
|
||||
如果你也想写 Raycast 插件但是不知道写什么的话，我有一个想法，或许可以用这个 API 写写看：[Geniu](https://docs.genius.com) ，这是一个歌词信息的平台，我想这有很多可以实现的。
|
||||
|
||||
## 乱七八糟的东西
|
||||
|
||||
### 鼠须管主题
|
||||
|
||||
|
||||
|
||||
一个 Nord 配色的鼠须管主题：[nord-light](https://gist.github.com/Sevichecc/ae49279fbc12b633697e05fd832559e9)
|
||||
|
||||
作为一个血管里都流着 Nord 色血液的人，我前段时间还想写个 [NetNewsWire](https://netnewswire.com/) 的 Nord 主题，但前几天发现这玩意竟然有一个多 G，想着「好嘛这不就省事了」，就把它卸载了，故事就暂时到这里了。
|
||||
|
||||
参考：[微信键盘配色鼠须管皮肤](https://gist.github.com/zsakvo/fff6e4859265d5d629439d5ccb553f8a)
|
||||
|
||||
### Forgejo 和 Pleroma 备份脚本
|
||||
|
||||
前段时间从 Pleroma 搬到 Akkoma 了，感想：好 卡 啊！然后把 Pleroma 备份脚本修理了一下：
|
||||
|
||||
- [pleroma-backup-script](https://github.com/Sevichecc/pleroma-backup-script)
|
||||
- [forgejo-backup-script](https://codeberg.org/Sevichecc/forgejo-backup-script)
|
||||
|
||||
本来是写了一个 service 定时备份这两个的，不知怎的，使徒袭来，没有工作起来，于是现在在手动 bash 了，或许过段时间修理一下。以及我觉得是 crontab 的权限我没设置好，所以 Music Bot 和定时备份都没生效。
|
||||
|
||||
## PR 和 Commit
|
||||
|
||||
- 修了 [Mangane](https://github.com/BDX-town/Mangane)的几个 Bug
|
||||
- 为 [shiraha](https://shiraha.js.org/)写了几个样式 Material Design 3 的样式
|
||||
- 为博客加了 Remark42 评论插件
|
||||
|
||||
## 后续开源相关计划
|
||||
|
||||
- 完成 Airbnb Clone 项目
|
||||
- shiraha 继续补充样式
|
||||
- 修 Mangane 的 bug
|
||||
123
urara/2023-05-18-cs291/+page.md
Normal file
123
urara/2023-05-18-cs291/+page.md
Normal file
|
|
@ -0,0 +1,123 @@
|
|||
---
|
||||
title: 计算机图形学初体验——CS291
|
||||
created: 2023-05-18
|
||||
summary: 新奇、迷惑、混乱、解脱、期待
|
||||
tags:
|
||||
- Web3D
|
||||
- three.js
|
||||
- 计算机图形学
|
||||
---
|
||||
|
||||
前前后后花了大概五天的时间，一天看2～3个小时不等，终于把这个 [Interactive 3D Graphics - CS291](https://www.udacity.com/course/interactive-3d-graphics--cs291)的课看完了。因为线上练习不太方便，所以基本上没有做 coding 练习，只是做了简单的 quiz。
|
||||
|
||||
## 课程笔记
|
||||
[CS291](https://x.sevic.me/#/page/cs291)
|
||||
|
||||
不太全面的随堂笔记，基本上如果是我觉得已经完全理解的、不重要的就不会记录。
|
||||
|
||||
## 课程评价
|
||||
|
||||
### 优点：
|
||||
- 课程内容很丰富，从原理到实践都有涵盖，大概内容详见我的笔记
|
||||
- 附带课程讲稿，方便回顾（结合[翻译插件](https://immersive-translate.owenyoung.com/)看起来很方便）
|
||||
- 单节课时长很短，1～5分钟左右，看起来不那么累
|
||||
- 丰富的 Quiz 和 Question set，学练结合
|
||||
- 老师很幽默，没有口音问题，听起来很清晰
|
||||
- 有 Udacity GPT，遇到问题的时候很方便
|
||||
- 有字幕
|
||||
|
||||
### 缺点：
|
||||
|
||||
基本上是和年代久远相关的问题：
|
||||
- 年代久远，部分内容过时
|
||||
- 附带资料链接很多都失效了
|
||||
- 线上 coding preview 全部失效
|
||||
- shader 没有深入讲
|
||||
- 讲解的 three.js 有点过时了
|
||||
|
||||
|
||||
## 后续学习
|
||||
### Three.js
|
||||
- [three.js forum](https://discourse.threejs.org/)
|
||||
- [Latest Showcase topics - three.js forum](https://discourse.threejs.org/c/showcase/7)
|
||||
- [Discord](https://discord.com/invite/jYMz4sX)
|
||||
- [Highest scored 'three.js' questions - Stack Overflow](https://stackoverflow.com/questions/tagged/three.js?sort=votes)
|
||||
- [Three.js - 3D JavaScript Library](https://www.reddit.com/r/threejs)
|
||||
- [Discover three.js!](https://discoverthreejs.com/)
|
||||
- [8 Best Three.js Courses to Take in 2023 — Class Central](https://www.classcentral.com/report/best-three-js-courses/)
|
||||
|
||||
### Shaders
|
||||
- [Pixel Shaders: An Interactive Introduction to Graphics Programming](http://pixelshaders.com/)
|
||||
- [Shader Tutorials by Ronja | Ronja's tutorials](https://www.ronja-tutorials.com/)
|
||||
- （过时，无法运行）[GitHub - stackgl/shader-school](https://github.com/stackgl/shader-school)
|
||||
### WebGL
|
||||
- [WebGL/three.js Resources](https://www.realtimerendering.com/webgl.html)
|
||||
- [WebGL Overview - The Khronos Group Inc](https://www.khronos.org/webgl/)
|
||||
- [WebGL - Web Graphics Library](https://www.reddit.com/r/webgl/)
|
||||
- [Learn WebGL — LearnWebGL](https://learnwebgl.brown37.net/)
|
||||
|
||||
### openGL
|
||||
- [opengl-tutorial](https://www.opengl-tutorial.org/cn/)
|
||||
- [LearnOpenGL-CN](https://learnopengl-cn.readthedocs.io/zh/latest/)
|
||||
- new: [LearnOpenGL](https://learnopengl-cn.github.io/intro/)
|
||||
|
||||
### 线性代数
|
||||
- [【官方双语/合集】线性代数的本质 - 系列合集_哔哩哔哩_bilibili](https://www.bilibili.com/video/BV1ys411472E)
|
||||
- [An Intuitive Guide to Linear Algebra – BetterExplained](https://betterexplained.com/articles/linear-algebra-guide/)
|
||||
- [Home - Solutions to Linear Algebra Done Right](https://linearalgebras.com/)
|
||||
- [Linear Algebra](https://math.berkeley.edu/~ribet/110/)
|
||||
- [Math 115A](https://www.math.ucla.edu/~tao/resource/general/115a.3.02f/)
|
||||
- [Linear Algebra Done Right](https://linear.axler.net/)
|
||||
- 《线性代数应该这样学》
|
||||
- MIT的线代课
|
||||
|
||||
|
||||
### 其他
|
||||
- youtuber： [Freya Holmér](https://www.youtube.com/@Acegikmo/videos)
|
||||
- [Shader Basics, Blending & Textures • Shaders for Game Devs [Part 1]](https://www.youtube.com/watch?v=kfM-yu0iQBk)
|
||||
- [Vectors & Dot Product • Math for Game Devs [Part 1]](https://www.youtube.com/watch?v=MOYiVLEnhrw)
|
||||
- Bilibili- [GAMES101-现代计算机图形学入门-闫令琪](https://www.bilibili.com/video/BV1X7411F744/)
|
||||
|
||||
## WebGPU
|
||||
|
||||
Chrome 113 中将支持 WebGPU ，即可以通过 Web 端直接调用底层GPU相关API。
|
||||
|
||||
打开 WebGPU 支持：`chrome://flags/#enable-unsafe-webgpu`
|
||||
|
||||
以及发现一个有意思的项目：[Orillusion - 次时代 WebGPU 引擎](https://www.orillusion.com/)
|
||||
|
||||
一篇 WebGPU 介绍文章：[I want to talk about WebGPU](https://cohost.org/mcc/post/1406157-i-want-to-talk-about-webgpu)
|
||||
|
||||
|
||||
## 不重要的细节
|
||||
|
||||
### 起承转折
|
||||
这个课的入口比较隐蔽，在 Udacity 官网中不太好找，我一开始是从博客 [Northern Wind](https://www.chunfuchao.com) 中的 [这个页面](https://www.chunfuchao.com/cs291/) 看到的，放到收藏夹中有些日子了，一时兴起就翻起来看了。
|
||||
|
||||
前面看得很精神，到数学部分开始犯难，于是花了大概1个小时左右到B站复习了线性代数，看的是这个课程：[线性代数的本质](https://www.bilibili.com/video/BV1ys411472E)，看到点积就没有继续看下去了，还看了一些其他的线代资料，有的说可以理解成： *Linear algebra gives you mini-spreadsheets for your math equations.*[^1], 但还是觉得《线性代数的本质》这个课的几何描述更容易理解。我所理解的Matrix描述的是一种变换，二维或者三维，任何变换都可以看成是基向量的倍数级变化，点积的结果是一个角度，而叉积的结果是一个向量。
|
||||
|
||||
说起来大学的时候因为转专业学过两次线性代数，一次线性代数A、一次线性代数B，两者学分和难度不同。具体的分数记不清了，只记得考过了，是个不算太差的成绩，之前没有花太多时间去学，因为当时课程冲突，上线代的同时有另一个要上的课，只能选其一，所以课只听了一半，大概就用了几天的时间复习，所以现在也忘光了。
|
||||
|
||||
说回 CS291，课上很多内容之前学建模的时候都接触过，看到后面就开始本能犯困了，于是开始定番茄钟来定量摄入，结果就是终于看完了！很好的课，下次不看了。
|
||||
|
||||
### 做笔记
|
||||
|
||||
虽然我用 Obsidian 记录，但却借由 Logseq 发布，并不是故意写成大纲格式以方便 Logseq ，而是懒得写###定title，缩进也能更直观地看到层级关系，不用 Logseq 只是因为觉得不顺手。
|
||||
|
||||
顺带一提，最近 Obsidian 插件 [Outliner](https://github.com/vslinko/obsidian-outliner) 支持拖拽 Outliner 节点了
|
||||
|
||||
### 写码进度
|
||||
|
||||
为了学习 Next.js 而做的练习项目已经做完了：[Airbnb-Clone](https://github.com/Sevichecc/Airbnb-Clone/)，感觉 React 生态好成熟，好多组件都不用自己写，拿来用就完了，Prisma 也很好用，可以直接从数据中获取类型定义，不过下次我想试试结合 PostgreSQL。
|
||||
|
||||
Next.js 的 Server Component 有些难懂，我的初步理解是它是为一种只在服务器(server)运行的代码，而在需要操作 dom 和需要使用 hook 的代码则需要设置为Client Component。感觉 Next.js 模糊了前后端的界限，是好是坏呢？我不知道，但是感觉用起来挺顺手的。
|
||||
|
||||
相关阅读：[Grok React Server Component by Quizzes](https://betterprogramming.pub/grok-react-server-component-by-quizzes-df4417905bc4)
|
||||
|
||||
其他进度：
|
||||
- 更新了 Raycast-Akkoma/Miniflux 中 Raycast API 的版本，并修剪了部分代码
|
||||
- 修改一个了 Mangane 的 [Bug](https://github.com/BDX-town/Mangane/pull/214)，但他们好像在开发一个新的客户端，或许之后会废弃 Mangane，所以我决定暂时不做其他修改
|
||||
- 在做 shiraha 中的 dialog 插件，现在有了原生的 `<dialog>` element之后做 Modal 会比较方便
|
||||
|
||||
|
||||
[^1]: [An Intuitive Guide to Linear Algebra – BetterExplained](https://betterexplained.com/articles/linear-algebra-guide/)
|
||||
146
urara/2023-08-27-reading2/+page.md
Normal file
146
urara/2023-08-27-reading2/+page.md
Normal file
|
|
@ -0,0 +1,146 @@
|
|||
---
|
||||
title: 我在看什么 · 5-8月
|
||||
created: 2023-08-27
|
||||
summary: 数据库 / The Power of Free Time / recycling symbol
|
||||
tags:
|
||||
- 我在看什么
|
||||
---
|
||||
好久不见。
|
||||
|
||||
## CS
|
||||
|
||||
- [Using HTML elements as CSS masks | Artur Bień](https://expensive.toys/blog/black-pixel-masking)
|
||||
- [Python As Fast as Possible - Learn Python in ~75 Minutes](https://www.youtube.com/watch?v=VchuKL44s6E)
|
||||
- [The new CSS pseudo-classes explained - :is() :where() :has()](https://www.youtube.com/watch?v=3ncFpP8GP4g)
|
||||
- [:has() opens up new possibilities with CSS](https://www.youtube.com/watch?v=OGJvhpoE8b4)
|
||||
- [Modern CSS in Real Life - Chris Coyier](https://chriscoyier.net/2023/06/06/modern-css-in-real-life/)
|
||||
- 非常好的一篇文章，在这篇文章里介绍了很多比较新的 CSS 特性
|
||||
- [A Firefox-only minimap | Stefan Judis Web Development](https://www.stefanjudis.com/a-firefox-only-minimap/)
|
||||
- [The Difference Between Web Sockets, Web Workers, and Service Workers | CSS-Tricks - CSS-Tricks](https://css-tricks.com/the-difference-between-web-sockets-web-workers-and-service-workers/)
|
||||
- Web Sockets
|
||||
- [Introducing WebSockets – Bringing Sockets to the Web](https://web.dev/websockets-basics/) (web.dev)
|
||||
- [Thinking About Power Usage and Websites](https://css-tricks.com/thinking-about-power-usage-and-websites/) (Chris Coyier)
|
||||
- Web Workers:
|
||||
- [Intro to Web Workers](https://zapier.com/engineering/intro-to-web-workers/) (Zapier)
|
||||
- [使用 Web Workers - Web API 接口参考 | MDN](https://developer.mozilla.org/zh-CN/docs/Web/API/Web_Workers_API/Using_web_workers)
|
||||
- Service Workers:
|
||||
- [Add a Service Worker to Your Site](https://css-tricks.com/add-a-service-worker-to-your-site/) (Chris Ferdinadi)
|
||||
- [Smaller HTML Payloads with Service Workers](https://philipwalton.com/articles/smaller-html-payloads-with-service-workers/) (Philip Walton)
|
||||
- [使用 Service Worker - Web API 接口参考 | MDN](https://developer.mozilla.org/zh-CN/docs/Web/API/Service_Worker_API/Using_Service_Workers)
|
||||
- [Why Learn Compilers (2021) | Hacker News](https://news.ycombinator.com/item?id=36102865)
|
||||
- [ES2023 introduces new array copying methods to JavaScript | Sonar](https://www.sonarsource.com/blog/es2023-new-array-copying-methods-javascript/)
|
||||
- [Do Logical Properties Make CSS Easier to Learn? - Chris Coyier](https://chriscoyier.net/2023/05/02/do-logical-properties-make-css-easier-to-learn/)
|
||||
- [JavaScript’s Backtick Strings are Likely the Wrong Tool for Your Job](https://spin.atomicobject.com/2023/06/05/javascript-backtick-strings-wrong/)
|
||||
- [SICP in Emacs](https://kchousos.github.io/posts/sicp-in-emacs/)
|
||||
- [The large, small, and dynamic viewport units](https://web.dev/viewport-units/)
|
||||
- [Working with UUID in Node](https://masteringjs.io/tutorials/node/uuid)
|
||||
- 在Node.v14.17中，可以通过 `crypto.randomUUID()` 来生成UUID
|
||||
- [Most Senior React Devs Don’t Know How To Fix This](https://www.youtube.com/watch?v=vXJkeZf-4-4)
|
||||
- [WebGL-WebGPU-frameworks-libraries](https://gist.github.com/dmnsgn/76878ba6903cf15789b712464875cfdc)
|
||||
- [【译】Shader艺术编码入门介绍(An introduction to Shader Art Coding) - Bilibili](https://www.bilibili.com/video/BV1DM4y1n7eB/)
|
||||
- 原视频： [An introduction to Shader Art Coding - YouTube](https://www.youtube.com/watch?v=f4s1h2YETNY)
|
||||
- 不算好的入门视频
|
||||
- [【网络】半小时看懂「计算机网络」 哔哩哔哩\_bilibili](https://www.bilibili.com/video/BV124411k7uV/)
|
||||
- SourceMap相关
|
||||
- [What are source maps? - YouTube](https://www.youtube.com/watch?v=FIYkjjFYvoI)
|
||||
- [【第876期】Source Map入门教程](https://mp.weixin.qq.com/s/spuUk-X231ZJpqzVQHHHrw)
|
||||
- [【第3020期】解读SourceMap](https://mp.weixin.qq.com/s/1AgxyTGj2gnhblQa2KAFSA)
|
||||
- 数据库相关比较
|
||||
- [SQLite vs MySQL vs PostgreSQL A Comparison Of Relational Database Management Systems](https://www.digitalocean.com/community/tutorials/sqlite-vs-mysql-vs-postgresql-a-comparison-of-relational-database-management-systems)
|
||||
- [PostgreSQL vs SQLite Comparing Two Popular Databases](https://www.beekeeperstudio.io/blog/postgresql-vs-sqlite)
|
||||
- [How To Manage an SQL Database | DigitalOcean](https://www.digitalocean.com/community/tutorials/how-to-manage-sql-database-cheat-sheet)
|
||||
- [A Comparison of NoSQL Database Management Systems and Models](https://www.digitalocean.com/community/tutorials/a-comparison-of-nosql-database-management-systems-and-models)
|
||||
- Vector Database 相关
|
||||
- [Vector databases are so hot right now. WTF are they? - YouTube](https://www.youtube.com/watch?v=klTvEwg3oJ4)
|
||||
- [Vector Databases simply explained! (Embeddings & Indexes) - YouTube](https://www.youtube.com/watch?v=dN0lsF2cvm4)
|
||||
- [你真的需要一个（专门的）向量数据库么 | 高策](http://gaocegege.com/Blog/vector)
|
||||
- [What is an embedding, anyways? - by Richard Demsyn-Jones](https://simplicityissota.substack.com/p/what-is-an-embedding-anyways)
|
||||
- [Enhancing ChatGPT With Infinite External Memory Using Vector Database and ChatGPT Retrieval Plugin | by Ruolin | Better Programming](https://betterprogramming.pub/enhancing-chatgpt-with-infinite-external-memory-using-vector-database-and-chatgpt-retrieval-plugin-b6f4ea16ab8)
|
||||
- [We need to talk about Prisma](https://www.youtube.com/watch?v=J2j1XwZRi30)
|
||||
- [菲利普·罗伯茨：到底什么是Event Loop呢？ | 欧洲 JSConf 2014](https://www.youtube.com/watch?v=8aGhZQkoFbQ)
|
||||
- [Jake Archibald: 在循环 - JSConf.Asia](https://www.youtube.com/watch?v=cCOL7MC4Pl0)
|
||||
- [What Is GraphQL? REST vs. GraphQL](https://www.youtube.com/watch?v=yWzKJPw_VzM)
|
||||
- [You're (Probably) Using Prettier Wrong](https://www.youtube.com/watch?v=Cd-gBxzcsdA)
|
||||
- [蓝绿发布、滚动发布、灰度发布（金丝雀）](https://199604.com/2548)
|
||||
|
||||
## 杂谈
|
||||
- [The Power of Free Time | Pearl Leff](https://www.pearlleff.com/the-power-of-free-time)
|
||||
> Here are some suggestions that enable that without impacting the bottom line:
|
||||
> - **Part-time options**: Allow employees the option to work reduced hours, such as three or four days a week (even temporarily), and receive the commensurate proportion of their salary.
|
||||
> - **Sabbaticals**: Many companies have sabbatical programs providing employees with an extended period of time off after a certain number of years to pursue personal interests, engage in professional development, or just recharge.
|
||||
> - **Openness to unpaid leave**: Foster an environment where unpaid leave is seen as a positive measure rather than a cause for concern.
|
||||
- [Concise explanations accelerate progress — Steph Ango](https://stephanango.com/concise)
|
||||
- [How To Be Successful - Sam Altman](https://blog.samaltman.com/how-to-be-successful)
|
||||
- [Nat Friedman](https://nat.org/)
|
||||
> - Enthusiasm matters!
|
||||
> - It's much easier to work on things that are exciting to you
|
||||
> - It might be easier to do big things than small things for this reason
|
||||
> - You learn more per unit time because you make contact with reality more frequently
|
||||
- [Internet Search Tips · Gwern.net](https://gwern.net/search)
|
||||
> A description of advanced tips and tricks for effective Internet research of papers/books, with real-world examples.
|
||||
- [Google rolls out anti-stalking measures for AirTag and other Bluetooth trackers](https://www.engadget.com/google-rolls-out-anti-stalking-measures-for-airtag-and-other-bluetooth-trackers-194936293.html)
|
||||
- [You Can Achieve Anything If You Focus On ONE Thing - Darius Foroux](https://dariusforoux.com/one-thing/)
|
||||
- [The best way to acquire knowledge from readings](https://medium.com/heptabase/the-best-way-to-acquire-knowledge-from-readings-abf9357814d1#717b)
|
||||
> 在這個過程中，真正有價值的並不是你最終產出的這個白板，而是你在執行第二步到第四步的過程中建立知識架構、給每張卡片和 Section 下標題所投入的思考過程。真正的理解和洞察往往源自於將知識分解、重組的這個過程。只有在走過這個過程後，這些知識才會真正變成你的知識。
|
||||
- [You Might Be Using Typescript Wrong… - YouTube](https://www.youtube.com/watch?v=RmGHnYUqQ4k)
|
||||
- 提到可以用[Zod](https://zod.dev/) 做类型inference，最近试了下挺好用的，不过我以为是用在表单的，就用得比较局限。刚开始用的时候看了点这个：[Zod Makes TypeScript Even Better - YouTube](https://www.youtube.com/watch?v=9UVPk0Ulm6U)，然后就对着文档写了，最近有个替代品叫 Valibot：[Introducing Valibot](https://www.builder.io/blog/introducing-valibot)
|
||||
- [How To Learn A New Programming Language](https://piped.privacydev.net/watch?v=E8cM12jRH7k)
|
||||
> 1.exploration/documentation phase
|
||||
> 2.building a WebSocket server
|
||||
> 3.interpreter
|
||||
|
||||
## 有意思
|
||||
- [Could we make the web more immersive using a simple optical illusion?](https://shopify.github.io/spatial-commerce-projects/WonkaVision/)
|
||||
- [why Japan’s internet is weirdly designed](https://piped.privacydev.net/watch?v=z6ep308goxQ)
|
||||
- 虽然没有讲清楚缘由，但视频拍得挺有意思的。
|
||||
- 这个视频则补充了文化方面的因素：[How culture made Japanese Internet design “Weird”](https://youtu.be/Opy-SjDU0UY)
|
||||
- [Introducing Fatebook: the fastest way to make and track predictions](https://www.lesswrong.com/posts/yS3d46m23wRKDQobt/introducing-fatebook-the-fastest-way-to-make-and-track)
|
||||
- [Hacker News Blogroll](https://dm.hn/)
|
||||
- [Firefox address bar.](https://wiki.tilde.institute/w/firefox-address-bar-tips)
|
||||
- [Use your Phone as Keyboard and Mouse | The Most Powerful App I've seen!](https://www.youtube.com/watch?v=ljmmaZyYSxc)
|
||||
- [重新认识电子表格Excel](https://www.biaodianfu.com/spreadsheets-and-excel.html)
|
||||
> 微软 Excel 的第一个版本是为苹果公司编写的。 事实上，微软是受史蒂夫乔布斯的委托，为苹果当时正在进行的一个非常秘密的项目编写一个图形界面的电子试算表: Lisa 和第一台 Macintosh，以及他们第一个个人电脑的图形用户界面。 微软为 Mac 电脑提供了 Excel，但同时也秘密开始了自己的项目。 这个项目最终变成了微软的 Windows。 乔布斯认为这是一种背叛，因此开始了乔布斯和比尔盖茨之间的竞争，直到2011年乔布斯去世，这种竞争一直没有结束。
|
||||
- [BLOCKING CHATGPT FROM STEALING YOUR CONTENT](https://bored.horse/post/blocking-chatgpt-from-stealing-your-content/)
|
||||
- [Vulfpeck Live at Madison Square Garden](https://www.youtube.com/watch?v=rv4wf7bzfFE)
|
||||
|
||||
## 工具
|
||||
|
||||
- [Git is simply too hard](https://changelog.com/posts/git-is-simply-too-hard)
|
||||
> But I think whatever the next iteration of the people’s version control is… it should be something that is more reflective of how we think about what version control is for us.
|
||||
|
||||
> I feel that version control systems (the next version of them) should not be something that was specifically made for the Linux Kernel community. It should be something that was specifically designed to be used by the wider community.
|
||||
|
||||
我想找一个Git的替代品，了解到有一个叫 [Fossil](https://fossil-scm.org/home/doc/trunk/www/index.wiki) 的东西，最近还有一个叫 [Jujutsu](https://github.com/martinvonz/jj) 的，不过还没深入使用
|
||||
- [skiff](https://skiff.com/)
|
||||
免费的加密邮箱，功能很多，但是：[PSA: Skiff.com is lying about being open source!](https://raikas.dev/skiff-is-lying-about-being-open-source/)
|
||||
- [Apprise - Push Notifications that work with just about every platform!](https://github.com/caronc/apprise)
|
||||
- [Twine: A Compose multiplatform RSS reader app](https://github.com/msasikanth/twine)
|
||||
|
||||
## 设计
|
||||
- [AI in User Experience (UX) Design: A Fresh Approach | by Dhananjay Mukerji | Aug, 2023 | UX Planet](https://uxplanet.org/ai-in-user-experience-ux-design-a-fresh-approach-c7c7956daad8)
|
||||
- a11y: [Web Interface Guidelines](https://interfaces.rauno.me/)
|
||||
- [Where did the recycling symbol come from? Who designed it? ](https://uxdesign.cc/where-did-the-recycling-symbol-come-from-who-designed-it-3c9584a1af6c)
|
||||
> Using the recycling symbol became a way of participating in this movement and signaling a commitment to environmental responsibility. It helped to create a sense of unity and shared purpose among diverse groups, reinforcing the collective behavior toward recycling and sustainability.
|
||||
|
||||
|
||||
## Open Source
|
||||
- [开源世界的尴尬时刻](https://mp.weixin.qq.com/s/rNXC1BaxsUgsjEWwK00sGQ)
|
||||
- [2023-24: 漩涡事件反思录](https://xuanwo.io/reports/2023-24/)
|
||||
- [使用Apache协议的是自由软件吗？](https://mp.weixin.qq.com/s/QUbEB2cX-I6-ugipJ-C9Rg)
|
||||
- [奇特的“对自杀说不”许可证”](https://mp.weixin.qq.com/s/Bf7dPwb-T-CMbIJM0MEV2Q)
|
||||
- [How to Write a Great README](https://www.appsmith.com/blog/write-a-great-readme)
|
||||
- [Generating income from open source](https://vadimdemedes.com/posts/generating-income-from-open-source)
|
||||
|
||||
## 语言学习
|
||||
- [Why I'm Quitting the Japanese Duolingo Course (An Honest Review)](https://www.youtube.com/watch?v=jf-SbSfiXn4)
|
||||
- [如何学习语言：输入假说（为什么大多数方法没有效果） - YouTube](https://www.youtube.com/watch?v=J_EQDtpYSNM)
|
||||
- [Learn to Read Korean in 5 Minutes (seriously)](https://www.youtube.com/watch?v=TE4eplsFSms)
|
||||
- [法语学习入门补充 | Xuanqi](https://xuanqi.life/post/2022/03/29/%E6%B3%95%E8%AF%AD%E5%AD%A6%E4%B9%A0%E5%85%A5%E9%97%A8%E8%A1%A5%E5%85%85/)
|
||||
这人的博客有很多不错的内容，虽然页面比较复古。
|
||||
|
||||
## 其他
|
||||
还在看Yao 推荐的 [『Ground-Up Computer Science』](https://www.yinwang.org/blog-cn/2021/05/11/gucs-sample)，不过我的进展有点缓慢
|
||||
|
||||
以及最近开始看《半泽直树》
|
||||
|
||||
最后：[It's okay to not like things](https://www.youtube.com/watch?v=0la5DBtOVNI)
|
||||
321
urara/2023-09-04-python/+page.md
Normal file
321
urara/2023-09-04-python/+page.md
Normal file
|
|
@ -0,0 +1,321 @@
|
|||
---
|
||||
title: Python 初学笔记
|
||||
created: 2023-09-04
|
||||
summary: Note of 《Python As Fast as Possible - Learn Python in ~75 Minutes》
|
||||
tags:
|
||||
- 笔记
|
||||
- Python
|
||||
---
|
||||
教程：[Python As Fast as Possible - Learn Python in ~75 Minutes](https://www.youtube.com/watch?v=VchuKL44s6E)
|
||||
|
||||
- [GitHub - kyclark/tiny\_python\_projects: Code for Tiny Python Projects (Manning, 2020, ISBN 1617297518). Learning Python through test-driven development of games and puzzles.](https://github.com/kyclark/tiny_python_projects)
|
||||
|
||||
## 交互式
|
||||
输入
|
||||
```bash
|
||||
python3
|
||||
```
|
||||
看到prompt提示符`>>>` 就进入交互模式了
|
||||
|
||||
- `<Control>`-`P `(previous)
|
||||
- `<Control>`-`N` (next).
|
||||
- `<Control>`-`D` exits a session
|
||||
|
||||
- 工具：
|
||||
- [Project Jupyter | Home](https://jupyter.org)
|
||||
- 教程：
|
||||
- [practical python](https://dabeaz-course.github.io/practical-python/)
|
||||
- [PEP 20 – The Zen of Python | peps.python.org](https://peps.python.org/pep-0020/)
|
||||
- 书籍
|
||||
- [[流畅的Python]]
|
||||
|
||||
## 数据类型
|
||||
- Int
|
||||
- Float
|
||||
- String
|
||||
- Bool
|
||||
|
||||
## Arithmetic Operator
|
||||
- will always reture a float number
|
||||
- `int(x/y)` => int
|
||||
- 幂运算： `x ** y` => `2**3 = 8`
|
||||
- 开跟号：`x //y` => `10 // 3 ` => 3 因为返回的是int，会自动取整
|
||||
- 求余 `x % y`
|
||||
|
||||
## String Method
|
||||
- `.upper()`
|
||||
- `.lower()`
|
||||
- `.capitalize()`
|
||||
- 首字大写
|
||||
- `.count()`
|
||||
- `'Hello'.count('ll) = 2`
|
||||
- mutiply strings
|
||||
- `'hello' * 3 = 'hellohellohello`
|
||||
- `'hello' + 'yes' = 'helloyes`
|
||||
- `.replace()`
|
||||
- `.split()` 分割
|
||||
- 和JS中[[split]]的区别：
|
||||
- 当split里面没有任何参数的时候，JS中会将字符串切割成单个字符
|
||||
- 而Python会按照空格分割（By default any whitespace is a separator[^1]）
|
||||
## Conditional Operators
|
||||
return -> `True` / `False`
|
||||
- ==
|
||||
- !=
|
||||
- `>=`
|
||||
- `<=`
|
||||
- `>`
|
||||
- `<`
|
||||
|
||||
- 可以比较字符串，通过比较ASCI码
|
||||
- `.orc('a')` 求得某个字符串的ASCI值
|
||||
- 如果有几个字符串的话，逐一比较
|
||||
|
||||
## Chained Conditionals
|
||||
- and
|
||||
- or
|
||||
- not
|
||||
- order
|
||||
1. nor
|
||||
2. and
|
||||
3. or
|
||||
|
||||
## If/Else/Elif
|
||||
```py
|
||||
if x == 'Tim':
|
||||
print('You are great')
|
||||
elif x == 'joe':
|
||||
print('Bye joe!')
|
||||
else:
|
||||
print('No')
|
||||
```
|
||||
|
||||
js
|
||||
```js
|
||||
if(x === 'tim') {
|
||||
console.log('You are great')
|
||||
} else if (x === 'joe') {
|
||||
console.log('Bye joe!')
|
||||
} else {
|
||||
console.log('No')
|
||||
}
|
||||
```
|
||||
|
||||
## List/Tuples
|
||||
- List
|
||||
- 类似JS中的 [[数组|array]]
|
||||
- `.list()`
|
||||
- `x = [4, True, 'hi']`
|
||||
- `x[index]`
|
||||
- `.len()`
|
||||
- 返回长度
|
||||
- string also works
|
||||
- `.append()`
|
||||
- 在末尾加值
|
||||
- `.extend([])`
|
||||
- 扩展数组，在末尾加值
|
||||
- `.pop(index)`
|
||||
- remove the last element and return it
|
||||
- list is mutable
|
||||
- deepcopy
|
||||
- `y = x[:]
|
||||
- tuples
|
||||
- TS中的 tuple
|
||||
- immutable
|
||||
- `y = (1,2,3,5)`
|
||||
- nesting
|
||||
- `x=[[],(),[]]`
|
||||
|
||||
## for loops
|
||||
```py
|
||||
for i in range(10)
|
||||
print(i)
|
||||
|
||||
x = [1,2,3,5,67]
|
||||
for i in range(len(x))
|
||||
print(x[i])
|
||||
|
||||
for i,element in enumerate(x):
|
||||
print(i,element)
|
||||
// 0 1
|
||||
// 1 2
|
||||
// 2 3
|
||||
// 3 5
|
||||
// 4 67
|
||||
```
|
||||
|
||||
- `.range()`
|
||||
- arguments:
|
||||
- stop
|
||||
- start, stop
|
||||
- start, stop, end
|
||||
- not includes start and stop
|
||||
- `enumerate`
|
||||
- enumerate()是Python中的一个内置函数,用于将一个可迭代对象(如列表、元组或字符串)组合为一个索引序列,同时列出数据和数据下标,一般用在for循环当中
|
||||
|
||||
## While
|
||||
```bash
|
||||
while True:
|
||||
print('run')
|
||||
i += 1
|
||||
```
|
||||
|
||||
## Slice
|
||||
切割数组
|
||||
```py
|
||||
x = [0,1,2,3,4,5,6,7,8]
|
||||
slice = x[0,4,2]
|
||||
// slice = [0,2]
|
||||
```
|
||||
- `slice = x[start:stop:step]`
|
||||
- `x[:stop]`
|
||||
- `x[start:]`
|
||||
- `x[start:stop]`
|
||||
- step默认为1
|
||||
- reverse a list: `x[::-1]`
|
||||
|
||||
## Sets
|
||||
unorder unique list
|
||||
```py
|
||||
x = set()
|
||||
s = { 2,3,4,5 } //set
|
||||
s2 = { 6 }
|
||||
s = { } // dict
|
||||
print( 4 in s) => boolean
|
||||
print(s.union(s2)) // => {2,3,4,5,6}
|
||||
```
|
||||
- `.add()`
|
||||
- `.remove()`
|
||||
- `.union`：合并set
|
||||
- `.difference`：比较差异
|
||||
- `.intersection`： 交集
|
||||
|
||||
## Dicts
|
||||
```py
|
||||
x = {'key': 4}
|
||||
x['key2'] = 5
|
||||
print( 'key' in x) // => True
|
||||
|
||||
//删除
|
||||
del x['key']
|
||||
```
|
||||
- `.value()`
|
||||
- 获取所有values
|
||||
- `.update()`[^2]
|
||||
- update() 方法用于将一个字典的键值对更新到另一个字典中。
|
||||
- Update the dictionary with the key/value pairs from other, overwriting existing keys. Return None.
|
||||
- update() accepts either another dictionary object or an iterable of key/value pairs (as tuples or other iterables of length two). If keyword arguments are specified, the dictionary is then updated with those key/value pairs: d.update(red=1, blue=2).
|
||||
|
||||
## Comprehensions
|
||||
```py
|
||||
x = [ x for x in range(5)]
|
||||
x =[[0 for x in range(100)] for x in range(5)]
|
||||
x = { i for i in range(100) if i % 5 == 0 }
|
||||
```
|
||||
|
||||
## Function
|
||||
|
||||
```py
|
||||
def func(x,y,z=None):
|
||||
print('Run',x,y,z)
|
||||
return x * y , x /y
|
||||
r1, r2 = func(10,5)
|
||||
func()
|
||||
```
|
||||
|
||||
## Unpack Operator /* Args and ** Kwargs
|
||||
- `*x`
|
||||
- 类似于JS中的`...`
|
||||
- 用于list
|
||||
```py
|
||||
def fun(x,y):
|
||||
print(x,y)
|
||||
|
||||
pairs = [(1,2),(3,4)]
|
||||
for pair in pairs
|
||||
fun(*pair)
|
||||
```
|
||||
|
||||
- `**x`
|
||||
- key word argumens
|
||||
- 用于dict
|
||||
```py
|
||||
def fun(x,y):
|
||||
print(x,y)
|
||||
|
||||
for(**{'x':2, 'y': 5})
|
||||
// 顺序不一也可以
|
||||
```
|
||||
|
||||
## Scope & Globals
|
||||
- 函数内有局部作用域
|
||||
- 用`globel` 可以将局部变量变成全局变量
|
||||
```py
|
||||
def func():
|
||||
global x
|
||||
return x
|
||||
```
|
||||
|
||||
|
||||
## Exceptions
|
||||
- 意外事件，相当于JS中的`throw new Error('')`
|
||||
- 会打断程序的正常执行流程
|
||||
```py
|
||||
raise Exception('Bad')
|
||||
raise FileExistsError('')
|
||||
```
|
||||
常见的异常类型有:
|
||||
- StopIteration - 迭代器没有更多的值
|
||||
- ImportError - 导入模块失败
|
||||
- IndexError - 序列中找不到给定的索引
|
||||
- KeyError - 映射中找不到给定的键
|
||||
- ValueError - 传入无效的参数
|
||||
- TypeError - 对类型无效的操作
|
||||
- FileNotFoundError - 未找到文件
|
||||
- KeyboardInterrupt - 用户中断执行
|
||||
## Handling Exceptions
|
||||
|
||||
```py
|
||||
try:
|
||||
x = 7 /0
|
||||
expect Exception as e
|
||||
print(e)
|
||||
finally:
|
||||
print('finally')
|
||||
```
|
||||
|
||||
## Lambda
|
||||
lambda是Python中的匿名函数。它可以有多个参数,但只能有一个表达式。
|
||||
```py
|
||||
x = lambda x: x + 5
|
||||
```
|
||||
|
||||
|
||||
## Map and Filter
|
||||
- Map: 跟JS的[[map()]] 差不多
|
||||
- 返回map object
|
||||
```py
|
||||
x = [0,1,2,3,4,5,6,7,8]
|
||||
|
||||
mp = map(lambda i : i +2 , x)
|
||||
// js : const mp = x.map((i)=> i+1)
|
||||
print(list(mp))
|
||||
|
||||
mpf = filter(lambda i : i === 2 , x)
|
||||
|
||||
```
|
||||
|
||||
## F Strings
|
||||
- 类似于JS中的 [[template literal]]
|
||||
```py
|
||||
tim = 89
|
||||
x = f'hello {6+8}'
|
||||
// js
|
||||
// x = `hello ${6+8}`
|
||||
```
|
||||
|
||||
|
||||
## Buildin Functions
|
||||
- [[vars()]]
|
||||
|
||||
[^1]: [Python String split() Method](https://www.w3schools.com/python/ref_string_split.asp)
|
||||
[^2]: [Built-in Types — Python 3.11.4 documentation](https://docs.python.org/3/library/stdtypes.html?highlight=update#dict.update)
|
||||
285
urara/2023-09-10-akkoma-media/+page.md
Normal file
285
urara/2023-09-10-akkoma-media/+page.md
Normal file
|
|
@ -0,0 +1,285 @@
|
|||
---
|
||||
title: Akkoma / Pleroma 的媒体相关配置
|
||||
created: 2023-09-10
|
||||
summary: 配置 Cloudflare R2、Media Proxy、Varnish Cache、Media Cache 的简明流程
|
||||
---
|
||||
|
||||
## 前言
|
||||
|
||||
刚开始装的时候，我试过用 Contabo Object Storage，但是当时没有配置成功，后面发现 Cloudflare R2 还蛮适合的，而且**免费套餐对小型站点已经完全够用了**，所以将本地的文件上传到了 Cloudflare R2 中并且后续文件都迁移到了这边。
|
||||
|
||||
下面我先讲一下这么配置，再说怎么迁移，再说 Media Proxy 的配置 和 Varnish 的配置，可以根据个人需要选用配置。因为时间过去太久了了，可能会有一些多余了我也不知道的配置，也可能会有 Bug，可以对照官方文档仔细检查一下。
|
||||
|
||||
下文比较长，我写得比较详细，但是配置起来并不是特别难，需要一点点耐心。
|
||||
|
||||
相关信息：
|
||||
|
||||
- [Pricing · Cloudflare R2 docs](https://developers.cloudflare.com/r2/pricing/)
|
||||
- [Configuration Cheat Sheet - Akkoma Documentation](https://docs.akkoma.dev/stable/configuration/cheatsheet/#pleromauploaderss3)
|
||||
- [Public buckets · Cloudflare R2 docs](https://developers.cloudflare.com/r2/buckets/public-buckets/#managed-public-buckets-through-r2dev)
|
||||
|
||||
## Part1：配置上传文件到 Cloudflare R2
|
||||
|
||||
### 0. 准备工作
|
||||
|
||||
- Cloudflare 账号或者其他 S3 API 的对象存储服务的账号
|
||||
- 一个用来放媒体文件的域名，这个域名必须和所使用的 Cloudflare 账号绑定并且通过 Cloudflare 来做 DNS，但如果没有这样的域名也可以，但是会被限速并且一些 Cloudflare 的功能特点会无法使用，比如没有缓存功能，详情参考：[Public buckets · Cloudflare R2 docs](https://developers.cloudflare.com/r2/buckets/public-buckets/#managed-public-buckets-through-r2dev)
|
||||
|
||||
### 1. 创建 Bucket
|
||||
|
||||
进入到 Cloudflare 后台 R2 的部分，点击 `Create bucket` 创建新的 Bucket（存储桶）
|
||||
|
||||
|
||||
|
||||
然后选择位置，我这里选择的是 Automatic，也可以根据自己的需要修改位置，确认好位置后，点击右下角的 `Create Bucket` 创建 Bucket：
|
||||
|
||||
|
||||
创建好之后就可以在 **Overview** 那边就可以看到创建好的 Bucket 了，点击 Bucket 名进入详情页。
|
||||
|
||||
|
||||
|
||||
### 2. 开启 Public Access
|
||||
|
||||
进入到详情页之后点击 **Settings** 标签页
|
||||
|
||||
|
||||
下拉到 **Public access** 一栏绑定域名，先输入域名，然后点击`Continue` ，然后点击`Connect domain`，接着 Cloudflare 会自动处理 DNS 的事情。
|
||||
|
||||
|
||||
这样就是绑定好了：
|
||||
|
||||
|
||||
如果域名不满足条件就会报错：
|
||||
|
||||
但这种情况也可以通过使用 **R2.dev subdomain** 来开启 Public Access，点击右边的`Allow Access`就可以开启了：
|
||||
|
||||
|
||||
### 3. 设置 CORS
|
||||
|
||||
为什么需要设置 CORS：
|
||||
> Cross-origin resource sharing (CORS) is a mechanism that allows restricted resources (e.g. fonts) on a web page to be requested from another domain outside the domain from which the first resource was served. A web page may freely embed cross-origin images, stylesheets, scripts, iframes, and videos. Certain "cross-domain" requests, notably Ajax requests, are forbidden by default by the
|
||||
>
|
||||
> 跨源资源共享 (CORS) 是一种机制，允许从提供第一个资源的域之外的另一个域请求网页上的受限资源（例如字体）。网页可以自由嵌入跨源图像、样式表、脚本、iframe 和视频。某些“跨域”请求，特别是 Ajax 请求，默认情况下被同源安全策略禁止。[^1]
|
||||
|
||||
当我们使用主域名（比如`sevic.me`来访问子域名`m.sevic.me` 上面的内容时，就会产生跨域问题，可以通过 CORS 来解决这个问题，在这里可以很方便地设置，滑动到下方 **CORS Policy** 的部分，点击右边按钮 `Add CROS policy` 添加：
|
||||
|
||||
设置里默认添加了一个`http://localhost:3000`的 URL，可以删掉，然后在`AllowedOrigins` 下面添加 Akkoma 的链接，比如`https://example.com`，以及在`AllowedMethods` 里加上 `POST`、`PUT`、`DELETE`, 如果下方没有任何报错就可以点右下角的 `Save` 保存，这部分就配置好了，但先不要关闭 Cloudflare 的页面。
|
||||
|
||||
|
||||
### 4. 修改 Admin-Fe 中的设置
|
||||
|
||||
打开 Admin-Fe，打开很下面的 **Upload** 标签页，然后修改 Uploader 为 S3，Filter 选择可以参考文档中的 Cheat Sheet：[Configuration Cheat Sheet - Akkoma Documentation](https://docs.akkoma.dev/stable/configuration/cheatsheet/#upload-filters)
|
||||
|
||||
我的设置：
|
||||
|
||||
|
||||
在 **Base URL** 的部分，如果刚才没有绑定自定义域名，那么这里可以使用 **Public R2.dev Bucket URL**，可以在 Bucket -> Setting -> R2.dev subdomain 部分找到。
|
||||
|
||||
### 5. 配置 S3 Keys
|
||||
|
||||
我们先回到 Cloudflare 创建 API Token，进入 **R2 Overview 页**面，点击右边的 `Manage R2 API Tokens`:
|
||||
|
||||
|
||||
然后点击`Create API Token` ：
|
||||
|
||||
|
||||
权限选择第三个 **Object Read & Write**，并在 **Specify bucket(s)** 里选择对应的 Bucket：
|
||||
|
||||
|
||||
下面的 TTL 设置可以随你喜欢。
|
||||
|
||||
在最下方的 **Client IP Address Filtering** 中 还可以设置阻止或者允许某些 IP，我在 Include 里添加了 Akkoma 实例所在服务器的 IP：
|
||||
|
||||
确认好各项配置后，点击右下角的 `Create API Token`，接着滚动到 Token 结果页面，复制下方的 Access Key ID 和 Secret Access Key，粘贴到刚才打开的 Admin-Fe 的相应位置：
|
||||
|
||||
|
||||
|
||||
|
||||
Host 部分可以在 Bucket 内的 Setting -> Bucket Detail 中找到，后面的 `/pleroma` 和前面的`https://` 都不需要：
|
||||
|
||||
|
||||
|
||||
|
||||
Region 写 auto，如果之前创建 Region 的时候有设置特殊 Region 的话这里是不能指明的，参考文档：[S3 API compatibility · Cloudflare R2 docs](https://developers.cloudflare.com/r2/api/s3/api/#bucket-region)
|
||||
|
||||
|
||||
### 6. 设置目标 Bucket
|
||||
|
||||
在 **Pleroma.Uploaders.S3** 部分填入 Cloudflare R2 的 Bucket 名字，比如我们之前设置的是 Pleroma：
|
||||
|
||||
|
||||
我的其他设置（什么也没设置）：
|
||||
|
||||
|
||||
最后保存设置，重启 Pleroma。
|
||||
|
||||
### 7. 迁移本地 uploads 文件夹到 Bucket 中
|
||||
|
||||
我当时是使用 rclone 来复制迁移的。经过网友 Diara 的提醒，才发现有一个内置的 CLI 命令，可以很方便的迁移：[Managing uploads - Akkoma Documentation](https://docs.akkoma.dev/stable/administration/CLI_tasks/uploads/)，但是我没试过，具体命令：
|
||||
|
||||
```bash
|
||||
su akkoma -s $SHELL -lc "./bin/pleroma_ctl uploads migrate_local S3"
|
||||
```
|
||||
|
||||
也可以迁移后删除本地文件：
|
||||
|
||||
```bash
|
||||
su akkoma -s $SHELL -lc "./bin/pleroma_ctl uploads migrate_local S3 --delete"
|
||||
```
|
||||
|
||||
## Part2. 配置 Media Proxy
|
||||
|
||||
这一部分和前面的部分可以说是完全不相干，这部分我是复制网友面条的设置，原帖文已经找不到了（Sorry
|
||||
|
||||
Media Proxy 的功能是给外站的媒体文件通过 Cloudflare 代理中转一下，这样访问一些外站媒体会更流畅一点。
|
||||
|
||||
### 1. 创建 Worker
|
||||
|
||||
首先在 Cloudflare 里的 **Worker & Pages** 部分点击 `Create Application` 创建 Worker：
|
||||
|
||||
|
||||
再点`Create Worker`:
|
||||
|
||||
|
||||
填入喜欢的名字，然后点击右下角 `Deploy`:
|
||||
|
||||
|
||||
### 2. 修改 Worker 配置
|
||||
|
||||
点击 `Configure Worker` 配置 Worker：
|
||||
|
||||
接着点击右边`Quick Edit` 进入编辑页面：
|
||||
|
||||
|
||||
删掉默认代码，填入下面的代码（由网友面条提供）：
|
||||
|
||||
```js
|
||||
function decodeBase64 (str) {
|
||||
try {
|
||||
return atob(str)
|
||||
} catch (e) {
|
||||
console.log(e)
|
||||
return null
|
||||
}
|
||||
}
|
||||
|
||||
export default {
|
||||
async fetch(request, env) {
|
||||
const url = new URL(request.url)
|
||||
const pathList = url.pathname.split('/') || []
|
||||
const mediaUrl = decodeBase64(pathList[3] || '')
|
||||
if (!mediaUrl) {
|
||||
return new Response('')
|
||||
}
|
||||
console.log(mediaUrl)
|
||||
return fetch(mediaUrl, {
|
||||
headers: request.headers
|
||||
})
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
点击右上角 `Save and Deploy` 保存：
|
||||
|
||||
|
||||
### 3. 使用自定义域名
|
||||
|
||||
当然不使用也可以，不使用自定义域名的话可以直接使用 Worker's hostname，也就是这个部分：
|
||||
|
||||
|
||||
|
||||
在 worker 页面，打开 **Triggers** 标签页，然后点下面的 `Add Custom Domain` :
|
||||
|
||||
|
||||
|
||||
然后填入自定义域名，比如：
|
||||
|
||||
点击`Add Custom Domain` 就加好了
|
||||
|
||||
### 4. 配置 Admin-Fe
|
||||
|
||||
打开 Admin-Fe 的 **Media Proxy** 页面，修改 **Base URL** 为上一步中修改的 Custom Domain
|
||||
|
||||
|
||||
|
||||
如果没有设置 Custom Domain 的话可以用 Custom Domain 部分提供的`production.proxy.<ID>.workers.dev` URL：
|
||||
|
||||
然后就设置好了，下面的其他部分我没有特殊设置，这里就不讲了。但我没开 Media preview proxy，之前开了会看不到图片，可能需要再做一些特殊设置，但感觉也没什么开的必要？
|
||||
|
||||
## Part3. 配置 Varnish Cache
|
||||
|
||||
参考文档：[Using a Varnish Cache - Akkoma Documentation](https://docs.akkoma.dev/stable/configuration/optimisation/varnish_cache/)
|
||||
|
||||
### 1. 安装 Varish
|
||||
|
||||
参考：[Installing Varnish on Ubuntu - Varnish Developer Portal](https://www.varnish-software.com/developers/tutorials/installing-varnish-ubuntu/)
|
||||
|
||||
### 2. 配置 Varnish
|
||||
|
||||
进入 Akkoma 目录，比如在`/opt/akkoma` 下，复制 Akkoma 预置的 Varnish 配置文件到 Varnish 目录下：
|
||||
|
||||
```bash
|
||||
cp /opt/akkoma/installation/akkoma.vcl /etc/varnish/akkoma.vcl
|
||||
```
|
||||
|
||||
进入 Varnish 配置目录中，删除已有的`default.vcl` 配置：
|
||||
|
||||
```bash
|
||||
cd /etc/varnish
|
||||
sudo rm -rf default.vcl
|
||||
```
|
||||
|
||||
- 启动 Varnish：`sudo systemctl start varnish`
|
||||
- 检查 Varnish 情况：`sudo systemctl status varnish`
|
||||
- 停止 Varnish： `sudo systemctl stop varnish`
|
||||
- 设置开机启动：`sudo systemctl enable varnish`
|
||||
|
||||
启动后可以通过`curl -D- localhost:6081` 检查运行情况，像这样就是正常运行了：
|
||||
|
||||
|
||||
### 3. 修改 Nginx 配置，可以修改下面的 upstream 端口为 6081
|
||||
|
||||
|
||||
|
||||
## Part4. Storing Remote Media
|
||||
|
||||
建议参考文档：[Storing Remote Media - Akkoma Documentation](https://docs.akkoma.dev/stable/configuration/storing_remote_media/)
|
||||
|
||||
这部分我的配置不保证不产生任何副作用，因为我配置之后有些路由会 503，不确定是上面和这个环节那里出了错，下面我的配置仅供参考：
|
||||
|
||||
```conf
|
||||
proxy_cache_path /tmp/akkoma-media-cache levels=1:2 keys_zone=pleroma_media_cache:10m max_size=10g
|
||||
inactive=720m use_temp_path=off;
|
||||
```
|
||||
|
||||
```conf
|
||||
location /media {
|
||||
proxy_cache akkoma_media_cache;
|
||||
slice 1m;
|
||||
proxy_cache_key $host$uri$is_args$args$slice_range;
|
||||
proxy_set_header Range $slice_range;
|
||||
proxy_cache_valid 200 206 301 304 1h;
|
||||
proxy_cache_lock on;
|
||||
proxy_ignore_client_abort on;
|
||||
proxy_buffering on;
|
||||
chunked_transfer_encoding on;
|
||||
proxy_pass http://phoenix;
|
||||
}
|
||||
|
||||
location /proxy {
|
||||
proxy_cache akkoma_media_cache;
|
||||
proxy_cache_lock on;
|
||||
proxy_pass http://phoenix;
|
||||
}
|
||||
```
|
||||
|
||||
然后打开 Admin-Fe 中的 **MRF** 页面，在 Policies 的部分加上`MediaProxyWarmingPolicy`：
|
||||
|
||||
|
||||
大功告成。
|
||||
|
||||
## 后言
|
||||
|
||||
朋友 loikein 说像这种可能会重复说的话就可以整理成博客了，我觉得它说得很对，我以后会多整理一下这些回答过很多朋友的内容，之后或许：我离不开 Obsidian 的几个理由，还有很多想写的，但先不吹牛了。
|
||||
|
||||
[^1]: [Cross-Origin Resource Sharing (CORS) - HTTP | MDN](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS)
|
||||
29
urara/2023-10-02-remote-work/+page.md
Normal file
29
urara/2023-10-02-remote-work/+page.md
Normal file
|
|
@ -0,0 +1,29 @@
|
|||
---
|
||||
title: 远程工作相关链接
|
||||
created: 2023-10-03
|
||||
summary: 对网友的回复，回滚系统误删了，存之。
|
||||
---
|
||||
方法：
|
||||
|
||||
* [如何找到时薪 80 美元的远程工作（一） - GeekPlux](https://geekplux.com/posts/how-to-get-jobs-pay-80-dollars-per-hour-1)
|
||||
* [如何找到时薪 80 美元的远程工作（二） - GeekPlux](https://geekplux.com/posts/how-to-get-jobs-pay-80-dollars-per-hour-2)
|
||||
|
||||
平台：
|
||||
|
||||
* [Hire Freelancers & Find Freelance Jobs Online](https://www.freelancer.com/)
|
||||
* [We connect outstanding freelancers with great clients.](https://www.toptal.com/)
|
||||
* [upwork](https://www.upwork.com/)
|
||||
* [Your search engine for remote only engineering jobs](https://remoteonlyengineers.com/#)
|
||||
* [The remote job board you’ll enjoy using | Himalayas](https://himalayas.app/)
|
||||
* [Job Board Search](https://jobboardsearch.com/)
|
||||
* [Remote Jobs in Programming, Support, Design and more](https://remotive.com/)
|
||||
* [JustRemote](https://justremote.co/)
|
||||
* [JavaScript Jobs - OnSite and Remote JavaScript Jobs - August 2022](https://javascriptjob.xyz/)
|
||||
* [Remote OK](https://remoteok.com/)
|
||||
* [web3 招聘平台 - Bole Jobs](https://www.bolejobs.co/)
|
||||
* [Just Join IT](https://justjoin.it/)
|
||||
* [Startup Jobs – Developer, designer, marketing, sales jobs, and more](https://startup.jobs/)
|
||||
* [Find Startup Jobs Near You and Remote Jobs](https://wellfound.com/jobs)
|
||||
* [Build, Lead, Invest](https://www.angellist.com/)
|
||||
* [https://abetterweb3.notion.site/](https://abetterweb3.notion.site/)
|
||||
* [Remote first jobs](https://remotefirst.asia/)
|
||||
156
urara/2024-01-20-2023/+page.md
Normal file
156
urara/2024-01-20-2023/+page.md
Normal file
|
|
@ -0,0 +1,156 @@
|
|||
---
|
||||
title: 2023 - 命题作文
|
||||
created: 2024-01-20
|
||||
summary: 写着写着就累了
|
||||
---
|
||||
|
||||
我最近一直在想年终总结这件事情，从十二月底开始拖着一直不想写，关于「为什么不想写」，我想了很多，有的忘了，有的现在正要写。
|
||||
|
||||
年终总结这种东西，似乎从来没有写过，年初计划倒是经常写。对我来说，年终总结就像一个命题作文，有既定的内容范围，它不像我每周胡乱写的周记一样漫无天际，它有无形的边框，要写什么、不写什么，似乎是有所约束的，这种约束感让我难以放手去写。
|
||||
|
||||
所以，这是一篇年终总结吗？是，也不是。
|
||||
|
||||
## 聊胜于无的年初计划
|
||||
|
||||
2023刚开始的时候，我也在发愁年终总结，因为我，没什么好总结的。写写看了什么书？打了什么游戏？或者是看了什么剧或者番？不好意思，全都没有记录。有一种搜索记忆的方式是从我一年5k多的自言自语中遍历搜索，噢，天呐，不敢想象。
|
||||
|
||||
所以2023刚开始的时候，我开了一个Airtable表格，目标是记录2023中做过的事情，比如看过的书之类的，结果……完全没有在记录，因为我也没看什么书。
|
||||
|
||||
|
||||
|
||||
但是BL倒是有记一些：
|
||||
|
||||
|
||||
|
||||
我想，我努力回想，年初计划了什么，四处翻看，终于在 Notion 里面找到一些记录，我还是有做到其中一些的，比如找工作、学习 React 和 Next.js 之类的，更多的就没有做到了，但鉴于我把计划都忘得差不多了，做不到就做不到吧。
|
||||
|
||||
## 二次元的自我修养
|
||||
|
||||
今年因为想着要找工作，所以我总是放不下心来去看东西，无论是电视剧还是动画片、漫画，所以今年并没有补充太多的二次元精神粮食。
|
||||
|
||||
### 动画
|
||||
今年的动画看过：
|
||||
|
||||
对了我还看了新版 《Trigun stampede》， Vash太帅了！就是剧情有点摸不着头脑。
|
||||
|
||||
以及今年终于把巨人给看完了！我是那种一看东西就很容易入迷的人，所以花了几天的时间，没日没夜地看完了，从漫画到动画。确实很好看，剧情很好，颇具争议的结尾在我看来还可以接受，就是有的地方的基调比较抑郁，也比较吓人，让我睡不好觉。
|
||||
|
||||
回想第一次看巨人还是高中的时候，时间过去太久，剧情都已经忘得差不多了，于是我又从头开始看，好神奇啊，除了主角的名字，其他的我真的全忘了，似乎也没有过去很久呀？尽管在最终季动画出来之前我就去补完了漫画，但看到三笠捧着艾伦的头的时候，眼泪还是落了下来。
|
||||
|
||||
在巨人之前看了Eva，不太看得懂，感觉比较意识流，最后几集大段大段的独白让我再次陷入了偏头痛中。我很喜欢残酷天使这个OP。
|
||||
|
||||
还看了比较热门的《跃动青春》和《地狱乐》、《天空大魔镜》，是当下饭番看的，三部都很不错，我都去把漫画补完了，当时我发在看跃动青春贴文的时候，似乎有网友说，是不是觉得有些感慨，因为没有这样类似的青春。啊，不是的，有过的，我还是会经常掉到那时的梦里，一次又一次。
|
||||
|
||||
看了一半没看完的：《咒术回战》
|
||||
### 日漫
|
||||
除了上面提到的一些漫画之外，还看了《我推的孩子》、《咒术回战》（都没看完），以及断断续续在追的《电锯人》连载。
|
||||
|
||||
### 韩漫
|
||||
今年开始看韩漫了。刚开始看的时候还煞有其事地记录看过的，并写评分，但随着看得越来越多，也就懒得写了，其中我比较喜欢的画风是《Wetsand》、《限定时光》的，节奏最好的是《邂逅》，我还去看了这本的原著小说，还不错，但也是有点老套的失忆情节。
|
||||
|
||||
感觉韩漫好多剧情都不怎么样，比如说……咳，大名鼎鼎的《水边之夜》，今年看过觉得剧情比较好的是《将杀》、《危险的便利店》、《犯规》（未完结，但是我看了小说，小说还不错）、《冷血动物》、《百万罗曼史》（好看！第一次体会到矮子攻的魅力）、《彩虹城》（也是去看了小说）、《同情的形态》（比较虐，但是我喜欢这种酸涩的感觉）、《无线电风暴》、《百分百清洁》等等。
|
||||
|
||||
今年比较期待《犯规》和《彩虹城》、《失能开关》的更新，这几本我都去看了原著小说，尽管翻译得差强人意，但还是品出了些许滋味，所以很期待。
|
||||
|
||||
### 这也是二次元？
|
||||
意思是电视剧，今年只看了《黑暗荣耀》，很喜欢男主的人设，虽然我觉得这个角色和剧情缝合得很牵强，演员演技似乎也不太够。但我还是很喜欢这种像小狗一样的人设。
|
||||
|
||||
电影，因为没有一起去电影院的朋友，我自己在家也不太能坐这么久看电影，所以一部也没看。等等，似乎看了一部叫《星条红与皇室蓝》的，很扯，但是又很好磕，比较悲剧的是：我站反了。
|
||||
|
||||
还有关于BL小说的部分，今年完全没读，除了上面提到的读过的几本韩漫原著之外，只读了卡比丘的一本新作，叫什么来着？
|
||||
|
||||
|
||||
## 年度好物和浪费钱
|
||||
今年跟往年一样，还在败家和浪费钱，而且败得更多了。
|
||||
|
||||
年度好物：Switch
|
||||
|
||||
年度浪费钱：Readwise Reader 会员？
|
||||
|
||||
### Nintendo Switch OLED
|
||||
今年买的最值的东西：Nintendo Switch OLED（斯普拉顿三限定）!虽然很多人说 2024年就要出新版了，现在买很不值，但是我还是觉得能在2023年买到真的太好了，原来快乐这么容易就可以买到。
|
||||
|
||||
我买了很多游戏，都是比较热门的，比如说塞尔达的两部、斯普拉顿三、动森、逆转裁判、幽灵诡计等等，其中玩得最多的是斯普拉顿三，其他因为太喜欢玩斯普拉顿三所以搁置了。
|
||||
|
||||
我一开始想买 Switch，是因为想跟朋友井一起玩，她是一个喷喷爱好者，2和3都买了，但当我买到之后她已经好久不玩了，那句话怎么说来着？「电子阳痿」。我尽毕生所学去求她还是没有把她拉回游戏里面，实在可惜呀！但是我在游戏里也认识到不少朋友，也算是好事吧。
|
||||
|
||||
说起来昨天井给我发了 Switch2 的消息，我还是挺期待2代的，私心希望能晚一点点出，我再攒点钱……
|
||||
|
||||
还买了Switch 配件若干：
|
||||
- 好用爱用：创维23.8寸的显示器
|
||||
- 还行经常用：漫步者M230蓝牙音箱
|
||||
- 没什么用：Switch 防尘盒
|
||||
- 有时用：tomotoc 的收纳包
|
||||
- 超值：Switch Pro，在网上收的二手，才180！手感太好了
|
||||
- 想想不买也可以：紫绿配色 Joycon
|
||||
- 用了几天就没用：Skull & Co.的Joycon摇杆帽
|
||||
- 不是浪费钱，是一种情趣：任天堂周边布贴和喷喷周边（鱼蛋和手套）
|
||||
- 我何罪之有：网易UU加速器会员、biubiu加速器会员、小米AX3000T路由器
|
||||
|
||||
### 新手机
|
||||
|
||||
熟悉的朋友都知道我是一个不太爱用手机的人，但是我今年换手机了，换的是和朋友同款的 iPhone 15 Pro。换手机的理由不多，就是手机上很多APP开始闪退了，所以在国庆前后换掉了，上一个手机是用了两年多的荣耀50，是家人手机丢了然后临时买的，后面手机又找到了，所以我拿来用了。
|
||||
|
||||
用了有三个月左右，目前感觉还不错，但是我手机只用来拍照、购物、看天气等简单操作，虽然装了很多 APP，但是都没有怎么深度用过，浏览器还是用的默认的Safari，说起来 Safari 没有 UBlock Origin实在是很难受，很想念Fennec，原来没有广告的世界是这么纯净。
|
||||
|
||||
总的来说，手机手感很好，边缘很圆润不切手，IOS系统APP统一的设计让人感受到一种整洁的美，然后拍照功能也不错，我觉得还是蛮值的。不久前我手机上是没有安装任何音乐APP的，但因为最近买了副 AirPods，所以我也装了几个这样的 APP，比如 Spotify 之类的，感觉耳机在手机和电脑之间切换很自然，就是我很少有使用的场景。
|
||||
|
||||
### 通勤包
|
||||
不久前回家，在衣柜里面翻到两个全新的包，然后想起来这是朋友送的，感觉有点可惜，我不太喜欢被送东西，因为很少有人能送我需要的，就像这两个包，就像买东西送的那几个品牌贴纸，我不需要，我又不好意思扔掉，处于一种比较尴尬的局面。
|
||||
|
||||
说回包，我有一个用了很久很久的斜挎小包，来自NTMY：
|
||||
|
||||
|
||||
|
||||
我在这家店买过不少包，双肩包、斜挎包、还有一个丢失了的相机包，这个牌子的质量都很好，轻便耐用。所以我又买了一个斜挎的邮差包作为通勤包：
|
||||
|
||||
|
||||
抱歉没有实物图，我懒得拍。这个包可以装下十三寸的Macbook，里面还有夹层，夏天背着蛮清爽的，因为广东一年四季都是夏天，所以四季皆宜。就是里面放电脑的话，转身很容易撞到门，要小心一点。因为肩带有点长，看评论区说可以用日字扣缩短，所以我也试了下，好方便！日字扣就是这个：
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
### 周边若干
|
||||
|
||||
莫名其妙就买了的EVA周边（分别是耳机套和充电宝。）：
|
||||
|
||||
|
||||
|
||||
|
||||
今年能看完全职猎人吗？：
|
||||
|
||||
|
||||
来自熊先生商会：
|
||||
|
||||
|
||||
|
||||
|
||||
### Readwise Reader 订阅服务
|
||||
|
||||
在这个 Reader 出来之前的赞扬有多少，我的失望就有多少。
|
||||
|
||||
不算便宜的订阅费，性能却极其差劲，我很少能在手机上正常打开，无论是安卓还是 IOS ，也许是因为我有一千多个 RSS 订阅源吧，但是我觉得这种性能表现很不应该，比这个更多的订阅源，我在 Miniflux 上却从来没卡顿过。
|
||||
|
||||
网页上他们的标注插件性能也不好，总是占浏览器CPU的前两名，甚至说不同浏览器内打开 Reader 之后，里面的内容都不是同步的，还遇到几次添加了页面但是找不到的情况。
|
||||
|
||||
我是觉得，阅读APP应该做到秒开，因为对我来说一时兴起阅读这种事情是很难得的……
|
||||
|
||||
今年还订吗？得想想，因为我最近又能正常使用了。
|
||||
|
||||
## 写到这里就够了
|
||||
想写的特别多，但是写着写着总是觉得没完没了，就像一个黑洞，这也写，那也写，什么时候写得完？所以下面快速总结一下今年：
|
||||
|
||||
今年我换了一份比较满意的工作，慢慢的从前端转换到全栈，自学了React、Next.js、TypeScript、bash，还学了一点 Shader 和计算机图形学、Go，学会了写API接口，也对 Vue 更熟练了，今年还做了几个项目，比如几个 Raycast 插件，和kwaa写了一点CSS，全年写代码约 1232 小时。
|
||||
|
||||
今年参加了妹妹的婚礼，还给高中同学封了我的第一个红包，感觉很多同龄人都走向了家庭生活，我还是和往常一样，没有什么特别的，我也不想走入家庭生活。
|
||||
|
||||
今年见到的朋友很少，无论是井还是 Pully，我们都很久不见了，希望2024年能见到吧。然后是网友，总觉得网友比我的很多朋友更了解我，因为我们每天都在同一片狭窄又宽阔的联邦宇宙更新自己的状态，两年？还是三年？认识也有好久了，通过某篇博文里面看到的联系方式、因为同一个城市所以熟悉起来的同行、因为同样的困境、喜好所以聚在一起的朋友，好神奇呀。
|
||||
|
||||
今年做梦，一次又一次梦到高中，就像一个无法逃脱的梦，很奇怪。
|
||||
|
||||
在刚上学的时候，所有人都会问：「你的梦想是什么？」，那时我对世界知之甚少，有人说「科学家」，但我连科学家都不知道是什么，只知道每天放学回家就打开电视看虹猫蓝兔，因为他们需要一个答案，所以我也捡起了「科学家」的「梦想」。初高中的时候，老师则会问，「你以后想去做什么？念什么大学，学什么专业？」，然后我们在留言板上写下自己设想的未来，大学的时候，辅导员会问：「你以后有什么计划？考研还是就业？」，
|
||||
|
||||
现在想想，有多久没有人问过我：「你以后想成为什么样的人？」，好像就业就是一个终点，被看作是一种人生完成态的终止，几乎没有人再问我，想成为什么样的人，我似乎已经变成一个不可改变的状态，我只能成为我自己了。
|
||||
|
||||
于是我最近开始问自己这个问题，我没想明白，但正在想，希望今年能想明白。
|
||||
80
urara/2024-02-23-reading/+page.md
Normal file
80
urara/2024-02-23-reading/+page.md
Normal file
|
|
@ -0,0 +1,80 @@
|
|||
---
|
||||
title: 我在看什么 · 2023年9月~2024年2月
|
||||
created: 2024-02-23
|
||||
summary: 如何设计优秀的 URL / 游戏机黑客词汇表 / Coding Menu / Four Magic Words
|
||||
tags:
|
||||
- 我在看什么
|
||||
---
|
||||
|
||||
又上班之后看的东西就少了，但还是攒了一些。
|
||||
|
||||
## 电子设备
|
||||
- [E-ink is so Retropunk](https://rmkit.dev/eink-is-so-retropunk/)
|
||||
- [My E-Reader Setup](https://blog.videah.net/my-e-reader-setup/)
|
||||
- 讲的是 Kobo Libra 2
|
||||
- 为了NS重启网络知识学习：
|
||||
- [游戏机黑客词汇表](https://gledos.science/hacking-game-console-word-list.html)
|
||||
- [Nintendo Switch：~联机加速方案的研究与折腾~](https://zankyo.cc/2845/)
|
||||
- [OpenWRT路由器加速Switch联机的方案](https://nekodaemon.com/2021/03/02/OpenWRT%E8%B7%AF%E7%94%B1%E5%99%A8%E5%8A%A0%E9%80%9FSwitch%E8%81%94%E6%9C%BA%E7%9A%84%E6%96%B9%E6%A1%88/)
|
||||
- [如何让日版主机找到5G信号？](https://www.gcores.com/articles/25847)
|
||||
- [Switch自建NAT优化指北](https://blog.z3ratu1.top/Switch%E8%87%AA%E5%BB%BANAT%E4%BC%98%E5%8C%96%E6%8C%87%E5%8C%97.html)
|
||||
- [介于一般和糟糕之间：文石 Tab Ultra C Pro 测评](https://roriri.one/2023/12/10/boox-tab-c-pro/)
|
||||
## 写代码
|
||||
- [【API技术核心原理】REST | GraphQL | gRPC | tRPC](https://www.bilibili.com/video/BV1yL41167fD/)
|
||||
- [Argon2 vs bcrypt vs. scrypt: which hashing algorithm is right for you?](https://stytch.com/blog/argon2-vs-bcrypt-vs-scrypt/)[Playwright vs Cypress: A Comparison](https://www.browserstack.com/guide/playwright-vs-cypress)
|
||||
- [Full-Stack TypeScript with tRPC and React](https://www.robinwieruch.de/react-trpc/)
|
||||
- [How to use the JavaScript bcrypt library](https://flaviocopes.com/javascript-bcrypt/)
|
||||
- [PWA for Vue applications: A practical guide](https://dev.to/pegahsafaie/pwa-for-vue-applications-a-practical-guide-4de3)
|
||||
- 有点过时了，但我的项目也是过时的，所以能用
|
||||
- [The Source of Readability](https://loup-vaillant.fr/articles/source-of-readability)
|
||||
> - If the thing itself is big, we won’t have much brain space left to understand the surrounding context. The less that context matters the better.
|
||||
> - Counting source lines of code only works if you honestly observe similar coding conventions.
|
||||
> - Most auto-formatters are liable to add a lot of lines to this function, for no discernible benefit.
|
||||
- [Passkeys: A No-Frills Explainer On The Future Of Password-Less Authentication — Smashing Magazine](https://www.smashingmagazine.com/2023/10/passkeys-explainer-future-password-less-authentication/)
|
||||
- 没看完，但感觉不错，Passkey的介绍博文
|
||||
- [JavaScript WTF: Why does every() return true for empty arrays? - Human Who Codes](https://humanwhocodes.com/blog/2023/09/javascript-wtf-why-does-every-return-true-for-empty-array/)
|
||||
> Instead of reading every() as “does every item in this array match this condition?” read it as, “is there any item in this array that doesn’t match this condition?” That shift in thinking can help avoid errors in your JavaScript code going forward.
|
||||
- [性能优化模式](https://tech.meituan.com/2015/12/10/performance-tuning-pattern.html)
|
||||
- [Simplifying File Saving with JavaScript Blobs and Wails: A Step-by-Step Guide](https://www.shrey.com/blog/simplifying-file-saving-with-javascript-blobs-and-wails-a-step-by-step-guide)
|
||||
- [How to Persist a Logged-in User in React](https://www.freecodecamp.org/news/how-to-persist-a-logged-in-user-in-react/)
|
||||
- [开源对象存储服务：Minio – 标点符](https://www.biaodianfu.com/minio.html)
|
||||
- [探索前端跨组件通信：EventBus在Vue和React中的应用 - 掘金](https://juejin.cn/post/7321271017430908980)
|
||||
- [重新思考浏览器输入了 URL 并按下回车之后到底发生了什么——本地 DNS 部分](https://nova.moe/rethink-type-url-dns/)
|
||||
- [Authentication in Nuxt 3](https://dev.to/rafaelmagalhaes/authentication-in-nuxt-3-375o)
|
||||
- 很实用，照着做了
|
||||
- [FileReader - Web APIs | MDN](https://developer.mozilla.org/en-US/docs/Web/API/FileReader?retiredLocale=de)
|
||||
- 用于图片转Base64
|
||||
- [Why I’m learning Deno](https://commonlog.jjude.com/why-im-learning-deno/)
|
||||
- [如何设计优秀的 URL？](https://segmentfault.com/a/1190000044493390)
|
||||
- 比较标题党的一篇文章，并没有说「如何设计」，但是里面一些相关文章还不错：
|
||||
- [URL Design · by Kyle Neath](https://warpspire.com/posts/url-design/)
|
||||
|
||||
- [Four Cool URLs - Alex Pounds’ Blog](https://alexpounds.com/blog/2018/12/29/four-cool-urls)
|
||||
|
||||
- [console.delight – Frontend Masters Boost](https://frontendmasters.com/blog/console-delight/)
|
||||
|
||||
## 杂谈
|
||||
- [How to Make Learning as Addictive as Social Media | Luis Von Ahn | TED](https://www.youtube.com/watch?v=P6FORpg0KVo)
|
||||
- 讲 Duolingo 是如何借鉴 Social Media App 的机制让人上瘾的，一个是用打卡机制，另一个是用AI选择合适的时间发送App学习提醒。
|
||||
挺有意思的。
|
||||
- [Superlinear Returns](http://paulgraham.com/superlinear.html)
|
||||
|
||||
- [gilest.org: Make the indie web easier](https://gilest.org/indie-easy.html)
|
||||
|
||||
- [Rich Bowen: 无论你在创造什么，最终交付的是信任](https://segmentfault.com/a/1190000044267214)
|
||||
- [How To Code Everyday](https://www.youtube.com/watch?v=a0eB7tMkvs4)
|
||||
> Coding Menu就是把不同的Coding Task按时间分类，按当天的精力选取适合的Task
|
||||
- [互联网故障背后的草台班子们](https://mp.weixin.qq.com/s/e7S_USwAkg6ACLOcHHX9rg)
|
||||
## 有意思
|
||||
- [André Staltz - Some people want to run their own servers](https://staltz.com/some-people-want-to-run-their-own-servers.html)
|
||||
- [Four Magic Words](https://www.fortressofdoors.com/four-magic-words/)
|
||||
- 非常有意思的一篇，看得我坐过站了
|
||||
- [Illinois｜专辑浅谈｜关于亡灵、UFO、黑鹰、连环杀手、黄蜂、僵尸…与爱](https://mp.weixin.qq.com/s/8_y6Opx2orhhT-phbX_yHg)
|
||||
- [超还原！three.js复刻原神启动，网页就能玩](https://www.bilibili.com/video/BV1E8411v7xy)
|
||||
- [zoxide has forever improved the way I navigate in the terminal. - YouTube](https://www.youtube.com/watch?v=aghxkpyRVDY)
|
||||
- cd 命令的替代品，但是我没试过，写完这篇博文试试
|
||||
|
||||
## 其他
|
||||
- [《风花雪月》全人物培养攻略之：青狮学级](https://www.bilibili.com/read/cv3334448/)
|
||||
- 吾生也有涯，下棋也无涯
|
||||
- 书：《网络是怎样连接的》
|
||||
143
urara/2024-09-14-obsidian-apperance/+page.md
Normal file
143
urara/2024-09-14-obsidian-apperance/+page.md
Normal file
|
|
@ -0,0 +1,143 @@
|
|||
---
|
||||
title: 使用 Obsidian 三年之后的设置 （外观篇）
|
||||
created: 2024-09-14
|
||||
summary: 爱用 Minimal 主题就是 Minimalist 吗
|
||||
tags:
|
||||
- Obsidian
|
||||
image: /2024-09-14-obsidian-apperance/cover.png
|
||||
---
|
||||
截止这篇文章发布的时候（2024年9月14日），我的 Obsidian 库里面有2874个文档，最早的文件创建时间是 2021年5月18日。我的设备是Macbook Pro M1 （2020），目前还足够跑一个这样的Obsidian仓库，没有卡慢的情况。
|
||||
|
||||
太长的文章我没有信心写完，所以打算一篇一篇写，这是第一篇，关于我在Obsidian里面做的一些面子工程。
|
||||
|
||||
## 个人偏好
|
||||
虽然本人姑且算是一个程序员，但是我喜欢All in Light mode，喜欢小的字体（15、14px左右）、喜欢低饱和的配色，比如[Nord](https://www.nordtheme.com/)、Catppuccin这种，喜欢纤细扁平的UI风格，如果有一点干净清透的阴影就更好了，还喜欢有一点圆角的图片（我是说4px左右）。
|
||||
|
||||
所以我的配置也是这种风格的，请看目前的配置：
|
||||
|
||||
|
||||
|
||||
|
||||
其实对于目前的样式，我是有一些不满意的，就是……左边工具栏好多风格不一的icon，而且都是些我不太用得上能，没事……再忍忍，等写到插件篇，我会去整理的。
|
||||
## 基础样式
|
||||
### 字体
|
||||
|
||||
#### 字体选择策略
|
||||
忘记在哪里看到过，衬线体适合阅读，无衬线体适合用作界面UI字体，因为无衬线体更简洁容易辨别，认知负担小。
|
||||
|
||||
所以我在Obsidain上也是采取这样的策略，目前我的字体设置：
|
||||
- 界面字体：[阿里巴巴普惠体2.0](https://done.alibabadesign.com/puhuiti2.0)
|
||||
- 正文字体：
|
||||
- 英文：Spectral
|
||||
- 中文：朱雀仿宋
|
||||
|
||||
目前的正文字体比较正式，像印刷体，之前为了增加记笔记的趣味性，也用过这些搭配：
|
||||
- 界面字体：
|
||||
- iA Writer Quatto S
|
||||
- 正文字体：
|
||||
- 英文：iA Writer Quatto S
|
||||
- 中文：[LXGW Bright](https://github.com/lxgw/LxgwBright) (这个字体中英文都很美丽，也可以中英文共用一个字体)
|
||||
|
||||
代码字体一直都是Jetbrains Mono Nerd Font，因为Nerd Font支持很多Logo，所以我很喜欢，可以在这里选择自己喜欢的下载：[Nerd Fonts - Iconic font aggregator, glyphs/icons collection, & fonts patcher](https://www.nerdfonts.com/font-downloads)， 顺带一提，我在IDE也用的 Jetbrains Mono Nerd Font。
|
||||
|
||||
字体大小是15px。
|
||||
|
||||
#### 如何分别设置中英文字体
|
||||
Obsidian上的字体设置有点像CSS里面的，有优先级和Fallback，越上面的字体优先级越高，当上面的字体无法找到对应的字时，就会回落到下一个字体设置。
|
||||
|
||||
|
||||
|
||||
比如说上图中的字体，Spectral为英文字体，没有中文字符，所以当Spectral中没有中文字符的时候就会使用Zhuque Fangsong中的字体，所以我们可以把英文字体放在第一个，然后中文字体放在第二个，以此来分别设置中英文的字体。
|
||||
|
||||
我比较奇怪，在网上看到比较好看的网页字体时会马上F12去查看用了什么字体，然后想办法下载到电脑上，最后收集了好多漂亮的字体，但又总是用回那几个。
|
||||
|
||||
### 堆叠标签页
|
||||
默认状态下Obsidian的标签页是像浏览器那样水平一个一个横着延展的：
|
||||
|
||||
|
||||
|
||||
但是我喜欢设置成像书本一样堆叠的标签页：
|
||||
|
||||
|
||||
如果用可以用滚轮左右滑动的鼠标就很方便，比如说我用的魔法老鼠和触控板，手指轻轻一滑就可以左右滑动切换页面，也许这也是我为什么还在用魔法老鼠的原因之一吧。
|
||||
|
||||
设置方法如下：
|
||||
|
||||
|
||||
|
||||
题外话：
|
||||
这个设置我都忘了什么时候设置的了，上次朋友问我，找了好久。这个功能在我一开始用Obsidian的时候是没有的，我是在[+ Start Here - LYT Kit](https://notes.linkingyourthinking.com/Cards/%2B+Start+Here)的设置教程里看到的，当时是用一个叫 [Sliding Panes](https://github.com/deathau/sliding-panes-obsidian) 来设置的，最近一年多才加上堆叠标签页的功能。于是我就把Sliding Panes卸载了，现在社区里也找不到这个插件了。
|
||||
|
||||
### 其他
|
||||
- 我没有修改Obsidain的icon，即使我觉得不好看，但是也不是不能看，所以就懒得换了。
|
||||
- 没有开启半透明效果
|
||||
- 没有开启自动Dark Mode, 再说了，电脑夜如白昼的话，开了也相当于没开。
|
||||
|
||||
## 主题
|
||||
|
||||
### Things
|
||||
|
||||
用了很久的 [Things](https://github.com/colineckert/obsidian-things) ，这个主题的风格比较正式、整洁，标签的样式也很清新，我曾经参照Nord的配色修改了各个标题的颜色，但后面不知道为什么不见了，这个主题下的图片有很漂亮的圆角和阴影，我很喜欢。但我还是慢慢地厌倦了。
|
||||
|
||||
|
||||
|
||||
### Minimal
|
||||
在很长一段时间，直到今天我都在用[Minimal](https://minimal.guide/home) 这个主题，这是我最喜欢的主题，它简洁优雅，没有对Obsidian本体做太多UI上的修改就使得整个界面焕然一新，就像人剪了个适合自己的发型那样，还能看出来是自己。（好烂的比喻）
|
||||
|
||||
Minimal 主题最好配合插件[Minimal Theme Setting](obsidian://show-plugin?id=obsidian-minimal-settings)使用，配合插件可以使用更多的配色，做更多细致的调整。我最喜欢的配色是Nord配色，加上Background Contrast设置为All Light，All Light 模式下底色更白，更统一一点，插件里还有E-ink主题，有墨水屏显示器的朋友可以试一下。
|
||||
|
||||
Minimal Theme setting 中可选的主题：
|
||||
|
||||
|
||||
我还喜欢用彩色的Heading，需要在插件中打开这个：
|
||||
|
||||
其他的设置参考上图，我习惯只对外链用下划线，内链不用，这样我能比较容易地区分链接类型，然后status bar(右下角的那条东西) 也全隐藏起来。
|
||||
|
||||
对了，Minimal还有一个很好的功能，就是对Checklist的样式做了特别的CSS，感觉很像Bullet Journal里面的list，可以参考：[Checklists - Minimal Documentation](https://minimal.guide/checklists)
|
||||
|
||||
大概是这个样子：
|
||||
|
||||
|
||||
|
||||
其实我还装了很多其他的主题，但我已经不再使用它们了，所以不再赘述。
|
||||
|
||||
## 美观用的插件
|
||||
### Hider
|
||||
[GitHub - kepano/obsidian-hider: Hide Obsidian UI elements such as tooltips, status, titlebar and more](https://github.com/kepano/obsidian-hider)
|
||||
|
||||
一个可以自定义隐藏部分Obsidian UI组件的插件，比如说隐藏Scroll Bar之类的，和Minimal是同一个作者，也就是现在Obsidian的CEO[^1]。其实这个插件我已经没有在用了，可能是Minimal Theme Setting里已经包含了其中的功能，所以我不太用得上了，但是因为已经用了两年多，所以还是列一下。
|
||||
|
||||
|
||||
### Style Setting
|
||||
[GitHub - mgmeyers/obsidian-style-settings: A dynamic user interface for adjusting theme, plugin, and snippet CSS variables within Obsidian](https://github.com/mgmeyers/obsidian-style-settings)
|
||||
|
||||
这个插件可以用于调整很多主题的颜色配置等细节，如果那个主题支持的话，像上面提到的Things, Minimal都可以在这里调整。
|
||||
|
||||
因为我很少用H1，大标题总是从H2开始，所以我给Minimal的H2标题加了下划线，可以这样设置：
|
||||
|
||||
|
||||
### Admonitions
|
||||
|
||||
[GitHub - javalent/admonitions: Adds admonition block-styled content to Obsidian.md](https://github.com/javalent/admonitions)
|
||||
|
||||
给Obsidian里的Callout Block添加动画效果，我比较少用Callout，但是样式我挺喜欢的。
|
||||
|
||||
### List Callouts
|
||||
[GitHub - mgmeyers/obsidian-list-callouts: Create callouts in lists in Obsidian.](https://github.com/mgmeyers/obsidian-list-callouts)
|
||||
|
||||
可以给List加上icon和颜色的插件，因为我记不住符号，所以不怎么用，但我很喜欢。
|
||||
|
||||
Demo：
|
||||
|
||||
|
||||
### File Explorer Count
|
||||
文件夹内文件数量显示的插件，这应该也算是界面美观的一种？很实用。本文最开头提到的计数就是用这个插件算出来的。
|
||||
|
||||
|
||||
|
||||
### Lapel
|
||||
[GitHub - liamcain/obsidian-lapel: 🤵 Dress up your editor. Obsidian plugin to show the heading level in the gutter.](https://github.com/liamcain/obsidian-lapel)
|
||||
|
||||
一个在编辑器左侧显示Heading层次的插件，说不上有什么用，但觉得还是有点用。我一直开着。
|
||||
|
||||
[^1]: 时间过得真快，我一开始用他插件的时候，他还只是一个活跃的用户呢，结果某天就变成了CEO！
|
||||
117
urara/2024-10-14-obsidian-highlight/+page.md
Normal file
117
urara/2024-10-14-obsidian-highlight/+page.md
Normal file
|
|
@ -0,0 +1,117 @@
|
|||
---
|
||||
title: 为Obsidian添加仿真荧光笔高亮样式
|
||||
created: 2024-10-14
|
||||
summary: Subtle highlight style for Obsidian
|
||||
tags:
|
||||
- Obsidian
|
||||
- CSS
|
||||
---
|
||||
效果如图：
|
||||
|
||||
|
||||
参考：
|
||||
<iframe height="300" style="width: 100%;" scrolling="no" title="Subtle text "highlighter" in pure CSS" src="https://codepen.io/cassidoo/embed/JjQOBZB?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
|
||||
See the Pen <a href="https://codepen.io/cassidoo/pen/JjQOBZB">
|
||||
Subtle text "highlighter" in pure CSS</a> by Cassidy (<a href="https://codepen.io/cassidoo">@cassidoo</a>)
|
||||
on <a href="https://codepen.io">CodePen</a>.
|
||||
</iframe>
|
||||
|
||||
鉴于安装的插件和CSS样式太多，我强制用了`!important`, 所以代码比较丑陋。
|
||||
|
||||
## 如何安装
|
||||
|
||||
### 1. 安装插件highlightr
|
||||
如果只需要黄色样式的高亮效果，则不需要安装这个插件。
|
||||
安装链接：[obsidian://show-plugin?id=highlightr-plugin](obsidian://show-plugin?id=highlightr-plugin)
|
||||
|
||||
highlight method设置为`css-classed`
|
||||
|
||||
|
||||
### 2. 安装CSS代码片段
|
||||
首先打开CSS代码片段存放的文件夹：
|
||||
|
||||
|
||||
然后点击 -> [subtle-hightlight.css](/2024-10-14-obsidian-highlight/subtle-highlight.css)下载css代码，下载后将`subtle-highlight.css`存到代码片段的文件夹中
|
||||
|
||||
或者复制下面的代码后在该文件夹下创建一个叫`subtle-highlight.css` 的文件：
|
||||
```css
|
||||
span.cm-highlight{
|
||||
background: linear-gradient(
|
||||
100deg,
|
||||
#ffffaf00 1%,
|
||||
#ffffaf 2.5%,
|
||||
#ffffaf80 5.7%,
|
||||
#ffffaf1a 93%,
|
||||
#ffffafb4 95%,
|
||||
#ffffaf00 98%
|
||||
),
|
||||
linear-gradient(182deg, #ffffaf00, #ffffaf4d 8%, #ffffaf00 15%) !important;
|
||||
}
|
||||
|
||||
mark:not([class]) {
|
||||
background: linear-gradient(
|
||||
100deg,
|
||||
#ffffaf00 1%,
|
||||
#ffffaf 2.5%,
|
||||
#ffffaf80 5.7%,
|
||||
#ffffaf1a 93%,
|
||||
#ffffafb4 95%,
|
||||
#ffffaf00 98%
|
||||
),
|
||||
linear-gradient(182deg, #ffffaf00, #ffffaf4d 8%, #ffffaf00 15%) !important;
|
||||
}
|
||||
|
||||
.hltr-pink {
|
||||
background: linear-gradient(
|
||||
100deg,
|
||||
#ffafd400 1%,
|
||||
#ffafd4 2.5%,
|
||||
#ffafd480 5.7%,
|
||||
#ffafd41a 93%,
|
||||
#ffafd4b4 95%,
|
||||
#ffafd400 98%
|
||||
),
|
||||
linear-gradient(182deg, #ffafd400, #ffafd44d 8%, #ffafd400 15%) !important;
|
||||
}
|
||||
|
||||
.hltr-green {
|
||||
background: linear-gradient(
|
||||
100deg,
|
||||
#b8ffaf00 1%,
|
||||
#b8ffaf 2.5%,
|
||||
#b8ffaf80 5.7%,
|
||||
#b8ffaf1a 93%,
|
||||
#b8ffafb4 95%,
|
||||
#b8ffaf00 98%
|
||||
),
|
||||
linear-gradient(182deg, #b8ffaf00, #b8ffaf4d 8%, #b8ffaf00 15%) !important;
|
||||
}
|
||||
|
||||
.hltr-blue {
|
||||
background: linear-gradient(
|
||||
100deg,
|
||||
#afd7ff00 1%,
|
||||
#afd7ff 2.5%,
|
||||
#afd7ff80 5.7%,
|
||||
#afd7ff1a 93%,
|
||||
#afd7ffb4 95%,
|
||||
#afd7ff00 98%
|
||||
),
|
||||
linear-gradient(182deg, #afd7ff00, #afd7ff4d 8%, #afd7ff00 15%) !important;
|
||||
}
|
||||
```
|
||||
|
||||
添加css文件后点击左边的“重新加载按钮”：
|
||||
|
||||
|
||||
找到该文件后打开：
|
||||
|
||||
|
||||
然后就可以啦
|
||||
|
||||
## 如何使用
|
||||
对于黄色来说，用 `==需要高亮的内容==` 就可以了，而对于其他颜色，安装highlightr之后，选择需要高亮的文字，然后右键选择颜色即可，如图：
|
||||
|
||||
|
||||
目前只有粉色、绿色、蓝色有荧光笔仿真效果。
|
||||
|
||||
125
urara/2024-10-28-git/+page.md
Normal file
125
urara/2024-10-28-git/+page.md
Normal file
|
|
@ -0,0 +1,125 @@
|
|||
---
|
||||
title: Git使用随记
|
||||
created: 2024-10-28
|
||||
summary: git alias,git add -A,git add .
|
||||
tags:
|
||||
- Git
|
||||
---
|
||||
|
||||
## 最近常用Alias
|
||||
|
||||
### git random
|
||||
功能：在制定的某个时间段内随机提交，并且每次提交都要比前次提交时间晚，适用于 MacOS、Linux，其他系统未经验证。
|
||||
|
||||
比如说今晚22:00到明天3:00之间：
|
||||
```bash
|
||||
git config --global alias.random '!f() {
|
||||
# 获取最后一次提交的时间戳
|
||||
last_commit_time=$(git log -1 --format=%ct 2>/dev/null)
|
||||
|
||||
# 如果没有之前的提交，使用当前时间作为基准
|
||||
if [ -z "$last_commit_time" ]; then
|
||||
last_commit_time=$(date +%s)
|
||||
fi
|
||||
|
||||
# 计算下一个可用的时间戳（最后提交时间 + 1分钟）
|
||||
next_available_time=$((last_commit_time + 60))
|
||||
|
||||
# 获取今天 22:00 的时间戳
|
||||
if [[ "$OSTYPE" == "darwin"* ]]; then
|
||||
# MacOS
|
||||
today=$(date -v22H -v00M -v00S +%s)
|
||||
tomorrow=$(date -v+1d -v02H -v59M -v59S +%s)
|
||||
else
|
||||
# Linux
|
||||
today=$(date -d "$(date +%Y-%m-%d) 22:00:00" +%s)
|
||||
tomorrow=$(date -d "$(date -d tomorrow +%Y-%m-%d) 02:59:59" +%s)
|
||||
fi
|
||||
|
||||
# 确保下一个可用时间在今天 22:00 到明天 02:59 之间
|
||||
if [ $next_available_time -lt $today ]; then
|
||||
next_available_time=$today
|
||||
elif [ $next_available_time -gt $tomorrow ]; then
|
||||
next_available_time=$tomorrow
|
||||
fi
|
||||
|
||||
# 在下一个可用时间和明天 02:59 之间随机选择一个时间
|
||||
if [[ "$OSTYPE" == "darwin"* ]]; then
|
||||
# MacOS
|
||||
random_time=$(jot -r 1 $next_available_time $tomorrow)
|
||||
FISH_DATE=$(date -r $random_time "+%Y-%m-%d %H:%M:%S")
|
||||
else
|
||||
# Linux
|
||||
random_time=$(shuf -i $next_available_time-$tomorrow -n 1)
|
||||
FISH_DATE=$(date -d "@$random_time" "+%Y-%m-%d %H:%M:%S")
|
||||
fi
|
||||
|
||||
# 如果没有提供提交信息，使用默认信息
|
||||
commit_message=${1:-"Random commit at $FISH_DATE"}
|
||||
|
||||
# 设置环境变量并提交
|
||||
GIT_AUTHOR_DATE="$FISH_DATE" \
|
||||
GIT_COMMITTER_DATE="$FISH_DATE" \
|
||||
git commit -m "$commit_message"
|
||||
}; f'
|
||||
```
|
||||
|
||||
### git add -A + git commit -m "" 合并，快速提交
|
||||
|
||||
设置：
|
||||
```bash
|
||||
git config --global alias.fast '!git add -A && git commit -m'
|
||||
```
|
||||
|
||||
使用：
|
||||
```bash
|
||||
git fast "Your commit message here"
|
||||
```
|
||||
|
||||
### undo
|
||||
撤销最后一次commit，但保留所有更改
|
||||
|
||||
设置：
|
||||
```bash
|
||||
git config --global alias.undo 'reset --soft HEAD^'
|
||||
```
|
||||
|
||||
使用：
|
||||
```bash
|
||||
git undo
|
||||
```
|
||||
|
||||
### cancel
|
||||
完全撤销最后一次commit，丢弃所有更改
|
||||
|
||||
设置：
|
||||
```bash
|
||||
git config --global alias.cancel 'reset --hard HEAD^'
|
||||
```
|
||||
|
||||
使用：
|
||||
```bash
|
||||
git cancel
|
||||
```
|
||||
|
||||
### `git add -A` 和 `git add .` 的区别
|
||||
|
||||
一年多前和朋友讨论过这个问题，但是我没太理解，我一直用的是 git add -A。最近突然懂了：因为`.` 表示的是当前目录，所以 `git add .` 只会添加当前目录以及其子目录下的改动（类似于相对路径）；而 A 表示 All，所以 `git add -A `会添加整个工作区的变动，不管在哪个目录执行。
|
||||
|
||||
不过如果在根目录下执行，这两个命令就是等价的。
|
||||
|
||||
### Git 学习资料
|
||||
按推荐程度排序：
|
||||
- [Learn Git Branching](https://learngitbranching.js.org/)：既有图形可视化，又有跟使用场景贴近的练习，文字讲解也很清晰，但个人建议阅读繁体版本。
|
||||
- [Oh My Git!](https://ohmygit.org/): 游戏化的教程，很有意思，但还是有点抽象，跟实际场景不是特别贴切。
|
||||
- [gitchat](https://wkevin.github.io/GitChat/gitchat.html#round-1-%E8%B5%B7%E6%AD%A5): 风趣易懂的文字教程
|
||||
- [Learn Git with Bitbucket Cloud | Atlassian Git Tutorial](https://www.atlassian.com/git/tutorials/learn-git-with-bitbucket-cloud)
|
||||
- [Pro Git 第二版（中文版） · 看云](https://www.kancloud.cn/kancloud/progit)
|
||||
- [Git Time](https://git.bradwoods.io/)：一个交互式的Git教程/游戏，更像玩游戏，玩了没记住什么（
|
||||
|
||||
## 其他
|
||||
- [git cheatsheet](https://ndpsoftware.com/git-cheatsheet.html)
|
||||
- [github skills](https://skills.github.com/)
|
||||
- [Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/)
|
||||
|
||||
借此机会，我对之前的文章：[Git · 常用操作笔记](https://sevic.me/2022-05-25-git/) 中的命令表格进行了更新。
|
||||
172
urara/2025-03-22-reading/+page.md
Normal file
172
urara/2025-03-22-reading/+page.md
Normal file
|
|
@ -0,0 +1,172 @@
|
|||
---
|
||||
title: 我在看什么 · 2024年3月 - 2025年3月
|
||||
created: 2025-03-22
|
||||
summary:
|
||||
tags:
|
||||
- 我在看什么
|
||||
---
|
||||
时间过得真快，上次写这个系列还是2024年2月，没想到过去一年了。
|
||||
|
||||
我的信息源：
|
||||
- Readwise Reader的每周Wisread订阅
|
||||
- 我的Miniflux RSS Reed订阅源
|
||||
- 好友推荐的文章
|
||||
- 某些推特[^1]上关注的博主推荐的书
|
||||
|
||||
## 个人成长
|
||||
- [Do Quests, Not Goals](https://www.raptitude.com/2024/08/do-quests-not-goals/)
|
||||
- 我不知道怎么翻译这个Quest比较好，感觉Focumn里面的理念跟这篇文章里面提到的蛮像的
|
||||
- [Find your own axis | thesephist.com](https://thesephist.com/posts/axis/)
|
||||
> Career isn't a flat ordered list of professions where you rank things by how much success each profession signifies, and then pick the one closest to the top
|
||||
- [Remove Labels | Cheng-Wei Hu](https://chengweihu.com/remove-labels/)
|
||||
> Labels can manifest as tangible symbols, such as shirt logos, or intangible terms that we or society assign to us, like being called "smart" or "cool". And beyond serving as outward signals, labels also resonate internally, influencing our actions through our natural tendency.
|
||||
>
|
||||
> We draw an unnecessary line for our behavior and potential because we label ourselves as a "non-math" person.
|
||||
>
|
||||
> To embrace complete freedom and follow our intrinsic curiosity, we should remove unnecessary labels until we can completely ignore them. While labels can be useful, we should be wary of their subconscious influence. We must choose our labels carefully and consciously.
|
||||
- [Inside the Toolkit: PKM App Essentials - by Renee De Four](https://anthologyofone.substack.com/p/inside-the-toolkit-pkm-app-essentials)
|
||||
- [Stop Worrying & Start Doing: A Simple Way to Organize Your Tasks - YouTube](https://www.youtube.com/watch?v=dR7UtedSoZ8)
|
||||
- 一天最好不要多于7个task（保持5～7个比较合适）
|
||||
- 以最难的task开始（有点像highlight里面提到的), 然后隐藏其他任务，先专注最重要的
|
||||
- 完成后可以从之后的task list 里面挑选
|
||||
- [Putting Ideas into Words](http://paulgraham.com/words.html)
|
||||
> I'm saying is that however much you learn from exploring ideas in other ways, you'll still learn new things from writing about them.
|
||||
> The reason I've spent so long establishing this rather obvious point is that it leads to another that many people will find shocking. If writing down your ideas always makes them more precise and mord f x de complete, then no one who hasn't written about a topic has fully formed ideas about it. And someone who never writes has no fully formed ideas about anything nontrivial
|
||||
- [Growth Without Goals - Colossus](https://joincolossus.com/growth-without-goals/)
|
||||
- [The Art of Finishing \| ByteDrum](https://www.bytedrum.com/posts/art-of-finishing/)
|
||||
我很喜欢这篇文章，作者分析的那些我们挖坑又不填的心态分析得很到位，一个未完成的项目是“充满希望的”“有吸引力的”，但完成了的，就要接受审判。还有每次继续填坑的时候总是先升级一些包的版本，解决新出现的兼容问题，做了一大堆之后发现功能上什么都没做，总是重构再重构……然后未完成的项目也会成为一个越背越重的心理包袱。距离我第一次读这篇文章已经过去三个月了，但我还是印象很深刻。
|
||||
|
||||
- 语言学习： [自学德语这半年](https://zhuanlan.zhihu.com/p/455675697)
|
||||
|
||||
## 工作与团队管理
|
||||
- [Pmarchive · How to hire the best people you’ve ever worked with](https://pmarchive.com/how_to_hire_the_best_people.html)
|
||||
> If you can't find anything -- if a candidate has just followed the rules their whole lives, showed up for the right classes and the right tests and the right career opportunities without achieving something distinct and notable, relative to their starting point -- then they probably aren't driven.
|
||||
>
|
||||
> One way to test for an aspect of ethics -- honesty -- is to test for how someone reacts when they don't know something.
|
||||
> Pick a topic you know intimately and ask the candidate increasingly esoteric questions until they don't know the answer.
|
||||
> They'll either say they don't know, or they'll try to bullshit you.
|
||||
> Guess what. If they bullshit you during the hiring process, they'll bullshit you once they're onboard.
|
||||
|
||||
- [Use A Work Journal To Recover Focus Faster And Clarify Your Thoughts](https://fev.al/posts/work-journal/) 读完这篇文章后我开始写工作日志了。工作日志能在切换任务时保留一些context。(但是我现在又不写了 )
|
||||
> Write notes of what you’re doing and what you’re thinking. When you drop the pen and get back at it, read the last bit. That’s it.
|
||||
>
|
||||
> I guess that’s kind of it: if you’re having trouble switching between things or getting focused, try writing what you’re doing, and read the last couple sentences when you resume. Maybe it will help you. Maybe it won’t. Or maybe I’m an idiot who needs crutches. But hey, who knows!
|
||||
- [Notes for new hires | Clinton Blackburn](https://dev.clintonblackburn.com/2024/07/07/notes-for-new-hires)
|
||||
通过这篇文章学到了friction log的这种东西，感觉很有用，但是我没写过
|
||||
> The idea is simple: take note of all the things—not just product-related—that are causing you trouble.
|
||||
- 关于Feature Factory:
|
||||
- [cutle.fish/blog/12-signs-youre-working-in-a-feature-factory](https://cutle.fish/blog/12-signs-youre-working-in-a-feature-factory)
|
||||
- [12 Signs You’re Working in a Feature Factory - 3 Years Later | Amplitude](https://www.amplitude.com/blog/12-signs-youre-working-in-a-feature-factory-3-years-later)
|
||||
- [Slop is Good • furbo.org](https://furbo.org/2024/08/26/slop-is-good/)
|
||||
- [Hot Potato Routing | 卡瓦邦噶！](https://www.kawabangga.com/posts/6357)
|
||||
> 维基百科中说，Hot Potato Routing 是大部分运营商的路由策略。Hot-potato routing (or “closest exit routing”) is the normal behavior generally employed by most ISPs.
|
||||
> 每个人都在用最自私的策略来降低自己的工作量，但是却让全局的工作量增加了，自己的工作量实际上也是增加了的，整体的服务质量却降低了——用户的请求需要绕得更远才能到达目标。
|
||||
> 这不就是很多大公司的工作方式吗？
|
||||
> 大公司给每个人规定了 KPI（就不提 OKR 了，OKR 在大部分公司的实践其实就是 KPI）。收到新的任务，每个人做的最优选择就是把和 KPI 不相关的工作「转发」出去。
|
||||
- [Agile vs Introverts - Event-Driven.io](https://event-driven.io/en/agile_vs_introverts/)
|
||||
|
||||
## 设计与用户体验
|
||||
- [Homepage Design: 5 Fundamental Principles](https://www.nngroup.com/articles/homepage-design-principles/)
|
||||
- [Guidelines for Visualizing Links](https://www.nngroup.com/articles/guidelines-for-visualizing-links/)
|
||||
- [段落開頭為什麼要「空兩格」？ - Bobby Tung - Medium](https://bobtung.medium.com/%E6%AE%B5%E8%90%BD%E9%96%8B%E9%A0%AD%E7%82%BA%E4%BB%80%E9%BA%BC%E8%A6%81-%E7%A9%BA%E5%85%A9%E6%A0%BC-99287e0653a9)
|
||||
> 中文、日文段落開頭空一、兩個字的做法，在一百年前從西文排版引進「縮排」，目的是為了改革過去沒有標點、段落不易區隔的問題。
|
||||
> 而網頁技術的出現，重新以無限空間的捲軸取代了分頁，進而約定成俗地以段落間空白來作為段落區分的方法。多少也可以當作革了印刷的命。把印刷時代的段首縮排帶進網頁上，可能會顯得多餘。
|
||||
- [User Needs](https://www.interaction-design.org/literature/topics/user-needs)
|
||||
- [How to Design UI Forms in 2024: Your Best Guide \| IxDF](https://www.interaction-design.org/literature/article/ui-form-design)
|
||||
- [Checkout Page Design, Best Practices, Templates & Examples](https://www.bolt.com/thinkshop/checkout-page-best-practices-templates-examples-to-end-abandonment)
|
||||
- [Why is Vertical Rhythm an Important Typography Practice? \| Zell Liew](https://zellwk.com/blog/why-vertical-rhythms/)
|
||||
|
||||
## 作为前端开发
|
||||
- [WebRTC Architecture Basics: P2P, SFU, MCU, and Hybrid Approaches | by Mukund Iyengar | SecureMeeting | Medium](https://medium.com/securemeeting/webrtc-architecture-basics-p2p-sfu-mcu-and-hybrid-approaches-6e7d77a46a66)
|
||||
- [How to Create and Publish an NPM Package – a Step-by-Step Guide](https://www.freecodecamp.org/news/how-to-create-and-publish-your-first-npm-package/)
|
||||
- [Build Your Own: React, ProseMirror, and Redux](https://nytimes.github.io/oak-byo-react-prosemirror-redux/)
|
||||
PS: 我还没看完
|
||||
- [Tailwind is a Leaky Abstraction \| jakelazaroff.com](https://jakelazaroff.com/words/tailwind-is-a-leaky-abstraction/)
|
||||
- [URL 对象](https://zh.javascript.info/url)
|
||||
- [The Birth of “Disable JavaScript”](https://blog.jim-nielsen.com/2023/the-birth-of-disable-javascript/)
|
||||
- [mess with dns](https://messwithdns.net/)
|
||||
|
||||
## 自己做开发
|
||||
- [Frontend Resources V2! 🚀 - DEV Community](https://dev.to/miguelrodriguezp99/frontend-resources-v2-57mj)
|
||||
- [Freesets](https://freesets.dev/)
|
||||
- [Tailwind Hero Components | Tailkits](https://tailkits.com/components/tailwind-hero-components/)
|
||||
- [TinySnap：上线 2 个月收到 6 位数的收购报价，我们采访了产品背后的独立开发者 · w2solo - 独立开发者社区](https://w2solo.com/topics/3682)
|
||||
> 我认为独立开发的商业模式的本质是这样的：我实现了一个想法，而有人愿意为这个想法付费。整个独立开发过程中最重要的就是先验证你的想法是不是有人愿意付费
|
||||
>
|
||||
> SEO 就是隐性的营销手段，ROI 产出非常高。对于技术开发者来说，SEO 是很容易搞定的，但是大家意识到这个东西都比较晚。我们甚至可以在产品发布之前就开始做 SEO，把关键词和竞争对手的数据拿来分析，可以早一点开始做内容营销，多写一点文章，不管是自己写还是用 AI 生成，把关键词放在文章里。时间长一点就会看到非常明显的效果。
|
||||
- [For your next side project, make a browser extension](https://www.geoffreylitt.com/2023/01/08/for-your-next-side-project-make-a-browser-extension.html)
|
||||
> Now that I had more users, my #1 priority was to “earn the pixels”: that is, to make the extension feel native to Twitter, never cause glitches, and generally offer a high-quality experience. I wanted to make sure people never had a reason to disable the extension.
|
||||
- [动手写一个 Hugo 博客主题（性能篇） \| Yuanji's Blog](https://blog.yuanji.dev/posts/creating-a-hugo-theme-2/)
|
||||
- [How I build MVPs within 3 days](https://vadimdemedes.com/posts/how-i-build-mvps-within-3-days/)
|
||||
> Final advice, don’t switch to another project until the MVP of your current idea is shipped.
|
||||
Otherwise, you’ll end up right where you started.
|
||||
Try to build up an attitude to finish one thing before moving on.
|
||||
It will pay off.
|
||||
|
||||
## 工具
|
||||
- [ONCE — Writebook](https://once.com/writebook)
|
||||
- 一个免费的电子书制作工具
|
||||
- [Pomodoro Cat - YouTube](https://www.youtube.com/@PomodoroCat)
|
||||
- 工作番茄钟
|
||||
- [Bash vs Zsh vs Fish | Zell Liew](https://zellwk.com/blog/bash-zsh-fish/)
|
||||
- [The Fish Shell](https://flaviocopes.com/fish-shell/)
|
||||
- [Move a running process into a tmux session \| ./xai.sh](https://xai.sh/2020/10/16/Move-running-process-into-tmux-session.html)
|
||||
- [树莓派：用 Pi-hole 来保护隐私和过滤广告 \|\| 0x01 byte](https://1byte.io/articles/pi-hole-intro/)
|
||||
- [My name is Kyle and I switch browsers too often \| Luke's Wild Website](https://www.lkhrs.com/blog/2022/12/browser-switchers-anonymous/?__readwiseLocation=)
|
||||
- 关于Cursor：
|
||||
- [My Top Cursor Tips (v0.43) - DEV Community](https://dev.to/heymarkkop/my-top-cursor-tips-v043-1kcg)
|
||||
- [学习 Cursor ，拥抱 AI 编程 \| Cursor 101](https://cursor101.com/)
|
||||
- 这里可以买AI Token: [GPTAPI.US - AI模型中转API - OpenAI ChatGPT API低价GPT-4 - Claude 3 Opus、Gemini Pro 1.5、Command R+ API接口](https://www.gptapi.us/)
|
||||
- [MusicBrainz 不完全使用指南](https://www.himiku.com/archives/musicbrainz.html)
|
||||
|
||||
## 游戏
|
||||
- 如何使用 Bitsy : [Claire Morwood 给所有人的 Bitsy 游戏制作教程 A Bitsy Tutorial (2017) ](https://mp.weixin.qq.com/s/mBZMUrvM2Ko4E__VgGiyiw)
|
||||
- 提到的这个游戏蛮有意思的，我很喜欢：[novena by cecile richard](https://haraiva.itch.io/novena)
|
||||
- [像「发微博」一样做游戏，低代码如何颠覆游戏产业-36氪](https://www.36kr.com/p/1676791490421762)
|
||||
> 他认为这是 Bitsy 作为游戏工具最特殊的地方，在于功能简单的同时最大限度保留了创作者和游戏玩家沟通的通道，这种技术平民化特质能将沟通变得更加高效，这才吸引到诗人、小说家、幻想故事爱好者的青睐，他们可以不关注游戏建模、画面性甚至是流程长短。
|
||||
>
|
||||
> 像写「俳句」一样做游戏
|
||||
>
|
||||
> 「在 Itch.io 平台（Bitsy 游戏发布的主要平台）寻找游戏更像是走进一个社区艺术画廊而不是一家商店，任何人都可以被邀请展示他们的作品，为更多样化的开发团队开放场地，而免费游戏的激增使人们不再认为这是一个纯粹的交易空间——你可以为了探索而探索。」
|
||||
|
||||
## 有意思的
|
||||
- [Smashing Newsletter](https://mailchi.mp/smashingmagazine/464-friendly-little-helpers)
|
||||
- 这期Smashing的Newsletter我挺喜欢的，有很多有用的东西，比如说植物手册、音乐时间机器之类的。
|
||||
- [Git 的故事：這一次沒這麼好玩 | 軟體考古學家](https://blog.brachiosoft.com/posts/git/) 我把这篇文章放这个位置是不是不太好？但我觉得确实蛮有意思
|
||||
> 從 4 月 14 日半夜的往後 48 小時，濱野純與 Linus 在該討論串上通了十幾封信。濱野純耐心的修改程式碼，要做到 Linus 心目中的合併。字裡行間不難發現濱野純是 Linus 的忠實粉絲。例如，濱野純會引用 Linus 四年前說過的金句「我永遠是對」，也會適度地拍 Linus 的馬屁。
|
||||
- 动漫巡礼地图：[动画巡礼 - anitabi - 圣地巡礼 - 聖地巡礼 - せいちじゅんれい - 神奇海螺试验场](https://anitabi.cn/map)
|
||||
- [albumwhale](https://albumwhale.com/)
|
||||
- [我们仍未知道那天所看见的 88 × 31 的名字 - gledos的博客](https://gledos.science/88x31.html)
|
||||
- [Radio Garden – Explore live radio by rotating the globe](https://radio.garden/)
|
||||
- From SmashMagazine：
|
||||
- 特别多有意思的小游戏：[Neal.fun](https://neal.fun/)
|
||||
- [IO Tools - Free Online Web Tools](https://iotools.cloud/)
|
||||
- [UCLAB – FH Potsdam -](https://uclab.fh-potsdam.de)
|
||||
- [Steve Ruiz](https://www.steveruiz.me/)
|
||||
无意中翻到了[tldraw](https://tldraw.dev)开发者的博客，感觉这就是我想要成为的样子：创意 + 开发
|
||||
- 这是tldraw一个员工的博客，我也觉得很有意思：[Todepond dot com](https://todepond.com)
|
||||
## 一些想法和观点
|
||||
- [cdixon | What the smartest people do on the weekend is what everyone else will do during the week in ten years](https://cdixon.org/2013/03/02/what-the-smartest-people-do-on-the-weekend-is-what-everyone-else-will-do-during-the-week-in-ten-years)
|
||||
>Business people vote with their dollars, and are mostly trying to create near-term financial returns. Engineers vote with their time, and are mostly trying to invent interesting new things. Hobbies are what the smartest people spend their time on when they aren’t constrained by near-term financial goals.
|
||||
- [Rock stars have a boss? \| Derek Sivers](https://sive.rs/noboss)
|
||||
> But you only have a boss if you choose to! Nobody is making you serve these masters.
|
||||
> Of course, if you don’t want a boss, then everything is up to you. Less promotion, but more freedom. Less help, but keeping all your rights. Riding the back roads, not the highway. Serving no one but yourself.
|
||||
Never forget you have the choice.
|
||||
- [Thoughts on Music](https://archive.md/JgrJG)
|
||||
## 书
|
||||
基本上是没看什么书啦。
|
||||
|
||||
- 《软技能》
|
||||
- 《马可瓦尔多》
|
||||
- 《金阁寺》
|
||||
- 《经济学的思维方式》
|
||||
- 漫画
|
||||
- 《去唱卡拉OK吧》
|
||||
- 《女校之星》
|
||||
- 《迷宫饭》
|
||||
- 小说：
|
||||
- 《如何阻止男主发疯》
|
||||
|
||||
感谢阅读，下次再见！
|
||||
|
||||
[^1]: 为什么不叫X？嗯……我不喜欢。
|
||||
|
|
@ -75,6 +75,4 @@ hi[[@]]seviche.cc
|
|||
|
||||
- 2023-04-29 Out of Memory
|
||||
- 2022-05-06 从 Zola 搬到 Urara
|
||||
- 之前：静态博客尝试过 Hugo / Zola / Hexo / Nextra，动态博客尝试过 Ghost / WordPress / QQ 空间（？，部署平台 Vercel 和 Netlify 都试过，目前还没有试过的是 CloudFare Page。
|
||||
|
||||
\*所有文章除特别声明外，均采用 [CC BY-NC-SA 4.0 协议](https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh)，转载请注明出处
|
||||
- 之前：静态博客尝试过 Hugo / Zola / Hexo / Nextra，动态博客尝试过 Ghost / WordPress / QQ 空间（？，部署平台 Vercel 和 Netlify 都试过，目前还没有试过的是 CloudFare Page。
|
||||
67
urara/argon/+page.md
Normal file
67
urara/argon/+page.md
Normal file
|
|
@ -0,0 +1,67 @@
|
|||
---
|
||||
title: CSS · Argon主题的CSS修改
|
||||
created: 2022-01-16 14:04:17
|
||||
tags:
|
||||
- CSS
|
||||
slug: free-axure-cloud
|
||||
summary: 基于最近所学，对当前Argon主题做了一些微小的调整
|
||||
lastmod: 2022-05-07T05:30:35.639Z
|
||||
---
|
||||
|
||||
然后已经不用 Wordpress 了，这个主题加载太慢了（也可能是我自己的问题
|
||||
|
||||
```css
|
||||
/*删掉tag图标*/
|
||||
|
||||
.fa-tags {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/*左侧菜单居中*/
|
||||
.leftbar-menu-item {
|
||||
text-align: center;
|
||||
}
|
||||
/*删掉日历图标*/
|
||||
.fa-calendar-o {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/*说说字体统一大小*/
|
||||
.shuoshuo-date-date {
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.shuoshuo-date-month {
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
/*banner字体改为思源宋体*/
|
||||
.banner-title.text-white {
|
||||
font-family: 'Noto Serif SC', serif;
|
||||
}
|
||||
/*删掉左侧搜索栏*/
|
||||
.card-body.text-center.leftbar-search-button {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/*删掉左侧栏站点名称*/
|
||||
.leftbar-banner.card-body {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/*作者相关链接居中*/
|
||||
.site-author-links a {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/*去掉页脚卡片外形，并缩减边距*/
|
||||
#footer.card {
|
||||
background: none;
|
||||
padding: 0;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
html.darkmode #footer {
|
||||
background: none !important;
|
||||
}
|
||||
```
|
||||
32
urara/axure/+page.md
Normal file
32
urara/axure/+page.md
Normal file
|
|
@ -0,0 +1,32 @@
|
|||
---
|
||||
title: 两种免费发布Axure原型的方式
|
||||
created: 2022-01-21 00:11:17
|
||||
tags:
|
||||
- 实用技巧
|
||||
slug: free-axure-cloud
|
||||
summary: 通过Netlify和Vercel发布
|
||||
lastmod: 2022-04-07T07:24:20.692Z
|
||||
---
|
||||
|
||||
好像很少看到有人提，这里简单记一下思路，我有用 Vercel 成功试验过，跟本地预览效果是一样的，还可以改域名。不过了解过 Netlify 之后，我觉得用 Netlify 更简单，有兴趣的可以再研究一下。
|
||||
|
||||
## Netlify
|
||||
|
||||
需要了解 Netlify 的使用方式
|
||||
|
||||
1. 在 Axure 中导出文档的 HTML 文件：发布>生成 HTML 文件
|
||||
2. 注册并托管到 Netlify
|
||||
3. 上传 HTML 文件：site -> 拖动 HTML 文件夹到下面的虚线区域
|
||||
|
||||
更新方式：再导入一次更新后的文件包
|
||||
|
||||
## Vercel +Github
|
||||
|
||||
需要了解 Github 的基本使用方式和 Vercel
|
||||
|
||||
1. 在 Axure 中导出文档的 HTML 文件：发布>生成 HTML 文件
|
||||
2. 创建一个 Github repo，并下载到本地
|
||||
3. 复制 HTML 文件到本地 Github repo 的文件夹中，并 commit->push 到云端
|
||||
4. 导入相应 repo 到 Vercel 中
|
||||
|
||||
更新方式：复制更新后的 HTML 文件夹到相应的 Github repo 文件夹中，覆盖原来的
|
||||
471
urara/css-fundamental/+page.md
Normal file
471
urara/css-fundamental/+page.md
Normal file
|
|
@ -0,0 +1,471 @@
|
|||
---
|
||||
title: CSS · 基础笔记
|
||||
created: 2021-12-06T11:59:47+08:00
|
||||
slug: css-fundamental
|
||||
tags:
|
||||
- CSS
|
||||
lastmod: 2022-05-07T05:30:27.910Z
|
||||
---
|
||||
|
||||
一些随堂笔记。
|
||||
|
||||
课程：[Build Responsive Real-World Websites with HTML and CSS](https://www.udemy.com/course/design-and-develop-a-killer-website-with-html5-and-css3/)
|
||||
|
||||
## css 是什么
|
||||
|
||||
- **C**ascading**S**tyle**S**heets (层叠式样式表）
|
||||
- CSS describes the **visual style and presentation** of the **content written in HTML**
|
||||
- CSS consists of countless **properties** that developers use to format the content: properties about font, text, spacing, layout, etc.
|
||||
|
||||
## 分类
|
||||
|
||||
### inline CSS
|
||||
|
||||
```html
|
||||
<p style="color:blue">text</p>
|
||||
```
|
||||
|
||||
> 最好不用
|
||||
|
||||
### internal CSS
|
||||
|
||||
放在`<head>`里面的`<style>`，如：
|
||||
|
||||
```html
|
||||
<head>
|
||||
<style>
|
||||
h1 {
|
||||
color: blue;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
```
|
||||
|
||||
- 代码很长的时候，整理很麻烦
|
||||
|
||||
### external CSS
|
||||
|
||||
- 引用单独的 css 文件，如 `style.css`
|
||||
- 放在`<head>`里用`<link>`引用，如：
|
||||
|
||||
```html
|
||||
<head>
|
||||
<link href="style.css" ref="stylesheet" />
|
||||
</head>
|
||||
```
|
||||
|
||||
关于`<link>` ，可参考:[MDN](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/link#attr-rel)
|
||||
|
||||
## 组成
|
||||
|
||||
|
||||
|
||||
## Selectors
|
||||
|
||||
### descendent selector
|
||||
|
||||
```css
|
||||
footer p {
|
||||
font-family: sans;
|
||||
}
|
||||
|
||||
article header p {
|
||||
color: blue;
|
||||
}
|
||||
```
|
||||
|
||||
### line selector
|
||||
|
||||
```css
|
||||
h1,
|
||||
h2,
|
||||
h3 {
|
||||
color: blue;
|
||||
}
|
||||
```
|
||||
|
||||
定义特定元素样式的两种方式：CSS ID、class attributes
|
||||
|
||||
## id
|
||||
|
||||
> 给每个元素一个 id，仅能用一次，尽量不要用
|
||||
|
||||
在 HTML 中：
|
||||
|
||||
```html
|
||||
<p id="author">text</p>
|
||||
```
|
||||
|
||||
在 CSS 中：
|
||||
|
||||
```css
|
||||
#author {
|
||||
font-family: sans;
|
||||
}
|
||||
```
|
||||
|
||||
### class attributes
|
||||
|
||||
> 能无限复用
|
||||
|
||||
在 HTML 中：
|
||||
|
||||
```html
|
||||
<p class="author">text</p>
|
||||
```
|
||||
|
||||
在 CSS 中：
|
||||
|
||||
```css
|
||||
.author {
|
||||
font-family: sans;
|
||||
}
|
||||
```
|
||||
|
||||
> 能无限复用
|
||||
|
||||
在 HTML 中：
|
||||
|
||||
```html
|
||||
<p class="author">text</p>
|
||||
```
|
||||
|
||||
在 CSS 中：
|
||||
|
||||
```css
|
||||
.author {
|
||||
font-family: sans;
|
||||
}
|
||||
```
|
||||
|
||||
### universal selector
|
||||
|
||||
- 对所有元素生效
|
||||
- 优先级最低
|
||||
- 不可继承
|
||||
|
||||
```css
|
||||
* {
|
||||
color: #1098ab;
|
||||
}
|
||||
```
|
||||
|
||||
### body
|
||||
|
||||
- 在`<body>` 里的通常只应用于文本元素（text）
|
||||
- Not all properties get inherited. It’s mostly ones **related to text**: `font-family`, `font-size`, `font-weight`, `font-style`, `color`, `line-height`, `letter-spacing`, `text-align`, `text-transform`, `text-shadow`, `list-style`, etc.
|
||||
- 可继承
|
||||
|
||||
### 优先级
|
||||
|
||||
#### conflicting between selectors
|
||||
|
||||
|
||||
|
||||
- 尽量不要用`!important`
|
||||
|
||||
```css
|
||||
foot p {
|
||||
color: green !important;
|
||||
}
|
||||
```
|
||||
|
||||
- 所有 selector 都会被应用，只有冲突的按优先级应用
|
||||
- 当使用相同类别的 selector 时，应用最后一个
|
||||
|
||||
#### inheritance
|
||||
|
||||
- inheriting elements can easily be override
|
||||
- 优先级最低
|
||||
- body 可继承，universal selector 不可以
|
||||
|
||||
## 颜色
|
||||
|
||||
### RGB/RGBA
|
||||
|
||||
- 基本`(r,g,b,alpha)`
|
||||
- 白色`(255,255,255)`
|
||||
- 黑色`(0,0,0)`
|
||||
|
||||
## Hexadecimal Colors
|
||||
|
||||
- 0 to ff (255 in hexadecimal numbers):
|
||||
`#00ffff`
|
||||
- Shorthand, when all colors are identical pairs
|
||||
`#off`
|
||||
当需要透明度的时候才用 rgb 颜色，一般用 hex
|
||||
|
||||
## Pseudo Class
|
||||
|
||||
> 用来指定特定元素
|
||||
|
||||
### 第一个元素/最后一个元素
|
||||
|
||||
```css
|
||||
li:first-child {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
li:last-child {
|
||||
font-style: italic;
|
||||
}
|
||||
```
|
||||
|
||||
### 奇数/偶数 /特定次序
|
||||
|
||||
```css
|
||||
li:nth-child(odd) {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
li:nth-child(even) {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
li:nth-child(3) {
|
||||
font-style: italic;
|
||||
}
|
||||
```
|
||||
|
||||
### 多种元素时
|
||||
|
||||
如下所示，当 HTML 中`<p>`并不是`<article>`里面的第一个元素时，不生效。
|
||||
|
||||
即当母元素(parent element)里有多种元素时(child elements)，不宜使用伪类(pseudo class)，可以在列中使用，如`<li>`
|
||||
|
||||
```html
|
||||
<article>
|
||||
<head></head>
|
||||
<p></p>
|
||||
</article>
|
||||
```
|
||||
|
||||
```css
|
||||
article p:fist-child {
|
||||
font-family: sans;
|
||||
}
|
||||
```
|
||||
|
||||
### Style hyperlinks
|
||||
|
||||
四个状态都应定义，并按顺序排列
|
||||
|
||||
#### link
|
||||
|
||||
不进行交互的预览下
|
||||
|
||||
```css
|
||||
a:link {
|
||||
color: #1098ad;
|
||||
}
|
||||
```
|
||||
|
||||
#### visited
|
||||
|
||||
点击后
|
||||
|
||||
```css
|
||||
a:visited {
|
||||
color: #777;
|
||||
}
|
||||
```
|
||||
|
||||
#### hover
|
||||
|
||||
悬停时
|
||||
|
||||
```css
|
||||
a:hover {
|
||||
color: orangered;
|
||||
font-weight: bold;
|
||||
text-decoration: underline dotted orangered;
|
||||
}
|
||||
```
|
||||
|
||||
#### active
|
||||
|
||||
点击时(通常和 hover 同时出现
|
||||
|
||||
```css
|
||||
a:active {
|
||||
background-color: black;
|
||||
font-style: italic;
|
||||
}
|
||||
```
|
||||
|
||||
## Pseudo Elements
|
||||
|
||||
> any pseudo elements is actually an inline element
|
||||
|
||||
在 HTML 中并不真实存在，但仍可在 CSS 中选择，如行内第一个字符：
|
||||
在 HTML 中并不真实存在，但仍可在 CSS 中选择，如行内第一个字符：
|
||||
|
||||
```css
|
||||
h1::first-letter {
|
||||
font-style: normal;
|
||||
}
|
||||
```
|
||||
|
||||
段内第一行：
|
||||
|
||||
```css
|
||||
p::first-line {
|
||||
color: red;
|
||||
}
|
||||
```
|
||||
|
||||
### adjacent sibiling selector
|
||||
|
||||
在同一 parent element 里，下面最临近的元素
|
||||
|
||||
如 h3 标题下的 p：
|
||||
|
||||
```css
|
||||
h3 + p::first-line {
|
||||
color: red;
|
||||
}
|
||||
```
|
||||
|
||||
### after
|
||||
|
||||
- 就算没有文字内容，也要定义`content`
|
||||
- 位于行末
|
||||
|
||||
|
||||
|
||||
```css
|
||||
h2::after {
|
||||
content: 'TOP';
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
color: black;
|
||||
padding: 5px 15px;
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
top: -10px;
|
||||
right: -25px;
|
||||
background-color: #ffe70e;
|
||||
}
|
||||
|
||||
h2 {
|
||||
position: relative;
|
||||
}
|
||||
```
|
||||
|
||||
### before
|
||||
|
||||
- 位于行前
|
||||
|
||||
```css
|
||||
h2::before {
|
||||
}
|
||||
```
|
||||
|
||||
## Box Model
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
### Type of boxes:
|
||||
|
||||
#### inline boxes
|
||||
|
||||
|
||||
|
||||
#### block-level boxes
|
||||
|
||||
|
||||
|
||||
#### inline-block boxes
|
||||
|
||||
|
||||
|
||||
img 其实是 inline-block box
|
||||
|
||||
### padding
|
||||
|
||||
内边距
|
||||
|
||||
```css
|
||||
padding: 上下 左右;
|
||||
```
|
||||
|
||||
#### reset margin ane padding
|
||||
|
||||
```css
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
```
|
||||
|
||||
不要用 body
|
||||
|
||||
### margin
|
||||
|
||||
外边距
|
||||
|
||||
#### collapsing margins
|
||||
|
||||
- 当两元素的 margin 重合时，大的会覆盖小的
|
||||
|
||||
### Dimensions
|
||||
|
||||
#### width
|
||||
|
||||
- percentage: percentage of the width of the parents containers
|
||||
|
||||
## position
|
||||
|
||||
|
||||
|
||||
### Normal Flow
|
||||
|
||||
- 默认状态
|
||||
|
||||
### Absolute Position
|
||||
|
||||
- 绝对位置
|
||||
- 常用于一些小元素
|
||||
- parent elements/containers should set to `relative`
|
||||
- 取决于最近层次的 relative parent elements/containers
|
||||
|
||||
|
||||
|
||||
### centering page
|
||||
|
||||
use the `<div>` element to create a container class, then set the `margin-left` and `margin-right` to `auto`
|
||||
|
||||
```css
|
||||
.container {
|
||||
width: 800px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
```
|
||||
|
||||
## 基本操作
|
||||
|
||||
### CSS 注释
|
||||
|
||||
- `/*需要注释的内容*/`
|
||||
- VS code 快捷键 :`CMD+/` (mac) `Control+/` (win)
|
||||
- 调出开发者工具`cmd+i`
|
||||
|
||||
### Fix bugs
|
||||
|
||||
- 方法：
|
||||
|
||||
- **inspect**
|
||||
- 检查刚开始变得不一样的地方
|
||||
- 如果有很多 selector，复杂的那个会被首先应用
|
||||
- 检查 css 文件引用链接是否正确
|
||||
|
||||
- 工具：
|
||||
HTML 校对器:
|
||||
[Markup Validation Service](https://validator.w3.org/)
|
||||
|
||||
代码比对:
|
||||
[Diffchecker](https://www.diffchecker.com/)
|
||||
269
urara/css-layout/+page.md
Normal file
269
urara/css-layout/+page.md
Normal file
|
|
@ -0,0 +1,269 @@
|
|||
---
|
||||
title: CSS · 三种布局方式
|
||||
slug: css-layouts
|
||||
tags:
|
||||
- CSS
|
||||
created: 2022-01-13T10:07:00.000Z
|
||||
summary: Float / Flexbox / Grid /
|
||||
lastmod: 2022-05-07T05:30:20.613Z
|
||||
---
|
||||
|
||||
课程：[Build Responsive Real-World Websites with HTML and CSS](https://www.udemy.com/course/design-and-develop-a-killer-website-with-html5-and-css3/)
|
||||
|
||||
## Overview
|
||||
|
||||
|
||||
|
||||
## Box-sizing
|
||||
|
||||
|
||||
|
||||
> 未定义之前：content-box
|
||||
|
||||
### reset
|
||||
|
||||
```css
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
```
|
||||
|
||||
## Float Layout
|
||||
|
||||
- 浮动在页面之上，对周围元素没有影响
|
||||
- 现在很少用了
|
||||
|
||||
### left
|
||||
|
||||
- 浮动到页面左边
|
||||
|
||||
|
||||
|
||||
```css
|
||||
.author-img {
|
||||
float: left;
|
||||
}
|
||||
```
|
||||
|
||||
> 此时图片和文本不在同一个层面上
|
||||
|
||||
### right
|
||||
|
||||
> 浮动到页面右边
|
||||
|
||||
|
||||
|
||||
```css
|
||||
p {
|
||||
float: right;
|
||||
}
|
||||
```
|
||||
|
||||
### ABSOLUTE POSITIONING VS. FLOATS
|
||||
|
||||
|
||||
|
||||
### Clear Float
|
||||
|
||||
- 当没有其他元素可以 clear float 时，在其后新建一个元素设置 clear
|
||||
- 当存在需要清除的元素时，直接在该元素上清除
|
||||
|
||||
#### 方法 1: empty div
|
||||
|
||||
使用一个并列的空`<div>`元素来清除
|
||||
|
||||
```html
|
||||
<head>
|
||||
<h1>title</h1>
|
||||
<h2>title</h2>
|
||||
<div class="clear"></div>
|
||||
</head>
|
||||
```
|
||||
|
||||
```css
|
||||
/*清除两者*/
|
||||
.clear {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
/*清除左边*/
|
||||
.clear {
|
||||
clear: left;
|
||||
}
|
||||
```
|
||||
|
||||
#### 方法 2:clearfix hack
|
||||
|
||||
原理和 empty div 的方式一样，但更简单，利用 pseudo element 在 parent element 后增加一个元素
|
||||
|
||||
```html
|
||||
<head class="clearfix">
|
||||
<h1>title</h1>
|
||||
<h2>title</h2>
|
||||
</head>
|
||||
```
|
||||
|
||||
```css
|
||||
.clearfix::after {
|
||||
clear: both;
|
||||
content: '';
|
||||
display: block;
|
||||
}
|
||||
```
|
||||
|
||||
## Flexbox
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
> 加粗字体为默认状态
|
||||
|
||||
```css
|
||||
.container {
|
||||
display: flex;
|
||||
align-items: center; /*水平居中*/
|
||||
justify-content: center; /*垂直居中*/
|
||||
}
|
||||
```
|
||||
|
||||
### Flex container
|
||||
|
||||
- flex container takes the height of the tallest items
|
||||
|
||||
常用：
|
||||
|
||||
```css
|
||||
.container {
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
```
|
||||
|
||||
### Flex items
|
||||
|
||||
```css
|
||||
.items {
|
||||
align-self: flex-start;
|
||||
}
|
||||
```
|
||||
|
||||
### Propetities
|
||||
|
||||
#### order
|
||||
|
||||
数字越大越靠后
|
||||
|
||||
#### flex-grow
|
||||
|
||||
数字越大占比越大
|
||||
|
||||
#### flex-basis
|
||||
|
||||
item’s width
|
||||
|
||||
#### shorthand
|
||||
|
||||
`flex:1` =
|
||||
|
||||
```css
|
||||
flex-grow: 1;
|
||||
flex-shrink: 1;
|
||||
flex-basis: 0%;
|
||||
```
|
||||
|
||||
## CSS Grid
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
### grid container
|
||||
|
||||
```css
|
||||
.container {
|
||||
display: grid;
|
||||
grid-template-columns: 250px 200px; /*两列*/
|
||||
grid-template-rows: 200px 200px; /*两行*/
|
||||
}
|
||||
```
|
||||
|
||||
> 通常不定义 rows
|
||||
|
||||
#### Gap
|
||||
|
||||
用 gap 而不是 margin:
|
||||
|
||||
```css
|
||||
.container {
|
||||
/*gap:20px;*/
|
||||
columns-gap: 30px;
|
||||
row-gap: 20px;
|
||||
}
|
||||
```
|
||||
|
||||
#### align tracks inside containers
|
||||
|
||||
> when the content is smaller than the grid
|
||||
|
||||
```css
|
||||
justify-content: center;
|
||||
align-content: center;
|
||||
```
|
||||
|
||||
### grid items
|
||||
|
||||
```css
|
||||
.items: {
|
||||
grid-column: 2/3; /*当前后数值相差只有1位时，可省去后面的数字*/
|
||||
grid-row: 2/3;
|
||||
|
||||
/*占几个列/行时*/
|
||||
grid-column: 1/3;
|
||||
grid-row: 1/3;
|
||||
/*或者*/
|
||||
grid-column: 1 / span 3;
|
||||
/*自动填充剩余空间*/
|
||||
grid-column: 1/-1;
|
||||
}
|
||||
```
|
||||
|
||||
#### align items inside cells
|
||||
|
||||
```css
|
||||
.container {
|
||||
align-items: center;
|
||||
justify-items: center;
|
||||
}
|
||||
```
|
||||
|
||||
```css
|
||||
.item {
|
||||
align-self: end;
|
||||
}
|
||||
```
|
||||
|
||||
### fr
|
||||
|
||||
- `1fr`:自动填充剩余空间
|
||||
- 2:1:1:1 的四列
|
||||
|
||||
```css
|
||||
.container {
|
||||
grid-template-columns: 2fr 1fr 1fr 1fr;
|
||||
}
|
||||
/*shorthand*/
|
||||
|
||||
.container {
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
}
|
||||
```
|
||||
|
||||
### implicit row
|
||||
|
||||
所定义的空间被用完后多出来的列
|
||||
140
urara/flare/+page.md
Normal file
140
urara/flare/+page.md
Normal file
|
|
@ -0,0 +1,140 @@
|
|||
---
|
||||
title: 自建网页书签Flare
|
||||
created: 2022-02-20 14:04:17
|
||||
tags:
|
||||
- Docker
|
||||
- Self-hosted
|
||||
slug: flare
|
||||
summary: 通过Docker自建网页书签Flare
|
||||
lastmod: 2022-03-30T02:19:33.711Z
|
||||
---
|
||||
|
||||
Flare 是一个自托管的网页书签导航 (个人理解)，详细介绍可以看作者写的这篇：[使用 Docker 搭建适用于 HomeLab 的书签导航](https://sspai.com/post/71329)
|
||||
|
||||
效果如图：
|
||||
|
||||
|
||||
这里分成了“应用”和“书签”两个栏目，但其实都是网页链接书签，看示例文档里的设置，应用里的是使用更为频繁的链接，书签栏则是一些参考链接/外链，或许“应用”命名为“常用”，“书签”则命名为“链接”或者“其他”更好一些。我之前还以为应用是本地应用……(我的问题
|
||||
╮(￣ ▽ ￣"") ╭
|
||||
|
||||
项目仓库：[GitHub - soulteary/docker-flare](https://github.com/soulteary/docker-flare)
|
||||
|
||||
### 1.创建 Flare 文件夹
|
||||
|
||||
此处我将文件夹命名为 flare
|
||||
|
||||
```bash
|
||||
mkdir ~/flare && cd ~/flare
|
||||
```
|
||||
|
||||
### 2.下载包含示例的代码
|
||||
|
||||
```bash
|
||||
git clone https://github.com/soulteary/docker-flare.git
|
||||
cd docker-flare
|
||||
```
|
||||
|
||||
### 3.运行容器
|
||||
|
||||
#### 方法 1：直接启动
|
||||
|
||||
```bash
|
||||
# 可以使用最新镜像
|
||||
docker run --rm -it -p 5005:5005 -v `pwd`/app:/app soulteary/flare
|
||||
# 也可以追求明确，使用固定版本
|
||||
docker run --rm -it -p 5005:5005 -v `pwd`/app:/app soulteary/flare:0.2.10
|
||||
```
|
||||
|
||||
#### 方法 2：通过 docker composer
|
||||
|
||||
因为示例文件夹里面已经有一个 `docker-compose.yml` 文件了，所以我们不需要另外创建，如果需要修改的话可以用 `nano docker-compose.yml` 编辑 (如果需要设置用户登陆的话，需要在此修改)
|
||||
|
||||
启动容器：
|
||||
|
||||
```bash
|
||||
docker-compose up -d
|
||||
```
|
||||
|
||||
这时我们可以通过 `http://ip:5005` 访问书签页面了。
|
||||
|
||||
### 4.修改书签内容
|
||||
|
||||
我用的是 Royal TSX 上的 File transfer 来查看文件夹内容。
|
||||
|
||||
配置文件的路径如下：
|
||||
|
||||
各个文件的功能如下：
|
||||
|
||||
- config.yml：基本应用设置/标题/组件……
|
||||
- apps.yml：设置“应用”栏的书签名字/链接/icon/描述
|
||||
- bookmarks.yml：设置“书签”栏的分类/链接名称/icon/链接
|
||||
|
||||
作者贴心地内置了 `@mdi/font` 相关 icon，可以通过 `http://ip:5005/resources/mdi-cheat-sheets/` 来访问图标列表，然后通过 Ctrl /CMD+ F 来进行页面内搜索。
|
||||
|
||||
在书签页面，可以通过左下角的齿轮图标调整主题和其他设置，和 `config.yml` 里的选项几乎一致：
|
||||
|
||||
|
||||
### 5.用 nginx 反代和设置域名
|
||||
|
||||
安装 Nginx 并打开 `flare.conf` 文件
|
||||
|
||||
```bash
|
||||
apt install nginx
|
||||
cd /etc/nginx/sites-enabled/
|
||||
rm rf default
|
||||
cd /etc/nginx/sites-available/
|
||||
nano flare.conf
|
||||
```
|
||||
|
||||
`flare.conf` 的内容 (注意修改 example.com 为自己的域名)
|
||||
|
||||
```conf
|
||||
server {
|
||||
listen 80;
|
||||
listen [::]:80;
|
||||
server_name example.com;
|
||||
|
||||
location / {
|
||||
proxy_pass http://127.0.0.1:5005;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
用 `nginx -t` 测试配置文件，如果最后有出现 `suceessful`，那测试就成功了。
|
||||
|
||||
然后为这个配置文件增加一个链接
|
||||
|
||||
```bash
|
||||
cd /etc/nginx/sites-enabled/
|
||||
ln -s ../sites-available/flare.conf flare.conf
|
||||
```
|
||||
|
||||
重启 nginx
|
||||
|
||||
```bash
|
||||
systemctl reload nginx
|
||||
```
|
||||
|
||||
刚遇到一些问题，又回到了我的 Miniflux 主页^ ^，遂重启容器：
|
||||
|
||||
```bash
|
||||
cd ~/flare/docker-flare
|
||||
docker-compose down
|
||||
docker-compose up -d
|
||||
```
|
||||
|
||||
### 6.SSL 证书和其他书签
|
||||
|
||||
安装证书，详情参考这篇：[用 docker 安装 Halo 博客并用 Nginx 反代](https://halo.sevic.me/archives/halo-in-docker)
|
||||
|
||||
```bash
|
||||
certbot --nginx -d example.com -d www.example.com
|
||||
```
|
||||
|
||||
其他好用书签：
|
||||
|
||||
- [Raindrop](https://app.raindrop.io/)：可以共享的网页书签，也可以嵌入到网页中，我的白噪音书签：[白噪音](https://raindrop.io/Rainny/-21205390)
|
||||
- [Airtable](https://airtable.com/)：一个共享表格工具，详情可以看我的资源收藏夹：[About Coding](https://airtable.com/shrpftxf6JgRomP2X/tblEvtThXHNBMQ8lW/viwSXGTALloahC10H)
|
||||
- [Guardo](https://guardo.io/)：说是可以替代 Raindrop，但书签文件夹不能生成共享链接，所以一直没用。
|
||||
|
||||
再次感谢[云五的 WordPress 搭建教程](https://yukieyun.net/tech/shared-service-same-server-wordpress/)，照葫芦画瓢套用了 Nginx 的设置。
|
||||
45
urara/grid/+page.md
Normal file
45
urara/grid/+page.md
Normal file
|
|
@ -0,0 +1,45 @@
|
|||
---
|
||||
title: CSS · Reusable Grid
|
||||
slug: css-grid
|
||||
tags:
|
||||
- CSS
|
||||
created: 2022-01-13T10:01:44.000Z
|
||||
summary: 可复用的CSS Grid设置
|
||||
lastmod: 2022-05-07T05:32:52.372Z
|
||||
---
|
||||
|
||||
1. 先设置一个 class 为 grid，并设定 gap
|
||||
2. 子元素中再设置具体的列数
|
||||
|
||||
如设一个上为 2 列和下为 3 列的栅格布局：
|
||||
|
||||
#### CSS:
|
||||
|
||||
```css
|
||||
.grid {
|
||||
display: grid;
|
||||
gap: 1.2rem;
|
||||
}
|
||||
.grid--2--cols {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
|
||||
.grid--3--cols {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
}
|
||||
```
|
||||
|
||||
#### HTML:
|
||||
|
||||
```html
|
||||
<section class="grid grid--2--cols">
|
||||
<div>Text1</div>
|
||||
<div>Text2</div>
|
||||
</section>
|
||||
|
||||
<section class="grid grid--3--cols">
|
||||
<div>Text1</div>
|
||||
<div>Text2</div>
|
||||
<div>Text3</div>
|
||||
</section>
|
||||
```
|
||||
275
urara/halo/+page.md
Normal file
275
urara/halo/+page.md
Normal file
|
|
@ -0,0 +1,275 @@
|
|||
---
|
||||
title: 用 docker 安装 Halo 博客
|
||||
created: 2022-02-16 14:04:17
|
||||
tags:
|
||||
- Docker
|
||||
- Self-host
|
||||
slug: halo
|
||||
summary: ''
|
||||
lastmod: 2022-05-07T05:39:19.169Z
|
||||
---
|
||||
|
||||
系统：ubuntn 20.04
|
||||
|
||||
参考：
|
||||
|
||||
- [用 Nginx 反代实现 docker 安装 WordPress 与其他服务并存 – 沉默之沙](https://yukieyun.net/tech/shared-service-same-server-wordpress/)
|
||||
- [RSS | RSSHub 搭配 Miniflux，实现订阅自由](https://mantyke.icu/2021/rsshub-miniflux/)
|
||||
|
||||
Halo 官网：[Halo](https://halo.run/#quickstart)
|
||||
|
||||
建议大家先去[Halo 官网主题仓库](https://halo.run/themes.html)看看有没有喜欢的主题再决定要不要装，不然很可能像我一样装了之后又跑路了…… ^^
|
||||
|
||||
## 准备
|
||||
|
||||
### 解析域名
|
||||
|
||||
域名生效需要时间，为了避免申请 SSL 证书时屡次失败导致超过申请次数限制，最好提前添加域名解析[^1]，我这里用的是子域名。
|
||||
|
||||
为域名添加一个 A 记录，指向服务器所在 IP。如 Namesile 中：
|
||||
|
||||
|
||||
### 安装 docker
|
||||
|
||||
在 Ubuntu 中安装 docker[^2]：
|
||||
|
||||
```zsh
|
||||
apt update
|
||||
apt install apt-transport-https ca-certificates curl software-properties-common
|
||||
curl -fsSL https://download.docker.com/linux/ubuntu/gpg | apt-key add -
|
||||
add-apt-repository "deb [arch=amd64] https://download.docker.com/linux/ubuntu bionic stable"
|
||||
apt update
|
||||
```
|
||||
|
||||
其他系统可参考：[Plume | 利用 Docker-compose 搭建 Fedi 开源博客平台 – Zoe's Dumpster.](https://blog.tantalum.life/posts/build-plume-in-docker/#%E5%AE%89%E8%A3%85dockerdocker-compose)中的安装方式，或者查看官方文档。有的 VPS 在装系统的时候也可以预装 docker，如 vultr/contabo 都有，不过 docker-compose 就需要自己装（这里似乎没有用到 docker-compose。
|
||||
|
||||
检查是否装好，有版本就装好了：
|
||||
|
||||
```zsh
|
||||
docker -v
|
||||
```
|
||||
|
||||
### 检查端口开放情况
|
||||
|
||||
参考：[Ubuntu20.04 开放指定端口\_哈-CSDN 博客](https://blog.csdn.net/lianghecai52171314/article/details/113813826)
|
||||
|
||||
我不太懂端口是怎么开放的，自动开放还是用了就开放。这里用的是 ufw 来设置防火墙开放端口，用 netstat 查看端口占用状况。
|
||||
|
||||
Debian/Ubuntu 中安装 netstat[^3]：
|
||||
|
||||
```zsh
|
||||
apt install net-tools
|
||||
```
|
||||
|
||||
检查端口占用：
|
||||
|
||||
```bash
|
||||
netstat -aptn
|
||||
```
|
||||
|
||||
ufw 是 Ubuntu20.04 系统预装的 [^3]，如未安装上，可以这样安装：
|
||||
|
||||
```bash
|
||||
sudo apt update
|
||||
sudo apt install ufw
|
||||
```
|
||||
|
||||
常用操作：
|
||||
|
||||
```bash
|
||||
ufw enable #打开防火墙
|
||||
ufw disable #关闭防火墙
|
||||
ufw status #查看防火墙规则
|
||||
ufw allow 22 #打开22端口
|
||||
ufw deny 22 #拒绝访问22端口
|
||||
```
|
||||
|
||||
打开防火墙之前最好打开常用的端口，如 22，不然可能会连不上服务器。
|
||||
|
||||
## 安装 Halo
|
||||
|
||||
参考：[使用 Docker 部署 Halo | Halo Documents](https://docs.halo.run/getting-started/install/docker)
|
||||
|
||||
### 1.创建工作目录
|
||||
|
||||
创建一个文件夹存放 Halo，我这里命名为.halo，当然也可以叫其他的。
|
||||
|
||||
```bash
|
||||
mkdir ~/.halo && cd ~/.halo
|
||||
```
|
||||
|
||||
### 2.下载示例配置文件到工作目录
|
||||
|
||||
```bash
|
||||
wget https://dl.halo.run/config/application-template.yaml -O ./application.yaml
|
||||
```
|
||||
|
||||
### 3. 编辑配置文件，配置数据库或者端口
|
||||
|
||||
我不会用 vim 命令，所以这里用 nano 编辑
|
||||
|
||||
#### 打开配置文件 application.yaml
|
||||
|
||||
```bash
|
||||
nano application.yaml
|
||||
```
|
||||
|
||||
#### 修改配置
|
||||
|
||||
[配置参考 | Halo Documents](https://docs.halo.run/getting-started/config)
|
||||
这里已经有刚下载好的配置文件了，我们可以根据自己的需要修改，Halo 数据库支持 H2 和 Mysql 数据库，因为我已经安装了一个 Wordpress 博客占用了 Mysql 数据库，虽然不知道有无影响，但为了避免出错，最后选择了按示例里的配置，使用 H2 数据库（主要还是懒得改
|
||||
|
||||
我这里将端口放到 8090，因为原 80 端口已经被占用，大家可以选择其他开放端口，注意修改数据库用户名和密码。
|
||||
|
||||
```yaml
|
||||
server:
|
||||
port: 8090
|
||||
|
||||
# Response data gzip.
|
||||
compression:
|
||||
enabled: false
|
||||
spring:
|
||||
datasource:
|
||||
# H2 database configuration.
|
||||
driver-class-name: org.h2.Driver
|
||||
url: jdbc:h2:file:~/.halo/db/halo
|
||||
username: admin #数据库用户名
|
||||
password: 123456 #数据库密码
|
||||
|
||||
# MySQL database configuration.
|
||||
# driver-class-name: com.mysql.cj.jdbc.Driver
|
||||
# url: jdbc:mysql://127.0.0.1:3306/halodb?characterEncoding=utf8&useSSL=false&serverTimezone=Asia/Shanghai&allowPublicKeyRetrieval=true
|
||||
# username: root
|
||||
# password: 123456
|
||||
|
||||
# H2 database console configuration.
|
||||
h2:
|
||||
console:
|
||||
settings:
|
||||
web-allow-others: false
|
||||
path: /h2-console
|
||||
enabled: false
|
||||
|
||||
halo:
|
||||
# Your admin client path is https://your-domain/{admin-path}
|
||||
admin-path: admin
|
||||
|
||||
# memory or level
|
||||
cache: memory
|
||||
```
|
||||
|
||||
### 4. 拉取最新的 Halo 镜像
|
||||
|
||||
```bash
|
||||
docker pull halohub/halo:latest
|
||||
```
|
||||
|
||||
### 5. 创建容器
|
||||
|
||||
```bash
|
||||
docker run -it -d --name halo -p 8090:8090 -v ~/.halo:/root/.halo --restart=unless-stopped halohub/halo:latest
|
||||
```
|
||||
|
||||
### 6. 打开安装引导界面。
|
||||
|
||||
访问 `http://服务器ip:端口号`
|
||||
|
||||
|
||||
## 用 Nginx 反代
|
||||
|
||||
说实话，我现在还没懂 Nginx 是干嘛的，反代又是什么，但好像一般都要有，那就做一下吧。幸好 Halo 还有现成的配置[^4]可以抄一下，结合云五的 Wordpress 搭建教程[^2]，把里面 wordpress 的部分改为 halo 就可以了。
|
||||
|
||||
### 1.安装 Nginx
|
||||
|
||||
```bash
|
||||
apt install nginx
|
||||
cd /etc/nginx/sites-enabled/
|
||||
rm rf default
|
||||
cd /etc/nginx/sites-available/
|
||||
nano halo.conf
|
||||
```
|
||||
|
||||
### 2.配置 halo.conf
|
||||
|
||||
注意修改`www.yourdomain.com` 为自己的域名
|
||||
|
||||
```conf
|
||||
upstream halo {
|
||||
server 127.0.0.1:8090;
|
||||
}
|
||||
server {
|
||||
listen 80;
|
||||
listen [::]:80;
|
||||
server_name www.yourdomain.com;
|
||||
client_max_body_size 1024m;
|
||||
location / {
|
||||
proxy_pass http://127.0.0.1:8090;
|
||||
proxy_set_header HOST $host;
|
||||
proxy_set_header X-Forwarded-Proto $scheme;
|
||||
proxy_set_header X-Real-IP $remote_addr;
|
||||
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
用`nginx -t`测试配置文件，如果最后有出现`suceessful` ，那测试就成功了。
|
||||
|
||||
然后为这个配置文件增加一个链接
|
||||
|
||||
```bash
|
||||
cd /etc/nginx/sites-enabled/
|
||||
ln -s ../sites-available/halo.conf halo.conf
|
||||
```
|
||||
|
||||
### 3.重启 nginx
|
||||
|
||||
```bash
|
||||
systemctl reload nginx
|
||||
```
|
||||
|
||||
现在访问域名就可以到达 halo 博客主页了，如果不行，可以 ping 一下域名看是不是解析还没生效：如 `ping exampl.com`
|
||||
|
||||
我这里出现一个问题，是输入域名后到了我的 miniflux 主页，因为 halo.conf 里域名后缀输错了……
|
||||
|
||||
## 安装 certbot，为域名获取免费 SSL 证书
|
||||
|
||||
有 ssl 证书后，就不会被提示网站不安全了，也就是从 http->https
|
||||
|
||||
### 1.安装 certbot
|
||||
|
||||
```bash
|
||||
apt install certbot python3-certbot-nginx
|
||||
```
|
||||
|
||||
### 2.配置证书
|
||||
|
||||
修改 example.com 为自己的域名：
|
||||
|
||||
```bash
|
||||
certbot --nginx -d example.com -d www.example.com
|
||||
```
|
||||
|
||||
如果你不确定是否可以申请成功，或者还在修改/测试配置，可以在后面加`--staging` 测试，避免申请超过次数限制[^1]
|
||||
|
||||
一些选项，这里最好选择 1，如果选择 2，就没办法用 http 访问域名了：
|
||||
|
||||
```text
|
||||
1: No redirect - Make no further changes to the webserver configuration.
|
||||
2: Redirect - Make all requests redirect to secure HTTPS access. Choose this for
|
||||
new sites, or if you're confident your site works on HTTPS. You can undo this
|
||||
change by editing your web server's configuration.
|
||||
```
|
||||
|
||||
然后同意条款后问是否暴露邮箱时选 No[^2]。
|
||||
|
||||
## 其他
|
||||
|
||||
- 主题编辑：首页 / 外观 / 主题编辑 里修改具体文件
|
||||
- 进入后台：域名后面加/admin，如：https://yourdomain/admin
|
||||
|
||||
---
|
||||
|
||||
[^1]: [WordPress + VPS 建站教程 - 少数派](https://sspai.com/post/66447#:~:text=sudo%20swapon%20/swapfile-,SSL%20%E8%B6%85%E8%BF%87%E4%BD%BF%E7%94%A8%E9%A2%91%E7%8E%87%E9%99%90%E9%A2%9D,-%E6%98%AF%E7%9A%84%EF%BC%8C%E5%85%8D%E8%B4%B9)
|
||||
[^2]: [用 Nginx 反代实现 docker 安装 WordPress 与其他服务并存 – 沉默之沙](https://yukieyun.net/tech/shared-service-same-server-wordpress/)
|
||||
[^3]: [如何在 Linux 中安装 netstat 命令 - 云+社区 - 腾讯云](https://cloud.tencent.com/developer/article/1852241)
|
||||
[^4]: [使用 Docker 部署 Halo | Halo Documents](https://docs.halo.run/getting-started/install/docker#nginx)
|
||||
32
urara/hover/+page.md
Normal file
32
urara/hover/+page.md
Normal file
|
|
@ -0,0 +1,32 @@
|
|||
---
|
||||
title: CSS · hover时图片放大的动效
|
||||
created: 2022-01-13T16:03:47.000Z
|
||||
slug: hover-image-scale
|
||||
tags:
|
||||
- CSS Trick
|
||||
- CSS
|
||||
summary: 通过transform设置
|
||||
lastmod: 2022-05-07T05:30:52.029Z
|
||||
---
|
||||
|
||||
思路：
|
||||
|
||||
1. 设置放大
|
||||
2. 隐藏溢出
|
||||
|
||||
```css
|
||||
.gallery-item {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.gallery-item img:hover {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
.gallery-item img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
transition: all 0.4s;
|
||||
}
|
||||
```
|
||||
|
||||
效果：https://codepen.io/sevichee/pen/wvrRjjq
|
||||
141
urara/html-basis/+page.md
Normal file
141
urara/html-basis/+page.md
Normal file
|
|
@ -0,0 +1,141 @@
|
|||
---
|
||||
title: HTML · 基础笔记
|
||||
created: 2021-12-06T11:59:47+08:00
|
||||
slug: html-notes
|
||||
tags:
|
||||
- HTML
|
||||
lastmod: 2022-05-07T05:30:47.655Z
|
||||
---
|
||||
|
||||
课程：[Build Responsive Real-World Websites with HTML and CSS](https://www.udemy.com/course/design-and-develop-a-killer-website-with-html5-and-css3/)
|
||||
|
||||
## HTML 是什么
|
||||
|
||||
HyperTextMarkupLanguage
|
||||
[HTML 元素参考 - HTML（超文本标记语言） | MDN](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element)
|
||||
|
||||
## 基本组成
|
||||
|
||||
以`<p>Hello!</p>`为例子：
|
||||
|
||||
1. opening tag:`<p>`
|
||||
2. content : `Hello!`
|
||||
3. closing tag: `</p>`
|
||||
|
||||
## 框架
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head lang="语言代码">
|
||||
<meta charset="UTF-8" />
|
||||
<title>这是标题的位置，head里面的东西都看不见（一般来说）</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h1>一级标题</h1>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
## attributes
|
||||
|
||||
- 用来描述元素 elements
|
||||
- pieces of data
|
||||
|
||||
| attributes | |
|
||||
| ---------- | --------------------------------------------------------------------------------------------- |
|
||||
| src | sources |
|
||||
| alt\* | alternative text (describe what the image are ) good for SEO/blind people |
|
||||
| width | 宽度 |
|
||||
| height | 高度 |
|
||||
| href | 超链接 `#`表示回到页首 |
|
||||
| target | 在哪个窗口打开\_blank 新窗口 `_self` 旧窗口 `_top`顶部 `_parent` 父级窗口，如果有窗口层级的话 |
|
||||
|
||||
## tags
|
||||
|
||||
| | |
|
||||
| ---------- | --------------------------------------------------------------------- |
|
||||
| head | 在页面中不可见的元素，如页面标题、link to css files…… |
|
||||
| main | 文章的主要内容（HTML5 中新增） |
|
||||
| body | 页面的主要内容 |
|
||||
| section | 区块(semeantic HTMl |
|
||||
| h1 | 标题，一个页面只能有一个 h1 |
|
||||
| p | 段落 |
|
||||
| span | 行内文本 |
|
||||
| `<!— —>` | 注释 |
|
||||
| b | **加粗**，和`<strong>`不同，它没有语意，是过时的表述 |
|
||||
| strong | **加粗**，表示是页面中重要的元素 |
|
||||
| i | _斜体_，过时的表述，应用`<em>` |
|
||||
| em | _斜体_，emphasize |
|
||||
| ol | 1. order list 数字排序 |
|
||||
| ul | . unorder list |
|
||||
| li | list item 列 ,用在 ol/ul 里面 |
|
||||
| img | 图片 特殊类型，不需要包含内容，需要 attributes( src/alt/width/height) |
|
||||
| meta | data about data meta charset=”UTF-8” |
|
||||
| a | anchor 超链接（attribute:href) |
|
||||
| header | 页头(container |
|
||||
| nav | 导航 ( container |
|
||||
| menu | 菜单，web application 常用 |
|
||||
| article | 内容(container |
|
||||
| footer | 页脚(container |
|
||||
| div | 无意义内容区块 |
|
||||
| br/ | 断行 |
|
||||
| aside | 次级信息/额外信息 |
|
||||
| figure | 常用于 feature cards/coding list…… |
|
||||
| figcaption | 图片脚注(只能在 figure 里面用) |
|
||||
| form | 表单 |
|
||||
| input | 输入框 |
|
||||
| label | 表单输入标题（也许 |
|
||||
| table | 表格 |
|
||||
| thead | 表头 |
|
||||
| tbody | 表体 |
|
||||
| th | 表头单元格 |
|
||||
| tr | table row |
|
||||
| td | table data |
|
||||
| address | 地址 |
|
||||
| s | 删除 |
|
||||
| blockquote | 引言 |
|
||||
|
||||
- `<button>` 和`< a>` 的区别：
|
||||
- button ：一种页面内操作
|
||||
- a: 页面跳转
|
||||
|
||||
## HTML entity
|
||||
|
||||
特殊符号速查表
|
||||
|
||||
[Glyphs | CSS-Tricks](https://css-tricks.com/snippets/html/glyphs/)
|
||||
|
||||
## semantic HTML
|
||||
|
||||
- use semantic elements instead of others, such as `<div>` / `<b>`
|
||||
- semantic HTML good for SEO and accessibility
|
||||
|
||||
## 空格
|
||||
|
||||
` `
|
||||
|
||||
## 当 div 中用 css 设置了图片时
|
||||
|
||||
```html
|
||||
<div class="image" role="img" arial-label="description about the image"></div>
|
||||
```
|
||||
|
||||
## 随堂练习
|
||||
|
||||
### 商品卡片
|
||||
|
||||
<iframe height="300" style="width: 100%;" scrolling="no" title="html2" src="https://codepen.io/sevichee/embed/yLzErOL?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
|
||||
See the Pen <a href="https://codepen.io/sevichee/pen/yLzErOL">
|
||||
html2</a> by Sowhere (<a href="https://codepen.io/sevichee">@sevichee</a>)
|
||||
on <a href="https://codepen.io">CodePen</a>.
|
||||
</iframe>
|
||||
|
||||
### 分页器 pagination
|
||||
|
||||
<iframe height="300" style="width: 100%;" scrolling="no" title="pagination" src="https://codepen.io/sevichee/embed/ZEXqREG?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
|
||||
See the Pen <a href="https://codepen.io/sevichee/pen/ZEXqREG">
|
||||
pagination</a> by Sowhere (<a href="https://codepen.io/sevichee">@sevichee</a>)
|
||||
on <a href="https://codepen.io">CodePen</a>.
|
||||
</iframe>
|
||||
154
urara/insight/+page.md
Normal file
154
urara/insight/+page.md
Normal file
|
|
@ -0,0 +1,154 @@
|
|||
---
|
||||
title: 什么是设计洞察 · What is Insight
|
||||
created: 2021-10-15T15:07:14.533Z
|
||||
tags:
|
||||
- Design Thinking
|
||||
- 翻译
|
||||
keywords:
|
||||
- insight
|
||||
---
|
||||
|
||||
原文： [thrivethinking.com](https://thrivethinking.com/2016/03/28/what-is-insight-definition/)
|
||||
|
||||
## insight 不是什么
|
||||
|
||||
- 不是数据
|
||||
- 不是简单的事实观测
|
||||
- 不是用户的需求陈述（例如: 我需要、我想要）
|
||||
|
||||
## 是什么
|
||||
|
||||
1. 是揭示本质的
|
||||
|
||||
> An unrecognized fundamental human truth that reveals the inner nature of things
|
||||
>
|
||||
> 一个未被承认的人类基本真理，揭示了事物的内在本质
|
||||
|
||||
2. 是一种看待世界的新方式
|
||||
|
||||
> A new way of viewing the world that causes us to reexamine existing conventions and challenge the status quo.
|
||||
>
|
||||
> 一种看待世界的新方式，使我们重新审视现有的惯例并挑战现状
|
||||
|
||||
3. 是对人类行为的深入观察
|
||||
|
||||
> A penetrating observation about human behavior thaWhat Is Insight- The 5 Principles of Insight Definitiont results in seeing consumers from a fresh perspective.
|
||||
>
|
||||
> 对人类行为的深入观察，导致从一个全新的角度看待消费者。
|
||||
|
||||
4. 是一种对人们潜在行为的发现
|
||||
|
||||
> A discovery about the underlying motivations that drive people’s actions.
|
||||
>
|
||||
> 对驱动人们行动的潜在动机的发现。
|
||||
|
||||
**洞察(Insight)让我们去思考人们为什么做事，是什么阻碍了人们做事情，它更深入问题根源，而不是停留在表面**
|
||||
|
||||
## 五大要素
|
||||
|
||||
**语境/困境/动机/原因/设想**
|
||||
[](http://thrivethinking.com/wp-content/uploads/2016/03/WhatIsInsight_5.jpg)
|
||||
|
||||
## 定义 Insight 的步骤
|
||||
|
||||
### 1.设定语境/场景
|
||||
|
||||
> A simple observation of how people behave in a given situation, what they think, what they feel, but most importantly explain what they are doing and trying to achieve
|
||||
>
|
||||
> 一个关于人们在给定的情境内如何想、如何做、如何感受的观察陈述。重要的是要说明他们在做什么以及想做什么。
|
||||
|
||||
### 2.沟通困境
|
||||
|
||||
> understanding the barriers that are stopping consumers from achieving what they want to achieve with a given product, service or experience
|
||||
>
|
||||
> 了解消费者通过特定产品、服务或体验实现其愿望时遇到的障碍。
|
||||
|
||||
### 3. 阐明原因
|
||||
|
||||
> An insight statement is a discovery of understanding and the identification of unmet needs to explain why something is happening the way it is
|
||||
>
|
||||
> 洞察力声明是对理解的发现和对未满足需求的识别，以解释为什么事情会以这样的方式发生.
|
||||
|
||||
> You must know the reason a consumer is behaving in a particular way, and why it is happening if you are to develop a product or service that can in some way augment the behavior or change it.
|
||||
>
|
||||
> 你必须知道消费者以特定方式行事的原因，以及为什么会发生这种情况，如果你要开发一种产品或服务，以某种方式增强这种行为或改变它的话。
|
||||
|
||||
### 4. 捕捉动机
|
||||
|
||||
> Discovering the underlying motivations that drive people’s actions
|
||||
>
|
||||
> 发现推动人们行动的潜在动机
|
||||
|
||||
> End-users of a product or service are motivated to change by the tensions that exist in their lives.
|
||||
>
|
||||
> 产品或服务的终端用户被他们生活中存在的紧张关系所激励而改变
|
||||
|
||||
> Look for tensions in four key areas: the physiological, the emotional, the cognitive and the environmental to inform your insight statements.
|
||||
>
|
||||
> 寻找四个关键领域的紧张关系：生理的、情感的、认知的和环境的，
|
||||
|
||||
### 5.构想理想
|
||||
|
||||
> It is important to describe the desired end-state or situation the consumer is seeking.
|
||||
>
|
||||
> 描述消费者所追求的理想的最终状态或情况是很重要的
|
||||
|
||||
> The key here is not to define a solution but clearly convey how the consumer would like the world to look and feel, what the ideal experience should be.
|
||||
>
|
||||
> 此处的关键在于不需要定义一个清晰的解决方案，而需要清楚地传达消费者希望世界看起来和感觉如何，理想的体验应该是什么
|
||||
|
||||
> An excellent way to articulate this is to start with the statement “I wish there was,
|
||||
>
|
||||
> 一个很好的表达方式是以 "我希望有 "开始
|
||||
|
||||
## 如何表达
|
||||
|
||||
> Think of insight definition as a three sentence journey that takes the reader through the consumer’s situation, frustration, and future desires.
|
||||
>
|
||||
> 将洞察定义视为一个三句话的旅程，带领读者了解消费者的情况、挫折和未来的愿望。
|
||||
|
||||
### 第一句话——描述现状和用户行为。
|
||||
|
||||
> **_Having pictures around that instantly remind me of special moments and people, makes me feel good.”_**
|
||||
>
|
||||
> "身边有照片，能让我立即想起特别的时刻和人物，让我感觉很好。"
|
||||
|
||||
### 第二句话——描述用户的困境，并说明造成困境的原因。
|
||||
|
||||
> **_“But I find that pictures from my digital camera often stay hidden on my devices because I never have time to print them.”_**
|
||||
>
|
||||
> "但是我发现我的数码相机里的照片经常被藏在我的设备里，因为我从来没有时间去打印它们。"
|
||||
|
||||
### 第三句话——描述用户期望的最终理想状况。
|
||||
|
||||
> **_“I wish there was a way to enjoy them everyday without having to actively play them on my TV or computer.”_**
|
||||
>
|
||||
> "我希望有一种方法可以每天欣赏它们，而不必在电视或电脑上主动播放它们。"
|
||||
|
||||
### Tips
|
||||
|
||||
- 用第一视角书写
|
||||
- 真实、人性化的口吻
|
||||
- 客观、真诚
|
||||
|
||||
## 什么是一个好的'Insight'
|
||||
|
||||
- 它在情感层面与消费者建立联系，并引起 "你显然理解我 "的反应。
|
||||
- 它重新审视现有的惯例并挑战现状。
|
||||
- 它解决了一个真正的问题，从而产生了新的客户。
|
||||
- 它通过给你一个明确的目标来激发行动。
|
||||
- 它清楚地说明了下一步该做什么以及如何为你的客户提供价值。
|
||||
- 它为团队带来了新的感知水平，并有助于做出明智的决策。
|
||||
|
||||
## Insight->How Might We?
|
||||
|
||||
需要把 insight(洞察)转变为 HMW（我们如何？）
|
||||
|
||||
例如：
|
||||
|
||||
> "我们可能如何每天享受我们的记忆，而不必花时间在设备上主动播放它们？"
|
||||
|
||||
## 后记
|
||||
|
||||
- insight 在作品集中如何表达？看到有 Insight 只写一句话的，总结为'Key insights',内容上是关键的事实发现，而跟前文所述的这种深入的洞察不同，那是否存在两种 insight 的定义写法？
|
||||
- 打算把 Insight 放到 Persona 后面，一个 Persona 对应一个 insight 和一个 How Might We.
|
||||
34
urara/margin/+page.md
Normal file
34
urara/margin/+page.md
Normal file
|
|
@ -0,0 +1,34 @@
|
|||
---
|
||||
title: CSS · Add margin to buttons
|
||||
slug: css-margin
|
||||
tags:
|
||||
- CSS Trick
|
||||
- CSS
|
||||
created: 2022-01-13T10:04:21.000Z
|
||||
summary: 用helper class为单个按钮加margin，防止元素复用时产生不必要的margin
|
||||
lastmod: 2022-05-07T05:32:49.156Z
|
||||
---
|
||||
|
||||
用 helper class 为单个按钮加 margin，防止元素复用时产生不必要的 margin
|
||||
|
||||
## HTML
|
||||
|
||||
```html
|
||||
<button class="btn helper">Text</button>
|
||||
```
|
||||
|
||||
## CSS
|
||||
|
||||
```css
|
||||
.helper {
|
||||
margin-right: 1.6rem;
|
||||
}
|
||||
```
|
||||
|
||||
## 为按钮增加内边距
|
||||
|
||||
如果设置 border 数值为负，周边空间则会收到影响，但用 box-shadow 就不会:
|
||||
|
||||
所以可以这样设置：
|
||||
|
||||
`box-shadow: inset 0 0 0 3px #fff;`
|
||||
23
urara/material/+page.md
Normal file
23
urara/material/+page.md
Normal file
|
|
@ -0,0 +1,23 @@
|
|||
---
|
||||
title: 翻译 · Material Design3
|
||||
created: 2022-01-03 13:02:17
|
||||
tags:
|
||||
- 翻译
|
||||
categories:
|
||||
- 翻译
|
||||
slug: material-design-3
|
||||
summary: 部分翻译内容
|
||||
lastmod: 2022-05-07T05:30:39.510Z
|
||||
---
|
||||
|
||||
上个月参与了 [Material Design 3 的中文版](https://www.yuque.com/advancedux/xr6e1n)翻译，我和搭档一起翻译了 [FAB (浮动操作按钮)](https://www.yuque.com/advancedux/xr6e1n/xip12y) 的部分内容。
|
||||
|
||||
这份翻译还存在一些问题，部分专有词汇还没统一翻译，但大概看看还是可以的。
|
||||
|
||||
相关内容：
|
||||
|
||||
- 推文：[Material Design 最新改版，变化好大！](https://mp.weixin.qq.com/s/fm7RKvCSgBz0jCIWlr8mWg)
|
||||
- [Material Design3 英文版](https://m3.material.io/)
|
||||
- [Material Design 3 中文版](https://www.yuque.com/advancedux/xr6e1n)
|
||||
- [Material Design 旧版](https://material.io/)
|
||||
- [CSDC 共享语言库](https://csdcachieve.notion.site/a1fb571707784c809b508a4e63a6ce81)
|
||||
38
urara/rem-css/+page.md
Normal file
38
urara/rem-css/+page.md
Normal file
|
|
@ -0,0 +1,38 @@
|
|||
---
|
||||
title: CSS · Rem in CSS
|
||||
slug: rem-css
|
||||
tags:
|
||||
- CSS
|
||||
created: 2022-01-12T09:50:27.000Z
|
||||
summary: CSS中的Rem是什么
|
||||
lastmod: 2022-05-07T05:32:42.708Z
|
||||
---
|
||||
|
||||
默认为浏览器默认字体大小：
|
||||
|
||||
```
|
||||
1rem=16px
|
||||
```
|
||||
|
||||
改变 rem 为 10px：
|
||||
|
||||
## 1. set px
|
||||
|
||||
```css
|
||||
html {
|
||||
font-size: 10px;
|
||||
}
|
||||
```
|
||||
|
||||
> 这种方法会让用户不能改变页面字体大小，不建议用
|
||||
|
||||
## 2. percentage
|
||||
|
||||
设置为用户浏览器字体的大小比例。
|
||||
|
||||
```
|
||||
html{
|
||||
/* 10px/16px =62.5%*/
|
||||
font-size:62.5%;
|
||||
}
|
||||
```
|
||||
66
urara/vscode/+page.md
Normal file
66
urara/vscode/+page.md
Normal file
|
|
@ -0,0 +1,66 @@
|
|||
---
|
||||
title: VS Code 技巧合集
|
||||
tags:
|
||||
- 实用技巧
|
||||
categories:
|
||||
- 实用技巧
|
||||
slug: vscode-tips
|
||||
summary: 字体/插件/设置……
|
||||
created: 2022-01-27T13:40:28.920Z
|
||||
lastmod: 2022-03-30T02:20:34.584Z
|
||||
---
|
||||
|
||||
<!--more-->
|
||||
|
||||
## 关闭 VS Code 中的 popup 面板
|
||||
|
||||
如下图所示，在写 JavaScript 的时候，这个东西一直出来，还是蛮烦的。
|
||||
|
||||
|
||||
|
||||
解决方法：在 setting 里搜 **editor.parameterHints.enabled**，取消勾
|
||||
|
||||
|
||||
|
||||
参考来源：[visual studio code - How do I get rid of this popup in VSCode? - Stack Overflow](https://stackoverflow.com/questions/35246645/how-do-i-get-rid-of-this-popup-in-vscode)
|
||||
|
||||
## 修改字体
|
||||
|
||||
改了 VS Code 里面的字体，Obsidian 里 code block 的字体也一起变了，用了有连字符的字体，箭头变得好好看！
|
||||
|
||||
现在用的是 Fira Code: https://github.com/tonsky/FiraCode
|
||||
|
||||
VS Code 里面可以在 settings.json 里加这行打开连字符： "editor.fontLigatures": true
|
||||
|
||||
字体推荐：
|
||||
|
||||
- [10 款最佳编程字体](https://zhuanlan.zhihu.com/p/36918101)
|
||||
- [编程字体推荐](https://juejin.cn/post/6844904144239607821)
|
||||
|
||||
## 快捷键
|
||||
|
||||
1. 按住 alt/option，可以在多个地方同时输入
|
||||
2. shift+option/alt+⬇️ 向下复制一行
|
||||
3. option/alt +⬇️/ ⬆️ 向下 / 上移动
|
||||
4. 在 html 中 输 lorem ，可以生成填充文本
|
||||
|
||||
## 插件
|
||||
|
||||
- prettier:自动美化格式
|
||||
- markdown editor:markdown 预览编辑器
|
||||
- foam:双链笔记
|
||||
- auto rename tag
|
||||
- color highlight
|
||||
- image preview：图片预览
|
||||
- live server：实时预览
|
||||
- [front matter](https://frontmatter.codes/)：可以用来设置 hugo/hexo 等博客的 frontmatter:
|
||||
|
||||
## 设置
|
||||
|
||||
- 缩进空格等于的字符数量：tab size
|
||||
- 保存：auto save /format on save
|
||||
|
||||
## 其他
|
||||
|
||||
- 全角半角符号区分很明显，输错全角会有波浪线提醒
|
||||
- obsidian 中有一个插件 [Open Valut in VSCode] 可以在 VS Code 里打开 obsidian 的库
|
||||
78
urara/用户体验要素1/+page.md
Normal file
78
urara/用户体验要素1/+page.md
Normal file
|
|
@ -0,0 +1,78 @@
|
|||
---
|
||||
title: 《用户体验要素》- 用户体验为何如此重要
|
||||
summary: 第一章笔记
|
||||
created: 2021-11-29T11:06:10+08:00
|
||||
categories:
|
||||
- UX学习笔记
|
||||
- 《用户体验要素》
|
||||
tags:
|
||||
- 读书笔记
|
||||
- 《用户体验要素》
|
||||
hidden: false
|
||||
draft: false
|
||||
slug: the-elements-of-user-experience-1
|
||||
lastmod: 2022-04-16T12:55:42.468Z
|
||||
# layout: post
|
||||
---
|
||||
|
||||
在 MarginNote 里读了本书，现将其重新梳理一遍。
|
||||
本书共有 8 个章节，预计分 6 个文章写完，这是第一篇。
|
||||
|
||||
|
||||
## **什么是用户体验**
|
||||
|
||||
> 用户体验并不是指一件产品本身是如何工作的
|
||||
|
||||
> 用户体验是指“产品如何与外界发生联系并发挥作用”,也就是人们如何“接触”和“使用”它。
|
||||
|
||||
> 用户体验设计通常要解决的是应用环境的综合问题
|
||||
|
||||
## **为体验而设计：使用第一**
|
||||
|
||||
> “设计一个用户体验良好的产品"作为明确的目标,意味着不仅仅是功能成外观那么简单。
|
||||
|
||||
### 为什么小而美的产品,更容易成功？
|
||||
|
||||
> 产品越复杂,确定如何向用户提供良好的使用体验就越困难。在使用产品的过程中,每一个新增的特性、功能或步骤, 都增加了导致用户体验失败的机会
|
||||
|
||||
## **用户体验和商机**
|
||||
|
||||
### 为什么在网站上，用户体验比别的产品更重要？
|
||||
|
||||
> 不管用户访问的是什么类型的网站,它都是一个“自助式”的产品。没有可以事先阅读的说明书、没有任何操作培训或讨论会、没有客户服务代表来帮助用户了解这个网站。
|
||||
|
||||
> 用户所能依靠的只有自己的智慧和经验,来独自面对这个网站的信息一一那么这个网站的主要目标之,就是尽可能有效地传达那些信息
|
||||
|
||||
|
||||
|
||||
### 为什么用户体验很重要？有什么作用吗
|
||||
|
||||
**商机、竞争优势**
|
||||
|
||||
> 提供优质的用户体验是一个重要的、可持续的竞争优势一一不仅仅对网站是这样, 对所有类型的产品和服务也是如此。
|
||||
|
||||
> 用户体验形成了客户对企业的整体印象,界定了企业和争对手的差异,并且决定定了客户是否还会再次光顾
|
||||
|
||||
### 什么是转化率？有什么用？
|
||||
|
||||
**衡量用户体验效果的指标**
|
||||
|
||||
|
||||
> 转化率通过跟踪有百分之多少的用户被你“转化”到了下一个步骤,就能衡量你的网站在达到“商业目的”方面的效率有多高
|
||||
|
||||
### 改善用户体验，是为了什么？通过什么方式达到？
|
||||
|
||||
> 任何在用户体验上所做的努力,目的都是为了提高效率。
|
||||
|
||||
1. “帮助人们工作得更快
|
||||
2. “减少他们犯错的几率
|
||||
|
||||
## **以用户为中心的设计**
|
||||
|
||||
### 什么是“以用户为中心”的设计？
|
||||
|
||||
> 创建吸引人的、高效的用户体验的方法称为“以用户为中心的设计(user- centered design)”。
|
||||
|
||||
### 怎么做？
|
||||
|
||||
> 在开发产品的每一个步骤中,都要把用户列入考虑范围。
|
||||
84
urara/用户体验要素2/+page.md
Normal file
84
urara/用户体验要素2/+page.md
Normal file
|
|
@ -0,0 +1,84 @@
|
|||
---
|
||||
title: 《用户体验要素》- 认识这些要素
|
||||
summary: 第二章笔记
|
||||
created: 2021-12-06T11:59:47+08:00
|
||||
categories:
|
||||
- UX学习笔记
|
||||
- 《用户体验要素》
|
||||
tags:
|
||||
- 读书笔记
|
||||
- 《用户体验要素》
|
||||
hidden: false
|
||||
draft: false
|
||||
slug: the-elements-of-user-experience-2
|
||||
lastmod: 2022-04-16T12:55:45.413Z
|
||||
# layout: post
|
||||
---
|
||||
|
||||
## **五个层面**
|
||||
|
||||
- 是哪五个层面？分别有什么内容？
|
||||
|
||||
|
||||
## **表现层 (surface)**
|
||||
|
||||
- 看得到，可操作
|
||||
- 组成： 在表现层( surface),你看到的是一系列的网页,由图片和文字组成。
|
||||
- 作用：一些可以点击的图片,从而**执行某种功能**,例如把你带到购物车里去的购物车图标。
|
||||
|
||||
## **框架层 (skeleton)**
|
||||
|
||||
- 在表现层之下
|
||||
- 组成：是按钮、控件照片和文本区域的**位置**。
|
||||
- 作用：框架层用于优化设计布局,以达到这些元素的最大的效果和效率一一使你在需要的时候,能记得标识并找到购物车的按钮。
|
||||
|
||||
## **结构层（structure）**
|
||||
|
||||
- 框架是结构的具体表达方式
|
||||
- 和框架层的区别：
|
||||
- 框架层确定了在结账页面上交互元素的位置，而结构层则用来设计用户如何到达某个页面,并且在他们做完事情之后能去什么地方
|
||||
- 框架层定义了导航条上各要素的排列方式,允许用户可以浏览不同的商品分类
|
||||
- 结构层则确定哪些类别应该出现在那里。
|
||||
|
||||
笔记：相当于结构层是信息架构，框架层是信息架构所决定的布局。 地图和坐标？
|
||||
|
||||
## **范围层 （scope）**
|
||||
|
||||
**特性和功能**就构成了网站的范围层( scope)
|
||||
|
||||
## **战略层 （strategy）**
|
||||
|
||||
- 网站的范围基本上是由网站战略层( strategy)所决定的
|
||||
- 内容：包括了经营者想从网站得到什么,还包括了用户想从网站得到什么。
|
||||
|
||||
## **如何建设这五个层面？**
|
||||
|
||||
### 自下而上地建设
|
||||
|
||||
|
||||
|
||||
### 在上一层完成之前开始下一层
|
||||
|
||||
上下层之间不是互相隔断的让任何一个层面中的工作都不能在其下层面的工作完成之前结束
|
||||
|
||||
|
||||
|
||||
## **基本的双重性**
|
||||
|
||||
### 什么是网页基本的双重性质？
|
||||
|
||||
网站既不能干脆地分类到应用程序,也不能分类到信息资源
|
||||
|
||||
### 什么是信息型的媒介类产品？
|
||||
|
||||
- 关注点是信息——网站应该提供哪些信息,这些信息对用户的意义是什么
|
||||
- 创建一个富信息( information-rich)的用户体验,就是提供给用户个可以寻找、理解,且有意义的信息组合。
|
||||
|
||||
### 什么是功能型的平台类产品
|
||||
|
||||
- 关注的是任务——令所在的操作都被纳入一个过程,去思考人们如何完成这个过程。
|
||||
- 在这里,我们把网站看成用户用于完成一个或多个任务的一个或一组工具。
|
||||
|
||||
### 用户体验的基本要素是什么？（五个层次、两种类别的产品）
|
||||
|
||||
|
||||
87
urara/用户体验要素3/+page.md
Normal file
87
urara/用户体验要素3/+page.md
Normal file
|
|
@ -0,0 +1,87 @@
|
|||
---
|
||||
title: 《用户体验要素》- 战略层（产品目标和用户需求）
|
||||
created: 2022-01-02 13:08:29
|
||||
categories:
|
||||
- UX学习笔记
|
||||
tags:
|
||||
- 《用户体验要素》
|
||||
- 读书笔记
|
||||
summary: 第三章笔记
|
||||
lastmod: 2022-05-07T05:33:16.860Z
|
||||
---
|
||||
|
||||
- 战略层的基本问题？
|
||||
|
||||
|
||||
> 知道企业与用户双方对产品的期许和目标,有助于促进用户体验各方面战略的确立和制定
|
||||
|
||||
> 此处的关键词是“明确”
|
||||
|
||||
## 产品目标
|
||||
|
||||
- 产品目标的设定需要注意什么？
|
||||
> 要想在太具体和太宽泛之间取得一个平衡,我们就应该避免在尚未充分了解问题之前就试图得出结论。
|
||||
> 所以需要调研
|
||||
- 品牌识别为什么很重要？
|
||||
> 对于任何一个网站,它需要明确描述的基础目标之一就是品牌识别( brand identity)
|
||||
> 品牌识別——可以是概念系统,也可以是情绪反应
|
||||
> 它之所以重要是因为它无法不被用户注意。在用户与产品交互的同时,企业的品牌形象就不可避免地在用户的脑海中形成了
|
||||
- 成功标准( Success metrics)是什么？有什么用？
|
||||
> 即一些可追踪的指标，如印象数、转化率、日活等
|
||||
> 在产品上线以后用来显示它是否满足了我们自己的目标和用户的需求。
|
||||
> 好的成功标准不仅影响项目各阶段的决策,也为衡量用户体验工作价值提供了具体的依据。
|
||||
- 设定成功标准需要注意什么？
|
||||
> 对驱动用户体验决策而言有意义的成功标准,一定是可以明确地与用户行为绑定的标准,而这些用户行为也一定是可以通过设计来影响的行为。
|
||||
> 不是所有的成功标准必须直接由网站获得。你也可以衡量对网站的间接影响
|
||||
> 任何断章取义的标准都可能造成误导:请务必后退一步,看看除了网站之外发生了什么事,以确定你了解到事情的全貌。
|
||||
|
||||
## 用户需求
|
||||
|
||||
### 用户细分( user segmentation）
|
||||
|
||||
- 什么是用户细分？
|
||||
> 将用户分成更小的群组(或细分用户群)
|
||||
> 每一群用户都是由具有某些共同关键特征的用户所组成。
|
||||
|
||||
|
||||
|
||||
- 如何进行用户细分？
|
||||
> 经验或专业程度上的不同就形成了我们细分用户群的基本维度
|
||||
- 人口统计学 demographic)
|
||||
- 性别、年龄、教育水平、婚烟状况、收入等。
|
||||
- 这些人口统计的数据概况可以相当粗略(男性:18~49 岁) 也可以非常具体(未婚、女性、大学毕业、25~34 岁、年薪 5 万美元)。
|
||||
- 消费心态档案 psychographic profile
|
||||
描述用户对于这个世界,尤其是与你的产品有关的某个事物的观点和看法的心理分析方法。
|
||||
- 细分到什么程度？
|
||||
> 创建细分用户群只是一种用于“揭示用户最终需求的手段”。你真正只需要得到的是和你发现的“用户需求数目”样多的细分用户群。
|
||||
- 面对相互矛盾的用户需求应该怎么办？
|
||||
> 很明显,我们无法提供一种方案可以同时满足这两种用户的需求。
|
||||
> 此时,我们要么选择针对单一用户群设计而排除其他用户群,要么为执行相同任务的不同用户群提供不同的方式。
|
||||
|
||||
### 用户研究(User Research）
|
||||
|
||||
- 有什么研究工具？如何用？
|
||||
> 问卷调査、用户访谈,或焦点小组) 最适合用于收集用户的普遍观点与感知。
|
||||
> 用户测试或现场调査)则更适用于理解具体的用户行为以及用户在和产品交互时的表现。
|
||||
- 什么是现场调查( contextual inquiry)？
|
||||
> 现场调查是指一整套完整、有郊全面的方法,用于了解在日常生活情境中的用户行为(因而得来此名)
|
||||
> 又叫行为考古
|
||||
- 什么是任务分析( task analysis)？
|
||||
> 任务分析的概念是认为每个用户与产品的交互行为都发生在执行某一任务的环境中。
|
||||
> 有时任务非常具体(譬如买电影票),而有时任务比较宽泛( 如学习国际商务章程)
|
||||
- 可用性的最终目标是什么？
|
||||
> 所谓可用性的最终目标,都是寻找令产品更容易使用的途径
|
||||
- 什么是卡片排序法？( card sorting)
|
||||
用途
|
||||
> 对于由信息动的产品,卡片排序法( card sorting)用于探索用户如何分类或组织各种信息元素
|
||||
> 方法
|
||||
> 给用户一沓索引卡片,每一张卡片附有信息元素的名字、描述,一张图像或内容的类型。然后用户根据小组或类别,依照自己感到最自然的方式将卡片排列出来。分析几位用户的卡片排列结果,就可以帮助我们了解用户对产品信息的看法
|
||||
> 常用于信息架构
|
||||
|
||||
## 团队角色和流程
|
||||
|
||||
- 团队中怎样沟通传递产品目标和用户需求？
|
||||
> 产品目标和用户需求经常被定义在一个正式的战略文档 ( strategy document)或愿景文档( vision document)中。
|
||||
> 这文档不仅仅是列出目标清单一一它提供不同目标之间的关系分析,并且说明这些目标要如何融入更大的企业环境中去。
|
||||
> 这些目标和对它们的分析经常由决策者、普通员工,和用户自己的直接意见来支持。
|
||||
> 这些意见生动地说明了项目中的战略制定问题。用户需求有时被记录在一个独立的用户调研报告中(将所有信息集中在一个地方有某些好处)。
|
||||
75
urara/设计心理学1-1/+page.md
Normal file
75
urara/设计心理学1-1/+page.md
Normal file
|
|
@ -0,0 +1,75 @@
|
|||
---
|
||||
title: 日用品心理学
|
||||
tags:
|
||||
- 设计心理学1
|
||||
- 读书笔记
|
||||
categories:
|
||||
- 设计心理学
|
||||
keywords:
|
||||
- 设计心理学
|
||||
created: 2021-10-20T12:28:00.000Z
|
||||
# layout: post
|
||||
summary: 《设计心理学 1》第一章——好设计有两个特征可视性和易通性
|
||||
lastmod: 2022-04-16T12:55:08.323Z
|
||||
---
|
||||
|
||||
最近参加了一个知识星球的读书打卡活动，每天需要阅读三个小节并归纳。于是第二次翻开这本书，不过这次决定在微信读书上阅读，划线标注之后再在 flomo 里写打卡内容，等读完了再放到 obsidian 中进行概念梳理。
|
||||
|
||||
以下在 flomo 中总结的内容
|
||||
|
||||
## 1.复杂的现代设备
|
||||
|
||||
1. 工程师思维强调逻辑而容易忽略用户
|
||||
2. 需要同时考虑人和机器
|
||||
3. 不同的设计学科有不同的侧重点，列举了工业设计、体验设计、交互设计
|
||||
|
||||
## 2.以人为本的设计
|
||||
|
||||
1. 以人为本的设计是一种设计理念,不是一门学科，和专业设计角色不同。
|
||||
2. 以人为本的设计通过分析用户的需求、能力和行为，用设计来满足用户的需求、能力和行为方式。
|
||||
3. 以人为本的设计需要通过观察来理解用户
|
||||
4. 快速测试可以方便地找到设计的问题所在。
|
||||
|
||||
## 3.交互设计的基本原则
|
||||
|
||||
- 五个心理学基本概念：示能，意符，约束，映射、反馈
|
||||
- 第六原则：概念模型
|
||||
|
||||
### 示能
|
||||
|
||||
- 物理对象和人之间的关系、物品的预设用途（能做什么）
|
||||
- 示能和反示能都应被揭示出来
|
||||
|
||||
### 意符
|
||||
|
||||
- 示能的外在表现、符号提示功能 （表明在哪里操作）
|
||||
- 简单的物品不应有过多的外在意符（如门）
|
||||
|
||||
### 约束
|
||||
|
||||
- 对用户操作的限制。（如死锁）
|
||||
|
||||
### 映射
|
||||
|
||||
- 两组要素之间的关系（如哪个开关开哪个灯）
|
||||
- 不同文化之间的映射也许会不同
|
||||
|
||||
### 反馈
|
||||
|
||||
- 一些让你知道系统正在处理你的要求的方式，即系统和用户的“沟通”（如电话接通之前的嘟嘟声，）
|
||||
- 需要即使反馈，只提供必要信息、避免过多反馈。
|
||||
- 需要精心策划、考虑优先权
|
||||
|
||||
## 4.系统映像
|
||||
|
||||
1. 是指设计师提供给用户的适用信息组合，如（说明书、操作说明视频等）
|
||||
|
||||
2. 是一种沟通中介，设计师通过“系统映像”给用户传递产品预设的心理模型，并期望用户基于此建立一致的心理模型。
|
||||
|
||||
## 5.科技的悖论
|
||||
|
||||
产品的复杂性增加，更难学难用。作者认为最好的方式是建立统一的标准。
|
||||
|
||||
## 6.设计的挑战
|
||||
|
||||
设计需要跨学科合作，设计管理很重要，需要兼顾平衡多方目标
|
||||
214
urara/设计心理学1-2/+page.md
Normal file
214
urara/设计心理学1-2/+page.md
Normal file
|
|
@ -0,0 +1,214 @@
|
|||
---
|
||||
title: 日常行为心理学
|
||||
tags:
|
||||
- 设计心理学1
|
||||
- 读书笔记
|
||||
categories:
|
||||
- 设计心理学
|
||||
keywords:
|
||||
- 设计心理学
|
||||
draft: false
|
||||
# layout: post
|
||||
created: 2021-10-20T16:14:47.371Z
|
||||
summary: 《设计心理学 1》第二章——人们如何做事？当事情出错了怎么办？怎么知道要做什么？
|
||||
lastmod: 2022-04-16T12:55:05.400Z
|
||||
---
|
||||
|
||||
## 1.人们如何做事：执行与评估的鸿沟
|
||||
|
||||
当人们使用物品时，会面对两个心理鸿沟：执行的鸿沟、评估的鸿沟
|
||||
|
||||
|
||||
|
||||
### 执行的鸿沟：
|
||||
|
||||
- 试图弄清楚如何操作
|
||||
- 当运行正常时，会有可见的要素以消除执行的鸿沟（即是容易看得明白是如何操作的）
|
||||
|
||||
### 评估的鸿沟：
|
||||
|
||||
- 试图弄清楚操作的结果
|
||||
- 容易弥合（即可以从多方面获得评估的结果？）
|
||||
- 评估的过程反映了努力的程度，人们必须对设备的物理状态做出解释，以便确定是否已经达到自己的期望和意图。
|
||||
- 当设备以方便的形式提供了它的状态信息，而且容易阐释，符合用户认知系统的方法，那么评估的沟壑就小。
|
||||
- 消除评价沟壑的主要的设计元素：反馈、概念模型。
|
||||
|
||||
### 如何消除这两个心理鸿沟：
|
||||
|
||||
- 执行的沟壑：意符、约束、映射、概念模型
|
||||
- 评价的沟壑：反馈、概念模型
|
||||
|
||||
## 2.行动的七个阶段
|
||||
|
||||
### 行动的两个步骤
|
||||
|
||||
执行动作-> 评估结果（解释）
|
||||
|
||||
### 七个阶段：
|
||||
|
||||
|
||||
|
||||
#### 执行桥 （目标->外部世界）
|
||||
|
||||
1. 计划
|
||||
2. 确认
|
||||
3. 执行
|
||||
|
||||
#### 评估桥（外部世界->目标）
|
||||
|
||||
4. 对比
|
||||
5. 诠释
|
||||
6. 感知
|
||||
|
||||
大部分行动不需要按顺序经历所有阶段，事件行动之间相互影响，可能会有很多行动分支
|
||||
|
||||
### 行动的分类：
|
||||
|
||||
- 目标驱动型（目标->）
|
||||
- 事件驱动型（外部世界->）
|
||||
|
||||
> 日常行动中许多是机会主义的行动，没有明确的目标
|
||||
|
||||
### “根本原因分析”
|
||||
|
||||
反复思索，追问背后的真实原因，如 5w
|
||||
|
||||
## 3.人的思想：潜意识主导
|
||||
|
||||
|
||||
|
||||
### 潜意识
|
||||
|
||||
- 人的行为大多数是潜意识的
|
||||
- 毫不费力
|
||||
- 基于过去的经验
|
||||
- 自动迅速进行
|
||||
- 偏重规则和结构
|
||||
- 无法区分常见与罕见
|
||||
- 不能被蓄意操纵
|
||||
|
||||
### 有意识的思维
|
||||
|
||||
- 缓慢而吃力
|
||||
- 比较、判断、解释
|
||||
|
||||
### 认知和情感
|
||||
|
||||
- 认知：提供理解
|
||||
- 情感：价值判断
|
||||
- 关系：
|
||||
- 认知引导情绪，情绪影响认知
|
||||
- 协同工作
|
||||
|
||||
## 4.人的认知和情感
|
||||
|
||||
三个层次：本能、行为、反思
|
||||
|
||||
### 本能层
|
||||
|
||||
- 最基本的处理层、直接的感知
|
||||
- 快速的、自发的、潜意识的
|
||||
- 对当前状况的反映，不涉及过去
|
||||
- 简单评估，不做价值判断
|
||||
例如：”悦耳“的声音，“冰冷”的水 （设计美学）
|
||||
|
||||
### 行为层
|
||||
|
||||
- 学习能力之本、交互之本，与行动，具体的操作有关
|
||||
- 潜意识的
|
||||
- 设计：行动应与期望相关联（正价反应、负价反应），方法是建立合理的反馈机制以管理预期。
|
||||
|
||||
### 反思层
|
||||
|
||||
- 有意识的认知之本，深度而缓慢的
|
||||
- 发展深层理解，推理、判断
|
||||
- 所产生的情绪最持久
|
||||
- 反思的回忆比现实更重要，反思的情感认知会掩盖行为层和本能层带来的影响。
|
||||
|
||||
> 高层次的反思认知可以触发低层次的情绪。低层次的情绪会引发更高层次的反思认知。
|
||||
|
||||
## 5.行动的七个阶段和大脑的三个层次
|
||||
|
||||
|
||||
|
||||
### 心流
|
||||
|
||||
是什么：完全沉浸在行动中的情感
|
||||
|
||||
会如何：人们会忽略外部时间和空间，有身临其境的感觉
|
||||
|
||||
特点
|
||||
|
||||
- 人们热衷于的
|
||||
- 需要一定专注力
|
||||
- 适当难度
|
||||
- 目标清晰
|
||||
- 立即反馈
|
||||
- 控制感
|
||||
- 行动时，忧虑消失
|
||||
- 活动时，主观时间感知改变
|
||||
|
||||
## 6.自说自话
|
||||
|
||||
人们喜欢为事情建立因果关系
|
||||
|
||||
### 概念模式
|
||||
|
||||
- 是一种形式的故事
|
||||
- 来源于部分事实和经验，不是完全准确的
|
||||
- 当外部信息缺乏时，人们靠想象力辅佐建立概念模型
|
||||
|
||||
## 7.责备错误之事
|
||||
|
||||
- 人们习惯为相继发生的两件事情之间建立因果关系
|
||||
- 第一次尝试失败后，人们倾向于重复这个动作（反馈应迅速）
|
||||
|
||||
### 给用户有保留的预测：
|
||||
|
||||
- 显示最差的预计情况
|
||||
- 最长的预估时间
|
||||
|
||||
### 习得性无助（自责循环）
|
||||
|
||||
- 指在多次经历失败后，便认为自己无法做好某事，结果陷入无助的状态。
|
||||
- 人们将不再进行尝试。
|
||||
|
||||
### 积极心理学
|
||||
|
||||
即一种正面思考的并且自我感觉良好的文化
|
||||
|
||||
### tips：
|
||||
|
||||
- 不要责怪用户的错误使用，反思产品问题，提升体验
|
||||
- 比“错误处理指南”更重要的是，消除产品本身错误。
|
||||
- 直接从帮助和指导信息中纠正问题，不要让用户重新开始。
|
||||
- 为用户纠正问题提供应有的帮助。
|
||||
|
||||
## 8.不当的自责
|
||||
|
||||
### 自责的原因
|
||||
|
||||
系统差错被归因为人为差错
|
||||
|
||||
### 设计师应如何
|
||||
|
||||
- 错误发生之前：减少不当行为发生的机会->示能、意符、映射、约束等
|
||||
- 错误发生时：让人们发现错误并纠正->反馈、概念模型
|
||||
|
||||
> 人擅长灵活的工作和创造，机器擅长准确的工作。
|
||||
|
||||
## 9.行动的七个阶段：七个基本设计原则
|
||||
|
||||
|
||||
|
||||
### 前馈
|
||||
|
||||
有助于回答执行类（做）的信息->如何做？
|
||||
|
||||
### 反馈
|
||||
|
||||
有助于理解发生了什么的信息->发生了什么？
|
||||
|
||||
### 设计的七个基本原则
|
||||
|
||||
可见性、反馈、概念模型、示能、意符、映射、约束
|
||||
137
urara/设计心理学1-3/+page.md
Normal file
137
urara/设计心理学1-3/+page.md
Normal file
|
|
@ -0,0 +1,137 @@
|
|||
---
|
||||
draft: false
|
||||
title: 头脑中的知识和外界知识
|
||||
tags:
|
||||
- 设计心理学1
|
||||
- 读书笔记
|
||||
categories:
|
||||
- 设计心理学
|
||||
keywords:
|
||||
- 设计心理学
|
||||
created: 2021-10-20T17:08:47.371Z
|
||||
summary: 《设计心理学 1》第三章——并非精确行为需要的所有知识都得储存在头脑里
|
||||
lastmod: 2022-04-16T12:55:13.235Z
|
||||
# layout: post
|
||||
---
|
||||
|
||||
并非精确行为需要的所有知识都得储存在头脑里。它可以分布在不同地方——部分在头脑里，部分在外部世界，还有一部分存在于外界约束因素之中。
|
||||
|
||||
## 1. 含糊的知识引导精确的行为
|
||||
|
||||
### 人们不需要完全精确的知识来支撑引导他们的行为。
|
||||
|
||||
**原因：**
|
||||
|
||||
- 知识存储在头脑和外部世界中 （知识很多）
|
||||
- 行动不需要完全精确的知识 （要求不高）
|
||||
- 外界世界存在自然约束（选择少了）
|
||||
- 头脑中的文化规范与习俗知识减少了选择的范围。（选择少了）
|
||||
|
||||
### 两种类型的知识：
|
||||
|
||||
1. 陈述性（是什么）->未必是真的
|
||||
2. 程序性（怎么做）->通过练习来学习
|
||||
|
||||
---
|
||||
|
||||
- 人们利用环境获得大量备用信息：便利贴、信号灯、指示器，以及利用物品空间位置来提醒事件。
|
||||
- 我们习惯寻找特色来区分事物，经验会影响我们如何区分
|
||||
|
||||
## 2. 记忆是储存在头脑中的知识
|
||||
|
||||
复杂的密码增加了人们记忆的难度，于是人们采用简单粗暴的方式来记下密码，这反而让密码不安全了。更好的方式是使用多种标识符。
|
||||
|
||||
## 3. 记忆的结构
|
||||
|
||||
### 两种记忆类型
|
||||
|
||||
#### 1. 短时记忆（工作记忆）
|
||||
|
||||
- 与当下任务有关
|
||||
- 容易受干扰
|
||||
- 用保留记忆的时常来衡量
|
||||
- 记忆难度主要受条目数量影响，一般是 5 ～ 7 个，设计时则要缩减。
|
||||
- 设计时可以利用多感官传递信息，减少对用户短时记忆的干扰
|
||||
|
||||
#### 2. 长时记忆（LTM /long-term memory)
|
||||
|
||||
- 存储的是过去的信息
|
||||
- 存储和还原需要花费更多的时间和精力
|
||||
- 解释信息的方式很重要，记忆的难点在于组织和管理信息
|
||||
- 可以被伪造，回溯记忆不是完全准确的，我们只关注自己在意的信息。
|
||||
|
||||
---
|
||||
|
||||
- 合理的信息结构可以帮助理解、简化记忆，为信息的存储和提取建立了路径
|
||||
- 设计应提供有意义的信息结构，减少人们需要记忆的分量和难度。
|
||||
"帮助人们记忆的最有效方式就是使人们不需要记忆。"
|
||||
|
||||
## 4.近似模型：现实世界里的记忆
|
||||
|
||||
- 现实生活中，通常不需要绝对的真理，“差不多“就可以满足人们的需求。
|
||||
- 简化的概念模型可以减轻人们的思维负担
|
||||
|
||||
## 5.头脑中的知识
|
||||
|
||||
外界知识是帮助记忆的有力工具，关键是要在合适的场合、时间
|
||||
|
||||
### 前瞻记忆
|
||||
|
||||
仅仅指记住在未来某个时间要从事的一些活动这个记忆任务。（记住未来的某一件事）
|
||||
|
||||
### 未来记忆
|
||||
|
||||
指规划能力，想象未来的能力
|
||||
|
||||
### 提醒的两个层面：
|
||||
|
||||
1. 信号：有件事要做
|
||||
2. 信息：这件事是什么
|
||||
|
||||
理想的提醒方法应兼顾两个层面
|
||||
|
||||
## 6.外界知识和头脑中知识的此消彼长
|
||||
|
||||
- 存储在外界和头脑中的知识，特性不同，使用的场所也不同
|
||||
- 外界的知识可以减少头脑的负担，但使用起来比较低效
|
||||
|
||||
### 外界的知识
|
||||
|
||||
查找低效、初次使用时易用性高->设计可优化信息查找效率
|
||||
|
||||
### 头脑中的知识
|
||||
|
||||
查找高效、初次使用时易用性低（需要学习）->设计可构建合理概念模型，简化学习过程
|
||||
|
||||
|
||||
|
||||
## 7.多个大脑里和多个设备中的记忆
|
||||
|
||||
- 外界知识结合头脑知识的两种记忆形式：交换记忆、数码记忆
|
||||
- 外界知识真假难辨，需要结合头脑中的知识进行辨别
|
||||
|
||||
## 8.自然映射
|
||||
|
||||
> 映射是结合外部世界与头脑里知识的最佳案例
|
||||
|
||||
### 什么是自然映射
|
||||
|
||||
作用于控制与被控制对象之间的，显而易见的映射关系，
|
||||
|
||||
### 三个层次的映射
|
||||
|
||||
1. 最佳映射：直接对应
|
||||
2. 次好映射：位置靠近
|
||||
3. 第三好的映射：空间分布一至
|
||||
|
||||
### 糟糕的映射 VS 好的映射
|
||||
|
||||
- 糟糕的映射：增加记忆负荷和使用者的出错几率（常见错误：缺乏标识）
|
||||
- 好的映射：不需要另外的图表和标注
|
||||
购买者通常不是最终用户
|
||||
|
||||
## 9.文化与设计：自然映射随文化而异
|
||||
|
||||
- 对文化模式的选择将指导相对应的交互设计
|
||||
- 受文化影响的一些映射关系：时间流动的方向、书写的方向、前后关系、物品的移动方向等
|
||||
- 不同的概念模式切换时，设计会比较困难，用户需要时间学习和适应新的模式
|
||||
170
urara/设计心理学1-4/+page.md
Normal file
170
urara/设计心理学1-4/+page.md
Normal file
|
|
@ -0,0 +1,170 @@
|
|||
---
|
||||
title: 知晓：约束、可视性和反馈
|
||||
tags:
|
||||
- 设计心理学1
|
||||
- 读书笔记
|
||||
categories:
|
||||
- 设计心理学
|
||||
keywords:
|
||||
- 设计心理学
|
||||
created: 2021-10-22T20:21:44.000Z
|
||||
summary: 《设计心理学 1》第四章——遇到一个新的设备或状况，设计师应如何提供重要信息，以便人们知道如何操作
|
||||
lastmod: 2022-04-16T12:55:16.673Z
|
||||
# layout: post
|
||||
---
|
||||
|
||||
## 章前
|
||||
|
||||
### 外界的知识：
|
||||
|
||||
- 示能、意符
|
||||
- 显示、操纵的位置
|
||||
- 操作和结果之间的匹配关系、
|
||||
- 物理约束
|
||||
|
||||
### 头脑中的知识
|
||||
|
||||
- 概念模型
|
||||
- 对行为的文化面向、语义面向和逻辑的约束
|
||||
- 现状与以往经验之间的类比
|
||||
|
||||
## 1. 四种约束因素：物理、文化、语义和逻辑
|
||||
|
||||
### 物理约束
|
||||
|
||||
- 将可能的操作局限在一定范围内
|
||||
- 物品的外部特性决定了它的操作方法
|
||||
- 不需要专门培训用户如何使用
|
||||
- 例如：电池只有朝一个方向放才可以放进去
|
||||
- Tips：重要是解决用户的基本需求，而不是“约束”本身
|
||||
|
||||
### 文化约束
|
||||
|
||||
- 文化惯例、习俗
|
||||
- 以范式的形式存在
|
||||
> 范式（schemas)：知识结构，由一般规则和信息组成，主要用于诠释状况，指导人们的行为
|
||||
- 会随时间变化
|
||||
- 例如：不同地区，打招呼的方式、尺度不同
|
||||
|
||||
### 语义约束
|
||||
|
||||
- 语义：关注意义
|
||||
- 语义约束：利用某种境况的特殊含义来限定可能的操作方法
|
||||
- 依据：对现实情况和外部世界的理解
|
||||
- 会随时间变化
|
||||
- 例如：在不同地方，颜色代表的意义不同
|
||||
|
||||
### 逻辑约束
|
||||
|
||||
- 如：空间或位置上的逻辑关系约束
|
||||
|
||||
## 2. 示能、意符和约束在日常用品设计中的应用
|
||||
|
||||
### 门的问题
|
||||
|
||||
- 我们必须知道要做什么，在什么地方做（面对新事物时的操作问题）
|
||||
- 利用示能、约束限制可能的操作、规避不合理的行为
|
||||
- 设计不应违反直觉（即用户习惯、思维惯性）
|
||||
- 遵守文化规范
|
||||
|
||||
### 开关的问题
|
||||
|
||||
确定两类基本问题：
|
||||
|
||||
1. 要控制的设备
|
||||
2. 映射
|
||||
|
||||
### 任务分析
|
||||
|
||||
通过对实际任务的细致观察，进行设计过程，从而设计出与实际任务最贴切的方法
|
||||
|
||||
### 以用户为中心的设计
|
||||
|
||||
基于对实际任务的细致观察，进行的设计过程
|
||||
|
||||
### 以活动为中心的控制
|
||||
|
||||
- 是什么：对开关所要完成的活动，进行充分仔细地分析和精心设计。以活动为划分功能/开关的依据。
|
||||
- 仍需保留手动控制、调整功能
|
||||
|
||||
## 3. 引导行为的约束力
|
||||
|
||||
**强制功能**
|
||||
|
||||
### 是什么
|
||||
|
||||
一种物理约束，是较强约束的极端情况
|
||||
|
||||
### 作用
|
||||
|
||||
- 防止不当行为
|
||||
- 在行动受到限制的情况下，确保出现在某个阶段的差错不会蔓延，能够防止产生进一步的后果
|
||||
|
||||
### 例子
|
||||
|
||||
需要用钥匙才可以开车
|
||||
|
||||
### 三种强制方式
|
||||
|
||||
#### 互锁
|
||||
|
||||
- 促使行动按正确的**次序**进行（先 1>2，互相关联的操作步骤)
|
||||
- 例如：必须先关闭洗衣机门，才可以开始启动洗衣机，在洗衣中途打开洗衣机门的话，会强制断电，停止洗衣。
|
||||
|
||||
#### 自锁
|
||||
|
||||
- 自锁保持一个操作停留在激活状态，防止有人过早地停止操作
|
||||
- 使某人待在一个空间，或在所需操作完成前防止误操作。
|
||||
- （将用户圈定在安全的操作空间）
|
||||
- 例如：就像监狱的牢房或婴儿床的围栏，防止一个人离开那个区域。
|
||||
|
||||
#### 反锁
|
||||
|
||||
- 防止某人进入那些危险的区域，或者阻止事情的发生
|
||||
- （锁定的是危险的区域，而不是用户）
|
||||
- 例如：封锁地下室的入口
|
||||
|
||||
## 4. 惯例、约束和示能
|
||||
|
||||
- 人们需要通过惯例来感知示能，对预设用途的解释是一个文化惯例
|
||||
- 遵循一致性的设计可以减轻用户的学习成本
|
||||
- 如果打破惯例得到的益处比遵循惯例得到的多，应选择打破惯例
|
||||
|
||||
## 5. 水龙头：关于设计的历史案例
|
||||
|
||||
- 标准化是设计的终极基本原则，统一的标准可以简化人们的生活，但达成一致的标准是困难的。
|
||||
- 标准应该反应用户心理上的概念模型，而不是实际的物理模型
|
||||
|
||||
## 6. 利用声音作为意符
|
||||
|
||||
### 为什么
|
||||
|
||||
- 没有办法提供可视信息时，可以利用声音提供
|
||||
- 声音可以帮助提供有用的反馈信息
|
||||
|
||||
### 应提供什么信息：
|
||||
|
||||
- 声音的来源
|
||||
- 设备的工作状态
|
||||
- 不可见但对用户有用的信息
|
||||
|
||||
### 如何提供
|
||||
|
||||
- 使用自然的声音
|
||||
- 自然的声音可以反映出自然物体之间复杂的交互作用
|
||||
- 当使用人造声音时，使用丰富的声谱，同时小心提供不会恼人但信息丰富的细节
|
||||
- 设计标准
|
||||
- 报警功能
|
||||
- 定位功能
|
||||
- 减少骚扰
|
||||
- 标准化与个性化
|
||||
|
||||
### 例子
|
||||
|
||||
汽车的声音是重要的意符
|
||||
|
||||
### “拟真”(skeuomorphic)
|
||||
|
||||
- 指将那些将过去的、熟悉的概念融入到新的技术里，即使它们已经不能再发挥功能了。
|
||||
- 帮助实现新旧技术之间的过渡
|
||||
- 也被翻译为“拟物化
|
||||
379
urara/设计心理学1-5/+page.md
Normal file
379
urara/设计心理学1-5/+page.md
Normal file
|
|
@ -0,0 +1,379 @@
|
|||
---
|
||||
title: 人为差错？不，拙劣的设计
|
||||
summary: 《设计心理学 1》第五章——设计师经常严重误解人心理的局限性，要求人像机器一样工作
|
||||
created: 2021-10-27T20:22:17+08:00
|
||||
math: falase
|
||||
categories:
|
||||
- 设计心理学
|
||||
tags:
|
||||
- 设计心理学1
|
||||
- 读书笔记
|
||||
draft: false
|
||||
lastmod: 2022-04-16T12:55:20.101Z
|
||||
# layout: post
|
||||
---
|
||||
|
||||
- 当事故发生时，人们往往会将设计问题归因在操作的人身上，但这并不能解决问题
|
||||
- 解决问题的方法：找到根本原因，重新设计系统
|
||||
|
||||
## 1.何以出错
|
||||
|
||||
### 出错的原因
|
||||
|
||||
- 要求人们在任务和流程中做违背自然规律的事情。
|
||||
- 将系统问题归因为人的问题
|
||||
- 设计重点放在系统和设备上，忽略了使用者的需求。不了解人的身心特性，按对机器的标准要求人。
|
||||
- 时间压力
|
||||
|
||||
### 解决错误的方法
|
||||
|
||||
- 不要苛责用户，承认存在问题
|
||||
- 对问题进行**根本原因分析**
|
||||
- 调查事故，直到发现单一的、潜在的根本原因。
|
||||
- 确定是什么致使人们犯错
|
||||
- 方法：5 个为什么分析法
|
||||
|
||||
### 差错之外：故意犯错
|
||||
|
||||
- 有时人们会故意犯错以达到目标
|
||||
- 不恰当的规则和流程是违规行为的一个主要原因，它不仅诱使且鼓励了违规，因为没有违规行为就不能完成工作。
|
||||
|
||||
本章主要讨论的是“无意识的犯错”
|
||||
|
||||
## 2.差错的两种类型：失误和错误
|
||||
|
||||
### 差错
|
||||
|
||||
- 定义：与普遍接受的正确或合理的行为有所偏离
|
||||
- 是所有错误行为的总称
|
||||
- 两种类型：**失误** 和 **错误**
|
||||
|
||||
### 差错和行动的七个阶段
|
||||
|
||||
|
||||
|
||||
- 错误发生在高水平的认知（有意）
|
||||
- 失误发生在较低层次（无意）
|
||||
- 记忆失效可能发生在每个阶段之间的八个转换过程中
|
||||
|
||||
### 失误
|
||||
|
||||
- 目标、计划正确 ‣ <mark>行动出错</mark>
|
||||
- 分类
|
||||
1. 行动失误
|
||||
2. 记忆失误
|
||||
|
||||
#### 行动失误
|
||||
|
||||
- 执行了错误的动作
|
||||
- 分类：
|
||||
1. 撷取性失误（capture slips）
|
||||
2. 描述相似性失误（description-similarity slips）
|
||||
3. 功能状态失误（mode errors）
|
||||
|
||||
##### 1. 撷取性失误
|
||||
|
||||
- **如何发生的**
|
||||
- 某个曾经的动作挤占了需要完成的动作（陌生--更换成->熟悉）
|
||||
- 有经验和技巧的人比初学者更容易犯
|
||||
- **如何避免**
|
||||
- 避免有相同的起始步骤，然后再发散的流程。
|
||||
|
||||
##### 2. 描述相似性失误
|
||||
|
||||
- **如何发生的**
|
||||
- 差错发生在与目标相似的对象上，在错误的对象上执行正确的动作
|
||||
- 如果对目标的描述含糊不清，就会发生描述
|
||||
- **如何避免**
|
||||
- 在设计不同目的的控制和显示设备时，设计师需要确认它们之间具有明显差异
|
||||
|
||||
##### 3. 功能状态失误
|
||||
|
||||
- **如何发生的**
|
||||
- 在错误的模式/功能/状态下执行操作
|
||||
- 当设备有不同的状态，而相同的控件具有不同的含义，就可能发生
|
||||
- 设备不能显示可见模式时，尤其容易发生
|
||||
- **如何避免**
|
||||
- 避免模式控制的设计
|
||||
- 若无法避免，使设备能够明显地显示所激活的功能模式。
|
||||
- 设计可以抵消干扰活动对已设定模式带来影响的系统。
|
||||
|
||||
#### 记忆失误
|
||||
|
||||
原文又称：记忆失效性失误
|
||||
|
||||
- **如何发生的**
|
||||
- 原打算做的行动没有做，或者没有及时评估其行动结果
|
||||
- 因记忆问题引起的差错
|
||||
- **如何避免**
|
||||
- 使用最少的步骤
|
||||
- 对需要完成的步骤提供生动有效的提醒
|
||||
- 使用的强制功能
|
||||
|
||||
## 3.错误的分类
|
||||
|
||||
### 错误
|
||||
|
||||
- <mark>目标/计划出错</mark> ‣ 行动随之偏离目的。
|
||||
- 分类
|
||||
1. 违反规则：基于正确知识->正确分析情况->_遵循错误规则_->错误行动
|
||||
2. 缺乏知识：基于不正确或不完善的知识->_错误分析情况_->错误行动
|
||||
3. 记忆失效：在目标、计划或评价阶段有所遗漏
|
||||
|
||||
#### 1. 基于规则的错误（违反规则）
|
||||
|
||||
- **如何发生的**
|
||||
- 错误地理解了问题，从而采用错误的目标或计划，导致遵循不恰当的规则。
|
||||
- 采用了正确的规则，但规则本身就有问题
|
||||
- 采用了正确的规则，但不正确地评估行为的结果。
|
||||
|
||||
> 在复杂的情况下，太多的信息就是问题所在：信息，既支持决策，也会排斥它
|
||||
|
||||
- **如何避免**
|
||||
- 将当前系统状态的信息，以易于理解和阐释的方式呈现出来，以及提供必要的说明和解释。
|
||||
|
||||
#### 2. 基于知识的错误（缺乏知识）
|
||||
|
||||
- 处理问题时，人类过度依赖储存在记忆中的经验，而对事物并不进行系统地分析。
|
||||
- **如何发生的**
|
||||
- 当碰到异常情况，没有足够的技能或规则去处理它，人们就会采取基于知识的行为
|
||||
- 人们缺乏应对相应情境操作所需知识
|
||||
- **如何避免**
|
||||
- 深入地了解状况，提供程序手册指引
|
||||
- 借助适当的概念模型来解决问题。
|
||||
- 提供良好的合作解决问题的技能和工具，如机器辅助
|
||||
|
||||
#### 3. 记忆失效的错误
|
||||
|
||||
- 记忆倾向于对一般事物进行过度概括和规范，并且过度强调事物之间的差异。
|
||||
- **如何发生的**
|
||||
- 记忆出错导致*遗忘*了目标或行动计划，记忆的失误就会导致错误。
|
||||
- 某个*中断*导致人们忘记正在对目前环境状况所做的评判
|
||||
- **如何避免**
|
||||
- 确保所有相关的信息连续可用，如目标、计划和对当前系统的评价
|
||||
- 假设人们在行动中可能被打断，在恢复操作时为他们提供需要的帮助。
|
||||
|
||||
## 4.社会和习俗压力
|
||||
|
||||
### 压力
|
||||
|
||||
社会和习俗压力影响大，但却难观测。好的方法是“奖励安全“、培训等等
|
||||
|
||||
> 永远不要低估社会压力对个人行为的影响力量，它可能促使原本理智的人们去做他们即使知道是错误或可能危险的事情。
|
||||
|
||||
> 社会压力不断出现。它们通常很难被记录下来，因为大多数人和组织都不愿承认这些因素，所以即使在事故调查中发现有社会压力的因素，其结果也往往隐匿不见，得不到公众的仔细监督
|
||||
|
||||
> 我们需要不同的培训；我们需要**奖励安全**，并将其置于经济压力之上
|
||||
|
||||
### 检查清单
|
||||
|
||||
> 检查清单是个功能强大的工具，经过验证，它可以增加行为的准确性和减少差错，特别是失误和记忆失效
|
||||
|
||||
- **如何使用**
|
||||
- 人数：通常有两人一起作为一个团队使用检查单：一个人阅读指令，同时另外一个执行命令。
|
||||
- 清单设计：不断调整列表直到它涵盖了基本的项目，却不会额外增加负担
|
||||
- **隐患**
|
||||
- 增加更多的人来检查任务 ‣ 增加了出错的机会。
|
||||
- 一些专业人士将其被视为对自己专业能力的侮辱
|
||||
- 打印清单将顺序结构强加于任务实施->增加了记忆失效的几率 (利用电子清单解决)
|
||||
|
||||
## 5、差错报告
|
||||
|
||||
减少差错的唯一方法就是直面差错，承认差错存在，并为减少差错而作出改变。
|
||||
三个案例：
|
||||
|
||||
### 自动化（JIDOKA）
|
||||
|
||||
来源于汽车生产系统
|
||||
|
||||
- 具体：
|
||||
- **立即报告差错**：当生产线上发现事情出错时->工人立即报告
|
||||
- **持续关注**：如果有故障的零件要继续移动到下一个工序->通过"安灯"停止装配线,并"报警"
|
||||
- **确定原因**：技术专家聚集到问题发生区域，探寻差错发生的根本原因
|
||||
|
||||
### 防呆（POKA-YOKE）
|
||||
|
||||
- 措施之一是添加简单的工具、夹具或设备来**限制**操作，避免犯错。（简单的示意）
|
||||
- 需要遵循的原则：示能，意符，映射和约束，最重要的是**强迫**功能。
|
||||
|
||||
### 航空安全报告体系
|
||||
|
||||
主要是讲如何降低人们报告差错时的心理负担
|
||||
|
||||
1. 匿名提交差错报告
|
||||
2. 差错真实则豁免处罚
|
||||
3. 通过第三方机构提交差错报告检查
|
||||
|
||||
## 6.甄别差错
|
||||
|
||||
### 为什么甄别差错是困难的
|
||||
|
||||
#### 甄别失误
|
||||
|
||||
- 缺少反馈
|
||||
- 难以检测 （如记忆失效）
|
||||
|
||||
#### 甄别错误
|
||||
|
||||
- 难以识别不恰当的目标->持续行动->行动和目标一致（增加信心）->接近不恰当的目标
|
||||
- 所处情境复杂
|
||||
|
||||
#### 记忆失效性（失误/错误）
|
||||
|
||||
**区别：**
|
||||
|
||||
- 失误：只有计划中的单一部分被漏掉 （做了不该做的）
|
||||
- 错误：整个计划都被遗忘了（没有做该做的）
|
||||
|
||||
### 为错误辩解
|
||||
|
||||
人们常常**忽略单一的异常情况**，并试图为其**辩解**。但他们的辩解是基于过去经验的，可能已**不适用于现状**，这些“简单处理”的辩解会让他们错失挽救错误的良机。
|
||||
|
||||
### 事故分析要置身于真实情境
|
||||
|
||||
#### 事故发生时
|
||||
|
||||
- 人们常常情绪波动、压力大
|
||||
- 所处的情境是复杂多变的
|
||||
- 没有明确的线索可以分辨关键的信息
|
||||
|
||||
#### 事故发生后
|
||||
|
||||
- 知道到底发生了什么事，遂将重点放在相关的信息上并忽略不相关的信息。
|
||||
|
||||
#### 事故分析应
|
||||
|
||||
- 调查人员应当想象自己置身于事故的参与者之中
|
||||
- 考虑操作者的所有信息，曾经接受的所有培训，以及类似的历史事件
|
||||
|
||||
## 7.为差错设计
|
||||
|
||||
### 基本原则
|
||||
|
||||
> 1. 了解差错的根本原因，通过设计以尽量减少这些诱因。
|
||||
> 2. 进行合理性检验。检查操作行为是否能够通过“一般性常识”的测试
|
||||
> 3. 设计出可以“撤销”操作的功能——“返回”以前操作，或者如果操作不能“返回”，则增加该操作的难度。
|
||||
> 4. 让人们易于发现一定会出的差错，以便容易纠正。
|
||||
> 5. 不要把操作看成是一种差错；相反，帮助操作者正确地完成动作。应该将操作认为近似于预期目的。
|
||||
|
||||
### 记忆中断
|
||||
|
||||
- 是差错的主要来源，尤其是记忆失效性差错
|
||||
- **恢复成本大**：必须记得准确的活动被打断之前的状态，目标是什么，被打断的活动处于行为周期的哪个阶段，以及当时系统的状态
|
||||
- **多任务处理**：效率低，差错更多
|
||||
- 可能的方法：设置屏蔽期、自动保存、编辑记录（足迹）等
|
||||
|
||||
### 警示信号存在的问题
|
||||
|
||||
- 设备间缺乏协同，信号互相影响，让用户分神，从而干扰问题的解决
|
||||
- 语音播报：
|
||||
- 在用户视觉注意被占用时间，可以传递清楚的信息
|
||||
- 环境嘈杂时，很难听清楚
|
||||
- 干扰使用者之间的对话
|
||||
|
||||
### 为差错设计的方法
|
||||
|
||||
#### 研究差错
|
||||
|
||||
- 在差错发生前：研究如何设计预防措施
|
||||
- 是差错发生时：研究如何检测并纠正
|
||||
|
||||
#### 增加约束
|
||||
|
||||
- 对操作行为施加特殊的约束。
|
||||
- 如：约束条件、强迫性功能和防呆措施、隔离操控、使用分离模块等。
|
||||
|
||||
#### 撤销
|
||||
|
||||
- 减少差错带来的进一步影响
|
||||
- 应留有多步撤销
|
||||
|
||||
#### 差错信息确认
|
||||
|
||||
- **突出显示所有即将采取的行动和对象.**
|
||||
- **突出行动的后果**
|
||||
- **方法**
|
||||
- 使正在操作的对象更加显眼。
|
||||
- 让操作可逆
|
||||
|
||||
#### 合理性检查
|
||||
|
||||
电子系统可以更方便的定位和确认不合理的操作，但用户并不一定能即时发现错误，在用户进行不合常规的操作时，给用户提醒、确认。
|
||||
|
||||
如：大额转账金额确认
|
||||
|
||||
#### 减小失误
|
||||
|
||||
- **撷取性失误**
|
||||
- 避免中断
|
||||
- 提供恢复帮助（撤销机制）
|
||||
- 尽可能让操作流程前面几步不要相似
|
||||
- **描述相似性失误**
|
||||
- 保证操作及其控制尽可能不同
|
||||
- 若相似，则在物理距离上越远越好
|
||||
- **功能状态失误**
|
||||
- 去掉多余功能
|
||||
- 或 ：让功能彼此容易区分和明确可见
|
||||
|
||||
> 防范失误最好的办法是对正在实施的动作的特性，提供可以感受到的*反馈*，越是灵敏的反馈越能体现新的结果和状态，再伴之以能够*撤销*差错的机制
|
||||
|
||||
### 从差错到事故——瑞士奶酪模型
|
||||
|
||||
|
||||
|
||||
- 事故的发生往往有很多诱因，任何其中一个原因不出现，事故就不会发生。
|
||||
- 如何让系统更加有弹性的方法：**冗余设计和多重保护措施**：
|
||||
- 设计额外的差错预防机制，减少失误、错误或设备失效的机会（奶酪上更少的孔），
|
||||
- 为系统中不同的零部件设计完全不同的运行机制（努力使奶酪上的孔不要排列起来）。
|
||||
|
||||
> 我们应该好好思考系统，思考所有可能导致人为失误，进而酿成事故的交互因素，然后，策划出从总体上改进系统，使之更加可靠的方案。
|
||||
|
||||
## 8.良好的设计还不够
|
||||
|
||||
良好的设计还是难以防范人们故意犯错，差错并不全都因为设计
|
||||
|
||||
## 9.修补回复工程
|
||||
|
||||
<span class="passive">resilience engineering</span>
|
||||
|
||||
### 是什么
|
||||
|
||||
- 一种应用于工业的系统管理方式
|
||||
- 目标是遇到外部冲击时，能以最小的破坏和损失恢复运转
|
||||
- 将安全视为核心价值
|
||||
- 关注于帮助人们在压力下成功应付复杂的环境以取得成功。
|
||||
|
||||
### 如何做
|
||||
|
||||
- 设置漏洞、测试工厂的反应水平
|
||||
- 反复评估，测试和改进。
|
||||
- 要持续关注于预测故障的潜在变化
|
||||
|
||||
## 10.自动化的悖论
|
||||
|
||||
### 故障时结果难以估计
|
||||
|
||||
原因：
|
||||
|
||||
> 当自动化系统发生故障时，经常没有警告，人需要时间去注意问题、评估分析、解决问题。
|
||||
|
||||
### 悖论
|
||||
|
||||
> 能够执行那些枯燥乏味、令人厌烦的工作，但是不能做太复杂的工作。
|
||||
|
||||
## 11.应对差错的设计原则
|
||||
|
||||
### 人和机器协同应工作
|
||||
|
||||
> “人为差错”，往往只是一种人类特性与技术需求不相符的行动
|
||||
|
||||
- **人和机器擅长的工作不同**。人类是灵活的，多才多艺且具有创造力。机器是死板的，需要精密设置且相对局限于规定的操作。
|
||||
- **人类的能力和技术要求之间存在不匹配**，差错不可避免。
|
||||
- 设计**应正视人和机器之间的差异**，考虑到有可能出现的每一个差错，然后想办法避免这些差错，
|
||||
- 设法**使操作具有可逆性**，以尽量减少差错可能造成的损失。
|
||||
|
||||
### 关键设计原则
|
||||
|
||||
- **将所需的操作知识储存在外部世界**，而不是全部储存在人的头脑中，但是如果用户已经把操作步骤熟记在心，应该能够提高操作效率。
|
||||
- **利用自然和非自然的约束因素**，例如物理约束、逻辑约束、语义约束和文化约束；利用强迫性功能和自然匹配的原则。
|
||||
- **缩小动作执行阶段和评估阶段的鸿沟**。在执行方面，要让用户很容易看到哪些操作是可行的。在评估方面，要把每一个操作的结果显示出来，使用户能够方便、迅速、准确地判断系统的工作状态。
|
||||
96
urara/设计心理学1-6/+page.md
Normal file
96
urara/设计心理学1-6/+page.md
Normal file
|
|
@ -0,0 +1,96 @@
|
|||
---
|
||||
title: 设计思维
|
||||
created: 2021-11-03T03:49:10.353Z
|
||||
categories:
|
||||
- 设计心理学
|
||||
tags:
|
||||
- 设计心理学1
|
||||
- 读书笔记
|
||||
draft: false
|
||||
summary: 《设计心理学 1》第六章——设计需要探究问题的来源，而不只是停留在表面
|
||||
lastmod: 2022-05-07T05:31:58.650Z
|
||||
---
|
||||
|
||||
这一章和第七章读得有些仓促，加上是比较熟悉的内容，所以笔记比较简短。之后梳理概念的时候再仔细写写。
|
||||
|
||||
## 1. 解决正确的问题
|
||||
|
||||
设计思维的关键是要解决真正的、根本的问题。可以通过“五个为什么”等方法去**确定问题**。“以人为本的设计”则是可以应用于**解决问题**的原则之一，它强调采用满足用户需求和能力的恰当方式去解决问题，这主要是通过四个步骤：观察->创意->打样和测试。
|
||||
|
||||
## 2. 双钻设计模式
|
||||
|
||||
描述了设计的两个阶段：找到正确的问题，和满足用户需求
|
||||
|
||||
### 四个步骤（发散->聚焦）
|
||||
|
||||
1. 发现
|
||||
2. 定义
|
||||
3. 开发
|
||||
4. 交付
|
||||
|
||||
## 3. 以人为本的设计流程
|
||||
|
||||
可以将以人为本的设计原则嵌入到双钻模型中，于是有“以人为本的设计流程
|
||||
|
||||
|
||||
### 1.观察
|
||||
|
||||
- 即设计调研。通过调研深入洞察用户的真正需求，并分析用户在真实状况下的行为模式。
|
||||
|
||||
### 2. 激发创意（构思）
|
||||
|
||||
有很多激发创意的方法，核心的原则是：
|
||||
|
||||
- 激发大量的创意
|
||||
- 不要批评，鼓励创意
|
||||
- 质疑每一件事
|
||||
|
||||
### 3.打样（原型）
|
||||
|
||||
**奥兹向导”（Wizard of Oz**）：
|
||||
|
||||
- 一种模拟产品功能的方法
|
||||
- 测试时让人执行通常由计算机执行的任务，且用户不知道该产品是不具备功能性的。
|
||||
|
||||
#### 4.测试
|
||||
|
||||
汇集小部分目标用户进行原型测试，作者一般一次单独测试 5 个人，有测试结果后改进方案，接着选择另外五个人再次测试。
|
||||
|
||||
- 原型测试的关键是：快速测试、快速失败
|
||||
|
||||
另外一些提到的概念：A/B 测试、以活动为中心的设计、关键点评审
|
||||
|
||||
## 4.我刚告诉你什么？那根本行不通
|
||||
|
||||
实践双钻模式和以人为本的设计理念时，会遇到很多现实的冲突。比较好的解决方法是组建跨部门的联合团队，并正视挑战，精心规划设计流程。
|
||||
|
||||
## 5.设计的挑战
|
||||
|
||||
提到了现在设计过程中常遇到的一些问题，比如有多个互相冲突的需求、缺少团队沟通的设计改动等。还提到了包容性设计/通用设计/无障碍设计的概念和意义。
|
||||
|
||||
## 6. 复杂是好事，混乱惹麻烦
|
||||
|
||||
复杂跟混乱是不一样的，复杂是“内容多，但有条理”，混乱是“内容多，但没条理”。驯服复杂性最重要的原则之一，是建立一个良好的概念模型。
|
||||
|
||||
## 7.标准化和技术
|
||||
|
||||
建立统一的标准可以提升产品的易用性，降低人们的学习成本。但建立标准是困难的，在技术没有完善之前建立标准，会让标准容易过时，而过迟建立标准，则很难达成一致。
|
||||
|
||||
## 8.故意制作困难
|
||||
|
||||
在需要设计限制的产品，比如安全系统、危险设备等，需要故意制造一些使用上的困难。但这并不意味着完全放弃产品的易用性，设计需要基于具体的任务来分析，在需要限制的地方反向利用优良设计的原则，在不需要限制的地方仍然遵循原则。
|
||||
|
||||
- 反向的规则：
|
||||
|
||||
1. 隐藏关键的部位
|
||||
2. 在任务执行阶段利用不自然的匹配关系
|
||||
3. 增加操作的物理难度。
|
||||
4. 要求把握非常精确的操作时机和操作步骤。
|
||||
5. 不提供任何反馈信息。
|
||||
6. 在任务评估阶段利用不自然的匹配关系，使用户难以了解系统状态。
|
||||
|
||||
## 9. 设计：为了人类发展科技
|
||||
|
||||
设计是个非凡的学科
|
||||
|
||||
- 产品要被用户使用，这才是对设计最大的奖赏
|
||||
69
urara/设计心理学1-7/+page.md
Normal file
69
urara/设计心理学1-7/+page.md
Normal file
|
|
@ -0,0 +1,69 @@
|
|||
---
|
||||
title: 全球商业化中的设计
|
||||
summary: 《设计心理学 1》第七章——本书的总结
|
||||
created: 2021-11-03T03:59:18.000Z
|
||||
categories:
|
||||
- 设计心理学
|
||||
tags:
|
||||
- 设计心理学1
|
||||
- 读书笔记
|
||||
slug: 24a52cec
|
||||
lastmod: 2022-04-16T12:55:38.967Z
|
||||
# layout: post
|
||||
---
|
||||
|
||||
章前写了对本书的总结和本章的概要，提到了功能主义以及两种创新方式。
|
||||
|
||||
## 1.竞争压力
|
||||
|
||||
产品设计会受公司商业竞争压力的影响，这很可能会让设计偏离初衷，使市场产品变得同质化。设计受竞争压力影响的一个表现就是“功能蔓延”，它指的是为产品增加更多功能的倾向。
|
||||
|
||||
面对竞争压力，好的策略是“有所为，有所不为”，专心于已经占据优势的地方，让强者更强。然后聚焦于市场和宣传，大力推广已有的优势。不要盲目跟随潮流，增加无用功能。其中最重要的是关注真正在使用产品的用户的需求。
|
||||
|
||||
## 2.新技术推动变革
|
||||
|
||||
科技是巨大的变革动力，技术的发展改变了人们做事的方式，但人们的基本需求没有改变。
|
||||
|
||||
## 3.新产品上市需要多长时间
|
||||
|
||||
那些对生活有重大影响的创新，从概念到上市通常需要数十年，而且有很多的创新在上市之前就已经失败。这是因为这些创新会影响到现有的产品，会产生冲突和矛盾，用户适应新的产品也需要时间，而时间的拉长则会消耗预算和资源。
|
||||
“从概念到成功的产品，好点子需要旷日持久地跨越漫漫长途。”
|
||||
|
||||
## 4.创新的两种形式：渐进式和颠覆式
|
||||
|
||||
- 渐进式创新：
|
||||
- 缓慢的、持续进行的、渐进的
|
||||
- 在现有模式上的“改良”
|
||||
- 随着时间的发展，可以带来显著的改变
|
||||
- “登山法”
|
||||
- 大部分创新都是
|
||||
- 颠覆式创新：
|
||||
- 颠覆式的全新开发
|
||||
- 完全改变现有模式
|
||||
- 通常来自于技术创新
|
||||
- 影响巨大
|
||||
- 少之又少，很难存活
|
||||
|
||||
两种都需要
|
||||
|
||||
## 5. 设计心理学：1988 ～ 2038
|
||||
|
||||
- 人们的基本需求大体上不变，科技的变革提供了截然不同的方式满足人们的需求。
|
||||
- 科技的发展，会带来文化上的改变。
|
||||
- 人机协同工作才会更强大。新技术改变了人们承担的任务，让人们更专注于自己擅长的东西、关键和重要的东西，让大脑从琐碎中解放出来。
|
||||
|
||||
## 6.书籍的未来
|
||||
|
||||
新技术的出现，让书籍、视频、音频等交互媒体的制作更加简单，这让入门变得简单，让人们更容易分享、获得信息，但这也会带来信息的泛滥，高技术水平的信息内容仍需要专业的制作。
|
||||
|
||||
## 7. 设计的道义和责任
|
||||
|
||||
设计应承担社会责任。作者批判了产品的废止制度，还提到可以采取订阅的方式可持续发展。
|
||||
|
||||
## 8. 设计思维和思考设计
|
||||
|
||||
- 只有当最终产品成功，设计才是成功的。
|
||||
- 设计必须考虑用户的整体体验。
|
||||
- 设计需要考虑许多影响因素：市场、产品的生命周期、环境成本、技术等
|
||||
- 草根的崛起：个人的力量也可以带来改变，科技为此提供了便利。
|
||||
- 技术会被改变，但设计的基本原则（比如有关可视性及反馈的原则，示能、意符、映射和概念模型的作用），不会改变，历久弥新。
|
||||
Loading…
Reference in a new issue