买了很早就想买的 NAS，现在只后悔买的晚了。由于不熟悉 NAS，我问了一些人给我推荐型号。结果每个人推荐的都不一样，给我纠结了很久。最后选的是比较基础款的绿联的 dxp4800，想着先用用看，结果发现还挺好的。NAS 的使用影视中心这是我折腾的最多的部分。最开始折腾的方向是用 BT/PT 来下载，折腾了一大圈下来的感觉就是很麻烦。找资源很麻烦、下载也很麻烦。后来就还是用云盘，绿联支持直接从百度云来下载，阿里云盘就需要我用电脑下载好，然后再传到 NAS 上。因为阿里云盘会员在第三方应用里每个月的高速流量只有 10G，我不想为了这个再加会员的钱。绿联的影视中心初用起来感觉还是挺好的。视频信息可以很好的识别到。折腾 NAS 带来的一个坏结果就是对网络的带宽提出了要求。我家之前的网络是 100M 的，折腾 NAS 之后直接升级成了 1000M 的。。。首付 799，后续每个月 40 元，感觉还行。现在百度网盘和阿里云盘都能跑满带宽，然后从电脑上传到 NAS 基本也是类似的速度。Docker 和虚拟机我的另一个使用场景就是用来跑 Docker。首先我可以把平时开发 follow 需要用到的容器全搬到 NAS 上，这样笔记本上就不用再跑 OrbStack 了。其次就是跑各种各样的应用服务，这部分还没有折腾太多。一个有意思的应用是bili-sync，可以很方便的把 B 站的视频同步到 NAS ...继续阅读 (3)

毕业今年上半年，我终于从待了七年的学校毕业了。这对我来说是个解脱。如何评价研究生的时光对我的意义？一方面来说，我在研究生的阶段变化最大。找到了自己真正喜欢做的事情，形成了自己的人生观。学习前端，参与开源，远程兼职，找工作，几乎每个时间段都留下了值得记录的痕迹。如果你对这些感兴趣，可以阅读这两篇文章。远程兼职一年后写在 24 岁之前另一方面来说，对于很不擅长、不喜欢科研的我，这也是我最容易遇到烦心事的日子。因为学校和导师的事情很难让我产生兴趣，整体环境的氛围又很难和自由扯得上半毛钱关系。到最后，三年的时间换回来的是一篇东拼西凑的论文和降低进入社会难度的通行证。不过还好遇上了一些很好的同学，给我带来了很多的安慰。工作毕业之后我在美团工作了两个月。在美团的工作体验如何？老实说，美团的工作整体还是很好的。基本上我每天七八点就可以下班，工作的内容也不会很麻烦，组里的同事和领导人也都很 nice。如果我没有更理想自由的工作，暂时在这里工作也很好。但是这毕竟是一份工作角色更像一个螺丝钉的工作，只能一直在北京租房的生活也不是我想要的。为什么可以果断地选择离开互联网？在很多人的视角里，毕业初期就辞去一个互联网公司的 “稳定 “工作，看起来不是一个稳妥的选择，但我却不需要任何考虑就可以做出这个决定。因为我一直以来的理想就是能够获得一份远程开源的工作，做自己喜欢的东西，自由的生活。如我喜欢的一句话所说， ...继续阅读 (5)

我有挺严重的强迫症，一旦发作，我几乎是什么也干不了的状态。对于刚买的或是对我很重要的电子产品，很容易觉得它的状态已经变成我无法接受的了。最常见情况的就是看见污垢或者指纹，然后用湿巾和布擦个没完没了。我几乎从来不用 Mac 的内置键盘，就是因为它很容易沾指纹，我就会需要在一天内多次擦拭。不过这种一般还好，一般忍不住去擦的频率在一周两次左右，并且因为可以擦干净就还是可以缓解。另一种比较难缓解的情况是磕碰或者无法去除的痕迹。之前我的电脑贴过贴纸，那时候我觉得这样可以让我的电脑变得个性化一些。但是一段时间后我开始不喜欢这种状态，然后就非要把贴纸撕下来。虽然贴纸没有留下那种清理不掉的胶，但还是留下了贴过贴纸的痕迹。这时常能让我感到难受，下次换电脑一定不贴任何贴纸了。另一个很容易触发我强迫症的场景是我无法使用我最常用的 ID。hyoban 这个 ID 已经是我为了在各个平台不容易触发 ID 已经被使用的场景而随机组合的一个顺眼 ID 了，但它还是会遇到重复的问题。为这个平台绞尽脑汁想了一个不重复的 ID 之后，过一段时间再看到这个 ID 还是会感到难受。有的时候我能够用一些理由说服自己不要再去想这个事情，比如如果再修改 ID 的话，一些地方的链接就会失效不能用。但更多时候我会去想如何再想一个和原 ID 接近，看起来又很顺我眼的新 ID。这种场景一旦发生我就会陷入其中无法挣脱，直达触发平台的修改 ...继续阅读 (6)

