Lawrence Li

Lawrence's Blog

https://lawrenceli.me/atom.xml (RSS订阅地址)

句子之外

这几年看发布会、英美剧和电影时，我偶尔会暂停画面，把一句话摘下来。一开始只是觉得写得好，后来才意识到，它们之所以能被我记住，并不只是因为表达漂亮，而是因为它们在某个时刻说中了我正在经历、正在怀疑，或者一直说不清楚的东西。 语言即世界。但语言不是世界本身，它决定了世界以什么方式被看见。很多经验在被说出来之前，只是一团模糊的感受；一旦被某个准确的句子命名，它就从背景里浮出来，变成可以辨认、可以反复审视的东西。 这些句子后来慢慢从剧情里脱落出来，变成了我理解现实的某种参照。它们改变世界观的方式并不剧烈，更像是给原本模糊的经验加了一层轮廓：原来技术进步已经被视为日常、亲密关系会这样消耗、金融系统在进行系统性排他... 下面只摘英文原文。中间穿插的部分并不是翻译。 <blockquote> I’m going to go rogue for a minute. You guys get it but sometimes people take technology for granted. And just for perspective, I’m mic’d -- and in fact I’m actually double mic’d in just the right location so you can hear me. Deirdre is out in the middle of a windy lake and the only microphone Deirdre has is the little tiny one on the Apple Watch. It’s a foot or two away from her mouth, she’s paddling, and the signal’s being sent over cellular, coming in, and that’s just darn close to magic. Who would have thought? </blockquote> 来源：<a href="https://singjupost.com/apple-ceo-tim-cook-iphone-x-september-2017-event-keynote-transcript/" rel="noopener" target="_blank">Jeff Williams，Apple 2017 秋季新品发布会</a> <blockquote> After thousands of years of compounding scientific discovery and technological progress, we have figured out how to melt sand, add some impurities, arrange it with astonishing precision at extraordinarily tiny scale into computer chips, run energy through it, and end up with systems capable of creating increasingly capable artificial intelligence. </blockquote> 来源：<a href="https://ia.samaltman.com/" rel="noopener" target="_blank">Sam Altman，《The Intelligence Age》</a> 这两段话讲了同一件事：技术一旦稳定地进入日常生活，就会迅速从最初的奇迹退化成熟悉到可以忽略的背景。我们习惯它、挑剔它，把它视为理所当然，甚至认为它本来就应该存在。 Jeff Williams 在 Apple 发布会上的那段临场感叹，真的很有意思：他短暂地打断了发布会惯常的产品叙事，把一个 demo 重新解构成了工程奇迹 —— 一位 Apple 员工在风大的湖面上划船，手腕上戴着一块小表，靠一个离嘴很远的麦克风，再通过蜂窝网络把声音实时传回会场。Sam Altman 说「人类把沙子熔化、掺入杂质、在极小尺度上精密排列、通上电，最终得到能够创造人工智能的系统」。 我们生活在大量被驯化的魔法之中，只是它们被包装成了产品、参数、套餐、更新日志和下一代卖点。技术进步最容易被消费主义叙事掩盖。真正值得惊讶的不是新品又多了一个功能，而是工程能力如何一点点把过去不可想象的事情变成默认选项。 <blockquote> He says my fund packages itself as some sort of crusader for market efficiency and societal good. I make no claims to that effect. I’m a money manager. My only operating software is the profit motive. That and my id. They’re probably indivisible now, bleeding into every aspect of my life, for good and bad, often very bad. However bad you want to tell the audience I am, let me tell them: I’m worse. So make your judgment call. </blockquote> 来源：<a href="https://www.rottentomatoes.com/tv/industry/s04/e06" rel="noopener" target="_blank">Eric Tao，《投行风云》S04E06《Dear Henry》</a> 投行风云里少有的精彩独白。这句话的背景其实很复杂，Eric Tao 当时的处境其实非常糟糕，但是还是愿意在电视直播辩论上面对自己的做空的公司的董事长放出这样的狠话。这句话狠的地方不在于一位金融从业者承认自己追求利润，而在于他拒绝把利润动机包装成像类似浑水公司那样更高尚的公共叙事。他没有辩解，也没有洗白，只是把金融世界里那层常见的道德外衣撕掉了。 一个系统最真实的样子，往往不在它宣称自己相信什么，而在它的激励机制最终奖励什么。 <blockquote> Let me explain something to you, in your long life, you have not yet had occasion to understand: Friendly relationships are dangerous. They lend themselves to ambiguities, misunderstandings and conflicts, and they always end badly. Formal relationships, on the other hand, are as clear as spring water. Their rules are carved in stone. There’s no risk of being misunderstood and they last forever. Now, you need to know: I do not appreciate friendly relationships but I’m a great admirer of formal ones. Where there are formal relationships there are rites and where there are rites the earthly order reigns. </blockquote> 来源：<a href="https://www.imdb.com/title/tt4897554/quotes/?item=qt3134076" rel="noopener" target="_blank">Lenny Belardo，《年轻的教宗》第一季第一集</a> 所谓友好的关系，常常因为边界模糊而制造误会；反而是正式关系，因为规则清楚、距离明确，能让彼此少一些猜测。这当然不是说人应该拒绝亲近，而是「熟」这件事本身并不天然可靠。熟悉有时会带来信任，有时也会带来僭越。很多关系一旦缺少形式，责任、边界和分寸就会变成只能靠默契维持的东西，而默契是很脆弱、可遇不可求的。 形式过去总显得繁琐、疏离和低效。后来才慢慢看出另一层价值：很多必要的形式其实是在替人节省情绪成本。它把不能说出口的边界，提前写进了规则里。 <blockquote> "Mortgage backed securities", "Sub-prime loans", "Tranches"... is pretty confusing, right? Doesn’t it make you feel bored... or stupid? Well... it’s supposed to. Wall Street loves to use confusing terms to make you think only they can do what they do, or even better, for you just to leave them the fuck alone. </blockquote> 来源：<a href="https://www.paramountpictures.com/movies/big-short" rel="noopener" target="_blank">《大空头》</a> 《大空头》里 Margot Robbie 洗澡时面对镜头打破第四面墙的解释，后来成了我经常主动探究各行各业专业术语的一个重要起点。术语当然有必要存在，因为复杂系统需要精确表达。然而，术语同样可以被用来刻意制造距离，制造权威，制造服从。 很多行业都有类似的语言机制。它先让外行感到困惑，再让外行因为困惑而自我怀疑，最后让外行把判断权主动交出去。金融只是其中最典型、也最昂贵的一种。 从那以后，「听不懂」这件事少了一点羞耻感，多了一些好奇心。听不懂并不总是因为自己笨，也可能是因为对方没有动机/义务让你听懂。面对任何复杂叙事，最重要的问题不是先承认自己无知，而是追问：这个复杂性是真的来自事实本身，还是来自某种刻意维护的信息不对称？ Pretty much of it... 以后再看到类似的句子，应该还会继续摘下来。 它们像一些很小的钉子，把某段时间里的疑问固定住。过几年回头看，剧情、角色，甚至当时为什么被击中，也许都会变得模糊；但这些句子留下来的那一点偏移，会继续存在于我看待世界的方式里。<a href="mailto:hi@lawrenceli.me">来信不拒？</a> <a href="https://qr.alipay.com/tsx12829sov5evioeg5j5fc">激赏随意！</a>

2026/5/3

写在 2025 年末

