2025-07-25 08:00:00
胡适在《忍不住的新努力》中说，人生的意义是个人自己创造的，以我的理解，就是要找到自己想做的事。
我大学之前十数年学生生涯只关心成绩、上大学后只因为就业和工资产生焦虑；
毕业后搬砖之余，开始产生了迷茫之感，不知道是为了什么而“活着”。
以我个人之见解，
之所以焦虑，是能力及不上欲望。
之所以迷茫，是不满足于一成不变的状态、缺乏成长和进步的目标；
要解决焦虑，答案很简单，需要**提高能力，**1增加知识储备，多获取信息，多思考；2丰富实际体验和经验，大胆试错。
要解决迷茫，则需要探寻目标，需要进一步探究。
《心流》中说，在传统社会中，帝王、主教、政治等社会权威，给大众提供的人生目标是：宗教、道德、阶级习俗、爱国主义；
在现代社会中，以商人为代表的资本阶级，给大众提供的人生目标是：工作、用工作赚来的钱_消费_。
他们设置这些目标的动机，都是为了维护社会秩序，为了维护统治者和既得利益者自身的长久利益。
简而言之，提供目标的人都有其主观偏好和私利。
因此我们要从社会制约与本能冲动下，建立自我意识，不再以社会的奖赏为念，试着以自己所能控制的奖赏取而代之，自寻目标。
那么问题就变成了，如何探寻以自我为出发点的目标。
《心流》中提出，一个人身上真正有价值的，就是个人的体验。
我们的人生，就是由体验所组成的。
我们拥有很多体验来源：
因此，以自我为出发点，我们可以将人生的终极目标定为提高自己的人生体验，然后自上而下拆解，从各个方面做出努力。
《极简主义》中提出了人生中最重要的五个方面：健康、人际关系、热情、成长、奉献。
这五个方面，可以看作”提高人生体验”的一种拆解形式。
2025-07-22 08:00:00
《暗时间》豆瓣链接： https://book.douban.com/subject/35858123/
"暗时间"指的是生活中的碎片时间，作者刘未鹏通过这一概念，阐述了如何运用思维方式高效利用这些暗时间，从而强调了思维在个人成长和学习中的核心重要性。
2024-09-19 08:00:00
对于SPA，将更新DOM的方法updateDomTrigger作为参数传递给document.startViewTransition(updateDomTrigger)方法，浏览器会先截取当前页面DOM元素的快照（声明了 view-transition-name CSS属性的DOM元素，默认是:root），再执行updateDomTrigger方法，然后再执行过渡动效。
对于MPA，添加以下CSS规则，过渡效果会在导航到下一个同源页面的时候自动触发。
@view-transition {
navigaion: auto;
}
旧视图快照opacity从1 到 0，新视图快照opacity从0 到 1。
HTML会针对视图动效生成以下伪元素树：
::view-transition
└─ ::view-transition-group(root)
└─ ::view-transition-image-pair(root)
├─ ::view-transition-old(root)
└─ ::view-transition-new(root)
view-transition-name CSS属性，对不同的元素使用不同的自定义动效。因此，每一个 view-transition-name都对应一个view-transition-group（默认是root）view-transition-old指向动效前元素的静态快照view-transition-new指向动效后元素的实时快照具体的动画效果由CSS animation设置：
/* 只需要添加以下@view-transition规则，就会在切换页面时，触发默认的“淡化”动效 */
@view-transition {
navigation: auto;
}
/* 自定义默认的动画行为 */
::view-transition-group(root) {
animation-duration: 0.5s;
}
/* 创建自定义动画 */
@keyframes move-out {
from {
transform: translateY(0%);
}
to {
transform: translateY(-100%);
}
}
@keyframes move-in {
from {
transform: translateY(100%);
}
to {
transform: translateY(0%);
}
}
/* 将自定义动画应用到新旧元素 */
::view-transition-old(root) {
animation: 0.4s ease-in both move-out;
}
::view-transition-new(root) {
animation: 0.4s ease-in both move-in;
}
对于SPA，document.startViewTransition() 方法会返回一个 ViewTransition 对象实例，这个实例包含多个 promise：
ViewTransition.ready 在创建伪元素树且动画即将开始时执行。ViewTransition.finished 在动画完成后、且新的页面视图对用户可见且具有交互性时执行。对于MPA：
pageswap 事件，事件的event对象上的PageSwapEvent.viewTransition 属性包含了 ViewTransition 实例， PageSwapEvent.activation 包含当前切换页面的导航类型、当前文档和目标文档历史记录。pagereveal 事件，事件的event对象上的PageSwapEvent.viewTransition 属性包含了 ViewTransition 实例。pagereveal 事件的script脚本在渲染动效之前执行，需要给脚本添加 blocking=“render” 属性；<link rel="expect" href="#lead-content" blocking="render" />，其中#lead-content指向对应元素。
2024-09-04 08:00:00
通过z-index来控制层级是很常见的前端需求，
但是你是否遇到过，无论z-index设置多大，仍然无法将一个元素移到最上层的情况？
这是因为z-index依赖于一个抽象的概念：Stacking Context
stacking context是层叠上下文，决定了DOM元素上下层级关系
每个层叠上下文都由一个元素创建，这个元素被称为stacking context的根元素
z-index不是默认值auto的元素（z-index=0也会创建层叠上下文）isolation: isolate;：创建一个新的堆叠上下文，隔离混合效果DOM结构：
div1
div2
div3
-> div4
-> div5
-> div6
最终的层级顺序：
这个扩展在浏览器devtools中列出了网页上的stacking context。在遇到z-index和层级问题时，可以让我们更快的定位问题。
2024-09-02 08:00:00
空值合并运算符（??），识别null和undefined值；MDN
const foo = null ?? 'default string';
console.log(foo);
// Expected output: "default string"
const baz = 0 ?? 42;
console.log(baz);
// Expected output: 0
动态引入，import函数支持异步引入js模块；MDN
import(moduleName)
import(moduleName, options)
await import('/modules/my-module.js')
类私有属性，以#为前缀，无法在类的外部引用；MDN
class ClassWithPrivateField {
#privateField
}
逻辑与赋值&&=，逻辑或赋值||=；MDN
const a = { duration: 50, title: '' };
a.duration ||= 10;
console.log(a.duration);
// expected output: 50
a.title ||= 'title is empty.';
console.log(a.title);
// expected output: "title is empty"
let a = 1;
let b = 0;
a &&= 2;
console.log(a);
// Expected output: 2
b &&= 2;
console.log(b);
// Expected output: 0
#! HashBang注释，用于在shell中执行js时，指定js解释器
是单行注释，只能写在js代码的第一行；MDN
#!/usr/bin/env node
console.log("Hello world");
error实例中cause属性，指示了引起错误的具体原因；MDN
try {
connectToDatabase();
} catch (err) {
throw new Error('Connecting to database failed.', { cause: err });
}
不改变数组原始值，创建新数据作为返回值
相对于直接用[索引]更新数组，with方法不改变原始值、返回新数组
const arr = [1, 2, 3, 4, 5];
console.log(arr.with(2, 6)); // [1, 2, 6, 4, 5]
console.log(arr); // [1, 2, 3, 4, 5]
2023-07-29 08:00:00
我在上周的文章《程序员一定要有自己的博客》中写了我博客工具链的5步：
当时只实现了其中1245步，经过两天的探索我完成了第3步，让这个工具链实现了完整的自动化，这篇文章大致介绍一下。
我的博客代码仓库使用Github托管，Github提供了一个十分有用的自动化工作流的工具：Github Actions。
Github Actions 可以定时执行我提供的脚本，通过脚本，实现了从Notion到代码仓库的更新。大致逻辑是这样的：
通过以上脚本，实现了 notion文章数据库到git仓库的更新。
脚本执行的频率是可以自由更改的，我偏向于损失一些时效性，保证环境稳定性，所以选择了一天一更新。
以上脚本可以在我的博客开源仓库中看到，链接在这里 和 这里。
由于我们的notion数据库字段、md文件的frontmatter配置很可能不同，我的脚本无法直接被你复用，有几个需要考虑变更的点：
你的github仓库首页 - settings - secrests and variables - actions，参数名是NOTION_DATABASE_ID和NOTION_KEY，前者是你在Notion中文章所在数据库的id（可以通过copy link获得），后者是你开通的notion api的key（notion api的开通详见这个文档）。postToMDFile中找到，逻辑比较简单，按照你的需求修改即可。getPosts中。github仓库首页-settings-actions-general-workflow permission - 开启read and write permissions
这一步我使用的是Vercel工具，监听Git仓库的push事件，自动拉取代码更新，打包部署到网站。
这一步Vercel的配置很简单，推荐查看官方文档，不做赘述。