这篇笔记是记录我在分发 App 给到别人测试的过程中踩的坑，希望能让你少踩一次，当然前提你需要有 Apple Developer 的账号。参考 Expo 的Share pre-release versions of your app一文，你有以下三种方式分享你 App 的预览版。Internal distributionTestFlight 内部测试TestFlight 外部测试内部分发通过内部分发的方式，每台测试设备需要使用临时的配置文件，并且每年只能使用此方法分发至最多 100 部 iPhone。临时配置文件的需要需要获取设备的 UDID。要么你需要让用户自己通过 Mac Xcode 连接来获取，要么需要通过安装配置文件来获取（你需要建立和测试者之间的信任）。每次注册测试设备到 Apple，你都需要等待 Apple 来处理，这可能会花上一天的时间。每次注册完新的设备，你都需要重新进行 build。这种方式分发的应用需要用户在手机上开启开发者模式。综上，这种方式只适用于很小范围内的内部测试。TestFlight 内部测试TestFlight 内部测试需要你为测试者分配你的 Apple Developer 账号权限，它不需要将你的 App 提交审核。所以它同样只适用于小范围的内部测试。TestFlight 外部测试TestFlight 外部测试可以以多种方式来分发你的 App 到用 ...继续阅读 (25)

第二周我简单定义了一下 APP 的主题（其实主要就是颜色），搭建 APP 的数据库并利用数据构建展示界面。主题系统初始化项目的时候我选的 Tamagui，但是当我要开始自定义主题系统的时候，看文档看得我头晕😵‍💫。加上它大包大揽的风格，让我切换到了Unistyles。它的主题系统就是普通的对象，我只需要将我十分喜欢的 Radix Color 传递给它就好。和 Tailwind 的配色不同的是，它为每个颜色都设计了对应的深色，支持深色主题变得十分简单。Copyexport const lightTheme = { colors: { ...accent, ...accentA, }, } as const export const darkTheme = { colors: { ...accentDark, ...accentDarkA, }, } as const因为要传递的颜色还比较多，容易忘记在对应的深色主题也添加上对应的主题，可以通过类型检查来进行约束。参考How to test your types一文。Copytype Expect<T extends true> = T type Equal<X, Y> = (<T>() => T extends X ? 1 : 2) extends &#x ...继续阅读 (41)

为什么要写 rn一个是我自己还没正儿八经地写过 rn，想试试它的体验怎么样。加上最近对 Follow 这个 RSS 阅读器很感兴趣，但是它暂时还没移动端，可以作为我边学习边实践的对象。再有就是最近开始上班了，自己老是没什么动力在下班后写点想写的代码，有个目标更容易让自己专注。同时也立个 flag，把学习和开发的过程写成每周更新的小博客，欢迎大家关注。准备工作hello world好了，废话不多说，让我们跑起来第一个 app 吧。不过正所谓 “工欲善其事，必先利其器”，我们先准备好环境。一般来说你只需要安装好 Xcode 就行了，不过如果你像我一样，最近升级了 macOS beta 的话，就会麻烦一些：App Store 里的 Xcode 是不能打开的，和系统版本不匹配。下载完的 Xcode beta 没办法直接打开，提示the plug-in or one of its prerequisite plug-ins may be missing or damaged and may need to be reinstalled.，需要手动安装Xcode.app/Contents/Resources/Packages/下的安装包。参见https://forums.developer.apple.com/forums/thread/660860命令行中需要 select 到你在用的 b ...继续阅读 (39)

前言#这不是一篇比较 ESLint 和其他相关工具优劣进行拉踩的文章，而是介绍我选择使用 ESLint 来进行代码检查和格式化的原因。虽然不可避免地会提到其他工具，但我觉得每个流行工具的存在都是因为它们有自己的特点和优势。作为用户，我们只需要根据自己的需求和喜好来选择适合自己的工具。如果工具存在问题，我们可以通过反馈和贡献来帮助改进。我看中的 ESLint 的优势#更不固执己见的格式化#关于为什么不使用如Prettier或者dprint之类的格式化工具，我觉得 Anthony Fu 的Why I don't use Prettier一文已经说的足够清楚。在此，我补充一点自己的想法。配置printWidth并不能告诉 Prettier 我们希望在何时希望换行。你通过增加printWidth的值来回避一个不该换行的长字符串变量，就可能会导致一个你期望会换行的多参数函数的参数没有被正确地换行。// prettier-ignore的问题和// @ts-ignore一样，我们虽然成功告诉工具这里不要换行，但同时也失去了这里本可以应用的其它格式化规则。尽管 Prettier 的哲学是用户不需要考虑格式化的配置选项，让你把代码放心的交给它来变得漂亮。但实际上现有的可配置选项可能是 Prettier 能成为现在 js 社区最流行的格式化工具的原因之一。想象一下，你会使用一个不能控制是用tab还是s ...继续阅读 (50)

