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

图频:Cosine 🎨 Gallery @CosineGallery
猫片: @cosine_cat
#碎碎念 #折腾 #追番
/// vibe 了一个百合版动画世代(嗯)可以随便玩玩儿看!纯娱乐!是专门做百合的字幕组 @Billion_Meta_Lab 给的数据嘿嘿嘿 ///
我的百合浓度不够高www
https://acg.cosine.cv/yuri-sedai
#碎碎念 #追番
ohhhhhhhh新吊带袜天使下个季度上!!!!!!!真有生之年了!我的遗愿还剩游戏人生。

【超超超喜欢你的100部续作!2025年7月新番导视!【泛式】-哔哩哔哩】 https://www.bilibili.com/video/av114596169908634?p=1
#优质博文 #前端 #javascript
做得好啊,JS 编年史,看的燃起来了(x)
Deno 团队整理了一份精彩的 JavaScript 历史时间线 ,以庆祝今年 JavaScript 的 30 岁生日。

AI 摘要:本文详细回顾了 JavaScript 从 1995 年诞生至今 30 年的发展历程,展示了它如何从一个在 10 天内开发的小众脚本语言成长为全球最受欢迎的编程语言。文章通过时间线梳理了 JavaScript 的关键时刻,包括其在浏览器中的诞生、标准化进程、生态系统的扩展以及现代运行时和工具的出现,突显了开源社区、创新技术和行业竞争对 JavaScript 发展的推动作用,同时展望了其未来在性能、工具和创造力方面的潜力。

• 1994-1995:JavaScript 的诞生
• 1994 年,Netscape 发布 Navigator 1.0,成为最受欢迎的浏览器,为 JavaScript 的诞生奠定基础。
• 1995 年,Brendan Eich 在 10 天内创造 JavaScript,旨在为早期静态网页增加交互性;同年,Netscape 和 Sun 宣布 JavaScript 作为跨平台脚本语言。
• 1996-1999:早期竞争与标准化
• 1996 年,Microsoft 推出 JScript 与 JavaScript 竞争;Netscape Navigator 2.0 发布,引入 DOM 模型。
• 1997 年,Netscape 将 JavaScript 提交给 ECMA 国际,制定 ECMAScript 标准,成立 TC39 委员会。
• 1998 年,Netscape 开源代码,创立 Mozilla 项目;发布 ECMAScript 2 规范。
• 1999 年,Microsoft 发布 IE5 引入 XMLHttpRequest;JSDoc 提升代码文档化;ECMAScript 3 奠定 JavaScript 作为严肃编程语言的基础。
• 2000-2005:Web 2.0 与 AJAX 的兴起
• 2001 年,首次发送 JSON 消息。
• 2002 年,JSLint 提升代码质量;Mozilla 发布 Phoenix(Firefox 前身)。
• 2003 年,Apple 推出 Safari 和 WebKit。
• 2004 年,Gmail 发布,采用 AJAX 技术,开启 Web 2.0 时代。
• 2005 年,AJAX 概念正式命名;Mozilla 推出 MDN 文档平台。
• 2006-2010:框架与运行时的爆发
• 2006 年,jQuery 简化跨浏览器开发。
• 2007 年,iPhone 发布,移动 Safari 不支持 Flash,推动 HTML5。
• 2008 年,Google 发布 Chrome 和 V8 引擎;Netscape Navigator 停用。
• 2009 年,Node.js 诞生,JavaScript 扩展至服务器端;CommonJS、Express.js 出现;ECMAScript 5 带来重大更新。
• 2010 年,npm 发布,成为最大开源包仓库;WebStorm、AngularJS 和 Backbone.js 发布推动前端框架发展。
• 2011-2015:现代生态系统的形成
• 2011 年,Node.js 移植到 Windows,libuv 诞生。
• 2012 年,Webpack 和 TypeScript 发布,支持大规模开发。
• 2013 年,React、Electron、asm.js、MEAN 栈、Gulp 出现,ESLint 开始开发。
• 2014 年,Vue.js、Babel、Meteor、Flow、AWS Lambda 等工具和框架出现。
• 2015 年,ECMAScript 6(ES2015)引入模块系统;Jamstack 概念提出;Node.js 基金会成立;GraphQL、Redux 和 WebAssembly 发布。
• 2016-2020:工具与性能的飞跃
• 2016 年,VSCode、Next.js 和 Angular 2 发布;npm Leftpad 事件暴露供应链风险。
• 2017 年,Prettier、Yarn 和 Cloudflare Workers 发布优化开发体验;ECMAScript 2017 引入 async/await;Temporal 提案创建。
• 2018 年,Puppeteer、TensorFlow.js 推动自动化和 AI;Ryan Dahl 宣布 Deno 项目;ECMAScript 2018 发布, 包含 rest/spread 属性、 async 迭代、 promise.finally() 等
• 2019 年,OpenJS 基金会成立;Node.js 稳定支持 ES 模块。
• 2020 年,Deno 1.0 发布;JavaScript 借助 SpaceX Dragon 进入太空;Flash 正式退役。
• 2021-2025:未来与创新
• 2022 年,IE11 退役;ECMAScript 2022 发布;Deno 加入 TC39。
• 2023 年,Bun 1.0 作为 Node.js 替代品发布。
• 2024 年,Deno 2 发布,支持 Node 和 npm 兼容性;JSR 注册表推出;#FreeJavaScript 运动挑战 Oracle 商标;Node.js 选定 Rocket Turtle 作为吉祥物;ECMAScript 2024 发布。
• 2025 年,TypeScript 计划移植到 Go(tsgo);Microsoft 宣布开源 VSCode 的 Copilot Chat 扩展。


