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

cosine - 前端人の日常频道

#碎碎念 图库小网站今天的进度 - 加了一点点小交互w

#碎碎念 #折腾
昨天拼尽全力把无限滚动模式也弄出来了

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

codeparrot.ai

Implementing Infinite Scroll in React Apps

Infinite scroll is a technique that loads content continuously as the user scrolls down the page, eliminating the need for pagination. This approach can

#碎碎念
图库小网站今天的进度 - 加了一点点小交互w

0:16

Media is too big

VIEW IN TELEGRAM

#docs #swift #react #course
star ⭐ swiftui-for-react-devs

发现一本宝藏小册。For reacter
https://github.com/unixzii/swiftui-for-react-devs

https://fixupx.com/__oQuery/status/1879106012369842377

GitHub

GitHub - unixzii/swiftui-for-react-devs: A cheat sheet that helps React developers to quickly start with SwiftUI.

A cheat sheet that helps React developers to quickly start with SwiftUI. - unixzii/swiftui-for-react-devs

#组件库 #tools #前端 #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 的简单图片裁剪组件，支持图片和视频裁剪，提供直观的用户交互界面。它支持拖动、缩放、旋转等操作，易于集成和自定义。适合在头像上传、图片编辑等场景中快速实现裁剪功能。

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）之间进行广播式通信。通过创建同名的 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