呜啦！日常碎碎念，偶尔掉落优质前端博文推荐、学习资源等
网页：https://tg.cosine.ren
本频道的搜索Bot 来辣 👉 @cosSearchBot
私聊直接发消息就可以搜索啦～
🔖tags
#优质博文 #资源推荐 #博客更新 #碎碎念 #项目更新 #手工 #书摘 #阮一峰的科技周刊 #新动态
图频：Cosine 🎨 Gallery @CosineGallery
猫片： @cosine_cat
网页：https://tg.cosine.ren
本频道的搜索Bot 来辣 👉 @cosSearchBot
私聊直接发消息就可以搜索啦～
🔖tags
#优质博文 #资源推荐 #博客更新 #碎碎念 #项目更新 #手工 #书摘 #阮一峰的科技周刊 #新动态
图频：Cosine 🎨 Gallery @CosineGallery
猫片： @cosine_cat
#优质博文 #新动态 #新标准 #前端 #typescript #工程化 #正则
TC39 将 3 个提案推进到第4阶段：Regexp Escaping，Float16Array 和 Redeclarable Global Eval Vars
https://socket.dev/blog/tc39-advances-3-proposals-to-stage-4-regexp-escaping-float16array-and-redeclarable-global-eval
TC39 将 3 个提案推进到第4阶段：Regexp Escaping，Float16Array 和 Redeclarable Global Eval Vars
https://socket.dev/blog/tc39-advances-3-proposals-to-stage-4-regexp-escaping-float16array-and-redeclarable-global-eval
AI 摘要：本文详细报道了 TC39 第 106 次会议期间，多达九项 JavaScript 提案在不同阶段取得进展，其中三个关键提案—— RegExp Escaping、Float16Array 和 Redeclarable Global Eval Vars 已经晋升到 Stage 4，即将成为正式的 ECMAScript 标准。文章不仅介绍了这些提案的具体内容和优势，例如为正则表达式提供内置转义功能，为数值处理引入更加节省内存的16位浮点数组，还讨论了其它提案如 Error.captureStackTrace 和 Error.prototype.stack 标准化、import defer 模块延迟加载、以及Math.clamp 函数的添加。这些改变旨在提升语言的安全性、跨平台一致性和性能表现。文末还列举了 Decimal & Measure、装饰器、Records & Tuples 等其他讨论中的话题，预示了 JavaScript 未来可能的进一步扩展和优化。
Socket
TC39 Advances 3 Proposals to Stage 4: RegExp Escaping, Float...
TC39 met in Seattle and advanced 9 JavaScript proposals, including three to Stage 4, introducing new features and enhancements for a future ECMAScript...
#优质博文 #新标准 #css
New CSS that can actually be used in 2024
AI 摘要：本文总结了2024年可实际应用的CSS新特性：
- 逻辑属性 ：使用
- 容器查询：通过
-
-
- 嵌套规则：原生支持CSS规则的嵌套，类似于 Sass 的嵌套功能，简化了样式的组织。
- CSS比较函数：使用
- 层叠层：通过
这些特性已在现代浏览器中得到广泛支持，开发者可逐步在项目中采用。
from Frontend Focus #668
New CSS that can actually be used in 2024
AI 摘要：本文总结了2024年可实际应用的CSS新特性：
- 逻辑属性 ：使用
block 和 inline 方向的属性，如 block-size 、 inline-size 等，替代传统的物理方向属性，适应不同的书写模式。- 容器查询：通过
@container 规则，根据容器的尺寸而非视口尺寸来应用样式，实现更精细的响应式设计。-
:has() 伪类：允许选择包含特定子元素的父元素，增强了 CSS 的选择器能力。-
:is() 和 :where() 伪类：简化了复杂选择器的书写， :is() 保留选择器的特异性， :where() 则将特异性降为零。- 嵌套规则：原生支持CSS规则的嵌套，类似于 Sass 的嵌套功能，简化了样式的组织。
- CSS比较函数：使用
min() 、 max() 和 clamp() 函数，根据条件动态计算值，方便实现响应式设计。- 层叠层：通过
@layer 规则，定义样式的层叠顺序，增强了样式的可控性。这些特性已在现代浏览器中得到广泛支持，开发者可逐步在项目中采用。
from Frontend Focus #668
What’s new in React 19
人 工 摘 要
React 19 带来了许多新特性，提升了性能和开发体验。主要更新包括：
1. 服务器组件 (Server Components)：通过服务器渲染组件，加快初次加载时间，减少客户端 JavaScript 传输量，改善 SEO。
2. Actions：新的函数取代传统事件处理程序，支持在客户端和服务器执行。
3. 新的 hook ：如
useActionState 、 useOptimistic 等，简化状态管理与表单处理。4. 改进的资源预加载：优化页面加载速度。
5. ref as a prop： 不再需要 forwardRef，不再需要
<Context.Provider> 。您可以直接使用 <Context> 。7.
useDeferredValue 中添加了 initialValue 选项。提供后， useDeferredValue 将使用该值进行初始渲染并安排在后台重新渲染，返回 deferredValue 。8. React 19 将原生提升和渲染标题、链接和元标签，甚至是嵌套组件。不再需要第三方解决方案来管理这些标签。
9. React 19 允许使用优先级
precedence 控制样式表的加载顺序。这使得将样式表放在组件附近更容易，React 只会在使用时加载样式表。10. 更好的错误报告
- 通过删除重复的错误消息来改进错误处理。（以前，React 会抛出两次错误。一次是最初的错误，第二次是自动恢复失败，然后是错误信息。 ）
- 通过记录单个不匹配错误而不是多个错误来改善水合错误。错误消息还包括有关如何修复错误的信息。
CSS @scope 他来了
AI 摘要： 这篇文章介绍了新的 CSS 特性
@scope 规则。 @scope 规则可以实现 CSS 选择器的嵌套书写，简化代码编写过程，使得代码更加直观易懂。例如，只有在特定的 nav 标签内的元素才会应用特定的样式，规则内的选择器优先级也会被计算在内。此外，使用 "to" 语法可以排除特定元素，使其不被选择器匹配。然而，虽然 @scope 简化了书写，它并非实现了 CSS 的作用域功能，即不能保证内部的 CSS 选择器不会影响外部的 CSS。因此，例如 Vue 和 React 这样的框架通过为类名增加随机后缀来实现局部 CSS 功能的方法在 @scope 普及后仍有应用场景，尽管其市场可能不再像现在这么大。「随着Safari TP版本已经支持CSS @scope规则，这个新特性在不久的将来在Web中大放异彩已是必然。」
Can I use @scope
via zhangxinxu
#优质博文 #前端 #新标准 #html
原生 details 支持手风琴模式了！
AI摘要：HTML的
via 微信公众号 前端侦探
原生 details 支持手风琴模式了！
AI摘要：HTML的
details 元素最近新增了一个 name 属性，这一更新带来了手风琴模式的支持。details 元素通常与 summary 元素配合使用，提供了原生的展开和收起效果。通过CSS自定义，可以去除 summary 前的黑色三角形，并支持嵌套以实现树形结构目录。新增的 name 属性允许将多个 details 元素关联起来，实现手风琴效果，即打开一个元素时关闭其他元素。由于兼容性问题，可能需要通过 JavaScript 进行兼容性处理。目前，可以通过检测 'name' in document.createElement('details') 来确认浏览器是否支持此新特性。尽管这一特性可以通过 JavaScript 实现，但其提供了一种无需额外脚本即可实现的原生方法。via 微信公众号 前端侦探
#阮一峰的科技周刊 #前端 #优质博文 #资源推荐 #tools
科技爱好者周刊（第 282 期）：电动皮卡 Cybertruck 的 48V 供电
1. 2023年 CSS 发展总结（中文） 📓 Chrome 团队的总结，2023年 CSS 增加了哪些功能。#新标准 #css
2. 如何使用 Fail2ban 保护 SSH（英文）📓 一篇初学者教程，教你如何在 Linux 上使用 Fail2Ban，防止服务器被暴力破解密码。
3. Web Components 比 JavaScript 框架更长久（英文） 📓 作者需要一个页面效果，最终选择了 Web 组件来实现，这样可以与任何框架匹配。否则，换了一个框架，就需要重新实现。
4. 静态资源的缓存标头应该怎么写？（英文） 📓 网站的静态资源，通常不会经常变动，它们的缓存应该怎么写 HTTP 标头
5. 如何将 MP3 文件转为 Opus 格式？（英文） 📓 Opus 是新的音乐编码格式，比 MP3 音频质量更好，而且压缩后体积还更小。
6. 如何使用 GPT-3 解析非结构化数据（英文） 📓 作者演示一个实例，如何用 GPT-3 将公司的招聘帖子转成 JSON 数据。 【看了一下，很好的gpt使用实例，建议阅读】#chatgpt #ai
7. Imagine 🧰 Meta 公司推出的文生图工具，使用 Facebook 和 Instagram 的11亿张图片训练，现在可以免费使用。【试了下，风格比较三次元都，相比起来 chatgpt 的 DALL·E 更二次元】#ai #文生图
8. NotebookLM 🧰 谷歌发布的 AI 笔记工具，用户上传文档，然后可以对文档提问，并且自动生成笔记，目前对美国用户免费开放。参见谷歌的介绍文章。不过，它好像只支持上传英文的 PDF 文件。 #ai
9. Scalar API Reference 🧰 一个开源工具，将 Swagger/OpenAPI 文件转成互动式 API 文档。
10. MD Video 🧰 一个桌面软件，将 Markdown 文档转成一段短视频。【适合水视频？（】
11. bproxy 🧰 一款为前端开发设计的代理工具，可以拦截 HTTP 请求，配置文件是一个 JS 脚本。
12. Trippy 🧰 一个命令行工具，可以代替 traceroute 查看互联网通信的路径，分析网络状况。
科技爱好者周刊（第 282 期）：电动皮卡 Cybertruck 的 48V 供电
1. 2023年 CSS 发展总结（中文） 📓 Chrome 团队的总结，2023年 CSS 增加了哪些功能。#新标准 #css
2. 如何使用 Fail2ban 保护 SSH（英文）📓 一篇初学者教程，教你如何在 Linux 上使用 Fail2Ban，防止服务器被暴力破解密码。
3. Web Components 比 JavaScript 框架更长久（英文） 📓 作者需要一个页面效果，最终选择了 Web 组件来实现，这样可以与任何框架匹配。否则，换了一个框架，就需要重新实现。
4. 静态资源的缓存标头应该怎么写？（英文） 📓 网站的静态资源，通常不会经常变动，它们的缓存应该怎么写 HTTP 标头
5. 如何将 MP3 文件转为 Opus 格式？（英文） 📓 Opus 是新的音乐编码格式，比 MP3 音频质量更好，而且压缩后体积还更小。
6. 如何使用 GPT-3 解析非结构化数据（英文） 📓 作者演示一个实例，如何用 GPT-3 将公司的招聘帖子转成 JSON 数据。 【看了一下，很好的gpt使用实例，建议阅读】#chatgpt #ai
7. Imagine 🧰 Meta 公司推出的文生图工具，使用 Facebook 和 Instagram 的11亿张图片训练，现在可以免费使用。【试了下，风格比较三次元都，相比起来 chatgpt 的 DALL·E 更二次元】#ai #文生图
8. NotebookLM 🧰 谷歌发布的 AI 笔记工具，用户上传文档，然后可以对文档提问，并且自动生成笔记，目前对美国用户免费开放。参见谷歌的介绍文章。不过，它好像只支持上传英文的 PDF 文件。 #ai
9. Scalar API Reference 🧰 一个开源工具，将 Swagger/OpenAPI 文件转成互动式 API 文档。
10. MD Video 🧰 一个桌面软件，将 Markdown 文档转成一段短视频。【适合水视频？（】
11. bproxy 🧰 一款为前端开发设计的代理工具，可以拦截 HTTP 请求，配置文件是一个 JS 脚本。
12. Trippy 🧰 一个命令行工具，可以代替 traceroute 查看互联网通信的路径，分析网络状况。
#阮一峰的科技周刊 #前端 #优质博文 #资源推荐 #tools
科技爱好者周刊（第 281 期）：新基建的政策选择
1. JavaScript 中验证 URL 的新方法（英文） 📓 JS 新增了一个
2. Cloudscape 🧰 一个 React 组件库，专为云产品设计的。 #组件库
3. TinyLD 🧰 一个 JS 库，用来判断一段文字是什么语言（汉语、英语、日语等等）。
4. VineJS 🧰 一个 Node.js 的表单验证库，只用于后端，支持大量验证规则，验证速度快。
5. AI Image Captions 🧰 一个在线工具，可以为图片生成介绍词，用于社交媒体，可以指定语言、风格和长度。 #AI
6. IP 工具箱 🧰 一个开源的本地网站，集成了 IP 相关的各种查询。
7. GoMusic 🧰 音乐迁移助手，将网易云音乐、QQ 音乐的歌单，迁移至 Apple/Youtube/Spotify Music。
8. 33 字幕 🧰 一个 Win/Mac 桌面软件，用于识别/制作音频和视频文件的双语字幕。
9. vue-draggable-plus 🧰 Vue2 & Vue3 的拖拽组件。
10. LLM 可视化 📓 这个网站提供大型语言模型（LLM）原理讲解，每一步讲解都在右侧配上动画。 【这个好牛掰】
科技爱好者周刊（第 281 期）：新基建的政策选择
1. JavaScript 中验证 URL 的新方法（英文） 📓 JS 新增了一个
URL.canParse() 方法，可以验证字符串是否为有效 URL。 #新标准2. Cloudscape 🧰 一个 React 组件库，专为云产品设计的。 #组件库
3. TinyLD 🧰 一个 JS 库，用来判断一段文字是什么语言（汉语、英语、日语等等）。
4. VineJS 🧰 一个 Node.js 的表单验证库，只用于后端，支持大量验证规则，验证速度快。
5. AI Image Captions 🧰 一个在线工具，可以为图片生成介绍词，用于社交媒体，可以指定语言、风格和长度。 #AI
6. IP 工具箱 🧰 一个开源的本地网站，集成了 IP 相关的各种查询。
7. GoMusic 🧰 音乐迁移助手，将网易云音乐、QQ 音乐的歌单，迁移至 Apple/Youtube/Spotify Music。
8. 33 字幕 🧰 一个 Win/Mac 桌面软件，用于识别/制作音频和视频文件的双语字幕。
9. vue-draggable-plus 🧰 Vue2 & Vue3 的拖拽组件。
10. LLM 可视化 📓 这个网站提供大型语言模型（LLM）原理讲解，每一步讲解都在右侧配上动画。 【这个好牛掰】
Stefanjudis
How to validate URLs in JavaScript (2023 edition)
Learn how to validate URLs with the new static JavaScript method `URL.canParse`.
#优质博文 #前端 #css #新标准
快速了解 CSS @starting-style 规则
AI 摘要: 本文介绍了Chrome 117新推出的CSS @starting-style规则。这个规则允许定义元素的初始样式，使其在页面加载时即呈现动画效果。传统上，CSS动画依赖于状态变化来触发，如使用transition和animation。transition简单但需要状态变化，如添加类名。animation可自动运行，无需状态变化。@starting-style改变了这一局限，允许在元素渲染前设定初始状态，使transition可用于初始渲染动画。
文章还提及了一个常见问题：新添加的元素难以触发transition动画，因为元素在添加类名时尚未完全渲染。解决方法包括使用定时器、强制重绘或animation替代。@starting-style同样可解决此问题。
此外，@starting-style使display:none的元素也能支持过渡效果，这在之前是难以实现的。最后，作者指出，虽然@starting-style是一个有用的新特性，但可能不会广泛使用，因为它的功能可以被其他方法替代，且其正式应用时间尚不确定。作者通过具体示例和链接提供了实际效果展示，帮助读者更好地理解@starting-style的应用场景和优势。
via 公众号 前端侦探
快速了解 CSS @starting-style 规则
AI 摘要: 本文介绍了Chrome 117新推出的CSS @starting-style规则。这个规则允许定义元素的初始样式，使其在页面加载时即呈现动画效果。传统上，CSS动画依赖于状态变化来触发，如使用transition和animation。transition简单但需要状态变化，如添加类名。animation可自动运行，无需状态变化。@starting-style改变了这一局限，允许在元素渲染前设定初始状态，使transition可用于初始渲染动画。
文章还提及了一个常见问题：新添加的元素难以触发transition动画，因为元素在添加类名时尚未完全渲染。解决方法包括使用定时器、强制重绘或animation替代。@starting-style同样可解决此问题。
此外，@starting-style使display:none的元素也能支持过渡效果，这在之前是难以实现的。最后，作者指出，虽然@starting-style是一个有用的新特性，但可能不会广泛使用，因为它的功能可以被其他方法替代，且其正式应用时间尚不确定。作者通过具体示例和链接提供了实际效果展示，帮助读者更好地理解@starting-style的应用场景和优势。
via 公众号 前端侦探
#优质博文 #前端 #css #新标准
快速了解 CSS 相对颜色
AI摘要：这篇技术博文介绍了CSS相对颜色的新特性，着重探讨了其核心技术和方法。该特性允许将颜色以某种格式分解并重新组合，实现颜色的动态调整。文章创新点在于介绍了如何使用CSS相对颜色来实现颜色的加深、减淡、饱和度变化、色相变化以及反色等需求，以及如何使用CSS变量和calc函数进行灵活计算。这一特性为前端开发者提供了更灵活的颜色处理方法，减少了对JavaScript的依赖，具有实际应用价值。CSS相对颜色将在全局主题应用中发挥重要作用，为前端开发带来更多可能性。文章内容详实，对颜色处理的方法有很好的解释和示例演示。
快速了解 CSS 相对颜色
AI摘要：这篇技术博文介绍了CSS相对颜色的新特性，着重探讨了其核心技术和方法。该特性允许将颜色以某种格式分解并重新组合，实现颜色的动态调整。文章创新点在于介绍了如何使用CSS相对颜色来实现颜色的加深、减淡、饱和度变化、色相变化以及反色等需求，以及如何使用CSS变量和calc函数进行灵活计算。这一特性为前端开发者提供了更灵活的颜色处理方法，减少了对JavaScript的依赖，具有实际应用价值。CSS相对颜色将在全局主题应用中发挥重要作用，为前端开发带来更多可能性。文章内容详实，对颜色处理的方法有很好的解释和示例演示。
#优质博文 #前端 #新标准
Google I/O 2023 — Web 平台的最新动态
1、原生的 HTML 元素 Dialog
2、CSS 变换简写
3、新的 CSS 视口单位 svh 、 lvh等
4、深拷贝要有原生的函数 structuredClone 了
5、focus-visible 伪类
6、Transform Stream
7、Import Maps
Google I/O 2023 — Web 平台的最新动态
1、原生的 HTML 元素 Dialog
2、CSS 变换简写
3、新的 CSS 视口单位 svh 、 lvh等
4、深拷贝要有原生的函数 structuredClone 了
5、focus-visible 伪类
6、Transform Stream
7、Import Maps
打算将这里作为前端学习及日常分享的一个频道，偶尔也会分享自己的一些见闻，有自己觉得写的还不错的博文也会发在这里~
Gitbook 前端学习记录：https://book.cosine.ren/
个人博客：
xLog 👉 x.cosine.ren
Hexo 👉 https://ysx.cosine.ren
RSS订阅📢 https://x.cosine.ren/feed/xml
🔖tags
#优质博文 #资源推荐 #博客更新 #碎碎念 #项目更新 #图
#前端 #javascript #css #tailwind #react #node #typescript #工程化 #阮一峰的科技周刊 #chatgpt #rss #vscode #web3 #新标准 #wasm
Gitbook 前端学习记录：https://book.cosine.ren/
个人博客：
xLog 👉 x.cosine.ren
Hexo 👉 https://ysx.cosine.ren
RSS订阅📢 https://x.cosine.ren/feed/xml
🔖tags
#优质博文 #资源推荐 #博客更新 #碎碎念 #项目更新 #图
#前端 #javascript #css #tailwind #react #node #typescript #工程化 #阮一峰的科技周刊 #chatgpt #rss #vscode #web3 #新标准 #wasm
book.cosine.ren
前言及目录 | 前端学习记录
