coderfee's blog

离群点

Wed, 31 Dec 2025 00:00:00 GMT

我做了一个数字化的实验，从某种程度上说──这篇文章没有一个字是我亲手写的。

冬天的下午总是黑得特别快。还没来得及把手头的代码写完，窗外的路灯就亮了。一看日期，2025 年只剩下最后几个小时。这种时刻，人总会莫名地怔一下。

回望去年，我在结尾写下“撤退是为了前进”。2024 是沉潜内心的一年，2025 便是重新整装、在迷雾中试探着迈步的一年。这一年没有什么大起大落的剧情。生活似乎依靠惯性维持，这种惯性虽不起眼，却也因此没被打破。我经常感到一种时空错置感，仿佛身在 2025，意识却已经提前进入了 2026 年。这种错觉带来了一种奇妙的清醒——正如时间划过指尖，抓不住它时，你才能感受到它在流动。

诺亚方舟

在机械键盘的清脆声中，对着密密麻麻的需求文档，把自己压缩进一个狭窄的技术栈里。那种感觉，真的就像是一颗被异化为特定用途的螺丝钉，在既定的轨道上打转。

今年开始了解 AI Agent 的时候，我觉得它正在颠覆我以往对 AI 编程的看法：AI 不再仅仅是效率工具，它更是人类能力的延伸──“外骨骼”──这正是今年我对 AI 的评价。至于明年或未来，AI 将会是人的“第二大脑”，或者说数字分身──这并非言过其实。大语言模型通过人类海量的文本数据学习、压缩，再创造性地生成。这种“压缩”与“解压”的奇妙过程，让我意识到，知识和学习不再是瓶颈。我已经记不清，我和 Claude、Gemini 的对话方式是怎么变化的。我不再只输入精准的报错信息，而是开始把那些半生不熟的思路、甚至自我怀疑都敲进去：“我觉得这里应该用抽象工厂，但会不会过度设计了？”“这个命名是不是太蠢了？”它们有时会附和我，有时会温和地反驳，有时只是将我冗长的描述梳理成清晰的要点，让我看清自己真正想说什么。这个过程悄然无声，就像镜子上慢慢呵出的雾气，当你凑近凝视，里面映出的轮廓，既熟悉，又让你对自己多了一分陌生的洞察。

以前需要耗费大量精力去记忆的语法细节，现在可以放心地交给它们，而我则腾出手来，不再纠缠于标点和语法，转而去构建系统的骨架。记得《晚点 LatePost》有篇采访提到，未来可能只有 “10% 的人设计机器，40% 的人服务机器，50% 的人享受爱好”──虽然是一家之言，但我想，AI 或许就是那个变量，它让我们有机会从“服务机器”的 40% 中解脱出来，不再被工具异化，而是做工具的主人。

在这个比特无限轻盈的时代，技术不再是冰冷的代码堆砌，它是我们与世界对话的另一种语言。拥抱这种变化，在数字洪流中建造自己的诺亚方舟，或许才是最大的稳定。

锚点

三十岁，就这样悄无声息地来了。

偶然重读《平凡的世界》，读到“金黄的落叶堆满我心间，我已经再不是青春少年”，猛然发现扉页上购书的时间竟是 2012 年。十三年前那个 17 岁的少年，如今已成书中人。站在三十岁的路口，我没有预想中的慌张，反倒多了一份坦然。我不再急于追问，而是学着觉察自我。人生是琥珀，凝望比包裹更接近答案。

这一年，我也曾有许多瞬间，在心底暗暗咒骂过这个世界，但那些声音最终都消失在长久的静默里。我察觉到自己变得易怒，常被无力感裹挟。假期里，我躲进《琅琊榜》的旧时光里，一遍遍重温那些烂熟于心的剧情。怀旧成了一种逃避，让我在熟悉的安全感中，暂时抵御现实的寒意。每次假期结束前，我都会陷入一种莫名的恐惧——害怕回到那个熟悉的城市，害怕那种没有目的、却又不停转的机械生活。

不过，生活里也不全是下坠的重力。

微光可能来自一封意外的邮件。博客已经半年没有更新，却收到了一封读者的来信，说很久以前的一篇文章帮到了他。那一刻，我面对电脑时的空白无物被一种温暖的成就感填满。原来文字真的能让我们找到共鸣，哪怕是跨越时空的微弱连接。

也可能只是清晨的觉知。正如黑塞所言──“在一天中过完四季”。我开始尝试捕捉那些微小的瞬间：看云，奔跑，或者只是静静地坐着。我发现，清晨是我们最勇敢的时刻，黎明的情绪能战胜一切。

当然，最温暖的光依旧来自 @葡萄君。这种默契依旧如初，我们互为锚点，在不确定的生活里构建起一个小小的、确定的秩序。生活的细节，就藏在厨房升腾的蒸汽里，和那些关于晚饭吃什么的琐碎对话中。

国庆时节回了一趟故乡。记忆中的老家似乎从未有过那样漫长的雨季，雨水将天地连成一片混沌。雨幕中，小小的村庄在云雾里忽隐忽现，宛如一幅晕染开的水墨画。路口的哈哈镜里，我和身后的世界变得扭曲而陌生。看着雨中伫立的“守村人”，我恍然惊觉：故乡变了，那是时光刻下的痕迹；故乡又没变，那是记忆深处永恒的底色。

这种不断的往返与拉扯，反而成了我重建自我的契机。我试着收回向外张望的视线，转而向内探寻。不被外界的评价体系裹挟，建立属于自己的坐标系。离群，是为了在喧嚣之外，更笃定地走自己的路。

与无解共处

读书，于我而言，就像在日复一日的烟火生活里，为自己打开的一扇窗。外面的风未必温柔，甚至有点刺骨，但至少能让人喘口气，确认一下屋子外面还有个更大的世界。这一年，我越发觉得，阅读和写作一样，都是一种对抗虚无的尝试——哪怕这种尝试如黑塞所言注定徒劳，但正是这种“尝试”，让我们确认自己是身处其中的探索者。

在心境低落时，我习惯翻开《苏东坡新传》。旧书新读，我看到了一个更立体的他。《水调歌头》里有多意气风发，《西江月》里就有多婉转萧索。那种“世事一场大梦”的苍凉，让我明白他的豁达并非天赋，而是在“乌台诗案”的炼狱后，在流离失所中修炼出的铠甲。他那句“且为一日欢，慰此穷年悲”──以短暂而密集的欢聚，来稀释漫长岁月中难以言说的种种。人生多是两难，苏轼的伟大，在于他做出了那个最潇洒的取舍。

如果说苏轼给的是慰藉，那么克里希那穆提在《生命之书》里给出的则是解药。他提出的“不带记忆的观察”，起初让我难以为继，后来慢慢领悟：这是一种彻底的清空。保持开放的心态，不带预设偏见，直接面对问题本身。这剂解药虽然苦涩，却能让我从对结果的执念中暂时解脱。

但有些问题注定无解。在阅读存在主义书籍时，我列了一份包含生老病死、绝对自由的“无解清单”。我意识到，任何“主义”都只能解决特定时期的问题，甚至只是安慰剂。当重读《活着》、《鼠疫》这些苦难文学时，我发现生活往往比小说更具戏剧性。托尔斯泰在《伊万·伊利奇之死》里敲响的警钟更是让人不寒而栗：我是否也在随波逐流中失去了真实的自己？

面对荒诞，也许萨特是对的：“你是自由的，所以去选择吧。” 既然意义无法被给予，那就去创造。认识到荒诞并在荒诞中坚持生活，诚实地面对内心，这或许就是我能做的最勇敢的事。

尾声

年末整理思绪，写下这样几行字，作为这一年心境的注脚。

信息趋向同质，明天是今天的镜像，伴随昨日之逝去。

算法不断驯化，我以为那是我自己，欲望，不断自我实现。

潮流无形裹挟，已来不及转身逆行，我放弃追问，为何在这里。

比特无限轻盈，一次刷新覆写历史，然而记忆才是锚点。

真相兀自构建。黑夜之中，能否找回自己的眼睛。

精神本该自由。无岸之海，浮标与灯塔互为孤证。

思考保持自洽。还是只是，悄然无声，按下删除。

存在无比厚重。离群之处，剥离，剥离，又回归。

此刻，窗外的喧嚣终将归于平静。我不需要那么多宏大的誓言来武装明天，只需要在心里留一盏灯，照亮脚下那方寸之地。在这无岸之海，做一个不被定义的离群点，本身就是一种无声的航行。

路还长，夜正深，且慢行。

最后

最后，我不得不声明一下，这篇文章的写作过程是 AI 完成的，我所作的工作只不过是把我过去几年写的文字提供给 AI，还有 2025 年写下的 120 条 flomo 笔记。通过 Gemini CLI 进行了大约 20 轮对话，也就大概一个小时，这篇文章便写完了。我读完之后的第一感觉就是 AI 已经替我表达了 90% 的内容。也许明年当我把我的内容数字化之后，我可以拥有一个数字分身，不是没有可能。

闲聊 Obsidian

Mon, 30 Jun 2025 00:00:00 GMT

最近在研究 Obsidian 笔记部署到博客的功能，我发现 Obsidian 的功能比我想的要更多、更强大，于是也仔细研究了一下，顺便把明日周刊的写作流程自动化。这篇文章就来聊一下 Obsidian 和明日周刊自动部署。

Obsidian

如何用

有几篇文章非常适合作为 Obsidian 的入门教程，它们讲的并不是什么主题插件配置，而是一种笔记的组织方法和 Obsidian 这个笔记软件的理念：

这三篇文章都是 Obsidian 现任 CEO 写的，我从他的文章中学到了一些组织笔记的方式。例如他说的不要用文件夹来组织笔记，这是我之前常用的方法，但是在 Obsidian 里并不适用，或者说有更好的方法。我们可以用“元数据”来管理笔记，例如标签、链接、分类等。

再聊聊我对笔记的组织形式：

Dashoboard——存放仪表盘的文件夹，例如任务、看板等汇总视图
Learning Notes——主要放一些正在学习或者进行中的项目的笔记
Writings——主要的写作区，随手写一些想法、随记之类的内容
Daily Notes——日记类，Todo 也可放在对应的日期，后续用 Tasks 统一管理
Newsletter——明日周刊的内容，使用 R2 自动部署，后面会谈到
Z-Templates——模板文件，日记和周刊的模板，使用 Templater 管理

笔记的“元数据”我暂时只用标签来组织，因为现在笔记库的内容还比较少，关联不起来。而链接、双向连接这些功能，应该刻到肌肉记忆里，或者每过一段时间整理一下，将自己的知识关联起来。

插件

Calendar

这款插件非常简单，为 Obsidian 侧边栏提供一个日历视图，同时它可以把日期和你的笔记关联起来，通过日历快速访问或者创建特定日期的笔记。

Commander

Commander 能够在 Obsidian 的任何 UI 界面创建快捷命令，像侧边栏、状态栏、标题栏、右键菜单这些地方都可以自定义。移动端也支持在 Toolbar 上自定义。这种方式比 Obsidian 原生的命令面板来得更快、效率也更高一点。

Dataview

Dataview 允许用户把笔记库作为数据库，通过查询语言，将笔记库中的数据可视化，以表格、列表、日历等等形式展现出了。很多人的 Obsidian 仪表盘就是借助这款插件做的。不过查询语言有学习曲线，我也在学习中。

不过 Obsidian 要发布 Bases 插件，能力和 Dataview 差不多，估计会在 25 年 Q3-Q4。我挺期待的，但是不清楚怎么定价。

Excalidraw

虚拟白板和手绘风格的绘图工具，可以用来在 Obsidian 中创建图表、流程图、思维导图和自由形式的草图。我用的不多，还在学习中。

Linter

自动化笔记格式整理，确保笔记内容在格式上保持一致性、整洁性和可读性。目前我默认的使用方法就是在保存的时候自动运行。例如在中英数字之间自动加空格，移除不可见的空白字符，标题、段落自动加空行。Linter 也提供了自定义规则和配置界面。

Remotely Save

Obsidian 作为一个 Local-first 的软件，同步问题一直是一个诟病的点，虽然官方提供了 Sync 服务，但是每月 4 刀服务费对我来说还是太贵了。而 Remotely Save 插件则可以免费解决这个问题，只要你拥有以下云服务：

Amazon S3 / S3 兼容服务
Dropbox
OneDrive
WebDAV
…

我之前用坚果云的 WebDAV，但是发生过一次数据丢失，就不再用了。后来迁移域名的时候发现 Cloudflare R2 也有免费额度，而且兼容 S3 服务，于是就切换到了 R2，目前服务还是很稳定的。而且依靠 Cloudflare 的生态，还能实现博客内容的自动发布，一举两得。

Style Settings

这个插件可以用来深度定制 Obsidian 的 UI 界面，它相当于是主题和插件的桥梁，例如 Minimal、AnuPpuccin、Primary 提供了很多自定义选项，就是通过这个插件暴露出来给普通用户，让普通用户不用编写 CSS 就可以微调 UI。而且配置项支持导入导出，方便分享和备份。

Tasks

简单来说，Tasks 插件在 Obsidian 笔记库中管理你的 Todo 任务，无论你的任务散布在各个笔记，还是集中在一起，Tasks 都可以方便地管理和查询，甚至创建可视化界面。不过和 Dataview 一样，需要学习查询语言。

Templater

顾名思义，这个插件就是用来管理笔记模版的，相比 Obsidian 原生模版功能，Templater 则在其基础上增加了 JavaScript 脚本能力和更多的内置函数，以及一些自动化任务的能力，可以把记笔记的过程流程化。

Obsidian Web Clipper

这是一款 Chrome 插件，可以把浏览器中的内容剪藏到 Obsidian。我不是很喜欢剪藏东西，所以用的很少。我感兴趣的点在于这个插件的底层实现，它是如何把网页内容保存为 Markdown 的，当然它是开源的 defuddle，有时间要好好研究一下。

主题

Obsidian 主题我切换过不少，但是现在我还是会从维护性和适配性的角度来看，如果一个主题长时间没有维护，或者适配程度不高的话，其实要慎重考虑。所以，我目前就只用两款，分别是 Primay 和 Minimal。

Primary

Primary 是一款桌面端和移动端通用的 Obsidian 主题，支持配色方案自动切换，同时还可以通过 Style Settings 插件对主题进行微调。我比较喜欢它的一些小动画和细节。

Minimal

Minimal 主题我曾经用过一段时间，就像它的名字一样“小而美”，简洁，自定义程度也很高。我现在会把它作为备选方案，等我哪天想用简洁风格的时候，再启用。对了，这款主题不仅要安装主题插件本身，还要安装它的配套插件 Minimal Theme Settings。还有一个有趣的点是，这款主题的作者其实是 Obsidian 的现任 CEO——Steph Ango，他有自己的博客。

周刊自动部署

明日周刊鸽了好久了，因为从写作到发布这个流程比较麻烦，需要自己手动来 push，然后构建部署。最近在想怎么搞一个自动发布流程，于是研究了一下 Obsidian 和 Cloudflare R2，我发现了一条可行路线。大概的流程如下图：

改造之后的流程需要我手动参与的就是在 Obsidian 写作，完事之后使用 Remotely Save 插件同步到 Cloudflare R2。后面的流程就自动化了，我在博客的 api worker 里设置一个定时任务，去查看 R2 里的周刊文件是否有更新，如果有更新就调用 Cloudflare Pages 的 Deploy Hook 去进行构建流程，Pages 会从 R2 拉取最新的周刊内容，部署完成。

这是我折腾之后完全不用花钱的做法。如果你能接受付费，那么 Cloudflare R2 有事件通知功能，也就是说 R2 里文件发生的任何改动，都可以发送一个通知事件，你可以通过监听这个事件来触发 Pages 的部署流程，价格是每月 5 刀起。对我而言太贵了，所以我选择自己折腾。

梦后杂忆

Wed, 04 Jun 2025 00:00:00 GMT

最近做梦，村子路口的一棵树总是在梦中出现，甚至清醒的时候它也在我脑子里闪回，这个画面我是在哪里见过呢？也许这就是“既视感”，是幻觉吗——或许，它更像一个许久不见的信使，为我捎来往昔的碎片。我忘记了那是什么树，它是从一户人家的园子里延伸出来的“半棵树”，在我的记忆里它一直在那里，不开花也不结果。

去年四月清明节回老家，走在我走过很多次的蜿蜒曲折的小路上，从前脚步轻快，甚至能跑着穿过这条蜿蜒的小路，如今却走得缓慢，呼吸沉重。上完坟，汗水掉进草丛，无声无息。去往祖坟要经过这些荒草丛生的小路——很久以前，这里不曾有这么多的荒地与杂草，放眼望去，都是绿意盎然的庄稼。也许我没有低头细看，错过了杂草之下的风景。偌大的田地里，孤零零地长着几棵并不结果的苹果树，在风里轻轻摇晃，无声地诉说着这里的变迁。

或许记忆本就不可靠，人越往前走，往事就越模糊。地还是那块地，路还是那条路，只是我眼中的风景，早已不是当年的模样。

自工作之后，回老家大都在冬天，春节假期来去匆匆，甚至有几年都未曾回去，从进家门到离开这段时间，我能感知到的变化，似乎只有家里贴的几副新对联，和随假期结束而不断返回城市的人潮。这些年也没有亲身感受过那里的季节变迁，关于四季轮回的记忆，我想大概停留在了初中时代甚至更早——那个对世界一无所知，却对每一寸乡土都无比熟悉的年纪。

记得有一年秋天，我当时上高中，国庆节从寄宿学校回到老家，后院有一棵核桃树，核桃都已经落光，院子里的落叶中夹杂着一些无名的小草。那时家里的房子还没修，西北式农村的土墙青瓦，沉默地立在那里，等着我们归来。我们兄妹三个人在打扫院子里的落叶，我不知道为什么，那一瞬我觉得自己像一片落叶，轻飘飘地悬在天地之间。或许是因为秋天的肃杀，或许是因为父母不在身边的空旷——总之某种东西击中了我。至今我仍无法忘记，四周的一切忽然变得遥远而不真实，也许，我说也许，那是我第一次感受到了虚无——它不声不响，潜进那个秋日的午后。

修新房那年，后院的老核桃树终究没有留下来，砍了烧柴是它的最终命运。我对以前院子的记忆正在褪去，但有些画面却深深留在我的脑海里。08 年地震，我睡的那间屋子的缝隙又大了一些，躺在炕上，能从裂缝里窥见一线天空。最严重的是厨房，房檐塌了半边、摇摇欲坠，后来不知从哪儿找来一根椿木，斜斜地支在地面与屋檐之间，能吃到母亲做出来的各种美味，全靠它支撑了五六年，一直到修新房。也许我应该问问母亲，它可曾化作新厨房灶膛里的灰烬，上面是否还带着支撑屋檐时留下的凹痕？

以前的老房子虽然有裂缝，我却能在雨夜听着瓦片上淅沥的雨声，安然入睡；至于新房子，我知道它坚固、安全、温暖，但那种家庭的余温却在我心里偷偷消散。当然，它也承载着新的生活和希望，或许那份余温，会在这里以另一种方式重新萌芽。如今，那棵核桃树早已消散成厨房里的缕缕炊烟，但我当我想起它的时候，它依旧枝繁叶茂，树上结的穗子会掉满我家的院子，毛毛虫也是。它树荫下的那个屋子格外凉快。哦，对了，每次午睡睡过头，醒来时树叶簌簌，树影斑驳，明明是午后，光影却带着几分昏沉，恍惚间以为已到了黄昏——仿佛时间在我沉沉睡去之时已偷偷溜走。此刻闭上眼睛，我依旧分不清那时晨光还是暮色。而今的新院子平整干净，再不会有落叶和毛毛虫的烦恼，却也再给不了我那种树影婆娑间的温柔。

大学最后一个暑假，我独自待在家里，记忆中夏天很安静，虫鸣鸟叫，声声入耳，天空总是飘着几朵淡淡的云，若留心去看，会发现它们走得很快。家里的温差特别大，早晨偶尔雾气缭绕，宛如轻纱，草尖之上，缀满露珠；中午的日头悬在空中，虽然不比城市酷烈，但却也灼人；午后的天气变幻莫测，倏而晴空万里，转瞬又大雨倾盆，甚至夹杂着冰雹，我最担心的是雷声四起的时候，大雨会不会冲垮房子、冰雹会不会砸在头上，雨过天晴后偶尔也有绚烂的彩虹，大人们不许指彩虹，说手指会烂掉，可总有孩子找不到彩虹在哪儿，无奈之下只能小心翼翼地指给他看；傍晚可以看晚霞，也许有过火烧云——到底是我亲眼所见，还是我从《火烧云》这篇课文中借来的记忆？晚上满天繁星，总会记起《数星星的孩子》这篇课文——小孩在奶奶怀里数星星。我不像那个孩子，能在奶奶怀里数星星，因为关于奶奶的记忆，我一片空白。我看见过流星，后半夜迷迷糊糊摸到院子里，流星拖着尾巴划过核桃树的枝桠，来不及许愿。回到屋里，倒头睡下，希望流星能在梦里出现。那时候茫然，却踏实心安，后来走得远了，回望时，竟只有那“半棵树”在记忆里闪回——愈远，愈清晰。

春的记忆，竟然只剩下播种的片段——玉米、土豆、月季花、西葫芦……这都是小时候的画面，至于近些年的春天，我竟已记不清。我家房子后面有一片地，每年都会种玉米，种玉米的时间恰逢新学期开学。覆塑料膜的活计干起来是最快乐的，因为可以拉着一卷塑料膜在大家前面跑。有一次，我妈在种玉米，我们在地里跑来跑去放风筝，不过在沙尘暴的捣乱之下，它飞走了，那时还小，没有意识到童年时光也随着那只风筝远走高飞，竟不觉得失落，只希望和风筝一起飞。作为小学生，还有一件比较有仪式感的事，每年春天都要去杏树坡看杏花，说不上来有多好看，但是花开了，过不了多久就会有杏子吃，我对水果酸度的耐力大概是那时候培养起来的。等到杏子熟透，落得满地都是，一路上“黄哒哒”的盛况，那是杏子最甜的时候。

我很少做梦，但偶尔梦见过去时才发现，那些记忆如春雪消融，只剩几处零星的痕迹。幸好，人会变老，老了就能记起以前的事情——或许恰恰相反，是老去的人们在用记忆修补荒芜的现实。写到这里我不禁想，如果知道记忆有偏差，我是否应该依然选择相信它？

下次回去，我想去那个路口看看那“半棵树”到底是什么树，是否还藏着旧日的风声——如果它真的存在！但或许，答案也不再重要。我也会选择继续相信记忆，连同它的偏见、它的虚构、它一厢情愿的美化。因为当一切变得全然陌生，唯有这些不可靠的记忆，能为我指认来时的路。

三十而已

Mon, 03 Feb 2025 00:00:00 GMT

往日的路途，不长不短。

岁月，深浅成章。

风携旧愿，暮色微茫。

人生，是琥珀，凝望比包裹更接近答案。

答案，不在于被动承受的宿命里，而在永不停息的自我叩问中。

岁末掠影：书中日月长

Tue, 31 Dec 2024 00:00:00 GMT

艾萨克·阿西莫夫，俄罗斯犹太裔美国科幻小说作家，“科幻小说三巨头”之一。《银河帝国》系列丛书，被称为科幻小说的“圣经”，3 个系列，分别是基地、机器人、帝国，共 15 册。你在科幻电影里看到的场景也许就来自这些书里，漫威的复仇者系列中的科幻场景可能是这本书最好的演绎。你也许听过“机器人三大定律”，其一，“机器人不得伤害人类个体，或者目睹人类个体遭受危险而袖手不管”；其二，“机器人必须服从人类给予的命令，但前提是这些命令不违反第一定律”；其三，“机器人在不违反第一、第二定律的情况下要尽力保护自己”。后来，小说的主角，机器人丹尼尔为了人类的长远发展而提出了第零定律，“机器人不得伤害人类整体，或者目睹人类整体遭受危险而袖手不管”。未来，当人工智能发展到一定程度，或者就现在而言，我们是否应该让人工智能遵守这四条定律呢？阿西莫夫在 20 世纪 40 年代对未来的预见，成为了我们今天的选择题。不过就科幻小说中人工智能来说，我们与之还有很远的距离，但机器人、自动驾驶、智能助手已经充满在我们生活周围，当我们身处危险之中时，我们能否信任“他”？当人类命运掌握在人工智能手中时，我们能否信任“他”？

2012 尤瓦尔·赫拉利出版了《人类简史：从动物到上帝》，这本书到现在依旧好评如潮，三次关键性革命（认知革命、农业革命、科技革命），从动物到上帝，人类在与其他物种的竞争中脱颖而出，成为了地球的主宰。2018 年他又出版了《今日简史：人类命运大议题》，在这本书里他说人类社会是一艘在茫茫大海中航行的巨轮，而我们现如今面临的各种问题则是威胁巨轮安全的暗礁和风暴，这就是我们面临的严峻形势。科技发展带来的就业结构调整、人工智能对人类智能的威胁、气候变化对地球生态的影响、恐怖主义、民族主义，等等。这些问题相互交织，我们是否处在一个充满不确定性和风险的历史转折点？这是赫拉利在 2018 年的所思所考，接下来几年发生的事情，我们大家有目共睹，在一定程度上印证了他的观点。

你能想象 28 世纪，当地球被黑洞吞噬，人类在遥远的银河系建立霸主政权吗？这就是丹·西蒙斯集宗教、时间旅行、奇点、人工智能、赛博朋克、军事科幻于一身，写作了一部经典科幻巨作——《海伯利安》，和上面提到的《银河帝国》并称“人类想象力的巅峰”，也是科幻文学中不可不看的经典之作。在充满各种谜团的海伯利安星球上，矗立着不知何人为何人所建的“光阴冢”，朝圣者向伯劳许愿，他保朝圣者“梦想成真”。七个人，七个故事，七个梦想，其中一人担负着全人类未来的命运。未来有多远？宇宙有多神秘？人类是否会觉悟？无论你对未来世界的疑问有多么天马行空，科幻小说总是能给你意料之外的惊喜。

《AI 3.0》是这样形容我们目前所处的 AI 时代的，“人工智能在某些特定任务上可能超越人类，但在理解、推理和常识方面仍然存在巨大的差距。目前的人工智能与通用的、人类水平的智能还相距甚远。”1956 年达特茅斯会议是 AI 的一大里程碑；1997 年机器学习应用于 IBM 深蓝计算机，击败了国际象棋冠军；2016 年 DeepMind 的人工智能棋手 AlphaGo 战胜了围棋世界冠军；2022 年 OpenAI 发布了 ChatGPT，随后，我们进入了如雨后春笋般的 AI 世界。这两年我听到过各种各样关于人工智能的美好愿景，无论任何事情，大大小小、软件、硬件都要和 AI 绑定，人工智能用来改变世界，这很好。但是，这也让我对 AI 有了更多的警惕性，即应该如何和 AI 共处，它可以帮我工作，帮我感知世界，帮我实现天马行空的想象，那么是否意味着有一天它也可以替代我？我想会有这么一天，那时的 AI 肯定能够理解这个世界，也能够理解社会的常识和道德价值观。《如何创造可信的AI》一书中写道：“我们认为，AI 前行的最佳方向，是要在人类心智的内在结构中去寻找线索。”换个说法，像你我这样的“人类智能”将是这个时代人工智能的终极目标。

回望历史长河，人性是永恒不变的议题。大唐天宝十四年，长安城的九品小吏李善德被上司哄骗接下一个几乎不可能完成的任务——在贵妃诞日之前，从岭南运来新鲜荔枝。也许马伯庸就是从“一骑红尘妃子笑，无人知是荔枝来”这首诗中得到的灵感，而写了《长安的荔枝》，那书到底写的是什么？是官场的腐朽，是权贵的奢靡，还是大唐的风土人情，亦或是小说的最终归途——人性？马伯庸还有一部作品是《太白金星有点烦》，同样的脑洞，幽默荒诞和现实相结合，职场讽刺佳作，所以能得到很多职场人的感同身受。《长安的荔枝》是历史和现实的交织，是李善德这个小人物所遭受的苦难和他所做出的抗争，也正是因为这种交织，让我感受到了一种现实意义——唐朝有繁华盛世，亦有腐败剥削，也许这就像人性，历经千万年演化而善恶交织，亘古不变。

1919年《凡尔赛和约》签订期间，经济学家约翰·梅纳德·凯恩斯作为英国政府财政部代表，他主张对德国宽容，反对对德国的严苛惩罚，他没能改变这一切，于是他辞职了。同年他出版了《和约的经济后果》，意在揭露和约的弊端，呼吁战胜国重新考虑对德国的政策。和约就像一幅沉重的枷锁，承担战争责任、领土割让、军事限制、经济赔偿让德国淹没在屈辱之中。众所周知，和约的签订并没有带来持久的和平，反而为第二次世界大战埋下了祸根。理查德·J·埃文斯在第三帝国三部曲中梳理了纳粹德国历史的发展脉络。《第三帝国的到来》着重讲述了一战后的德国社会，和约压迫下德国极端主义思想滋生，魏玛共和国解体，纳粹利用底层人们的不满情绪，通过暴力手段夺取权力，希特勒从社会边缘走向了权力中心；《当权的第三帝国》将笔墨倾注于希特勒领导的纳粹如何控制社会生活的各个方面，清除异己、取缔其他政党、建立秘密警察（盖世太保）和集中营来实施恐怖统治。经济方面虽然采取了比较积极的政策，包括恢复经济、创造就业和军事扩张，但这都是为其推行军国主义政策和发动二战做准备；《战时的第三帝国》描绘的是从 1939 年德国入侵波兰，到 1945 年德国无条件投降的这段血腥黑暗时期，希特勒完全陷入了疯狂，被困地堡期间，他还在疯狂发号施令屠杀犹太人，在混乱与绝望中，他饮弹自杀，第三帝国也宣告覆灭。如果说凯恩斯的主张得以实施，总统威尔逊的十四点原则得以在和约中确立，历史会不会不一样？

1936 年，德国举办了第 11 届奥运会，为此女导演莱妮・里芬斯塔尔执导拍摄了一部纪录片——《奥林匹亚》。1940 年纳粹德国在奥斯维辛这个小镇建立了臭名昭著的奥斯维辛集中营。“人类的堕落没有底线，这是永远不会改变的事实。它是个愤世嫉俗的看法，但是根据我的亲身经历得出的。我很抱歉要这样讲”——这是《奥斯维辛：一部历史》这本书里集中营幸存者的讲述，人类在极端环境下展现出的丑恶和残忍是我们无法认识到的，人性的黑暗面就像一个潘多拉魔盒，一旦打开，就会难以控制。1940 年到 1945 年，至少有 110 万人在奥斯维辛被杀害，其中绝大多数是犹太人。有谁应该为自己天生是什么人而遭到不公正待遇吗？集中营或者说这个社会，每个人都可能在不同的环境下变成好人或坏人，所以道德能做什么？它只能用来约束自己，而不是他人。不过，让我们感到慰藉的是，囚禁者之间的相互扶持就像黑暗绝境里的微光，传递着人性中善的温度。

“我并不是一生下来就渴望着自由，因为我生下来就是自由的…只有当我开始知道我童年的自由之梦其实是幻想的时候，我才发现，作为一个年轻人，我的自由已经被剥夺，因此，我开始渴望自由。”1994 年曼德拉当选南非总统，标志着南非几十年的种族隔离制度的终结。换句话说，曼德拉自由了，他的人民也自由了。但在此前的 1964-1990 年，他面对的是长达 27 年的牢狱之灾，《漫漫自由路：曼德拉自传》（Long walk to freedom）就是在被监禁期间完成的，Beyond 乐队的《光辉岁月》也正是为致敬曼德拉而作。长达 60 多年的斗争过程中，曼德拉一直倡导和解，而非仅仅以暴制暴，从某种意义上说，这是一种心理层面的社会和解与重建，没有宽恕与和解，只能困在当下，从而也就没有未来。曼德拉对自由的理解是“自由不仅仅意味着摆脱自身的枷锁，还意味着以一种尊重并增加他人自由的方式生活”，自由是一种生活方式，而不是虚无缥缈地“为他人好”——这反而是一个牢笼，自由是可以选择的并给予的。

书中日月长，纸上春秋短。掩卷沉思，历史不是简单的线性前进，而是充满了螺旋式的上升和倒退；历史的篇章中不乏黑暗与残酷，但人性的光辉也未曾熄灭。科技更是一把双刃剑，前进或后退，只在人们的一念之间。历史是过去的镜子，映照出现在的样子，也预示着未来的可能。我想应该透过这面镜子，看清自己。

为 sudo 启用 TouchID

Sat, 14 Dec 2024 00:00:00 GMT

sudo cp /etc/pam.d/sudo_local.template /etc/pam.d/sudo_local

sudo vim /etc/pam.d/sudo_local

只需要打开下面这条规则的注释，然后重启 Terminal：

auth       sufficient     pam_tid.so

sudo_local 文件的作用，我问了下 Claude，它是这么说的：

允许系统管理员在不修改主要 sudo PAM 配置文件的情况下，添加本地化的认证规则。通常用于：

添加额外的认证方法
自定义认证流程
实施特定的安全策略
集成特殊的认证机制

然后这条规则的具体意思也可以看下 Claude 的解释：

auth：表示这是一个认证阶段的模块
sufficient：意味着：
- 如果这个模块认证成功，整个认证过程就立即通过
- 如果模块认证失败，PAM 将继续检查后续的认证模块
pam_tid.so：特指 Touch ID 模块（在 macOS 系统中）
- 允许使用设备的生物识别认证（指纹）
- 主要用于 sudo 命令的身份验证
- 让用户可以用指纹替代输入密码

使用 Astro Container API 输出 RSS 全文

Sat, 26 Oct 2024 00:00:00 GMT

昨天 Follow 开始公测，于是便下载体验了一下，界面确实很简洁，功能比我现在用的 Inoreader 更符合我的期望，而且它还可以认证为 RSS 的作者，认证完之后用 Follow 订阅的用户就可以看到作者的认证标识，这个功能很吸引我。但是在我的博客的 RSS 中，只有摘要，没有全文，总觉得少点儿什么，于是便想着怎么把全文输出到 RSS 中。

前段时间看到 Astro 的 Container API，这个 API 可以在服务端获取组件的输出，于是便想到可以用这个 API 来获取全文，然后输出到 RSS 中，今天试了一下还真可以。

Container API

先来看下官方是怎么说的：Container API 允许你在隔离环境中渲染 Astro 组件。不过，这个 API 还在实验阶段，可能会有变化。

用法如下：

import { experimental_AstroContainer } from "astro/container";
const container = await experimental_AstroContainer.create();

RSS 全文输出

大概思路就是在 rss.xml.js 中定义路由，然后在这个路由中使用 Container API 获取全文，最后输出到 RSS 中。

import { loadRenderers } from "astro:container";
import { getCollection } from "astro:content";
import { SITE_DESCRIPTION, SITE_TITLE } from "@/consts";
import { getContainerRenderer } from "@astrojs/mdx";
import rss from "@astrojs/rss";
import { experimental_AstroContainer as AstroContainer } from "astro/container";

export async function GET(context) {
  if (!context.site) {
    throw new TypeError("context.site falsy");
  }

  const container = await AstroContainer.create({
    renderers: await loadRenderers([getContainerRenderer()]),
  });

  const blog = await getCollection("blog");
  const posts = blog
    .filter(({ data: { draft = false } }) => !draft)
    .sort(
      ({ data: { date: dateA } }, { data: { date: dateB } }) =>
        dateB.valueOf() - dateA.valueOf(),
    );

  return rss({
    title: SITE_TITLE,
    description: `${SITE_DESCRIPTION}`,
    site: context.site,
    items: await Promise.all(
      posts.map(async (post) => ({
        ...post.data,
        pubDate: post.data.date,
        description: post.data.tldr,
        link: `/blog/${post.id}/`,
        content: await container.renderToString((await render(post)).Content),
      })),
    ),
  });
}

Follow 认证

最后，说下怎么添加 Follow 认证。有好几种方式，我这里用的是在 <description> 标签中添加 Follow 生成的 feedId 和 userId。

return rss({
  //...
  description: `${SITE_DESCRIPTION}  feedId:{feedId}+userId:{userId}`,
  // ...
});

读书——《西游记》

Sat, 21 Sep 2024 00:00:00 GMT

