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

图频:Cosine 🎨 Gallery @CosineGallery
猫片: @cosine_cat
#面基
昨晚又面了 🥹 今天回广州!
#视频更新 #无限暖暖 #碎碎念
把某人很久没用的油管频道据为己有了(这次传了 YouTube,后边可能把之前的一些视频都传上去也)
频道 @nahida0721
YouTube 5090D 画质拉满带鱼屏下的无限暖暖打水漂
B 站又压我画质,没爱了
https://www.bilibili.com/video/BV1ufGBz6Ema
怎么感觉还是录糊了,喵的,等回去换个源
#tools #npm #开源 #工程化 #可视化

Announcing @Tan_Stack NPM Stats (Beta)

AI 摘要:Tanner Linsley 宣布推出 Tan_Stack NPM Stats (Beta),这是一个用于分析和可视化 NPM 软件包统计数据的工具。该工具提供了丰富的功能,包括可共享的深度链接、软件包分组、多种时间范围的统计数据查看、增长趋势分析、自定义显示选项以及开源支持,旨在帮助开发者更直观地了解和比较 NPM 软件包的表现。

1. 可共享的深度链接:用户可以生成并分享特定的统计数据视图链接,方便协作与交流。
2. 软件包分组:支持将相关软件包组合在一起,便于管理和比较。
3. 时间分箱选项:提供每日、每周、每月、每年的数据统计分箱,灵活查看不同时间段的表现。
4. 增长趋势分析:用户可以选择查看绝对增长或相对增长数据,了解软件包的增长趋势。
5. 比较基线设置:支持设置基线数据,用于与其他软件包或时间段进行对比。


示例链接

author Tanner Linsley Tanner Linsley (@tannerlinsley)
#优质博文 #前端 #持续学习
偶然看到的老文,但是很棒。
如果你觉得自己是房间里最聪明的人,那你就在错误的房间。


Yashints | How do I keep up with frontend world

AI 摘要:本文作者分享了如何在前端开发领域跟上快速变化的技术潮流,通过与业内领先者的交流和自身实践,总结出一系列学习方法和资源。作者强调了阅读、社交媒体、会议、实践项目和自我纪律的重要性,同时提醒读者避免过度压力和 burnout,保持学习的热情和持续性。

1. 引言:前端技术快速变化的挑战
• 描述了作者在前端开发多年后感受到技术更新速度加快的压力。
• 提到经常在会议、同事交流或网络浏览中发现自己不了解的新技术(如 Angular、React、Vue 等),感到不安。
• 决定通过与行业领先者交流,寻找跟上技术发展的方法,并分享自己的经验。

2. 学习方法 1:阅读
• 阅读是作者学习的核心,注重了解技术背景和故事,不必一开始就深入。
• 阅读时间:利用通勤时间(如公交车上)、睡前或清晨。
• 阅读资源:定制的 RSS 订阅(基于 Paul Irish 的资源)、Twitter、LinkedIn(每天 45 分钟到 1 小时,快速浏览并保存到 Instapaper)。
• 深入学习时依赖官方文档,80% 的问题都能解决。
• 技术书籍仅作为参考,不完整阅读,因技术更新速度快于书籍完成时间。

3. 学习方法 2:订阅与社交媒体
• 每周通讯和订阅源是获取新资讯的重要途径,作者赞扬维护者的研究和分享。
• 在社交媒体上关注精心挑选的活跃人士(约 800 人),按类别关注以了解不同领域的动态。
• 强调“如果你觉得自己是房间里最聪明的人,那你就在错误的房间”,鼓励通过社交媒体发现自身知识差距并制定学习计划。

4. 学习方法 3:会议与演讲
• 会议是结识聪明人、了解行业趋势并拓展知识广度(有时甚至深度)的绝佳场所。
• 除了参加会议,作者也通过演讲学习,认为演讲需要深入理解主题。
• 提供查找会议信息的网站资源,并分享个人演讲日程。

