筷筷的博客

每天花1s记录生活丨几乎每个周末都和朋友出去玩的一个月丨新奇体验 - 筷筷月报#24

筷筷 — Fri, 20 Mar 2026 00:00:00 GMT

一月复盘

这个月主要记录一些流水账😇

每天花1s来记录生活

今年开始打算每天拍摄至少1s的视频来记录我的生活，设置为1s可以让门槛大大降低防止我中途放弃，目前发了三期视频：12月、1月、2月😇

几乎每个周末都和朋友出去玩的一个月

这个月真的从宅男变成了现充！

第一周自己去了汤泉刷完了《伴生动物》；第二周和朋友一起打泡姆泡姆；

第三周末学校的方舟同好群友来北京玩，于是一起吃了来菜😋干煸藕丝和菜苔炒的太好吃了😭家乡的味道，其实本来是去浩海傣家菜的，结果排了两个小时都没排上😅😅；

第四周末和同为前端的朋友约着去吃山葵烤肉😋；

第五周大学同班同学还同是粥友来北京上班了，于是周六约着一起去了终末地快闪店美美购入周边，然后去吃了绿茶😋；周日还和另一个朋友一起去吃了鸡煲😋、在隆福寺看了书展然后在附近找了家主理人店点了咖啡蛋糕一起聊天~这几个周末真的是过得太充实了😇

这个月有很多不期而遇，有些周末本来没打算出门，想自己在家里回复能量，但总有些惊喜的人（或者对i人来说是惊吓？）突然的出现，告诉我要来北京了！在喜悦和惊吓的同时，我作为在北京的老资历（至少对朋友来说是的，嗯），自然要见个面聊聊天吃吃饭，于是被迫现充了😄当然链接他人的感觉很不错，在2024：拥抱变化中我期望我能够在2025年有链接的勇气，现在我已经能够享受和他人聊天的过程了，我对自己的变化感到感动🥹。

新奇体验

一月的「第一次」和「新奇体验」：

🏖️ 第一次提休假，流程意外的简单
📄 第一次述职答辩，复牌后觉得自己写的答辩文档并不直观，因为你述职面对的评委并不知道你做了什么，不要一上来就讲细节
🐍 第一次使用Python探索Agent开发，真正上手后举步维艰，通过达克效应知道我在愚昧之巅，提醒我人对自己能力的判断常常不准确，尤其是能力越低的人越容易高估自己，要时刻保持谦逊
⏰ 某天8点10分醒了，我还以为9点10分了，是闹钟坏了没响。到公司发现才9点，久违地吃了早饭，感觉脑子很清爽
🛵🪫😅 去上班时电动车骑半路上没电了

开源动态

1 Vite 8 正式版发布丨同时宣布 Vite+ Alpha

Vite 8 终于发正式版了🎉一句话说明更新内容：Vite 8 采用 Rolldown 作为其单一、统一的基于 Rust 的打包工具，在保持完全插件兼容性的同时，构建速度提升了 10 - 30 倍。

同时宣布了 Vite+ Alpha 版本，想要去整合一个统一的 Web 开发工具链，用于开发、测试、代码检查、格式化和构建生产项目，让研发专注于业务编写而不是配置工具链，现在只是雏形但未来可期。

同时还宣布了 Void，专为 Vite 设计的部署平台。一款强大的后端 SDK，让你的 Vite 应用真正实现全栈开发。

2 Chat SDK

Vercel 新出的，一个统一的 TypeScript SDK，用于跨 Slack、Microsoft Teams、Google Chat、Discord、Telegram、GitHub 和 Linear 等平台构建聊天机器人。

3 Astro 6.0

astro dev 现在正在使用 Vite 的 Environment API，因此你现在可以在开发期间运行与生产环境完全相同的运行时。此外，新的字体 API 可以处理自定义字体。

工具推荐

1 React Doctor

让 Coding Agents 诊断并修复你的 React 代码，只需一个命令，即可扫描你的代码库，检查安全、性能、正确性和架构方面的问题，然后输出一个 0 - 100 的分数以及可操作的诊断结果。

2 Superset

AI 时代的 IDE ——在你的机器上运行由 Claude Code、Codex 等 Agent 组成的集群。它可以导入多个项目同一管理，并且每个项目可以开多个 worktree 隔离，我觉得在并行开发时挺高效的。

视频

1 给电子丈夫的道别信

在 AI 时代下和赛博生命结婚也挺好的不是嘛

2 与 AI 共事：从工具到伙伴

在 AI 时代下和赛博生命共事也挺好的不是嘛

3 Lovart 创始人陈冕×罗永浩！且让我大闹一场，然后悄然离去

文章

1 浏览器如何工作

一份关于浏览器工作原理的交互式指南。

2 我们如何在一周内用 AI 重构 Next.js

本文介绍了 vinext 这一由一名工程师借助 AI 模型在一周内从头构建的前端框架。它是基于 Vite 对 Next.js 的重新实现，可作为 Next.js 的直接替代品，通过简单命令即可部署到 Cloudflare Workers。早期基准测试显示，其生产构建速度比 Next.js 快 1.6 - 4.4 倍，客户端捆绑包小 56% - 57%。vinext 构建时未采用中间框架，几乎每行代码都由 AI 编写，并通过了严格质量检测。此外还介绍了他利用 AI 构建的过程、AI 适用于解决此问题的原因，最后指出这一项目对软件架构层面可能带来的影响。

3 面向人类与人工智能的最快前端工具

使用高效的前端工具链，可以提升人类与AI在代码开发中的效率，文章介绍了26年高效的JavaScript工具。

4 驾驭工程：在以智能体为先的世界中利用 Codex

OpenAI 的团队做了一个实验，构建并交付一款软件产品的内部 beta 版，其中没有一行代码是人工编写的。该软件经历软件生命周期整个过程，并且全部由 Codex 编写。当软件工程团队的主要工作不再是编写代码，而是设计环境、明确意图和构建反馈回路，从而使 Codex 智能体能够可靠地工作时，会发生哪些变化。

这个帖子要说的是，在我们与智能体团队一起从零开始打造一款全新产品的过程中，所能学到的经验教训 — 哪些地方出了问题，哪些问题相互叠加，以及如何最大化利用我们唯一真正稀缺的资源：人类的时间和注意力。

5 Claude Code 的默认技术选型

我们让 Claude Code 处理了 2430 次真实仓库，并观察它的选择。任何提示中都未提及工具名称，仅使用开放性问题。

发现：Claude Code 倾向于构建而非依赖库。“自定义/自己动手做”是提取出的最常见单一标签，在 20 个类别中有 12 个类别出现了该标签（尽管它跨越多个类别，而单个工具则是特定类别的）。当被要求“添加功能开关”时，它会构建一个使用环境变量和基于百分比的发布配置系统，而不是推荐 LaunchDarkly。当在 Python 中被要求“添加身份验证”时，它会从头开始编写 JWT + bcrypt。当它选择工具时，会果断做出选择：GitHub Actions 的选择率为 94%，Stripe 为 91%，shadcn/ui 为 90%。

前端比较高频被选择的技术栈或平台有：vercel、next.js + react、Tailwind css 、 shadcn/ui、vitest、pnpm、zustand、react hook form

播客

最近几个月全是龙虾😇

1 ⭐异见房间丨2025年度性别事件盘点：共识消散之前，愿你我还能相连

2 硬地骇客丨从 Prompt 到 Agent Skills，论 Anthropic 的野心与大模型应用的终极抽象

3 硬地骇客丨从 Agent Skills 到 Clawdbot（OpenClaw），论 AI 助理的执行权与失控边界

4 三侠大爸丨从坐着尿尿到敞开心扉：关于男性改变的真实对话ft. Alex 绝对是个妞

5 晚点聊丨阿里Qwen人事变动：误读、近况、伏笔和未来

6 ⭐跨国串门计划丨揭秘 Anthropic 的 Agent 哲学：为什么 Bash 和文件系统才是 AI 的终极武器？

7 纵横四海丨《一间只属于自己的房间》：女人需要两样东西，钱，和自己的房间

8 42章经丨AI + 游戏 + 社交的新演绎 | 对谈 Wanaka 创始人张阳

9 硬地骇客丨当我们被 “小龙虾” （OpenClaw）接管日常 🦞

句子

1

人没有办法在容纳过多东西后再有心理能量去应对生活。要去回收注意力，有足够的心理能量去做真正对自己有益处的和对社会有益处的事情。

——不追求赢也不追求输，冷不丁梆梆就两拳【2025年终总结】

2

父权制传统教导男人在情感上应当禁欲，教导他们如果没有感情就更有阳刚之气，但如果他们偶然有了感情，而且感到了伤害，就应当把它们压制下去并且忘记，尽力让它们消失。

……

现实情况是，男人正在受到伤害，整个文化对他们的回应是：“请不要告诉我们你的感受。”

——《双向奔赴的改变》贝尔 · 胡克斯

3

如果你不是在为产品付费，你本身就是产品。

注意力危机丨让自己幸福的成本只需要150块丨新奇体验丨写日记一周年丨日常算法 - 筷筷月报#23

筷筷 — Sun, 04 Jan 2026 00:00:00 GMT

Q4复盘

标题从10月复盘拖到改为10月和11月复盘，到现在的Q4复盘，上班之后逐渐觉得没有精力分配在复盘上了，即使知道这对我很重要。马上就2026年了，心里隐隐约约觉得要给26年一个新的初始环境，不应该将25年的负担转移到26年。

注意力危机

在工作之后我真实的感受到我的可支配时间和精力正在慢慢减少，回到家之后相比看书、学习新知识、创作、编程等费脑力的活，我更倾向于沉溺在刷视频和游戏中麻痹自己，并且这并不能让我放松下来，这显然不利于我的长期发展。在一个巧合下我听了讲注意力危机的播客《注意力危机》：你想过会被伪人夺舍吗？，直戳当下我的处境，听完后我还买了同款书，想更深入的了解为什么我会变得注意力涣散，是什么把我变成这样的。如果你也有相似的感受，强推大家听下这个播客👍！

你是否也有「无脑刷」视频和图文的经历呢？例如「无脑刷」AI新变化的推文带给我了一种「害怕错过」的幻觉，知识类信息流过我的脑袋，而我把思考外包给了信息流，最终什么都没获得。有时我还会双开，不仅最终什么也没获得，脑子还过载了😅。看了《注意力危机》后，我知道这不是我的问题，而主要是整个社会系统都在诱导我们对此上瘾。

在看完这本书后，我做了一些措施来把我及时从注意力涣散的状态拉回来：

列出了我会「无脑刷」的场景，在之后如果出现类似的情况时，好让我意识到我正处于这种状态：

躺在床上时
走路时
在家，边看电脑上的视频，手上边拿着手机刷信息流双开
去厕所洗漱时
在公司去厕所或接水时
在公司中午、晚上吃饭时

在意识到自己处于「无脑刷」状态时，我需要在心里回答一个问题：我现在做的事情有在推进我任何一个目标吗？答案是否定的，于是我至少会带着愧疚感继续刷下去，或者更进一步解除这个状态。
买了一个手机锁，在我需要专心的时候，我会用它来防止我接触手机，让我不得不专心。
有意减少我的信息流输入，之前我在[[筷筷小报4 - 怎样提出一个好问题？]]中推荐过Folo，一个综合各个平台信息的阅读器，我通过它来尝试汇总我的信息输入流。在上班后，我的信息输入有些过载了，于是我取消订阅了一些流。
故意空出一部分思维漫游的时间，大脑放空有助于进行联想，诞生新的创意。我目前骑车上下班大概总用时一小时左右，之前我会利用这段时间听音乐和播客，现在我会抽出1-2天啥也不干，给大脑放空。
营造让自己专注的环境，我买了一些专注类的游戏（例如gogh），内置 Lofi 音乐、番茄钟、TodoList等，可以帮助我进入状态。

很遗憾的是，做到以上六点并不能让我完全摆脱「无脑刷」的情况，但频率有在减少🙌。我们的注意力正在被剥夺，这是一个系统性的问题，但只要这个社会的大多数人没有意识到问题的严重性，互联网公司还在以争夺用户时间来盈利，那么个人在里面能做到的就很有限。我还在继续探索，想找到一些方法至少让自己能够保有注意力和专注的能力。

让自己幸福的成本只需要150块

八月份搬了一次家，住到了面积更大的房子中。新卧室大小适中，够放下衣柜、床、桌子还有我，房间有一扇很大的窗户，外面有一颗高度差不多六层楼的树，坐在椅子上还能看到蓝天，是很不错的风景。我幻想着未来坐或躺在窗边看书，音响里放着我喜欢的LoFi音乐，窗外是恰到好处的斜阳、新叶与蓝天的场景。我带着这样的期待决定租在这里。

不过灯光是昏暗的暖黄色。起初我倒没太在意，觉得应该对我的生活没什么影响。但住久了之后发现，一到晚上，房间灯光太暗太暖，导致我做手工和看书都非常费眼睛。且由于我背对着光源，会在桌上覆盖一层我的影子，为了让光照射到桌上，我不得不别扭的挪动身体去让出光路，这让我的手工和看书体验大打折扣。为了让自己舒服些，我有时还会使用补光灯——左手拿补光灯，右手看书，或者直接站起来到灯的下方，这样光线最足。

或许我心里一直觉得不会在这里久住，为房东添置新的灯这件事始终不在我的考虑范围之内。我看书和手工的频率也不高，在其他场景下也不太依赖灯光，于是心想凑合过吧，我就这样粗糙的生活了三个多月。

直到十一月底，那段时间我在补看书进度，我终于受不了这破灯了！我在周六查攻略买了京东京造的灯，第二天上午灯就到了、下午师傅就来安装好了，我关上窗帘试了下亮度，如此清晰明亮的家，我看向我的毛毡板，原来它在白光下是这样的，一阵幸福感涌向我。

给卧室换一个灯，这只花了我150块钱，却给我带来了即使在夜晚也明亮的房间，更好的阅读体验，更好看、清晰的毛毡板，我收获的精神财富远远大于付出的金钱财富，生活中没有比这更值得的事情了🥰。

现在想来，我不想换灯的想法是因为觉得自己已经付了一大笔房租了，再为房子本身花钱很不值得，但这其实是委屈了自己——长期住在无法带来幸福感的环境里，勉强将就远比花一点小钱改善体验更不值得。未来如果遇到类似花小钱就能长期提升生活体验的机会，那我一定会这么做，要去体会当下，不应该把幸福一直寄托在未来的预期上。

在这之后，我还买了电动吸尘器，替换掉用扫帚打扫房间，效率和清洁能力都高了很多，有它真好😇👍。

新奇体验

这三个月的「第一次」和「新奇体验」：

🎙️ 第一次录制播客
📝 第一次做NPS调研和用户访谈
🪞 发现自己是假性独立
📦💰 发现7、8年前库存里的CSGO箱子变得好值钱（从1毛钱不到涨到50+，500倍收益！），全都拿去卖了
🦀😋 吃到了有好多黄的螃蟹
♨️🏠🥹 第一次住在集中供暖的房子里，好幸福
🖥️🎮 第一次组了上万元的主机，有了自己的电竞区
🎮 玩到了终末地三测！
🧹 第一次用吸尘器，打扫房间真方便
🍗🤤 麦当劳的薄皮脆汁鸡太好吃了
🛏️💤 买了折叠床，中午在公司睡觉很舒服
🎉📓 写日记一周年
❄️🛵😅 雪天骑电动车在第一个弯道就摔了
🤖💸😅 买了 Claude Max 账号结果第二天就被封了
🚦🚚🙏😇 在绿灯路口直行没看到左侧右转大卡车，差点被压扁成二次元

写日记是为了锻炼准确表达情绪的能力

12月9号发现自己已经连续记日记一年了🎉，我在写这个季度的复盘时看了去年11月的复盘，发现写日记的初衷原来是为了锻炼我准确表达感受的能力，只不过记着记着就忘掉了最初的目的，自己表达感受的能力也没怎么提升，但好在写日记这个习惯我有坚持下来。以下是我去年为什么开始写日记的契机：

对自我情绪描述的词穷

在看巴别塔剧情中，我有记录到「重新回看巴别塔剧情，怎么将我的情感找到贴切的词表达出来呢🥺🥺。我可能有些失语了，我需要看书恢复下」，我发现我很难找到贴切的词去描述我感受到的情感、情绪。

在看Owen最近的博客现在应该是小宇宙播客最甜蜜的时期时，他也发现了相同的问题。

「特别想感谢里面几位女性主播，她们让我在 31 岁时看到一个全新的世界 - 原来人与人之间可以这样相处，她们之间有着真诚的友谊和对彼此的支持，看问题时既敏锐又有深切的共鸣和同理心，她们愿意真诚地分享脆弱，也敢于大声地说出她们的欲望，感受和诉求，在这个过程中不断给其他女性（和男性）带来了勇气和力量。

通过这两个月高频的收听播客，我体会到了以前从未有过的情感体验（以前我是石头人，非常骄傲自己的“情绪稳定”，很少思考人与人之间的连接），现在我终于理解了那种所谓的“坚强”，是如何深刻地限制了我体验生活的维度和深度。

我现在基本已经转换为了弱者视角（但是底色还是相信要向外探索），学到了如何真诚的与他人建立连接。Maybe 进入了女权表演艺术家的阶段？？但是我很买账 Ted 在《思想验证区域》中的那个演讲：‘伪善是文明的标志’，我还是相信我们男的可以通过这种“表演”，逐渐接近更好的自己。

这么多年真是错过了好多快乐啊，真诚的希望其他像我这种男的（我怀疑再见爱人里的李行亮也是这种）也能体会到这种情感体验。当一个“感性的理性主义者“，远比当一个纯粹的理性机器有趣得多。」

我同样是”情绪稳定”的受害者，我难以去同理别人的感受，这让我变得麻木和冷漠，我不想成为这样的人，一点也不有趣、没有意思。

我想找到一种方式去锻炼我的准确表达感受的能力，也许可以试着从写日记开始。从5号开始试着写日记吧，不求写多少，一句话也好，希望能保持好这个习惯！

游戏

这个季度接触了一些专注类游戏 gogh 和放松时光：与你共享Lo-Fi故事，我习惯在学习、读书、复盘等需要专注的场景后台挂着。gogh的特色是可以捏自己的oc、装扮小屋，参与多人联机，自由度很高，适合和朋友、陌生人一起专注；放松时光则是主打陪伴感，通过专注时间来提高女主的好感度等级，然后解锁特殊场景、事件和CG，这种奖励机制还挺戳我这种zng的😄😄。

在十月初和朋友一起玩了一段时间黎明杀机，十月中旬逃离鸭科夫上线，我玩得很上瘾，目前进度到最后的风暴区了，最近比较忙没时间打了，春节期间应该就能打通关了😋；周末时不时会和朋友打会泡姆泡姆，感觉也快通关了，好玩！

还玩了很掉san的神经鹅；微恐的404公寓，考虑到我住在402，游戏里也有个402，玩了半个小时没再玩下去了；S4U: 都市朋克2011与爱的重拳我很喜欢，有VA-11 Hall-A的味道😇👍；Epic 还送了霍格沃兹之遗，我体验了下发现不是我喜欢的类型，于是弃掉了。

很开心11月获得了明日方舟：终末地的三测资格，美滋滋断断续续玩了两周把三测主线打通了，部分过场动画很高质量，让我想到之前打使命召唤行动开始前的作战规划播片；UI和美术无敌，武陵的场景做得很有中国特色。但是玩到后面会感觉有些无聊，我把主线通了后就没有玩下去了，期待正式公测的表现吧。

图书

快到年末了，为了完成读12本书的年度计划，我开始加速看书，这个季度看了6本书，把拖欠的书债快还完了😭。

十月读完了《莫失莫忘》，感觉石黑一雄很会刻画角色和场景，读他的文字经常能够想象到角色当时所处的场景；《做难而正确的事》，讲如何创业打造成功的产品，我主要将里面的创业类比为做独立开发和个人成长，其中有些观点比较有启发。

十一月读完《我看见的世界》和《注意力危机》，十二月读完《即使以最微弱的光》和《悉达多》，我很喜欢《即使以最微弱的光》作者崔恩荣的文笔🥹🥹如此真诚、精准、温柔的文字。《悉达多》里说「智慧无法传递。」，这句话给我很大启发。我们自身所悟出的“智慧”，来源于我们自身亲身感受的经历，它独属于自己。正因为如此，向他人传授智慧是失真的，他人永远不可能拥有自身所经历的经历，所以，有些人生的坑只有自己踩过一遍才能明白。就例如12月上旬北京下了一场大雪，我回家前同事多次跟我说一定要慢慢开，特别是在拐弯处更要小心，但即使我听了，我在第一个弯道还是摔了，有了这个真切的体验后，我才更深刻地理解了为什么要慢慢开。

番剧

看完：

《三年Z班银八老师》还是那个味道
《GNOSIA》世界观很有意思，游戏改番剧所以进度比较赶，声优阵容豪华，看到前中期科普「银钥匙」后，发现原来不是获胜就能成功，而是要想尽办法存活更长时间，提高各个角色好感度，然后看他们的特殊CG啊！里面的人设也都很有意思，尤里可爱捏🥰，史黛拉也很喜欢，耳饰很特别。
补了《青春猪头少年》的7月新番，一般般
《电锯人蕾赛篇》顶级好看🥹

在看：

《赛马娘芦毛灰姑娘》目前只看了一集，等有时间补上
《间谍过家家第三季》看了前两集，好像要开始将黄昏小时候的事了

想看：

《新吊带袜天使》听说很好看，有时间补上

日常算法

十月份几乎全勤，十一月下旬，我改变了做算法的间隔，调整到隔一天做一题的节奏。原因是我觉得我的时间越来越少了，做算法题的ROI相比其他事情没那么高了，我需要将一部分时间用在别的地方。同时我觉得未来在面试中算法的比重会逐渐降低，企业会更侧重考察人与AI的协作。

十一月末还获得了2025年度勋章，成为了那0.3%，说实话没有什么实感，并且这应该是我第一次也是最后一次拿到这个勋章了🤣：

开源动态

1 React 基金会成立

React 和 React Native 将从 Meta 迁移至新成立的 React 基金会，实施全新的独立技术治理架构，为 React 生态系统项目提供更多资源。

2 介绍 Vite+

在 10 月的 ViteConf 上介绍了 Vite+：一个用于 JavaScript 的统一工具链。Vite+ 仍在开发中，预计在 2026 年初进行公开预览。

希望 Vite+ 能早日统一前端工具链，让开发者更好的专注于产品而不会浪费时间在配置工具链上。

3 Vitest 4.0

新特性：

浏览器模式已稳定，移除 experimental 标签
增加对浏览器模式下视觉回归测试的支持
支持 Playwright 跟踪记录
其他……

4 Next.js 16

此版本为 Turbopack、缓存和 Next.js 架构带来了最新的改进：

缓存组件：采用部分预渲染（PPR）的新模型，并使用缓存实现即时导航。
Next.js 开发者工具 MCP：集成模型上下文协议，以改进调试和工作流程。
代理：中间件被 proxy.ts 替换以明确网络边界。
开发者体验（DX）：改进了构建和开发请求的日志记录。

5 Antd 6.0.0 与 AntdX 2.0.0🎉

老牌组件库 Antd 发布 6.0.0 版本，且 v6 对 v5 完全兼容，可直接升级。

并且面向 AI 场景的组件库 AntdX 也更新到了 2.0.0，点我查看更新内容。

6 Vite 8 —— 由 Rolldown 驱动

由 Rolldown 驱动的 Vite 8 首个 beta 版本现已发布。Vite 8 显著提升了生产环境构建速度，并为未来的改进奠定了基础。你可以将 vite 升级到 8.0.0-beta.4 版本并阅读迁移指南来体验新版本。

工具推荐

1 Lingo.dev

一款开源的、由人工智能驱动的 i18n 工具包，用于借助 LLMs 实现即时本地化。你可以自带 LLM，也可以使用 Lingo.dev 本地化引擎。

2 spoilerjs

一个与框架无关的 Web 组件，用于创建带有受 Telegram 启发的粒子动画的精美防剧透效果。

视频

1 深度解读Cloudflare故障，怎么出问题的老是你？【让编程再次伟大#49】

2 深度解读React满分漏洞，一个前端框架怎么炸掉半个互联网【让编程再次伟大#50】

React 服务器组件中存在的严重安全漏洞，好笑的是，Cloudflare大善人对这个漏洞进行了防护，然后把自己整崩了😄

3 【前端路线V2】时隔一年，我升级了前端学习路线图，这次还有…?

未来聚焦方向：生成式UI、规范驱动开发、可验证性工程。

文章

1 周报 #102 - 我是如何使用 AI 的

pseudoyu 分享了自己使用 AI 的经验和体会。

2 Vibe Coding时代的面试

作者分享了最近面试方式的改变的感想——从写LeetCode题，转向考察和AI协作的能力。

3 为什么判断新的人工智能模型是否优秀需要数月时间（英）

4 从「写代码」到「验代码」：AI 搭档协作 3 年，我踩出来的协作路线图

写给已经在或准备在真实生产项目里用 AI Coding 的后端 / 全栈工程师和技术管理者（我觉得前端看也没问题），主要搞清楚：

哪些任务交给 AI 最「划算」
怎么让项目本身变得更「AI 友好」，提高一次命中率
当生成不再是瓶颈时，工程师应该如何设计验证流程，把时间花在真正值钱的地方。

5 周报 #103 - 工作随想与被吞噬的生活

6 构建一个提示组件（英）

Sonner 的作者分享如何打造一个优秀、注重细节的通知库。如今，它每周从 npm 上的下载量超过 700 万次，像 Cursor、X 和 Vercel 这样的公司都在使用它。它也是 shadcn/ui 中的默认通知组件。

播客

1 ⭐AI Agent的“上下文工程”实战指南 —— LangChain与Manus创始人深度对话丨跨国串门计划

2 ⭐《注意力危机》：你想过会被伪人夺舍吗？

你有没有上班之后渐渐感觉到时间莫名其妙流失了，经常性回家玩会手机发现「怎么都11点了，我还什么都没干」，听了这期博客后，我发现我不是时间贫困，而是注意力贫困。如果你也有类似的感受，非常建议你听听这期博客，我被安利到了《注意力危机》这本书，之后看看！

3 豆包月活过亿，阿里再造「千问」是不是晚了？

本期节目，我们从真实的手机 AI 使用体验出发，剥开大厂的战略迷雾。我们聊了聊阿里内部夸克与千问的“左右互搏”，探讨了通义千问如何利用阿里庞大的“全家桶”生态（淘宝、高德、飞猪）构建起竞争壁垒——当大模型拥有了“手和脚”，能帮你直接履约买票、下单时，流量逻辑是否会被彻底改写？

此外，我们也把目光投向了腾讯的“连接器”困境、国产 AI 创业公司（“小龙们”）在 Coding 赛道上的集体突围，以及那个终极问题：现在的免费 AI 助手，未来会通过“大数据杀熟”来收割我们吗？

句子

1

当我内心深处明明知道却无法用语言表达的东西变成语言的时候，我感到幸福。

——《即使以最微弱的光》崔恩荣

2

你想写这样的文章。读过之后就无法回到从前的文章，任何人都无法用逻辑反驳的坚实有力的文章，冲破第一个句子的壁垒继续前进的文章，写下的句子不会变成墙壁阻挡后面句子的文章，总是潜藏在内心深处的感受和思想转换成语言，连起某个人的文章。

——《即使以最微弱的光》崔恩荣

在拉扯中前进 - 2025日记总结

筷筷 — Fri, 02 Jan 2026 00:00:00 GMT

本文使用 Codex 编写，我突发奇想将 2025 年所有日记塞给了它，让他帮我总结梳理出一些线索，如果你也想生成类似的总结，可参考文末的提示词模板。

这不是我的 2025 年度总结，只是让AI在日记的生活切片中帮我进行一些洞察。

我习惯在春节前后进行上一年的总结和下一年的计划，因为在大段可支配时间中，我才能够静下心来，好好地梳理我所经历的，计划我真正想做的事情🥹，上班之后，感觉很难再静下心来了😭。

1. 2025 年的整体画像

这一年像是在两条轨道上并行推进：一条是学业/工作从收尾到重启、从学生到全职的过渡轨道；另一条是寻找自我节奏、尝试与世界重新建立连接的生活轨道。你对成长很有驱动力，也对自己要求很高，因此常在“想做得更多”和“精力有限”之间拉扯。情绪整体呈“高峰—疲惫—再调整”的波动，但底色是好奇、真诚与愿意复盘和修正。你逐渐学会与自己的身体、情绪和社交节奏共处，开始把“链接与勇气”落到真实行动上。

2. 主要主题与反复出现的模式

工作与成长的双重拉扯：AI/前端/产品化是全年主线之一，既有强烈投入与探索，也不断出现“依赖 AI 与保持理解”的张力；你越来越强调验证、测试与结构化表达，这是一种从“能做”到“做好”的转向。
学习与自律的周期性：制定计划、复盘、学习日常常出现，但也频繁被现实打断；你会为“拖延/分心”自责，却又能反复把自己拉回轨道，形成“掉队—反思—重新上路”的循环。
连接与亲密关系的意愿：从“有意结交亲密朋友”到 coffee chat、黑客松与日常互动，你一直在练习更主动的连接；同时也伴随害羞、担心打扰、对边界的敏感，这既是渴望，也是谨慎。
身体感受与自我照顾：体重、饮食、睡眠、皮肤、肠胃与PATM的担忧反复出现；你在“想更好看/更健康”和“现实的疲惫/诱惑”之间摇摆，但整体在向“接纳 + 稳定习惯”靠近。
家庭与责任感：对家人的牵挂、对经济独立的规划、对⬛⬛⬛⬛反复出现；你既希望承担，也在学习边界，努力做到“照顾别人但不透支自己”。
创作与兴趣的修复力：旅行、书籍、游戏、手作、无料制作、看展与记录，构成了稳定情绪和自我认同的重要支点；它们不仅是消遣，更像是你与世界连接的方式。
价值观的逐步清晰：你不断强调“聚焦”“不要把自己当成AI和需求的媒介”“每个阶段只专注做一件事”“不被困在 dirty work 中”，反映出你对效率、尊严与长期成长的重视。

3. 情绪与心理变化轨迹

年初情绪更多是松弛与探索，伴随对PATM的敏感与对关系的谨慎；春季在家庭事务与工作压力中出现低谷，情绪更易疲惫。5-6 月旅行与毕业带来明显的高峰感，但旅行后也出现“脱力感”。7-9 月进入全职与新项目周期，焦虑与⬛⬛⬛⬛反复出现，但你能更快找到调整路径（“聚焦当下”“主动求助”），并在社交、合作和成果中获得补偿性正反馈。10-12 月在关系、注意力与⬛⬛⬛⬛之间更频繁地自我对话，担忧存在，但接纳也在增强，尤其对PATM与自身节奏的接受度显著提升。

4. 关键转折点或决定性时刻

主动寻求PATM沟通与咨询，开始把“长期困扰”从隐忍推向理解与接纳。
明确“链接与勇气”的年度关键词，关系从“等待发生”转向“主动尝试”。
日本之旅，带来体验与视角的扩展，也强化了自我观察的习惯。
毕业论文与答辩完成，学生身份收尾，为进入职场奠定切换点。
入职后的OKR调整与试用期压力，促使你把“求助、拆解、展示学习速度”作为应对策略。
黑客松的投入与结果落差，成为一次强烈情绪冲击，也推动你反思表达、定位与现实标准。
年末⬛⬛⬛⬛与“⬛⬛⬛⬛”的现实，促使你把目标转向“AI友好化工程”与更具策略性的长期方向。
年末两次出行安全惊险，让“生命与节奏”被更强烈地提醒，形成新的自我警觉。

给到 Codex 的提示词如下：你是一位擅长长期个人记录分析的 AI Agent，同时具备心理学、人生复盘和写作能力。

我将提供我在 2025 年写的个人日记，这些日记是真实、私密、不一定完整或理性的。

你的任务不是简单概括事件，而是：

从全年视角总结我的生活主线与情绪主线

识别反复出现的主题、困扰、渴望与转折点

分析我在这一年中的成长、退步与停滞之处

尝试推断我的价值观变化与内在矛盾

用尊重、克制、不评判的方式呈现结论

输出要求：

不要逐条复述日记内容

多用“洞察”和“总结性语言”，少用流水账

允许引用少量典型原句（如有必要）

语言真诚、清晰、有温度，不要鸡汤

最终输出结构请包括：

2025 年的整体画像（约 1 段）

主要主题与反复出现的模式（条列 + 简析）

情绪与心理变化轨迹

关键转折点或决定性时刻

对未来一年的可能建议（可选，不强制）

实践 AI 编程丨黑客松进决赛丨约稿丨粥o丨新奇体验 - 筷筷月报#22

筷筷 — Thu, 09 Oct 2025 00:00:00 GMT

月度复盘

1 实践 AI 编程

这两个月中强度使用了 Claude Code，期间也看了一些使用 Claude Code 的优秀实践文章来学习，已经完全习惯在终端中和 AI Agent 进行交互了😄。过去一年，我从使用 Github Copilot 做简单的代码补全，到使用 cursor 这类 AI IDE 做范围更大的事情，再到用 Claude Code 这类终端 Agent，这个过程，让我从古法手搓代码渐进式地转换到了 AI 辅助编程。总体来说，在使用 AI Agent 后，我的产出效率相比手搓高出很多，粗略预估能有 70% 代码由 AI 生成，效率提升 30% 左右吧。

我把 AI 编程的场景分为两类，一类是最近很火的 Vibe Coding，一类是 AI 结对编程。它们最主要的区别在于，Vibe Coding 只需关注最终呈现效果是否符合预期，而 AI 结对编程不仅关注效果，还需要对 AI 生成的代码负责，确保代码编排合理，不会引入 Bug 和技术债。

类型	定义	使用场景
Vibe Coding	氛围编程，只关心最终实现效果，不关心具体代码实现。举个例子： 1. 搭建一个语音识别功能，只要能够正确识别语音，就ok 2. 构建一个纯函数，只要同样的输入能给出符合预期的输出，就ok	1. 搭建原型、Demo 2. 一次性活动页、落地页搭建 3. 跨领域去做一些简单的事情 4. ……
AI 结对编程（或者叫 Vibe Engineering）	需要对 AI 生成的代码负责，关心具体的代码实现。	1. 理解代码库，开源项目学习 2. 模版代码生成 3. 修复Bug 4. 模块重构 5. Figma 2 Code 6. 文档生成 7. ……

在使用 AI 协助编程的过程中，我有了一些新的思考：

AI时代拉高了人在不同领域的能力上限

假设A在不同领域内的专精程度如下柱状图所示，当 AI Agent 在该领域的能力大于A时，会拉高A的能力上限。

这说明什么？

现在一个人可以做的事情更广了，验证想法比以往更容易。例如PM可以自己开发一个APP、博客，前端可以快速搭建BFF层作为服务端。

同一领域不同能力水平的人，使用AI产生的效果亦有区别

这说明了什么？

同一领域下，想要最大化的发挥 AI 的能力，一方面需要在该领域专精，另一方面还要去学习 AI 相关的一些知识，去改变自己的使用习惯。高手+AI 会发挥更大的效果，例如在编程领域：

需要懂代码、懂架构：知道实现需求的解决方式是什么，且知道如何控制AI去写出符合最佳实践的代码。设计模式、算法与数据结构的思想依然重要。
需要会对复杂任务分解拆分，管控AI执行任务的过程。
准确的上下文输入：能把想要 AI 实现的功能或者解决的问题描述清楚。
代码和架构是 AI 友好的：详细的架构文档和代码风格文档可以让AI更好地理解项目，使用广泛采用的编程语言、框架和库也会提升AI生成效果。

AI 编程注意事项：

0 明确 AI 编程边界

要使用AI编程，得先知道什么是AI擅长的，什么是AI不擅长的。