这是我第一次读《西游记》，勾起了小时候的很多回忆，于是又看了一遍剧版西游记。大家说以前看西游记光顾着看猴子，但是即使现在再看，我还是觉得猴子的魅力太大了，注意力不得不放在大圣身上。

唐僧

唐僧真的是主角吗？

电视剧的唐僧总是温文尔雅，对三个徒弟其实算是比较温柔的，尤其比较护着八戒。唯一一次发脾气是在过黑水河的时候，三个徒弟都没法驮着唐僧过河，于是他就一怒之下想自己淌过去，结果遇到妖怪变化的船夫，又被抓走了。原著的唐僧其实比较暴躁，动不动就要念紧箍咒，老是吓唬悟空；而且唐僧还很脆弱，被妖怪抓走就开始哭，等到三个徒弟救他回来时候，他又开始埋怨自己的徒弟，最经典的一句话是：“悟空，你怎么才来？”不长记性也是他最大的缺点，但这一点是我们站在上帝视角来看的，一个凡人怎么能看清千变万化的妖怪呢，纵使天蓬元帅和卷帘大将也没法辨明真假。

孙悟空

谁人不喜欢齐天大圣呢？

相比唐僧，大圣才是主角。他的性格其实很符合原著，乐观开朗，不过分杞人忧天，他最懂得苦中作乐，也许这是他的悟性，也许这些都源自他的师傅菩提祖师。每次师傅被抓走，他都笑笑道：“俺乃五百年前大闹天空的齐天大圣，快还我师父来！”不过，在原著里青牛精那回，悟空的金箍棒被收走之后，把悟空急哭了，他不知道该去哪里求救，但他并没有“分行李”，而是直接去了天宫求助，可见悟空心智之坚定。

悟空虽然出身道家，但是对佛理也是很了解，比如唐僧每次发闹骚何时能到西天的时候，他就会说：“只要一片赤诚，灵山就在你的脚下。”

猴哥自不用评说，他曾经是每个孩子的英雄，过去是，现在是，未来也是！

猪悟能

八戒，八戒，心肠不坏！

八戒：不杀生、不偷盗、不淫邪、不妄语、不饮酒、不眠坐高广大床、不装饰打扮及观听歌舞、不食非时食。

八戒是西游记里的搞笑、吐槽担当，不仅敢吐槽师父，连玉皇大帝都敢说上两句，不过仅限于猴哥在身边的时候。我觉得八戒最大的优点就是善良，纵使我们站在上帝视角的眼光来看，他的善良有时候可能会让唐僧被妖怪抓走，但是他没有火眼金睛，在小儿城抱着被官兵抓走的小孩的时候，你就能看出来，八戒其实也有点细心在身上。九九八十一难，八戒能保持一颗善良的心也属实难能可贵。

沙悟净

大师兄！

行李守护者。不管是原著还是电视剧，对沙僧的笔墨都是最少的，有些阴谋论，说沙僧是上界安排来监督整个取经团队的，但是我觉得这纯属于过度解读，沙僧就是沙僧，一个默默挑担的和尚，如果说唐僧、悟空和八戒是三只红花，那么沙僧就是那片绿叶。

沙僧不像八戒，遇到师傅被妖怪抓走的时候只想着分行李回高老庄，他每次都会高喊“大师兄，师傅被妖怪抓走了！”但是悟空每次给他安排的任务都是看行李，其中有几次妖怪比较厉害的话就会带上沙僧，我记得应该是玉兔精、狮驼岭和犀牛精这几次。

读书——《芒格之道》

Sat, 14 Sep 2024 00:00:00 GMT

最近在读《芒格之道——查理·芒格股东会讲话1987-2022》这本书，老查理的一些箴言让人印象深刻，尤其当你接触了股市之后，读一读查理的这些观点能让你有种醍醐灌顶的感觉。

我可以把芒格在股东大会上作的演讲总结成几个关键词：理智、能力圈、时机、思维模型。但是真的要通过投资获得财富，这几个关键词完全没有用，芒格和巴菲特是无法复制的。

如今已不再是遍地黄金、投资变得越来越难，这些问题也是芒格认识的如今的市场。我读完这本书最想让自己做到的是“理智”，在投资的时候人会变的不理智，追涨杀跌就是最真实的体现，我虽然买的是基金，但是人性大抵是一般相同的，以后遇到大涨大跌是记得告诉自己保持理智。

还有芒格我觉得其实也是一个比较真诚的人，他明知道股东大会下面坐着会计，但是他对会计行业的吐槽也是十分毒辣且精准，我估计会计也只能说芒格说的对了。

人生不止投资，除了等机会，更多地要去生活。

一些摘录

钓鱼的第一条规则是，在有鱼的地方钓鱼。钓鱼的第二条规则是，记住第一条规则。投资是同样的道理
变化总在发生，你不去迎接进步的变化，就会等到退步的变化
不预测宏观经济变化，也不预测股市走势。不靠预测做投资
做长期的股票投资，一个是能看懂，另一个是概率站在自己这一边
好公司贵了，这未必有什么不对。再好的生意，价格太高，也不值得投资了，再好的公司也不值天价
承担风险是有前提的——价格必须合适，风险发生的概率比较小，即使风险发生，我们的净资产也足以应付
多思、少动，看准机会下重注
投资不是只有一种风格。每个人要根据自己的品性和能力，选择适合自己的风格。投资要走自己的路，不要和别人比
物极必反是资本主义市场经济难以克服的弊端，在股市交易中同样如此
所有人都看好的机会，最容易发生踩踏，造成的损失最惨烈
要把一家公司看懂，必须找对地方，知道看什么
1. 管理层
2. 公司文化
3. 护城河
4. 市盈率
先想明白什么是自己不想要的，自然就会得到自己想要的
在身边的人都失去理智时，你要保持清醒
只要别人一开口说免费赚钱，千万别往下听
低估是稳妥的做法，但是，人们总有高估的冲动
别因为错过了好机会而感到沮丧，这是投资过程中的一部分，是无法避免的
幸运的秘诀不是雄心壮志，而是降低预期

在 macOS 上配置多个 Git 提交者

Mon, 26 Aug 2024 00:00:00 GMT

由在 macOS 上配置多个 ssh-key衍生出的一篇文章。

首先，Git 会在 ~ 目录下生成一个配置文件：.gitconfig，我们可以在这个文件中配置 Git 的一些全局设置，比如用户名、邮箱等。例如：

[user]
  name = username
  email = example@mail.com

但是，如果我们需要在同一台电脑上使用多个 Git 账号，那么我们就需要为每个账号单独配置用户名和邮箱。我们可以为每个 Git 目录单独配置用户名和邮箱，这样就不会影响到其他 Git 目录。不过，这样做会比较麻烦，因为每次切换目录都需要重新配置用户名和邮箱。这里我们可以使用 Git 的 includeIf 功能来实现这一目的。

首先，我们需要在 ~ 目录下创建一个名为 .gitconfig 的文件，然后在这个文件中配置 includeIf 功能。例如：

[includeIf "gitdir:~/path/to/work/"]
  path = ~/.gitconfig-work
[includeIf "gitdir:~/path/to/self/"]
  path = ~/.gitconfig-self

其中，gitdir:~/path/to/xxx/ 用来判断当前 Git 目录是否在 ~/path/to/xxx/ 目录下，如果是，则使用 ~/.gitconfig-xxx 这个配置文件。

然后，我们分别配置 ~/.gitconfig-work 和 ~/.gitconfig-self 两个文件，分别用来配置工作和个人的 Git 账号。例如：

# ~/.gitconfig-work
[user]
  name = username
  email = EMAIL

# ~/.gitconfig-self
[user]
  name = username
  email = EMAIL

这样，我们就可以在同一台电脑上使用多个 Git 账号了。

Arc：新意十足

Mon, 08 Jul 2024 00:00:00 GMT

Arc，一个浏览器，一个新意十足的浏览器，一个迄今为止我最满意的浏览器。今天就聊聊 Arc。

刚接触 Arc 时，我最先感知到 UI 的变化，和传统浏览器形成的对比之明显。所以先从 UI 聊起。

UI

命令面板

我认为命令面板是 Arc 的核心入口，因为它不仅能充当地址栏，还能执行一系列快捷命令，同时又省去了传统浏览器的鼠标点点，只需要按下 Command+L 键，你就能打开或者切换标签页、开关设置等等，还可以一键向 ChatGPT 提问。

Little Arc

“Little Arc 是一个更小、更简单的 Arc 窗口。它对于快速查询和阅读您朋友发给您的有趣推文来说堪称完美。”这是 Arc 官方给它的定位。简单来说，就是从其它软件打开链接时，Arc 会默认打开一个小窗口，如果你觉得网页没什么看头，或者对我而言一些代码的 MR 我都选择直接在这个窗口处理，完成之后直接关闭。但是对于一些值得深度阅读的网页，你也可以选择右上角的在某个空间打开，继续沉浸式阅读，Little Arc 则会自动关闭。省去传统浏览器打开一堆网页，图标挤成一坨导致看不清的问题。

标签栏

Arc 重新设计了标签栏，把传统顶部标签栏整合成侧边标签栏，可以很直观的看到自己打开的标签页，最近 Edge 浏览器也开始跟进这种设计。不过萝卜青菜各有所爱，对大屏虽然友好，如果是小屏的话，有些网站的内容区域会被压缩，导致出现滚动条，用户体验不是太好，所以我通常会把 Arc 放到外接屏上，让显示区域更大。

还有一个非常赞的功能就是标签页的文件夹功能，顾名思义，就是把标签页以文件夹的方式组织起来，比如我在开发一个需求的时候，我一般会新建一个文件夹，然后把 PRD、UI/UX 稿、接口文档都放进去，这样标签页就会井然有序。而且不止于此，你甚至可以把文件夹以链接的形式分享出去，即使对方没有安装 Arc，他也能以网页的形式看到你分享的每一个标签页，共享协作、分享信息的时候非常方便。

工作区

工作区是我最喜欢的的功能，我会新建一个“工作”的空间用来存放工作用的标签页，然后“我的”用来存放平时浏览一些资料网页，最近还新增了一个“AI”的空间，专门用来阅读和体验一些 AI 相关的文章和应用。当然对于一些常用的网站，Arc 也支持把它们 Pin 在标签栏，而这些标签栏则可以跨工作区使用，我常驻的标签栏包括 GitHub、搜索引擎、邮箱这些。顺带说一下 Arc 的主题功能，它可以为每个工作空间设置不同的主题，而且它的调色盘做的也很漂亮，我没事的时候总喜欢拖来拖去，有点解压。

分屏

这是阻碍我回到 Chrome的另一个功能，我们平时接触到最多可能是操作系统层面的分屏，Mac 和 Windows都自带，但是要在一个网页里实现分屏，这种操作在以前我甚至没想过，但自从我用过这个功能之后就回不去了，有一部分原因是作为开发，要看的资料比较多，平时切换标签页也比较频繁，Arc 完美解决了这个痛点，在一个标签页内实现分屏，终于不用来回切换了，甚至如果我的屏幕足够大，我会把上面提到的需求的文件夹在一屏展示完，可惜了。

AI

现在这个年头，做产品没有 AI，等于没做。Arc 也有 AI 加持，官方把它叫做 Arc Max，我整体体验下来，AI 的相关功能还挺丰富，日常使用基本无感知，我觉得这才是 AI 应该有的形态，真正融入日常使用，而又非刻意强调。首先，Tidy 系列利用 AI 自动整理 Tab 标签和下载的资源，比如帮我给标签页起一个恰当的标题，以及它会自动重命名下载的文件。Ask on Page 则可以利用 AI 直接在网页提问，通过 Command + F 唤起这个功能，甚至不用改变使用习惯。5-Second Previews 是一个可以让你不用打开网页就知道网页内容的功能，简单来说，按住 Shift 鼠标悬浮到想要打开的网页，你就会看到一个悬浮式预览弹窗。

Arc Boost

这个功能其它浏览器可以通过插件实现，比如很流行的油猴脚本。但是 Arc 把它内置了，通过自定义 CSS 和 JS，可以实现自定义网页内容、增加快捷键、提取网页数据等功能，而且官方还维护了一个 Gallery，里面有很多常见网站的 Boost 版本，可以尝试一下。我用的最多的是调整一些网站的布局，例如百度搜索的农历，我会通过 CSS 把一些不想看到的信息隐藏起来，直观地看到我想看的内容。

跨平台

Arc 目前已经支持 macOS、Windows、iOS这几个平台，据说 Android 版也已经在路上了。Arc 自带同步功能，macOS 和 iOS 可以无缝同步，不过 Windows 版本的同步功能暂时没有放出来，Android 的我还没有体验，不知道什么程度。

工具集成

Arc 集成了一些常用的服务和工具，例如 Gmail、Outlook、Notion、Twitter 等，暂且叫做生产力吧。就是当你把鼠标移入标签页的时候，Arc 会弹出一个可交互式的悬浮窗口，里面展示你的邮件列表，如果要深度阅读的话，直接点击对应的邮件就可以打开，我经常用它来看一些邮件验证码，或者有没有新邮件，如果有的话标签页的图标会出现小红点提示。

槽点

即使Arc如此优秀，但还是有一些不尽如人意的地方。所以说世界上没有完美的东西，缺憾才是常态。

网络

Arc 需要登录才能使用，而且需要一定的网络知识，国内的网络甚至不一定能登录成功，很多人可能就望而却步了，但这也是它跨平台所需要的。

插件

Arc 阉割了部分浏览器插件的 API，有些侧边栏插件可能无法正常运行。我之前在 Chrome 用的 elmo chat 总结网页内容的插件就不太好使了，所以找了很久，最终用上了豆包。

地址栏

这个我不知道算不算槽点，就是 Arc 淡化了地址栏，它提升了屏幕的利用空间，但是如果你有高频操作地址栏的需求，可能得需要先适应一下，好在 Arc 提供了很多快捷键，所以日常用我感知差距不大。

书签栏

还有一个问题是 Arc 没有书签栏，如果你喜欢收藏网址的话，需要寻找一个替代方案。即使它有 Pin 功能，也无法承载我那变化多端的书签的数量。

最后

最后，我想说很久没有一款浏览器能让我爱不释手，大学的时候我用IE，后来工作后就一直用 Chrome，偶尔也会用一用 Firefox，但其实从功能来说，这些浏览器都越来越趋同，每次的更新日志让人觉得食之无味。直到遇见 Arc，第一次用的时候真的耳目一新。我也会继续体验这款产品，期待 Android 版本。但是从另一方面来说，效率类工具没有银弹，有你爱不释手的功能，那么也就有你无法忍受的槽点，只不过我做的取舍是留下它，因为它相比其它浏览器最大化提升了我的工作效率，这就是留下它的原因。

好喽，就写到这里，有机会再写吧！

如果你想体验 Arc 浏览器，那么点这里。

我所了解的宗教

Thu, 27 Jun 2024 00:00:00 GMT

最近在读《第三帝国三部曲》，讲的是一战到二战期间，在希特勒的领导下德国建立了第三帝国，第一帝国和第二帝国分别是由腓特烈大帝和俾斯麦建立的。

这部书中，作者从德国社会的各个方面解读了第三帝国的历程，其中让我印象深刻的，是一段记录宗教人士对纳粹主义反抗的文字。尼莫拉牧师在遭到纳粹的监禁之后，没有屈服于他们的恐吓威胁，我们熟知的一段话也是他在被关押期间写的，如下：

一开始他们杀共产党员的时候，我没说话，因为我不是共产党员。

随后他们杀社会民主党员的时候，我没说话，因为我不是社会民主党员。

接着他们杀工会成员的时候，我没说话，因为我不是工会成员。

然后他们杀犹太人的时候，我没说话，因为我不是犹太人。

最后他们要杀我时，已经没有人能为我说话了。

我突然想到，在人类历史的漫漫长路之中，宗教有时候是愚昧的，残酷且没有人性，时常作为统治工具出现在历史的舞台。但我从尼莫拉以及二战期间宗教人士对德国纳粹的反抗中认识到，人类也常常从宗教中汲取力量，他们赞美神，信仰神，从而被神“看见”。

我想我是无神论者，我不去信仰神，但我会尊重每个有信仰的人。

再来说说我实际生活中接触到的宗教。

我家在农村，大大小小的节日似乎都和神、祖先有关，春节、中秋、清明等等，我作为家里唯二的男子汉，每年都要祭拜祖先和我们当地的神。以前年纪小，只是觉得好玩，后来长大一点，我把这些都通通划到道教的范畴，可以说大部分受西游记的影响。

关于天主教，我们村子里有些家庭是属于多信仰家庭，可能男人信道教，而女人则是信仰天主教，又或者相反。他们有自己的聚会点，举行一些属于自己的仪式和活动，但他们不会去土地庙里祭拜，除了这些不同的信仰之外，大家平时相处是毫无分别的。

我宁愿把这称之为“信仰”，“求神拜佛”在农村是很常见的，目的都是求取平安顺遂，和宗教其实关系不大。在我脑海里一直有一个观点，过去我们在很多地方“求神拜佛”，可是大山里的人何尝求的不是自身，拜的何尝不是自己呢？他们每个人都是自己的神，坚韧不拔是我对他们最深刻的认识！

后面上大学、工作接触的人多了之后，每个民族甚至每个人其实都有自己的信仰，无论是宗教信仰或者个人信仰，这也让我觉得世界本就是多元，也许没有宗教，人类不会走到今天。而一个人没有宗教信仰，也不能完全否定一个人是没有信仰的，这是一种狭隘主义。总之，这个世界奇奇怪怪，不妨多点宽容。

在 macOS 上配置多个 ssh-key

Sat, 01 Jun 2024 00:00:00 GMT

最近在工作过程遇到一个问题，一些项目存放在 GitHub 上，另一些项目可能存放在 Coding 上，虽然两个平台可以共享 ssh-key，但是有时候不是很方便。于是就在网上搜索了一番，记录下来，以备后用。

生成 ssh-key

首先为 GitHub 生成 ssh-key：

ssh-keygen -t ed25519 -C "mail@example.com"
# 如果不支持 ed25519 算法，可以替换为 rsa
ssh-keygen -t rsa -b 4096 -C "mail@example.com"

终端会提示我们 ssh-key 的存放路径，例如 Enter file in which to save the key，我们可以指定为 /Users/xxx/.ssh/id_ed25519_github。

为 Coding 生成 ssh-key 的步骤也一样，只不过我们需要指定存放路径为 /Users/xxx/.ssh/id_ed25519_coding。

配置 ~/.ssh/config

在 .ssh/config 文件中添加如下内容：

# 表示接下来的配置适用于连接到 github.com 的情况。
Host github.com
  User git #指定连接时要使用的用户名
  StrictHostKeyChecking no #禁用严格的主机密钥检查
  IdentityFile ~/.ssh/id_ed25519_github #指定用于身份验证的私钥文件的位置
  IdentitiesOnly yes #指定只使用 IdentityFile 中指定的身份文件进行身份验证

# 表示接下来的配置适用于连接到 coding.net 的情况。
Host coding.net
  User git
  StrictHostKeyChecking no
  IdentityFile ~/.ssh/id_ed25519_coding
  IdentitiesOnly yes

搞定，这样的话就可以分别使用 ssh 协议来提交代码了。

如何把 Flomo 笔记作为浏览器新标签页

Sat, 11 May 2024 00:00:00 GMT

效果图

大致思路

其实很简单，flomo 的数据是存在浏览器的 IndexedDB 中的，所以我们可以在 flomo 页面中用 contentScript 来读取数据，然后通过 window.postMessage 把数据推送到新标签页中。

代码实现

已开源，参见 repo。代码很乱，但是够用了。

Pagefind，但是 React

Fri, 10 May 2024 00:00:00 GMT

TL;DR

这是对上一篇文章的补充，聊一下如何利用 React 来提升开发体验，因为上一篇提到的 Pagefind 需要进行拼接 DOM，我们把这部分逻辑放到 React 中。

Astro 中使用 React 组件

首先我觉得 Astro 的设计理念挺不错的，“群岛架构”——开发者可以把页面划分为不同的岛屿，有静态的、有可交互的，还可以集成不同的框架。我们要聊的 React 搜索组件就是利用了这个思想，把搜索组件作为一个可交互的组件集成到 Astro 页面中。

引入 pagefind.js

上篇文章我们借助了 ES Module 通过 script 标签的方式引入了 pagefind.js。但是 React 我们就需要换一种方式了，因为在 Module 中无法直接访问 window。经过研究之后，我发现可以使用动态导入的方式来实现。

export function Search() {
  useEffect(() => {
    async function loadPagefind() {
      try {
        // @ts-ignore import after building
        window.pagefind = await import(/*@vite-ignore */ `/pagefind/pagefind.js?${Date.now()}`);
        await window.pagefind.init();
      } catch (e) {
        window.pagefind = { search: () => ({ results: [] }) };
      }
    }
    loadPagefind();
  }, []);
}

这里有几个地方值得注意：

pagefind.js 不是作为依赖项导入，而是作为静态文件资源导入，/*@vite-ignore*/ 就是告诉 vite 不要处理这个依赖
为什么导入语句后要增加 ?${Date.now()} 参数？如果没有这个参数，会报 Module not found，具体原因可以参考这条 issue

处理搜索结果

export function Search() {
  const [results, setResults] = useState([]);
  // ...
  const handleSearch = async (keyword: string) => {
    const { results } = await window.pagefind.search(keyword);
    const data = await Promise.all(results.map((item: any) => item.data()));
    setResults(data);
  };
  // ...
  return (
    <>
      {results.map((item) => (
        // 构建 UI
      ))}
    </>
  )
}

上一篇文章这个步骤会涉及到拼接 DOM 的部分，这里我们把它抽离成 React 逻辑，不用拼接 DOM 了，效率 Up。

client:load

最后，我们把组件注册到 Astro 的页面中：

---
import {Search} from '@/components/Search';
---

<Search client:load />

client:load 指令的作用，可以参考文档。简单理解就是 Astro 并不会编译这个组件，而是把它放到页面中，让客户端去加载。

如何使用 Pagefind 为 Astro 网站添加全文搜索

Thu, 25 Apr 2024 00:00:00 GMT

我最近在用 Astro 重构自己的博客网站，本来想给网站添加一个搜索功能，在 Astro 官网搜索一番后，发现官方没有做相关的插件或者教程，只有一条关于 Pagefind 的教程链接，我抱着试一试的心态去看了一下，然后结合 Pagefind 文档，花了一天时间成功搞定，效果如下：

Pagefind

我们先来看下官方的介绍：

Pagefind is a fully static search library that aims to perform well on large sites, while using as little of your users’ bandwidth as possible, and without hosting any infrastructure.

我英语不好，用 ChatGPT 翻译看一下：

Pagefind 是一个完全静态的搜索库，旨在在大型网站上表现良好，同时尽量减少用户的带宽使用，并且无需托管任何基础设施。

其实就是说 Pagefind 是一个静态的全文本搜索库，拥有良好的性能以及多平台支持。多提一句，它是基于 Rust 实现的。

创建索引

首先将 pagefind 作为依赖安装到我们的项目：

pnpm add astro-pagefind pagefind

其次，我们要为 Pagefind 创建索引，它的实现方式是提取构建的静态文件，一般都是在 dist 文件夹创建索引：

pnpx pagefind --site dist

最好把创建索引的命令放在 package.json 中，这样，每次 CI 构建时，都会自动创建最新索引，例如：

{
  "scripts": {
    "build": "astro build && pagefind --site dist"
  }
}

注意，本地开发的时候，我们需要先运行 pnpm build 创建索引，然后再启动开发服务器 pnpm dev，这样在开发时也会有索引。

搜索 UI

上面的步骤运行完之后，我们可以看到 Pagefind 在 dist 目录下生成的文件。由于 Pagefind 自带默认的搜索 UI，可以直接从 dist 目录下引用。如果你想自己构建搜索 UI，那么只需要引入 pagefind.js 即可，这也是我选择的开发方式。

我们可以把搜索 UI 封装成一个组件，比如 Search.astro，首先完成我们的 HTML UI 结构：

<a class="font-bold hover:text-blue-500 cursor-pointer transition-colors duration-200" id="search-icon">/search</a>

<div class="hidden" id="search-box">
  <div
    id="search-backdrop"
    class="fixed z-[1000] left-0 top-0 backdrop-blur-3xl h-screen w-screen overflow-hidden flex justify-center items-center bg-zinc-900/20 dark:bg-zinc-500/20"
  >
  </div>
  <div
    class="fixed left-1/2 top-32 -translate-x-1/2 z-[1001] w-[560px] bg-zinc-200 rounded-lg overflow-hidden shadow-xl dark:bg-zinc-900"
  >
    <div class="p-4">
      <input
        id="search-input"
        class="w-full p-2 border-2 border-blue-500 rounded-lg focus:ring-0 focus:border-blue-500 outline-none dark:bg-zinc-950"
        type="text"
        placeholder="搜索文档"
      />
    </div>

    <div id="results" class="min-h-52 max-h-96 p-4 pt-0 overflow-auto space-y-2">
      <div class="w-full min-h-48 text-5xl text-center flex justify-center items-center select-none">
        <div>🤔🔍</div>
      </div>
    </div>
  </div>
</div>

引入 Pagefind JS 文件：

{/* ...html */}
<script type="module">
  const pagefind = await import('/pagefind/pagefind.js');
  pagefind.init();
</script>

用户输入关键词后，调用 Pagefind API 实现搜索逻辑，并且将搜索结果渲染到页面上，我在这里使用了拼接 DOM 的方式，如果使用内置 UI 的话，就不用拼接。

<script type="module">
const searchInput = document.querySelector('#search-input');
searchInput.addEventListener('input', handleSearch);
async function handleSearch(e) {
    const { value } = e.target;
    let html = '';
    const search = await pagefind.search(value);
    const results = search.results.map((item) => item.data());
    const data = await Promise.all(results);
    data.map(({ meta: { title }, url, excerpt }) => {
      html += `
      <div class="bg-white dark:bg-zinc-800 p-2 rounded-lg shadow-xl">
        <a href="${url}" class="text-blue-500 hover:text-blue-600 transition-colors duration-200">${title}</a>
        <p class="text-gray-500 text-sm line-clamp-1 text-ellipsis mt-1 ml-4">${excerpt.replaceAll('<mark', '<mark class="bg-blue-500 text-white"')}</p>
      </div>
    `;
    });
    resultEl.innerHTML = html
}
</script>

最后，我把它引入到了 Header 组件，这样保证了搜索功能在全局都是可用的。

---
import Search from "@/components/Search.astro";
---
{/* ... */}
<Search />
{/* ... */}

优化搜索结果

开发完成后，我在本地试了下搜索功能，结果有点糟糕。我们之前创建的索引是包含了 dist 整个目录下的文件，所以会有比较多的冗余信息，所以需要进行过滤。

页面级限制 data-pagefind-body

data-pagefind-body 属性可以可以添加到页面的 body 元素上，如果我们的网站上存在一个此属性，那么在创建索引时，其余没有添加此属性的页面都会被忽略。

如果你只想创建某个页面的索引，就在页面的 body 元素上添加此属性，此时，其它页面的都不会创建索引。

<body data-pagefind-body>
{/*  */}
</body>

元素级限制 data-pagefind-ignore

如果你想限制页面上的某些元素不能被索引时，可以添加 data-pagefind-ignore 属性，例如敏感信息等：

<div class="phone" data-pagefind-ignore>
  {/*  */}
</div>

属性级限制 data-pagefind-index-attrs

如果你想把某些元素的 HTML 的属性也添加到索引里的话，可以使用在指定元素上添加此属性，这在搜索图片时非常有用：

<img src="/hero.png" title="Image Title" alt="Image Alt" data-pagefind-index-attrs="title,alt" />

总结

通过上面这些开发配置，Pagefind 作为我博客的搜索引擎已经可以满足日常使用了。如果你需要其它功能，可以参考官方文档开发和配置。

最后，我想说 Pagefind 目前在 GitHub 上有 3k 多 star，而 Issues 也不多，98 个左右，所以作为一个轻量级的文本搜索库来讲，足够在个人博客里使用，而且它在官网上也说了，能够支撑大型网站。免费又开源，这还不得赶紧去人家的 GitHub 上点个 star 嘛。

2024：AI 可以做什么

Mon, 22 Apr 2024 00:00:00 GMT

等等…这个单词什么意思

在用 AI 的过程中，不出意外会碰到一些英文名词，例如 AIGC、AGI、 LLM、Prompt 等等。这些都是什么意思呢，我问过同样的问题，我选择把球交给 AI，你可以继续往下看这篇文章，或者随便打开一个 AI 助手，这样问它：

你作为一名人工智能领域的专家，请你告诉我 AIGC 代表什么含义？

AIGC（AI-Generated Content）人工智能生成内容，人工智能通过网络上现存的海量数据生成的新内容，包括音频、图片、文章、代码，而且 AI 在一些更具创意性的领域（音乐、视频）也开始追赶人类的脚步，例如 Suno 可以生成音乐，Sora 可以生成视频。

AGI（Artificial General Intelligence）通用人工智能，在《AI3.0》这本书里作者把它叫做人类智能，我觉得更贴切，像人类一样拥有广泛认知能力（推理、经验、常识）的智能系统。这是人工智能发展的终极目标。

LLM（Large Language Model）大语言模型，经常见之于最新科技新闻。为什么说它大，因为它的训练参数数量很多，能够处理大规模的自然语言文本。比如最新发布的 Llama-3-70B 开源模型，它的训练参数就达到了 70 亿。它的表现形式就是各大厂商推出的 Chat Bot。

Prompt 通常叫做提示词，可以是一个单词、一句话、一段文本或者一个问题，用来引导人工智能生成你想要的内容。比如“你好”和“你作为一名人工智能领域的专家，请你告诉我 AGI 代表什么含义？”，这两个都是提示词。通常，设计合理的 Prompt 可以生成更准确、质量更高的内容。

还有很多，这种名词你对 AI 使用程度越高，出现的会越多，不过 AI 在解答这种问题的时候完全可以信任，你可以试着结合上面提示词去了解更多。

AI 在做什么

AI 始于 1956 年达特茅斯会议；1997 年机器学习应用于 IBM 深蓝计算机，击败了国际象棋冠军；2016 年 DeepMind 的人工智能棋手 AlphaGo 战胜了围棋世界冠军；2023 年 OpenAI 发布了 ChatGPT，随后，各种大语言模型 AI 如雨后春笋般冒了出来。那在这个过程中 AI 到底在做什么？

深蓝计算机得益于当时提出的机器学习，击败了卡斯帕罗夫，但是，它除了下棋，啥也不会。

AlphaGo 战胜了李世石，甚至它的进化版 AlphaGo Master 更恐怖，战胜了柯洁，可是，它除了下棋，啥也不会。

ChatGPT 作为一个文本模型，它在处理自然语言方面可能百试百灵，但是，它不会下棋，所以它也不是通用人工智能。

在这几个人工智能发展的高潮阶段，都有一种声音：“人类要被人工智能超越了”。但是经历过后才发现，我们距离人工智能还有很远的距离。我们对此的误解是，人类往往容易高估了人工智能，而低估了人类智能。

那么 AI 到底在做什么？我想举几个例子，答案会很明确：

AI 助手	功能 OR 领域
ChatGPT	自然语言处理，生成文本、翻译，通过插件可以做更多事
Midjourney	图像生成
Suno	音乐生成
Sora	视频生成
DeepL	语言翻译
GitHub Copilot	代码生成
智谱清言	自然语言处理，可以自建智能体
通义千问	同上
通义灵码	代码生成
FSD	特斯拉 L2 级别自动驾驶
推荐系统	常见于电商网站，猜你喜欢等功能

我们把这种专门应用与某一领域的 AI 成为 Narrow AI（窄 AI），如果超出了学习和决策范围，它们能做的非常有限。也正是得益于大模型在 2023 年的爆发，AI 在日常生活和工作中的使用范围已经非常大了。

我可以用 AI 做什么

代码副驾

首先作为程序员，GitHub Copilot 是我使用频率最高的写代码辅助工具，VSCode 和 JetBrains 全家桶都安装了这个插件。可以简单感受一下它的能力：

如果在使用过程中，你能够用合理的函数名称配合文档注释，Copilot 有能力为你生成完整的代码逻辑，这还不说它的 fix 功能和重构功能，能帮你识别潜在的逻辑漏洞，从提高效率角度来说一点问题没有，你要做的只是 Review。

概念解释机

我不是万青（万能青年），在碰到一些不熟悉的概念时，我会把它扔给 AI，让 AI 给我解释说明：

或者解释上面提到的一些专有名词：

当然，AI 不可全信，因为 AI 也会产生幻觉，比如超出它理解范围的，它可能会胡编乱造一个答案给你。就像这个回答里的 LLN 其实应该是 LLM，多有对待 AI 其实和看书是一样的，实践是检验一切的标准。

图片生成

最近在我自己的网站，我打算给每篇文章配上一张题图，但我不是万青，所以想到了用 AI 来生成，有几张图片我还挺喜欢，但是如果不仔细写 Prompt 的话，生成的图片差强人意。

书籍探索

最近读书，很多书看着看着就不想看了，弃了很多书，并非没有耐心，而是书中的内容和预期中的相去甚远。看到有人在网上分享读书的 Prompt，我就在智谱清言里创建了一个智能体，让它帮我先筛一遍我要读的书，看到不中意的我直接弃了，省得读到一半白费力气。

你可以直接体验书海无涯智能体。

还有很多，AI 能做的远不止于此，在创意性领域 AI 的已经开始追赶人类的脚步，所以，用起来，你才能知道 AI 能用来干什么。

最后，留个小疑问，你能猜到这篇文章的哪些内容是 AI 生成的吗？

一些遥远的记忆

Sun, 21 Apr 2024 00:00:00 GMT

今年 4 月回老家上坟，走在我走过很多次的小路上，蜿蜒曲折，以前从来不觉得吃力，甚至可以跑一跑，现在已不复当年勇。走这些路要经过荒草丛生的地，比起春节的时候相差不多，也可能是我没有低头看看杂草之下的风景，和我记忆中的大不一样，也许人的记忆往往容易出现偏差，年纪越大，偏差越大。

16 年大学毕业，6 月回趟老家，自此以后参加工作，每次回老家都是冬天，春节 7 天假，来也匆匆，去也匆匆，甚至有几年都未曾回去，从进家门到离家门这段时间，我能感受到唯一的区别就是家里贴的那几副对联。这些年也没有亲身感受过那里的季节变迁，关于四季轮回的记忆，我想大概停留在了初中时代甚至往前，一无所知的小学生时代。

有一年秋天，我还在上高中，国庆节从寄宿学校回老家，老家后院有一棵核桃树，核桃都已经落光，院子落满了树叶，夹杂着一些无名的草。那时候房子还没修，老式的农村土墙和青瓦，我姐、我、我妹我们三个在扫院子里的落叶，那一刻像是被落寞的情绪击中一样，至今也忘不了。后来修房子的时候，那颗核桃树难逃被砍了烧柴的命运，对以前院子的印象也越来越淡，不过有件事印象比较深，08 年地震，我家的房也出现许多缝隙，因为房子的年龄和我姐的年龄相仿，我睡觉的屋子，透过缝隙可以看到天空，但厨房尤其严重，后来厨房就用一根椿木顶着房檐支撑着，一直到修新房。现在回想起来，我却觉得以前的老房子带给我的安全感甚于新房，或者说人老了就会回想过去，就像那棵核桃树，虽然它已经被砍了，但在我的记忆里它依旧枝繁叶茂，结的穗子会掉满我家的院子，毛毛虫也是。

15 年，大学最后一个暑假，我一个人待在家里，记忆中夏天很安静，虫鸣鸟叫，声声入耳，天空总是飘着几朵淡淡的云。家里的温差特别大，早晨偶尔会出现雾气缭绕的景色；中午太阳悬在空中，虽然不比城市，但也很毒；下午可能随时会下雨，那时候经历过的大雨、冰雹也不在少数，最担心的是我家的房子会不会塌掉，偶尔也有彩虹，大人都不让用手指彩虹，说什么手指头会坏掉，但小孩子总该是不怕的；傍晚可以看晚霞，也许有过火烧云，但是印象不深了；晚上满天繁星，总会记起一篇在奶奶怀里数星星的课文，我没有数过星星，因为我没有见过她。我看见过流星，流星拖着尾巴划过天空，睡眼朦胧地在解手，来不及许愿。那时候不知道要做什么，但总归是心安的，在外漂泊越久，对家的遥望就多一分。最近做梦，村子路口的一棵树总是在梦中出现，甚至清醒的时候它也在我脑子里闪回，这个画面我是在哪里见过呢？也许这就是“既视感”，我怕不是出现幻觉了。

