当前内容无法在 RSS 阅读器中正确渲染，请前往：https://innei.in/posts/design/design-concepts-in-follow-app ...继续阅读 (14)

该渲染由 Shiro API 生成，可能存在排版问题，最佳体验请前往：https://innei.in/posts/tech/React-i18n-CSR-best-practices最近，社区又开始给 Follow 上强度了，搞起了 i18n 工作。开始之前有一个完善的 i18n 基建才是硬道理。我们选择 react-i18next。接下来，我们会由浅入深去配置一个完善的 i18n 基建。基础配置npm install react-i18next i18next建立一个 i18n 配置文件，比如i18n.ts。import i18next from 'i18next' import { initReactI18next } from 'react-i18next' import en from '@/locales/en.json' import zhCN from '@/locales/zh_CN.json' i18next.use(initReactI18next).init({ lng: 'zh', fallbackLng: 'en', resources: { en: { translation: en, }, ...继续阅读 (18)

该渲染由 Shiro API 生成，可能存在排版问题，最佳体验请前往：https://innei.in/notes/180关于工作首先来说说Follow吧。挺开心的也挺意外的，参与的一个前端项目在这周几乎每天都上了 GitHub Treading。这周榜首也是 Follow。因为这个项目我作为 Top 1 Contributor 也是挺有成就感的一件事。https://x.com/follow_app_/status/1833378435340570993https://x.com/follow_app_/status/1834410909449814086虽然目前 Follow 仍在内测阶段，但是随着推荐机制的出现，实际用户人数也是越来越多了，甚至出现了花钱求码的阶段。真的非常感谢大家的支持。我一直挺喜欢做开源的，也喜欢做更多能够接近用户的产品。我以前也有过梦想能通过全职写开源能够养活自己，看起来现在迈出了第一步。随便人数的扩张，也少不了更多的工作压力。想了想我已经有好久没有休息过了，每个周末都想在怎么样让它变得更好。我总是打磨各个地方的细节和界面设计，也许真是因为这样收到了不少人的好评，还有得到了一些 UI 设计师的肯定。虽然我并不是专业的 UI Design Engineer。但我正有这个意向，往这个方向前进。事实证明，我确实没有迷路。我承认我有点工作狂了。但是我却对此乐而 ...继续阅读 (22)

该渲染由 Shiro API 生成，可能存在排版问题，最佳体验请前往：https://innei.in/notes/179南京前些天的突然决定，买了去南京的高铁票。就这样周末去了一趟南京。没有任何行程，毫无计划。第一站，去朋友家里。出地铁后，看到了南京小米。此图片不支持在 RSS Render 中查看。然后是https://x.com/__oQuery/status/1829828314003095747晚上，去了夫子庙和秦淮河。:::gallery此图片不支持在 RSS Render 中查看。此图片不支持在 RSS Render 中查看。此图片不支持在 RSS Render 中查看。:::第二天，尝了鸡鸣汤包。好吃，一口下去都是汁，回家之后买点冷冻的当早饭吃。此图片不支持在 RSS Render 中查看。下午去水游城玩了，二次元浓度爆了。:::masonry此图片不支持在 RSS Render 中查看。此图片不支持在 RSS Render 中查看。此图片不支持在 RSS Render 中查看。:::短短两天，返程。短暂的旅程，重要的不是景，而是人，友人。Follow 进展不知不觉全职开发 Follow 也已经有三个月了。这三个月也是贡献了非常多的代码。修改了大量的 UI/UX，增加了 N 多细节，但是还有非常多的不完善。虽然目前仍然处于内测状态，实际用户也不过几百，但是目前用户需 ...继续阅读 (26)

该渲染由 Shiro API 生成，可能存在排版问题，最佳体验请前往：https://innei.in/posts/tech/ShadowDOM-style-isolation-and-inheritance如果你了解Web Component那么你一定知道 Shadow DOM，Shadow DOM 是用于创建一个与外部隔离的 DOM Tree，在微前端中比较常见，可以在内部定义任何样式也不会污染外部的样式，但是也因为这个特征导致 Shadow DOM 中也不会继承任何外部样式。假如你使用 TailwindCSS 或者其他组件库自带的样式，在 Shadow DOM 中被应用。例子我们先来创建一个简单的 TailwindCSS 的单页应用。// Create a shadow DOM tree and define a custom element class MyCustomElement extends HTMLElement { constructor() { super() // Attach a shadow DOM to the custom element const shadow = this.attachShadow({ mode: 'open' }) // Create some content for ...继续阅读 (23)