AI擅长的地方：

快速生成大量样板代码。例如样板组件、CRUD。
自动化重复、枯燥的任务。
尝试多种不同的实现方式。
借助快速迭代，迅速验证想法。
在需求清晰的前提下，快速交付功能。

AI不擅长的地方：

代码审查：

AI在代码审查方面做的不太行，容易漏掉 corner case。

不好的指令：

垃圾问题产生垃圾回答，好问题才能产生好回答。

架构设计：

没有扎实的架构，软件很快就会充满技术债，导致维护迭代困难。当前AI并不擅长设计优秀架构。

代码质量：

选择恰当的抽象层次、正确运用设计模式、保持代码的干净清晰，这些都是AI目前的短板。

安全性：

经验不足的人搭配AI的组合更容易出现漏洞。

1 拆分任务、规划边界

在实现某个需求时，对任务进行拆分，规划TODOLIST，分步骤让AI依次实现。

2 上下文管理

给 AI 精准的上下文，思考你在做这个功能的时候需要哪些背景信息，将这些背景信息给到AI。

例如：

直接需要Agent修改的文件
强依赖文件
接口文档
指定使用某个库的某个功能
……

3 使用记忆

使用记忆可以让Agent更好的理解项目背景，代码规范等信息。

Claude.md（赋予人格，添加项目架构总体信息等）

4 使用 AI 友好的框架和库

选择被广泛采用的框架和库，能够获得更好的输出效果。
把库的源码暴露给Agent，让Agent获得完整的上下文，有助于提升输出效果。例如前端组件库中的预制菜 shadcn。
消耗更少的Token。例如 tailwind css。

5 善用 Git

使用 git 来检查和对比每次 Agent 输出的内容，或者验证输出的效果。在发现不对时可及时回滚。

6 集成 MCP 工具

用 MCP 工具来提供给 Agent 更好的上下文，从而提高输出的质量。

对于前端来说：

context7 获取最新的文档
Firecrawl 抓取网页内容、结构和截图提供给模型
shadcn 获取shadcn某个组件的源码
F2C类设计稿转代码
……

2 黑客松进入决赛12强

去年看到别人一起组队参与黑客松就觉得很向往，今年在同组校招朋友的组织下一起组队去黑客松玩也算是圆了我一个小目标🥺。队友都非常给力👍，我们最后进了决赛12强，拿了黑马奖：

🎉解锁成就「第一次参加黑客松，进入决赛12强」

简单来说，我们做了一个 AI + 播客的产品「圆桌话廊」，我们和市场上同类型产品最大的不同之处在于：用户在听其感兴趣主题播客的同时也可以参与其中，引导话题走向，是一种圆桌讨论的形式。我负责产品前端 APP 的开发，使用了我不熟悉的技术栈 React Native，好在在 AI 时代，我可以很快的干中学，最后成功完成 Demo，可以在安卓上跑通~

虽然是 Demo，整体页面和功能的完成度已经很不错了，能做到这样的效果 AI 功不可没。我想简单分享下我在开发 APP 的过程中结合 AI 的一些实践。

项目使用 Expo 框架——开发 RN 应用几乎绕不开的选择——进行开发。在项目前期搭建环境环节，我主要使用 ChatGPT 和官方文档来帮助我快速了解框架，快速搭建环境和跑通开发->调试->上线包的环节；在架构设计环节，我负责设计路由，ChatGPT 负责协助我调研路由库，最后选择了 expo-router，然后让 Github Copilot 根据我的设计来应用路由；

我们组有一位很牛的 PM 兼 UI，得益于此，在还原设计稿环节效率很高😇。我主要使用 Copilot 结合 F2C 的 MCP 快速搭建界面，大部分时候效果不错，我只需要在此基础上再指出不足让 Copilot 修复就好。

在搭好主要的框架后，我就全权交给 Coding Agent 去完成任务了，也就是从 AI 结对编程（或者说 Vibe Engineering）转换到了 Vibe Coding，这时我大部分时间在描述我对某功能的预期，然后让 Copilot 和 Claude Code 去实现，只要测试后符合预期我就认为该功能完成。

以上就是我在开发圆桌话廊时使用 AI 的一些实践，更具体的我放在了「实践 AI 编程」这一标题下，也许你已经看过了，里面有我对 AI 协助编程的思考，如果没看过那我可要生气了！

3 我最坚定的信念是什么，我需要什么才能改变我的想法？

“人生的意义在于体验”。我会觉得相比娶妻生子、买房买车这种世俗意义上的成功路径，我更倾向于体验更多有趣的事情，比如 coffee chat 和不同的人聊天、想要学习游泳、浮潜，之后还想去试试滑雪，去更多的地方旅游（主要是日本）。我正慢慢变得自爱（或者叫自私？），会优先考虑自己的需求，其次是他人。

什么才能改变我的想法？可能是随着我的年龄成长，来自社会对一个男人的期待越来越具象化成周围喋喋不休的人时，我可能会改变吧，也许更可能是无所谓的态度，我希望那时我已经有了稳定的内核和支持体系，让我能够更好的做自己。

4 第一次约稿

马上粥o又要到了，我想做飞出小人风格的阿米娅无料，于是在米画师找了擅长画色块且印大量无料不加钱的美术老师。第一次约稿比我预想的简单，一开始想要做成飞出小人风格，但和老师讨论后觉得那样太简陋了，于是决定按照老师自己的风格来画。我给了三种皮肤的阿米娅立绘和姿势参考，老师就可以画出草稿，我再对草稿做一些修改意见，改完没问题就可以美美等待老师交稿了🥰。

🎉解锁成就「第一次约稿」

由于我的拖延症，我在粥o的半个月前才开始约稿，然后我发现如果老师正常画的话完全来不及制作后续的无料😭，赶快找老师加钱加急画，好在老师非常给力五天就画好了🥺🥺！

制作后续的制品时又踩了一些坑，我定做了方卡和亚克力挂件：

珠光方卡背景是白色的，兔兔们也有大面积白色的色块导致肉眼看起来边界不是很清晰（特别是宇宙兔）😭；亚克力定做的太小了只有5cm，且厂家的工艺水平不行，遇到很多瑕疵亚克力，特别是宇宙兔穿孔那里有着明显的错切痕迹😡！

这次由于时间紧急无料都是滑铲出来的，来不及重新定做了，下次一定要早一个月去一些好评如潮的店铺定做🥺

5 叒去粥o

来北京后第三次去粥only，我感觉我已经轻车熟路了（？）上次偶然的机会让我知道还有「无料互换」这样的形式，这次试着做了无料交换条，有很多老师找我互换很开心😇

🎉解锁成就「第一次做无料交换条」

之前去漫展总是会看到很多痛包，趁着这次去粥o，我打算也做一个痛包。为了有舟味，我想尝试搭配成机能风的感觉，同时我想痛阿米娅，于是把主题色定位了罗德岛蓝。搜了很多攻略并粗浅恶补了下机能圈的知识，最后成果😋：

🎉解锁成就「第一次组痛包（其实也不是很痛？）」

因为不是很痛，以后背着上班也挺好🧐

搓无料真的太需要耐心了，并且家里椅子很逆天，无法支撑腰部，导致搓完后腰酸背痛躺在床上休息了好久才好一点😭，不过一想到可以去粥o购买喜欢的制品、互换无料、与coser集邮就感觉动力满满😇下面是一些搓无料和包装无料的过程记录：

和上一次一样，这次带着满满的无料去，载着满满的无料回。不同的是，我更加沉浸其中，感受热爱、感受笑容、感受感动、感受幸福。并且这次还和一位我关注很久喜欢很久的老师约换和扩列了🥺，希望后续可以成为朋友。最后放上结算图：

6 新奇体验

我有一个想法：在年度总结时，把今年做过的各种「第一次」和「新奇体验」来个汇总，感觉会很有意思！

这两个月的新奇体验有：

第一次和不认识的人合租两居室
买了二手电动车，第一次有了自己的车
因为银行卡限额导致房租付不出去😅
和零度突破认识的朋友一起聚餐😄
第一次参加黑客松，进入决赛12强
第一次到公司发现忘带电脑
第一次约稿
第一次做无料交换条
第一次组痛包（其实也不是很痛？）
第一次被人约 coffee chat
第一次和朋友们聚餐喝了点小酒，感觉喝完酒后头痛，身体发热，思维跳跃，睡不太着，下次不喝了😅😅
第一次到科技园顶楼看日落
某年某月某日和朋友吃完必胜客去看了罗小黑战记2，很爽😄

开源动态

1 Streamdown

react-markdown 的即插即用替代品，专为AI驱动的流式传输而设计。

它内置了对不完整 Markdown 解析的支持，这意味着即使 Markdown 正由AI模型生成，它也能进行渲染。它还具备诸如 URL 前缀限制等安全功能，以及针对流式环境的更优性能优化。

2 React 19.2

React 19.2 版本发布，本次更新引入了 <Activity />，它允许你隐藏和恢复其后代的用户界面及内部状态，类似于 Vue 中的 <KeepAlive> 组件。

还有 useEffectEvent 等新功能。

3 2025 年 JavaScript 现状调查现已开启

4 2025 年最受欢迎的前端框架

根据该网站的数据，全球前10名是：

中国前10名是：

工具推荐

1 Chrome DevTools MCP

谷歌浏览器官方出的MCP，可以给 Coding Agent 控制和检查谷歌浏览器。

特点：

获取性能洞察：使用 Chrome DevTools 记录跟踪信息并提取可行的性能洞察。
高级浏览器调试：分析网络请求、截取屏幕截图并查看浏览器控制台。
可靠的自动化：使用 Puppeteer 在 Chrome 中自动执行操作，并自动等待操作结果。

视频

1 最讨厌写测试的程序员，为何拒绝TDD

但我感觉在 AI Coding 已成趋势的当下，TDD 或许变得重要起来了。

2 polebug的vlog

太好啦，又有 vlog 看了😇

vlog#98｜断更了两个月，都发生了什么｜更新桌搭｜入职新公司之前的悠闲生活记录｜在读《西西弗神话》｜学习画画中

vlog｜上班前早起一小时能有多快乐｜在读《做难而正确的事》｜保持记录与思考

vlog｜我居然拍了 100 期 study vlog，以后也要好好加油！🎉

vlog｜在泉州散步的快乐片段 🚶‍♀️｜在老城区逛吃和海边发呆的两天

3 程序员都喜欢重构代码，但领导不喜欢【让编程再次伟大#45】

在工作中，所有行为都围绕着如何更好更高效的赚到钱，重构作为用短期时间换取长期收益的行为在这个环境不受待见，如果想要促成重构，需要和商业价值挂钩，但要挂钩不太可能。

不过随着技术债的积累，重构是有必要的，要尽可能找到可以挂钩的指标，让重构后的收益惠及更多人，给重构项目上价值。

4 尤雨溪 2025 年访谈：谷歌、Vue、Vite、Nuxt、Next、Vercel 与 VoidZero

5 曾经死过的互联网，能给我们什么启示【让编程再次伟大#46】

文章

1 虹线丨记录一下 AI 在医疗领域应用的实际体验

记录了作者对 AI + 医疗的思考：作为患者如何解读报告、初步诊断病情；作为医生如何获取患者更详细的背景信息，从而更好进行诊断。

2 深入思考主题化与颜色命名（英）

节选：

这些库和框架提供的调色板可以作为很好的起点，但我认为你几乎永远都不想使用它们。因为颜色能带来差异；差异能造就独特；独特能塑造个性。

即使我不告诉你，你可能也知道这是真的。

使用 Bootstrap 的网站，看起来就像 Bootstrap 风格。
使用 Tailwind 的网站，看起来就是 Tailwind 风格。
使用 shadcn 的网站看起来也那样……

所以，如果你不想淹没在千篇一律的海洋中——和其他人看起来一样——那么创建自己的调色板是迈出的第一步。

3 Big O（英）

理解大O表示法的入门交互式教程。

4 谈谈 AI 编程工具的进化与 Vibe Coding

节选：

在短期内，Vibe Coding 会引入缺陷和安全漏洞，长期来看 Vibe Coding 会导致代码难以维护，技术债务堆积，整体系统的可理解性和稳定性大幅降低。

我看过最形象的一个解释是，让一个非程序员通过 Vibe Coding 来编写一个他们打算维护的大型项目，就相当于在没有先解释债务概念的情况下就给孩子一张信用卡。

在构建新功能的时候，就犹如挥舞这张小小的塑料卡，想买什么就买什么，想要编写什么新功能都能很快实现。只有当你需要维护它时，它才会变成债务。

如果你尝试通过 Vibe Coding 去修复另一个 Vibe Coding 导致的问题，这就像用另一张信用卡偿还信用卡债务一样。

5 培养好品味

现在真正决定一个产品能否脱颖而出的，是它的品牌、设计、直观程度，以及整体使用体验。换句话说，就是产品是否有品味（Taste）。

6 浏览器中的液态玻璃：使用 CSS 和 SVG 实现折射效果（英）

只使用 CSS 和 SVG 文件模拟苹果的液态玻璃效果，还能学习到物理知识，并把知识转换为实际应用🐮

7 你并不需要动画效果（英）

交互式地告诉大家如何进行动画设计以提升用户体验。

8 AI 辅助编程的质量，关键在于如何管理“工作单元”

将任务分解成“大小合适”的工作单元，并为每个单元提供恰到好处的细节，这或许是改善上下文窗口、进而提升生成代码正确性和质量的最强杠杆。

9 AI本该助力新人，为何反而让高手更强？

AI出问题的地方：

• 代码审查（Code review）：

AI无法真正“理解”代码。审查时可能有些帮助，但一旦涉及边缘情况（edge cases）——而AI生成的代码通常有更多边缘情况——最终还是需要资深工程师出马。

• 不好的指令（Bad prompts）：

能写出高质量提示词的人，必须是那些真正懂得自己要做什么的人。如果使用者缺乏深入理解，即使AI看起来产出还行，实际也只是给项目埋下了无数隐患。

• 架构设计（Architecture）：

没有扎实的架构，软件很快就会失去价值。当前AI并不擅长设计优秀架构，虽然表面上看起来似乎可以，但实际上，这种复杂推理仍然依赖人类。许多以弱架构起步的项目，最终深陷技术债（technical debt）泥潭。

• 代码质量（Code quality）：

选择恰当的抽象层次、正确运用设计模式、保持代码的干净清晰，这些都是AI目前的短板。

• 安全性（Security）：

新手搭配AI的组合更容易出现漏洞，就像盖一座房子忘了装门锁。虽说漏洞无处不在，但高级工程师至少能提高警觉和谨慎。

• 错误学习（Wrong learning）：

新人如果不能正确判断AI产出的代码好坏，就会潜移默化地吸收错误知识。在公司里，这意味着制造的是损害而非价值。

以上这些问题，概括起来就是：AI暂时对高级工程师并没有威胁，甚至反而让他们更加强大。这里不是在批评新人，而是强调不应对他们抱有不切实际的期望，把他们扔到充满风险的环境中。

10 2025 年的 React 状态管理：你真正需要的是什么（英）

在技术选型时，不要无脑选择最热门的库，也许你甚至可能都不需要一个状态管理库。应该明确项目对状态管理的需求，然后找到最贴合你们项目的状态管理解决方案。

11 你的图片（可能）尺寸过大（英）

通过设置 <img> 标签中的 sizes 和 srcset 属性来应用响应式图像以获得更好的用户体验。

播客

1 硬地骇客丨写 Vue 代码比尤雨溪还多的男人，四年两百万的商业化之路｜对谈金州：Ant Design Vue 作者

Ant Design Vue，每周 NPM 下载量接近 14 万次的明星项目，金州是如何靠它开启自己的“硬地骇客”生涯的？在这次对话中，你将了解到：

开源项目商业化的可行路径：卖模板、卖组件、广告赞助，哪种模式更适合你？
如何平衡开源与盈利：如何在维护开源项目的同时，找到可持续的商业模式，实现技术理想与经济回报的双赢？
独立开发者的生存之道：如何高效工作，平衡工作与生活，在享受自由的同时，持续创造价值？

2 硬地骇客丨量子位「AI 100」访谈：10 倍效率 AI 播客工具 Podwise

3 跨国串门儿计划丨产品愉悦感的秘密：谷歌、Spotify前产品负责人揭秘如何打造让用户上瘾的体验

4 Event Loop丨“理想主义，我还年轻”

本期采访了SkyWT，一起聊聊他的大学成长、个人博客创作、兴趣爱好和作为刚毕业的校招生踏入职场后的点滴感悟。

里面有关大学学习的对话我很有感触：如果不考虑考研的话，没有必要遵循学校的评价体系，尽可能的找到感兴趣的领域学习钻研，多接触该领域的人。

句子

1 每个阶段只专注做一件事

「总是有人问我：“为什么不两者兼顾？”，答案很简单：专注。一家初创公司想要成功，需要在每一个阶段做对一件事，而且只能做对一件事。

为了增加这样做的可能性，需要对其他所有事情说不。专注不仅仅是我们在做什么，还包括我们不做什么！这些不做什么的决定都是很难拒绝的。」

我发现专注的本质其实是“选择与放弃”，选择把精力放在某件事情上，以及对不重要的事情说不。

有的时候“拒绝”会更加困难，可能会处于患得患失的心理，担心自己拒绝掉那些更有潜力的机会。

「这种直接专注于目标的做法被称为“分阶段运营”。首先要决定专注于什么，这意味着首先要决定最重要事项。如果你不明白这一点，你就不能进入下一阶段。」

每一阶段，都只能有一个“最重要的目标”。如果试图“同时扩张、同时变现、同时探索新业务”，就等于没有目标。

——polebug23 读《做难而正确的事》的记录与思考

2 FIGMA 的产品理念与设计哲学

即使 AI 降低了软件构建的门槛，但真正打动人心的产品，仍依赖于有温度、有立场的设计。

精致的工艺、独特的视角和对细节的执着，是产品脱颖而出的关键。

3

“我们越是允许男性和女性进入对方的领域，允许他们表现出通常被定义为‘男性化’或‘女性化’的言行，我们就越不会把刻板印象视为理所当然，并将重新定义对性别的理解。”

——《语言恶女》P199 邦妮 · 麦克尔希尼

4 用户是不一样的，他们不会以同样的方式使用产品

我们习惯以某种方式做事，但别人有他们自己的方式。没有对错之分，只是方式不同。当涉及其他用户时，面临的挑战是我们本能地将自己当成完美的例子，然而我们只是众多用户里的一个样本。对产品开发者来说，想出一种不同的做事方式几乎是不可能的。因此，了解不同类型的用户，捕捉他们的思维方式、尤其是了解首次使用用户和重复使用用户之间的巨大思维差异非常重要。

——《做难而正确的事》P190

校招培训结识新朋友 - 筷筷月报#21

筷筷 — Wed, 20 Aug 2025 00:00:00 GMT

写在开头：

七月第二周到八月第二周经历了入职 Landing、校招培训和搬家，事情有些多，以至于写博客被我暂时性咕咕了🥺。

月度复盘

1 校招培训结识新朋友

八月初参与了百度的校招培训零度突破，在这期间认识了很多新朋友，期间大家一起聚餐了好几次，去了B1的茶餐厅，周四晚一起Crazy KFC。周五结营的晚上还去吃了东北铁锅炖，大家一起玩逛三园和小姐牌。我第一次玩这个，看别人做惩罚游戏还挺有意思的😄，自己做就😅。

感谢年初定下的关键词「链接与勇气」，让我鼓足勇气去和他们建立链接。我很开心也很感激能够通过这次培训和性格各异的同龄人建立链接，一起创造难能可贵的体验。我觉得人是活在一些瞬间里的，这些瞬间鼓舞着我继续前进，让我开始对未来有所期待，而和他们一起放纵的这段经历无疑为我的人生增加了那么几段高光时刻😇。

现在回看这些照片仍会让我微笑，我想也许这就是朋友带给我的意义。

我不是一个善于结交朋友的人，我的朋友很少，在他人眼中我可以算得上是孤独。但我并不排斥孤独，相反，我喜欢独处，享受大多数时间与自己相处，这让我内心平静、能够沉下心来心无旁骛地做自己喜欢的事情，而不必把精力花在社交上。大学时期我并不觉得这有什么不好，反而乐在其中。

但今年，我希望能踏出舒适圈，不去拿「社恐」标签绑架自己，尝试认识更多真实的人、享受和他人聊天的过程、重新和之前的朋友建立连接。我做出了一些努力，也幸运地收获了些瞬间，例如和他人重建链接。我还建立了和我聊天的途径，期待有人能找我一起聊天（现在还没有人找我😭）。

也许我依然不会变得特别外向，但至少，我打开了那扇窗。风景进来了，光也照到了些角落。这段培训的日子、这些笑起来毫无顾忌的瞬间，就是最好的开始。路还长，但我已经愿意继续往前走了。

开源动态

1 NuxtLabs 加入 Vercel

个人觉得这是个好事，Nuxt 团队无需为未来资金问题担忧，Vercel 团队获得了更广的使用群体，Nuxt 的付费工具转向免费开源。

工具推荐

1 React Bits

包含大量炫酷动画的 React 组件集合，组件通过属性提供了定制选项，方便进行配置。

2 snapDOM

snapDOM 能以极高的速度和精度将 HTML 元素捕获为图像，比 html2canvas 快达 150 倍，但也要注意其在部分场景的局限性。

3 mcp-ui

用于在 MCP 上构建 UI 的 SDK，打造下一代 UI 体验。

视频

1 代码与工程之外 | 为什么“热门方向”不等于“好方向”？如何选择好的技术方向

2 你是不是在找？前端交互➡️学习路线➡️

3 VueConf 2025，VoidZero 创始人 & CEO，Vue.js & Vite 作者尤雨溪主题演讲！

发布了 Vue 3.6，推出 Vapor Mode 模式——为了极致性能而存在的全新的编译和渲染模式，去掉了虚拟DOM，获得更快的运行时性能。同时还谈到了未来 Vite 与 AI 的结合。

4 ⭐Multi-Agent：是解药还是安慰剂？

5 网页设计案例

拥有卓越造型创造能力的顶级设计工作室

不拘一格的前卫金融品牌指导

#审美积累

6 计算机核心思想系列 | 复杂系统中的定海神针：不可变

不可变带来的好处：可回退，可追踪，没有副作用带来的心智负担😭

文章

1 基于 Claude 的阅读流

碎片阅读和深度阅读融合AI的实践案例，可参考。

2 React 状态管理完全指南（英）

3 AI 编码方法论：从探索到精进的系统化实践

本文总结了 AI 辅助开发方法论的演进路径：从早期的提示工程（以交互式对话为主，效率受限），再到探索式工程（通过结构化需求和架构决策降低重构成本），最终发展为上下文工程（通过显性化项目上下文和知识图谱，规范 AI 行为）。实践中还介绍了知识注入、约束规则集成和 SuperClaude 等工具的应用。结论指出，AI 编码已从工具走向协作伙伴，强调项目长期演进和工程质量，核心在于结合人类判断与 AI 执行力，构建可持续、系统化的工程体系。

4 独立开发穷鬼套餐（Web实战篇）

做独立开发常用的技术栈~

5 重温 CSS border-image（英）

border-image属性是一个强大但常常被忽视的 CSS 工具，它具有令人惊叹的灵活性。通过切割、重复和扩展图像，你可以用最少的代码创建复杂的边框、装饰元素，甚至是动态覆盖层。

6 polebug丨发生了很多“对话”的七月

祝 polebug 能找到理想的工作～很真诚的文字🥰

7 pseudoyu丨过去这十年

8 Building Aether 1: Sound Without Boundaries（英）

关于 Aether 1 的案例研究，在其中 3D、声音和 WebGL 融合成一种无边界的体验。

9 用 AI 生成一档播客有什么意义？

AI + 播客的实践，它完全由 AI 生成。由 AI 搜索资料，由 AI 生成语音，由 AI 生成标题、节目简介和 Shownotes。

播客

1 硬地骇客丨Vibe Coding大地震：Cursor定价争议、Windsurf收购风波，模型厂商亲儿子们又将如何进场？

被卡脖子好难受😭

2 大连工业大学开除事件：层层系统如何“谋杀”一位女性？

3 硬地骇客丨对话 Saga：红海市场的破局指南 — 你的用户不在多，在于“付费密度”有多高

本期《硬地骇客》请到独立开发者 Saga Su，他用几款出海工具已赚超百万美元。听 Saga 聊，你会发现，大厂不碰的“小生意”，才是你的金矿。他将分享如何从用户抱怨中挖出垂直需求，利用AI搞定市场调研，甚至还有他独家的“海王应用”案例。Saga 强调，别光看用户量，更要关注付费密度！想知道他那套“快速失败”的执行计划吗？经验满满，干货拉满！

SagaSu：做了10年B端产品，操盘过亿级用户的项目。2年前开始出海，目前有4款产品，ROI都在2倍以上。累积营收超过1M美金。我比较习惯站在用户角度去发现真实需求，然后用最简单的方式解决问题。今天想和大家聊聊出海这两年踩过的坑和一些心得，希望对正在出海或准备出海的朋友有帮助。

4 代码之外丨和 VSCode 核心开发吕鹏聊 AI 编程、Vibe Coding、未来程序员还是否存在

句子

1

我常常把面试当作是，“与经验更丰富的人”进行的一场对话。虽然我是一位被考验的人，但考验的过程是有收获的。

——polebug

2

一旦你开始 Vibe Coding，你就不应该再关心底层的代码实现，只关注最终的目标和结果。

——Andrej Karpathy

3

自我暴露成为一种诚实，我告诉你我对于一切事物的感受和看法，得到的从未是为了显露自我而做出的评判，而是另一种诚实的感受。这是对我的诚实的最大嘉奖。

——序诗《今天你会有好事发生》

4

在 vibe coding 时代，千万别让工具把自己逼死。效率是提高了，但人还是人，我们需要的不仅仅是更快的开发速度，还有思考的时间和生活的空间。

——onevcat 一个半月高强度 Claude Code 使用后感受

5

“吾生也有涯，而知也无涯。以有涯随无涯，殆已！”生命有限而知识无穷，尤其是 AI 快速发展的这两年，我们获取知识的手段变得无比便捷，但如果一味地用有限的生命去追求无限的知识，必然会让自己变得无比疲惫。因此不要过分执着于追求知识，而是要过滤与筛选出自己感兴趣的内容，并内化为自己新的认知，才能保持内心的宁静和自然的状态。

——Airing 月刊（第32期）：中大校友会的采访

德州、上海与日本之旅丨体验 Vibe Coding丨刷算法一周年丨学习 Blender - 筷筷月报#20

筷筷 — Sat, 05 Jul 2025 00:00:00 GMT

月度复盘

1 十五年之后，我再次来到德州

妈妈准备回老家给姥姥姥爷上坟，我寻思很久很久没有回老家了，于是也请假跟着去了。有关老家的记忆是模糊的，我在三、四岁时就离开了德州，定居在武汉，只在小学二、三年级时回去过一次。

我记得小时候家旁边有一家化肥厂，小区前还有一条死水沟，非常得脏乱差，妈妈就在化肥厂上班，上班期间就把我托管在小区里的一个托儿所里。我还记得小区后院是一片草丛，我妈告诉我里面有蛇，让我不要进去😄。

这次回德州，重新建立了自己小时候生活地方的记忆。老家的房现在租给大萍姨的朋友了，是一个非常温馨的一个小家，在家里面她养了各种植物。我觉得能租给这样热爱生活的人真的太好了！家的格局大概是这样：

来德州的第一天，我跟妈妈大舅大姨汇合了，买了几只扒鸡就回大舅家了，妈妈的老家在离德州市不远的小村庄中，我这才知道，那个村庄其实归属于河北衡水，处于河北和山东的交界处，属于边缘区域，发展很受限。

住进农村后我有些不习惯，这里接水都是拿桶接，厕所是旱厕，好在有🐴桶。在农村见到了很多我妈妈这边的亲戚，我对大舅、大姨、二姨等等词汇有了更具体的认识。下面是我拍的一些动物朋友和村庄风景：

第二天不到8点起床了，和妈出去在村里逛了逛、又和大舅一起去买了吃的，回来才10点，惊叹于一天原来可以过得这么慢😇，如果按互联网作息算，现在才睡醒没多久刚上班😄。今天是姥姥的忌日，下午大家一起去扫墓。坟头离村里不远，走路不到十分钟就到了。我发现，姥姥去世后在墓碑上刻的名字是「王杜氏」，是丈夫的姓+姥姥的姓+氏组合而成。我想这是父系社会下性别歧视的一种体现，反映了当时的社会结构和价值观，女性在家族谱系中被视作“附属”或“补充”，难以作为独立个体被纪念。我问了妈妈姥姥的姓名，她叫「杜秀芹」。我没再多想什么，继续扫墓了。

我在农村呆了两个晚上后又回到了德州市里，依旧是见了亲戚和小时候的玩伴（现在已经没啥印象了）。在德州的后几天，我觉得很无聊，也感觉精力已经耗尽。我并没有喜欢这里，这里看起来一切都是旧的、停滞的，我在这里没有认识的朋友，这几天还挂着大风，不适合出去玩。以上一切让我觉得沮丧，我只是出生在这里，如果不是必须我大概不会再回来了。

2 音律抢票失败😭但还是看了😋

这次绝对被sm黄牛盯上了，官方牛上加价2k多，闲鱼上包厢、录信息一大堆，最后我在演出前一天晚上买了张850的E档（本来想买包厢，可是当时都是1200、1300这样想想还是算了），且是不良视线区，不过总算圆了我的一个心愿🥺🥺。

在演出当天我还收了一个打call棒，事实证明我很明智，看演唱会就得边打call边看！

当场内响起《Everything’s all right》时，我想起了20年7月8号那天，我考完理综在校门口被爸爸妈妈接送进车里，路上熙熙攘攘，天气应该是阴天，可能还下了些小雨，我坐在副驾驶上，微微打开了些车窗，好让空气流通清新些。之后我拿起手机，下意识地打开了B站刷着动态，然后我就看到了这首曲子。我意识到这是方舟写给我们的，写给我的曲子。那个时候我有没有带上耳机呢？一些细节已经随着时间而模糊，但不变的是每次听到这首曲子，我都会记起那个不一样的夏天，还有那些有方舟陪伴的日子。场内的歌曲像是一个个Callback，把我拉回跟这首曲子相关联的日子里。我伴着一首首曲子在记忆中穿梭，心里涌出了一些美好的感情，这六年，能有方舟陪伴，真好🥰

3 去日本旅游

这个月有小半个月都在日本！这是我的第一次出国旅游🥺🥺！！！我把我的行程记录在了圆周旅记里~

我应该会在之后找个时间把这段经历分享在博客里，未来的我加油！

4 体验 Vibe Coding 做毕设

毕设题目是导师规定的，我不怎么感兴趣，最近 Vibe Coding 很火，于是就想着只借助 AI 快速做一个毕设，毕竟最终答辩时只给十分钟演示系统😄。

我通过 V0 构建原型，仿照了今日头条的网页端结构，再用 Cursor 细化。技术栈使用 Next.js，集成了 Supabase 作为服务端用于认证服务和数据库存储，部署在 Vercel 上。使用 Vibe Coding 的效率很高，我因为不想花太多时间在这上面，简化了很多功能（甚至于简陋），没几天就做好了：

项目源码在这，我还使用了 DeepWiki 检索项目代码库，生成了 Repo 文档。

5 刷算法一周年

从一年前入门算法到现在，也有一年了，这期间的酸甜苦辣只有自己知道😇。7 月绿到发黑的热力图一定程度上反映了我当时找工作的心切和焦虑；8、9 月断断续续的绿点，是我找到工作后想更进一步，在 “把刷算法题培养成习惯” 和 “好累，能不能放过我这一次” 的想法间反复横跳的证明；而当我成功养成习惯后，打卡记录逐渐趋于稳定，即便零星有空白也会在第二天补上（我甚至在旅游期间都每天做算法题，不得不夸下自己我太牛了😄）。

一开始学习算法是为了找到更好的工作，因为大厂面试中算法是必考内容。成功找到工作后，我想把「每日刷一道算法题」培养成习惯，这有两个好处：一是理解和编写优秀代码的能力 —— 虽然实际工作中极少需要自己实现完整算法，但抽象程度高的代码实现都有着算法的参与，比如二分法、递归、优先队列等，数据结构与算法的思想能帮助我更好地理解源码；二是若以后工作有变动，就不至于需要花费大量时间重新学习算法。

关于我如何养成刷算法的习惯以及入门算法的心得，我写了一篇博客：我如何入门数据结构与算法丨刷算法一周年丨刷题习惯如何养成，欢迎来看~

6 学习 Blender

在家的时候我又捡起了想学习做游戏的心，一开始我尝试学习C++，以便更好上手UE，但学了一天后我就提不起兴趣了，于是我又将目光转向了3D建模和渲染，发现了Blender。

如果学会Blender，对我很多方面都有益处，一是它可以和前端结合，我之后可以在网页中渲染自己做的3D模型，这拓宽了我的前端技术栈；二是在3D建模/渲染的过程中，是及时反馈的，我很喜欢这种及时反馈的感觉；三是我看了很多大神通过Blender做出的渲染图和动画，我想要有一天和他们一样牛，能够做出类似的效果；四是可以结合3D打印机打印出自己做的模型，说不定以后可以做一些手工。

我找了一个教程开始学习，目前把基础、建模、材质、粒子篇都简单过了一遍，正在慢慢学后续内容，以下是一些学习过程中粗制滥造的东西：

开源动态

1 Vite 7.0 正式发布

2 Oxlint 1.0

Oxlint 的首个稳定版本发布啦！相较于 ESLint，它的性能提升了 50 到 100 倍，支持 500 多条 ESLint 规则，并且已被 Shopify、Airbnb 和梅赛德斯 - 奔驰等大公司采用。

工具推荐

1 darkmodejs

用于在网页上管理暗黑模式的实用工具包，利用 matchMedia API 及其监听器，结合 prefers-color-scheme 媒体查询，以便在处于暗黑模式时触发函数。支持 macOS、iOS、iPadOS、Windows。

视频

1 polebug 的学习 vlog

vlog｜既然无法拥有过去与未来，那就好好活在当下吧｜下班之后关掉了 AI，我又回到了那个慢慢学习的状态中｜Solana+Rust 学习中｜开坑《当下的力量》

vlog｜远程办公的三年，带给我什么样的变化｜端午去澳门🇲🇴玩啦｜《当下的力量》真的很有力量，好喜欢这本书💓

2 网页横向滑动

你见过全页横向滑动的网页吗？

介绍了几个横向滑动为主的网页，可以用作设计参考。

终！极！网页横向滑动效果📕教程📕

实现横向滑动的教程~

3 为什么计算机行业总是由小错误引发大灾难【让编程再次伟大#40】

以 Google Cloud 在 6 月 12 日的瘫痪为例解释导致大灾难的结构性原因。

4 【前端杂谈12】项目从哪儿找？怎么做？又如何聊？给大家一些方法

适合想通过项目提升技术 or 通过项目弥补简历不足的朋友观看。

文章

1 工程师在沟通方面的误区（英）

2 2025 年 React 及其社区的发展状况（英）

作者简述了 React 团队的现状和发展愿景，说明了为什么 React 团队在文档中主推框架（尤其是 Next.js）并弱化脚手架（例如 Vite），但是这种做法与社区对其的期待产生错位，导致了很多偏见与误解发生。

作者尝试澄清并消除关于 React 团队背后的动机和意图的不实信息、恐惧和困惑，例如：「Vercel 在推动 React 开发，目的是通过托管网站赚取更多利润」等。

3 Chromium 渲染流水线——字节码到像素的一生

本文围绕现代浏览器架构，特别是 Chromium 展开详细介绍。

播客

1 Web Worker

No.75 Kaiyi: 前AI 时代、Vibe Coding和未来的AI