至于春天，我努力地回想了一下，竟然都是关于播种的记忆，种玉米、种土豆、种花、种西葫芦，但这都是小时候的记忆，关于最近的记忆，我没有了。我家房子后面有一片地，每年都会种玉米，种玉米的时间恰好也是新学期上学。覆塑料膜的活干起来是最快乐的，因为可以拉着一卷塑料膜在大家前面跑。还有一次，我妈在种玉米，我们在地里跑来跑去放风筝，不过在沙尘暴的捣乱之下，它飞走了。作为小学生，还有一件比较有仪式感的事，每年春天都要去杏树坡看杏花，说不上来有多好看，但是花开了，过不了多久就会有杏子吃，我对水果酸度的耐力大概是那时候培养起来的。等到杏子熟透，落得满地都是，一路上“黄哒哒”的盛况，那是杏子最甜的时候吧。

最近做梦，梦起以前，突然发现剩下的记忆不多了，或者说记不起来了。幸好，人会变老，老了就能记起以前的事情了。

《纳瓦尔宝典》——财富

Wed, 20 Mar 2024 00:00:00 GMT

把自己“产品化”、“规模化”：媒体、代码、资本、劳动力。在技术和能力范围内，为社会提供有需求但无从获得的东西
金钱和财富的区别：金钱是转移财富的方法，财富是你睡觉时可以帮你赚钱的资产
找到天赋所在，积累专长：一个人只能在一两件事上做到精通，而这一两件事通常是让你痴迷的事情
投资交友，着眼长远：复利源于资本领域，不过在商业关系也可以利用复利效应，信任度的复利，找到正确的事业和一同前行的人，不断精进，就可能在人际关系和经济利益上获得复利回报
承担责任：勇于以个人名义承担商业风险。社会将根据责任、股权和杠杆效应回报你。使用杠杆是需要考量
创立企业或买入股权：没有股权，就没有通往财务自由的路径
找到杠杆：
- 劳动力杠杆：让别人为你打工
- 资本杠杆：用钱扩大决策的影响力
- 复制边际成本为零的产品：代码、书、视频、音频
用判断力赚钱：
- 清晰地思考
  - 牢牢掌握基础知识，把握知识的内在关联
  - 直面现实，阻碍我们看清现实的最大因素就是我们对现实“应有的样子”有先入为主的印象
  - 特立独行，保持独立思考
- 摆脱自我束缚，认清世界真相
  - 持续成长，打破现有的条件反射，改掉不良习惯
  - 承受痛苦，痛苦可以让你接受世界的本来面目，并且改变自我
- 学习决策技巧（决策就是一切）
  - 着眼于长远利益而非眼前得失
  - 抛开固有认知和判断，当机立断，做出更清晰的决定
  - 对自己坦诚，“最容易欺骗的人是自己”
- 发现好的心智模型
  - 进化论：理解事物的发展和适应过程
  - 反推法：从目标出发到推出实现路径，能够更加清晰地定义问题并找到解决方案
  - 复杂性理论：简单来说就是认识到简单规则如何导致复杂行为以及系统的不可预测性
  - 数学、经济学、微积分：我们可以更好地理解和评估圣生活中的各种机会成本、风险和潜在回报
  - 复利效应：复利不仅适用于金融领域，职业、社交和财务领域同样适用
分清主次，聚焦重点
找到如玩耍般的工作
如何获得运气：泼天的富贵大概率不会降到自己身上，打造你自己的知名度和信誉度，让运气不再是运气，而成为一种必然的结果
保持耐心：遵循从量变到质变的规律，春播秋收是大自然的法则

《海伯利安四部曲》

Sat, 02 Mar 2024 00:00:00 GMT

《海伯利安》、《海伯利安的陨落》、《安迪·密恩》、《安迪·密恩的觉醒》

前两部，主要讲述了 7 个朝圣者的故事，每个故事都非常精彩；后两部总体而言我不太喜欢，需要很多耐心和时间才能看完，所以就大概翻了一下结局。而且当时有点感冒发烧，闭上眼睛之后就感觉我自己在进行时空穿梭一样，迷迷糊糊梦见在和伯劳战斗，梦中的伯劳就是书上的样子，脑子十分混乱。

相比《太空漫游》和《银河帝国》，这个系列中还包含更多的宗教内容，读起来很不顺畅。但是读这本书的时候却总能想起施瓦辛格主演的《终结者》系列电影，其中各个型号的终结者和伯劳，以及尼弥斯这几个角色都有共同之处，他们都可以穿梭时空，随时拯救或者置地球于水火之中。

如果爱是答案，那么问题为何？

《银河帝国》

Wed, 24 Jan 2024 00:00:00 GMT

这套书总共分为 15 册，其中包含了阿西莫夫创作的三个系列，分别是基地系列、机器人系列和帝国系列：

基地系列
- 《基地》
- 《基地与帝国》
- 《第二基地》
- 《基地前奏》
- 《迈向基地》
- 《基地边缘》
- 《基地与地球》
机器人系列
- 《我，机器人》
- 《钢穴》
- 《裸阳》
- 《曙光中的机器人》
- 《机器人与帝国》
帝国系列
- 《繁星若尘》
- 《星空暗流》
- 《苍穹一粟》

基地系列读起来是最精彩的，不过每一本书我都是在读过了开头几个章节之后才能沉浸进去，不知道为什么我对外国人写的书都有这个通病。心理史学，哈里·谢顿用一些预言来指导人类建立第二帝国，不过人类终究是复杂的。我想基地系列的遗憾就是谢顿的心理史学失败了。

那机器人系列的遗憾又是什么呢？我觉的莫过于主角贝莱和两个机器人之间的友情，贝莱、丹尼尔和吉斯卡。这个系列的主线是两个具有心灵侦测的机器人和侦探贝莱在太空探案，并且帮助推动地球上人类走上探索银河，殖民外星系的道路。在其中我最喜欢的是机器人丹尼尔，它能侦测心灵了解主角的内心所想，但是又遵守着机器人三大法则，用朋友的方式守护着和主角的友情。同时吉斯卡和丹尼尔能够通过正子脑直接对话，尤其是吉斯卡最后离开的时候，我想丹尼尔应该懂得了友情的意义，他们俩之间的友情也是这个系列最大的惊喜和遗憾。阿西莫夫能把人类和机器人三者之间的友情描写地让人感同身受，我也能够明白为何银河帝国是人类想象力的极限。

帝国系列读起来有点像推理小说，虽然情节跌宕起伏，答案也再三反转，但是我觉得相对于前两个系列，明显不及。走马观花，只读了前两册《繁星若尘》和《星空暗流》。

艾萨克·阿西莫夫

阿西莫夫（1920-1992）苏俄美籍犹太人作家，生平 72 年著书超过 500 册，从这数字就可看出这人是个“巨佬”，除了哲学，阿西莫夫写过大量其它分类的图书。银河帝国的写作年代从 40-90 年代，可见罗马不是一天建成的。阿西莫夫也是“科幻三巨头”之一，其他两位分别是罗伯特·海莱因、亚瑟·克拉克，海莱因代表作《星际迷航》，克拉克代表作《太空漫游》。

《苏轼新传》

Sat, 30 Dec 2023 00:00:00 GMT

《苏轼新传》这本书在年初就被我加到“想读”列表里，可一整年都没有捧起书仔细读过，一是没时间，二是懒。不过 11 月之后时间算是空出来了，因为我被裁了。

领导和我谈完之后，我就想到了这本书，也许可以找到一些慰藉。其实经历裁员难免会产生一些消极情绪，自我怀疑和挫败感，想和领导理论一番，证明自己的冲动。但是当我冷静下来，我想这并不是我的问题，再多的争吵也没有意义，不如就这样“归去”。“允许一切发生”是我今年在《无人知晓》播客里听过的，我很庆幸能有这样的心态来面对裁员。我想苏轼在遭遇的人生的种种问题之后，也许早已看懂了无常世事，所以才会写下“一蓑烟雨任平生”。

人生不快乐，只因未读苏东坡

读完这本书，我没有感觉到快乐，因为没有真正读懂苏东坡，现在的我是迷茫的，以物喜、以物悲。但我想到东坡先生用他一生经历悟道，在我 30 而立的这个年头，想要东坡先生的那种豁达与豪爽，这本身就是不匹配的一件事情。不过苏轼的词写的真是好，以前上学时背的书算是白背了。

或许将来有一天当我重读东坡传的时候，能够体会到“人生不快乐，只因未读苏东坡”的感受时，我才敢说读懂了这本书，也读懂了苏东坡。

《定风波·莫听穿林打叶声》

莫听穿林打叶声，何妨吟啸且徐行。竹杖芒鞋轻胜马，谁怕？一蓑烟雨任平生。料峭春风吹酒醒，微冷，山头斜照却相迎。回首向来萧瑟处，归去，也无风雨也无晴。

苏轼因为“乌台诗案”被贬黄州，外出突遇大雨之后写下这首词，“文字狱”给苏轼上了一课，经历了那么多的起起落落，他最终选择的反求于己，以超然物外的心态来面对宦海沉浮。那些所谓的高官宰辅用文字来中伤苏轼，自此以后苏东坡对这些中伤冷眼旁观，也许他懂得时间会知晓一切，到那时自有公论。

这也是我读完本书之后最喜欢的一首词，尤其是最后一句，也可能和我当时的心境关系很大，如果用我自己的话说出来，我会说“走了，就走了！”。

关于自己，关于裁员，关于技术

Thu, 21 Dec 2023 00:00:00 GMT

当我意识到这几年写的年终总结（姑且这样叫吧）是一些无聊的流水账时，我失去了写东西的驱动力。每一年的总结都离不开工作，有吐槽、又无奈也有喜欢，今年就不谈工作了，毕竟现在没有工作。虽然没有动力写，但我在 2023 年翻看 2016-2022 年写的总结时，却感激曾经写过，生活和我被文字记录。我也希望在很久以后回看现在时，也能有文字记录着自己。

自己

在现司的第三年，工作的第七年。七年之痒，奈何一事无成。

写代码这件事，纯属偶然。高中文理分科，因为数学对我有『莫大恶意』，于是我选择了靠『死记硬背』的文科，高考的时候也庆幸自己选了文科，因为分数线比较低，但人算不如天算，还是差了 5 分。不过机缘巧合之下被一个普通二本学校录取了，于是冒着大雨取消了预定的复读名额，背着行囊去了象牙塔。

大学时光悠闲自在，光顾着玩，不过还是被计算机这门课程吸引，在老师和各大培训机构的引导下，据说那时候是编程的黄金时代，于是自学了前端，甚至不知道前端是干什么的，就觉得可以写一个自己的 Web 网页很酷。

毕业之后，拿着当时糊出来的网页当简历，想想有趣，也不觉得害羞，在风雨中上下班，一直坚持到现在，似乎没想过放弃这条路，因为找到一份自己喜欢的工作实属难得。

裁员

文章还没有写完就接到了“裁神爷”。所以也顺道写写这次裁员的经历吧。

11 月 21 号上午领导找我谈话，下午 HR 找我谈赔偿相关事宜。HR 给了两个方案，一个是赔偿 N+下月公积金社保；另一个是 N+1，但没有公积金社保。其它调休、年假按照公司的流程是可以折现的。至于年终奖公司自然是不给，我也不想过多纠结，当场回复 HR 选择 N+1，并且敲定了 lastday 是 11 月 30 号。

后面就是离职手续，这点我要夸夸公司，离职流程相当丝滑，权限交接、电脑退还一气呵成。

至于情绪，经历裁员确实会很郁闷，交接的那几天也时常怀疑自己、否定自己。但情绪是会过去的，还是要往前看，我经常提醒自己技术不止一条路，我想工作和生活也是不止一种活法。想起来，年初攒的《苏东坡新传》还没有开始读，正好乘这段闲暇时间给读了，有道是『人生缘何不快乐，只因未读苏东坡』。

书中有一首词《定风波》，我特别喜欢，境遇相同让人感慨万千，却豁然开朗，摘录于此：

话说回来，我是一个不做规划，没有目标的人，至于接下来该干啥，我心里也犯嘀咕。虽然嘴上说随遇而安，但这是一个无法逃避的现实问题，只能劳烦自己的大脑思考一下了。

技术

这个话题说来有点大，工作七年以后，我也把握不住。但首先我得批判一下前司的技术氛围，简言之没有技术氛围，只有卷工时氛围，以工时多为荣。我经常有一种感觉是，大家陷在大厂的光环里无法自拔，用着别人的轮子，套上自己的壳子，妥妥的披着羊皮的狼啊，可是没有人能看清，或者说不想看清。

我记得 16 年毕业用 jQuery，React 刚发展起来，Vue.js 还是 0.x 版本。现在 Vue.js 迭代到了 3.x，React 派生出了无数前端框架，Next.js、Preact、Solid.js、Remix 等等；从虚拟 DOM 又轮回到真实 DOM；Node.js、Deno、Bun 新概念层出不群。『学不过来』俨然成为前端程序员的真实写照。

我们光顾着在浪潮里逐浪前行，却没有属于自己的一叶扁舟，被一波又一波的后浪拍在沙滩上。因此我的技术观点就是技术不止一条路，但是要选择最适合自己的一条路，不光关于自己，也关于团队，关于公司。

最后，七年经验告诉我，前端程序员是一个标签，是一个局限，会使你无法了解业务，甚至无法理解一家公司。不妨跳出前端程序员这个视角，以用户、以公司的角度来审视自己，给自己另一种可能。只是，很可惜这是我未曾做到过的事情！

最后

我准备给这篇文章起另一个名字《岁月呼啸，美无倦意》，这是杨苡自传里写的一句话，出自她老人家翻译的名作《呼啸山庄》。说来也奇怪，看到这句话的时候，有一种怅然若失的感觉，但仅仅也就是一瞬间的感觉。但似乎和内容不是特别搭，于是就随便起了一个名字，总结起来其实就是关于这几年吧，“哈哈”，愿时间不会遗忘！

WebStorm 折腾记

Sun, 26 Jun 2022 00:00:00 GMT

介绍

WebStorm 上大学的时候断断续续用过（上学的时候穷啊，一直是在网上找的注册码），但用的最多的是 Atom、Sublime Text 这些编辑器，直到后来微软出了 VSCcode。VSCode 作为后来者确实让人惊叹，有和 WebStorm 齐头并进的趋势，对于开发者来说是件好事儿，有竞争就有进步。VSCode 推出了 Remote 远程开发模式，WebStorm 立马跟上，这不 Jetbrains 最近又开始换 UI 了。

首先说下 WebStorm 的缺点吧：

卡，WebStorm 在有些时候（例如项目依赖索引）会变得巨卡，甚至失去响应
贵，第一年 59 刀，之后每年都会有折扣，作为对比 VSCode 是免费的

但是为什么 WebStorm 又这么流行呢？作为前端 IDE 集成开发环境，完美适配了三个主流框架（Vue/React/Anglar），Webpack/Prettier/ESLint 都有集成支持，开箱即用省去了很多麻烦；优秀的 Debug；完美的 Git 支持；HTTPClient……等等。如果在设置里探索一圈下来，估计会有很多以前没有注意到功能，这就是 IDE 的意义。

一些插件

JetBrains 插件市场是通用的，任意一个 IDE 都可以安装使用，生态也很丰富，推荐一下常用的插件：

CodelyTV Theme 一款主题，有浅色和暗色
.ignore 提供一些常用的 ignore 文件模板及文件名补全功能
Key Promoter X 快捷键辅助记忆，在你使用鼠标操作的提示对应的快捷键
Rainbow Brackets 括号匹配着色
GitToolBox 拓展 WebStorm 的 Git 插件，提供自动 fetch、Git Blame 等功能

安装过多插件可能会影响 WebStorm 性能，不过可以禁用一些不常用的内置插件，例如我自己就禁用了 Docker/Keymap/Remote Development/Code With Me/Subversion 等一些暂时不用的插件。

一些配置

就像上面提到的，WebStorm 在索引 node_modules 的时候可能会很卡，可以通过以下步骤解决（配置好点的电脑无所谓）：

Help → Change Memory Setting

Help → Edit Custom Properties

idea.cycle.buffer.size=4096
idea.max.intellisense.filesize=50

Help → Edit VM Options

-ea
-server
-Xms2048m
-Xmx4096m
-Xss16m
-XX:MaxMetaspaceSize=2G
-XX:MetaspaceSize=1G
-XX:ConcGCThreads=8
-XX:ParallelGCThreads=8
-XX:NewRatio=2
-XX:ReservedCodeCacheSize=512m
-XX:+AlwaysPreTouch
-XX:+UseG1GC
-XX:+DoEscapeAnalysis
-XX:+TieredCompilationUseG1GC
-XX:SoftRefLRUPolicyMSPerMB=50
-XX:+UnlockExperimentalVMOptions
-Dsun.io.useCanonPrefixCache=false
-Djava.net.preferIPv4Stack=true
-Dsun.io.useCanonCaches=false
-XX:LargePageSizeInBytes=256m
-XX:+UseCodeCacheFlushing
-XX:+DisableExplicitGC
-XX:+ExplicitGCInvokesConcurrent
-XX:+AggressiveOpts
-XX:+CMSClassUnloadingEnabled
-XX:CMSInitiatingOccupancyFraction=60
-XX:+CMSParallelRemarkEnabled
-XX:+UseAdaptiveGCBoundary
-XX:+UseSplitVerifier
-XX:CompileThreshold=10000
-XX:+OptimizeStringConcat
-XX:+UseStringCache
-XX:+UseFastAccessorMethods
-XX:+UnlockDiagnosticVMOptions
-XX:+HeapDumpOnOutOfMemoryError
-XX:-OmitStackTraceInFastThrow
-Djdk.attach.allowAttachSelf=true
-Dkotlinx.coroutines.debug=off
-Djdk.module.illegalAccess.silent=true
-XX:+UseCompressedOops
-Dfile.encoding=UTF-8
-XX:CICompilerCount=2
-Xverify:none

File -> Invalidate Caches 删除缓存并重启 WebStorm

快捷键

WebStorm 几乎为每个操作都提供了快捷键，而且可以完全自定义或者安装其它快捷键映射（VSCode，Sublime 等），上面提到的 Key Promoter X 可以辅助记忆快捷键，而且还可以统计 miss 掉的快捷键：

当然这么多快捷键肯定是记不下的，那就只能用到什么查什么了，WebStorm 自带了快捷键文档，打开 Help → Keyboard Shortcuts PDF 就可以查看：

另外也可以打开 Help → Tip of the Day 每日技巧提示获取帮助，日记月累就可以熟练使用了。

同步

忘了从哪个版本开始，JetBrains 为 IDE 加入了设置同步的功能，只需要在右下角选择要同步的设置（UI 主题、启用/禁用的插件）。

正版 Or 盗版

条件允许的情况下还是支持正版吧。上大学期间用的是网上的注册码，后来工作直接买了 JetBrains 全家桶，不用再为 License 发愁了，省时省力。第一年 249 刀，后续每年都有折扣，看个人情况。

流水悠悠匆匆过，谁能将它片刻挽留

Fri, 31 Dec 2021 00:00:00 GMT

坐在去往公司的班车里，雾朦朦的车窗外面，金黄色洒在路的两端，轰鸣的引擎声宛如城市的心跳，像是一部科幻电影。行人匆匆，已然忘却这个场景循环了多少次。

时间如齿轮，我如轮齿，齿轮不停转动，轮齿也一刻无法停息，在生活设定好的齿槽中沉浮。每及困境，便劝自己佛系而安，但当代打工人怎么逃得出『内卷』二字，工作加班成为主旋律，纷繁复杂的世事将肉体和精神双双困住，这个时候就忍不住问自己一句：你在追寻什么？

这是工作的第五个年头，年终总结也写了五年，每一篇流水账都记录着逝去的日子，朝九晚五的工作，零零碎碎的生活，平凡至极中透着一股平凡之力。以前不愿意承认平凡，总想白嫖一把梦想，而如今在这赤裸裸的现实面前，再美好的梦想都不过云云尔。某种意义上『躺平』是一种解决方案，但现实意义上『躺平』却被刻画成贬义词，我想『躺平』是一种态度，也是一种取舍，毕竟鱼和熊掌不可兼得，虽然做不到身在最高层，『不畏浮云遮望眼』起码可以练练。

咦，说起工作，就不能不吐槽了。我记得今年的春节因为疫情影响没有回家，是在北京过的；谁能想到又因为工作原因，一半的春节是写着代码过的。一时之间不知道回不了家的锅应该甩给谁，想了想加班费，疫情背了锅。后来发加班费的时候，我觉得错怪疫情了，我又想了想，工作之间无兄弟。

三四月份上线新系统的那段时间应该是今年最忙的一段时间，每天打开 Jira 都能看到我的名字，头皮发麻，『我这样下去会很快被刀吧』我当时是这么想的，不过这些 Bug 都可以解决，重要的一点是按下葫芦起来瓢，简直和网上的段子一毛一样，这就让人觉得自己的技术是个 shit。年中评优颁奖的时候，测试同事被赋予『Bug 发现者』还是什么的一个称号，我感觉有我一份功劳。后来的 618 和双十一工作量其实都比较平缓，很合我心意（但我不重要），奈何公司要求一线支援，跟着快递小哥去搬砖，不去不知道，一去吓一跳，南来的北往的，买啥快递的都有，油盐酱醋、锅碗瓢盆、花生瓜子、可乐雪碧、电脑电视、猫粮狗粮，一边搬快递一边感叹，任何职业都不容易啊。回到家抵制不住消费主义陷阱，还得买一堆快递，这到底谁在挣谁的钱。

十二月份接了一个紧急需求，那应该是今年最忙的一段时间，每天打开工作群聊都能看见 @ 我的消息，周末也无法例外，头皮发麻，『我这样下去会很快挂掉的吧』，有了上次的经验，我这次是这么想的。后来证实这么想果然没错，Bug 少了很多，测试同事只提了一个 Jira，项目上线，我心甚慰。到元旦放假前一天都很忙（我感觉）。

吐槽了这么多，其实最应该吐槽的是疫情呀。口罩成了必备品，没有口罩别提去远方了，连门都不太敢出。夏天戴口罩捂一嘴汗，冬天戴口罩捂的都是水，眼镜也时常要摘下来擦一擦，这些都不重要，能忍。但是当感冒身体撑不住想买药的时候，当健康码扫不进门禁卡的时候…就忍不住要吐槽一下。可是当被判定为密接的时候却有点不知道该怎么办了，有点担心却有点窃喜，担心真的是密接，窃喜是 TMD 不用去公司了啊。哎，写到这里我就有点担心了，现在西安有疫情，不知道今年回家会不会受到影响，我可不想写着代码过年，这种感觉异常吊诡。

后知后觉，这是被疫情偷走的两年，我们的生活似乎变了，大家不再把说走就走的旅行挂在嘴边，脚踏实地地生活；我们的生活也没变，上下班、相聚离别、旅行，这个世界在正常运转着。就像代码里的循环，我们的故事没有终点。时光啊，就像潮水，它送来了一切，也会带走一切。

这段说给可爱又倔强的女朋友听，『哈哈，你知道么，你来北京之后，可能问过我最多的问题就是今晚加班吗？我通常会回答今天加班，也因为加班，陪伴你的时间很少，而你却会安慰我，没事，好好休息。咱俩每天都会讨论吃饭这件大事，彼此给予肯定的 OK。最后想和你说，和你在一起哈哈哈大笑便是我人生中最快乐的一件事了』。

时间不再是一个数字，而是一个指针，指向着未来，那就这样吧。

2022 随疾风前行，2021 亦不必留心。

记一次 npm dependencies 优化升级

Sat, 06 Nov 2021 00:00:00 GMT

删除 dependencies

冗余的 package 是项目中没有引用的，或者是 npm install 命令安装错误的，此类 package 可以直接删除

dependencies

html2canvas
js-base64
print-js
ts-loader

devDependencies

axios-mock-adapter
install
npm
uglifyjs-webpack-plugin

删除可替换的 dependencies

项目中同时安装了 throttle-debounce 和 lodash，而 throttle-debounce 模块可以用 lodash 的 throttle 和 debounce 方法替换

// 删除
import { debounce } from 'throttle-debounce';

// 新增
import { debounce } from 'lodash';

目前项目中只存在一处 throttle-debounce 的引用

升级 dependencies

使用 npm install 过程中会提示某个 package 存在漏洞，此类需要升级
UI 框架升级可以带来新的组件、性能上的提升、Bug 修复等

注：跨版本需要特别注意，例如从 0.21.2 升级至 1.0.0，可能会导致部分 API 不兼容

优化 dependencies

该项目在部分 Windows 电脑上第一次运行 npm install 时会失败，主要是因为引入了 sass 模块，处理 sass 文件时会用到 node-sass，而 node-sass 模块同时需要 python 和 Visual Studio C++ 库的支持，所以导致安装失败。目前 sass 官方也已经用 dart-sass 替换 node-sass 作为默认的 sass 处理方式，因此我们可以从项目中删除 node-sass，直接安装 sass 模块：

npm rm node-sass sass
npm i -D sass

dart-sass 升级了部分语法，恰好项目中也用到了，需要改造代码，如下：

/deep/ 替换为 ::v-deep

升级 ESLint

ESLint 升级时需要注意以下问题：

如果跨大版本升级可能会出现不兼容的情况
ESLint 的相关依赖版本也尽量要保持一致
升级之后 rules 可能发生变化，需要手动修复
升级过程中多运行下 npm run lint，监测升级情况

引入 Tailwind CSS

Tailwind CSS 是一个功能类优先的 CSS 框架，它集成了诸如 flex, pt-4, text-center 和 rotate-90 这样的的类，它们能直接在脚本标记语言中组合起来，构建出任何设计。该项目是基于 Vue CLI 3 生成的，目前不支持 PostCSS 8，因此需要安装 PostCSS 7 兼容性版本，如下：

安装 PostCSS 7 兼容版本

npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

PostCSS 配置文件

需要将 tailwindcss 作为 postcss 插件引入：

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};

tailwind 配置文件

运行 npx tailwind init 会生成 tailwind.config.js 配置文件，需要修改部分配置如下:

module.exports = {
  purge: ['./src/**/*.{js,ts,jsx,tsx,html,vue}', './public/index.html'],
  darkMode: false,
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [],
  corePlugins: {
    preflight: false,
  },
};

引入 tailwindcss

在 Vue 入口文件引入 tailwindcss

import 'tailwindcss/tailwind.css';

实际使用

<template>
  <div class="p-6 max-w-sm mx-auto bg-white rounded-xl shadow-md flex items-center space-x-4">
    <div class="flex-shrink-0">
      <img class="h-12 w-12" src="/img/logo.svg" alt="ChitChat Logo" />
    </div>
    <div>
      <div class="text-xl font-medium text-black">ChitChat</div>
      <p class="text-gray-500">You have a new message!</p>
    </div>
  </div>
</template>

启用 JIT 模式

Tailwind v2.1+ 新增了 Just-In-Time 模式，可以根据项目中引用过的 utility 按需生成样式表，而非一次性生成，类似 Webpack 的 treeshaking，可以优化最终的 CSS 文件体积，配置如下：

// tailwind.config.js

module.exports = {
  purge: ['./src/**/*.{js,ts,jsx,tsx,html,vue}', './public/index.html'],
  mode: 'jit',
};

PostCSS 最新版本已经完全支持，更改文件之后会自动生成对应样式并刷新浏览器，但是如果使用了 PostCSS 8.x 之前的版本，则需要搭配 TAILWIND_MODE 环境变量一起使用：

// package.json

{
  "scripts": {
    "serve": "TAILWIND_MODE=watch vue-cli-service serve --mode dev"
  }
}

Windows 可以用 cross-env 配置环境变量

// package.json

{
  "scripts": {
    "serve": "cross-env TAILWIND_MODE=watch vue-cli-service serve --mode dev"
  }
}

配置完成之后就可以更加灵活地使用 tailwindcss 了：

<img class="absolute w-[762px] h-[918px] top-[-325px]" src="/crazy-background-image.png" />

<button class="bg-[#1da1f1]">Share on Twitter</button>

<div class="grid-cols-[1fr,700px,2fr]"></div>

在 Vue2.x 项目中使用 Vite

Fri, 05 Nov 2021 00:00:00 GMT

Vite 是个啥

如 Vite 官网所介绍，Vite 是一个新型前端构建工具，能够显著提高前端开发体验，主要体现在：

极速的服务启动
轻量快速的热重载
丰富的功能 Vue/React/TypeScript/JSX 等开箱即用

搭建一个 Vite 项目

npm init vite@latest

这行代码会创建一个最简单的 Vite 项目，其中 Vue 为 3.x 版本。然后启动项目，能看到如下的输出，只用了 500ms 左右就能启动开发环境：

而 Vue CLI 生成 Webpack 项目的运行时间如下，大概在 3s 左右：

显而易见的效率提升，对于大项目来说真的是很香了，不用坐等，直接启动就能看到项目的效果

一点小说明

以上是对 Vite 的简单介绍，由于 Vite 天然支持 Vue3.x 版本，不需要过多的配置就可以使用。但是对于 Vue2.x 版本来说，Vite 缺乏相应的支持。那么如何开启 Vite 对 Vue 的支持呢，后面剩余的篇幅就专门来介绍

Vite 和 Vue2.x

配置文件

Vite 会生成一个 vite.config.js 的配置文件，类似之前的 vue.config.js，可以直接使用 ES6 的语法：

import { defineConfig } from 'vite';

export default () =>
  defineConfig({
    server: {
      /**/
    },
    plugins: [
      /**/
    ],
  });

根目录

Vite 生成的项目，index.html 在项目最外层即项目根目录下，而不是在 public 文件夹内，这点需要注意。但是 Vite 也可以指定目录作为根目录 vite serve some/sub/dir

JSX

想让 Vite 支持 Vue2.x 的 JSX 语法，需要安装插件 vite-plugin-vue2：

npm i -D vite-plugin-vue2

修改一下配置文件：

import { createVuePlugin } from 'vite-plugin-vue2';

export default () =>
  defineConfig({
    plugins: [createVuePlugin({ jsx: true })],
  });

CSS 预处理器

Vite 提供了 sass/scss/less/stylus 的内置支持，不需要安装特定的插件，只要安装对应的预处理器依赖：

npm i -D sass less stylus

需要注意由于 sass 默认使用 dart-sass，/deep/ 语法无法被正确处理，语法应该修改为 ::v-deep

环境变量

Vue CLI 生成的项目中可以通过 VUE_APP_ 这种方式来访问环境变量。Vite 修改了环境变量的使用方式，Vite 在一个特殊的 import.meta.env 上暴露了环境变量

内建变量：

import.meta.env.MODE {string} 应用运行模式
import.meta.env.BASE_URL {string} 应用基本 URL，可配置项
import.meta.env.PROD {boolean} 是否在生产环境
import.meta.env.DEV {boolean} 是否在开发环境

自定义变量：在 env 环境变量文件中定义的以 VITE_ 为前缀的变量才会暴露给 Vite 处理

#只有 VITE_SOME_KEY 会暴露出去
VITE_SOME_KEY=123
SOME_KEY=321

在 vue/js 文件中使用：import.env.VITE_SOME_KEY

在 html 中使用需要先安装插件 vite-plugin-html，例如需要用到应用的运行模式 mode 变量，可以如下修改配置文件：

import { createVuePlugin } from 'vite-plugin-vue2';
import { injectHtml } from 'vite-plugin-html';

export default ({ mode }) =>
  defineConfig({
    plugins: [
      createVuePlugin({ jsx: true }),
      injectHtml({
        data: {
          env: mode,
        },
      }),
    ],
  });

在 html 中使用 EJS 的方式插入对应的变量名称，编译之后就能直接得到变量的值：

<p><%- env %></p>

CommonJS 之 require

由于 Vite 是基于原生 ES 模块开发的，所以不支持 require 方法，如果项目中用到 require('../../assets/img.png') 这种方式就会报错，这种情况就需要开发者手动将 require 修改为 import，如果是静态资源可以统一放到 public 文件夹之后再引用，参考：静态资源处理

处理 alias @

在项目中我们通常会像下面这样引用组件：

import Card from '@/compoennts/Card.vue';

Vue CLI 生成的项目 @ 是通过 Webpack 来配置的，只是 Vue CLI 帮我们做了这个配置。而 Vite 需要手动配置一下：

import path from 'path';

export default () =>
  defineConfig({
    resolve: {
      alias: {
        '@': path.resolve(__dirname, 'src'),
      },
    },
  });

代理

参考：开发服务器选项

兼容性

Vite 默认的打包方式放弃了对传统浏览器的支持，如果你的项目需要支持传统浏览器，参考：@vitejs/plugin-legacy

启动

先看使用 Vite 之前，总共耗时 21s 左右：

使用 Vite 之后启动只需要 1-2s 左右：

最后

JS 模块的发展经历的几个阶段，到现在浏览器也开始实现 ES 原生模块，极大的提高了用户体验和开发体验。从 21s 到 2s 的启动时间，我想不仅仅是速度的提升，我们更应该关注背后的思想，以及 Vite 所做的取舍。把这些思想结合到项目中，我们也要去思考如何取舍，让新技术不止于理论

新年即出发

Thu, 31 Dec 2020 00:00:00 GMT

有人说当你看到一个程序员皱着眉头坐在电脑桌前，那就不要去打扰他，他肯定是在解决自己或者前人挖的坑。没错，这是我 2020 年元旦的真实写照，大概去年的年终总结也是在那天写的吧。我和假期的宁静似乎格格不入，平时的忙碌让我不再「想静静」，总觉得耳边需要一些声音才能安下心来。

忘了是什么时候在微博热搜上看到了关于疫情的消息，赶忙在京东上买了一盒口罩，那时候口罩的价格还很便宜，我们大概从未意识到疫情会如洪水猛兽一样袭来，即使几位吹哨人已经吹响了哨声。疫情搅乱了 2020 年，感染者数量一增再增，新闻里每时每刻都在报道，农历春节和人们被疫情团团围住，如果真的有年兽，勤劳聪明的人民群众大概也会把它死死按住，当然疫情也是一样的结局。

过完不咸不淡的春节，2 月 3 号从兰州坐飞机回北京，彼时北京对疫情的反应已经很严格了，外地返京的人群要求 14 天居家隔离。从机场到地铁、到公交，乘客寥寥无几，大家都戴着口罩，盯着手机屏幕，我想那时屏幕上应该都是关于疫情的消息吧。我走到小区门口，门卫大叔把我拦下，和查户口一样地盘问了我的“来龙去脉”之后，对我说消一下毒，他拿起 84 消毒液把我从头到脚喷了一遍，我当时心想，“嗯，还可以，今晚可以睡个好觉。”最后，他用似曾相熟的河南口音叫了我的名字，写在了登记簿上。走在空荡荡的大街上，不知道是心情落寞，还是因为这座城市华灯不再而显得有些落寞。

武汉，两个字，一座城，牵动着人们的心。回北京的前一天就接到公司分配的任务，远程支援武汉疫情项目的开发，我当时第一反应其实是：＂卧槽，要加班了＂，后来开发过程中也如期实现了＂加班＂开门红，因为那段时间生活就只有两件事，写代码和吃饭。现在回过头去想，不在一线永远也无法体会那种责任感和使命感，我想当时群里的同事，尤其是湖北的小伙伴们，我们都有一个简单的想法：少出点问题、快速上线，用自己的专业能力为武汉做点贡献。一方有难，八方支援，上一次看到如此空前团结的时候是 08 年，细数已经过去了 12 年之久。似水流年，虚度着大把时光。

工作的时候想好好生活，假期的时候想敲敲代码，两者并不冲突，只是我在修福报和平衡生活之间摇摆不定。上半年在经历了几次通宵加班、996 打工人的噩梦之后终于打定了辞职的心意。国庆过后呈了辞职申请，期间同事好意想留，十分感激，却是山水一程，终有一别。29 号离职，30 号入职新公司，离慢慢来的道路越来越远。我想工作和生活并不对立，工作是生活的一部分，也是生活之必需，如何平衡还要看各人各自的选择。其实生活到处都是选择，选择什么样的生活对于自己来说没有什么对错，只是一个方式，我只在乎自己想要什么、有一个目标，对错只是外人之于我的评价，千万种生活方式，做自己最难。