该渲染由 Shiro API 生成，可能存在排版问题，最佳体验请前往：https://innei.in/notes/178经过了五天的努力，我已经通关了「黑神话 · 悟空」。这是一款既塞尔达传说之后让我如此沉迷的。每天梦里都有那棍法。上回说到，我在 PS5 上玩到虎先锋就一直过不去。于是我在 Steam 平台购买了，使用风灵月影来降低游戏的难度。按我的游戏水平，将无限生命和满暴击点上之后就能愉快地玩耍了。然后点上三倍的移速。目前玩了 20 小时，一周目通关。也打了每个地图的隐藏地图，打了二郎神，结局是没带金箍。https://innei.in/notes/177在自己还没有通关之间，就一直刷别人的速通结局，想看看除了带金箍的坏结局和不带金箍的结局之外还有什么隐藏结局，相信也是很多人对现在的结局是不太满意的。当我自己通关之后，突然又觉得有点合情合理。游戏是玩家扮演天命人去寻找大圣的六根，但是老猴子最后说“意”的一根没了，但是通过打完二郎神之后浮现的记忆不就是所谓的“意”。那么集齐了六根不就是现代的大圣。反之，如果没打二郎神，那么就不会有这个“意”，最后还是会带上金箍再次走上轮回。这么想似乎也合情合理。在花果山换上大圣套之后，装备上如意金箍棒，打出大圣棍势，真的好像成为了大圣。（此处没有图，忘截了，已开启二周目）不得不说，这个游戏的美术太棒了，细节做的也非常到位，比如猪八戒和天命人在不 ...继续阅读 (19)

该渲染由 Shiro API 生成，可能存在排版问题，最佳体验请前往：https://innei.in/notes/177此文章没有任何图片和剧透请放心阅读。昨天是 黑神话悟空 的发售日，我也是和众人一样，早早的就醒了，等待 10 点的到来。在此之前，我并没有太多的期待，我一向是手残党，也玩不来魂游，不是受虐体质。但是随着越来越多的宣传片和试玩放出，让我也蠢蠢欲试。嫖到了朋友的 PS5 共享，我也在前两天完成了预载。10 点一到，游戏进入。也没有想到国产有天也能做出这样的 3A 游戏，而不是一款只要氪金就能变强的网游。这画质确实很好。玩法上，虽然说是 ARPG 游戏，但是难度还是挺大的，而且无法调难度确实是有魂游那个味。个人玩起来的感受是，第一章还是挺容易的，虽然大头和尚那里卡了半个钟多，当然这些前期也可以不打选择逃课。从和之前玩只狼的体验来说，还是相对简单的。第一章这里，我死的最多的地方应该就是大头和尚了，打黑熊精都没死这么多次。到了第二章，地图就比较大了。黄风岭这里没有太多的引导，地图又大还没有地图，很多时候都不知道应该去哪，扫了一波小怪之后发现根本没路可走；进入一个地方之后凭直觉往下走的确实死路但是也不知道是死路，然后就一直被地图玩弄。光是走迷宫就花了不少时间。谁说是线性游戏，但是到了这里又有点类开放世界，却又没有地图。很多传送点土地庙甚至可以不点（其实是不知道就跳关了），很 ...继续阅读 (110)