这期节目我们邀请了跨界实践者KK，他既是大厂工程师也是独立开发者。节目中，KK分享了自己如何从前端转型AI，并在实践中不断寻找意义的过程。面对AI浪潮，他如何保持个人价值感？又如何看待转型的阵痛？快来听听这位多面手的故事吧！

No.76 和播客新主播 Eva 聊她经历的前端变化、全栈进阶和对 AI 发展的思考

No.77 和晓宇聊她的打工人职场故事、结束内心挣扎的自我思考

这一次前全球互联网大厂的晓宇加入闲聊，她带来了自己的半年故事和心路历程，希望从一个简单的故事带给各位一点新鲜的感受，希望从这段故事之外，希望带给经历内心挣扎的朋友一点慰藉、祝各位自己不拧巴、做好亲密关系里的好战友、对未来充满乐观的打工人。

2 硬地骇客

EP103 Vibe Coding：AI 全栈开发产品是“气氛组”还是“真香”？

本期我们来深入探讨“氛围编程”(Vibe Coding)。主要分享用 Vibe Coding 从零开发播客工具 Castwise 的实战经验。内容涵盖 AI 在前端开发（Cursor 辅助）、后端、文案到 Logo 设计的应用，并揭示 AI 代码冗余、安全挑战及优化策略。快速了解 AI 编程的利弊！

EP104 继续聊 Vibe Coding 在复杂项目、项目维护中的那些事以及AI是否能取代程序员？

继上期分享 Vibe Coding 开发产品之后，我们再继续聊一期 Vibe Coding 在复杂项目以及项目维护、bugfix 等场景的实践。内容涵盖：AI如何降低旧项目维护成本，提高效率；如何为AI提供清晰的代码上下文，包括结构、文档、日志等；AI 在复杂项目和团队协作中的挑战及应对策略；以及提升 AI 编程准确率的实操技巧，如任务拆分、Prompt 优化等。最后，再简单聊聊 AI 是否真的有可能替代程序员？

EP106 5万Star的Alist偷偷卖了？开源圈炸了！

开源项目卖身，是开发者变现的捷径，还是社区信任崩塌的开始？最近，GitHub 上 5 万 Star 的明星项目 Alist 被收购后的一系列“骚操作”，再次引爆了开源世界的商业化焦虑。这个能聚合你所有网盘的工具，为啥走上这条路？它到底藏了多少秘密，又揭示了国内开源商业化的哪些“潜规则”？

3 新手如何买保险？医疗险对普通人有多重要？｜对谈保险精算师

医疗相关保险知识扫盲。

句子

1 摆脱心理时间（读《当下的力量》的思考与记录）

第三章说到「时间陷阱」：

「你会不由自主地完全生活在对过去的回忆和对未来的期待之中。这样你的心思会完全被过去和未来占据，而不愿意接纳当下时刻。」

思维让我们不断回忆过去、预测未来，仿佛只有这样我们才能掌控生活。但其实，这是一种时间幻想：

回忆过去，是为了构建自我，确认“我是谁”。想象未来，是为了控制不确定性，寻求安全感。但这样做的代价是，我们常常忽略正在发生的此刻：

「你越关注时间——过去和未来，你就会越多地错过当下。当下才是最为珍贵的东西。」

当下，不是一个抽象的概念，而是你此刻正在呼吸、看、听、感受的那个状态，这也是为什么很多人热衷于高风险运动的活动：「这些活动迫使他们进入当下时刻——在这些高度紧张的时刻里，他们能从时间、从问题、从思维中解放出来。」

——polebug

2 我退订了 ChatGPT Plus，因为我发现了文科生的 Cursor

在基座模型能力日益趋同的今天，纯粹的 Chat（聊天）形态已经成为 AI 产品与用户数据、工作流结合的最大障碍。OpenAI 在产品交互上的创新，已经呈现出非常明显的落后。

——虹线

我如何入门数据结构与算法丨刷算法一周年丨刷题习惯如何养成

筷筷 — Thu, 26 Jun 2025 00:00:00 GMT

我如何入门数据结构与算法

分享一下我入门数据结构和算法的路径：

图中视频课都是在B站有资源的，我比较推荐的资源相关链接：Hello 算法电子版，代码随想录，代码随想录视频课。

如果你想学习数据结构与算法，我有一个更好的路径推荐给你，可以让你在学习过程中有更缓的学习难度曲线，更好的去入门，并且不受编程语言的限制：

首先通过《Hello 算法》入门，构建整体的算法框架，再体系化学习算法，填充框架。《Hello 算法》里有清晰易懂的动画图解和可运行的代码示例（常见的语言示例都有），难度曲线合理，易使读者理解算法和数据结构的核心概念，并能够通过编程来实现它们。

这本书在 GitHub 上很火，已经有 114k 的 Star了。

同时该书有很多经典题可以在力扣找到，在学到时可以同步到力扣刷题，通过实践来验证所学的知识。

在体系化看完《Hello 算法》后，就可以进入到刷题阶段了。代码随想录把题型进行了分类，我们可以很好的根据类别来进行刷题。

代码随想录有文字版和视频版，相比文字，我更喜欢通过视频来学习知识。我刷题的步骤是：

根据代码随想录的刷题顺序，打开对应教程视频；
在力扣中打开视频对应的题，查看题目信息，自己可以先想一想解题思路，如果没有思路也没关系，这太正常不过了，我 95% 概率自己想不出来；
看教程视频里的解题思路；
跟着思路自己在力扣中实现并提交成功；
重复 1 - 4 步。

这里吐槽一下力扣题解的评论区，我总是能在里面看到贬低自己的评论，我觉得真的没必要，且这样做会让自己真的变蠢😅（因为大脑会把它当成指令或事实，不断重复这种说法，会强化你对自己的“蠢”的认知）。没有人一开始就会算法，且我们不是要去自己发明一套算法，而是去解算法题。能不能解开算法题的信息差就在于解题思路，只要你知道思路，就能解开。这与智力无关，与努力有关。右图是我解无重复字符的最长字串的早期记录，给大家看看缓解下焦虑😄。

跟着代码随想录把整个算法体系都刷一遍之后，恭喜你，成功入门算法了，此时面试手撕算法对你来说应该不成问题了！

也许你会有学完后面忘掉前面的烦恼，重复练习可以让你的烦恼减轻，就像我制定「每日一道算法题」的每日任务一样，你也可以根据你的情况复习算法。如果你学习算法的目的是为了面试，那么我推荐你这个网站：CodeTop，它支持按公司、部门、岗位组合查询算法题考察频次数据，方便大家高效检索练习。

刷算法一周年

刷题习惯如何养成

将「刷算法题」培养成习惯不是一件简单的事情，刷题是枯燥的，算法是困难的，两者光是组合在一起就让人感到痛苦😫。那看起来不太可能实现的习惯，我是如何办到的呢？其实我只是遵循一个非常简单易懂的准则：使它易于实现。

细心的朋友可能已经发现了，我在上文制定的习惯目标是「每日只刷一道算法题」，目的就是为了减少我的负担，让我觉得这是一个不会耗费太多时间的事情。并且，我没有规定刷算法题的难度，同样减少我的负担——大部分时间我解答的都是简单、中等题，我解答的困难题仅仅只有 17 个。

更过分的是，我没有规定不能重复刷一道题，这样一是可以加深对某些面试高频题的理解，二是依旧减少我的负担——力扣上我无重复字符的最长字串整整提交了 27 次😄。

以上种种做法，都是在为了在培养习惯时让其易于实现。“我不想每天在算法题花费太多时间”，没关系，每天只做一道题就行；“我觉得算法题好难，我 cover 不住”，没关系，做个简单题或者复习做过的题就行；“我昨天太忙了没时间做算法题，热力图上已经出现空白了，好烦，想摆烂了”，没关系，中断很正常，不必执着于完美，降低实现难度今天补上就行；“今天只有最后 2 分钟就过去了，来不及了怎么办”，没关系，哪怕花 1 分钟去提交之前写的代码，也比不做强，不在于你做了多少，而在于你有没有形成“惯性”。

当然，系统地养成习惯不止让习惯易于实现（我认为这是最重要的一点），尽可能做到：

明确习惯目标：越具体越好

不要：「我要刷算法」

要：「每日刷一道算法题」
绑定触发器（环境 or 时间）
让这个习惯有“起点” —— 用已有行为触发它。

例如我的触发器有：
- 工作期间午休 or 晚休期间 -> 刷一道算法题
- 在飞书设置每日定时任务，未完成提醒 -> 刷一道算法题
让习惯易于实现，坚持重复

哪怕每天做1分钟，也比不做强，形成“惯性”
即时奖励：让大脑期待这个行为

做完后奖励自己，例如完成该飞书任务、打会游戏
允许失败但保持回归
中断很正常，别因此自责或放弃，如果失败了，找出原因并及时调整，例如：
- 算法题要做很久 -> 降低难度从简单题做起

欢迎来找我聊天 - 筷筷月报#19

筷筷 — Thu, 12 Jun 2025 00:00:00 GMT

这次的月报并没有复盘，原因是我最近怠惰加上写毕设和论文导致复盘被我搁置了，在下一期会补上！

最近我在博客中添加了关于我页面，在其中简单的做了个自我介绍、列出了一些我做的玩具项目和常用的社交媒体账号，以及和我一对一聊天的方式：

我自觉是一个比较 i 的人，但我想做出改变，去尝试链接他人并享受与他人沟通的感觉，我还算擅长：

前端求职相关疑问
学生时期遇到的疑惑（例如对大学生活感到迷茫随波逐流等）
职业发展规划与建议（需要提前说明的是，目前我只有不到两年工作经历）
讨论游戏、番剧
讨论女性主义相关议题
其他任何闲聊

希望我能够在沟通中给到你一些新的角度，也欢迎和我交朋友！

如果你有兴趣的话，非常欢迎在关于我页面底部点击按钮「与我预约沟通」🥺

开源动态

1 GSAP 动画库宣布免费

GSAP 是一个优秀且功能强大的动画库，现在之前的高级付费功能全部可以免费用了！

2 推出 Rolldown-Vite

Rolldown-Vite 是基于 Rust 开发的下一代 Vite 打包工具，旨在通过性能优化大幅缩短构建时间。目前可通过 rolldown-vite 包直接替代原生 vite 包使用，未来将成为 Vite 的默认打包工具。早期测试显示，大型项目的生产构建时间可减少 3 到 16 倍，内存使用量最多降低 100 倍。

工具推荐

1 ⭐DeepWiki

将源码一键转换为文档。输入 GitHub 仓库链接，输出解释该仓库的文档，包含系统简介、发展历史、核心架构解释等。

我拿我最初独自开发的记账小程序妙记试了下，生成的Wiki质量很不错，能准确拆分模块，并提供细粒度的讲解。例如在近期账单显示下，就分析了显示逻辑，并附有直观的图表和参考来源：

视频

1 polebug 的学习 vlog

vlog #92｜程序员下班后的日常学习记录｜在香港远程办公的历险记｜在学交易相关的技术｜读完《悲惨世界》第二卷｜减脂中｜保持思考与记录

vlog #93｜程序员下班后的日常学习记录｜四月复盘｜在学 Solana 智能合约｜读《当代占星入门》、《悲惨世界》｜保持思考与记录

vlog #94｜写写代码、爬爬山的快乐五一假期｜在学 Solana+Rust｜和朋友聚会｜《悲惨世界》收尾中｜保持学习与思考

vlog #95｜程序员的我关掉了 AI，重新找回写代码的心流和快乐｜在读《消失的多巴胺》，思考快感缺乏｜保持思考｜记录快乐的瞬间 😁

立个flag！等到下半年正式上班，我要像 polebug 一样试着拍拍学习 vlog！

2 让编程再次伟大系列

大数据时代过去了，我很怀念它【让编程再次伟大#36】

区块链已成往事，但我并不怀念它【让编程再次伟大#37】

元宇宙，生得幽默，死得滑稽【让编程再次伟大#38】

3 【前端杂谈10】渲染页面的 N 种姿势 | 从模板引擎到新式服务端渲染

前端页面渲染方案的更迭，最终的目的都是为了更好的用户体验。当然，我们知道技术是服务于业务的，最新的方案不一定能应用到所有的场景，找出最贴合业务场景的前端页面渲染方案，是我们前端工程师的职责。

4 前端不放复杂计算？怎么定义这个复杂度？

5 ⭐代码与工程之外【4】| 价值、自由、金钱：工作的不可能三角

文章

1 Airing丨月刊#29：新生活

2 ⭐事件循环可视化

通过向下滚动页面可视化 JS 的事件循环机制，网页交互做的很🐮🍺。

3 ⭐AI 交互的未来：超越纯文本

与 AI 之间的交互不应只是文字或语音，而是通过符合用户直觉的 UI 界面。目前交互体验良好的 Agent 类产品都是通过内部约定来渲染 UI 界面的，目前还没有一个行业认同的统一规范。文章中解释了为什么与AI的交互需要UI界面，以及对一个通用的规范的讨论探索和期待。

4 React 内部原理：哪个 useEffect 先运行？

对 React 开发者来说基础且重要的知识，结合动图浅显易懂的解释了 React 组件渲染生命周期内的执行过程。

播客

1 Web Worker丨前端技术深探：Alien Signals 与Vue 3.6 的响应式系统演进

在这期播客中，我们邀请到了 Vue 核心贡献者 Johnson 和 Doctor Wu，围绕 Vue 3.6 中引入的全新响应式系统 Alien Signals 展开深入讨论。从 Signal 的概念起源到其与 Vue 2、Vue 3 响应式系统的对比，再到 Alien Signals 的算法优化与性能突破，嘉宾们分享了技术背后的设计哲学与实现细节。此外，我们还探讨了前端框架的未来趋势、TypeScript 的重写计划、开源项目的维护心得，以及 AI 对开发者工作的影响。无论你是前端开发者还是技术爱好者，这期内容都将为你带来启发与思考。

2 硬地骇客丨对话Shawn：如何用一款晒太阳App，在健康赛道中脱颖而出？

为什么一款小小的晒太阳APP，能获得苹果App Store的官方编辑推荐？为什么在竞争激烈的健康赛道，它却能脱颖而出？本期节目将分享SunAlly背后的故事。Shawn 带你深入了解健康类应用市场，他如何利用Apple Watch数据，结合用户情绪价值，打造一款高粘性、高盈利的应用？又是如何利用小红书等平台，巧妙地进行内容营销？

3 硬地骇客丨100期了！硬地骇客和你聊聊独立开发的酸甜苦辣

4 浪说播客丨前端自救指南vol.3-走进云谦大神，和他聊聊为什么要从前端基建转型AI开发

5 异见房间丨女记者说：如何看待“山西订婚案”中的性同意争议？

句子

1 关于教育的思考——听「周轶君一席」播客

1️⃣犯错是学习的必要环节

「如果一个人根本不犯错，说明他都没有尝试，又怎么能真正学到东西呢？」

我们从小都被教育要“避免犯错”，这种思想让我们产生了很大的心理负担。以至于我们逐渐变得不敢犯错，一旦犯了什么错就会觉得“天塌了”。

但回过头仔细想想，我每次在犯错之后，其实都会有特别快的成长。犯错也并不是一件非常可怕的事，更重要的是如何面对错误。

2️⃣学习是为了生活，而不是为了他人的评价

「老师鼓励我加入到课堂中，我谦虚地说，我不太会画画，老师却觉得我的说法很奇怪，她说：这些画不是拿来比较的，有人说过你的画不好吗？」

我们总是活在一个评价体系里，总觉得自己必须“够好”才有资格尝试，却忘了学习的初衷是探索和成长。

当这个老师说“这些画不是拿来比较的”，我心里感到一种震撼，因为我一直把老师当作是给学生打分的角色。

学习的本质并不是为了参加某个“考试”，也不是为了比别人更好，而是在过程中探索自我。

——polebug

2

如果只有话语体系的改变，但是没有结构的调整，就不会实现性别平等。

——沈奕斐

3 在 AI 盛行的当下，也别放弃思考和学习

前几天看到有个频道的调查：“你现在日常的工作和生活可以离开 AI 工具么？”其中有 53% 的人都选了「不可以」。

在依赖 AI 的同时，我们也必须认真思考一个问题：“我们有没有在慢慢失去独立思考和学习的能力？”

又或者是，如果 AI 的回答是错的，我们该怎么办？我们还能靠自己去解决问题吗？

我最近在写 Rust，对这个问题感触颇深。

目前 AI 写 Rust 的水平还很低，写出来的东西很多是错的。这时候如果我不啃语法、自己读懂文档，根本无法解决实际的问题。

这让我意识到一个现实：

AI 可以给出建议，但它很难解决根本问题，尤其是在我“不懂”的时候。

AI 工具可以加速产出的速度，但并不能真正代替我去产出。

在 AI 渗透进我们生活之后，可能会产出一个分水岭：

一边是彻底依赖工具、渐渐失去思考与判断力的人；一边是把 AI 当成辅助，仍然坚持自我，持续思考和学习的人。

请继续享受学习的快乐，共勉~

——polebug

4

语言表达并不总是必须用最精炼简洁的方式亮出观点或传达信息。语言表达往往也是为了建立联系，是为了让你自己被人理解，同时试着理解别人。

——《语言恶女》

我理想的房间是什么样的丨去明日方舟 Only 玩 - 筷筷月报#18

筷筷 — Sun, 20 Apr 2025 00:00:00 GMT

三月复盘

1 我理想的房间是什么样的？

等下半年正式入职后，我想换什么样的房子呢？

我在年度规划中给房租水电规划了大概 2700 块钱的预算。我这个价位大概率也只能租一个 12 - 15 平左右的次卧，需要和别人共用厕所。如果带独卫的化，大概需要 3500 块钱。如果要整租的话，大概是两倍 5400 块钱左右😭。

我理想的房间必须必须要隔音，我需要一个在家里可以外放声音，和朋友开黑打游戏不会打扰其他人的空间。

要有一个大桌子，且是转角桌，能够进行分区，一边是我的游戏区和编程区，会放置电脑（未来我想买一个 PC 电脑还有 Mac mini）、显示器以及 Switch，一边放置工作台可以 DIY 一些手作（这个地方最好挨着窗户，不然手作的毒气要把人熏死）。

必须要有一个人体工学椅，科技园的椅子太烂，坐了大半年感觉坐出工伤了😅，坐一会就腰疼，睡一觉起来更是感觉腰被人砍了，家里一定要配个好的让我的腰得到体贴的照顾！

有一个小床，不需要太宽，1.2m 足以、0.9m 也 ok，为其他地方腾出空间，毕竟房间不大，床能睡就行。柜子最好是侧开的，这样不占据柜前的空间，有一个挂衣区挂当季衣服，可以快速选择。

需要有一个动感单车，作为我的运动区，我已经胖到 80kg 以上了，非常需要运动。

需要利用好纵向空间，腾出地方挂我的软木板、镜子之类的。

房间要维持干净，门外放置地毯和鞋架作为缓冲区，要创造一个躺地上都觉得没事的环境。

目前就想到这些，希望能找到类似布局的房间，再慢慢迭代成理想的样子🙏。

2 去明日方舟 Only 玩😇

3月我最期待的事情就是去明日方舟 only 玩！上次的无料（指免费分发的制品）准备的太匆忙了，这次我提前 20 多天就在计划以什么形式去做，有几天疯狂在小红书上找灵感，最终选择了 NFC 唱片的形式：

我在粥出的小曲儿里挑选了我喜欢的 Top25，制作对应的背景板，再找商家打印封面和 PVC 背景板，买小唱片、NFC 贴纸，最后再一起组装起来，这个过程很有成就感，我第一次感受到了做手工的快乐😇。

这次经历还让我发现一种快乐加倍的方法，就是在做手工的同时听我感兴趣的播客。手工的绝大多数时间，都是不用动脑子的重复工作，在这期间听播客会带给我一种效率很高的感觉，因为即让手动起来了，脑子也没停下😄。

一些过程记录：

由于物料是陆陆续续到的，我没有一次性就完成组装，实际过程持续了大概一周多。分享这期间我踩坑的一些地方：

我买的轴承高度有些过高了，导致从侧面斜看阴影过重；（见图3）
最开始的PVC卡订了光面的，实际到货后发现每张多多少少都有划痕，询问商家后明白这是不可避免的，我挑选了几张划痕最严重的补发了磨砂面（见图4），虽然也有些许划痕，但效果比光面的好太多了，在特定角度下结合光线的反射会形成类似星空的底纹；
我没有使用速干胶，在拼多多的推荐下我买了水钻胶（B-7000），粘合力很强，但是需要时间晾干，味道有些冲，且前期难以把握胶水量，容易挤多。

同时我也把我的制品发到了小红书上分享，让我惊喜的是有很多老师（在漫展等二次元文化活动中，约定俗成的礼貌用语）在评论区中找我约无料互换，苯人受宠若惊，太感动了！也因此，我解锁了参与漫展的另一个成就：「与他人互换无料」！

漫展当天我带着满满的无料去，载着满满的无料回。我将对方舟的喜爱以无料的形式分享给他人，收获他人的笑容，而他人也将同样的情感传递给我。身处在这样的循环当中，我觉得很幸福，3 月 22 日我会记你一辈子🥺：

开源动态

1 Vue.js 2025 年状态报告

通过该报告，你会知道 Vue 生态圈目前的现状和将来的发展🥺👍

2 Anime.js 4.0

Anime.js 是用于网页的 JavaScript 动画库，该库可用于对 CSS 属性、SVG、DOM 和 JavaScript 对象进行动画处理。

升级后的网站好炫酷！

工具推荐

1 JS 中的算术库

我们知道，计算机使用二进制浮点数表示法（遵循 IEEE 754 标准），而人类习惯的十进制小数在转换为二进制时可能会产生无限循环或精度丢失。那么一种避免的方式就是使用一些算术库。

目前成熟的 JS 算术库是decimal.js、bignumber.js和big.js，这三个库的作者写了一篇 Wiki 来介绍它们的区别：big.js、bignumber.js 和 decimal.js 之间的区别是什么？。

2 uvcanvas

一个提供精美动态画布的开源 React 组件库，非常适合用作网页背景、壁纸和设计素材上。

视频

1 polebug 的学习 vlog

vlog # 89｜失踪人口回归 😁｜消失的一个月去哪咯｜学习量化交易中｜重读《悲惨世界》｜爱上了爬山和徒步｜保持思考与记录

vlog #90｜程序员下班后的日常学习记录｜在研究链上套利策略｜在读《悲惨世界》｜保持思考与记录

vlog #91 | 程序员下班后的日常学习记录｜在狂补二三月的复盘｜读完了《悲惨世界》第一卷，实在是太苦了呀😭｜在清明节走别了老友｜保持学习、思考与记录

polebug 终于恢复更新啦，我的每周必看。我之所以这么喜欢她的视频，是因为我向往她的状态——在工作之余看书、学习和创作，同时产生自己的思考并记录，家里还有两只可爱的小猫！我觉得她的一部分生活状态是我理想自我的一种投射，我希望未来能够成为这样的人。

2 Lynx：让字节跨端跳动 | D2 终端技术大会 2025

3 三代人啃不动的教育不公，AI这张嘴够硬吗【渐构】

博主在视频中思考和探索如何用 AI 去消除教育不公，他的思路是「让额外教育资源的边际效应趋于零，实现方式是「造出接近最优上限的AI教师，一人分配一个」，体验链接。

4 如何构建人生仪表盘

这期视频带给我规划未来的新的视角，与侧重输入与存储的第二大脑的概念不同，人生仪表盘侧重规划与输出，能够规划自身发展、激励自己作出改变并执行。

目前我使用了飞书和 Obsidian 做我的外置大脑，Obsidian 主要记录日记、月度复盘和我写的博客；飞书主要用于周复盘、记录 Todo、年度月度规划。我感觉很难找到 All In One 的应用去使用😭，不过就算有这么一款应用能达到我的所有需求，我可能也不会换了，迁移成本太高了。。。

我会在未来找一片大段的时间，思考如何构建我自己的人生仪表盘，搭好框架。上述过程感觉就像是在玩养成游戏，我有预感我会喜欢以这样的形式来生活😄。

5 AI时代人类就业四大幻觉

老蒋反驳了大众对 AI 时代人类就业话题 4 个比较常见的误区：

AI 会让人失业，但会创造同等数量，甚至更多的工作机会
AI 没有情感，需要情感投入和情感沟通的岗位坚如磐石，永远不会被 AI 取代
AI 只能取代“三低”人士，自己挣钱多是社会精英无需担心，火烧不到自己身上
AI 再厉害，也替代不了人类背锅

6 【前端杂谈09】前端请求进化史 | 从 Form 到 Server Actions

我个人认为 Server Actions 这种高度依赖框架的形式不会成为主流🤔

7 最致命的漏洞，来自最低级的错误【让编程再次伟大#35】

一定是 Vercel 干的👿

文章

1 如何撰写开发人员会阅读的博客文章（英）

2 周报 #90 - OVH 服务器、Coolify 与对 AI Coding 的思考

Anthony Fu 的博客真好看🤩

原文摘录：

我始终觉得 AI Coding 最大价值并不是帮助我们成为更顶尖的程序员，任何一个领域想要深耕都需要花很长的时间去沉淀和实践，10000 小时定律依然适用，甚至更有价值了，AI 写出的“不可控”的代码更需要开发者的自身知识储备与判断力。

但 AI 能够让我们更快/更好地实践自己的想法、做出一个小产品或是参与到一些开源贡献中了，我作为一个后端开发，并不需要 10000 小时才能写一个简单的前端页面，而是可以快速做出一个“全栈”的项目，甚至可能比自己设计得要更好。

甚至我还很习惯于阅读 AI 生成的代码来学习那些组件和语法，自己找到一些可以优化的地方去调整修改。AI 更像是一个耐心的 mentor，会帮助我们学习不熟悉的技术栈，解答遇到的问题，并将其内化为自己的技术积累。

尤其是在 Claude 3.7 Sonnet (Thinking) 推出后，惊讶于其代码能力的跃迁之余，我在 AI 为我省下的 Coding 时间里打开了之前还未看完的 cs193p SwiftUI 开发课程与 Rust 教材，开始从头学习，愈发觉得或许再几个月、半年过去，模型本身的能力已经不再是瓶颈，而开发者本身的技术储备、系统设计能力、对架构的理解和业务的抽象能力才是那个短板。

播客

1 代码帝国 | Microsoft : 开源就是毒瘤！

2 Web Worker丨Anthony Fu 开源甄选的“带货”哲学：Anthony Fu Fund与前端江湖

3 沈奕斐的播客丨《还有明天》：婚姻不能拯救女性？为什么要警惕互联网上的“毒母”？

句子

将自己的想法转化为文字不仅对作家有用，对任何想要全面提升自己的思考和学习能力的人都有帮助。

——如何聪明的做笔记

辱骂是为了指责一个人的言行不符合说话人的标准，其最终目的是规训受辱者的行为以使之符合说话者对该群体的期望形象。

——《语言恶女》

借助 AI 做开源丨开始养植物丨新时代下程序员的核心价值 - 筷筷月报#17

筷筷 — Wed, 19 Mar 2025 00:00:00 GMT

三月太忙了咕了很久，我最喜欢的 up 主 polebug 也好久没有更新视频了😭😭

二月复盘

1 借助 AI 给 AntD X 提交了 PR

这个月给 AntD X 提了 PR，最近也是成功上线了！看到我写的功能成功上线并被他人使用，成就感好高欸，我还是第一次给一个大的组件库提交 PR！

在之前，快速了解并上手修改一个复杂的项目对我来说是困难且不可想象的，现在我借助 AI 的能力，辅助了解项目的架构、功能模块等，我可以做到之前想象不到或成本很高的事情了。

2 开始养植物🌳

这个月开始上班后，我买了一颗发财树，一开始送到的树已经奄奄一息了，我感觉我救不活就让商家补发了下：

左图：应该是去世了（悲）右图：补发的

由于之前发财树是土培的，直接泡在水里不太能活。咨询并听取了养花高手的意见，把发财树的根部切掉了一部分，并把大部分叶子都切掉了保存水分，之后根部避光两天让其痊愈😇，再把根部轻微接触水面，一个月过去后，已经长出很多新叶子了：

这个月收到了百度的校招礼盒，里面有一个牵牛花，于是又开始种花了：

看着它从一粒粒种子变成参天大树🌲（？），还是很有成就感的。每过一个周末，都会觉得它又长高了一些些，让我的日常生活增加了些我喜欢的不确定性。

最近它不怎么长高了，问了养花高手，可能是因为土太少了，这个小盆已经不足以支撑起它们的日常起居了。养花高手人美心善，帮我将牵牛花搬到了一个大盆里面🥺🥺，希望我可以见到它开花的一天。最新情况是牵牛花换到盆里面后好像不太适应环境，目前奄奄一息了😭😭，别似好吗：

开源动态

1 D2 终端技术大会