重新出发需要勇气，我想今年做过最勇敢的事就是牵住了@葡萄君的手，以及辞职换工作吧。佳人在侧有如星星和月亮一起闪耀，爱情这道光可以驱散孤独和寂寥，照耀着我的生活；换工作权且是一次机会，重新出发的机会，人生路漫漫，需要一直在路上。

最后这段话写给自己，也写给@葡萄君。人们常说做一个情绪稳定的大人，那我倒希望我们可以成为能够接受自己情绪不稳定的大人。即使受了再大的委屈，无论脚下的路如何崎岖，希望我们保持对生活的热情，因为当下拥有，因为明天尚且可以期待。经历过这一切后，重新开始，再去相信生活，然后一点一点地重拾自信。

在九千米的高空写下这段年终总结，不过 2020 年最好的年终总结莫过于@葡萄君，谢谢你牵着我的手，陪我走到 2021，以及往后余生。

新年快乐，和顺致详！

以上。

使用 GitHub Actions 将 React App 部署到 GitHub Pages

Tue, 05 May 2020 00:00:00 GMT

最近接到一个需求，做一个类似下面这种页面的 demo，原本让用小程序实现，但是后来发现貌似没法用小程序实现，就改用 Web 来实现了。后来给别人展示的时候，发现我总不能发给人家一堆 node_modules 呀，于是就想部署到 GitHub Pages。其实不用 GitHub Actions 也可以，只不过每次 push 之后多敲一次命令：npm run deploy，但是偷懒也应该要认真偷。

手动部署

由于这个项目是用 create-react-app 生成的，所以参考一下它的部署文档，可以看到其实挺简单的：

在 package.json 中添加 homepage 字段，其中 <my-app> 可以是项目名称
```
"homepage": "https://myusername.github.io/<my-app>"
```
安装 gh-pages 依赖，并在 package.json 添加 deploy 脚本，其中 predeploy 会在 deploy 脚本运行之前自动执行
```
npm i -D gh-pages
```
```
"predeploy": "npm run build",
"deploy": "gh-pages -d build"
```
运行 deploy 脚本
```
npm run deploy
```

有可能遇到 gh-pages 分支无法创建的问题，运行下面的命令，清一下缓存就 OK 了：

rm -rf node_modules/gh-pages/.cache

GitHub Actions 部署

GitHub Actions 做的是同样的事情，只不过把 npm run deploy 这一步交给了 CI 来做。

创建一个 workflow 文件
```
touch .github/.main.yaml
```

修改内容

name: CI

on:
  push:
    branches: [ master ]
  pull_request:
    branches: [ master ]

jobs:
  build:
    runs-on: ubuntu-latest
      steps:
      - uses: actions/checkout@v2

      - name: Use Node.js ${{ matrix.node-version }}
        uses: actions/setup-node@v1
        with:
          node-version: ${{ matrix.node-version }}

     -  name: Deploy
        run: |
          git config user.name <username>
          git config user.email <email>
          git remote set-url origin https://${{ secrets.<personal_access_token> }}@github.com/<user>/<repo>.git
          npm install
          npm run deploy

最后将 <> 内的内容替换自己的配置即可，其中 <personal_access_token> 需要在生成以后添加到项目里的 secrets 里

到这里就完成了，只要触发 push 操作，GitHub Actions 就会自动运行部署。

macOS 折腾记

Sat, 18 Apr 2020 00:00:00 GMT

Homebrew

# 安装
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"

# 配置国内镜像
git -C "$(brew --repo)" remote set-url origin https://mirrors.tuna.tsinghua.edu.cn/git/homebrew/brew.git

git -C "$(brew --repo homebrew/core)" remote set-url origin https://mirrors.tuna.tsinghua.edu.cn/git/homebrew/homebrew-core.git

git -C "$(brew --repo homebrew/cask)" remote set-url origin https://mirrors.tuna.tsinghua.edu.cn/git/homebrew/homebrew-cask.git

git -C "$(brew --repo homebrew/cask-fonts)" remote set-url origin https://mirrors.tuna.tsinghua.edu.cn/git/homebrew/homebrew-cask-fonts.git

git -C "$(brew --repo homebrew/cask-drivers)" remote set-url origin https://mirrors.tuna.tsinghua.edu.cn/git/homebrew/homebrew-cask-drivers.git

brew update

brew tap homebrew/cask-versions

brew tap homebrew/cask-fonts

brew cask install iterm2 alfred one-switch v2rayu google-chrome firefox-developer-edition microsoft-edge visual-studio-code-insiders adguard nvm jetbrains-toolbox font-jetbrains-mono appcleaner

iTerm2 终端
Alfred 快捷启动器（Alt + Space）
One Switch 快捷切换工具（夜间模式、勿扰模式……）
V2rayU 梯子
Google Chrome 浏览器
Firefox 浏览器
Edge 浏览器
VSCode Insiders 编辑器
AdGuard 广告拦截
nvm Node.js 版本管理工具
JetBrains Toolbox JetBrains 全家桶
JetBrains Mono 字体
Appcleaner 软件卸载

App Store

Bear
印象笔记
The Unarchive
QQ 音乐
微信
Spark
MindNode

其他

终端优化

使用 iTerm 替换系统自带终端，下载 iTerm 配色

使用 Powerlevel10k 主题

# 安装
brew install romkatv/powerlevel10k/powerlevel10k
echo 'source /usr/local/opt/powerlevel10k/powerlevel10k.zsh-theme' >>! ~/.zshrc

# 修改 zshrc
vim ~./zshrc
ZSH_THEME="powerlevel10k/powerlevel10k"

# 手动配置
p10k configure

Screenshoot

一个人和他自己的故事

Tue, 31 Dec 2019 00:00:00 GMT

我随着福瓦德·伊本·阿巴斯的脚步来到了这座祥和之城——巴格达，走进那家位于五金市场的店铺。一位老人从门里走了出来。我想那应该就是巴沙拉特。

『我的名字是巴沙拉特，能为您效劳吗？』

『听说您这里有一道年门，可以让人们回到过去旅行？』

『是的，先生。不过这道年门只能让你去到未来，而开罗的年门可以让你回到过去。』

于是我带着巴沙拉特的书信来到了开罗，和年门的主人交谈一番之后，我才知道他是巴沙拉特的儿子，他说会帮助我实现愿望，让我回到过去。『不过您要知道，过去已经发生的事情是无法改变的。』他说。

『不胜感激。』我说。

我站在那个巨大的金属环前，闭着眼睛思索往昔，记忆如胶片一般在眼前闪回。我没有告诉巴沙拉特的儿子，如果有可能我会尽力改变以前的自己，我会告诉我自己在未来的经历，我会让我的未来向我现在所期望的方向发展。我抬腿迈过那道门，不同于年门那边屋子里的热气腾腾，这边白雪皑皑，盖着雪被的山峰一座连着一座，仿佛天的尽头也是山。寒风从我身旁呼啸而过，我正站在故乡地势最高的一座山上，那里人们喜欢把它叫做『梁』，从这里看去，小小的村庄一览无余，袅袅炊烟，鸡鸣狗吠，像极了记忆中小时候的样子，我想能不能从这里一路溜回家。就在我思索今天是什么日子，为什么会回到这一天的时候，我看见一个人拖着行李从我面前走来，再近几步我就认出来了，那是一年前的我自己，我为他没有认出我而暗自舒了一口气。今天是腊月二十八，早上六点钟的时候他从北京出发，风尘仆仆，经过七个小时的颠簸终于来到这里。

『你为什么不直接坐车坐到家门口呢，从这里到你们家还有一段距离呢？』

『我想走走、看看，又一年没回家了，总是希望有时间回来看看，但事与愿违，没能挤出时间。我喜欢这里的生活，春夏秋冬四季分明，生活的热闹和静谧这里都有。』

『以后有的是时间看风景，你现在不应该快点回家吗？』我的话到嘴边却没有说出口，我知道以后看的所有风景都不如这里的风景好看，以后的时间都只是从嘴里说出来的两个字而已。我陪他一起走回了家，路上也没有说什么，我了解他，他不是一个健谈的人。

春节前后的一段日子里都会洋溢着节日的氛围，就像空气中散发的阵阵酒精的气味，绵延悠长而久久不会散去。年三十儿便是这种氛围的顶点，每家每户都关起门来独自享受，为的是不让新春的幸福从门缝里悄悄溜走。但那天发生了一个小插曲，起因是不知道谁放烟花的时候不小心点燃了一垛柴草，引起了一场火灾，火光照亮了除夕的夜晚，正在享受团圆之乐的人们都出来救火了，他也准备去救火，我拉住他，『别去了，小火，一会儿就灭了。』我说，显然这并不能改变什么，他还是去了。火灭了之后，他们又回到了饭桌前吃年夜饭。家里的长辈围成一圈在讨论他的未来，简而言之爱情和事业，那个时候他没有说话，只是偶尔笑笑，我知道他在想什么。我不知道他那时是否明白，这些其实都是为他好，而现在的我却想让他明白，我想告诉他，这些事情大可不必在意，他会有他自己的选择，他会找到自己的路，他会遇到那个对的人。

他挤出时间和老朋友们见了一面，变化没有他想象的那么大，大家都有自己的生活，但是谈起过去似乎永远也有聊不完的话题，他们绕不开的话题是学校时光，匆匆一别，就像很多年已经过去了一样，记忆中永远都是那群最纯真的孩子。我知道后半年还会再次见面，但他还是希望这样的时间能多一些，再多一些。今年是他的本命年，生日那天他许了几个靠谱的愿望，这些我都已经知道了，我知道这些愿望能完整实现的寥寥无几，可我不忍心告诉他。

『请努力吧，未来的你会感激那个努力的你。』我说。

『我知道，我一直很努力，即使偶尔迷茫，但我还会相信远方。』他说，

『是的，远方的田野和诗，你都会有的』我说。

回程的日子到了，他要先坐着去往城里的车，然后在城里搭火车。车在一眼望不到尽头的山峦间颠簸前行，一会儿在谷底，一会儿在山顶，他在狭窄的空间里昏昏欲睡，离开之前，他想再看一眼这里的风景。『一份饺子，一场别离。一杯清茶，一载年华。』我看着他在朋友圈里分享了一条动态。

回到熟悉的城市，车站的人潮汹涌，宿舍里却空空如也，他难掩失落。『用不了多长时间你就会忘记这种感觉，因为工作，工作会填满这种偶尔产生的空虚感。』我说，我希望这能带给他一点慰藉。

『世界上最好的工作是什么，是你心甘情愿去做的工作。』我读到这句话的时候很受触动。他喜欢自己的工作，挑战中不乏乐趣，挫败后收获惊喜。工作的时候紧盯着屏幕，在键盘上敲敲打打，时不时地嘴里还骂骂咧咧，每天面对电脑，体会着电脑的喜怒哀乐，发量其实还可以，不喜欢格子衫。

『戴好你的眼镜，不要在无聊的时候取下来玩弄。』

『为什么？』

『总之记住我的话就好了。』

他写代码的时候，我坐在他身边，我想为他指出他犯的每一个错误，因为这样，他就不必在纠结和自我怀疑之间拉扯；我更想告诉他的是这个需求并不是最终需求，我突然想起巴沙拉特交代给我的事情：过去的事情无法改变，你只能更加深刻地去理解它们。有一天午后他问了我一个问题：『既然我所做的一切最终都会消逝，那此刻我写的这些代码、做的这些事情又有什么意义，时间将会带走一切，对吗？』我从他脸上看出来，他确实很困惑也很纠结。我想他或许把计算机世界的里 0 和 1 当成了自己所追寻的意义。

『诚然你所做的一切都会被时间消磨殆尽，计算机里存储的那堆 0 和 1 并没有什么意义。可是你所寻找的意义就在于写代码时所做的思考，以及这些想法随着代码的执行之后帮助其他人解决的问题，当想法化为行动，一切都是「你自己」赋予其以意义。即使你现在不明白，以后也会明白的。你能做的就是写好每一行代码，尽力确保 Bug 之神不会找到你身上。你问的这个问题，答案也会随着时间沉淀在你的心里。』

……

我在 2019 年的生活已经快和 2020 年的生活齐头并进了，该是时候和他告别了。

『你觉得你这一年过得怎么样，有没有什么遗憾？』我说。

『平平淡淡。你觉得呢？未来的自己。』他望着我的眼睛说。

『人生海海，过去的事情无法改变，当下发生的可以把握，未来能够有所期待，不虚度时光，就是对自己最好的希冀。』我笑着说。

『看上去像是我会说的话。』

『很幸运能陪你走过这段旅程，该是时候说再见了，从现在起，你要靠自己了，你会找到你自己路的。愿幸福与你同在。』

我遵循了我的承诺，向巴沙拉特讲述了所有的事情。

『愿幸福与您同在！』巴沙拉特说。

『愿幸福与您同在！』

后记：每到年底总想写点东西，回首过往还是会使人唏嘘，点点滴滴是生活，跌跌撞撞是成长，伴随着分分秒秒流逝。灵感来自于特德·姜的科幻小说《呼吸》中的其中一篇《商人和炼金术士之门》。

2019 读书小结

Mon, 30 Dec 2019 00:00:00 GMT

今年是我读书最多的一年，超过了前 23 年读过总和。为什么突然间读了这么多书呢，我想并不是因为顿悟，缘由是去年搬了一次家，搬到了五环边儿上，通勤时间猛增到 3 个小时（早晚各 1 个半小时），地铁上能做什么呢？除了玩手机就是打盹儿，我想还是拿着吃灰好多年的 Kindle 吧，找本书读既能长见识，挤地铁的时间也能过得快一点，对眼睛的伤害还少一点。总的来说，读的书很杂，主要目的是消遣通勤的无聊时光，但我觉得应该为此做一点总结，希望来年无聊之时还会捧起一本书。

专业类

职业相关，作为一个程序员，很重要的一个能力就是持续学习、持续接受新思想。虽然我在遇到问题的时候，搜索引擎可以告诉我怎样做，但是书作为一个有整体架构和逻辑的知识载体，它能让我对一个问题产生整体的认知，它不仅可以告诉我怎么做，还会告诉我为什么会出现这种问题，以及会出现新的 API 或新技术来应对这个问题。

1️⃣《重构》⭐️⭐️⭐️⭐️⭐️：这是我今年读的最大部头的专业书籍。第二版用 JavaScript 重构了它自己，我觉得它让我认识到，重构不一定是重构旧代码，这是一种追求更好的思想，如果能嗅到坏代码的味道，那么实现新功能的过程也同样可以重构，重构是一个过程。

2️⃣《程序是怎么跑起来的》&《编码：隐匿在计算机硬件背后的语言》⭐️⭐️⭐️⭐️⭐️：从硬件到软件，从 0 和 1 到高级语言，从二极管到计算机。窥探一下计算机内部原理，就算不懂，也不亏的，就比如我曾经很不理解计算机的浮点数是什么，但读完这两本书之后我对它就有了全新的认知。

3️⃣《学习 JavaScript 数据结构》⭐️⭐️⭐️⭐️：数据结构和算法是程序员的四十米大刀，在于我们怎么用。用自己熟悉的一门语言学习数据结构和算法，门槛会低一点，学到的也能多一点。

4️⃣《HTTP 权威指南》⭐️⭐️⭐️⭐️⭐️：我是略读的，因为主要是为了解决工作中遇到的问题——缓存。这绝对算得了一本工具书，基础中的基础，读一遍有读一遍的收获。

通常书对于当下的技术发展来说时效性比较低，很多技术书刚一出版，这种技术就发布一个大版本。所以对于专业类的书来说，我倾向选择那些比较基础的，理解不变的基础，再去掌握变化的新事物，人们把这种方法叫做『以不变应万变』。

小说类

我对小说有一种天然的敬而远之的想法，尤其是外国小说里的人名和啰里啰嗦的对话，那些人名会让我把那些啰里啰嗦的对话搞成一团浆糊，还不得不经常翻回去找人物关系，久而久之，对这种小说的好奇心也都磨灭了。但今年算是有一点改观，因为我从《霍乱时期的爱情》中发现了一种读法，只记外国人名的最短的那部分，比如阿里萨·弗洛伦蒂诺，我就可以简单记为阿里萨，希望我不是最后一个知道的人。

1️⃣《许三观卖血记》&《活着》⭐️⭐️⭐️⭐️⭐️：这两本书是中国作家余华的作品，余华的笔就是董卿口中的『凌厉的刀锋』，两本书两中人生。我记得读完之后还写了一篇文章：『书』擦去眼泪，如同掸去身上的稻草。这两本书也被翻拍成了电影，一部是葛大爷主演的《活着》，《许三观卖血记》则是韩国人翻拍的，氛围轻松、比较逗，可以看一下。

2️⃣《人生海海》⭐️⭐️⭐️⭐️：今年很火的一部虚构类小说，我用微信读书的听书功能听完了这本小说，如果用一句话来说：活在别人故事里的一个人和他的一生。

3️⃣《呼吸》⭐️⭐️⭐️⭐️⭐️：这本书不在上面的那张图片里，因为作图的时候还没有读完。这是一本科幻小说，作者是一位华裔，曾经也是一名程序员。他的文章给了我灵感，让我完成了一篇年终总结（班门弄斧 🤣）。

4️⃣《追风筝的人》⭐️⭐️⭐️⭐️⭐️：如果让你一句话证明看过这本书，那你一定得大声喊出来『为你，千千万万遍』。读完之后很受触动，于是把这本书送给了一位好朋友 🤣。

5️⃣《流浪地球》⭐️⭐️⭐️⭐️：科幻小说，看了贺岁大片《流浪地球》之后一直惦记着看原著，终于在一次出差的途中看完了，一百多页，用手机不到俩小时就看完了。

其实写到这儿我突然想起以前读过的余秋雨的一段话，原话忘记了，大意是生活在别处，把自己抽离出来，放到一个陌生之地，面对另一个世界，造就另一个天地里的自我，这个自我和原来的自我可能产生冲突，很少和解。我想小说就有这样的能力，把自己放到小说里去面对人性善恶，或接受或排斥，体会作者世界里的自我和现实世界自我的碰撞与和解。读一本小说至少可以获得一次精神上的释放。

科普类

『雾霾致癌……』、『咖啡致癌……』、『xxx 公司的 AI 研究震惊全球……』，每当我看到这些乌七八糟的内容之后，我就会想『我和死神又一次擦肩而过、我擦这个公司好 🐂🍺』。把这类书单拎出来是因为现在的内容发布者鱼龙混杂，谣言不但不止，甚至越传越严重，所以我觉得这类科普书值得一看，积累一些生活的常识之后，就能自动过滤那些不靠谱的内容，何乐而不为。但我也必须承认，《七堂极简物理课》是完出于好奇才看的，读完之后的我一脸懵逼 🤣。

1️⃣《癌症新知》&《癌症真相》⭐️⭐️⭐️⭐️⭐️：这是一个系列，总共两本书。

2️⃣《AI 未来》⭐️⭐️⭐️：李开复写的。关注点在未来，未来 AI 和人类之间的『博弈』，但着实有点枯燥。

3️⃣《急救：比医生快一步》⭐️⭐️⭐️⭐️⭐️：一位曾经战斗在急救一线的急诊医生写的。

4️⃣《当呼吸化为空气》⭐️⭐️⭐️⭐️⭐️：虽然这是一本患癌医生的自传（在自传完成之前就去世了），但是书中对癌症和医患关系的观点都有值得借鉴的地方。

读书这件事儿

读书这件事儿是因人而异的，一千个观众就有一千个哈姆雷特。每个人都有自己的需求，在专业的书籍里寻找工作中问题的答案，在小说里消遣无聊时光，在科普类的书里怀疑一切、打破自己的偏见，在历史传记的书里仰望别人的人生，在哲学的世界里怀疑人生……有些事情并不是想要得到什么，或许只是自己的一种想法激励着我们完成某件事，那就是初心。

注 1：开头的图片是用 Echarts 生成的，因为读书的数据在豆瓣都有过标记，先从豆瓣爬取，然后手动改成所需要的数据结构。

注 2：为什么全是 5 星？首先是因为豆瓣的网站上没有我打的评分，其次是我太懒了。

如何解决 Gatsby.js 添加 RSS 报错问题？

Sat, 23 Nov 2019 00:00:00 GMT

报错

error on line 2025 at column 11: PCDATA invalid Char value 8

原因

并非所有的 utf-8 有效字符都会被 XML 接受，因此在解析的过程中要将某些特殊字符移除。

解决方案

把 gatsby-plugin-feed 插件的 serialize 方法替换为以下方法：

// gatsby-config.js
serialize: ({ query: { site, allMarkdownRemark } }) => {
  return allMarkdownRemark.edges.map((edge) => {
    return Object.assign({}, edge.node.frontmatter, {
      description: edge.node.frontmatter.tldr,
      date: edge.node.frontmatter.date,
      url: site.siteMetadata.siteUrl + edge.node.fields.id,
      guid: site.siteMetadata.siteUrl + edge.node.fields.id,
      custom_elements: [
        {
          'content:encoded': edge.node.html.replace(
            /[^\x09\x0A\x0D\x20-\xFF\x85\xA0-\uD7FF\uE000-\uFDCF\uFDE0-\uFFFD]/gm,
            ''
          ),
        },
      ],
    })
  })
}

其中，真正起作用的是这段正则替换：

html.replace(
  /[^\x09\x0A\x0D\x20-\xFF\x85\xA0-\uD7FF\uE000-\uFDCF\uFDE0-\uFFFD]/gm,
  ''
)

如何在 Gatsby.js 中使用 BizCharts？

Sat, 23 Nov 2019 00:00:00 GMT

BizCharts 是阿里前端团队开源的一款基于 React 开发的数据可视化框架。今天上午想给博客书单加一个数据统计的功能，便引入了 BizCharts，但在编译的时候出现了 document not defined 的错误，这是服务端渲染模式下的典型问题。

解决过程

我的博客是基于 Gatsby.js 开发的，所以我想它肯定会做对应的处理，参见文档，在 gatsby-node.js 中加入以下代码：

exports.onCreateWebpackConfig = ({ stage, loaders, actions }) => {
  if (stage === 'build-html') {
    actions.setWebpackConfig({
      module: {
        rules: [
          {
            test: /bizcharts/,
            use: loaders.null(),
          },
        ],
      },
    })
  }
}

但奇怪的是问题没有解决。

于是经过几分钟的 Google，终于在 GitHub 上找到了一个 issue，它的做法是使用环境变量来判断是否处于客户端，如下：

let bizcharts;

if (process.browser) {
  bizcharts = require('bizcharts');
}

//...
render() {
  return <bizcharts.Chart />
}
//...

『书』擦去眼泪，如同掸去身上的稻草

Fri, 20 Sep 2019 00:00:00 GMT

前几天看了一期央视的朗读者，主题词是『故乡』，嘉宾之一是余华。在这之前，我以为余华是一位女作家。他带着一些南方口音，和董卿的对话十分幽默有趣，和他的写作风格相去胜远，于是便想读读他的书。借着周末读完『活着』和『许三观卖血记』这两部小说，『活着』真实近乎残忍，是一部纯悲剧；『许三观卖血记』是一部悲喜剧，悲剧的的内核是爱和希望。就像董卿评价余华的那样：『他的文字里冷静透着力度，就像是一把泛着银光的手术刀』。

活着

福贵出生在一个富裕的家庭，他爹是地主，人们管他叫阔少爷。游手好闲，吃喝嫖赌是他最大的爱好，就连他自己也说，赌博又痛快又紧张，有一股说不出来的舒坦。最后，他输地一干二净，气死了亲爹，老丈人接走了怀胎六月的妻子，家人都被赶了出来，住在一间小茅屋。自此便不再是少爷，好在福贵用前世狗吠的命换来陪在他身边的母亲和女儿。生活归于平静，我不知道福贵有没有想过就这样度过一生。然而真正的不幸却刚刚开始……

福贵坐在树荫下，清晰而又平静地讲述着自己的一生。有一个画面萦绕在我的脑海：一个老人赶着一头老牛，回过头来，两只眼睛眯成一条缝。如果我没记错，那是小时候看过的电视剧『福贵』的画面，现在我才知道，电视剧里的福贵就是余华笔下的福贵。

我一直在想如果是我，我会怎么做呢？我不知道！福贵的一生都是悲剧，读者甚至来不及同情他，一个个悲剧接踵而至。他是历史洪流中的个体悲剧，那个时代有无数个福贵。即便今天，也时刻上演着福贵式悲剧。『活着』是中国农村半个世纪的缩影，里面不止福贵一个悲剧，内战时期的老全、解放后的龙二、饥荒时期的人民、文革中的春生都是悲剧。

我对书中一段描写农民的语言深以为然：『他们脸上的皱纹里积满了阳光和泥土，他们向我微笑时，我看到空洞的嘴里牙齿所剩无几。他们时常流出混浊的眼泪，这倒不是因为他们时常悲伤，他们在高兴时甚至什么事都没有的平静时刻，也会泪流而出，然后举起和乡间泥路一样粗糙的手指，擦去眼泪，如同掸去身上的稻草』。对于生在长在农村的我，对于农民的坚韧、善良司空见惯。

福贵，活着只是为了活着。

我们，活着不仅仅是为了活着。

许三观卖血记

许三观，儿时失去父母，随着爷爷和四叔住在农村，喜欢坐在爷爷家的田埂上吃西瓜。

每次卖血之前他都会喝很多水，这样身上的血就会多一些。

每次卖完血他都会去饭店要一盘炒猪肝、二两黄酒，猪肝补血，黄酒活血。

第一次是为了结婚。

第二次是因为他的大儿子打伤了铁匠的儿子，赔医药费。

第三次是为了性昔日的梦中情人。

第四次因为大饥荒年代，全家没有饭吃。

第五次是为了二儿子能早日从农村回到城市。

第六次到第十一次是因为大儿子的病。

最后一次，他想吃炒猪肝、喝黄酒，便走到医院去卖血，可是那位『血头』把许三观侮辱了一通并赶了出来，于是他坐在大街上哭了起来。是啊，许三观靠着卖血迈过了人生一个又一个的坎儿，如今他的血没人要了，如果将来再遇到什么坎儿怎么办，怎么能不叫人伤心痛哭呢？

可是许三观，你终于可以不用卖血的钱去买炒猪肝和黄酒了呀！

『TypeScript』如何对 JS 进行类型检查

Sat, 31 Aug 2019 00:00:00 GMT

JavaScript 是一门动态类型语言，我们在编写代码时，一不注意漏掉一个问题可能会导致生产环境出现大问题，例如忽略某个函数的参数或返回值类型。在越大的工程中，越健壮的代码显得尤为重要，那么如何借助 VSCode 和 TS 写出更加健壮且易读的代码呢？

使用 VSCode 和 WebStorm 等

VSCode 和 WebStorm 属于现代编程工具，它们对 JS 的类型提供了更好的支持，比如类型检查和类型推导，在编写代码阶段就可以避免很多不必要的错误。

JSDoc

JSDoc 其实就是类似于 JavaDoc 的一种注释性文档，借助开发工具可以对 JS 的变量进行类型检查，而且也可以生成 HTML 文档方便阅读。

/**
 * add
 * @param {String} x
 * @param {String} y
 * @returns {String}
 */
function add(x, y) {
  return x + y
}

@param 可以指定参数的类型，@returns 则可以指定函数的返回值类型。如果使用 VSCode 等工具，在调用时会进行类型检查，如果参数类型不匹配的话，则会出现错误提示。

JSDoc 支持很多 @ 关键词，可以参考文档。它甚至可以支持自定义类型，但是写法比较繁琐，如果用在大型项目中的话，维护这些注释的话，得不偿失。

TypeScript 声明文件

TS 声明文件有几种生成方式：

在 tsconfig.json 中配置 declaration
安装已有声明文件，例如 yarn add -D @types/lodash
手动编写声明文件，TS 有提供一些模板

『TypeScript』实用类型

Wed, 28 Aug 2019 00:00:00 GMT

Partial<T>

它会构造一个新类型，并将类型 T 的所有属性设置为可选。该类型是类型 T 的子集。

interface User {
  name: string
  age: number
}

const a: User = {
  name: 'tom',
  // age: 16
}
// Error

const b: Partial<User> = {
  name: 'simon',
}
// OK

如果用 TypeScript 手动实现，代码如下：

type Partial<T> = {
  [P in keyof T]?: T[P]
}

Readonly<T>

它将构造一个新类型，并将类型 T 的所有属性设置为 readonly，这意味着新类型的属性都不能重新赋值了。

interface User {
  name: string
  age: number
}

let tom: Readonly<User> = {
  name: 'tom',
  age: 16,
}

tom.name = 'simon' // Error

TypeScript 手动实现如下：

interface User {
  name: string
  age: number
}

type Readonly<T> = {
  readonly [P in keyof T]: T[P]
}

Record<K, T>

构造一个具有类型 T 的一组属性 K 的新类型，该类型经常用于将一种类型的属性映射到另一种类型上。

interface Page {
  title: string
}

type PageInfo = 'home' | 'about' | 'contact'

const x: Record<PageInfo, Page> = {
  home: { title: 'home' },
  about: { title: 'about' },
  contact: { title: 'contact' },
}

Pick<T, K>

从类型 T 中选取一些属性 K 作为新类型。

interface Todo {
  title: string
  description: string
  completed: boolean
}

type TodoPreview = Pick<Todo, 'title' | 'completed'>

const todo: TodoPreview = {
  title: 'Todo',
  completed: true,
}

Omit<T, K>

从类型 T 中选取所有属性，然后再移除指定的 K 类型的属性。

interface Todo {
  title: string
  description: string
  completed: boolean
}

type TodoPreview = Omit<Todo, 'description'>

const todo: TodoPreview = {
  title: 'Todo',
  completed: true,
}

Exclude<T, U>

通过从类型 T 中排除可分配给类型 U 来构造新类型。

type T1 = Exclude<'a' | 'b' | 'c', 'a' | 'b'> // 'c'
type T2 = Exclude<string | number | (() => void), Function> // string | number

Extract<T, U>

通过提取类型 T 中可以分配给类型 U 来构造新类型。

type T1 = Extract<'a' | 'b', 'c', 'a' | 'b'> // 'a' | 'b'
type T2 = Extract<string | number | (() => void), Function> // Function

NonNullable<T>

从类型 T 中排除 null 和 undefined。

type T1 = NonNullable<string | number | null> // string | number
type T2 = NonNullable<string[] | null | undefined> // string[]

Required<T>

构造一个新类型，并将类型 T 的所有属性设置为必选。

interface User {
  name?: string
  age?: number
}

const tom: User = {
  name: 'tom',
}
// OK

const simon: Required<User> = {
  name: 'simon',
  // age: 16,
}
// Error

ThisType<T>

它不返回任何转换类型，仅作为 this 上下文的标记。要使用该类型，必须在 tsconfig.json 中启用 noImplicitThis。

『TypeScript』高级数据类型

Sun, 25 Aug 2019 00:00:00 GMT

交叉类型

交叉类型是把多种类型结合为一种类型，使之拥有所有类型的成员，使用 & 进行连接：

interface User {
  name: string
  age: number
}

interface Employee {
  company: string
}

// 交叉类型
type NewType = User & Employee

const tom: NewType = { name: 'tom', age: 20, company: 'xxx' }

联合类型

联合类型表示一个值可以是一种或多种类型，使用 | 进行表示：

let x: string | number = '2'
x = 3 // OK

如果某个值是联合类型，那么我们只能访问该联合类型的共用成员：

interface Bird {
  fly()
  layEggs()
}

interface Fish {
  swim()
  layEggs()
}

function getSmallPet(): Bird | Fish {
  //...
}

let pet = getSmallPet()
pet.layEggs() // OK
pet.swim() // Error

字面量类型

既可以限制变量的类型，也可以限制变量的取值范围。

字符串

const b = 'a' | 'b' | 'c'

数值

const c = 1 | 2 | 3

索引类型

场景之一是从一个对象中取出某些属性：

function pluck(o, props) {
  return props.map((p) => o[p])
}

用 TS 实现：

function pluck<T, K extends keyof T>(o: T, props: K[]): T[K][] {
  return props.map((p) => o[p])
}

interface Car {
  manufacturer: string
  model: string
  year: number
}

let taxi: Car = {
  manufacturer: 'Toyota',
  model: 'Camry',
  year: 2018,
}

let modelYear = pluck(taxi, ['model', 'year']) // ['Toyota', 2018]

keyof T 是类型 T 中已知属性的并集，如 keyof Car 即表示 'manufacturer' | 'model' | 'year'。

T[K] 表示 T 类型中 K 属性的类型。

映射类型

TypeScript 中内置几种映射类型，通常和泛型结合使用。

Readonly
Partial
Pick
Record

条件类型

T extends U ? X : Y

这个表达式表示如果 T 能够分配给 U，则类型是 X，否则类型是 Y。

类型保护

TypeScript 能在特定的区块中确保变量属于某种确定的类型，以便在该区块中使用该变量。在 TypeScript 中有几种方法可以创建类型保护：

class Java {
  helloJava() {}
  java: any
}

class JavaScript {
  helloJavaScript() {}
  javascript: any
}

function lang(lang: Java | JavaScript, x: string | number) {
  // 1. instanceof 关键词
  if (lang instanceof Java) {
    lang.helloJava()
  } else {
    lang.helloJavaScript()
  }

  // 2. in 关键词
  if ('java' in lang) {
    console.log(lang.java)
  } else {
    console.log(lang.javascript)
  }

  // 3. typeof 关键词
  if (typeof x === 'string') {
    console.log(x.length)
  } else {
    x.toFixed(2)
  }
}

类型别名

type 关键词可以为类型创建别名，它可以为原始类型、联合类型、元组或者其他指定的类型创建别名：

type Name = string
const a: Name = 'TypeScript'
type Pet = Fish | Bird

『TypeScript』基本数据类型

Sun, 11 Aug 2019 00:00:00 GMT

Boolean

布尔值是最基本也是最简单的数据类型，它只有两种值：true/false。

let isDone: boolean = false

Number

JS 中的所有数值都是浮点值，TS 也一样，在 TS 中数值的类型为 number，TS 同时也支持二进制等其它进制形式表示的数值：

let decimal: number = 6
let binary: number = 0b1010
let hex: number = 0xf00d

String

字符串类型跟 JS 并无二致：

let str: string = 'Hello TypeScript!'

Array

TS 中定义数组有两种形式：

// 1. 在类型关键词后跟 **[]**
let list: number[] = [1, 2, 3]

// 2. 泛型
let list: Array<number> = [1, 2, 3]

Tuple

JS 没有元组这种数据类型，在我了解的语言中，Python 有这种数据类型。它有两个特点，确定的元素个数，明确的数据类型：

let x: [string, number] = ['1', 2]

x = [1, '2'] // TypeError

console.log(x[3]) // Error

Enum

枚举是从 C# 和 Java 中借鉴的数据类型，它可以用来为一组数值集合赋予更加友好的名称：

enum Color {
  RED,
  GREEN,
  BLUE,
}

let color: Color = Color.RED

默认情况下，枚举成员的数值是从 0 开始，依次递增。或者，也可以手动指定：

enum Color {
  RED = 1,
  GREEN, // 2
  BLUE, // 3
}

如果你知道枚举成员的值，那么通过它可以反向查找到其对应的枚举成员名称：

enum Color {
  RED,
  GREEN,
  BLUE,
}

console.log(Color[2]) // 'BLUE'

Any

Any 顾名思义，也就是『随便，都可以』：

let notSure: any = 1
notSure = 'any'
notSure = false

Void

void 有点像 any 的对立面：没有任何类型。可以将其视为没有返回值类型函数的返回值类型：

function warn(): void {
  console.warn('Warning')
}

Null & Undefined

TS 中 null 和 undefined 都有对应的类型名称 null 和 undefined：

let u: undefined = undefined
let n: null = null

null 和 undefined 类型是其他所有类型的子类型，也就是说，你可以把前两者赋值给其它任何类型。如果配置了 --strictNullChecks 选项，null 和 undefined 将只能赋值给 any 和它们各自对应的类型。

Never

never 类型表示值的类型从不出现。例如，当 never 作为函数的返回值类型时，该函数总是会抛出异常或者永远不返回。

never 类型可以是每种类型的子类型，可以分配给每种类型；但是没有类型是 never 类型的子类型。

function error(message: string): never {
  throw new Error(message)
}

function fail(): never {
  return error('Failed')
}

function infiniteLoop(): never {
  while (true) {}
}

Object

object 表示非原始类型，即除了 number、 string、 boolean、 symbol、 null、 undefined 之外的其它类型。