<h2 id="tech"><a href="#tech">Tech</a></h2> 互联网行业从业六七年了，最关注的必然是养活自己的 Java 生态。很多人说 Java 很臃肿，写个 Hello World 都费劲。然而实际上只需稍微关注一下最新今年 9 月 Java 25 LTS 最新版本的语法： <pre class="shiki shiki-themes one-light github-dark-default" style="background-color:#FAFAFA;--shiki-dark-bg:#0d1117;color:#383A42;--shiki-dark:#e6edf3" tabindex="0"><code>void main() { IO.println("Hello Java 25!"); }</code></pre> 虽然 <a href="https://openjdk.org/jeps/445" rel="noopener" target="_blank">JEP 445</a> 这种类似脚本的语法糖代码已经脱离了一切皆对象的原则，但这恰恰是 Java 与时俱进的标志。另外几个不得不提的：结构化并发，虽然仍然在预览阶段，等它 GA 很有必要好好聊聊，配合虚拟线程，Java 的多线程模型简直起飞；模块导入声明简化了大量 import 语句，自 Java 9 以来的模块化的好处初见成效了。 其他领域的观察/观点： <ul> <li>C/C++ 有被 Rust 替代的趋势</li> <li>Next.js / React 服务端组件的重大漏洞让 React 开发者感受到 Log4J 类似境遇</li> <li>uv 统治了 Python 包管理器等工具链</li> </ul> 我自己关于 AI 的暴论： <ul> <li>搜索引擎这个互联网入口正在被 LLM 取代</li> <li>TailwindCSS 在 LLM 时代存在 Token 红利</li> <li>前后端混合的同构技术栈（比如 Next.js 服务端渲染）会成为 Vibe Coding 的首选技术栈</li> <li>MCP 协议正在向操作系统端迁移成为终端设备上的基础设施</li> <li>人类获取知识信息的时间复杂度几乎达到了 O(1)</li> <li>程序员写的代码是属于长期负债，LLM 产生的代码则是程序员的流动负债，绝非净资产</li> </ul> <h2 id="work"><a href="#work">Work</a></h2> 上一份工作在 SaaS 行业，属于人力资源行业内领头公司的老员工出来创业组建的一只小团队。总结下来的感受，SaaS 在国内很难做。由于是新项目，客户本就不多，最后几个月需求明显骤减，年中果然吃了散伙饭。虽然很快就换了工作，但每次想起那些代码写下后没有回响，仍然很难释怀。当然创业公司的好处就是很自由，公司架构精简，老板兼职商务销售经常出差，产品兼职人事/测试，不打卡，不用和外部客户沟通，节假日也几乎不会出现紧急线上问题，或许是因为没业务:(。我来到上海第一年做在线教育也是类似的团队。可能我自己一直喜欢从零到一构建点东西，所以更偏向这类创业公司的氛围。 换了工作后，在新公司从事互金相关业务，工作性质和公司规模导致部分福利或多或少不如先前，开发需求也多出了不少。但新公司有一定规模的业务，节奏稳定、方向明确，每个人只需要把自己负责的那一条脉络梳理好即可。 从个人成长的角度看，这样的环境也并非没有价值。系统规模更大，历史包袱更重，也意味着需要更谨慎地做决策、更耐心地理解上下游逻辑。现在看来，开发在多数时候并不是用来「创造」，而是用来「维持」：保证稳定、避免风险、在有限的空间内做最优解，这本身也是一种能力。只是偶尔在需求间隙，还是会不自觉地回想起以前那些可以随意推翻重来的日子。那时写代码，更多是在回答「能不能这样设计」；而现在，更多是在权衡「应不应该这么改」「如何避免改动的破坏性影响」。前者更像是在白纸上画草图，后者则是在维护一栋已经上路的汽车，各有意义，也各有约束，无可厚非。 或许职业生涯本就会在不同阶段切换角色：有时是开荒的人，有时是守成的人。眼下这段经历，大概更接近后者。至于未来是否还会再回到从零开始的状态，目前还很难下结论。但至少在当下，把手头的事情做好，理解这套体系为何如此运转，也未尝不是一种积累。毕竟，很多判断只有在真正站到另一种位置上，才能看得更清楚。 <h2 id="life"><a href="#life">Life</a></h2> <h3 id="music"><a href="#music">Music</a></h3> <ul> <li>年度最佳歌曲： <a href="https://music.163.com/#/song?id=2154850334" rel="noopener" target="_blank">BIRDS OF A FEATHER</a> - Billie Eilish</li> </ul> <h3 id="movie--shows"><a href="#movie--shows">Movie / Shows</a></h3> <ul> <li>年度最佳剧集： <a href="https://movie.douban.com/subject/36689815/" rel="noopener" target="_blank">流人第五季</a></li> <li>年度最佳电影： <a href="https://movie.douban.com/subject/35689244/" rel="noopener" target="_blank">F1: 狂飙飞车</a></li> <li>年度最佳视频： Casey Neistat: <a href="https://www.youtube.com/watch?v=EnhXwiPC3rE" rel="noopener" target="_blank">纽约午餐危机</a></li> </ul> 年初用国补还买了小米电视 S55 MiniLED，但今年都基本没怎么剧和电影，可以说是最近十年看的最少的一年了。每周必看 B 站主要的几个 Up：小 Lin 说，Koala 聊开源，马督工，jyhachi。 2026 年期待的剧集：豺狼的日子第二季，投行风云第四季。 <h3 id="things"><a href="#things">Things</a></h3> <ul> <li>年度最佳 IDE：Zed</li> <li>年度最烂开发工具：Postman</li> <li>年度最烂日本品牌：松下</li> <li>年度最佳日本品牌：三菱电机</li> <li>年度最吃灰设备：PlayStation 5</li> </ul> 用 Zed Vibe Coding 了<a href="https://lawrenceli.me/things" rel="noopener" target="_blank">一个页面</a>，罗列了最近几年买的主要电子设备。AI 就是用来写这种东西快准狠。 我的 IDE 除了 JetBrains 之外现在用的就只有 Zed 了。Atom 项目原班人马的新作品，非 Java 项目可以全用 Zed，原生支持 Vim 操作。就图一个简单清爽内置 AI。 <a href="https://linux-china.davao.page/blog/2025-11-13-qoder-jb/" rel="noopener" target="_blank">Qoder JetBrains Plugin</a> 插件做的蛮好的，我也在用，但 JetBrains 自家的 AI Assistant 是真的拉垮，BYOK 完全不可用。 Postman 最烂的地方在于它作为一个 HTTP 客户端搞出一堆依赖自家网络的用户功能，第一天用它的时候就很讨厌，工作原因还不得不去用它。 老婆给我买了一款松下剃须刀，能用，但声音巨大，操作交互非常不友好，对不起它大几百的价格，找官方解决结果还要返厂检修。我可怕麻烦了，讨厌一个品牌就是这么简单粗暴。 今年年初我老家的卧室国产空调用十多年后罢工了，老爸趁着有国补换空调，我推荐了三菱电机。我和老婆回家开了几天感觉很非常好，安静且高效。国庆回家后发现我爸给他自己卧室也换上了同款空调。 PS 5 又吃灰了一整年，我还不考虑出售。总想着放假开起来玩通宵，但真到假期了，还是懒得开。 <h3 id="investment"><a href="#investment">Investment</a></h3> 花了一个月时间通过了基金从业资格考试，除了琐碎的法规之外，也掌握了不少金融衍生品和金融工具（期权/期货/互换/逆回购/REITs/可转债/ABS...），尽管先前在投行的工作或多或少接触过，但要达到应付行业考试的程度还是得系统学习。这次学习机会重塑了我对投资的认知，几个重要的心得也在这里分享： <ul> <li>投机交易者为市场提供流动性</li> <li>股票的价格本质是未来现金流的折现</li> <li>现代投资组合理论本质讨论的不是收益最大化，而是如何在不确定性中构建一个更抗波动的投资组合</li> <li>市场只对承担系统性风险的投资者给予补偿</li> </ul> 在学习之前，我总是在想市场的数学模型是什么，原来这正是马科维茨的现代投资组合理论。它用数学方法证明了不要把鸡蛋放在一个篮子里。它提醒我，真正成熟的决策并不是减少犯错，而是让系统在犯错时依旧可行。这种思路，在投资之外同样成立。 看了两场<a href="https://xueqiu.com/vod/5145403704642636311/361010234" rel="noopener" target="_blank">段永平访谈</a>，总结起来还是那句话：买股票就是买公司。也经常睡前看猫笔刀（之前公司同事推荐的公众号），前几天还参与了一波场内白银 LOF 套利，虽然入场晚了点，但投机者慈善家是真金白银提供流动性。 摘录猫笔刀的一段话： <blockquote> 有人问我期指交割日是不是都会砸盘，我说不会，你只要去学习一下期指是什么样的金融产品，期指的运行方式，期指的交割规则，就知道它对 A 股没影响。但问题是这市场里 80% 以上的人不会学也不想学，他们更愿意接受不用动脑子的暴论，这样的人多到一定程度，市场就会自我实现。共识是有价值的，哪怕是错误的共识。 </blockquote> <h3 id="end"><a href="#end">End</a></h3> 今年一直骑行上下班，每天骑五六十分钟，年底还被交警罚了一单。最近还感冒了一回，稍微吃点热食浑身就出汗了，没吃一粒药完全靠自愈。住的地方商圈发现了一家淮扬菜店，点了很多次他家外卖，还到店吃了几次。 多抓鱼上买了一些书，还淘到了一本绝版刊物《独唱团》。《南方周末》今年的<a href="https://www.infzm.com/contents/309868" rel="noopener" target="_blank">新年献词</a>写的像学生作文，也不知道现在报刊亭还有的卖么？或者，现在还有报刊亭吗？ 我今年每一天都会刷 RSS，未来或者余生，我仍然会以它作为信息获取的主要途径；看到一些网站没有提供 RSS 源，我会给网站作者发邮件请求提供，再不济，我会基于 RSSHub 之类的工具自己生成对应的 Feed。 AI 应用爆发的年代，前文我提到人类获取信息的时间复杂度几乎达到了 O(1)，我相信很多博主在博客上分享的也都不会再是纯知识类文章了，因为除了自我加深印象之外，没有意义。我也不会再写这样的内容，因为我的博客也不是维基。未来可能会分享自己对一些事物的理解，或者，单纯的流水账式吐槽。 大概就这些吧。<a href="mailto:hi@lawrenceli.me">来信不拒？</a> <a href="https://qr.alipay.com/tsx12829sov5evioeg5j5fc">激赏随意！</a>

2025/12/31

在 Flyway 迁移类中实现依赖注入

<h2 id="flyway-是什么"><a href="#flyway-是什么">Flyway 是什么</a></h2> <a href="https://flywaydb.org/" rel="noopener" target="_blank">Flyway</a> 是一款开源的，基于 Java 实现的数据库内容变更控制工具。它提供了 CLI、Java API、Maven/Gradle Plugin 等多种方式方便开发人员将数据库的表结构改动、内容变动以可追溯的代码形式进行管理和部署。Flyway 支持包括大多数主流的关系型数据库：MySQL、SQL Server、Oracle Database、PostgreSQL、SQLite、TiDB、MariaDB 等，对于 MongoDB 的支持尚在预览阶段（更推荐 Mongock），同类竞品有 Liquibase，但 Liquibase 的使用相比 Flyway 更复杂，有额外的概念作为学习成本。 <div> <div data-embed="github" data-props='{"user":"flyway","repo":"flyway"}'></div> </div> <h2 id="配合-spring-boot-使用"><a href="#配合-spring-boot-使用">配合 Spring Boot 使用</a></h2> 遵循 SpringBoot 广为人知的约定大于配置，Spring 官方提供了 <a href="https://github.com/spring-projects/spring-boot/tree/main/spring-boot-project/spring-boot-autoconfigure/src/main/java/org/springframework/boot/autoconfigure/flyway" rel="noopener" target="_blank">Flyway 的自动配置实现</a>。 <pre class="shiki shiki-themes one-light github-dark-default" style="background-color:#FAFAFA;--shiki-dark-bg:#0d1117;color:#383A42;--shiki-dark:#e6edf3" tabindex="0"><code>@AutoConfiguration(after = { DataSourceAutoConfiguration.class,JdbcTemplateAutoConfiguration.class,HibernateJpaAutoConfiguration.class }) @ConditionalOnClass(Flyway.class) @Conditional(FlywayDataSourceCondition.class) @ConditionalOnProperty(prefix = "spring.flyway", name = "enabled", matchIfMissing = true) @Import(DatabaseInitializationDependencyConfigurer.class) @ImportRuntimeHints(FlywayAutoConfigurationRuntimeHints.class) public class FlywayAutoConfiguration { /*...*/ }</code></pre> 全限定类名 <code>org.springframework.boot.autoconfigure.flyway.FlywayAutoConfiguration</code> 会在检测到以下几种状态下实现自动配置： <ol> <li>存在 <code>Flyway</code> 类 (即 <code>org.flywaydb.core.Flyway</code>)</li> <li>满足 <code>FlywayDataSourceCondition</code> 类中的 Bean 或 Properties 条件，其实就是 <code>DataSource</code> 和数据库 URL 等连接配置存在</li> <li>存在 <code>spring.flyway.enabled=true</code> 属性配置</li> </ol> 对于 MySQL 而言，除了必须的 JDBC 依赖之外，需要引入 Flyway 自身依赖，SpringBoot 已经在 pom 中声明过版本号，因此此处无需额外定义版本字段: <pre class="shiki shiki-themes one-light github-dark-default" style="background-color:#FAFAFA;--shiki-dark-bg:#0d1117;color:#383A42;--shiki-dark:#e6edf3" tabindex="0"><code><dependency> <groupId>org.flywaydb</groupId> <artifactId>flyway-core</artifactId> </dependency> <dependency> <groupId>org.flywaydb</groupId> <artifactId>flyway-mysql</artifactId> </dependency></code></pre> 具体使用有两种方式： <ol> <li>原生 SQL</li> <li>Java API</li> </ol> Flyway 会基于默认配置的文件夹路径 classpath:db/migration 发现版本变更文件或实现类。 <pre class="shiki shiki-themes one-light github-dark-default" style="background-color:#FAFAFA;--shiki-dark-bg:#0d1117;color:#383A42;--shiki-dark:#e6edf3" tabindex="0"><code>V{VERSION}__{DESCRIPTION}.sql V{VERSION}__{DESCRIPTION}.java</code></pre> <code>VERSION</code> 可使用包含小数点、下划线的字符串版本，<code>DESCRIPTION</code> 则是简单的描述文本。中间的分割符是两个下划线。可通过 spring.flyway 配置自定义前后缀。 <code>V{VERSION}__{DESCRIPTION}.sql</code> 文件需要存放在 src/main/resources/db/migration 文件夹下; Java 类则需要定义包名 <code>db.migration</code> 并且继承父类 <code>BaseJavaMigration</code>，重写如下方法: <pre class="shiki shiki-themes one-light github-dark-default" style="background-color:#FAFAFA;--shiki-dark-bg:#0d1117;color:#383A42;--shiki-dark:#e6edf3" tabindex="0"><code>void migrate(Context context) throws Exception;</code></pre> 按照官方的写法，我们就可以在 <code>migrate()</code> 方法中去用 Java 代码实现数据库内容版本变动了，但是这里有一个缺点，那就是我们在 Spring 环境下无法针对 <code>V{VERSION}__{DESCRIPTION}.java</code> 进行依赖注入，只能尝试通过原生 JDBC 的方式、静态方法等去写比较朴素的 SQL 实现，而不能充分成分利用现有的 DAO 接口来做业务数据的更新。因此需要自定义配置 Flyway。 <h2 id="向-flyway-migration-实现类进行依赖注入"><a href="#向-flyway-migration-实现类进行依赖注入">向 Flyway Migration 实现类进行依赖注入</a></h2> <pre class="shiki shiki-themes one-light github-dark-default" style="background-color:#FAFAFA;--shiki-dark-bg:#0d1117;color:#383A42;--shiki-dark:#e6edf3" tabindex="0"><code>package me.lawrenceli.migration.config; import jakarta.annotation.PostConstruct; import org.flywaydb.core.Flyway; import org.flywaydb.core.api.migration.JavaMigration; import org.flywaydb.core.api.output.MigrateResult; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.context.ApplicationContext; import org.springframework.context.annotation.Configuration; import javax.sql.DataSource; @Configuration public class FlywayConfig { // 自定义迁移历史表名 private static final String SCHEMA_HISTORY_TABLE = "schema_changes"; @Autowired private DataSource dataSource; @Autowired private ApplicationContext applicationContext; @PostConstruct public void migrate() { log.info("Flyway, 启动!"); // 通过 Spring 容器获取所有迁移实现类 // 这样一来，所有实现类就不再需要定义在 package `db.migration` 下，可以放在任何支持 Bean 扫描的位置。 JavaMigration[] migrationBeans = applicationContext .getBeansOfType(JavaMigration.class) .values() .toArray(new JavaMigration[0]); Flyway flyway = Flyway.configure() .dataSource(dataSource) // 通过原本的 DataSource Bean 实现无需配置 flyway 自身的 JDBC URL .locations("db/migration") // 默认迁移脚本路径 .table(SCHEMA_HISTORY_TABLE) // 默认迁移历史表为 `flyway_schema_history` .baselineOnMigrate(true) // 默认 false, 对以存在的数据库做首次迁移必须设置开启 .baselineVersion("0") // 默认 "1" .executeInTransaction(true) // 将迁移作为事务，你懂的 .installedBy(applicationContext.getId()) // 将微服务名作为迁移执行者 .javaMigrations(migrationBeans) // 注册迁移类 .load(); MigrateResult migrate = flyway.migrate(); // 执行迁移，依次调用子类实现 log.info("Flyway 迁移了 {} 版. {}", migrate.migrationsExecuted, migrate.success); } }</code></pre> 由于 Flyway 的配置基于这种手动配置，因此需要在 SpringBoot 启动类上排除原有的自动配置类，以防止自动配置存在加载冲突。 <pre class="shiki shiki-themes one-light github-dark-default" style="background-color:#FAFAFA;--shiki-dark-bg:#0d1117;color:#383A42;--shiki-dark:#e6edf3" tabindex="0"><code>@SpringBootApplication(exclude = FlywayAutoConfiguration.class) public class MyApplication { public static void main(String[] args) { SpringApplication.run(MyApplication.class, args); } }</code></pre> 最后，定义一个 Component Bean 去实现 <code>BaseJavaMigration</code>: <pre class="shiki shiki-themes one-light github-dark-default" style="background-color:#FAFAFA;--shiki-dark-bg:#0d1117;color:#383A42;--shiki-dark:#e6edf3" tabindex="0"><code>package me.lawrenceli.balabala.migration; import org.flywaydb.core.api.migration.BaseJavaMigration; import org.flywaydb.core.api.migration.Context; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Component; @Component public class V2__QueryExample extends BaseJavaMigration { @Autowired private MyMapper myMapper; // Bean of DAO @Override public void migrate(Context context) throws Exception { Data data = myMapper.selectById(2024L); // ... other CRUD codes with Java } }</code></pre> 这样，所有的迁移类都可以方便地使用依赖注入来愉快地做 CRUD 了。经过实践，Flyway 会在数据库连接配置后、HTTP 服务暴露(也就是 Servlet 容器监听端口)前同步地执行完所有迁移，因此无需担心执行时机影响线上服务。 <h2 id="参考"><a href="#参考">参考</a></h2> <ul> <li><a href="https://github.com/flyway/flyway/issues/1062" rel="noopener" target="_blank">https://github.com/flyway/flyway/issues/1062</a></li> </ul><a href="mailto:hi@lawrenceli.me">来信不拒？</a> <a href="https://qr.alipay.com/tsx12829sov5evioeg5j5fc">激赏随意！</a>

2024/4/4

我的默认应用

最近看到很多博主在 <a href="https://defaults.rknight.me/" rel="noopener" target="_blank">App Defaults</a> 中分享了他们的默认应用程序。以下是我自己的： <ul> <li>📨 邮件客户端 <ul> <li>Apple 邮件</li> </ul> </li> <li>📮 邮件服务器 <ul> <li>Outlook（中国大陆可用）</li> <li><a href="https://www.larksuite.com/mail" rel="noopener" target="_blank">Lark 邮件</a> <code>hi@lawrenceli.me</code>。</li> </ul> </li> <li>📝 注释 <ul> <li>Apple Notes（使用 <a href="https://montaigne.io" rel="noopener" target="_blank">montaigne.io</a>，可以将 Apple Notes 成为一个静态网站）</li> </ul> </li> <li>✅ 待办事项 <ul> <li>Apple 提醒</li> </ul> </li> <li>📷 iPhone 照片拍摄 <ul> <li>Apple 相机</li> </ul> </li> <li>🟦 照片管理 <ul> <li>Apple 照片与 iCloud 同步</li> </ul> </li> <li>📆 日历 <ul> <li>服务：iCloud 日历</li> <li>客户端：Apple 日历</li> </ul> </li> <li>📁 云文件存储 <ul> <li>iCloud 云盘 (iCloud+)</li> <li><a href="https://www.aliyundrive.com/" rel="noopener" target="_blank">阿里云盘</a>（适用于 Apple TV）</li> </ul> </li> <li>📖 RSS <ul> <li>iOS 上的 <a href="https://reederapp.com/" rel="noopener" target="_blank">Reeder</a></li> <li>macOS 上的 <a href="https://readkit.app/" rel="noopener" target="_blank">ReadKit</a></li> <li>自托管 <a href="https://freshrss.org/index.html" rel="noopener" target="_blank">FreshRSS</a>，出色的 PWA 和 Web 推送。</li> </ul> </li> <li>🙍🏻‍♂️ 通讯录 <ul> <li>N/A，没有联系人。</li> </ul> </li> <li>🌐 浏览器 <ul> <li>Mac 上的 Firefox</li> <li>iOS 上的 Safari</li> </ul> </li> <li>💬 聊天 <ul> <li><a href="https://www.wechat.com/" rel="noopener" target="_blank">微信</a>（中国必备应用）</li> <li><a href="https://apps.apple.com/ph/app/microsoft-teams/id1113153706" rel="noopener" target="_blank">Microsoft Teams</a>（上班用）</li> </ul> </li> <li>🔖 书签 <ul> <li><a href="https://www.instapaper.com/" rel="noopener" target="_blank">Instapaper</a></li> </ul> </li> <li>📑 稍后阅读 <ul> <li>Reeder + Instapaper</li> </ul> </li> <li>📜 文字处理 <ul> <li><a href="https://www.onlyoffice.com/" rel="noopener" target="_blank">ONLYOFFICE</a>（开源 Office，与微软完全兼容）</li> <li><a href="https://obsidian.md/" rel="noopener" target="_blank">Obsidian</a>（流行的 Markdown 编辑器，可通过 iCloud 同步）</li> </ul> </li> <li>📈 电子表格 <ul> <li>ONLYOFFICE（开源 Office）</li> </ul> </li> <li>📊 演示 <ul> <li><a href="https://sli.dev/" rel="noopener" target="_blank">Slidev</a>（通过 Markdown 生成幻灯片）</li> </ul> </li> <li>🛒 购物清单 <ul> <li>在 Apple 提醒共享提醒列表</li> </ul> </li> <li>🍴 膳食计划 <ul> <li>无</li> </ul> </li> <li>💰 预算和个人理财 <ul> <li>以前用过 <a href="https://hochgatterer.me/finances/ios/" rel="noopener" target="_blank">iOS 的 Finances 2</a>，目前正在尝试 <a href="https://apps.apple.com/us/app/beanwise/id6446314789?ref=https://lawrenceli.me" rel="noopener" target="_blank">BeanWise</a></li> </ul> </li> <li>📰 新闻 <ul> <li><a href="https://solidot.org" rel="noopener" target="_blank">Solidot</a> (中文版的 <a href="https://slashdot.org" rel="noopener" target="_blank">slashdot</a>)</li> <li><a href="https://www.reuters.com/" rel="noopener" target="_blank">路透社</a></li> <li><a href="https://news.ycombinator.com/" rel="noopener" target="_blank">Hacker News</a></li> </ul> </li> <li>🎵 音乐 <ul> <li><a href="https://music.apple.com/" rel="noopener" target="_blank">Apple Music</a>（学生订阅只需每月 6 元）</li> <li><a href="https://music.163.com/" rel="noopener" target="_blank">网易云音乐</a>（作为 Apple Music 的补充）</li> </ul> </li> <li>🎤 播客 <ul> <li><a href="https://www.apple.com/apple-podcasts/" rel="noopener" target="_blank">Apple Podcast</a> 推荐泛用型播客客户端，无内容审查</li> </ul> </li> <li>🔐 密码管理 <ul> <li>iCloud KeyChain</li> <li><a href="https://2fas.com" rel="noopener" target="_blank">2FAS</a> 多因素身份验证</li> </ul> </li> </ul> <h2 id="额外默认设置"><a href="#额外默认设置">额外默认设置</a></h2> <ul> <li>🚀 自托管 <ul> <li><a href="https://lawrenceli.me/blog/cloudflare" rel="noopener" target="_blank">Cloudflare</a>（用于 CDN 和 DNS）</li> <li><a href="https://vercel.com" rel="noopener" target="_blank">Vercel</a> Next.js 的最佳部署体验</li> <li><a href="https://developers.cloudflare.com/workers/" rel="noopener" target="_blank">Cloudflare Workers</a> 基于 Cloudflare 节点的 Serverless</li> <li><a href="https://fly.io" rel="noopener" target="_blank">fly.io</a> 可免费运行 Docker 实例，需提供信用卡</li> </ul> </li> <li>🤖 自动化 <ul> <li><a href="https://ifttt.com" rel="noopener" target="_blank">IFTTT</a> IF This Then That</li> <li><a href="http://workflow.is/" rel="noopener" target="_blank">Apple 快捷指令</a>（前 Workflow）</li> <li><a href="https://www.activepieces.com/" rel="noopener" target="_blank">ActivePieces</a> 开源的自动化工具</li> </ul> </li> <li>🛜 网络工具 <ul> <li><a href="https://tailscale.com/" rel="noopener" target="_blank">Tailscale</a> 零配置组网工具</li> <li><a href="https://1.1.1.1" rel="noopener" target="_blank">Cloudflare WARP</a> 基于 DoH 的零信任网络</li> <li><a href="https://mcreadme.gitbook.io/mc/" rel="noopener" target="_blank">MerlinClash</a> 梅林固件的网络工具</li> <li><a href="https://github.com/WireGuard" rel="noopener" target="_blank">WireGuard</a> 下一代 VPN 协议</li> <li><a href="https://apps.apple.com/us/app/shadowrocket/id932747118?l=zh-Hans-CN" rel="noopener" target="_blank">ShadowRocket</a> 最流行的网络工具</li> </ul> </li> </ul><a href="mailto:hi@lawrenceli.me">来信不拒？</a> <a href="https://qr.alipay.com/tsx12829sov5evioeg5j5fc">激赏随意！</a>

2023/12/3

Cloudflare

Cloudflare 是一家在业内比较知名的 CDN 服务商，提供包含 DNS 解析、WAF 防火墙、CDN 加速、DDoS 防护，后续推出了一系列比较方便开发人员的许多功能：Cloudflare Workers、KV、Zero Trust Tunnel、WARP... 一切都是为了提供一个安全、快速的互联网环境。如果说 Vercel 给前端开发人员提供了基础设施，那 Cloudflare 则为数千万网站后端流量提供了基础设施。 今年年初，<a href="https://blog.cloudflare.com/zh-cn/cloudflare-mitigates-record-breaking-71-million-request-per-second-ddos-attack-zh-cn/" rel="noopener" target="_blank">Cloudflare 缓解了破纪录的 7100 万个请求/秒的 DDoS 攻击</a>。 <h2 id="vercel--cdn"><a href="#vercel--cdn">Vercel & CDN</a></h2> 三年前，我把我的博客从 WordPress 迁移到了 <a href="https://vercel.com" rel="noopener" target="_blank">Vercel</a>，老用户们或许都记得，那时候的域名可还都是 <code>*.now.sh</code>。初次使用 Vercel 的感受可以说是如获至宝，在今天看来可能显得很幼稚了——如果不是自己知道如何从 0 到 1 申请域名去部署一个全栈的 Web 项目的话，很难理解 Vercel 这种平台背后做了哪些复杂工作。这是我所理解的美国公司的一贯作法 —— 他们总是把庞大、精密、复杂的技术或基础设施掩盖在简约、优雅的产品外观之下。而我每次都会保持警惕和观察力，如果换我做，我怎么来实现？后来我便学习起了 Kubernetes。 说回 Cloudflare。从我第一次买域名（2015 年）一直到现在，我全部把解析权安排在 Cloudflare 上。归因于 <a href="https://isdown.app/integrations/vercel/incidents/50745-errors-accessing-from-china" rel="noopener" target="_blank">Vercel 的一次网络问题</a>，国内的网络受某种不可抗力在 2021 年的时候突然无法访问 Vercel 的部分域名了，尽管我的博客每天仅有为数不多的访客，但作为一个以中文为主的博客，还是有必要保持国内网络访问的畅通。根据官方提供的新的 CNAME 值，我在 Cloudflare 上更换了解析记录，也算顺利解决。也就在当时，我才注意到 DNS Records 控制台之前一个一直忽视的选项： <figure> <img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDQgMzkuNSI+PGRlZnM+PHN0eWxlPi5jbHMtMXtmaWxsOiM5OTk7fS5jbHMtMntmaWxsOiNmNjhhMWQ7fS5jbHMtM3tmaWxsOiNmZmY7fTwvc3R5bGU+PC9kZWZzPjx0aXRsZT5Bc3NldCAxPC90aXRsZT48ZyBpZD0iTGF5ZXJfMiIgZGF0YS1uYW1lPSJMYXllciAyIj48ZyBpZD0iTGF5ZXJfMS0yIiBkYXRhLW5hbWU9IkxheWVyIDEiPjxwb2x5Z29uIGNsYXNzPSJjbHMtMSIgcG9pbnRzPSIxMDQgMjAuMTIgOTQgMTAuNjIgOTQgMTYuMTIgMCAxNi4xMiAwIDI0LjEyIDk0IDI0LjEyIDk0IDI5LjYyIDEwNCAyMC4xMiIvPjxwYXRoIGNsYXNzPSJjbHMtMiIgZD0iTTc0LjUsMzljLTIuMDgsMC0xNS40My0uMTMtMjguMzQtLjI1LTEyLjYyLS4xMi0yNS42OC0uMjUtMjcuNjYtLjI1YTgsOCwwLDAsMS0xLTE1LjkzYzAtLjE5LDAtLjM4LDAtLjU3YTkuNDksOS40OSwwLDAsMSwxNC45LTcuODEsMTkuNDgsMTkuNDgsMCwwLDEsMzguMDUsNC42M0ExMC41LDEwLjUsMCwxLDEsNzQuNSwzOVoiLz48cGF0aCBjbGFzcz0iY2xzLTMiIGQ9Ik01MSwxQTE5LDE5LDAsMCwxLDcwLDE5LjU5LDEwLDEwLDAsMSwxLDc0LjUsMzguNWMtNC4xMSwwLTUyLS41LTU2LS41YTcuNSw3LjUsMCwwLDEtLjQ0LTE1QTguNDcsOC40NywwLDAsMSwxOCwyMmE5LDksMCwwLDEsMTQuNjgtN0ExOSwxOSwwLDAsMSw1MSwxbTAtMUEyMCwyMCwwLDAsMCwzMi4xMywxMy40MiwxMCwxMCwwLDAsMCwxNywyMnYuMTRBOC41LDguNSwwLDAsMCwxOC41LDM5YzIsMCwxNSwuMTMsMjcuNjYuMjUsMTIuOTEuMTIsMjYuMjYuMjUsMjguMzQuMjVhMTEsMTEsMCwxLDAtMy42MS0yMS4zOUEyMC4xLDIwLjEsMCwwLDAsNTEsMFoiLz48L2c+PC9nPjwvc3ZnPg==" width="48px" height="48px"></img> <figcaption style="text-align: center">Proxied</figcaption> </figure> 我好奇地把它启用了，即从灰色 <code>DNS only</code> 换成了这个橙色的 <code>Proxied</code>，那时我还没意识到，其实 Cloudflare 从那刻起已经完全接管了我的网站的全部流量并进行任播 (Anycast)；换句话说，我在现有的 Vercel CDN 之上，又套了一层 Cloudflare CDN。是的，这迎来了两个问题： <ol> <li>Vercel 后台警告 CNAME 解析异常</li> <li>缓存时间问题</li> <li>客户端 IP 全部被识别 Cloudflare IP，所有发往 Vercel 的请求都会从 Cloudflare 数据中心发出</li> </ol> 不可能没人像我这样做吧？事实上，<a href="https://vercel.com/guides/why-running-another-cdn-on-top-of-vercel-is-not-recommended" rel="noopener" target="_blank">Vercel 并不推荐在其基础上使用另一层 CDN</a>。后续我也依次找寻到了解决方案：对于 CNAME 来说，Vercel 会定时访问网站跟路径下的 <code>.well-known</code> 路径下的资源来识别包括 CNAME、HTTPS 证书这类配置验证网站控制权信息，因此我们可以直接在 Cloudflare 的 WAF 中，把这类路径作为白名单让 WAF 跳过其他安全规则直接放行。对于客户端 IP，可以参考 <a href="https://developers.cloudflare.com/rules/transform/managed-transforms/reference/" rel="noopener" target="_blank">Available Managed Transforms</a>，将一些客户端原始信息置于请求头中。缓存时间方面，还是要熟悉 MDN 上的一些标准 HTTP 协商协议，细粒度地对不同资源设置不同的 TTL，尽可能发挥 Cloudflare CDN 和浏览器自身缓存的优势 - 一个博客而已，是不是有点大炮打蚊子了？ Cloudflare 的整体防御从 L3 到 L7，遍布了所有能覆盖的防御范围。一个请求进入 Cloudflare 所代理的网站流量会经历顺序由上到下： <table> <thead> <tr> <th align="center">Traffic Sequence in Cloudflare</th> </tr> </thead> <tbody> <tr> <td align="center">DDoS</td> </tr> <tr> <td align="center">URL Rewrites</td> </tr> <tr> <td align="center">Page Rules</td> </tr> <tr> <td align="center">Origin Rules</td> </tr> <tr> <td align="center">Cache Rules</td> </tr> <tr> <td align="center">Configuration Rules</td> </tr> <tr> <td align="center">Redirect Rules</td> </tr> <tr> <td align="center">IP Access Rules</td> </tr> <tr> <td align="center">Bots</td> </tr> <tr> <td align="center">WAF</td> </tr> <tr> <td align="center">Header Modification</td> </tr> <tr> <td align="center">Access</td> </tr> <tr> <td align="center">Workers</td> </tr> </tbody> </table> 这些流量经过内部的层层筛选，以及我们自己定义的一些 Rule，最终反代到源站。因此，在决定使用任何 CDN 产品的时候，有必要将服务端源站 IP 妥善隐藏，尽可能不暴露任何历史解析值，否则一切防御都是徒劳。如果源站 IP 已经暴露，只能及时更换新的地址。在新的规则录入好后，Cloudflare 的全球网络会立刻应用规则并实时生效，这里或多或少要归功于大佬 <a href="https://mp.weixin.qq.com/s/xfphy67PTbtjeggo7LpjSA" rel="noopener" target="_blank">agentzh 章亦春</a> 开源的高性能网关 <a href="https://openresty.org/cn/" rel="noopener" target="_blank">OpenResty</a>。 <h2 id="cloudflare-workers--serverless"><a href="#cloudflare-workers--serverless">Cloudflare Workers & Serverless</a></h2> 我们可以将一个个「函数」部署在公有云的「边缘计算节点」之上，并暴露 Socket 给这些节点上的函数，来实现无需忽略底层服务器，直接部署可随意伸缩的 HTTP 服务的能力。当然，这要求这些函数尽可能无状态。在没有任何请求，闲置一定时间时，这些函数进程会直接消失以腾出计算资源，直到下次事件驱动它们迅速重新启动并继续提供服务。这便是老生常谈的 Serverless。 初次了解 Serverless 也是非常惊讶。AWS Lambda 竟能将 function 如此商业化 (FaaS)，Vercel 在此之上也做到了开箱即用。借助 Cloudflare 现有的数据中心，Cloudflare 也推出他们的 Serverless 解决方案 - <a href="https://blog.cloudflare.com/introducing-cloudflare-workers/" rel="noopener" target="_blank">Cloudflare Workers</a>。不同的是，Cloudflare Workers 相比原始的 Vercel Serverless Function 而言能够做 Server Sent Event、WebSocket 这类支持长连接的请求。尽管后续 Vercel Edge Function 也能实现，但是它能支持的 Node.js Module 实在太少了。（作者注：后来我才了解到 Vercel Edge Function 其实构建于 Cloudflare Workers 之上） 前不久，Cloudflare <a href="https://blog.cloudflare.com/workerd-open-source-workers-runtime/" rel="noopener" target="_blank">开源了 Workers 运行时 workerd</a>。 <div> <div data-embed="github" data-props='{"user":"cloudflare","repo":"workerd"}'></div> </div> Cloudflare Workers 有许多应用场景。比如实现一个简单的<a href="https://lucjan.medium.com/free-url-shortener-with-cloudflare-workers-125eaf87b1ec" rel="noopener" target="_blank">短 URL 重定向服务</a>、<a href="https://github.com/hunshcn/gh-proxy" rel="noopener" target="_blank">GitHub Proxy</a>、以及一大堆各自实现的 ChatGPT API Proxy...方便了太多国内用户。 Node.js 作者 Ryan Dahl 这几年给 JavaScript 写的另一个全新运行时 <a href="https://dash.deno.com" rel="noopener" target="_blank">Deno 也有类似的 Serverless 服务</a>，体验也很友好，同样<a href="https://twitter.com/la3rence/status/1642798082294251520" rel="noopener" target="_blank">支持 Web Standard API</a>。 为了实现 Serverless 的更多数据持久化功能，他们也各自推出了自家的 KV 存储实现服务，或者说是 Serverless 数据库。 <h2 id="cloudflare-在-tls-协议上的努力"><a href="#cloudflare-在-tls-协议上的努力">Cloudflare 在 TLS 协议上的努力</a></h2> <h3 id="client-hello---sni"><a href="#client-hello---sni">Client Hello - SNI</a></h3> 再来谈谈技术方面的一些进展。很多读者都知道 Server Name Indication（服务器名称指示，SNI）的存在，它是 TLS/SSL 协议在最初的 Client Hello 阶段由客户端发往服务端的一个字段，内容是网站的主机名或域名。引用 Cloudflare 的形象解释： <blockquote> SNI 有点像邮寄包裹到公寓楼而不是独栋房子。将邮件邮寄到某人的独栋房子时，仅街道地址就足以将包裹发送给收件人。但是，当包裹进入公寓楼时，除了街道地址外，还需要公寓号码。否则，包裹可能无法送达收件人或根本无法交付。许多 Web 服务器更像是公寓大楼而不是独栋房子：它们承载多个域名，因此仅 IP 地址不足以指示用户尝试访问哪个域名.....当多个网站托管在一台服务器上并共享一个 IP 地址，并且每个网站都有自己的 SSL 证书，在客户端设备尝试安全地连接到其中一个网站时，服务器可能不知道显示哪个 SSL 证书。这是因为 SSL/TLS 握手发生在客户端设备通过 HTTP 指示连接到某个网站之前。 </blockquote> 有点类似于 HTTP 协议中的 <code>Host</code> 请求头（如果在同一台服务器上用 Nginx 配置过多个虚拟主机应该都熟悉），但是 SNI 是作用在 L4，而且在 TCP 握手前完成。起初它并不是 TLS 协议的一部分，最早在 2003 年作为扩展字段增加到 TLS 协议中 (<a href="https://datatracker.ietf.org/doc/html/rfc6066#section-3" rel="noopener" target="_blank">RFC 6066</a>)。现代浏览器等客户端都早已支持这个字段。我们会发现一个细节问题，对基于同一 CDN 的网站的 HTTPS 请求，我们传入的 TLS <code>SNI</code> 和 HTTP Header <code>Host</code> 会有不一致的情况，在不严格校验 SNI 的情况下，这类请求有可能被路由到 <code>Host</code> 所定义的主机上，本质也就无视了 <code>SNI</code>，因此对于某些防火墙来说，由于它们能通过 SNI 来侦测到用户所请求的 HTTPS 站点，它们无法得到后续 TLS 握手后的 HTTP 报文内容，在客户端更换了 Header <code>Host</code> 后，实际返回的 HTTP 报文内容其实已被调包 —— 这种攻击方式，或者说叫伪装方式被称为<a href="https://zh.wikipedia.org/zh-cn/%E5%9F%9F%E5%89%8D%E7%BD%AE" rel="noopener" target="_blank">域前置(Domain Fronting)</a>技术。Cloudflare、CloudFront 都会校验二者的一致性返回 403，但依然有部分 CDN 对这一做法采取保留，比如 Fastly。 我们可以用 WireShack 抓包获取到 <code>SNI</code> 字段。应用这个过滤条件 <code>ssl.handshake.extensions_server_name</code>，尝试抓包发送一次 TLS 请求 <pre class="shiki shiki-themes one-light github-dark-default" style="background-color:#FAFAFA;--shiki-dark-bg:#0d1117;color:#383A42;--shiki-dark:#e6edf3" tabindex="0"><code>openssl s_client -connect lawrenceli.me:443 -servername lawrenceli.me -state -debug < /dev/null</code></pre> <figure><img src="/images/cloudflare/sni-field.png" alt="SNI" decoding="async"><figcaption>SNI</figcaption></figure> 可以从结果看出，SNI 确实使用了明文进行传输，这就导致了前文提到的一个问题 - 就算经过 TLS/HTTPS 加密的流量，仍然明文地暴露了我们在访问的域名。「这又如何？DNS 不也暴露了嘛？」好问题 - DoH 解决了 DNS 请求的明文风险 (<a href="https://datatracker.ietf.org/doc/html/rfc8484" rel="noopener" target="_blank">RFC 8484</a>)。因此，实际上 TLS 目前唯一在数据上有泄密风险的就只有这个字段了。Cloudflare 先后搬出了两个解决方案：<a href="https://www.cloudflare-cn.com/learning/ssl/what-is-encrypted-sni/" rel="noopener" target="_blank">ESNI</a> 以及 <a href="https://blog.cloudflare.com/encrypted-client-hello/" rel="noopener" target="_blank">ECH</a>。 我们可以使用 Chrome 的开关 <code>chrome://flags/#encrypted-client-hello</code> 来开启浏览器 ECH 的客户端支持。通过 Chrome DevTool 的 Security Tab 能够查看 HTTPS 流量的安全性信息。我们可以通过<a href="https://crypto.cloudflare.com/cdn-cgi/trace" rel="noopener" target="_blank">这个链接</a>来测试客户端对这个方案的支持情况，当然，这些需要服务端做相应的配置才能完全启用。话题就此结束，我不能再细说了。 Updated：<a href="https://blog.cloudflare.com/announcing-encrypted-client-hello/" rel="noopener" target="_blank">2023 年 9 月底，Cloudflare 宣布向所有基于 TLS 1.3 的代理站点启用 ECH</a>，目前默认全部启用且改选项不可关闭。 <h3 id="client-hello---ja3"><a href="#client-hello---ja3">Client Hello - JA3</a></h3> 利用 Client Hello 来做安全保护的另一个实践是 TLS 客户端指纹: JA3 & JA3S。这一设计灵感来源于信息安全专家 Lee Brotherston 的研究 <a href="https://blog.squarelemon.com/tls-fingerprinting/" rel="noopener" target="_blank">TLS fingerprinting</a>。 具体的工程实践可以参考 <a href="https://github.com/salesforce/ja3" rel="noopener" target="_blank">Salesforce 开源的 JA3</a>. <div> <div data-embed="github" data-props='{"user":"salesforce","repo":"ja3"}'></div> </div> 简而言之，TLS 握手过程中客户端发送的字节数组，也就是 Client Hello 阶段的一些字段和扩展名，通过固定方式拼接，基于摘要 MD5 来生成一个唯一的字符串，称为 JA3 指纹。不同的浏览器或 TLS 客户端有不同指纹。在大量的数据采样中，Cloudflare 就能够基于此数据 (JA3 & JA3S，后者包含了 Server Hello 阶段的服务端指纹) 统计出哪些请求来自于僵尸网络、机器人爬虫、Python 库还是正常用户的浏览器、或者手机访问。这也就解释了很多同学写爬虫时，利用 HTTP 协议更换 <code>User-Agent</code> 这一请求头无效的情况，因为 Cloudflare 的防御处在更底层的 L4 TLS 阶段。ChatGPT 的 Web 端也部署了 <a href="https://developers.cloudflare.com/bots/concepts/ja3-fingerprint/" rel="noopener" target="_blank">Cloudflare 的 TLS JA3 指纹鉴定 WAF (仅限 Enterprise 账户)</a>；GitHub 上我也找到了相关的代码实现通过更换 TLS Client 的方式来绕过这一防御。对于多数人来说，这已经有很大的防爬门槛了；而且 Cloudflare 可以随时更换 WAF 策略让旧的指纹失效。 JA3 由来自 salesforce 的三位工程师共同实现：John Althouse, Jeff Atkinson & Josh Atkins。看到这里，想必你也知道为什么 JA3 叫 <code>JA3</code> 了。 <h2 id="盈利模式"><a href="#盈利模式">盈利模式</a></h2> 和 Vercel，Netlify 如出一辙，Cloudflare 采用「免费试用，付费增值」的商业模式。Cloudflare CEO Matthew Prince 曾在 StackOverflow 上回答过这个问题：「<a href="https://webmasters.stackexchange.com/questions/88659/how-can-cloudflare-offer-a-free-cdn-with-unlimited-bandwidth" rel="noopener" target="_blank">How can Cloudflare offer a free CDN with unlimited bandwidth?</a>」： <ul> <li>更多的免费用户意味着更多的数据，这些数据能更好地帮助保护付费用户</li> <li>很多大客户的来源正是由于这些公司的员工是 Cloudflare 的免费用户，他们在工作中向公司推荐了 Cloudflare</li> <li>免费这一举措就是在做宣传，可以减少招聘成本，能雇到全球最厉害的工程师</li> <li>免费用户体验新功能的同时也能就帮助了这个新功能的测试，缩短了迭代周期</li> <li>带宽成本的鸡生蛋、蛋生鸡问题：用户数量庞大才能在面对全球各地的电信营运商时有议价权</li> </ul> 2019 年，Cloudflare 在纽交所上市，股票代码：NET。发行价 US $15，目前 US $63，上涨了 320%。画外音：现在买它还来得及吗？ 在中国目前和京东云合作，仅限企业用户。500 强企业中目前有三分之一使用 Cloudflare，还有很多上升空间。OpenAI 的 <a href="https://chat.openai.com" rel="noopener" target="_blank">ChatGPT</a> 上线后，Cloudflare 获得了大量曝光，防御了大量滥用用户和潜在威胁请求。 <h2 id="价值观"><a href="#价值观">价值观</a></h2> Cloudflare 因坚持网络中立原则受到了一些批评。 比较典型的一件事是 Cloudflare 因舆论和法律的压力<a href="https://blog.cloudflare.com/zh-cn/terminating-service-for-8chan-zh-cn" rel="noopener" target="_blank">终止对 8chan 的服务</a>。Cloudflare 声称自己是一家私营公司，并且 Cloudflare 半数营收来自于美国之外的地区，可以不受美国宪法第一修正案的约束，其服务的客户对象是整个互联网市场。由于业务量大，有些包含恐怖主义、仇恨言论的网站也免不了会使用其服务。这也是大多数大型互联网公司所面临的问题。和快播王欣事件类似，他们都不愿扮演内容仲裁者。互联网诞生至今，法律的步伐总是跟不上技术的发展。 <h2 id="尾声"><a href="#尾声">尾声</a></h2> OpenAI 的 ChatGPT 对 Cloudflare 作了一次很好的展示，我向读者推荐 Cloudflare。一方面是因为它一直提供永久的个人免费服务，另一方面是它的易用性以及全球视野。我也用过国内某套路厂商的 WAF 产品，界面纷繁错乱，一看账单都不知道为什么收费，套路太深，价格高昂（可能怪我太穷）。<a href="mailto:hi@lawrenceli.me">来信不拒？</a> <a href="https://qr.alipay.com/tsx12829sov5evioeg5j5fc">激赏随意！</a>

2023/6/11

Apple TV

过年回老家看电视，运营商送的网络电视盒子主屏幕花花绿绿，我一个程序员都费了好久才找到地方卫视的直播频道。 索性去电商平台搜搜看有没有更好的硬件、翻看各种测评文章和视频。清晰了需求定位后，我果断找了一家有现货的店铺下单了一款美版 Apple TV 2022 (4K)。 <figure class="md-image md-image-wide"><img src="/images/apple-tv/tv.jpg" alt="Apple TV" decoding="async"><figcaption>Apple TV</figcaption></figure> 一直担心年前收不到货，没想到快递很敬业地发过来了。 由于购买之前就已经熟悉了大部分使用细节，所以安装、使用的时候毫不费力；像是把玩过很久的玩具一样自然流畅。 用美区 Apple ID 购买了很多付费应用，主要都是一些国内独立开发者的作品。 <ul> <li>Alplayer</li> <li>APTV</li> <li>IIVA</li> <li>Miao Projects</li> <li>VidHub</li> </ul> 很难想象不少开发者会为国内极其小众的平台开发上架了如此小而美的 tvOS App。 搜集一些电视直播源，我就反常地看起了 CCTV。比期待的画质高出不少。遥控器的金属质感像第一次摸到棱角分明的 iPhone 5S 一样爱不释手！还用它和我爸玩了一局桌球游戏。 种种体验让我想起<a href="https://www.zhihu.com/question/477077785/answer/2425144012" rel="noopener" target="_blank">知乎上一个回答</a>： <blockquote> 长这么大，听过最清晰的《义勇军进行曲》是在 Apple Music。 </blockquote> <a href="mailto:hi@lawrenceli.me">来信不拒？</a> <a href="https://qr.alipay.com/tsx12829sov5evioeg5j5fc">激赏随意！</a>

2023/1/21

ActivityPub 协议的简单实现

<div class="markdown-alert markdown-alert-warning"><svg class="octicon octicon-alert mr-2" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"></path></svg>Warning这不是一篇严肃的 ActivityPub 教程，仅仅是一些基于个人实现时的简单概括。该网站并不支持所有 ActivityPub 协议要求。由于联邦宇宙实例众多而本人服务器资源有限，笔者可能会关闭本站 ActivityPub 服务。 </div> <a href="https://www.nytimes.com/2013/01/13/technology/aaron-swartz-internet-activist-dies-at-26.html" rel="noopener" target="_blank">Aaron Swartz 于十年前的这个时候自杀了</a>。他起草的 <a href="https://web.resource.org/rss/1.0/" rel="noopener" target="_blank">RSS (1.0) 协议</a>、<a href="https://daringfireball.net/projects/markdown/" rel="noopener" target="_blank">和 John Gruber 一起设计、创造的 Markdown</a> 至今一直拥有大量互联网用户。这十年间互联网并没有因他的离世而产生 Open Web 原教旨主义者所期待的愿景。类似「剑桥分析公司」的事情你我都有耳闻。万维网的发明人 Tim Berners-Lee 博士后来提出了 <a href="https://solidproject.org/" rel="noopener" target="_blank">SoLiD 项目</a> —— 通过将用户数据和应用彻底分离，来实现用户对自身数据的完全掌控。ActivityPub 协议与之类似，但仅面向社交网站。如今，<a href="https://www.w3.org/TR/activitypub/" rel="noopener" target="_blank">ActivityPub 已经成为了 W3C 的推荐标准</a>；Elon Musk 收购 Twitter 公司之后，由于 "Hardcore Software Engineering" 所展露出的负外部性，Mastodon (长毛象)成为了最火热的分布式/去中心化社交网络平台，而 Mastodon 正是 ActivityPub 的实现之一。这个 <a href="https://activitypub.rocks/implementation-report/" rel="noopener" target="_blank">Implementation Report</a> 页面展示了一些实现了 ActivityPub 协议的网站列表。 折腾了几天，终于在百忙之中将这个小小的网站基本实现了 ActivityPub 最主要的接口。下面简单梳理一下大致实现的 Server to Server 接口，这些接口对于一个静态博客足矣。 本站点实现 ActivityPub 的所有 REST API 均系由 ▲ Vercel Serverless Function (JavaScript) 驱动。 <h2 id="webfinger"><a href="#webfinger">WebFinger</a></h2> 此 API 的定义参考 <a href="https://www.rfc-editor.org/rfc/rfc7033.html" rel="noopener" target="_blank">RFC 7033</a>。这个 WebFinger 协议目的是提供一种针对单个域名的用户发现方式。考虑到此 API 必须使用 <code>Content-Type: application/jrd+json</code> 作为 HTTP 的报文响应类型，因此不推荐直接使用静态文件托管 JSON，请使用 REST API 来构建此实现。 <pre class="shiki shiki-themes one-light github-dark-default" style="background-color:#FAFAFA;--shiki-dark-bg:#0d1117;color:#383A42;--shiki-dark:#e6edf3" tabindex="0"><code>https://example.com/.well-known/webfinger?resource=acct:lawrence@example.com</code></pre> <code>subject</code> 中的 URI 内容后半段和电子邮件非常像 —— ActivityPub 最终的实现效果也和电子邮件类似！ <pre class="shiki shiki-themes one-light github-dark-default" style="background-color:#FAFAFA;--shiki-dark-bg:#0d1117;color:#383A42;--shiki-dark:#e6edf3" tabindex="0"><code>{ "subject": "acct:lawrence@lawrenceli.me", "aliases": [], "links": [ { "rel": "http://webfinger.net/rel/profile-page", "type": "text/html", "href": "https://lawrenceli.me/about" }, { "rel": "self", "type": "application/activity+json", "href": "https://lawrenceli.me/api/activitypub/actor" } ] }</code></pre> <code>links</code> 中会添加上我们即将要实现的 Actor API。 除此 WebFinger 之外，以下所有 API 都必须设置 <code>Content-Type: application/activity+json</code> 作为响应头。ActivityPub 服务端（比如一个 Mastodon 实例）都会在请求头使用 <code>Accept: application/activity+json</code> 类似的形式来要求我们的实例返回对应的报文格式。 <h2 id="actor"><a href="#actor">Actor</a></h2> Actor 就是 Activity 的参与者。WebFinger 会暴露此用户信息 (Profile) 接口。通过此 API，可以告知 ActivityPub 所有关于此用户的其他 API Endpoint，比如用户的 Outbox、Inbox、Followers 等等。所以这些 API 的具体 URL 都可以由自己去定义，而非一成不变。 除此之外，需要提供用户的 PublicKey 来验明身份。我们只需要在自己本地生成一对密钥就可以了。服务端通信中，发往不同 ActivityPub 的实例 HTTPS 请求都需要经过密钥加密。 <pre class="shiki shiki-themes one-light github-dark-default" style="background-color:#FAFAFA;--shiki-dark-bg:#0d1117;color:#383A42;--shiki-dark:#e6edf3" tabindex="0"><code>openssl genrsa -out private.pem 2048 openssl rsa -in private.pem -outform PEM -pubout -out public.pem</code></pre> <pre class="shiki shiki-themes one-light github-dark-default" style="background-color:#FAFAFA;--shiki-dark-bg:#0d1117;color:#383A42;--shiki-dark:#e6edf3" tabindex="0"><code>{ "@context": ["https://www.w3.org/ns/activitystreams", "https://w3id.org/security/v1"], "id": "https://lawrenceli.me/api/activitypub/actor", "type": "Person", "name": "Lawrence Li", "preferredUsername": "lawrence", "summary": "Blog", "inbox": "https://lawrenceli.me/api/activitypub/inbox", "outbox": "https://lawrenceli.me/api/activitypub/outbox", "followers": "https://lawrenceli.me/api/activitypub/followers", "icon": ["https://lawrenceli.me/images/author/Lawrence.png"], "publicKey": { "id": "https://lawrenceli.me/api/activitypub/actor#main-key", "owner": "https://lawrenceli.me/api/activitypub/actor", "publicKeyPem": "-----BEGIN PUBLIC KEY-----\nMIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEA0RHqCKo3Zl+ZmwsyJUFe\niUBYdiWQe6C3W+d89DEzAEtigH8bI5lDWW0Q7rT60eppaSnoN3ykaWFFOrtUiVJT\nNqyMBz3aPbs6BpAE5lId9aPu6s9MFyZrK5QtuWfAGwv9VZPwUHrEJCFiY1G5IgK/\n+ZErSKYUTUYw2xSAZnLkalMFTRmLbmj8SlWp/5fryQd4jyRX/tBlsyFs/qvuwBtw\nuGSkWgTIMAYV71Wny9ns+Nwr4HYfF5eo2zInpwIYTCEbil79HcikUUTTO/vMMoqx\n46IiHcMj0SPlzDXxelZgqm0ojK2Z7BGudjvwSbWq/GtLoaXHeMUVpcOCtpyvtLr2\nYwIDAQAB\n-----END PUBLIC KEY-----" } }</code></pre> <h2 id="outbox"><a href="#outbox">Outbox</a></h2> 类似 RSS/JSON Feed, 类型为 <code>OrderedCollection</code>，必须按照时间顺序将最新内容放在 <code>orderedItems</code> 的最前。 <pre class="shiki shiki-themes one-light github-dark-default" style="background-color:#FAFAFA;--shiki-dark-bg:#0d1117;color:#383A42;--shiki-dark:#e6edf3" tabindex="0"><code>{ "@context": "https://www.w3.org/ns/activitystreams", "id": "https://lawrenceli.me/api/activitypub/outbox", "summary": "Blog", "type": "OrderedCollection", "totalItems": 1, "orderedItems": [] }</code></pre> OrderedItems 数组中的单个 Item (一般为 Note) 可以是如下形式： <pre class="shiki shiki-themes one-light github-dark-default" style="background-color:#FAFAFA;--shiki-dark-bg:#0d1117;color:#383A42;--shiki-dark:#e6edf3" tabindex="0"><code>{ "@context": ["https://www.w3.org/ns/activitystreams"], "id": "https://lawrenceli.me/blog/ssg-ssr", "type": "Note", "published": "Thu, 20 Feb 2020 00:00:00 GMT", "attributedTo": "https://lawrenceli.me/api/activitypub/actor", "content": "<a href=\"https://lawrenceli.me/blog/ssg-ssr\">When to Use Static Generation v.s. Server-side Rendering</a> SSG & SSR", "url": "https://lawrenceli.me/blog/ssg-ssr", "to": ["https://www.w3.org/ns/activitystreams#Public"], "cc": ["https://lawrenceli.me/api/activitypub/followers"] }</code></pre> 在 ActivityPub 中，所有的对象都必须要提供一个 <code>id</code> 来作为唯一的全局标识符。而且，这个 id 必须是公开可访问的 URI，即可以通过此 id 来访问到此资源对象本身。例上述如 Outbox 中的一项 Note 可以通过如下 curl 请求得到： <pre class="shiki shiki-themes one-light github-dark-default" style="background-color:#FAFAFA;--shiki-dark-bg:#0d1117;color:#383A42;--shiki-dark:#e6edf3" tabindex="0"><code>curl https://lawrenceli.me/blog/ssg-ssr -H "Accept: application/activity+json"</code></pre> 而如果你用浏览器直接打开这个 URL，你将会看到的是一个网页。原因就在于 <code>Accept</code> 这个请求头。 <h2 id="inbox"><a href="#inbox">Inbox</a></h2> 本质是一个必须支持 POST 请求的 WebHook。当联邦宇宙中其他用户对你的内容作出了一些交互(比如关注、回复、收藏、转发、删除等操作)，会触发此 WebHook。你需要根据 Activity 的类型去处理这些 Payload。一般来说，我们会使用自己的数据库来配合 Inbox Message 做 CRUD。 数据存在自己的数据库之后，你就可以直接在自己的站点上去展示它们。要保持数据于联邦宇宙中的一致性，你需要处理好所有消息类型，并做到接口的幂等 —— 因为 Mastodon 实例会有重试机制。 <h2 id="followers"><a href="#followers">Followers</a></h2> 关注者列表 API。当 Inbox 接收到来自其他用户的关注请求时，可以获取用户账户后保存到数据库然后通过此 API 展示出来。类型为 <code>OrderedCollection</code>。也是最简单的一个接口。 <pre class="shiki shiki-themes one-light github-dark-default" style="background-color:#FAFAFA;--shiki-dark-bg:#0d1117;color:#383A42;--shiki-dark:#e6edf3" tabindex="0"><code>{ "@context": "https://www.w3.org/ns/activitystreams", "id": "https://lawrenceli.me/api/activitypub/followers", "type": "OrderedCollection", "totalItems": 1, "orderedItems": ["https://mstdn.social/users/lawrence"] }</code></pre> <h2 id="note--article"><a href="#note--article">Note / Article</a></h2> 需要针对实现 Outbox 中的每一个 <code>orderedItem</code> 的 <code>id</code> 中的 URI 实现一个 JSON 输出。形式可以和 Outbox 中单个 Item 保持一致。除了 <code>Note</code> 之外，ActivityPub 可以有其他类型的资源，比如长文章的 <code>Article</code>、视频资源 <code>Video</code>。不同 ActivityPub 的实现平台对不同资源的展示方式不尽相同。 我的博客页面地址和对应 Activity ID 的 URI 在 URL 形式上保持了一致。因此在实现此 API 后，用户可以在任何 Mastodon 实例的搜索栏中通过搜索我的博客文章页地址来发现它对应的 Mastodon 贴文(由 Outbox 生成)；在完全实现 Inbox 后，对贴文的交互数据就能够展示在我的网站上。比如文章页面最下方的 <code>Replies</code>。 <h2 id="to-do"><a href="#to-do">To Do</a></h2> 我的站点没有完全实现所有 ActivityPub 协议，比如 Inbox 消息目前仅处理了 Create Note 和 Accept Follower，还有许多消息类型亟待实现；大部分接受 GET 请求的接口也应当适当配置缓存；Inbox 要严格验证发送者的密钥。 <h2 id="社区实现"><a href="#社区实现">社区实现</a></h2> 很巧合地发现 Cloudflare 也在同一时间段开发了兼容 Mastodon 的 ActivityPub 实现：<a href="https://github.com/cloudflare/wildebeest" rel="noopener" target="_blank">WildeBeest</a>，有兴趣可以直接用他们的商业化技术栈来部署一个小型实例，或者直接参考他们的代码，用自己擅长的服务端语言实现自己的 ActivityPub。 <div> <div data-embed="github" data-props='{"user":"cloudflare","repo":"wildebeest"}'></div> </div> <h2 id="ref"><a href="#ref">Ref</a></h2> <ul> <li><a href="https://www.w3.org/TR/activitypub/" rel="noopener" target="_blank">https://www.w3.org/TR/activitypub/</a></li> <li><a href="https://blog.joinmastodon.org/2018/06/how-to-implement-a-basic-activitypub-server/" rel="noopener" target="_blank">https://blog.joinmastodon.org/2018/06/how-to-implement-a-basic-activitypub-server/</a></li> <li><a href="https://s3lph.me/activitypub-static-site.html" rel="noopener" target="_blank">https://s3lph.me/activitypub-static-site.html</a></li> <li><a href="https://paul.kinlan.me/adding-activity-pub-to-your-static-site/" rel="noopener" target="_blank">https://paul.kinlan.me/adding-activity-pub-to-your-static-site/</a></li> </ul><a href="mailto:hi@lawrenceli.me">来信不拒？</a> <a href="https://qr.alipay.com/tsx12829sov5evioeg5j5fc">激赏随意！</a>

2023/1/11

写在 2022 年末

<h2 id="tech"><a href="#tech">Tech</a></h2> 技术方面今年依旧学习了很多新的内容。 首先从 0 到 1 使用 Next.js 重构了此 lawrenceli.me 的整个站点。由原先基于 Notion 私有 REST API 的 hacking 方式换成基于纯 Markdown 文本的 SSG（静态页面生成）和 ISR （增量静态再生成）并完成了几乎没有太多压力的 <a href="https://nextjs.org/docs/upgrading#upgrading-from-12-to-13" rel="noopener" target="_blank">Next.js 13 升级</a>。所有文章内容均和代码共存，这样能在所有页面上自由发挥，甚至可以在纯 Markdown 文件中直接使用 React/JSX 组件（基于 HTML 抽象语法树 - AST）。依赖的版本也基于 GitHub 自动的 PR 保持了最新。 React/JSX 写的也比去年熟练多了。另外简单研究了一下 TailWind CSS，上手很快，也在此站点上用上了。 <a href="https://github.com/la3rence/node-express-example" rel="noopener" target="_blank">Node.js 模版项目</a> 完工，一个快速使用 JavaScript 开发 REST API 的脚手架项目，各种测试、CI/CD、Code Coverage、日志、Open API (Swagger)、JWT 等基础设施都加上了。摒弃了古老的 CommonJS 而基于纯 ES Module。 <div> <div data-embed="github" data-props='{"user":"la3rence","repo":"node-express-example"}'></div> </div> <a href="https://github.com/la3rence/websocket-cluster" rel="noopener" target="_blank">WebSocket Cluster</a> 项目在 GitHub 上也快到达 100 stars 了，每周都会看到一两个国人参考我那很久没维护但精妙绝伦的代码。 年底 Spring 6 和 <a href="https://spring.io/blog/2022/11/24/spring-boot-3-0-goes-ga" rel="noopener" target="_blank">Spring Boot 3 的 GA</a> 同样令人欣喜。我们终于可以基于 GraalVM 的 AOT 去做 Spring Native on Cloud Native 了。JDK 8 仍有接近 7 年的寿命。JDK 17 的 ZGC 是最值得研究学习的，另外下个 JDK LTS (JDK 21?) 应该会让协程 (虚拟线程) GA，目前仍在孵化阶段。学 JavaScript / TypeScript 就是玩玩，真正企业级大型项目还得看 Java。为什么这么说，你去看看 <a href="https://docs.nestjs.com/controllers" rel="noopener" target="_blank">Nest.js</a> 就知道了。 另外又用上了一个比较简单可靠的托管服务（关键是免费）：<a href="https://fly.io/" rel="noopener" target="_blank">fly.io</a>，除常规项目外，它可以部署 Docker 容器，并提供大概 3 GB 额度的免费磁盘挂载。大多静态页面和轻量 Serverless 都依赖 Vercel 或 Cloudflare Workers，一旦遇到需要更加复杂的场景（比如 WebSocket 或 SSE），我会选择使用 fly.io 来部署。 Solidot Robot 已稳定运行将近一千天了，目前依旧基于 Vercel Serverless Function。异常稳定。<a href="https://www.solidot.org/" rel="noopener" target="_blank">Solidot</a> 依旧是我每天都会逛的科技新闻源。 <h2 id="work"><a href="#work">Work</a></h2> 公司内的 OpenShift 今年并没有花太多时间研究，权限、开发环境问题无法在本地快速调试容器。当然我依旧对 Kubernetes 保持高昂的学习热情，并用半个工作日的时间完成公司对所有开发人员提供的 immersive training。 我对所在团队 (CVA Trading Desk<a href="#user-content-fn-1" id="user-content-fnref-1" data-footnote-ref aria-describedby="footnote-label">1</a> in XVA) 的业务有了一定的认知： CVA Trading Desk 其实是一家内部保险公司。负责保障 Business Line Trading 在 couterparty (交易对手) 有可能失信、违约的风险下，可以得到来自 CVA Trader 专门针对此 couterparty 的风险做 Hedge 交易而得到的利润补偿；当然 Business Line Trader 会向我们 CVA Desk 定期支付保险费用。 <figure><img src="/images/2022-in-review/cva-desk.gif" alt="CVA Desk" decoding="async"><figcaption>CVA Desk</figcaption></figure> 每天有数以百计的 Batch Job 去处理这些 Trade 数据。最累的还是作为一个开发去解决各种突如其来的 production issue。 <h2 id="life"><a href="#life">Life</a></h2> <h3 id="wfh--covid"><a href="#wfh--covid">WFH & COVID</a></h3> 新冠瘟疫给我带来的除了处于长期封控下的 WFH，<del>没有额外影响</del>。我可能是相对幸运的一批了 —— 从未因此损失什么，反而得出了类似「<a href="/blog/makeshift-troupe/">草台班子</a>」的观点。 经历上海的封控后，我现在已经会炒相对好吃一点的蛋炒饭了。还给前不久程序员做饭指南 How to Cook 出圈之前贡献了一份<a href="https://github.com/Anduin2017/HowToCook/pull/159" rel="noopener" target="_blank">可乐鸡翅的 PR</a>。我发现中国人花在食物烹饪的时间成本上有点高，我依然点了不少的外卖。等各方面条件具备后我会尽可能花少的时间做简单的西餐来替换现有的饮食方式、并持续减少盐分、高油脂的摄入。 2022-12-27 后续更新: 发布此文后一周，我感染了新冠病毒。多次高烧突破 40 度，目前仍有些许低烧、乏力、困倦、多汗，并几乎同时丧失了味觉和嗅觉。我的父母也几乎同步感染，尽管我目前和他们不生活在一起。和多数人一样，可能是有生之年最痛苦的一次发烧经历。 <h3 id="music"><a href="#music">Music</a></h3> 周杰伦的今年新专马马虎虎。力荐的那当然是今年 The 1975 的新专 <a href="https://music.163.com/#/album?id=153050699" rel="noopener" target="_blank">Being Funny In A Foreign Language</a>。另外附上 Matty 在 Apple Music 的真诚采访： <div> <div data-embed="bilibili" data-props='{"bv":"BV1Xe41137fJ"}'></div> </div> <h3 id="movie"><a href="#movie">Movie</a></h3> 毕业后的这几年看观影、观剧的时间不那么充裕了。今年相对好了一点，但在豆瓣也仅标记了 20 多部。漫威自从复联四结束后最近这两年口碑有点差了，《雷神 4》拍得稀烂，希望来年有新的精彩故事线。今年看的比较好的商业片里印象深刻的有：《瞬息全宇宙》《壮志凌云 2：独行侠》《投行风云》《西线无战事》以及三季《Barry / 巴瑞》，尤其是这部 HBO 的犯罪片，讲述退役兵逐梦演艺圈的故事，很久都没有两三天一口气刷完好几季的感觉了，现在无比期待 2023 年的第四季。 <div> <div data-embed="douban" data-props='{"id":"26707518"}'></div> <div data-embed="douban" data-props='{"id":"3042261"}'></div> </div> <h2 id="things"><a href="#things">Things</a></h2> 软件领域，我把我常用的《极光词典》换成了《欧路词典》，导入了 iOS 内置的 mdx 词库文件。理由是《极光词典》不具备单词本功能，复习新单词无任何操作入口，但我仍然保留了它，因为作为词典这种功能型应用，已然完全胜出市面 99% 的同类产品了。 效率工具方面接下来我会重点去使用 <a href="https://retool.com/" rel="noopener" target="_blank">Retool</a> 开发一套自己的 Workflow，类似于 IFTTT 的平台但复杂度比 IFTTT 高许多。搜索领域我开始用了 ChatGPT Chrome Extension 搭配 Google。 文本编辑器方面，我开始尝试使用 <a href="https://obsidian.md/" rel="noopener" target="_blank">Obsidian</a>。目前桌面端和移动端都有一些 bug，作为 Markdown 编辑器，它的使用门槛对小白来说很低 —— 单纯的码字工具而已，而它的上限对习惯折腾的玩家来说也很高 —— 丰富多元的社区第三方插件。 最后不得不提的便是 Cloudflare 的优秀网络工具 <a href="https://1.1.1.1/" rel="noopener" target="_blank">WARP+</a>。他们开会期间我完全依赖它才能正常上网。使用期间发现 WARP 有流量限制，利用 API 刷到了几十 TB 的额度后发现其下「零信任网络<a href="#user-content-fn-2" id="user-content-fnref-2" data-footnote-ref aria-describedby="footnote-label">2</a>」是完全免费且不限流量的 —— 我果断切换成此模式，同时仍然续费另外一项网络协议工具互为备选方案来帮我维持突破网络封锁的高可用。 <h2 id="have-fun-secretly"><a href="#have-fun-secretly">Have fun, secretly</a></h2> 今年 10 月中下旬，我的网易云账号因在某天评论了一首歌被禁言 366 天。微博帐号也只因点赞评论某事件<a href="#user-content-fn-3" id="user-content-fnref-3" data-footnote-ref aria-describedby="footnote-label">3</a>的微博而被永久封禁。对此我的态度只有： <blockquote> 😅 </blockquote> <section data-footnotes class="footnotes"><h2 class="sr-only" id="footnote-label"><a href="#footnote-label">Footnotes</a></h2> <ol> <li id="user-content-fn-1"> <a href="https://www.oreilly.com/library/view/counterparty-credit-risk/9781118316665/c18anchor-2.html" rel="noopener" target="_blank">The Role of a CVA Desk - O'Reilly</a> <a href="#user-content-fnref-1" data-footnote-backref="" aria-label="Back to reference 1" class="data-footnote-backref">↩</a> </li> <li id="user-content-fn-2"> <a href="https://www.cloudflare.com/zh-cn/products/zero-trust/" rel="noopener" target="_blank">Cloudflare Zero Trust</a> <a href="#user-content-fnref-2" data-footnote-backref="" aria-label="Back to reference 2" class="data-footnote-backref">↩</a> </li> <li id="user-content-fn-3"> <a href="https://bit.ly/3V5V1NG" rel="noopener" target="_blank">现状不可描述</a> <a href="#user-content-fnref-3" data-footnote-backref="" aria-label="Back to reference 3" class="data-footnote-backref">↩</a> </li> </ol> </section><a href="mailto:hi@lawrenceli.me">来信不拒？</a> <a href="https://qr.alipay.com/tsx12829sov5evioeg5j5fc">激赏随意！</a>

2022/12/17

草台班子

鲁迅童年时代看的那些社戏，也叫草台戏，草台班子得名于此。通常有三五人在乡村空旷处搭上一处简陋布篷，水平不一的戏曲演员唱些群众喜闻乐见的戏曲，天黑了收点门票钱就拆台收东西继续赶往下一处演出。我很小的时候在外婆家有幸听过一回，都是老人带着小孩去听戏，内容全无印象。 后来，见到有位网友有如下生动总结： <blockquote> 我工作以后才发现，大家都是草台班子。XX 草台，企业草台，我也草台，大家都草台，凑合赚钱过日子。一个企业，看着像一台奔驰在高速公路上的豪华轿车，里面其实是几个人蹬着自行车顶个壳。路上的车都是这样，大家谁都不戳破。 </blockquote> 我们童年时代看大人们做事、参与各种社会活动，可能总会觉得他们应该是清晰、明确地知道自己在做什么，并且知道自己为什么要这样做，甚至基于此会构建出科学理性的决策。毕业多年后，结合我所经历的一些工作（长三角地区，囊括上市公司、外企、创业团队），以及所认识的在诸多行业、诸多企事业单位的打工人经历，愈加肯定上述观点。 马某去年在<a href="https://finance.sina.com.cn/money/bank/bank_hydt/2020-10-24/doc-iiznezxr7822563.shtml" rel="noopener" target="_blank">某峰会上的一席话</a>，正是启发我找到类似观点的导火线：「中国金融没有系统性风险，因为中国的金融基本没有系统」。 他所谓的「系统」是什么？会不会是一系列共识协议？或者法律条文？亦或是由上到下的多级政府部门？还是说某类高度复杂的中心化组织？... 我不知道，听众也不知道，或许马某自己也不知道。这个系统是什么我们无从得知，但唯一确定的是，它一定不是草台。 我不相信「车到山前必有路」。我一直坚信，人一定会犯错；而且往往出于本位主义的影响，会形成对现状的误判。系统性的思维有助于减少这类情况的发生，无论现状是如何的草台。拥有系统性思维的人却总是那么少。你不可能对于一项没有经历过的事物、事件产生全面的、全局的、深刻的洞见，这种看待事物的方式往往被人形容成「上帝视角」。问题来了，没有上帝，如何拥有系统性认知？现代工业提供了一种可能，机器。机器永远不会欺骗我们。我们可以利用计算机软件，按照既定的领域 (Domain) 规则，使用恰当的计算机语言，构建出运行在物理硬件设备上的、具备现实意义的<a href="https://zh.wikipedia.org/wiki/%E5%86%AF%C2%B7%E8%AF%BA%E4%BC%8A%E6%9B%BC%E7%BB%93%E6%9E%84" rel="noopener" target="_blank">真正的系统</a> —— 只要它有确定的规则和输入。 除了计算机领域，我目前没有见到所谓类似的系统了。软件工程已经教我们用科学的方法论去驾驭计算机科学，但人类社会总会有一些草台班子的案例： <ul> <li>2020.1 「能」「明白」</li> <li>2021.1 大连车务段，全力攻关一昼夜</li> <li>2022.2 某外交部发言人对俄乌战争开战前的评论：M 国情报就是个笑话</li> <li>2022.6 某岛国公务员：因醉酒丢失包含 46 万公民信息的 U 盘</li> <li>2022.7 某地某公权力部门：十亿公民数据泄露</li> <li>2022.8 某地大数据中心：4850 万数据泄露</li> <li>2022.9 某地隔离转运大巴车侧翻致 27 人遇难</li> <li>...</li> </ul> 人们愿意相信使用计算机技术所展现出来的数据给人带来安全感，一种「啊，都在系统中」的幻象，一种不那么草台的假象。当然，上述草台案例虽然看似和技术息息相关，本质上和它关系不大，更多时候是工程问题和流程问题，本质还是人的问题。对于数据泄露事件，他们决口不会承认，甚至会采取<a href="https://s.weibo.com/weibo?q=%23%E5%8D%81%E4%BA%BF%E5%85%AC%E6%B0%91%E6%95%B0%E6%8D%AE%E6%B3%84%E9%9C%B2%23" rel="noopener" target="_blank">审查</a>措施防止事件放大，至少邻国事件的主角还会假装鞠一躬以应付公众。 除上述领域外，方方面面都有类似的草台班子。「微博办案」、苏州和服事件、「专家建议」，无一不彰显司法或舆论的草台。法治的道路还有很远要走，十年前的<a href="https://zh.wikipedia.org/zh-cn/2013%E5%B9%B4%E3%80%8A%E5%8D%97%E6%96%B9%E5%91%A8%E6%9C%AB%E3%80%8B%E6%96%B0%E5%B9%B4%E7%89%B9%E5%88%8A%E4%BA%8B%E4%BB%B6" rel="noopener" target="_blank">宪政梦</a>也至今仍然不让做。 现代社会发展的历史，也是革草台命的历史。或许有人会因为工业化的成就而沾沾自喜，但在<a href="https://books.google.com.hk/books?id=lINbEAAAQBAJ&printsec=frontcover&dq=%E8%84%B1%E8%8A%82%E7%9A%84%E5%9B%BD%E5%BA%A6&hl=zh-CN&sa=X&ved=2ahUKEwiKi8r2_fP5AhVaslYBHdv5AR4Q6AF6BAgIEAI#v=onepage&q=%E8%84%B1%E8%8A%82%E7%9A%84%E5%9B%BD%E5%BA%A6&f=false" rel="noopener" target="_blank">脱节的国度</a>里我反而希望有更多冒名顶替综合征患者。加入外企一年多，我感受到 M 国公司为 Business Continuity 做出的基础设施投入相比国内的草台来说高了不少，也让员工产生出「你处于我们的系统之中」这样的幻想，但是我们不能保证这些基础设施都不是草台，因为供应链攻击是常有的事。一个恰当的 meme： <figure><img src="/images/makeshift-troupe/infra.png" alt="Mordern Infrastructor" decoding="async"><figcaption>Mordern Infrastructor</figcaption></figure> 大多数人原本或许并不草台，当他们加入某个草台团体时，会因团体的草台而被迫草台，或者离开。死海效应则是最佳例证。西语也有类似观点： <blockquote> Culture eats strategy for breakfast. </blockquote> 不可否认，所有有人的地方都会有草台班子的影子，从真正的草台戏到硅谷华尔街，从派出所到外交部。毛主席就讲过: <blockquote> ......只是一个空架子，其内面全没有什么东西...... 生息了四千多年，不知干什么去了？一点没有组织，一个有组织的社会看不见，一块有组织的地方看不见...... 没有科学脑筋，不知分析与概括的关系，有小的细胞才有大的有机体，有分子的各个才有团体。 《毛泽东早期文稿》 </blockquote> 或许有人说，这个社会需要草台，因为草台少了唱戏的可能会饿死，社会达尔文可不是闹着玩的。但更多时候这会让自己意识到：时刻保持谦卑和同理心，降低对群体的期望，厘清群己权界，才能和这个草台世界和解 —— 那是机器不曾具备的素质。 倘若消极看待整个人类社会，荒诞的草台班子或许是唯一最终能看到的答案。之所以荒诞，是因为对客观世界的认知能力没能达到一定层次而造成的心理落差 —— 这个世界的本质就是荒诞，只是草台现象的必然发生超出人类的合理认知；悲观的人一次次看到这种落差的存在会陷入本不该有的精神内耗。对此也许我们可以改变自身的眼光，始终抱以善意、同情的态度去解释所谓草台班子的行为，并积极参与、鼓励、帮助改变不合理的、荒诞的规则，构建符合当代人类认知的合理的但不绝对合理甚至未来还显得荒诞的社会意识。 生命的力量在于不顺从，或许我所能发现人类社会中的唯一不草台的地方在于人类不接受草台的设定本身， 本文受下列文章启发有所感： <ul> <li><a href="https://successfulsoftware.net/2022/06/19/no-one-knows-what-they-are-doing/" rel="noopener" target="_blank">https://successfulsoftware.net/2022/06/19/no-one-knows-what-they-are-doing/</a></li> </ul><a href="mailto:hi@lawrenceli.me">来信不拒？</a> <a href="https://qr.alipay.com/tsx12829sov5evioeg5j5fc">激赏随意！</a>

2022/9/1

这个网站是如何构建的

<h2 id="使用方式"><a href="#使用方式">使用方式</a></h2> 本站源码完全公开：<a href="https://github.com/la3rence/site" rel="noopener" target="_blank">GitHub - la3rence/site</a>. <div> <div data-embed="github" data-props='{"user":"la3rence","repo":"site"}'></div> </div> 直接将 Markdown 文件 (.md) 存放在 <code>posts</code> 文件夹下即可渲染当前文件，使之成为静态页面(<a href="/blog/ssg-ssr">SSG</a>)。博客的首页索引目录也为同步生成，而无需手动维护。 About 页面也同理基于 <code>readme.md</code> 文件生成而来。 博客相关的信息配置，如标题、作者等可在 <code>lib/config.mjs</code> 文件中配置。 推荐使用 <a href="https://pnpm.io/zh/" rel="noopener" target="_blank">pnpm</a> 来作为 node.js 的依赖管理工具（相比官方 npm，pnpm 拥有非常大的优势: 速度更快，且节省空间）。 <pre class="shiki shiki-themes one-light github-dark-default" style="background-color:#FAFAFA;--shiki-dark-bg:#0d1117;color:#383A42;--shiki-dark:#e6edf3" tabindex="0"><code>pnpm install pnpm dev # [Optional] install turbo via `pnpm i -g turbo` # and you can try `turbo` for run any script in package.json like: turbo dev turbo build</code></pre> 本地访问 <a href="http://localhost:3000" rel="noopener" target="_blank">http://localhost:3000</a> 即可。 通过 <code>pnpm build</code> 来打包，<code>pnpm start</code> 则用于生产环境的启动。通过 <code>pnpm fmt</code> 来将所有代码和文本进行格式化。 这篇文章展示了此博客项目所能展示的一切媒体信息，比如代码引用、表格展示、图片、视频、豆瓣卡片等等。 2024/07 更新： <ul> <li>顶部导航栏启用毛玻璃动态悬浮</li> <li>全新的 edge to edge 设计风格，充分利用屏幕区域展示代码和图片</li> </ul> <h2 id="技术细节"><a href="#技术细节">技术细节</a></h2> 此站点由 Vercel 公司开源的 <code>Next.js</code> 框架和 <code>TailwindCSS</code> 样式构成。前者是一项基于 React 的 SSG/SSR 开源项目，后者是一个目前流行的原子化 CSS 库，让不太会写 CSS、基础薄弱的我也能快速的写出灵活的样式。 Next.js 会主动调用我们写好的一些函数 (<code>getStaticProps()</code>)，让组件得到数据的输入，从而在构建阶段将 React 组件提前渲染完成。<code>remark</code> 库可以将原生的 markdown 语法编译成 html 对应的 dom - 在此项目中，我们让它固定遍历 <code>posts</code> 文件夹下的 markdown 文件，依次编译，让其作为 <code>[id].js</code> 的动态路由页面的 <code>props</code>，从而渲染出博客文章: <pre class="shiki shiki-themes one-light github-dark-default" style="background-color:#FAFAFA;--shiki-dark-bg:#0d1117;color:#383A42;--shiki-dark:#e6edf3" tabindex="0"><code>export const getStaticProps = async context => { const { id } = context.params; const mdData = await getMdContentById(id); return { props: mdData, }; };</code></pre> 这样做的好处很多: <ul> <li>适合被 CDN 缓存</li> <li>优秀的 SEO 表现</li> <li>节省网络带宽、流量</li> <li>O(1) 时间复杂度的 <a href="https://en.wikipedia.org/wiki/Time_to_first_byte" rel="noopener" target="_blank">TTFB</a></li> </ul> 总之一个字，快！如果你尝试关闭当前浏览器的 JavaScript 功能，这个网站也一样能正确渲染并展现。 不光如此，Next.js 也提供了服务端渲染的能力，同样也能带来较好的 SEO 体验，不展开说了。 上述这种技术被称之为 <a href="#tables">JAMstack</a>：JavaScript, API & Markup. 一种有趣的说法是，JAMstack 是 CDN 优先的应用程序。 <blockquote> It's now possible, instead, to push content directly to the network and design frameworks that optimize for this capability. As a result, with optimizations like static asset hoisting, websites are now becoming faster and more reliable than ever before. </blockquote> <h3 id="pagespeed"><a href="#pagespeed">PageSpeed</a></h3> PageSpeed 是 Google 对网页性能、可访问性、最佳实践和 SEO 的综合体检，而当前网站这几项指标都能拿到满分；对专业做前端的开发者以及 SEO 的来说都明白这意味着什么。 <figure class="md-image md-image-wide"><img src="/images/pagespeed.png" alt="PageSpeed 满分：性能、可访问性、最佳实践和 SEO 均为 100" title="PageSpeed 满分报告" decoding="async"><figcaption>PageSpeed 满分：性能、可访问性、最佳实践和 SEO 均为 100</figcaption></figure> <h3 id="movie"><a href="#movie">Movie</a></h3> 你可以编写特定的 React 组件来让 Markdown 支持更丰富的页面内容，这种实现方式和 <code>MDX</code> 类似。 The source of this component is coded via react component in markdown! Code: <pre class="shiki shiki-themes one-light github-dark-default" style="background-color:#FAFAFA;--shiki-dark-bg:#0d1117;color:#383A42;--shiki-dark:#e6edf3" tabindex="0"><code>// filename: how.md <div> <douban id="3042261"></douban> <div></code></pre> Result: <div> <div data-embed="douban" data-props='{"id":"3042261"}'></div> <div> <h3 id="images"><a href="#images">Images</a></h3> <figure><img src="https://proxy.lawrenceli.me/picsum.photos/400/600?grayscale" alt="Random Image" decoding="async" loading="lazy"><figcaption>Random Image</figcaption></figure> <h3 id="video"><a href="#video">Video</a></h3> 可以直接通过 <code><bilibili /></code> 组件展示来自于 B 站视频，基于 iframe. <div> <div data-embed="bilibili" data-props='{"bv":"BV1gR4y1u76v"}'></div> </div>  <h3 id="tweet--𝕏"><a href="#tweet--𝕏">Tweet / 𝕏</a></h3> <code><tweet /></code> 组件展示推文： <div> <div data-embed="tweet" data-props='{"id":"1138070453942009856"}'></div> </div> <h3 id="open-graph"><a href="#open-graph">Open Graph</a></h3> Open Graph (OG, 开放图谱协议) 用于社交网络分享网页时展示特定的富媒体信息。 <figure><img src="https://lawrenceli.me/api/og?meta=This%20is%20Open%20Graph" alt="Open Graph" decoding="async" loading="lazy"><figcaption>Open Graph</figcaption></figure> <h2 id="tables"><a href="#tables">Tables</a></h2> JAMstack. <table> <thead> <tr> <th align="center">ROLE</th> <th align="center">PROVIDED BY</th> </tr> </thead> <tbody> <tr> <td align="center">J</td> <td align="center">Client-side JS injected via React Hooks (state, event listeners, effects)</td> </tr> <tr> <td align="center">A</td> <td align="center">API pages inside the pages/api directory.</td> </tr> <tr> <td align="center">M</td> <td align="center">Pages with no data dependencies or pages with static data deps that trigger build-time static site generation.</td> </tr> </tbody> </table> <h2 id="github-gist"><a href="#github-gist">GitHub Gist</a></h2> <div id="gist122750024" class="gist border-0 my-2 not-prose"> <div class="gist-file" translate="no" data-color-mode="light" data-light-theme="light"> <div class="gist-data"> <div class="js-gist-file-update-container js-task-list-container"> <div id="file-gist-test-ts" class="file my-2"> <div itemprop="text" class="Box-body p-0 blob-wrapper data type-typescript" style="overflow: auto" tabindex="0" role="region" aria-label="gist-test.ts content, created by darylwright on 12:50PM on June 01, 2023."> <div class="js-check-hidden-unicode js-blob-code-container blob-code-content"> <template class="js-file-alert-template"> <div data-view-component="true" class="flash flash-warn flash-full d-flex flex-items-center"> <svg aria-hidden="true" data-component="Octicon" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-alert"> <path d="M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"></path> </svg> This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. <a class="Link--inTextBlock" href="https://github.co/hiddenchars" target="_blank">Learn more about bidirectional Unicode characters</a> <div data-view-component="true" class="flash-action"> <a href="{{ revealButtonHref }}" data-view-component="true" class="btn-sm btn"> Show hidden characters </a> </div> </div></template> <template class="js-line-alert-template"> <svg aria-hidden="true" data-component="Octicon" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-alert"> <path d="M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"></path> </svg> </template> <table data-hpc="" class="highlight tab-size js-file-line-container" data-tab-size="4" data-paste-markdown-skip="" data-tagsearch-path="gist-test.ts"> <tbody><tr> <td id="file-gist-test-ts-L1" class="blob-num js-line-number js-blob-rnum" data-line-number="1"></td> <td id="file-gist-test-ts-LC1" class="blob-code blob-code-inner js-file-line highlighted">export default function compare<T>(a0: T, b0: T): number {</td> </tr> <tr> <td id="file-gist-test-ts-L2" class="blob-num js-line-number js-blob-rnum" data-line-number="2"></td> <td id="file-gist-test-ts-LC2" class="blob-code blob-code-inner js-file-line"> if (a0 === b0) return 0;</td> </tr> <tr> <td id="file-gist-test-ts-L3" class="blob-num js-line-number js-blob-rnum" data-line-number="3"></td> <td id="file-gist-test-ts-LC3" class="blob-code blob-code-inner js-file-line highlighted"> if (a0 > b0) return 1;</td> </tr> <tr> <td id="file-gist-test-ts-L4" class="blob-num js-line-number js-blob-rnum" data-line-number="4"></td> <td id="file-gist-test-ts-LC4" class="blob-code blob-code-inner js-file-line highlighted"> return -1;</td> </tr> <tr> <td id="file-gist-test-ts-L5" class="blob-num js-line-number js-blob-rnum" data-line-number="5"></td> <td id="file-gist-test-ts-LC5" class="blob-code blob-code-inner js-file-line highlighted">}</td> </tr> </tbody></table> </div> </div> </div> </div> </div> <div class="gist-meta"> <a href="https://gist.github.com/darylwright/75332f27a6e9bff70bc0406114570829/raw/56ae74d7dda80005ce853ba2307ef15abf3b7e99/gist-test.ts" style="float:right" class="Link--inTextBlock">view raw</a> <a href="https://gist.github.com/darylwright/75332f27a6e9bff70bc0406114570829#file-gist-test-ts" class="Link--inTextBlock"> gist-test.ts </a> hosted with ❤ by <a class="Link--inTextBlock" href="https://github.com">GitHub</a> </div> </div> </div> <h2 id="websub-for-rss"><a href="#websub-for-rss">WebSub for RSS</a></h2> 基于 GitHub Actions 来支持 WebSub 标准，即之前的 PubSubHubbub。这使得支持 WebSub 的 RSS 客户端不仅能立刻获取到新文章，也能减少客户端和服务端之间的轮询次数以及流量。细节: <a href="https://github.com/la3rence/site/issues/324" rel="noopener" target="_blank">site/issue/324</a>. <h2 id="activitypub"><a href="#activitypub">ActivityPub</a></h2> 网站通过最基本的一些 ActivityPub 和 WebFinger 协议部分实现了与联邦宇宙的交互。<a href="https://lawrenceli.me/blog/activitypub" rel="noopener" target="_blank">实现细节</a>。 <h2 id="i18n"><a href="#i18n">I18n</a></h2> 网站通过简单的配置以支持国际化。通过 markdown 文件名的中间后缀来和 Next.js 原生 locale 路由来实现区分语言类型展示不同文本。 <h2 id="and-more-to-do"><a href="#and-more-to-do">And more to do</a></h2> Markdown 目前采用 GitHub Flavored Markdown (<a href="https://github.github.com/gfm/" rel="noopener" target="_blank">GFM</a>) ，并尝试添加新的语法元素支持。 例如：<a href="https://github.com/orgs/community/discussions/16925" rel="noopener" target="_blank">https://github.com/orgs/community/discussions/16925</a> <div class="markdown-alert markdown-alert-note"><svg class="octicon octicon-info mr-2" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.5 7.75A.75.75 0 0 1 7.25 7h1a.75.75 0 0 1 .75.75v2.75h.25a.75.75 0 0 1 0 1.5h-2a.75.75 0 0 1 0-1.5h.25v-2h-.25a.75.75 0 0 1-.75-.75ZM8 6a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z"></path></svg>NoteCritical content demanding immediate user attention due to potential risks. </div> <h2 id="ref-参考链接"><a href="#ref-参考链接">Ref 参考链接</a></h2> <ul> <li><a href="https://nextjs.org" rel="noopener" target="_blank">https://nextjs.org</a></li> <li><a href="https://tailwindcss.com" rel="noopener" target="_blank">https://tailwindcss.com</a></li> <li><a href="https://rauchg.com/2020/static-hoisting" rel="noopener" target="_blank">https://rauchg.com/2020/static-hoisting</a></li> <li><a href="https://jamstack.org" rel="noopener" target="_blank">https://jamstack.org</a></li> </ul><a href="mailto:hi@lawrenceli.me">来信不拒？</a> <a href="https://qr.alipay.com/tsx12829sov5evioeg5j5fc">激赏随意！</a>

2022/8/27