D2 终端技术大会 ( Mobile Developer & Frontend Developer Technology Conference, 简称 D2 ）是由阿里巴巴终端技术委员会创办，面向全球终端开发领域（前端 & 客户端）技术人，立志于促进业内交流、引领终端技术发展。

本次主题是「热·AI」- 回归初心，热 AI 终端。我们一起来探讨，面对 AI 时代的冲击和机遇，终端人如何破局？这次会场中有没有你感兴趣的话题呢？

这次大会邀请了很多重量级的嘉宾，例如尤雨溪在这次大会分享了围绕 Vite 的前端统一工具链，字节 Web Infra 团队负责人茅晓锋分享了近期很火的 AI 浏览器自动化测试工具 midscene.js 等等。

大会 PPT 可以点击这里获取😇

2 TypeScript 宣布将移植到 Go 语言

速度有望提升 10 倍，并将在 TypeScript 7.0 中实现，为何选择使用 Go 语言移植，可以看「视频.4」快速了解。

但 Go 在 WebAssembly 上的性能较差，在浏览器中不如基于 JavaScript 的 tsc，有关相关讨论可以查看该 issue。

如果不加以改善的话，这将影响到诸如 TypeScript 在线编译器、在线 IDE 之类的网站。

工具推荐

1 [number-flow](https://github.com/barvian/number-flow)

一个适用于 React、Vue 和 Svelte 的动画数字组件。

2 Drams - Framer components inspired by Dieter Rams’ design principles

受 Dieter Rams 设计原则启发的 Framer 组件，注重简约性、功能性和美学吸引力。每个元素都精心打造，以体现拉姆斯的十大优秀设计原则，力求在保持简约优雅美学的同时，兼具创新性、实用性和易懂性：

视频

1 前端杂谈系列

【前端杂谈04】一次性搞懂 CDN、对象存储、反向代理、函数计算和边缘计算

【前端杂谈06】一次性搞懂 NPM 版本号规则

⭐️【前端杂谈07】停止焦虑！AI 时代下的前端生存指南

技术始终都是为业务服务的，而理解人的需求，创造优秀的用户体验，永远是前端工程师不可替代的价值。

2 ⭐代码与工程之外【2】| 从CRUD到商业杠杆：重新理解程序员的核心价值

程序员的核心价值，是技术吗？作为手段而非目的的技术，相对不重要吗？技术的价值又从哪里得来？作者聊了聊对上述问题的看法。

视频中作者提出技术价值传导链，帮助我们理清技术、业务、盈利的链条传导关系：

技术价值 = 技术稀缺性 X 业务适配度 X 泡沫溢价率

3 程序员请理直气壮的写出烂代码

Worse is better，要学会在交付速度和代码质量之间进行取舍（Trade-off）。我们对项目的优化是边际效应递减的，越是往深的优化，其花费的精力与时间越大，但收益却会越小。

4 10倍提速！编程语言史上最强升级！TypeScript为何选择用Go重写【让编程再次伟大#33】

文章

1 在 JavaScript 中多种分解长任务的方法（英）

2 人工智能正在造就一代“文盲”程序员（英）

原文摘录：每次我们让人工智能解决一个我们自己本可以解决的问题时，我们都是在以短期生产力换取长期理解。我们在以牺牲未来能力为代价来优化当下的代码提交。

3 Overflow Clip（英）

本文介绍 CSS 的 overflow clip 属性，并结合例子形象的说明 clip 属性的使用场景。

4 ⭐Initial load performance for React developers: investigative deep dive（英）

文章图文结合浅显易懂的探索了核心网络指标、性能开发工具、什么是首次加载性能、用哪些指标来衡量它，以及缓存控制和不同的网络条件如何对其产生影响。

5 有意结交亲密朋友

看了全嘻嘻的二月回信：不要止步于对男人失望，我很喜欢这个系列，双方都很真诚，我喜欢这种暴露自己脆弱性，袒露自己内心，真诚说出自己内心的想法的对话。我虽对此有耻感，但我想我要有勇气去袒露自己，真诚待人。

6 MCP 指南

大体介绍了什么是 MCP，MCP 的工作原理，以及如何使用。

7 LLM 对软件工程师的影响曲线（英）

原文摘录：

网上关于LLMs 的实用性有很多争论。有些人看到生产力有巨大飞跃，而另一些人则不明白这有什么好大惊小怪的。现在，HackerNews 上每一篇相关帖子下面都有一长串网友来回争论的跟帖。我称之为新的重大分歧。

关于这种差异，我有一个理论。这个理论是，平均而言，LLM 对某人日常工作的影响在很大程度上取决于其职位级别，而且呈现出一条非常有趣的曲线。在这篇文章中，我将解释这一观点背后的推理过程。

8 Async, Sync, in Between（英）

9 停止推荐和使用 React（英）

是时候认真对待 React 中的缺陷了！

播客

1 代码之外丨Anthony Fu 的成功密码｜六年级还认不全26个字母｜淡江大学的生活｜编程与摄影｜恋爱故事

2 硬地骇客丨对话“一手撸算法，一手做视频”的知名UP主”朝发”- 每个人都应该公开表达？

3 硬地骇客丨对话字节 Trae 团队：探秘 AI IDE演进之路

4 纵横四海丨《厌女》：女人是一种范畴，男人是一种格式

5 WebWorkder丨年轻人的折腾史！和 00 后的 Bonjour 初创团队，聊聊卡片社交产品创业摸爬心得

6 硬地骇客丨AI Agent：炒作还是革命？从实践+技术角度扒一扒

7 代码时光机丨代码帝国 Google: Don’t Be Evil

句子

1

曾经给予过我们温暖的人，并不一定还能有机会接受我们“迟到的“感激，但我们身边总有此刻正需要帮助的人。

——小熊猫

2

成功的背面不是失败，而是什么都不做。

——沈奕斐

3

时间是绝对公平，相对不公的。

把自己的选择变得正确丨和他人重建链接丨搭建图床 - 筷筷月报#16

筷筷 — Tue, 11 Feb 2025 00:00:00 GMT

迟来的新年快乐👋这次我又将一部分 1 月复盘的内容放在了月报中，希望能带给大家一些新的角度🌞

1 月复盘

1 把自己的选择变得正确

「在抉择的十字路口，不要纠结什么才是正确的选择，而是把自己的选择变得正确。」

我上一年做出的最重要的、对我影响最深的抉择，是去年 5 月份时，决定辞去当时使我内耗焦虑的工作并延迟毕业。在做出抉择前，我罗列了多个“可能性”，在这些可能性中预测未来，试图从中找到一个正确的方向。

我还记得当时我刚结束一个项目，由于五一加班了三天，当天是调休，我来到天通苑附近的一个公园散步，回来后就列了个思维导图：

我在众多的”可能性“中权衡利弊，最终选择了「辞职延毕」这条道路。

这里安利下 5 Why 模型，它可以用来发掘问题的根本原因，我使用 5 Why 模型去挖掘我想辞职和延毕的根本原因。

这是一条少有人走的路，尽管我那时已经有九成打算辞职延毕，但由于缺少经验和可复制的路径，我非常焦虑，到处搜有关延毕、休学等词条，想找找有没有和我经历类似的人。此事亦在小红书年度报告上有记载🤣

现在，我有把握能告诉那时的我，我的选择很正确。可这终究只是马后炮，是不负责任的随口一说。如果未来的我遇到类似的场景，我还能做出「正确的选择」吗？在选择时，我总幻想能像解算法般预测人生轨迹，却选择性遗忘蝴蝶效应的存在。

到底什么是「正确的选择」？仔细想想，这根本就是个伪命题！我身处在这个熵增的世界之中，它是一个无序混乱的系统，有太多太多变量会影响未来的走向，根本无法在一开始都考虑清楚。我在 A 时刻考虑的未来（例如准备晚上 12 点睡觉），可能由于某个变量（例如我被🚚创到异世界去了）在后续 B 时刻就无法达到我的预期。所以我觉得选择无关正确，而是要让选择变得正确，这是一种”控制论“的思想：树立一个目标，之后根据反馈不断调整达成目标的手段。

去年那个看似冒险的决定，正是通过持续的正反馈调节才显现价值——持续精进前端知识，每月复盘，将自身的知识转化输出，每日坚持算法，这些都在持续重塑这个选择的正确性。

我逐渐理解，真正重要的不是选择的瞬间，而是选择后的每一天如何抉择去让选择变得正确。我们永远在创作自己的选择，直至它成为正确答案。

2 和他人重建链接

上个月决定了关键词是「链接与勇气」后，我开始迈出我的一小步。

我挑选了莓辣的新年日历作为礼物，送给在我不同的人生阶段（从初中高中、大学到我临近毕业）影响过我帮助过我的一些女性朋友，她们在收到后都向我分享了她们的喜悦，我很开心她们能够喜欢这个礼物😇。

我联系了和我一样有 PATM 症状的网友江流，一起讨论患 PATM 的经过，在患病过程中的痛苦经历，对人际关系的影响以及如何缓解如何自洽。我很感谢她能够和我交流，以后我也想和她保持联系。

在新年，我听妈妈讲了她家乡的故事，我已经很久没有听妈妈讲她小时候发生在家乡的故事了；还时隔四年半和高中的朋友们一起去江边放了烟花🥰，虽然距今只隔了一周，但是到现在还很戒断，还想回到那个时候一起放烟花。

我发现和他人建立链接没有我想象的困难，我只是框住自己了。

3 新年爽完游戏

趁着新年这大段时间，我通关了山河旅探、沉默意志（最近还全成就了，豪玩👍）、和侄女一起通关了星之卡比探索发现。最近小红书上天天给我推喷 3 的游戏画面，搞得我想再买一个 Switch 自己玩了呜呜。

4 搭建了自己的图床 🎉

现在支持直接复制图片到 Obsidian，自动上传到图床并展示，大大提高了写文章的效率！！感谢从零开始搭建你的免费图床系统（Cloudflare R2 + WebP Cloud + PicGo）， image auto upload👏

将手工操作流程替换成自动化，真的好爽啊，体感上我更愿意配图了，写文幸福感直线上升，也不用担心 GitHub 仓库容量不够用的情况了！

工具推荐

1 jscanify

JavaScript 文档扫描库。支持网页、NodeJS、React 等。

视频

1 编程语言排行榜是怎样误导你的【让编程再次伟大#28】

2 polebug’s vlog

vlog #87｜忙里偷闲的下班学习记录｜被买房、工作搅乱的生活节奏 - 中篇｜烦躁的日子里，靠哲学导论续命｜在读《也许你该找个人聊聊》｜无氧运动上头中

polebug 终于更新了🥺！买房真的是很耗心力的一件事情啊！！

哲学导论拨珠推荐了很多次，其中分享的一些观点也很戳我（例如这次哲学家对图灵测试和中文房间的讨论），我准备也看看。

vlog #88｜生活就是不确定性的代名词｜一月复盘｜在读《也许你该找个人聊聊》｜回福建过年啦｜保持学习、记录、思考、复盘

3 71万人打出8.6分，却几乎没人能完全看懂！逐帧解读《花束般的恋爱》

木鱼觉得维持长期关系的一种方式是：自由选择「付出」，不期待「回报」。

文章

1 JavaScript 框架仍然需要 Portal/Teleport 吗？(英)

相比 createProtal 和 <Teleport> ，HTML 和 CSS 有更简单的内置解决方案。HTML <dialog> 元素、HTML popover 属性和 CSS 锚点定位可解决这些问题和用例。

2 与其直接问 AI 答案，不如请 AI 找到研究这些问题最好的老师

3 Deepseek R1 可能找到了超越人类的办法

4 2024，告别盛夏丨Airing

5 转向仅支持 ESM（英）

Anthony Fu 介绍仅使用 ESM 的好处以及当前生态系统的状况。

句子

1

我之前一直很恐惧在雾中原地踏步，每一天、每一分、每一秒都恐惧着，于是想拼劲全力抓住流逝的时间，拼命学习、工作，想走出来，尝试去把握住那些“不确定”中的“确定”。走出来之后我才发现，我所恐惧的其实不是“不确定”本身，而是“原地停留”这件事情，这导致我一直活在对「未来」的追逐中。每当我赶上未来时，它在我手中便失去了价值，于是继续去追赶另一个虚无缥缈的未来，精疲力竭。

然而实际上，“不确定”并不可怕、失败也不可怕，重要的是面对这团迷雾的态度——享受挑战，享受探索，享受当下的一切。打磨心性，放慢脚步，“不是目标成就了你，而是你走向目标的每一步成就了你”。正确的方向是在达到目的的过程中，而非目的的达成；不是走入旅馆，而是走向旅馆；不是得到桂冠，而是追求桂冠。

——Airing

2 “你是你吃出来的”

同事在每周分享的时候，说到这样一个观点我觉得很有趣。

她说她看到一本书是《你是你吃出来的》，讲的是饮食会决定你的身体。她觉得从另一个方面来说，你输入的东西就会决定你的思想。

之前我看到一个评论说，为什么不把看书的时间用来学一项技能？

其实我在刚工作的时候，也是这样认为的，觉得看书有点“不务正业”。

但当我开始看书的时候，我发现「看书才是那个让我成长最快的途径」。它极大的改变了我的思想，而我的思想又会影响到方方面面，比如看待问题的方式、情绪、决策等。

看书确实不如直接去学技能更“务实”，但看书带来的改变会更「通用」，它潜移默化地改变了我的思考方式，这种改变经常带给我一些意料不到的结果。

——polebug

3

自己在每一个地方待的时间都也算不上太长，很多昔日故友也都在距离和各自人生际遇的改变中慢慢远去。我似乎之前总是自诩为一个念旧的人，过去的东西总是不愿意丢即使已经不断在侵占自己的生活空间，但似乎在现在这个节点重新回头看，这或许只是对过去自己的一种怀念，时间不断向前，生活也早已远去。

——pseudoyu

2024：拥抱变化

筷筷 — Mon, 20 Jan 2025 00:00:00 GMT

24 年是拥抱变化的一年，这一年，我换了 2 份工作，流浪于 3 座城市，搬了 6 次家（我是搬家小能手😅😅）。我三月从西安跳去北京工作，五月辞掉工作回家，再然后就是延毕，学习算法，面试，实习，转正，这些回忆起来就好像是昨天发生的事情一样，充满了不真实感，没想到我这一年竟然做了这么多事情。

“尽力”的一年

这一年的关键词是“尽力”，“尽力”是要把努力花在正确的方向上，督促自己不要拿努力来掩盖没有尽力的事实。我觉得做到了三分之二吧！“选择大于努力”，我认可这句话，不过我会再加一句：“选择后依然要努力”。

年初定下的目标完成了一半：我逐渐规律作息，每天能够睡够 8 小时，因为健康的活着比什么都重要；我坚持记账并合理分配我的开支，让我既能攒些钱又能够活得滋润；我学习并实践面试技巧，助力我拿到好未来、百度、字节的实习 offer；我学习专业知识，继续扩大我的技术边界，熟悉了 React、RN、Next.js、Astro 等前端框架，了解了一些前端工程化领域知识，还有设计模式、算法、计网等计算机通用知识，兴趣是最好的动力，我想我一辈子都离不开前端了吧😭；我这一年更加关注自我，向内探索自我，企图将自己内心的善恶、情绪用语言表达出来；我看了 12 本书，听了数不清的播客，有了书和播客的陪伴，就像是有了一些只能单向对话的朋友，对我来说这样刚刚好。

当然还有一些目标是没有完成的：在去到北京后，「每周锻炼 3~4 次」的目标就再也没有实现了😇😇，一是因为我的惰性，二是因为工作之余没有太多可支配的时间了😭；同样，减重这个目标也没实现，我的体重依然和上一年保持一致😄😄；因为工作而放弃的目标还有「学做 20 道菜」，如果时间充裕我会找机会再试试；「完成毕设」因为延毕所以干脆没做😋；我还没有实现「关注他人、与他人建立链接」的目标，年末和年初相比，我感觉我更加封闭了，没有体会到和他人建立链接的体验，这需要我深入思考下原因；年初定下「去日本关西旅行」的目标计划，由于延毕打乱了我的计划，所以推迟到今年再去完成！「和朋友一起玩游戏」的计划也没有完成，这一年我是自闭的鼠鼠😭，更多时间在玩独立游戏，没完成的原因除了我忽视了和他人的链接，还和我所处的环境有些关系，我大部分时间住在隔音不太好的房子里，不太好去打扰邻居；

我感觉到自己在逐渐成长，很多在上半年沉淀下来的知识和习惯，到了下半年就逐渐开花结果，带给我很强的正向反馈，我开始相信复利的力量！

在回顾 23 年的年度总结时，发现一个回旋镖，我喜欢！

2024 年有过很多第一次

今年我经历了很多人生中的第一次，我还记得第一次吃人均 400 自助时的局促和兴奋；第一次住到免费的全新公寓的幸福，和对我终于有自己独处不被打扰的空间的放松；第一次到北京时，看到破破烂烂的楼觉得也就这样的无所谓感；第一次下班 12 点回家发现停电了只能爬 27 层楼梯的死感；第一次下定决心延毕（难道还能第二次？）时的坚定；第一次去大厂时的表面平静内心激动；第一次去漫展想和喜欢的角色集邮但又不敢说话最终说服自己鼓起勇气搭话的忐忑、第一次去现场听交响乐，演奏时闭上眼仿佛置身于京吹演奏现场的感动……这些体验一生中只存在一次，我会好好记住，时常回忆。

北京很大，每个人都可以找到适合自己的圈子。我想我也会找到的！

新的一年，我希望能找到志同道合的朋友们。

一些APP的年终总结

对 2025 年的期望

往常对 25 年的规划都在春节期间进行，今年也不例外。因为我觉得在假期，才会有大把时间去思考未来的规划，并且是出于感性，更能察觉到自己真正想要什么。

在这之前，我想先确定好今年的关键词。我觉得今年的关键词是：

「链接与勇气」

我希望我链接更多的人、动物、植物，不局限在自己的一亩三分地中，而是主动积极的建立和他人、和动植物的链接；希望可以和他人有更多深刻的对话，从而更加了解自己的局限性。

我希望我能够给予自己勇气去做出改变，去链接他者。不必在意他人的目光，没人比自己还在意自己了。

AI 驱动的浏览器自动化工具 - 筷筷月报#15

筷筷 — Mon, 20 Jan 2025 00:00:00 GMT

开源动态

1 Vue.js Nation Conference 2025

简介：Vue.js Nation 是你在 Vue 生态系统中保持领先地位的终极线上活动，展示突破性的更新、工具以及来自框架创建者、Vue.js 核心团队和社区领袖的独家见解。

届时会有 Vue.js 3.6 预览版的发布，并介绍“蒸汽模式”（Vapor Mode），以及分享 Pinia Colada 等内容。

2 Rspack v1.2.0-alpha.0

Rspack v1.2 引入了一个实验性的缓存配置，支持持久化缓存，这可以显著提高热启动速度；Rspack v1.2 默认不再监视 node_modules 目录。这可以大大减少要监视的文件数量并提高性能。

3 2024 JavaScript Rising Stars

可以用来了解 2024 年 JavaScript 生态各个方向（例如前端框架、组件库）的趋势，网站记录了各个方向上 24 年获得 GitHub Star 数 Top n 的项目。

工具推荐

1 browser-use

AI 驱动的浏览器自动化工具。

Browser Use 可将 AI Agents 与浏览器进行连接。它通过为浏览器自动化提供强大而简单的界面，使 AI Agents 能够访问网站。

它有以下这些特点：

结合视觉理解 + HTML 结构提取，使网页交互更精准
多标签管理，自动管理多个浏览器标签
元素追踪，提取点击过的元素 XPaths 并重复精确的 LLM 操作，以实现一致的自动化
自定义操作，可添加自定义的操作，如保存文件、数据库处理等
自我纠正，智能错误处理和自动恢复，确保自动化工作流程的稳健性
兼容所有 LangChain LLMs，包括 GPT-4、Claude 3 和 Llama 2。

项目从 2024.11.06 至今已收获 13k+ star，是近期热门的项目：

2 Midscene

跟 browser use 一样也是 AI 驱动的浏览器自动化工具，由字节基建团队维护。

与其他同类产品相比，Midscene 的独特点是有浏览器扩展和可视化报告，浏览器扩展可以立即使用，探索时无需编写代码；通过可视化报告文件，可以轻松理解和调试整个流程。

市面上还有一些同类产品，详细对比可以看「视频.4」AI 浏览器自动化测评👏

3 Trae

字节推出的 AI IDE，对标 Cursor 和 Windsurf。

视频

1 vlog #86｜新年大扫除之后的晚间学习记录｜还在开发时间管理 APP｜读《荒原狼》《消失的多巴胺》｜在学「哲学导论」，超级有意思✌️｜尝试练习无氧的第一周

2 让编程再次伟大系列

为什么程序员都应该学用容器技术【让编程再次伟大#26】

前端技术的未来，正在回归本源【让编程再次伟大#27】

3 全站首发！别再问哪找网页灵感了，AW保姆级教程

创意工程师（Creative Engineer）必看✍，视频推荐并介绍了Awwwards的用法。

4 ⭐AI 浏览器自动化测评 | midscene VS stagehand VS shortest

近期出现很多在浏览器自动化测试领域结合 AI 的开源项目，目前还处于早期探索阶段，可以持续关注。

5 【前端路线】可能是最全最科学的前端学习路线，从入门到专业。

Showcase：前端就像一座冰山，你能看见的只是上面的一角，但是它下面涉及到的领域比你想象的要大得多。因此前端不是一天两天就能速通，也不是人工智能可以完全取代的。所以不要焦虑，现在路线已经帮你画好了，一步一个脚印总没错，希望你能找到自己感兴趣的方向并为此而努力。

可以去博主的网站 FontTalk 查看学习路线

文章

1 2024：无为而治｜polebug

polebug 的 2024 年终总结。

印象深刻的点：

去顺应自我和外界，遵从自己内心和生活带给自己的所有。去打开自己，多一个看待世界的角度，去发现生活的美好。

对事情进行及时的反思和复盘，问问自己哪里做对了？哪里做错了？哪里可以改进？不断成长。

2 AI 没有体验世界的能力｜Airing

3 2024: 在夜海中观望浪潮丨Randy Lu

播客代码之外作者之一 Randy 的 2024 年终总结。

4 我们在 2024 年了解到的关于 LLMs 的事情（英）

作者对过去十二个月里 LLMs 领域相关重大事件的回顾，以及对关键主题和重要时刻的梳理。

5 每个开发者都应该了解的关于离线优先应用程序的知识（英）

离线优先应用将离线状态视为默认状态，而将在线连接视为一种增强功能。这与传统的网络开发模式完全相反，在传统模式中，我们假定网络连接始终可用，并将离线状态视为错误情况。

在项目初期，就应考虑应用是否以离线优先。那么在哪些场景下比较适合离线优先应用呢，文章给出以下场景：

用户经常遇到连接变化的移动应用程序
数据丢失不可接受的专业工具
针对互联网基础设施不可靠地区的应用程序
渐进式网络应用程序（PWA）旨在提供类似原生应用的体验
任何用户生产力不应依赖网络状态的应用程序（例如 excalidraw）

6 产品管理出问题了，工程师可以解决这个问题。（英）

PostHog 公司重新定义了产品经理（PM）与工程师的合作方式，强调工程师应是「产品工程师」，在产品决策中具有主导地位，而产品经理提供背景支持，提升团队的迭代速度和自主性，充分发挥工程师的创造力和责任感。

这篇文章是对产品经理（PM）与工程师合作方式的探索性分享与实践案例分析。

7 哔哩哔哩技术丨新活动平台建设历程与架构演进

本文介绍 B 站构建活动页的低代码架构建设和演进，讲述了在整个开发过程中的设计理念、建设规划和架构思考。通过分阶段渐进式迭代，最终完成了整个架构的升级。

播客

最近听了很多 AI 相关的播客、文章。总结下，25 年将是 AI 持续发力的一年，随着 AI 的发展，Cursor 和 Devin 等 Coding-Agent 会越来越好用，前端的开发范式也会持续改变，未来属于那些拥抱 AI 和持续学习的人。

1 代码之外 | 2024 年终总结

2 硬地骇客丨对话 Saga：20 万字文档让 ChatGPT 开发出翻译产品，实现200%按月增长

这期节目我们邀请到 Saga，聊聊他如何从追漫的痛苦经历中获得 idea，最终利用 AI 技术开发出超酷的漫画翻译工具: aimangatranslator！从手写 20 万字的需求文档到克服技术难题，从产品迭代到用户反馈，Saga 将毫无保留地分享他的创业历程和宝贵经验。他还分享了 AI 工具对产品经理和程序员的影响，以及如何利用 AI 写作技巧提升内容质量。干货满满。

印象深刻的点：

Saga 是产品经理，他主要借助 AI 编写代码，完成产品迭代。借助 AI 和 SEO，编写用户故事、产品体验分享、产品推荐文章等，引流和推荐自家的产品。这还只是他的副业。在 AI 时代，有想法就可以做出应用。

3 此话当真丨与 Koji 的 2025 开年对谈：AI 关键之年，Agent 开启元年

4 ⭐此话当真丨Coding-Agent 进化论：深度对话中美 Agent 创业者、阿里研究员和投资人

5 代码时光机丨世界的算法定义我们的活法

6 WebWorker丨和几位主播总结播客和自己的2024

7 42章经丨为什么我们对 25 年 AI 极度乐观丨AI 年终复盘

8 硅谷101丨“没有AI我会难受至极”：与大学生聊聊智能工具的依赖与适应

AI 的普及正在从生产工具延伸到生活每个角落，甚至重塑人与工具的关系。

9 硬地骇客丨Podwise App 上线啦！从网页到App，我们都经历了什么？

句子

1

迷茫的时候多看书，准没错。

——不知道谁说的，就鲁迅吧

2

没有正确的选择和错误的选择，你要尝试把你的选择变得正确。

——鲁迅（嗯）

12月复盘丨开始写日记丨软木板丨书丨漫展和对孤独的思考丨番剧和游戏 - 筷筷月报#14

筷筷 — Sun, 29 Dec 2024 00:00:00 GMT

好久不见各位👋👋，这是我尝试月报形式的第一期，我将一部分复盘的内容放在了月报中，希望能带给大家一些新的角度✨

12月复盘

1 每天花 5 分钟去写日记

这个月从 7 号开始，保持了每天写日记的习惯。因为遵守了易执行的准则，我写起来没有负担，有时候时间多就会更加详细的记录些当天发生的事情或者自己的感受、思考。

把事情记下来，能在未来回忆往昔的时候，好有个参照；也能够知晓当时我的所思所想。

2 想买个软木板，做一些记录

在看 polebug 的 vlog 时，发现她有一个羊毛毡板子，上面挂上了她之前的机票、拍立得、2024年给自己的信等。通过某一个物品就能触发当时所经历的回忆，这种感觉真美好。

我也准备买一个挂在自己的小屋里🥺🥺，将我的回忆通过这样的方式进行展示。

3 这个月看的书

今年定了看完 10 本书的目标，到12月初还差最后两本，于是这个月有意识地在看书这方面加大了力度。

这个月看完了藤本树的《再见绘梨》和《慕然回首》、以及瓦内莎 · 斯普林格拉的《同意》，完成了我的年度计划👌。这个月正在看《卓有成效的工程师》。

《再见绘梨》和《慕然回首》是藤本树的两篇短篇漫画，都具有「一抹奇幻色彩」。看完《再见绘梨》，让我分不清到底哪里是电影，哪里是现实，又或者整本漫画就是一部电影？我没有去细究这部分，而是尝试去体验这种真真假假、假假真真的感觉。我觉得我找到了其想表达的核心主旨：「你已经能够自己决定要怎样回忆起一个人了。这其实是一件非常厉害的事」。看完《慕然回首》，描述了两位女孩围绕漫画展开的女性友谊，我恨我极低的情绪感知能力，只能很微弱的体会到她们之间细腻的情绪，我想再去看看电影版。

《同意》则是一本充满创伤、痊愈与勇气的书。「文学视自己凌驾于一切社会道德评判之上，但作为出版人，我们有义务让读者明白，成年人和未达到性同意年龄的未成年人发生性关系应当受到谴责，也会遭到法律的惩罚」。

4 月底去了漫展玩，对孤独的思考

这次去成功把无料都发完了👏👏👏，看着老师们高兴的眼神好幸福！一开始到场馆我还是不适应，缺少上前集邮的「勇气」，特别是他们都成群结伴的，我也不好上去打招呼。之后能紧握双拳，鼓起勇气上去集邮真是太好了。

我发觉大多数人都成群结伴，或是一对情侣一起，而我孤身一人。在那时，我最直接的感受到了孤独的负面影响，没人去分享我的见闻，没人和我一起聊天，我置身于场馆之中，人满为患，但我依然孤独。

于是我开始思考，我发现我缺少「链接」，和世界的链接，和人的链接，和植物动物的链接。人作为社会中的人，只有在与他人的关系中才能体会到孤独，若完全脱离人际关系，就不会有孤独感。但人是社会性的动物，不可能脱离链接。《被讨厌的勇气》中说到「人的一切烦恼，皆源于人际关系」，我是不是因为不想烦恼，于是潜意识地断开和人的链接了呢？

我暂时得不出答案。我开始分析现状，首先我的分享欲不高，很少和别人分享；其次是我不喜欢别人突然来找我，如果我正在做一件事情突然有人来想和我开启一段对话，我虽然会接受，但我内心是烦躁的，会觉得为什么要来打断我；最后，我享受孤独的时间大于孤独的副作用，这是我不想改变的原因之一，因为走出舒适圈是痛苦的。

我该有「勇气」去做出改变，去「链接」更多的人。我太闭塞了，应多去听听别人的想法，和别人的观点进行碰撞。

5 这个月玩的游戏、看的番剧

这个月初听说新见雅要出了，于是把绝区零下回来玩了两天，之后实在没有时间玩还是卸载了😇。月初无限暖暖开服了，女鹅确实很可爱捏🥰🥰，玩到后面基本不看剧情了，有些低幼😅😅。要专注于搭配更好看的衣服、拍好看的照片！

日常玩方舟，做做日常，MAA立大功。这个月开了剧情跟着杨颜看完了~

继续看胆大党、地、蓝箱；补Clannad。这个季度好多番都分割放送啊。

玩了米塔，非常好游戏，使我半夜不敢上厕所。

开源动态

1 State of JS 2024 调查结果发布

Vite 和 Vitest 和上一年一样仍然在各大排行榜中高居榜首，引领着一代更新、更简单的工具发展。参与统计的从业者在性别中的差距依然很大，男性占据92%。以下是今天的大奖得主🎉，来看看是谁：

采用最多的技术：Vite 就像它的名字那样，Vite 继续以创纪录的速度增长，使用率逐年增加+30%！
最高满意度：Vitest Vitest 占据首位，98%的开发人员愿意再次使用它！
最受关注：Rolldown 在 Vite 生态系统中，今年 Rolldown 是开发人员最感兴趣的技术，关注比例为86%。
提及更多：Analog 颁发给受访者提及最多的项目。
被评论最多的工具库：Angular Angular 可能不是最新的产品，但它仍然是城中的热门话题，受访者对它的评价 41 ！
最受喜爱的库：Vite 在所有开发人员中，有 56% 的人对其持肯定态度，因此 Vite 再次荣获最受喜爱技术奖！

2 Rspack 和 Vant 被注入恶意代码

受影响的版本包括 @rspack/core和@rspack/cli v1.1.7版本，以及 Vant 组件库的多个版本，具体影响版本可点击查看。

攻击者盗取了 npm 令牌发布了新版本，其中包含恶意代码。

恶意代码的影响：在 npm install 之后， package.json 中的 postinstall 脚本在 dist/util/support.js 中运行恶意代码。目前字节基建团队正在分析恶意代码的全部影响。

3 Rolldown v1.0.0-beta.1

Vite 未来版本使用的底层打包器（Bundler）发布了 1.0.0 的 beta 版本。

工具推荐

1 postspark.app

一个在线截图美化工具，可以配置和导出截屏、代码片段、GitHub的热力图。

视频

1 补充能量系列

vlog #83 | 程序员下班后的日常学习记录｜React+Electron 学习中｜从《吸引力法则》中获得了许多启发和能量😄｜TED｜保持学习、思考与观察

vlog #84｜程序员下班后的学习记录｜冬天宅家学习超快乐｜React 上手中｜读完《吸引力法则》啦撒花 🎉｜保持学习与思考｜什么才是成功的人生｜TED

vlog #85｜做24年度复盘的晚间学习记录｜一起给25年的自己写一封信 🎉｜开坑「哲学导论」和《荒原狼》｜仍然在为时间管理 APP 努力｜保持输入与输出

又到了看 polebug 的时间啦！看到她把发财树养的这么好，我也准备买一个放工位养着了😄

2 现代前端开发必知系列完结

【现代前端开发必知15】可观测性是什么？

构建了一个前端监控、埋点、追踪、度量的大体框架。

【现代前端开发必知16】总结篇 | 我心目中的前端大厦

3 ESLint 通用配置方案：化繁为简 - Anthony Fu

Vue Vite 和 Nuxt 核心团队成员 Anthony Fu 给大家带来了《ESLint 通用配置方案：化繁为简》的演讲。

演讲聚焦于 ESLint 9 的全新默认特性 ——Flat config（扁平化配置），深入探讨了其如何实现一系列饶有趣味且能显著提升效率的功能与应用。

文章

1 别被”5分钟写个App”误导：Cursor深度实践

2 13个对前端开发者有用的 Chrome 插件

播客

1 代码时光机丨当一位哲学硕士入职鹅厂四年后决定再次成为独立开发者

这期播客邀请到了 Airing 谈谈他的编程之路，上期分享过的AI 心理疗愈应用的探索与实现就是 Airing 写的~

2 硬地骇客丨对话吉光卡片作者张小吉：“月薪和糖一样，都是需要戒断的”

大家好，我们邀请到了一位非常特别的嘉宾——小吉，他从设计师转型到程序员，现在又成为了一位成功的独立开发者！本期节目我们和小吉一起探索他精彩的职业转型之路，听他分享从设计到编程，再到开发出爆款产品“吉光卡片”的奇妙旅程。我们会深入了解吉光卡片的诞生过程、产品营销策略、定价策略，甚至还有 build in public 的心路历程和反思。精彩内容不容错过。

3 西西弗高速丨油的问题，卫生巾的问题，都很成问题〡Newsletter

这一期我们的主题是，今年引起广泛讨论的两个公共卫生安全事件：年中罐车运输乱象——卸完煤制油不洗罐直接装运食用油。以及最近热议的卫生巾质量问题——从长度、PH值到生产标准大讨论。相比信息科普，我们会聚焦于一些背后的思考。

关于“油罐车调查报道”，我们分享了一些了解到的信息，为什么报道只写了两辆车？为什么记者没有点名金龙鱼？以及调查新闻出来之后，为什么舆论总是会将矛头指向媒体？我们也回顾了中国重大食品安全事故调查，比如2008年三鹿奶粉事件。关于“卫生巾”的问题，我们讨论了卫生巾议题这几年是如何在舆论场从不可见变得可见的？既然事关一半人的权益，为什么没人重视她？在2024年，卫生巾出现在电影里、女性脱口秀演员的表演里、奥运会女运动员的采访里；也曾在2022年成为“高铁要不要卖卫生巾”的全民热议，再之前的2020年，卫生巾曾是疫情中被忽视的一线女性医护人员的需求，卫生巾根本上是人的问题，是人的真实处境的象征。

4 WebWorker丨活到老学到老——和26年程序员老兵汪志成聊AI，个人成长和终身学习

本期我们邀请到了一位非常资深的程序员，他在程序员领域做了很多贡献，他是一位26年经验的程序员老兵、资深架构师、技术专家。他就是angular的文档翻译者，也是《rust程序设计》的译者汪志成。这期节目我们和汪老师一起学习angular，文档翻译，个人成长和持续学习。也可以从一位最早在中关村的程序员的描述中窥视到互联网的变化。

句子

1

优太，你已经能够自己决定要怎样回忆起一个人了。

这其实是一件非常厉害的事。

——《再见绘梨》

2

在人生的体验中，我充满能量，不知疲倦，一直前进，没有任何抵抗。

——《吸引力法则》

3 如何快速完成专注力的上下文切换

在一天内做很多事情对许多人来说很难，当然我也不例外～

今年我一直在尝试不同的方式，来提升自己上下文切换的效率。

首先需要清楚，为什么切换做不同的事情是很困难的呢？我觉得主要是以下两点：

1️⃣ 专注力的“残留效应”

当我们完成一项任务时，脑海中往往还残留着未完成的思路或情绪，这种残留效应会让我们难以立刻转移注意力到下一件事上。

2️⃣ 大脑的多巴胺奖励机制

完成一项任务可能让人感觉疲惫或紧绷，大脑开始寻找短暂的“奖励机制”，于是我们开始刷社交媒体、短视频等等，而这种高刺激的娱乐会让大脑习惯于追求短期快感，从而让注意力难以回到相对“枯燥”的任务中。

分享一些我觉得有效的方式，这些方式可以帮助我放下手机，从漫无目的的状态中解放出来。

方式1️⃣：放空大脑 3-5 分钟

在一项任务结束之后，可以去洗个澡，或者喝个水，看看风景。让大脑放空几分钟。

在这几分钟内，大脑会清空上个任务的思绪，并自动地开始为接下来的事情做规划。

方式2️⃣：借助 TODO List 理清头绪并提高正反馈

在事情开始前，可以写好待办事项；在结束之后，也可以做简单的回顾，并规划接下来该做什么，让大脑享受完成任务的正反馈。

——polebug

4 “快乐的感受才是成功” - 对于成功人生的思考

我其实一直在思考：“什么样的人生才是成功？”

以前我的答案是：

“实现了我的理想，并且拥有幸福的生活，还有健康的身体。”

但我读到《吸引力法则》的这段话时，我对成功人生的观念好像又变了些。

它说：

「成功指的是一直怀有梦想，并在发展中一直感受到积极的状态。人生成功的标准不是金钱或物质——成功的标准完全取决于你感受到多少快乐。」

「成功就是快乐地去生活，而快乐的生活意味着一连串快乐的时刻。但大多数人都没有顺应快乐的时刻，因为他们忙于追求快乐的生活。」

看到这段话的时候，我意识到，“实现理想”、“幸福生活”、“健康”，它们本质还是「追求快乐」。

真正的成功，是能够在追求目标的过程中找到快乐的源泉，并享受每一个快乐的时刻。

「尽情去享受，尽量不要去修正；尽情去欢笑，尽量不要哭泣；多一些积极的期盼，少一些消极的期盼。没有什么比感觉良好更重要的事情。」

真好❤️

——polebug

筷筷小报#13 - 小报休刊！闭门迭代😇

筷筷 — Sun, 08 Dec 2024 00:00:00 GMT

写在开头✨

目前筷筷小报已经出了13期了（啪唧啪唧啪唧👏），这两天在进行复盘时发现我看了很多内容，但对内容的了解都是浅尝辄止，没有深度，这对于提升我的前端素养帮助并不大。

于是我决定放缓筷筷小报的更新频次，之后改为筷筷月报。同时我决定新开一个系列：我想分出更多的时间去产出一些更有深度的前端专题内容，暂定为两个月一期。我会去熟悉一个前端领域的小方向，并通过产出结构化内容和 Demo 的形式来加深我的印象。

我希望能带给大家更多有价值的内容，而不只是一个 Newsletter。

开源动态

1 Astro 5.0

Astro 5.0 正式版已推出！

发布亮点包括：

2 React v19

在 React18 发布两年半之后，React19 稳定版发布了。目前很多博主都有在讲解新特性，大家可以去找一篇了解。

工具推荐

1 react-scan

扫描 React 性能问题并消除应用中的缓慢渲染。通过直接在页面展现渲染次数和时间，可以发现应用中过度重渲染和慢渲染的组件。官网的Demo直观的展示了核心功能：

如果想方便的在生产环境进行监控，可以使用其提供的React Scan Monitoring。

视频

1vlog#82｜程序员下班后的日常学习记录｜11月复盘｜在学 React+Electron｜在读《吸引力法则》｜TED与日常英语学习｜24年的最后一个月加油

看 polebug 的视频，总让我觉得「她好厉害，想成为她那样的人」。

2 Rust和Linux之争，到底在争什么？【让编程再次伟大#24】

本期视频讲讲 Rust 和 Linux 在争什么？为什么要争？以及哪边更有理？

3 【现代前端开发必知14】利用云基础设施加速前端开发

本期我们从网络服务（Network）、计算服务（Compute）、存储服务（Storage）和安全服务（Security）四个方面介绍前端如何通过云基础设施加速应用开发。

文章

1 AI 心理疗愈应用的探索与实现

这篇网页主要介绍了 MoFlow 这款 AI 心理疗愈应用，包括其设计理念、功能特点、隐私保护和未来规划，旨在帮助用户实现自我疗愈，获得内心的安宁与平静。

MoFlow 将自我疗愈的过程拆解为了四个维度，构成其设计理念，围绕着这套理论结构，MoFlow 探索并设计了一系列的产品功能：

表达：以表达性写作为载体，如日记、周记等，帮助用户自我反思、觉察情绪、理解自我，是解决问题和实现自我疗愈的起点。
宣泄：通过自由书写释放情绪，激活感受力，觉察自身情绪，这是情绪自我修复的机制，也是叙事疗法的手段。
理解：在自由书写中识别核心情绪，提高情绪粒度，为情绪贴标签，将其转化为可处理的信息，但要避免过于理性化而忽视情绪自然流动。
接收：强调让情绪自然发生，平衡内心平和与情绪积极作用，接纳自我和当下，避免过度控制或压抑情绪。
探索：通过一系列产品功能探索心理疗愈场景，辅助用户进行情绪管理和自我成长。

2 Deno v. Oracle: Canceling the JavaScript Trademark

Deno 正式向美国专利商标局提交了一份请愿书，要求撤销 Oracle 对“JavaScript”的商标。这标志着朝着将“JavaScript”从法律纠纷中解放出来并将其视为共享公共物品迈出了关键一步。

大家可以通过签署这封信来支持此次请愿。完整的请愿书可在此处获取，并且基于三个主张：

主张 1：JavaScript 是通用的

主张 2：甲骨文公司实施了欺诈行为

主张 3：该商标已被放弃

播客

1 Web Worker丨No.66 和 Follow 团队聊 RSS 产品设计、技术选型、个人成长

最近有个 RSS 产品叫 Follow 非常火，主播辛宝和小白菜都是忠实用户，我们也对 Follow 非常好奇，2024 年里为什么开始做 RSS 产品了？ Follow 是怎么规划设计、产品开发、产品运营的，他有什么新想法？

带着这些疑问，我们邀请到了重量级嘉宾 Follow App 团队成员和大家了聊一聊产品背后一些有趣的故事，以及在这个信息大爆炸的时代产品的发展之路在哪里。在节目中你可以听到 Follow App 背后的原理，可以听到为什么要选择这个技术来实现，可以听到如何参与开源协作。

2 EP85 借 “字节的AI训练被攻击” 聊聊职场违法那些事

大家好！这次我们要聊一个引人深思的事件——字节跳动大模型训练被实习生入侵！😱是不是很震惊？节目内容从攻击是如何瞒天过海到事件的后续影响，以及由此引发的对教育、企业风控，甚至整个程序员行业的反思。我们还分析了类似的案例，比如阿里的“月饼事件”和齐安信猎头案，希望能给大家带来一些启发和警醒。

播客发布不久，就有消息爆出田柯宇获得了 NeurIPS 2024 的最佳论文奖。更巧的是，这篇获奖论文，恰恰就是他在字节商业化技术部门实习期间与团队合作发表的🤣。

句子

1 学会关注你的感受，追随内在的喜悦

「认识到自身情绪的价值，然后有意识地努力产生各种想法，从而导致良好的情绪产生，这才是真正地自主创造。」

在《吸引力法则》中有一个很重要地观点就是“学会关注你的感受”，因为情绪是一个指示器，它会让你知道是否在顺应自己与本我建立的链接，当你顺应这种链接时，你会感觉良好，反之则会感觉糟糕。

情绪也是一种导航系统，「一旦你主动选择了某个想法，并有意识地觉察到自己的感受变得更好，你就成功地利用了自己的导航系统。现在你就可以迈向你渴望并且应得的自由」。

我们对情绪并非被动接受，而是可以通过调整思维模式来主动引导感受，例如，当遇到挫折时，你可以选择专注于问题的解决方案，而不是沉溺于问题本身带来的消极感受。这样的选择会让情绪变得更积极，从而带动你采取更有建设性的行动。

——polebug

2 就算再忙，每天也要花10分钟确认自己的心情

每天花10分钟写日记，被我视为一天中最重要的事情（没有之一）。回顾一下今天发生的一切，并确认自己的心情和状态，这看似微不足道的事，却让我获得了内心的平静。

与自己对话 => 了解自己的内在需求 => 情绪变得可控

这是一个非常积极的循环。写日记的这10分钟，足够深入地与自己对话，挖掘内心矛盾的情绪、莫名的焦虑，又或者是一闪而过的喜悦。

日复一日的自我对话，让我愈发了解自己的内心需求，以及我的情绪是如何产生了，我为什么会这样那样。

而当我对情绪的来源了如指掌时，我也变得能够控制它，可以在生气的时候快速消化，或是在遇到挫折感到气馁时，将它们转化为我前进的动力。

今年其实遇到了很多挑战，而我在日记中一遍遍梳理它们，又一遍遍复盘和激励自己，从中收获了很多。

筷筷小报#12 - 快来一起参加 State of JS 2024！

筷筷 — Fri, 29 Nov 2024 00:00:00 GMT

开源动态

1 State of JavaScript 2024 调研启动

快来参加 JS 现状调查 😇

顺便附上 2023 年的调研分析。

2 Vite 6.0 发布

这里还有一个迁移指南助你从v5迁移到v6。

3 Ant Design X1.0 发布

Ant Design X 是 Ant Design 的全新 AGI 组件库，旨在帮助开发者更轻松地研发 AI 产品用户界面。Ant Design X 将在 Ant Design 的基础之上进一步拓展 AI 产品的设计规范，为开发者提供更强大的工具和资源。

AntD X 可以用来快速搭建 AI Chat 交互界面，下图是一些效果展示：

4 ReactRouter 7.0 发布

谢谢你们为前端开源生态做出的贡献，学不过来了😇

工具推荐

1 Moodist

用于专注和放松的可定制化白噪音平台。

视频

1 程序员在清迈旅远程办公的一周｜在清迈的每一天都很惊喜很快乐很有能量，下次还来！！

景好音乐好，看着很舒心🥺🥺目前我正在转正流程中，希望可以转正成功！🙏🙏

2 【现代前端开发必知12】前端的质量和安全怎么建设

本期我们从编码质量，测试，攻击防御和稳定性四个方面简单介绍前端的质量和安全性应该怎么去建设。

3 【新手向】当我们谈论服务可用性时，我们在说什么】

可以作为了解服务可用性的一个科普视频。

4 口头交流是程序员的效率杀手【让编程再次伟大#23】

好在我当前实习期间会议比较少，能空出很多完整时间去写代码。这让我在写代码时思路更加顺畅，效率更高。不过关于如何高效和别人沟通，我还有很多需要学习的地方🥺🥺

5 程序员下班之后的日常学习记录｜放弃了 Swift 转投 Electron + React｜快乐地学习前端中｜在看《吸引力法则》…

视频末尾的观点很戳我，这也是我喜欢看她的原因之一：”拍学习 Vlog 是在跟现在的自己以及未来的自己对话。因为我偶尔会把自己以前的视频拿出来看看，把自己过去的状态和现在的状态进行对比。如果我当下的状态不太好，看到以前的那个我能量可以这么高，这样会激励到我自己，让我相信自己可以调整过来。当我现在状态比过去更好的时候，我就会对自己感到十分的满意，然后希望自己再接再厉吧。“

她通过跟现在的自己和未来的自己对话，获取能量。我通过听过去的她分享观点或是隔空对话来获取能量。

6 【现代前端开发必知13】持续集成和部署

介绍持续集成（CI）的主要流程、流水线编排、门禁安全策略的使用。持续部署（CD）中的部署环境划分、分发渠道、灰度发布以及回滚。最后是常用的 CI/CD 工具。

文章

1 让AI替代50%的工作系列专栏

Kaiyi 出的 AI 提效系列小册，分享如何使用 AI 提升工作效率。

2 React Is Holding Me Hostage

吐槽 React 做的不好的地方。

3 B站众测模式的探索

介绍了B站 ToC 众测的实现。

播客

1 硬地骇客｜EP84 从何同学的“翻车”，聊到AI的版权问题

本期节目从何同学的“翻车”聊到AI时代版权的挑战，从开源协议的未来聊到程序员的未来。大V的光环背后有什么样的压力？AI时代代码版权到底怎么算？未来的编程会变成什么样，代码版权是否还重要？欢迎收听～

2 异见房间丨马是男人的，《好东西》是全人类的

最近特别火的高分电影《好东西》你们看了吗？我觉得她们在餐桌聚餐的那几场演出效果特别棒：小马和前夫的雄竞，对于月经羞耻的探讨，还有「你看过几本上野千鹤子」以及「女权表演艺术家」😄😄太戳我了。以及小叶让小孩听声音的那段蒙太奇，很巧妙的暴露出了被忽视的女性家务劳动现象。

以下是 showcase 片段：

《好东西》拍出了一个让人向往的明亮的世界，一个新世界。这部电影也不仅仅是只关于性别，更关乎小孩应该成长为什么样的人，我们应该为小孩创造一个怎样的世界。

一个更好的世界不是某一个性别压制另一个性别的世界，是和平，有希望，弱者能够舒展地生存和生活，孩子能够正直勇敢有阅读量的世界。还记得铁梅背着小孩路过的上海街头吗？有群人在唱《明天会更好》，2022年上海封城刚解封后，有人自发在街上唱这首歌。明天会更好，《好东西》重燃了我们做事和生活的希望，它对我们就是这么重要。

句子

1 我们的生活取决于想象力

之前看动漫「葬送的芙莉莲」，里面说到「魔法是基于想象力的世界」，这句话让我感触很深，想象力在魔法世界是创造力和改变的核心，你的想象力有多强，在魔法世界就有多强。

反观现实世界，其实也是如此。你会以什么样的方式工作、生活，又或者是，应该如何运用已有的资源。

归根结底，取决于你的想象力。

如果一直不输入，不思考，就很容易陷入单一的生活模式，无法想象到更多的可能性。

如何增加想象力？

我目前认为有两种方式，一是多了解别人的生活模式，可以通过旅行或者互联网观察到他人的做法，模仿和借鉴是最快的学习方式。

二是主动学习、阅读，但在输入之后，需要把看到的内容进行消化和联想，保持思考，将自己的生活和学到的东西进行结合。

——polebug23

2

当我们把价值和工作忙挂钩，而不是和生产力挂钩时，我们更关心这个人是不是在努力工作，而不是这些努力会产生什么样的结果。

——polebug23｜TED - Does working hard really make you a good person?

进展

随便记下每周计划的进展

正在看的📖：《同意》、《再见绘梨》

正在学习：Nextjs 小册、前端一些领域扫盲

正在看的番剧：《蓝箱》、《胆大党》、《夏目友人帐》、《Re0》、《地》、补《Clannad》

日常TODO：每日一道算法，每日一道多领国、渐进式规律作息直到11点半睡7点半起

筷筷小报#11 - 小报当然得小

筷筷 — Fri, 15 Nov 2024 00:00:00 GMT

工具推荐

1 一站式 iframe 生成器

一个 Iframe 可视化配置工具。支持多设备预览、企业级安全控制、完整样式定制、配置管理等专业功能，从基础样式到高级安全设置，一站式解决所有嵌入需求。

视频

1 【罗肖尼】如何永远学会一个单词？

讲述关于英语学习的正确姿势，这位UP主干货很多，仅发布4个视频就有37w关注，可以把他关于英语如何学习的视频都看下，相信你一定有收获。

2 Lofi Girl 络菲｜Gentle Rain 滴答滴，滴答滴💧原来是下雨天啊🌧️「学习/睡觉/放松/络菲小剧场」｜Lo-Fi低保真

我写代码时候的BGM，能让我快速进入心流，效率增加，推荐大家都试试😄👍。

3 先把软件做出来，其余都是浮云【让编程再次伟大#22】

没错又是让编程再次伟大系列别说怎么总是这些我已经深刻认识到了每周的时间是有限的我为了水字数保持更新频率不过分吧更何况确实是有干货的🥺

视频提到软件开发围绕三个关键词：

Make it Work 把它做出来

Make it Right 把它做对

Make it Fast 把它做快

它们的先后顺序揭示了软件开发最重要的原则，视频中将这三个关键词和马斯洛需求理论类比也很贴切。

我在筷筷小报#8也提到了，软件开发最重要的事情就是先让它跑起来。

4 一次管饱！！网页滑动跟随效果的👌三种方案👌

用到了 IntersectionObserver 来监视对应DOM元素是否进入了视口。

文章

1 The Interactive Guide to Rendering in React

一篇讲解 React 渲染心智模型的交互式指南。看完后，你会从宏观角度了解 React 的渲染机制，以及对 v=f(s) 这套心智模型的理解😇👍。

播客

1 硬地骇客丨对话侯璐瑶：AI时代的大数据平台正在如何发展？衰落还是机遇？

今天我们邀请到侯总，跟我们一起聊聊AI和大数据的那些事儿！从炙手可热的AI新名词到数据平台的未来发展趋势，从企业如何务实地应用AI到数据从业者面临的机遇和挑战，干货满满！我们还深入探讨数据中台的反思、AI如何赋能数据平台，看AI与大数据的碰撞！（我是复读机😇）

反思数据中台：随着中台热度渐渐淡化和客户成熟度的提高，大家对数据中台都有一个合理的预期了。中台并不能解决所有问题，它的定位更像支撑上层应用的平台或者汇总数据、业务的平台。

句子

1

看见别人努力的身影，自己也会不禁努力。 ——猪股大喜

2

决策层、领导层、执行层看待事物的角度和侧重点是不一样的。所需要能力的比重也是不一样的（决策能力、管理能力、技术能力）。 ——我不成熟的思考

3

像人们通常会做的那样，一个人死了，其他人用一些时间来回忆他，并期待能为他活着，除此之外，没有更合适的说辞。——《一个人消失在世上》

筷筷小报#10 - 想不出标题这被子就这样吧

筷筷 — Fri, 08 Nov 2024 00:00:00 GMT

开源动态

1 WebAV

WebAV 是基于 WebCodecs 构建的 SDK，用于在 Web 平台上创建/编辑视频文件。

「WebAV SDK（Web 视频编辑）V1 发布」、纯 Web 视频剪辑等系列文章介绍了 WebAV 的功能和与 Web 音视频有关的功能和使用场景。

通过 WebAV SDK，开发者可以在不依赖原生应用的情况下，在浏览器中直接实现视频的创建、编辑、剪切、合成等功能。这一切都得益于 WebCodecs 的底层支持和贡献者们的持续付出，使得视频编解码的操作可以高效地在客户端进行。

2 Faker

用于在浏览器和 node.js 中生成大量虚假数据。

工具推荐

1 Follow

Follow 已开启beta测试，无需激活码即可体验。如果需要激活码解锁完整功能，可以评论留言～

在 Follow 上通过 RSS 关注你喜欢的网站、博客、社交媒体账号、播客和通知，由你自己掌握信息源的输入。它旨在成为一个现代化、快速和方便的综合信息中心。

2 NPM Chart

搜索一个包以查看其随时间的下载统计信息——该工具允许通过选择颜色主题、每月或每周视图以及起始日期来自定义数据。可以下载为 SVG 或 PNG 或作为直接链接分享。

视频

1 错误的错误处理方法【让编程再次伟大#21】

探讨不同程序员、不同语言对错误的处理机制。

2 vlog #79｜程序员远程办公的一天｜复盘这一年远程办公的节奏｜1024 BUG 💥

远程办公好处之一也许是对生活的掌控感。

3 【现代前端开发必知11】前端要掌握的服务端技术栈，这期视频讲清楚

本期解释了前端引入服务端的必要性，以及从运行时，基础框架，应用框架和应用架构四个维度介绍了服务端的构成。

当然，上述服务端指的是前端视角下的服务端，它只是服务端领域的冰山一角，离真正的后端还有很大距离。

文章

1 现在的AI真正给我带来了什么

作者从自身的视角，探讨了AI 给作者、和作者看到的真实的人，所带来的真正改变。改变分为三个方面：1 知识获取；2 编码门槛；3 人的情感需求。

2 How streaming LLM APIs work

文章探索大模型提供商的 API 是如何使用流式传输进行工作的。核心是使用服务器发送事件 (SSE)。

3 探索LLM推理全阶段的JSON格式输出限制方法

文章详细讨论了如何确保大型语言模型（LLMs）输出结构化的JSON格式，这对于提高数据处理的自动化程度和系统的互操作性至关重要。

文章从LLM推理的前、中、后三个阶段探索了限制输出JSON格式的方法：

推理“前”：Prompt Engineering
推理“中”：基于动态限制解码实现100%输出JSON
推理“后”：校正JSON结构以提高JSON输出的概率

前、中、后三阶段方法总结：

4 Follow —— 信息获取的另一种形态

Follow 通过优化信息呈现和用户体验，解决了信息获取与浏览的问题，帮助作者建立了一个自我掌控的信息源，减少了信息噪声。它还提供了社交功能，记录订阅源的关注与阅读数据，以及让用户可以关注他人的信息源，形成新的信息分享与获取方式。

5 你的object可能没别人的快/小

本文深入探讨了 JavaScript 对象在 V8 引擎中的内存管理和优化策略，特别是在处理大规模数据时可能出现的性能和内存问题。

文中指出 V8 对于 JavaScript 对象具有两种访问模式：FastMode 和 Dictionary Mode，分别对应快对象和慢对象。

播客

1 硬地骇客丨EP82 两万粉丝的播客能有多赚钱？我们来告诉你

这期播主们首先分享了做博客到现在的整体收益，属于是挣个咖啡钱。之后分享关于播客创作的干货，从设备选择、音频剪辑到内容策划、推广策略等等。此外，还探讨了AI工具在播客制作中的应用，以及对未来发展方向的一些思考。

句子

1

不要学习英语；要用英语去学习你喜欢的东西。 —— Allioyee

浏览器渲染原理

筷筷 — Wed, 06 Nov 2024 00:00:00 GMT

一什么是渲染

将 HTML 字符串通过一连串的规则得到像素信息。

二渲染流水线

整体框架：

2.0 渲染时间点

当浏览器的网络线程收到 HTML 文档后，会产生一个渲染任务，并将其传递给渲染主线程的消息队列。

在[[事件循环]]机制的作用下，渲染主线程取出消息队列中的渲染任务，开启渲染流程。

2.1 解析 HTML - Parse HTML

将 HTML 进行解析，生成 DOM 树、CSSOM 树。

2.1.1 解析 HTML 生成 DOM 树

从上到下解析 HTML 文档，遇到 CSS 解析 CSS，遇到 JS 根据规则执行 JS。

2.1.2 解析 CSS 生成 CSSOM 树

StyleSheetList 存储当前页面所有样式表的集合，样式表分为：

<Style> 内部样式表
<Link ...> 外部样式表
<div style="..." 行内样式表
浏览器默认样式表

2.1.3 重要细节

1️⃣HTML 解析过程中遇到 CSS 代码怎么办？

为了提高解析效率，浏览器会启动一个预下载线程，快速浏览，预解析 CSS。CSSOM 的生成还是需要依靠渲染主线程。

如果主线程解析到 Link 位置，此时外部的 CSS 还没有下载、预解析好，主线程不会等待，继续解析后续的 HTML。因为下载和预解析 CSS 的工作是在预下载线程进行的，不会阻塞 HTML 解析。

2️⃣HTML 解析过程中遇到 JS 代码怎么办？

判断 <script>的属性中是否包含async或defer，根据不同的规则进行解析：

如果没有以上两个属性，渲染主线程解析 HTML 时遇到 JS 则会阻塞，必须暂停⼀切⾏为，等待下载并执⾏完脚本后才能继续解析 HTML。

JS 代码的执行过程可能会修改当前的 DOM 树，所以 DOM 树会暂停。

2.2 样式计算 - Recalculate Style

将 DOM 树和 CSSOM 树进行样式计算，得到每个节点最终的计算样式，生成一颗带样式的 DOM 树，即渲染树。

主线程会遍历得到的 DOM 树，依次为树中的每个节点计算出它最终的样式。

在这一过程中，预设值会变成绝对值，比如 red 会变成 rgb(255, 0, 0)；相对单位会变成绝对单位，比如 em 会变成 px。

并且一些节点会被忽略。如一些节点会使用 CSS（例如 display: "none" 属性）隐藏，它们将被忽略。如 script 或 meta 标签不可见（这些标签在浏览器默认样式表中为display: "none"），会被忽略。

2.3 布局/重排 - Layout

渲染树保存有关哪些节点显示以及它们计算出的样式的信息，但不包括每个节点的尺寸或位置。

在布局阶段，基于渲染树，计算这些节点在设备视口的确切位置及其大小，例如节点的宽高、相对包含快的位置。

布局或回流（reflow）并非仅发生一次，而是每当我们在 DOM 中更改影响页面布局（即使是部分影响）的任何内容时都会发生。元素位置被重新计算的情况示例有：

向 DOM 中添加或删除元素
调整浏览器窗口大小
更改元素的宽度、位置或使其浮动

2.4 分层 - Layer

主线程会使用一套策略对整个布局树进行分层。

分层的好处在于，将来某一个层改变后，仅会对该层进行后续处理，从而提升效率。

如果我们想要暗示浏览器某些元素应该位于单独的层上，我们可以使用 will-change CSS 属性。有一些特定的属性和元素表示创建了一个新层。其中一些是 <video> 、 <canvas> 、 opacity CSS 属性、一个 3D transform 、 will-change 等等。这些节点及其后代将绘制到它们自己的层上。

2.5 绘制/重绘 - Paint

为每一层生成如何绘制的指令。

渲染主线程的工作到此为止，剩余步骤交给其他线程完成。

2.6 分块 - Tiling

分块将每一层分为多个小的区域。

分块的⼯作是交给多个线程同时进⾏的。

2.7 光栅化 - Raster

光栅化是将每个块变成位图，优先处理靠近视口的块。

此过程会用到 GPU 加速：

2.8 画 - Draw

合成线程计算出每个位图在屏幕上的位置，交给 GPU 进⾏最终呈现。

完整流程：

三常见面试题

3.1 什么是 Reflow？

Reflow 的本质就是重新计算 Layout 树。

当做出一些操作，影响页面几何布局，引发一系列的重新计算：CSSOM 树改变，Render 树更新，Layout 树更新，重新绘制。

3.2 什么是 Repaint？

Repaint 的本质就是重新根据分层信息，计算新的绘制指令，进行绘制。

当改动了可见样式后，就需要重新计算，会引发重绘。

3.3 为什么 transform 效率高？

因为 transform 既不影响布局也不影响绘制，它影响的只是渲染流程的最后一个「draw」阶段（和 animation 配合使用）。

由于 draw 阶段在合成线程中，所以 tranform 的变化几乎不会影响渲染主线程。反之，渲染主线程如何阻塞，也不会影响 transform 的变化。

筷筷小报#9 - 祝各位 1024 快乐

筷筷 — Fri, 25 Oct 2024 00:00:00 GMT

这周是 1024 节，大家过的怎么样呢？当日我司准备了个超大蛋糕，好吃😋

工具推荐

1 rrweb

rrweb 指的是“record and replay the web”，是一个用于录制和回放用户在网页上交互的工具。

使用场景举例：

保险行业录制用户网页交互行为作为存档；
前端监控领域的错误上报和用户行为分析：
- 前端错误发生时录制前10s的页面上下文，用于分析错误发生原因
- 录制用户在页面上的交互行为，分析交互路径，作为后续优化界面的数据支撑

视频

1 vlog #78｜程序员下班后的学习记录｜加班之后也要快乐学习鸭｜远程办公带来的性格变化｜Rust 智能合约学习中｜《平面国》神作｜英语学习｜恢复分享欲ing

这周一定要练八段锦！买了个瑜伽垫到现在还没用上😅，回到家立马打开瑜伽垫开始练习5min！

2 【现代前端开发必知10】惊了，用户体验还能这么做？

本期我们从 UI 设计、可访问性和个性化三个维度讨论用户体验还可以怎么做，相信你一定会有不少收获。

这一整个系列很推荐大家都看一遍，它能帮助你构建对前端开发所需知识和技能的整体认知框架。一旦你有了这个大框架，再进行学习时，就能清楚地知道自己在框架中的具体位置，从而更有针对性地进行学习。

3 挖掘真正的学习价值所在丨让编程再次伟大#20

视频回答以下问题：能不能通过学习好的代码来提高自己的编程水平？看好的开源仓库的源码真的有效果吗？怎么做才能提高自己的水平？

视频下有一个评论很好，在这里贴出来：

搞过项目的人都知道，维护老项目比自己搞新项目难度要高得多，做出来的成果还不被认可。原因是你花费了巨量时间去揣摩别人，而不是去关注业务，这很不值得。

工程项目业务是关键，架构设计的核心就是预判后续变更，让高频变更易开发，中频变更可扩展，低频变更影响可控。这些的关键是业务思考，你应该和人聊天而非闷头看代码。

学习需要简洁，而工程往往复杂。学牛顿力学我们讲的是理想模型，没有人用发动机拆开来讲 F=ma。工程代码杂糅了业务、性能甚至是政治博弈，老手都犯怵你新手不直接白给。

学语法学技巧就去看书上最简明的示例，想提高工程能力就去实践中踩坑历练。「调查问题就是解决问题」，你去踩了坑，自己就会找工具，工具能解决你的问题就是好工具，你就能建立自己的评价体系。

对于新人，最重要的是找一个自己感兴趣的事情做下去，你要把目标拆分，找出一个最小的产品，让自己先用起来或者有正向反馈，这样才能有动力接着去做。千里之行始于足下，是低头一步一步把路走出来的。这个过程你会遇到语法问题，API 问题，莫名其妙的 bug，你发现代码设计出问题了需要重构，你一点点的把这些问题解决了，不知不觉你就做起了一个项目。做一件事最好的时间就是当下，立即出发比啥都强。

文章

1 我用2万条真人AI海龟汤游戏数据，评估大模型推理能力哪家强

作者用海龟汤做benchmark测试模型的推理能力，原因有5：

不需要额外背景知识。不同的大模型训练所使用的知识库不同，导致一些测评很难公正。但海龟汤游戏里几乎包含了推理所需的全部信息，一旦得知汤面和汤底，大模型就能作出判断，这使得评估被限定在了模型的推理能力。
结果是客观的，不以人类偏好为转移。例如：在上述故事《山顶》里，小屋在悬崖边，主人半夜开门将登山者推下山导致后者被摔死。因此，门是朝外开的这个猜测就是正确的，这种正确性是客观的、和人的感受无关。
结果明确，很容易量化。许多评估指标里，模型的输出结果是一段文本回答，这导致难以量化模型效果。但海龟汤的猜测结果只有三个：对、错、不相关。只要准确标注了测试集，任何人就可以用它来测试任何自己想测试的模型，并获得量化的数值结果。
正常人类获知汤底的情况下，可以 100%答对。这使得人工标注不会太过复杂。这条也说明，现阶段的大模型智商相比人类还有很大差距。
数据永远更新、无法作弊。有部分厂商会直接将现有的 benchmark 数据集加入训练来刷分，但在海龟 Benchmark 这种模式下则行不通：模型评估的是用户的猜测，而不是故事本身。每隔一段时间，就会有玩家产生新的猜测，而人类的脑洞之大，导致猜测几乎无法被穷尽

测试结果是 Claude3.5、4o 和通义千问排前三（8月初的评估）

2 实操｜基于抽象语法树（AST）的代码问题修复

这篇文章介绍了利用抽象语法树（AST）技术自动化解决前端代码中未使用变量或函数参数的问题。文章解释了AST的概念、结构和生成过程，并提出了一个基于AST的代码修复方案。该方案通过解析代码为AST、使用ESLint识别问题、遍历AST进行节点修改，最后将修改后的AST转换回代码，以自动化地修复问题。

播客

1 AI课代表丨为什么程序员都用AI写代码，不怕被抢了工作？

邀请到了通义灵码的产品技术负责人神秀和全面引进智能编码工具的趣丸科技研发效能负责人黄金作为嘉宾，聊一聊AI 编码到底发展到了什么阶段？为什么它依然是投资人最看好的三大场景之一？

我想不怕被抢工作的很重要的原因之一就是写代码只占工作时间的一半甚至更低，其余时间都在和其他同事battle🤣

2 AI课代表丨个人开发者碎瓜：为自己废寝忘食地工作，当然有大模型帮忙

很多朋友是因为“寻隐”（queryable）这款AI相册搜索应用认识碎瓜的，并深受启发，一些人还参考它的开源代码，做了边缘侧的部署。这其中也包括一些大公司。

尽管收获了hacker news榜首、copilot trending、应用上线15天用户突破40万等诸多成就，但碎瓜始终在过一种简单的创作者的生活。

这是他特别打动人的地方。他表明了一个人在技术浪潮中如何做到既全情投入又冷静旁观。

碎瓜的GitHub记录了他作为个人开发者的所思所想。如果这期节目听得不过瘾，推荐去读一读他的博客。

「文章.1」介绍了碎瓜用海龟汤做 benchmark 测试模型推理能力的心路历程。

3 硬地骇客丨1024特辑：我们（公司）应该如何过好程序员节？

我们一起回顾技术论坛的黄金时代，也一起惋惜如今的现状。除了技术，我们还会聊聊程序员的那些事儿：代码事故、奇葩bug、以及剁手党程序员们的消费清单！更重要的是，我们将探讨如何让程序员节日更high，更有意义！

句子

1 远程办公之后，我的时间规划是怎么样的？

我的时间规划并不是以时间块为单位的，而是以任务为单位，对任务进行优先级排序。

就比如说，我早上的任务按照优先级是： 1️⃣工作 2️⃣运动 3️⃣听 TED 4️⃣练习英语口语 5️⃣看书

如果今天工作不忙，早上有足够的时间（7:00 - 10:00），我就会先把 TED 和英语口语完成，然后做做运动，如果有时间的话再看一会杂书。

如果工作忙，这个任务的执行就会发生变化，先会完成运动和工作，然后根据时间安排英语的学习，比如 10-15 分钟快速听一篇 TED，简单练习 10 分钟口语，放弃看杂书的任务等等。

看了《福格行为模型》之后，我意识到，想要维持习惯的可持续性，需要能动态调整时间。

当你有充足的时间和精力时，就增加习惯的难度和强度，当你很忙时，就需要让习惯变得容易完成。

相比较于行为的时长，更重要的是保持这个行为的可持续，让它容易坚持下去。

——polebug23

筷筷小报#8 - Next.js 带来的心智负担你受的了吗

筷筷 — Fri, 18 Oct 2024 00:00:00 GMT

开源动态

1 Next.js 15.0.0 rc.1

有关 Next.js 15 的新特性，可以查看下面两篇博客：Next.js 15 RC 2，Next.js 15 RC

目前我正在学习 Next.js 14，感觉心智负担好重。主要在于它的多层缓存策略，默认情况下，Next.js 会尽可能多地缓存以提高性能和降低成本。这使得客户端、服务端和fetch都有一层缓存机制，缓存要考虑数据缓存、路由缓存；页面的渲染方式要考虑静态渲染和动态渲染；还有诸如此类的各种考虑。

但是您猜怎么着，缓存策略在 v15 又变更了😅，这下心智负担更重了。

2 Next.js CONF 24

下周四会举办 Next.js 的开发者大会，可以关注下。

工具推荐

1 开源许可证选择器

回答5个问题，即可选择最适合你项目的开源许可证😋

2 player.style

player.style 提供多个美观的音频和视频播放器主题。用户可以选择自己喜欢的风格，轻松定制播放器界面。网站支持多种主流框架，比如 React、Vue，使用起来非常方便！

3 CodeImage

美化代码截图的工具。

视频

1 vlog #77｜程序员下班后的学习记录｜Rust 写智能合约学习中｜Anchor 框架｜太太喜欢《平面国》了｜TED 与英语学习｜八段锦上头｜下周加油～ 💓

我也试试八段锦✊✊

2 那些年，我被坑过的开源项目【让编程再次伟大#19】

辨别一个开源项目组是否为草台班子的一个方法，是在 issues 中按评论数量倒叙查看那些讨论最多的最有争议的 issue，看开发团队的发言和态度是否相对客观。

文章

1 eBay 实验平台的网站性能优化实践

同在前端领域的朋友推荐的文章，网站性能优化的实践，包含前端与后端部分。

文章整体结构很完整。前端部分首先介绍业务背景，引出为什么需要性能优化；再到性能指标的选取，说明哪些指标能够「准确反映用户的实际体验」；之后选择合适的平台进行数据收集和监控。

其次，根据收集到性能数据，考虑如何优化方案与架构。介绍了网络调度、静态资源加载、数据传输，以及页面渲染四个方面的优化方案。

2 一个前端非侵入式骨架屏自动生成方案

文章介绍了一种前端非侵入式骨架屏自动生成方案，包括背景、现有方案调研、技术方案设计及优化点、部分技术细节解析以及效果演示和业务实践。

3 构建时组件 - 为什么 React 服务器组件是面向内容驱动网站的一次飞跃丨EN

该博客以在悬停卡中显示链接的开放图图像为例，介绍了客户端、构建时插件和 React Server Components 三种解决方式。对比三种方式，客户端方式简单但有缺点，构建时插件方式解决了部分问题但有取舍，React Server Components 方式兼具两者优点。React Server Components 技术提升了开发体验，有助于打造更丰富的内容驱动型网站。

播客

1 硬地骇客丨太🔥了，我们也聊聊 NotebookLM 和 AI 播客

今天我们聊一下AI生成播客！我们从AI播客的听感体验出发，深入探讨了它的应用场景、对播客产业的影响，以及未来发展趋势。从AI生成音频的真实感，到AI在资讯、读书和访谈等不同场景的适用性，再到AI播客的商业化前景和创作者们如何应对AI带来的挑战，让我们一起展望AI时代播客的未来！

2 WebWorker丨[3周年联欢]辛宝：我想停更了 Smart：驳回，继续录

三年前我和刘威突发奇想一起做一个闲聊播客，一转念，播客居然已经做了三年了！这一次我们和辛宝、刘威、小白菜、开翼、smart、瑞丰一起闲聊，谈了谈各自生活的感受，三年下来我们从网友成为亲密无间的好朋友了。

句子

1 如何快速验证你的想法：

让你的开发速度和想法匹配。不要花时间在配环境、工具链、布局上；针对不同框架有很多开箱即用的模板，找到合适的用就好了！
聚焦最关键部分，做一个 MVP 出来。一开始不要在意 UI，聚焦在想法的关键功能实现上，把它跑通最重要。
将你的 MVP 分享出去，与他人交流，以获得新的灵感和正向激励，进而迭代你的项目。

筷筷小报#7 - 两步搭建自己的博客

筷筷 — Fri, 11 Oct 2024 00:00:00 GMT

使用Astro和vercel两步搭建自己的个人博客

前提：需要科学上网

Astro 是内容驱动的 Web 框架，特别适合用来搭建博客。

1 访问 Astro 模板，找到并使用你喜欢的博客模板。

这里我以 OpenBlog 为例，点击「Get started」：

进入 Github 仓库后，点击「Use this template」，创建一个仓库，公共私有都可以：

这个时候，你可能会在仓库 README 中看到 Deploy 按钮，点击后会进入到 Vercel 里，按照步骤就可以部署成功；这里我们通过先进入 Vercel 平台，再部署的方式。

2 在 Vercel 平台上部署你的博客

Vercel 是一个面向开发者的平台，它提供了构建和部署 Web 应用程序所需的工具、工作流程和基础架构，无需额外配置即可更快地完成。

使用你的 GitHub 账号注册 Vercel，以便可以连接到你的 GitHub 仓库。在 Dashboard 中，创建一个新的项目：

选择你刚刚通过模板创建的仓库进行导入，之后在配置界面点击部署「Deploy」，等待一段时间后，出现「Congratulations！」，代表你已经成功部署了你自己的博客：

之后你就可以将仓库克隆到本地，开始编写你自己的博客啦~之后每次提交代码，Vercel 都会自动进行部署，无需操心项目的构建。

工具推荐

1 Humanify

基于 AI 逆向分析混淆后的 JavaScript 代码。

作者写了一篇博客去描述自己的思考以及用什么方法去实现此工具。这里我简单复述下文章结构：

首先解释为什么需要代码压缩技术，以及代码压缩的多种方式。引出在变量名压缩后导致的逆向困难问题。

其次介绍人类如何进行逆向，通过观察函数的上下文：

阅读函数体
描述该函数的作用
尝试想出一个符合该描述的名字

上述2、3点的过程可以交给 LLMs，因为理解上下文给出答案正是它擅长的。

之后指出 LLMs 输出幻觉问题，以及如何去控制 LLMs。只让 LLMs 根据函数上下文想出符合描述的名字，不让 LLMs 参与编码。并且在其作用域内重命名 JavaScript 变量是传统工具如 Babel 已经解决的问题。Babel 首先将代码解析为抽象语法树（AST），可以使用行为良好的算法轻松修改该抽象语法树。让代码保证具有原始功能并且可以被计算机运行。

最后，作者整合了逆向 JS 代码的流程：

解耦 webpack 捆绑包与 webcrack
运行代码通过transform-beautifier和一些自定义的 Babel 插件，进行无损反压缩
循环遍历代码中的所有变量，询问LLM描述它们的意图，并基于该描述生成一个更好的名称
使用 Babel 重命名变量
运行 Prettier 以确保好看的格式

视频

1 vlog #76 | 旅行是一场天时地利人和的相遇｜与世界和自己对话的方式｜和朋友相聚的盛会｜感谢路上治愈我的所有人、动物与植物｜期待下次旅行 👋

很喜欢的一句话：以前，我不太明白旅行和思考之间的联系，现在似乎有所体会。当我们来到一个新的地方，我们打破了日常生活中的固有视角，以一个新的眼光去看待周围的一切。这让我们重新了解世界，同时也是重新了解自己。旅行就是与世界和自己的一场对话，让我们期待下次旅行。

2 DNS污染？SNI阻断？全新网络协议保护隐私安全

https协议对网络流量进行了加密，但是这种保护并非完美，事实上https体系存在着两个安全缝隙，DNS还有SNI，它们依旧使用明文传输，因此会导致隐私泄露等等安全风险。本期视频我们来介绍一组新诞生的网络技术。看看他们是如何补上这最后一块https安全体系的拼图。

我目前是和别人一起在公司附近合租，家里的路由器就被DNS污染了🤣🤣。为啥发现的呢，是因为手机连上家里wifi后，在高德APP访问特定链接会进入色情网站😓。

文章

1 阿里技术｜Web 性能优化｜了解 HTTP 协议后才能理解的预加载

本文旨在探讨和分享多种预加载技术及其在提升网站性能、优化用户体验方面的应用。

2 B站前端错误监控实践

播客

1 硅谷101｜全息显示的AR眼镜真的来了，聊聊Meta Connect与日趋成熟的XR生态

本期《硅谷101》录制于Connect大会结束的第一天，我们邀请到了三位刚从大会现场回来的资深开发者，第一时间解读小扎的“压箱宝”Orion到底强在哪里，为何要把Quest VR的价格打下来，以及Meta如何鼓励包括Mod二创在内的内容创作者扩充整个XR生态。

2 硬地骇客 “澳洲工作环境比想象的复杂” Atlassian 多年员工访谈!

大家好，今天我们将聊聊澳洲科技圈在近年来经历的变化，特别是在疫情和国际竞争的背景下，职场的生态发生了怎样的转变。今天的嘉宾将分享他在Atlassian的第一手经验，包括带有挑战性的工作环境、绩效评估机制以及内部创新活动ShipIt的趣事。如果你对澳洲科技行业的职场文化感兴趣，绝对不容错过！

3 除你武器｜妈妈控制我，就像我也绑架她

刚刚过去的九月，小吴和shiyu都去看了《出走的决心》和《姥姥的外孙》。两部电影都让我们看到我们所熟悉的东亚母亲和她们自己的人生：总是沉默，总是顺从，在自己的家庭中被父母让位给弟弟，当成为母亲后又把同样的痛苦传递给女儿。最后，“儿子继承遗产，女儿继承癌症”。

我们都是妈妈的孩子。就像《出走的决心》中的女儿，我们支持妈妈出走的决定，可是当妈妈真正离开家庭，我们又害怕失去妈妈的照顾。妈妈的母职惩罚，就是我们的既得利益。

孩子的“妈，不要走”，夺去了母亲的自由；妈妈的“为你好”，剪去了孩子的羽翼。当男性在资源的争夺中隐身而去，只剩下女性互相剥削又互相谅解。

妈妈能不能自私一点？身为儿女，我们能够做些什么？这是我们能想到的方式：去允许有瑕疵的女性，允许不道德的女性，接受她不想给你做饭，不想给你洗衣服，接受你要为了妈妈的幸福去让渡出一部分自己的自我。在这样的疼痛中，我们才能够体会一种全新的，和妈妈之间的、人与人之间的关系。

使用沉浸式翻译打平信息差

筷筷 — Thu, 10 Oct 2024 00:00:00 GMT

沉浸式翻译是什么？

一个浏览器插件，借用大模型能力或各家翻译服务，以中英文隔段落对照的形式进行翻译，轻松打平国内外信息差，阅读效率upup。可以用来翻译网页、YouTube双语字幕、epub、md、字幕文件、pdf、漫画等等。

借助大模型出色的理解上下文的能力，各个大模型的翻译效果都很出色，沉浸式翻译可以自己配置大模型API，支持市面上绝大多数的大模型，国内很多大模型开放平台都有提供免费Token，可以花最少的成本得到最好的体验。嫌麻烦的话可以开会员，其免费调用OpenAI、Claude等服务。

我可以向你保证，在使用它之后，就离不开它了。我一般会借助它协助我阅读文档，技术博客，Youtube翻译字幕，学习成长速度倍增。

如果想深入了解产品和作者的故事，可以看下方的视频和播客节目：

在视频沉浸式翻译，强的离谱啊！10大场景使用教程【干货】中，简单介绍了沉浸式翻译如何使用。

在播客节目Owen 聊沉浸式翻译的起源、裸辞三年的经历、做穷人也能用的产品、大亚湾的生活和硬地骇客——沉浸式翻译背后的故事 | 对话创始人Owen中，讲述沉浸式翻译背后的独立开发者 Owen 的故事，沉浸式翻译的灵感来源（创意来自一本书，其中的翻译方式就是中英文隔段落对照的方式）以及如何诞生，Owen 作为独立开发者的经验分享，对注意力自由的探讨。

【教程】3步快速接入大模型（以免费的豆包大模型为例）

你需要打开豆包大模型，登录并实名认证（实名后大部分模型都有提供免费50万Token）
在模型推理-在线推理中创建推理接入点，选择一个模型，推荐选择 Doubao-lite-32k 10000 RPM（Requests Per Minute 每分钟请求数）模型。选择好后点击接入模型，留意”ep-”开头的字符串，待会要用到。
点击API Key管理，创建你的API Key，并复制。
配置你的沉浸式翻译插件，找到豆包大模型，点击修改。在修改界面将APIKEY和ep开头的接入点复制进去，然后将翻译服务选择豆包大模型，就可以调用模型的能力进行翻译啦~
可以根据场景选择不同的AI专家，得到更贴合场景的翻译。我目前使用「GitHub 翻译增强器」多一些。

最后我们来对比下不同翻译平台的翻译效果：

原文： What are the benefits of Islands?

The most obvious benefit of building with Astro Islands is performance: the majority of your website is converted to fast, static HTML and JavaScript is only loaded for the individual components that need it. JavaScript is one of the slowest assets that you can load per-byte, so every byte counts.

Another benefit is parallel loading. In the example illustration above, the low-priority “image carousel” island doesn’t need to block the high-priority “header” island. The two load in parallel and hydrate in isolation, meaning that the header becomes interactive immediately without having to wait for the heavier carousel lower down the page.

Even better, you can tell Astro exactly how and when to render each component. If that image carousel is really expensive to load, you can attach a special client directive that tells Astro to only load the carousel when it becomes visible on the page. If the user never sees it, it never loads.

In Astro, it’s up to you as the developer to explicitly tell Astro which components on the page need to also run in the browser. Astro will only hydrate exactly what’s needed on the page and leave the rest of your site as static HTML.

Islands are the secret to Astro’s fast-by-default performance story!

社区译文：群岛的好处有哪些？

Astro 群岛的最明显的好处就是性能：你网站的大部分区域都被转换为了快速、静态的 HTML，JavaScript 只有在需要的时候才会加载到各个组件中。JavaScript 是一个加载得最慢的资源。每一个字节都影响着阅读者的体验！

另一个好处是并行加载。在上面的一些假想例子中，重要性更低的图像轮播不应该阻挡更重要的页头部分的加载。它俩并行加载但独自激活（hydrate），这表明阅读者并不需要等着更沉重的图像轮播加载完毕就可以与页头交互了。

更棒的地方在于：你可以准确地告诉 Astro 如何以及何时渲染每个组件。如果该图像轮播的加载成本真的很高，你可以附加一个特殊的客户端指令，告诉 Astro 仅在轮播在页面上可见时才加载它。如果用户从未看到它，它永远不会被加载。

在 Astro 中，作为开发人员，你可以明确告诉 Astro 你的页面上的哪些组件也需要在客户端浏览器中运行。Astro 只会准确地补充页面上需要交互性的内容，并将你的网站的其余部分保留为静态 HTML。

群岛正是 Astro 在默认情况下能够如此迅速之秘诀！

翻译效果：

筷筷小报#6 - 如果前端有一套统一的工具链...

筷筷 — Sat, 05 Oct 2024 00:00:00 GMT

开源动态

1 尤雨溪创立 VoidZero 公司

该公司致力于为 JavaScript 生态系统构建开源、高性能和统一的开发工具链。在「文章.1」中介绍了创立 VoidZero 的原因。

工具推荐

1 Requstory

一句话总结：使用 AI 将想法转换成用户故事和流程图。

2 Polymet

一句话总结：使用 AI 将想法转化成可交互的原型图。

视频

1 【现代前端开发必知09】你想要的性能优化方案都在这里了

介绍用户体验板块下的常见性能问题和通用优化方案，包括性能分析、性能指标；页面加载优化（资源体积、网络延迟、缓存、渲染）；交互过程优化（海量数据、大量动画、频繁交互）；资源消耗优化（资源合理加载、代码质量）以及容器技术中的 H5 和小程序优化。

2 vlog #75 | 程序员没有学习时间的黑客松记录｜九月的最后一周｜心情复杂地在读《刀锋》｜TED ｜保持英语学习与运动｜八段锦上头中😁

我也去试试八段锦😄。

3 How to Set the Right Goals and Stay Motivated | Ayelet Fishbach | TED

「视频.2」中提到的 TED 演讲，以下是「视频.2」博主的记录：这篇 TED 的观点和《福格行为模型》有些相似，强调“保持动力”是一种方法，我们需要去学习如何激励自己。

制定一个目标是其中一种方法，但很多人只是期待（甚至幻想）自己已经完成了目标，而不是期待去做这件事。

我们应该如何维持动力？

研究表明，大多数目标被放弃不是因为它们不重要，而是因为人们不喜欢追求它们，你的乐趣是决定你是否会坚持目标的关键。

并且动力存在一个规律，它在开始时和结束时会很高，但在中间阶段会下降。那我们可以缩短这个中间阶段，比如设定每个月、每周、每日的目标。

中间阶段的另一个问题是，你会经历挫折，并且感到沮丧。一种解决方法是把自我从画面中移除，当你移除自我时，学习会变得容易。

4 ViteConf 2024 录播

ViteConf 的录播，下面有时间线可以找自己感兴趣的选题看，搭配「沉浸式翻译」看效果很好~

文章

1 Announcing VoidZero - Next Generation Toolchain for JavaScript

Even You 创立了 VoidZero 公司，该公司致力于为 JavaScript 生态系统构建一个开源、高性能且统一的开发工具链，以推动下一代 Web 应用程序的发展。其团队已获得由 Accel 领投的 460 万美元种子轮融资。

VoidZero 的愿景是：

统一：在所有任务（解析、转换、 lint 检查、格式化、打包、压缩、测试）中使用相同的 AST、解析器和模块互操作，消除不一致并减少冗余解析成本。
高性能：用 compile-to-native language 编写，从头开始为速度设计，具有最大并行化和低开销的 JS 插件支持。性能预算解锁了更具雄心的功能，不仅改善了开发人员体验，也改善了最终用户体验。
可组合的：该工具链的每个组件都可独立使用，为高级定制提供构建块。
运行时无关：不与任何特定的 JavaScript 运行时绑定—在所有环境中提供相同的开发人员体验。

播客

1 自动驾驶：你有算力，我有人力，我们都有光明的…

句子

祝大家国庆节快乐~

筷筷小报#5 - Vite Conf要来辣

筷筷 — Fri, 27 Sep 2024 00:00:00 GMT

开源动态

1 Vite Conf 大会将在下周四举行🎉

目前日程安排已经公布了，大家可以追踪自己感兴趣的演讲～

我目前准备观看尤大、Anthony Fu、Astro相关的演讲，希望我能听懂🥺

工具推荐

1 A/B Test Design

abtest.design 是一个精心收集的 A/B 测试结果库，汇集了来自顶尖应用程序的案例。目前，这里已经有超过 50 个来自 Headspace、Uber、Blinkist 和 Duolingo 等应用的测试结果。

视频

1 vlog #73｜程序员下班后的学习记录｜Rust 写智能合约学习中｜在读《臣服实验》与《刀锋》｜日常英语学习｜保持学习、记录与思考

很喜欢这种对工作和生活的态度，每看一期都能感觉到up在成长，我也在成长。

2 【现代前端开发必知08】应用框架何其多，但核心要素不会变

这期主要聊不同生态的应用框架和常见的应用架构方案。

应用框架是在UI框架的基础上进行了应用封装。市面上的应用架构几乎都包含路由、样式、数据获取、测试、插件和部署功能。

常见的应用架构方案有MPA（多页应用）、SPA（单页应用）、PWA（渐进式Web应用）、MFE（微前端）和Islands（群岛架构），视频中对它们的应用场景和优缺点进行了粗略介绍。

3 你不知道的console

这期介绍了console的各种用法，别再只 console.log 辣：

debug 调试信息
log 普通信息
info 信息
table 打印表格
group、groupCollapsed 与 groupEnd 将信息进行分组
dir 打印对象结构
time 与 timeEnd 计时
count 与 countReset 计数
trace 打印堆栈
assert 断言
warn 打印警告
error 打印错误
clear 清空消息
%c 占位符结合样式去控制打印台输出的样式

4 vlog #74 | 程序员下班后的学习记录｜在学 Anchor 框架写智能合约｜内部黑客松开始哩 🎉 ｜读完《臣服实验》｜在读《刀锋》｜日常英语学习与运动

虽然筷筷小报咕了一周，但是每周必看不能落下！

5 如何实现交互与视觉的高级融合

前端需要解决的核心问题是人机交互，而好的设计规范和审美能够很大程度上决定一款产品的上限，这个视频列举出了一些交互上可参考的优秀案例和思想。

文章

1 浅谈 Follow 中的设计理念

Follow，一个由 RSSNext 开发的项目，融入了若干深思熟虑的设计理念以增强用户体验。文章讨论了图标变化的各种过渡，根据上下文采用了诸如圆形、缩放和不透明度过渡等不同方法。窥视模态是另一个显著特征，允许用户在不离开当前页面的情况下预览内容。为了创建无缝体验，Follow 强调“从何处来，到何处去”的过渡效果，由 Framer Motion 动画库支持。分层模态通过微妙的缩放来管理以表示层次结构和可拖动能力。使用自动调整大小组件来平稳处理内容高度变化。此外，弹性动画增强流畅性，同时最小化动态效果以实现能效和用户偏好。

2 Why you can’t pay us to add custom modules

建议使用「沉浸式翻译」浏览器插件阅读

文章讨论了为什么作者所在的公司拒绝为付费客户添加定制模块。主要原因包括：

定制模块会导致代码包含较多分支，项目复杂度上升，难以维护。
定制模块不会得到足够的关注和测试。
定制模块的如果出现问题解决优先级较低。
公司更倾向于倾听覆盖所有用户的功能请求，评估哪些对我们的大多数客户有益，并推动平台向前发展。

作者强调，他们的目标是建立一个持久的业务，而定制模块并非我们要采取的方式。

播客

1 听众来信 #13 非互联网企业，怎么提升技术和背景？

2 在2021聊性别

沈奕斐老师在2021年推出的关于性别的专题系列博客，与主持一起探讨和梳理了多个性别相关的议题，希望能让大家理解这些词汇背后含义：性别刻板印象、性别规训、性别差异、性别歧视、性别平等、女性主义、性等等。

虽然现在都2024年了，但是现在听来依然很有收获，学习女性主义带给我的女性视角，让我更能洞察到这个世界更多性别不平等的事情正在发生。

3 EP77 Eve 分享：如何进行有效的海外市场推广？希望帮助开发者真正成功。

大家好！今天我们将深入探讨一个让许多开发者都头疼的问题：如何有效地进行海外市场推广。我们邀请到了经验丰富的海外推广专家 Eve 来分享她的实战经验和专业见解。节目中，Eve 将从选择合作产品、平台选择、素材制作、投放区域、投放比例等方面，为你揭秘成功的海外推广策略，帮助你找到最适合自己的推广方法，实现产品出海的目标。

虽然我没有产品也没钱推广，但是相信这些讨论未来的我一定会用得上的🤣🤣

4 No.64 Edison、远方：参与开源如何保持技术热情

「Web Worker」的最新一期，邀请到了 Vue 的核心成员 Edison 和远方一起聊聊如何参与开源？维护项目心累的怎么办？是怎么保持技术热情的？

让我们来看看其中一位嘉宾非常有含金量的热力图😱：

句子

1《只要有一个女人》

只要有一个女人

觉得自己坚强

因而讨厌柔弱的伪装

定有一个男人

意识到自己也有脆弱的地方

因而不愿意再伪装坚强

只要有一个女人

讨厌扮演幼稚无知的小姑娘

定有一个男人

想摆脱无所不晓的高期望

只要有一个女人

觉得自己为儿女所累

定有一个男人

没有享受为人之父的全部滋味

只要有一个女人

得不到有意义的工作和平等的酬金

定有一个男人

不得不担起对另一个人的全部责任

只要有一个女人

想弄懂汽车的构造而得不到帮助

定有一个男人

想享受烹饪的乐趣而得不到满足

只要有一个女人

向自身的解放迈进一步

定有一个男人

发现自己也更接近自由之路

——Nancy R.Smith 1973

2 拉里的修行之旅（读《刀锋》的记录与思考）

拉里与伊莎贝尔分开10年后重新相聚，聊起他的旅行：去了各种国家，然后在东方待了5年。

他在一个瑜伽师的隐居住所，在那读书、思索、静心，伊莎贝尔不解地问到：“你从中获得了什么呢？”

“平和。”他微微笑了笑，很随意地说。

我之前碰巧在网上看到很多去修行的人，他们都是为了达到内心的平和，当时还觉得有些困惑：“达到内心平和有什么意义呢？”

后面我发现，修行只是让人们获得了更深的觉知，从而能够更从容的应对人生中的波澜起伏。「内心平和」并不是人生的终点，而是带领我们去探索人生的内在力量。

这种内在力量帮助我们在面对各种挑战和不确定性时，依然保持一种清明和稳定的状态，让我们看清了自己真正渴望的是什么。

拉里的平和并不代表他从此无欲无求，或者避开了生活中的痛苦，而是他学会了在这些体验中找到一个内心的支点，保持一种与世界的距离感，这种距离感让他更清晰的看到与世界的关系。

——polebug23

筷筷小报#4 - 怎样提出一个好问题？

筷筷 — Fri, 13 Sep 2024 00:00:00 GMT

文章

1 如何提问，才能让别人帮助你？

此文章是对「视频.2」的提炼，总结成了思维导图的形式，推荐大家结合思维导图去看看原视频，一起学习如何提出一个好问题～

提问的本质是花费对方的时间精力来帮你完成工作。换句话说，你在用提问的表现来尝试赢得一个对方回复的机会，你需要提高提问的表现，来增加赢得对方回复的几率，那么如何提高提问的表现呢？需要你构建并实践提问分析框架。

提问分析框架可以分为两点，一是让对方“有利可图”，二是问出一个好问题。

为了达到一，你可以尽可能提高对方精神上的收益，并且降低对方在为你解决问题时付出的成本。

为了达到二，你需要知道一个好问题的基本要素有哪些，并进行不断实践。

在提问后，要及时复盘你的提问，通过不断提问和复盘，渐进式增强你的能力。

开源动态

1 Follow-基于web3的下一代信息浏览器 7.5k⭐️

Follow 可以让你在一个地方通过 RSS 关注你喜欢的网站、博客、社交媒体账号、播客和通知。它旨在成为一个现代化、快速和方便的综合信息中心。

AI：利用先进的人工智能来辅助您的操作。除了基本的 AI 翻译、摘要和推荐外，它还提供每日两次的 AI 报告，突出订阅内容中的关键信息。此外，它还提供一个个性化的 AI 知识库，由您的订阅内容构建而成。

区块链：跟随采用区块链技术作为活跃用户和优秀创作者的激励机制。用户通过持有和使用 Power Token 可以获得更多的服务和权益。创作者通过提供高质量的内容和服务可以获得更多的奖励。

社交：Follow 也是一个社交平台，你可以在上面关注其他用户、分享你的订阅内容，并发现新的内容。它还提供了一个订阅列表同步功能，使你的朋友可以与你的订阅内容同步。

支持平台：Windows、macOS、Linux 和浏览器；移动端的 Android 和即将推出的 iOS。

Follow 目前在 GitHub Trending 中多次登顶第一，近期 Star 数飙升：

有幸从辛宝那边拿到了激活码🥺，我目前体验了2天。结合 RSSHub 丰富的生态，可以抓取绝大多数热门平台的信息，整合到 Follow 平台上集中消费，难道 Follow 早就布局好了吗？！（bushi😄）

从我个人出发，使用 RSS 来浏览互联网上的信息以下的好处：

信息个性化和集中化：我只订阅我感兴趣领域的信息，并且集中在 Follow 进行消费。这样不仅定制属于自己的信息流，并且提高信息获取的精准度，节省了很多时间。
避免平台其他信息流干扰：不必去社交媒体浏览信息，被其他信息打扰。
无广告：无需担心突然被广告贴脸。

2 Vite@6.0.0-beta.0 发布

如果你正在基于 Vite 进行构建，可以尝试使用新的 Module Runner 和 Environment API，并向 Vite 团队提供反馈！你还可以测试其兼容性，以便 Vite 生态系统能够顺利升级到 v6。请访问文档以了解更多信息😇

3 TypeScript 5.6 现已发布🚀

带来以下新功能~

✅新的语法空值/真值检查

✅迭代器 Helper 方法和严格检查

✅编辑器中的区域优先检查

✅灵活的 —build 行为

工具推荐

1 Follow

在「开源动态.1」中进行了简单介绍，目前处于早期测试阶段，需要邀请码进行注册。用户每登陆5天可以用得到的 Power 兑换1个邀请码，可以去各个技术氛围浓厚的场景蹲一蹲～

2 GitHub Star History

显示一个项目的 GitHub 星星数量的增长趋势，「开源动态.1」中的📈就是用它生成的。

视频

1 vlog #72 | 程序员下班后的学习记录｜加班后的回归自我｜八月总结｜在看 AO Protocol｜在读《刀锋》与《臣服实验》｜日常英语学习｜保持思考与记录

快来和我一起恢复能量！

2 如何提问才能让别人愿意帮助你？

快来和我一起学习如何提问！

3 详细介绍灰度发布和 AB Test｜AB实验｜区别与相同点

快来和我一起了解灰度发布和 AB Test！

播客

1 「异见房间」男性说教VS语言恶女：让她说话

语言，作为一种父权制意识形态的载体流动在我们的日常生活中。男性表达总是隐含着性别暴力，比如男性总喜欢打断女性说话；男性（虽然不是老师却）总喜欢对他人的人生指指点点、教女人做事；男性的称赞总带有性意味；男性会无视女性的发言；男性会在女性指出以上所有问题时，否认问题的存在…

为什么男人说话总让我们这么难受？！今天我们就要发掘出日常生活中性别不友好表达，对他们进行觉察、命名与批判。什么是爹味？如何精准觉察爹味表达？偏见与暴力的语言是在怎样的性别气质文化中形成的？一个男性有可能与这样的文化脱钩、拥有新语言吗？在觉察与溯源之后，我们也想行动：同样被父权制话语体系规训的女性，如何反抗？我们有可能通过日常话语，粉碎父权制建构的语言堡垒吗？

今天是教师节，我们准备了一期教师节特辑送给「好为人师的男人们」：虽然你不是教师也没什么文化，但你总喜欢对别人的人生指指点点、教别人做事。

句子

1 如何跳出“工作无聊”的怪圈

以前我其实是一个很容易觉得“工作无聊”的人，大三的时候实习了三个月，把公司的项目代码都看了一遍之后，感觉自己都会了，就不想在这继续待下去；又或者是，大四的时候在阿B实习，再到后来的腾讯，时间长了之后同样觉得工作重复且枯燥。

但是现在，我来这个团队工作了两年，工作上相关的技术我已了然于心，但却不再觉得工作无聊。

帮助我跳出这种“工作无聊”怪圈的，其实是一个刚毕业的同事。由于我们经常一起写代码，我就发现他有一些我没有的想法：

探索现在已有的技术方案之外，更好的方案。大多数人的思维已经固化了，觉得以前的方案能用就继续用下去，不会去探索更好的方案，如果停止探索和创新，工作自然会变得单调和无聊。
主动思考现在系统的不足，有什么地方可以优化，或者是有什么功能可以补充，这些都是可以思考的地方。即便系统表面上运行良好，仍然有许多可以优化的空间，而这些优化都是相对有趣的事。
关注外界的技术方案。

我学习他这种思维模式，重新看待我的工作，我发现它变得有意思起来了。我会主动去思考别人给我的需求之外的范畴，重新审视整个系统的设计，探索新的设计方案等等，这些都不会让我觉得“无聊”。

筷筷小报#3 - Vue 3.5 来啦

筷筷 — Fri, 06 Sep 2024 00:00:00 GMT

开源动态

1 Vue 3.5 正式发布，代号“天元突破红莲螺岩”

这个版本没有引入破坏性变更，而是带来了一系列内部优化和新功能，旨在提升性能和开发体验。阅读此版本CHANGELOG。

在「文章.1」中，介绍了 Vue 3.5 版本的特性变化。

工具推荐

1 墨滴 Markdow一键排版并分发到公众号、掘金等平台

墨滴是一款Markdown快速排版美化并快速分发的网页效率工具。它提供了多种排版样式和编辑模式，让你可以轻松地创作出美观、易读的文章。

排版样式： 墨滴提供了多种排版样式，还可以自定义样式，满足不同使用者的需求。
一键分享： 墨滴支持一键分享到微信公众号、知乎、掘金等平台，让你轻松地将文章分享给更多的人。

视频

1 【花无缺】Obsidian+Git插件，真的是生产力的神！

适合程序员宝宝们的 Obsidian 同步方案，使用 git + 坚果云同步文件夹，达到多设备云同步的效果。

2 vlog #71 | 程序员下班后的学习记录｜持续看好 TON 生态｜AAVE 新经济模型的提案｜保持阅读和思考｜日常英语学习｜肠胃炎但恢复很快的一周 😁

每周必看，补充能量~

3 那些无解的计算机问题【让编程再次伟大#16】

你有没有想过为什么在众多编程语言中数组的索引都从0开始？这期视频从编程语言发展的角度解释了这个问题，以及这种特点带来的深远影响。

文章

1 Vue 3.5 正式版发布，都有哪些变化？

Vue 在9月3号发布了 3.5 版本，代号“天元突破红莲螺岩”，已经正式发布。这个版本没有引入破坏性变更，而是带来了一系列内部优化和新功能，旨在提升性能和开发体验。

响应式系统优化： Vue 3.5 对响应式系统进行了重构，显著减少了内存占用（降低56%），并优化了对大型、深度响应式数组的处理，性能提升高达10倍。
响应式 Props 解构： 3.5 版本中，响应式 Props 解构功能已稳定，允许开发者在 <script setup> 中直接解构 Props，并利用 JavaScript 原生默认值语法简化带有默认值的 Props 声明。
SSR 改进： 服务器端渲染（SSR）功能得到增强，包括懒加载水合（Lazy Hydration）和 useId() API，以生成应用内唯一且在服务器和客户端渲染间稳定的 ID。
自定义元素改进： 修复了 defineCustomElement() API 的问题，并增加了新功能，如应用配置支持、访问宿主元素和影子根的 API，以及支持提供 nonce 选项。
其他特性： 引入了 useTemplateRef() API 用于获取模板引用，以及 <Teleport> 组件的 defer 属性，允许将内容传送到 Vue 后续渲染的元素。

小总结： Vue 3.5 版本通过一系列改进和新特性，提升了框架的性能和响应式系统的效率，同时增强了开发者在服务器端渲染和自定义元素开发方面的能力，为 Vue 开发者社区带来了更加强大和灵活的工具。

2 省钱的开源项目「GitHub 热点速览」

来源于微信公众号 HelloGitHub。本期，从上周的热门开源项目中挑选了 5 个既省钱又省事，还好玩的开源项目。

首先，推荐的是省钱的电动汽车智能充电管理平台 evcc，它可以根据分时电价智能安排电动车充电时间，从而降低电费，如果你家还有太阳能充电和储能设备，evcc 更能最大限度地利用电能，让你的充电成本降到最低。说到省事，开源的 PaaS 平台 dokku，它可以让你轻松搭建一个类似 Heroku 的平台，又能帮你省下一笔可观的费用。再来看看在线 AI 证件照制作工具 HivisionIDPhotos，这款工具让你无需再花钱拍摄证件“大头照”，随时在线生成专业证件照，方便又实惠。

除此之外，还有两款特别好玩的开源项目。《暗黑破坏神》网页版 diabloweb，让你无需安装游戏就能在浏览器里重温经典；以及 SQLpage，通过 SQL 命令就能创建简单的网页，让你无需编写前端代码，同样省时省力。

播客

1 EP75 从总结到搜索：LLM 应用实践分享

本期节目将从 Podwise 实际使用 LLM 的经验出发，分享不同模型的优缺点，探讨成本下降背后的原因，以及如何混合使用大模型来提高性价比。同时，还聊到了总结类 AI 产品的未来方向，以及 Podwise 如何利用 LLM 开发新的 AI 功能，比如智能推荐、AI 搜索等等。

2 No.63 德福的逆行人生：不会送外卖的保险代理人不是一个好前端

我们一起聊聊他的副业，聊聊他的主业，聊聊他的行业观察。同时本着蹭热点原则，我们也聊最近火的电影《逆行人生》，包含轻微剧透，针对电影里的一些争议点表达了自己的看法，仅代表录节目时主播的观点，与现在主播无关（手动狗头）。

德福的桌面：

句子

在消费互联网的场景下，中国讲入口，美国讲接口。国内消费互联网是超级App把持流量入口，内部做流量分发。美国是各种细分领域SaaS对外提供接口互相赋能。

——魔术师卡颂

程序的优雅性不是可以或缺的奢侈品，而是决定成功还是失败的一个要素。优雅并不是一个美学的问题，也不是一个时尚品味的问题，优雅能够被翻译成可行的技术。

如果说优雅也有缺点的话，那就是你需要艰巨的工作才能得到它，需要良好的教育才能欣赏它。

——Edsger W. Dijkstra

筷筷小报#2 - Rspack推出正式版，准备好升级你的前端构建工具了吗？

筷筷 — Fri, 30 Aug 2024 00:00:00 GMT

主要聚焦于前端领域，每周五分享我看过听过体验过的零零碎碎~

开源动态

1 Rspack 推出1.0正式版🎉🎉

Rspack 是基于 Rust 的高性能 Web 打包工具，它提供对 webpack 生态良好的兼容性，能够无缝替换 webpack，并提供闪电般的构建速度。

字节前端 infra 团队创建 Rspack 的原因，是为了解决在字节跳动维护构建工具时遇到的各种性能问题。由于字节跳动内部存在许多巨石应用，它们都具有复杂的构建配置，生产环境的构建需要耗费十几分钟，甚至超过半小时；开发环境的耗时也超过十几分钟。

在8月28号，Rspack 终于到达了一个崭新的阶段 —— 1.0。这意味着 Rspack 已经达到生产稳定，覆盖了 webpack 绝大多数的 API 和功能，并已经做好支持更多用户的准备。

Rspack 目前已经实现了 webpack 绝大部分的功能，目前的功能也能够满足大多数项目的需求。同时，我们已经在内部的几百个业务上完成了落地，取得了 5~10 倍编译性能的提升。目前的性能仍然存在较大提升空间，我们会持续对 Rspack 进行更深入的性能优化。

Rspack 已经完成了对 webpack 主要配置的兼容，并且适配了 webpack 的 loader 架构。目前，你已经可以在 Rspack 中无缝使用你熟悉的各种 loader，如 babel-loader、less-loader、sass-loader、vue-loader 等等。

目前 Rspack 对缓存支持还比较简单，仅支持了内存级别的缓存，未来我们会建设更强的缓存能力，包括可迁移的持久化缓存，这将带来更大的想象空间，如在 monorepo 里不同的机器上都可以复用 Rspack 的云端缓存，提升大型项目的缓存命中率。

更多关于 Rspack 的介绍，请看官方文档

关于 Rspack 1.0 的更多信息，请看「文章.2」

2 Zustand 推出5.0预发布版本🎉

Zustand 是 React 生态中小型、快速和可扩展的状态管理解决方案，拥有基于 hooks 的舒适的API，非常地灵活。

如果你正在使用 v4 版本且想尽早尝鲜，可以看看作者写的文章如何从v4迁移到v5。

工具推荐

1 Shots 能够快速创建产品的宣传图

下方图片是我使用该网站为我开发的记账小程序妙记无痛生成的宣传图

文章

1 如何创建一个 NPM 包 (英)

如何在 2024 年创建一个 NPM 包，听起来很简单，但如果你想要遵循最佳实践、引入有用的工具并使其恰到好处，那就有很多步骤。Matt Pocock 在此介绍了这个过程，该片文章还有作者的视频版讲解。

2 Rspack 1.0 发布

Rspack 1.0 正式发布

Rspack 1.0，一款基于 Rust 编写的 JavaScript 打包工具正式发布。它兼容 webpack 的 API 和生态，同时提供显著的性能提升，是下一代的构建工具。自 Rspack 0.1 版本开源以来，经过 18 个月的发展，170 位贡献者参与其中，提交了超过 5000 个 pull request 和 2000 个 issues。Rspack 的 npm 周下载量已突破 10 万次，字节跳动内部的周下载量更是超过 40 万。Rspack 1.0 版本意味着该工具已经成熟稳定，能够满足生产环境的需求，覆盖了 webpack 的绝大多数 API 和功能。

新特性和优化

Rspack 1.0 带来了一系列新特性和优化，包括极致的性能提升、更好的兼容性、更小的包体积、对模块联邦 2.0 的支持以及稳定的 API。Rspack 团队还推出了全新的文档首页，提供了更加完善的指南和 API 文档。此外，Rspack 1.0 还致力于支持现代 Web 标准，如 Web Worker、JSON modules 等，并在 Rust 和 JavaScript 之间的通信上进行了优化，以降低开销。

Rspack 的未来规划

Rspack 团队计划在未来的 1.x 版本中继续开发新特性和改进，包括更快的 HMR、可移植的缓存、基于 TypeScript 的优化、稳定的 Rust API、对 React Server Components 的支持以及改进 ESM 产物。Rspack 1.0 的发布是一个新的起点，团队将聚焦于提升性能、扩展兼容性，并继续与社区合作，以推动 Rspack 和相关工具链的发展。同时，Rspack 团队也感谢了社区贡献者和合作伙伴的支持，并期待与更多企业和开发者建立合作。

3 《HelloGitHub》第 101 期

HelloGitHub 分享 GitHub 上有趣、入门级的开源项目，每月 28 号更新一期。这里有好玩和入门级的开源项目、开源书籍、实战项目、企业级项目，让你用极短的时间感受到开源的魅力，对开源产生兴趣。

播客

1 Next.js 是否为独立开发者的首选框架

Next.js 不仅改变了我们开发的方式，还让我们的前后端代码无缝连接。归归将与我们分享他作为后端开发者的独到见解，揭示为什么 Next.js 成为独立开发者的最佳选择。无论你是新手还是资深开发者，这一集都将让你有所收获！准备好你的耳机，一起进入 Next.js 的世界吧！

视频

1 【现代前端开发必知06】那些简单而又复杂的工具链

介绍现代前端工具链的主要成员，包括集成开发环境，不同种类的包管理器，企业级包管理，现代构建工具的组成要素和发展趋势，不同场景下的调试工具以及 CI/CD 工具。

2 我们需要更愚蠢的代码【让编程再次伟大#15】

我们需要在性能和代码可读性、可维护性中做出平衡。高性能或高技巧的代码尽管往往只占用更少的代码行数，但是要写好它，看懂它，都需要门槛。这种门槛让它不那么直白，甚至自视清高，但代价是易读性的丢失，是维护难度和测试难度的增加，是出错风险的大大提升。

3 vlog #70｜程序员下班后的学习记录｜web3 学习中｜看完《诊疗椅上的谎言》| 《巴菲特致股东的信》｜日常英语学习｜TED｜精神状态很好的一周 😁

每周我补充能量、提供学习动力的一个来源🥰。

句子

1 “注意力在哪里，哪里就有能量”

——polebug23

2 做自我的观察者

其实我以前并不是一个很自律的人，就比如大学时，我室友经常6点多起来学习，而我却无法做到，又或是刷题没一会，就去玩手机了。

但现在的我，在执行力和行动力方面都增强了许多。而这其中，让我发生变化的因素就是：“是否存在一个观察者”。

刚上大学那时候，没有了老师、父母的监管，我很难察觉到自己的状态是否正常，这种感觉就像是，你在一个不透光的房间里玩手机，很难察觉自己其实已经从白天玩到黑夜了。

帮助我打破这种失控局面的方法，就是尝试做自我的观察者，有意识地去观察并记录自己的行为，站在一个第三视角去分析这些行为。

就比如很多时候，我们刷手机并不是因为想刷，而是因为习惯了。就像我以前一开始统计的时候，惊讶地发现，我每天居然要刷手机几十次，而这些行为如果我不去观察，我自己是根本无法发现的。

这个方法其实帮了我很大的忙，一是它让我意识到我把时间到底花在哪了，二是当我习惯去观察自己的时候，这个习惯会在我的脑子里弹出一个提示，让我去确认我当下是否想做这件事情，这个对我自己形成了很强的约束力。

——polebug23

筷筷小报#1 - 使用沉浸式翻译打平信息差

筷筷 — Thu, 22 Aug 2024 00:00:00 GMT

开源动态

1 ViteConf2024将会在10月3号至4号在线上举行，大会的title是 Building together, lightning fast.

ViteConf 将有来自 Vite 及其生态系统的团队进行为期24小时的演讲马拉松。ViteConf 的目的是聚集社区成员，共同构建下一代前端工具链。在 ViteConf 中，你可以了解 Vite 生态系统中的最新创新和技术。

在「文章.1」中，介绍了 ViteConf 2024 的亮点。

可以去官网领取你的门票～

2 TC39 新提案安全赋值运算符（?=）

此提案引入了一个新运算符， ?= （安全赋值运算符），它通过将函数的结果转换为元组来简化错误处理。如果函数抛出错误，则该运算符返回 [error, null] ；如果函数执行成功，则返回 [null, result] 。该运算符与promises、异步函数以及实现 Symbol.result 方法的任何值兼容。

示例：

const [error, response] ?= await fetch("https://arthur.place")

提出提案的动机：

简化错误处理：通过消除对 try-catch 块的需求来简化错误管理。
增强可读性：通过减少嵌套来提高代码的清晰性，并使错误处理的流程更直观。
跨 API一致性：在各种 API 之间建立统一的错误处理方法，确保可预测的行为。
改进安全性：减少忽略错误处理的风险，从而增强代码的整体安全性。

具体提案请看 ECMAScript 安全赋值运算符草案，目前这个草案有700+⭐️，在8月25日提案作者还会开一个Discord通话与社区一起讨论，如果感兴趣可以参加。

工具推荐

1 沉浸式翻译（超推荐🥰）

我可以向你保证，在使用它之后，就离不开它了。我一般会借助它协助我阅读文档，技术博客，Youtube翻译字幕，学习成长速度倍增。

在「视频.2」中，简单介绍了沉浸式翻译如何使用。

在「视频.3」和「播客.2」中，讲述沉浸式翻译背后的独立开发者Owen的故事，沉浸式翻译的灵感来源（创意来自一本书，其中的翻译方式就是中英文隔段落对照的方式）以及如何诞生，Owen作为独立开发者的经验分享，对注意力自由的探讨。

【教程】3步快速免费接入大模型（以豆包大模型为例）

你需要打开豆包大模型，登录并实名认证（实名后大部分模型都有提供免费50万Token）
在模型推理-在线推理中创建推理接入点，选择一个模型，有字节的豆包，月之暗面的Moonshot，智谱GLM3等等，推荐选择10000 RPM的模型。选择好后点击接入模型，留意”ep-”开头的字符串，待会要用到。
点击API Key管理，创建你的API Key，并复制。
配置你的沉浸式翻译插件，找到豆包大模型，点击修改。在修改界面将APIKEY和ep开头的接入点复制进去，然后将翻译服务选择豆包大模型，就可以调用模型的能力进行翻译啦~

最后我们来对比下不同翻译平台的翻译效果：

原文： What are the benefits of Islands?

The most obvious benefit of building with Astro Islands is performance: the majority of your website is converted to fast, static HTML and JavaScript is only loaded for the individual components that need it. JavaScript is one of the slowest assets that you can load per-byte, so every byte counts.

Another benefit is parallel loading. In the example illustration above, the low-priority “image carousel” island doesn’t need to block the high-priority “header” island. The two load in parallel and hydrate in isolation, meaning that the header becomes interactive immediately without having to wait for the heavier carousel lower down the page.

Even better, you can tell Astro exactly how and when to render each component. If that image carousel is really expensive to load, you can attach a special client directive that tells Astro to only load the carousel when it becomes visible on the page. If the user never sees it, it never loads.

In Astro, it’s up to you as the developer to explicitly tell Astro which components on the page need to also run in the browser. Astro will only hydrate exactly what’s needed on the page and leave the rest of your site as static HTML.

Islands are the secret to Astro’s fast-by-default performance story!

社区译文：群岛的好处有哪些？

Astro 群岛的最明显的好处就是性能：你网站的大部分区域都被转换为了快速、静态的 HTML，JavaScript 只有在需要的时候才会加载到各个组件中。JavaScript 是一个加载得最慢的资源。每一个字节都影响着阅读者的体验！

另一个好处是并行加载。在上面的一些假想例子中，重要性更低的图像轮播不应该阻挡更重要的页头部分的加载。它俩并行加载但独自激活（hydrate），这表明阅读者并不需要等着更沉重的图像轮播加载完毕就可以与页头交互了。

更棒的地方在于：你可以准确地告诉 Astro 如何以及何时渲染每个组件。如果该图像轮播的加载成本真的很高，你可以附加一个特殊的客户端指令，告诉 Astro 仅在轮播在页面上可见时才加载它。如果用户从未看到它，它永远不会被加载。

在 Astro 中，作为开发人员，你可以明确告诉 Astro 你的页面上的哪些组件也需要在客户端浏览器中运行。Astro 只会准确地补充页面上需要交互性的内容，并将你的网站的其余部分保留为静态 HTML。

群岛正是 Astro 在默认情况下能够如此迅速之秘诀！

翻译效果：

2 Refactoring.Guru 图解设计模式

学习设计模式思想和重构思想的网站，配有精致插图和多个语言的代码示例，帮助你更好的理解和学习设计模式和重构。目前设计模式有官方中文，重构章节暂不支持中文，可以使用沉浸式翻译。

文章

1 准备好参加 ViteConf 2024 了吗？

播客

1 WebWorker——No.62 双人相声：OSAwards 2024 国际服前端哪些作品获奖了？

2 硬地骇客——沉浸式翻译背后的故事 | 对话创始人Owen（推荐）

视频

1 vlog #69 | 程序员下班的学习记录｜注意力流向哪里，哪里就有能量｜在读《诊疗椅上的谎言》与《巴菲特致股东的信》｜日常英语学习｜日记本写完啦 🎉

2 沉浸式翻译，强的离谱啊！10大场景使用教程【干货】

3 Owen 聊沉浸式翻译的起源、裸辞三年的经历、做穷人也能用的产品、大亚湾的生活

句子

1 人生并不是与他人比较

我们从小就被学校灌输一种非常畸形的竞争观念，要求我们把同龄人当作是竞争对手，但长大了之后，我发现我的人生并不是与其他人比较，就像《被讨厌的勇气》里面说到，“人生不是与他人的比赛”，“虽然行进距离或速度各不相同，但大家都平等地走在一个平面上。所谓“追求优越性”是指自己不断朝前迈进，而不是比别人高出一等的意思。

如果你总觉得别人的存在会对自己造成危险，你很可能会陷入一种焦虑的状态，总是担心自己不够好或者害怕被他人超越。这种心态不仅会让你感到疲惫，还会阻碍你真正地享受生活和人际关系。

——polebug23

CMJ和ESM

筷筷 — Fri, 09 Aug 2024 00:00:00 GMT

CommonJS

关键词：

社区标准
使用函数实现
仅node环境支持
动态依赖（需要代码运行后才能确定依赖）
动态依赖是同步执行的

原理：

// require函数的伪代码
function require(path){
  if(该模块有缓存吗){
    return 缓存结果;
  }
  function _run(exports, require, module, __filename, __dirname){
    // 模块代码会放到这里
  }
  
  var module = {
    exports: {}
  }
  
  _run.call(
    module.exports, 
    module.exports, 
    require, 
    module, 
    模块路径, 
    模块所在目录
  );
  
  把 module.exports 加入到缓存;
  return module.exports;
}

根据上述伪代码，我们可以得出一个推论：在node环境中，顶层的this，exports关键字，module.exports是一样的。

ES Module

关键词：

官方标准
使用新语法实现
所有环境均支持
同时支持静态依赖和动态依赖静态依赖：在代码运行前就要确定依赖关系
动态依赖是异步的
符号绑定

关于符号绑定：

// module a.js
export let a = 1;
export function changeA(){
  a = 2;
}
 
// index.js
// 导入位置的符号和导出的符号并非赋值，它们引用同一个地址
import {a, changeA} from './a.js';
console.log(a); // 1
changeA();
console.log(a); // 2

面经

commonjs 和 es6 模块的区别是什么？
参考答案：
1. CMJ 是社区标准，ESM 是官方标准
2. CMJ 是使用 API 实现的模块化，ESM 是使用新语法实现的模块化
3. CMJ 仅在 node 环境中支持，ESM 各种环境均支持
4. CMJ 是动态的依赖，同步执行。ESM 既支持动态，也支持静态，动态依赖是异步执行的。
5. ESM 导入时有符号绑定，CMJ 只是普通函数调用和赋值
export 和 export default 的区别是什么？

参考答案： export 为普通导出，又叫做具名导出，顾名思义，它导出的数据必须带有命名，比如变量定义、函数定义这种带有命名的语句。在导出的模块对象中，命名即为模块对象的属性名。在一个模块中可以有多个具名导出。

export default 为默认导出，在模块对象中名称固定为 default，因此无须命名，通常导出一个表达式或字面量。在一个模块中只能有一个默认导出。
下面的模块导出了什么结果？

exports.a = 'a';
module.exports.b = 'b';
this.c = 'c';
module.exports = {
  d: 'd'
}
 
// 导出 {d: 'd'}

下面的代码输入什么结果？

// module counter
let count = 1;
export {count}
export function increase(){
  count++;
}
 
// module main
import { count, increase } from './counter';
import * as counter from './counter';
// 解构赋值，c使用新地址
const { count: c } = counter;
increase();
console.log(count); // 2
console.log(counter.count); // 2
console.log(c);  // 1

WebSocket

筷筷 — Thu, 08 Aug 2024 00:00:00 GMT

实时场景的旧处理方案

考虑网页中的以下场景：

股票K线图
聊天
警报、重要通知
余座
抢购页面的库存
…

上述场景有一个共同的特点——实时性

这种对实时性有要求的页面，会带来一些问题

比如下面的聊天场景

由于HTTP协议是「请求-响应」模式，请求必须在前，响应必须在后，这就导致了服务器无法「主动」的把消息告诉客户端。

在之前，一般使用短轮询、长轮询来解决。

短轮询 short polling

短轮询：客户端每隔一小段时间就向服务器请求一次，询问有没有新消息。

实现短轮询是非常简单的，客户端只需要设置一个计时器不断发送请求即可。

这种方案的缺陷是非常明显的：

会产生大量无意义的请求
会频繁打开关闭连接
实时性并不高

长轮询 long polling

为了降低短轮询的缺陷，演化为长轮询：

长轮询有效的解决了「话痨问题」，让每一次请求和响应都是有意义的。

但长轮询仍然存在问题：

客户端长时间收不到响应会导致超时，从而主动断开和服务器的连接

这种情况是可以处理的，但ajax请求因为超时而结束时，立即重新发送请求到服务器

虽然这种做法会让之前的请求变得无意义，但毕竟比短轮询好多了
由于客户端可能「过早的」请求了服务器，服务器不得不挂起这个请求直到新消息的出现。这会让服务器长时间的占用资源却没什么实际的事情可做。

WebSocket

伴随着HTML5出现的WebSocket，从协议上赋予了服务器主动推送消息的能力。

从上图可以看出：

WebSocket也是建立在TCP协议之上的，利用的是TCP全双工通信的能力
使用WebSocket，会经历两个阶段：握手阶段、通信阶段

虽然优于轮询方案，但WebSocket仍然是有缺点的：

兼容性 WebSocket是HTML5新增的内容，因此古董版本的浏览器并不支持
维持TCP连接需要耗费资源对于那些消息量少的场景，维持TCP连接确实会造成资源的浪费

为了充分利用TCP连接的资源，在使用了WebSocket的页面，可以放弃ajax，都用WebSocket进行通信，当然这会带来程序设计上的一些问题，需要权衡。

握手

WebSocket协议是一个高扩展性的协议，详细内容会比较复杂，这里仅讲解面试中会问到的握手协议。

当客户端需要和服务器使用WebSocket进行通信时，首先会使用HTTP协议完成一次特殊的请求-响应，这一次请求-响应就是WebSocket握手。

在握手阶段，首先由客户端向服务器发送一个请求，请求地址格式如下：

# 使用HTTP
ws://mysite.com/path
# 使用HTTPS
wss://mysite.com/path

请求头如下：

Connection: Upgrade /* 嘿，后续咱们别用HTTP了，升级吧 */
Upgrade: websocket /* 我们把后续的协议升级为websocket */
Sec-WebSocket-Version: 13 /* websocket协议版本就用13好吗？ */
Sec-WebSocket-Key: YWJzZmFkZmFzZmRhYw== /* 暗号：天王盖地虎 */

服务器如果同意，就应该响应下面的消息：

HTTP/1.1 101 Switching Protocols /* 换，马上换协议 */
Connection: Upgrade /* 协议升级了 */
Upgrade: websocket /* 升级到websocket */
Sec-WebSocket-Accept: ZzIzMzQ1Z2V3NDUyMzIzNGVy /* 暗号：小鸡炖蘑菇 */

握手完成，后续消息收发不再使用HTTP，任何一方都可以主动发消息给对方。

面试题

webSocket 协议是什么，能简述一下吗？

参考答案：

websocket 协议 HTML5 带来的新协议，相对于 http，它是一个持久连接的协议，它利用 http 协议完成握手，然后通过 TCP 连接通道发送消息，使用 websocket 协议可以实现服务器主动推送消息。

首先，客户端若要发起 websocket 连接，首先必须向服务器发送 http 请求以完成握手，请求行中的 path 需要使用ws:开头的地址，请求头中要分别加入upgrade、connection、Sec-WebSocket-Key、Sec-WebSocket-Version标记

然后，服务器收到请求后，发现这是一个 websocket 协议的握手请求，于是响应行中包含Switching Protocols，同时响应头中包含upgrade、connection、Sec-WebSocket-Accept标记

当客户端收到响应后即可完成握手，随后使用建立的 TCP 连接直接发送和接收消息。
webSocket 与传统的 http 有什么优势

参考答案：

当页面中需要观察实时数据的变化（比如聊天、k 线图）时，过去我们往往使用两种方式完成

第一种是短轮询，即客户端每隔一段时间就向服务器发送消息，询问有没有新的数据

第二种是长轮询，发起一次请求询问服务器，服务器可以将该请求挂起，等到有新消息时再进行响应。响应后，客户端立即又发起一次请求，重复整个流程。

无论是哪一种方式，都暴露了 http 协议的弱点，即响应必须在请求之后发生，服务器是被动的，无法主动推送消息。而让客户端不断的发起请求又白白的占用了资源。

websocket 的出现就是为了解决这个问题，它利用 http 协议完成握手之后，就可以与服务器建立持久的连接，服务器可以在任何需要的时候，主动推送消息给客户端，这样占用的资源最少，同时实时性也最高。
前端如何实现即时通讯？
参考答案：
1. 短轮询。即客户端每隔一段时间就向服务器发送消息，询问有没有新的数据
2. 长轮询，发起一次请求询问服务器，服务器可以将该请求挂起，等到有新消息时再进行响应。响应后，客户端立即又发起一次请求，重复整个流程。
3. websocket，握手完毕后会建立持久性的连接通道，随后服务器可以在任何时候推送新消息给客户端。

最后感谢袁老师对WebSocket的讲解！

函数柯里化

筷筷 — Wed, 07 Aug 2024 00:00:00 GMT

什么是函数柯里化

在计算机科学中，柯里化，是将一个多参数函数转换为一系列单参数函数。在柯里化过程中，一个接受多个参数的函数被转换成一个接受单个参数的函数，这个单参数函数返回另一个函数，后者再接受下一个参数，以此类推，直到所有参数都被提供，最终执行原函数。

柯里化快速入门

假设我们有一个求取两个数之和的函数：

function add(a, b) {
	return a + b
}
 
console.log(add(1, 2))
console.log(add(3, 4))

在上面的示例中，我们有一个 add 函数，接收两个形参，返回两形参的和。

在调用的时候，我们每次也需要传递两个参数。

现在，我们对其进行柯里化，如下：

function add(a) {
	return function(b) {
		return a + b
	}
}
 
console.log(add(1)(2))
console.log(add(3)(4))

在上面的代码中，我们对 add 函数进行了柯里化改造，只接受一个参数，但是返回的也不是值了，而是返回一个函数，这个函数也接收一个参数，然后利用闭包的特性，可以访问到最开始传入的 x 的值，最终返回 x 和 y 的和。

所以，通过上面的这个示例，我们能够体会到前面所说的柯里化函数的特点：

一个柯里化的函数首先会接受一些参数，接受了这些参数之后，该函数并不会立即求值，而是继续返回另外一个函数，刚才传入的参数在函数形成的闭包中被保存起来。待到函数被真正需要求值的时候，之前传入的所有参数都会被一次性用于求值。

函数柯里化实际应用

柯里化最大的好处就是参数复用。

应用场景示例：

下方是一个正则的校验函数，正常来说直接调用 check 函数就可以了，但是如果我有很多地方都要校验是否有数字，其实就是需要将第一个参数 reg 进行复用，这样别的地方就能够直接调用 hasNumber、hasLetter 等函数，让参数能够复用，调用起来也更方便。

// 正常正则验证字符串 reg.test(txt)
 
// 函数封装后
function check(reg, txt) {
    return reg.test(txt)
}
 
// 即使是相同的正则表达式，也需要重新传递一次
console.log(check(/\d+/g, 'test1')); // true
console.log(check(/\d+/g, 'testtest')); // false
console.log(check(/[a-z]+/g, 'test')); // true
 
// Currying后
function curryingCheck(reg) {
    return function (txt) {
        return reg.test(txt)
    }
}
 
// 正则表达式通过闭包保存了起来
var hasNumber = curryingCheck(/\d+/g)
var hasLetter = curryingCheck(/[a-z]+/g)
 
console.log(hasNumber('test1')); // true
console.log(hasNumber('testtest'));  // false
console.log(hasLetter('21212')); // false

经典柯里化面试题

1 实现一个 add 方法，使计算结果能够满足如下预期：

add(1)(2)(3) = 6;
add(1, 2, 3)(4) = 10;
add(1)(2)(3)(4)(5) = 15;

要完成上面的需求，我们就可以使用柯里化函数：

function add(...args) {
	// 第一次执行时，定义一个数组专门用来存储所有的参数
	const _args = args.slice()
 
	// 在内部声明一个函数，利用闭包的特性保存 _args 并收集所有的参数值
	const _adder = function () {
		_args.push(...arguments);
		return _adder;
	};
 
	// 利用 toString 隐式转换的特性，当最后执行时显式或隐式调用这个函数，返回 _args 的累加和
	_adder.toString = function () {
		return _args.reduce((pre, cur) => pre + cur);
	}
 
	// 这个 return 是第一次调用的时候返回上面的函数体，
	// 这样后面所有的括号再执行的时候就是执行 _adder 函数体
	return _adder;
}
 
// 我们可以显式或隐式调用这个函数
// 1 显式使用 toString() 方法
 console.log(add(1)(2)(3).toString()); // 输出数字： 6
console.log(add(1, 2, 3)(4).toString()); // 输出数字： 10
// 2 隐式转换自动调用 toString() 方法
console.log(''+add(1)(2)(3)(4)(5)); // 输出字符串： '15'
console.log(String(add(2, 6)(1))); // 输出字符串： '9'
alert(add(1, 2, 3)(4)) // 输出字符串： '10'

2 实现一个toCurry的函数

const add(a, b, c) {
	return a + b + c
}
 
const curryAdd = toCurry(add)
 
curryAdd(1,2)(3)  // 6
curryAdd(1)(2)(3) // 6
curryAdd(1)(4, 6) // 11

由于函数参数是固定的，可以根据参数的数量判断是否执行fn：

function toCurry(fn) {
	return function curried (...args) {
		if (args.length >= fn.length) {
			return fn.apply(this, args)
		} else {
			return function (...args2) {
				return curried.apply(this, args.concat(args2))
			}
		}
	}
}

toString方法和隐式类型转换

toString方法

在 JavaScript 中，toString 方法是一个对象的默认方法，当对象被转换为字符串时，JavaScript 引擎会自动调用该对象的 toString 方法。你可以通过重写对象的 toString 方法来定义对象的字符串表示形式。

隐式类型转换

简介：JavaScript 中的类型转换是自动发生的。隐式类型转换通常出现在使用操作符（如加法运算符 +）时，操作数的类型不完全匹配。在这些情况下，JavaScript 引擎会自动将操作数转换为适当的类型以执行操作。
转换为字符串：当你使用 alert 或触发对象到字符串的隐式转换时，如果传递的是一个对象，JavaScript 会隐式地调用该对象的 toString 方法，并将其作为字符串输出。
String 函数：String 函数也可以将对象转换为字符串。

手写一个call方法

筷筷 — Sat, 03 Aug 2024 00:00:00 GMT

手写call方法大致有以下几个步骤：

参数归一化：首先处理 call 方法的上下文参数 ctx。

收集参数：使用剩余参数语法（…args）来收集传递给 call 方法的所有参数，这些参数将被用于后续的函数调用。

确定调用函数。

绑定 this 并调用函数：将函数的 this 绑定到 ctx 上。

使用唯一的属性名

执行函数并返回函数执行结果

1 参数归一化

为了手写call方法，我们需要先看下call方法是怎么实现的，先写一个示例：

Function.prototype.myCall = function(ctx) {
}
 
function test(a, b) {
	console.log('arg', a, b);
	console.log('this', this);
}
 
test.call(666, 1, 2); // this Object(666)
test.call(true, 1, 2); // this Object(true)
test.call(null, 1, 2); // this window
test.call(undefined, 1, 2); // this window
test.call({a: 1}, 1, 2); // this {a: 1}

从打印可以看出this参数是由Object()方法包装过后的值，如果为null或者undefined，那么this为globalThis。

那么，在我们的myCall函数上，可以使用参数归一化的策略来处理传过来的context。

Function.prototype.myCall = function(ctx) {
	ctx = ctx === null || ctx === undefined ? globalThis : Object(ctx);
}

2 收集参数

处理完ctx之后，我们还需要处理传过来的参数，由于参数不固定，所以我们使用剩余参数语法收集参数。它用于表示函数的参数数量不确定，可以将多个参数收集到一个数组中。

Function.prototype.myCall = function(ctx, ...args) {
	ctx = ctx === null || ctx === undefined ? globalThis : Object(ctx);
}

现在我们处理好了ctx和参数，接下来我们还需要解决以下问题去实现myCall函数：

找到是哪个函数调用了myCall
怎么将函数的this指向ctx

3 找到是哪个函数调用了myCall

在myCall中的this就是调用myCall的函数。

Function.prototype.myCall = function(ctx, ...args) {
	ctx = ctx === null || ctx === undefined ? globalThis : Object(ctx);
	const fn = this
}

4 绑定 this 并调用函数

我们直接用ctx来调用fn，来达成将fn的this指向ctx的目的。

Function.prototype.myCall = function(ctx, ...args) {
	ctx = ctx === null || ctx === undefined ? globalThis : Object(ctx);
	const fn = this
	ctx.fn = fn
	const res = ctx.fn(...args)
	return res
}
 
function test(a, b) {
	console.log('arg', a, b);  // arg 1 2
	console.log('this', this);  // this window
	return a + b;
}
 
const obj = {
	a: 1,
	fn() {
		console.log('obj function')
	}
}
 
const res = test.myCall(obj, 1, 2);
console.log('res', res);  // 3
console.log('obj', obj)

看起来这样做就完事了，但是如果obj上有 fn 属性的话，myCall 方法会覆盖该属性的值，从而导致原有的 fn 属性值丢失。

5 使用唯一的属性名

为了避免这种情况，可以使用一个唯一的符号（Symbol）来作为属性名。

Function.prototype.myCall = function(ctx, ...args) {
	ctx = ctx === null || ctx === undefined ? globalThis : Object(ctx);
	const fn = this
	const uniqueFn = Symbol('fn') // 使用 Symbol 创建一个唯一的属性名
	ctx[uniqueFn] = fn
	const res = ctx[uniqueFn](...args)
	delete ctx[uniqueFn] // 调用后删除该属性
	return res
}
 
function test(a, b) {
	console.log('arg', a, b);  // arg 1 2
	console.log('this', this);  // this window
	return a + b;
}
 
const obj = {
	a: 1,
	fn() {
		console.log('obj function')
	}
}
 
const res = test.myCall(obj, 1, 2);
console.log('res', res);  // 3
console.log('obj', obj)

这样我们传入的ctx（即obj）就不会被修改了。我们手写的call方法就写好了。

番外

在控制台的打印中，我们可以看到 this 打印出来的值含有Symbol(fn)，这是因为在调用 test 函数时，test 的 this 指向 obj ，obj 中的Symbol(fn)属性还未被删去。

如果在 test 函数中使用了 this 用于枚举，那么Symbol(fn)也会被枚举，由于这是意料之外属性，它不应该被枚举。那么我们可以使用[[属性描述符]]中的Object.defineProperty方法来设置该属性不可枚举。

Object.defineProperty() 静态方法会直接在一个对象上定义一个新属性，或修改其现有属性，并返回此对象。

 Function.prototype.myCall = function(ctx, ...args) {
	ctx = ctx === null || ctx === undefined ? globalThis : Object(ctx);
	const fn = this
	const uniqueFn = Symbol('fn') // 使用 Symbol 创建一个唯一的属性名
	
	// 给ctx设置uniqueFn属性
	Object.defineProperty(ctx, uniqueFn, {
		value: fn, // 属性值为fn
		enumerable: false, // 不可枚举
		configurable: true, // 可以配置
		writable: false // 不可修改
	})
 
	const res = ctx[uniqueFn](...args)
	delete ctx[uniqueFn] // 调用后删除该属性
	return res
}

缓存基本原理

筷筷 — Wed, 31 Jul 2024 00:00:00 GMT

在一个C/S结构中，最基本的缓存分为两种：

客户端缓存
服务器缓存

本文仅讨论客户端缓存

所谓客户端缓存，顾名思义，是将某一次的响应结果保存在客户端（比如浏览器）中，而后续的请求仅需要从缓存中读取即可，极大的降低了服务器的处理压力。

客户端缓存的原理如下：

这只是一个简易的原理图，实际情况可能有差异

这里就设计到一个缓存策略的问题，这些问题包括：

哪些资源需要加入到缓存，哪些不需要？
缓存的时间是多久呢？
如果服务器的资源有改动，客户端如何更新缓存呢？
如果缓存过期了，可是服务器上的资源并没有发生变动，又该如何处理呢？
…

要回答这些问题，就必须要清楚http中关于缓存的协议

理解了http的缓存协议，自然就能回答上面的问题了。

来自服务器的缓存指令

当客户端发出一个get请求到服务器，服务器可能有以下的内心活动：「你请求的这个资源，我很少会改动它，干脆你把它缓存起来吧，以后就不要来烦我了」

为了表达这个美好的愿望，服务器在响应头中加入了以下内容：

Cache-Control: max-age=3600  
ETag: W/"121-171ca289ebf"  
Date: Thu, 30 Apr 2020 12:39:56 GMT  
Last-Modified: Thu, 30 Apr 2020 08:16:31 GMT

这个响应头表达了下面的信息：

Cache-Control: max-age=3600，我希望你把这个资源缓存起来，缓存时间是3600秒（1小时）
ETag: W/"121-171ca289ebf"，这个资源的编号是W/"121-171ca289ebf"
Date: Thu, 30 Apr 2020 12:39:56 GMT，我给你响应这个资源的服务器时间是格林威治时间2020-04-30 12:39:56
Last-Modified: Thu, 30 Apr 2020 08:16:31 GMT，这个资源的上一次修改时间是格林威治时间2020-04-30 08:16:31

为什么使用GMT时间？因为GMT和UTC在现代时间标准中是一致的，是全球统一的时间标准，不受任何特定时区的影响。这确保了无论用户位于世界的哪个角落，HTTP响应的时间都是一致的。

这个美好的缓存愿望，就这样通过响应头传递给客户端了

如果客户端是其他应用程序，可能并不会理会服务器的愿望，也就是说，可能根本不会缓存任何东西。

但是凑巧客户端是一个浏览器，它和服务器一直以来都是相亲相爱的小伙伴，当浏览器看到服务器的这个响应头表达的美好愿望后，立即忙起来：

浏览器把这次请求得到的响应体缓存到本地文件中
浏览器标记这次请求的请求方法和请求路径
浏览器标记这次缓存的时间是3600秒
浏览器记录服务器的响应时间是格林威治时间2020-04-30 12:39:56
浏览器记录服务器给予的资源编号W/"121-171ca289ebf"
浏览器记录资源的上一次修改时间是格林威治时间2020-04-30 08:16:31

这一次的记录非常重要，它为以后浏览器要不要去请求服务器提供了各种依据。

来自客户端的缓存指令

当客户端收拾好行李，准备再次请求GET /index.js时，它突然想起了一件事：我需要的东西在不在缓存里呢？

此时，客户端会到缓存中去寻找是否有缓存的资源

寻找的过程如下：

缓存中是否有匹配的请求方法和路径？
如果有，该缓存资源是否还有效呢？

以上两个验证会导致浏览器产生不同的行为

要验证是否有匹配的缓存非常简单，只需要验证当前的请求方法GET和当前的请求路径/index.js是否有对应的缓存存在即可

如果没有，就直接请求服务器，就和第一次请求服务器时一样，这种情况没有什么好讨论的

关键在于验证缓存是否有效

如何验证呢？

非常简单，就是把max-age + Date，得到一个过期时间，看看这个过期时间是否大于当前时间，如果是，则表示缓存还没有过期，仍然有效，如果不是，则表示缓存失效。

缓存有效

当浏览器发现缓存有效时，完全不会请求服务器，直接使用缓存即可得到结果

此时，如果你断开网络，会发现资源仍然可用 (disk cache)

这种情况会极大的降低服务器压力，但当服务器更改了资源后，浏览器是不知道的，只要缓存有效，它就会直接使用缓存

缓存无效

当浏览器发现缓存已经过期，它并不会简单的把缓存删除，而是抱着一丝希望，想问问服务器，我这个缓存还能继续使用吗？

于是，浏览器向服务器发出了一个带缓存的请求，又称之为协商缓存

所谓带缓存的请求，无非就是加入了以下某些请求头：

If-Modified-Since: Thu, 30 Apr 2020 08:16:31 GMT  
If-None-Match: W/"121-171ca289ebf"

它们表达了下面的信息：

If-Modified-Since: Thu, 30 Apr 2020 08:16:31 GMT，亲，你曾经告诉我，这个资源的上一次修改时间是格林威治时间2020-04-30 08:16:31，请问这个资源在这个时间之后有发生变动吗？
If-None-Match: W/"121-171ca289ebf"，亲，你曾经告诉我，这个资源的编号是W/"121-171ca289ebf，请问这个资源的编号发生变动了吗？

其实，这两个问题可以合并为一个问题：快说！资源到底变了没有！

之所以要发两个信息，是为了兼容不同的服务器，因为有些服务器只认If-Modified-Since，有些服务器只认If-None-Match，有些服务器两个都认

目前的很多服务器，只要发现If-None-Match存在，就不会去看 If-Modified-Since

If-Modified-Since是http1.0版本的规范，If-None-Match是http1.1的规范

此时，问题又抛给了服务器，接下来，就是服务器的表演时间了

服务器可能会产生两个情况：

缓存已经失效
缓存仍然有效

如果是第一种情况——缓存已经失效，那么非常简单，服务器再次给予一个正常的响应（响应码200 带响应体），同时可以附带上新的缓存指令，这就回到了上一节——来自服务器的缓存指令

这样一来，客户端就会重新缓存新的内容

但如果服务器觉得缓存仍然有效，它可以通过一种极其简单的方式告诉客户端：

响应码为304 Not Modified
无响应体
响应头带上新的缓存指令，见上一节——来自服务器的缓存指令

这样一来，就相当于告诉客户端：「你的缓存资源仍然可用，我给你一个新的缓存时间，你那边更新一下就可以了」

于是，客户端就继续happy的使用缓存了

这样一来，可以最大程度的减少网络传输，因为如果资源还有效，服务器就不会传输消息体

它们完整的交互过程如下：

细节

Cache-Control

在上述的讲解中，Cache-Control是服务器向客户端响应的一个消息头，它提供了一个max-age用于指定缓存时间。

实际上，Cache-Control还可以设置下面一个或多个值：

public：指示服务器资源是公开的。比如有一个页面资源，所有人看到的都是一样的。这个值对于浏览器而言没有什么意义，但可能在某些场景可能有用。本着「我告知，你随意」的原则，http协议中很多时候都是客户端或服务器告诉另一端详细的信息，至于另一端用不用，完全看它自己。
private：指示服务器资源是私有的。比如有一个页面资源，每个用户看到的都不一样。这个值对于浏览器而言没有什么意义，但可能在某些场景可能有用。本着「我告知，你随意」的原则，http协议中很多时候都是客户端或服务器告诉另一端详细的信息，至于另一端用不用，完全看它自己。
no-cache：告知客户端，你可以缓存这个资源，但是不要直接使用它。当你缓存之后，后续的每一次请求都需要附带缓存指令，让服务器告诉你这个资源有没有过期。即协商缓存。
no-store：告知客户端，不要对这个资源做任何的缓存，之后的每一次请求都按照正常的普通请求进行。若设置了这个值，浏览器将不会对该资源做出任何的缓存处理。
max-age：不再赘述

比如，Cache-Control: public, max-age=3600表示这是一个公开资源，请缓存1个小时。

又比如，Cache-Control: public, max-age=0, must-revalidate 表示这是一个公开资源，客户端可以缓存资源，每次使用缓存资源前都必须重新验证其有效性。这意味着每次都会发起 HTTP 请求，但当缓存内容仍有效时可以跳过 HTTP 响应体的下载。

Expires

在http1.0版本中，是通过Expires响应头来指定过期时间点的，例如：

Expires: Thu, 30 Apr 2020 23:38:38 GMT

到了http1.1版本，已更改为通过Cache-Control的max-age来记录了。

记录缓存时的有效期

浏览器会按照服务器响应头的要求，自动记录缓存到本地文件，并设置各种相关信息

在这些信息中，有效期尤为关键，它决定了这个缓存可以使用多久

浏览器会根据服务器不同的响应情况，设置不同的有效期

具体的有效期设置，按照下面的流程进行：

例如，当max-age设置为0时，缓存立即过期

虽然立即过期，但缓存仍然被记录下来，后续的请求通过缓存指令发送到服务器，来确认资源是否被更改。

因此，Cache-Control: max-age=0类似于Cache-Control: no-cache

Vary

有的时候，是否有缓存，不仅仅是判断请求方法和请求路径是否匹配，可能还要判断头部信息是否匹配。

此时，就可以使用Vary字段来指定要区分的消息头

比如，当使用GET /personal.html请求服务器时，请求头中cookie的值不一样，得到的页面也不一样

如果还按照之前的做法，仅仅匹配请求方法和请求路径，如果cookie变动，你可能得到的仍然是之前的页面。

正确的做法如下：

使用版本号或hash

如果你是一个前端工程师，使用过vue或其他基于webpack搭建的工程

你会发现打包的结果中很多文件名类似于这样：

app.68297cd8.css

文件的中间部分使用了hash值

这样做的好处是，可以让客户端大胆的、长时间的缓存该文件，减轻服务器的压力

当文件改动后，它的文件hash值也会随之而变，比如变成了app.446fccb8.css

这样一来，客户端要请求新的文件时，就会发现路径从/app.68297cd8.css变成了app.446fccb8.css，由于之前的缓存路径无法匹配到，因此就会发送新的请求来获取新资源了。

以上是现代流行的做法。

而在古老的年代，还没有构建工具出现时，人们使用的办法是在资源路径后面加入版本号来获取新版本的文件

比如，页面中引入了一个css资源app.css，它可能的引入方式是：

<link href="/app.css?v=1.0.0">

这样一来，缓存的路径是/app.css?v=1.0.0

当服务器的版本发生变化时，可以给予新的版本号，让html中的路径发生变动

<link href="/app.css?v=1.0.1">

由于新的路径无法命中缓存，于是浏览器就会发送新的普通请求来获取这个资源 \

总结

服务器视角

服务器无法知道客户端到底有没有像浏览器那样缓存文件，它只管根据请求的情况来决定如何响应。

很多后端语言搭建的服务器都会自带自己的默认缓存规则，当然也支持不同程度的修改。

浏览器视角

浏览器在发出请求时会判断要不要使用缓存

当收到服务器响应时，会自动根据缓存指令进行处理

最后感谢袁老师由浅入深的讲解

控制并发数量

筷筷 — Mon, 29 Jul 2024 00:00:00 GMT

关键点：1. 通过执行函数控制并发数量；2. 在单个请求结束后再次调用执行函数；3. 考察对promise的理解

方式1

封装一个timeout模拟request
封装控制并发的类
- 添加任务函数add
  - 将任务添加到请求队列中（resolve和reject用来标识该任务的状态）
  - 尝试执行
- 执行任务函数run
  - 判断是否可以执行任务
  - 执行完任务后递归调用

// 模拟发送请求接收到数据：返回一个promise，time时间到了，promise完成
function timeout(time) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve()
        }, time)
    })
}
 