类型断言

类型断言类似其它语言中的类型转换，就像告诉编译器：『相信我，我知道我在做什么』。TS 中的类型断言有两种形式：

// 1. 尖括号语法
let value: any = 'Hello TS'
let valLength: number = (<string>value).length // 8

// 2. as 语法
let value: any = 'Hello TS'
let valLength: number = (value as string).length // 8

如果要在 JSX 中使用类型断言，只允许使用 as 语法。

远方有多远？请你告诉我——Hello World

Mon, 08 Jul 2019 00:00:00 GMT

岁月之美，在于它的必然流逝，一个人总是在岁月的流逝中，在过去、现在、未来里追寻自我。人生如逆旅，我亦是行人，愿我们依然一笑如春温。

00

那天上午，学校里每个地方都留下了我们的身影。按下最后一次快门的刹那，我知道，我们即将各奔东西。

那天下午，穿过学校最熟悉的湖边小径去答辩。走下讲台的那一瞬间，我知道，四年大学生活应该在这里画上句号。

那天晚上，拿着毕业证匆匆赶到车站。火车开动的那一刻，我知道，火车开到哪里，哪里就是起点。

往日朝夕相处的室友，如今已天南海北，各自奔忙。去年国庆，春哥的婚礼，大家都参加了，自然我们坐在同桌，我们不再谈论玩什么游戏、哪个妹子好看、谁的作业借我抄，而是谁在做什么工作、谁明年要结婚……有一瞬间我还以为这只是寝室聚会，但是看看新郎和新娘，再看看发福的大家，我又确信无疑，已经毕业两年有余。回程的路上，我们开玩笑，如果按照每年一个人结婚的节奏，那么我们起码还能聚 10 次，毕竟 144 的寝室是 12 人/间。

毕业意味着选择，选择工作、选择考研、选择考公务员，这是压在毕业生头上的三座大山，可人生这所大学没有毕业的那天。回家的火车上，我在想，以前回家总是高兴的，期待回到大山里，夏天用来避暑，冬天用来看雪。但这一次，再凭我有多高的期待，也是意志消沉、无精打采，十年寒窗只为一纸文凭，但如今还是要再回到这里吗？母亲大人宽宏大度，从不和我计较，得以让我有一丝宽慰。母亲教会我坚强与乐观，大山教会我沉着与宽容。

『去北京』。我不知道这句话是谁对我说的，但是它一直在我脑海里回荡，大概是因为我身边的人都在或者去过北京罢。母亲为我打点行装，她不会问我真的决定与否，父亲也不会阻拦，因为有时我和父亲一样固执，甚至比他还固执。违离父母膝下，把牵挂和不安留给他们。再一次，故乡成为我的起点。彼时，高铁还没有通，天水去往北京的路途遥远，穿过山洞桥梁，越过树林溪涧，下一幕会不会是坦途平原呢？

01

及至北京，时值盛夏。钢筋水泥铸就的的城市，空气中弥漫着阵阵热浪。

投简历，面试……投简历，面试……6 月在这样的循环中结束，没有 break。中间我也曾有过动摇，高中选择的文科，大学专业偏向理科，又是自学的前端，普通二本毕业，这在别人看来简直就是四不像。在面试结束后通常会得到这样的回复：『你的技术可以，但我们的学历限定是一本』、『我们需要有经验的前端工程师』、『我们会再和你联系』。在这人潮拥挤的城市中立身，需要足够的勇气和毅力，但那时的我只有困惑和迷茫。

命运之神，他大概是眷顾我的。7 月 10 号，现在的东家打来了让我入职的电话。我记得当时正和我姐在她学校的图书馆，准备再一次投简历面试。我姐是一个冷静、理智的女生，在家里我最怕她生气。这段时间，她一直在鼓励着我，让我多读书，准备好面试。但有一点让我很生气，她竟然偷看了我的日记，并且加了一句评语：『陈东东是个很好玩的人』，直到一年后我才发现，算了，我也不敢问，我也不敢发脾气。

入职那天，我是骑着自行车去的，本以为能够悠然赶到公司。事与愿违，我在最后一分钟才挤进了电梯。电梯匀速上升时，我在想，『哇喔，这就是以后我每天都要经历的事情呀』！同我一起入职的有大佬，也有刚刚走出象牙塔庇护的毕业生。签了合同，办完手续，便在工位上坐了一会儿，看看四周，缠绕着电线、数据线、网线、电话线各种线，同事各自都在埋头工作，少有人站起来走动。这是一段不同于以往的旅途，前方路遥。

在公司适应了一周左右，在领导的安排下开始出去做项目。对程序员来说，投身实践永远是最正确的选择。当你苦思冥想，却仍然无法写出一行用于生产环境的代码时，你才能感觉到那种不成器的痛楚；假若你写出来了，隔几天再回看你写的代码时，大概率会脱口而出：『Shit，垃圾代码』，就像人们经常调侃程序员一样：『三个月之前写的代码只有我和上帝明白，三个月之后只有上帝明白』。但恰恰是这句所谓『脏话』见证着一个程序员的成长，疯狂写代码——重构——优化……疯狂写代码……重构……优化，瞧，这又是一个循环，只是它无需打破，因为它可能是唯一一个让程序员喜闻乐见的『死循环』。

我在公司的岗位是前端。前端在很久以前被称作『美工』，负责网页设计和美化的工作，后来随着技术浪潮起伏，美工分成了两个工种，UI 设计师主要负责 UI，前端则需要把 UI 设计稿实现为代码（HTML+CSS+JS）。随后在移动互联网的浪潮中，前端再一次走上了风口，Web 端、移动端、服务端、桌面端都开始出现它的身影，前端似乎在以一种人们感受不到的速度向各端渗透，而渗透还在持续着。就我们现在能接触到的而言，微信/百度/支付宝小程序采用的是 JS，淘宝/天猫的支持框架是 JS 实现的 Weex，以及越来越多的公司开始采用 Node.js 作为后端服务语言。曾经有这样一句话，『能被 JS/TS 重写的，都将被 JS/TS 重写』，话糙理不糙。Node.js、RN、Weex、Flutter、Electron 都是这句话的布道者，所以前端这个领域依旧蕴藏着巨大的发展空间。前端的发展很快，快的让人有点厌学。如果你关注 GitHub Trending，你可能会发现，隔三天框架就会发布一个新版本，差五天就会冒出来一个新的框架，而且 JS 的标准也是一年一个版本，如果抱着『当雷劈下来的时候，我得有避雷针（我得在场）』的心态，每个框架都要懂，每个框架都要学，岂不厌学哉？虽说技多不压身，但是如果一味地跟着框架学习会让人疲于应付，毕竟版本和框架可能每天都会有。但是，万变不离其宗，前端的三驾马车依旧是 HTML/CSS/JavaScript，一切上层建筑都来源于底层基础。毛主席曾经说：『反对两个拳头同时打人，应集中兵力向一个方向作战。』集中精力学底层知识，分散一部分精力去学习框架及其延伸知识，以便达到活学活用的程度。

所幸，程序员这个物种几乎都是『终身学习思维』的践行者，他们不懂的技术就要去学，否则无法解决眼前的 bug；不理解的代码就要去问，否则改完之后会产生更多 bug；他们习惯对未知说 Hello World。他们是我见过的最好学的一群人。前几天去另外一个项目组，我发现他们桌子上有一堆技术书籍，都是关于前端方面的，就是要为了解决在项目中遇到的问题，而此前他们可能很少接触前端。学习的过程就是从无知、迷茫困惑到『暮然回首，那人却在灯火阑珊处』的过程，这些都是必经之路，承认自己不会就是迈出了第一步。

基础。基础知识必然不能忽略，一切上层建筑都来源于底层知识。读书、了解语言标准、官方文档是这些知识的来源。
框架。框架是以解决某类特殊问题而产生的，例如 Bootstrap/jQuery 的目的是解决跨浏览器开发，Vue/React 为高性能单页应用而生，Weex/RN 是为了开发跨平台移动应用。了解自己的需求，选择合适的框架，运用于实践，『精通』就只是时间问题。
延伸。TypeScript 是 JavaScript 的延伸，SCSS/LESS/Stylus 是 CSS 的延伸，Node.js 使前端向后端延伸，这些延伸往往能提高代码的健壮性，以及提高开发效率。而程序员的工作就是延伸自己和用户的能力。
趋势。GitHub Trending 是了解发展趋势的好地方。Serverless/CSS Houdini/Web Components/GraphQL，了解趋势，把握当下。雷如果真的劈下来，即使我们不在场，也要最快到现场。
实践。实践是检验真理的唯一标准。

工作和兴趣的契合是一件比较不容易实现的事情，做自己喜欢的事情有时候真的遥不可及。我现在能够做自己有兴趣的事情——编程，其中一部分来自于运气，高中文科毕业，在经济管理学院学了这门计算机专业，无疑是幸运的。其次是兴趣，小时候对游戏的痴迷，之后对手机的兴趣，最后兴趣又转移到的计算机，这才走上了靠技术实现脱贫的道路（内心 OS：也不知道能不能在 2020 年和大家一样一起奔入小康）。但我在工作中发现，对工作的兴趣是可以培养的，与其深陷自己不喜欢某份工作的泥潭中，倒不如去了解这份工作，大问题化成小问题，小问题可以用最熟悉的知识解决，然后再把答案拼起来，借此感受完成某个任务的成就感，而成就感能够促进我们完成任务的主动性，通过这种正向循环提高对工作的兴趣。

下面这段文字纯属『流水账』——非典型程序员的一天：

7:00 起床洗漱，如果加班，可能稍微晚点

7:20 挤上地铁，玩手机（大部分时间信号差，站等 5G 啊），通常会带着 Kindle

8:30 到达公司，打卡、打卡、吃早餐

8:40 - 9:00 刷刷新闻、微博、划水摸鱼的时间

9:00 - 11:30 专心致志写 bug，写完 bug 改 bug

11:30 - 13:30 吃午餐，围着写字楼溜圈，助消化，午休

13:30 - 14:00 午休刚睡醒阶段，偶有起床气，经常性迷糊

14:00 - 18:30 专心致志写 bug，写完 bug 改 bug，偶尔插科打诨

18:30 之后，如果加班，则加班（时间待定），否则回家睡觉。

00:00 上床睡觉

……

又到了这样的夏天，热浪涌动的大街，密不透风的办公区，柏油马路的温度似乎不会随着黑夜而下降。只有窗外偶尔淅淅沥沥，才能为这城市降下 1℃。

02

高晓松说『生活不止眼前的苟且，还有诗和远方的田野』，可生活却又把它们颠倒，『生活不止诗和远方的田野，还有眼前的苟且』。穿行于生活与梦想的夹缝中，瞪大眼睛猜世故，磨尖牙齿学谈吐。半夜含泪诉说雄心壮志，醒来时继续对生活咬牙切齿。这些幽暗的时光，那些坚持与慌张，都将成为远方田野里的一首诗，微风吹过田野，细雨打湿泥泞，阳光映出彩虹！

『身体和灵魂，总有一个要在路上』。这句话古人早就说过，『读万卷书，行万里路』。读万卷书，阅己凡心。读书是一件能让人放松的事儿，拿起一本散文集、历史书、长短篇小说，抑或是一本杂志都能让自己从凡间琐事抽身出来，享受片刻宁静，只与自己。读书亦不是一件有 bigger 的事儿，它只关于自己的精神世界，开卷有益便是证明，若是人人都读『高级书』，哪里还有『百花齐放，百家争鸣』，喜欢就读，不喜欢就放在一边；行万里路，历己尘身。怀揣灵魂是行万里路的前提，单纯的『网红景点打卡』是没有意义的万里路，有些路是不能白走的。我想『读万卷书，行万里路』其实应该是一个结合体，而这个结合体就是『知行合一』。

总想在工作闲下来的时候写点儿东西，但真正闲下来的时候那股热情却已然不见。讷于言并不代表没有表达欲望，我写的那几篇文章可以作证，聊胜于无。有人会问我，为什么你一个程序员这么文（jiao）艺（qing）？大概，白天保持理性能让我写出的代码 bug 少点儿；每当夕阳西下，每当感受时间流逝、忙碌与挫折的时候，如果要为这些情绪找一些托词，借李清照的词来讲：『花自飘零水自流……「矫」情无计可消除，才下眉头，却上心头』（李清照的粉丝不要打我），我想写文章的欲望大抵来于此。其次，我觉得写文章没有好坏之分，只有不同观点之分，上学读书时候的作文，工作时熬夜加班写的文档，每一篇都算是文章。但是，我讨厌『贩卖焦虑文』甚于『鸡汤文』，鸡汤多了可能会撑着，焦虑多了可能就撑不住了，所以为了健康着想，坚决抵制『鸡汤』和『贩卖焦虑』的文章。想来，除毕业论文之外，这是我写过最长的一篇文章。子曰：『内省不疚，夫何忧何惧？』，写这篇的文章时候，恰好是工作的第三年，仅以此文内省。原本的标题叫做『三载一省吾身』，觉得有点傻，所以改成了现在的这个标题。

李健评价梁博『边缘、独立、自信』。边缘，意味着一个人能够找到自己的位置，做合适的事；独立，意味着一个人有一技之长，立足于当下；自信，意味着一个人有明确的主张，不随波逐流。我想只要具备这三点，一个人才能够称之为『社会人』。

CODERFEE 是我在很多平台和网站的昵称，也是我的域名 coderfee.com。有很多人问这个词是啥玩意儿，什么意思，怎么读？我想解释一下，coder—码农，fe—front-end 前端，e—因为 coderfe 已经被注册了，它是我随手敲出来的。

行文至此，思绪已了。所思所闻，后文再叙。

Hello World! Hello Life!

『译』ES2019 简明指南

Tue, 18 Jun 2019 00:00:00 GMT

ESNext 经常用来表示下一个 JavaScript 版本的名称。

目前 ECMAScript 的版本是发布于 2018 年 6 月份的 ES2018。

历史上 JavaScript 版本的标准化是在夏季，所以我们可以期待一下即将在 2019 年夏天发布的 ECMAScript 2019。

本文写作时，ES2018 已经发布，而 ESNext 就是 ES2019。

针对 ECMAScript 标准的提案被组织为 Stages，Stages 1-3 是新功能的孵化器，一旦该功能到达 Stage 4，那么它最终就会被纳入到新标准。

本文写作时，我们有一些位于 Stage 4 的新功能。我在本文中将介绍这些功能。主流浏览器的最新版本已经实现了这些功能中的绝大部分。

Array.prototype.{flat, flatMap}
可选 catch 绑定
Object.fromEntries()
String.prototype.{trimStart, trimEnd}
Symbol.prototype.description
JSON 改进
更好的 JSON.stringify()
Function.prototype.toString()

其中一些变化主要用于内部使用，但是弄清楚发生了什么变化对我们也非常有帮助。

`Array.prototype.{flat, flatMap}`

flat() 是一个新的数组方法，它可以从一个多维数组创建一个一维数组。

例子：

['Dog', ['Sheep', 'Wolf']].flat();
// ['Dog', 'Sheep', 'Wolf']

默认情况下，该方法只会扁平化第一层级的数组。但是它也接受一个参数，来设置你想要扁平化数组的层级。如果参数为 Infinity，则会扁平化所有层级。

['Dog', ['Sheep', ['Wolf']]].flat();
//[ 'Dog', 'Sheep', [ 'Wolf' ] ]

['Dog', ['Sheep', ['Wolf']]].flat(2);
//[ 'Dog', 'Sheep', 'Wolf' ]

['Dog', ['Sheep', ['Wolf']]].flat(Infinity);
//[ 'Dog', 'Sheep', 'Wolf' ]

如果你对 JavaScript 数组的 map() 方法比较熟悉，正如你所知道的，它可以在数组的每个元素上执行一个函数。

flatMap() 是一个数组的新方法，它结合了 flat() 和 map()。当你想在 map() 回调返回的数组上调用一个函数，并且返回一个扁平化的数组时，它非常有用：

['My dog', 'is awesome'].map(words => words.split(' '));
// [['My', 'Dog'], ['is', 'awesome']]

['My dog', 'is awesome'].flatMap(words => words.split(' '));
// ['My', 'Dog', 'is', 'awesome']

可选 catch 绑定

某些情况下我们不需要为 try/catch 的 catch 块绑定一个参数。

过去我们必须这样写：

try {
  //...
} catch (e) {
  //处理错误
}

如果我们没有必要用 e 来分析错误，现在则可以直接省略它：

try {
  //...
} catch {
  //处理错误
}

`Object.fromEntries()`

JavaScript 对象在 ES2017 中引入了 entries() 方法。

entries() 方法会返回一个包含它自身所有属性的数组，像 [key, value] 这样的数组。

const person = { name: 'Fred', age: 87 };
Object.entries(person);
// [['name', 'Fred'], ['age', '87']]

ES2019 引入了 Object.fromEntries() 方法，它可以从类似上面的属性数组中创建一个新对象：

const person = { name: 'Fred', age: 87 };
const entries = Object.entries(person);
const newPerson = Object.fromEntries(entries);

person !== newPerson; // true

`String.prototype.{trimStart, trimEnd}`

这个功能在 v8/Chrome 中已经接近一年了，然而它在 ES2019 中才会被标准化。

`trimStart()`

将原始字符串开头的空白符移除，并返回一个新字符串：

'Testing'.trimStart(); //'Testing'
' Testing'.trimStart(); //'Testing'
' Testing '.trimStart(); //'Testing '
'Testing'.trimStart(); //'Testing'

`trimEnd()`

将原始字符串尾部的空白符移除，并返回一个新的字符串：

'Testing'.trimEnd(); //'Testing'
' Testing'.trimEnd(); //' Testing'
' Testing '.trimEnd(); //' Testing'
'Testing '.trimEnd(); //'Testing'

`Symbol.prototype.description`

你现在可以通过访问其 description 属性来检索一个 Symbol 的描述了，而不必使用 toString() 方法：

const testSymbol = Symbol('Test');
testSymbol.description; // Test

JSON 改进

在此改进之前，解析 JSON 的字符串中不允许使用换行符（\u2028）和段落分隔符（\u2029）。

在包含它们的字符串中使用 JSON.parse() 时，会导致 SyntaxError。但是现在它们被定义为 JSON 的标准，也可以正确地解析。

更好的 `JSON.stringify()`

修复 JSON.stringify() 在处理代理 UTF-8 码点（U+D800 到 U+DFFF）的输出。

在此之前，调用 JSON.stringify() 会返回一个异常格式的 Unicode 字符 (a “�”)。

现在，这些代理码点可以使用 JSON.stringify() 安全地表示为字符串，并且可以使用 JSON.parse() 转换为其原始形式。

`Function.protoytype.toString()`

函数一直有一个 toString() 的实例方法，它返回包含函数代码的字符串。

ES2019 引入的变化是更改其返回值，避免剥离注释或者空白符（例如空格），以便更准确地表示函数的定义。

如果我们有如下代码：

function /* this is bar */ bar() {}

之前的行为是：

bar.toString(); // function bar() {}

现在的行为：

bar.toString(); //function /* this is bar */ bar() {}

原文链接：The ES2019 Guide

五一游记

Sat, 04 May 2019 00:00:00 GMT

终于，五一如期而至。虽说来北京快三年了，但出去玩的次数屈指可数。前段时间太忙，频繁加班，都没有好好欣赏北京的春天，转眼已经到了夏天。所以决定在这个假期里抓住春天的尾巴，来一次单人旅途。

Day.1 历史书上的文物

旅途第一站是国家博物馆。国博号称是世界上单体建筑面积最大的博物馆，果然名不虚传，48 个展厅，文物更是目不暇接。

地下一层是『古代中国』展厅，跟着时间线从石器时代走到清朝时期。其它的展馆还有『丝绸之路』、『复兴之路』、『古代钱币』、『古代瓷器』等等

第一个在历史书上看到的文物便是这个『涡纹四系彩陶罐』，称为『彩陶之王』，让我隐隐感到自豪的是它出土于甘肃永靖。

其次是这个子龙鼎（得名于其内刻铭文『子龙』二字），目前出土的最高的圆鼎。提到鼎，无外乎商周两朝，由于这两个朝代的文物大多出土于安阳，所以国博有很多青铜文物都是从安阳出土的，P.S：我怎么说以前在安阳博物馆里看不到这些东西呢。

随后是这几把在历史书中上镜率颇高的剑了，虽然我并分不清这三把剑（好像第二把是吴王夫差剑），看看就行。

汉代的『击鼓说唱俑』，这件文物也曾在历史书上留下了身影。我看见它的时候，不自觉的笑了（其实当时很多人都有会心一笑）。不知道他们当时有没有 Rap 这种 style。

国博的文物太多，我走马观花式看法，用了一个多小时才走完古代中国展厅，看了三个展厅就已经是下午了。给我留下深刻印象的是复兴之路展馆里的两幅现代『壁画』。

第一幅是『古代文明』：

从左到右依次是：彩陶文化、青铜文化、都江堰、四大发明、万里长城、兵马俑、丝绸之路、莫高窟壁画、地动仪、浑天仪、郑和下西洋。

第二幅是『今日辉煌』：

从左到右依次是：珠穆朗玛峰、三峡大坝、青藏铁路、雪龙号、立交桥、神舟七号、嫦娥一号、奥运会、鸟巢、水立方、香港澳门回归。

上下五千年，历史都在这两幅画里了。

Day.2 穿过永定门，去逛逛天坛

永定门位于北京中轴线上最南端。古时进入这道门才算是进到了北京城，然而现在这里仅仅是南三环区域。其实永定门并不算一个景点，它只是一座城门楼，城门前的广场中散布着几个放风筝的老人和小孩儿。

穿过永定门，东侧就是天坛。其实与天坛并称的还有地坛、日坛、月坛以及先农坛，就是所谓『五坛八庙』。天坛的景观主要都集中在中轴线上，我们是从北门开始参观的，最先看见的是祈年殿和皇乾殿。祈年殿的内墙是圆环形的，而外墙是方形的，其实这也寓意着古人的世界观：『天圆地方』。连接这两个地方的一条甬道叫做丹陛桥。

皇穹宇应该是天坛里最有意思的地方。据说皇穹宇的围墙有回声的效果，人们称之为回音壁。还有所谓三音石，据说你站在三音石那里拍一下手掌，可以听到三次回声，因此得名。不过按照古人的世界观，我们应该这样理解：站在这里说话就可以直达天庭，而神意也会从此降临。

没有照片.jpg

值得一提还有天坛公园的古树，有一部分树已经有两三百年的历史了，也就是说从明末清初的小树苗长成现在这样的参天大树了，数人合围可还行。对了，有一颗低矮的树，周围非常圆润光滑，我想它是被无数游客『盘』成那样的吧。

忘了拍照.jpg

P.S：2 号的天儿实在太好，一颗大太阳顶在头上，走路必须得挑着阴凉的地方。让老朋友受晒了 🌞。

Day.3 后海 && 南锣鼓巷

最适合去后海的时间应该是晚饭过后，纳凉散步，沿着湖边走一圈。但事与愿违，我和朋友是中午去的，因为本来打算去北大和清华去感受一下校园气息，可惜没预约到参观名额，于是才转站后海。

这个建筑我不知道它叫什么，但是看上去那三个字应该是藏经楼。还有它门上的一副对联，撇了一眼，我记得应该是『人生本无浮沉，四季皆有佳处』。后海这片区域颇受名人待见，恭王府（一座恭王府，半步清代史）、宋庆龄故居、郭沫若故居、老舍故居都在这里。如果仔细探索，估计够玩一天，当然如果是这样，晚上正好可以在『后海酒吧一条街』里挑一个酒吧，听听民谣，喝点儿小酒，谈一谈人生和理想，一天的疲惫也会荡然无存。

之后我们去了南锣鼓巷，去了之后才发现原来在我来过一次，是我第一次来北京的时候我姐带我去的。印象最深的是这座钟鼓楼。

烟袋斜街

南锣鼓巷最大的特点是：巷子窄人多。

P.S：陪我游玩的不仅有朋友，还有那『白雪纷纷』。。。

Day.4 不负春光

假期的最后一天，今天的主要的任务就是休息，并且写完这篇文章。

抓住春天的尾巴，出去走走，释放一下身心压力，这种感觉其实还不错。

最后，我得感谢我的老友兼室友，在上班之余为我提供了后勤保障，晚上的火锅和早晨的西红柿鸡蛋面。我是只负责吃的那个。

以上。

『书』打发地铁通勤时间的书（书摘）

Sat, 30 Mar 2019 00:00:00 GMT

『BBC 世界史』——安德鲁·玛尔

在“逐渐觉醒的世界”中，人类的自我意识就好似一颗闪亮的星星。
✍️ 意识是人类区别于其他物种的根本
唯有出身特权阶层的人才有能力、金钱，或闲暇去改变社会。
✍️ 然而在 21 世纪的今天，一个普通人或许就可以改变世界。
使用“伟人”一词并不意味着他们在道德上无可指摘，他们之中的一些人无比混账。
驱动历史发展的是人类的野心。为达成愿望，人们会改变生存境遇。
✍️ 人类的野心驱动历史的车轮滚滚向前，同时人类的野心带来了战争、死亡、环境的恶化。
我们对早期社会知之甚少。因此，在想象那段失落的漫长历史时，我们通常会谨小慎微。也许，想象越大胆，我们就越接近现实。
纵观人类历史，在创作艺术和表达爱意的间隙，我们一直在竭力消灭彼此。从一开始，我们就是动荡之源，至今还是如此。
我们已很难理解农业的重要性，无法体会艰辛、希望和春种秋收。
人类曾信步穿越荒野，探索各种神奇的地方，如今已不再这般自由。
我们生长在这片土地上，这里留下了我们的足迹。在成千上万年的漂泊之后，我们决意在这里定居。
✍️ 落叶归根是中国人根深蒂固的思想，不知外国人是什么想法呢?
苏美尔人观测了五颗行星的运行轨迹，这五颗目力所及的行星是水星、金星、火星、木星和土星。然后，他们用这五颗行星分别为五天命名，再用月亮为一天命名，用太阳为另一天命名，这样一星期就有了 7 天。
✍️ 一周七天，每天一颗行星
早期的中国人曾宣称，人类源于造物主盘古身上的蛆虫，这或许可以被看作是早期人类的自我批判精神吧。
苏格拉底之死是个悲剧。这不是因为苏格拉底心中潜藏的有关世界关键哲学难题的答案已经随他而去，而是因为在一个相对开放的社会，最伟大的思想家也不能随心所欲地表达自己的观点，或者如其所愿地追寻未解之谜。
✍️ 人类的神奇之处在于倡导言论自由，却又害怕言论自由
在向恐惧屈服之前，你能将言论自由和思想自由的原则坚持多久？
✍️ 统治阶级会因害怕言论自由而散布恐惧，最先遭殃的怕就是领头羊
学会质疑比学会相信更重要。
✍️ 学会质疑比学会相信更重要。显然，这句话在当下更具指导意义
随着中国的崛起，历史学家们开始专注于这样一个疑问：我们的世界——统一的中国和破碎的欧洲——是否以某种方式延续了罗马帝国和汉帝国的经验？
✍️ 欧洲自罗马帝国以后再也没有统一过，而中国则在分分合合中最终实现了国家大一统
尽管外来入侵者不断挑战中国，但他们无法抹掉“一个中国”的文化版图。
✍️ 是的，炎黄子孙，华夏民族，一个中国是自古以来任谁也无法抹掉的民族认同感
月护王的一贯战略是：首先在边远地区消耗敌人的力量，然后再向中心地区挺进。经过漫长的消耗战，敌人的领土逐渐缩小。相传，月护王曾听到一位妇人教训她的孩子，吃饭时不要从盘子中间开始，因为中心一定比边缘烫。
✍️ 这不是和抗日战争期间毛主席的想法如出一辙吗？
✍️ 农村包围城市，这不是和抗日战争期间毛主席的想法如出一辙吗？
频繁应对自然灾害（包括太平洋的气候循环）有可能使人类产生更悲观的思想观念。唯有将自然灾害视为神怒，也就是神对人类的惩戒，这些现象才能获得解释，人的心灵才能得到慰藉。
✍️ 迷信并不仅仅是简单地祈神拜佛，而且对于这种行为，我们却也无法苛责。人在希望破灭时，难免心有所失，神只是他们心中的方向而已。
剑是强大的，这是一个旧观念；道是强大的，这是一个新观念。然而，在历经一个世纪急剧的崩溃和变革之后，事实最终证明，那个用剑武装起来的道才是无往不胜的。
✍️ 剑是战争，道是宗教和文化，类似于现在所说的糖衣炮弹
交谈用日耳曼语，其间还会点缀几个华丽的拉丁语辞藻，就像日后的俄罗斯贵族会讲法语一样。珍贵的勃艮第红酒从波希米亚产的玻璃瓶中倒入威尼斯产的酒杯，然后用酒把来自纽伦堡的姜饼送下肚子
✍️ 12 世纪，俄罗斯的统治阶级。全球化初现端倪
吸烟“这种习惯，看见就让人感到憎恶，听到就让人感到厌烦，它对大脑有危害，对肺构成威胁；这种散发着恶臭的黑色烟雾，最贴近弥漫在无底深坑中的恐怖的‘地狱之烟’”
吸烟“这种习惯，看见就让人感到憎恶，听到就让人感到厌烦，它对大脑有危害，对肺构成威胁；这种散发着恶臭的黑色烟雾，最贴近弥漫在无底深坑中的恐怖的‘地狱之烟’”。
✍️ 论吸烟
从某种程度来说，人类仍然是一种非常简单的动物：我们喜欢新口味、长得漂亮的人、看上去闪闪发光的物品、皮肤触感十分柔软的东西、令人舒适愉快的气味，以及有趣的调味品。
✍️ 七情六欲，饮食男女，谁不是感官动物呢？
人们被迫从事各种工作，他们不但打破了固有的季节性节律，而且也不再顾及各种宗教节日。在 18 世纪，据计算，每年的平均工作日从 250 天增加到了 300 天。人们没有时间生活，没有时间表达爱情，也没有时间讲故事和教导他人。人们曾过着日出而作，日落而息的生活，
✍️ 日出而作，日落而息的时代已随工业革命一去不返。996 已是常态。我们只能寄希望于下一次科技革命了。
当西方船只再次抵达日本的时候，一位日本评论家抱怨道：“最近，这些可恶的西方蛮夷横行四海，将其他国家踩在脚下。他们完全没有意识到，在这个世界中，他们是下等人。现在，他们鲁莽地挑战我们这些高贵的人……这是何等傲慢的行为？”
✍️ 日本也曾闭关锁国，日本也曾夜郎自大。它比中国醒来的早一些，然而它把帝国主义施加的暴力成倍地施加在中国。
若不是中国要面对工业革命引发的后果，那么我们有理由相信这个王朝还会继续发展壮大。但它最终注定毁于发生在遥远的曼彻斯特和伯明翰的那场革命。
✍️ 有志之士已经不允许清朝再为非作歹，而帝国主义的入侵加速了这一过程
如果我只需要一件衬衣遮体，但我却获得了两件，那多出来的一件相当于偷来的，这是有罪的。……如果五根香蕉就能让我继续前行，而我吃了六根，那多出来的一根相当于偷来的。
我们拥有众多资源，只要我们努力寻找可替代能源，早晚有一天会取得突破。如果外星人从宇宙中注视地球，并将赌注压在人类的智慧上，那么它们一定不会输。
✍️ 人类创造历史，但人类能否创造未来呢？
现代“智人”有时候会被翻译为“聪明的人”。我们是聪明的猿，非常聪明的猿，尽管有时也会陷入困境。但或许“有智慧的人”是更好的翻译。我们还有一小段路要走。

『西潮』——蒋梦麟

Coming soon…

『译』每个 JavaSript 开发者都需要知道的 ES2018 新功能

Thu, 31 Jan 2019 00:00:00 GMT

发布于 2018 年 6 月的第九版 ECMAScript 标准，官方称之为 ECMAScript 2018（简称 ES2018）。从 ES2016 开始，每年都会发布一个 ECMAScript 规范的新版本，而不是每几年发布一次，而且相比以前的主要版本添加少量新功能。最新版标准通过为 RegExp 添加 4 个新功能、rest/spread 属性、异步迭代和 Promise.prototype.finally 来延续它的年度发布周期。此外，ES2018 从标签模板中删除了转义序列的语法限制。

接下来的小节会详细介绍这些新变化。

Rest/Spread 属性

ES2015 中添加的最让人关注的一项功能是展开操作符。展开操作符简化了复制/合并数组的操作。你现在可以使用 ... 操作符，而不调用 contact()/slice() 方法：

const arr1 = [10, 20, 30]

// 复制 arr1
const copy = [...arr1]
console.log(copy) // [10, 20, 30]

const arr2 = [40, 50]

// 合并 arr1 和 arr2
const merge = [...arr1, ...arr2]
console.log(merge) // [10, 20, 30, 40, 50]

在数组作为单独的参数传递给函数的情况下，扩展操作符也能灵活运用。例如：

const arr = [10, 20, 30]

console.log(Math.max(...arr)) // 30
// 等价于
console.log(Math.max(10, 20, 30)) // 30

ES2018 通过为对象字面量添加 spread 属性更广泛地拓展了这项语法。使用 spread 属性，你可以把一个对象自身的可枚举属性复制给一个新对象。思考下面的例子：

const obj1 = {
  a: 10,
  b: 20,
}

const obj2 = {
  ...obj1,
  c: 30,
}

console.log(obj2) // {a: 10, b: 20, c: 30}

在示例代码中，... 用来检索 obj1 的属性并将其分配给 obj2。ES2018 之前，尝试这样做会抛出一个错误。如果存在多个同名属性，则使用最后一个属性：

const obj1 = {
  a: 10,
  b: 20,
}

const obj2 = {
  ...obj1,
  a: 30,
}

console.log(obj2) // {a: 30, b: 20}

Spread 属性也提供了一种合并两个或多个对象的新方法，可以用作 Object.assign() 的替代方法：

const obj1 = { a: 10 }
const obj2 = { b: 20 }
const obj3 = { c: 30 }

// ES2018
console.log({ ...obj1, ...obj2, ...obj3 }) // {a: 10, b: 20, c: 30}

// ES2015
console.log(Object.assign(obj1, obj2, obj3)) // {a: 10, b: 20, c: 30}

注意，使用 spread 属性得到的结果并不总会与使用 Object.assign() 的到结果相同。思考下面的代码：

Object.defineProperty(Object.prototype, 'a', {
  set(value) {
    console.log('set called')
  },
})

const obj = { a: 10 }

console.log({ ...obj }) // {a: 10}

console.log(Object.assign({}, a))
// set called
// {}

在示例代码中，Object.assign() 方法执行了继承的 setter 属性。相反，spread 属性则直接忽略了 setter。

记住 spread 属性只复制可枚举属性，这一点非常重要。在下面的例子中，type 属性不会显示在被复制的对象中，因为它的 enmurable 属性被设置为 false：

const car = {
  color: 'blue',
}

Object.defineProperty(car, 'type', {
  value: 'coupe',
  enumrable: false,
})

console.log(car) // {color: 'blue'}

继承的属性会被忽略，尽管它们是可枚举的：

const car = {
  color: 'blue',
}

const car2 = Object.create(car, {
  type: {
    value: 'coupe',
    emumrable: true,
  },
})

console.log(car2.color) // blue
console.log(car2.hasOwnProperty('color')) // false

console.log(car2.type) // coupe
console.log(car2.hasOwnProperty('type')) // true

console.log({ ...obj2 }) // {type: 'coupe'}

上面的示例代码中，car2 继承了 car 的 color 属性。由于 spread 属性只复制对象的自身属性，因此返回值里不包含 color。

记住：spread 属性只能实现对象的浅复制。如果某个属性是一个对象，那么只会复制这个对象的引用。

const obj = { x: { y: 1 } }
const copy1 = { ...obj }
const copy2 = { ...obj }

console.log(copy1.x === copy2.x) // true

copy1 的 x 属性和 copy2 的 x 属性都指向内存中的同一个对象，所以严格相等会返回 true。

ES2015 引入的另一个有用的功能是剩余参数，它使 JavaScript 程序员能够用 ... 将值代表为数组。举个例子：

const arr = [10, 20, 30]
const [x, ...rest] = arr

console.log(x) // 10
console.log(rest) // [20, 30]