为什么我们需要 xLog SDK？#尽管我对于 xLog 的整体体验十分满意，但不得不说，相比于 Hexo、VitePress 之类静态生成的站点，它的访问速度还是有些慢。目前来说，我们没有简单的方式来自己部署 xLog 或是利用 xLog 的数据生成静态站点。xLog 允许我们方便地通过 CSS 自定义网站的外观，但是当涉及到如何渲染页面时，这样的自定义程度就显得有限了。在如何优雅编译一个 Markdown 文档一文中 diygod 介绍了 xLog 如何渲染 Markdown。但是你可能会不满意代码高亮的样式，或是有支持高亮特定行的需求。有的时候，你可以通过给 xLog 提 PR 的方式来满足你的需求，但不是所有的需求都适合 xLog 的每个用户。如果我们能自己控制如何渲染 markdown 的话，就有了更多的自由度。对于很多人来说，xLog 不是他们唯一的博客、笔记或发布日常的平台，可能有人习惯使用 VS Code 来编辑博客，有人喜欢 Obsidian。拥有一个 xLog SDK 的话，集成其它平台时，社区的作者就不需要每个人都去实现一遍 xLog server 的逻辑了。这些重复性的工作应当通过 SDK 来统一解决。现在 SDK 具备的功能#我发布了 sakuin 0.1.0 版本，你可以通过 npm 安装：Copyni sakuin从 sakuin 导入Client并使 ...继续阅读 (56)

要全自己折腾的话，或许会陷入无尽的坑，所以我选择从偶像的starter-ts开始，按照自己的习惯进行一些改造。技术栈选择#TypeScript + ESLint#TypeScript自不必多说，我使用ESLint来检查代码风格并格式化代码，而不是使用Prettier，想要了解更多请看Why I don't use Prettier。如果你和 prettier 的printWidth也做过斗争并不能忍受的话，就会喜欢用 eslint 了，并且我们现在有了ESLint Stylistic这种开箱即用的配置。Note要配置自己的 eslint config, 可以参考偶像的@antfu/eslint-config。pnpm + bunchee + tsx + vitest#为了方便的测试我们写的库，pnpm的workspace是必不可少的，可以很方便的开一个 playground。此外，它默认不提升依赖的特性也能够防止我们不小心引用了没有定义的依赖。我的.npmrc为：Copyignore-workspace-root-check=truepublic-hoist-pattern=[]使用bunchee来完成打包任务，它读取 package.json 中的exports字段作为打包的输入输出，无需手动指定配置。如果你希望更清楚精细的控制打包流程，可以使用rollup配合一些插件来自己写配 ...继续阅读 (56)

它会是什么样子#一：从外观和交互上来说：只有一个按钮，通过单击的方式来切换，而不是一个三选的 Dropdown Menu服务端渲染友好，按钮能直接反映当前主题是否为深色页面刷新时不会出现闪烁切换时页面颜色整体过渡，不会出现不一致二：从处理逻辑上来说：用户偏好可以持久化到浏览器存储用户偏好可以无感的恢复到系统偏好我会使用Jotai来实现，我喜欢 Jotai。获取系统偏好状态#通过Media queries的prefers-color-scheme和matchMedia来获取系统偏好是否为深色。onMount函数会在 atom 被订阅时执行，在取消订阅时执行其返回的函数。加上判断浏览器环境的逻辑来兼容服务端渲染。CopyfunctionatomSystemDark(){constisSystemDarkAtom=atom<boolean|null>(null);isSystemDarkAtom.onMount=(set)=>{if(typeofwindow==="undefined")return;constmatcher=window.matchMedia("(prefers-color-scheme: dark)");constupdate=()=>{set(matcher.matches);};update();matcher.addEventListener("cha ...继续阅读 (61)