该渲染由 Shiro API 生成，可能存在排版问题，最佳体验请前往：https://innei.in/notes/176另外我更觉得写博客这种事... 写 比 发 更重要。当你有一箩筐精心打磨的内容无论到哪个平台都应该是会受到关注的，而且既然此人都能打磨出高质量的内容他必然也是领域精英，也一定可以收获社媒声量。所以不用担心没人看，我们都该担心自己愿不愿意写。今天的主题从川哥的一个推文讲起。截止今日，我也已经写了 298 篇文章了。从 2018 年我开始读大学开始，一直到现在。在这里时间线你还能看到每一篇曾经的我写过的，包括黑历史。曾经，我是非常讨厌写作的。还想起以前读初中的时候，语文老师每周都要求我们写周记，每两周还会布置作文，对于我这样一个平时生活枯燥无味，没有任何经历和故事的人，要写这些真是太难了，根本无法下手，只能靠编，而我又是一个不擅长撒谎的人。每每这个时候也是我最痛苦的时候。我从来不觉得写作是一件快乐的事，直到有一天我接触到了博客，这个想法才有所改变。我不喜欢的只是别人强迫你需要的写的，而从来不是发自内心的。写博客，是发自内心的，没有人的逼迫的，是先写什么就写什么的，我可以写下一遍技术的文章，不管写的好坏，至少是我经历过的，当然如果能够得到读者的称赞，那也是每个作者感到庆幸的。或许有一段时间内，我会产出比较多的文章， 再或者有很长的时间我没有任何产出，我不必为此感到焦虑 ...继续阅读 (42)

该渲染由 Shiro API 生成，可能存在排版问题，最佳体验请前往：https://innei.in/notes/175已经有一个月没有写点什么了，但是好像也无话可写。行业交流最近这段时间，开始忙起来了。除了主业之外，也尝试开始发展一些副业。很快，新工作也已经两个月了，内心也还是有些焦虑的，也不知道之后试用期能不能过。这些天和行业内的老人也算是进行了一些交流，大环境真的挺差的，所以还是需要一些其他的收入去缓解焦虑。聊到大厂，只有带来了岁月的蹉跎，却没有获得在真正需要帮助的时候所谓的人脉，厂里的人脉并没有能够在你失业的时候拉你一把。既没有技术的长进，也受限于圈子认识不到更多的人。结合我之前的经历，确实也感觉是这样，厂里虽然人多，但真正有实力的人少之又少，也很少有机会能够接触认识。而恰恰在创业圈，在初创公司之间却能认识更多独立开发者和业界大佬。旧友新愁前些天去了躺上海，和一些前同事出来见了见，唠唠嗑。离开小红书也就一年多的时间，而我当时所在的那个组，已经彻底翻天覆地了，已经没有多少老人了。自从阿里空降的 Ld，慢慢的充满了阿里味。有前同事表示也想找个远程工作了，组里氛围太差，工作太卷了。每天一群人死撑着不下班，也不知道是为了什么。也许是都知道现在工作不好找，加上裁员的消息，都不希望在这个时间被裁员吧。很多人都有家庭，房贷，生活的压力太大了。现在就是这样一个病态社会，连空气中都弥漫着不 ...继续阅读 (28)

当前内容无法在 RSS render 中正确渲染，请前往：$https://innei.in/posts/tech/using-auth-js-in-nestjs ...继续阅读 (44)

该渲染由 Shiro API 生成，可能存在排版问题，最佳体验请前往：https://innei.in/posts/tech/a-universal-method-about-show-electron-native-and-web-custom-menus本文介绍一种可以在 Electron 应用中显示原生菜单，并且在非 Electron 环境（Web）下也可以显示自定义的上下文菜单的方法。通过封装一个通用组件和调用方法，在两套环境中交互统一。调出原生菜单在 Electron 中，默认情况下右键并不会弹出类似 Chrome 中的上下文菜单。很多时候我们需要根据自己的业务场景编写相应的上下文菜单。我们可以使用Menu去构建一个原生的上下文菜单。在主进程中通过 ipcMain 监听事件，通过Menu.buildFromTemplate然后popup方法显示原生菜单。ipcMain.on('show-context-menu', (event) => { const template = [ { label: 'Menu Item 1', click: () => { console.log('Menu Item 1 clicked') }, }, ...继续阅读 (50)