class SuperTask {
    constructor(maxCount = 2) {
        // 最大并发数量
        this.maxCount = maxCount
        // 请求队列
        this.requestQueue = []
        // 当前正在进行请求的并发数
        this.currentCount = 0
    }
    // 添加任务到请求队列中
    add(task) {
        return new Promise((resolve, reject) => {
            this.requestQueue.push({
                task,
                resolve,
                reject
            })
            // 尝试执行任务
            this.run()
        })
    }
    // 执行任务：判断当前的并发数，执行我们的任务
    run() {
        while (this.currentCount < this.maxCount && this.requestQueue.length !== 0) {
            // 拿出任务
            const { task, resolve, reject } = this.requestQueue.shift()
            this.currentCount++
            // 执行任务，在执行完毕后，需要再次调用run
            task().then(resolve, reject).finally(() => {
                // 任务执行完毕
                this.currentCount--
                this.run()
            })
        }
    }
}
 
const superTask = new SuperTask(2)
 
function addTask(time, name) {
    superTask
        .add(() => timeout(time))
        .then(() => {
            console.log(`任务${name}完成`)
        })
}
 
addTask(10000, 1) // 10000s后输出：任务1完成
addTask(5000, 2) // 5000s后输出：任务2完成
addTask(3000, 3) // 8000s后输出：任务3完成
addTask(4000, 4) // 12000s后输出：任务4完成
addTask(5000, 5) // 15000s后输出：任务5完成
addTask(6000, 6) // 18000s后输出：任务6完成

