#优质博文 #前端 #javascript
Broadcast Channel API简介，可实现Web页面广播通信

AI 摘要：Broadcast Channel API 允许同源的不同浏览上下文（如窗口、标签页、iframe）之间进行广播式通信。通过创建同名的 BroadcastChannel 对象，页面可以发送和接收消息，实现实时数据同步。例如，创建频道：const bc = new BroadcastChannel('channel_name');，发送消息：bc.postMessage('message');，接收消息：bc.onmessage = (event) => { console.log(event.data); };。该 API 兼容性良好，支持在 Web Worker 中使用，适用于需要跨页面实时通信的场景。

https://developer.mozilla.org/en-US/docs/Web/API/Broadcast_Channel_API

via 张鑫旭

MDN Web Docs

Broadcast Channel API - Web APIs | MDN

The Broadcast Channel API allows basic communication between browsing contexts (that is, windows, tabs, frames, or iframes) and workers on the same origin.

cosine - 前端人の日常频道

#碎碎念 #新装备 知更鸟水月雨耳机到了！ 喜欢！

#视频 #碎碎念
今天没有卷，今天是快乐余弦！
水月雨知更鸟联名耳机开箱！太美了
@余弦Cocos:
数码 - 终于到了，我太喜欢这个耳机的质感了w
亚克力砖已经供起来了（x

Bilibili

水月雨知更鸟联名耳机开箱！太美了_哔哩哔哩_bilibili

终于到了，我太喜欢这个耳机的质感了w亚克力砖已经供起来了（x, 视频播放量 621、弹幕量 0、点赞数 10、投硬币枚数 0、收藏人数 3、转发人数 0, 视频作者 余弦Cocos, 作者简介 我们短暂的人生里并没有“总有一天”。 ，相关视频：【新品开箱】水月雨新年礼盒沉浸式开箱，偏科战神｜水月雨知更鸟使用体验，激动！水月雨给我寄了个新年大礼包！看看里面装了什么，崩坏星穹铁道水月雨联名耳机开箱，水月雨×崩坏星穹铁道联名耳机开箱记录，随意的开箱【耳机开箱】水月雨X《歌手》联名款耳机通售版开箱，1月3号某宝…

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

#优质博文 #前端 #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.