该渲染由 Shiro API 生成，可能存在排版问题，最佳体验请前往：https://innei.in/notes/174最近一直都在被裁员之后的恐惧中。不知不觉已经过去了一个多月了。上个月的 9 号下午，通知我被优化了，没有任何的征兆，原因是项目组资金砍半了，人也要砍半。想起来也是伤感，自从离开小红书后，选择降薪去到一家喜欢的公司做充满艺术感的产品，本以为能够一直做下去，同时和大家一起做一些好玩的产品，而最后我只是一个弃子。很不幸，才干了一年的时间就被优化了。一时间不知所措，急性焦虑发作，整整心慌了两天。也许是人生第一次被裁员，虽然原因并不在我，但是还是收到了莫大的打击，感觉我是被抛弃的一个。直到现在我还在裁员的阴影中走不出来，而现在我已经入职了新的公司，我一样担忧着裁员的风险。即使是一次裁员就让我如此痛苦，不敢想到如果是失恋那会是怎样，这也是我一直不敢恋爱的一个原因吧。一向悲观的我，从不对自己的未来充满信心。入职新公司已经满三周了，这三周里，我几乎 all in 目前在做的产品了，当然它是开源的，我们要做一款最好用的 RSS 阅读器。欢迎大家支持。近期，我也会抽时间总结一些技术方面的细节。另外，最近我一直在探索 web app local-first 的解决方案，希望有朝一日能够在一个产品中落地。https://github.com/RSSNext/follow看完了？说点什么 ...继续阅读 (42)

该渲染由 Shiro API 生成，可能存在排版问题，最佳体验请前往：$https://innei.in/notes/173事业当下的大环境确实不容乐观，就业形势严峻，不稳定的局面让未来变得非常不确定。这种情况下，我发现自己在面对需要长期投入的事情时，常常感到焦虑和担忧，害怕计划被破坏后不知道该怎么办，最终不敢去改变现状。实际上，这种不敢改变的心理反映了我内心深处对未来的恐惧以及对自己能力的怀疑。未来的不确定性让我对自己的计划充满了疑虑。我常常问自己：现在做这个决定是否明智？如果未来环境变得更糟糕，我是否还有能力坚持下去？这些疑虑让我在面对重大决策时，往往选择保守和稳定，而不是冒险和改变。因为我害怕一旦计划被打乱，自己将无法应对突如其来的变化，最终导致失败。在面对需要长期投入的事情时，我往往会对自己的能力产生怀疑。例如，学习一门技能（如钢琴）或者谈一次恋爱，我会担心自己是否有足够的能力去完成这些事情，是否能在长时间内坚持下去。当事业不稳定时，我的心态容易崩溃，这种状态进一步加剧了我的焦虑和不安，使我在工作之外的长期投入的事情上更加犹豫不决，最终因为恐惧和不安而放弃。钱我确实会担心理财方面我做的不够好，担心自己没有可持续的收入来源，担心自己有一天会因为钱不能勇敢的做出选择，担心未来会因为一些现在还无法预料的事情“老大徒伤悲”，担心自己垂垂老矣之日没有足够的积蓄支付医疗费用……但是这些 ...继续阅读 (35)

当前内容无法在 RSS render 中正确渲染，请前往：$https://innei.in/posts/tech/data-management-approach-for-zustand-and-react-query ...继续阅读 (38)

该渲染由 Shiro API 生成，可能存在排版问题，最佳体验请前往：$https://innei.in/notes/172工作两年了，能力好像没什么长进。还在在校期间，有非常多的时间去探索方向，学习实用的感兴趣的东西，而我在那时学了 Vue，靠着这个得到了第一份实习的工作，然后在职期间学习了 React 和 Next.js。而我到现在技术水平一直停滞在那会，即便是过去了这么久，我依然只会这些技术栈。我使用过很多框架和 SaaS 服务，但这些并不是什么优势。我想到在我校招面试的时候，面试官总会说你虽然广度比较可以，但是没有深度。过去了两年，这个评价依然适用于我，即便是使用了 Next.js 作为主要的开发框架四年，虽然经历了历代的版本更新，但是在底层原理上依旧是全然不解，单单停留在应用层。看着现在的校招生甚至是高中生会的都比已经在职场混迹几年的技术上更加精练，不由得感到自愧不如。在我应届那会，或者实习那会也是有着同样的想法，而现在只是角色互换了。技术发展的日新月异，在工作之后一直曾经在公司业务而没有太多关注注定会被时代发展脱节，慢慢的淘汰。在这个互联网寒冬里，完全不知道自己的存在是否还会有竞争力，和那些应届生相比，也不再有性价比了。看完了？说点什么呢 ...继续阅读 (57)

