2023-第四十六周

xFeedBeta

@agedcoffee

AgedCoffee·a year ago

musteries-20231124_212923-404726484_17966668169653756_8216822864617576679_n

该周报主要为各个地方内容的汇总整理

技术
工具
更新
AI
其他

技术

Combining AI with React for a Smarter Frontend

前端开发需要尽早融入人工智能技术。开发者可以使用 React 和 AI 技术构建智能应用，包括聊天机器人和个性化推荐等功能。借助技术栈，如 Next.js、OpenAI 的 Chat GPT 和 MongoDB，开发者可以实现智能的 React 应用程序。通过向量化和语义搜索，应用程序可以提供与用户查询相关的信息。此外，通过 RAG 框架，可以将实时数据与语言模型结合，提供更智能、上下文感知的应用。人工智能技术的应用不仅可以提升用户体验，还可以为业务决策提供更准确、及时的数据。

前端开发需要尽快引入人工智能，以在应用程序中构建智能功能，并从数据中获取丰富的洞察。
开发者可以使用嵌入模型生成嵌入向量，并将其存储在向量数据库中，以便通过自然语言查询从自定义数据中找到相关信息。
借助技术堆栈，如 Next.js、OpenAI 的 Chat GPT、LangChain 和 MongoDB，可以构建更智能、更强大的 React 应用程序。

AN ATTEMPTED TAXONOMY OF WEB COMPONENTS

这篇文章讨论了作者在构建 Web 组件方面的经验和观点。作者将 Web 组件分为 HTML Web 组件和 JavaScript Web 组件两种类型，并介绍了各种不同的组件示例。文章还提到了使用 JavaScript 注入 CSS 和使用 Shadow DOM 的一些细节和注意事项。同时，作者还指出了一些组件无法成为 Web 组件的限制，并鼓励读者尝试使用 Web 组件来创建可移植和持久的代码。

HTML Web Components 是一种零依赖、无需使用上游库的组件，可以通过添加行为和交互性来增强网页功能。
JavaScript Web Components 是一种可选用的低优先级组件，适用于与现有内容配对的场景，但在性能和耐用性方面存在一些问题。
创建 HTML Web Components 需要注意避免过度依赖 JavaScript 注入 CSS，并要考虑网页性能和可持续性。

Getting started with CSS container queries

本文介绍了容器查询（container queries）的概念和用法。容器查询是一种查询元素大小的方法，可以根据容器的大小来样式化其子元素。与传统的媒体查询相比，容器查询更加灵活，可以简化代码。文章还以一个新闻列表布局为例，演示了如何使用容器查询创建响应式的文章组件布局。同时，还介绍了容器查询的新语法和嵌套容器的使用。

容器查询是一种新的网页布局技术，可以根据元素的大小来应用样式。
容器查询可以替代媒体查询，使布局更灵活、代码更简洁。
容器查询可以用于响应式设计，使网页在不同屏幕大小下自动适应布局。

Your Website’s URLs Can and Should Be Beautiful

这篇文章讨论了美化 URL 的重要性和技巧。美化 URL 可以提供更具可读性和用户友好性的网站体验，同时还有助于 SEO。文章提供了一些技巧，如尽量使用较少的 URL 段落、URL 的 slug 不需要与标题完全匹配、有时可以删除无意义的停用词等。通过这些技巧，可以创建简洁、清晰且美观的 URL。

URL 的美丽在于它能提供有用的人类可读上下文，使用户在点击链接之前能够对其内容有所了解。
好的 URL 既要简洁，又要清晰明了，能够提供足够的信息，但不至于过长和繁琐。
为了创建美丽的 URL，应尽量少使用 URL 段，同时注意 URL 的结构和内容组织，避免过多的层级和冗余信息。

工具

pushdeer

开放源码的无 App 推送服务，iOS14+ 扫码即用。亦支持快应用/iOS 和 Mac 客户端、Android 客户端、自制设备

code-block-writer

模拟代码编写

h3

⚡️ 极简的高性能和可移植性 H(TTP) 框架