author Deno Team A brief history of JavaScript | Deno
#优质博文 #前端 #javascript
这是 Chrome/Firefox 的一个有趣的例子:你能发现为什么这个(有效的!)日期字符串被解析为五月吗?


const date = 'it is wednesday, my dudes. 2025, April, maybe...28(?)';
console.log(new Date(date)); // Wed May 28 2025 00:00:00 GMT-0700 (Pacific Daylight Time)


Why are 2025/05/28 and 2025-05-28 different days in JavaScript?

AI 摘要:本文深入探讨了 JavaScript 中日期解析的奇特行为,特别是在处理不同格式的日期字符串(如 '2025/05/28' 和 '2025-05-28')时出现的差异。作者通过分析浏览器历史、规范演变以及代码实现,揭示了这种差异源于时区解析规则的模糊性和浏览器厂商在实现上的不一致。此外,文章还展望了即将到来的 Temporal API 如何解决这些问题,并附带了一些有趣的日期解析“彩蛋”。


author Brandon Dong
#优质博文 #前端 #astro
No Server, No Database: Smarter Related Posts in Astro with transformers.js

AI 摘要:本文详细介绍了如何在 Astro 博客中使用 Hugging Face 的 transformers.js 库通过嵌入(Embeddings)技术实现智能相关文章推荐,而无需服务器或数据库。作者通过将博客内容转化为向量表示,并利用余弦相似度计算文章之间的语义相关性,成功构建了一个在构建时运行的推荐系统。这种方法比传统的标签分类更能捕捉内容的真实含义,极大地提升了推荐质量。


author Alexander Opalic No Server, No Database: Smarter Related Posts in Astro with `transformers.js` | alexop.dev
#优质博文 #前端 #新动态 #javascript
🕒 JavaScript Weekly Issue #738

AI 摘要:本期 JavaScript Weekly (2025 年 5 月 30 日) 带来了多项重要更新和资源。Remix 框架迎来重大变革,脱离 React 框架定位,转型为基于 Preact 的模型优先、低依赖的全栈框架;Temporal API 在 Firefox 139 中默认启用,为 JavaScript 日期和时间处理带来新解决方案;Angular v20 发布,稳定了信号和增量 hydration 等功能,并引入新的实验性 API。此外,还有关于 React 19、Chrome DevTools 性能调试、以及多个工具和框架更新的内容,涵盖了从前端框架到 AI 代码审查工具的广泛话题。

1. Remix 框架重大更新:
• Remix 与 React Router 一年前合并后,现再次转型,React Router 回归 Remix 最初定位。
• Remix 重启为基于 Preact 的模型优先、低依赖、Web API 中心的 full-stack 框架,不再是 React 框架。

2. Temporal API 即将上线:
• Temporal API 作为处理日期和时间的新方法,已在 Firefox 139 默认启用,很快将在更多运行时中可用。
• 文章探讨了其重要性及提供的功能,解决现有日期处理中的痛点。

3. Angular v20 发布:
• 稳定了信号 (signals) 和增量 hydration 等实验性功能。
• 引入新实验性 API,如资源流 (resource streaming) 和基于信号的 HTTP 请求 API (httpResource)。

4. 工具与资源:
• Svelte Flow 1.0:基于 Svelte 的节点 UI 和图表组件,用于构建交互式编辑器和图表。
• Cap:轻量级、现代开源 CAPTCHA 替代方案
• Google Gen AI SDK v1:支持 TypeScript 和 JavaScript 的 Gemini API 工具包,适用于 Node.js 开发。
• ReactJust:没有框架的服务器组件  —— 这种 “原始 RSC” 方法可能会引起您的兴趣。
• Linkify:将文本中的链接、标签和提及转换为 HTML 链接。

