#优质博文 #前端 #chatgpt #AI #组件库 #资源推荐

ProChat 1.0：开箱即用的大模型对话前端解决方案

摘要: ProChat 1.0，一个基于大模型的对话前端解决方案，提供流式输出支持和完备的Markdown、代码块展示。它特别优化了用户体验，如可编辑的会话消息和程序化控制。ProChat 支持快速集成和多样的自定义配置，适用于各种AI会话场景。

ProChat 官网 ｜ 开源地址

via 公众号 支付宝体验科技

Weixin Official Accounts Platform

Hello~ ProChat 1.0 ： 会话组件中 的“亿” 点点细节

一款开箱即用的大模型对话前端解决方案，帮助你用 80 行代码 3 分钟 快速搭建 AI 对话产品。

#优质博文 #前端 #资源推荐 #tailwind #设计资源
2024 前端图标趋势：在 TailwindCSS 中使用 SVG 图标

【可以，以后在自己项目里把 react-icons 换掉试试】

图标库网站：iconify.design / yesicon（支持中文搜索）

摘要: 这篇文章介绍了如何在 TailwindCSS 中使用 SVG 图标，特别强调了 SVG 图标的灵活性和易用性。首先，作者说明了集成 TailwindCSS 和安装 Iconify 图标库的步骤。接着，介绍了 Iconify 图标库的特点，它包含了超过 20 万个图标，并且支持按需引入。文章还提到了如何使用 TailwindCSS 插件引用图标，包括如何搜索图标、自定义图标的颜色和尺寸。此外，作者还讨论了与设计师的配合使用，以及如何自定义图标库。总结部分指出，Iconify 不仅是图标库，还提供了灵活的 SVG 图标使用方式，结合社区插件，能满足各种应用场景。最后，鼓励读者在新的一年中尝试在项目中集成 TailwindCSS 和 Iconify。

via 掘金 dongnaebi

juejin.cn

2024 前端图标趋势：在 TailwindCSS 中使用 SVG 图标 - 掘金

近年来，SVG 以灵活、矢量等特点，已经逐渐代替图片、字体等方案，成为了 Web 端图标的主流。而使用 SVG 图标的方式也多种多样，各有优劣，结合时下最流行的 TailwindCSS 使用是较为优雅

#优质博文 #前端 #css
dom 获取不到？试试 CSS 动画监听元素渲染吧

摘要: 本文介绍了在数据驱动视图框架中，如何通过 CSS 动画监听 DOM 元素的渲染，以解决无法及时获取 DOM 元素的问题。作者首先指出了传统方法（如 Vue 的 nextTick 或使用定时器）的不稳定性，并提出了使用 MutationObserver 的官方方式，但认为其过于复杂。因此，提出了一种新方法：通过为元素添加 CSS 动画，在动画触发时监听元素渲染。文章详细介绍了这一技巧的实现原理及应用场景，包括多行文本展开收起、文本超长自动滚动、元素锚定定位等。最后，作者提醒在框架中使用时需注意动画名称可能因编译而改变，建议使用 startsWith 进行判断。总体来看，这是一个简单有效的技巧，能够在保证性能的同时，解决 DOM 获取的难题。

via 微信公众号 前端侦探

Weixin Official Accounts Platform

dom 获取不到？试试 CSS 动画监听元素渲染吧

在数据驱动视图的框架下，你最头疼的事情是什么？没错，就是获取dom。大部分业务逻辑都可以在数据层面进行处理，

#阮一峰的科技周刊 #前端 #优质博文 #资源推荐 #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

「软件需要有人通盘理解它的运作机制，所以单个工程师有可能比一个职业开发团队造出更好的产品。因为单个工程师花时间，完整理解了他要构建的软件，而职业开发团队总是从一个项目转移到另一个项目。

这也是为什么接手不熟悉的项目，比重建该项目要困难得多，以及为什么软件外包的质量总是如此糟糕。

-- 《突然间我懂了软件》」

PQVST

Demystifying Web Push Notifications

For my recent One Day Build: Expense Tracking project I wanted to enable notifications in a progressive web app. ChatGPT struggled to generate any good code for me, and I also struggled to find any minimal clear explanations online.

#碎碎念 #美食警告
今天去吃馋了好久的一家烧肉店
好吃死我了呜呜呜呜呜呜呜呜呜

Card Hover

👉Source Code

Save & Share 🚀

@frontend_trend✅

#碎碎念 #新装备
办公室装备喜+1升降桌
很沉 很稳 很舒服

#优质博文 #前端 #新标准 #html
原生 details 支持手风琴模式了！

AI摘要：HTML的 details 元素最近新增了一个 name 属性，这一更新带来了手风琴模式的支持。details 元素通常与 summary 元素配合使用，提供了原生的展开和收起效果。通过CSS自定义，可以去除 summary 前的黑色三角形，并支持嵌套以实现树形结构目录。新增的 name 属性允许将多个 details 元素关联起来，实现手风琴效果，即打开一个元素时关闭其他元素。由于兼容性问题，可能需要通过 JavaScript 进行兼容性处理。目前，可以通过检测 'name' in document.createElement('details') 来确认浏览器是否支持此新特性。尽管这一特性可以通过 JavaScript 实现，但其提供了一种无需额外脚本即可实现的原生方法。

via 微信公众号 前端侦探

Weixin Official Accounts Platform

原生details支持手风琴模式了！

最近details元素新增了一个name属性，如下别看这只是一个普普通通的属性，这可是带来了一个全新的模式，

#优质博文 #前端
Frontend predictions for 2024

AI 生成的摘要：2023年前端领域的发展迅猛，焦点包括抢夺和创新服务器端渲染（SSR）市场、AI的快速发展、新的Web渲染器和JavaScript引擎的大量涌现，以及众多新兴力量挑战现有主流技术。SSR技术由Vercel大力推动，引发了业界对使用SSR服务的广泛关注。同时，AI的应用在前端流程中也逐渐增多，例如ChatGPT和GitHub Copilot已成为日常编程的辅助工具。此外，浏览器引擎和JS引擎的发展也是焦点之一，包括新的Ladybird浏览器和Hermes JS引擎的革新。跨平台框架方面，React Native优势明显，Flutter面临挑战，同时有新技术如Dioxus（基于Rust的GUI应用开发框架）出现。在UI框架方面，大型框架仍占主导地位，但Svelte和其他框架通过创新特性寻求突破。构建系统方面，新一代构建工具如SWC和Esbuild越发受到青睐。而在开发工具方面，对现有工具的不满导致新工具的出现。预计2024年将看到工具和框架的更多整合，AI技术将更深入地融入日常开发流程中。

via Whatever, Jamie

Buttondown

Frontend predictions for 2024

It's been a remarkable year for frontend. We've seen a gold rush to capture – and invent – the server-side rendering (SSR) market; the advancing tentacles of...