5. 学习方法 4:视频与播客
• 视频和在线课程不是作者主要学习方式,但仍会偶尔使用,尤其是会议演讲录像。
• 推荐了一些 YouTube 频道和在线课程资源。
• 播客适合通勤时收听,用于了解最新新闻或技术。

6. 学习方法 5:实践与副项目
• 强调“做中学”的重要性,作者通过编码学习新技术、库或 API。
• 副项目(pet projects)是个人和职业成长的好方式,能让人走出舒适区、学习新技能并锻炼创造力。
• 挑战在于平衡工作、家庭和其他事务,作者建议每天花一点时间在副项目上,避免厌倦或遗忘。
• 建议不要为副项目设截止日期或压力,以轻松的心态完成每周一到两个任务,享受过程。
• 随着新技术出现,建议切换副项目使用的语言或技术,保持多样性。
• 完成项目后启动新项目,使用想熟悉的新技术,同时关注其他领域(如安全、Azure、IoT 等)。

7. 学习方法 6:分享与写作
• 将副项目用于内部讨论、meetups 或会议演讲,帮助发现薄弱环节和挑战,同时便于展示内容。
• 写作文章有助于将知识存入长期记忆,作者建议为自己写作,记录未来所需细节,间接帮助他人。
• 学习心态:自律与平衡
• 自律如肌肉,越训练越享受成果,强调养成日常习惯的重要性,否则其他方法无效。
• 提供了一些自律小贴士,提醒读者坚持计划,避免半途而废。
• 当感到挫折或无法跟上他人时,可能是 burnout 的信号,建议休息、度假或调整方向。
• 世界不会停止,追逐不应无止境,学会适时放松。

8. 结语与互动
• 总结了作者用于跟上前沿技术的多种方法,邀请读者在评论中分享自己的想法,并计划更新文章。
• 强调这些方法不仅适用于前端开发者,对其他领域也有帮助。


author Yashints
Vercel AI SDK 平替 xsAI 发布了 v0.2 版本!我们本次也撰写了 Blog!

xsAI 0.2 已发布,发布代号为 "over the reality"


前瞻:
- 适用于 DeepSeek R1 这类推理模型的 thinking 工具
- 介绍可以在浏览器里直接跑模型推理的 xsai-transformers
- 介绍 unspeech 新集成的语音提供商