5. 文章与教程:
• JavaScript 日期问题解析:探讨为何 2025/05/28 和 2025-05-28 在 JavaScript 中是不同日期。
• Chrome DevTools 性能调试:介绍了更新后的性能面板新功能及使用方法。
• React 概念可视化:更新至 React 19,涵盖 actions、transitions 和 Server Components。
• Angular 博客搭建教程:使用 Analog 框架在 30 分钟内搭建博客。

6. 框架与技术探讨:
• JavaScript 框架 DOM 渲染方式:SolidJS 创作者分析框架渲染 DOM 的三种方式。
• React 元框架问题:Redwood 团队分享从头重建框架的经验。

7. 工具更新与发布:
• Bun v1.2.15:新增 bun audit 工具,用于项目依赖安全审计。
• Ink 6.0:支持 React 19,基于 React 构建 CLI 应用。
• Docusaurus v3.8:流行的文档导向静态网站生成器更新。

8. 其他动态:
• TC39 第 108 次会议推进多项提案,如 Seeded Pseudo-Random Numbers 进入 Stage 2。
• OpenJS 基金会成为 40 多个 JavaScript 项目的 CVE 编号机构。
• Node.js 技术指导委员会决定不设立官方赏金计划。
#优质博文 #css #前端 #新特性
Better CSS Shapes Using shape() — Part 2: More on Arcs

AI 摘要:本文是关于 CSS shape() 函数的第二部分,专注于 arc 命令的使用,探讨如何通过该命令创建复杂的形状,如扇形(Sector)和弧形(Arc)。作者详细介绍了如何使用 arc 命令绘制动态形状,解决绘制过程中的常见问题(如弧的方向和大小选择),并结合 CSS 条件逻辑和变量优化代码。本文还提到 shape() 函数目前仅在 Chrome 137+ 和 Safari 18.4+ 中受支持,适合对 CSS 高级特性感兴趣的开发者学习。

• 支持环境与背景:文章指出 shape() 函数目前仅在 Chrome 137+ 和 Safari 18.4+ 中受支持(截至 2025 年 5 月),并作为系列文章的第二部分,建议读者先阅读第一部分以理解基础知识。
• 扇形(Sector Shape):
• 描述:扇形是一种常用于饼图的经典形状,包含一个弧和两个固定点,以及一个随填充比例变化的移动点。
• 实现:通过 shape() 函数从顶部开始绘制弧线(arc to),使用变量 --v(范围 0-100)控制填充比例,并通过数学公式计算弧线终点坐标(X 和 Y)。
• 问题与解决:弧线绘制中遇到方向和大小问题,需通过尝试 small cw 和 large cw 组合解决;当 --v 接近 100 时,弧线无法形成完整圆形,作者通过限制值为 99.99 并添加 border-radius: 50% 解决。
• 应用:可用于图像元素的 clip-path,增强视觉效果。
• 弧形(Arc Shape):
• 描述:基于扇形,移除内部填充部分,形成纯弧形,适用于创建环形效果。
• 实现:基于扇形代码,移除 line to center,增加内弧线命令,并通过变量 --b 定义弧线厚度。
• 问题与解决:与扇形类似,弧线大小随 --v 变化需调整为 small 或 large ,作者引入 CSS 条件逻辑(如 if() 或样式查询)动态调整弧线参数。
• 优化:移除 border-radius,通过条件逻辑同时解决内外弧线问题。
• 带圆角的弧形(Arc Shape with Rounded Edges):
• 描述:通过在弧形两端添加小半圆弧,创建圆角效果,提升视觉美感。
• 实现:将直线命令替换为小半圆弧(使用 1% 半径技巧让浏览器自动计算),并在末尾添加额外弧线回到起点。
• 练习:作者鼓励读者自行尝试修改代码,理解四弧结构。
• 总结与展望:
• 总结:作者强调 arc 命令是 shape() 函数中最复杂的部分,重点在于方向和大小的处理,通过两篇文章详细讲解,希望读者能掌握其用法。
• 补充:仅讨论了圆弧,未深入探讨椭圆弧(需两个半径),认为其应用较少;并推荐读者阅读作者在 Frontend Masters 的后续文章,探索更多基于 arc 的花式形状。


author Temani Afif Better CSS Shapes Using shape() — Part 2: More on Arcs | CSS-Tricks
#优质博文 #前端 #css #AI
很值得一看www
ChatGPT and the proliferation of obsolete and broken solutions to problems we hadn’t had for over half a decade before its launch

