呜啦！日常碎碎念，偶尔掉落优质前端博文推荐、学习资源等
网页：https://tg.cosine.ren
本频道的搜索Bot 来辣 👉 @cosSearchBot
私聊直接发消息就可以搜索啦～
🔖tags
#优质博文 #资源推荐 #博客更新 #碎碎念 #项目更新 #手工 #书摘 #阮一峰的科技周刊 #新动态
图频：Cosine 🎨 Gallery @CosineGallery
猫片： @cosine_cat
网页：https://tg.cosine.ren
本频道的搜索Bot 来辣 👉 @cosSearchBot
私聊直接发消息就可以搜索啦～
🔖tags
#优质博文 #资源推荐 #博客更新 #碎碎念 #项目更新 #手工 #书摘 #阮一峰的科技周刊 #新动态
图频：Cosine 🎨 Gallery @CosineGallery
猫片： @cosine_cat
#视频 #无限暖暖
【无限暖暖混剪】像花一样~肆意绽放~不去管 有没有人欣赏~
@余弦Cocos:
GMV - 就觉得这首歌很棒加上想把给女儿拍的照片视频都发一下所以用我贫瘠的剪辑水平搓了一下呜呜呜呜呜呜呜呜呜呜
其实拍的横屏照片更多，等回头有空了再剪一下横屏的版本，有几张特别喜欢的w
bgm 是 橘子汽水 的 像花一样
【无限暖暖混剪】像花一样~肆意绽放~不去管 有没有人欣赏~
@余弦Cocos:
GMV - 就觉得这首歌很棒加上想把给女儿拍的照片视频都发一下所以用我贫瘠的剪辑水平搓了一下呜呜呜呜呜呜呜呜呜呜
其实拍的横屏照片更多，等回头有空了再剪一下横屏的版本，有几张特别喜欢的w
bgm 是 橘子汽水 的 像花一样
#优质博文 #前端 #UX #设计
Should navigation bars be sticky or fixed?
AI 摘要：文章对比了粘性导航和固定导航的特点与适用场景：粘性导航随滚动停留顶部，适合长页面，提高可用性但占空间；固定导航始终在顶部，增强一致性但可能影响设计。作者建议根据用户需求和内容选择合适方案，并注重响应式设计和用户体验优化。
Should navigation bars be sticky or fixed?
AI 摘要：文章对比了粘性导航和固定导航的特点与适用场景：粘性导航随滚动停留顶部，适合长页面，提高可用性但占空间；固定导航始终在顶部，增强一致性但可能影响设计。作者建议根据用户需求和内容选择合适方案，并注重响应式设计和用户体验优化。
LogRocket Blog
Should navigation bars be sticky or fixed? - LogRocket Blog
Choosing between sticky and fixed navigation isn’t just a design decision — it’s a strategic one. In this blog, we talk about how each type impacts usability, engagement, and conversion rates.
昨天
https://pic.cosine.ren/
可以先用啦，最核心的简单的看图功能有了～
待添加的功能和优化还有很多～比如标签和标签筛选什么的。
由于数据库还是要兼容之前的 sqlite 数据库，所以更新不是实时，可能随缘同步，等 bot 迁移到 PostgreSQL 之后就可以实时更新了。
理论上只要是 cosine-pic-bot 妲喵的 bot 驱动的图库频道就可以部署，但是他的标签结构太阴间了，等优化完了估计就不兼容了
TODO:标签、友链页面、检索、反馈、SEO 优化、UI 优化！
#优质博文 #前端 #react #瀑布流
Implementing Infinite Scroll in React Apps 在 React 应用程序中实现无限滚动
Masonry Layouts in React React 中的 Masonry 布局
via codeparrot.ai Blogs
Implementing Infinite Scroll in React Apps 在 React 应用程序中实现无限滚动
Masonry Layouts in React React 中的 Masonry 布局
via codeparrot.ai Blogs
#组件库 #tools #前端 #react #动画
star ⭐ react-bits
react-bits是一个开源的React组件集合，提供动画、互动和完全可定制的组件，用于构建令人惊艳和难忘的用户界面。
star ⭐ react-bits
react-bits是一个开源的React组件集合，提供动画、互动和完全可定制的组件，用于构建令人惊艳和难忘的用户界面。
GitHub
GitHub - DavidHDev/react-bits: An open source collection of animated, interactive & fully customizable React components for building…
An open source collection of animated, interactive & fully customizable React components for building stunning, memorable websites. - DavidHDev/react-bits
#工具推荐 #tools #组件库 #react #开源
star ⭐ react-easy-crop
AI 摘要：react-easy-crop 是一个用于 React 的简单图片裁剪组件，支持图片和视频裁剪，提供直观的用户交互界面。它支持拖动、缩放、旋转等操作，易于集成和自定义。适合在头像上传、图片编辑等场景中快速实现裁剪功能。
star ⭐ react-easy-crop
AI 摘要：react-easy-crop 是一个用于 React 的简单图片裁剪组件，支持图片和视频裁剪，提供直观的用户交互界面。它支持拖动、缩放、旋转等操作，易于集成和自定义。适合在头像上传、图片编辑等场景中快速实现裁剪功能。
GitHub
GitHub - ValentinH/react-easy-crop: A React component to crop images/videos with easy interactions
A React component to crop images/videos with easy interactions - ValentinH/react-easy-crop
#优质博文 #前端 #javascript
Broadcast Channel API简介，可实现Web页面广播通信
AI 摘要：Broadcast Channel API 允许同源的不同浏览上下文（如窗口、标签页、iframe）之间进行广播式通信。通过创建同名的
https://developer.mozilla.org/en-US/docs/Web/API/Broadcast_Channel_API
via 张鑫旭
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.
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 投稿
