呜啦!日常碎碎念,偶尔掉落优质前端博文推荐、学习资源等
网页:https://tg.cosine.ren
本频道的搜索Bot 来辣 👉 @cosSearchBot
私聊直接发消息就可以搜索啦~
🔖tags
#优质博文 #资源推荐 #博客更新 #碎碎念 #项目更新 #手工 #书摘 #阮一峰的科技周刊 #新动态
图频:Cosine 🎨 Gallery @CosineGallery
猫片: @cosine_cat
网页:https://tg.cosine.ren
本频道的搜索Bot 来辣 👉 @cosSearchBot
私聊直接发消息就可以搜索啦~
🔖tags
#优质博文 #资源推荐 #博客更新 #碎碎念 #项目更新 #手工 #书摘 #阮一峰的科技周刊 #新动态
图频:Cosine 🎨 Gallery @CosineGallery
猫片: @cosine_cat
#前端 #优质博文 #新动态 #工程化 #eslint #css
ESLint 现在正式支持 CSS 的 Lint 检查 https://eslint.org/blog/2025/02/eslint-css-support/
ESLint 现在正式支持 CSS 的 Lint 检查 https://eslint.org/blog/2025/02/eslint-css-support/
AI 摘要:本文宣布 ESLint 正式支持 CSS 代码检查,通过引入官方插件 @eslint/css 实现。文章详细介绍了插件的安装与配置,包括如何在 ESLint 配置文件中启用 CSS linting 以及使用基于 CSSTree 的解析器来执行规则检查。文中列举了多条内置规则,如禁止重复导入、空代码块、无效 at-rule、无效属性检查等,并特别讲解了严格解析与容错解析(tolerant parsing)模式的差异。此外,文章提供了自定义语法配置的示例,展示了如何为自定义 at-rule 或使用 Tailwind 风格语法进行配置。最后,还介绍了如何创建自定义规则和利用 Code Explorer 进行调试,从而扩展 ESLint 检查多语言代码的能力,旨在帮助开发者维持代码一致性和质量。
#AI #parser #transform
LlamaParse: 将非结构化数据转换为 LLM 优化格式
https://www.llamaindex.ai/llamaparse
最好的 genAI 原生解析平台,专为将复杂文档(包含表格、图表、图像、流程图等)转化为适用于 LLM 应用程序的简洁数据而构建
#开源
https://github.com/run-llama/llama_index
#RAG #优质博文
利用LlamaParse从文档中创建知识图谱 https://zhuanlan.zhihu.com/p/699456593
LlamaParse: 将非结构化数据转换为 LLM 优化格式
https://www.llamaindex.ai/llamaparse
最好的 genAI 原生解析平台,专为将复杂文档(包含表格、图表、图像、流程图等)转化为适用于 LLM 应用程序的简洁数据而构建
#开源
https://github.com/run-llama/llama_index
#RAG #优质博文
利用LlamaParse从文档中创建知识图谱 https://zhuanlan.zhihu.com/p/699456593
LlamaParse是一款专有的解析工具,用于处理具有 嵌入式对象(如表格和图表)的复杂文档,与 Llamalndex*的摄取和检索功能无缝集成。此集成 能够构建针对复杂、半结构化文档的检索系统,有 助于回答以往难以处理的复杂问题。此外,引入可 管理的摄取和检索API,简化RAG应用的加载、处 理和存储数据的流程。 本文将演示如何将LlamaParse与Neo4j集成创建知 识图谱,从而使RAG应用更加准确和强大。
#开源 #设计 #webGL
https://fxtwitter.com/uuuuuulala/status/1892292043650576696
Liquid Logo 是一个为徽标添加 Apple 风格液态效果的开源项目。它使用 WebGL 技术模拟光滑流动的玻璃质感,使标志呈现类似 iOS/macOS 视觉风格的动态反射效果。该项目由 paper 团队开发,并提供在线演示 https://liquid.paper.design ,用户可以实时体验该效果。此外,源码已开源,开发者可通过 GitHub 仓库 https://github.com/paper-design/liquid-logo 获取代码并进行自定义。
https://fxtwitter.com/uuuuuulala/status/1892292043650576696
Liquid Logo 是一个为徽标添加 Apple 风格液态效果的开源项目。它使用 WebGL 技术模拟光滑流动的玻璃质感,使标志呈现类似 iOS/macOS 视觉风格的动态反射效果。该项目由 paper 团队开发,并提供在线演示 https://liquid.paper.design ,用户可以实时体验该效果。此外,源码已开源,开发者可通过 GitHub 仓库 https://github.com/paper-design/liquid-logo 获取代码并进行自定义。
#开源 #profile #template
这个好诶,可以作为灵感参考。
developer-portfolio-v2 是一个基于 Nuxt.js 3.0 构建的开源开发者个人主页模板,可托管在 Netlify 。该项目提供了一种易于配置的方式来展示个人信息、项目和联系方式,灵感来源于代码编辑器,并包含主页上的贪吃蛇游戏,该项目采用 MIT 许可,可自由 Fork 和修改,适合开发者或设计师快速搭建个人作品集网站。
https://developer-portfolio-v2.netlify.app/
这个好诶,可以作为灵感参考。
developer-portfolio-v2 是一个基于 Nuxt.js 3.0 构建的开源开发者个人主页模板,可托管在 Netlify 。该项目提供了一种易于配置的方式来展示个人信息、项目和联系方式,灵感来源于代码编辑器,并包含主页上的贪吃蛇游戏,该项目采用 MIT 许可,可自由 Fork 和修改,适合开发者或设计师快速搭建个人作品集网站。
https://developer-portfolio-v2.netlify.app/
#优质视频 #追番
看这是什么!!!这都出了游戏人生能不能出第二季!啊!
【TV动画】某科学的超电磁炮 第四季 制作决定PV【MCE汉化组】
@夏日幻听MCE:
资讯 - 官方
某科学的超电磁炮 第四季 制作决定PV
看这是什么!!!这都出了游戏人生能不能出第二季!啊!
【TV动画】某科学的超电磁炮 第四季 制作决定PV【MCE汉化组】
@夏日幻听MCE:
资讯 - 官方
某科学的超电磁炮 第四季 制作决定PV
#前端 #svg #icon #开源 #动画 #组件库 #动态图标
https://github.com/cyberalien/line-md
Line MD 是一个基于 SVG 的开源图标库,专为现代 Web 设计和开发优化。其特点包括轻量级、可缩放、可自定义,并支持多种前端框架(如 React、Vue 等)。该库提供了一组简洁、线性的图标,适用于 UI 设计。项目托管在 GitHub 上,允许开发者贡献新图标或修改现有图标,适用于需要高质量矢量图标的 Web 应用开发。
可以在 https://icon-sets.iconify.design/line-md/ 上浏览所有图标
Refs: 另一个动态图标库 https://icons.pqoqubbw.dev/ 是使用 motion + svg
https://github.com/cyberalien/line-md
Line MD 是一个基于 SVG 的开源图标库,专为现代 Web 设计和开发优化。其特点包括轻量级、可缩放、可自定义,并支持多种前端框架(如 React、Vue 等)。该库提供了一组简洁、线性的图标,适用于 UI 设计。项目托管在 GitHub 上,允许开发者贡献新图标或修改现有图标,适用于需要高质量矢量图标的 Web 应用开发。
可以在 https://icon-sets.iconify.design/line-md/ 上浏览所有图标
Refs: 另一个动态图标库 https://icons.pqoqubbw.dev/ 是使用 motion + svg
#优质视频 #脱口秀
热评说得好啊:你敲代码也就python core dev的水平,但脱口秀水平是一等一的高[打call]
不是,你们去迪士尼,也玩的这么痛苦么?
@码农高天:
搞笑 - 假期去了一趟佛罗里达奥兰多的迪士尼,痛并快乐着……
热评说得好啊:你敲代码也就python core dev的水平,但脱口秀水平是一等一的高[打call]
不是,你们去迪士尼,也玩的这么痛苦么?
@码农高天:
搞笑 - 假期去了一趟佛罗里达奥兰多的迪士尼,痛并快乐着……
#优质博文 #前端 #react #工程化
How to start a React Project [2025]
via Robin Wieruch
How to start a React Project [2025]
AI 摘要:Robin Wieruch 在本文中概述了 2025 年启动 React 项目的三种主要方式,并分析了各自的优缺点,以帮助开发者根据需求选择合适的方案。
1. React + Vite (适合学习者和轻量级 SPA 开发)
- 优势 :Vite 是 create-react-app (CRA) 的轻量级替代方案,构建速度快,支持 SPA/CSR,可选 SSR,无框架束缚,适合学习 React 本身。
- 劣势 :默认以 SPA/CSR 为主,不提供内置架构,需自行选择路由、状态管理等库。
2. React + Next.js (适合全栈开发和企业级应用)
- 优势 :提供 SSR、SSG、ISR、CSR 等多种渲染模式,支持 React Server Components (RSC) 和 React Server Functions (RSF),可构建完整的前后端一体化应用,内置 SEO 和优化功能。
- 劣势 :学习曲线陡峭,框架更新快,需适应 Next.js 的特定模式和变化。
3. React + Astro (适合内容驱动型网站)
- 优势 :基于 MPA(多页应用)架构,默认高性能,支持 SEO,采用“岛屿架构”实现选择性水合,适用于博客、文档等内容型网站。
- 劣势 :不适用于动态 Web 应用,但官方正在探索此方向。
此外,文章还提及了 React Native + Expo(移动端)、Tauri/Electron(桌面端)、Monorepo(Turborepo 组织多个框架) 以及 Vue/Svelte/Solid/Qwik 等其他方案。
推荐选择
- 初学者或轻量级 SPA :Vite + React
- 全栈应用或企业级开发 :Next.js + React
- 内容型网站 :Astro + React
- 不适合 Next.js,但需要 SSR 框架 :可考虑 TanStack Start 或 React Router(框架模式)。
via Robin Wieruch
#优质博文 #前端 #tools
1. CSS 的 backdrop-filter 属性(英文) 本文介绍 backdrop-filter 属性,可以产生毛玻璃的效果。 #css
2. 基于 signal 的 Web 组件(英文) #html #WebComponents
作者介绍自己写的一个 Web 组件,可以在不加其他 JS 库的情况下,实现 signal 功能。
3. 鸿蒙 ArkTS VSCode 插件 #vscode #ArkTS #插件 #鸿蒙
ArkTS 是华为鸿蒙系统的开发语言,属于 TypeScript 的超集,这是它的 VSCode 插件。
4. RAG Web UI #AI #RAG
一个开源的 AI 桌面应用,可以上传文档,生成本地的知识库问答系统,基于 RAG(检索增强生成)技术。
5. TEN Agent #AI #agent #语音
一个 AI 的工具框架,快速打造语音相关的 AI 应用。
6. 富文本编辑器比较2025版(英文) #富文本 #编辑器
这个页面详细比较了 JS 的富文本"所见即所得"编辑器,一共十几个库,详细介绍每个库的特点
via #阮一峰的科技周刊 337
1. CSS 的 backdrop-filter 属性(英文) 本文介绍 backdrop-filter 属性,可以产生毛玻璃的效果。 #css
backdrop-filter 是一个强大的 CSS 属性,它可以对元素后面的内容应用模糊、亮度调整等滤镜效果,从而创造出玻璃拟态(Glassmorphism)等视觉效果。文章介绍了 backdrop-filter 的基本用法,如 blur() 进行模糊处理,以及 brightness() 进行亮度调整。同时,作者强调了 backdrop-filter 仅影响元素背景,不会影响其自身内容。此外,文章探讨了浏览器兼容性问题,指出 Safari 早期支持较好,而部分浏览器(如 Firefox)需要启用实验性功能才能使用。最后,作者提供了示例代码,并建议开发者结合 background 颜色和 backdrop-filter 以获得最佳视觉效果。
2. 基于 signal 的 Web 组件(英文) #html #WebComponents
作者介绍自己写的一个 Web 组件,可以在不加其他 JS 库的情况下,实现 signal 功能。
本文探讨了在 HTML 中直接定义 信号(Signals) 的可能性,提出 <x-signal> 自定义元素,使其能够管理状态并自动更新 UI,而无需依赖 JavaScript 框架。该方法基于 HTML-based state 概念,直接从 HTML 解析初始值,并支持类型转换、动态渲染、自定义格式化及派生状态计算。最终,作者认为 <x-signal> 代表了一种更细粒度的 **Islets 架构**,在静态 HTML 中提供轻量级的响应式交互能力。
3. 鸿蒙 ArkTS VSCode 插件 #vscode #ArkTS #插件 #鸿蒙
ArkTS 是华为鸿蒙系统的开发语言,属于 TypeScript 的超集,这是它的 VSCode 插件。
4. RAG Web UI #AI #RAG
一个开源的 AI 桌面应用,可以上传文档,生成本地的知识库问答系统,基于 RAG(检索增强生成)技术。
5. TEN Agent #AI #agent #语音
一个 AI 的工具框架,快速打造语音相关的 AI 应用。
6. 富文本编辑器比较2025版(英文) #富文本 #编辑器
这个页面详细比较了 JS 的富文本"所见即所得"编辑器,一共十几个库,详细介绍每个库的特点
本文分析了主流的富文本编辑器框架,帮助开发者在 2025 年做出最佳选择。文章涵盖 Lexical、ProseMirror、Slate、Tiptap、Quill 等编辑器,并从 可扩展性、性能、易用性、社区支持 等方面进行了对比。
• Lexical (Meta 开源):高性能、模块化、适合复杂应用,但生态仍在发展中。
• ProseMirror :功能强大、灵活,但 API 复杂,入门门槛较高。
• Slate :React 友好,完全可定制,但文档有限,维护情况不稳定。
• Tiptap (基于 ProseMirror):提供更简洁的 API 和更好的 TypeScript 支持,适合现代 Web 应用。
• Quill :易用,适合基本需求,但扩展性受限。
结论: 如果你需要高扩展性和现代化 API,Lexical 或 Tiptap 是更好的选择;如果追求稳定和成熟方案, ProseMirror 仍然值得考虑。
via #阮一峰的科技周刊 337