AI 摘要: 本文探讨了 ChatGPT 在提供 CSS 解决方案时,生成的代码中包含过时和冗余的问题,特别是在 CSS 渐变文本动画的实现上。作者通过分析 ChatGPT 提供的代码,指出其使用了早已不必要的 WebKit 前缀和无效的属性(如 -webkit-text-fill-color),并追溯了 CSS 渐变文本技术的发展历史,揭示了这些过时方案的起源与现代浏览器的兼容性现状。文章还批评了 AI 工具在生成代码时未能根据当前技术标准优化方案的缺陷,呼吁开发者审慎使用 AI 生成的代码,并结合现代工具(如 @supports)来确保代码的高效与兼容性。

• 引言:ChatGPT 生成代码的问题
• 文章以一个网友询问如何实现类似 ChatGPT“搜索中”效果的 CSS 渐变文本动画为切入点。
• ChatGPT 提供的代码看似有效,但包含冗余和过时的 CSS 属性,在现代浏览器中毫无必要。
• 核心问题:ChatGPT 的代码未能反映现代 CSS 标准,包含了至少五年前已解决问题的过时解决方案。

• 代码分析:ChatGPT 方案的缺陷
• 提供的 CSS 代码使用 -webkit-background-clip: text 和 -webkit-text-fill-color: transparent,这些前缀和属性在当前浏览器中已无必要。
• 代码中 background-size 和 background-position 的设置方式冗长且未使用简写,未能优化。
• 对比优化后的代码,作者展示了如何用更简洁的方式实现相同效果,且在所有浏览器中均无兼容性问题。

• CSS 渐变文本的历史与演变
• 回顾了 CSS 渐变文本技术的发展历程,从 2009-2010 年 WebKit 浏览器独占的支持,到 2016 年所有主流浏览器对 background-clip: text 的支持。
• 解释了 -webkit-text-fill-color 的历史用途:最初用于解决 2010 年非 WebKit 浏览器不支持渐变文本时文本透明度问题。
• 指出该属性现已成为冗余,因为现代浏览器已全面支持相关标准,且 ChatGPT 代码同时设置了 color: transparent,完全违背了当初使用前缀的初衷。

• 浏览器兼容性与前缀问题的历史
• 讨论了 WebKit 前缀(如 -webkit-)在非 WebKit 浏览器(如 Opera、Firefox、IE)中的支持历史,及其导致的混乱和兼容性问题。
• 提到 2010-2015 年间浏览器厂商对前缀的支持策略变化,以及如何导致开发者编写过多或不足的前缀代码。
• 强调现代浏览器已不再需要这些前缀,ChatGPT 提供的代码未反映这一现实。

• 代码优化建议
• 提出使用现代 CSS 特性(如 @supports)来处理兼容性问题,而非依赖过时前缀。
• 优化 background-size 和 background-position 的设置,省略不必要的参数,使用简写形式。
• 改进页面布局代码,避免 height: 100vh 导致的滚动条问题,推荐使用 display: grid 等现代布局方案。
• 建议设置更美观的字体,并使用 clamp 函数让字体大小自适应视口。

• 不仅仅是 ChatGPT 的问题
• 指出其他 AI 工具(如 Gemini)同样存在生成过时或错误代码的问题,原因是它们倾向于引用互联网上较旧但流行度高的解决方案。
• 强调 AI 生成代码缺乏时间上下文,开发者难以判断其是否过时,建议查阅原始资源或验证代码的适用性。


author Ana Tudor ChatGPT and the proliferation of obsolete and broken solutions to problems we hadn’t had for over half a decade before its launch
#前端 #codepen #demo #动画 #设计
受 Braun 风格启发的时钟
Filip Zrnzevic 精心重现了 Braun 玻璃钟的外观和功能。在预览模式下按下 H 键,即可打开设置面板,调整时钟的内部运作。


via CodePen Spark 450
#趣站 #交互设计 #设计 #webgl #动画
好看的站点!
https://jordan-delcros.com/
Jordan Delcros 重建了个人作品集,展示其 WebGL、动画和交互式开发方面的最佳项目和技能,标志着其作为自由职业开发者的全新旅程。

via Jordan Delcros Portfolio - Awwwards SOTD
影视飓风发文称,其因医学科普被封,但微信视频号却允许公开发布卖血视频

影视飓风

📮投稿 ☘️频道 🧧狗东
#优质博文 #前端 #css #新特性
震惊,有生之年居然看到CSS attr()全属性支持
AI 摘要:CSS attr() 这一特性在 Chrome 133 版本开始得到支持。通过 attr() 函数,CSS 代码量可大幅减少,HTML 属性直接控制样式变得更加灵活,例如间距、颜色、背景图等样式的动态设置。此外,文章还揭示了如何通过 image-set() 函数实现动态 URL 作为背景图显示的创新方法。尽管目前浏览器支持尚不全面,但作者对未来充满期待,认为 CSS 的发展将带来更多可能性。


via 张鑫旭
Back to Top