这里 arr 的第一项被分配给 x，剩下的元素都分配给了 rest 变量。这种模式称为数组解构，由于广受开发者喜爱，Ecma 技术委员会决定为对象带来相似的功能：

const obj = {
  a: 10,
  b: 20,
  c: 30,
}

const { a, ...rest } = obj

console.log(a) // 10
console.log(rest) // {b: 20, c: 30}

这段代码在解构任务中使用了 rest 属性来将剩余的自身可枚举属性复制到一个新对象上。注意，rest 属性必须出现在对象的最后面，否则会抛出错误：

const obj = {
  a: 10,
  b: 20,
  c: 30,
};

const {...rest, a} = obj;
// Uncaught SyntaxError: Rest element must be last element

同时需要注意，在一个对象上使用多个 rest 语法可能会出现错误，除非它们是嵌套的：

const obj = {
  a: 10,
  b: {
    x: 20,
    y: 30,
    z: 40,
  },
};

const {
  b: { x, ...rest },
  ...rest
} = obj;
const {...rest, ...rest2} = obj;
// Uncaught SyntaxError: Rest element must be last element

Rest/Spread 支持情况

Chrome	Firefox	Safari	Edge
60	55	11.1	No

Chrome Android	Firefox Android	iOS Safari	Edge Mobile	Samsung Internet	Android Webview
60	55	11.3	No	8.2	60

Node.js

8.0.0（需要 --harmony 运行标识）
8.3.0（完全支持）

异步迭代

迭代数据集合是编程过程中重要的一部分。在 ES2015 之前，JavaScript 提供了语句如 for、for...in 和 while，以及如 map()、filter() 和 forEach() 等方法来达到这一目的。为了使程序员一次处理一个集合中的元素，ES2015 引入了迭代器接口。

如果一个对象拥有 Symbol.iterator 属性，那么它就是可迭代的。在 ES2015 中，字符串和集合对象（如 Set/Map/Array 等）都有 Symbol.iterator 属性，因此它们都是可迭代的。下面的代码示例，说明了如何一次访问一个可迭代的元素：

const arr = [10, 20, 30]
const iterator = arr[Symbol.iterator]()

console.log(iterator.next()) // { value: 10, done: false }
console.log(iterator.next()) // { value: 20, done: false }
console.log(iterator.next()) // { value: 30, done: false }
console.log(iterator.next()) // { value: undefined, done: true }

Symbol.iterator 是一个众所周知的符号，它用来指定一个函数返回一个迭代器。与迭代器交互的主要方式是 next() 方法。这个方法返回一个拥有两个属性的对象：value 和 done。value 属性包含了该集合中下一个元素的值。done 属性的值为 true 或 false，它表示是否到达集合末端。

默认情况下，一个纯对象是不可迭代的，但是如果你为它定义一个 Symbol.iterator 属性，它就会变成可迭代的，如这个例子：

const collection = {
  a: 10,
  b: 20,
  c: 30,
  [Symbol.iterator]() {
    const values = Object.keys(this)
    let i = 0
    return {
      value: this[values[i++]],
      done: i > values.length,
    }
  },
}

const iterator = collection[Symbol.iterator]()

console.log(iterator.next()) // { value: 10, done: false }
console.log(iterator.next()) // { value: 20, done: false }
console.log(iterator.next()) // { value: 30, done: false }
console.log(iterator.next()) // { value: undefined, done: true }

这个对象是可迭代的，因为定义了 Symbol.iterator 属性。该迭代器使用 Object.keys() 方法得到一个对象属性名称的数组，并将其分配给 values 常量。同时定义一个计数器变量，并将初始值设置为 0。当迭代器执行后会返回一个包含 next() 方法的对象。每次调用 next() 方法，它会返回 {value, done} 对象，value 保存集合的下一个元素，done 保存一个布尔值，表示迭代器是否到达集合的末端。

虽然上面的代码可以完美工作，但是它没有必要这么复杂。幸运的是，使用 generator 函数可以大幅简化这个过程：

const collection = {
  a: 10,
  b: 20,
  c: 30,
  [Symbol.iterator]: function* () {
    for (let key in this) {
      yield this[key]
    }
  },
}

const iterator = collection[Symbol.iterator]()

console.log(iterator.next()) // { value: 10, done: false }
console.log(iterator.next()) // { value: 20, done: false }
console.log(iterator.next()) // { value: 30, done: false }
console.log(iterator.next()) // { value: undefined, done: true }

在 generator 内部，for...in 循环用来枚举该集合，并且 yield 每个属性的值。运行结果和之前的示例代码完全一样，但它更加简洁。

迭代器的缺点在于它不适合标识异步数据源。ES2018 的解决方案是异步迭代器和异步迭代。一个异步迭代器和传统迭代器的不同之处在于，它会返回一个 promise 实现的 {value, done}，而不是 {value, done} 这种形式的纯对象。一个异步迭代定义了一个返回异步迭代器的 Symbol.asyncIterator（不是 Symbol.iterator）。

一个例子可让这个概念更清晰：

const collection = {
  a: 10,
  b: 20,
  c: 30,
  [Symbol.asyncIterator]() {
    const values = Object.keys(this)
    let i = 0
    return {
      next: () => {
        return Promise.resolve({
          value: this[values[i++]],
          done: i > value.length,
        })
      },
    }
  },
}

const iterator = collection[Symbol.iterator]()

console.log(
  iterator.next().then((result) => {
    console.log(result) // {value: 10, done: false}
  })
)
console.log(
  iterator.next().then((result) => {
    console.log(result) // {value: 20, done: false}
  })
)
console.log(
  iterator.next().then((result) => {
    console.log(result) // {value: 30, done: false}
  })
)
console.log(
  iterator.next().then((result) => {
    console.log(result) // {value: undefined, done: true}
  })
)

请注意，使用 promises 的迭代器不可能得到相同的结果。尽管一个普通的同步迭代器可以异步地确定值，但它仍然需要同步地确定 done 的状态。

同样，你可以使用 generator 函数来简化这一过程，如下所示：

const collection = {
  a: 10,
  b: 20,
  c: 30,
  [Symbol.asyncIterator]: async function*() {
    for (ley key in this) {
      yield this[key];
    }
  },
};

const iterator = collection[Symbol.iterator]();

console.log(iterator.next().then(result => {
  console.log(result); // {value: 10, done: false}
}));
console.log(iterator.next().then(result => {
  console.log(result); // {value: 20, done: false}
}));
console.log(iterator.next().then(result => {
  console.log(result); // {value: 30, done: false}
}));
console.log(iterator.next().then(result => {
  console.log(result); // {value: undefined, done: true}
}));

通常，一个 generator 函数会返回一个带有 next() 方法的 generator 对象。当调用 next() 方法时，它会返回 {value, done}，其中 value 保存 yield 的值。异步的 generator 做了同样的事情，不过它返回的是 promise 实现的 {value, done}。

迭代一个可迭代对象的最简单的方法是使用 for...of 语句，但是 for...of 不支持异步迭代，因为 value 和 done 不是同步确定的。为此，ES2018 提供了 for...await...of 语句，让我们看一个例子：

const collection = {
  a: 10,
  b: 20,
  c: 30,
  [Symbol.asyncIterator]: async function* () {
    for (let key in this) {
      yield this[key]
    }
  },
}

;(async function () {
  for await (const x of collection) {
    console.log(x)
  }
})()
// 10
// 20
// 30

在这段代码中，for...await...of 语句隐式地调用了 collection 对象上的 Symbol.asyncIterator 方法来获得一个异步迭代器。每次通过循环时都会调用迭代器的 next() 方法，并返回一个 promise。一旦 promise 被解析，结果对象的 value 属性会被读到 x 属性中。然后继续循环，直到结果对象的 done 属性为 true。

请记住，fot...await...of 语句只适用于异步 generators 和异步函数。违反这条规则会导致语法错误。

next() 方法也有可能返回失败（rejects）状态的 promise。为了优雅地处理失败（rejects）状态的 promise，你可以把 for...await...of 包裹在 try...catch 语句中，如下：

const collection = {
  [Symbol.asyncIterator]() {
    return {
      next: () => {
        return Promise.reject(new Error('Something went wrong.'))
      },
    }
  },
}

;(async function () {
  try {
    for await (const value of collection) {
    }
  } catch (error) {
    console.log('Caught: ' + error.message)
  }
})()

异步迭代器的支持情况

Chrome	Firefox	Safari	Edge
63	57	12	No

Chrome Android	Firefox Android	iOS Safari	Edge Mobile	Samsung Internet	Android Webview
63	57	12	No	8.2	63

Node.js

8.10.0（需要 --harmony_async_iteration 运行标识）
10.0.0（完全支持）

Promise.prototype.finally

另一个激动人心的功能是 ES2018 的 finally() 方法。有几个 JavaScript 库之前实现过类似的方法，在很多情况下被证明非常有用。这也致使 Ecma 技术委员会正式将 finally() 添加到规范中。使用这个方法，程序员可以执行一段代码而不用考虑 promise 的状态如何。让我们看一个简单的例子：

fetch('https://www.gooole.com')
  .then((res) => {
    console.log(res)
  })
  .catch((err) => {
    console.log(err)
  })
  .finally(() => {
    document.querySelector('#spinner').style.display = 'none'
  })

finally() 方法非常有用，当你需要在某些操作完成之后做一些清理工作，而不用考虑其是否成功。在这段代码中，finally() 方法在拉取和处理完数据之后隐藏加载进度。在 then() 和 catch() 方法中重复最后的一段逻辑，这段代码注册了一个 promise 在完成和失败状态下都会执行的函数。

你也可以不使用 promise.finally()，而是使用 promise.then(func, func) 来达到相同的结果，但是你需要在完成（fulfillment）和失败（rejection）处理器中重复相同的代码，或者将其声明为一个变量：

fetch('https://www.gooole.com')
  .then((res) => {
    console.log(res)
  })
  .catch((err) => {
    console.log(err)
  })
  .then(final, final)

function final() {
  document.querySelector('#spinner').style.display = 'none'
}

和 then() 及 catch() 方法一样，finally() 方法总是会返回一个 promise，所以你可以链接更多的方法。通常情况下，你会想在最后使用 finally() 方法，但是在某些情况下，例如在发起 HTTP 请求时，最好再链接一个 catch() 方法，以便处理 finally() 方法中可能出现的问题。

Promise.prototype.finally 的支持情况

Chrome	Firefox	Safari	Edge
63	58	11.1	18

Chrome Android	Firefox Android	iOS Safari	Edge Mobile	Samsung Internet	Android Webview
63	58	11.1	No	8.2	63

Node.js

10.0.0（完全支持）

正则表达式新功能

ES2018 为 RegExp 对象添加了 4 个新功能，进一步提升 JavaScript 处理字符串的能力。4 个功能如下：

s 标识符
命名捕获组
后行断言
Unicode 属性转义

s 标识符

. 在正则表达式中是一个特殊的字符，它表示匹配除换行符（例如换行 \n 或回车 \r）之外的任何字符。匹配包含换行符在内的所有字符的一种解决方案是使用两个相反的简写，例如 [\d\D]。这个字符类告诉正则表达式引擎查找一个数字（\d）或非数字（\D）的字符。其实就是匹配任何字符：

console.log(/one[\d\D]two/.test('one\ntwo')) // true

ES2018 引入了一种新模式，在这种模式下 . 可以达到相同的结果。可以在每个正则表达式基础上使用 s 修饰符来激活此模式：

console.log(/one.two/.test('one\ntwo')) // false
console.log(/one.two/s.test('one\ntwo')) // true

使用修饰符来选择新行为的好处是向后兼容。因此现有的正则表达式使用 . 字符不受影响。

命名捕获组

在一些正则表达式中，使用数字来表示捕获组会让人感到困惑。例如表达式 /(\d{4})-(\d{2}-(\d{2})/ 用来匹配一个日期。由于美式英语和英式英语的日期表示法不同，所以很难知道哪组表示日期，哪组又表示月份：

const re = /(\d{4})-(\d{2})-(\d{2})/
const match = re.exec('2019-01-10')

console.log(match[0]) // 2019-01-10
console.log(match[1]) // 2019
console.log(match[2]) // 01
console.log(match[3]) // 10

ES2018 引入了命名捕获组，它使用 (?<name>) 的语法。因此，匹配日期的表达式可以写成如下格式，以避免歧义：

const re = /(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})/
const match = re.exec('2019-01-10')

console.log(match.groups) // {year: "2019", month: "01", day: "10"}
console.log(match.groups.year) // 2019
console.log(match.groups.month) // 01
console.log(match.groups.day) // 10

在正则表达式中你还可以通过 \k<name> 语法来重复使用一个命名捕获组。举个例子，为了在一个句子中找到连续的重复单词，你可以使用 /\b(?<dup>\w+)\s+\k<dup>\b/：

const re = /\b(?<dup>\w+)\s+\k<dup>\b/
const match = re.exec('Get that that cat off the table')

console.log(mactch.index) // 4
console.log(mactch[0]) // that

要将命名捕获组插入到 replace() 方法中替换字符串，你需要使用 $<name>，例如：

const str = 'red & blue'

console.log(str.replace(/(red) & (blue)/, '$2 & $1'))
// blue & red

console.log(str.replace(/(?<red>red) & (?<blue>blue)/, '$<blue> & $<red>'))
// blue & red

后行断言

ES2018 为 JavaScript 带来了后行断言，这一功能在其它正则表达式实现中已提供了多年。之前，JavaScript 仅支持先行断言。一个后行断言用 (?<=...) 来表示，它能使你根据模式之前的子字符串匹配一个模式。举个例子，如果你想在不捕获货币符号的情况下匹配以美元、英镑或欧元表示的产品价格，你可以使用 /(?<=\$|￡|€)\d+(\.\d*)?/：

const re = /(?<=\$|￡|€)\d+(\.\d*)?/

console.log(re.exec(199)) // null

console.log(re.exec('$199'))
// ["199", undefined, index: 1, input: "$199", groups: undefined]

console.log(re.exec('€50'))
// ["50", undefined, index: 1, input: "€50", groups: undefined]

There is also a negative version of lookbehind, which is denoted by (?<!...). A negative lookbehind allows you to match a pattern only if it is not preceded by the pattern within the lookbehind. For example, the pattern /(?<!un)available/ matches the word available if it does not have a “un” prefix:

const re = /(?<!un)available/

console.log(re.exec('We regret this service is currently unavailable'))
// null

console.log(re.exec('The service is available'))
// → ["available", index: 15, input: "The service is available", groups: undefined]

Unicode 属性转义

ES2018 提供了一种新型的转码序列，称之为 Unicode 属性转义，它为正则表达式中的 Unicode 提供了全支持。假设你想匹配一个字符串中的㉛字符。尽管㉛被认为是一个数字，但你无法使用 \d 简写字符类，因为它只支持 ASCII [0-9] 的字符。另一方面，Unicode 属性转义可以用来匹配 Unicode 中的任何十进制数字：

const str = '㉛'

console.log(/\d/u.test(str)) // false
console.log(/\p{Number}/u.test(str)) // true

同样，如果你想匹配任何 Unicode 字母字符，你可以使用 /p{Alphabetic}：

const str = 'ض'

console.log(/\p{Alphabetic}/u.test(str)) // → true

console.log(/\w/u.test(str)) // → false

还有一种否定版本的 /p{...}，表示为 /P{...}：

console.log(/\P{Number}/u.test('㉛')) // → false
console.log(/\P{Number}/u.test('ض')) // → true

console.log(/\P{Alphabetic}/u.test('㉛')) // → true
console.log(/\P{Alphabetic}/u.test('ض')) // → false

除了字母和数字，还有几种属性可以用于 Unicode 属性转义中。你可以在当前规提案中找到受支持的 Unicode 属性列表。

正则表达式新功能支持情况

	Chrome	Firefox	Safari	Edge
s 修饰符	62	No	11.1	No
命名捕获组	64	No	11.1	No
后行断言	62	No	No	No
Unicode 属性转义	64	No	11.1	No

	Chrome Android	Firefox Android	iOS Safari	Edge Mobile	Samsung Internet	Android Webview
s 修饰符	62	No	11.3	No	8.2	62
命名捕获组	64	No	11.3	No	No	64
后行断言	62	No	No	No	8.2	62
Unicode 属性转义	64	No	11.3	No	No	64

Node.js

8.3.0（需要 --harmony 运行标识）
8.10.0（支持 s 修饰符和后行断言）
10.0.0（完全支持）

模板字面量修正

当一个模板字面量紧跟在一个表达式后面时，我们称之它为标记模板字面量。当你想用函数解析模板字面量时，标记模板非常有用。思考下面的示例：

function fn(string, substitute) {
  if (substitute === 'ES6') {
    substitute = 'ES2015'
  }
  return substitute + string[1]
}

const version = 'ES6'
const result = fn`${version} was a major update`

console.log(result)
// ES2015 was a major update

在上面的示例代码中，一个标签表达式（即普通函数被调用），并向其传递模板字面量作为参数。该函数只修改字符串的动态部分并返回它。

ES2018 之前，带标记的模板字符串和转义序列具有相关的的句法限制。反斜杠后紧跟的某些字符被视为特殊字符：\x 表示十六进制转义，\u 表示 Unicode 转义，\ 跟一个数字表示八进制转义。因此，如字符串 C:\xxx\uuu 或者 \ubuntu 会被视为无效转义序列，而且会引发 SyntaxError 错误。

ES2018 从标记模板中移除了这些限制，而不再抛出错误，将无效转义表示为 undefined：

function fn(string, substitute) {
  console.log(substitute) // escape sequences
  console.log(string[1]) // undefined
}

const str = 'escape sequences'
const result = fn`${str} \ubuntu C:\xxx\uuu`

记住：在常规模板字面量中使用非法转义序列仍然会导致错误。

const result = `\ubuntu`
// SyntaxError: Invalid Unicode escape sequence

模板字面量修正的支持情况

Chrome	Firefox	Safari	Edge
62	56	11	No

Chrome Android	Firefox Android	iOS Safari	Edge Mobile	Samsung Internet	Android Webview
62	56	11	No	8.2	62

Node.js

8.3.0（需要 --harmony 运行标识）
10.0.0（完全支持）

总结

我们已经仔细研究了 ES2018 引入的几个关键特性，包括异步迭代、rest/spread 属性、Promise.prototype.finally() 以及 RegExp 对象。尽管一些浏览器供应商还没有完全支持这些特性，但是现在它们完全可用，这要归功于像 Babel 这样的 JavaScript 转换器。

ECMAScript 正在迅速发展，也会经常引入新功能。你可以查看完成草案列表，了解全部的最新内容。有没有让你感到兴奋的新功能呢？分享在评论中吧！

原文链接：New ES2018 Features Every JavaScript Developer Should Know

『译』创建 JavaScript 函数的 7 种方式

Sun, 13 Jan 2019 00:00:00 GMT

函数

一个可以写一本书的 JavaScript 函数，我想其他人也有这种想法。

但是今天我们长话短说。与其他比较流行的语言（如 Java）相比，函数被认为是 JavaScript 语言中的第一等公民。这意味着你可以将它们作为参数传递，让函数返回一个新函数，甚至将函数作为 JavaScript 语言中的任何其它类型的值。例如，函数可以是 JavaScript 对象中的一个属性（命名方法）。

事实上，函数确实是 JavaScript 中的一等公民，因此使得这门语言非常灵活。例如，你在 JavaScript 中可以使用函数创建闭包：

function counter() {
  let count = 0

  function increment() {
    return ++count
  }

  return increment
}

const coolClosureCounter = counter()

coolClosureCounter() // 1
coolClosureCounter() // 2

创建函数的 7 中方式

让 JavaScript 新手比较困惑的是函数的声明。在 MDN 里我们可以找到对函数定义的定义：

一个 JavaScript 函数用 function 关键字声明，后面跟着函数名和圆括号 ()。

在熟悉 JavaScript 之后，该语句仍然有效。但是我要向你展示，在 2018 年以 7 中不同的方式创建 JavaScript 函数。

函数声明/定义/语句

function foo() {
  console.log('Fun with Functions')
}

我想这是我们学的第一种方式，没什么稀奇的。看起来和其它语言很类似。

函数表达式

const myFunction = function () {
  console.log('Fun with Functions')
}

注意，如果你在声明函数表达式之前调用它，那么就会出错：

foo() // Uncaught ReferenceError: foo is undefined

const foo = function () {
  console.log('Hei!')
}

箭头函数

;() => console.log('Fun with Functions')

在 ES2015（即 ES6）之后，我们可以使用非常小巧方便的箭头函数表达式。这个语法在链接内置的 map/filter/reduce 等方法时特别有用。有点像下面的例子：

const names = [
  'Eirik',
  'Nicolai',
  'Henrik',
  'Jan',
  'Paal Kristian',
  'Kristine',
  'Espen',
]

names.filter((name) => name.length > 5).map((name) => name.toLowerCase())
// ["nicolai", "henrik", "paal kristian", "kristine"]

但是在使用箭头函数之前，请考虑以下几个事项：

函数体内没有特殊的 arguments 对象
你不能使用 new (() => {})
箭头函数没有属于自己的 this、arguments、super 或者 new.target

函数的构造函数

好吧，这很尴尬。这种方式不简单也不直观。而且 MDN 不推荐这种方式。但是如果你知道一种用法，我们很乐意了解。

const myStrangeFunc = new Function('a', "console.log(a + 'with Functions')")
myStrangeFunc('Fun') // Fun with Functions

函数体是由一个字符串创建的？！有趣的函数呀！还没有结束呢 🤓。

其它方式……

生成器函数表达式
生成器函数声明
生成器函数构造函数

生成器函数不是这篇文章的主题。在这里查看更多信息。

IIFE 和匿名函数

函数非常酷，它们也可以是匿名的。在 JavaScript 中，我们允许未命名的函数。你知道可以立即调用它们吗？立即调用函数表达式（IIFE）：

;(function () {
  // ......
})()

2018 后会无期

Mon, 31 Dec 2018 00:00:00 GMT

我的天，一年的时间又这么悄悄地溜走了，已经到了和 2018 说再见的时候。回想这一年经历的种种都恍如昨日。相比于看所谓跨年演唱会，我更想用这篇文章来告别 2018，毕竟我看了一会儿，唱的这啥玩意儿？！

2016 年开始写第一篇年末总结，这是第三篇了。年终总结写起来是比较难的，因为可能这一年平平淡淡就过去了，没什么值得大书特书之处。而且还很容易让人想到这样一句话：『最怕一生碌碌无为，还说平凡难能可贵』。

关于工作

其实参加工作之后，你会感觉工作永远好像是第一位的，因为在做其它任何事之前，都需要考虑对工作的影响。我试图让工作和生活达到相对平衡的状态，如何才能做到？这是一段漫长的的路。

我永远不会忘记的 3 月份，当时我们要做一个新项目，人家的要求是一个月就要看到产品。我们 7 个开发，8 号左右面试，第二天入场，用了两三天的时间来设计数据库和搭建基础框架，之后差不多只剩下半个月，我们要用这半个月的时间完成开发并上线。其实当时听完这个安排，我是奔溃的，因为这意味着朝九晚五没了晚五，意味着周日失去它的小伙伴周六啊。不过世上无难事，只怕有心人，在我们付出努力之后，产品的基本功能已经具备了。3 月 25 号开始联调（因为是前后端分离开发的，所以需要联调），一直到 26 号早晨，也就是一个通宵之后，基本完成了第一次上线的需求。我得感谢优秀的同事们。Respect to everyone！因为前端的技术选型是我的建议，用的是 Vuejs 系列，这对于他们来说太陌生，在开发初期对他们造成了很大的困扰。

加班的状态一直持续到 5 月到 6 月份，经过五一假期的调整，项目的迭代周期基本开始正常起来，再之后就是一般性的需求和优化需求了。值得一提的是我们对项目做的性能优化，关于前端的优化，我整理了一篇文章：Vuejs 开发不完全指南。

现在回过头去看，如果当时能够有充裕的时间来设计我们的代码，使用一些更成熟的框架，比如使用 Vuex/rxjs 实现前端数据统一管理、持久化；使用 Websocket 实现前后端双向实时通信；使用后端同学更容易接受的 TypeScript 写出更好的代码。这几个技术点没有用在项目中，我觉得是比较遗憾的。

2018 年坚持时间最长的一件事应该是“翻译”吧，我在 GitHub 上创建了一个名为 100 Days of Translate 的仓库。顾名思义，我想在 100 天的时间里翻译尽可能多的技术文章，从 8 月份算起，到年底差不多就是 100 多天。但是立 flag 容易，实现起来就很费力了，到现在只翻译了 37 篇，距离尽可能多还差很多。所以，flag 还是不能乱立，容易打脸。2019 年尽力实现这个小目标。

关于生活

生活，平平淡淡，偶尔给我们几个意外惊喜。

今年五一假期的时候，正好项目忙完，可以调休，而且又是清明节，所以就回了一趟老家。幸运的是，北京到老家的高铁在去年刚刚开通，回老家再也不用隔夜到达了，而是朝发夕至，缩减了一半的时间呢。感谢来车站接我的老朋友。到家的时候差不多是下午 5 点左右。

老家的气候确实比北京好很多，中午的太阳并不觉得热，早晨和晚上需要穿上外套。清明节那天和家人们去扫墓祭祖，这个习俗每年都有，只是在我读大学之后就再也没有去过。以前我并不是特别能理解这些习俗，认为这些形式可有可无，不去也无所谓。但是，在外漂泊几年后，我也渐渐能够理解这些形式背后的含义，这何尝不是父辈心中的乡愁呢，父辈们的时代生活艰苦，他们出走半生，不忘本心，唯有故乡才是心中的归宿。先祖墓前的几缕青烟在片刻间消散，但又绵延不绝。

回北京那天，另一个好友来车站送我，但是那天走的太急，只能匆匆别过（向我的这位好友抱拳致意）。回到北京之后，便是炎夏，经历过才知道痛苦，而且会一直持续到 10 月份左右。这段时间工作也开始忙碌起来，就这样一直往返在两点一线之间。

7 月份老姐去了国外上班，把所有行李都打包到了我宿舍。11 月份我搬家的时候，太多行李拿不走，能扔的都扔了，我那时就在想孑然一身、极简生活是多么好的一件事。搬完家之后，之前去公司半个小时的路程，现在就需要一个多小时，从此开始了挤地铁的快（zao）乐（xin）生活。我有时候在想没有挤过地铁的人生是不完整的。用一句话总结这段时间：上班在日出黎明前，下班在日落黄昏后。

虽然我没见过北京 4 点的太阳，但是我见过 7 点钟的黎明：

以及 5 点钟的黄昏：

这些生活谈不上精彩，却也为我的 2018 年画下浓墨重彩的几笔。

写在最后

写这部分的时候已经是 2019 年 01 月 01 日。昨晚，楼上阿姨家的孩子哭了一晚上，我终于明白为啥房东跟我们强调楼层的隔音很差，太让人头大了。虽然这篇总结迟到了，但是绝对不会缺席。

2018 年可能是我前半生读书最多的一年，粗略地算一下，估计 20 本左右。这其中包括技术类、传记类、历史类、科普类等等。我觉得有必要为我偏爱的几本书做一下记录。

『半小时漫画中国史』三部曲——从秦汉到唐宋，以一种幽默风趣的语言勾勒出中国历史的轮廓，目测还会出第四部
『两个故宫的离合』——从一个日本记者的角度讲述了北京故宫和台北故宫的历史
『浮生六记』——沈复和陈芸的爱情，虽然如朋友所说这是一场悲惨的爱情，但是却让人羡慕。而浮生若梦，为欢几何？
『愿你慢慢长大』——里面的一句话让我印象深刻：愿你有好运气，如果没有，愿你在不幸中学会慈悲；愿你被很多人爱，如果没有，愿你在寂寞中学会宽容；愿你一生一世每天都可以睡到自然醒
『胡适日记』——看别人的日记总是那么有趣。
『上帝的手术刀』——主题是基因编辑。读这本书，纯粹出于好奇心。但是作者推荐了一本科幻小说『人生算法』，我觉得可以放在 2019 年的书单里

其它一些技术类的书籍：

『CSS 世界』
『深入理解 ES6』
『启示录』
『Web API 的设计与开发』

不知道为什么，我对文学和小说类的书总是提不起兴趣，都有买过几本，但是后来看着看着就喜欢打瞌睡，长此以往这本书就会被我抛弃，很奇怪。我想这一年读书最大的作用就是能够更加解自己、了解世界、了解生活，接纳自己的无知，也只有这样才能保持永远向前。2017 年的总结中我也对自己说过：最大的稳定就是进步，同样，我希望把这句话送给我的 2019 年：最大的稳定是进步，而不进步便是退步。

其实到这里，这篇总结差不多可以结束了。我想，此刻 2018 年的所有种种都不必再纠结。说声再见，当做告别。

感谢所有陪伴在我身边的人，感谢所有与我同行的人！

我们都在努力奔跑，我们都是追梦人。

Enjoy 2019

『译』JavaScript 错误处理权威指南

Sun, 16 Dec 2018 00:00:00 GMT

原文链接：Handling Errors in JavaScript: The Definitive Guide

这篇文章将分为三个部分。首先，我们会看一下常规错误；之后，我们会集中梳理一下后端（Node.js 和 Express.js）中的错误处理；最后，我们会看看在 React.js 中如何处理错误。我选择这些框架是因为它们都是当下最受欢迎的，但是，你应该能够很容易地将这些新知识应用到其它框架里面去。

完整的项目示例参见 GitHub。

JavaScript 常规错误处理

throw new Error('something went wrong!')——在 JavaScript 中创建一个 Error 实例，并且中断执行脚本，除非你事先处理了这个错误。如果你的职业生涯是以 JavaScript 开发者作为开端，你自己很可能不会去这样做，而你会在其他库（或者运行时）看到，例如：ReferenceError: fs is not defined 或者类似的错误。

Error 对象

Error 对象为我们提供了两个内置属性。第一个是 message，就是你传递给 Error 构造函数的参数。例如：new Error('This is message')，这样的话就可以通过 message 属性来访问：

const myError = new Error('please improve your code');
console.log(myError.message); // please improve your code

第二个是非常重要的属性是错误堆栈。你可以通过 stack 属性来访问它。错误堆栈会给你一些哪些文件导致发生错误的历史记录（调用堆栈）。堆栈还包括顶部的信息，然后紧接着是实际堆栈，以最近的错误或错误隔离点开始，然后转到最外层的“负责”文件。

Error: please improve your code
  at Object.<anonymous> (/Users/gisderdube/Documents/_projects/hacking.nosync/error-handling/src/general.js:1:79)
  at Module._compile (internal/modules/cjs/loader.js:689:30)
  at Object.Module._extensions..js (internal/modules/cjs/loader.js:700:10)
  at Module.load (internal/modules/cjs/loader.js:599:32)
  at tryModuleLoad (internal/modules/cjs/loader.js:538:12)
  at Function.Module._load (internal/modules/cjs/loader.js:530:3)
  at Function.Module.runMain (internal/modules/cjs/loader.js:742:12)
  at startup (internal/bootstrap/node.js:266:19)
  at bootstrapNodeJSCore (internal/bootstrap/node.js:596:3)

抛出并处理错误

目前，单独的 Error 实例不会出现任何问题。比如： new Error('...') 不会执行任何操作。当 throw Error 时会变得有趣。接着，就像之前说的，你的脚本会中断执行，除非你在代码中已经进行了处理。记住，即使你手动抛出错误，也无关紧要，它会被第三方库、运行时（Node 或浏览器）抛出。下面让我们来看看在不同场景中如何处理错误。

try…catch

这是最简单，也是经常最容易被忘记的处理错误的一种方式——由于 async/await 的出现，它的用途也更加多样。看看下面的例子，它可以用来捕获各种同步代码错误：

const a = 5;

try {
  console.log(b); // b 未定义，抛出错误
} catch (err) {
  console.error(err); // 打印错误堆栈
}

console.log(a); // 5

如果不把 console.log(b) 放在 try...catch 语句块中的话，脚本就会中断执行。

…finally()

有时必须要执行一些代码，无论有没有错误。这时你可以选择第三种方式，即 try...catch 的可选语句块 finally。它和在 try...catch 语句块后写一行代码的作用相同，但有些情况下非常有用。

const a = 5;

try {
  console.log(b); // b 未定义，抛出错误
} catch (err) {
  console.error(err); // 打印错误堆栈
} finally {
  console.log(a); // 5
}

异步——回调

异步是你在 JavaScript 中必须要去考虑的一件事情。假设你拥有一个异步函数，并且函数内部出现了一个错误，此时脚本会继续执行，但错误并不会立即呈现出来。使用回调处理异步函数时（不推荐使用），回调函数通常可以接收两个参数，看起来是下面这样：

myAsyncFunc(someInput, (err, result) => {
  if (err) return console.log(err);
  console.log(result);
});

如果出现错误，参数 err 将会等于 Error。如果没有 err 就是 undefined 或者 null。所以在 if (err) 中返回或者将其它代码写在 else 块中非常重要。除此之外，你可能还会遇到其它错误，例如，result 是 undefined，而你想访问其 data 属性等等其它类似情况。

异步——Promise

一种更好地处理异步代码的方式是使用 promises。除了使代码更具可读性之外，我们还可以改进错误处理。只要有一个 catch 语句块，我们就不需要再关心那么多的错误捕获了。在把 promises 链接起来时，一个 catch 语句块可以捕获来自 promises 执行过程中所有的或者最后一个 catch 块中的错误。注意：没有 catch 语句块不会中断脚本的执行，但是会给出你一些可读性比较差的信息：

(node:7741) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 1): Error: something went wrong
(node:7741) DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code. */

因此，请始终在 promises 后面添加 catch 块，看看下面的代码：

Promise.resolve(1)
  .then((res) => {
    console.log(res); // 1
    throw new Error('something went wrong');
    return Promise.resolve(2);
  })
  .then((res) => {
    console.log(res); // 2
  })
  .catch((err) => {
    console.log(err);
    return Promise.resolve(3);
  })
  .then((res) => {
    console.log(res); // 3
  })
  .catch((err) => {
    console.log(err);
  });

再谈 try…catch

随着 JavaScript 中引入 async/await，我们又回到了最初处理错误的方式，使用 try...catch，这使得处理错误变得比较容易:

(async function () {
  try {
    await someFuncThatThrowsAnError();
  } catch (err) {
    console.error(err);
  }
})();

因为这和我们用于处理同步代码错误的方式相同，因此如果有需要，使用范围更广的 catch 语句更加容易。

服务端错误处理

现在我们有了处理错误的工具，然我们来看看可以将其运用在哪些实际的场景中呢？在服务端处理错误是应用程序的很关键的一部分。其实关于错误处理，有很多种不同的方法。我将为你演示一种具有自定义 Error 构造函数和错误代码的处理方式，这使得我们可以轻松地将其传递给前端或者其他 API 调用者。这样一来，如何组织后端代码并不重要，因为这种思想是保持不变的。

我们将使用 Express.js 作为后端框架。思考一下最有效的处理错误的结构，我们可能需要：

一般性的错误处理，某种回退，也就是说：“发生了一些错误，请重试或者联系我们”。这种方式不是特别明智，但至少我们可以告知用户发生了错误——而不是无限加载等类似情况。
特殊的错误处理，告知用户错误的详细信息，并且告知用户该如何修复，例如，缺失某些信息，某些条目已存在于数据库中等等。

构建自定义 Error 构造函数

我们可以使用现有的 Error 构造函数并将其扩展。虽然在 JavaScript 中使用继承的风险比较高，但在这种情况下，我觉得继承非常有用。为什么需要继承呢？因为我们仍然希望堆栈跟踪能为我们带来良好的调试体验。扩展原生的 JavaScript Error 构造函数能让我们自由地使用堆栈跟踪。我们要添加的唯一一个属性就是 code，以便稍后可以使用 err.code，其实相当于传递给前台的状态码（http 状态码）。

class CustemError extends Error {
  constructor(code = 'GENERIC', status = 500, ...params) {
    super(...params);

    if (Error.captureStackTrace) {
      Error.captureStackTrace(this, CustemError);
    }

    this.code = code;
    this.status = status;
  }
}

module.exports = CustemError;

如何处理路由

我们自定义的 Error 已经可以使用了，接下来就要需要设置路由结构。正如我指出的，我们需要提供一个统一的错误处理逻辑，因为我们想要让每个路由都拥有同样的错误处理的行为。默认情况下，Express 是不支持的，因为路由都是封装过的。

