#碎碎念
“你快看！这个门后面住了个二次元”

#优质博文 #前端 #typescript #node
Everything You Need to Know About Node.js Type Stripping
关于有关 Node.js 类型剥离你需要知道的一切技术细节和原因。

AI + 人工摘要：Node.js 在 v23.6.0 引入类型剥离功能，通过移除 TypeScript 类型注解，无需配置即可运行代码，显著提升开发体验。

为什么不嵌入类型检查

- 类型检查依赖 TypeScript 编译器（tsc），其更新频繁且易引入不兼容变化。
- tsc 体积过大（约 22MB），会显著增加 Node.js 运行时体积。
- 在日常开发中，类型检查已在 IDE 中实时完成，运行时并无必要

类型剥离的核心机制

- Node.js 使用定制版的 swc 实现类型剥离，保证性能和稳定性。
- 剥离类型后保留代码结构，避免生成额外的 source map，减少性能开销。
- 某些 TypeScript 功能不能简单地剥离，因为它们会生成影响运行时行为的 JavaScript 代码（如枚举、命名空间和参数属性） 需通过 --experimental-transform-types 手动启用转换。

Node.js 通过将已删除的语法替换为空格来消除对源映射的需求，从而确保代码和结构的原始位置保持不变。它是透明的 —— 运行的代码是作者编写的代码，擦除类型。此技术受到 Bloomberg 的 Ashley Claymore 的 ts-blank-space 的启发。

限制与权衡

- 不支持 tsx：由于前端框架（如 React、Vue）依赖特定的编译方式，tsx 文件不符合 Node.js 后端运行时的目标。
- Node.js 禁止运行 node_modules 中的 .ts 文件，此决定是与 TypeScript 团队合作做出的，避免兼容性与性能问题，开发者需发布 .d.ts 和编译后的 JavaScript。

未来展望

- TypeScript 团队正引入新特性（如 rewriteRelativeImportExtensions），与 Node.js 类型剥离协同。
- 在下一个 TypeScript 版本（可能是 5.8）中，可能会引入 --erasableSyntaxOnly 标志将在 Editor 中提前暴露不支持的 TypeScript 特性，提升开发体验。
- Joyee Cheung 正在探索 Node.js 中 TypeScript 文件的编译缓存。这可以通过重用缓存的编译代码来加快后续模块加载速度，从而显著提高重复工作流的性能。

author Twitter@satanacchio Original Post

via @hyoban 投稿

cosine - 前端人の日常频道

#碎碎念 怎么有人无聊到做 lottie 动画啊岂可修 等一下这个画爱心好好玩儿（x

#碎碎念
WIP~
昨天写的一点点小网站的预览🥰
figma 和 lottie 做动画都是现学的！
审美就这样了没救了喵😉
瀑布流 or 分页这块肯定还是要优化的，我想是加个开关，因为我自己看的时候想要分页。
右下角还得有个悬浮工具栏回顶部和调设置🤔
关于 logo 欢迎锐评来点建议呜呜呜呜呜感觉元素堆砌太多了（）

#碎碎念
怎么有人无聊到做 lottie 动画啊岂可修
等一下这个画爱心好好玩儿（x

#碎碎念
冬天的我，根本不想出被窝，已经在床上窝俩天了😭
被窝太暖和惹——就是容易腿麻
你别说这不知道哪翻出来的小床上桌巨稳当

#工具推荐 #前端 #在线网站 #markdown #html
Html To Markdown 是一个将 HTML 转换为 Markdown 格式的工具，支持高效、精准的内容格式转换。它适合开发者和内容创作者，将复杂的 HTML 代码快速简化为轻量级、可读性强的 Markdown 格式，从而便于在文档、博客和其他 Markdown 支持的平台上使用。

www.htmltomarkdown.io

Html To Markdown - Free HTML to Markdown Online Converter

Convert HTML to Markdown online, Efficiently manage and migrate your web content.

cosine - 前端人の日常频道 via @Music163bot

1-Zero/Kevinz/言和/乐正绫 – INFP

#碎碎念 #音乐

「INFP」- 1-Zero/Kevinz/言和/乐正绫

又漫游到了好歌喵，u1s1 这首好像很早以前就听过没收藏。
说起来你们可能不信，但是刚毕业的时候做 MBTI 职场测试的时候咱确实是 INFP - 调停者，虽然看上去不像～

歌词真的每一句都很戳

平心而论 也不是高冷 盛气多凌人
是我 更愿当社交场的陪衬
目眩头昏 耗尽了元神 取悦每个人
心却更烦闷 只想早些抽身
我们有各种习性 热络或安静
恐怕难以适应 另一极的环境
并不是每具身体 都有抱团取暖的愿景
不擅于言谈 不代表需要可怜
居住在舒适圈 也不等同于裹足不前
或步履维艰

