呜啦！日常碎碎念，偶尔掉落优质前端博文推荐、学习资源等
网页：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 #demo #codepen
Revolving Text by Rafa
一个酷酷的动态旋转文本效果
「 通过 css 一系列的旋转（`rotateX`,
dat.GUI 真是好东西喵」
Revolving Text by Rafa
一个酷酷的动态旋转文本效果
「 通过 css 一系列的旋转（`rotateX`,
rotateY, rotateZ`）和倾斜变换（translate），以及 `preserve-3d 属性，实现文本的 3D 旋转效果。此外，使用了`@keyframes` 定义了动画序列，使得文本能够不断旋转。通过 createLetters 函数动态地创建了文本字符，并将它们放置在3D空间中的正确位置。dat.GUI 真是好东西喵」
#优质博文 #前端 #css
图解 CSS：CSS 层叠和继承
AI摘要：这篇文章介绍了CSS中的层叠、继承和权重三个核心概念，重点解释了层叠和继承的原理和应用。层叠确保了样式按照一定的规则和顺序应用，包括源和重要性、选择器权重、声明顺序等。继承则处理了属性值在DOM树中如何传递和应用。文章还探讨了
via 掘金 大漠
图解 CSS：CSS 层叠和继承
AI摘要：这篇文章介绍了CSS中的层叠、继承和权重三个核心概念，重点解释了层叠和继承的原理和应用。层叠确保了样式按照一定的规则和顺序应用，包括源和重要性、选择器权重、声明顺序等。继承则处理了属性值在DOM树中如何传递和应用。文章还探讨了
@layer 规则，它提供了一种结构化方式来管理CSS规则，使得样式更易于维护和扩展。via 掘金 大漠
#阮一峰的科技周刊 #前端 #优质博文 #资源推荐 #tools
我说我又忘掉了什么
科技爱好者周刊（第 288 期）：技术写作的首要诀窍
1. 2023年前端技术盘点与展望（中文） 📓 腾讯云开发者公众号与腾讯 MoonWebTeam 前端团队联合推出的长篇技术报告。
2. JS 空数组的 every() 方法（英文）📓 every() 方法对于空数组总是返回 true，这是为什么。 #javascript
3. Echo UI 🧰 一款专为 Web Audio API 设计的 UI 库，适合用来搭建基于 Web 的音频应用，基于 React 和 TailwindCSS 开发。 #组件库 #tailwind
4. Message Nest 🧰 开源的消息推送平台，整合邮件、钉钉、企业微信等多种通知方式。
5. Tiny RDM 🧰 Redis 桌面管理客户端，支持 Mac、Windows、Linux。 #后端 #redis
6. Animotion 🧰 一个网页 CSS 动画生成器，可视化设定动画，自动生成代码。 #css
7. Ada 🧰 一个 URL 解析器，符合最新规范，使用 C++ 编写，可以快速处理 URL。
8. Inpaint-web 🧰 开源的图片修复和超分辨率工具, 纯浏览器端实现。
9. AI 字体模型市场 🧰 该网站列出 AI 生成的字体，可以在线使用它们进行文字渲染。
它还支持网页手写八个字，生成自己的 AI 字体。 #AI 【真会玩】
我说我又忘掉了什么
科技爱好者周刊（第 288 期）：技术写作的首要诀窍
1. 2023年前端技术盘点与展望（中文） 📓 腾讯云开发者公众号与腾讯 MoonWebTeam 前端团队联合推出的长篇技术报告。
2. JS 空数组的 every() 方法（英文）📓 every() 方法对于空数组总是返回 true，这是为什么。 #javascript
3. Echo UI 🧰 一款专为 Web Audio API 设计的 UI 库，适合用来搭建基于 Web 的音频应用，基于 React 和 TailwindCSS 开发。 #组件库 #tailwind
4. Message Nest 🧰 开源的消息推送平台，整合邮件、钉钉、企业微信等多种通知方式。
5. Tiny RDM 🧰 Redis 桌面管理客户端，支持 Mac、Windows、Linux。 #后端 #redis
6. Animotion 🧰 一个网页 CSS 动画生成器，可视化设定动画，自动生成代码。 #css
7. Ada 🧰 一个 URL 解析器，符合最新规范，使用 C++ 编写，可以快速处理 URL。
8. Inpaint-web 🧰 开源的图片修复和超分辨率工具, 纯浏览器端实现。
9. AI 字体模型市场 🧰 该网站列出 AI 生成的字体，可以在线使用它们进行文字渲染。
它还支持网页手写八个字，生成自己的 AI 字体。 #AI 【真会玩】
#优质博文 #前端
作为前端，工作中处理过什么复杂的需求？
AI摘要：腾讯 IMWeb 团队成员分享了在疫情期间，负责腾讯课堂前端研发时面临的复杂挑战。流量激增带来了前所未有的考验，包括核心 HTML 入口的稳定性、音视频直播服务的稳定运行、SAS 数据管理配置平台的稳定性、IMPush 消息通道的压力、以及监控、日志和灰度控制的重要性。此外，团队还积极参与后台保护工作，帮助后台团队共渡难关。在极端业务需求压力下，团队快速推出了腾讯课堂极速版，并采用 Nohost 方案和 Tolstoy 方案提高开发效率，以及 Thanos 方案确保稳定上线。个人技术能力和文档建设在这一切中起到了至关重要的作用。
via 微信公众号 前端技术编程
作为前端，工作中处理过什么复杂的需求？
AI摘要：腾讯 IMWeb 团队成员分享了在疫情期间，负责腾讯课堂前端研发时面临的复杂挑战。流量激增带来了前所未有的考验，包括核心 HTML 入口的稳定性、音视频直播服务的稳定运行、SAS 数据管理配置平台的稳定性、IMPush 消息通道的压力、以及监控、日志和灰度控制的重要性。此外，团队还积极参与后台保护工作，帮助后台团队共渡难关。在极端业务需求压力下，团队快速推出了腾讯课堂极速版，并采用 Nohost 方案和 Tolstoy 方案提高开发效率，以及 Thanos 方案确保稳定上线。个人技术能力和文档建设在这一切中起到了至关重要的作用。
via 微信公众号 前端技术编程
CSS 灵动环动画
分享一个好看的CSS动画，通过不断叠加 box-shadow 实现
codepen 可以查看
👉「https://codepen.io/lonekorean/pen/KKVdQPX」
via 微信公众号 前端侦探
#优质博文 #前端 #react
React 19 即将推出的 4 个全新 Hooks，很实用！
AI摘要：React 19即将引入4个全新的Hooks：
via 微信公众号 前端充电宝
React 19 即将推出的 4 个全新 Hooks，很实用！
AI摘要：React 19即将引入4个全新的Hooks：
use 、 useOptimistic 、 useFormState 和 useFormStatus ，主要针对数据获取和表单管理。use Hook允许读取类似于Promise或context的资源，能在客户端进行“挂起”的API操作。useOptimistic 为乐观更新提供支持，可以在提交操作同时更新用户界面。useFormState 用于根据表单动作更新状态，主要应用于显示确认消息或错误消息。useFormStatus 用于获取表单提交的状态信息，如提交状态、数据、方法等。这些新特性旨在简化数据获取和表单处理流程，提升开发效率和用户体验。via 微信公众号 前端充电宝
#优质博文 #前端 #动画
FLIP，一种高端优雅但简单易用的前端动画思维
AI摘要：FLIP是一种前端动画思维，包括First(记录元素初始位置)、Last(记录元素结束位置)、Invert(设计动画从初始到结束位置的过渡)、Play(执行动画)。文章通过三个案例展示FLIP的实用性。第一个案例展示元素X轴位置的随机变化；第二个案例展示了多属性动画，如位置和背景色的改变；第三个案例介绍了共享元素动画，这种动画在前端不常见，但能显著提升交互的高级感和优雅感。作者还讨论了将FLIP与路由切换结合的可能性，展示了FLIP在前端动画设计中的灵活性和实用性。
via 微信公众号 这波能反杀
FLIP，一种高端优雅但简单易用的前端动画思维
AI摘要：FLIP是一种前端动画思维，包括First(记录元素初始位置)、Last(记录元素结束位置)、Invert(设计动画从初始到结束位置的过渡)、Play(执行动画)。文章通过三个案例展示FLIP的实用性。第一个案例展示元素X轴位置的随机变化；第二个案例展示了多属性动画，如位置和背景色的改变；第三个案例介绍了共享元素动画，这种动画在前端不常见，但能显著提升交互的高级感和优雅感。作者还讨论了将FLIP与路由切换结合的可能性，展示了FLIP在前端动画设计中的灵活性和实用性。
via 微信公众号 这波能反杀