linkinator

🐿 在您的网站上快速移动并找到所有损坏的链接。

inpaint-web

一个由 WebGPU 和浏览器上的 WASM 驱动的免费开源修复工具

The Security Vulnerabilities of The Target="_Blank" Attribute

这段文字讲解了 HTML 中的超链接标签和目标属性的使用。然后提到了使用 target="_blank"属性时存在的安全漏洞，即新页面可以访问父页面的 window 对象，从而进行恶意重定向。解决这个问题的方法是在超链接标签中添加 rel="noopener noreferrer"属性，使新页面在独立的进程中运行，防止 window.opener 被设置。此外，还介绍了 rel="noreferrer"属性可以防止发送 referrer 请求头信息。最后强调了添加 rel="noopener"或 rel="noreferrer"属性可以提高网站的安全性和性能。

HTML 超链接标签允许创建一个可点击的元素，用于引用网页中的另一个文档或部分。
目标属性用于指定链接的打开方式，可以在当前窗口或新窗口中打开链接。
使用 target="_blank"时，应添加 rel="noopener noreferrer"属性来防止利用 window.opener 进行恶意操作。

更新

Remix 发布了 v2.3.0 版本

Remix 发布了 v2.3.0 版本，其中包括了一些重要的更改和新功能。主要更改包括稳定化了 useBlocker 钩子函数，新增了 unstable_flushSync API 用于同步更新 DOM，以及一些较小的改进和修复。此外，还更新了一些依赖库，并提供了详细的变更列表。同时，还介绍了之前的版本 v2.2.0 中的重要更改，包括对 Vite 的支持和一些新的 API。

Remix 发布 2.3.0 版本，添加了稳定的 useBlocker 功能和 unstable_flushSync API，更新了依赖项。"
Remix 发布 2.2.0 版本，引入了对 Vite 的支持，新增了一些 API 和模板，以及对 fetcher 和持久化功能的改进。"
Remix 发布 2.1.0 版本，引入了视图转换功能和稳定的 createRemixStub，还进行了一些次要改动和更新依赖项。"

waku 0.17.0

支持全量的 SSR

Announcing TypeScript 5.3

TypeScript 5.3 发布了，新增了一些功能和优化。其中包括导入属性、稳定支持导入类型中的 resolution-mode、switch (true) 的缩小范围、通过 Symbol.hasInstance 进行 instanceof 缩小范围、检查实例字段上的 super 属性访问等。这些功能和优化使得 TypeScript 更加强大和易用。

TypeScript 5.3 是一种为 JavaScript 添加类型语法的语言，用于类型检查和增强编辑器工具。
新版本中引入了导入属性、分支条件细化、布尔值比较细化等新特性。
还支持 import 类型中的 resolution-mode 属性，以及 super 关键字在实例字段中的访问检查。

Redux Toolkit 2.0

这个发布候选版修改了在 createSlice 中定义异步 thunk 的方法，并改进了选择器的使用和实现。此外，还介绍了即将发布的 Redux Toolkit 2.0、Redux core 5.0 和 React-Redux 9.0 版本。此版本还包括了一些其他的改进和变化。

在 Redux Toolkit 2.0 中，现在可以使用 buildCreateSlice 创建带有异步 thunk 功能的定制化 createSlice 方法。
createSlice 现在会为所有 slice 对象添加一个 selectSlice 字段，用于简单的状态查找。
entityAdapter.getSelectors() 现在可以接受自定义的选择器创建函数，以及定制化的记忆选项。

AI

Introducing GPT Crawler - Turn Any Site Into a Custom GPT With Just a URL

这篇文章介绍了一个名为 GPT Crawler 的开源项目，它可以帮助我们快速创建自定义的 GPT 助手。通过提供一个网站 URL，它可以爬取网站的内容作为 GPT 的知识库。这种方法可以用于创建具有最新信息的定制化机器人。文章还介绍了如何使用 GPT Crawler，配置爬虫并上传知识文件到 ChatGPT 或 OpenAI API，从而创建自定义的 GPT 助手。