为此，我们可以实现一个路由处理器，并且将真正的路由逻辑定义为一个常规函数。通过这种方式，当路由函数（内部函数）抛出错误时，就能将错误返回至路由处理器中，最终传递到前端。当后端出现错误时，我们希望向前端传输一条响应——假设是 JSON API——类似下面的格式：

{
    error: 'SOME_ERROR_CODE',
    description: 'Something bad happened. Please try again or contact support.'
}

准备好面对不知所措。每当我对学生说起下面这句话时，他们总是会很生气。

第一次看到某些东西的时候无法理解其实无所谓。你只管先用起来，过段时间之后你自然会明白它的意义。

注：这也称之为自上而下的学习，我非常喜爱。

下面是路由处理器的代码：

const express = require('express');
const router = express.Router();
const CustomError = require('../CustomError');

router.use(async (req, res) => {
  try {
    const route = require(`.${req.path}`)[req.method];

    try {
      const result = route(req); // 把 request 传递个路由函数
      res.send(result); // 把从路由函数返回的数据发送给客户端
    } catch (err) {
      // 如果路由函数中发生错误，将会执行以下代码
      if (err instanceof CustomError) {
        // 错误已经被处理的情况下，我们需要将其转化为我们想要的对象
        return res.status(err.status).send({
          error: err.code,
          description: err.messsage,
        });
      } else {
        console.error(err);

        // 未处理错误，我们只要返回通用的错误对象
        return res.status(500).send({
          error: 'GENERIC',
          description: 'Something went wrong. Please try again or contact support.',
        });
      }
    }
  } catch {
    // 请求失败
    res.status(404).send({
      error: 'NOT_FOUND',
      description: 'The resource you tried to access does not exist.',
    });
  }
});

我希望你可以阅读代码中的注释，因为我觉得这比我在这里解释更有意义。接下来让我们看一下真实的路由文件：

const CustomError = require('../CustomError');

const GET = (req) => {
  return { name: 'Rio de Janeiro' };
};

const POST = (req) => {
  throw new Error('Some unexpected error, may also be thrown by a library or the runtime.');
};

const DELETE = (req) => {
  throw new CustomError('CITY_NOT_FOUND', 404, 'The city you are trying to delete could not be found.');
};

const PATCH = (req) => {
  try {
    throw new Error('Some internal error');
  } catch (err) {
    throw new CustomError('CITY_NOT_EDITABLE', 400, 'The city you are trying to edit is not editable.');
  }
};

module.exports = {
  GET,
  POST,
  DELETE,
  PATCH,
};

在这些例子中，我没有对实际请求做任何事情，我只是模拟了各种不同的错误场景。例如，GET /city 在第 3 行，POST /city 在第 8 行。这些接口也可以和查询参数一起使用，如：GET /city?startWith=R。对于未处理错误，前端将会接收如下错误信息：

{
  error: 'GENERIC',
  description: 'Something went wrong. Please try again or contact support.',
}

或者你可以手动抛出 CustomError 错误：

throw new CustomError('MY_CODE', 400, 'Error description');

它将会被转化为：

{
  error: 'MY_CODE',
  description: 'Error description'
}

现在后端有了完美的错误处理方式，不必再将错误日志发送给前端，而且每次发生错误时，我们总是可以返回有用的信息。

确保你在 GitHub 上看过了完整的代码。你可以在项目中自由地使用，或者按照你的需求修改这些代码。

向用户显示错误

下一步也是最后一步就是在处理前端错误，你需要使用第一部分中描述的工具来处理前端逻辑本身产生的错误。然而来自后端的错误信息，同样需要显示出来。让我们来看看如何显示错误。正如之前提到的，我们将在演示中继续使用 React。

在 React 状态中保存错误

和其它数据一样，错误和错误信息也可以是变化的。因此你希望将其放在组件的状态中。默认情况和挂载时，你希望重置错误，所以当用户第一次看见页面时，就不会显示错误。

接下来的我们要弄清楚的是不同的错误类型所匹配的视觉 UI。和后端一样，有 3 种类型：

全局错误。如：来自后端的一般性错误，或者用户没有登录等等。
来自后端的特定错误。如：用户将他的登录凭证发送到后端，后端的响应是密码不匹配。前端无法验证这些东西，因此它们都是从后端发送过来。
前端逻辑产生的特定错误。如：邮件地址校验失败。

第 2 和第 3 种非常相似，而且可以使用同样的状态保存，只是它们的来源不一样而已。我们会在代码中如何实现。

我会使用 React 原生的状态实现，但是你也可以使用 MobX 或者 Redux 等状态管理系统。

全局错误

我通常会把这些错误保存在最外层有状态组件，并且将其渲染为一个静态 UI 元素，它可以是屏幕顶部的一个红色条幅，一个模态框或者其他任何东西，具体的设计实现取决于你自己。

让我们看看代码实现：

import React, { Component } from 'react';
import GlobalError from './GlobalError';

class Application extends Component {
  constructor(props) {
    super(props);

    this.state = {
      error: '',
    };

    this._resetError = this._resetError.bind(this);
    this._setError = this._setError.bind(this);
  }

  render() {
    return (
      <div className="container">
        <GlobalError error={this.state.error} resetError={this._resetError} />
        <h1>Handling Errors</h1>
      </div>
    );
  }

  _resetError() {
    this.setState({ error: '' });
  }

  _setError(newError) {
    this.setState({ error: newError });
  }
}

export default Application;

正如我们看到的，我们把错误保存在 Application.js 的状态中，我们也有重置和改变错误值的方法。我们把错误值和重置方法传递给 GlobalError 组件，它负责显示错误，以及在点击 “X” 时重置错误。让我们看看 GlobalError 组件的代码：

import React, { Component } from 'react';

class GlobalError extends Component {
  render() {
    if (!this.props.error) return null;

    return (
      <div
        style={{
          position: 'fixed',
          top: 0,
          left: '50%',
          transform: 'translateX(-50%)',
          padding: '10px',
          backgroundColor: '#ffcccc',
          boxShadow: '0 3px 25px -10px rgba(0, 0, 0, 0.5)',
          display: 'flex',
          alignItems: 'center',
        }}
      >
        {this.props.error}
        &nbsp;
        <i className="material-icons" style={{ cursor: 'pointer' }} onClick={this.props.resetError}>
          close
        </i>
      </div>
    );
  }
}

export default GlobalError;

你可以看到第 5 行，如果没有错误，我们不会渲染任何 UI。它可以防止页面顶部一直有一个空的红色方框。当然，你也可以修改组件的样式或者行为。例如，你可以把 “X” 替换为超时，它会在几秒钟的超时后重置错误。

现在你可以在任何地方使用这个全局错误组件，只需从 Application.js 传递 _setError，而且你也可以设置全局错误，例如，一个请求从后台返回的字段是 error: 'GENERIC'：

import React, { Component } from 'react';
import axios from 'axios';

class GenericErrorReq extends Component {
  constructor(props) {
    super(props);

    this._callBackend = this._callBackend.bind(this);
  }

  render() {
    return (
      <div>
        <button onClick={this._callBackend}>Click me to call backend</button>
      </div>
    );
  }

  _callBackend() {
    axios
      .post('/city')
      .then((result) => {
        // 请求成功
      })
      .catch((err) => {
        if (err.response.data.error === 'GENERIC') {
          this.props._setError({ error: err.response.data.error });
        }
      });
  }
}

如果你比较懒，你可以停在这里了。至于特定的错误，你可以通过更改全局错误状态把错误方框显示在页面的顶部。但是，我将继续为你展示如何处理和显示特定的错误。为什么呢？首先，这篇文章是处理错误权威指南，所以我们不能停在这里。第二，如果你把所有错误显示为全局错误，恐怕 UX 人员会吓坏吧。

处理特定请求错误

和全局错误类似，我们可以在其它组件中包含局部错误状态。程序是类似的：

import React, { Component } from 'react';
import axios from 'axios';

import InlineError from './InlineError';

class SpecificErrorRequest extends Component {
  constructor(props) {
    super(props);

    this.state = {
      error: '',
    };

    this._callBackend = this._callBackend.bind(this);
  }

  render() {
    return (
      <div>
        <button onClick={this._callBackend}>Delete you city</button>
        <InlineError error={this.state.error} />
      </div>
    );
  }

  _callBackend() {
    this.setState({ error: '' });

    axios
      .delete('/api/city')
      .then((result) => {
        // 请求成功
      })
      .catch((err) => {
        if (err.response.data.error === 'GENERIC') {
          this.props.setError(err.response.data.description);
        } else {
          this.setState({
            error: err.response.data.description,
          });
        }
      });
  }
}

export default SpecificErrorRequest;

需要记住的一点是，清除错误的方式通常有所不同。在这里使用 “X” 清除错误没有意义，更好的方式是在发起一次新请求的时候清除错误，例如，当输入框的值发生了变化。

前端自身错误

正如之前提到过，这些错误可以使用与处理从后端返回特定错误的相同方式来处理。让我们用一个输入字段的例子来说明，这次我们允许用户在输入之后删除一个城市：

import React, { Component } from 'react';
import axios from 'axios';

import InlineError from './InlineError';

class SpecificErrorRequest extends Component {
  constructor(props) {
    super(props);

    this.state = {
      error: '',
      city: '',
    };

    this._callBackend = this._callBackend.bind(this);
    this._changeCity = this._changeCity.bind(this);
  }

  render() {
    return (
      <div>
        <input type="text" value={this.state.city} style={{ marginRight: 15 }} onChange={this._changeCity} />
        <button onClick={this._callBackend}>Delete you city</button>
        <InlineError error={this.props._callBackend} />
      </div>
    );
  }

  _changeCity(e) {
    this.setState({
      error: '',
      city: e.target.value,
    });
  }

  _validate() {
    if (!this.state.city.length) throw new Error('Please provide a city name.');
  }

  _callBackend() {
    this.setState({ error: '' });

    try {
      this._validate();
    } catch (err) {
      return this.setState({ error: err.message });
    }

    axios
      .delete('/api/city')
      .then((result) => {
        // 请求成功
      })
      .catch((err) => {
        if (err.response.data.error === 'GENERIC') {
          this.props.setError(err.response.data.description);
        } else {
          this.setState({
            error: err.response.data.description,
          });
        }
      });
  }
}

export default SpecificErrorRequest;

使用错误代码进行错误国际化

也许你会想为什么我们需要错误代码，如 GENERIC，我们只显示了从后端传回的错误描述。现在随程序的增长，你希望抢占新的市场，这个时候就必须要面对支持多语言的问题了。如果在这种情况下，你就可以使用错误代码来显示正确的用户当地语言。

我希望你对错误处理能够有所收获。console.log(err) 应该已经成为过去了。它对于调试必不可少，但是它不应该在你的生产构建中结束。为了防止出现这种情况，我建议你使用日志库，我过去一直使用 loglevel，我非常喜欢它。

『译』你应该要知道的 Array.map() 的 4 种用法

Sat, 10 Nov 2018 00:00:00 GMT

在数组的每一项上调用一个函数

如前所述，.map() 接收一个回调函数作为它其中的一个参数，该回调函数的一个重要的参数是函数正在处理的当前值。这是一个必要的参数。使用这个参数，我们可以修改数组中的每一项并从中创建一个新函数。下面是一个例子：

const sweetArray = [2, 3, 4, 5, 35]
const sweeterArray = sweetArray.map((sweetItem) => {
  return sweetItem * 2
})
console.log(sweeterArray) // [4, 6, 8, 10, 70]

这个例子甚至可以简化为：

const makeSweeter = (sweetItem) => sweetItem * 2
const sweetArray = [2, 3, 4, 5, 35]
const sweeterArray = sweetArray.map(makeSweeter)
console.log(sweeterArray) // [4, 6, 8, 10, 70]

编写像 sweetArray.map(makeSweeter) 这样代码，增加代码的可读性。

把字符串转化为数组

我们知道，.map() 属于 Array.prototype。那我们如何使用它将一个字符串转化为一个数组呢？不用担心，我们将会使用特殊的 .call() 方法，而不会为字符串再开发一个方法。

JavaScript 中所有东西都是对象，方法只是附加在这些对象上的函数。.call() 允许我们在一个对象上利用另一个对象的上下文。因此，我们将会把数组中 .map() 的上下文复制到字符串中。

.call() 可以传递参数，将要被使用的上下文，“原始函数的参数的参数”。听起来像是胡言乱语？下面是一个例子：

const name = 'Chuloo'
const map = Array.prototype.map

const newName = map.call(name, (eachLetter) => {
  return `${eachName}a`
})
console.log(newName) // ['Ca', 'ha', 'ua', 'la', 'oa', 'oa']

我们在字符串上简单地使用了 .map() 的上下文，并且传递了一个 .map() 所期望函数参数。

这个函数类似于 .split() 方法，只能在返回数组之前修改每个单独的字符。

在 JavaScript 库中渲染列表

JavaScript 类库，例如 React 利用 .map() 在列表中渲染条目。不过，这需要 JSX 语法，.map() 方法是被包裹在 JSX 语法中的。下面是一个 React 组件的例子：

import React from 'react'
import ReactDOM from 'react-dom'

const names = ['john', 'sean', 'mike', 'jean', 'chris']

const NameList = () => (
  <div>
    <ul>
      {names.map((name) => (
        <li key={name}>{name}</li>
      ))}
    </ul>
  </div>
)

const rootElement = document.getElementById('root')
ReactDOM.render(<NameList />, rootElement)

你对 React 不熟悉？这是一个简单的无状态 React 组件，只渲染了一个 div 和列表。通过使用 .map() 来迭代最初创建的名称数组，渲染出每个单独的条目。这个组件使用 ReactDOM 呈现在 id 为 root 的 DOM 元素上。

重新格式化数组对象

如何在数组中处理对象？.map() 可以用来迭代数组中的对象，修改每个单独对象的内容并返回一个新数组。这些修改基于回调函数中返回的内容完成。下面是一个例子：

const myUsers = [
  { name: 'chuloo', likes: 'grilled chicken' },
  { name: 'chris', likes: 'cold beer' },
  { name: 'sam', likes: 'fish biscuits' },
]

const usersByFood = myUsers.map((item) => {
  const container = {}

  container[item.name] = item.likse
  container.age = item.name.length * 10

  return container
})
console.log(usersByFood)
// [{chuloo: "grilled chicken", age: 60}, {chris: "cold beer", age: 50}, {sam: "fish biscuits", age: 30}]

总结

在这篇文章中，我们讨论了 JavaScript 中 .map() 的 4 种主要用法。要注意的是与其它方法的结合可以使 .map() 的功能被更强大的扩展和利用。试着寻找更多的用法！

『译』「Chrome Devtools」网络问题指南

Sun, 04 Nov 2018 00:00:00 GMT

原文链接：https://developers.google.com/web/tools/chrome-devtools/network-performance/issues

排队或停滞的请求

症状

6 个请求在同时下载，在这之后，又有一系列的请求在排队或停滞。一旦 6 个请求中的其中 1 个完成时，后面队列中的其中 1 个请求也会立即开始。

图 1：Network 面板中排队或停滞的请求的示例。在 Waterfall 中你可以看到 logo-1024px.png 的六个请求同时开始了。之后的请求被挂起，直到上面的 6 个请求中完成 1 个。

原因

对一个域名发出太多请求。在 HTTP/1.0 或 HTTP/1.1 连接中， Chrome 允许与每台主机同时只能有 6 个请求。

修复

如果你必须使用 HTTP/1.0 或者 HTTP/1.1，则可以实现域名分片。
使用 HTTP/2，但是不要和域名分片一起使用。
移除或延迟不必要的请求，以便关键请求可以优先下载。

Slow Time To First Byte（TTFB）

症状

1 个请求花费了相当长的时间来等待接收从服务器发出的第一个字节。

图 2：TTFB 的请求示例。Waterfall 中绿色的长条显示出 wait 请求等待了相当长的一段时间。

原因

客户端和服务端的连接很慢。
服务端的响应较慢。将服务器托管在本地以确定是连接慢还是服务器慢。如果你本地的 TTFB 依旧较慢，那就说明是服务器比较慢。

修复

如果连接比较慢，考虑将内容托管在 CDN 上，或者更换托管服务商。
如果服务器比较慢，考虑优化数据库查询，实现缓存，或者修改服务器配置。

Slow content download

症状

一个请求花费长时间来下载。

图 3：花费长时间下载请求的示例。Waterfall 中蓝色的长条意味着下载 elements-panel.png 花费了很长时间。

原因

客户端和服务端的连接很慢。
许多内容正在下载。

修复

考虑将内容托管到 CDN，或者更换托管服务商。
通过优化请求发送更少的内容。

『译』5 个小技巧，让你在 JavaScript 中写出更好的条件语句

Sun, 21 Oct 2018 00:00:00 GMT

为多条件使用 Array.includes

我们一起看看下面的例子：

// condition
function test(fruit) {
  if (fruit === 'apple' || fruit === 'strawberry') {
    console.log('red')
  }
}

乍一看，上面的例子没有毛病。但是，如果我们拥有更多的红色水果，比如 cherry 和 cranberries 呢？难道我们要使用更多的 || 来扩展这条语句吗？

我们可以使用 Array.includes(Array.includes) 来重写上面的条件：

function test(fruit) {
  // 把条件提取为一个数组
  const redFruits = ['apple', 'strawberry', 'cherry', 'cranberries']
  if (redFruits.includes(fruit)) {
    console.log('red')
  }
}

我们把红色水果（条件）提取成一个数组。通过这种方式，代码看起来更简洁。

减少嵌套，优先返回

让我们把上面的示例扩展一下，包含另外两个条件：

如果没有提供水果，抛出错误
如果水果的质量大于 10，接受并打印水果的质量

function test(fruit, quantity) {
  const redFruits = ['apple', 'strawberry', 'cherry', 'cranberries']

  // 条件1：fruit 必须有值
  if (fruit) {
    // 条件2：fruit 必须是红色
    if (redFruits.includes(fruit)) {
      console.log('red')

      // 条件3：质量必须大于 10
      if (quantity > 10) {
        console.log('big quantity')
      }
    }
  } else {
    throw new Error('no fruit')
  }
}

// 测试结果
test(null) // error: no fruit
test('apple') // 'red'
test('apple', 20) // 'red', 'big quantity'

观察上面的代码，我们可以得到：

1 if/else 语句会筛选出无效条件
3 层嵌套的 if 语句（条件 1、2、3）

我个人常用的一条规则是：当发现无效条件时尽早返回。

// 当发现无效条件时尽早返回
function test(fruit, quantity) {
  const redFruits = ['apple', 'strawberry', 'cherry', 'cranberries']

  // 条件1：优先返回
  if (!fruit) throw new Error('no fruit')

  if (fruit) {
    // 条件2：fruit 必须是红色
    if (redFruits.includes(fruit)) {
      console.log('red')

      // 条件3：质量必须大于 10
      if (quantity > 10) {
        console.log('big quantity')
      }
    }
  }
}

这样改造之后，我们减少了一层嵌套。这种代码风格比较好，特别是当你有很长的 if 语句时（想象一下你需要滚动到最底部才知道有一个 else 语句，非常不爽）。

我们可以通过反转条件和优先返回来继续合并 if 嵌套。观察下面的条件 2，看看我们是如何做到的：

// 当发现无效条件时尽早返回
function test(fruit, quantity) {
  const redFruits = ['apple', 'strawberry', 'cherry', 'cranberries']

  // 条件1：优先返回
  if (!fruit) throw new Error('no fruit')
  // 条件2：当水果不是红色时，返回
  if (!redFruits.includes(fruit)) return

  console.log('red')

  // 条件3：质量必须大于 10
  if (quantity > 10) {
    console.log('big quantity')
  }
}

通过反转条件 2，我们的代码现在摆脱了嵌套语句。当我们的逻辑很长，并且当某一个条件不满足时停止进一步地处理时，这个技术非常有用。

然而，这并不是一件很难的事情。问问自己，在这个版本中（没有嵌套）代码是否比之前本的代码更加易读？

对于我来说，我将保留在之前的一个版本。因为：

使用 if 嵌套，代码简单明了
反转条件可能需要花费更多思考（增加认知负荷）

因此，总是保持：减少嵌套，优先返回，但不要过度。如果你感兴趣，这里有一篇文章和 StackOverflow 讨论，它们在这个话题上有深入的讨论。

Avoid Else, Return Early by Tim Oxley
StackOverflow discussion on if/else coding style

使用函数默认参数和解构

我想下面的代码看起来很熟悉吧，在 JavaScript 中，我们总是需要检查 null/undefined 值，并为其赋予默认值：

function test(fruit, quantity) {
  if (!fruit) return
  const q = quantity || 1 // 如果没有提供 quantity，将其赋值为 1

  console.log(`We have ${q} ${fruit}`)
}

// 测试结果
test('banana') // We have 1 banana
test('apple', 2) // We have 2 apple

事实上，我们可以通过函数默认参数来消除变量 q：

function test(fruit, quantity = 1) {
  // 如果没有提供 quantity，将其赋值为 1
  if (!fruit) return

  console.log(`We have ${q} ${fruit}`)
}

// 测试结果
test('banana') // We have 1 banana
test('apple', 2) // We have 2 apple

是不是更简单直观？请注意，每个参数都有它自己的默认函数参数。例如，我们也可以为 fruit 赋予默认值：function(test = 'unknown', quantity = 1)。

如果 fruit 是一个对象呢？我们能为其指定默认参数么？

function test(fruit) {
  if (fruit && fruit.name) {
    console.log(fruit.name)
  } else {
    console.log('unknown')
  }
}

// 测试结果
test(null) // unknown
test({}) // unknown
test({ name: 'apple', color: 'red' }) // apple

瞧瞧上面的例子，如果水果名称可用，我们将输出水果名称，否则输出 unknown。我们可以通过使用默认函数参数和解构来避免 fruit && fruit.name 检查：

function test({ name } = {}) {
  console.log(name || 'unknown')
}

// 测试结果
test(undefined) // unknown
test({}) // unknown
test({ name: 'apple', color: 'red' }) // apple

我们只需要水果的 name 属性，所以可以通过 {name} 来解构参数，然后我们就可以在代码中将 name 作为变量，而不是 fruit.name。

我们也指定了一个空对象 {} 作为默认值。如果不这样做，在执行 test(undefined) 时会出现错误——Cannot destructure property name of 'undefined' or 'null'.，因为 undefined 中没有 name 属性。

如果你不介意使用第三方库，这里有几种减少空检查的方法：

使用 Lodash get 方法
使用 Facebook 的开源库 idx(结合 Babel.js)

下面是使用 Lodash 的例子：

function test(fruit) {
  // 获取 name 属性，如果不可用，则指定默认值为 unknown
  console.log(_.get(fruit, 'name', 'unknown'))
}

// 测试结果
//test results
test(undefined) // unknown
test({}) // unknown
test({ name: 'apple', color: 'red' }) // apple

你可以在这儿运行示例代码。此外，如果你是函数式编程（FP）的爱好者，你还可以选择使用 Lodash fp。

使用 Map/Object 字面量，而非 switch 语句

让看看下面的例子，我们要基于颜色输出水果：

function test(color) {
  switch (color) {
    case 'red':
      return ['apple', 'strawberry']
    case 'yellow':
      return ['banana', 'pineapple']
    case 'purple':
      return ['grape', 'plum']
    default:
      return []
  }
}

// 测试结果
test(null) // []
test('yellow') // ['banana', 'pineapple']

上面的代码似乎并没有错，但我觉得它很啰嗦。使用更加简洁的对象字面量语法可以实现相同的结果：

const fruitColor = {
  red: ['apple', 'strawberry'],
  yellow: ['banana', 'pineapple'],
  purple: ['grape', 'plum'],
}
function test(color) {
  return fruitColor[color]
}

另外，Map 也可以实现相同的结果：

const fruitColor = new Map()
  .set('red', ['apple', 'strawberry'])
  .set('yellow', ['banana', 'pineapple'])
  .set('purple', ['grape', 'plum'])

function test(color) {
  return fruitColor.get(color) || []
}

Map 是 ES2015 中的对象类型，它允许你存储键值对。

那么我们应该禁止使用 switch 语句吗？不要局限于此。就我个人而言，我会尽可能使用对象字面量，但我也不会设置规则来阻止，使用哪种取决于你应用的场景。

Todd Motto 有一篇深入比较 switch 语句和对象字面量的文章，你可以读一读。

总结：重构语法

对于上面的例子，实际上我们可以使用 Array.filter 来重构代码以达到相同的结果：

const fruits = [
  { name: 'apple', color: 'red' },
  { name: 'strawberry', color: 'red' },
  { name: 'banana', color: 'yellow' },
  { name: 'pineapple', color: 'yellow' },
  { name: 'grape', color: 'purple' },
  { name: 'plum', color: 'purple' },
]

function test(color) {
  return fruits.filter((fruit) => fruit.color === color)
}

有不止一种方法可以实现相同的结果，在这儿我们展示了四个示例。写代码非常有趣！

为所有/部分条件使用 Array.every/Array.some

最后一个提示是利用最新的（但也并不是最新） JavaScript 数组函数来合并多行代码。思考下面的代码，我们要检查是否所有的水果都是红色：

const fruits = [
  { name: 'apple', color: 'red' },
  { name: 'banana', color: 'yellow' },
  { name: 'grape', color: 'purple' },
]

function test() {
  let isAllRed = true

  for (let f of fruits) {
    if (!isAllRed) break
    isAllRed = f.color === 'red'
  }

  console.log(isAllRed) // false
}

代码比较长！我们可以使用 Array.every 来合并代码：

const fruits = [
  { name: 'apple', color: 'red' },
  { name: 'banana', color: 'yellow' },
  { name: 'grape', color: 'purple' },
]

function test() {
  const isAllRed = fruits.every((f) => f.color === 'red')
  console.log(isAllRed) // false
}

现在是不是更加简洁了？同样，如果我们想检查水果中的任意一个是否为红色，我们可以使用 Array.some：

const fruits = [
  { name: 'apple', color: 'red' },
  { name: 'banana', color: 'yellow' },
  { name: 'grape', color: 'purple' },
]

function test() {
  const isAnyRed = fruits.some((f) => f.color === 'red')
  console.log(isAnyRed) // true
}

总结

让我们一起“生产”更多易读的代码。我希望你能从这篇文章中学到新的东西。

以上。Happy coding!

8 月随笔

Sun, 26 Aug 2018 00:00:00 GMT

一直在写代码，代码写的有点烦，有时就会想写点别的什么文字。本来想用手写的，无奈有些字虽然在脑子里，但是已经写不出来了。这些拼凑起来的文字，权当发发牢骚、排忧解愤，如此而已。

最近有些恍惚，感觉时间过得一天比一天快。尤其是上下班的路上这种感觉更加强烈，甚至有时会想自己是在上班的地铁还是下班的地铁上，周一到周五感觉时间像是被压缩一样。大抵有点理解古人为何感叹「逝者如斯夫」了。

来北京之前，对北漂没什么概念，当时的想象就是做自己喜欢的事情，为自己所爱之人努力拼搏，这些也不失为一件幸福的事情。只是在这城市待久了，有时也会怀疑过去种种对北漂的美好想象和向往。北漂不等于做自己喜欢的事，只是为了生计而已；北漂不等于自由自在，或许是在作茧自缚。北漂有太多身不由已，也有太多言不由衷！有时候会回想起毕业那年夏天的景象，在一个小村庄，我对自己说：就算是出去闯一闯吧！现在看来当时的这个轻而易举的决定似乎有点沉重。不过既然选择了远方，便要风雨兼程！

最近睡眠质量低，睡眠时间不足，失眠有点频繁，可是失眠的时候自己都不知道原因。是在烦恼什么，还是仅仅是失眠，又或是白天的茶喝多了？失眠的时候有件事儿特别糟心——躺着感觉自己的心跳，清清楚楚，可是听着听着愈加感到慌乱，就像哪首歌里唱的「心扑通扑通地乱跳」。

前几天是立秋，没看日历，全靠鼻子自动感知。过敏性鼻炎，对季节的变化非常敏感，一动不动就打喷嚏，流鼻涕。我很不幸地处于这个阶段，大概是这种画面——写两行代码，打一个喷嚏；写两行代码，擦一下鼻涕；如此死循环。画美不看 🤧！过段时间就是中秋节，那时北京的天气不冷不热，正好，出去走走，感受一下诸位文人笔下「北平之秋」的韵味。“咋不是，一层秋雨一层凉！”

这些字，前言不搭后语。不是鸡汤，不能解惑，只是道出生活之感。

回眸 2017

Sun, 31 Dec 2017 00:00:00 GMT

2017 的小目标

去年年底写过一篇总结『道阻且长：我的 2016』，里面记下了今年要完成的几个目标：

开发完成自己的博客
看完列给自己的书单 ✔
总结学习过程和经验 ✔
写够一定数量的博客
看完几本技术类书籍 ✔

这几个目标只完成了三个，剩下的虽然或多或少都做了一些，但半途而废令人失望，最遗憾的是重构博客这个目标。在这个过程中我也一直在反思，为什么非得给自己定所谓目标，它的意义何在呢？『世上无难事，只怕有心人』，我想这句从小就知道的俗语就是答案，实现那些自己力所能及的目标最大的因素就是坚持，坚持去完成这些目标，每当实现这些目标，每当发现离梦想又近了一步，那么每一年都不可能用平庸来形容。这一年，离更优秀的自己差了不止一大截。

关于工作

作为一名前端开发者，其实我最不愿意碰的东西就是 IE 浏览器，但偏偏这一整年我几乎都在和 IE9/8/5 打交道，踩过无数的坑，填坑的同时挖了不少坑，正是印证了『前人挖坑，活埋后人』这句话。在这一年里接触的最多的还是后台管理类的系统，写代码的套路相差无几，印象最深的应该是分别用 D3 和 Echarts 做流程图，虽然做出来也还过得去，但是我觉得以后不会再用了，代码量让人敬而远之。关于 IE8 的兼容性问题，其实我去年就写过一篇文章，而且我还曾说 IE 将亡，真是打脸 😅。其实开发过程如果能尝试一些新的技术，对于项目的提升还是非常明显的。

这是踏入职场完完整整的一年，在这个过程中，我的的思维方式、生活方式或多或少会发生转变，比起成绩而言，我觉得这些方式可能更加值得学习和思考。

时间。我想『学生思维』和『职人思维』的一个不同在于对时间价值的认识，在学校的时候，我的时间是很充裕的，可以做五花八门的事情，我似乎并不会意识到时间的价值在哪里。但是工作之后呢，时间真的是一种稀缺物，如果没有规划好时间，不仅要挨怼，而且要加班，加班的可能不止我一个，是整个团队。所以如何在有限的时间里提高自己的开发效率，创造更大的价值是我要思考的一个问题。不要考虑我将得到什么，因为我创造的价值大小直接决定我能得到多少，同时还可以留出时间继续学习一些新的技术。
团队。任何一个成功的人或者项目，离不开每一个团队成员的贡献，如何融入团队、怎样处理队员的关系？这是摆在刚刚进入职场的人眼前的第一个考验。也许每个人都有自己的方式来解决，但是我想有 3 点比较重要。一是谦虚，因为每个人并非无所不会、无所不知，也会犯错；二是尊重，如果能做到对同事以礼相待、欣赏他的作品，那得到的必然也是对方的尊重；第三是信任，相信同事可以以自己的能力做出正确的选择，写出正确的代码。如果上面三点也解决不了，那么掏出手机和同事打一局『王者荣耀』，再大的问题也不会是问题；第四是不要低估了游戏的社交能力 😎。
学习。当融入到新的团队之中，接下来的事情就是要开始干活，但是干活的过程中遇到问题了怎么办、该问谁、怎么问？这又是一只拦路虎。但这个问题显然比较简单，如果你身处一个氛围很好的团队的话，找一个合适时间，去问任何一个人，他们可能给不了正确的答案，但是他们将会引导你自己去找到答案，但是在这个过程中不能失去耐心，从他们身上学到的应该是解决问题的方式，而不是直截了当地问『请给我答案』。当然，除过工作之外，尽量给自己留出时间来学习一些新的技术或其它技能，对于日后胜任其他工作做下积累。

2018 的小目标

继续重构博客，做成一个全栈的小项目
写文章，立 flag ，50 篇文章
坚持读书
提升自己的专注力和自控力
提升阅读英文文档的能力

每当实现一个目标，其实就离梦想近了一步。希望某一年，『梦想』两个字能成为目标一样可以追逐！

关于自己

想对自己说的话只有一句：最大的稳定就是进步，不破则不立！感谢身边陪伴我走过这一年的人们。

以上，告别 2017！

心怀梦想，砥砺前行，你好 2018！

重构博客——开发环境搭建

Mon, 02 Jan 2017 00:00:00 GMT

其实 JavaScript 全栈开发已经兴起好长时间了，现在终于有机会来尝试一下，只用一门语言就可以开发前后端（JavaScript => JSON => JavaScript），并实现前后端分离（后端只提供接口，前后端用 JSON 进行交互）。本文也将分为前端和后端两个模块来介绍开发环境的搭建。

源码地址 GitHub

项目结构

server —— 后端
- server/router —— 后端路由
- server/models —— 数据库相关
- server/config —— 项目配置
- app.js —— 后端入口文件
client —— 前端
- 使用 vue-cli 生成前端目录
```
npm i -g vue-cli
vue init webpack
```
- client/src/main.js —— 前端入口文件
- client/src/router.js —— 前端路由

后端

目前 Express 可以说是最流行的 Nodejs 服务端框架了，而且国内也有基于 Express 框架的网站，总体看来，是一个非常成熟的可用的框架。后端用到的框架有：

express —— Web 服务框架
body-parser —— request body 解析中间件
cors —— 支持跨域
morgan —— HTTP 请求记录中间件
mongoose —— 数据库操作

前端

前端主要用 Vuejs + Element-UI 来实现。目前暂时用 Element-UI ，可能会切换到其他的 UI 组件库。前端用到的框架有（排除 vue-cli 自动添加的）：

vue-router —— 为 vuejs 添加路由支持
element-ui —— 饿了么开发的 vue2.0 前端组件库
axios —— 基于 Promise 的 HTTP 客户端
- 如果你熟悉 vue-resource ，可以这样在 main.js 中添加如下代码：
```
import Vue from 'vue'
import axios from 'axios'
Vue.property.$http = axios
```

数据库

数据库的安装可以参考 MongoDB 文档。

数据库采用了轻量级的 MongoDB 来开发，不同于传统的 SQL 数据库，它属于 NOSQL 数据库，我们可以来对比一下两种数据库：

SQL Database	MongoDB	解释
database	database	数据库
table	collection	数据表/集合
row	document	数据行记录/文档
column	field	数据字段/域
index	index	索引
primary key	primary key(_id)	主键，MongoDB 自动设置 _id 为主键

在开发过程中会使用 mongoose 来操作数据库，它提供了良好的数据库操作 API 。

这一篇就当作是重构博客的开端。下一篇就来聊聊数据库的实现。

道阻且长：我的 2016

Sat, 31 Dec 2016 00:00:00 GMT

离别

3 月寒假结束后回到学校，开始写毕业论文，面对的只有去年写的一份开题报告，突然感觉时间不够用，但幸好在 3 个月里完成了这篇现在我看来漏洞百出的论文。论文题目是《P2P 网络借贷现状、问题与对策分析——以人人贷为例》，写了大概一万四千字，重复率貌似在 10% 左右。

2016 年 6 月离开了庇护我四年的象牙塔。还记得离开的那天，宿舍里乱糟糟的，走了的，没走的，正在收拾行李的，以及匆匆忙忙去拿学位证封皮的。晚上，离开的那一刻我们没有说再见。也许离别真的是为了下一次相聚。

感谢相伴四年的小伙伴们。

工作

6 月 15 号，经过十几个小时的颠簸，从老家来到首都，由于之前来过几次，这次没有迷路。7 月 11 号在公司入职。至今参与了三次项目开发：

7 月 15 号第一次去项目组，虽然是简单的前端页面，但面对复杂的业务场景和浏览器兼容，着实是一个挑战。也是从这个项目开始理解前后端交互。对 IE8 的兼容性我也总结成了一篇文章，放在了博客上： IE 8 兼容性总结。
第二次去项目组是配合开发 Hybird 混合应用，顺带兼职非专业测试——挑 bug 。上线那天也体会了一次加班到深夜（12 点）的感觉。
11 月开启了第三次项目的旅程，目前正在紧锣密鼓的开发中。我的主要任务是负责前端页面的代码编写，不同的是这次的业务场景比上次的更复杂。同时在这次项目中也在学习后端的一些东西，第一次对 MVC 有这么明确的认识。

