AgedCoffee

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

• 技术
  • Combining AI with React for a Smarter Frontend
  • AN ATTEMPTED TAXONOMY OF WEB COMPONENTS
  • Getting started with CSS container queries
  • Your Website’s URLs Can and Should Be Beautiful
• 工具
  • pushdeer
  • code-block-writer
  • h3
  • linkinator
  • inpaint-web
  • The Security Vulnerabilities of The Target="_Blank" Attribute
• 更新
  • Remix 发布了 v2.3.0 版本
  • waku 0.17.0
  • Announcing TypeScript 5.3
  • Redux Toolkit 2.0
• AI
  • Introducing GPT Crawler - Turn Any Site Into a Custom GPT With Just a URL
  • make-real-starter
  • build-it-figma-ai
  • autodraw
• 其他

技术#

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 助手。

• GPT Crawler 是一个新的开源项目，可以根据提供的网站 URL 创建自定义的 GPT 助手。
• 使用 GPT Crawler 可以从网站上获取最新的信息，创建能够回答特定问题的定制化聊天机器人。
• 使用 GPT Crawler 需要克隆项目、安装依赖、配置爬虫，并上传知识文件到 ChatGPT 或 OpenAI API，以创建自定义 GPT 助手。

make-real-starter#

tldraw 官方出的用于将草图变成 UI 代码的工具

build-it-figma-ai#

Figma 生成 UI 代码的插件

autodraw#

根据你已经绘制的图来推断你想要画什么

其他#

遥远的事物总是对我有一种永恒的吸引。（I am tormented with an everlasting itch for things remote.）

-- 《白鲸》，美国经典小说