https://blog.moeru.ai/xsai-0.2/
#优质博文 #前端 #javascript #新特性
未广泛......吗(好像除了取色都用过
6 hidden gems in the JavaScript API you should be using

AI 摘要:本文介绍了 6 个未被广泛使用但功能强大的原生 JavaScript API,包括 structuredClone、EyeDropper、AbortController、Intersection Observer、ResizeObserver 和 Clipboard API,详细解释了它们解决的问题、适用场景及实现方法,帮助开发者无需依赖外部库即可构建高效动态的 Web 应用。

1. structuredClone
• 功能:深度克隆复杂对象(支持日期、Map 等类型),替代 JSON.parse(JSON.stringify()) 的局限性。
• 示例:克隆包含嵌套对象、数组和特殊类型的原始数据,保持独立性且无需手动类型转换。

2. EyeDropper API
• 功能:原生实现颜色选择器,适用于图片编辑或绘图类应用。
• 限制:目前仅支持 Chrome、Edge 和 Opera。
• 示例:通过按钮触发颜色选择,动态更新页面背景色。

2. AbortController
• 功能:取消已发送的异步请求(如搜索输入防抖场景),避免陈旧响应。
• 示例:结合 fetch 和 useEffect,在组件卸载或查询变化时中止请求。

3. Intersection Observer
• 功能:监听元素进入视口的时机,实现懒加载图片或无限滚动。
• 示例:通过 data-src 延迟加载图片,仅在可见时替换为 src 属性。

4. ResizeObserver
• 功能:监听元素尺寸变化,适用于响应式图表或动态调整文本大小。
• 示例:根据父容器宽度自动缩放文本字体。

5. Clipboard API
• 功能:替代已废弃的 document.execCommand,支持文本和图像的复制/粘贴操作。
• 安全限制:需 HTTPS 环境及用户授权。
• 示例:复制文本到剪贴板,以及通过 Blob 处理图像粘贴。


author Rahul Padalkar 6 hidden gems in the JavaScript API you should be using - LogRocket Blog
#优质博文 #前端 #react #course
很棒的初学者友好的 React Fiber 架构说明。
React Internals: Which useEffect runs first?

AI 摘要:本文深入探讨了 React 中 useEffect 的执行顺序问题,通过示例代码和 React 内部机制(如 Fiber 架构和遍历算法)解释了为何子组件的 useEffect 会先于父组件执行。文章分为渲染阶段和提交阶段,详细解析了 React 的生命周期和遍历逻辑,帮助开发者理解并避免潜在的执行顺序问题。

1. 问题引入
• 通过一个父子组件的 useEffect 执行顺序测试题引入主题,展示大多数开发者对执行顺序的误解。
• 示例代码显示子组件的 useEffect 先于父组件执行,但官方文档未明确解释这一行为。
2. React 生命周期概述
• 触发阶段(Trigger):初始渲染或状态更新(如 setState)。
• 渲染阶段(Render):调用组件函数,生成虚拟 DOM,标记需更新的节点。
• 提交阶段(Commit):更新真实 DOM 并执行副作用(如 useEffect)。
3. React Fiber 架构
• Fiber 树是 React 内部用于管理组件层级和更新的数据结构,包含节点类型(如 HostComponent)、子节点、兄弟节点和父节点指针。
• 图示展示了 Fiber 树与 DOM 树的差异,强调其优化渲染效率的特性。
4. Fiber 树的遍历算法
• 深度优先遍历:每个节点被访问两次(向下和向上),优先处理子节点,再处理兄弟节点。
• 动画演示了遍历过程,解释了为何子组件的 useEffect 会先执行。
5. 渲染阶段(Render Phase)
• beginWork():调用组件函数,执行 console.log,标记需更新的节点。
• completeWork():生成新的 DOM 节点,但未提交到真实 DOM。
6. 提交阶段(Commit Phase)
• 副作用提交:通过 recursivelyTraversePassiveMountEffect 函数深度优先遍历,先提交子组件的 useEffect,再提交父组件的。
• 动画和代码示例进一步验证了这一行为,解释了同级组件的执行顺序逻辑。


author Teng Wei Herr React Internals: Which useEffect runs first?
#碎碎念 #美食 #面基
回深圳的吃 & 面基!真正的社恐面基:大家面对面的情况下还是手机聊天聊的最来劲(xs)
#优质博文 #新动态 #javascript #前端 #node
Node Weekly #576

AI 摘要:本期 Node Weekly 聚焦 JavaScript 生态的重要更新与工具动态,涵盖 Koa 3.0 发布、Node.js LTS 版本更新、Bun 的兼容性进展、安全事件解析,以及 Tonkotsu IDE 等新工具。同时探讨了 V8 优化、Deno 改进和跨语言开发趋势,为开发者提供全面的技术风向标。

1. 框架与运行时更新
Koa 3.0 发布
• 作为 Express.js 的“下一代”框架,Koa 3.0 强调现代 JavaScript 特性,提供轻量级中间件方案。
• 与 Express 的复兴形成竞争,v3.0 更新细节见发布说明
Node.js v22.15.0 (LTS)
• 包含 300+ 提交,支持 Windows/macOS 系统证书、依赖项更新及 process.execve 引入。
• Bun 兼容性进展
• 通过 Node.js events 模块 100% 测试,新增 llms-full.txt 文档支持 AI 工具集成。

2. 工具与创新
• Tonkotsu IDE:自然语言驱动的 JS/TS 开发环境,支持通过文本描述生成代码,开放免费早期体验。 (SPONSOR)
Seyfert:跨运行时(Node/Deno/Bun)的 Discord 机器人框架,支持组件化开发。
• Scala.js 1.19.0:强化 Scala 与 JavaScript 的互操作性,提供代码对比示例。

3. 安全与优化
Node.js CI 安全事件解释:Jenkins 管道漏洞被利用,技术委员会披露事件分析与修复措施。
V8 显式编译提示:通过预编译指定文件加速启动,随 Chrome 136 一起提供。

4. 版本生命周期
Node.js v18 即将终止支持,建议升级至 v22;v23 进入维护模式,v24 即将发布。

5. 其他动态
• OpenAI Node 库 4.96:新增 gpt-image-1 模型支持。
• 跨语言指南:TypeScript 与 C# 的语法对比,DuckDB-WASM 的 3D 游戏实验。
• p5.js 2.0:重大升级缓慢推进,Deno 2.3 改进预告发布。
Releases · koajs/koa
#碎碎念 #游戏 #无限暖暖
太离谱了,昨天玩了一晚上评价是:我还是先歇几天在做活动吧,怎么有游戏的上新版本能做到包括但不限于以下事情:

1. 大改键位和 UI 和界面布局(不!止!一!次!)
2. 开服前几个小时才开预下载,下载完开服了进去:初始化失败,那好吧,点修复资源完了你游戏相册里的照片就丢了,很难想象是一个主打拍照的游戏干得出来的事(虽然应该大多数拍照都会存下来)
3. 新任务的时候,一坨的引导,npc 是若隐若现的, 任务标点是乱飞的,动一动还会出现重复的任务标点 bug 和重复的任务条目指引 bug,突然出现的联机人的 bug,不存在的任务标点 bug,支线任务冒充主线任务的标点,遇到任何 bug,欸,只能重启
4. 染色方案一应用,欸我界面怎么卡死啦~重启!
5. 以上都是 pc 的 bug 体验录,ps5 端看推甚至有人到现在还没进去。
6. 画质和帧率倒是变好了,但我这是 5090D 啊。
7. 其他大的小的就不说了,新玩家把新手剧情给换了,老玩家新手引导换成星海之后还砍了动画??什么操作,原来的新手剧情你想改为什么要直接砍掉动画。而且这新新手剧情新玩家看了只会觉得一头雾水尬的只有场景好看的吧。(你游文案、策划、剧情什么样大家一直懒得喷)

锻炼忍耐力来的了,都能忍的这辈子有了😇

狗叠该骂,狠狠骂,往死里骂,这明显是新版本更新的东西太多做不好直接赶鸭子上架了完全没测过,生动形象的诠释了什么叫草台班子。

我看开了,反正都是草台班子,也是随缘玩。感兴趣去 B 站可以搜一圈都是 bug 吐槽。

原铁绝都退了没精力玩儿但是人家做的好太多,你想学习是没啥问题但是没那个人力就别硬学。。你就是 5090 也得必须来尝尝我的 bug 攻击,笑死☺️

ps: 这是 B 站 bug 吗怎么两个空的视频,被删了??
哦对不起,是广告被 ad block 干掉了

我从来没有觉得玩无限暖暖开心过😩

千人团队 = 四个二百五
#碎碎念 #游戏
难蚌,无限暖暖草台班子还在发力。
你叠是真的一天不骂上房揭瓦😡
这样都敢版本更新,一点测试不做的?
评价为五一不想放假了
cosine - 前端人の日常频道
#AI Qwen3 写代码能力貌似还可以?我还没来得及试。 https://fixupx.com/karminski3/status/1917019006428713333
#碎碎念 虽然但是我应该还是继续用 cursor 写代码,这些本地部署都是尝尝鲜跑一些角色扮演(逃)干一些 api 不敢干的事儿。
Back to Top