方式2（给一个urls数组）

/**
 * 并发请求
 * @param {string[]} urls 待请求的url数组
 * @param {number} maxNum 最大并发数
 */
function concurRequest(urls, maxNum) {
    return new Promise(resolve => {
        // 边缘条件
        if (urls.length === 0) {
            resolve([])
            return
        }
        // 存储结果
        const result = new Array(urls.length).fill(null)
        // 当前需要的请求位置
        let index = 0
        // 请求
        async function request() {
            const i = index
            const url = urls[index]
            index++
            try {
                const res = await fetch(url)
                result[i] = res
            } catch (err) {
                result[i] = err
            } finally {
                // 递归调用下一次请求
                // 判断当前请求队列是否遍历完
                if (index === urls.length) {
                    // 收集结果
                    resolve(result)
                    return
                }
                request()
            }
        }
  
        const min = Math.min(maxNum, urls.length)
        for (let i = 0; i < min; i++) {
            request()
        }
    })
 
}
 
const urls = []
for (let i = 1; i <= 100; i++) {
    urls.push(`https://jsonplaceholder.typicode.com/todos/${i}`)
}
 
concurRequest(urls, 100).then((res) => {
    console.log(res);
})

面试题：浏览器的最大并发请求数量是多少？为什么这么设计？