非常感谢那些在工作中理解并帮助我的人。

开源

在工作之外，我也喜欢折腾各种新的事物，接受了开源思想的洗脑，2016 年了解并学习过的技术：

Vuejs
React
Nodejs & Express
微信小程序

在学习 Nodejs 的过程中，建立了自己的基于 GitHub Pages 的博客网站，截至今天写了 18 篇博文。但是这不是长久之计，目前准备基于 Nodejs & MongoDB & Express & Vuejs 重构博客。

在下半年一度引起莫大关注的非微信小程序莫属了，出于好奇，便了解了一下小程序，语法类似于 Vuejs ，上手简单，但从头做一个小程序也并非易事。基于 VSCode 编辑器，我开发了两个语法提示插件：

梦想

偶然看见这么一段话：真正的梦想，让你不盲目从众，不因为其他人在说什么、做什么，而影响你自己的判断力。你要做什么，成为怎样的人，起决定性作用的，终究是自己。

关于理想我从来没选择放弃，即使在灰头土脸的日子里。

小目标

重构博客，技术栈：Nodejs & MongoDB & Express & Veujs
学习一门后端语言——Java
继续深入学习 Vuejs & React
坚持读书：书单
- Node 与 Express 开发
- 单页 Web 应用——JavaScript 从前端到后端
- 软技能——代码之外的生存指南
- HTTP 权威指南
- 进化——从孤胆极客到高效团队
- 数据之巅——大数据革命、历史、现实与未来
将自己的学习与成长整理成电子书——GitBook

谨以此文，献给逝去的 2016 和即将到来的 2017 。

你好，再见！

VSCode 插件开发——七牛图床工具

Wed, 26 Oct 2016 00:00:00 GMT

开发准备

阅读 vscode 的文档，但是目前只有英文文档，看起来比较吃力。文档地址
阅读七牛云 SDK 文档，这个比较简单。文档地址
安装两个工具：yo / generator-code
```
npm install -g yo generator-code
```
打开 VSCode

目录结构

package.json 插件配置文件

extension.js 插件入口文件

package.json

其实开发 vscode 插件时，这个 package.json 是非常重要的，它不仅包含了常规的 npm 配置，也包含着 vscode 的诸多配置。

// 插件入口文件
"main": "./extension",

// 插件何时会被激活，在此设置为当打开一个 markdown 文件时激活插件
"activationEvents": [
  "onLanguage:markdown"
],

"contributes": {
  // 快捷键绑定，在此绑定为 `Ctrl + Q N` ，要注意并不是 `Ctrl + Q + N`
  "keybindings": [
    {
      "command": "extension.qiniu",
      "key": "ctrl+q n",
      "mac": "cmd+q n",
      "linux": "ctrl+q n",
      "when": "editorTextFocus && editorLangId == 'markdown'"
    }
  ],
  //包含你的插件的配置选项，可以在 `file > preferences > User Settings` 下更改
  "configuration": {
    "type": "object",
    "title": "qiniu cloud configuration",
    "properties": {
      "qiniu.enable": {
        "type": "boolean",
        "default": false,
        "description": "是否开启七牛上传插件"
      },
      "qiniu.AccessKey": {
        "type": "string",
        "default": "",
        "description": "七牛云 > 个人面板 > 密钥管理 > AK"
      },
      "qiniu.SecretKey": {
        "type": "string",
        "default": "",
        "description": "七牛云 > 个人面板 > 密钥管理 > SK"
      },
      "qiniu.bucket": {
        "type": "string",
        "default": "",
        "description": "任意一个空间名称"
      },
      "qiniu.remotePath": {
        "type": "string",
        "default": "",
        "description": ""
      },
      "qiniu.domin": {
        "type": "string",
        "default": "",
        "description": "与空间名称对应的空间域名"
      }
    }
  }
}

extension.js

由于图床插件比较简单，所以我把所有的代码都写在主入口文件 extension.js 中

首先要在项目中安装七牛 SDK

npm install --save qiniu

导入关键模块，vscode & qiniu ，vscode 中包含了我们所需的所有的接口，而 qiniu 模块则负责主要的上传工作

let vscode = require('vscode')
let qiniu = require('qiniu')

注册一个调用插件的方法，当然这个方法要与 package.json 里的相对应

package.json

"command": "extension.qiniu"

extension.js

let disposable = vscode.commands.registerCommand(
  'extension.qiniu',
  function () {}
)

获取用户的配置

const config = vscode.workspace.getConfiguration('qiniu')

开发过程中用到的其他的接口

// 在顶部显示一个输入框，获取文件路径
vscode.window.showInputBox({
  placeHolder:
    '请输入上传到七牛云空间后的文件名，可以包含前缀，例如：blog/name.png',
})

// 在顶部显示上传成功的信息
vscode.window.showInformationMessage('上传成功！')

// 获取用户当前光标位置，并在光标后插入返回的 markdown 图片链接
let editor = vscode.window.activeTextEditor
editor.edit((textEditorEdit) => {
  textEditorEdit.insert(editor.selection.active, image)
})

具体上传图片的业务流程代码可以参考七牛云的官方文档，文档地址

存在的问题

在输入本地图片路径是，没有验证图片路径的有效与否
弹出的第二个输入框是用于输入上传至七牛空间之后的文件名称，这个由于暂时没有设置默认名称，因此必须填写，格式如下，可省略文件类型：
```
前缀/文件名称
prefix/file-name
blog/test
```
目前功能尚不完整，有待继续增强。

如何安装使用

安装

在 vscode 中，Ctrl + Shift + P ，然后 ext install qiniu-fig-bed

使用

打开 markdown 文件，然后 Ctrl + Q N ，要注意不是 Ctrl + Q + N ，在状态栏会有提示

Github

qiniu-fig-bed

更新

2016.11.14 在上传代码中引入 node 的 fs 模块来获取文件类型，因此上传文件的时候可直接省略文件类型名称

微信小程序——知乎日报

Wed, 28 Sep 2016 00:00:00 GMT

准备

创建项目

使用开发者工具就可以创建一个小程序，当然也可以进行代码的编辑，我还是选择了使用 VSCode 来进行开发。要注意的是 AppID 只有内测的开发者才有，但是它也提供了无 AppID 开发环境，只是 API 有所限制罢了。微信的这个开发者工具其实还是比较封闭的，暂时没有同步刷新等功能。为了方便在 VSCode 中开发，可以配置一下：

"files.associations": {
	"*.wxml": "html",
	"*.wxss": "css"
}

完整的开发者工具界面

项目结构

注意点

app.json 是小程序的全局配置项，增添 / 删除页面时必须在 pages 中增添 / 删除页面路径，否则会报错。
一个框架页面由四个文件组成： pagename.js / pagename.wxss / pagename.wxml / pagename.json ，这四个文件必须要有相同的文件名和文件路径。

小程序版知乎日报

Github 地址

TODO

内容暂时无法显示
首页增加下拉显示前一天的资讯

最后

感谢 izzyleung 整理的知乎日报 API 接口

『译』在你的 WordPress 项目中使用 Let's Encrypt SSL

Thu, 11 Aug 2016 00:00:00 GMT

原文链接：Using Let’s Encrypt SSL With Your WordPress Project

什么是 Let’s Encrypt？

多年来购买、更新、安装以及管理 SSL 证书，其昂贵的价格和复杂性让我不知所措。现在， Let’s Encrypt 使得它相当简单而且免费。

Let’s Encrypt 是由加州公益组织称为互联网安全研究小组带来的新兴的、自由的、自动化的、开放的证书颁发机构，它也有非营利性的成分。

它的目标是让 HTTPS 成为浏览器的默认协议，从而更好地确网络保隐私和安全。 Mozilla 和 Electronic Frontier Foundation（电子前沿基金会）是它的两个主要赞助商：

Let’s Encrypt 在十二月进入公测, 所以现在我能很容易地指导你去探索它的服务。

在这篇教程中, 我将带你在我的几个网站中安装 Let’s Encrypt , 包括我的 WordPress 咨询网站, http://lookahead.io 很快就会成为 https://lookahead.io 。

在我们开始之前，请记住，我会参与下面的讨论。如果你有问题或者建议，请在下面发表评论或者 contact me on Twitter @reifman.

Let’s Encrypt 功能总结

Let’s Encrypt 运行在使用 Python 的 Apache 服务器上，以此来实现自动注册和更新证书，简化了网站激活 HTTPS 的过程，包括 WordPress 。

这里有 Let’s Encrypt 的主要优势:

免费： 任何一个域名都可以无成本地注册一个受信任的证书。
自动： 一个 Apache Web 服务器可以轻松获得证书, 安全配置, 并且自动管理更新。
安全： 无论是作为一个证书颁发机构，还是帮助维护服务器上的网站安全，Let’s Encrypt 将推动 TLS 安全最佳实践。
透明： 证书的所有交易记录公开，并且可供查阅。
开放： 自动发布和更新协议将作为一个开放的标准。
协作： Let’s Encrypt 是社区的努力，造福每一个人。

使用 Let’s Encrypt 安装 SSL

让我们开始，通过更新我的服务器，Apache Ubuntu。

sudo apt-get update

如果你没有在你的服务器上安装 Git，用 Git 来安装 Let’s Encrypt 是最好的：

sudo apt-get install git

一旦安装完，把 Let’s Encrypt software 克隆到 Apache 第三方应用程序的 opt 子目录下：

sudo git clone https://github.com/letsencrypt/letsencrypt /opt/letsencrypt

首先，我将在 Fever 新闻阅读器上尝试安装 Let’s Encrypt，而不是 WordPress。我把它托管在 http://fever.lookahead.io ：

cd /opt/letsencrypt
./letsencrypt-auto --apache -d fever.lookahead.io

设置向导

开始时，会要求填写电子邮件：

然后显示服务条款：

Let’s Encrypt 给你提供了将 HTTPS 作为第二选项，或者直接使用 HTTPS 将接管所有流量的连个选项：

你在几分钟内搞定：

你也会看到一些证书到期和更新的信息：

IMPORTANT NOTES:
 - Congratulations! Your certificate and chain have been saved at
   /etc/letsencrypt/live/lookahead.io/fullchain.pem. Your cert will
   expire on 2016-05-03\. To obtain a new version of the certificate in
   the future, simply run Let's Encrypt again.
 - Your account credentials have been saved in your Let's Encrypt
   configuration directory at /etc/letsencrypt. You should make a
   secure backup of this folder now. This configuration directory will
   also contain certificates and private keys obtained by Let's
   Encrypt so making regular backups of this folder is ideal.
 - If you like Let's Encrypt, please consider supporting our work by:

   Donating to ISRG / Let's Encrypt:   https://letsencrypt.org/donate
   Donating to EFF:                    https://eff.org/donate-le

在 WordPress 上安装

在我的 WordPress 咨询网站安装 Let’s Encrypt SSL，同样非常简单。只有那么一丢丢地不同，我想让 Let’s Encrypt 能更好地支持 www 子域名：

cd /opt/letsencrypt
./letsencrypt-auto --apache -d lookahead.io -d www.lookahead.io

你现在可以去访问了，是 HTTP 或者 HTTPS，将会在这里终结，https://lookahead.io ：

SSL 报告

你可以去类似 Qualys SSL Labs 的网站来获得你的网站的 SSL 报告。

https://www.ssllabs.com/ssltest/analyze.html?d=fever.lookahead.io

这儿是认证页面：

证书自动更新

自动更新也相当简单。首先，我们获取更新脚本，并赋予它执行权限：

sudo curl -L -o /usr/local/sbin/le-renew http://do.co/le-renew
sudo chmod +x /usr/local/sbin/le-renew

让后为每个域名运行这个脚本：

sudo le-renew lookahead.io
Checking expiration date for fever.lookahead.io...
The certificate is up to date, no need for renewal (89 days left).

你可以设置一个 cron job 来有规律地运行：

crontab -e

添加这行：

30 2 * * 1 /usr/local/sbin/le-renew lookahead.io >> /var/log/le-renew.log

故障排除

我想分享一下我遇到的问题，当我为 Community Starter open-source project （都是根域名和 www）安装 SSL 时，Let’s Encrypted 给出这个错误：

We were unable to find a vhost with a ServerName or Address of
    │ www.communitystarter.org.
    │ Which virtual host would you like to choose?

我在配置文件里设置了一个通配符别名：

<VirtualHost *:80>
        ServerName communitystarter.org
        ServerAlias *.communitystarter.org
        DocumentRoot /var/www/communitystarter/

这个变化修复了它，为 www 增加一个别名：

<VirtualHost *:80>
        ServerName communitystarter.org
        ServerAlias www.communitystarter.org
        ServerAlias *.communitystarter.org
        DocumentRoot /var/www/communitystarter/

然后，主页嵌入 Vimeo 视频失败：

我不得不使 iframe 里的 Vimeo 播放器使用 HTTPS：

<!-- ***************** - START Video - ***************** -->
<div class="video-wrap video_left">
<div class="video-main">
<div class="video-frame">
<iframe src="https://player.vimeo.com/video/37639283" title="introduction to newscloud's community starter" scrolling="no" width="572" height="312" frameborder="0" marginheight="0"></iframe>
</div><!-- end video-frame -->
</div><!-- end video-main -->
<div class="video-sub">
<h2>NewsCloud's Community Starter</h2>
 <p>Community Starter is a simple, affordable platform to launch social media communities and extend existing websites. It provides a suite of Facebook-connected interactive features that can help you host a vibrant online community for your neighborhood, topic, community group, nonprofit, membership association or city.</p>
<a href="/how-community-foundations-can-build-engaged-local-communities-with-newscloud.html" class="ka_button small_button small_tealgrey"><span>Start your community →</span></a><br class="clear" />
</div><!-- end video-sub -->
</div><!-- end video-wrap -->
<!-- ***************** - END Video - ***************** -->

问题解决：

在结束前

我对社区的目标印象非常深刻，Let’s Encrypt 提供了质量和便利性。无处不在的网络出版商将从简单免费的 SSL 中获益，感谢 EFF、Mozilla 以及 Let’s Encrypt！

您可以捐赠 Let’s Encrypt 或者 EFF 来支持这项工作：

你可以了解更多关于他们软件的技术细节。Let’s Encrypt 也有一个良好的社区论坛:

下一步？

Let’s Encrypt 正在积极努力地完成其首次公开发行：

我们还有很多工作要做在我们完全丢弃测试标签之前，特别是在客户端的体验上。自动化是我们策略的基础。我们需要确保广泛的客户端平台平稳可靠运行。

要跟随最新的代码，只要偶尔跟新你的 git 树：

cd /opt/letsencrypt
sudo git pull

我私人的 WordPress 目前运行的是 Varnish 3.x。这与 Let’s Encrypt 并不能立即使用，我可能会花一些时间跟踪解决。

与此同时,如果你正在寻找其他的实用工具来帮助你建立不断增长的 WordPress 代码集或者变得更精通 WordPress，别忘了看 we have available in Envato Market.

如果你有问题，请请发表在下面。或者你可以 contact me on Twitter @reifman。请访问 my Envato Tuts+ instructor page 来查看我写的其他教程。例如 Cloning WordPress in Linux (in 90 seconds).

译者说

由于水平受限，文中有不恰当之处，还请读者谅解并在评论中指出，以便改正！

IE8 兼容性总结

Mon, 08 Aug 2016 00:00:00 GMT

rgba 颜色格式

IE8 不支持 rgba(0, 0, 0, .5) 这种颜色格式。
解决方案：可以利用一张半透明的 png 图片来兼容 IE8。

flexbox

根据 caniuse 给出的数据，IE8 是不支持 flex 布局属性的，甚至 IE11 只支持一部分。
解决方案：利用 display: inline-block / display: table / display: inline 来实现部分兼容。
Almost complete guide to flexbox (without flexbox)，介绍了一些不用 felx 属性来完成 flexbox 布局的技术，很有参考价值，推荐。
Flexbox Patterns，一些利用 flex 实现常用的布局的例子，推荐参考。

HTML5

非常遗憾，HTML5 新增的标签在 IE8 里是不受支持滴，例如：section / main / header / footer 等。
解决方案：html5shiv，这个脚本可以实现兼容 IE8 。

media query

非常非常遗憾，IE8 也不支持 media query 。
解决方案：Respond.js

CSS3 新特性

IE8 支持的 CSS3 新特性仅有 20% ，具体可以查看 caniuse 。
解决方案：css3pie，目前 css3pie 可以支持的功能有：
- border-radius
- box-shadow
- border-image
- multiple background images
- linear-gradient as background image

以上

以上就是我在实践项目中遇到的 IE8 兼容性问题以及我自己的解决方案。如果你有更好的解决方案或者 IE8 兼容性问题，欢迎讨论：https://www.gitbook.com/book/coderfe/notes/discussions

CSS 渐变的角度问题

Thu, 28 Jul 2016 00:00:00 GMT

效果展示

代码

.corner {
  width: 300px;
  height: 100px;
  margin: 50px auto;
  background: #58a;
  background: linear-gradient(45deg, transparent 15px, #58a 0) bottom left, linear-gradient(
        135deg,
        transparent 15px,
        #58a 0
      ) top left, linear-gradient(-45deg, transparent 15px, #58a 0) bottom right,
    linear-gradient(-135deg, transparent 15px, #58a 0) top right;
  background-repeat: no-repeat;
  background-size: 50% 50%;
}

角度问题

平常我们理解的角度 X 轴的正轴是 0°，顺时针旋转为负角，逆时针旋转为正角。

CSS 中的角度 Y 轴的正轴是 0°，顺时针旋转为正角，逆时针旋转为负角，箭头所指的方向即使渐变的方向，在 CSS 中默认的渐变角度是自上而下的。

如果按照平常我们理解角的思维来做这个切角的效果的话，肯定免不了折腾，甚至做不出来这个效果。其实对比一下两幅图也就明白了 CSS 渐变角度，那么这个效果就可以自然而然地做出来了。

浏览器兼容

兼容主流浏览器：Edge + Chrome + Firefox + IE10+

代码的可维护性

在作者看来上面实现的代码是不够 DRY 的，因此要使代码更加容易维护和重用，那对于原生 CSS 来说就有点强人所难了，所以预处理器登场了，例如 SCSS ，可以将上面的代码写成 Mixin ，以便维护和重用，如下：

@mixin corner-shape($bg, $tr: 0) {
  background: $bg;
  background: linear-gradient(45deg, transparent $tr, $bg 0) bottom left, linear-gradient(
        135deg,
        transparent $tr,
        $bg 0
      ) top left, linear-gradient(-45deg, transparent $tr, $bg 0) bottom right, linear-gradient(
        -135deg,
        transparent $tr,
        $bg 0
      ) top right;
  background-repeat: no-repeat;
  background-size: 50% 50%;
}

.corner {
  width: 300px;
  height: 100px;
  margin: 0 auto;
  @include corner-shape(#58a, 15px);
}

经过编译之后就可以生成和文章开头一模一样的代码了。

CSS 中有趣的 filter 属性

Mon, 25 Jul 2016 00:00:00 GMT

语法

el {
  filter: none | filter-function | filter-function;
}

效果展示

See the Pen oLdyEV by Simon (@coderfee) on CodePen.

注释

上面的效果依次是：

第一张为原图
亮度 brightness(60%)
对比度 constrast(150%)
灰度 grayscale(100%)
饱和度 saturation(180%)
棕褐色 sepia(100%)
色相旋转 hue-rotate(90deg)
色相旋转 hue-rotate(180deg)
色相旋转 hue-rotate(270deg)
反色 invert(100%)
模糊 blur(1px)
透明度 opacity(65%)
阴影 drop-shadow(5px 5px 10px #666)

这些“滤镜”可以叠加使用。有时可能需要用一张图片做成不同效果，这时 filter 属性就可以派上用场，省去了 P 图的时间。

详细说明

filter	默认值	说明
blur	0	不接受百分比，数值越大越模糊
brightness	1	数值超过 100%，图像更亮
contrast	1	数值超过 100%，对比度更低
drop-shadow
grayscale	0	值为 100%时为灰度图像，0% - 100%
hue-rotate	0deg	无最大值
invert	0	100%完全反转，0% - 100%
opacity	1	0%完全透明，0% - 100%
saturate	1	0%完全不饱和，超过 100%饱和度
sepia	0	100%为完全深褐色，0% - 100%

参考链接

CSS Filter Effects: Blur, Grayscale, Brightness and More in CSS!

更新日志

2016-08-08 增加详细说明

2016-07-27 更改错别字

Gulp and Browser-sync

Wed, 20 Jul 2016 00:00:00 GMT

安装

npm install -g browser-sync gulp

启动服务

可以和 gulp 搭配使用，也可以单独使用，通常我都是搭配 gulp 使用的，但在这里仅作演示。通过以下命令可以启动一个小型的服务器，并监听文件变化。

# *号代表要监听的文件，可以使任何文件
browser-sync start --server --file "*"

此时，会在默认浏览器中打开一个窗口并自动访问 http://localhost:3000 ，同时呢，命令行会显示一下内容：

[BS] Access URLs:
 --------------------------------------
       Local: http://localhost:3000
    External: http://192.168.1.103:3000
 --------------------------------------
          UI: http://localhost:3001
 UI External: http://192.168.1.103:3001
 --------------------------------------
[BS] Serving files from: ./

用你的移动设备打开 http://192.168.1.103:3000 ，你会看见网页会呈现在你面前，而且设备间可以同步进行滚动等操作，调试响应式网站简直不要太好用 😎

http://localhost:3001 这个地址是一个可视化操作的界面，可以在这个网页中配置 browser-sync 的相关服务，很神奇，有木有？

gulp & browser-sync

npm install gulp browser-sync --save-dev

gulpfile.js

var gulp = require('gulp'),
  browserSync = require('browser-sync').create()

gulp.task('server', function () {
  browserSync.init({
    server: {
      baseDir: './',
    },
  })
})

最后在命令行中运行 gulp server

Others

其实利用 gulp 可以做的事情很多很多，编译 SCSS 、压缩代码/图片等等。前端自动化的任务交给它就可以了。

优化博客性能

Sat, 07 May 2016 00:00:00 GMT

HTML / CSS / JS / Photos 都是未压缩状态
部分静态资源没有设置缓存
CSS 出现阻塞，即首页出现空白的情况

暂时只解决了第一个问题：

修改一下 Travis CI 的部署脚本 .travis.yml 即可实现自动压缩（利用 gulpjs）：

  install:
  - npm install hexo-cli gulp -g
  - npm install

  script:
  - hexo clean
  - hexo g
  - gulp
  - hexo d

查看 gulpfile.js 配置

优化之后，加载速度明显提升了。剩下的几个问题还得研究一下

利用 TravisCI 自动部署 Hexo blog

Mon, 25 Apr 2016 00:00:00 GMT

前几天的一篇文章介绍了搭建自己的 Hexo 博客，可是，今天遇到了一个问题：我要在另一台电脑上写博客文章，但是博客的源代码却不在身边，而且我也没有备份。于是就有一下几个解决方案：

拷贝到 U 盘随身携带。但是，相信我，总有一天你会忘记的
备份在云端，比如 DropBox 或者其他云盘。缺点：太麻烦，每次更新都要手动上传
放在 Github 上。恩，这似乎是个不错的办法。但是这个方法每次既要更新博客，还要 push 到 Github 上

Travis CI 解决方案

约定

这些步骤都是 Linux 中完成的，其他平台的步骤大同小异
以我的博客为例，blog 是源码项目(目录)，coderfe.github.io 是部署后的博客项目

准备工作

安装 Travis Ci 命令行工具
```
$ gem install travis
```
生成 SSH key,并且把 id_rsa.pub 添加为 coderfe.github.io 项目的 Deploy key，注意要勾选Allow write access,因为 Travis CI 要对这个仓库拥有写入权限
```
$ ssh-keygen -t rsa -C "your_email@example.com"
# 生成的ssh key一般在`~/home/.ssh`目录下
```
在本地的 blog 项目中新建.travis文件夹，最后它的结构如下：
```
.travis
|__id_rsa.enc
|__ssh_config
```

正式开始

把整个 Hexo 项目 push 到 Github 上，这个就是博客的源代码
前往Travis CI 官网用 GitHub 账号的登陆，并把自己的项目同步到 Travis CI，然后把coderfe/blog的开关打开

安装 Travis CI 命令行并用 GitHub 账号登录

# 安装
$ gem install travis
# 登录
$ travis login --auto

加密id_rsa私钥（不能暴露在公开仓库中）
```
# 把id_rsa复制到当前目录.travis/
$ cp ~/.ssh/.id_rsa .
# 加密之前必须新建.travis.yml文件，否则会报错
$ touch .travis.yml
# 加密
$ travis encrypt-file ssh_key --add
# 删除id_rsa
$ rm id_rsa
```
以上代码执行完成功后在.travis.yml文件中有一串字母和数字，这是用来解密的，每个人都不一样，先不要动，而且会生成了id_rsa.enc文件，把.travis.yml移动到blog根目录

再在.travis下新建ssh_config文件，内容如下：

Host github.com
  User git
  StrictHostKeyChecking no
  IdentityFile ~/.ssh/id_rsa
  IdentitiesOnly yes

配置.travis.yml文件，我的配置如下：

branches:
  only:
    - master

language: node_js

sudo: false

node_js:
  - 'stable'

before_install:
  - openssl aes-256-cbc -K $encrypted_d2cb722f4635_key -iv $encrypted_d2cb722f4635_iv
    -in .travis/id_rsa.enc -out ~/.ssh/id_rsa -d
  - chmod 600 ~/.ssh/id_rsa
  - eval $(ssh-agent)
  - ssh-add ~/.ssh/id_rsa
  - cp .travis/ssh_config ~/.ssh/config
  - git config --global user.name "xxx"
  - git config --global user.email xxx@xxx.com
  - git clone -b master git@github.com:coderfe/coderfe.github.io.git .deploy_git

install:
  - npm install hexo-cli -g
  - npm install

script:
  - hexo clean
  - hexo g
  - hexo d

需要注意的问题

Deploy key权限问题，记得勾选Allow write access
加密私钥id_rsa，私钥不能暴露在公开仓库，否则其他人也会拥有你仓库的读写权限

结语

利用 Travis CI 持续集成服务，再也不必去手动备份了，只需要一次 push 就可实现博客的更新和备份，大大提高了效率啊，有木有！这种自动化的工具真的是多多益善。当然像 Nodejs 这样的项目都在用这项服务，说明自动部署 Hexo Blog 只是其功能中很小的一部分，继续学习！

参考资料

用 Travis CI 自動部署網站到 GitHub Travis CI 官方文档

Stylish —— 优雅地刷网页

Sat, 23 Apr 2016 00:00:00 GMT

准备工作

Chrome 浏览器
安装Styleish 插件
一丢丢CSS基础

QQ 空间优化

打开你的QQ 空间，点击右上角那个 S 字母的图标，选择编写样式给这个 URL
第一步完成会打开一个写代码的窗口，复制我的样式到那个框框里，输入名称，保存
优雅地刷好友动态

微博的优化

有现成的微博样式供你选择weibo_v6和weibo_v6_patch
打开微博，点击按钮，编写样式
复制我的样式，粘贴
优雅的刷微博

其他

如果你有兴趣可以再添加其他样式，并且 Stylish 可以实现的远不止这些，等待你的发掘！其次，微博的样式是在前两个样式的基础上加了一些背景图片和动画效果，感谢原作者的创作！

一些我自己常用的优质Apps

Thu, 21 Apr 2016 00:00:00 GMT

Windows 10

浏览器----Google Chrome，强大而优雅，安装插件之后更强大更优雅
办公软件----Office 2016，全家桶（将来一定买正版支持）别提 Office 2007，太落后
笔记应用----OneNote，跨平台，免费，同步也不慢，随时随地记笔记
码字专用----Typora，界面简洁，功能丰富，完全免费，支持 Markdown 语法
科学上网----ShadowSocks，百度一下你就知道，谷歌一下你就知道太多了
音乐播放器----网易云音乐，忒好，用户体验很棒，跨平台，But 部分歌曲有版权限制
云存储----DropBox or Onedrive，同步快，但是 DropBox 需翻墙
思维导图----XMind，可以借助 DropBox 同步
解压缩----7-Zip，速度快，多种格式，免费
Tickeys----模拟机械键盘的声音，让你沉浸在打字的乐趣当中
Rolan----桌面文件夹分类归组
RocketDock----Dock 应用程序栏，类似 Mac 电脑上的 Dock
Everything----搜索本地文件神器
“你好，小娜”，讲个笑话

Android(MEIZU MX5)

有的应用需要在Google Play下载：

科学上网----ShadowSocks 影梭，上手简单，稳定
浏览器----Opera，省流量，体积小
微博客户端----BlackLight，墙外下载，简约不简单
RSS----Quote，干净舒适，体积小
资料管理----RefMe，写论文的好帮手
云存储----DropBox / Onedrive
便签----锤子便签，情怀，好看，体验顺滑
音乐----网易云音乐
写东西----MarkdownX，简洁，可以和 DropBox 同步
长知识----知乎、Quora、维基百科
看新闻----SmartNews，英语新闻客户端
待办事项----Accomplish
连接你的 Apps----IF by IFTTT，功能有待进一步发掘
桌面启动器----Nova Launcher，体验 Google 原生桌面风格

iOS(iPad mini 2)

科学上网----Surge
浏览器----Safari
微博客户端----VVebo
写点东西----Ulysses / Day One
思维导图----MindNode / iThoughts
新闻----SmartNews
图片----Typorama
RSS----Feedly
文件管理----Documents
云存储----DropBox / Onedrive
写大纲，理思路----OmniOutliner，有点小贵:D

Linux(Ubuntu)

Lantern

前端性能优化

Sat, 09 Apr 2016 00:00:00 GMT

减少 HTTP 请求（打开网页的时候，我们看到的文字，图片，多媒体每个内容都是从服务器获取的，每一个内容的获取，就是一个 HTTP 请求）

图片css sprite
图片地图,在一张图片上关联多个 URL,URL 最终指向取决于用户点击的位置 script合并、css合并
内联图片,通过使用data:URL模式可以使页面包含图片但无需额外的 HTTP 请求

使用`CDN`内容分发网络（`Content Delivery Network`其目的在于让用户可就近取得所需内容，解决网络拥挤的状况，提高用户的访问速度）

压缩`javascript`和`css`(gzip)

去除空格、空白符、注释符
简写方法名、参数名,精简javascript脚本
css重用类,删除空的声明

`css`放在顶部`head`中(css at the top)

避免页面出现空白或闪烁

`script`放在页面底部(script at the bottom)

先呈现出内容，避免浏览器因脚本出错而停止加载内容

避免在`css`中使用表达式，影响浏览器的性能

将`javascript`和`css`放在外部文件

单独提取
- 提高复用性
- 减小页面体积
- 提高js和css的可维护性
- 可单独缓存
写在页面内（样式只应用于一个页面，不被经常访问，脚本和样式很少，不多于 20）
- 减少页面请求
- 提升页面渲染速度

减少 DNS 查询（DNS 查找可以缓存起来以提升性能）

IE 30m
Chrome 60s
Firefox 60s
缓存时间长：减少 DNS 重复查找，节省时间
缓存时间短：及时检测网站服务器的变化，保证访问的正确性

避免重定向（用户的请求被重新转向其他请求）

301：用户请求的页面被移动到其他位置，永久重定向，对搜索引擎更智能
302：用户请求的的页面被找到了，但不在原始地址，临时重定向
增加了服务器的往返次数

移除重复脚本

重复脚本会增加不必要的 HTTP 请求和执行 javascript 所浪费的时间

配置实体标签（`Enity Tag`,Web 服务器和浏览器用于确认缓存组件有效的一种机制)

Ajax学习笔记

Fri, 08 Apr 2016 00:00:00 GMT

Step1—创建实例化对象

由于各浏览器间的差异，创建实例的方法也不同，下面的代码创建了一个跨浏览器的类实例。

var xhr
if (window.XMLHttpRequest) {
  xhr = new XMLHttpRequest() // sarifi/firefox/chrome/IE7+
} else {
  xhr = new ActiveXObject('Microsoft.HTTPXML') // IE5/6
}

如果不考虑 IE5/6，其实只需下面的代码：

var xhr = new XMLHttpRequest()

Step2—发送请求

open()方法

参数说明取值
method 请求类型，参数大写
POST, GET
URL 请求的URL地址 url
async
请求是否为异步模式，默认为true
true, false
send()方法

请求类型参数
POST string
GET null

参数	说明	取值
method	请求类型，参数大写	`POST`, `GET`
URL	请求的URL地址	`url`
async	请求是否为异步模式，默认为`true`	`true`, `false`

请求类型	参数
`POST`	`string`
`GET`	`null`

Step3—取得响应

检查请求状态，监听readyState和status的变化

xhr.onreadystatechange = function () {
  if (xhr.readystate === 4) {
    if (xhr.status === 200) {
      // Success do something
    } else {
      // Failed
    }
  }
}

readyState取值如下

readyState	说明
0	请求未初始化，open方法未调用
1	服务器连接已建立，open方法已调用
2	请求已接受，收到头信息
3	请求处理中，收到响应体
4	请求已完成，响应完成

status取值如下

status	说明
1XX	信息类，收到请求，表示正在处理
2XX	成功，表示用户请求被正确接收处理
3XX	重定向，表示请求没有成功
4XX	客户端错误
5XX	服务器错误

http 状态码详解

Step4—jQuery 实现 Ajax

jQuery 中提供了一个实现 Ajax 的方法即jQuery.ajax([settings])，参数如下：

参数	说明
type	请求类型`POST` `GET`
url	发送请求地址
data	一个对象，发送到服务器的数据
dataType	预期服务器返回的数据类型，一般采用`json`
success	请求成功后的回调函数
error	请求失败后的回调函数

示例：

$.ajax({
  type: "POST",
  url: <url>
  data: <data>,
  dataType: "josn",
  success: function() {
    // do something
  },
  error: function() {
    // do something
  }
});

搭建个人博客 Hexo & Github Pages

Thu, 07 Apr 2016 00:00:00 GMT

安装配置

安装

安装很简单，只需要几分钟的时间，前提是已经安装了 Nodejs

$ npm install -g hexo-cli
$ hexo -v

建立博客目录

$ hexo init <folder>
$ cd <folder>
$ npm install

上面的几行命令会把你指定的文件夹初始化为博客目录，目录如下：

<folder>
  _config.yml
  package.json
  scaffolds
  source
  	_drafts
  	_posts
  themes

配置

有关站点的配置都在 <folder>/_config.yml & <folder>/themes/_config.yml 文件中修改，具体参数参见官方文档

命令

hexo init <folder> 初始化
hexo new <title> 新建文章
hexo generate 生成静态文件
选项描述
-d, —deploy
文件生成后立即部署网站
-w, —watch
监视文件变动
hexo publish <title> 发表草稿
heox server 启动服务器
选项描述
-p, —port
重设端口
-s, —static
只使用静态文件
-l, —log
启动日记记录，使用覆盖记录格式
hexo deploy 部署网站
参数描述
-g, —generate
部署之前预先生成静态文件
hexo clean 清除缓存文件 db.json 和静态文件 public
hexo list 列出网站资料

选项	描述
`-d`, `—deploy`	文件生成后立即部署网站
`-w`, `—watch`	监视文件变动

选项	描述
`-p`, `—port`	重设端口
`-s`, `—static`	只使用静态文件
`-l`, `—log`	启动日记记录，使用覆盖记录格式

参数	描述
`-g`, `—generate`	部署之前预先生成静态文件

生成 RSS

安装 RSS 插件 hexo-generator-feed 插件

$ npm install hexo-generator-feed --save

编辑站点配置文件：

feed:
  type: atom
  path: atom.xml
  limit: 20

生成 sitemap.xml

安装插件 hexo-generator-sitemap

$ npm install hexo-generator-sitemap --save

编辑配置文件：

sitemap:
  path: sitemap.xml

通过 Git 方式部署

编辑站点配置文件，如果部署在 GitHub 上会自动检测 branch

deploy:
  type: git
  repo: <repo URL>
  branch:
  message:

绑定域名

首先得有个域名，申请域名的网站国外的有 GoDaddy 等，国内的万网等
在 /source 目录下新建 CNAME 文件，输入自己的域名 coderfe.cn
登陆DnsPod，添加域名解析，只需添加第一项和第四项就 OK

用到的免费服务

更新日志

2016-07-27 优化图片链接