该渲染由 Shiro API 生成，可能存在排版问题，最佳体验请前往：$https://innei.in/notes/171最近失业了。因为突然的打击导致抑郁症复发了。记得初三的时候也经历过一次，那个时候因为非个人意愿被换了一个班，在压力最大的一学期换到了一个完全陌生的环境，压力和绝望，我记得那段时间我每天都哭，好几次有过自杀的念头，脑中无数次开始回顾种种过往，虽然那个时候没有去医院看，也不知道抑郁症是什么，在家人的支持下，大概过了半年，我才有所好转。抑郁症可能是一生都无法彻底治愈的疾病，或许是因为我内心深处缺乏足够的安全感。感谢朋友们，这段时间给我的鼓励，认可我的能力，觉得我找个工作还是很简单的。但是只有我知道的，我真的很菜，我所有的你看到的只不过是我的运气。而且因为之前的经历，我特别害怕换一个环境，害怕我是不是真的能够胜任新的工作，害怕能不能处理好人际关系。最近这些天，我尽量避开了很多社交活动，我明显感觉到反应力变慢了，注意力越来越不集中，每天早上醒来还是感觉到非常非常的绝望，对任何事都提不起兴趣，莫名的出现心慌。虽然以前也出现过，但是一直不敢吃精神药品，因为副作用。这次，我尝试开始系统治疗。今天是第三天，希望两周以后出现好转。看完了？说点什么呢 ...继续阅读 (48)

该渲染由 Shiro API 生成，可能存在排版问题，最佳体验请前往：$https://innei.in/notes/170这一天还是来了，其实在很久之间担心过这个事了，只是最近看似的平静，被打破的有些突然，有些毫无防备。也许远程工作就是这样的吧，在察觉不到异常时其实危险已经悄然接近了。我一向是这么悲观，一时间有点不知所措了。远程工作一年了，本想也是最近来写一写这一年的工作和生活，但没想到实在这样的场合下。还是比较幸运吧，那个机会，让我从紧张的 996 生活中脱离出来，缓解了长期压力带来的抑郁情绪。想想过去一年挺美好的，工作自由，有时间做开源，做了一个完整的项目开源了，线下和推友面基多次也认识了挺多厉害的人，有时候去会去参加一些活动，听大佬们讲故事。但这一年，也挺后悔的。没有尝试更多事，还是不敢跨出那一步，或许那么长的时间里，我应该学习一门语言，尤其是英语，或者培养一个兴趣并长期的支持，再或者也许该找个对象了。但是我都没有做到，因为不稳定性，总是不能迈出第一步。更多的是内心深处的害怕，未来的变数，我不知道在绝境中如何度过了。总是围绕在危机感中，却总是无动于衷，我最大的失败在此，害怕和懦弱总是在心底，走不出来成不了强大的人，能够依靠的人。没有阳光，眼中都是黑暗的人，注定是一个失败的人。如果我安慰自己道，是应该往前走了。我的生活还没有这么糟，我的人生还没有这样失败，总是因为恐惧和胆怯一 ...继续阅读 (44)

该渲染由 Shiro API 生成，可能存在排版问题，最佳体验请前往：$https://innei.in/notes/169已经很久没有写过手记了。一是觉得并没有太多新奇的，二是我总是在写丧气文，污染网络环境。最近网站看的人还是多了起来，发点什么内容还是要静下来想想。或许看的人多了，或许也不是一件好事，原本我只是当做一个个人的小空间，想点什么写点什么，抱怨丧气也许是最多的情感。当有了流量之后，什么都要变得小心翼翼，就想一种无形的枷锁，让这个原本自由的空间又加了一层牢笼。毕竟互联网是有记忆的，和现实相比，这些记忆会永存，人人都可以翻旧账，而不是只是停留在少数人的脑海里。作为 I 人，在现实中唯唯诺诺，不敢说话生怕说错了什么感到深深自责，而在网络上，会更加放大这个事件。现在觉得，虽然网络相互不相见，但比起现实却更加恐怖。最近发生的事：近期一次前往上海，面基了rxliuli，去了 b 站大楼楼下打卡。https://x.com/rxliuli/status/1781960293293371392因为 Vercel 价格调整（最受不了的是带宽变更，从原本的通用 100G 变成了边缘计算数据传输 10G + 原本的 100G，看起来多了其实少了，短板效应 10G 不够用），我转向私有服务器部署本站点。上个月疯狂输出技术类文章，有点累了，不过还挺快乐的。ESLint v9 的升级让我陷入长期 ...继续阅读 (35)

