呜啦！日常碎碎念，偶尔掉落优质前端博文推荐、学习资源等
网页：https://tg.cosine.ren
本频道的搜索Bot 来辣 👉 @cosSearchBot
私聊直接发消息就可以搜索啦～
🔖tags
#优质博文 #资源推荐 #博客更新 #碎碎念 #项目更新 #手工 #书摘 #阮一峰的科技周刊 #新动态
图频：Cosine 🎨 Gallery @CosineGallery
猫片： @cosine_cat
网页：https://tg.cosine.ren
本频道的搜索Bot 来辣 👉 @cosSearchBot
私聊直接发消息就可以搜索啦～
🔖tags
#优质博文 #资源推荐 #博客更新 #碎碎念 #项目更新 #手工 #书摘 #阮一峰的科技周刊 #新动态
图频：Cosine 🎨 Gallery @CosineGallery
猫片： @cosine_cat
#优质博文 #前端 #css #grid
Learn CSS Subgrid
AI 摘要：CSS 子网格（subgrid）允许子元素继承父元素的网格定义，解决了嵌套网格中子元素无法对齐的问题。通过在子元素上设置
via Ahmad
Learn CSS Subgrid
AI 摘要：CSS 子网格（subgrid）允许子元素继承父元素的网格定义，解决了嵌套网格中子元素无法对齐的问题。通过在子元素上设置
display: grid 和 grid-template-rows: subgrid ，子元素可以继承父元素的行定义，实现内部元素的对齐。例如，在编辑布局中，使用子网格可以确保标题、描述和图像在不同列中正确对齐。目前，子网格在 Firefox 71+ 和 Safari Technology Preview 中得到支持。 via Ahmad
Ishadeed
Learn CSS Subgrid
A deep-dive into the new CSS subgrid feature with real-life examples and use-cases.
#优质博文 #前端 #javascript
Precise Decimal Math in JavaScript with Fraction.js
AI 摘要：JavaScript 在处理浮点数时常出现精度问题，例如 0.1 + 0.2 结果为 0.30000000000000004。这是由于计算机以二进制存储数字，某些十进制小数无法精确表示，导致舍入误差。为解决此问题，Fraction.js 库提供了将数字表示为分数的方式，确保精确计算。通过 Fraction.js，诸如 0.1 + 0.2 等运算可得到精确结果 0.3，避免了浮点数的精度陷阱。
via Trevor
Precise Decimal Math in JavaScript with Fraction.js
AI 摘要：JavaScript 在处理浮点数时常出现精度问题，例如 0.1 + 0.2 结果为 0.30000000000000004。这是由于计算机以二进制存储数字，某些十进制小数无法精确表示，导致舍入误差。为解决此问题，Fraction.js 库提供了将数字表示为分数的方式，确保精确计算。通过 Fraction.js，诸如 0.1 + 0.2 等运算可得到精确结果 0.3，避免了浮点数的精度陷阱。
via Trevor
👋 大家好，我是 RSSHub 的作者。最近我开发了一款名为 Follow 的特别的 RSS 阅读器。这个阅读器与 RSSHub 无缝集成，让用户更轻松地访问和使用其功能。Follow 代表了我对 RSS 未来可能性的全新探索。它将于 下周一 在 Product Hunt 上发布，希望大家能在当天投票支持。如果你是 RSSHub 的爱好者、或认同相似的理念，非常希望你也来为我们投票。每一票对我们都很重要，也是对社区和团队最大的支持和鼓励，非常感谢!!! 🙏🙏🙏
If you already have an Product Hunt account, please help me click "Notify me" in advance. If you don't have an account, please help me register in advance to ensure you can vote on the day.
如果你已有 Product Hunt 账户，请帮我们提前点击 "Notify me"。如果你没有账户，请帮我们提前注册以避免当天权重过低无法投票
🌟 Link: https://www.producthunt.com/products/follow-3
菜鸟驿站旁边有家烧腊饭的店
点了个猪脚+叉烧双拼小份的，18块钱（正常猪脚饭是小份15大份20）
让我康康能不能成为我的常驻餐厅
配菜可以不要青菜酸菜，换成土豆丝好评
不小份是真吃不完啊（恼）外卖也是
#优质博文 #新标准 #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
#优质博文 #前端 #css #设计 #无障碍
Beautiful focus outlines
AI 摘要：文章探讨了网页设计中聚焦轮廓（focus outlines）的重要性及美学优化。聚焦轮廓为键盘用户和动作障碍者提供视觉反馈，增强网页无障碍性。默认浏览器样式常不一致，建议自定义实现以确保可见性，需遵循WCAG准则：至少2px宽，色彩对比度≥3:1。
技术点包括：
1. 使用
2. 使用
3. 利用
4. 创建圆角或双线轮廓以增强视觉效果。
设计应平衡美观和功能，避免无意破坏交互性，同时确保不同背景的对比清晰度。
相关网站：Focus Appearance (Level AAA)
from Frontend Focus #668
Beautiful focus outlines
AI 摘要：文章探讨了网页设计中聚焦轮廓（focus outlines）的重要性及美学优化。聚焦轮廓为键盘用户和动作障碍者提供视觉反馈，增强网页无障碍性。默认浏览器样式常不一致，建议自定义实现以确保可见性，需遵循WCAG准则：至少2px宽，色彩对比度≥3:1。
技术点包括：
1. 使用
:focus-visible 避免鼠标点击显示轮廓； 2. 使用
currentColor 自动匹配文本颜色； 3. 利用
outline-offset 调整轮廓位置； 4. 创建圆角或双线轮廓以增强视觉效果。
设计应平衡美观和功能，避免无意破坏交互性，同时确保不同背景的对比清晰度。
相关网站：Focus Appearance (Level AAA)
from Frontend Focus #668
Medienbaecker
Beautiful focus outlines · Medienbäcker Thomas Günther
How to make focus outlines both beautiful and accessible. I'll show you my approach using CSS custom properties, share practical tips for different contexts, and explain why treating focus states as essential design elements creates interfaces that work for…
#新动态 #前端 #动画
卧槽 framer-motion 终于有搜索了，太好了，我火星了，新文档：https://motion.dev/docs/react-quick-start
搓了个 Follow 的 transform 订阅 blog: Motion (原 framer-motion )
Framer Motion is now independent, introducing Motion
AI 摘要：2024 年 11 月 12 日，Matt Perry 宣布 Framer Motion 将独立运营，并更名为 Motion。新网站 motion.dev 提供了全新的设计和搜索功能。Motion 不仅支持 React，还引入了适用于原生 JavaScript 和其他框架的 API，扩展了其应用范围。未来，Motion 将专注于开发新 API、改进文档和社区支持，并计划引入高层组件和开发者工具等新功能。Framer 将继续作为 Motion 的首个赞助商，确保其持续发展。
from JavaScript Weekly #443
卧槽 framer-motion 终于有搜索了，太好了，我火星了，新文档：https://motion.dev/docs/react-quick-start
搓了个 Follow 的 transform 订阅 blog: Motion (原 framer-motion )
rsshub://rsshub/transform/html/https%3A%2F%2Fmotion.dev%2Fblog/item%3Da%5Bname%3D%22Post%22%5D%26itemContent%3Ddiv%5Bdata-framer-name%3D%22Content%22%5DFramer Motion is now independent, introducing Motion
AI 摘要：2024 年 11 月 12 日，Matt Perry 宣布 Framer Motion 将独立运营，并更名为 Motion。新网站 motion.dev 提供了全新的设计和搜索功能。Motion 不仅支持 React，还引入了适用于原生 JavaScript 和其他框架的 API，扩展了其应用范围。未来，Motion 将专注于开发新 API、改进文档和社区支持，并计划引入高层组件和开发者工具等新功能。Framer 将继续作为 Motion 的首个赞助商，确保其持续发展。
from JavaScript Weekly #443
motion.dev
Get started with Motion for React | Motion for React (prev Framer Motion)
Learn Motion for React animation library: Install, animate HTML and SVG elements with spring animations, staggering effects. Complete guide with examples.
