呜啦！日常碎碎念，偶尔掉落优质前端博文推荐、学习资源等
网页：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 文档
#优质博文 #前端 #chatgpt #AI #组件库 #资源推荐
ProChat 1.0：开箱即用的大模型对话前端解决方案
摘要: ProChat 1.0，一个基于大模型的对话前端解决方案，提供流式输出支持和完备的Markdown、代码块展示。它特别优化了用户体验，如可编辑的会话消息和程序化控制。ProChat 支持快速集成和多样的自定义配置，适用于各种AI会话场景。
ProChat 官网 ｜ 开源地址
via 公众号 支付宝体验科技
ProChat 1.0：开箱即用的大模型对话前端解决方案
摘要: ProChat 1.0，一个基于大模型的对话前端解决方案，提供流式输出支持和完备的Markdown、代码块展示。它特别优化了用户体验，如可编辑的会话消息和程序化控制。ProChat 支持快速集成和多样的自定义配置，适用于各种AI会话场景。
ProChat 官网 ｜ 开源地址
via 公众号 支付宝体验科技
#优质博文 #前端 #资源推荐 #tailwind #设计资源
2024 前端图标趋势：在 TailwindCSS 中使用 SVG 图标
【可以，以后在自己项目里把 react-icons 换掉试试】
图标库网站：iconify.design / yesicon（支持中文搜索）
摘要: 这篇文章介绍了如何在 TailwindCSS 中使用 SVG 图标，特别强调了 SVG 图标的灵活性和易用性。首先，作者说明了集成 TailwindCSS 和安装 Iconify 图标库的步骤。接着，介绍了 Iconify 图标库的特点，它包含了超过 20 万个图标，并且支持按需引入。文章还提到了如何使用 TailwindCSS 插件引用图标，包括如何搜索图标、自定义图标的颜色和尺寸。此外，作者还讨论了与设计师的配合使用，以及如何自定义图标库。总结部分指出，Iconify 不仅是图标库，还提供了灵活的 SVG 图标使用方式，结合社区插件，能满足各种应用场景。最后，鼓励读者在新的一年中尝试在项目中集成 TailwindCSS 和 Iconify。
via 掘金 dongnaebi
2024 前端图标趋势：在 TailwindCSS 中使用 SVG 图标
【可以，以后在自己项目里把 react-icons 换掉试试】
图标库网站：iconify.design / yesicon（支持中文搜索）
摘要: 这篇文章介绍了如何在 TailwindCSS 中使用 SVG 图标，特别强调了 SVG 图标的灵活性和易用性。首先，作者说明了集成 TailwindCSS 和安装 Iconify 图标库的步骤。接着，介绍了 Iconify 图标库的特点，它包含了超过 20 万个图标，并且支持按需引入。文章还提到了如何使用 TailwindCSS 插件引用图标，包括如何搜索图标、自定义图标的颜色和尺寸。此外，作者还讨论了与设计师的配合使用，以及如何自定义图标库。总结部分指出，Iconify 不仅是图标库，还提供了灵活的 SVG 图标使用方式，结合社区插件，能满足各种应用场景。最后，鼓励读者在新的一年中尝试在项目中集成 TailwindCSS 和 Iconify。
via 掘金 dongnaebi
#优质博文 #前端 #css
dom 获取不到？试试 CSS 动画监听元素渲染吧
摘要: 本文介绍了在数据驱动视图框架中，如何通过 CSS 动画监听 DOM 元素的渲染，以解决无法及时获取 DOM 元素的问题。作者首先指出了传统方法（如 Vue 的
via 微信公众号 前端侦探
dom 获取不到？试试 CSS 动画监听元素渲染吧
摘要: 本文介绍了在数据驱动视图框架中，如何通过 CSS 动画监听 DOM 元素的渲染，以解决无法及时获取 DOM 元素的问题。作者首先指出了传统方法（如 Vue 的
nextTick 或使用定时器）的不稳定性，并提出了使用 MutationObserver 的官方方式，但认为其过于复杂。因此，提出了一种新方法：通过为元素添加 CSS 动画，在动画触发时监听元素渲染。文章详细介绍了这一技巧的实现原理及应用场景，包括多行文本展开收起、文本超长自动滚动、元素锚定定位等。最后，作者提醒在框架中使用时需注意动画名称可能因编译而改变，建议使用 startsWith 进行判断。总体来看，这是一个简单有效的技巧，能够在保证性能的同时，解决 DOM 获取的难题。via 微信公众号 前端侦探
#阮一峰的科技周刊 #前端 #优质博文 #资源推荐 #tools
我说我忘掉了什么
科技爱好者周刊（第 286 期）：蓝色指示灯的解决方案
1. 网络推送揭秘（英文） 📓 作者写了一个简单的实现，解释渐进式 Web 应用程序的网络推送（Web Push），即怎么向用户推送通知。
2. 、VisActor 🧰 一个字节出品的前端数据可视化解决方案，分成图表库 VChart 和表格库 VTable。 #组件库
3. h5player for tampermonkey 🧰 一个油猴脚本，为 H5 视频网站增强功能（多级播放速度、截图、画中画、调节亮度、饱和度、对比度等），支持各大主流视频网站。
4. UShare 🧰 一款生成代码和文本分享卡片的网页工具，可以设定字体和字型大小。
5. Vue DevTools Next 🧰 Vue 官方开发者工具的下一个迭代，旨在增强 Vue 开发者体验。 #vue
6. yft-design 🧰 基于 fabric.js 的名片编辑应用。
7. ant-codeAI 🧰 通过 OpenAI、Gemini 等模型，生成 Web（React，Vue，Tailwind CSS）和 native（react native）代码。 #AI
8. Read Copilot 🧰 一个苹果设备的阅读器 App，支持 RSS 和 Read It Later 功能，并可以用 AI 生成总结、文章大纲和翻译。 #rss
9. vscode-common-intellisense 🧰 VS Code 插件，为主流的前端框架提供代码提示（intellisense）。 #vscode
10. Yazi 🧰 一款运行在终端里面的文件管理器，跨平台，支持图片预览，使用 Rust 语言开发，速度快。
11. 齐思 🧰 一个中文的每日科技新闻的集合网站，由 AI agent 在后面维护整理。【看了下还挺有意思的】 #AI
「软件需要有人通盘理解它的运作机制，所以单个工程师有可能比一个职业开发团队造出更好的产品。因为单个工程师花时间，完整理解了他要构建的软件，而职业开发团队总是从一个项目转移到另一个项目。
这也是为什么接手不熟悉的项目，比重建该项目要困难得多，以及为什么软件外包的质量总是如此糟糕。
-- 《突然间我懂了软件》」
我说我忘掉了什么
科技爱好者周刊（第 286 期）：蓝色指示灯的解决方案
1. 网络推送揭秘（英文） 📓 作者写了一个简单的实现，解释渐进式 Web 应用程序的网络推送（Web Push），即怎么向用户推送通知。
2. 、VisActor 🧰 一个字节出品的前端数据可视化解决方案，分成图表库 VChart 和表格库 VTable。 #组件库
3. h5player for tampermonkey 🧰 一个油猴脚本，为 H5 视频网站增强功能（多级播放速度、截图、画中画、调节亮度、饱和度、对比度等），支持各大主流视频网站。
4. UShare 🧰 一款生成代码和文本分享卡片的网页工具，可以设定字体和字型大小。
5. Vue DevTools Next 🧰 Vue 官方开发者工具的下一个迭代，旨在增强 Vue 开发者体验。 #vue
6. yft-design 🧰 基于 fabric.js 的名片编辑应用。
7. ant-codeAI 🧰 通过 OpenAI、Gemini 等模型，生成 Web（React，Vue，Tailwind CSS）和 native（react native）代码。 #AI
8. Read Copilot 🧰 一个苹果设备的阅读器 App，支持 RSS 和 Read It Later 功能，并可以用 AI 生成总结、文章大纲和翻译。 #rss
9. vscode-common-intellisense 🧰 VS Code 插件，为主流的前端框架提供代码提示（intellisense）。 #vscode
10. Yazi 🧰 一款运行在终端里面的文件管理器，跨平台，支持图片预览，使用 Rust 语言开发，速度快。
11. 齐思 🧰 一个中文的每日科技新闻的集合网站，由 AI agent 在后面维护整理。【看了下还挺有意思的】 #AI
「软件需要有人通盘理解它的运作机制，所以单个工程师有可能比一个职业开发团队造出更好的产品。因为单个工程师花时间，完整理解了他要构建的软件，而职业开发团队总是从一个项目转移到另一个项目。
这也是为什么接手不熟悉的项目，比重建该项目要困难得多，以及为什么软件外包的质量总是如此糟糕。
-- 《突然间我懂了软件》」