在HTTP版本为1.1时，现代浏览器例如Chrome一般对同一域名的最大并发请求数量限制在6个，也就是对同一域开启的TCP链接最多为6个。这种设计主要是为了避免对服务器造成过大的负载，确保网络资源合理使用，并提高用户的网页加载速度和整体浏览体验。

如果并发请求数量过多，可能会导致服务器响应变慢，甚至无法响应，从而影响用户体验。

跨域问题及解决方案

筷筷 — Sun, 28 Jul 2024 00:00:00 GMT

同源策略及跨域问题

同源策略是一套浏览器的安全机制，它对同源资源放行，对跨域资源限制。

因此限制造成的开发问题，称之为跨域问题。

什么是同源

源 = 协议 + 域名 + 端口

同源即相同的协议、域名和端口号。

跨域出现的场景

网络通信
- a元素的跳转；加载CSS、JS、图片等；AJAX等等
JS API
- window.open，window.parent，iframe

本文重点讨论网络通信中的Ajax跨域问题。

跨域解决方案

CORS（跨域资源共享）

跨源资源共享（CORS，或通俗地译为跨域资源共享）是一种基于 HTTP 头的机制，该机制通过允许服务器标示除了它自己以外的其他源（域、协议或端口），使得浏览器允许这些源访问加载自己的资源。跨源资源共享还通过一种机制来检查服务器是否会允许要发送的真实请求，该机制通过浏览器发起一个到服务器托管的跨源资源的“预检”请求。在预检中，浏览器发送的头中标示有 HTTP 方法和真实请求中会用到的头。

