呜啦！日常碎碎念，偶尔掉落优质前端博文推荐、学习资源等
网页：https://tg.cosine.ren
本频道的搜索Bot 来辣 👉 @cosSearchBot
私聊直接发消息就可以搜索啦～
🔖tags
#优质博文 #资源推荐 #博客更新 #碎碎念 #项目更新 #手工 #书摘 #阮一峰的科技周刊 #新动态
图频：Cosine 🎨 Gallery @CosineGallery
猫片： @cosine_cat
联系频道主：@cosine_yu
网页：https://tg.cosine.ren
本频道的搜索Bot 来辣 👉 @cosSearchBot
私聊直接发消息就可以搜索啦～
🔖tags
#优质博文 #资源推荐 #博客更新 #碎碎念 #项目更新 #手工 #书摘 #阮一峰的科技周刊 #新动态
图频：Cosine 🎨 Gallery @CosineGallery
猫片： @cosine_cat
联系频道主：@cosine_yu
#优质博文 #新标准 #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
Motion for React — Install & first React animation | Motion
Learn Motion for React animation library: Install, animate HTML and SVG elements with spring animations, staggering effects. Complete guide with examples.
#碎碎念 #杂谈
啊，顺便浅谈一下我玩游戏的看法，我属于超级杂食三分热度什么都玩的游戏党。（超级杂食大王！）
1. 对于精品 Steam 单机游戏 / 3A：有条件有能力就买，买来玩完开开心心躺家庭库里（也可能没时间/没兴趣玩完），如果家庭库里有那更好了不用买了w（感谢某富富 nene 共享的一大堆黄油）对我来说，Steam 游戏是精神食粮，但是并不是追求全成就/全进度的那一挂（很费时间，我都花钱买游戏了为什么还要花时间玩x）黑神话打到二周目了推不动了就放放，啥时候想起来了再打打。
2. 对于快餐 / 上班游戏：这种游戏对于我就属于消遣 & 快餐，食之有短暂的快乐。崩、原、鸣、明、物，各大手游我都玩过，一般热度持续不长，能吃持续久的多少有点什么因素在，原持续了俩年退坑了，崩铁现在每天挂挂，绝刚出的时候也玩了玩不对我胃口，鸣持续了几个月，鸣犯了跟原一样的腻歪（但是如果有亮眼的角色设计什么的我会考虑回坑玩玩，然后很快又弃坑）玩的时候呢，虽然知道肯定到最后会过时，但还是会看角色攻略/推荐装备之类的。此类游戏白嫖居多，关注社区攻略的时候大脑会自动过滤节奏 / 骂战 / 讨论（大多数时候的想法是对我来说本就是快餐也没必要关注以后发展，这样）并且我很乐于去尝试市面上的新手游，尽管很多时候都不好玩。这类游戏的主要乐趣在于白嫖抽卡爽/剧情/角色设计/战斗设计/画面等多维度，总可能有维度拉胯。
3. 对于女性向游戏：奇暖、闪暖、以闪、恋与、深空、未定都摸过，奇暖在高中的时候玩了两年，退了，闪暖大学的时候玩了两年，退了，这类也属于快餐，恋与 / 深空 / 未定这种都是早年玩了一小会，现在成为社会人了完全没感觉了。我还是更喜欢叠纸一些，他们在游戏领域发展的还挺多面的，此类游戏完全不需要看社区，关注官媒就足够了。活动都是循环的，上号 5 分钟清完就可以下，主要乐趣在养女儿，换装 play。
4. 对于网游 / 端游，小的时候玩的不论（），剑三高中玩了一阵子，现在对我也是突然没了吸引力。现在就偶尔永劫无间打打劫，对我来说打端游就是补充社交能量。就是有时候下班开心，喊 xdm 来打几把劫，三人连麦开开心心热热闹闹，Steam 上的多人游戏同理，此类游戏的社区就像是大家伙的饭桌，主打一个下饭。
所以我的快乐真的很简单，我没时间不快乐，又要打游戏又要看番又要写代码（x）
浅打这么多，有空了想到了再慢慢补充。
啊，顺便浅谈一下我玩游戏的看法，我属于超级杂食三分热度什么都玩的游戏党。（超级杂食大王！）
1. 对于精品 Steam 单机游戏 / 3A：有条件有能力就买，买来玩完开开心心躺家庭库里（也可能没时间/没兴趣玩完），如果家庭库里有那更好了不用买了w（感谢某富富 nene 共享的一大堆黄油）对我来说，Steam 游戏是精神食粮，但是并不是追求全成就/全进度的那一挂（很费时间，我都花钱买游戏了为什么还要花时间玩x）黑神话打到二周目了推不动了就放放，啥时候想起来了再打打。
2. 对于快餐 / 上班游戏：这种游戏对于我就属于消遣 & 快餐，食之有短暂的快乐。崩、原、鸣、明、物，各大手游我都玩过，一般热度持续不长，能吃持续久的多少有点什么因素在，原持续了俩年退坑了，崩铁现在每天挂挂，绝刚出的时候也玩了玩不对我胃口，鸣持续了几个月，鸣犯了跟原一样的腻歪（但是如果有亮眼的角色设计什么的我会考虑回坑玩玩，然后很快又弃坑）玩的时候呢，虽然知道肯定到最后会过时，但还是会看角色攻略/推荐装备之类的。此类游戏白嫖居多，关注社区攻略的时候大脑会自动过滤节奏 / 骂战 / 讨论（大多数时候的想法是对我来说本就是快餐也没必要关注以后发展，这样）并且我很乐于去尝试市面上的新手游，尽管很多时候都不好玩。这类游戏的主要乐趣在于白嫖抽卡爽/剧情/角色设计/战斗设计/画面等多维度，总可能有维度拉胯。
3. 对于女性向游戏：奇暖、闪暖、以闪、恋与、深空、未定都摸过，奇暖在高中的时候玩了两年，退了，闪暖大学的时候玩了两年，退了，这类也属于快餐，恋与 / 深空 / 未定这种都是早年玩了一小会，现在成为社会人了完全没感觉了。我还是更喜欢叠纸一些，他们在游戏领域发展的还挺多面的，此类游戏完全不需要看社区，关注官媒就足够了。活动都是循环的，上号 5 分钟清完就可以下，主要乐趣在养女儿，换装 play。
4. 对于网游 / 端游，小的时候玩的不论（），剑三高中玩了一阵子，现在对我也是突然没了吸引力。现在就偶尔永劫无间打打劫，对我来说打端游就是补充社交能量。就是有时候下班开心，喊 xdm 来打几把劫，三人连麦开开心心热热闹闹，Steam 上的多人游戏同理，此类游戏的社区就像是大家伙的饭桌，主打一个下饭。
所以我的快乐真的很简单，我没时间不快乐，又要打游戏又要看番又要写代码（x）
浅打这么多，有空了想到了再慢慢补充。
#优质视频 #follow #rss
作者亲自答来了（x）
如何使用 Follow Transform 订阅未提供 RSS 的网站
https://youtu.be/vGDBao-gh4c
via Youtube Hyoban
如何使用 Follow Transform 订阅未提供 RSS 的网站
https://youtu.be/vGDBao-gh4c
via Youtube Hyoban
