呜啦！日常碎碎念，偶尔掉落优质前端博文推荐、学习资源等
网页：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 微信公众号 这波能反杀
#阮一峰的科技周刊 #前端 #优质博文 #资源推荐 #tools
科技爱好者周刊（第 287 期）：禄丰恐龙谷记行
1. WebCodecs 介绍（中文） 📓 WebCodecs 是一个新的浏览器 API，提供音视频的编解码能力的标准接口。本文介绍这个 API，并提供 demo。
2. JavaScript 的双重否运算（英文）📓 本文介绍 JS 的否运算（~），特别是连续执行两次（~~）的用途。 #javascript
3. Amazing AI 🧰 著名程序员 Sindre Sorhus 推出的一款 mac 和 iPhone App，能够在本地运行 Stable Diffusion 模型，完成文生图。 #AI
4. memory spy 🧰 用户在这个网站上提交 C 程序，可以按行查看变量在内存的表示方式，比如整数、浮点数占用多少内存，详见介绍文章。 #后端
5. Penrose 🧰 一个开源工具，可以根据文本指令，生成可视化图形，类似于 Mermaid 和 PlantUML，但是图形能力更强大。
6. Gitblog 🧰 这个工具可以将 GitHub Issues 转成一个静态的博客网站，单个博客使用免费。
7. Kamera 🧰 一个开源的照片展示网站，点击可以查看 EXIF 信息，支持 Docker 一键部署。
8. weapp-tailwindcss 🧰 小程序使用 tailwindcss 的全面解决方案。 #css #tailwind
9. ICONCE 🧰 SVG 图标编辑生成工具。
10. Gemini ChatUp 🧰 基于 Gemini Pro 和 Gemini Pro Vision API 的开源聊天应用。支持一键部署至 Vercel，需要 Gemini API Key。 #AI
11. Imgae matting 🧰 基于开源模型的在线抠图，支持人像和物体抠图，可以 docker 运行 ，无需 GPU。
12. 优雅简历 🧰 免费的在线简历生成工具，集成 ChatGPT，可以让 AI 修改、定制简历。 #简历制作
13. CSS 网格互动指南（An Interactive Guide to CSS Grid）📓 一份 CSS 网格（grid）的教程，包含大量的互动示例。 #css
科技爱好者周刊（第 287 期）：禄丰恐龙谷记行
1. WebCodecs 介绍（中文） 📓 WebCodecs 是一个新的浏览器 API，提供音视频的编解码能力的标准接口。本文介绍这个 API，并提供 demo。
2. JavaScript 的双重否运算（英文）📓 本文介绍 JS 的否运算（~），特别是连续执行两次（~~）的用途。 #javascript
3. Amazing AI 🧰 著名程序员 Sindre Sorhus 推出的一款 mac 和 iPhone App，能够在本地运行 Stable Diffusion 模型，完成文生图。 #AI
4. memory spy 🧰 用户在这个网站上提交 C 程序，可以按行查看变量在内存的表示方式，比如整数、浮点数占用多少内存，详见介绍文章。 #后端
5. Penrose 🧰 一个开源工具，可以根据文本指令，生成可视化图形，类似于 Mermaid 和 PlantUML，但是图形能力更强大。
6. Gitblog 🧰 这个工具可以将 GitHub Issues 转成一个静态的博客网站，单个博客使用免费。
7. Kamera 🧰 一个开源的照片展示网站，点击可以查看 EXIF 信息，支持 Docker 一键部署。
8. weapp-tailwindcss 🧰 小程序使用 tailwindcss 的全面解决方案。 #css #tailwind
9. ICONCE 🧰 SVG 图标编辑生成工具。
10. Gemini ChatUp 🧰 基于 Gemini Pro 和 Gemini Pro Vision API 的开源聊天应用。支持一键部署至 Vercel，需要 Gemini API Key。 #AI
11. Imgae matting 🧰 基于开源模型的在线抠图，支持人像和物体抠图，可以 docker 运行 ，无需 GPU。
12. 优雅简历 🧰 免费的在线简历生成工具，集成 ChatGPT，可以让 AI 修改、定制简历。 #简历制作
13. CSS 网格互动指南（An Interactive Guide to CSS Grid）📓 一份 CSS 网格（grid）的教程，包含大量的互动示例。 #css
#优质博文 #前端 #xLog
如何优雅编译一个Markdown文档
【好诶】
摘要: Markdown是一种轻量级标记语言，可以用纯文本格式编写易读易写的文档。它是xLog主要使用的文章格式。解析Markdown文档的过程可以使用统一的架构来表示。解析过程包括解析、转换和输出三个步骤。在解析步骤中，使用remark-parse将Markdown文档编译成mdast格式的语法树。在转换步骤中，使用一系列remark和rehype插件将语法树转换为需要的内容。最后，在输出步骤中，使用一系列工具库将内容输出为需要的格式。整个过程中使用的关键概念包括unified、remark、rehype、mdast和hast。通过组合插件和调整它们的顺序，可以实现从Markdown到HTML的转换，并添加自定义功能。xLog Flavored Markdown中使用了许多转换插件来满足特定需求。
via DIYgod
如何优雅编译一个Markdown文档
【好诶】
摘要: Markdown是一种轻量级标记语言，可以用纯文本格式编写易读易写的文档。它是xLog主要使用的文章格式。解析Markdown文档的过程可以使用统一的架构来表示。解析过程包括解析、转换和输出三个步骤。在解析步骤中，使用remark-parse将Markdown文档编译成mdast格式的语法树。在转换步骤中，使用一系列remark和rehype插件将语法树转换为需要的内容。最后，在输出步骤中，使用一系列工具库将内容输出为需要的格式。整个过程中使用的关键概念包括unified、remark、rehype、mdast和hast。通过组合插件和调整它们的顺序，可以实现从Markdown到HTML的转换，并添加自定义功能。xLog Flavored Markdown中使用了许多转换插件来满足特定需求。
via DIYgod
How to elegantly compile a Markdown document - DIYgod
Markdown 是一种广泛使用的轻量级标记语言，允许人们使用易读易写的纯文本格式编写文档，也是 xLog 主要使用的文章格式，本文就以 xLog Flavored Markdown 为例来说明如何优雅地解析一个 Markdown 文档
