呜啦!日常碎碎念,偶尔掉落优质前端博文推荐、学习资源等
网页:https://tg.cosine.ren
本频道的搜索Bot 来辣 👉 @cosSearchBot
私聊直接发消息就可以搜索啦~
🔖tags
#优质博文 #资源推荐 #博客更新 #碎碎念 #项目更新 #手工 #书摘 #阮一峰的科技周刊 #新动态
图频:Cosine 🎨 Gallery @CosineGallery
猫片: @cosine_cat
网页:https://tg.cosine.ren
本频道的搜索Bot 来辣 👉 @cosSearchBot
私聊直接发消息就可以搜索啦~
🔖tags
#优质博文 #资源推荐 #博客更新 #碎碎念 #项目更新 #手工 #书摘 #阮一峰的科技周刊 #新动态
图频:Cosine 🎨 Gallery @CosineGallery
猫片: @cosine_cat
#前端 #webgl #新动态
这个好诶
https://forge.dev/
Source
这个好诶
https://forge.dev/
Asuka小能猫 (@AsukaOdysseus):李飞飞团队开源了可商用的高斯喷溅web渲染器。
gaussian splatting 是目前3d场景重建最前沿的方法,效果好、速度快、只需要图片就能重建,去年开始大火,学术界机器人/自动驾驶/世界模型/视频生成都有很多应用。
国内在这块的application级别的应用几乎是空白。
Source
#tools
https://fixupx.com/__oQuery/status/1929248226802372682
✨ star Innei/photo-gallery
innei 佬的 vibe 都这么强,爱了,这个 UI 简洁的我很喜欢w
https://fixupx.com/__oQuery/status/1929248226802372682
✨ star Innei/photo-gallery
innei 佬的 vibe 都这么强,爱了,这个 UI 简洁的我很喜欢w
这个项目已经 Vibe 了 9K 行了,是时候重构一波了。
现在连 Live photo 都支持了。
https://github.com/Innei/photo-gallery
#优质博文 #插件 #用户脚本 #安全 #新动态
Enabling chrome.userScripts in Chrome Extensions is changing
author Justin Lulejian
Enabling chrome.userScripts in Chrome Extensions is changing
AI 摘要:本文介绍了从 Chrome 138 版本开始,Chrome 扩展中用户脚本(chrome.userScripts API)的启用方式发生了变化,旨在增强安全性和提供更精细的用户控制。过去依赖全局开发者模式开关的方式存在安全风险、功能过载和企业管理难题,现在转变为逐个扩展的“允许用户脚本”开关,用户可以在扩展详情页单独控制每个扩展的用户脚本权限。这一更新基于开发者社区的反馈,旨在提升安全性和用户体验,同时为管理员提供了新的管理策略。
author Justin Lulejian
#优质博文 #前端 #html
HTML5 Elements You Didn't Know You Need
author Max Prilutskiy
HTML5 Elements You Didn't Know You Need
AI 摘要:本文介绍了八个鲜为人知但功能强大的 HTML5 元素,这些元素为常见的 Web 开发问题提供了原生解决方案,减少了对 JavaScript 和第三方库的依赖。作者强调了使用原生 HTML 元素的优势,包括提高可访问性、语义化以及简化代码,同时也指出了这些元素的局限性,鼓励开发者在选择工具前了解这些内置选项。
1. <dialog> 元素:原生模态窗口
介绍 <dialog> 元素用于创建模态窗口,浏览器自带焦点管理、背景渲染和键盘可访问性支持,提供了基本用法和样式化代码示例。提到其浏览器支持情况(2022 年后主流浏览器均支持)和 iOS Safari 的历史兼容性问题,建议复杂模态仍需专用库。
2. <details> 和 <summary> 元素:原生手风琴
介绍用于创建可折叠内容的手风琴效果,浏览器内置切换功能和可访问性支持。提供样式化示例和嵌套导航的应用场景,指出其动画效果的局限性。
3. <datalist> 元素:原生自动补全
介绍用于表单输入自动补全的元素,支持用户自定义输入。提供颜色选择器的创意用法和 JavaScript 增强示例,指出其样式定制的限制。
4. <meter> 元素:语义化度量显示
介绍用于显示范围内值的元素,浏览器根据阈值自动调整颜色,适用于仪表盘等场景。讨论其语义价值和样式限制。
5. <output> 元素:动态计算结果
介绍用于显示计算结果的元素,与输入元素关联提高可访问性。提供抵押贷款计算器的实际案例,强调其语义意义和表单提交的适用性。
6. <mark> 元素:语义化高亮
介绍用于文本高亮的元素,默认黄色背景可自定义样式,适用于搜索结果等场景。强调其对屏幕阅读器的语义支持。
7. <time> 元素:语义化日期和时间
介绍用于表示日期和时间的元素,支持 ISO 8601 格式,方便搜索引擎和浏览器扩展使用。提供多种格式示例和相对时间更新的 JavaScript 代码,适用于博客和新闻网站。
8. <figure> 和 <figcaption> 元素:语义化图片标题
介绍用于图片或其他独立内容单元的元素及其标题,适用于内容管理系统。提供 CSS 样式化示例,强调其对可访问性的提升。
author Max Prilutskiy
#优质博文 #前端 #react #新动态
React Status #430
author Peter Cooper
React Status #430
AI 摘要: 本期《React Status》 (2025年5月28日,第430期) 是一份聚焦 React 生态系统的技术资讯简报,涵盖了 React 19 的最新特性、工具库更新、框架对比以及社区动态。文章详细介绍了 React 核心概念的可视化讲解、TanStack Router 的独特优势等内容,同时提供了众多 React 相关工具和库的更新信息,如 Docusaurus 3.8、ReactJust 等。此外,还包括了 JavaScript 生态的最新动态,如 JavaScript 30周年回顾和 TypeScript 的 Go 移植进展。
1. 简讯 (IN BRIEF)
• React 即将迎来12周年生日(5月29日)。
• Storybook 9.0 刚发布,将在下期详细报道。
• React Router 提供对 RSC (React Server Components) 的预览支持。
• Astro 5.8 发布,放弃对 Node v18.20.8 之前版本的支持。
• Vercel 可能将弃用 Edge Functions,转向 Fluid compute。
2. 教程与案例
• 使用 GitHub Copilot 构建 React 应用:Kedasha Kerr 提供了详细指南和视频,展示如何利用 Copilot 快速构建现代 JavaScript 应用。
• React 元框架的问题与重建:Redwood 团队分享了从头开始重建 RedwoodSDK 的经验,强调从第一性原理出发解决问题。
• AI 辅助构建物理角色控制器:Ian Curtis 结合 React Three Fiber、Three.js 和 Rapier,展示了如何构建物理角色控制器,并提供在线试玩链接。
• 其他内容:包括 React 并发渲染的故事、Expo 实时音频处理、React 新 Activity 组件的性能提升,以及 Next.js 集成 Google 登录的简易方法。
3. 代码、工具与库:
• Docusaurus 3.8:面向文档的静态站点生成器,带来构建性能提升及“未来标志”功能,允许提前体验 v4 特性。
• ReactJust:一种无框架的 Server Components 方案,适合不想使用 Next.js 或 React Router 的开发者实验 RSC。
• Rockpack 6.0:React 应用启动工具,旨在最小化项目设置时间,支持服务端渲染、打包、linting 和测试,已更新至 React 19。
• 其他更新:包括 react-native-alert-queue、React DayPicker 9.7、React Spring 10.0、React Native Reanimated 4.0 Beta 4 等工具和库的最新版本发布。
4. JavaScript 生态动态:
• Deno 团队为 JavaScript 30周年制作了历史时间线。
• SolidJS 创作者发布视频对比 React、Angular、Vue、Svelte 和 Solid 的框架方法。
• Google 发布 Gemini 和 Vertex API 的官方 JavaScript/TypeScript SDK v1。
author Peter Cooper
#优质博文 #前端 #css
You can style alt text like any other text
author Andy Bell
You can style alt text like any other text
AI 摘要:本文探讨了如何通过 CSS 样式化图像的 alt 文本,以提升图像加载失败时的用户体验。作者 Andy Bell 详细介绍了如何通过对 <img> 元素应用样式来优化 alt 文本的显示效果,并结合 JavaScript 和渐进增强技术为加载失败的图像添加额外的视觉效果,强调了编写高质量 alt 文本的重要性以及关注用户体验的必要性。
author Andy Bell
ohhhhhhhh新吊带袜天使下个季度上!!!!!!!真有生之年了!我的遗愿还剩游戏人生。
【超超超喜欢你的100部续作!2025年7月新番导视!【泛式】-哔哩哔哩】 https://www.bilibili.com/video/av114596169908634?p=1
#优质博文 #前端 #javascript
做得好啊,JS 编年史,看的燃起来了(x)
Deno 团队整理了一份精彩的 JavaScript 历史时间线 ,以庆祝今年 JavaScript 的 30 岁生日。
author Deno Team
做得好啊,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
https://benjaminaster.com/css-minecraft/
前些天看到了没发,补一下,这个有点离谱的。
纯 CSS 实现 Minecraft 风格的构建体验 - 完全不需要 JavaScript!
#优质博文 #前端 #javascript
Why are 2025/05/28 and 2025-05-28 different days in JavaScript?
author Brandon Dong
这是 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