世界变幻 我还想用力去冒险 不为什么而牵绊
灵感是不竭的泉 呼吸都自由怡然
方寸屋也气象万千 音乐声在流转
有许多心愿仍要实现 独处便不会令我孤单
粗略数来 也有好伙伴 亲密到无间
时常 想要碰面尽兴聊聊天
自我推演 或许是讨厌 舍弃分寸感
造一些笑脸 给过路的云烟
我们有各种习性 热络或安静
恐怕难以适应 另一极的环境
并不是每具身体 都有抱团取暖的愿景
不擅于言谈 不代表需要可怜
居住在舒适圈 也不等同于裹足不前
或步履维艰

世界变幻 我还想用力去冒险 不为什么而牵绊
灵感是不竭的泉 呼吸都自由怡然
方寸屋也气象万千 音乐声在流转
有许多心愿仍要实现 独处便不会令我孤单
宇宙大千 许多是你我所未见 彼此有各自航线
我姑且想要偏袒 探索创造的欲念
精神食粮足以消遣 不沉闷也不慌乱
每分秒都真切饱含 我的赤诚不歇的心愿

网易云音乐

INFP

歌曲名《INFP》，由 1-Zero、Kevinz、言和、乐正绫 演唱，收录于《INFP (alone but not lonely.)》专辑中

「INFP」- 1-Zero/Kevinz/言和/乐正绫
专辑: INFP (alone but not lonely.)
#网易云音乐 #mp3 31.10MB 1580.15kbps
via @Music163bot

INFP

1-Zero/Kevinz/言和/乐正绫

#优质博文 #前端 #react #test
Testing knarly React hooks 测试复杂的 React 钩子

AI 摘要：这篇文章介绍了在 React 中测试复杂的自定义 Hooks 的方法，特别是那些涉及 useEffect、异步操作、setInterval 和状态更新的 Hooks。
作者建议使用 renderHook（来自 @testing-library/react-hooks）来获取 Hook 的结果对象，并强调在引起状态更新的操作中使用 act 进行包装。
此外，文章提到使用 waitFor 来等待异步代码的断言通过，以及利用 Jest 的模拟计时器（jest.useFakeTimers）来处理定时器相关的测试。
这些技巧有助于有效地测试复杂的 React Hooks。

via Trys Mudford's Blog

Trysmudford

Testing knarly React hooks | Trys Mudford

Testing knarly React hooks | Trys Mudford | Frontend developer

#前端 #css #tailwind #color #配色
Flexoki

AI 摘要：Flexoki 是一款专为数字屏幕阅读和书写设计的开源墨水风格配色方案，灵感来自纸张和传统墨水。它采用高对比度、感知平衡的颜色，适用于多种应用程序和模式（明暗）。该配色基于 Oklab 色彩空间，优化了颜色的感知一致性和可读性，同时保留了艺术和科学的平衡。Flexoki 提供基础颜色、强调颜色和扩展调色板，用于代码高亮和界面设计，旨在营造温暖鲜活的视觉效果。

via Frontend Focus #674

Steph Ango

Flexoki

An inky color scheme for prose and code.

#前端 #工具推荐 #浏览器插件 #tools #tailwind #shadcn #color
CSS Variables Editor —— CSS Variables Editor 是一款浏览器扩展，旨在简化 CSS 变量中颜色的管理。 其主要功能包括：

- AI 生成的色彩方案：通过集成 OpenAI 或 Anthropic API，快速生成并在实际应用中预览色彩方案。

- 无障碍测试：根据 WCAG 指南检查色彩对比度，确保设计的可访问性。

- 实时颜色编辑：直接在浏览器中修改 CSS 变量的颜色值，实时预览更改效果，提升设计与代码的协作效率。

- 支持 daisyUI 和 shadcn/ui：提供官方文档中的颜色描述，确保在应用中正确使用，并避免忽略弹出框、聚焦环等状态的设计。

- 导出更改：支持导出修改后的 CSS 变量，遵循 Tailwind 的推荐实践。

该扩展可从 Chrome 网上应用店安装，适用于设计师和开发者，提升设计系统中颜色管理的效率。

Cssvariables

CSS Variables Editor - AI Browser Extension for managing colors in CSS Variables

CSS Variables Editor is the Browser Extension for managing colors in CSS Variables. AI-generated color palettes. Accessibility testing. Support for shadcn/ui and daisyUI (more coming soon).

#前端 #趣站 #css #tools #course
CSS 选择器知识 —— CSS选择器2024年降临日历（CSS Selectors Advent Calendar 2024）是一个为期24天的学习计划，每天介绍一个新的CSS选择器。每个课程包含简短的视频教程和测验，帮助开发者掌握关键的CSS选择器，提升前端开发技能。

css-selectors.dev

CSS Selectors

Learn, practice, master - CSS Selectors for simpler coding and become a CSS hero