该渲染由 Shiro API 生成，可能存在排版问题，最佳体验请前往：$https://innei.in/posts/design/page-transition-animation-and-lcp现代 Web 中，在页面之间跳转对内容增加动画并不少见。比如，我在「手记」中在页面中切换中加入了纸张划出的效果。页面动画的时间控制在 500ms 之内，既不会感觉很慢也不会很快。因为我需要使用 Spring 动画去拟合一个更加真实的动画，使用了 Framer Motion 去制作动画。页面过度动画非常好用，有效避免了切换内容时的突兀感。很快我注意到，如果过渡效果出现在页面第一次进入时，会变得非常奇怪。也许这个动画应该消失，因为用户第一次进入页面也许只想更快的看到内容，而不是动画，和动画之后才会呈现的完整内容。下面的例子也许更加明显感觉到缓慢。尤其是如果 JS 加载缓慢，这个动画效果还会推迟的更久，而此期间你将看不到任何内容，这个体验是非常糟糕的。现在我们对其优化，这样是不是好多了。嗯，看上去快多了，也有效提升了 LCP。动画整挺好，还是用在合适的地方最好。滥用的动画也许只会让它看起来更慢。资源关于动画，收集了以下的参考资源：https://developer.apple.com/videos/play/wwdc2023/10158?time=96https://animations.de ...继续阅读 (53)

当前内容无法在 RSS render 中正确渲染，请前往：$https://innei.in/posts/tech/why-react-server-component-2 ...继续阅读 (42)

当前内容无法在 RSS render 中正确渲染，请前往：$https://innei.in/posts/dev-story/shiki-dynamic-load-language ...继续阅读 (45)

当前内容无法在 RSS render 中正确渲染，请前往：$https://innei.in/posts/tech/why-react-server-component-1 ...继续阅读 (40)

该渲染由 Shiro API 生成，可能存在排版问题，最佳体验请前往：https://innei.in/posts/tech/how-to-handle-page-exceptions-in-next-js-app-router在服务端渲染中，页面预渲染需要的数据一般由服务器提供。在 Next.js 框架中，可分为两种。Next.js 作为全站框架，获取数据直接在 Next.js 服务中调用方法；或者借助外部 API 服务，通过 HTTP 或者其他方式获取数据。在获取数据的过程中，可能会出现异常，例如网络请求超时、服务端异常等。这时候，我们需要对异常进行处理，以保证页面的正常渲染。编写一个简单的数据接口和页面渲染下面是一个简单的例子。这是一个简单的获取posts接口实现。import { NextResponse } from 'next/server' import type { NextRequest } from 'next/server' export const GET = ( req: NextRequest, { params, }: { params: { id: string } }, ) => { const { id } = params switch (i ...继续阅读 (64)

该渲染由 Shiro API 生成，可能存在排版问题，最佳体验请前往：https://innei.in/posts/tech/using-sharedworker-singleton-websocket-in-nextjs在之前的文章中，我详细的介绍了站点的实时人数是如何实现的？，在方案中，我留下了一个悬念，如何使用 SharedWorker 在页面之间共享 Socket 实例，实现跨页面单例 WebSocket。动机探索这个问题的背景是无意间在知乎看到了 WebSocket 的一个问题，其中有回答提到 WebSocket 连接过于占用服务器资源。当页面重复打开很多个时，每个页面都会建立 WebSocket 连接，确实无意间的增大了服务器压力。虽说这个问题我之前也有考虑过，但是由于个人站点并不会出现大量的用户同时在线，所以并没有深入研究。我们使用的是 Socket.IO 的方案建立 WebSocket 连接，Socket.IO 本身就是对 WebSocket 的封装，所以从开销上来说，Socket.IO 会比原生 WebSocket 多一些开销。关于 Socket.IO 连接对服务器侧的内存开销，文档中有所提及：Memory Usage | Socket.IO。虽然这点性能优化不痛不痒也没有任何提升，但是既然有这个问题，那我们这次就试着去解决这个问题。找到方案我们要解决的问题很明确 ...继续阅读 (73)

