該周報主要為各個地方內容的彙總整理
技術#
結合 AI 與 React 打造更智能的前端#
前端開發需要儘早融入人工智能技術。開發者可以使用 React 和 AI 技術構建智能應用，包括聊天機器人和個性化推薦等功能。借助技術堆棧，如 Next.js、OpenAI 的 Chat GPT 和 MongoDB，開發者可以實現智能的 React 應用程序。通過向量化和語義搜索，應用程序可以提供與用戶查詢相關的信息。此外，通過 RAG 框架，可以將實時數據與語言模型結合，提供更智能、上下文感知的應用。人工智能技術的應用不僅可以提升用戶體驗，還可以為業務決策提供更準確、及時的數據。
- 前端開發需要儘快引入人工智能，以在應用程序中構建智能功能，並從數據中獲取豐富的洞察。
- 開發者可以使用嵌入模型生成嵌入向量，並將其存儲在向量數據庫中，以便通過自然語言查詢從自定義數據中找到相關信息。
- 借助技術堆棧，如 Next.js、OpenAI 的 Chat GPT、LangChain 和 MongoDB，可以構建更智能、更強大的 React 應用程序。
網頁組件的嘗試性分類#
這篇文章討論了作者在構建 Web 組件方面的經驗和觀點。作者將 Web 組件分為 HTML Web 組件和 JavaScript Web 組件兩種類型，並介紹了各種不同的組件示例。文章還提到了使用 JavaScript 注入 CSS 和使用 Shadow DOM 的一些細節和注意事項。同時，作者還指出了一些組件無法成為 Web 組件的限制，並鼓勵讀者嘗試使用 Web 組件來創建可移植和持久的代碼。
- HTML Web Components 是一種零依賴、無需使用上游庫的組件，可以通過添加行為和互動性來增強網頁功能。
- JavaScript Web Components 是一種可選用的低優先級組件，適用於與現有內容配對的場景，但在性能和耐用性方面存在一些問題。
- 創建 HTML Web Components 需要注意避免過度依賴 JavaScript 注入 CSS，並要考慮網頁性能和可持續性。
開始使用 CSS 容器查詢#
本文介紹了容器查詢（container queries）的概念和用法。容器查詢是一種查詢元素大小的方法，可以根據容器的大小來樣式化其子元素。與傳統的媒體查詢相比，容器查詢更加靈活，可以簡化代碼。文章還以一個新聞列表佈局為例，演示了如何使用容器查詢創建響應式的文章組件佈局。同時，還介紹了容器查詢的新語法和嵌套容器的使用。
- 容器查詢是一種新的網頁佈局技術，可以根據元素的大小來應用樣式。
- 容器查詢可以替代媒體查詢，使佈局更靈活、代碼更簡潔。
- 容器查詢可以用於響應式設計，使網頁在不同螢幕大小下自動適應佈局。
您的網站 URL 可以且應該是美麗的#
這篇文章討論了美化 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 驅動的免費開源修復工具
target="_blank" 屬性的安全漏洞#
這段文字講解了 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
宣布 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#
介紹 GPT 爬蟲 - 只需一個 URL 將任何網站轉換為自定義 GPT#
這篇文章介紹了一個名為 GPT 爬蟲的開源項目，它可以幫助我們快速創建自定義的 GPT 助手。通過提供一個網站 URL，它可以爬取網站的內容作為 GPT 的知識庫。這種方法可以用於創建具有最新信息的定制化機器人。文章還介紹了如何使用 GPT 爬蟲，配置爬蟲並上傳知識文件到 ChatGPT 或 OpenAI API，從而創建自定義的 GPT 助手。
- GPT 爬蟲是一個新的開源項目，可以根據提供的網站 URL 創建自定義的 GPT 助手。
- 使用 GPT 爬蟲可以從網站上獲取最新的信息，創建能夠回答特定問題的定制化聊天機器人。
- 使用 GPT 爬蟲需要克隆項目、安裝依賴、配置爬蟲，並上傳知識文件到 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.）
-- 《白鯨》，美國經典小說