Note虽然大家看到的时候，我已经 24 了，但我真是在 24 之前写的。我快 24 岁了，想着要回顾一下自己的过去，再思考一下自己的未来要走向哪里，就写下这篇文章。开源#参与自己力所能及的开源项目已经变成我生活的一部分，我主要的切入点是自己使用开源项目时遇到的问题和冒出的想法。下面我简单举几个例子。我十分喜欢 xLog 这个平台，并将其作为我的主要博客站点。在使用过程中我偶尔会遇到一些小问题，或是自己想要一些小功能，就把代码拿过来改一改提 PR。比如在通过浏览器使用在线编辑器来写博客时，我发现编辑和预览区域所占的宽度太小，编辑体验不佳，就增加了专注模式。现在开启专注模式，就可以使得页面全屏，同时隐藏与编辑区无关的元素。又比如Callout在很多站点生成器（如 VitePress）都是内置的语法，因此我就找了个 remark 插件支持了一下，现在你可以使用如下的写法来渲染一个Callout。Copy:::note同样可以写 **markdown**:::tailwindcss-icons是一个UnoCSS Icons preset在 Tailwind 这边类似的工具，我几乎每个项目都会使用它。使用的过程中遇到 TS 类型没有被正确找到的问题，但是提了 PR 后发现 issue 和 PR 好像有几个月没有被作者看了。起初，我选择 fork 一份自己发个包。但是我马上觉得，这个小修复应 ...继续阅读 (65)

如果你还不太懂 HTML 和 CSS#HTML 大概是长成下面这样子的。每个 HTML 标签都有自己的含义（如表示图片或者链接）；或由一组标签包围，或者自闭合；可以层级嵌套。N 多个 HTML 标签共同组合而成为你在浏览器中看到的网页。Copy<imgalt="A dog on an iPad"src="/assets/images/dog-ipad.jpg"/><pclass="text">Here is<ahref="https://example.com">a link</a></p>如果你对有哪些常用的 HTML 标签感兴趣，可以看这个 Simple.css 的Demo 网页。但是，如果只有 HTML，你的网页可能看起来会非常简陋，只有浏览器所提供的默认样式。所以，我们需要 CSS 来为我们的网页添加样式。Copy.text{color:#333;font-size:16px;line-height:1.5;}.text是一个 CSS 类选择器，它会匹配到 HTML 中class中包含text的标签，从而为其添加样式。这里我们简单设置了一下文本的颜色，大小和行高。结合 HTML 和 CSS，你就已经可以做出好看的静态网页了。如果你对还有哪些 CSS 的语法感兴趣，别急，看完这边文章你会得到一个极佳的学习文档。Tailwind ...继续阅读 (53)

前言#Copyfetch("https://jsonplaceholder.typicode.com/todos/1").then((response)=>response.json()).then((json)=>console.log(json))当你直接使用如上的代码来发起网络请求时，你会发现你的 IDE 无法给你提供任何关于json的类型提示。这很合理，没人知道这个接口会返回什么格式的数据。于是你需要进行如下几个步骤：手动测试这个接口，获取返回值根据返回值的内容，利用如transform.tools之类的工具生成对应的类型定义将类型定义复制到你的项目中使用as来标识返回值的类型这样下来你也只是能获得接口正常返回时json的类型而已，还有很多问题需要被解决：手动请求得到返回值不够准确，比如调用接口出错时，返回值的类型可能会发生变化请求的url和输入的参数没有任何类型提示当后端接口变动时，tsc 无法给出报错解决方案的基础#ts 中有个非常好用的功能是as const断言，给变量添加这个断言后，变量的类型会被推断为更具体的字面量类型，同时会禁止对变量的修改。下面是一个简单的例子，可以看到navigateTo这个函数的参数变的更加安全了，我们不能传递一个未被定义的路由名称字符串。Copyconstroutes={home:"/",about:"/about",}asconstde ...继续阅读 (49)

故事的开始#去年过年的时候，我接到了一个外包，基本上就是爬数据，写后端，写网页。当时我还只会写一点安卓，不会写前端，后端的话也只会写一点 Python 或者 Java。好在时间并不紧张，我照着深入浅出现代 Web 编程边学边写，完成了任务。是的，我一开始用的是 React，用mui作为组件库。开始入门#在去年三月份的时候，我偶然间看到Anthony Fu在 b 站的第一次直播。直播里，我第一次了解到原子化 CSS 以及 Vue 和 Vite 生态中的各种插件。直播后，我沿着他的Vue 起手模板和博客中涉及到的技术去学习前端。也没个特定顺序，就只是学些自己感兴趣的东西。接触开源#到了六月份，我接触到memos这个开源项目，并修复了我处理的第一个 issue。后面我日常修复一些 bug，实现一些小功能。在十月份我联系了作者，Steven人特别好，很欢迎大家去参与开源。他拉我进了组织，从他的代码中我学习到了很多。可惜的是，随着今年兼职和学校方面的事情变多，提交 PR 的次数也越来越少了。找工作#受疫情影响，上半年的时候我一直在家里，就只是不断学习和做一些别的事情。等快到暑假，大概是在家待得太久了，家里人开始催我出去找个工作。最开始的时候是让一个认识的人推荐一个小公司的职位，不过工资太低，去干活啥基本啥都存不下来，而且后来也没招我。去年 7 月 10 号中午，偶然在 V2EX 上看到祥岩发 ...继续阅读 (53)