该渲染由 Shiro API 生成，可能存在排版问题，最佳体验请前往：https://innei.in/notes/167转眼间，已经走到了人生的第二个生肖年。回顾过去的这段人生，我竟发现没有什么值得被记录的。过去的二十四年，我一直都活在走不出的阴影里。从小我就是一个非常自卑的人，害怕与人交流让我过去一直走不出孤独，少有的友谊，不懂得如何维系一段人际关系，常常患得患失，越来越害怕开始一段新的经历。我的人生路程总是在害怕中退缩，越来越不敢开启一段新征程。而现在也是一样，或许是孤独太久了，渴望与人交流，渴望出去去社交，却又只想把自己关起来的矛盾心理。真是可笑。每次想做一件事的时候，想做和真正想去做之间如果打个分的话，我可能什么都不想做。但这就是我现在的常态。在过去的大部分时间里，我总出现这个世界的美好都与我无关了类似的想法，美好的事物总是留不住的，因此我不会想去遇见它了。害怕失去，而宁愿从来没有过的悲观心境，让我在不经意间错过了太多美好。我的前二十三年过得很失败。我没有培养出什么爱好，没有什么成就，没有去过什么地方，也留不住什么朋友。不知道怎么处理人际关系，害怕与人交流，害怕尝试新事物，不够自信，天马行空又不敢付出行动。在去年，一切都发生了转机。我越来越确信那次选择是对的。那次的选择让我认识很多朋友，也慢慢开始学会去社交了。我开始向内探问，思考如何突破这围绕自我的壁垒，这本身就标志着我 ...继续阅读 (56)

该渲染由 Shiro API 生成，可能存在排版问题，最佳体验请前往：https://innei.in/posts/tech/nextjs-runtime-env-and-build-once-deploy-many我们一般通过控制 env 的方式去做到"Build once, deploy many"哲学。但是在 Next.js 中，环境变量分为两种，一个种是可被用于 Client 侧的NEXT_PUBLIC_开头的环境变量，另一个种是只能被用于 Server 侧的环境变量。前者会在 Next.js 构建时被注入到客户端代码中，导致原有代码被替换，那么也就意味着我们控制 env 并不能做到一次构建多处部署。一旦需要部署到不同的环境并且修改 env，我们就需要重新构建一次。今天的文章，我们将会探讨如何通过 Next.js 的 Runtime Env 来实现一次构建多处部署。Next.js Runtime Env今天的主角是next-runtime-env这个库，它可以让我们在 Next.js 中使用 Runtime Env。我们可以通过它来实现一次构建多处部署。npm i next-runtime-env更换 Client 侧的环境变量使用方式：import { env } from 'next-runtime-env' const API_URL = pro ...继续阅读 (68)

该渲染由 Shiro API 生成，可能存在排版问题，最佳体验请前往：https://innei.in/posts/dev-story/how-is-the-real-time-headcount-at-the-site-achieved经常光顾我站的读者应该都看到过我站底部有显示当前在线的人数。在不久之前我还为其增加了显示当前正在阅读具体哪篇文章的人数排行，并且在具体的某篇文章左侧增加时间线，用于展示当前所有正在阅读此文章的读者阅读进度。如果你看过我站的开源项目的话大概知道此站是由 Mix Space 驱动的，既然已经需要有服务器驱动，那么我基本没有其他平台提供的服务了，能自己去实现的基本都是自己去实现。比如这个功能，如果你用 SasS 服务，则可以选择Liveblocks。当然这里不做讨论，因为此文章的目的是如何自己去实现这样一个功能，服务端以及前端。设计与实现实时人数的统计，需要长连接。这里可以使用 WebSocket，当然如果你不需要特别实时的情况也可以使用轮询的方式。这里我们还是以 Socket.IO 实现，Socket.IO 是 WebSocket 的上层封装。下面对上面的功能进行拆解分析。站点的实时人数所有的实时人数是比较好统计的。我们可以考虑用所有的 WebSocket 连接去统计当前的在线人数。如果使用这个方法，那么没有连接到 WebSocket 的读者，不计入在 ...继续阅读 (67)