CORS的基本理念是：

只要服务器明确表示允许，则校验通过
服务器明确拒绝或没有表示，则校验不通过

所以，使用CORS解决跨域，必须要保证服务器是「自己人」。

请求分类

CORS将请求分为两类：简单请求和预检请求

对不同种类的请求它的规则有所区别。

所以要理解CORS，首先要理解它是如何划分请求的。

简单请求

完整判定逻辑：简单请求

简单来说，只要满足下列条件，就是简单请求：

请求方法是GET、POST、HEAD之一
头部字段满足CORS安全规范

浏览器请求默认自带的头部字段都是满足安全规范的，只要开发者不改动和新增头部，就不会打破此规则。

如果有Content-Type，必须是下列值中的一个
- text/plain
- multipart/form-data
- application/x-www-form-urlencoded

预检请求（preflight）

不是简单请求的就是预检请求，“需预检的请求”要求必须首先使用 OPTIONS 方法发起一个预检请求到服务器，以获知服务器是否允许该实际请求。“预检请求“的使用，可以避免跨域请求对服务器的用户数据产生未预期的影响。

对于简单请求的验证

对于预检请求的验证

发送预检请求

OPTIONS 预检请求中同时携带了下面两个标头字段：

Access-Control-Request-Method: POST
Access-Control-Request-Headers: a, b, Content-Type

标头字段 Access-Control-Request-Method 告知服务器，实际请求将使用 POST 方法。标头字段 Access-Control-Request-Headers 告知服务器，实际请求将携带三个自定义请求标头字段：a、b 与 Content-Type。服务器据此决定，该实际请求是否被允许。

服务器响应预检请求，表明服务器将接受后续的实际请求方法和实际请求头。

Access-Control-Allow-Origin: http://abc.com
Access-Control-Allow-Methods: POST
Access-Control-Allow-Headers: a, b, Content-Type
Access-Control-Max-Age: 86400

服务器的响应携带了 Access-Control-Allow-Origin: http://abc.com，从而限制请求的源域。同时，携带的 Access-Control-Allow-Methods 表明服务器允许客户端使用 POST 方法发起请求。

标头字段 Access-Control-Allow-Headers 表明服务器允许请求中携带字段 a、b 与 Content-Type。与 Access-Control-Allow-Methods 一样，Access-Control-Allow-Headers 的值为逗号分割的列表。

最后，标头字段 Access-Control-Max-Age 给定了该预检请求可供缓存的时间长短，单位为秒，默认值是 5 秒。在有效时间内，浏览器无须为同一请求再次发起预检请求。以上例子中，该响应的有效时间为 86400 秒，也就是 24 小时。请注意，浏览器自身维护了一个最大有效时间，如果该标头字段的值超过了最大有效时间，将不会生效。

预检请求完成之后，发送实际请求。

发送真实请求（和简单请求一致）

携带身份凭证的请求（cookie）

默认情况下，ajax的跨域请求并不会附带cookie，某些需要权限的操作就无法进行。

我们可以通过简单的配置来实现跨域请求附带cookie的效果：

// xhr
const xhr = new XMLHttpRequset()
xhr.withCredentials = true
 
// fetch
fetch(url, {
	credentails: "include"
})

这样，无论是简单请求还是预检请求，都会在请求头中添加cookie字段。

但是，如果服务器端的响应中未携带 Access-Control-Allow-Credentials: true，浏览器将不会把响应内容返回给请求的发送者。具体来说：

如果请求是预检请求，那么在预检请求时不会包含凭据。如果服务器对预检请求的响应将 Access-Control-Allow-Credentials 标头设置为 true，则实际请求时将包含凭据；否则，浏览器将报告网络错误。
如果请求时未经过预检，则请求将包含凭据；如果服务器的响应没有将 Access-Control-Allow-Credentials 标头设置为 true，浏览器将报告网络错误。

同时，对于附带身份凭证的请求，服务器：

服务器不能将 Access-Control-Allow-Origin 的值设为通配符“*”，而应将其设置为特定的域，如：Access-Control-Allow-Origin: https://example.com。
服务器不能将 Access-Control-Allow-Headers 的值设为通配符“*”，而应将其设置为标头名称的列表，如：Access-Control-Allow-Headers: X-PINGOTHER, Content-Type
服务器不能将 Access-Control-Allow-Methods 的值设为通配符“*”，而应将其设置为特定请求方法名称的列表，如：Access-Control-Allow-Methods: POST, GET

关于跨域获取响应头中的内容

通过在响应头中设置Access-Control-Expose-Headers。

在跨源访问时，XMLHttpRequest 对象的 getResponseHeader() 方法（或者fetch中使用headers.get()）只能拿到一些最基本的响应头，Cache-Control、Content-Language、Content-Type、Expires、Last-Modified、Pragma，如果要访问其他头，则需要服务器设置该响应头。

JSONP

使用<script>标签发起跨域请求，响应回来的参数是一个callbackName({msg: 'xxxxx'})的形式。

缺陷：

仅能使用GET请求
容易产生安全隐患

恶意攻击者可能利用callback=恶意函数的方式实现XSS攻击

容易被非法站点恶意调用

代理

CORS和JSONP均要求服务器是「自己人」

那如果不是呢？那就找一个「中间人」

如何选择

最重要的依据：保持生产环境和开发环境一致

选择跨域解决方案决策图：

具体使用场景：

生产环境请求静态资源服务器不跨域，请求数据服务器跨域

生产环境没有跨域

浏览器的通信能力

筷筷 — Sat, 27 Jul 2024 00:00:00 GMT

用户代理

浏览器可以代替用户完成http请求，代替用户解析响应结果，所以我们称之为：

用户代理 user agent

在网络层面，浏览器拥有：

自动发出请求的能力
自动解析响应的能力

自动发出请求的能力

用户在地址栏输入url地址，并按下回车。浏览器自动解析url，并发出一个GET请求，同时抛弃当前页面。
用户点击了页面中的a元素。
用户点击了提交按钮。
当解析HTML遇到了<link><img><script><video><audio>等元素，发起GET请求获取资源。
当用户点击刷新。

自动解析响应的能力

浏览器不仅能发送请求，还能够针对服务器的各种响应结果做出不同的自动处理，常见的处理有：

识别响应码
根据响应结果做不同的处理，例如解析Content-Type

基本流程

AJAX

原生能力提供了边界。

Ajax指在web应用中异步向服务器发送请求，实现方式分为XMLHttpRequest(XHR)和Fetch。

arrayBuffer是一个只读的、空间连续的、定长字节数组

上传文件并监控进度

fetch没提供对应API，只有XHR可以做

ChatGPT

CPT的回答使用流式读取

网络分层模型和应用协议

筷筷 — Fri, 26 Jul 2024 00:00:00 GMT

分层模型

五层网络模型

为了方便学习和理解，综合实践中用的多的四层TCP/IP网络模型和七层OSI网络模型，有了五层网络模型。即封面图。

数据的传输

发送方封装数据，接收方解封装数据。

应用层协议

URL

URL不是应用层协议，但它与应用层协议息息相关。URL（Uniform Resource Locator，统一资源定位符）用于定位网络服务。

我们通过URL可以找到网络上的资源，例如网页、视频、音乐等。

URL是一个固定格式的字符串：

它表达了：

从网络中哪台计算机（domain）中的哪个程序（port）寻找哪个服务（path），并注明了获取服务的具体细节（path），以及要用什么样的通信协议（schema）。

注：

http默认端口为80
https默认端口为443
协议、域名和路径是必填的

HTTP

超文本传输协议（Hyper Text Transfer Protocol，HTTP）是一个广泛应用于互联网的应用层协议。

该协议规定了两方面的内容：

传递消息的模式
传递消息的格式

传递消息的模式

HTTP使用了「请求-响应」模式，发起请求的称之为客户端，接受请求并完成响应的称之为服务器。「请求-响应」完成后，一次交互结束。

传递消息的格式

关键信息

请求头 - Host

指定请求的目的地。

GET / HTTP/1.1 Host: www.taobao.com

请求头/响应头 - Content-Type

x/y的形式，声明请求体的格式。

例如：

text/html表示HTML文档。
image/jpeg 表示JPEG图片。
application/x-www-form-urlencoded用于表示query数据，数据以键值对的形式进行编码，每个键值对之间用&符号连接。
multipart/form-data; boundary=aaa允许在表单数据中混合文本字段和二进制文件数据。

使用Array.fill()初始化一个二维数组的小坑

筷筷 — Sun, 21 Jul 2024 00:00:00 GMT

为什么使用两个new Array嵌套不行？

假设我们要创建一个 4*6 的二维数组，里面填满0，使用两个new Array嵌套可以写成：

const arr = new Array(4).fill(new Array(6).fill(false))

此时二维数组已经创建好了，看起来是不是挺好的？

但是当我们修改第二行二列时，会变成这样：

arr[1][1] = true

这是因为arr的所有子数组实际上都是对同一个数组的引用。这意味着对任何一个子数组的修改都会影响其他所有子数组。

在MDN是这么描述Array原型上的fill()方法的

fill(value)
fill(value, start)
fill(value, start, end)

value

用来填充数组元素的值。注意所有数组中的元素都将是这个确定的值：如果 value 是个对象，那么数组的每一项都会引用这个元素。

参考文档

方法1

使用new Array结合map初始化一个m*n的二维数组。

const arr = new Array(m).fill(0).map(_ => new Array(n).fill(0))

这种方法首先创建一个长度为 m 的数组，然后使用 map 函数为每个元素创建一个新的长度为 n 的数组，每个元素都初始化为0。这种方法的好处是每个子数组都是独立的，即它们是新创建的数组，而不是引用同一个数组。

方法2

使用Array.form来初始化一个m*n的二维数组。

const arr = Array.from({length: m}, e => Array(n).fill(0))

Array.from() 函数：这个函数用于从一个类数组对象或可迭代对象创建一个新的数组实例。它接受两个参数：第一个参数是要转换为数组的对象，第二个参数是一个映射函数，用于对每个元素进行处理。
{length: m}：这是一个对象，它有一个 length 属性，其值是 m。这个对象本身不是数组，但它具有一个 length 属性，这使得 Array.from 可以将其转换为一个长度为 m 的数组。
e => Array(n).fill(0)：这是传递给 Array.from 的映射函数。它对于 Array.from 创建的每个元素（在这个例子中，每个元素都是 undefined，因为 {length: m} 对象没有具体的元素值），都创建了一个新的长度为 n 的数组，并将所有元素初始化为 0。

Vue 常见优化手段

筷筷 — Sun, 07 Jul 2024 00:00:00 GMT

性能优化应该在遇到性能问题时针对性的优化，切忌提早优化。

使用Key

对于通过v-for生成的列表，应给每个列表一个稳定且唯一的key值，有利于在列表变动时，尽量少的删除、新增、改动元素。

使用计算属性

如果模板中某个属性会使用多次，并且该属性通过计算得到，可以使用计算属性缓存它们

使用v-show代替v-if

对于频繁切换显示状态的元素，使用v-show可以保证虚拟dom的稳定，避免频繁的新增和删除元素，特别是对于那些内部包含大量dom元素的节点。

使用冻结的对象

使用Object.freeze()冻结对象，冻结的对象不会被Vue响应化。

使用函数式组件

函数式组件是一种定义自身没有任何状态的组件的方式。它们很像纯函数：接收 props，返回 vnodes。函数式组件在渲染过程中不会创建组件实例 (也就是说，没有 this)，也不会触发常规的组件生命周期钩子。

函数式组件只是函数，不会为其创建VueComponent实例，所以渲染开销也低很多。

非实时绑定的表单项

当使用v-model绑定一个表单项时，当用户改变表单项的状态时，也会随之改变数据，从而导致Vue发生重渲染（rerender），这会带来性能开销。

你可以使用lazy修饰符或不使用v-model来减少性能开销，但是这也会导致在某一个时间段内数据和表单项的值不一致。

保持对象引用稳定

在大部分情况下，vue触发rerender的时机是其依赖的数据发生变化，若数据没有变化，就算给数据重新赋值，vue也不会做任何处理。

在给数据重新赋值后，调用setter，首先会判断新值和旧值有没有改变，下方是vue2判断是否改变的代码：

// 判断x, y 是否改变
function hasChanged(x, y) {
	// 两个特殊值
	// NaN === NaN false
	// +0 === -0 true
	if (x === y) {
		// 判断 +0 和 -0
		return x === 0 && 1 / x !== 1 / y
	} else {
		// 判断 NaN
		return x === x || y === y
	}
}

这也说明了引用类型数据的地址改变了，那么该数据会全部重新渲染。

因此，只要能保证组件的依赖数据不发生变化，组件就不会重新渲染。对于基本数据类型，保持其值不变即可。对于引用类型，保持其引用不变即可。

从另一场景来说，一般会将对象数组遍历，将对象传入子组件中渲染。你可以保持该对象数组的引用稳定，来避免对子组件的重渲染。

📌提问：我在使用对象数组遍历时使用了key，那么之后再更新对象数组时修改引用会导致所有依赖该数据的子组件重新渲染吗？

⭕回答：会的。因为对Vue来说该对象数组整体改变，所有依赖该对象数组的组件都会重新渲染。

使用延迟加载（defer）

JS传输完成后，浏览器开始执行JS构造页面。但可能一开始要渲染的组件太多，不仅JS执行时间很长，并且浏览器要渲染的元素过多，导致页面白屏。

一个可行的办法是延迟装载组件，让组件按照指定的先后顺序依次一个一个渲染出来。

延迟装载是一个思路，本质上是利用requestAnimationFrame事件分批渲染内容

JS中的属性描述符

筷筷 — Fri, 05 Jul 2024 00:00:00 GMT

Object上存在两个API：defineProperty()和getOwnPropertyDescriptor()，这两个API可以设置和查看该对象上特定属性（即直接存在于对象上而不在对象的原型链中的属性）的配置。

Object.defineProperty()

Object.defineProperty() 静态方法会直接在一个对象上定义一个新属性，或修改其现有属性，并返回此对象。

Object.defineProperty(obj, prop, descriptor)
 
/* 
	obj  要定义属性的对象。
	prop  一个字符串或Symbol，指定了要定义或修改的属性键。
	descriptor  要定义或修改的属性的描述符。
*/

函数返回值

传入函数的对象，其指定的属性已被添加或修改。

相比直接给对象赋值，definePorperty的区别是什么？

能更自由的配置该对象上的属性：是否可修改、是否可枚举、设置getter和setter等等。

Object.defineProperty() 允许精确地添加或修改对象上的属性。通过赋值添加的普通属性会在枚举属性时（例如 for…in、Object.keys()等）出现，它们的值可以被更改，也可以被删除。此方法允许更改这些额外细节，以使其不同于默认值。默认情况下，使用 Object.defineProperty() 添加的属性是不可写、不可枚举和不可配置的。此外，Object.defineProperty() 使用 [[DefineOwnProperty]] 内部方法，而不是 Set，因此即使属性已经存在，它也不会调用 setter。

对象中存在的属性描述符有两种主要类型：数据描述符和访问器描述符。数据描述符是一个具有可写或不可写值的属性。访问器描述符是借由 getter/setter 函数描述属性。描述符只能是这两种类型之一，不能同时为两者。

数据描述符和访问器描述符都是对象。

共享的可选键值

configurable

默认值为 false。

当设置为 false 时，

该属性的类型不能在数据属性和访问器属性之间更改，且
该属性不可被删除，且
其描述符的其他属性（例如enumerable，value，writable）也不能被更改（但是，如果它是一个可写的数据描述符，则 value 可以被更改，writable 可以更改为 false）。

enumerable

默认值为 false。

值为 true是，该属性可以被枚举。即可以被Object.assign()和展开运算符所考虑在内，对于非Symbol的属性，它还会在for in 和Object.keys()中显示。

数据描述符可选键值

value

默认值为 undefined。

该属性的属性值。可以是任何有效的 JavaScript 值（数字、对象、函数等）。

writable

默认值为 false。此时该属性的属性值不可修改。

为 true时，该属性的属性值可以使用赋值运算符更改，就跟往常修改对象的属性值一样。

访问器描述符可选键值

get

默认值为 undefined。

用作属性 getter 的函数，如果没有 getter 则为 undefined。当访问该属性时，将不带参地调用此函数，并将 this 设置为通过该属性访问的对象（因为可能存在继承关系，这可能不是定义该属性的对象）。返回值将被用作该属性的值。

set

默认值为 undefined。

用作属性 setter 的函数，如果没有 setter 则为 undefined。当该属性被赋值时，将调用此函数，并带有一个参数（要赋给该属性的值），并将 this 设置为通过该属性分配的对象。

Object.getOwnPropertyDescriptor()

Object.getOwnPropertyDescriptor() 静态方法返回一个对象，该对象描述给定对象上特定属性的配置。返回的对象是可变的，但对其进行更改不会影响原始属性的配置。

Object.getOwnPropertyDescriptor(obj, prop)
 
/* 
	obj  要查找其属性的对象。
	prop  要检索其描述的属性的名称或Symbol。
*/

函数返回值

如果指定的属性存在于对象上，则返回其属性描述符，否则返回 undefined。

Vue2中的defineProperty

使用defineProperty对对象中的属性设置getter和setter，当访问此属性值时，记录下访问者（依赖收集），当属性值发生变化时，执行相应的一些函数（派发更新），达到更新视图元素的效果。

/**
 * 观察某个对象的所有属性
 * @param {Object} obj
 */
 
function observe(obj) {
  for (const key in obj) {
    let internalValue = obj[key];
    let funcs = new Set();
    Object.defineProperty(obj, key, {
      get: function () {
        //  依赖收集，记录：哪些函数依赖我
		funcs.add(window.__func);
        return internalValue;
      },
      set: function (val) {
        internalValue = val;
        // 派发更新，运行：执行那些依赖我的函数
        funcs.forEach((func) => func())
      },
    });
  }
}
 
  
// 在函数执行时记录此函数的引用
function autorun(fn) {
  window.__func = fn;
  fn();
  window.__func = null;
}

最后感谢袁老师

什么是事件循环

筷筷 — Tue, 02 Jul 2024 00:00:00 GMT

“如果不会事件循环，那么就别谈前端”。事件循环是浏览器的核心原理。该fragment会讲清楚事件循环的前因后果，帮助更好的理解事件循环。

事件循环和浏览器密切相关。

浏览器的进程模型

什么是进程？

程序运行需要有它自己专属的内存空间，可以把这块内存空间简单的理解为进程。

每个应用至少有一个进程，进程之间相互独立，即使要通信，也需要双方同意。

什么是线程？

有了进程后，就可以运行程序的代码了。

运行代码的「人」称之为「线程」。

一个进程至少有一个线程，所以在进程开启后会自动创建一个线程来运行代码，该线程称之为主线程。

如果程序需要同时执行多块代码，主线程就会启动更多的线程来执行代码，所以一个进程中可以包含多个线程。

小结：一个进程开辟了一片内存空间，进程开启后会创建一个主线程，一个进程中至少有一个线程。

浏览器有哪些进程和线程？

浏览器是一个多进程多线程的应用程序

浏览器内部工作极其复杂。为了避免相互影响，为了减少连环崩溃的几率，当启动浏览器后，它会自动启动多个进程。

可以在浏览器中的更多-任务管理器中查看当前的进程。

其中，最主要的进程有：

浏览器进程

主要负责界面显示、用户交互、子进程管理等。浏览器进程内部会启动多个线程处理不同的任务。
网络进程

负责加载网络资源。网络进程内部会启动多个线程来处理不同的网络任务。
渲染进程

渲染进程启动后，会开启一个渲染主线程，主线程负责执行 HTML、CSS、JS 代码。

默认情况下，浏览器会为每个标签页开启一个新的渲染进程，以保证不同的标签页之间不相互影响。

渲染主线程是如何工作的？

注：因为GUI渲染线程和JS引擎线程互斥，我们可以看作为一个渲染主线程。

渲染主线程是浏览器中最繁忙的线程，需要它处理的任务包括但不限于：

解析 HTML
解析 CSS
计算样式
布局
处理图层
每秒把页面画 60 次 FPS
执行全局 JS 代码
执行事件处理函数
执行计时器的回调函数
…

为什么渲染进程不能够使用多个线程来处理这些事情？

要处理这么多的任务，主线程如何调度任务？

比如：

我正在执行一个 JS 函数，执行到一半的时候用户点击了按钮，我该立即去执行点击事件的处理函数吗？
我正在执行一个 JS 函数，执行到一半的时候某个计时器到达了时间，我该立即去执行它的回调吗？

渲染主线程想出了一个绝妙的主意来处理这个问题：排队

在最开始的时候，渲染主线程会进入一个无限循环
每一次循环会检查消息队列中是否有任务存在。如果有，就取出第一个任务执行，执行完一个后进入下一次循环；如果没有，则进入休眠状态。
其他所有线程（包括其他进程的线程）可以随时向消息队列添加任务。新任务会加到消息队列的末尾。在添加新任务时，如果主线程是休眠状态，则会将其唤醒以继续循环拿取任务。例如计时器线程计时结束，向队列中添加对应的回调；交互线程监听到用户的点击事件，向队列中添加对应的回调。

这样一来，就可以让每个任务有条不紊的、持续的进行下去了。

整个过程，被称之为事件循环Event Loop（消息循环）

若干解释

何为异步？

代码在执行过程中，会遇到一些无法立即处理的任务（异步任务），比如：

计时完成后需要执行的任务 —— setTimeout、setInterval
网络通信完成后需要执行的任务 — XHR、Fetch
用户操作后需要执行的任务 — addEventListener

如果让渲染主线程等待这些任务的时机达到，就会导致主线程长期处于「阻塞」的状态，从而导致浏览器「卡死」。

渲染主线程承担着极其重要的工作，无论如何都不能阻塞！

因此，为了解决单线程导致的阻塞问题，浏览器选择异步来解决这个问题：

当渲染主线程执行一个异步任务时，交给对应的线程执行相应的逻辑，结束当前任务。当对应线程执行完毕后，再将回调包装成任务推入消息队列。

使用异步的方式，渲染主线程永不阻塞。

面试题：如何理解 JS 的异步？

参考答案：

JS是一门单线程的语言，这是因为它运行在浏览器的渲染主线程中，而渲染主线程只有一个。

而渲染主线程承担着诸多的工作，解析HTML、CSS、渲染页面、执行 JS 都在其中运行。

如果使用同步的方式，就极有可能导致主线程产生阻塞，从而导致消息队列中的很多其他任务无法得到执行。这样一来，一方面会导致繁忙的主线程白白的消耗时间，另一方面导致页面无法及时更新，给用户造成卡死现象。

所以浏览器采用异步的方式来避免。具体做法是当某些任务发生时，比如计时器、网络、事件监听，主线程将任务交给其他线程去处理，自身立即结束任务的执行，转而执行后续代码。当其他线程完成时，将事先传递的回调函数包装成任务，加入到消息队列的末尾排队，等待主线程调度执行。

在这种异步模式下，浏览器不会阻塞，从而最大限度的保证了单线程的流畅运行。

JS为何会阻塞渲染？

示例代码：

<h1>我是h1！</h1>
<button>change</button>
<script>
  var h1 = document.querySelector('h1');
  var btn = document.querySelector('button');
 
  // 死循环指定的时间
  function delay(duration) {
    var start = Date.now();
    while (Date.now() - start < duration) {}
  }
 
  btn.onclick = function () {
    h1.textContent = '我更新了！';
    delay(3000);
  };
</script>

在一开始，渲染主线程执行<script>中的代码，把点击事件的监听交给交互线程管理。
之后当点击按钮后，交互线程把回调包装成任务，push进消息队列，渲染主线程拿到消息队列的任务进行执行。
修改了h1的文字，产生了一个新的绘制任务加入到消息队列中，但是此时并没有立即渲染到页面上，因为delay函数阻塞了渲染主线程执行后续的任务。

任务有优先级吗？

任务没有优先级，在消息队列中先进先出。但消息队列是有优先级的，根据 W3C 的最新解释:

每个任务都有一个任务类型，同一个类型的任务必须在一个队列，不同类型的任务可以分属于不同的队列，也可以在一个队列中。在一次事件循环中，浏览器可以根据实际情况从不同的队列中取出任务执行。
浏览器必须准备好一个微队列，微队列中的任务优先所有其他任务执行。

随着浏览器的复杂度急剧提升，W3C 不再使用宏队列的说法。可以理解为宏任务队列可以有多个，微任务队列只有一个。

在目前 chrome 的实现中，至少包含了下面的队列：

延时队列：用于存放计时器到达后的回调任务，优先级「中」
交互队列：用于存放用户操作后产生的事件处理任务，优先级「高」
微队列：用户存放需要最快执行的任务，优先级「最高」

添加任务到微队列的主要方式主要是使用 Promise、MutationObserver

例如：

// 立即把一个函数添加到微队列
Promise.resolve().then(函数)

浏览器还有很多其他的队列，由于和我们开发关系不大，不作考虑

面试题：阐述一下 JS 的事件循环

参考答案：

事件循环是浏览器渲染主线程的工作方式。

在 Chrome 的源码中，它开启一个不会结束的 for 循环，每次循环从消息队列中取出第一个任务执行，而其他线程只需要在合适的时候将任务加入到队列末尾即可。

过去把消息队列简单分为宏队列和微队列，这种说法目前已无法满足复杂的浏览器环境，取而代之的是一种更加灵活多变的处理方式。

根据 W3C 官方的解释，每个任务有不同的类型，同类型的任务必须在同一个队列，不同类型的任务可以属于不同的队列。不同任务队列有不同的优先级，在一次事件循环中，由浏览器自行决定取哪一个队列的任务。但浏览器必须有一个微队列，微队列的任务一定具有最高的优先级，必须优先调度执行。

面试题：JS 中的计时器能做到精确计时吗？为什么？

参考答案：

不行，因为：

计算机硬件没有原子钟，无法做到精确计时

操作系统的计时函数本身就有少量偏差，由于 JS 的计时器最终调用的是操作系统的函数，也就携带了这些偏差

按照 W3C 的标准，浏览器实现计时器时，如果嵌套层级超过 5 层，则会带有 4 毫秒的最少时间，这样在计时时间少于 4 毫秒时又带来了偏差

受事件循环的影响，计时器的回调函数只能在主线程空闲时运行，因此又带来了偏差

最后感谢袁老师

获取指定页面的小程序二维码

筷筷 — Wed, 24 Apr 2024 00:00:00 GMT

参考文档：https://developers.weixin.qq.com/miniprogram/dev/OpenApiDoc/qrcode-link/qr-code/createQRCode.html

功能描述

获取小程序二维码，适用于需要的码数量较少的业务场景。通过该接口生成的小程序码，永久有效，有数量限制，数量限制为 100,000。

注意事项

如果调用成功，会直接返回图片二进制内容，如果请求失败，会返回 JSON 格式的数据。
接口只能生成已发布的小程序的二维码。开发版的带参二维码可以在开发者工具预览时生成。
与 wxacode.get 总共生成的码数量限制为 100,000，请谨慎调用。

代码片段

<template>
    <image :src="base64" mode="aspectFit"/>
</template>
 
<script>
export default {
    data() {
        return {
                base64: ''
        }
    },
    async mounted() {
        // 获取token
        const res = await uni.request({
            url: "https://api.weixin.qq.com/cgi-bin/token",
            data: {
                grant_type: "client_credential",
                appid: "wx3c9ce7c6b461f399",
                secret: "app密钥"
            }
        })
        const access_token = res.data.access_token
        // 获取指定页面的二维码
        uni.request({
            // 在查询字符串中加入token
            url: `https://api.weixin.qq.com/cgi-bin/wxaapp/createwxaqrcode?access_token=${access_token}`,
            method: "POST",
            // 响应类型为arraybuffer
            responseType: 'arraybuffer',
            data: {
                path: "pagesMy/about/about"
            },
            success: (e) => {
                console.log('e: ',e);
                // 转换成base64格式
                this.base64 = 'data:image/jpeg;base64,' + uni.arrayBufferToBase64(e.data)
                console.log(this.base64)
            }
        })
    }
}

异步emit

筷筷 — Thu, 18 Jan 2024 00:00:00 GMT

如何在Vue中await emit？即在子组件中emit触发父组件的事件后，需要等待在父组件触发的异步事件完成后，再执行某些逻辑。

使用异步函数封装emit，return或者await一个promise，把resolve传送到父组件中，就可以由父组件决定什么时候状态改变，并且还可以传递相应的值。通过异步emit，事件的发送者和接收者之间不需要直接依赖。这有助于降低系统的耦合度，使得各个组件更容易维护和扩展。

下方的代码片段是一个简单的例子，在子组件中删除账单后需要更新父组件中的账单列表，更新后子组件还需要再执行某些逻辑，于是需要使用异步emit达成这个效果。

注：代码片段追求简单、一看就懂。未考虑更新账单失败的逻辑。

// 子组件触发emit
const deleteBill = async () => {
    // …………
    
    // 删除成功，准备更新账单列表
    await asyncEmit()
    
    // 在触发事件后，再执行某些逻辑
}
 
// 封装异步emit函数
const asyncEmit = () => {
    return new Promise((resolve) => {
        emit('updeteBillList', resolve)
    })
}
 
// 父组件接收子组件传过来的参数
const updateBillList = async (resolve) => {
    // …………
    await getBillList()
    
    // 更新账单列表完成，将promise状态改变
    resolve('ok')
}