呜啦!日常碎碎念,偶尔掉落优质前端博文推荐、学习资源等
网页:https://tg.cosine.ren
本频道的搜索Bot 来辣 👉 @cosSearchBot
私聊直接发消息就可以搜索啦~
🔖tags
#优质博文 #资源推荐 #博客更新 #碎碎念 #项目更新 #手工 #书摘 #阮一峰的科技周刊 #新动态

图频:Cosine 🎨 Gallery @CosineGallery
猫片: @cosine_cat
#优质博文 #前端 #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 投稿
#无限暖暖 #碎碎念
感觉无限暖暖移动端好像优化了不少,这俩张我ipad上随手拍的,衣服居然有不少细节了www场景毕竟我没选对地方
但我永远爱 pc 的女鹅!!等闲下来拍拍拍拍
cosine - 前端人の日常频道
#碎碎念 怎么有人无聊到做 lottie 动画啊岂可修 等一下这个画爱心好好玩儿(x
#碎碎念
WIP~
昨天写的一点点小网站的预览🥰
figma 和 lottie 做动画都是现学的!
审美就这样了没救了喵😉
瀑布流 or 分页这块肯定还是要优化的,我想是加个开关,因为我自己看的时候想要分页。
右下角还得有个悬浮工具栏回顶部和调设置🤔
关于 logo 欢迎锐评来点建议呜呜呜呜呜感觉元素堆砌太多了()
#碎碎念
怎么有人无聊到做 lottie 动画啊岂可修
等一下这个画爱心好好玩儿(x
#碎碎念
新装备+1
u1s1这鼠标真好看喵,摸着也很舒服
无极滚轮好用喵
#碎碎念
冬天的我,根本不想出被窝,已经在床上窝俩天了😭
被窝太暖和惹——就是容易腿麻
你别说这不知道哪翻出来的小床上桌巨稳当
#工具推荐 #前端 #在线网站 #markdown #html
Html To Markdown 是一个将 HTML 转换为 Markdown 格式的工具,支持高效、精准的内容格式转换。它适合开发者和内容创作者,将复杂的 HTML 代码快速简化为轻量级、可读性强的 Markdown 格式,从而便于在文档、博客和其他 Markdown 支持的平台上使用。
cosine - 前端人の日常频道 via @Music163bot
1-Zero/Kevinz/言和/乐正绫 – INFP
#碎碎念 #音乐

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

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

歌词真的每一句都很戳

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


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

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

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

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

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

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

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

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

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

该扩展可从 Chrome 网上应用店安装,适用于设计师和开发者,提升设计系统中颜色管理的效率。
#前端 #趣站 #css #tools #course
CSS 选择器知识 —— CSS选择器2024年降临日历(CSS Selectors Advent Calendar 2024)是一个为期24天的学习计划,每天介绍一个新的CSS选择器。每个课程包含简短的视频教程和测验,帮助开发者掌握关键的CSS选择器,提升前端开发技能。 CSS Selectors
cosine - 前端人の日常频道
#优质博文 #前端 #设计 #css #新特性 New Front-End Features For Designers In 2025 AI 摘要:2025年前端迎来诸多新特性,包括容器查询、:has()伪类、相对颜色等CSS功能,以及text-wrap: balance优化排版,视图转换API实现页面间平滑过渡,<dialog>元素提供原生模态支持,自动字段大小调整和:user-valid伪类改进表单交互。这些特性大幅简化开发流程,提升UI组件的响应性和用户体验。 via Cosima Mielke…
#优质博文 #前端 #css #新特性
摘自 New Front-End Features For Designers In 2025 方便检索

1. CSS scroll snap 让用户可以精确地左右滑动并捕捉到容器中的特定项目,无需 JavaScript。 (这个之前用到过,挺丝滑的)
2. Introduction to the CSS Anchor Positioning API(CSS 锚点定位 API 的介绍) CSS 锚点定位 API 使我们能够相对于其他元素定位元素。
3. 相对颜色语法 (RCS) 可以根据给定颜色创建新颜色。要导出和计算新颜色,我们可以使用颜色函数( color() 、 hsl() 、 oklch()等)的from关键字来修改输入 color 的值。 Adam Argyle 分享了一些实践中的代码片段,或者查看规范以获取更多详细信息。
4. 有了:user-valid和:user-invalid ,我们现在有了一个可以自动处理所有这些的原生 CSS 解决方案。与:valid和:invalid相反, :user-valid和:user-invalid伪类仅在用户更改输入后才向用户提供有关错误的反馈。 :user-valid和:user-invalid适用于输入、选择和文本区域控件。
5. :focus-visible旨在帮助我们为这两个用户组创造最佳体验:它为键盘用户显示焦点样式,为鼠标用户隐藏焦点样式。MDN Web Docs 重点介绍了:focus和:focus-visible之间的差异、您需要在可访问性方面考虑什么,以及如何为不支持:focus-visible旧浏览器版本提供后备。
6. 现在,可以使用媒体查询来提供响应式 HTML 视频。根据浏览器的视口调整视频和音频文件可以减少页面负载。 New Front-End Features For Designers In 2025 — Smashing Magazine
#优质博文 #前端 #设计 #css #新特性
New Front-End Features For Designers In 2025

AI 摘要:2025年前端迎来诸多新特性,包括容器查询、:has()伪类、相对颜色等CSS功能,以及text-wrap: balance优化排版,视图转换API实现页面间平滑过渡,<dialog>元素提供原生模态支持,自动字段大小调整和:user-valid伪类改进表单交互。这些特性大幅简化开发流程,提升UI组件的响应性和用户体验。

via Cosima Mielke

还有 field-sizing 这种好东西啊 New Front-End Features For Designers In 2025 — Smashing Magazine
#优质博文 #前端 #css #动画
View Transitions Snippets: Keeping track of the old and new positions of a transitioned element

AI 摘要:作者介绍了如何在使用视图过渡(View Transitions)时,获取元素在过渡前后的位置信息。通过在过渡开始前调用 getBoundingClientRect() 获取元素的初始位置和尺寸,在过渡更新回调完成后再次调用该方法获取新的位置和尺寸。这些信息可用于调试或自定义动画效果,例如替换浏览器生成的 ::view-transition-group() 关键帧,以实现更高效的动画。作者还指出,直接从 ::view-transition-group() 的关键帧中提取位置信息的方法由于浏览器实现中的错误和偏移参考系的问题,可能不可行。

via Bramus View Transitions Snippets: Keeping track of the old and new positions of a transitioned element
Back to Top