该渲染由 Shiro API 生成，可能存在排版问题，最佳体验请前往：https://innei.in/notes/166时间总是过得很快，但又觉得过得很慢。过去的一个月中，我感觉我什么都没有干，但仔细回想一下，又好像做了挺多事。Next.js 小册写了 7 节，同时也开源了一个非常简单的 SSG 模板https://github.com/Innei/book-ssg-template把Shiro用的Modal 组件封装成一个库了，同时也输出了一篇如何写一个库的文章，发布之后又一次让本站的流量达到了一个高峰。到现在，这篇文章还有 12 人在读。https://github.com/Innei/rc-modal此图片不支持在 RSS Render 中查看。第一次接到了 AMA，如果有需要的话可以找我呐。一对一咨询最近的想法碎碎念垃圾桶总要找点事做。最近连续一个月都在使用多邻国学习日语。已经很久没有弹过琴了，双音开始弹不来一点坚持不下去，现在基本都忘完了。最近在联系一些厨艺，偶尔学着一些视频做菜。（对了，今天的晚饭是番茄培根虾滑卷，特下饭。食谱：培根卷上下滑。番茄切碎。 先煎培根卷，然后加切碎的番茄和酱汁（番茄酱+少许酱油+盐+水）烧成汤汁浓稠）此图片不支持在 RSS Render 中查看。总是感到焦虑，我今天又是一事无成的一天呐，虚度光阴真的很可悲。这是这样的心理，再一次又来到了情绪 ...继续阅读 (65)

该渲染由 Shiro API 生成，可能存在排版问题，最佳体验请前往：https://innei.in/posts/tech/write-a-universally-compatible-js-library-with-fully-types最近，把rc-modal做成了一个库。写代码倒是不难，无非就是把原本的代码封装抽象一下。倒是发包，和作为使用者如何使用这个包难住了。首先，我们知道现在一个 npm 包如果不做 Pure ESM 的话，你需要考虑兼容 CJS/ESM，node 老版本和新版本（吃不吃 package.json 的 exports 字段），和 TypeScript 针对这些情况推出bundler开启了特征和没有开启bundler的项目。那么，我们需要保证使用方不管是哪个版本 node 在 module resolution 没有问题，不管你的项目有没有开启type: module都没有问题，不管你的 TypeScript 有没有开启"moduleResolution": "Bundler"也都没有问题。另外，还需要保证，打包出来的产物，不能丢失源代码中存在的"use client"directives。所以，下面的例子我们来写一个这样的库，需要全面兼容上面的所有场景。初始化写库首先选择打包工具，目前常见的有：rollup, esbuild。rollup 在兼容上最好 ...继续阅读 (74)

该渲染由 Shiro API 生成，可能存在排版问题，最佳体验请前往：https://innei.in/posts/tech/vercel-cloudflare-http-header-about-cache本文以 Cloudflare + Vercel 为例。了解缓存标头在生产中，我们通常会利用 Redis 去缓存接口数据。对于前端应用来说，我们一般会利用内容分发网络（CDN）去缓存页面和其他静态资源。我们知道 HTTP 标头cache-control可以用来强缓存资源。例如，cache-control: max-age=60表示资源在 60 秒内不会过期，浏览器如果不使用强制刷新的话（例如请求标头含有cache-control: max-age=0）可以直接使用本地缓存。在边缘网络或是内容分发网络中，一般都能相关的标头进行缓存。比如：s-maxage的值。这个内容只能在原文中查看哦而这个值，一般都被 CDN 或者边缘网络用来控制缓存时间。在 Vercel 中。Cache章节中，告诉我们可以使用这个值去控制一个 API 响应的缓存时间。另外也提供了 Vercel 私有的 HTTP 标头，例如Vercel-CDN-Cache-Control。在 Cloudflare 中，When to use CDN-Cache-Control中的例子可以更好的帮助理解资源在各端的缓存控制。Hea ...继续阅读 (62)